How to use the @workday/canvas-kit-react-core.type.body function in @workday/canvas-kit-react-core

import SelectOption from './SelectOption';

export interface SelectProps extends GrowthBehavior, React.SelectHTMLAttributes {
  /**
   * React children must be of type SelectOption and have at least two.
   */
  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': {

*/
  leftSlot?: React.ReactElement;
  /**
   * A boolean indicating if the header should be rendered in collapsed mode
   */
  isCollapsed?: boolean;
}

const childrenSpacing = spacing.s;

const HeaderShell = styled('div')>(
  {
    display: 'flex',
    alignItems: 'center',
    boxSizing: 'border-box',
    ...type.body,
    WebkitFontSmoothing: 'antialiased',
    MozOsxFontSmoothing: 'grayscale',
    position: 'relative',
  },
  ({variant, themeColor}) => ({
    // Only the variant Full has a large header, all the other one (Dub, Global) have a small header height
    height: variant === HeaderVariant.Full ? HeaderHeight.Large : HeaderHeight.Small,
    background: themes[themeColor].background,
    ...themes[themeColor].depth,
    color: themes[themeColor].color,
  })
);

const BrandSlot = styled('div')(
  {
    height: '100%',

placeholder?: string;
  readOnly?: boolean;
  resize: TextAreaResizeDirection;
  value?: any;
}

export enum TextAreaResizeDirection {
  None = 'none',
  Both = 'both',
  Horizontal = 'horizontal',
  Vertical = 'vertical',
}

const TextAreaContainer = styled('textarea')(
  {
    ...type.body,
    border: `1px solid ${inputColors.border}`,
    display: 'block',
    backgroundColor: inputColors.background,
    borderRadius: borderRadius.m,
    boxSizing: 'border-box',
    minHeight: 64,
    minWidth: 280,
    transition: '0.2s box-shadow, 0.2s border-color',
    padding: spacingNumbers.xxs, // Compensate for border
    margin: 0, // Fix Safari
    '&::webkit-resizer': {
      display: 'none',
    },
    '&::placeholder': {
      color: inputColors.placeholder,
    },

import * as React from 'react';
import styled from '@emotion/styled';
import {colors, type} from '@workday/canvas-kit-react-core';

export const borderWidth = 1;
export const borderColor = colors.soap400;
export const cellBorder = `${borderWidth}px solid ${borderColor}`;

const TableComponent = styled('table')(type.body, {
  width: '100%',
  border: cellBorder,
  borderSpacing: 0,
  textAlign: 'left',
  thead: {
    borderSpacing: 0,
  },
});

export default class Table extends React.Component> {
  public render() {
    const {children, ...elemProps} = this.props;

    return {children};
  }
}

},
          '&.search-exit': {
            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',
    },

return keyframes`
    0% {
      opacity: 0;
      transform: translate(${translate.x}px, ${translate.y}px);
    }
    100% {
      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',

},
  ({disabled}) => ({
    backgroundColor: disabled ? colors.soap200 : '',
  })
);

const ColorInputContainer = styled('div')({
  position: 'relative',
});

const PoundSignPrefix = styled('span')>(
  {
    position: 'absolute',
    left: 36,
    top: 10,
    ...type.body,
    ...type.variant.hint,
  },
  ({disabled}) => ({
    color: disabled ? inputColors.disabled.text : undefined,
  })
);

const SwatchTile = styled('div')({
  position: 'absolute',
  cursor: 'pointer',
  height: swatchTileSize,
  width: swatchTileSize,
  top: spacing.zero,
  bottom: spacing.zero,
  left: swatchTileSpacing,
  margin: 'auto',

import {colors, spacing, type} from '@workday/canvas-kit-react-core';
import {accessibleHide as accessibleHideCSS} from '@workday/canvas-kit-react-common';
import {FormFieldLabelPosition, FormFieldLabelPositionBehavior} from './types';

export interface LabelProps extends FormFieldLabelPositionBehavior {
  labelPosition: FormFieldLabelPosition;
  isLegend: boolean;
  htmlFor?: string;
  required?: boolean;
  requiredLabel: string;
  accessibleHide?: boolean;
}

const labelStyles = [
  {
    ...type.body,
    ...type.variant.label,
    padding: 0,
  },
  ({labelPosition, accessibleHide}: Pick) => {
    if (accessibleHide) {
      return accessibleHideCSS;
    }
    return {
      ...(labelPosition === FormFieldLabelPosition.Left
        ? {
            marginRight: spacing.l,
            minWidth: 180,
            display: 'flex',
            alignItems: 'center',
            maxHeight: spacing.xl,
          }

display: 'flex',
  margin: -20,
  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,

border: `1px solid ${colors.soap500}`,
    borderRadius: borderRadius.l,
    boxSizing: 'border-box',
  },
  ({depth}) => depth,
  ({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}
      
    );