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

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

@@ -6,6 +6,8 @@ any questions about the update.
 
 - [Codemod](#codemod)
 - [ActionBar Component Updates](#actionbar-component-updates)
+- [Status Indicator Width](#status-indicator-width)
+- [Popup Cards](popup-cards)
 
 ## Codemod
 
@@ -44,4 +46,65 @@ PR: https://github.com/Workday/canvas-kit/pull/1396
 - Component has been converted to compound component.
 - `fixed` prop has been removed from component.
 - Now ActionBar uses `position` prop to set container position instead `fixed` prop.
-- Fixed position has been set as default if there is not passed `position` prop.
+- Fixed position has been set as default if there is not passed `position` prop.
+
+## Status Indicator Width
+
+Status Indicators currently truncate when they reach their max width of `150px`. After receiving
+requests to increase this, we have upped it by 25% to `200px`.
+
+We've also added a prop (`maxWidth`) to configure this if you need to. While this increases
+flexibility, please keep in mind that status text should be short, direct, and preferably a single
+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>

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

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

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

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

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

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

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

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

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

@@ -48,9 +48,9 @@ export default () => {
 
   return (
     <form onSubmit={formik.handleSubmit} action=".">
-      <VStack spacing='xs' alignItems='flex-start'>
+      <VStack spacing="xs" alignItems="flex-start">
         <TextInput
-          orientation='vertical'
+          orientation="vertical"
           isRequired={true}
           hasError={formik.touched.email && !!formik.errors.email}
         >
@@ -66,7 +66,7 @@ export default () => {
           <TextInput.Hint>{formik.touched.email && formik.errors.email}</TextInput.Hint>
         </TextInput>
         <TextInput
-          orientation='vertical'
+          orientation="vertical"
           id={passwordId}
           hasError={formik.touched.password && !!formik.errors.password}
           isRequired={true}

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

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

package/dist/mdx/preview-react/text-input/examples/Placeholder.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} placeholder="user@email.com" />
     </TextInput>