@workday/canvas-kit-react 7.0.0-alpha.0-next.0 → 7.0.0-alpha.0-next.5

package/modal/lib/ModalOverflowOverlay.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+import {createComponent, ExtractProps, StyledType} from '@workday/canvas-kit-react/common';
+
+import {ModalOverlay} from './ModalOverlay';
+import styled from '@emotion/styled';
+
+const StyledOverlay = styled(ModalOverlay)<StyledType>({
+  '& > div': {maxHeight: 'inherit'}, // reset maxHeight of centering div
+});
+
+export const ModalOverflowOverlay = createComponent('div')({
+  displayName: 'Modal.OverflowOverlay',
+  Component: (
+    {children, model, ...elemProps}: ExtractProps<typeof ModalOverlay, never>,
+    ref,
+    Element
+  ) => {
+    return (
+      <StyledOverlay as={Element} ref={ref} overflow="auto" {...elemProps}>
+        {children}
+      </StyledOverlay>
+    );
+  },
+});

package/modal/lib/ModalOverlay.tsx

@@ -10,10 +10,11 @@ import {
   useForkRef,
 } from '@workday/canvas-kit-react/common';
 import {PopupModel, PopupModelContext, usePopupStack} from '@workday/canvas-kit-react/popup';
-import {keyframes} from '@emotion/core';
+import {keyframes} from '@emotion/react';
 import styled from '@emotion/styled';
+import {Box, BoxProps} from '@workday/canvas-kit-labs-react/common';
 
