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

`;

  switch (props.domain) {
    case NOTIFICATION_DOMAINS.GLOBAL:
      return css`
        ${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;

Two resource that explain why we need the min-width: 0; here
      By default, min-width is set to 'auto'. That means that this flex-child is not
      allowed to grow any smaller than the longest text inside. So it will stretch
      no matter how you set the flex-grow property
      To fix this you need to set min-width to 0. This tells the flex-child that
      it is ok to be narrower than the longest word inside
      https://hackernoon.com/11-things-i-learned-reading-the-flexbox-spec-5f0c799c776b
      https://css-tricks.com/flexbox-truncated-text/
    */

    min-width: 0;

    > * + * {
      /* would have loved to use Spacings.Inline here but that would require a
    complete overhaul of this components' structure */
      margin: 0 0 0 ${vars.spacingM};
    }
  `;
  if (isDisabled) {
    return [
      baseStyles,
      css`
        cursor: default;
      `,
      !isCondensed &&
        css`
          /**
           We set a min-height of 32px to anticipate use-cases where SecondaryButton or PrimaryButton
           are rendered in the headerControl */
          min-height: ${vars.spacingXl};
        `,
    ];

import { customProperties } from '@commercetools-uikit/design-system';
import Section from '../../../.storybook/decorators/section';
import Spacings from '../spacings';
import Text from '../typography/text';
import Readme from './README.md';
import Grid from './grid';

const createList = size =>
  Array.from({ length: size }).map((_, index) => index + 1);

const Placeholder = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: pink;
  padding: ${customProperties.spacingM};
`;

const renderGridElements = () => {
  const elems = select('Num. of grid elements', createList(20), 6);
  return createList(elems).map((el, index) => (
    
      {el}
    
  ));
};

storiesOf('Examples|Components/Grid', module)
  .addDecorator(withKnobs)
  .addParameters({
    readme: {
      // Show readme at the addons panel

// If we don't do this, then the overlay will close when e.g.
            // the search input is clicked.
            event.stopPropagation();
            event.preventDefault();
          }}
        >
          <div>
            <label>
              
            </label>
            </div>

const getMargin = scale => {
  switch (scale) {
    case 'xs':
      return vars.spacingXs;
    case 's':
      return vars.spacingS;
    case 'm':
      return vars.spacingM;
    case 'l':
      return vars.spacingL;
    case 'xl':
      return vars.spacingXl;
    default:
      return 0;
  }
};

level={props.level}
    title={props.title}
    isOpen={props.isOpen}
    zIndex={props.zIndex}
    onClose={props.onClose}
    baseZIndex={props.baseZIndex}
    topBarColor="neutral"
    currentPathLabel={props.topBarCurrentPathLabel || props.title}
    previousPathLabel={props.topBarPreviousPathLabel}
    getParentSelector={props.getParentSelector}
    shouldDelayOnClose={props.shouldDelayOnClose}
  >
    <div>
      
        {props.customTitleRow || (
          
        )}
        <div>
          </div></div>

const getPadding = scale => {
  switch (scale) {
    case 's':
      return `${vars.spacingXs} ${vars.spacingS}`;
    case 'm':
      return `${vars.spacingS} ${vars.spacingM}`;
    case 'l':
      return `${vars.spacingM} ${vars.spacingXl}`;
    default:
      return 0;
  }
};

css={css`
      display: flex;
      font-size: 1rem;
      flex-direction: column;
      width: 100%;
      box-shadow: ${props.type === 'raised' ? vars.shadow1 : 'none'};
      border-radius: ${vars.borderRadius6};
      background: ${props.theme === 'dark'
        ? vars.colorNeutral95
        : vars.colorSurface};
    `}
    className={props.className}
  >
    <div>
      {props.children}
    </div>
  
);

const getWidthBySize = props => {
  switch (props.shape) {
    case 'dot':
      switch (props.size) {
        case 's':
          return customProperties.spacingS;
        case 'm':
          return customProperties.spacingM;
        case 'l':
          return customProperties.spacingL;
        case 'xl':
          return customProperties.spacingXl;
        default:
          return 'auto';
      }
    case 'rect':
      switch (props.size) {
        case 's':
          return '150px';
        case 'm':
          return '300px';
        case 'l':
          return '450px';
        case 'xl':

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``;
  }
};