How to use the @workday/canvas-kit-react-core.spacing.m function in @workday/canvas-kit-react-core

content: `''`,
              height: 4,
              width: '100%',
              backgroundColor: theme.chipColor,
              borderRadius: `${borderRadius.m} ${borderRadius.m} 0 0`,
            },
          },
        },
      },
    },
  });
};

const ChildrenSlot = styled('div')>(
  {
    marginRight: spacing.m,
    // TODO: remove this when we get real icon buttons
    '> .canvas-header--menu-icon': {
      cursor: 'pointer',
    },
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'flex-end',
    height: '100%',
    '> *': {
      marginLeft: childrenSpacing,
    },
  },
  ({centeredNav = false, isCollapsed}) => ({
    '> *:not(.canvas-header--menu-icon)': {
      display: isCollapsed ? 'none' : 'flex',
    },

({open, padding}) => ({
    padding: open ? padding || spacing.m : `${spacing.s} 0`,
  }),
  ({openDirection}) => ({

({onClose}) => ({
    marginRight: onClose ? spacing.m : undefined,
  })
);

'@media (max-width: 575px)': {
      padding: spacing.xxs,
    },
  },
  ({fixed}: ActionBarProps) =>
    fixed && {
      position: 'fixed',
      left: 0,
      bottom: 0,
      right: 0,
    }
);

const ChildrenContainer = styled('div')({
  display: 'inline-block',
  padding: `0 ${spacing.m}`,
  '*:not(:first-child)': {
    marginLeft: spacing.s,
  },
  '@media (max-width: 575px)': {
    display: 'flex',
    padding: spacing.xxs,
    justifyContent: 'center',
    flexDirection: 'row-reverse',
    '> *': {
      flex: 1,
      '&:not(:first-child)': {
        marginRight: spacing.s,
        marginLeft: 0,
      },
    },
  },

_renderCollapsed() {
    const collapsedIconStyle = {
      marginLeft: spacing.s,
      cursor: 'pointer',
    };

    const closeIconStyle = {
      left: 'unset',
      right: spacing.m,
      cursor: 'pointer',
    };

    const {
      themeColor,
      placeholder,
      value,
      rightAlign,
      collapse,
      onSearchSubmit,
      resetSearchLabel,
      searchLabel,
      ...elemProps
    } = this.props;

    return (

const circleSize = spacing.xs;
const switchWidth = spacing.l;
const switchHeight = spacing.s;
const switchTapArea = spacing.l;
const translateLength = spacing.s;

const SwitchContainer = styled('div')({
  position: 'relative',
  height: spacing.m,
  width: switchTapArea,
});

const SwitchInput = styled('input')(
  {
    position: 'absolute',
    height: spacing.m,
    width: switchTapArea,
    margin: 0,
    marginLeft: spacing.xxxs,
    borderRadius: borderRadius.circle,
    opacity: 0,
    '&:focus, &:active': {
      outline: 'none',
      '& ~ div:first-of-type': {
        ...focusRing(2, 2, false),
      },
    },
    ...mouseFocusBehavior({
      '&:focus, &:active': {
        '& ~ div:first-of-type': {
          ...focusRing(0, 0),
          animation: 'none',

id?: string;
  onChange?: (e: React.SyntheticEvent) => void;
  value?: string;
  inputRef?: React.Ref;
  error?: ErrorType;
}

const circleSize = spacing.xs;
const switchWidth = spacing.l;
const switchHeight = spacing.s;
const switchTapArea = spacing.l;
const translateLength = spacing.s;

const SwitchContainer = styled('div')({
  position: 'relative',
  height: spacing.m,
  width: switchTapArea,
});

const SwitchInput = styled('input')(
  {
    position: 'absolute',
    height: spacing.m,
    width: switchTapArea,
    margin: 0,
    marginLeft: spacing.xxxs,
    borderRadius: borderRadius.circle,
    opacity: 0,
    '&:focus, &:active': {
      outline: 'none',
      '& ~ div:first-of-type': {
        ...focusRing(2, 2, false),

const Box = styled('div')(
  {
    backgroundColor: colors.frenchVanilla100,
    border: `1px solid ${colors.soap500}`,
    borderRadius: borderRadius.l,
    boxSizing: 'border-box',
  },
  ({depth}) => depth,
  ({padding}) => ({padding}),
  ({width}) => width && {width},
  ({height}) => height && {height}
);

const Header = styled('h3')(type.h3, {
  marginBottom: spacing.m,
  marginTop: 0,
});

const Body = styled('div')(type.body);

export default class Card extends React.Component {
  public static defaultProps = {
    depth: depthValues[2],
    padding: spacing.l,
  };

  public render() {
    const {heading, headingId, ...elemProps} = this.props;

    return (

display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  },
  ({variant}) => ({
    height: variant === HeaderVariant.Global ? HeaderHeight.Small : HeaderHeight.Large,
  })
);

const Title = styled('h3')(
  {
    fontSize: '20px',
    fontWeight: 400,
    marginLeft: spacing.l,
    padding: spacing.s,
    paddingLeft: spacing.m,
    paddingRight: spacing.l,
    whiteSpace: 'nowrap',
    display: 'initial',
  },
  ({themeColor}) => ({
    color: themeColor === HeaderTheme.White ? colors.blueberry500 : colors.frenchVanilla100,
    borderLeft: `1px solid ${
      themeColor === HeaderTheme.White
        ? colors.soap400
        : chroma(colors.soap400)
            .alpha(0.4)
            .css()
    }`,
  })
);

display: 'initial',
  },
  ({themeColor}) => ({
    color: themeColor === HeaderTheme.White ? colors.blueberry500 : colors.frenchVanilla100,
    borderLeft: `1px solid ${
      themeColor === HeaderTheme.White
        ? colors.soap400
        : chroma(colors.soap400)
            .alpha(0.4)
            .css()
    }`,
  })
);

const WorkdayLogo = styled('span')({
  paddingLeft: spacing.m,
  lineHeight: 0,
});

export class WorkdayLogoTitle extends React.Component {
  static defaultProps = {
    themeColor: HeaderTheme.White,
    title: '',
  };

  public render() {
    const {themeColor, title, variant, ...elemProps} = this.props;

    return (