-export interface ModalOverlayProps {
+export interface ModalOverlayProps extends BoxProps {
   model?: PopupModel;
   children: React.ReactNode;
 }
@@ -27,7 +28,7 @@ const fadeIn = keyframes`
   }
 `;
 
-const Container = styled('div')<StyledType>({
+const Container = styled(Box)<StyledType>({
   position: 'fixed',
   top: 0,
   left: 0,
@@ -47,13 +48,20 @@ const Container = styled('div')<StyledType>({
 // the Modal. The centering container forces a "center" pixel calculation by making sure the width
 // is always an even number
 const CenteringContainer = styled('div')({
-  height: '100vh',
+  maxHeight: '100vh',
   display: 'flex',
   position: 'absolute',
   left: 0,
   top: 0,
   alignItems: 'center',
   justifyContent: 'center',
+
+  // IE11 fix for setting min-height in a flex container
+  ':before': {
+    display: 'block',
+    content: "''",
+    height: '100vh',
+  },
 });
 
 export const ModalOverlay = createComponent('div')({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "7.0.0-alpha.0-next.0+69f28d82",
+  "version": "7.0.0-alpha.0-next.5+b69254c7",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -52,19 +52,18 @@
     "react": "^16.8 || ^17.0"
   },
   "dependencies": {
-    "@emotion/core": "^10.0.28",
-    "@emotion/is-prop-valid": "^0.8.2",
-    "@emotion/styled": "^10.0.27",
+    "@emotion/is-prop-valid": "^1.1.1",
+    "@emotion/react": "^11.7.1",
+    "@emotion/styled": "^11.6.0",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-labs-react": "^7.0.0-alpha.0-next.0+69f28d82",
-    "@workday/canvas-kit-popup-stack": "^7.0.0-alpha.0-next.0+69f28d82",
-    "@workday/canvas-kit-preview-react": "^7.0.0-alpha.0-next.0+69f28d82",
+    "@workday/canvas-kit-labs-react": "^7.0.0-alpha.0-next.5+b69254c7",
+    "@workday/canvas-kit-popup-stack": "^7.0.0-alpha.0-next.5+b69254c7",
+    "@workday/canvas-kit-preview-react": "^7.0.0-alpha.0-next.5+b69254c7",
     "@workday/canvas-system-icons-web": "1.0.41",
     "@workday/design-assets-types": "^0.2.4",
     "chroma-js": "^2.1.0",
     "element-closest": "^3.0.2",
-    "emotion-theming": "^10.0.10",
     "lodash": "^4.17.14",
     "polished": "^4.1.3",
     "react-innertext": "^1.1.5",
@@ -77,5 +76,5 @@
     "@workday/canvas-accent-icons-web": "^1.0.0",
     "@workday/canvas-applet-icons-web": "^0.17.50"
   },
-  "gitHead": "69f28d82a0291ed45c2c9d3ef92e437d69033471"
+  "gitHead": "b69254c752dc3fcc508e3b93164f8f7a83b005bb"
 }

package/pagination/lib/Pagination/AdditionalDetails.tsx

@@ -1,11 +1,9 @@
-/** @jsx jsx */
 import * as React from 'react';
-import {jsx, css} from '@emotion/core';
-import {type, typeColors} from '@workday/canvas-kit-react/tokens';
-import {accessibleHide} from '@workday/canvas-kit-react/common';
+import {type, typeColors, space} from '@workday/canvas-kit-react/tokens';
+import {accessibleHide, styled, StyledType} from '@workday/canvas-kit-react/common';
 
 import {PaginationModel} from './types';
-import {Flex, FlexProps} from './common/Flex';
+import {Flex, FlexProps} from '@workday/canvas-kit-labs-react/layout';
 import {useLiveRegion} from './common/useLiveRegion';
 
 export interface AdditionalDetailsProps extends FlexProps {
@@ -15,30 +13,38 @@ export interface AdditionalDetailsProps extends FlexProps {
   shouldHideDetails?: boolean;
 }
 
-// Ideally, these styles would be applied directly to a Text component
-const textStyles = css({
-  ...type.levels.subtext.medium,
-  color: typeColors.hint,
+const StyledAdditionalDetails = styled(Flex)<
+  StyledType & Pick<AdditionalDetailsProps, 'shouldHideDetails'>
+>(({shouldHideDetails}) => {
+  const styles = {
+    ...type.levels.subtext.medium,
+    color: typeColors.hint,
+  };
+  if (shouldHideDetails) {
+    return {
+      ...styles,
+      ...accessibleHide,
+      marginTop: space.zero,
+    };
+  } else {
+    return {
+      ...styles,
+      marginTop: space.xs,
+    };
+  }
 });
 
 export const AdditionalDetails = ({
   model,
   children,
   shouldAnnounceToScreenReader,
-  shouldHideDetails = false,
   ...elemProps
 }: AdditionalDetailsProps) => {
   const liveRegionProps = useLiveRegion({shouldAnnounceToScreenReader});
-  const detailStyles = css([textStyles, shouldHideDetails ? accessibleHide : null]);
 
   return (
-    <Flex
-      mt={shouldHideDetails ? 'zero' : 'xs'}
-      css={detailStyles}
-      {...liveRegionProps}
-      {...elemProps}
-    >
+    <StyledAdditionalDetails {...liveRegionProps} {...elemProps}>
       {typeof children === 'function' ? children(model) : children}
-    </Flex>
+    </StyledAdditionalDetails>
   );
 };

package/pagination/lib/Pagination/Controls.tsx

@@ -8,7 +8,7 @@ import {
 } from '@workday/canvas-system-icons-web';
 
 import {PaginationModel} from './types';
-import {HStack} from './common/Stack';
+import {HStack} from '@workday/canvas-kit-labs-react/layout';
 import {useRTL} from './common/utils/useRTL';
 
 export type ControlButtonProps = IconButtonProps &

package/pagination/lib/Pagination/GoTo/Form.tsx

@@ -1,11 +1,10 @@
 import * as React from 'react';
-import {HStack, HStackProps} from '../common/Stack';
-import {Spacing} from '../common/utils/space';
+import {HStack, HStackProps, StackSpacing} from '@workday/canvas-kit-labs-react/layout';
 import {useRTL} from '../common/utils/useRTL';
 
 export type GoToFormProps = React.FormHTMLAttributes<HTMLFormElement> &
   Omit<HStackProps, 'spacing'> & {
-    spacing?: Spacing;
+    spacing?: StackSpacing;
   };
 
 export const GoToForm = ({children, onSubmit, spacing = 'xxs', ...elemProps}: GoToFormProps) => {
@@ -15,8 +14,8 @@ export const GoToForm = ({children, onSubmit, spacing = 'xxs', ...elemProps}: Go
       as="form"
       alignItems="center"
       spacing={spacing}
-      pl={shouldUseRTL ? 'xxs' : undefined}
-      pr={shouldUseRTL ? 'xxs' : undefined}
+      paddingLeft={shouldUseRTL ? 'xxs' : undefined}
+      paddingRight={shouldUseRTL ? 'xxs' : undefined}
       onSubmit={onSubmit}
       {...elemProps}
     >

package/pagination/lib/Pagination/GoTo/Label.tsx

@@ -1,9 +1,8 @@
-/** @jsx jsx */
 import * as React from 'react';
-import {jsx, css, Interpolation} from '@emotion/core';
 import {type, typeColors} from '@workday/canvas-kit-react/tokens';
 
 import {PaginationModel} from '../types';
+import {StyledType, styled} from '@workday/canvas-kit-react/common';
 
 export interface GoToLabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
   model: PaginationModel;
@@ -13,16 +12,16 @@ export interface GoToLabelProps extends React.LabelHTMLAttributes<HTMLLabelEleme
   children?: (model: PaginationModel) => React.ReactNode | React.ReactNode;
 }
 
-const labelStyles = css({
+const StyledLabel = styled('label')<StyledType>({
   ...type.levels.subtext.medium,
   color: typeColors.hint,
   whiteSpace: 'nowrap',
 });
 
-export const GoToLabel = ({css: cssProp, model, children, ...elemProps}: GoToLabelProps) => {
+export const GoToLabel = ({model, children, ...elemProps}: GoToLabelProps) => {
   return (
-    <label css={[labelStyles, cssProp as Interpolation<undefined>]} {...elemProps}>
+    <StyledLabel {...elemProps}>
       {typeof children === 'function' ? children(model) : children}
-    </label>
+    </StyledLabel>
   );
 };

package/pagination/lib/Pagination/Nav.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {Flex, FlexProps} from './common/Flex';
+import {Flex, FlexProps} from '@workday/canvas-kit-labs-react/layout';
 
 export interface PaginationNavProps extends Omit<FlexProps, 'as'> {
   'aria-label': string;
@@ -11,7 +11,7 @@ export const PaginationNav = ({'aria-label': ariaLabel, ...elemProps}: Paginatio
       as="nav"
       aria-label={ariaLabel}
       display="inline-flex"
-      direction="column"
+      flexDirection="column"
       alignItems="center"
       {...elemProps}
     />

package/pagination/lib/Pagination/PageList.tsx

@@ -1,25 +1,27 @@
-/** @jsx jsx */
 import * as React from 'react';
-import {jsx, css} from '@emotion/core';
 
 import {PaginationModel} from './types';
-import {List, ListItem, ListItemProps, ListProps} from './common/List';
-import {useStack} from './common/Stack';
-import {useRTL} from './common/utils/useRTL';
+import {ListItem, ListItemProps} from './common/List';
+import {HStack, HStackProps} from '@workday/canvas-kit-labs-react/layout';
 
-export interface PageListProps extends Omit<ListProps, 'as'> {
+export interface PageListProps extends Omit<HStackProps, 'as' | 'spacing'> {
   model: PaginationModel;
   children?: (model: PaginationModel) => React.ReactNode[] | React.ReactNode;
 }
 
 export const PageList = ({model, children, ...elemProps}: PageListProps) => {
-  const {shouldUseRTL} = useRTL();
-  const stackStyles = useStack({direction: 'row', spacing: 'xxxs', shouldUseRTL});
-
   return (
-    <List as="ol" role="list" css={css(stackStyles)} {...elemProps}>
+    <HStack
+      margin="zero"
+      as="ol"
+      role="list"
+      paddingLeft="zero"
+      paddingRight="zero"
+      spacing="xxxs"
+      {...elemProps}
+    >
       {typeof children === 'function' ? children(model) : children}
-    </List>
+    </HStack>
   );
 };
 

package/pagination/lib/Pagination/common/List.tsx

@@ -1,39 +1,41 @@
-/** @jsx jsx */
 import * as React from 'react';
-import {jsx, css} from '@emotion/core';
 
-import {Flex, FlexProps} from './Flex';
+import {Flex, FlexProps} from '@workday/canvas-kit-labs-react/layout';
+import {StyledType, styled, createComponent} from '@workday/canvas-kit-react/common';
 
-export interface ListProps extends FlexProps, React.OlHTMLAttributes<HTMLElement> {
-  as: 'ol' | 'ul';
-}
+export interface ListProps extends FlexProps {}
 
-const listStyles = css({
+const StyledList = styled(Flex.as('ul'))<StyledType & FlexProps>({
   listStyle: 'none',
 });
 
-export const List = React.forwardRef<HTMLOListElement | HTMLUListElement, ListProps>(
-  ({as, children, ...elemProps}, ref) => {
+export const List = createComponent('ul')({
+  displayName: 'List',
+  Component: ({children, ...elemProps}: ListProps, ref, Element) => {
     return (
-      <Flex as={as} m="zero" p="zero" css={listStyles} ref={ref} {...elemProps}>
+      <StyledList
+        as={Element}
+        marginY="zero"
+        marginX="zero"
+        padding="zero"
+        ref={ref}
+        {...elemProps}
+      >
         {children}
-      </Flex>
+      </StyledList>
     );
-  }
-);
-
-List.displayName = 'List';
+  },
+});
 
-export type ListItemProps = Omit<FlexProps, 'as'>;
+export interface ListItemProps extends FlexProps {}
 
-export const ListItem = React.forwardRef<HTMLLIElement, ListItemProps>(
-  ({children, ...elemProps}, ref) => {
+export const ListItem = createComponent('li')({
+  displayName: 'ListItem',
+  Component: ({children, ...elemProps}: ListItemProps, ref, Element) => {
     return (
-      <Flex as="li" ref={ref} {...elemProps}>
+      <Flex as={Element} ref={ref} {...elemProps}>
         {children}
       </Flex>
     );
-  }
-);
-
-ListItem.displayName = 'ListItem';
+  },
+});

package/popup/lib/Popper.tsx

@@ -6,6 +6,7 @@ export type Placement = PopperJS.Placement;
 export type PopperOptions = PopperJS.Options;
 
 import {usePopupStack} from './hooks';
+import {useLocalRef} from '@workday/canvas-kit-react/common';
 
 export interface PopperProps {
   /**
@@ -68,6 +69,11 @@ export interface PopperProps {
    * @default true
    */
   portal?: boolean;
+  /**
+   * Reference to the PopperJS instance. Useful for making direct method calls on the popper
+   * instance like `update`.
+   */
+  popperInstanceRef?: React.Ref<PopperJS.Instance>;
 }
 
 export const Popper = React.forwardRef<HTMLDivElement, PopperProps>(
@@ -108,11 +114,12 @@ const OpenPopper = React.forwardRef<HTMLDivElement, PopperProps>(
       children,
       portal,
       containerElement,
+      popperInstanceRef,
     }: PopperProps,
     ref
   ) => {
     const firstRender = React.useRef(true);
-    const popperInstance = React.useRef<PopperJS.Instance>();
+    const {localRef, elementRef} = useLocalRef(popperInstanceRef);
     const [placement, setPlacement] = React.useState(popperPlacement);
     const stackRef = usePopupStack(ref, anchorElement as HTMLElement);
 
@@ -141,14 +148,15 @@ const OpenPopper = React.forwardRef<HTMLDivElement, PopperProps>(
       }
 
       if (stackRef.current) {
-        popperInstance.current = PopperJS.createPopper(anchorEl, stackRef.current, {
+        const instance = PopperJS.createPopper(anchorEl, stackRef.current, {
           placement: popperPlacement,
           ...popperOptions,
           modifiers: [...(popperOptions.modifiers || []), placementModifier],
         });
+        elementRef(instance); // update the ref with the instance
 
         return () => {
-          popperInstance.current?.destroy();
+          instance?.destroy();
         };
       }
 
@@ -162,14 +170,14 @@ const OpenPopper = React.forwardRef<HTMLDivElement, PopperProps>(
     React.useLayoutEffect(() => {
       // Only update options if this is _not_ the first render
       if (!firstRender.current) {
-        popperInstance.current?.setOptions({
+        localRef.current?.setOptions({
           placement: popperPlacement,
           ...popperOptions,
           modifiers: [...(popperOptions.modifiers || []), placementModifier],
         });
       }
       firstRender.current = false;
-    }, [popperOptions, popperPlacement, placementModifier]);
+    }, [popperOptions, popperPlacement, placementModifier, localRef]);
 
     const contents = <>{isRenderProp(children) ? children({placement}) : children}</>;
 

package/popup/lib/Popup.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 
-import {Card} from '@workday/canvas-kit-react/card';
 import {createComponent, useDefaultModel} from '@workday/canvas-kit-react/common';
 
 import {PopupModel, usePopupModel, PopupModelContext} from './hooks';
@@ -10,6 +9,7 @@ import {PopupPopper} from './PopupPopper';
 import {PopupHeading} from './PopupHeading';
 import {PopupCloseIcon} from './PopupCloseIcon';
 import {PopupCloseButton} from './PopupCloseButton';
+import {PopupBody} from './PopupBody';
 
 export interface PopupProps {
   /**
@@ -30,7 +30,7 @@ export const Popup = createComponent()({
   },
   subComponents: {
     Heading: PopupHeading,
-    Body: Card.Body,
+    Body: PopupBody,
     Card: PopupCard,
     CloseIcon: PopupCloseIcon,
     Target: PopupTarget,

package/popup/lib/PopupBody.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+import {createComponent, ExtractProps} from '@workday/canvas-kit-react/common';
+import {Card} from '@workday/canvas-kit-react/card';
+
+export const PopupBody = createComponent('div')({
+  displayName: 'Popup.Body',
+  Component: (props: ExtractProps<typeof Card.Body, never>, ref) => {
+    return <Card.Body overflowY="auto" {...props} />;
+  },
+});

package/popup/lib/PopupCard.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import {keyframes} from '@emotion/core';
+import {keyframes} from '@emotion/react';
 
 import {Card} from '@workday/canvas-kit-react/card';
-import {space, type} from '@workday/canvas-kit-react/tokens';
+import {space, type, CanvasSpaceKeys} from '@workday/canvas-kit-react/tokens';
 import {
   styled,
   TransformOrigin,
@@ -11,12 +11,14 @@ import {
   StyledType,
   useModelContext,
   ExtractProps,
+  useConstant,
 } from '@workday/canvas-kit-react/common';
+import {Stack, StackStyleProps} from '@workday/canvas-kit-labs-react/layout';
 
 import {getTransformFromPlacement} from './getTransformFromPlacement';
 import {usePopupCard, PopupModel, PopupModelContext} from './hooks';
 
-export interface PopupCardProps extends ExtractProps<typeof Card, never> {
+export interface PopupCardProps extends ExtractProps<typeof Card, never>, Partial<StackStyleProps> {
   /**
    * Optionally pass a model directly to this component. Default is to implicitly use the same
    * model as the container component which uses React context. Only use this for advanced use-cases
@@ -67,14 +69,26 @@ export const PopupCard = createComponent('div')({
       return getTransformFromPlacement(localModel.state.placement || 'bottom');
     }, [localModel.state.placement]);
 
+    // As is a Stack that will render an element of `Element`
+    const As = useConstant(() => Stack.as(Element));
+
     return (
       <StyledPopupCard
-        as={Element}
+        as={As}
         transformOrigin={transformOrigin}
         position="relative"
         padding="l"
         depth={2}
         maxWidth={`calc(100vw - ${space.l})`}
+        spacing={0}
+        flexDirection="column"
+        minHeight={0}
+        maxHeight={`calc(100vh - ${
+          elemProps.margin
+            ? space[elemProps.margin as CanvasSpaceKeys] || elemProps.margin
+            : space.xl
+        } * 2)`}
+        overflowY="auto" // force IE11 to limit the flex size of the card. Without this, the body isn't allowed to overflow properly: https://github.com/philipwalton/flexbugs/issues/216#issuecomment-453053557
         {...props}
       >
         {children}

package/popup/lib/PopupHeading.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 
-import {createComponent, useModelContext} from '@workday/canvas-kit-react/common';
+import {createComponent, useModelContext, ExtractProps} from '@workday/canvas-kit-react/common';
 import {Card} from '@workday/canvas-kit-react/card';
 
 import {usePopupHeading, PopupModel, PopupModelContext} from './hooks';
 
-export interface PopupHeadingProps {
+export interface PopupHeadingProps extends ExtractProps<typeof Card.Heading, never> {
   /**
    * Optionally pass a model directly to this component. Default is to implicitly use the same
    * model as the container component which uses React context. Only use this for advanced use-cases
@@ -21,7 +21,7 @@ export const PopupHeading = createComponent('h2')({
 
     const props = usePopupHeading(localModel, elemProps, ref);
     return (
-      <Card.Heading as={Element} {...props}>
+      <Card.Heading as={Element} marginBottom="s" {...props}>
         {children}
       </Card.Heading>
     );

package/popup/lib/hooks/useInitialFocus.tsx

@@ -29,7 +29,9 @@ export const useInitialFocus = (model: PopupModel, elemProps = {}) => {
         'No focusable element was found. Please ensure popup has at least one focusable element'
       );
 
-      changeFocus(element);
+      requestAnimationFrame(() => {
+        changeFocus(element);
+      });
     }
   }, [model.state.initialFocusRef, model.state.stackRef, visible]);
 

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';

package/status-indicator/lib/StatusIndicator.tsx

@@ -35,7 +35,6 @@ export const statusIndicatorStyles: StatusIndicatorGenericStyle = {
     display: 'inline-flex',
     alignItems: 'center',
     verticalAlign: 'middle',
-    maxWidth: 150,
     height: space.s,
     padding: `1px ${space.xxxs}`,
     borderRadius: borderRadius.s,
@@ -116,6 +115,11 @@ export interface StatusIndicatorProps extends React.HTMLAttributes<HTMLSpanEleme
    * @default StatusIndicatorEmphasis.High
    */
   emphasis?: StatusIndicatorEmphasis;
+  /**
+   * The maxWidth of the container before it truncates
+   * @default 200
+   */
+  maxWidth?: number;
   /**
    * The text of the StatusIndicator.
    */
@@ -126,12 +130,12 @@ export interface StatusIndicatorProps extends React.HTMLAttributes<HTMLSpanEleme
   icon?: CanvasSystemIcon;
 }
 
-const Container = styled('span')<PickRequired<StatusIndicatorProps, 'emphasis', 'type'>>(
-  statusIndicatorStyles.styles,
-  ({type, emphasis}) => ({
-    ...statusIndicatorStyles.variants[type][emphasis],
-  })
-);
+const Container = styled('span')<
+  PickRequired<StatusIndicatorProps, 'emphasis' | 'maxWidth', 'type'>
+>(statusIndicatorStyles.styles, ({type, emphasis, maxWidth}) => ({
+  ...statusIndicatorStyles.variants[type][emphasis],
+  maxWidth: maxWidth,
+}));
 
 const StatusLabel = styled('span')({
   fontWeight: 'bold',
@@ -147,11 +151,18 @@ export default class StatusIndicator extends React.Component<StatusIndicatorProp
   public static Emphasis = StatusIndicatorEmphasis;
 
   public render() {
-    const {emphasis = StatusIndicatorEmphasis.High, type, icon, label, ...elemProps} = this.props;
+    const {
+      emphasis = StatusIndicatorEmphasis.High,
+      maxWidth = 200,
+      type,
+      icon,
+      label,
+      ...elemProps
+    } = this.props;
     const variant = statusIndicatorStyles.variants[type][emphasis]!;
 
     return (
-      <Container type={type} emphasis={emphasis} {...elemProps}>
+      <Container type={type} emphasis={emphasis} maxWidth={maxWidth} {...elemProps}>
         {icon && (
           <SystemIcon
             colorHover={variant.color}

package/table/lib/TableRow.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import {CSSObject} from '@emotion/core';
-import styled from '@emotion/styled';
+import styled, {CSSObject} from '@emotion/styled';
 import {rgba} from 'polished';
 import {colors, space, spaceNumbers, statusColors} from '@workday/canvas-kit-react/tokens';
 import {borderColor, borderWidth, cellBorder} from './Table';

package/tabs/lib/TabsItem.tsx

@@ -205,7 +205,7 @@ export const TabsItem = createComponent('button')({
       props.ref = elementRef;
       // eslint-disable-next-line react-hooks/rules-of-hooks
       useMount(() => {
-        if (localRef.current.querySelector('svg') && !props.hasIcon) {
+        if (localRef?.current?.querySelector('svg') && !props.hasIcon) {
           console.warn(
             `A Tabs.Item with an icon should have the 'hasIcon' prop set to true. This ensures correct rendering`
           );

package/tabs/lib/menu/MenuCard.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {keyframes} from '@emotion/core';
+import {keyframes} from '@emotion/react';
 
 import {Card} from '@workday/canvas-kit-react/card';
 import {space, type} from '@workday/canvas-kit-react/tokens';