@workday/canvas-kit-docs 15.0.0-alpha.1303-next.0 → 15.0.0

package/dist/mdx/react/table/examples/BasicWithHeading.tsx

@@ -1,17 +1,15 @@
-import React from 'react';
-
+import {useUniqueId} from '@workday/canvas-kit-react/common';
 import {Table} from '@workday/canvas-kit-react/table';
 import {Heading} from '@workday/canvas-kit-react/text';
-import {useUniqueId} from '@workday/canvas-kit-react/common';
 import {createStyles} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
 const styleOverrides = {
   parentContainerStyles: createStyles({
-    marginBottom: system.space.x4,
+    marginBottom: system.gap.md,
   }),
   tableHeaderStyles: createStyles({
-    backgroundColor: system.color.bg.alt.softer,
+    backgroundColor: system.color.surface.raised,
   }),
 };
 

package/dist/mdx/react/table/examples/FixedColumn.tsx

@@ -1,23 +1,23 @@
 import React from 'react';
 
+import {useUniqueId} from '@workday/canvas-kit-react/common';
 import {Table} from '@workday/canvas-kit-react/table';
 import {Heading} from '@workday/canvas-kit-react/text';
-import {useUniqueId} from '@workday/canvas-kit-react/common';
 import {createStyles, px2rem} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
 const styleOverrides = {
   parentContainerStyles: createStyles({
-    marginBottom: system.space.x4,
+    marginBottom: system.gap.md,
   }),
   tableStyles: createStyles({
     width: px2rem(690),
   }),
   tableHeaderStyles: createStyles({
     position: 'sticky',
-    left: system.space.zero,
-    backgroundColor: system.color.bg.alt.softer,
-    borderRight: `2px solid ${system.color.border.divider}`,
+    left: '0',
+    backgroundColor: system.color.surface.raised,
+    borderRight: `${px2rem(2)} solid ${system.color.border.default}`,
   }),
 };
 
