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

const navStyle = ({themeColor}: Pick) => {
  const theme = themes[themeColor];

  return css({
    nav: {
      display: 'flex',
      flexGrow: 1,
      justifyContent: 'center',
      height: 'inherit',
      marginLeft: spacing.xl,

      '& ul': {
        color: theme.linkColor,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        listStyleType: 'none',
        padding: 0,
        margin: 0,
        height: 'inherit',
        '&:hover': {
          // De-emphasizes all color on hover, this allows us to create an illusion that hovering over a specific element
          // fades out the rest
          color: theme.linkFadeOutColor,
        },
        '& li': {

children: React.ReactElement[];
  disabled?: boolean;
  error?: ErrorType;
  onChange?: React.ChangeEventHandler;
  value?: string;
}

const SelectContainer = styled('select')(
  {
    ...type.body,
    border: `1px solid ${inputColors.border}`,
    display: 'block',
    backgroundColor: inputColors.background,
    borderRadius: borderRadius.m,
    boxSizing: 'border-box',
    height: spacing.xl,
    minWidth: 280,
    transition: '0.2s box-shadow, 0.2s border-color',
    padding: spacingNumbers.xxs, // IE11 bugfix: add padding so text is displayed properly
    margin: 0, // Fix Safari
    MozAppearance: 'none', // FF bugfix: hide arrow so it doesn't show under ours
    WebkitAppearance: 'none',
    '&::placeholder': {
      color: inputColors.placeholder,
    },
    '&:hover': {
      borderColor: inputColors.hoverBorder,
    },
    '&:focus:not([disabled])': {
      borderColor: inputColors.focusBorder,
      boxShadow: `inset 0 0 0 1px ${inputColors.focusBorder}`,
      outline: 'none',

},
        '&:hover': {
          background: themeColor === HeaderTheme.White && !collapse ? colors.soap300 : undefined,
        },
      },
    };

    const collapseStyles = collapse
      ? {
          ...type.h3,
          fontWeight: 400,
          background: 'transparent',
          padding: `${spacing.xs} 0`,
          margin: `${spacing.xs} ${spacing.s}`,
          maxWidth: 'unset',
          width: `calc(100% - ${spacing.l} - ${spacing.xl})`,
          '&::-webkit-search-cancel-button': {
            display: 'none',
          },
        }
      : {};

    return {
      background: inputColors.background,
      color: inputColors.color,
      '&::placeholder': {
        color: inputColors.placeholderColor,
      },
      ...focusStyles,
      ...collapseStyles,
    };
  }

({labelPosition, accessibleHide}: Pick) => {
    if (accessibleHide) {
      return accessibleHideCSS;
    }
    return {
      ...(labelPosition === FormFieldLabelPosition.Left
        ? {
            marginRight: spacing.l,
            minWidth: 180,
            display: 'flex',
            alignItems: 'center',
            maxHeight: spacing.xl,
          }
        : {
            display: 'block',
            marginBottom: spacing.xxxs,
          }),
    };
  },
];

'&.search-exit-active': {
            opacity: 0,
            transition: `opacity ${mobileTransitionDuration}ms`,
          },
        }
      : {};
    return {...rightAlignStyles, ...collapseStyles};
  }
);

const SearchInput = styled('input')>(
  type.body,
  {
    padding: spacing.xs,
    paddingLeft: spacingNumbers.xl + spacingNumbers.xxs,
    paddingRight: spacing.xl,
    maxWidth: '480px',
    minWidth: spacingNumbers.xs * 10,
    width: '100%',
    height: spacingNumbers.xl + spacingNumbers.xxxs,
    borderRadius: borderRadius.m,
    boxSizing: 'border-box',
    border: 'none',
    WebkitAppearance: 'none',
    transition: 'background 150ms',
    '&::-webkit-search-cancel-button': {
      display: 'none',
    },
  },
  ({themeColor, collapse}) => {
    const inputColors = getInputColors(themeColor, collapse!);

.add('Space', () => {
    const Box = styled('div')(space);

    return (
      <div>
        <div>
          
            Margin and Padding
          
        </div>
      </div>
    );
  });

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',
        '&:hover': {

({breakpoint}) => ({
    [`@media (min-width: ${breakpoint}px)`]: {
      padding: `0 ${spacing.xl}`,
    },
  }),
  ({capWidth}) =>

flexWrap: 'wrap',
});
const Palette = styled('ul')({
  listStyle: 'none',
  margin: 20,
  padding: 0,
  borderRadius: borderRadius.l,
  overflow: 'hidden',
  width: 250,
  alignSelf: 'flex-start',
});
const Swatch = styled('li')(
  {
    ...type.body,
    padding: `0 ${spacing.m}`,
    height: spacing.xl,
    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,