@workday/canvas-kit-docs 7.0.0-alpha.0-next.1 → 7.0.0-alpha.0-next.6

package/dist/commonjs/index.js

@@ -1,8 +1,15 @@
 "use strict";
-function __export(m) {
-    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
-}
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-__export(require("./lib/specs"));
-__export(require("./lib/Specifications"));
-__export(require("./lib/docs"));
+__exportStar(require("./lib/specs"), exports);
+__exportStar(require("./lib/Specifications"), exports);
+__exportStar(require("./lib/docs"), exports);

package/dist/commonjs/lib/Specifications.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Specifications.d.ts","sourceRoot":"","sources":["../../../lib/Specifications.tsx"],"names":[],"mappings":"AASA,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AA8CD,eAAO,MAAM,cAAc,6DAmF1B,CAAC"}
+{"version":3,"file":"Specifications.d.ts","sourceRoot":"","sources":["../../../lib/Specifications.tsx"],"names":[],"mappings":"AASA,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AA8CD,eAAO,MAAM,cAAc,mBAAkB,mBAAmB,uBAmF/D,CAAC"}

package/dist/commonjs/lib/Specifications.js

@@ -14,6 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.Specifications = void 0;
 /* eslint-disable no-param-reassign */
 var react_1 = __importDefault(require("react"));
 var csf_1 = require("@storybook/csf");
@@ -43,7 +44,7 @@ function createTableRows(rows, item, index, children, context) {
     }
     return rows;
 }
-exports.Specifications = function (_a) {
+var Specifications = function (_a) {
     var file = _a.file, name = _a.name;
     var storybookBaseUrl = react_1.default.useContext(docs_1.StorybookUrl);
     var githubUrl = react_1.default.useContext(docs_1.GithubUrl);
@@ -87,3 +88,4 @@ exports.Specifications = function (_a) {
         ' ',
         react_1.default.createElement(button_1.Hyperlink, { href: githubUrl + "blob/" + githubBranch + "/cypress/integration/" + file }, file))) : null;
 };
+exports.Specifications = Specifications;

package/dist/commonjs/lib/docs.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.StorybookUrl = exports.GithubBranch = exports.GithubUrl = void 0;
 var react_1 = __importDefault(require("react"));
 exports.GithubUrl = react_1.default.createContext('https://github.com/Workday/canvas-kit/');
 exports.GithubBranch = react_1.default.createContext('master');

package/dist/es6/lib/Specifications.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Specifications.d.ts","sourceRoot":"","sources":["../../../lib/Specifications.tsx"],"names":[],"mappings":"AASA,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AA8CD,eAAO,MAAM,cAAc,6DAmF1B,CAAC"}
+{"version":3,"file":"Specifications.d.ts","sourceRoot":"","sources":["../../../lib/Specifications.tsx"],"names":[],"mappings":"AASA,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AA8CD,eAAO,MAAM,cAAc,mBAAkB,mBAAmB,uBAmF/D,CAAC"}

package/dist/mdx/7.0-MIGRATION-GUIDE.mdx

