@workday/canvas-kit-docs 13.0.0-alpha.1069-next.0 → 13.0.0-alpha.1074-next.0

package/dist/es6/mdx/versionsTable.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { Table } from '@workday/canvas-kit-react';
 import { StatusIndicator } from '@workday/canvas-kit-preview-react';
@@ -48,25 +49,11 @@ export const VersionTable = () => {
         }
         setVersions(arr);
     }, []);
-    return (React.createElement(Table, null,
-        React.createElement(Table.Head, null,
-            React.createElement(Table.Row, null,
-                React.createElement(Table.Header, { scope: "col" }, "Version"),
-                React.createElement(Table.Header, { scope: "col" }, "Documentation"),
-                React.createElement(Table.Header, { scope: "col" }, "Status"))),
-        React.createElement(Table.Body, null, versions
-            .slice()
-            .reverse()
-            .map(item => {
-            const { label, variant } = getVersionStatusIndicator(item.versionNumber);
-            return (React.createElement(Table.Row, null,
-                React.createElement(Table.Cell, null,
-                    "v",
-                    item.versionNumber),
-                React.createElement(Table.Cell, null,
-                    React.createElement("a", { href: item.versionUrl, target: "_blank", rel: "noreferrer" }, "Documentation")),
-                React.createElement(Table.Cell, null,
-                    React.createElement(StatusIndicator, { variant: variant },
-                        React.createElement(StatusIndicator.Label, null, label)))));
-        }))));
+    return (_jsxs(Table, { children: [_jsx(Table.Head, { children: _jsxs(Table.Row, { children: [_jsx(Table.Header, { scope: "col", children: "Version" }), _jsx(Table.Header, { scope: "col", children: "Documentation" }), _jsx(Table.Header, { scope: "col", children: "Status" })] }) }), _jsx(Table.Body, { children: versions
+                    .slice()
+                    .reverse()
+                    .map(item => {
+                    const { label, variant } = getVersionStatusIndicator(item.versionNumber);
+                    return (_jsxs(Table.Row, { children: [_jsxs(Table.Cell, { children: ["v", item.versionNumber] }), _jsx(Table.Cell, { children: _jsx("a", { href: item.versionUrl, target: "_blank", rel: "noreferrer", children: "Documentation" }) }), _jsx(Table.Cell, { children: _jsx(StatusIndicator, { variant: variant, children: _jsx(StatusIndicator.Label, { children: label }) }) })] }));
+                }) })] }));
 };

package/dist/es6/mdx/welcomePage.d.ts

@@ -1,3 +1,2 @@
-import React from 'react';
-export declare const WelcomePage: () => React.JSX.Element;
+export declare const WelcomePage: () => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=welcomePage.d.ts.map

package/dist/es6/mdx/welcomePage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"welcomePage.d.ts","sourceRoot":"","sources":["../../../mdx/welcomePage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAsD1B,eAAO,MAAM,WAAW,yBAkHvB,CAAC"}
+{"version":3,"file":"welcomePage.d.ts","sourceRoot":"","sources":["../../../mdx/welcomePage.tsx"],"names":[],"mappings":"AAqDA,eAAO,MAAM,WAAW,+CAkHvB,CAAC"}

package/dist/es6/mdx/welcomePage.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // @ts-ignore: Cannot find module error
 import headerImage from './CK-banner-temp.jpg';
 import { Flex, Grid, Box } from '@workday/canvas-kit-react/layout';
