How to use the @commercetools-uikit/design-system.customProperties.borderRadius4 function in @commercetools-uikit/design-system

render() {
    return (
      
        <div> {
            // Avoid closing when the searchContainer itself is clicked</div>

const getButtonStyles = (props = { isStyleButton: true }) => [
  css`
    border: 0;
    font-family: ${vars.fontFamilyDefault};
    border-radius: ${vars.borderRadius4};
    cursor: pointer;
    font-size: ${vars.fontSizeForInput};
    color: ${vars.colorSolid};
    display: flex;
    justify-content: center;
    align-items: center;
    padding: ${props.isStyleButton
      ? `calc(${vars.spacingXs} - 1px) ${vars.spacingS}`
      : vars.spacingXs};

    &:hover {
      background-color: ${vars.colorNeutral90};
    }
  `,
  props.isIndeterminate &&
    css`

const getStyles = props => {
  const styles = [];

  if (!['heading', 'spacing'].includes(props.type)) {
    styles.push(css`
      text-align: center;
      padding: ${vars.spacingS} 0;
      cursor: default;
      border-radius: ${vars.borderRadius4};
    `);
  }
  if (['heading', 'spacing'].includes(props.type)) {
    styles.push(css`
      text-align: center;
      padding: ${vars.spacingS} 0;
      cursor: default;
      color: ${vars.colorNeutral60};
    `);
  }
  if (props.isHighlighted) {
    styles.push(
      css`
        background-color: ${vars.colorNeutral90};
      `
    );

const getRadiusBySize = props => {
  switch (props.shape) {
    case 'dot':
      switch (props.size) {
        case 's':
          return customProperties.borderRadius4;
        case 'm':
          return '8px';
        case 'l':
          return '12px';
        case 'xl':
          return '16px';
        default:
          return 'none';
      }
    case 'rect':
      return customProperties.borderRadius4;
    default:
      return 'none';
  }
};

const getSizeStyles = size => {
  switch (size) {
    case 'small':
      return css`
        border-radius: ${vars.borderRadius4};
        padding: 0 ${vars.spacingS} 0 ${vars.spacingS};
        height: ${vars.smallButtonHeight};
      `;

    case 'big':
      return css`
        padding: 0 ${vars.spacingM} 0 ${vars.spacingM};
        height: ${vars.bigButtonHeight};
        border-radius: ${vars.borderRadius6};
      `;

    default:
      return css``;
  }
};

import { customProperties } from '@commercetools-uikit/design-system';
import IntlController from './intl-controller';
import KnobsController from './knobs-controller';

const PlaygroundContainer = styled.div`
  background-color: ${customProperties.colorNeutral95};
  border: 16px solid ${customProperties.colorNeutral95};
  border-radius: ${customProperties.borderRadius6};
`;
const PreviewContainer = styled.div`
  position: relative;
  width: 100%;
  overflow: hidden;
  height: ${props => props.height};
  background-color: ${customProperties.colorSurface};
  border-radius: ${customProperties.borderRadius4}
    ${customProperties.borderRadius4} 0 0;
  border-bottom: 1px solid ${customProperties.colorNeutral90};
`;

const PlaygroundController = props => {
  const [isPanelOpen, setIsPanelOpen] = React.useState(false);
  const togglePanel = () => {
    setIsPanelOpen(!isPanelOpen);
  };
  React.useLayoutEffect(() => {
    window.dispatchEvent(new Event('resize'));
  }, [isPanelOpen]);
  return (
    
      {intlProps => (

const getShapeStyles = (shape, size) => {
  switch (shape) {
    case 'round':
      return css`
        border-radius: 50%;
      `;
    case 'square':
      switch (size) {
        case 'small':
          return css`
            border-radius: ${vars.borderRadius2};
          `;
        case 'medium':
          return css`
            border-radius: ${vars.borderRadius4};
          `;
        case 'big':
          return css`
            border-radius: ${vars.borderRadius6};
          `;
        default:
          return css``;
      }
    default:
      return css``;
  }
};
const getSizeStyles = size => {