@workday/canvas-kit-react 6.8.10 → 6.9.0-next.3

package/popup/lib/hooks/useTransferOnFullscreenEnter.ts

@@ -1,8 +1,10 @@
 import React from 'react';
 import screenfull from 'screenfull';
 
-import {PopupModel} from './usePopupModel';
 import {PopupStack} from '@workday/canvas-kit-popup-stack';
+import {createElemPropsHook} from '@workday/canvas-kit-react/common';
+
+import {usePopupModel} from './usePopupModel';
 
 /**
  * Makes the popup transfer to the fullscreen element when fullscreen is entered. Without this, the
@@ -12,7 +14,7 @@ import {PopupStack} from '@workday/canvas-kit-popup-stack';
  * Don't use this in conjunction with a hook that will close the popup when entering fullscreen.
  * Doing so would open the popup when the intention was to close it.
  */
-export const useTransferOnFullscreenEnter = (model: PopupModel, elemProps = {}) => {
+export const useTransferOnFullscreenEnter = createElemPropsHook(usePopupModel)(model => {
   const handler = React.useCallback(
     event => {
       if (screenfull.isFullscreen && model.state.stackRef.current) {
@@ -40,5 +42,5 @@ export const useTransferOnFullscreenEnter = (model: PopupModel, elemProps = {})
     return;
   }, [handler, visible]);
 
-  return elemProps;
-};
+  return {};
+});

package/popup/lib/hooks/useTransferOnFullscreenExit.ts

@@ -1,8 +1,10 @@
 import React from 'react';
 import screenfull from 'screenfull';
 
-import {PopupModel} from './usePopupModel';
 import {PopupStack} from '@workday/canvas-kit-popup-stack';
+import {createElemPropsHook} from '@workday/canvas-kit-react/common';
+
+import {usePopupModel} from './usePopupModel';
 
 /**
  * Makes the popup transfer to fullscreen when fullscreen is exited. Without this hook, the popup
@@ -11,7 +13,7 @@ import {PopupStack} from '@workday/canvas-kit-popup-stack';
  * Don't use this in conjunction with a hook that will close the popup when exiting fullscreen.
  * Doing so would open the popup when the intention was to close it.
  */
-export const useTransferOnFullscreenExit = (model: PopupModel, elemProps = {}) => {
+export const useTransferOnFullscreenExit = createElemPropsHook(usePopupModel)(model => {
   const handler = React.useCallback(
     event => {
       if (!screenfull.isFullscreen && model.state.stackRef.current) {
@@ -39,5 +41,5 @@ export const useTransferOnFullscreenExit = (model: PopupModel, elemProps = {}) =
     return;
   }, [handler, visible]);
 
-  return elemProps;
-};
+  return {};
+});

package/radio/lib/Radio.tsx

@@ -48,6 +48,7 @@ export interface RadioProps extends Themeable {
    * The value of the Radio button.
    */
   value?: string;
+  variant?: 'inverse' | undefined;
 }
 
 const radioBorderRadius = 9;
@@ -77,16 +78,20 @@ const RadioInputWrapper = styled('div')<Pick<RadioProps, 'disabled'>>({
   width: radioWidth,
 });
 
-const RadioRipple = styled('span')<Pick<RadioProps, 'disabled'>>({
-  borderRadius: borderRadius.circle,
-  boxShadow: `0 0 0 0 ${colors.soap200}`,
-  height: radioHeight,
-  transition: 'box-shadow 150ms ease-out',
-  width: radioWidth,
-  position: 'absolute',
-  pointerEvents: 'none', // This is a decorative element we don't want it to block clicks to input
-  zIndex: -1,
-});
+const RadioRipple = styled('span')<Pick<RadioProps, 'disabled' | 'variant'>>(
+  {
+    borderRadius: borderRadius.circle,
+    boxShadow: `0 0 0 0 ${colors.soap200}`,
+    height: radioHeight,
+    transition: 'box-shadow 150ms ease-out',
+    width: radioWidth,
+    position: 'absolute',
+    pointerEvents: 'none', // This is a decorative element we don't want it to block clicks to input
+  },
+  ({variant}) => ({
+    opacity: variant === 'inverse' ? '0.4' : '1',
+  })
+);
 
 const RadioInput = styled('input')<RadioProps & StyledType>(
   {
@@ -105,6 +110,7 @@ const RadioInput = styled('input')<RadioProps & StyledType>(
   ({
     checked,
     disabled,
+    variant,
     theme: {
       canvas: {
         palette: {
@@ -134,34 +140,68 @@ const RadioInput = styled('input')<RadioProps & StyledType>(
     // input (which is visually hidden)
     '&:hover ~ div:first-of-type': {
       backgroundColor: checked
-        ? themePrimary.main
+        ? variant === 'inverse'
+          ? colors.frenchVanilla100
+          : themePrimary.main
         : disabled
         ? inputColors.disabled.background
         : 'white',
       borderColor: checked
-        ? themePrimary.main
+        ? variant === 'inverse'
+          ? colors.soap300
+          : themePrimary.main
         : disabled
         ? inputColors.disabled.border
+        : variant === 'inverse'
+        ? colors.soap300
         : inputColors.hoverBorder,
       borderWidth: '1px',
     },
     '&:focus, &focus:hover': {
       '& ~ div:first-of-type': {
-        borderColor: checked ? themePrimary.main : themeFocusOutline,
         borderWidth: '2px',
+        borderColor: variant === 'inverse' ? colors.blackPepper400 : themeFocusOutline,
+        boxShadow: 'none',
+        ...focusRing({
+          width: variant === 'inverse' ? 2 : 0,
+          separation: 0,
+          animate: false,
+          innerColor: variant === 'inverse' ? colors.blackPepper400 : undefined,
+          outerColor: variant === 'inverse' ? colors.frenchVanilla100 : undefined,
+        }),
       },
     },
     '&:checked:focus ~ div:first-of-type': {
-      ...focusRing({separation: 2, outerColor: themeFocusOutline}),
+      ...focusRing({
+        separation: 2,
+        width: 2,
+        innerColor: variant === 'inverse' ? colors.blackPepper400 : undefined,
+        outerColor: variant === 'inverse' ? colors.frenchVanilla100 : themeFocusOutline,
+      }),
+      borderColor: variant === 'inverse' ? colors.frenchVanilla100 : themePrimary.main,
+      borderWidth: '2px',
     },
     ...mouseFocusBehavior({
       '&:focus ~ div:first-of-type': {
-        ...focusRing({width: 0, outerColor: themeFocusOutline}),
+        ...focusRing({
+          width: 0,
+          outerColor: variant === 'inverse' ? colors.frenchVanilla100 : themeFocusOutline,
+        }),
         borderWidth: '1px',
-        borderColor: checked ? themePrimary.main : inputColors.border,
+        borderColor: checked
+          ? variant === 'inverse'
+            ? colors.soap300
+            : themePrimary.main
+          : inputColors.border,
       },
       '&:focus:hover ~ div:first-of-type, &:focus:active ~ div:first-of-type': {
-        borderColor: checked ? themePrimary.main : inputColors.hoverBorder,
+        borderColor: checked
+          ? variant === 'inverse'
+            ? colors.soap300
+            : themePrimary.main
+          : variant === 'inverse'
+          ? colors.soap300
+          : inputColors.hoverBorder,
       },
     }),
   })
@@ -187,6 +227,7 @@ const RadioBackground = styled('div')<RadioProps>(
   ({
     checked,
     disabled,
+    variant,
     theme: {
       canvas: {
         palette: {primary: themePrimary},
@@ -194,19 +235,26 @@ const RadioBackground = styled('div')<RadioProps>(
     },
   }) => ({
     borderColor: checked
-      ? themePrimary.main
+      ? variant === 'inverse'
+        ? colors.soap300
+        : themePrimary.main
       : disabled
       ? inputColors.disabled.border
+      : variant === 'inverse'
+      ? colors.soap300
       : inputColors.border,
     backgroundColor: checked
-      ? themePrimary.main
+      ? variant === 'inverse'
+        ? colors.frenchVanilla100
+        : themePrimary.main
       : disabled
       ? inputColors.disabled.background
       : 'white',
+    opacity: disabled && variant === 'inverse' ? '.4' : '1',
   })
 );
 
-const RadioCheck = styled('div')<Pick<RadioProps, 'checked'>>(
+const RadioCheck = styled('div')<Pick<RadioProps, 'checked' | 'variant'>>(
   {
     borderRadius: radioBorderRadius,
     display: 'flex',
@@ -216,8 +264,11 @@ const RadioCheck = styled('div')<Pick<RadioProps, 'checked'>>(
     transition: 'transform 200ms ease, opacity 200ms ease',
     width: radioDot,
   },
-  ({theme}) => ({
-    backgroundColor: theme.canvas.palette.primary.contrast,
+  ({theme, variant}) => ({
+    backgroundColor:
+      variant === 'inverse'
+        ? theme.canvas.palette.primary.main
+        : theme.canvas.palette.primary.contrast,
   }),
   ({checked}) => ({
     opacity: checked ? 1 : 0,
@@ -225,18 +276,35 @@ const RadioCheck = styled('div')<Pick<RadioProps, 'checked'>>(
   })
 );
 
-const RadioLabel = styled('label')<{disabled?: boolean}>(
+const RadioLabel = styled('label')<{disabled?: boolean; variant?: 'inverse' | undefined}>(
   {
     ...canvas.type.levels.subtext.large,
     paddingLeft: radioLabelDistance,
   },
-  ({disabled}) => (disabled ? {color: inputColors.disabled.text} : {cursor: 'pointer'})
+  ({variant}) => (variant === 'inverse' ? {color: colors.frenchVanilla100} : undefined),
+  ({disabled, variant}) =>
+    disabled
+      ? {
+          color: variant === 'inverse' ? colors.frenchVanilla100 : inputColors.disabled.text,
+          opacity: variant === 'inverse' ? '.4' : '1',
+        }
+      : {cursor: 'pointer'}
 );
 
 export const Radio = createComponent('input')({
   displayName: 'Radio',
   Component: (
-    {checked = false, id, label = '', disabled, name, onChange, value, ...elemProps}: RadioProps,
+    {
+      checked = false,
+      id,
+      label = '',
+      disabled,
+      name,
+      onChange,
+      value,
+      variant,
+      ...elemProps
+    }: RadioProps,
     ref,
     Element
   ) => {
@@ -255,15 +323,16 @@ export const Radio = createComponent('input')({
             type="radio"
             value={value}
             aria-checked={checked}
+            variant={variant}
             {...elemProps}
           />
-          <RadioRipple />
-          <RadioBackground checked={checked} disabled={disabled}>
-            <RadioCheck checked={checked} />
+          <RadioRipple variant={variant} />
+          <RadioBackground checked={checked} disabled={disabled} variant={variant}>
+            <RadioCheck checked={checked} variant={variant} />
           </RadioBackground>
         </RadioInputWrapper>
         {label && (
-          <RadioLabel htmlFor={inputId} disabled={disabled}>
+          <RadioLabel htmlFor={inputId} disabled={disabled} variant={variant}>
             {label}
           </RadioLabel>
         )}

package/radio/lib/RadioGroup.tsx

@@ -42,8 +42,12 @@ const Container = styled('div')<Pick<RadioGroupProps, 'error' | 'grow' | 'theme'
     margin: `-${space.xxxs} -${space.xs}`,
     '& > div': {
       margin: `${space.xxs} ${space.zero}`,
+      alignItems: 'flex-start',
+      '> div': {
+        flex: '0 0 auto',
+      },
       '&:first-of-type': {
-        marginTop: space.xxxs,
+        marginTop: '6px',
       },
       '&:last-child': {
         marginBottom: space.xxxs,

package/segmented-control/README.md

@@ -14,17 +14,16 @@ yarn add @workday/canvas-kit-react
 ```tsx
 import * as React from 'react';
 import {SegmentedControl} from '@workday/canvas-kit-react/segmented-control';
-import {IconButton} from '@workday/canvas-kit-react/button';
 import {listViewIcon, worksheetsIcon} from '@workday/canvas-system-icons-web';
 
 <SegmentedControl>
-  <IconButton icon={listViewIcon} aria-label="List View" value="list-view" />
-  <IconButton icon={worksheetsIcon} aria-label="Table view" value="table-view" />
+  <SegmentedControl.Button icon={listViewIcon} aria-label="List View" value="list-view" />
+  <SegmentedControl.Button icon={worksheetsIcon} aria-label="Table view" value="table-view" />
 </SegmentedControl>;
 ```
 
-**Note:** while managing state using a unique `value` for each `IconButton` child is encouraged, you
-can also use indexes and omit the `value` field. It is strongly recommended to not mix these two
+**Note:** while managing state using a unique `value` for each `Button` child is encouraged, you can
+also use indexes and omit the `value` field. It is strongly recommended to not mix these two
 methods.
 
 ## Static Properties
@@ -35,9 +34,9 @@ methods.
 
 ### Required
 
-#### `children: React.ReactElement<IconButton>[]`
+#### `children:React.ReactElement<SegmentedControlButtonProps>[]`
 
-> Icon buttons to toggle between.
+> Buttons to toggle between.
 
 ---
 
@@ -45,8 +44,8 @@ methods.
 
 #### `value: string | number`
 
-> Identify which item is selected (toggled=true). If a string is passed, the IconButton with the
-> corresponding value will be selected. If a number is passed, the IconButton with the corresponding
+> Identify which item is selected (toggled=true). If a string is passed, the Button with the
+> corresponding value will be selected. If a number is passed, the Button with the corresponding
 > index will be selected.
 
 ---

package/segmented-control/lib/SegmentedControl.tsx

@@ -1,19 +1,19 @@
 import * as React from 'react';
-import {borderRadius, colors} from '@workday/canvas-kit-react/tokens';
-import {IconButton, IconButtonProps} from '@workday/canvas-kit-react/button';
-import {mouseFocusBehavior, styled} from '@workday/canvas-kit-react/common';
+
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {SegmentedControlButton, SegmentedControlButtonProps} from './SegmentedControlButton';
 
 export interface SegmentedControlProps {
   /**
-   * The IconButton children of the SegmentedControl (must be at least two).
+   * The Button children of the SegmentedControl (must be at least two).
    * TODO: Add support for text children
    */
-  children: React.ReactElement<IconButtonProps>[];
+  children: React.ReactElement<SegmentedControlButtonProps>[];
 
   /**
-   * The value or index of the IconButton that the SegmentedControl should be toggled on to.
-   * If a string is provided, the IconButton with the corresponding value will be selected.
-   * If a number is provided, the IconButton with the corresponding index will be selected.
+   * The value or index of the Button that the SegmentedControl should be toggled on to.
+   * If a string is provided, the Button with the corresponding value will be selected.
+   * If a number is provided, the Button with the corresponding index will be selected.
    * @default 0
    */
   value?: string | number;
@@ -26,54 +26,6 @@ export interface SegmentedControlProps {
   onChange?: (value: string | number) => void;
 }
 
-const SegmentedControlContainer = styled('div')(
-  {
-    '& button': {
-      borderRadius: borderRadius.zero,
-      border: `1px solid ${colors.soap500}`,
-      borderLeft: 'none',
-      '&[aria-pressed="true"]': {
-        borderColor: colors.blueberry400,
-        '&:hover, &:focus:hover': {
-          background: colors.blueberry400,
-        },
-      },
-      '&:first-of-type': {
-        borderRadius: `${borderRadius.m} 0 0 ${borderRadius.m}`,
-        borderLeft: `1px solid ${colors.soap500}`,
-      },
-      '&:last-of-type': {
-        borderRadius: `0 ${borderRadius.m} ${borderRadius.m} 0`,
-      },
-      '&:focus': {
-        borderRadius: borderRadius.m,
-        zIndex: 1,
-        animation: 'none', // reset focusRing animation
-        transition: 'all 120ms, border-radius 1ms',
-        ...mouseFocusBehavior({
-          '&': {
-            borderRadius: borderRadius.zero,
-            '&:first-of-type': {
-              borderRadius: `${borderRadius.m} 0 0 ${borderRadius.m}`,
-            },
-            '&:last-of-type': {
-              borderRadius: `0 ${borderRadius.m} ${borderRadius.m} 0`,
-            },
-          },
-        }),
-      },
-    },
-  },
-  ({theme}) => ({
-    '& button[aria-pressed="true"]': {
-      borderColor: theme.canvas.palette.primary.main,
-      '&:hover, &:focus:hover': {
-        background: theme.canvas.palette.primary.main,
-      },
-    },
-  })
-);
-
 const onButtonClick = (
   existingOnClick: ((e: React.MouseEvent<HTMLButtonElement>) => void) | undefined,
   onChange: ((value: string | number) => void) | undefined,
@@ -94,28 +46,37 @@ const onButtonClick = (
   }
 };
 
-const SegmentedControl = ({value = 0, children, onChange, ...elemProps}: SegmentedControlProps) => (
-  <SegmentedControlContainer {...elemProps}>
-    {React.Children.map(
-      children,
-      (
-        child: React.ReactElement<
-          IconButtonProps & {onClick?: React.MouseEventHandler<HTMLButtonElement>} // IconButton will have correct props
-        >,
-        index: number
-      ) => {
-        if (typeof child.type === typeof IconButton) {
-          return React.cloneElement(child, {
-            toggled: typeof value === 'number' ? index === value : child.props.value === value,
-            variant: 'squareFilled',
-            onClick: onButtonClick.bind(undefined, child.props.onClick, onChange, index),
-          });
-        }
+export const SegmentedControl = createComponent('div')({
+  displayName: 'SegmentedControl',
+  Component: ({value = 0, children, onChange, ...elemProps}: SegmentedControlProps, ref) => {
+    return (
+      <div {...elemProps}>
+        {React.Children.map(
+          children,
+          (
+            child: React.ReactElement<
+              SegmentedControlButtonProps & {
+                onClick?: React.MouseEventHandler<HTMLButtonElement>;
+              } & React.HTMLAttributes<HTMLButtonElement> // segmented control button will have correct props
+            >,
+            index: number
+          ) => {
+            if (typeof child.type === typeof SegmentedControlButton) {
+              return React.cloneElement(child, {
+                toggled: typeof value === 'number' ? index === value : child.props.value === value,
+                onClick: onButtonClick.bind(undefined, child.props.onClick, onChange, index),
+              });
+            }
 
-        return child;
-      }
-    )}
-  </SegmentedControlContainer>
-);
+            return child;
+          }
+        )}
+      </div>
+    );
+  },
+  subComponents: {
+    Button: SegmentedControlButton,
+  },
+});
 
 export default SegmentedControl;

package/segmented-control/lib/SegmentedControlButton.tsx

@@ -0,0 +1,108 @@
+import React from 'react';
+import {BaseButton, ButtonColors} from '@workday/canvas-kit-react/button';
+import {
+  createComponent,
+  mouseFocusBehavior,
+  styled,
+  StyledType,
+} from '@workday/canvas-kit-react/common';
+import {CanvasSystemIcon} from '@workday/design-assets-types';
+import {colors, borderRadius, space} from '@workday/canvas-kit-react/tokens';
+
+const getIconButtonColors = (toggled?: boolean): ButtonColors => {
+  return {
+    default: {
+      background: toggled ? colors.blueberry400 : colors.soap200,
+      icon: toggled ? colors.frenchVanilla100 : colors.licorice200,
+    },
+    hover: {
+      background: toggled ? colors.blueberry400 : colors.soap300,
+      icon: toggled ? colors.frenchVanilla100 : colors.licorice500,
+    },
+    active: {
+      background: toggled ? colors.blueberry400 : colors.soap500,
+      icon: toggled ? colors.frenchVanilla100 : colors.licorice500,
+    },
+    focus: {
+      background: toggled ? colors.blueberry400 : undefined,
+      icon: toggled ? colors.frenchVanilla100 : colors.licorice500,
+    },
+    disabled: {
+      background: toggled ? colors.soap100 : colors.soap100,
+      icon: colors.soap600,
+      opacity: '1',
+    },
+  };
+};
+
+const StyledButton = styled(BaseButton)<StyledType>(
+  {
+    borderRadius: borderRadius.zero,
+    border: `1px solid ${colors.soap500}`,
+    borderLeft: 'none',
+    minWidth: space.xl,
+    '&:first-of-type': {
+      borderRadius: `${borderRadius.m} 0 0 ${borderRadius.m}`,
+      borderLeft: `1px solid ${colors.soap500}`,
+    },
+    '&:last-of-type': {
+      borderRadius: `0 ${borderRadius.m} ${borderRadius.m} 0`,
+    },
+    '&[aria-pressed="true"]': {
+      borderColor: `${colors.blueberry400} !important`,
+      '&:hover, &:focus:hover': {
+        background: colors.blueberry400,
+      },
+    },
+    '&:focus': {
+      borderRadius: borderRadius.m,
+      zIndex: 1,
+      animation: 'none', // reset focusRing animation
+      transition: 'all 120ms, border-radius 1ms',
+      ...mouseFocusBehavior({
+        '&': {
+          borderRadius: borderRadius.zero,
+          '&:first-of-type': {
+            borderRadius: `${borderRadius.m} 0 0 ${borderRadius.m}`,
+          },
+          '&:last-of-type': {
+            borderRadius: `0 ${borderRadius.m} ${borderRadius.m} 0`,
+          },
+        },
+      }),
+    },
+  },
+  ({theme}) => ({
+    '[aria-pressed="true"]': {
+      borderColor: theme.canvas.palette.primary.main,
+      '&:hover, &:focus:hover': {
+        background: theme.canvas.palette.primary.main,
+      },
+    },
+  })
+);
+
+export interface SegmentedControlButtonProps {
+  toggled?: boolean;
+  icon: CanvasSystemIcon;
+  value?: string | number;
+}
+
+export const SegmentedControlButton = createComponent('button')({
+  displayName: 'Button',
+  Component: ({value, icon, toggled, ...props}: SegmentedControlButtonProps, ref, Element) => {
+    return (
+      <StyledButton
+        as={Element}
+        aria-pressed={toggled}
+        value={value}
+        colors={getIconButtonColors(toggled)}
+        fillIcon={toggled}
+        ref={ref}
+        {...props}
+      >
+        <BaseButton.Icon size="large" icon={icon} />
+      </StyledButton>
+    );
+  },
+});

package/side-panel/README.md

@@ -15,7 +15,7 @@ yarn add @workday/canvas-kit-react
 
 ```tsx
 import * as React from 'react';
-import {SecondaryButton, IconButton} from '@workday/canvas-kit-react/button';
+import {SecondaryButton, TertiaryButton} from '@workday/canvas-kit-react/button';
 import SidePanel from '@workday/canvas-kit-react/side-panel';
 
 interface SidePanelState {
@@ -41,9 +41,9 @@ class SidePanelExample extends React.Component<{}, SidePanelState> {
         {open ? (
           <SecondaryButton variant="primary">Add New</SecondaryButton>
         ) : (
-          <IconButton size="small" variant="filled">
+          <TertiaryButton size="small" variant="filled">
             <SystemIcon icon={plusIcon} />
-          </IconButton>
+          </TertiaryButton>
         )}
         <ul>
           <li css={listItemStyles}>{open && <span>Home</span>}</li>

package/side-panel/lib/SidePanel.tsx

@@ -4,7 +4,7 @@ import throttle from 'lodash/throttle';
 
 import {CanvasSystemIcon} from '@workday/design-assets-types';
 import {colors, space, type, CanvasSpaceValues} from '@workday/canvas-kit-react/tokens';
-import {IconButton, IconButtonProps} from '@workday/canvas-kit-react/button';
+import {TertiaryButton, TertiaryButtonProps} from '@workday/canvas-kit-react/button';
 import {chevronLeftIcon, chevronRightIcon} from '@workday/canvas-system-icons-web';
 
 export interface SidePanelProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -141,7 +141,9 @@ const ChildrenContainer = styled('div')<Pick<SidePanelProps, 'openWidth' | 'open
   })
 );
 
-const ToggleButton = styled(IconButton)<IconButtonProps & Pick<SidePanelProps, 'openDirection'>>(
+const ToggleButton = styled(TertiaryButton)<
+  TertiaryButtonProps & Pick<SidePanelProps, 'openDirection'>
+>(
   {
     position: 'absolute',
     bottom: space.s,
@@ -220,11 +222,8 @@ export default class SidePanel extends React.Component<SidePanelProps, SidePanel
             <ToggleButton
               openDirection={openDirection}
               aria-label={open ? closeNavigationAriaLabel : openNavigationAriaLabel}
-              toggled={false}
-              size="small"
               onClick={this.onToggleClick}
               icon={this.toggleButtonDirection(open, openDirection)}
-              variant="circleFilled"
             />
           )}
         </SidePanelFooter>

package/skeleton/lib/skeleton.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {keyframes} from '@emotion/core';
+import {keyframes} from '@emotion/react';
 import styled from '@emotion/styled';
 
 import {accessibleHide, createComponent, StyledType} from '@workday/canvas-kit-react/common';