@@ -113,8 +113,8 @@ export default () => {
           </Table.Row>
         </Table.Head>
         <Table.Body>
-          {exampleData.map(item => (
-            <>
+          {exampleData.map((item, index) => (
+            <React.Fragment key={index}>
               <Table.Row>
                 <Table.Header scope="row" cs={styleOverrides.tableHeaderStyles}>
                   {item.make}
@@ -128,7 +128,7 @@ export default () => {
                 <Table.Cell>{item.torque}</Table.Cell>
                 <Table.Cell>{item.curbWeight}</Table.Cell>
               </Table.Row>
-            </>
+            </React.Fragment>
           ))}
         </Table.Body>
       </Table>

package/dist/mdx/react/table/examples/RightToLeft.tsx

@@ -1,17 +1,15 @@
-import React from 'react';
-
+import {CanvasProvider} from '@workday/canvas-kit-react/common';
 import {Table} from '@workday/canvas-kit-react/table';
-import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
 import {createStyles} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
 const tableHeaderStyles = createStyles({
-  backgroundColor: system.color.bg.alt.softer,
+  backgroundColor: system.color.surface.raised,
 });
 
 export default () => {
   return (
-    <CanvasProvider theme={{canvas: {direction: ContentDirection.RTL}}}>
+    <CanvasProvider dir="rtl">
       <Table>
         <Table.Caption>משקאות קפה וגדלים</Table.Caption>
         <Table.Head>

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

@@ -1,18 +1,19 @@
 import {ExampleCodeBlock, Specifications, SymbolDoc} from '@workday/canvas-kit-docs';
+import AlternativeTabStop from './examples/AlternativeTabStop';
 import Basic from './examples/Basic';
-import NamedTabs from './examples/NamedTabs';
-import RightToLeft from './examples/RightToLeft';
-import OverflowTabs from './examples/OverflowTabs';
 import DisabledTab from './examples/DisabledTab';
+import DynamicTabs from './examples/DynamicTabs';
+import HoistedModel from './examples/HoistedModel';
 import Icons from './examples/Icons';
+import NamedTabs from './examples/NamedTabs';
+import OverflowTabs from './examples/OverflowTabs';
+import RightToLeft from './examples/RightToLeft';
 import SinglePanel from './examples/SinglePanel';
-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/)
+`Tabs` is a [compound component](/get-started/for-developers/documentation/compound-components/)
 that allows users to navigate between related views of content while remaining in context of the
 page.
 
@@ -57,7 +58,7 @@ should render.
 By default, `Tabs` will create and use its own [model](#model) internally. Alternatively, you may
 configure your own model with `useTabsModel` and pass it to `Tabs` via the `model` prop. This
 pattern is referred to as
-[hoisting the model](/getting-started/for-developers/resources/compound-components/#configuring-a-model)
+[hoisting the model](/get-started/for-developers/documentation/compound-components/#configuring-a-model)
 and provides direct access to its `state` and `events` outside of the `Tabs` component.
 
 In this example, we set up external observation of the model state and create an external button to
@@ -125,4 +126,4 @@ array.
 
 ## Specifications
 
-<Specifications file="Tabs.spec.ts" name="Tabs" />
+<Specifications file="./cypress/component/Tabs.spec.tsx" name="Tabs" />

package/dist/mdx/react/tabs/examples/AlternativeTabStop.tsx

@@ -1,7 +1,6 @@
-import React from 'react';
-import {space} from '@workday/canvas-kit-react/tokens';
-
 import {Tabs} from '@workday/canvas-kit-react/tabs';
+import {cssVar} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 export default () => {
   return (
@@ -11,7 +10,7 @@ export default () => {
         <Tabs.Item>Second Tab</Tabs.Item>
         <Tabs.Item>Third Tab</Tabs.Item>
       </Tabs.List>
-      <div style={{marginTop: space.m}}>
+      <div style={{marginTop: cssVar(system.gap.lg)}}>
         <Tabs.Panel tabIndex={undefined}>
           <button>Focusable button</button>
           <br />

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

@@ -1,6 +1,6 @@
-import {space} from '@workday/canvas-kit-react/tokens';
-
 import {Tabs} from '@workday/canvas-kit-react/tabs';
+import {cssVar} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 export default () => {
   return (
@@ -12,7 +12,7 @@ export default () => {
         <Tabs.Item>Fourth Tab</Tabs.Item>
         <Tabs.Item>Fifth Tab</Tabs.Item>
       </Tabs.List>
-      <div style={{marginTop: space.m}}>
+      <div style={{marginTop: cssVar(system.gap.lg)}}>
         <Tabs.Panel>Contents of First Tab</Tabs.Panel>
         <Tabs.Panel>Contents of Second Tab</Tabs.Panel>
         <Tabs.Panel>Contents of Third Tab</Tabs.Panel>

package/dist/mdx/react/tabs/examples/DisabledTab.tsx

@@ -1,6 +1,6 @@
-import {space} from '@workday/canvas-kit-react/tokens';
-
 import {Tabs} from '@workday/canvas-kit-react/tabs';
+import {cssVar} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 export default () => {
   return (
@@ -10,7 +10,7 @@ export default () => {
         <Tabs.Item aria-disabled>Disabled Tab</Tabs.Item>
         <Tabs.Item>Third Tab</Tabs.Item>
       </Tabs.List>
-      <div style={{marginTop: space.m}}>
+      <div style={{marginTop: cssVar(system.gap.lg)}}>
         <Tabs.Panel>Contents of First Tab</Tabs.Panel>
         <Tabs.Panel>Contents of Disabled Tab</Tabs.Panel>
         <Tabs.Panel>Contents of Third Tab</Tabs.Panel>

package/dist/mdx/react/tabs/examples/DynamicTabs.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import {slugify} from '@workday/canvas-kit-react/common';
 import {isCursor} from '@workday/canvas-kit-react/collection';
+import {slugify} from '@workday/canvas-kit-react/common';
 import {Tabs, useTabsModel} from '@workday/canvas-kit-react/tabs';
 
 type Tab = {
@@ -19,6 +19,7 @@ export default () => {
   const addedRef = React.useRef(tabs.length - 1);
   const model = useTabsModel({
     items: tabs,
+    getTextValue: item => item.tab,
     shouldSelect: data => data.id !== 'add',
   });
 

package/dist/mdx/react/tabs/examples/HoistedModel.tsx

@@ -1,8 +1,7 @@
-import React from 'react';
-import {space} from '@workday/canvas-kit-react/tokens';
-
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
 import {Tabs, useTabsModel} from '@workday/canvas-kit-react/tabs';
+import {cssVar} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 export default () => {
   const model = useTabsModel({
@@ -19,7 +18,7 @@ export default () => {
           <Tabs.Item data-id="second">Second Tab</Tabs.Item>
           <Tabs.Item data-id="third">Third Tab</Tabs.Item>
         </Tabs.List>
-        <div style={{marginTop: space.m}}>
+        <div style={{marginTop: cssVar(system.gap.lg)}}>
           <Tabs.Panel data-id="first">Contents of First Tab</Tabs.Panel>
           <Tabs.Panel data-id="second">Contents of Second Tab</Tabs.Panel>
           <Tabs.Panel data-id="third">Contents of Third Tab</Tabs.Panel>

package/dist/mdx/react/tabs/examples/Icons.tsx

@@ -1,8 +1,7 @@
-import React from 'react';
-
-import {space} from '@workday/canvas-kit-react/tokens';
-import {starIcon, searchIcon, selectIcon, shareIcon} from '@workday/canvas-system-icons-web';
 import {Tabs} from '@workday/canvas-kit-react/tabs';
+import {cssVar} from '@workday/canvas-kit-styling';
+import {searchIcon, selectIcon, shareIcon, starIcon} from '@workday/canvas-system-icons-web';
+import {system} from '@workday/canvas-tokens-web';
 
 export default () => {
   return (
@@ -25,7 +24,7 @@ export default () => {
           <Tabs.Item.Text>Fourth Tab</Tabs.Item.Text>
         </Tabs.Item>
       </Tabs.List>
-      <div style={{marginTop: space.m}}>
+      <div style={{marginTop: cssVar(system.gap.lg)}}>
         <Tabs.Panel>Contents of First Tab</Tabs.Panel>
         <Tabs.Panel>Contents of Second Tab</Tabs.Panel>
         <Tabs.Panel>Contents of Third Tab</Tabs.Panel>

package/dist/mdx/react/tabs/examples/NamedTabs.tsx

@@ -1,6 +1,6 @@
-import {space} from '@workday/canvas-kit-react/tokens';
-
 import {Tabs} from '@workday/canvas-kit-react/tabs';
+import {cssVar} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 export default () => {
   return (
@@ -12,7 +12,7 @@ export default () => {
         <Tabs.Item data-id="fourth">Fourth Tab</Tabs.Item>
         <Tabs.Item data-id="fifth">Fifth Tab</Tabs.Item>
       </Tabs.List>
-      <div style={{marginTop: space.m}}>
+      <div style={{marginTop: cssVar(system.gap.lg)}}>
         <Tabs.Panel data-id="first">Contents of First Tab</Tabs.Panel>
         <Tabs.Panel data-id="second">Contents of Second Tab</Tabs.Panel>
         <Tabs.Panel data-id="third">Contents of Third Tab</Tabs.Panel>

package/dist/mdx/react/tabs/examples/OverflowTabs.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
-import {Tabs, useTabsModel} from '@workday/canvas-kit-react/tabs';
-import {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control';
 import {Box} from '@workday/canvas-kit-react/layout';
+import {SegmentedControl} from '@workday/canvas-kit-react/segmented-control';
+import {Tabs, useTabsModel} from '@workday/canvas-kit-react/tabs';
 
 type MyTabItem = {
   id: string;

package/dist/mdx/react/tabs/examples/RightToLeft.tsx

@@ -1,11 +1,11 @@
-import {space} from '@workday/canvas-kit-react/tokens';
-import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
-
+import {CanvasProvider} from '@workday/canvas-kit-react/common';
 import {Tabs} from '@workday/canvas-kit-react/tabs';
+import {cssVar} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 export default () => {
   return (
-    <CanvasProvider theme={{canvas: {direction: ContentDirection.RTL}}}>
+    <CanvasProvider dir="rtl">
       <Tabs>
         <Tabs.List>
           <Tabs.Item>ראשון</Tabs.Item>
@@ -14,7 +14,7 @@ export default () => {
           <Tabs.Item>רביעי</Tabs.Item>
           <Tabs.Item>חמישי</Tabs.Item>
         </Tabs.List>
-        <div style={{marginTop: space.m}}>
+        <div style={{marginTop: cssVar(system.gap.lg)}}>
           <Tabs.Panel>תוכן הראשון</Tabs.Panel>
           <Tabs.Panel>תוכן השני</Tabs.Panel>
           <Tabs.Panel>תוכן השלישי</Tabs.Panel>

package/dist/mdx/react/tabs/examples/SinglePanel.tsx

@@ -1,7 +1,5 @@
-import React from 'react';
-import {space} from '@workday/canvas-kit-react/tokens';
-
 import {Tabs, useTabsModel} from '@workday/canvas-kit-react/tabs';
+import {system} from '@workday/canvas-tokens-web';
 
 export default () => {
   const model = useTabsModel();
@@ -33,7 +31,7 @@ export default () => {
           Third Tab
         </Tabs.Item>
       </Tabs.List>
-      <Tabs.Panel style={{marginTop: space.m}} hidden={undefined} id="mytab-panel">
+      <Tabs.Panel cs={{marginTop: system.gap.lg}} hidden={undefined} id="mytab-panel">
         {contents[model.state.selectedIds[0]]}
       </Tabs.Panel>
     </Tabs>

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

@@ -1,12 +1,12 @@
 import React from 'react';
+
+import {DeleteButton} from '@workday/canvas-kit-react/button';
+import {PartialEmotionCanvasTheme} from '@workday/canvas-kit-react/common';
 import {
   ComponentStatesTable,
   StaticStates,
   permutateProps,
 } from '@workday/canvas-kit-react/testing';
-import {PartialEmotionCanvasTheme} from '@workday/canvas-kit-react/common';
-
-import {DeleteButton} from '@workday/canvas-kit-react/button';
 
 export default [
   {label: 'Default ', props: {className: '', disabled: false}},

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

@@ -1,5 +1,5 @@
 import {ExampleCodeBlock, StorybookStatusIndicator, SymbolDoc} from '@workday/canvas-kit-docs';
-import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';
+import {InformationHighlight} from '@workday/canvas-kit-react/information-highlight';
 import Basic from './examples/LabelText/Basic';
 import Cursor from './examples/LabelText/Cursor';
 import Disabled from './examples/LabelText/Disabled';

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

@@ -19,7 +19,7 @@ yarn add @workday/canvas-kit-react
 ### Basic Example
 
 `Text` is built on top of [`Box`](/components/layout/box/) and supports a multitude of
-[style props](/getting-started/for-developers/resources/style-props/) including spacing props such
+[style props](/get-started/for-developers/documentation/style-props/) including spacing props such
 as `margin` and `padding`, as well as text styling props such as `fontSize` and `fontWeight`.
 
 `Text` renders a `<span>` element by default. You may override the rendered element using the `as`

package/dist/mdx/react/text/examples/BodyText/Basic.tsx

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

package/dist/mdx/react/text/examples/Heading/Basic.tsx

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

package/dist/mdx/react/text/examples/LabelText/Basic.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import {LabelText} from '@workday/canvas-kit-react/text';
 
 export default () => <LabelText>Label</LabelText>;

package/dist/mdx/react/text/examples/LabelText/Cursor.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import {LabelText} from '@workday/canvas-kit-react/text';
 
 export default () => <LabelText cursor="pointer">Label with Pointer</LabelText>;

package/dist/mdx/react/text/examples/LabelText/Disabled.tsx

@@ -1,13 +1,11 @@
-import React from 'react';
 import {LabelText} from '@workday/canvas-kit-react/text';
-
 import {createStyles} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
 const inverseBackground = createStyles({
-  backgroundColor: system.color.bg.primary.default,
-  padding: system.space.x4,
-  marginTop: system.space.x4,
+  backgroundColor: system.color.brand.accent.primary,
+  padding: system.padding.md,
+  marginTop: system.gap.md,
 });
 
 export default () => {

package/dist/mdx/react/text/examples/Subtext/Basic.tsx

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

package/dist/mdx/react/text/examples/Text/Basic.tsx

@@ -1,19 +1,24 @@
-import React from 'react';
-
-import {type, typeColors} from '@workday/canvas-kit-react/tokens';
 import {Box} from '@workday/canvas-kit-react/layout';
 import {Text} from '@workday/canvas-kit-react/text';
+import {system} from '@workday/canvas-tokens-web';
 
 export default () => (
   <Box>
     <Text as="h4">Text as h4</Text>
-    <Text as="p" fontSize={14} fontWeight="regular" fontFamily="monospace">
-      Text styled using style props
+    <Text
+      as="p"
+      cs={{
+        fontSize: system.fontSize.body.sm,
+        fontWeight: system.fontWeight.normal,
+        fontFamily: system.fontFamily.default,
+      }}
+    >
+      Text styled using cs props
     </Text>
-    <Text as="p" {...type.levels.subtext.large}>
+    <Text as="p" cs={{...system.type.subtext.lg}}>
       Text styled using type token level
     </Text>
-    <Box {...type.levels.subtext.large} color={typeColors.hint}>
+    <Box cs={{...system.type.subtext.lg, color: system.color.fg.muted.default}}>
       <Text>Text with inherited styles</Text>
     </Box>
   </Box>

package/dist/mdx/react/text/examples/Title/Basic.tsx

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

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

@@ -1,13 +1,10 @@
 import {
   ExampleCodeBlock,
-  SymbolDoc,
   Specifications,
-  InformationHighlight,
+  SymbolDoc,
 } from '@workday/canvas-kit-docs';
-import Caution from './examples/Caution';
 import Basic from './examples/Basic';
 import Disabled from './examples/Disabled';
-import Error from './examples/Error';
 import Grow from './examples/Grow';
 import LabelPosition from './examples/LabelPosition';
 import Placeholder from './examples/Placeholder';
@@ -15,6 +12,7 @@ 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.
@@ -31,8 +29,8 @@ yarn add @workday/canvas-kit-react
 
 ### Basic Example
 
-Text Area should be used in tandem with [Form Field](/components/inputs/form-field/) to meet
-accessibility standards.
+Text Area should be used in tandem with [Form Field](/components/inputs/form-field/) to ensure
+proper label association and screen reader support.
 
 <ExampleCodeBlock code={Basic} />
 
@@ -44,11 +42,16 @@ Set the `disabled` prop of the Text Area to prevent users from interacting with
 
 ### Placeholder
 
-Set the `placeholder` prop of the Text Input to display a sample of its expected format or value
+Set the `placeholder` prop of the Text Area to display a sample of its expected format or value
 before a value has been provided.
 
 <ExampleCodeBlock code={Placeholder} />
 
+> **Accessibility Note**: Always provide a persistent `FormField.Label` and never rely on
+> placeholder text as the only label for a text area. Placeholders can disappear or lack sufficient
+> contrast. Use placeholders only for short format examples, and place detailed instructions or
+> guidance in `FormField.Hint` instead of the placeholder.
+
 ### Ref Forwarding
 
 Text Area supports [ref forwarding](https://reactjs.org/docs/forwarding-refs.html). It will forward
@@ -68,6 +71,10 @@ accepts the following values:
 
 <ExampleCodeBlock code={ResizeConstraints} />
 
+> **Accessibility Note**: Allowing users to resize the text area (default `resize: both`) improves
+> accessibility by letting them adjust it for comfort. Avoid disabling resizing (`resize: none`)
+> unless necessary, and always ensure the initial size meets the needs of your content.
+
 ### Grow
 
 Set the `grow` prop of the Text Area to `true` to configure the Text Area to expand to the width of
@@ -91,21 +98,40 @@ Labels for required fields are suffixed by a red asterisk.
 
 ### Error States
 
-Set the `error` prop of the wrapping Form Field to `"caution"` or
-`"error"` to set the Text Area to the Caution or Error state, respectively. You will
-also need to set the `hintId` and `hintText` props on the Form Field to meet accessibility
-standards.
+Form Field provides error and caution states for Text Area. Set the `error` prop on Form Field to
+`"error"` or `"caution"` and use `FormField.Hint` to provide error messages. See
+[Form Field's Error documentation](/components/inputs/form-field/#error-states) for
+examples and accessibility guidance.
+
+## Accessibility
+
+`TextArea` should be used with [Form Field](/components/inputs/form-field/) to
+ensure proper labeling, error handling, and help text association. See
+[FormField's accessibility documentation](/components/inputs/form-field/#accessibility)
+for comprehensive guidance on form accessibility best practices.
+
+### Character Limits
 
-The `error` prop may be applied directly to the Text Area with a value of `"TextArea.ErrorType.Caution"`
-or `TextArea.ErrorType.Error` if Form Field is not being used.
+When limiting text area length:
 
-#### Caution
+- Use the `maxLength` attribute to enforce the limit programmatically.
+- For longer limits (100+ characters), consider adding character count information to
+  `FormField.Hint`.
+- Avoid announcing character counts after every keystroke, as this disrupts screen reader users.
+  Check out
+  [Debouncing an AriaLiveRegion: TextArea with character limit](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-aria-live-regions--docs#debouncing-an-arialiveregion-textarea-with-character-limit)
+  for an example of how to wait for users to stop typing before announcing the character count to
+  screen readers.
 
-<ExampleCodeBlock code={Caution} />
+### Screen Reader Experience
 
-#### Error
+When properly implemented with `FormField`, screen readers will announce:
 
-<ExampleCodeBlock code={Error} />
+- The label text when the text area receives focus.
+- Required, disabled, or read-only status.
+- Help text and error messages (via `aria-describedby`).
+- The current value or "blank" if empty.
+- That it's a multi-line text input field.
 
 ## Component API
 
@@ -113,4 +139,4 @@ or `TextArea.ErrorType.Error` if Form Field is not being used.
 
 ## Specifications
 
-<Specifications file="TextArea.spec.ts" name="Text Area" />
+<Specifications file="./cypress/component/TextArea.spec.tsx" name="Text Area" />

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

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {TextArea} from '@workday/canvas-kit-react/text-area';
 

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

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {TextArea} from '@workday/canvas-kit-react/text-area';
 

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

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {TextArea} from '@workday/canvas-kit-react/text-area';
 

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

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {TextArea} from '@workday/canvas-kit-react/text-area';
 

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

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {TextArea} from '@workday/canvas-kit-react/text-area';
 

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

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {TextArea} from '@workday/canvas-kit-react/text-area';

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

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {TextArea} from '@workday/canvas-kit-react/text-area';
 

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

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {TextArea} from '@workday/canvas-kit-react/text-area';