@workday/canvas-kit-mcp 15.0.5 → 15.0.6

package/dist/index.js

@@ -13,7 +13,7 @@ import { z } from "zod";
 // package.json
 var package_default = {
   name: "@workday/canvas-kit-mcp",
-  version: "15.0.5",
+  version: "15.0.6",
   description: "MCP package for Canvas Kit",
   author: "Workday, Inc. (https://www.workday.com)",
   license: "Apache-2.0",
@@ -122,18 +122,18 @@ var stories_config_default = {
       mdxPath: "modules/react/toast/stories/toast.mdx",
       mdxProse: "# Canvas Kit Toast\n\n`Toast` is a [compound component](/get-started/for-developers/documentation/compound-components/)\nthat contains updates or messages about the status of an application's process.\n\n## Installation\n\n```sh\nyarn add @workday/canvas-kit-react\n```\n\n## Usage\n\n### Basic Example\n\n`Toast` includes a container `Toast` component and the following subcomponents: `Toast.Body`,\n`Toast.CloseIcon`, `Toast.Icon`, `Toast.Message`, and `Toast.Link`.\n\n`Toast` supports different modes through the `mode` prop: `status`, `alert`, and `dialog`. Each mode\nconveys a different purpose of the message and assigns the necessary ARIA attributes to support that\npurpose and provide an accessible experience.\n\nBy default, `mode` is set to `status`, which indicates the message contains advisory information\nsuch as a successful action.\n```tsx\nimport {Toast} from '@workday/canvas-kit-react/toast';\nimport {checkIcon} from '@workday/canvas-system-icons-web';\nimport {system} from '@workday/canvas-tokens-web';\n\nexport const Basic = () => {\n  return (\n    <Toast>\n      <Toast.Icon icon={checkIcon} color={system.color.fg.success.default} />\n      <Toast.Body>\n        <Toast.Message>Your workbook was successfully processed.</Toast.Message>\n      </Toast.Body>\n    </Toast>\n  );\n};\n```\n\nA `status` `Toast` will wrap the message within a `polite` ARIA live region with a `role` of\n`status`.\n\nHere's a more complete example with a button which triggers a dismissable `Toast`. The `Toast` is\npositioned using `Popper`.\n```tsx\nimport React from 'react';\n\nimport {SecondaryButton} from '@workday/canvas-kit-react/button';\nimport {Popper} from '@workday/canvas-kit-react/popup';\nimport {Toast} from '@workday/canvas-kit-react/toast';\nimport {checkIcon} from '@workday/canvas-system-icons-web';\nimport {system} from '@workday/canvas-tokens-web';\n\nexport const WithPopper = () => {\n  const [open, setOpen] = React.useState(false);\n  const containerRef = React.useRef(null);\n\n  const handleClose = () => {\n    setOpen(false);\n  };\n\n  const handleOpen = () => {\n    setOpen(true);\n  };\n\n  return (\n    <div ref={containerRef}>\n      <SecondaryButton onClick={handleOpen}>Show Toast</SecondaryButton>\n      <Popper placement=\"bottom-end\" open={open} anchorElement={containerRef}>\n        <Toast mode=\"dialog\" aria-label=\"notification\">\n          <Toast.Icon icon={checkIcon} color={system.color.fg.success.default} />\n          <Toast.Body>\n            <Toast.Message>Your workbook was successfully processed.</Toast.Message>\n          </Toast.Body>\n          <Toast.CloseIcon aria-label=\"Close notification\" onClick={handleClose} />\n        </Toast>\n      </Popper>\n    </div>\n  );\n};\n```\n\n### Alert\n\nSet the `mode` prop to `alert` to convey urgent and important information such as an error.\n```tsx\nimport {Toast} from '@workday/canvas-kit-react/toast';\nimport {exclamationCircleIcon} from '@workday/canvas-system-icons-web';\nimport {system} from '@workday/canvas-tokens-web';\n\nexport const ToastAlert = () => (\n  <Toast mode=\"alert\">\n    <Toast.Icon icon={exclamationCircleIcon} color={system.color.fg.warning.default} />\n    <Toast.Body>\n      <Toast.Message>There was an error with your workbook.</Toast.Message>\n    </Toast.Body>\n  </Toast>\n);\n```\n\nAn `alert` `Toast` will wrap the message within an `assertive` ARIA live region with a `role` of\n`alert`.\n\n### Dialog\n\nSet the `mode` prop to `dialog` to convey the presence of a follow-up action. If you use this\n`mode`, you need to add an `aria-label`. This `aria-label` should be additional information for the\n`Toast` such as `notification`. The `Toast` will also add an `aria-describedby` that links the\n`Toast` to `Toast.Message` so that it is read out to screen readers. The `aria-label` should be\ndifferent that the contents of the `Toast` so there is no duplication being read out by screen\nreaders.\n```tsx\nimport {Toast} from '@workday/canvas-kit-react/toast';\nimport {checkIcon} from '@workday/canvas-system-icons-web';\nimport {system} from '@workday/canvas-tokens-web';\n\nexport const ToastDialog = () => (\n  <Toast mode=\"dialog\" aria-label=\"notification\">\n    <Toast.Icon icon={checkIcon} color={system.color.fg.success.default} />\n    <Toast.Body>\n      <Toast.Message>Your workbook was successfully processed.</Toast.Message>\n      <Toast.Link href=\"#hreflink\">Custom Link</Toast.Link>\n    </Toast.Body>\n  </Toast>\n);\n```\n\nScreen readers will read the `Toast` out in the following order: \"Notification: Your workbook was\nsuccessfully processed.\"\n\n> **Note**: You must use the `Toast.Message` subcomponent when the `mode` is `dialog` so that `id`\n> is tied to the message for accessibility. You can also pass in a `model` with `useToastModel` to\n> provide a specific `id` for the `Toast.Message`\n\n```tsx\nexport const CustomIDToast = () => {\n  const model = useToastModel({\n    id: '12df5',\n    mode: 'dialog',\n  });\n  return (\n    <Toast model={model}>\n      <Toast.Icon icon={checkIcon} color={system.color.fg.success.default} />\n      <Toast.Body>\n        <Toast.Message>Your workbook was successfully processed.</Toast.Message>\n        <Toast.Link href=\"#href\">View More Details</Toast.Link>\n      </Toast.Body>\n    </Toast>\n  );\n};\n```\n\n`Toast.CloseIcon` may be included within a `dialog` `Toast` to create a `Toast` with both an action\nlink and a close button.\n```tsx\nimport {Toast} from '@workday/canvas-kit-react/toast';\nimport {checkIcon} from '@workday/canvas-system-icons-web';\nimport {system} from '@workday/canvas-tokens-web';\n\nexport const WithActionLinkAndCloseIcon = () => {\n  const handleClose = () => console.log('close button clicked');\n\n  return (\n    <Toast mode=\"dialog\" aria-label=\"notification\">\n      <Toast.Icon icon={checkIcon} color={system.color.fg.success.default} />\n      <Toast.Body>\n        <Toast.Message>Your workbook was successfully</Toast.Message>\n        <Toast.Link href=\"#hyperlink\">Custom Link</Toast.Link>\n      </Toast.Body>\n      <Toast.CloseIcon aria-label=\"Close notification\" onClick={handleClose} />\n    </Toast>\n  );\n};\n```\n\n### Right-to-Left (RTL)\n\n`Toast` supports right-to-left languages when specified in the `CanvasProvider` `theme`.\n```tsx\nimport {CanvasProvider} from '@workday/canvas-kit-react/common';\nimport {Toast} from '@workday/canvas-kit-react/toast';\nimport {checkIcon} from '@workday/canvas-system-icons-web';\nimport {system} from '@workday/canvas-tokens-web';\n\nexport const RTL = () => {\n  const handleClose = () => console.log('close button clicked');\n\n  return (\n    <CanvasProvider dir=\"rtl\">\n      <Toast>\n        <Toast.Icon icon={checkIcon} color={system.color.fg.success.default} />\n        <Toast.Body>\n          <Toast.Message>Your workbook was successfully processed.</Toast.Message>\n        </Toast.Body>\n        <Toast.CloseIcon aria-label=\"Close\" onClick={handleClose} />\n      </Toast>\n    </CanvasProvider>\n  );\n};\n```\n\n## Component API\n\n"
     },
-    textarea: {
-      title: "Components/Inputs/TextArea",
-      storybookUrl: "https://workday.github.io/canvas-kit/?path=/docs/components-inputs-textarea--docs",
-      mdxPath: "modules/react/text-area/stories/TextArea.mdx",
-      mdxProse: "# Canvas Kit Text Area\n\nText Areas allow users to enter and edit multiple lines of text.\n\n[> Workday Design Reference](https://design.workday.com/components/inputs/text-area)\n\n## Installation\n\n```sh\nyarn add @workday/canvas-kit-react\n```\n\n## Usage\n\n### Basic Example\n\nText Area should be used in tandem with [Form Field](/components/inputs/form-field/) to ensure\nproper label association and screen reader support.\n```tsx\nimport React from 'react';\n\nimport {FormField} from '@workday/canvas-kit-react/form-field';\nimport {TextArea} from '@workday/canvas-kit-react/text-area';\n\nexport const Basic = () => {\n  const [value, setValue] = React.useState('');\n\n  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n    setValue(event.target.value);\n  };\n\n  return (\n    <FormField>\n      <FormField.Label>Leave a Review</FormField.Label>\n      <FormField.Field>\n        <FormField.Input as={TextArea} onChange={handleChange} value={value} />\n      </FormField.Field>\n    </FormField>\n  );\n};\n```\n\n### Disabled\n\nSet the `disabled` prop of the Text Area to prevent users from interacting with it.\n```tsx\nimport React from 'react';\n\nimport {FormField} from '@workday/canvas-kit-react/form-field';\nimport {TextArea} from '@workday/canvas-kit-react/text-area';\n\nexport const Disabled = () => {\n  const [value, setValue] = React.useState('');\n\n  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n    setValue(event.target.value);\n  };\n\n  return (\n    <FormField>\n      <FormField.Label>Leave a Review</FormField.Label>\n      <FormField.Field>\n        <FormField.Input as={TextArea} disabled onChange={handleChange} value={value} />\n      </FormField.Field>\n    </FormField>\n  );\n};\n```\n\n### Placeholder\n\nSet the `placeholder` prop of the Text Area to display a sample of its expected format or value\nbefore a value has been provided.\n```tsx\nimport React from 'react';\n\nimport {FormField} from '@workday/canvas-kit-react/form-field';\nimport {TextArea} from '@workday/canvas-kit-react/text-area';\n\nexport const Placeholder = () => {\n  const [value, setValue] = React.useState('');\n\n  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n    setValue(event.target.value);\n  };\n\n  return (\n    <FormField>\n      <FormField.Label>Leave a Review</FormField.Label>\n      <FormField.Field>\n        <FormField.Input\n          as={TextArea}\n          onChange={handleChange}\n          placeholder=\"Let us know how we did!\"\n          value={value}\n        />\n      </FormField.Field>\n    </FormField>\n  );\n};\n```\n\n> **Accessibility Note**: Always provide a persistent `FormField.Label` and never rely on\n> placeholder text as the only label for a text area. Placeholders can disappear or lack sufficient\n> contrast. Use placeholders only for short format examples, and place detailed instructions or\n> guidance in `FormField.Hint` instead of the placeholder.\n\n### Ref Forwarding\n\nText Area supports [ref forwarding](https://reactjs.org/docs/forwarding-refs.html). It will forward\n`ref` to its underlying `<textarea>` element.\n```tsx\nimport React from 'react';\n\nimport {PrimaryButton} from '@workday/canvas-kit-react/button';\nimport {FormField} from '@workday/canvas-kit-react/form-field';\nimport {TextArea} from '@workday/canvas-kit-react/text-area';\n\nexport const RefForwarding = () => {\n  const [value, setValue] = React.useState('');\n  const ref = React.useRef(null);\n\n  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n    setValue(event.target.value);\n  };\n\n  const handleClick = () => {\n    ref.current.focus();\n  };\n\n  return (\n    <>\n      <FormField>\n        <FormField.Label>Leave a Review</FormField.Label>\n        <FormField.Field>\n          <FormField.Input as={TextArea} onChange={handleChange} ref={ref} value={value} />\n        </FormField.Field>\n      </FormField>\n      <PrimaryButton onClick={handleClick}>Focus Text Area</PrimaryButton>\n    </>\n  );\n};\n```\n\n### Resize Constraints\n\nSet the `resize` prop of the Text Area to restrict resizing of it to certain dimensions. `resize`\naccepts the following values:\n\n- `TextArea.ResizeDirection.Both` (Default)\n- `TextArea.ResizeDirection.Horizontal`\n- `TextArea.ResizeDirection.None`\n- `TextArea.ResizeDirection.Vertical`\n```tsx\nimport React from 'react';\n\nimport {FormField} from '@workday/canvas-kit-react/form-field';\nimport {TextArea} from '@workday/canvas-kit-react/text-area';\n\nexport const ResizeConstraints = () => {\n  const [value, setValue] = React.useState('');\n\n  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n    setValue(event.target.value);\n  };\n\n  return (\n    <FormField>\n      <FormField.Label>Leave a Review</FormField.Label>\n      <FormField.Field>\n        <FormField.Input\n          as={TextArea}\n          onChange={handleChange}\n          resize={TextArea.ResizeDirection.Vertical}\n          value={value}\n        />\n      </FormField.Field>\n    </FormField>\n  );\n};\n```\n\n> **Accessibility Note**: Allowing users to resize the text area (default `resize: both`) improves\n> accessibility by letting them adjust it for comfort. Avoid disabling resizing (`resize: none`)\n> unless necessary, and always ensure the initial size meets the needs of your content.\n\n### Grow\n\nSet the `grow` prop of the Text Area to `true` to configure the Text Area to expand to the width of\nits container.\n```tsx\nimport React from 'react';\n\nimport {FormField} from '@workday/canvas-kit-react/form-field';\nimport {TextArea} from '@workday/canvas-kit-react/text-area';\n\nexport const Grow = () => {\n  const [value, setValue] = React.useState('');\n\n  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n    setValue(event.target.value);\n  };\n\n  return (\n    <FormField grow>\n      <FormField.Label>Leave a Review</FormField.Label>\n      <FormField.Field>\n        <FormField.Input as={TextArea} onChange={handleChange} value={value} />\n      </FormField.Field>\n    </FormField>\n  );\n};\n```\n\n### Label Position Horizontal\n\nSet the `orientation` prop of the Form Field to designate the position of the label relative to the\ninput component. By default, the orientation will be set to `vertical`.\n```tsx\nimport React from 'react';\n\nimport {FormField} from '@workday/canvas-kit-react/form-field';\nimport {TextArea} from '@workday/canvas-kit-react/text-area';\n\nexport const LabelPosition = () => {\n  const [value, setValue] = React.useState('');\n\n  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n    setValue(event.target.value);\n  };\n\n  return (\n    <FormField orientation=\"horizontalStart\">\n      <FormField.Label>Leave a Review</FormField.Label>\n      <FormField.Field>\n        <FormField.Input as={TextArea} onChange={handleChange} value={value} />\n        <FormField.Hint>Message must be under 200 characters</FormField.Hint>\n      </FormField.Field>\n    </FormField>\n  );\n};\n```\n\n### Required\n\nSet the `required` prop of the wrapping Form Field to `true` to indicate that the field is required.\nLabels for required fields are suffixed by a red asterisk.\n```tsx\nimport React from 'react';\n\nimport {FormField} from '@workday/canvas-kit-react/form-field';\nimport {TextArea} from '@workday/canvas-kit-react/text-area';\n\nexport const Required = () => {\n  const [value, setValue] = React.useState('');\n\n  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n    setValue(event.target.value);\n  };\n\n  return (\n    <FormField isRequired={true}>\n      <FormField.Label>Leave a Review</FormField.Label>\n      <FormField.Field>\n        <FormField.Input as={TextArea} onChange={handleChange} value={value} />\n      </FormField.Field>\n    </FormField>\n  );\n};\n```\n\n### Error States\n\nForm Field provides error and caution states for Text Area. Set the `error` prop on Form Field to\n`\"error\"` or `\"caution\"` and use `FormField.Hint` to provide error messages. See\n[Form Field's Error documentation](/components/inputs/form-field/#error-states) for\nexamples and accessibility guidance.\n\n## Accessibility\n\n`TextArea` should be used with [Form Field](/components/inputs/form-field/) to\nensure proper labeling, error handling, and help text association. See\n[FormField's accessibility documentation](/components/inputs/form-field/#accessibility)\nfor comprehensive guidance on form accessibility best practices.\n\n### Character Limits\n\nWhen limiting text area length:\n\n- Use the `maxLength` attribute to enforce the limit programmatically.\n- For longer limits (100+ characters), consider adding character count information to\n  `FormField.Hint`.\n- Avoid announcing character counts after every keystroke, as this disrupts screen reader users.\n  Check out\n  [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)\n  for an example of how to wait for users to stop typing before announcing the character count to\n  screen readers.\n\n### Screen Reader Experience\n\nWhen properly implemented with `FormField`, screen readers will announce:\n\n- The label text when the text area receives focus.\n- Required, disabled, or read-only status.\n- Help text and error messages (via `aria-describedby`).\n- The current value or \"blank\" if empty.\n- That it's a multi-line text input field.\n\n## Component API\n\n## Specifications\n\n"
-    },
     "text-input": {
       title: "Components/Inputs/Text Input",
       storybookUrl: "https://workday.github.io/canvas-kit/?path=/docs/components-inputs-text-input--docs",
       mdxPath: "modules/react/text-input/stories/TextInput.mdx",
       mdxProse: "# Canvas Kit Text Input\n\nText Inputs allow users to enter words or characters without styling.\n\n[> Workday Design Reference](https://design.workday.com/components/inputs/text-input)\n\n## Installation\n\n```sh\nyarn add @workday/canvas-kit-react\n```\n\n## Usage\n\n### Basic Example\n\nText Input should be used in tandem with [Form Field](/components/inputs/form-field/) to ensure\nproper label association and screen reader support.\n```tsx\nimport React from 'react';\n\nimport {FormField} from '@workday/canvas-kit-react/form-field';\nimport {TextInput} from '@workday/canvas-kit-react/text-input';\n\nexport const Basic = () => {\n  const [value, setValue] = React.useState('');\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setValue(event.target.value);\n  };\n\n  return (\n    <FormField>\n      <FormField.Label>Email</FormField.Label>\n      <FormField.Field>\n        <FormField.Input as={TextInput} onChange={handleChange} value={value} />\n      </FormField.Field>\n    </FormField>\n  );\n};\n```\n\n### Disabled\n\nSet the `disabled` prop of the Text Input to prevent users from interacting with it.\n```tsx\nimport React from 'react';\n\nimport {FormField} from '@workday/canvas-kit-react/form-field';\nimport {TextInput} from '@workday/canvas-kit-react/text-input';\n\nexport const Disabled = () => {\n  const [value, setValue] = React.useState('');\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setValue(event.target.value);\n  };\n\n  return (\n    <FormField>\n      <FormField.Label>Email</FormField.Label>\n      <FormField.Field>\n        <FormField.Input as={TextInput} disabled onChange={handleChange} value={value} />\n      </FormField.Field>\n    </FormField>\n  );\n};\n```\n\n### Placeholder\n\nSet the `placeholder` prop of the Text Input to display a sample of its expected format or value\nbefore a value has been provided.\n```tsx\nimport React from 'react';\n\nimport {FormField} from '@workday/canvas-kit-react/form-field';\nimport {TextInput} from '@workday/canvas-kit-react/text-input';\n\nexport const Placeholder = () => {\n  const [value, setValue] = React.useState('');\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setValue(event.target.value);\n  };\n\n  return (\n    <FormField>\n      <FormField.Label>Email</FormField.Label>\n      <FormField.Field>\n        <FormField.Input\n          as={TextInput}\n          onChange={handleChange}\n          placeholder=\"user@email.com\"\n          value={value}\n        />\n      </FormField.Field>\n    </FormField>\n  );\n};\n```\n\n> **Accessibility Note**: Always provide a persistent `FormField.Label` and never rely on\n> placeholder text as the only label for an input. Placeholders can disappear or lack sufficient\n> contrast. Use placeholders only for short format examples (e.g., \"name@example.com\"), and place\n> detailed instructions or guidance in `FormField.Hint` instead of the placeholder.\n\n### Ref Forwarding\n\nText Input supports [ref forwarding](https://reactjs.org/docs/forwarding-refs.html). It will forward\n`ref` to its underlying `<input type=\"text\">` element.\n```tsx\nimport React from 'react';\n\nimport {PrimaryButton} from '@workday/canvas-kit-react/button';\nimport {FormField} from '@workday/canvas-kit-react/form-field';\nimport {TextInput} from '@workday/canvas-kit-react/text-input';\n\nexport const RefForwarding = () => {\n  const [value, setValue] = React.useState('');\n  const ref = React.useRef(null);\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setValue(event.target.value);\n  };\n\n  const handleClick = () => {\n    ref.current.focus();\n  };\n\n  return (\n    <>\n      <FormField>\n        <FormField.Label>Email</FormField.Label>\n        <FormField.Field>\n          <FormField.Input as={TextInput} onChange={handleChange} ref={ref} value={value} />\n        </FormField.Field>\n      </FormField>\n      <PrimaryButton onClick={handleClick}>Focus Text Input</PrimaryButton>\n    </>\n  );\n};\n```\n\n### Grow\n\nSet the `grow` prop of the wrapping Form Field to `true` to configure the Text Input to expand to\nthe width of its container.\n```tsx\nimport React from 'react';\n\nimport {FormField} from '@workday/canvas-kit-react/form-field';\nimport {TextInput} from '@workday/canvas-kit-react/text-input';\n\nexport const Grow = () => {\n  const [value, setValue] = React.useState('');\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setValue(event.target.value);\n  };\n\n  return (\n    <FormField grow>\n      <FormField.Label>Street Address</FormField.Label>\n      <FormField.Field>\n        <FormField.Input as={TextInput} onChange={handleChange} value={value} />\n      </FormField.Field>\n    </FormField>\n  );\n};\n```\n\nThe `grow` prop may also be applied directly to the Text Input if Form Field is not being used.\n\n### Label Position Horizontal\n\nSet the `orientation` prop of the Form Field to designate the position of the label relative to the\ninput component. By default, the orientation will be set to `vertical`.\n```tsx\nimport React from 'react';\n\nimport {FormField} from '@workday/canvas-kit-react/form-field';\nimport {TextInput} from '@workday/canvas-kit-react/text-input';\n\nexport const LabelPosition = () => {\n  const [value, setValue] = React.useState('');\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setValue(event.target.value);\n  };\n\n  return (\n    <FormField orientation=\"horizontalStart\">\n      <FormField.Label>Email</FormField.Label>\n      <FormField.Field>\n        <FormField.Input as={TextInput} onChange={handleChange} value={value} />\n        <FormField.Hint>Add a valid email</FormField.Hint>\n      </FormField.Field>\n    </FormField>\n  );\n};\n```\n\n### Required\n\nSet the `required` prop of the wrapping Form Field to `true` to indicate that the field is required.\nLabels for required fields are suffixed by a red asterisk.\n```tsx\nimport React from 'react';\n\nimport {FormField} from '@workday/canvas-kit-react/form-field';\nimport {TextInput} from '@workday/canvas-kit-react/text-input';\n\nexport const Required = () => {\n  const [value, setValue] = React.useState('');\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setValue(event.target.value);\n  };\n\n  return (\n    <FormField isRequired={true}>\n      <FormField.Label>Email</FormField.Label>\n      <FormField.Field>\n        <FormField.Input as={TextInput} onChange={handleChange} value={value} />\n      </FormField.Field>\n    </FormField>\n  );\n};\n```\n\n### Icons\n\n`InputGroup` is available to add icons to the `TextInput`. Internally, a container `div` element is\nused with relative position styling on the `div` and absolute position styling on the start and end\nicons. `InputGroup.InnerStart` and `InputGroup.InnerEnd` are used to position elements at the start\nand end of the input. \"start\" and \"end\" are used instead of \"left\" and \"right\" to match\n[CSS Logical Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties)\nand will be semantically correct in left-to-right and right-to-left languages.\n\n`InputGroup.InnerStart` and `InputGroup.InnerEnd` subcomponents can handle any child elements, but\nare built for icons. The default width is `40px`, which is perfect for icons. If you need to use\nsomething else, be sure to set the `width` property of `InputGroup.InnerStart` or\n`InputGroup.InnerEnd` to match the intended width of the element. Do not use the `cs` prop or any\nmethod to change width. The `width` prop is used to correctly position other inner elements.\n```tsx\nimport React from 'react';\n\nimport {\n  FormField,\n  useFormFieldInput,\n  useFormFieldModel,\n} from '@workday/canvas-kit-react/form-field';\nimport {SystemIcon} from '@workday/canvas-kit-react/icon';\nimport {InputGroup} from '@workday/canvas-kit-react/text-input';\nimport {mailIcon} from '@workday/canvas-system-icons-web';\n\n/**\n * Using `as={InputGroup}` on `FormField.Input` will break the label associations necessary for accessibility.\n * In this example, we've rendered `FormField.Field` as `InputGroup` and then hoisted the `id` of the input from the FormField model.\n * This allows us to set the `id` of the `InputGroup.Input` correctly for proper label association.\n */\n\nexport const Icons = () => {\n  const model = useFormFieldModel();\n  const {id: formFieldInputId} = useFormFieldInput(model);\n\n  return (\n    <FormField model={model}>\n      <FormField.Label>Email</FormField.Label>\n      <FormField.Field as={InputGroup}>\n        <InputGroup.InnerStart>\n          <SystemIcon icon={mailIcon} size=\"small\" />\n        </InputGroup.InnerStart>\n        <InputGroup.Input id={formFieldInputId} autoComplete=\"email\" />\n        <InputGroup.InnerEnd>\n          <InputGroup.ClearButton />\n        </InputGroup.InnerEnd>\n      </FormField.Field>\n    </FormField>\n  );\n};\n```\n\n> **Accessibility Note**: In this example, the mail icon is decorative and hidden from screen\n> readers. If icons are used for conveying meaning in addition to the label text, a text alternative\n> must be provided for screen readers.\n\n### Error States\n\nForm Field provides error and caution states for Text Input. Set the `error` prop on Form Field to\n`\"error\"` or `\"caution\"` and use `FormField.Hint` to provide error messages. See\n[Form Field's Error documentation](/components/inputs/form-field/#error-states) for examples and\naccessibility guidance.\n\n## Accessibility\n\n`TextInput` should be used with [Form Field](/components/inputs/form-field/) to ensure proper\nlabeling, error handling, and help text association. See\n[FormField's accessibility documentation](/components/inputs/form-field/#accessibility) for\ncomprehensive guidance on form accessibility best practices.\n\n### Autocomplete Attribute\n\n- Add appropriate `autoComplete` values to indicate the input's purpose (e.g., `\"email\"`, `\"name\"`,\n  `\"street-address\"`, `\"tel\"`). Read more about\n  [Identify Input Purpose](https://www.w3.org/WAI/WCAG22/Understanding/identify-input-purpose.html).\n- Autocomplete enables browser autofill and helps assistive technologies understand the field's\n  purpose, benefiting users with cognitive disabilities and motor impairments.\n- Autocomplete also helps password managers identify the correct fields.\n\n### Input Type for Mobile Keyboards\n\n`TextInput` defaults to `<input type=\"text\">`, but for better mobile keyboard support, use more\nspecific `type` attributes (like `\"email\"`, `\"tel\"`, `\"url\"`, or `\"search\"`) as needed.\n\n### Screen Reader Experience\n\nWhen properly implemented with `FormField`, screen readers will announce:\n\n- The label text when the input receives focus.\n- Required, disabled, or read-only status.\n- Help text and error messages (via `aria-describedby`).\n- The current value or \"blank\" if empty.\n\n## Component API\n\n## Specifications\n\n"
     },
+    textarea: {
+      title: "Components/Inputs/TextArea",
+      storybookUrl: "https://workday.github.io/canvas-kit/?path=/docs/components-inputs-textarea--docs",
+      mdxPath: "modules/react/text-area/stories/TextArea.mdx",
+      mdxProse: "# Canvas Kit Text Area\n\nText Areas allow users to enter and edit multiple lines of text.\n\n[> Workday Design Reference](https://design.workday.com/components/inputs/text-area)\n\n## Installation\n\n```sh\nyarn add @workday/canvas-kit-react\n```\n\n## Usage\n\n### Basic Example\n\nText Area should be used in tandem with [Form Field](/components/inputs/form-field/) to ensure\nproper label association and screen reader support.\n```tsx\nimport React from 'react';\n\nimport {FormField} from '@workday/canvas-kit-react/form-field';\nimport {TextArea} from '@workday/canvas-kit-react/text-area';\n\nexport const Basic = () => {\n  const [value, setValue] = React.useState('');\n\n  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n    setValue(event.target.value);\n  };\n\n  return (\n    <FormField>\n      <FormField.Label>Leave a Review</FormField.Label>\n      <FormField.Field>\n        <FormField.Input as={TextArea} onChange={handleChange} value={value} />\n      </FormField.Field>\n    </FormField>\n  );\n};\n```\n\n### Disabled\n\nSet the `disabled` prop of the Text Area to prevent users from interacting with it.\n```tsx\nimport React from 'react';\n\nimport {FormField} from '@workday/canvas-kit-react/form-field';\nimport {TextArea} from '@workday/canvas-kit-react/text-area';\n\nexport const Disabled = () => {\n  const [value, setValue] = React.useState('');\n\n  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n    setValue(event.target.value);\n  };\n\n  return (\n    <FormField>\n      <FormField.Label>Leave a Review</FormField.Label>\n      <FormField.Field>\n        <FormField.Input as={TextArea} disabled onChange={handleChange} value={value} />\n      </FormField.Field>\n    </FormField>\n  );\n};\n```\n\n### Placeholder\n\nSet the `placeholder` prop of the Text Area to display a sample of its expected format or value\nbefore a value has been provided.\n```tsx\nimport React from 'react';\n\nimport {FormField} from '@workday/canvas-kit-react/form-field';\nimport {TextArea} from '@workday/canvas-kit-react/text-area';\n\nexport const Placeholder = () => {\n  const [value, setValue] = React.useState('');\n\n  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n    setValue(event.target.value);\n  };\n\n  return (\n    <FormField>\n      <FormField.Label>Leave a Review</FormField.Label>\n      <FormField.Field>\n        <FormField.Input\n          as={TextArea}\n          onChange={handleChange}\n          placeholder=\"Let us know how we did!\"\n          value={value}\n        />\n      </FormField.Field>\n    </FormField>\n  );\n};\n```\n\n> **Accessibility Note**: Always provide a persistent `FormField.Label` and never rely on\n> placeholder text as the only label for a text area. Placeholders can disappear or lack sufficient\n> contrast. Use placeholders only for short format examples, and place detailed instructions or\n> guidance in `FormField.Hint` instead of the placeholder.\n\n### Ref Forwarding\n\nText Area supports [ref forwarding](https://reactjs.org/docs/forwarding-refs.html). It will forward\n`ref` to its underlying `<textarea>` element.\n```tsx\nimport React from 'react';\n\nimport {PrimaryButton} from '@workday/canvas-kit-react/button';\nimport {FormField} from '@workday/canvas-kit-react/form-field';\nimport {TextArea} from '@workday/canvas-kit-react/text-area';\n\nexport const RefForwarding = () => {\n  const [value, setValue] = React.useState('');\n  const ref = React.useRef(null);\n\n  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n    setValue(event.target.value);\n  };\n\n  const handleClick = () => {\n    ref.current.focus();\n  };\n\n  return (\n    <>\n      <FormField>\n        <FormField.Label>Leave a Review</FormField.Label>\n        <FormField.Field>\n          <FormField.Input as={TextArea} onChange={handleChange} ref={ref} value={value} />\n        </FormField.Field>\n      </FormField>\n      <PrimaryButton onClick={handleClick}>Focus Text Area</PrimaryButton>\n    </>\n  );\n};\n```\n\n### Resize Constraints\n\nSet the `resize` prop of the Text Area to restrict resizing of it to certain dimensions. `resize`\naccepts the following values:\n\n- `TextArea.ResizeDirection.Both` (Default)\n- `TextArea.ResizeDirection.Horizontal`\n- `TextArea.ResizeDirection.None`\n- `TextArea.ResizeDirection.Vertical`\n```tsx\nimport React from 'react';\n\nimport {FormField} from '@workday/canvas-kit-react/form-field';\nimport {TextArea} from '@workday/canvas-kit-react/text-area';\n\nexport const ResizeConstraints = () => {\n  const [value, setValue] = React.useState('');\n\n  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n    setValue(event.target.value);\n  };\n\n  return (\n    <FormField>\n      <FormField.Label>Leave a Review</FormField.Label>\n      <FormField.Field>\n        <FormField.Input\n          as={TextArea}\n          onChange={handleChange}\n          resize={TextArea.ResizeDirection.Vertical}\n          value={value}\n        />\n      </FormField.Field>\n    </FormField>\n  );\n};\n```\n\n> **Accessibility Note**: Allowing users to resize the text area (default `resize: both`) improves\n> accessibility by letting them adjust it for comfort. Avoid disabling resizing (`resize: none`)\n> unless necessary, and always ensure the initial size meets the needs of your content.\n\n### Grow\n\nSet the `grow` prop of the Text Area to `true` to configure the Text Area to expand to the width of\nits container.\n```tsx\nimport React from 'react';\n\nimport {FormField} from '@workday/canvas-kit-react/form-field';\nimport {TextArea} from '@workday/canvas-kit-react/text-area';\n\nexport const Grow = () => {\n  const [value, setValue] = React.useState('');\n\n  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n    setValue(event.target.value);\n  };\n\n  return (\n    <FormField grow>\n      <FormField.Label>Leave a Review</FormField.Label>\n      <FormField.Field>\n        <FormField.Input as={TextArea} onChange={handleChange} value={value} />\n      </FormField.Field>\n    </FormField>\n  );\n};\n```\n\n### Label Position Horizontal\n\nSet the `orientation` prop of the Form Field to designate the position of the label relative to the\ninput component. By default, the orientation will be set to `vertical`.\n```tsx\nimport React from 'react';\n\nimport {FormField} from '@workday/canvas-kit-react/form-field';\nimport {TextArea} from '@workday/canvas-kit-react/text-area';\n\nexport const LabelPosition = () => {\n  const [value, setValue] = React.useState('');\n\n  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n    setValue(event.target.value);\n  };\n\n  return (\n    <FormField orientation=\"horizontalStart\">\n      <FormField.Label>Leave a Review</FormField.Label>\n      <FormField.Field>\n        <FormField.Input as={TextArea} onChange={handleChange} value={value} />\n        <FormField.Hint>Message must be under 200 characters</FormField.Hint>\n      </FormField.Field>\n    </FormField>\n  );\n};\n```\n\n### Required\n\nSet the `required` prop of the wrapping Form Field to `true` to indicate that the field is required.\nLabels for required fields are suffixed by a red asterisk.\n```tsx\nimport React from 'react';\n\nimport {FormField} from '@workday/canvas-kit-react/form-field';\nimport {TextArea} from '@workday/canvas-kit-react/text-area';\n\nexport const Required = () => {\n  const [value, setValue] = React.useState('');\n\n  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n    setValue(event.target.value);\n  };\n\n  return (\n    <FormField isRequired={true}>\n      <FormField.Label>Leave a Review</FormField.Label>\n      <FormField.Field>\n        <FormField.Input as={TextArea} onChange={handleChange} value={value} />\n      </FormField.Field>\n    </FormField>\n  );\n};\n```\n\n### Error States\n\nForm Field provides error and caution states for Text Area. Set the `error` prop on Form Field to\n`\"error\"` or `\"caution\"` and use `FormField.Hint` to provide error messages. See\n[Form Field's Error documentation](/components/inputs/form-field/#error-states) for\nexamples and accessibility guidance.\n\n## Accessibility\n\n`TextArea` should be used with [Form Field](/components/inputs/form-field/) to\nensure proper labeling, error handling, and help text association. See\n[FormField's accessibility documentation](/components/inputs/form-field/#accessibility)\nfor comprehensive guidance on form accessibility best practices.\n\n### Character Limits\n\nWhen limiting text area length:\n\n- Use the `maxLength` attribute to enforce the limit programmatically.\n- For longer limits (100+ characters), consider adding character count information to\n  `FormField.Hint`.\n- Avoid announcing character counts after every keystroke, as this disrupts screen reader users.\n  Check out\n  [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)\n  for an example of how to wait for users to stop typing before announcing the character count to\n  screen readers.\n\n### Screen Reader Experience\n\nWhen properly implemented with `FormField`, screen readers will announce:\n\n- The label text when the text area receives focus.\n- Required, disabled, or read-only status.\n- Help text and error messages (via `aria-describedby`).\n- The current value or \"blank\" if empty.\n- That it's a multi-line text input field.\n\n## Component API\n\n## Specifications\n\n"
+    },
     title: {
       title: "Components/Text/Title",
       storybookUrl: "https://workday.github.io/canvas-kit/?path=/docs/components-text-title--docs",