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

[ButtonSize.Medium]: {
        paddingLeft: '4px',
      },
    },
  },
};

export const deprecatedButtonStyles: ButtonGenericStyle = {
  classname: 'canvas-deprecated-button',
  styles: {
    boxSizing: 'border-box',
    display: 'inline-flex',
    alignItems: 'center',
    justifyContent: 'center',
    fontSize: '13px',
    borderRadius: borderRadius.circle,
    border: '1px solid transparent',
    boxShadow: 'none',
    position: 'relative',
    cursor: 'pointer',
    outline: 'none',
    transition: 'all 120ms linear',
    '&:hover:active': {transitionDuration: '40ms'}, // Makes the "down" state of the button happens faster than the hover state, so it animates in correctly.
    '&:disabled, &:disabled:active': {cursor: 'default', boxShadow: 'none'},
  },
  variants: {
    types: {
      [DeprecatedButtonVariant.Primary]: {
        ...getButtonStateStyle(DeprecatedButtonVariant.Primary),
      },
      [DeprecatedButtonVariant.Secondary]: {
        ...getButtonStateStyle(DeprecatedButtonVariant.Secondary),

},
      [ButtonSize.Small]: {
        height: canvas.spacing.l,
        padding: '0 8px',
      },
    },
  },
};

export const iconButtonStyles: ButtonGenericStyle = {
  classname: 'icon-button',
  styles: {
    // TODO: Support data-whatinput='input' css
    ...deprecatedButtonStyles.styles,
    borderWidth: '0',
    borderRadius: borderRadius.circle,
    ['& .wd-icon']: {
      display: 'inline-block',
      verticalAlign: 'middle',
    },
  },
  variants: {
    sizes: {
      [ButtonSize.Small]: {
        width: canvas.spacing.l,
        height: canvas.spacing.l,
        'span svg': {
          width: '20px',
          height: '20px',
        },
      },
      [ButtonSize.Medium]: {

export interface SystemIconCircleProps {
  background: string;
  icon: CanvasSystemIcon;
  size: SystemIconCircleSize | number;
}

const Container = styled('div', {
  shouldForwardProp: prop => isPropValid(prop) && prop !== 'size',
})>(
  {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    padding: 0,
    border: 0,
    borderRadius: borderRadius.circle,
    boxSizing: 'border-box',
    overflow: 'hidden',
    '& img': {
      width: '100%',
      height: '100%',
    },
  },
  ({background}) => ({
    background: background,
  }),
  ({size}) => ({
    width: size,
    height: size,
  })
);

const SwitchCircle = styled('div')>(({checked}) => ({
  width: circleSize,
  height: circleSize,
  borderRadius: borderRadius.circle,
  ...depth[1],
  backgroundColor: colors.frenchVanilla100,
  transform: checked ? `translateX(${translateLength})` : 'translateX(0)',
  transition: 'transform 150ms ease',
  pointerEvents: 'none',
}));

position: 'relative',
});

/**
 * Using a wrapper prevents the browser default behavior of trigging
 * :hover on the radio when you hover on it's corresponding label.
 * This stops the ripple from showing when you hover on the label.
 */
const RadioInputWrapper = styled('div')>(
  {
    height: radioHeight,
    width: radioWidth,
    marginTop: '3px',
    alignSelf: 'flex-start',
    '&::after': {
      borderRadius: borderRadius.circle,
      boxShadow: '0 0 0 0 ' + colors.soap200,
      content: '""',
      display: 'inline-block',
      height: radioHeight,
      transition: 'box-shadow 150ms ease-out',
      width: radioWidth,
      zIndex: 1,
    },
  },
  ({disabled}) => ({
    '&:hover::after': {
      boxShadow: disabled ? undefined : '0 0 0 ' + rippleRadius + 'px ' + colors.soap200,
    },
  })
);

/**
   * The url of the users avatar photo
   */
  url?: string;
}

export interface AvatarProps extends AvatarLocalProps, React.HTMLAttributes {}

export const avatarStyles: CSSObject = {
  background: colors.soap200,
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  padding: 0,
  border: 0,
  borderRadius: borderRadius.circle,
  boxSizing: 'border-box',
  overflow: 'hidden',
  '& img': {
    width: '100%',
    height: '100%',
  },
};

const StyledContainer = styled('div', {
  shouldForwardProp: prop => isPropValid(prop) && prop !== 'size',
})>(
  {
    ...avatarStyles,
  },
  ({size}) => ({
    height: size,

/**
   * The animation-delay value, in ms, for the loading dots.
   */
  animationDelay: number;
};

/**
 * The actual loading dot div.
 */
const LoadingAnimationDot = styled('div')(
  {
    backgroundColor: canvas.colors.soap400,
    width: canvas.spacing.s,
    height: canvas.spacing.s,
    fontSize: '0px',
    borderRadius: borderRadius.circle,
    transform: 'scale(0)',
    display: 'inline-block',
    marginRight: canvas.spacing.xxs,
    animationName: keyframesLoading,
    animationDuration: '1400ms',
    animationIterationCount: 'infinite',
    animationTimingFunction: 'ease-in-out',
    animationFillMode: 'both',
    '&:last-child': {
      marginRight: 0,
    },
  },
  ({animationDelay}) => ({
    animationDelay: animationDelay + 'ms',
  })
);

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,
    marginLeft: spacing.xxxs,
    borderRadius: borderRadius.circle,
    opacity: 0,
    '&:focus, &:active': {
      outline: 'none',
      '& ~ div:first-of-type': {
        ...focusRing(2, 2, false),
      },
    },
    ...mouseFocusBehavior({
      '&:focus, &:active': {
        '& ~ div:first-of-type': {
          ...focusRing(0, 0),
          animation: 'none',
        },
      },
    }),
  },

position: 'relative',
});

/**
 * Using a wrapper prevents the browser default behavior of trigging
 * :hover on the checkbox when you hover on it's corresponding label.
 * This stops the ripple from showing when you hover on the label.
 */
const CheckboxInputWrapper = styled('div')>(
  {
    height: checkboxHeight,
    width: checkboxWidth,
    marginTop: '3px',
    alignSelf: 'flex-start',
    '&::after': {
      borderRadius: borderRadius.circle,
      boxShadow: '0 0 0 0 ' + colors.soap200,
      content: '""',
      display: 'inline-block',
      height: checkboxHeight,
      transition: 'box-shadow 150ms ease-out',
      width: checkboxWidth,
      zIndex: 1,
    },
  },
  ({disabled}) => ({
    '&:hover::after': {
      boxShadow: disabled ? undefined : '0 0 0 ' + rippleRadius + 'px ' + colors.soap200,
    },
  })
);