@workday/canvas-kit-docs 12.0.0-alpha.855-next.0 → 12.0.0-alpha.898-next.0

package/dist/mdx/react/select/examples/WithIcons.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Select, useSelectModel} from '@workday/canvas-kit-react/select';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {
@@ -34,28 +34,30 @@ export default () => {
   return (
     <Flex>
       <FormField>
-        <Select model={model}>
-          <FormField.Label>Contact</FormField.Label>
-          <FormField.Input
-            as={Select.Input}
-            cs={styleOverrides.formfieldInputStyles}
-            inputStartIcon={selectedItem.value.icon}
-          />
-          <Select.Popper>
-            <Select.Card cs={styleOverrides.selectCardStyles}>
-              {model.state.items.length > 0 && (
-                <Select.List>
-                  {item => (
-                    <Select.Item data-id={item.id}>
-                      <Select.Item.Icon icon={item.icon} />
-                      {item.text}
-                    </Select.Item>
-                  )}
-                </Select.List>
-              )}
-            </Select.Card>
-          </Select.Popper>
-        </Select>
+        <FormField.Label>Contact</FormField.Label>
+        <FormField.Field>
+          <Select model={model}>
+            <FormField.Input
+              as={Select.Input}
+              cs={styleOverrides.formfieldInputStyles}
+              inputStartIcon={selectedItem.value.icon}
+            />
+            <Select.Popper>
+              <Select.Card cs={styleOverrides.selectCardStyles}>
+                {model.state.items.length > 0 && (
+                  <Select.List>
+                    {item => (
+                      <Select.Item data-id={item.id}>
+                        <Select.Item.Icon icon={item.icon} />
+                        {item.text}
+                      </Select.Item>
+                    )}
+                  </Select.List>
+                )}
+              </Select.Card>
+            </Select.Popper>
+          </Select>
+        </FormField.Field>
       </FormField>
     </Flex>
   );

package/dist/mdx/react/skeleton/Skeleton.mdx

@@ -1,7 +1,4 @@
-import {SymbolDoc} from '@workday/canvas-kit-docs';
-
-import {Skeleton} from '@workday/canvas-kit-react/skeleton';
-
+import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
 import Basic from './examples/Basic';
 import Color from './examples/Color';
 import Header from './examples/Header';
@@ -9,7 +6,6 @@ import Shape from './examples/Shape';
 import Simulation from './examples/Simulation';
 import Text from './examples/Text';
 
-
 # Canvas Kit Skeleton
 
 A Skeleton is a low-fidelity visual placeholder that represents the loading of interface elements

package/dist/mdx/react/skeleton/examples/Simulation.tsx

@@ -3,7 +3,7 @@ import {keyframes} from '@emotion/react';
 
 import {Card} from '@workday/canvas-kit-react/card';
 import {Checkbox} from '@workday/canvas-kit-react/checkbox';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
 import {SystemIconCircle} from '@workday/canvas-kit-react/icon';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
@@ -64,11 +64,11 @@ export default () => {
   return (
     <Box>
       <Box marginBottom="l">
-        <FormField orientation="horizontal">
+        <FormField orientation="horizontalStart">
           <FormField.Label>Load Time</FormField.Label>
           <FormField.Input as={TextInput} onChange={onChangeLoadTime} value={loadTime} />
         </FormField>
-        <FormField orientation="horizontal">
+        <FormField orientation="horizontalStart">
           <FormField.Label>Loading</FormField.Label>
           <FormField.Input as={Checkbox} checked={loading} onChange={onChangeLoading} />
         </FormField>

package/dist/mdx/react/status-indicator/StatusIndicator.mdx

@@ -1,19 +1,16 @@
-import {SymbolDoc} from '@workday/canvas-kit-docs';
-
-import {StatusIndicator} from '@workday/canvas-kit-react/status-indicator';
-import {StatusIndicator as PreviewStatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
+import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
+import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
 
 import Basic from './examples/Basic';
 import Icon from './examples/Icon';
 import Emphasis from './examples/Emphasis';
 import MaxWidth from './examples/MaxWidth';
 
-
 # Canvas Kit Status Indicator
 
-<PreviewStatusIndicator variant="red">
-  <PreviewStatusIndicator.Label>Deprecated</PreviewStatusIndicator.Label>
-</PreviewStatusIndicator>
+<StatusIndicator variant="red">
+  <StatusIndicator.Label>Deprecated</StatusIndicator.Label>
+</StatusIndicator>
 
 `StatusIndicator` in Main has been deprecated and will be removed in a future major version. Please
 use

package/dist/mdx/react/switch/Switch.mdx

@@ -1,7 +1,9 @@
-import {SymbolDoc, Specifications, InformationHighlight} from '@workday/canvas-kit-docs';
-
-import {Switch} from '@workday/canvas-kit-react/switch';
-
+import {
+  ExampleCodeBlock,
+  SymbolDoc,
+  Specifications,
+  InformationHighlight,
+} from '@workday/canvas-kit-docs';
 import Alert from './examples/Alert';
 import Basic from './examples/Basic';
 import Disabled from './examples/Disabled';
@@ -9,7 +11,6 @@ import Error from './examples/Error';
 import LabelPosition from './examples/LabelPosition';
 import RefForwarding from './examples/RefForwarding';
 
-
 # Canvas Kit Switch
 
 Switch is a selection control that is used to switch between two potential states.
@@ -24,18 +25,6 @@ yarn add @workday/canvas-kit-react
 
 ## Usage
 
-<InformationHighlight style={{margin: '1.5rem 0'}}>
-  <InformationHighlight.Icon />
-  <InformationHighlight.Heading>Note</InformationHighlight.Heading>
-  <InformationHighlight.Body>
-    These examples are using FormField from Preview. We can plan to promote this component to the
-    Main package in a future major version.
-  </InformationHighlight.Body>
-  <InformationHighlight.Link href="https://workday.github.io/canvas-kit/?path=/docs/preview-inputs-form-field--basic">
-    View Form Field (Preview) Documentation
-  </InformationHighlight.Link>
-</InformationHighlight>
-
 ### Basic Example
 
 Switch should be used in tandem with [Form Field](/components/inputs/form-field/) to meet

package/dist/mdx/react/switch/examples/Alert.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Switch} from '@workday/canvas-kit-react/switch';
 
 export default () => {
@@ -12,8 +12,10 @@ export default () => {
   return (
     <FormField error="alert">
       <FormField.Label>Dark Mode</FormField.Label>
-      <FormField.Input as={Switch} checked={checked} onChange={handleChange} />
-      <FormField.Hint>We were unable to activate Dark Mode.</FormField.Hint>
+      <FormField.Field>
+        <FormField.Input as={Switch} checked={checked} onChange={handleChange} />
+        <FormField.Hint>We were unable to activate Dark Mode.</FormField.Hint>
+      </FormField.Field>
     </FormField>
   );
 };

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Switch} from '@workday/canvas-kit-react/switch';
 
 export default () => {
@@ -12,7 +12,9 @@ export default () => {
   return (
     <FormField>
       <FormField.Label>Dark Mode</FormField.Label>
-      <FormField.Input as={Switch} checked={checked} onChange={handleChange} />
+      <FormField.Field>
+        <FormField.Input as={Switch} checked={checked} onChange={handleChange} />
+      </FormField.Field>
     </FormField>
   );
 };

package/dist/mdx/react/switch/examples/Disabled.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Switch} from '@workday/canvas-kit-react/switch';
 
 export default () => {
@@ -12,7 +12,9 @@ export default () => {
   return (
     <FormField>
       <FormField.Label>Dark Mode</FormField.Label>
-      <FormField.Input disabled as={Switch} checked={checked} onChange={handleChange} />
+      <FormField.Field>
+        <FormField.Input disabled as={Switch} checked={checked} onChange={handleChange} />
+      </FormField.Field>
     </FormField>
   );
 };

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Switch} from '@workday/canvas-kit-react/switch';
 
 export default () => {
@@ -12,8 +12,10 @@ export default () => {
   return (
     <FormField error="error">
       <FormField.Label>Dark Mode</FormField.Label>
-      <FormField.Input as={Switch} checked={checked} onChange={handleChange} />
-      <FormField.Hint>We were unable to activate Dark Mode.</FormField.Hint>
+      <FormField.Field>
+        <FormField.Input as={Switch} checked={checked} onChange={handleChange} />
+        <FormField.Hint>We were unable to activate Dark Mode.</FormField.Hint>
+      </FormField.Field>
     </FormField>
   );
 };

package/dist/mdx/react/switch/examples/LabelPosition.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Switch} from '@workday/canvas-kit-react/switch';
 
 export default () => {
@@ -10,9 +10,11 @@ export default () => {
   };
 
   return (
-    <FormField orientation="horizontal">
+    <FormField orientation="horizontalStart">
       <FormField.Label>Dark Mode</FormField.Label>
-      <FormField.Input as={Switch} checked={checked} onChange={handleChange} />
+      <FormField.Field>
+        <FormField.Input as={Switch} checked={checked} onChange={handleChange} />
+      </FormField.Field>
     </FormField>
   );
 };

package/dist/mdx/react/switch/examples/RefForwarding.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Switch} from '@workday/canvas-kit-react/switch';
 
 export default () => {
@@ -19,7 +19,9 @@ export default () => {
     <>
       <FormField>
         <FormField.Label>Dark Mode</FormField.Label>
-        <FormField.Input as={Switch} checked={checked} ref={ref} onChange={handleChange} />
+        <FormField>
+          <FormField.Input as={Switch} checked={checked} ref={ref} onChange={handleChange} />
+        </FormField>
       </FormField>
       <PrimaryButton onClick={handleClick}>Focus Switch</PrimaryButton>
     </>

package/dist/mdx/react/table/Table.mdx

@@ -1,12 +1,9 @@
-import {SymbolDoc} from '@workday/canvas-kit-docs';
-import {Table} from '@workday/canvas-kit-react/table';
-// Examples
+import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
 import Basic from './examples/Basic';
 import BasicWithHeading from './examples/BasicWithHeading';
 import FixedColumn from './examples/FixedColumn';
 import RightToLeft from './examples/RightToLeft';
 
-
 # Canvas Kit Table
 
 `Table` is a simple styled compound component that renders a

package/dist/mdx/react/tabs/Tabs.mdx

@@ -1,6 +1,4 @@
-import {Tabs} from '@workday/canvas-kit-react/tabs';
-import {Specifications, SymbolDoc} from '@workday/canvas-kit-docs';
-
+import {ExampleCodeBlock, Specifications, SymbolDoc} from '@workday/canvas-kit-docs';
 import Basic from './examples/Basic';
 import NamedTabs from './examples/NamedTabs';
 import RightToLeft from './examples/RightToLeft';
@@ -12,7 +10,6 @@ import AlternativeTabStop from './examples/AlternativeTabStop';
 import HoistedModel from './examples/HoistedModel';
 import DynamicTabs from './examples/DynamicTabs';
 
-
 # Canvas Kit Tabs
 
 `Tabs` is a [compound component](/getting-started/for-developers/resources/compound-components/)

package/dist/mdx/react/testing/Testing.mdx

@@ -1,9 +1,6 @@
-import {Specifications} from '@workday/canvas-kit-docs';
-
-import {Testing} from '@workday/canvas-kit-react/testing';
+import {ExampleCodeBlock, Specifications} from '@workday/canvas-kit-docs';
 import Basic from './examples/Basic';
 
-
 # Testing
 
 A package that provides components and utilities for testing

package/dist/mdx/react/text/BodyText.mdx

@@ -1,8 +1,6 @@
-import {SymbolDoc} from '@workday/canvas-kit-docs';
-
+import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
 import Basic from './examples/BodyText/Basic';
 
-
 # Canvas Kit Body Text
 
 `BodyText` provides a simple way to render body-level text with built-in support for Canvas type

package/dist/mdx/react/text/Heading.mdx

@@ -1,6 +1,4 @@
-import {SymbolDoc} from '@workday/canvas-kit-docs';
-
-import Basic from './examples/Heading/Basic';
+import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';import Basic from './examples/Heading/Basic';
 
 
 # Canvas Kit Heading

package/dist/mdx/react/text/LabelText.mdx

@@ -1,11 +1,9 @@
-import {SymbolDoc} from '@workday/canvas-kit-docs';
+import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
 import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
-
 import Basic from './examples/LabelText/Basic';
 import Cursor from './examples/LabelText/Cursor';
 import Disabled from './examples/LabelText/Disabled';
 
-
 # Canvas Kit Label Text
 
 <StatusIndicator variant="red">

package/dist/mdx/react/text/Subtext.mdx

@@ -1,8 +1,6 @@
-import {SymbolDoc} from '@workday/canvas-kit-docs';
-
+import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
 import Basic from './examples/Subtext/Basic';
 
-
 # Canvas Kit Subtext
 
 `Subtext` provides a simple way to render subtext-level text with built-in support for Canvas type

package/dist/mdx/react/text/Text.mdx

@@ -1,10 +1,8 @@
-import {SymbolDoc} from '@workday/canvas-kit-docs';
-
+import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
 import Basic from './examples/Text/Basic';
 import TypeLevel from './examples/Text/TypeLevel';
 import Variant from './examples/Text/Variant';
 
-
 # Canvas Kit Text
 
 `Text` provides an ergonomic API for rendering text. It includes built-in support for Canvas type

package/dist/mdx/react/text/Title.mdx

@@ -1,8 +1,6 @@
-import {SymbolDoc} from '@workday/canvas-kit-docs';
-
+import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
 import Basic from './examples/Title/Basic';
 
-
 # Canvas Kit Title
 
 `Title` provides a simple way to render title-level text with built-in support for Canvas type

package/dist/mdx/react/text-area/TextArea.mdx

@@ -1,7 +1,9 @@
-import {SymbolDoc, Specifications, InformationHighlight} from '@workday/canvas-kit-docs';
-
-import {TextArea} from '@workday/canvas-kit-react/text-area';
-
+import {
+  ExampleCodeBlock,
+  SymbolDoc,
+  Specifications,
+  InformationHighlight,
+} from '@workday/canvas-kit-docs';
 import Alert from './examples/Alert';
 import Basic from './examples/Basic';
 import Disabled from './examples/Disabled';
@@ -13,7 +15,6 @@ import RefForwarding from './examples/RefForwarding';
 import Required from './examples/Required';
 import ResizeConstraints from './examples/ResizeConstraints';
 
-
 # Canvas Kit Text Area
 
 Text Areas allow users to enter and edit multiple lines of text.
@@ -28,18 +29,6 @@ yarn add @workday/canvas-kit-react
 
 ## Usage
 
-<InformationHighlight style={{margin: '1.5rem 0'}}>
-  <InformationHighlight.Icon />
-  <InformationHighlight.Heading>Note</InformationHighlight.Heading>
-  <InformationHighlight.Body>
-    These examples are using FormField from Preview. We can plan to promote this component to the
-    Main package in a future major version.
-  </InformationHighlight.Body>
-  <InformationHighlight.Link href="https://workday.github.io/canvas-kit/?path=/docs/preview-inputs-form-field--basic">
-    View Form Field (Preview) Documentation
-  </InformationHighlight.Link>
-</InformationHighlight>
-
 ### Basic Example
 
 Text Area should be used in tandem with [Form Field](/components/inputs/form-field/) to meet

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 import {TextArea} from '@workday/canvas-kit-react/text-area';
 
 export default () => {
@@ -12,8 +12,10 @@ export default () => {
   return (
     <FormField error="alert">
       <FormField.Label>Please enter your review.</FormField.Label>
-      <FormField.Input as={TextArea} onChange={handleChange} value={value} />
-      <FormField.Hint>Please enter your review.</FormField.Hint>
+      <FormField.Field>
+        <FormField.Input as={TextArea} onChange={handleChange} value={value} />
+        <FormField.Hint>Please enter your review.</FormField.Hint>
+      </FormField.Field>
     </FormField>
   );
 };

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 import {TextArea} from '@workday/canvas-kit-react/text-area';
 
 export default () => {
@@ -12,7 +12,9 @@ export default () => {
   return (
     <FormField>
       <FormField.Label>Leave a Review</FormField.Label>
-      <FormField.Input as={TextArea} onChange={handleChange} value={value} />
+      <FormField.Field>
+        <FormField.Input as={TextArea} onChange={handleChange} value={value} />
+      </FormField.Field>
     </FormField>
   );
 };

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 import {TextArea} from '@workday/canvas-kit-react/text-area';
 
 export default () => {
@@ -12,7 +12,9 @@ export default () => {
   return (
     <FormField>
       <FormField.Label>Leave a Review</FormField.Label>
-      <FormField.Input as={TextArea} disabled onChange={handleChange} value={value} />
+      <FormField.Field>
+        <FormField.Input as={TextArea} disabled onChange={handleChange} value={value} />
+      </FormField.Field>
     </FormField>
   );
 };

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 import {TextArea} from '@workday/canvas-kit-react/text-area';
 
 export default () => {
@@ -12,8 +12,10 @@ export default () => {
   return (
     <FormField error="error">
       <FormField.Label>Leave a Review</FormField.Label>
-      <FormField.Input as={TextArea} onChange={handleChange} value={value} />
-      <FormField.Hint>Please enter your review.</FormField.Hint>
+      <FormField.Field>
+        <FormField.Input as={TextArea} onChange={handleChange} value={value} />
+        <FormField.Hint>Please enter your review.</FormField.Hint>
+      </FormField.Field>
     </FormField>
   );
 };

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 import {TextArea} from '@workday/canvas-kit-react/text-area';
 
 export default () => {
@@ -10,9 +10,11 @@ export default () => {
   };
 
   return (
-    <FormField>
-      <FormField.Label>Leave a Review</FormField.Label>
-      <FormField.Input as={TextArea} grow onChange={handleChange} value={value} />
+    <FormField grow>
+      <FormField.Label>Leave a Review foo</FormField.Label>
+      <FormField.Field>
+        <FormField.Input as={TextArea} onChange={handleChange} value={value} />
+      </FormField.Field>
     </FormField>
   );
 };

package/dist/mdx/react/text-area/examples/LabelPosition.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 import {TextArea} from '@workday/canvas-kit-react/text-area';
 
 export default () => {
@@ -10,9 +10,12 @@ export default () => {
   };
 
   return (
-    <FormField orientation="horizontal">
+    <FormField orientation="horizontalStart">
       <FormField.Label>Leave a Review</FormField.Label>
-      <FormField.Input as={TextArea} onChange={handleChange} value={value} />
+      <FormField.Field>
+        <FormField.Input as={TextArea} onChange={handleChange} value={value} />
+        <FormField.Hint>Message must be under 200 characters</FormField.Hint>
+      </FormField.Field>
     </FormField>
   );
 };

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 import {TextArea} from '@workday/canvas-kit-react/text-area';
 
 export default () => {
@@ -12,12 +12,14 @@ export default () => {
   return (
     <FormField>
       <FormField.Label>Leave a Review</FormField.Label>
-      <FormField.Input
-        as={TextArea}
-        onChange={handleChange}
-        placeholder="Let us know how we did!"
-        value={value}
-      />
+      <FormField.Field>
+        <FormField.Input
+          as={TextArea}
+          onChange={handleChange}
+          placeholder="Let us know how we did!"
+          value={value}
+        />
+      </FormField.Field>
     </FormField>
   );
 };

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 import {TextArea} from '@workday/canvas-kit-react/text-area';
 
 export default () => {
@@ -19,7 +19,9 @@ export default () => {
     <>
       <FormField>
         <FormField.Label>Leave a Review</FormField.Label>
-        <FormField.Input as={TextArea} onChange={handleChange} ref={ref} value={value} />
+        <FormField.Field>
+          <FormField.Input as={TextArea} onChange={handleChange} ref={ref} value={value} />
+        </FormField.Field>
       </FormField>
       <PrimaryButton onClick={handleClick}>Focus Text Area</PrimaryButton>
     </>

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 import {TextArea} from '@workday/canvas-kit-react/text-area';
 
 export default () => {
@@ -12,7 +12,9 @@ export default () => {
   return (
     <FormField isRequired={true}>
       <FormField.Label>Leave a Review</FormField.Label>
-      <FormField.Input as={TextArea} onChange={handleChange} value={value} />
+      <FormField.Field>
+        <FormField.Input as={TextArea} onChange={handleChange} value={value} />
+      </FormField.Field>
     </FormField>
   );
 };