How to use the @workday/canvas-kit-react-core.borderRadius.m function in @workday/canvas-kit-react-core

import {borderRadius, inputColors, spacingNumbers, type} from '@workday/canvas-kit-react-core';

export interface TextInputProps
  extends GrowthBehavior,
    React.InputHTMLAttributes {
  error?: ErrorType;
  inputRef?: React.Ref;
}

const Input = styled('input')>(
  {
    ...type.body,
    border: `1px solid ${inputColors.border}`,
    display: 'block',
    backgroundColor: inputColors.background,
    borderRadius: borderRadius.m,
    boxSizing: 'border-box',
    height: 40,
    minWidth: 280,
    transition: '0.2s box-shadow, 0.2s border-color',
    padding: spacingNumbers.xxs, // Compensate for border
    margin: 0, // Fix Safari
    '&::placeholder': {
      color: inputColors.placeholder,
    },
    '&:hover': {
      borderColor: inputColors.hoverBorder,
    },
    '&:focus:not([disabled])': {
      borderColor: inputColors.focusBorder,
      boxShadow: `inset 0 0 0 1px ${inputColors.focusBorder}`,
      outline: 'none',

* 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': {
      borderColor: inputColors.hoverBorder,
    },
    '&:focus:not([disabled])': {
      borderColor: inputColors.focusBorder,

types: {
      [ButtonVariant.Primary]: canvasButtonStyles.variants!.types[ButtonVariant.Primary],
      [ButtonVariant.Secondary]: canvasButtonStyles.variants!.types[ButtonVariant.Secondary],
    },
    sizes: {
      [ButtonSize.Large]: canvasButtonStyles.variants!.sizes.large,
      [ButtonSize.Medium]: canvasButtonStyles.variants!.sizes.medium,
    },
  },
};

export const textButtonStyles: ButtonGenericStyle = {
  classname: 'text-button',
  styles: {
    ...deprecatedButtonStyles.styles,
    borderRadius: borderRadius.m,
    border: '0',
    margin: '0 8px',
    minWidth: 'auto',
    '&:hover:not([disabled])': {textDecoration: 'underline'},
  },
  variants: {
    types: {
      [TextButtonVariant.Default]: {
        ...getButtonStateStyle(TextButtonVariant.Default),
      },
      [TextButtonVariant.Inverse]: {
        ...getButtonStateStyle(TextButtonVariant.Inverse),
      },
      [TextButtonVariant.AllCaps]: {
        ...getButtonStateStyle(TextButtonVariant.Default),
        height: canvas.spacing.l,

onClose?: () => void;
  initialSelectedItem?: number;
  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;

},
      },
      [ButtonSize.Medium]: {
        width: canvas.spacing.xl,
        height: canvas.spacing.xl,
      },
    },
    types: {
      [IconButtonVariant.Square]: {
        borderRadius: borderRadius.m,
        width: canvas.spacing.l,
        height: canvas.spacing.l,
        ...getButtonStateStyle(IconButtonVariant.Square),
      },
      [IconButtonVariant.SquareFilled]: {
        borderRadius: borderRadius.m,
        width: canvas.spacing.l,
        height: canvas.spacing.l,
        ...getButtonStateStyle(IconButtonVariant.SquareFilled),
      },
      [IconButtonVariant.Plain]: {
        ...getButtonStateStyle(IconButtonVariant.Plain),
      },
      [IconButtonVariant.Circle]: {
        ...getButtonStateStyle(IconButtonVariant.Circle),
      },
      [IconButtonVariant.CircleFilled]: {
        ...getButtonStateStyle(IconButtonVariant.CircleFilled),
      },
      [IconButtonVariant.Inverse]: {
        ...getButtonStateStyle(IconButtonVariant.Inverse),
      },

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',
    transformOrigin: transformOrigin
      ? `${transformOrigin.vertical} ${transformOrigin.horizontal}`

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

color: theme.currentLinkColor,
            '& a': {
              cursor: 'default',
            },
            '&:hover, &:active': {
              color: theme.currentLinkColor,
            },
            '&:after': {
              position: 'absolute',
              bottom: 0,
              left: 0,
              content: `''`,
              height: 4,
              width: '100%',
              backgroundColor: theme.chipColor,
              borderRadius: `${borderRadius.m} ${borderRadius.m} 0 0`,
            },
          },
        },
      },
    },
  });
};

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

: {};
    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}) => {
    const inputColors = getInputColors(themeColor, collapse!);

    const focusStyles = {
      '&:not([disabled])': {
        '&:focus, &:active': {
          outline: 'none',
          boxShadow: inputColors.focusBoxShadow,