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

alignItems: 'center',
          fontSize: '14px',
          fontWeight: 700,
          height: 'inherit',
          transition: `color 150ms ease-out 0s`,
          cursor: 'pointer',
          '&:first-child > *': {
            marginLeft: 0,
          },
          '&:last-child > *': {
            marginRight: 0,
          },
          '& > *': {
            color: 'inherit',
            textDecoration: 'none',
            padding: `0px ${spacing.s}`,
            margin: `0 ${spacing.xxxs}`,
            display: 'flex',
            alignItems: 'center',
            height: 'inherit',
            '&:visited': {
              color: 'inherit', // Keeps visited links from becoming default purple
            },
          },
          '&:hover, &:active': {
            color: theme.linkColor, // Completes the illusion of sibling elements fading into the background on hover
          },
          '&.current': {
            color: theme.currentLinkColor,
            '& a': {
              cursor: 'default',
            },

display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  (props: any) => ({
    background: props.bg,
    span: {
      color: props.contrast,
    },
  })
);
const PaletteTitle = styled(Swatch)(
  {
    ...type.h3,
    height: spacing.xxl,
    paddingBottom: spacing.s,
    alignItems: 'flex-end',
    textTransform: 'capitalize',
  },
  (props: any) => ({
    span: {
      color: props.contrast,
    },
  })
);

const customTheme = createCanvasTheme({
  palette: {
    primary: {
      main: colors.greenApple400,
    },
  },

({openDirection}) => ({
    right: openDirection === SidePanelOpenDirection.Left ? spacing.s : '',
    left: openDirection === SidePanelOpenDirection.Right ? spacing.s : '',
  })
);

flexDirection: 'column',
      alignItems: 'stretch',
      textAlign: 'center',
      padding: `${spacing.s} 0`,
    },
  },
  ({isClosed}: Pick) =>
    isClosed ? {transform: 'translateY(100%)'} : null
);

const BannerItem = styled('div')({
  marginLeft: spacing.s,
  marginRight: spacing.s,
  '@media (max-width: 450px)': {
    '&:not(:first-child)': {
      marginTop: spacing.s,
    },
  },
});

const rowStyle = css({
  display: 'flex',
});

const CookieSettings = styled('button')(type.body2, type.link, {
  marginRight: spacing.s,
  border: 0,
  fontWeight: 500,
  whiteSpace: 'nowrap',
  cursor: 'pointer',
  padding: 0,
  height: '0%',

variants: {
    [statusType in StatusIndicatorType]: {
      [statusEmphasis in StatusIndicatorEmphasis]?: CSSObject & React.CSSProperties;
    };
  };
}

export const statusIndicatorStyles: StatusIndicatorGenericStyle = {
  classname: 'status-indicator',
  styles: {
    ...type.small,
    display: 'inline-flex',
    alignItems: 'center',
    verticalAlign: 'middle',
    maxWidth: 150,
    height: spacing.s,
    padding: `1px ${spacing.xxxs}`,
    borderRadius: borderRadius.s,
    boxSizing: 'border-box',
  },
  variants: {
    gray: {
      high: {
        color: colors.frenchVanilla100,
        background: colors.licorice300,
      },
      low: {
        color: colors.licorice400,
        background: colors.soap200,
      },
    },
    orange: {

onClick?: (event: React.SyntheticEvent) => void;
  children?: React.ReactNode;
  id?: string;
  icon?: CanvasSystemIcon;
  secondaryIcon?: CanvasSystemIcon;
  hasDivider?: boolean;
  isDisabled?: boolean;
  isFocused?: boolean;
  role: string;
  shouldClose?: boolean;
}

const Item = styled('li')>(
  {
    ...type.body2,
    padding: `${spacing.xxs} ${spacing.s}`,
    height: spacing.xl,
    boxSizing: 'border-box',
    cursor: 'pointer',
    color: colors.blackPepper300,
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    transition: 'background-color 80ms, color 80ms',
    '&:focus': {
      outline: 'none',
    },
  },
  ({isFocused, isDisabled}) => {
    if (!isFocused && !isDisabled) {
      return {
        backgroundColor: 'inherit',

{
    display: 'flex',
    alignItems: 'center',
    height: HeaderHeight.Small,
    paddingLeft: spacing.m,
  },
  ({bgColor}) => ({
    background: bgColor ? bgColor : 'none',
  })
);

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

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

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

    const {
      themeColor,
      placeholder,
      value,
      rightAlign,
      collapse,
      onSearchSubmit,

const Header = styled('header')({
  height: 84,
  backgroundImage: colors.gradients.blueberry,
  color: colors.frenchVanilla100,
  WebkitFontSmoothing: 'antialiased',
  MozOsxFontSmoothing: 'grayscale',
});

const Container = styled('div')>(
  {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
    height: '100%',
    overflow: 'hidden',
    padding: `0 ${spacing.s}`,
  },
  ({breakpoint}) => ({
    [`@media (min-width: ${breakpoint}px)`]: {
      padding: `0 ${spacing.xl}`,
    },
  }),
  ({capWidth}) =>
    capWidth && {
      boxSizing: 'border-box',
      margin: '0 auto',
      width: '100%',
      maxWidth: 1440,
    }
);

const Title = styled('h2')({