How to use the @workday/canvas-kit-react-core.spacing.l 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 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,
    margin: 0,

const Lockup = styled('div')(
  {
    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()
    }`,
  })

};

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',

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

const DubLogo = styled('div')({

({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,
          }),
    };
  },
];

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

const WorkdayLogo = styled('span')({

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

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

({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 (
      
        {heading &amp;&amp; <header id="{headingId}">{heading}</header>}
        {this.props.children}
      
    );
  }
}