@@ -45,41 +45,5 @@ const linkStyles = createStyles({
     marginTop: system.space.x3,
 });
 export const WelcomePage = () => {
-    return (React.createElement("div", { className: "sb-unstyled" },
-        React.createElement("div", { className: parentFlexStyles },
-            React.createElement(Box, { cs: { overflow: 'hidden', position: 'relative' } },
-                React.createElement(Flex, { cs: { flexDirection: 'row', position: 'absolute', top: '45%', left: '10%' } },
-                    React.createElement(Text, { typeLevel: "title.medium", cs: textStyles }, "Canvas Kit"),
-                    React.createElement(Text, { typeLevel: "title.medium", cs: [textStyles, versionStyles] },
-                        "v",
-                        version)),
-                React.createElement("img", { src: headerImage, alt: "banner with canvas kit logo and version", className: imageStyles })),
-            React.createElement(Text, { typeLevel: "body.medium" },
-                "This project provides a set of components for the Workday Canvas Design System that can be used to implement user experiences consistent with",
-                React.createElement(ExternalHyperlink, { href: "https://canvas.workdaydesign.com/", iconLabel: "Open docs in new window" }, "Workday Design Principles.")),
-            React.createElement(Heading, { size: "medium", className: borderStyles }, "Quick Links"),
-            React.createElement(Grid, { gridAutoColumns: "auto", gridTemplateColumns: "repeat(auto-fill, minmax(250px, 1fr))", gridGap: "s" },
-                React.createElement(Grid, { as: Card, className: gridStyles },
-                    React.createElement(SystemIcon, { color: base.cantaloupe400, colorHover: base.cantaloupe400, icon: rocketIcon, size: 60 }),
-                    React.createElement(Card.Heading, null, "Getting Started"),
-                    React.createElement(Card.Body, null,
-                        React.createElement(Text, null, "For all things getting started including helpful guides and docs.")),
-                    React.createElement(Grid.Item, { as: Hyperlink, className: linkStyles, href: "https://workday.github.io/canvas-kit/?path=/docs/guides-getting-started--docs" }, "Getting Started Guide")),
-                React.createElement(Grid, { as: Card, className: gridStyles },
-                    React.createElement(SystemIcon, { color: base.blueberry400, icon: tokensIcon, colorHover: base.blueberry400, size: 60 }),
-                    React.createElement(Card.Heading, null, "Tokens"),
-                    React.createElement(Card.Body, null,
-                        React.createElement(Text, null, "Tokens are the smallest pieces of our Design System with the primary function of storing UI information.")),
-                    React.createElement(Grid.Item, { as: Hyperlink, className: linkStyles, href: "https://workday.github.io/canvas-kit/?path=/docs/tokens--overview" }, "View Our Tokens")),
-                React.createElement(Grid, { as: Card, className: gridStyles },
-                    React.createElement(SystemIcon, { color: base.greenApple400, icon: shapesIcon, size: 60, colorHover: base.greenApple400 }),
-                    React.createElement(Card.Heading, null, "Assets"),
-                    React.createElement(Card.Body, null,
-                        React.createElement(Text, null, "Assets are graphics which help communicate meaning or highlight areas of interaction to our users.")),
-                    React.createElement(Grid.Item, { as: Hyperlink, className: linkStyles, href: "https://workday.github.io/canvas-kit/?path=/docs/assets-icons--overview" }, "View Assets"))),
-            React.createElement(Heading, { size: "medium", className: borderStyles }, "Installation"),
-            React.createElement(Text, null, "To get started using Canvas Kit React first add or install the module to your existing React project"),
-            React.createElement(InstallBlock, { command: "yarn add", packageName: "@workday/canvas-kit-react" }),
-            "or",
-            React.createElement(InstallBlock, { command: "npm install", packageName: "@workday/canvas-kit-react" }))));
+    return (_jsx("div", { className: "sb-unstyled", children: _jsxs("div", { className: parentFlexStyles, children: [_jsxs(Box, { cs: { overflow: 'hidden', position: 'relative' }, children: [_jsxs(Flex, { cs: { flexDirection: 'row', position: 'absolute', top: '45%', left: '10%' }, children: [_jsx(Text, { typeLevel: "title.medium", cs: textStyles, children: "Canvas Kit" }), _jsxs(Text, { typeLevel: "title.medium", cs: [textStyles, versionStyles], children: ["v", version] })] }), _jsx("img", { src: headerImage, alt: "banner with canvas kit logo and version", className: imageStyles })] }), _jsxs(Text, { typeLevel: "body.medium", children: ["This project provides a set of components for the Workday Canvas Design System that can be used to implement user experiences consistent with", _jsx(ExternalHyperlink, { href: "https://canvas.workdaydesign.com/", iconLabel: "Open docs in new window", children: "Workday Design Principles." })] }), _jsx(Heading, { size: "medium", className: borderStyles, children: "Quick Links" }), _jsxs(Grid, { gridAutoColumns: "auto", gridTemplateColumns: "repeat(auto-fill, minmax(250px, 1fr))", gridGap: "s", children: [_jsxs(Grid, { as: Card, className: gridStyles, children: [_jsx(SystemIcon, { color: base.cantaloupe400, colorHover: base.cantaloupe400, icon: rocketIcon, size: 60 }), _jsx(Card.Heading, { children: "Getting Started" }), _jsx(Card.Body, { children: _jsx(Text, { children: "For all things getting started including helpful guides and docs." }) }), _jsx(Grid.Item, { as: Hyperlink, className: linkStyles, href: "https://workday.github.io/canvas-kit/?path=/docs/guides-getting-started--docs", children: "Getting Started Guide" })] }), _jsxs(Grid, { as: Card, className: gridStyles, children: [_jsx(SystemIcon, { color: base.blueberry400, icon: tokensIcon, colorHover: base.blueberry400, size: 60 }), _jsx(Card.Heading, { children: "Tokens" }), _jsx(Card.Body, { children: _jsx(Text, { children: "Tokens are the smallest pieces of our Design System with the primary function of storing UI information." }) }), _jsx(Grid.Item, { as: Hyperlink, className: linkStyles, href: "https://workday.github.io/canvas-kit/?path=/docs/tokens--overview", children: "View Our Tokens" })] }), _jsxs(Grid, { as: Card, className: gridStyles, children: [_jsx(SystemIcon, { color: base.greenApple400, icon: shapesIcon, size: 60, colorHover: base.greenApple400 }), _jsx(Card.Heading, { children: "Assets" }), _jsx(Card.Body, { children: _jsx(Text, { children: "Assets are graphics which help communicate meaning or highlight areas of interaction to our users." }) }), _jsx(Grid.Item, { as: Hyperlink, className: linkStyles, href: "https://workday.github.io/canvas-kit/?path=/docs/assets-icons--overview", children: "View Assets" })] })] }), _jsx(Heading, { size: "medium", className: borderStyles, children: "Installation" }), _jsx(Text, { children: "To get started using Canvas Kit React first add or install the module to your existing React project" }), _jsx(InstallBlock, { command: "yarn add", packageName: "@workday/canvas-kit-react" }), "or", _jsx(InstallBlock, { command: "npm install", packageName: "@workday/canvas-kit-react" })] }) }));
 };

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

@@ -21,6 +21,8 @@ any questions.
   - [External Hyperlink](#external-hyperlink)
   - [Pill](#pill)
   - [Tabs](#tabs)
+- [Infrastructure](#infrastructure)
+	- [Supporting react-jsx](#supoorting-react-jsx)
 - [Troubleshooting](#troubleshooting)
 - [Glossary](#glossary)
   - [Main](#main)
@@ -158,6 +160,20 @@ 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.
 
+## 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,