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

*/
  onChange?: (value: string | number) => void;
}

const Container = styled('div')({
  [IconButtonCon as any]: {
    borderRadius: borderRadius.zero,
    borderWidth: '1px',
    marginLeft: '-1px',
    '&:first-child': {
      borderTopLeftRadius: spacing.xxxs,
      borderBottomLeftRadius: spacing.xxxs,
      marginLeft: 0,
    },
    '&:last-child': {
      borderTopRightRadius: spacing.xxxs,
      borderBottomRightRadius: spacing.xxxs,
    },
    '&:focus': {
      borderRadius: spacing.xxxs,
      zIndex: 1,
      animation: 'none', // reset focusRing animation
      transition: 'all 120ms, border-radius 1ms',
    },
  },
});

export default class IconButtonToggleGroup extends React.Component {
  static defaultProps = {
    value: 0,
  };

/**
   * Callback function when a button is selected, optional.
   * If the selected button has a value, it will be returned.
   * Otherwise, the index of the button in the group will be returned.
   */
  onChange?: (value: string | number) => void;
}

const Container = styled('div')({
  [IconButtonCon as any]: {
    borderRadius: borderRadius.zero,
    borderWidth: '1px',
    marginLeft: '-1px',
    '&:first-child': {
      borderTopLeftRadius: spacing.xxxs,
      borderBottomLeftRadius: spacing.xxxs,
      marginLeft: 0,
    },
    '&:last-child': {
      borderTopRightRadius: spacing.xxxs,
      borderBottomRightRadius: spacing.xxxs,
    },
    '&:focus': {
      borderRadius: spacing.xxxs,
      zIndex: 1,
      animation: 'none', // reset focusRing animation
      transition: 'all 120ms, border-radius 1ms',
    },
  },
});

/**
   * Callback function when a button is selected, optional.
   * If the selected button has a value, it will be returned.
   * Otherwise, the index of the button in the group will be returned.
   */
  onChange?: (value: string | number) => void;
}

const Container = styled('div')({
  [IconButtonCon as any]: {
    borderRadius: borderRadius.zero,
    borderWidth: '1px',
    marginLeft: '-1px',
    '&:first-child': {
      borderTopLeftRadius: spacing.xxxs,
      borderBottomLeftRadius: spacing.xxxs,
      marginLeft: 0,
    },
    '&:last-child': {
      borderTopRightRadius: spacing.xxxs,
      borderBottomRightRadius: spacing.xxxs,
    },
    '&:focus': {
      borderRadius: spacing.xxxs,
      zIndex: 1,
      animation: 'none', // reset focusRing animation
      transition: 'all 120ms, border-radius 1ms',
    },
  },
});

export default class IconButtonToggleGroup extends React.Component {

({onClose}) => ({
    marginRight: onClose ? spacing.m : undefined,
  })
);

const ToastSystemIcon = styled(SystemIcon)({
  marginRight: spacing.s,
  alignSelf: 'start',
});

const ActionButton = styled('button')({
  display: 'block',
  backgroundColor: 'transparent', // To prevent Safari from rendering grey 'buttonface' as bgcolor
  border: 'none',
  padding: 0,
  marginTop: spacing.xxxs,
  ...type.body2,
  ...type.variant.link,
});

const Message = styled('div')({
  wordBreak: 'break-word',
  wordWrap: 'break-word',
});

export default class Toast extends React.Component {
  static defaultProps = {
    icon: checkIcon as CanvasSystemIcon, // needed for TS2742 - https://github.com/microsoft/TypeScript/issues/29808
    iconColor: colors.greenApple400,
  };

  public render() {

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

opacity: 1;
      transform: translate(0);
    }
  `;
};

const TooltipContainer = styled('div')(
  {
    ...type.body,
    display: 'inline-flex',
    borderRadius: borderRadius.m,
    padding: spacing.xxs,
    backgroundColor: 'rgba(0,0,0,.85)',
    color: colors.frenchVanilla100,
    fontSize: 13,
    margin: spacing.xxxs,
    a: {
      color: colors.frenchVanilla100,
      textDecoration: 'underline',
    },
  },
  ({transformOrigin}) => ({
    animation: tooltipAnimation(transformOrigin),
    animationDuration: '150ms',
    animationTimingFunction: 'ease-out',
    transformOrigin: transformOrigin
      ? `${transformOrigin.vertical} ${transformOrigin.horizontal}`
      : 'top center',
  })
);

export default class Tooltip extends React.Component {

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

[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: {
      high: {

public render() {
    const {type, emphasis, icon, label, ...elemProps} = this.props;
    const variant = statusIndicatorStyles.variants[type][emphasis]!;

    return (
      
        {icon && (
          
        )}
        {label}
      
    );
  }
}