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

const SearchReset = styled(IconButton)>(
  {
    width: spacing.l,
    height: spacing.l,
    marginLeft: -spacingNumbers.xl,
    padding: 0,
  },
  ({value}) => ({
    display: value ? 'block' : 'none',
  })
);

const SearchSubmit = styled(IconButton)({
  width: spacing.l,
  height: spacing.l,
  left: spacing.xxs,
  marginRight: -spacingNumbers.l,
  marginLeft: 0,
  padding: 0,
});

const iconButtonVariant = (inverse: boolean) =>
  inverse ? IconButton.Variant.Inverse : IconButton.Variant.Plain;

export class Search extends React.Component {
  static defaultProps = {
    themeColor: HeaderTheme.White,
    headerHeight: HeaderHeight.Small,
    placeholder: 'Search',
    resetSearchLabel: 'Reset Search Input',
    searchLabel: 'Search',
  };

import {GrowthBehavior} from '@workday/canvas-kit-react-common';
import {spacing} from '@workday/canvas-kit-react-core';
import {SystemIcon} from '@workday/canvas-kit-react-icon';

export interface InputIconContainerProps extends GrowthBehavior {
  icon?: React.ReactElement;
}

const Container = styled('div')(({grow}) => ({
  display: grow ? 'block' : 'inline-block',
  position: 'relative',
}));

const IconContainer = styled('div')({
  position: 'absolute',
  top: spacing.xxs,
  right: spacing.xxs,
});

const InputIconContainer: React.FunctionComponent = ({
  grow,
  children,
  icon,
}) => (
  
    {children}
    {icon && {icon}}
  
);

export default InputIconContainer;

export interface ActionBarProps extends React.HTMLAttributes {
  /**
   * If the actionBar is fixed to the bottom of the screen
   */
  fixed?: boolean;
}

const ActionBarContainer = styled('div')(
  {
    borderTop: `solid 1px ${colors.soap400}`,
    background: commonColors.background,
    padding: spacing.s,
    boxShadow: '0 -2px 4px rgba(0, 0, 0, 0.08)',
    '@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,

import {spacing} from '@workday/canvas-kit-react-core';
import {SystemIcon} from '@workday/canvas-kit-react-icon';

export interface InputIconContainerProps extends GrowthBehavior {
  icon?: React.ReactElement;
}

const Container = styled('div')(({grow}) => ({
  display: grow ? 'block' : 'inline-block',
  position: 'relative',
}));

const IconContainer = styled('div')({
  position: 'absolute',
  top: spacing.xxs,
  right: spacing.xxs,
});

const InputIconContainer: React.FunctionComponent = ({
  grow,
  children,
  icon,
}) => (
  
    {children}
    {icon && {icon}}
  
);

export default InputIconContainer;

error?: ErrorType;
  /**
   * Text on the right, call to action
   */
  actionText?: string;
}

const BannerWrapper = styled('button')(
  {
    ...type.body2,
    backgroundColor: colors.cantaloupe400,
    boxSizing: 'border-box',
    color: colors.blackPepper400,
    fontSize: 14,
    fontWeight: 500,
    padding: `${spacing.xxs} ${spacing.s}`,
    textAlign: 'left',
    border: 0,
    display: 'flex',
    alignItems: 'center',
    transition: 'background-color 120ms',
    '&:focus': {
      outline: 'none',
      ...focusRing(2, 2),
    },
    '&:hover': {
      cursor: 'pointer',
    },
  },
  ({error, variant}) => ({
    backgroundColor: error === ErrorType.Error ? colors.cinnamon500 : colors.cantaloupe400,
    color: error === ErrorType.Error ? colors.frenchVanilla100 : colors.blackPepper400,

);

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: '',
    capWidth: false,
    breakpoint: 768,
  };

  private renderChildren(children: React.ReactNode): React.ReactNode {
    return React.Children.map(children, child => {
      if (!React.isValidElement(child)) {
        return child;
      }

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

id?: string;
  labeledBy?: string;
}

export interface MenuState {
  selectedItemIndex: number;
}

const minWidth = 100;

const List = styled('ul')({
  background: commonColors.background,
  minWidth: `${minWidth}px`,
  borderRadius: borderRadius.m,
  padding: 0,
  margin: `${spacing.xxs} 0`,
  '&:focus': {
    outline: 'none',
  },
  ...hideMouseFocus,
});

export default class Menu extends React.Component {
  static defaultProps = {
    isOpen: true,
  };

  private id = uuid();

  private menuRef: React.RefObject;
  private firstCharacters: string[];

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

const iconStyle: React.CSSProperties = {
  position: 'absolute',
  top: '50%',
  transform: 'translateY(-50%)',
  left: spacing.xxs,
};

const SearchReset = styled(IconButton)>(
  {
    width: spacing.l,
    height: spacing.l,
    marginLeft: -spacingNumbers.xl,
    padding: 0,
  },
  ({value}) => ({
    display: value ? 'block' : 'none',
  })
);

const SearchSubmit = styled(IconButton)({
  width: spacing.l,