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

if (error === ErrorType.Error) {
      errorRingColor = inputColors.error.border;
    } else if (error === ErrorType.Alert) {
      errorRingColor = inputColors.warning.border;
      errorBorderColor = colors.cantaloupe600;
    } else {
      return {};
    }
    return {
      borderRadius: borderRadius.m,
      transition: '100ms box-shadow',
      boxShadow: errorBorderColor
        ? `inset 0 0 0 1px ${errorBorderColor}, inset 0 0 0 3px ${errorRingColor}`
        : `inset 0 0 0 2px ${errorRingColor}`,
      padding: `${spacing.xxxs} ${spacing.xs}`,
      margin: `-${spacing.xxxs} -${spacing.xs}`,
    };
  }
);

};
}

function makeBorderlessStyle(_bgColor: string): CSSObject {
  return {
    'th, td': {
      backgroundColor: rgba(_bgColor, 0.2),
    },
  };
}

const Row = styled('tr')(
  {
    'th, td': {
      backgroundColor: colors.frenchVanilla100,
      padding: `${spacing.xs} ${spacing.xxs}`,
      fontSize: 13,
      borderRight: cellBorder,
      borderBottom: cellBorder,
      height: spacingNumbers.xl + spacingNumbers.xxs,
      boxSizing: 'border-box',
      transition: 'background-color 0.2s',
    },
    td: {
      '&:last-child': {
        borderRight: 'none',
      },
    },
    th: {
      height: spacing.xxl,
      '&:last-child': {
        borderRight: 'none',

import styled from '@emotion/styled';
import uuid from 'uuid/v4';
import {ErrorType, focusRing, mouseFocusBehavior} from '@workday/canvas-kit-react-common';
import {borderRadius, colors, inputColors, depth, spacing} from '@workday/canvas-kit-react-core';

export interface SwitchProps extends React.InputHTMLAttributes {
  checked: boolean;
  disabled?: boolean;
  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,

'&::placeholder': {
            color: colors.licorice300,
          },
        },
        '&: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,

},
  },
  ({error, variant}) => ({
    backgroundColor: error === ErrorType.Error ? colors.cinnamon500 : colors.cantaloupe400,
    color: error === ErrorType.Error ? colors.frenchVanilla100 : colors.blackPepper400,
    borderRadius:
      variant === BannerVariant.Sticky ? `${borderRadius.m} 0 0 ${borderRadius.m}` : borderRadius.m,
    width: variant === BannerVariant.Sticky ? '222px' : '328px',
    '&:hover': {
      backgroundColor: error === ErrorType.Error ? colors.cinnamon600 : colors.cantaloupe500,
    },
  })
);

const BannerIcon = styled(SystemIcon)({
  marginRight: spacing.xs,
});

const BannerLabel = styled('div')({
  flex: 1,
});

const BannerViewAll = styled('span')(
  {
    textDecoration: 'underline',
  },
  ({variant}) => ({
    display: variant === BannerVariant.Sticky ? 'none' : undefined,
  })
);

export default class Banner extends React.Component {

padding: `0 ${spacing.xl}`,
    },
  }),
  ({capWidth}) =>
    capWidth && {
      boxSizing: 'border-box',
      margin: '0 auto',
      width: '100%',
      maxWidth: 1440,
    }
);

const Title = styled('h2')({
  ...type.h1,
  color: colors.frenchVanilla100,
  padding: `${spacing.xs} 0`,
  margin: 0,
  whiteSpace: 'nowrap',
});

const IconList = styled('div')({
  display: 'flex',
  marginLeft: spacing.l,

  '> *:not(:last-child)': {
    marginRight: spacing.xxs,
  },
});

export default class PageHeader extends React.Component {
  static defaultProps = {
    title: '',

const ThemedComponent = styled('h1')(({theme}) => ({
  ...type.h3,
  background: theme.palette.primary.main,
  color: theme.palette.primary.contrast,
  borderRadius: borderRadius.m,
  padding: spacing.xs,
  display: 'inline-block',
}));

opacity: 1,
          },
          '&.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}) => {

l = '32px',
}

export interface PopupProps extends React.HTMLAttributes {
  padding: PopupPadding;
  transformOrigin: TransformOrigin;
  closeIconSize: IconButtonSize;
  popupRef?: React.Ref;
  handleClose?: () => void;
  width?: number | string;
  heading?: React.ReactNode;
  depth?: CanvasDepthValue;
  closeLabel: string;
}

const closeIconSpacing = spacing.xs;
const closeIconSpacingSmall = 10;

const popupAnimation = (transformOrigin: TransformOrigin) => {
  const translate = getTranslateFromOrigin(transformOrigin, spacing.xxs);

  return keyframes`
    0% {
      opacity: 0;
      transform: translate(${translate.x}px, ${translate.y}px);
    }
    100% {
      opacity: 1;
      transform: translate(0);
    }
  `;
};