@workday/canvas-kit-mcp 16.0.15 → 16.0.16

package/dist/cli.js

@@ -18,7 +18,7 @@ import { z } from "zod";
 // package.json
 var package_default = {
   name: "@workday/canvas-kit-mcp",
-  version: "16.0.15",
+  version: "16.0.16",
   description: "MCP package for Canvas Kit",
   author: "Workday, Inc. (https://www.workday.com)",
   license: "Apache-2.0",
@@ -577,8 +577,8 @@ var stories_config_default = {
       title: "Components/Inputs/Checkbox",
       storybookUrl: "https://workday.github.io/canvas-kit/?path=/docs/components-inputs-checkbox--docs",
       mdxPath: "modules/react/checkbox/stories/Checkbox.mdx",
-      mdxProse: "# Canvas Kit Checkbox\n\nCheckboxes allow a user to select zero, one, or multiple values from a predefined list of 7 or less\noptions.\n\n[> Workday Design Reference](https://design.workday.com/components/inputs/checkboxes)\n\n## Installation\n\n```sh\nyarn add @workday/canvas-kit-react\n```\n\n## Usage\n\n### Basic Example\n\nCheckbox may be used on its own without [Form Field](/components/inputs/form-field/) since it\nincludes a `<label>` with a `for` attribute referencing the underlying `<input type=\"checkbox\">`\nelement.\n```tsx\nimport React from 'react';\n\nimport {Checkbox} from '@workday/canvas-kit-react/checkbox';\nimport {FormField} from '@workday/canvas-kit-react/form-field';\n\nexport const Basic = () => {\n  const [checked, setChecked] = React.useState(false);\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setChecked(event.target.checked);\n  };\n\n  return (\n    <FormField>\n      <FormField.Label>Confirm</FormField.Label>\n      <FormField.Field>\n        <FormField.Input\n          as={Checkbox}\n          checked={checked}\n          label=\"I agree to the terms\"\n          onChange={handleChange}\n        />\n      </FormField.Field>\n    </FormField>\n  );\n};\n```\n\n### Inverse\n\nCheckbox with inverse variation\n```tsx\nimport React from 'react';\n\nimport {Checkbox} from '@workday/canvas-kit-react/checkbox';\nimport {Flex} from '@workday/canvas-kit-react/layout';\nimport {createStyles} from '@workday/canvas-kit-styling';\nimport {system} from '@workday/canvas-tokens-web';\n\nconst styleOverrides = createStyles({\n  backgroundColor: system.color.surface.contrast.default,\n  padding: system.padding.md,\n});\n\nexport const Inverse = () => {\n  const [checked, setChecked] = React.useState(false);\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setChecked(event.target.checked);\n  };\n\n  return (\n    <Flex cs={styleOverrides}>\n      <Checkbox\n        variant=\"inverse\"\n        checked={checked}\n        label=\"I agree to the terms\"\n        onChange={handleChange}\n      />\n    </Flex>\n  );\n};\n```\n\n### Disabled\n\nSet the `disabled` prop of the Checkbox to prevent users from interacting with it.\n```tsx\nimport React from 'react';\n\nimport {Checkbox} from '@workday/canvas-kit-react/checkbox';\nimport {FormField} from '@workday/canvas-kit-react/form-field';\n\nexport const Disabled = () => {\n  const [checked, setChecked] = React.useState(false);\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setChecked(event.target.checked);\n  };\n\n  return (\n    <FormField>\n      <FormField.Label>Confirm</FormField.Label>\n      <FormField.Field>\n        <FormField.Input\n          as={Checkbox}\n          checked={checked}\n          disabled={true}\n          label=\"I agree to the terms\"\n          onChange={handleChange}\n        />\n      </FormField.Field>\n    </FormField>\n  );\n};\n```\n\n### Indeterminate\n\nSet the `indeterminate` prop of the Checkbox to `true` to indicate the Checkbox is neither checked\nnor unchecked.\n\nA common use case for an indeterminate Checkbox is when the value of a parent Checkbox is dependent\non a number of child Checkboxes. The parent Checkbox is set to the indeterminate state if some (but\nnot all) of its children are checked.\n```tsx\nimport React from 'react';\n\nimport {Checkbox} from '@workday/canvas-kit-react/checkbox';\nimport {Box} from '@workday/canvas-kit-react/layout';\nimport {createStyles} from '@workday/canvas-kit-styling';\nimport {system} from '@workday/canvas-tokens-web';\n\nconst styleOverrides = createStyles({\n  marginInlineStart: system.gap.xl,\n  marginBlockStart: system.gap.sm,\n});\n\nexport const Indeterminate = () => {\n  const [pizzaChecked, setPizzaChecked] = React.useState(false);\n  const [pizzaIndeterminate, setPizzaIndeterminate] = React.useState(false);\n\n  const [toppings, setToppings] = React.useState([\n    {name: 'Pepperoni', checked: false},\n    {name: 'Sausage', checked: false},\n    {name: 'Bell Peppers', checked: false},\n    {name: 'Olives', checked: false},\n    {name: 'Onions', checked: false},\n  ]);\n\n  const handlePizzaChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const checked = event.target.checked;\n\n    if (checked || (!checked && pizzaIndeterminate)) {\n      setPizzaChecked(true);\n      setToppings(\n        toppings.map(topping => ({\n          ...topping,\n          checked: true,\n        }))\n      );\n    } else {\n      setPizzaChecked(false);\n      setToppings(\n        toppings.map(topping => ({\n          ...topping,\n          checked: false,\n        }))\n      );\n    }\n\n    setPizzaIndeterminate(false);\n  };\n\n  const handleToppingChange = (event: React.ChangeEvent<HTMLInputElement>, index: number) => {\n    const newToppings = toppings.map(topping => ({...topping}));\n    newToppings[index].checked = event.target.checked;\n    setToppings(newToppings);\n\n    const anyToppingChecked = newToppings.filter(topping => topping.checked).length > 0;\n    const anyToppingUnchecked = newToppings.filter(topping => !topping.checked).length > 0;\n    const allToppingChecked = !anyToppingUnchecked;\n    setPizzaIndeterminate(anyToppingChecked && anyToppingUnchecked);\n    setPizzaChecked(allToppingChecked);\n  };\n\n  return (\n    <>\n      <Checkbox\n        checked={pizzaChecked}\n        indeterminate={pizzaIndeterminate}\n        label=\"Supreme Pizza Toppings\"\n        onChange={handlePizzaChange}\n      />\n      <Box cs={styleOverrides}>\n        {toppings.map((topping, index) => (\n          <Checkbox\n            checked={topping.checked}\n            key={topping.name}\n            label={topping.name}\n            onChange={event => handleToppingChange(event, index)}\n          />\n        ))}\n      </Box>\n    </>\n  );\n};\n```\n\n### Ref Forwarding\n\nCheckbox supports [ref forwarding](https://reactjs.org/docs/forwarding-refs.html). It will forward\n`ref` to its underlying `<input type=\"checkbox\">` element.\n```tsx\nimport React from 'react';\n\nimport {PrimaryButton} from '@workday/canvas-kit-react/button';\nimport {Checkbox} from '@workday/canvas-kit-react/checkbox';\nimport {FormField} from '@workday/canvas-kit-react/form-field';\nimport {Box} from '@workday/canvas-kit-react/layout';\nimport {createStyles, px2rem} from '@workday/canvas-kit-styling';\nimport {system} from '@workday/canvas-tokens-web';\n\nconst boxStyles = createStyles({\n  display: 'flex',\n  flexDirection: 'column',\n});\n\nexport const RefForwarding = () => {\n  const [checked, setChecked] = React.useState(false);\n  const ref = React.useRef(null);\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setChecked(event.target.checked);\n  };\n\n  const handleClick = () => {\n    ref.current.click();\n  };\n\n  return (\n    <>\n      <Box cs={boxStyles}>\n        <FormField>\n          <FormField.Label>Confirm</FormField.Label>\n          <FormField.Field>\n            <FormField.Input\n              as={Checkbox}\n              checked={checked}\n              label=\"I agree to the terms\"\n              onChange={handleChange}\n              ref={ref}\n            />\n          </FormField.Field>\n        </FormField>\n      </Box>\n      <PrimaryButton onClick={handleClick}>Check Agreement to Terms</PrimaryButton>\n    </>\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 {Checkbox} from '@workday/canvas-kit-react/checkbox';\nimport {FormField} from '@workday/canvas-kit-react/form-field';\n\nexport const LabelPosition = () => {\n  const [checked, setChecked] = React.useState(false);\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setChecked(event.target.checked);\n  };\n\n  return (\n    <FormField orientation=\"horizontalStart\">\n      <FormField.Label>Confirm</FormField.Label>\n      <FormField.Field>\n        <FormField.Input\n          as={Checkbox}\n          checked={checked}\n          label=\"I agree to the terms\"\n          onChange={handleChange}\n        />\n      </FormField.Field>\n    </FormField>\n  );\n};\n```\n\n### Required\n\nSet the `required` prop of a 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 {Checkbox} from '@workday/canvas-kit-react/checkbox';\nimport {FormField} from '@workday/canvas-kit-react/form-field';\n\nexport const Required = () => {\n  const [checked, setChecked] = React.useState(false);\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setChecked(event.target.checked);\n  };\n\n  return (\n    <FormField isRequired={true}>\n      <FormField.Label>Confirm</FormField.Label>\n      <FormField.Field>\n        <FormField.Input\n          as={Checkbox}\n          checked={checked}\n          label=\"I agree to the terms\"\n          onChange={handleChange}\n        />\n      </FormField.Field>\n    </FormField>\n  );\n};\n```\n\n### Error States\n\nSet the `error` prop of the wrapping Form Field to `\"caution\"` or `\"error\"` to set the Checkbox to\nthe Alert or Error state, respectively. You will also need to set the `hintId` and `hintText` props\non the Form Field to meet accessibility standards. You may wish to omit the `label` prop on the Form\nField given that Checkbox already includes a label.\n\nThe `error` prop may be applied directly to the Checkbox with a value of `\"caution\"` or `\"error\"` if\nForm Field is not being used.\n\n#### Caution\n```tsx\nimport React from 'react';\n\nimport {Checkbox} from '@workday/canvas-kit-react/checkbox';\nimport {FormField} from '@workday/canvas-kit-react/form-field';\n\nexport const Caution = () => {\n  const [checked, setChecked] = React.useState(false);\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setChecked(event.target.checked);\n  };\n\n  return (\n    <FormField error=\"caution\">\n      <FormField.Label>Confirm</FormField.Label>\n      <FormField.Field>\n        <FormField.Input\n          as={Checkbox}\n          checked={checked}\n          label=\"I agree to the terms\"\n          onChange={handleChange}\n        />\n        <FormField.Hint>You must agree to the terms before proceeding</FormField.Hint>\n      </FormField.Field>\n    </FormField>\n  );\n};\n```\n\n#### Error\n```tsx\nimport React from 'react';\n\nimport {Checkbox} from '@workday/canvas-kit-react/checkbox';\nimport {FormField} from '@workday/canvas-kit-react/form-field';\n\nexport const Error = () => {\n  const [checked, setChecked] = React.useState(false);\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setChecked(event.target.checked);\n  };\n\n  return (\n    <FormField error=\"error\">\n      <FormField.Label>Confirm</FormField.Label>\n      <FormField.Field>\n        <FormField.Input\n          as={Checkbox}\n          checked={checked}\n          label=\"I agree to the terms\"\n          onChange={handleChange}\n        />\n        <FormField.Hint>You must agree to the terms before proceeding</FormField.Hint>\n      </FormField.Field>\n    </FormField>\n  );\n};\n```\n\n### Custom Styles\n\nCheckbox supports custom styling via the `cs` prop. For more information, check our\n[\"How To Customize Styles\"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).\n\n## Component API\n\n## Specifications\n\n",
-      accessibilityProse: ""
+      mdxProse: "# Canvas Kit Checkbox\n\nCheckboxes allow a user to select zero, one, or multiple values from a predefined list of 7 or less\noptions.\n\n[> Workday Design Reference](https://design.workday.com/components/inputs/checkboxes)\n\n## Installation\n\n```sh\nyarn add @workday/canvas-kit-react\n```\n\n## Usage\n\n### Basic Example\n\nCheckbox may be used on its own without [Form Field](/components/inputs/form-field/) since it\nincludes a `<label>` with a `for` attribute referencing the underlying `<input type=\"checkbox\">`\nelement. For checkboxes grouped with **`FormFieldGroup`**, see\n[FormField accessibility](/components/inputs/form-field/#accessibility) for hint, error, caution,\nand required state wiring.\n```tsx\nimport React from 'react';\n\nimport {Checkbox} from '@workday/canvas-kit-react/checkbox';\n\nexport const Basic = () => {\n  const [checked, setChecked] = React.useState(false);\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setChecked(event.target.checked);\n  };\n\n  return <Checkbox checked={checked} label=\"I agree to the terms\" onChange={handleChange} />;\n};\n```\n\n### Inverse\n\nCheckbox with inverse variation\n```tsx\nimport React from 'react';\n\nimport {Checkbox} from '@workday/canvas-kit-react/checkbox';\nimport {Flex} from '@workday/canvas-kit-react/layout';\nimport {createStyles} from '@workday/canvas-kit-styling';\nimport {system} from '@workday/canvas-tokens-web';\n\nconst styleOverrides = createStyles({\n  backgroundColor: system.color.surface.contrast.default,\n  padding: system.padding.md,\n});\n\nexport const Inverse = () => {\n  const [checked, setChecked] = React.useState(false);\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setChecked(event.target.checked);\n  };\n\n  return (\n    <Flex cs={styleOverrides}>\n      <Checkbox\n        variant=\"inverse\"\n        checked={checked}\n        label=\"I agree to the terms\"\n        onChange={handleChange}\n      />\n    </Flex>\n  );\n};\n```\n\n### Disabled\n\nSet the `disabled` prop of the Checkbox to prevent users from interacting with it.\n```tsx\nimport React from 'react';\n\nimport {Checkbox} from '@workday/canvas-kit-react/checkbox';\n\nexport const Disabled = () => {\n  const [checked, setChecked] = React.useState(false);\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setChecked(event.target.checked);\n  };\n\n  return (\n    <Checkbox checked={checked} disabled label=\"I agree to the terms\" onChange={handleChange} />\n  );\n};\n```\n\n### Indeterminate\n\nSet the `indeterminate` prop of the Checkbox to `true` to indicate the Checkbox is neither checked\nnor unchecked.\n\nA common use case for an indeterminate Checkbox is when the value of a parent Checkbox is dependent\non a number of child Checkboxes. The parent Checkbox is set to the indeterminate state if some (but\nnot all) of its children are checked.\n```tsx\nimport React from 'react';\n\nimport {Checkbox} from '@workday/canvas-kit-react/checkbox';\nimport {createStyles} from '@workday/canvas-kit-styling';\nimport {system} from '@workday/canvas-tokens-web';\n\nconst listStyles = createStyles({\n  listStyle: 'none',\n  margin: 0,\n  padding: 0,\n});\n\nconst nestedListStyles = createStyles({\n  listStyle: 'none',\n  margin: 0,\n  marginInlineStart: system.gap.xl,\n  marginBlockStart: system.gap.sm,\n  padding: 0,\n  display: 'flex',\n  flexDirection: 'column',\n  gap: system.gap.sm,\n});\n\nexport const Indeterminate = () => {\n  const [pizzaChecked, setPizzaChecked] = React.useState(false);\n  const [pizzaIndeterminate, setPizzaIndeterminate] = React.useState(false);\n\n  const [toppings, setToppings] = React.useState([\n    {name: 'Pepperoni', checked: false},\n    {name: 'Sausage', checked: false},\n    {name: 'Bell Peppers', checked: false},\n    {name: 'Olives', checked: false},\n    {name: 'Onions', checked: false},\n  ]);\n\n  const handlePizzaChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const checked = event.target.checked;\n\n    if (checked || (!checked && pizzaIndeterminate)) {\n      setPizzaChecked(true);\n      setToppings(\n        toppings.map(topping => ({\n          ...topping,\n          checked: true,\n        }))\n      );\n    } else {\n      setPizzaChecked(false);\n      setToppings(\n        toppings.map(topping => ({\n          ...topping,\n          checked: false,\n        }))\n      );\n    }\n\n    setPizzaIndeterminate(false);\n  };\n\n  const handleToppingChange = (event: React.ChangeEvent<HTMLInputElement>, index: number) => {\n    const newToppings = toppings.map(topping => ({...topping}));\n    newToppings[index].checked = event.target.checked;\n    setToppings(newToppings);\n\n    const anyToppingChecked = newToppings.filter(topping => topping.checked).length > 0;\n    const anyToppingUnchecked = newToppings.filter(topping => !topping.checked).length > 0;\n    const allToppingChecked = !anyToppingUnchecked;\n    setPizzaIndeterminate(anyToppingChecked && anyToppingUnchecked);\n    setPizzaChecked(allToppingChecked);\n  };\n\n  return (\n    <ul className={listStyles}>\n      <li>\n        <Checkbox\n          checked={pizzaChecked}\n          indeterminate={pizzaIndeterminate}\n          label=\"Supreme Pizza Toppings\"\n          onChange={handlePizzaChange}\n        />\n        <ul className={nestedListStyles}>\n          {toppings.map((topping, index) => (\n            <li key={topping.name}>\n              <Checkbox\n                checked={topping.checked}\n                label={topping.name}\n                onChange={event => handleToppingChange(event, index)}\n              />\n            </li>\n          ))}\n        </ul>\n      </li>\n    </ul>\n  );\n};\n```\n\n> **Accessibility Note**: Use semantic unordered list markup so that screen readers can communicate\n> the nested hierarchy of the components to users.\n\n### Ref Forwarding\n\nCheckbox supports [ref forwarding](https://reactjs.org/docs/forwarding-refs.html). It will forward\n`ref` to its underlying `<input type=\"checkbox\">` element.\n```tsx\nimport React from 'react';\n\nimport {PrimaryButton} from '@workday/canvas-kit-react/button';\nimport {Checkbox} from '@workday/canvas-kit-react/checkbox';\nimport {changeFocus} from '@workday/canvas-kit-react/common';\nimport {Flex} from '@workday/canvas-kit-react/layout';\nimport {createStyles} from '@workday/canvas-kit-styling';\nimport {system} from '@workday/canvas-tokens-web';\n\nconst containerStyles = createStyles({\n  gap: system.gap.md,\n  alignItems: 'flex-start',\n  flexDirection: 'column',\n});\n\nexport const RefForwarding = () => {\n  const [checked, setChecked] = React.useState(false);\n  const ref = React.useRef<HTMLInputElement>(null);\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setChecked(event.target.checked);\n  };\n\n  const handleClick = () => {\n    changeFocus(ref.current);\n  };\n\n  return (\n    <Flex cs={containerStyles}>\n      <Checkbox checked={checked} label=\"I agree to the terms\" onChange={handleChange} ref={ref} />\n      <PrimaryButton onClick={handleClick}>Focus Checkbox</PrimaryButton>\n    </Flex>\n  );\n};\n```\n\n### Label Position Horizontal\n\nSet the `orientation` prop of the wrapping FormFieldGroup to designate the position of the group\nlabel relative to the checkboxes. By default, the orientation will be set to `vertical`.\n```tsx\nimport React from 'react';\n\nimport {Checkbox} from '@workday/canvas-kit-react/checkbox';\nimport {FormFieldGroup} from '@workday/canvas-kit-react/form-field';\n\nexport const LabelPosition = () => {\n  const [checked, setChecked] = React.useState(false);\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setChecked(event.target.checked);\n  };\n\n  return (\n    <FormFieldGroup orientation=\"horizontalStart\">\n      <FormFieldGroup.Label>Confirm</FormFieldGroup.Label>\n      <FormFieldGroup.Field>\n        <FormFieldGroup.Input\n          as={Checkbox}\n          checked={checked}\n          label=\"I agree to the terms\"\n          onChange={handleChange}\n        />\n      </FormFieldGroup.Field>\n    </FormFieldGroup>\n  );\n};\n```\n\n### Required\n\nSet the `isRequired` prop of a wrapping FormFieldGroup to `true` to indicate that the field is\nrequired. Labels for required fields are suffixed by a red asterisk.\n\nA standalone checkbox does not need **`FormFieldGroup`**. This example wraps a single checkbox so\n`isRequired` can show the required asterisk on **`FormFieldGroup.Label`**. Use that wrapper only\nwhen the spec includes a required state (or a group name, hint, error, or caution). See\n[Accessibility](#accessibility).\n```tsx\nimport React from 'react';\n\nimport {Checkbox} from '@workday/canvas-kit-react/checkbox';\nimport {FormFieldGroup} from '@workday/canvas-kit-react/form-field';\n\nexport const Required = () => {\n  const [checked, setChecked] = React.useState(false);\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setChecked(event.target.checked);\n  };\n\n  return (\n    <FormFieldGroup isRequired={true}>\n      <FormFieldGroup.Label>Confirm</FormFieldGroup.Label>\n      <FormFieldGroup.Field>\n        <FormFieldGroup.Input\n          as={Checkbox}\n          checked={checked}\n          label=\"I agree to the terms\"\n          onChange={handleChange}\n        />\n      </FormFieldGroup.Field>\n    </FormFieldGroup>\n  );\n};\n```\n\n### Error States\n\nSet the `error` prop of the wrapping FormFieldGroup to `\"caution\"` or `\"error\"` to set the Checkbox\nto the Alert or Error state, respectively. Render `FormFieldGroup.Hint` with the message text so\nassistive technology can associate the hint with the group. Keep the Checkbox `label` so each\ncontrol retains its own accessible name; `FormFieldGroup.Label` only provides the group name.\n\nThe `error` prop may be applied directly to the Checkbox with a value of `\"caution\"` or `\"error\"` if\nFormFieldGroup is not being used.\n\n#### Caution\n```tsx\nimport React from 'react';\n\nimport {Checkbox} from '@workday/canvas-kit-react/checkbox';\nimport {FormFieldGroup} from '@workday/canvas-kit-react/form-field';\n\nexport const Caution = () => {\n  const [checked, setChecked] = React.useState(false);\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setChecked(event.target.checked);\n  };\n\n  return (\n    <FormFieldGroup error=\"caution\">\n      <FormFieldGroup.Label>Confirm</FormFieldGroup.Label>\n      <FormFieldGroup.Field>\n        <FormFieldGroup.Input\n          as={Checkbox}\n          checked={checked}\n          error={Checkbox.ErrorType.Caution}\n          label=\"I agree to the terms\"\n          onChange={handleChange}\n        />\n        <FormFieldGroup.Hint>You must agree to the terms before proceeding</FormFieldGroup.Hint>\n      </FormFieldGroup.Field>\n    </FormFieldGroup>\n  );\n};\n```\n\n#### Error\n```tsx\nimport React from 'react';\n\nimport {Checkbox} from '@workday/canvas-kit-react/checkbox';\nimport {FormFieldGroup} from '@workday/canvas-kit-react/form-field';\n\nexport const Error = () => {\n  const [checked, setChecked] = React.useState(false);\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setChecked(event.target.checked);\n  };\n\n  return (\n    <FormFieldGroup error=\"error\">\n      <FormFieldGroup.Label>Confirm</FormFieldGroup.Label>\n      <FormFieldGroup.Field>\n        <FormFieldGroup.Input\n          as={Checkbox}\n          checked={checked}\n          error={Checkbox.ErrorType.Error}\n          label=\"I agree to the terms\"\n          onChange={handleChange}\n        />\n        <FormFieldGroup.Hint>You must agree to the terms before proceeding</FormFieldGroup.Hint>\n      </FormFieldGroup.Field>\n    </FormFieldGroup>\n  );\n};\n```\n\n### Custom Styles\n\nCheckbox supports custom styling via the `cs` prop. For more information, check our\n[\"How To Customize Styles\"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).\n\n## Accessibility\n\nThe primary accessibility goal is a visible, programmatically determinable name and a checked,\nunchecked, or mixed state that assistive technology can expose. Use **Checkbox** when the user can\nselect zero, one, or many independent options. For mutually exclusive choices, use\n[**Radio**](https://workday.github.io/canvas-kit/?path=/docs/preview-inputs-radio--docs) instead.\nWhen checkboxes answer the same question, or need hint, error, caution, or required association, see\n[FormField's accessibility documentation](/components/inputs/form-field/#accessibility).\n\n### Minimum Accessible Structure\n\nThe following matches the [Basic Example](#basic-example): a **`Checkbox`** with a non-empty\n**`label`**. **`FormFieldGroup`** is not required for a single standalone checkbox with no hint,\nerror, caution, or required state.\n\n```tsx\n\n<Checkbox label=\"I agree to the terms\" />;\n```\n\n### Built-in Behaviors\n\nCanvas Kit applies these automatically on **`Checkbox`**. When checkboxes that answer the same\nquestion are composed with **`FormFieldGroup`** subcomponents, that grouping wiring is also applied\nautomatically. **Do not duplicate them** in consuming code.\n\n**ARIA and DOM** (_applied by Checkbox_):\n\n- **`Checkbox`**: Renders a native `<input type=\"checkbox\">`. Canvas Kit assigns an `id` with\n  `useUniqueId` unless you pass **`id`**.\n- **`label`**: Renders a visible `<label htmlFor={id}>` so the control has an accessible name and\n  clicking the text activates the input.\n- **`indeterminate`**: Sets `aria-checked=\"mixed\"` and the input's native `indeterminate` property.\n  Otherwise `aria-checked` follows the **`checked`** prop.\n- **`disabled`**: Maps to the native `disabled` attribute.\n- **`ref`**: Forwards to the underlying `<input type=\"checkbox\">`.\n\n**Keyboard** (_native checkbox behavior_):\n\n**`Checkbox`** uses native `<input type=\"checkbox\">` keyboard behavior (tab order, Space to toggle,\nand label activation). Do not intercept <kbd>Space</kbd> or otherwise prevent the native toggle.\n\n**Screen reader expectations** (_when built-in behaviors are used as intended_):\n\n- On focus, assistive technology announces the Checkbox **`label`** and checked, unchecked, or mixed\n  state\n- Disabled checkboxes are announced as unavailable\n\nFor group, hint, error, and required association, see\n[FormField's Built-in Behaviors](/components/inputs/form-field/#built-in-behaviors).\n\n### Accessibility Requirements\n\nRequired in application code for an accessible Checkbox. Rows marked _(conditional)_ apply only when\nthe situation matches\u2014otherwise omit.\n\n**If no design spec is provided:** use a visible, non-empty Checkbox **`label`**. Omit\n**`FormFieldGroup`** unless the spec includes a group name, more than one independent option for the\nsame question, or hint, error, caution, or required state. Omit **`FormFieldGroup.Hint`**,\n**`isRequired`**, **`error`**, **`indeterminate`**, **`disabled`**, a custom **`id`**, and a\n**`ref`** unless the spec requires them.\n\n**Choose a composition:**\n\n- Standalone **`Checkbox`** with **`label`** \u2014 one control with no hint, error, caution, or required\n  state\n- **`FormFieldGroup`** \u2014 one question with two or more independent options, or any checkbox that\n  needs a group name, hint, error, caution, or required state\n- Nested `<ul>` / `<li>` \u2014 parent checkbox with nested children and **`indeterminate`**. Do not use\n  **`FormFieldGroup`** for that hierarchy. Checkboxes that answer different questions stay in\n  separate compositions.\n\n**Programmatic focus** _(conditional \u2014 omit by default)_:\n\nAttach a `ref` only when the product must move focus to the checkbox after an action (for example,\n**Submit** in [Ref Forwarding](#ref-forwarding)). Do not attach a `ref` or call `focus()` unless the\ndesign or developer asks for it.\n\n| Requirement                             | How to satisfy                                                                                                                                                                                                                                                                                                                                                                                                                       |\n| --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| Accessible name                         | Non-empty **`label`** on every **`Checkbox`**. **`FormFieldGroup.Label`** names the group only (`div` with an `id`); it is not a `<label>` and does not replace **`label`**.                                                                                                                                                                                                                                                         |\n| Group wiring _(conditional)_            | When the spec is one question with two or more independent options, or includes a group name, hint, error, caution, or required state: **`FormFieldGroup`** + **`FormFieldGroup.Label`** + **`FormFieldGroup.Input as={Checkbox}`**. Put hint, error, caution, and required on the group \u2014 see [FormField accessibility](/components/inputs/form-field/#accessibility). See [Required](#required) and [Error States](#error-states). |\n| Visual error or caution _(conditional)_ | When **`FormFieldGroup`** has `error=\"error\"` or `error=\"caution\"`, also set **`error`** on **`Checkbox`** to the same state so the visual ring appears. See [Caution](#caution) and [Error](#error).                                                                                                                                                                                                                                |\n| Indeterminate parent _(conditional)_    | When a parent checkbox's value depends on nested children and some (but not all) children are checked: set **`indeterminate`** on the parent **`Checkbox`**; keep a non-empty **`label`** on the parent and on each child; nest the children in a `<ul>` inside the parent's `<li>`. See [Indeterminate](#indeterminate).                                                                                                            |\n| Disabled _(conditional)_                | `disabled` on **`Checkbox`** when the spec marks the option unavailable. See [Disabled](#disabled).                                                                                                                                                                                                                                                                                                                                  |\n| Programmatic focus _(conditional)_      | `ref` on **`Checkbox`** (or **`FormFieldGroup.Input`**) and move focus when the product requires it \u2014 omit by default (see **Programmatic focus** above and [Ref Forwarding](#ref-forwarding)).                                                                                                                                                                                                                                      |\n\n**Summary for code generation:**\n\n- **REQUIRED:** non-empty **`label`**\n- **CONDITIONAL:** **`FormFieldGroup`** for one question with two or more independent options, or\n  for hint, error, caution, or required; **`error`** on **`Checkbox`** when the group is in caution\n  or error; nested list + **`indeterminate`** for a parent/child tree; disabled; programmatic focus\n  via `ref`. See [FormField accessibility](/components/inputs/form-field/#accessibility) for group\n  hint, error, caution, and required.\n\n### Anti-Patterns\n\nDo **not** generate code that does the following (see **Accessibility Requirements** above for what\nto supply instead):\n\n- Manually set `aria-checked` or `htmlFor` on **`Checkbox`**, or pass an **`id`** when the spec does\n  not require a known id \u2014 Canvas Kit wires `aria-checked` and `htmlFor`, and assigns an `id` with\n  `useUniqueId` unless you pass one (see **If no design spec is provided**)\n- Ignore **Choose a composition** \u2014 do not wrap a standalone checkbox with no group name, hint,\n  error, caution, or required state in **`FormFieldGroup`**; do not put different questions in one\n  group; do not use **`FormFieldGroup`** for a parent/child indeterminate tree\n- Wrap **`Checkbox`** with **`FormField.Input`** \u2014 **`Checkbox`** already renders its own `<label>`.\n  When a group is required, use **`FormFieldGroup.Input as={Checkbox}`** (see **Group wiring**)\n- Omit **`label`** because **`FormFieldGroup.Label`** is present \u2014 the group label does not name the\n  individual control\n- Set `aria-checked=\"mixed\"` without **`indeterminate`**\n- Use **`aria-disabled`** instead of **`disabled`** \u2014 **`Checkbox`** maps unavailability to the\n  native **`disabled`** prop\n- Use **`disabled`** when the spec says users must still focus the control to hear why it is\n  unavailable. Only in that case keep the checkbox enabled and put the explanation in\n  **`FormFieldGroup.Hint`** or on an adjacent focusable control\n- Use **Checkbox** for mutually exclusive choices \u2014 use\n  [**Radio**](https://workday.github.io/canvas-kit/?path=/docs/preview-inputs-radio--docs) instead\n\n## Component API\n\n## Specifications\n\n",
+      accessibilityProse: '## Accessibility\n\nThe primary accessibility goal is a visible, programmatically determinable name and a checked,\nunchecked, or mixed state that assistive technology can expose. Use **Checkbox** when the user can\nselect zero, one, or many independent options. For mutually exclusive choices, use\n[**Radio**](https://workday.github.io/canvas-kit/?path=/docs/preview-inputs-radio--docs) instead.\nWhen checkboxes answer the same question, or need hint, error, caution, or required association, see\n[FormField\'s accessibility documentation](/components/inputs/form-field/#accessibility).\n\n### Minimum Accessible Structure\n\nThe following matches the [Basic Example](#basic-example): a **`Checkbox`** with a non-empty\n**`label`**. **`FormFieldGroup`** is not required for a single standalone checkbox with no hint,\nerror, caution, or required state.\n\n```tsx\n\n<Checkbox label="I agree to the terms" />;\n```\n\n### Built-in Behaviors\n\nCanvas Kit applies these automatically on **`Checkbox`**. When checkboxes that answer the same\nquestion are composed with **`FormFieldGroup`** subcomponents, that grouping wiring is also applied\nautomatically. **Do not duplicate them** in consuming code.\n\n**ARIA and DOM** (_applied by Checkbox_):\n\n- **`Checkbox`**: Renders a native `<input type="checkbox">`. Canvas Kit assigns an `id` with\n  `useUniqueId` unless you pass **`id`**.\n- **`label`**: Renders a visible `<label htmlFor={id}>` so the control has an accessible name and\n  clicking the text activates the input.\n- **`indeterminate`**: Sets `aria-checked="mixed"` and the input\'s native `indeterminate` property.\n  Otherwise `aria-checked` follows the **`checked`** prop.\n- **`disabled`**: Maps to the native `disabled` attribute.\n- **`ref`**: Forwards to the underlying `<input type="checkbox">`.\n\n**Keyboard** (_native checkbox behavior_):\n\n**`Checkbox`** uses native `<input type="checkbox">` keyboard behavior (tab order, Space to toggle,\nand label activation). Do not intercept <kbd>Space</kbd> or otherwise prevent the native toggle.\n\n**Screen reader expectations** (_when built-in behaviors are used as intended_):\n\n- On focus, assistive technology announces the Checkbox **`label`** and checked, unchecked, or mixed\n  state\n- Disabled checkboxes are announced as unavailable\n\nFor group, hint, error, and required association, see\n[FormField\'s Built-in Behaviors](/components/inputs/form-field/#built-in-behaviors).\n\n### Accessibility Requirements\n\nRequired in application code for an accessible Checkbox. Rows marked _(conditional)_ apply only when\nthe situation matches\u2014otherwise omit.\n\n**If no design spec is provided:** use a visible, non-empty Checkbox **`label`**. Omit\n**`FormFieldGroup`** unless the spec includes a group name, more than one independent option for the\nsame question, or hint, error, caution, or required state. Omit **`FormFieldGroup.Hint`**,\n**`isRequired`**, **`error`**, **`indeterminate`**, **`disabled`**, a custom **`id`**, and a\n**`ref`** unless the spec requires them.\n\n**Choose a composition:**\n\n- Standalone **`Checkbox`** with **`label`** \u2014 one control with no hint, error, caution, or required\n  state\n- **`FormFieldGroup`** \u2014 one question with two or more independent options, or any checkbox that\n  needs a group name, hint, error, caution, or required state\n- Nested `<ul>` / `<li>` \u2014 parent checkbox with nested children and **`indeterminate`**. Do not use\n  **`FormFieldGroup`** for that hierarchy. Checkboxes that answer different questions stay in\n  separate compositions.\n\n**Programmatic focus** _(conditional \u2014 omit by default)_:\n\nAttach a `ref` only when the product must move focus to the checkbox after an action (for example,\n**Submit** in [Ref Forwarding](#ref-forwarding)). Do not attach a `ref` or call `focus()` unless the\ndesign or developer asks for it.\n\n| Requirement                             | How to satisfy                                                                                                                                                                                                                                                                                                                                                                                                                       |\n| --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| Accessible name                         | Non-empty **`label`** on every **`Checkbox`**. **`FormFieldGroup.Label`** names the group only (`div` with an `id`); it is not a `<label>` and does not replace **`label`**.                                                                                                                                                                                                                                                         |\n| Group wiring _(conditional)_            | When the spec is one question with two or more independent options, or includes a group name, hint, error, caution, or required state: **`FormFieldGroup`** + **`FormFieldGroup.Label`** + **`FormFieldGroup.Input as={Checkbox}`**. Put hint, error, caution, and required on the group \u2014 see [FormField accessibility](/components/inputs/form-field/#accessibility). See [Required](#required) and [Error States](#error-states). |\n| Visual error or caution _(conditional)_ | When **`FormFieldGroup`** has `error="error"` or `error="caution"`, also set **`error`** on **`Checkbox`** to the same state so the visual ring appears. See [Caution](#caution) and [Error](#error).                                                                                                                                                                                                                                |\n| Indeterminate parent _(conditional)_    | When a parent checkbox\'s value depends on nested children and some (but not all) children are checked: set **`indeterminate`** on the parent **`Checkbox`**; keep a non-empty **`label`** on the parent and on each child; nest the children in a `<ul>` inside the parent\'s `<li>`. See [Indeterminate](#indeterminate).                                                                                                            |\n| Disabled _(conditional)_                | `disabled` on **`Checkbox`** when the spec marks the option unavailable. See [Disabled](#disabled).                                                                                                                                                                                                                                                                                                                                  |\n| Programmatic focus _(conditional)_      | `ref` on **`Checkbox`** (or **`FormFieldGroup.Input`**) and move focus when the product requires it \u2014 omit by default (see **Programmatic focus** above and [Ref Forwarding](#ref-forwarding)).                                                                                                                                                                                                                                      |\n\n**Summary for code generation:**\n\n- **REQUIRED:** non-empty **`label`**\n- **CONDITIONAL:** **`FormFieldGroup`** for one question with two or more independent options, or\n  for hint, error, caution, or required; **`error`** on **`Checkbox`** when the group is in caution\n  or error; nested list + **`indeterminate`** for a parent/child tree; disabled; programmatic focus\n  via `ref`. See [FormField accessibility](/components/inputs/form-field/#accessibility) for group\n  hint, error, caution, and required.\n\n### Anti-Patterns\n\nDo **not** generate code that does the following (see **Accessibility Requirements** above for what\nto supply instead):\n\n- Manually set `aria-checked` or `htmlFor` on **`Checkbox`**, or pass an **`id`** when the spec does\n  not require a known id \u2014 Canvas Kit wires `aria-checked` and `htmlFor`, and assigns an `id` with\n  `useUniqueId` unless you pass one (see **If no design spec is provided**)\n- Ignore **Choose a composition** \u2014 do not wrap a standalone checkbox with no group name, hint,\n  error, caution, or required state in **`FormFieldGroup`**; do not put different questions in one\n  group; do not use **`FormFieldGroup`** for a parent/child indeterminate tree\n- Wrap **`Checkbox`** with **`FormField.Input`** \u2014 **`Checkbox`** already renders its own `<label>`.\n  When a group is required, use **`FormFieldGroup.Input as={Checkbox}`** (see **Group wiring**)\n- Omit **`label`** because **`FormFieldGroup.Label`** is present \u2014 the group label does not name the\n  individual control\n- Set `aria-checked="mixed"` without **`indeterminate`**\n- Use **`aria-disabled`** instead of **`disabled`** \u2014 **`Checkbox`** maps unavailability to the\n  native **`disabled`** prop\n- Use **`disabled`** when the spec says users must still focus the control to hear why it is\n  unavailable. Only in that case keep the checkbox enabled and put the explanation in\n  **`FormFieldGroup.Hint`** or on an adjacent focusable control\n- Use **Checkbox** for mutually exclusive choices \u2014 use\n  [**Radio**](https://workday.github.io/canvas-kit/?path=/docs/preview-inputs-radio--docs) instead'
     },
     card: {
       title: "Components/Containers/Card",