@workday/canvas-kit-docs 13.0.0-alpha.1072-next.0 → 13.0.0-alpha.1075-next.0

package/dist/mdx/13.0-UPGRADE-GUIDE.mdx

@@ -21,6 +21,10 @@ any questions.
   - [External Hyperlink](#external-hyperlink)
   - [Pill](#pill)
   - [Tabs](#tabs)
+- [Brand Refresh](#brand-refresh)
+  - [Logo Updates](#logo-updates)
+- [Infrastructure](#infrastructure)
+	- [Supporting react-jsx](#supoorting-react-jsx)
 - [Troubleshooting](#troubleshooting)
 - [Glossary](#glossary)
   - [Main](#main)
@@ -116,7 +120,7 @@ The following components are affected:
 - `Tabs`
 - `Tooltip`
 
-## External Hyperlink
+### External Hyperlink
 
 **PR:** [#3101](https://github.com/Workday/canvas-kit/pull/3101)
 
@@ -134,7 +138,7 @@ The following components are affected:
 </ExternalHyperlink>
 ```
 
-## Pill
+### Pill
 
 **PRs:** [#3104](https://github.com/Workday/canvas-kit/pull/3104)
 
@@ -150,7 +154,7 @@ A few changes have been made to `Pill` to ensure proper accessibility and styles
 - `<Pill.IconButton/>` no longer has a default `aria-label="remove"`. You *must* provide an `aria-label` for `<Pill.IconButton/>` to ensure proper accessibility. Our examples have been updated to reflect this change.
 - `<Pill.Label/>` is a *required* element when using other sub-components like `<Pill.Icon/>` to ensure that the label truncates correctly.
 
-## Tabs
+### Tabs
 
 **PR:** [#3119](https://github.com/Workday/canvas-kit/pull/3119)
 
@@ -158,6 +162,66 @@ A few changes have been made to `Pill` to ensure proper accessibility and styles
 
 **Note:** There should be no developer impact and the visual changes are safe to accept.
 
+## Brand Refresh
+
+### Logo Updates
+
+We've removed the outdated Dub Logos in Main and promoted the new logos that were previously in our Preview package to Main as part of the brand refresh.
+
+| Old Logo Name | New Logo Name |
+| --------------- | ----------------- | 
+| dubLogoBlue | dubLogoPrimary | 
+| dubLogoWhite | dubLogoReversed | 
+| wdayLogoBlue | wdayLogoPrimary | 
+| wdayLogoWhite | wdayLogoReversed | 
+
+```tsx
+// In v12
+// Importing from Main common
+import {dubLogoBlue} from "@workday/canvas-kit-react/common"
+
+<div dangerouslySetInnerHTML={__html: dubLogoBlue} />
+
+// Importing from Preview common
+import {dubLogoPrimary} from "@workday/canvas-kit-preview-react/common"
+
+<div dangerouslySetInnerHTML={__html: dubLogoPrimary} />
+
+// In v13
+// New logos have been promoted to Main common AND renamed
+import {dubLogoPrimary} from "@workday/canvas-kit-preview-react/common"
+
+<div dangerouslySetInnerHTML={__html: dubLogoPrimary} />
+```
+
+🤖 The codemod will handle the change of `'dubLogoBlue', 'dubLogoWhite', 'wdayLogoBlue', 'wdayLogoWhite'` to
+`'dubLogoPrimary', 'dubLogoReversed', 'wdayLogoPrimary', 'wdayLogoReversed'` as shown above in the table. It will also handle
+updating your imports.
+
+From:
+```tsx
+import {dubLogoBlue} from "@workday/canvas-kit-react/common"
+```
+To:
+```tsx
+import {dubLogoPrimary} from "@workday/canvas-kit-react/common"
+```
+
+
+## Infrastructure
+
+### Supporting `react-jsx`
+
+We've updated the `jsx` flag in our `tsconfig` to `react-jsx`. As part of this change, we've also updated our peer dependencies for our packages to a minimum version of `react@17.0.0`. This change is to provide support for modern technologies like `vite` and ES modules.
+
+##### Breaking Changes
+
+If you're using `react@16.x.x`, you'll need to upgrade to `react@17.x.x` to use Canvas Kit v13.
+
+>**Note:** You'll need to update the way `jsx` transpiles. The automatic runtime feature, enabled through the `@babel/preset-react` preset with the `runtime: "automatic"` option, handles the importing of functions that JSX transpiles to.
+
+```sh
+
 ## Troubleshooting
 
 ## Glossary

package/dist/mdx/labs-react/expandable/examples/Avatar.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {Expandable} from '@workday/canvas-kit-labs-react/expandable';
 // @ts-ignore: Cannot find module error
 import testAvatar from './test-avatar.png';

package/dist/mdx/labs-react/expandable/examples/Depth.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {Expandable} from '@workday/canvas-kit-labs-react/expandable';
 import {space} from '@workday/canvas-kit-react/tokens';
 

package/dist/mdx/labs-react/expandable/examples/EndIcon.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {Expandable} from '@workday/canvas-kit-labs-react/expandable';
 
 export default () => (

package/dist/mdx/labs-react/expandable/examples/LongTitle.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {Expandable} from '@workday/canvas-kit-labs-react/expandable';
 // @ts-ignore: Cannot find module error
 import testAvatar from './test-avatar.png';

package/dist/mdx/labs-react/expandable/examples/RTL.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {Expandable} from '@workday/canvas-kit-labs-react/expandable';
 import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
 

package/dist/mdx/labs-react/expandable/examples/StartIcon.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {Expandable} from '@workday/canvas-kit-labs-react/expandable';
 
 export default () => (

package/dist/mdx/preview-react/information-highlight/examples/Caution.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';
 import {system} from '@workday/canvas-tokens-web';

package/dist/mdx/preview-react/information-highlight/examples/Critical.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';
 import {system} from '@workday/canvas-tokens-web';

package/dist/mdx/preview-react/information-highlight/examples/Informational.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';
 import {system} from '@workday/canvas-tokens-web';

package/dist/mdx/preview-react/pill/examples/WithReadOnly.tsx

@@ -1,5 +1,3 @@
-import * as React from 'react';
-
 import {Pill} from '@workday/canvas-kit-preview-react/pill';
 import {createStyles} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';

package/dist/mdx/preview-react/segmented-control/examples/Disabled.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control';
 import {
   gridIcon,

package/dist/mdx/preview-react/segmented-control/examples/RTL.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
 import {
   gridIcon,

package/dist/mdx/preview-react/segmented-control/examples/Vertical.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control';
 import {
   gridIcon,

package/dist/mdx/preview-react/select/examples/Top Label/Alert.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Select} from '@workday/canvas-kit-preview-react/select';
 import {hintText, options} from '../storiesData';

package/dist/mdx/preview-react/select/examples/Top Label/Default.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Select} from '@workday/canvas-kit-preview-react/select';
 import {options} from '../storiesData';

package/dist/mdx/preview-react/select/examples/Top Label/DefaultWithCustomOptions.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Select} from '@workday/canvas-kit-preview-react/select';
 import {customOptions, customRenderOption, customRenderSelected} from '../storiesData';

package/dist/mdx/preview-react/select/examples/Top Label/DefaultWithSimpleOptions.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Select} from '@workday/canvas-kit-preview-react/select';
 import {simpleOptions} from '../storiesData';

package/dist/mdx/preview-react/select/examples/Top Label/Disabled.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Select} from '@workday/canvas-kit-preview-react/select';
 import {options} from '../storiesData';

package/dist/mdx/preview-react/select/examples/Top Label/Error.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Select} from '@workday/canvas-kit-preview-react/select';
 import {hintText, options} from '../storiesData';

package/dist/mdx/preview-react/select/examples/Top Label/Grow.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Select} from '@workday/canvas-kit-preview-react/select';
 import {options} from '../storiesData';

package/dist/mdx/preview-react/select/examples/Top Label/Scrollable.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Select} from '@workday/canvas-kit-preview-react/select';
 import {manyOptions} from '../storiesData';

package/dist/mdx/preview-react/select/examples/storiesData.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {SystemIcon} from '@workday/canvas-kit-react/icon';
 import {
   activityStreamIcon,

package/dist/mdx/preview-react/text-area/examples/Alert.tsx

@@ -1,6 +1,3 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import {jsx} from '@emotion/react';
 import React from 'react';
 import {TextArea} from '@workday/canvas-kit-preview-react/text-area';
 import {useThemedRing} from '@workday/canvas-kit-react/common';
@@ -28,7 +25,7 @@ export default () => {
   return (
     <TextArea orientation="vertical">
       <TextArea.Label>Add a comment</TextArea.Label>
-      <TextArea.Field css={alertStyles} onChange={handleChange} value={value} />
+      <TextArea.Field cs={alertStyles} onChange={handleChange} value={value} />
       <TextArea.Hint paddingTop={space.xxs}>
         <strong>Character Limit: </strong>
         <Text color={hintColor}>{10 - value.length} Left</Text>

package/dist/mdx/preview-react/text-input/examples/Alert.tsx

@@ -1,6 +1,3 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import {jsx} from '@emotion/react';
 import React from 'react';
 import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
 import {useThemedRing} from '@workday/canvas-kit-react/common';
@@ -20,7 +17,7 @@ export default () => {
   return (
     <TextInput orientation="vertical">
       <TextInput.Label>Password</TextInput.Label>
-      <TextInput.Field css={alertStyles} onChange={handleChange} value={value} type="password" />
+      <TextInput.Field cs={alertStyles} onChange={handleChange} value={value} type="password" />
       <TextInput.Hint paddingTop={space.xxs}>
         <strong>Password Strength: </strong>
         {value.length < 3 ? (

package/dist/mdx/preview-react/text-input/examples/ThemedAlert.tsx

@@ -1,6 +1,3 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import {jsx} from '@emotion/react';
 import React from 'react';
 import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
 import {
@@ -43,7 +40,7 @@ const AlertInput = () => {
   return (
     <TextInput orientation="vertical">
       <TextInput.Label>Email</TextInput.Label>
-      <TextInput.Field css={alertStyles} onChange={handleChange} value={value} />
+      <TextInput.Field cs={alertStyles} onChange={handleChange} value={value} />
       <TextInput.Hint paddingTop={space.xxs}>Please enter a valid email.</TextInput.Hint>
     </TextInput>
   );

package/dist/mdx/react/action-bar/examples/Basic.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {ActionBar} from '@workday/canvas-kit-react/action-bar';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
 

package/dist/mdx/react/action-bar/examples/DeleteAction.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {ActionBar} from '@workday/canvas-kit-react/action-bar';
 import {DeleteButton} from '@workday/canvas-kit-react/button';
 

package/dist/mdx/react/action-bar/examples/Icons.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {ActionBar} from '@workday/canvas-kit-react/action-bar';
 import {notificationsIcon, alarmClockIcon} from '@workday/canvas-system-icons-web';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';

package/dist/mdx/react/avatar/avatar/examples/Basic.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {Avatar} from '@workday/canvas-kit-react/avatar';
 import {createStyles} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';

package/dist/mdx/react/avatar/avatar/examples/Button.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {Avatar} from '@workday/canvas-kit-react/avatar';
 import {createStyles} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';

package/dist/mdx/react/avatar/avatar/examples/CustomStyles.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {Avatar} from '@workday/canvas-kit-react/avatar';
 import {createStencil, createStyles} from '@workday/canvas-kit-styling';
 import {base, system} from '@workday/canvas-tokens-web';

package/dist/mdx/react/avatar/avatar/examples/Image.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {Avatar} from '@workday/canvas-kit-react/avatar';
 // @ts-ignore: Cannot find module error
 import testAvatar from './test-avatar.png';

package/dist/mdx/react/avatar/avatar/examples/LazyLoad.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {Avatar} from '@workday/canvas-kit-react/avatar';
 // @ts-ignore: Cannot find module error
 import testAvatar from './test-avatar.png';

package/dist/mdx/react/avatar/avatar/examples/ObjectFit.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {Avatar} from '@workday/canvas-kit-react/avatar';
 import {px2rem} from '@workday/canvas-kit-styling';
 

package/dist/mdx/react/avatar/avatar/examples/Size.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {Avatar} from '@workday/canvas-kit-react/avatar';
 import {px2rem} from '@workday/canvas-kit-styling';
 

package/dist/mdx/react/avatar/avatar/examples/Variant.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {Avatar} from '@workday/canvas-kit-react/avatar';
 
 export default () => (

package/dist/mdx/react/banner/examples/Error.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {Banner} from '@workday/canvas-kit-react/banner';
 
 export default () => {

package/dist/mdx/react/banner/examples/Sticky.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {Box} from '@workday/canvas-kit-react/layout';
 import {Banner} from '@workday/canvas-kit-react/banner';
 import {styled} from '@workday/canvas-kit-react/common';

package/dist/mdx/react/banner/examples/StickyAnimation.tsx

@@ -1,6 +1,3 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import {jsx, keyframes} from '@emotion/react';
 import React from 'react';
 
 import {CSSProperties, space} from '@workday/canvas-kit-react/tokens';
@@ -8,47 +5,66 @@ import {useTheme} from '@workday/canvas-kit-react/common';
 import {Box} from '@workday/canvas-kit-react/layout';
 import {loopIcon} from '@workday/canvas-system-icons-web';
 import {Banner} from '@workday/canvas-kit-react/banner';
+import {
+  createStencil,
+  createStyles,
+  createVars,
+  keyframes,
+  handleCsProp,
+  cssVar,
+} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
-const containerStyles: CSSProperties = {
+const containerStyles = createStyles({
   position: 'absolute',
   right: 0,
   overflow: 'hidden',
-};
+});
+const stickyAnimationVars = createVars('width', 'rerun');
+const stickAnimationKeyframes = keyframes({
+  '0%': {
+    transform: `translateX(${cssVar(stickyAnimationVars.width)})`,
+  },
+  '100%': {
+    transform: `translateX(0 * ${cssVar(stickyAnimationVars.rerun)})`,
+  },
+});
+
+const stickyAnimationStencil = createStencil({
+  base: {
+    marginY: system.space.x1,
+    marginInlineStart: system.space.x1,
+    marginInlineEnd: 0,
+    animationName: stickAnimationKeyframes,
+    animationDuration: '.3s',
+    animationTimingFunction: 'ease-out',
+  },
+});
 
 export default () => {
   const theme = useTheme();
   const bannerRef = React.useRef<HTMLButtonElement>(null);
   const containerRef = React.useRef<HTMLDivElement>(null);
   const [styles, setStyles] = React.useState<CSSProperties>();
+  const [bannerWidth, setBannerWidth] = React.useState(0);
 
   const [rerun, setRerun] = React.useState(1); // Only needed for demo purposes
 
   React.useLayoutEffect(() => {
-    let width = bannerRef.current.offsetWidth;
-    if (theme.canvas.direction === 'rtl') {
-      width *= -1;
-    }
-    const slideInKeyframes = keyframes({
-      '0%': {
-        transform: `translateX(${width}px)`,
-      },
-      '100%': {
-        transform: `translateX(0 * ${rerun})`,
-      },
-    });
-
-    setStyles({
-      marginY: space.xxxs,
-      marginInlineStart: space.xxxs,
-      maringInlineEnd: 0,
-      animation: `${slideInKeyframes} .3s ease-out forwards`,
-    });
+    const width = bannerRef.current.offsetWidth;
+    setBannerWidth(theme.canvas.direction === 'rtl' ? width * -1 : width);
   }, [theme.canvas.direction, rerun]);
 
   return (
     <Box height={64}>
-      <div css={containerStyles} ref={containerRef}>
-        <div css={styles}>
+      <div className={containerStyles} ref={containerRef}>
+        <div
+          key={rerun}
+          {...handleCsProp({}, [
+            stickyAnimationStencil(),
+            stickyAnimationVars({width: `${bannerWidth}px`, rerun: `${rerun}`}),
+          ])}
+        >
           <Banner
             onClick={() => setRerun(r => r + 1)}
             hasError={true}

package/dist/mdx/react/breadcrumbs/examples/Basic.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {Breadcrumbs} from '@workday/canvas-kit-react/breadcrumbs';
 
 export default () => {

package/dist/mdx/react/button/button/examples/Delete.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {DeleteButton} from '@workday/canvas-kit-react/button';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {trashIcon} from '@workday/canvas-system-icons-web';

package/dist/mdx/react/button/button/examples/ExternalHyperlink.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {ExternalHyperlink} from '@workday/canvas-kit-react/button';
 
 export default () => (

package/dist/mdx/react/button/button/examples/Hyperlink.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {Hyperlink} from '@workday/canvas-kit-react/button';
 
 export default () => <Hyperlink href="#hyperlink">Hyperlink</Hyperlink>;

package/dist/mdx/react/button/button/examples/Primary.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {

package/dist/mdx/react/color-picker/color-preview/examples/Basic.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {ColorPreview} from '@workday/canvas-kit-react/color-picker';
 import {FormField} from '@workday/canvas-kit-react/form-field';
 

package/dist/mdx/react/dialog/examples/DialogWithFallbackPlacements.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {Dialog} from '@workday/canvas-kit-react/dialog';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
 import {Flex, Grid} from '@workday/canvas-kit-react/layout';

package/dist/mdx/react/modal/examples/Basic.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {Modal} from '@workday/canvas-kit-react/modal';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
 import {Flex, Box} from '@workday/canvas-kit-react/layout';

package/dist/mdx/react/modal/examples/IframeTest.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {Modal} from '@workday/canvas-kit-react/modal';
 import {DeleteButton} from '@workday/canvas-kit-react/button';
 import {Flex} from '@workday/canvas-kit-react/layout';

package/dist/mdx/react/modal/examples/ModalWithPopup.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {Modal, useModalModel} from '@workday/canvas-kit-react/modal';
 import {DeleteButton} from '@workday/canvas-kit-react/button';
 import {

package/dist/mdx/react/modal/examples/StackedModals.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {Modal, useModalModel} from '@workday/canvas-kit-react/modal';
 import {DeleteButton} from '@workday/canvas-kit-react/button';
 import {Flex} from '@workday/canvas-kit-react/layout';

package/dist/mdx/react/pagination/examples/CustomRange.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {
   Pagination,
   getLastPage,

package/dist/mdx/react/pagination/examples/GoToForm.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {
   Pagination,
   getLastPage,

package/dist/mdx/react/pagination/examples/JumpControls.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {
   Pagination,
   getLastPage,

package/dist/mdx/react/popup/examples/Basic.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {DeleteButton} from '@workday/canvas-kit-react/button';
 import {
   Popup,

package/dist/mdx/react/popup/examples/CloseOnTargetHiddenTest.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {
   Popup,
   useCloseOnEscape,

package/dist/mdx/react/popup/examples/ComboboxWithinPopup.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
 import {Combobox} from '@workday/canvas-kit-react/combobox';

package/dist/mdx/react/popup/examples/MultiplePopups.tsx

@@ -1,5 +1,3 @@
-import * as React from 'react';
-
 import {
   Popup,
   useCloseOnOutsideClick,

package/dist/mdx/react/popup/examples/PopupWithFallbackPlacements.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {DeleteButton} from '@workday/canvas-kit-react/button';
 import {
   Popup,

package/dist/mdx/react/popup/examples/PopupWithNonHidablePopup.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {
   Popup,

package/dist/mdx/react/popup/examples/ReturnFocusTest.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {TextInput} from '@workday/canvas-kit-react/text-input';
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {SecondaryButton, TertiaryButton} from '@workday/canvas-kit-react/button';

package/dist/mdx/react/popup/examples/TooltipReturnFocus.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {Tooltip} from '@workday/canvas-kit-react/tooltip';
 import {TertiaryButton} from '@workday/canvas-kit-react/button';
 import {