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

return vars.constraintS;
    case 'm':
      return vars.constraintM;
    case 'l':
      return vars.constraintL;
    case 'xl':
      return vars.constraintXl;
    case 'scale':
    default:
      return vars.constraintScale;
  }
};

export const Body = styled.div`
  font-family: inherit;
  border-radius: ${vars.borderRadius6};
  padding: ${vars.spacingXs} ${vars.spacingS};
  border: 'none';
  box-shadow: ${vars.shadow15};
  font-size: 0.857rem;
  opacity: 0.95;
  color: ${vars.colorSurface};
  background-color: ${vars.colorAccent};
`;
// here we use object styles so we can spread these
// with the styles we get from react-popper :D
// eslint-disable-next-line import/prefer-default-export
export const getBodyStyles = ({ constraint, placement, customStyles }) => ({
  fontFamily: 'inherit',
  margin: `${getOffsetMargin({ placement })} !important`,
  maxWidth: getMaxWidth({ constraint }),
  // so hovering over the tooltip when the tooltip overlaps the component

${pageStyles};
        background-color: ${getColorByType(props.type)};
      `;
    case NOTIFICATION_DOMAINS.PAGE:
      return pageStyles;
    case NOTIFICATION_DOMAINS.SIDE: {
      const sideStyles = css`
        ${baseStyles};
        animation: ${showNotificationAnimation} 0.3s forwards;
        padding: ${customProperties.spacingM} ${customProperties.spacingM}
          ${customProperties.spacingM} 50px !important;
        text-align: left;
        background: ${customProperties.colorSurface};
        border: 1px solid ${getColorByType(props.type)};
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.24);
        border-radius: ${customProperties.borderRadius6};
        word-break: break-word;
        hyphens: auto; /* still not supported on Chrome */
      `;

      if (props.fixed) return sideStyles;
      return css`
        ${sideStyles};
        animation: ${showNotificationSideAnimation} 0.3s forwards;
        position: relative;
        z-index: 10000;
        margin-top: ${customProperties.spacingL} !important;
        right: ${customProperties.spacingXl};
        float: right;
        clear: both;
        max-width: 50%;
      `;

`,
];

const DropdownContainer = styled.div`
  position: absolute;
  cursor: pointer;
  font-size: ${vars.fontSizeForInput};
  top: ${vars.spacingXs};
  margin-top: ${vars.spacingXs};
  left: 0;
  white-space: nowrap;
  background: ${vars.colorSurface};
  overflow: hidden;
  z-index: 9999;
  border: 1px solid ${vars.colorPrimary};
  border-radius: ${vars.borderRadius6};
`;

export { DropdownContainer, DropdownItem, getButtonStyles };

__DEV_CONFIG__: {
        menuLoader: props.DEV_ONLY__loadAppbarMenuConfig,
        menuKey: 'appBar',
      },
    },
  });

  const menuLinks = (applicationsMenu && applicationsMenu.appBar) || [];

  return (
    <div>
      <div>
        
          
            </div></div>

const getHeaderContainerStyles = ({ isDisabled, isOpen, isSticky, theme }) => {
  const baseStyles = css`
    position: relative;
    cursor: pointer;
    border-top-left-radius: ${vars.borderRadius6};
    border-top-right-radius: ${vars.borderRadius6};
    background-color: ${theme === 'light'
      ? vars.colorSurface
      : vars.colorNeutral95};
  `;

  return [
    baseStyles,
    isOpen &&
      css`
        border-bottom: 1px ${vars.colorNeutral60} solid;
      `,
    isDisabled &&
      css`
        cursor: default;
      `,
    isSticky &&

const isActive = props.isToggleButton && props.isToggled;
  const shouldUseLinkTag = !props.isDisabled && Boolean(props.linkTo);

  const asProps = shouldUseLinkTag ? { as: Link } : { as: props.as };

  const buttonAttributes = {
    'data-track-component': 'SecondaryButton',
    ...filterInvalidAttributes(props),
    ...(shouldUseLinkTag ? { to: props.linkTo } : {}),
  };

  const containerStyles = [
    css`
      display: inline-flex;
      background-color: ${vars.colorSurface};
      border-radius: ${vars.borderRadius6};
      box-shadow: ${vars.shadow7};
      color: ${vars.colorSolid};
      font-size: ${vars.fontSizeDefault};
      transition: background-color ${vars.transitionLinear80Ms},
        box-shadow ${vars.transitionEaseinout150Ms};
    `,
    getStateStyles(props.isDisabled, isActive, props.theme),
    getThemeStyles(props.theme),
  ];

  return (

word-break: break-word;
          hyphens: auto;
          font-size: ${vars.fontSizeDefault};
          color: ${vars.colorSolid};
          font-family: inherit;
        `}
      >
        
        <div>
          {this.props.children}
        </div>
      
    );
  }
}

const Card = props => (
  <div>
    <div>
      {props.children}
    </div>
  </div>
);

import React from 'react';
import PropTypes from 'prop-types';
import styled from '@emotion/styled';
import { AngleRightIcon, AngleDownIcon } from '@commercetools-uikit/icons';
import IconButton from '@commercetools-uikit/icon-button';
import Spacings from '@commercetools-uikit/spacings';
import Text from '@commercetools-uikit/text';
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);

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 => {