@@ -5,8 +5,10 @@ Below are the breaking changes made in Canvas Kit v7. Please
 any questions about the update.
 
 - [Codemod](#codemod)
+- [Component Deprecations](#component-deprecations)
 - [ActionBar Component Updates](#actionbar-component-updates)
 - [Status Indicator Width](#status-indicator-width)
+- [Popup Cards](popup-cards)
 
 ## Codemod
 
@@ -34,6 +36,45 @@ rollback more easily if necessary.**
 encounter any issues or use cases that we've missed. The `@workday/canvas-kit-codemod` package will
 help us maintain additional codemod transforms to make future migrations easier.
 
+## Component Deprecations
+
+### Deprecation Types
+
+There are two types of deprecations: soft and hard.
+
+#### Soft Deprecation
+
+A soft-deprecated component is still available with its full functionality, but it will have been
+renamed with a prefix to indicate its soft-deprecated status. It will also include a console warning
+to announce its deprecation. This warning will only be triggered on the component's initial render.
+
+Soft-deprecated types and utilities will also be renamed but generally will not trigger a console
+warning.
+
+#### Hard Deprecation
+
+A hard-deprecated component or package is no longer available. You will need to follow the method
+prescribed in our migration guide to update your application. Please reach out to our team directly
+if you need additional help.
+
+### Cookie Banner
+
+We are [hard deprecating](#hard-deprecation) `CookieBanner`. If you would like to migrate away from
+this deprecated component now, you can reference
+[this example](https://workday.github.io/canvas-kit/?path=/story/examples-cookiebanner-react--basic)
+
+### Page Header
+
+We are [hard deprecating](#hard-deprecation) `Page Header`. If you would like to migrate away from
+this deprecated component now, you can reference
+[this example](https://workday.github.io/canvas-kit/?path=/story/examples-pageheader-react--basic)
+
+### Header / GlobalHeader
+
+We are [hard deprecating](#hard-deprecation) `Header`. If you would like to migrate away from this
+deprecated component now, you can reference
+[this example](https://workday.github.io/canvas-kit/?path=/story/examples-globalheader-react--basic)
+
 ## ActionBar Component Updates
 
 We've refactored our ActionBar components to simplify logic.
@@ -58,4 +99,52 @@ word.
 
 ```tsx
 <StatusIndicator label="Slightly Longer Status" type={StatusIndicator.Type.Gray} maxWidth={250} />
-```
+```
+
+## Popup Cards
+
+`Popup.Card` (this includes `Modal.Card` and `Dialog.Card`) components are now a flexbox container.
+This was done to support overflowing content (by default, the `Popup.Body` component). The idea is
+the card is a vertical flexbox container and the `Popup.Heading`, `Popup.Body`, and any other
+children are flex items. The `Popup.Body` now has an `overflow-y: auto` on it to naturally allow the
+body content to overflow in a scroll container. This is a breaking change if your `Popup`, `Modal`,
+or `Dialog` doesn't work with a flexbox with `flex-direction: column`. In most cases, this shouldn't
+matter. If this change does cause your popup to display correctly, you may need to play around with
+flex item containers.
+
+An example where this might break:
+
+A common Modal has a heading, body, and footer (Cancel/Submit buttons). If the Cancel and Submit
+buttons are direct children of the `Modal.Card` like the following:
+
+```tsx
+<Modal.Card>
+  <Modal.Heading>Some Heading</Modal.Heading>
+  <Modal.Body>Some Body</Modal.Body>
+  <SecondaryButton>Cancel</SecondaryButton>
+  <PrimaryButton>Submit</PrimaryButton>
+</Modal.Card>
+```
+
+The buttons will become vertical flex items instead of the default which is displaying inline-block.
+Before, the buttons would layout next to each other horizontally. After, the buttons will stack
+vertically. To fix this, you'll have to add another element to be a flex item from the `Modal.Card`.
+Our examples use `HStack` to align the buttons. The following will render correctly after this
+change:
+
+```tsx
+<Modal.Card>
+  <Modal.Heading>Some Heading</Modal.Heading>
+  <Modal.Body>Some Body</Modal.Body>
+  <HStack spacing="s">
+    <SecondaryButton>Cancel</SecondaryButton>
+    <PrimaryButton>Submit</PrimaryButton>
+  </HStack>
+</Modal.Card>
+```
+
+If your code contains any hacks to make a `Modal` overflow, these hacks should now be removed.
+[This example shows how body content overflows](https://workday.github.io/canvas-kit/?path=/docs/components-popups-modal-react--body-overflow)
+(you may have to limit your browser height to see the overflow). Before you had to manually set the
+`max-height` of the `Modal.Body` element using calculations. These should be removed. The
+`Popup.Card` now has a max height and the `Popup.Body` height is automatically calculated.

package/dist/mdx/preview-react/form-field/examples/Custom.tsx

@@ -45,7 +45,7 @@ export default () => {
 
   const model = useFormFieldModel({isRequired: true});
 
-  const layoutProps = useFormFieldOrientation('vertical')
+  const layoutProps = useFormFieldOrientation('vertical');
 
   return (
     <Stack {...layoutProps}>

package/dist/mdx/preview-react/side-panel/examples/AlwaysOpen.tsx

@@ -1,38 +1,32 @@
-/** @jsx jsx */
 import * as React from 'react';
-import {jsx} from '@emotion/core';
 import {colors, space, type} from '@workday/canvas-kit-react/tokens';
 import {AccentIcon} from '@workday/canvas-kit-react/icon';
 import {rocketIcon} from '@workday/canvas-accent-icons-web';
 import {SidePanel, useSidePanel} from '@workday/canvas-kit-preview-react/side-panel';
-import {Flex} from '@workday/canvas-kit-labs-react/layout';
-import {useThemeRTL} from '@workday/canvas-kit-labs-react/common';
+import {Flex, HStack} from '@workday/canvas-kit-labs-react/layout';
+import {styled} from '@workday/canvas-kit-react/common';
+
+const StyledHeader = styled('h3')({
+  ...type.levels.body.large,
+  color: colors.licorice500,
+  fontWeight: type.properties.fontWeights.bold,
+});
+
+const StyledAccentIcon = styled(AccentIcon)({
+  marginRight: space.s,
+});
 
 export default () => {
   const {panelProps, labelProps} = useSidePanel();
 
-  const {themeRTL} = useThemeRTL();
-  const iconStyles = themeRTL({
-    marginRight: space.s,
-  });
-
   return (
-    <Flex height={320}>
+    <HStack spacing="s" height={320}>
       <SidePanel {...panelProps}>
         <Flex alignItems="center" paddingY="s" paddingX="xs">
-          <AccentIcon css={iconStyles} icon={rocketIcon} />
-          <h3
-            css={{
-              ...type.levels.body.large,
-              color: colors.licorice500,
-              fontWeight: type.properties.fontWeights.bold,
-            }}
-            {...labelProps}
-          >
-            Tasks Panel
-          </h3>
+          <StyledAccentIcon icon={rocketIcon} />
+          <StyledHeader {...labelProps}>Tasks Panel</StyledHeader>
         </Flex>
       </SidePanel>
-    </Flex>
+    </HStack>
   );
 };

package/dist/mdx/preview-react/side-panel/examples/Basic.tsx

@@ -1,6 +1,4 @@
-/** @jsx jsx */
 import * as React from 'react';
-import {jsx} from '@emotion/core';
 import {colors, type} from '@workday/canvas-kit-react/tokens';
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
 import {
@@ -9,12 +7,18 @@ import {
   SidePanelTransitionStates,
 } from '@workday/canvas-kit-preview-react/side-panel';
 import {Flex} from '@workday/canvas-kit-labs-react/layout';
-import {CanvasProvider} from '@workday/canvas-kit-react/common';
+import {CanvasProvider, styled} from '@workday/canvas-kit-react/common';
 import {AccentIcon} from '@workday/canvas-kit-react/icon';
 import {rocketIcon} from '@workday/canvas-accent-icons-web';
 // local helper hook for setting content direction;
 import {useDirection} from './useDirection';
 
+const StyledHeader = styled('h3')({
+  ...type.levels.body.large,
+  color: colors.licorice500,
+  fontWeight: type.properties.fontWeights.bold,
+});
+
 export default () => {
   const {direction, toggleDirection} = useDirection();
   const {expanded, panelProps, labelProps, controlProps} = useSidePanel();
@@ -32,16 +36,7 @@ export default () => {
               <Flex marginInlineEnd="s">
                 <AccentIcon icon={rocketIcon} />
               </Flex>
-              <h3
-                css={{
-                  ...type.levels.body.large,
-                  color: colors.licorice500,
-                  fontWeight: type.properties.fontWeights.bold,
-                }}
-                {...labelProps}
-              >
-                Tasks Panel
-              </h3>
+              <StyledHeader {...labelProps}>Tasks Panel</StyledHeader>
             </Flex>
           )}
         </SidePanel>

package/dist/mdx/preview-react/side-panel/examples/ExternalControl.tsx

@@ -1,6 +1,4 @@
-/** @jsx jsx */
 import * as React from 'react';
-import {jsx} from '@emotion/core';
 import {
   SidePanel,
   useSidePanel,
@@ -9,6 +7,13 @@ import {
 import {Flex} from '@workday/canvas-kit-labs-react/layout';
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
 import {colors, type} from '@workday/canvas-kit-react/tokens';
+import {styled} from '@workday/canvas-kit-react/common';
+
+const StyledHeader = styled('h3')({
+  ...type.levels.body.large,
+  color: colors.licorice500,
+  fontWeight: type.properties.fontWeights.bold,
+});
 
 export default () => {
   const {expanded, panelProps, labelProps, controlProps} = useSidePanel({initialExpanded: false});
@@ -28,16 +33,7 @@ export default () => {
       >
         {panelState === 'expanded' && (
           <Flex alignItems="center" paddingY="s" paddingX="xs">
-            <h3
-              css={{
-                ...type.levels.body.large,
-                color: colors.licorice500,
-                fontWeight: type.properties.fontWeights.bold,
-              }}
-              {...labelProps}
-            >
-              Tasks Panel
-            </h3>
+            <StyledHeader {...labelProps}>Tasks Panel</StyledHeader>
           </Flex>
         )}
       </SidePanel>

package/dist/mdx/preview-react/side-panel/examples/RightOrigin.tsx

@@ -1,6 +1,4 @@
-/** @jsx jsx */
 import * as React from 'react';
-import {jsx} from '@emotion/core';
 import {colors, type} from '@workday/canvas-kit-react/tokens';
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
 import {
@@ -8,42 +6,37 @@ import {
   useSidePanel,
   SidePanelTransitionStates,
 } from '@workday/canvas-kit-preview-react/side-panel';
-import {useThemeRTL} from '@workday/canvas-kit-labs-react/common';
 import {Flex} from '@workday/canvas-kit-labs-react/layout';
-import {CanvasProvider} from '@workday/canvas-kit-react/common';
+import {CanvasProvider, styled} from '@workday/canvas-kit-react/common';
 // local helper hook for setting content direction;
 import {useDirection} from './useDirection';
 
+const StyledHeader = styled('h3')({
+  ...type.levels.body.large,
+  color: colors.licorice500,
+  fontWeight: type.properties.fontWeights.bold,
+});
+
+const StyledSidePanel = styled(SidePanel)({
+  position: 'absolute',
+  right: 0,
+});
+
 const RightPanel = () => {
   const {expanded, panelProps, labelProps, controlProps} = useSidePanel();
   const [panelState, setPanelState] = React.useState<SidePanelTransitionStates>(
     expanded ? 'expanded' : 'collapsed'
   );
 
-  const {themeRTL} = useThemeRTL();
-  const panelStyles = themeRTL({
-    position: 'absolute',
-    right: 0,
-  });
-
   return (
-    <SidePanel {...panelProps} onStateTransition={setPanelState} origin="right" css={panelStyles}>
+    <StyledSidePanel {...panelProps} onStateTransition={setPanelState} origin="right">
       <SidePanel.ToggleButton {...controlProps} />
       {panelState === 'expanded' && (
         <Flex alignItems="center" justifyContent="flex-end" paddingY="s" paddingX="xs">
-          <h3
-            css={{
-              ...type.levels.body.large,
-              color: colors.licorice500,
-              fontWeight: type.properties.fontWeights.bold,
-            }}
-            {...labelProps}
-          >
-            Tasks Panel
-          </h3>
+          <StyledHeader {...labelProps}>Tasks Panel</StyledHeader>
         </Flex>
       )}
-    </SidePanel>
+    </StyledSidePanel>
   );
 };
 

package/dist/mdx/preview-react/side-panel/examples/Variant.tsx

@@ -1,6 +1,4 @@
-/** @jsx jsx */
 import * as React from 'react';
-import {jsx} from '@emotion/core';
 import {colors, type} from '@workday/canvas-kit-react/tokens';
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
 import {
@@ -9,10 +7,16 @@ import {
   SidePanelTransitionStates,
 } from '@workday/canvas-kit-preview-react/side-panel';
 import {Flex} from '@workday/canvas-kit-labs-react/layout';
-import {CanvasProvider} from '@workday/canvas-kit-react/common';
+import {CanvasProvider, styled} from '@workday/canvas-kit-react/common';
 // local helper hook for setting content direction;
 import {useDirection} from './useDirection';
 
+const StyledHeader = styled('h3')({
+  ...type.levels.body.large,
+  color: colors.licorice500,
+  fontWeight: type.properties.fontWeights.bold,
+});
+
 export default () => {
   const {direction, toggleDirection} = useDirection();
   const {expanded, panelProps, labelProps, controlProps} = useSidePanel();
@@ -27,16 +31,7 @@ export default () => {
           <SidePanel.ToggleButton {...controlProps} />
           {panelState === 'expanded' && (
             <Flex alignItems="center" paddingY="s" paddingX="xs">
-              <h3
-                css={{
-                  ...type.levels.body.large,
-                  color: colors.licorice500,
-                  fontWeight: type.properties.fontWeights.bold,
-                }}
-                {...labelProps}
-              >
-                Alternate Panel
-              </h3>
+              <StyledHeader {...labelProps}>Alternate Panel</StyledHeader>
             </Flex>
           )}
         </SidePanel>

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

@@ -1,5 +1,6 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
-import { jsx } from '@emotion/core'
+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-labs-react/common';
@@ -16,10 +17,15 @@ export default () => {
     value.length < 3 ? 'success' : value.length < 7 ? 'alert' : 'error'
   );
 
-  const hintColor = value.length < 3 ? colors.greenApple600 : value.length < 7 ? colors.cantaloupe600 : colors.cinnamon500
+  const hintColor =
+    value.length < 3
+      ? colors.greenApple600
+      : value.length < 7
+      ? colors.cantaloupe600
+      : colors.cinnamon500;
 
   return (
-    <TextArea orientation='vertical'>
+    <TextArea orientation="vertical">
       <TextArea.Label>Add a comment</TextArea.Label>
       <TextArea.Field css={alertStyles} onChange={handleChange} value={value} />
       <TextArea.Hint paddingTop={space.xxs}>

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

@@ -9,7 +9,7 @@ export default () => {
   };
 
   return (
-    <TextArea orientation='vertical'>
+    <TextArea orientation="vertical">
       <TextArea.Label>Leave a review</TextArea.Label>
       <TextArea.Field onChange={handleChange} value={value} />
     </TextArea>

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

@@ -9,7 +9,7 @@ export default () => {
   };
 
   return (
-    <TextArea orientation='vertical'>
+    <TextArea orientation="vertical">
       <TextArea.Label>Leave a review</TextArea.Label>
       <TextArea.Field disabled onChange={handleChange} value={value} />
     </TextArea>

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

@@ -31,7 +31,7 @@ export default () => {
   };
 
   return (
-    <TextArea hasError={hasError} orientation='vertical'>
+    <TextArea hasError={hasError} orientation="vertical">
       <TextArea.Label>A three letter word</TextArea.Label>
       <TextArea.Field onChange={handleChange} value={value} />
       <TextArea.Hint paddingTop={space.xxs}>{hint}</TextArea.Hint>

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

@@ -9,7 +9,7 @@ export default () => {
   };
 
   return (
-    <TextArea orientation='vertical' alignItems='stretch'>
+    <TextArea orientation="vertical" alignItems="stretch">
       <TextArea.Label>Leave a review</TextArea.Label>
       <TextArea.Field onChange={handleChange} value={value} />
     </TextArea>

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

@@ -1,8 +1,10 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core'
 import React from 'react';
 import {TextArea} from '@workday/canvas-kit-preview-react/text-area';
-import { accessibleHide } from '@workday/canvas-kit-react/common';
+import {accessibleHide, styled} from '@workday/canvas-kit-react/common';
+
+const StyledTextAreaLabel = styled(TextArea.Label)({
+  ...accessibleHide,
+});
 
 export default () => {
   const [value, setValue] = React.useState('');
@@ -12,8 +14,8 @@ export default () => {
   };
 
   return (
-    <TextArea orientation='vertical' spacing='zero'>
-      <TextArea.Label css={{...accessibleHide}}>Email</TextArea.Label>
+    <TextArea orientation="vertical" spacing="zero">
+      <StyledTextAreaLabel>Email</StyledTextAreaLabel>
       <TextArea.Field onChange={handleChange} value={value} />
     </TextArea>
   );

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

@@ -9,7 +9,7 @@ export default () => {
   };
 
   return (
-    <TextArea orientation='horizontal'>
+    <TextArea orientation="horizontal">
       <TextArea.Label>Leave a review</TextArea.Label>
       <TextArea.Field onChange={handleChange} value={value} />
     </TextArea>

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

@@ -9,7 +9,7 @@ export default () => {
   };
 
   return (
-    <TextArea orientation='vertical' spacing='xxxs'>
+    <TextArea orientation="vertical" spacing="xxxs">
       <TextArea.Label>Leave a review</TextArea.Label>
       <TextArea.Field onChange={handleChange} value={value} />
     </TextArea>

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

@@ -9,13 +9,9 @@ export default () => {
   };
 
   return (
-    <TextArea orientation='vertical'>
+    <TextArea orientation="vertical">
       <TextArea.Label>Leave a review</TextArea.Label>
-      <TextArea.Field
-        placeholder="Let us know how we did!"
-        onChange={handleChange}
-        value={value}
-      />
+      <TextArea.Field placeholder="Let us know how we did!" onChange={handleChange} value={value} />
     </TextArea>
   );
 };

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

@@ -13,12 +13,12 @@ export default () => {
   };
 
   const handleClick = () => {
-    changeFocus(ref.current)
+    changeFocus(ref.current);
   };
 
   return (
-    <VStack spacing='xxxs' alignItems='flex-start'>
-      <TextArea orientation='vertical'>
+    <VStack spacing="xxxs" alignItems="flex-start">
+      <TextArea orientation="vertical">
         <TextArea.Label>Leave a review</TextArea.Label>
         <TextArea.Field onChange={handleChange} value={value} ref={ref} />
       </TextArea>

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

@@ -9,7 +9,7 @@ export default () => {
   };
 
   return (
-    <TextArea isRequired={true} orientation='vertical'>
+    <TextArea isRequired={true} orientation="vertical">
       <TextArea.Label>Leave a review</TextArea.Label>
       <TextArea.Field onChange={handleChange} value={value} />
     </TextArea>

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

@@ -14,7 +14,7 @@ export default () => {
   };
 
   return (
-    <TextArea orientation='vertical'>
+    <TextArea orientation="vertical">
       <TextArea.Label>Leave a review</TextArea.Label>
       <StyledField onChange={handleChange} value={value} />
     </TextArea>

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

@@ -1,5 +1,6 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
-import {jsx} from '@emotion/core';
+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-labs-react/common';
@@ -17,14 +18,9 @@ export default () => {
   );
 
   return (
-    <TextInput orientation='vertical'>
+    <TextInput orientation="vertical">
       <TextInput.Label>Password</TextInput.Label>
-      <TextInput.Field
-        css={alertStyles}
-        onChange={handleChange}
-        value={value}
-        type="password"
-      />
+      <TextInput.Field css={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/Basic.tsx

@@ -9,7 +9,7 @@ export default () => {
   };
 
   return (
-    <TextInput orientation='vertical'>
+    <TextInput orientation="vertical">
       <TextInput.Label>Email</TextInput.Label>
       <TextInput.Field onChange={handleChange} value={value} />
     </TextInput>

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

@@ -9,7 +9,7 @@ export default () => {
   };
 
   return (
-    <TextInput orientation='vertical'>
+    <TextInput orientation="vertical">
       <TextInput.Label>Email</TextInput.Label>
       <TextInput.Field onChange={handleChange} value={value} disabled />
     </TextInput>

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

@@ -31,7 +31,7 @@ export default () => {
   };
 
   return (
-    <TextInput hasError={hasError} orientation='vertical'>
+    <TextInput hasError={hasError} orientation="vertical">
       <TextInput.Label>A three letter word</TextInput.Label>
       <TextInput.Field onChange={handleChange} value={value} />
       <TextInput.Hint paddingTop={space.xxs}>{hint}</TextInput.Hint>