@workday/canvas-kit-docs 11.1.0-821-next.0 → 11.1.0-864-next.0

package/dist/es6/lib/docs.js

@@ -4692,7 +4692,27 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
                       "required": false,
                       "type": {
                         "kind": "function",
-                        "parameters": [],
+                        "parameters": [
+                          {
+                            "kind": "parameter",
+                            "name": "element",
+                            "type": {
+                              "kind": "symbol",
+                              "name": "HTMLElement",
+                              "value": "HTMLElement"
+                            },
+                            "required": false,
+                            "rest": false,
+                            "description": "",
+                            "declarations": [
+                              {
+                                "name": "element",
+                                "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/popup-stack/lib/PopupStack.ts"
+                              }
+                            ],
+                            "tags": {}
+                          }
+                        ],
                         "members": [],
                         "returnType": {
                           "kind": "symbol",
@@ -4700,7 +4720,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
                           "value": "HTMLElement"
                         }
                       },
-                      "description": "",
+                      "description": "Returns the container of a stack given an optional element.",
                       "declarations": [
                         {
                           "name": "container",
@@ -5658,310 +5678,13 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
     }
   },
   {
-    "name": "FormFieldProps",
-    "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/form-field/lib/FormField.tsx",
-    "description": "",
-    "declarations": [
-      {
-        "name": "FormFieldProps",
-        "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/form-field/lib/FormField.tsx"
-      }
-    ],
-    "tags": {},
-    "type": {
-      "kind": "alias",
-      "name": "FormField"
-    }
-  },
-  {
-    "name": "FormField",
-    "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/form-field/lib/FormField.tsx",
-    "description": "Use `FormField` to wrap input components to make them accessible. You can customize the field\nby passing in `TextInput`, `Select`, `RadioGroup` and other form elements to `FormField.Input` through the `as` prop.\n\n```tsx\n<FormField>\n   <FormField.Label>First Name</FormField.Label>\n   <FormField.Input as={TextInput} value={value} onChange={(e) => console.log(e)} />\n </FormField>\n```",
-    "declarations": [
-      {
-        "name": "FormField",
-        "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/form-field/lib/FormField.tsx"
-      }
-    ],
-    "tags": {
-      "stencil": "formFieldStencil"
-    },
-    "type": {
-      "kind": "enhancedComponent",
-      "componentType": "container",
-      "displayName": "FormField",
-      "props": [
-        {
-          "kind": "property",
-          "name": "orientation",
-          "required": false,
-          "type": {
-            "kind": "union",
-            "value": [
-              {
-                "kind": "string",
-                "value": "vertical"
-              },
-              {
-                "kind": "string",
-                "value": "horizontal"
-              }
-            ]
-          },
-          "description": "The direction the child elements should stack",
-          "declarations": [
-            {
-              "name": "orientation",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/form-field/lib/FormField.tsx"
-            }
-          ],
-          "tags": {
-            "default": "vertical"
-          },
-          "defaultValue": {
-            "kind": "symbol",
-            "name": "vertical",
-            "value": "vertical"
-          }
-        },
-        {
-          "kind": "property",
-          "name": "children",
-          "required": true,
-          "type": {
-            "kind": "external",
-            "name": "ReactNode",
-            "url": "https://reactjs.org/docs/rendering-elements.html"
-          },
-          "description": "",
-          "declarations": [
-            {
-              "name": "children",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/form-field/lib/FormField.tsx"
-            }
-          ],
-          "tags": {}
-        },
-        {
-          "kind": "property",
-          "name": "cs",
-          "required": false,
-          "type": {
-            "kind": "symbol",
-            "name": "CSToPropsInput",
-            "value": "CSToPropsInput"
-          },
-          "description": "The `cs` prop takes in a single value or an array of values. You can pass the CSS class name\nreturned by {@link createStyles}, or the result of {@link createVars} and\n{@link createModifiers}. If you're extending a component already using `cs`, you can merge that\nprop in as well. Any style that is passed to the `cs` prop will override style props. If you\nwish to have styles that are overridden by the `css` prop, or styles added via the `styled`\nAPI, use {@link handleCsProp} wherever `elemProps` is used. If your component needs to also\nhandle style props, use {@link mergeStyles} instead.\n\n\n```tsx\nimport {handleCsProp} from '@workday/canvas-kit-styling';\nimport {mergeStyles} from '@workday/canvas-kit-react/layout';\n\n// ...\n\n// `handleCsProp` handles compat mode with Emotion's runtime APIs. `mergeStyles` has the same\n// function signature, but adds support for style props.\n\nreturn (\n <Element\n   {...handleCsProp(elemProps, [\n     myStyles,\n     myModifiers({ size: 'medium' }),\n     myVars({ backgroundColor: 'red' })\n   ])}\n >\n   {children}\n </Element>\n)\n```",
-          "declarations": [
-            {
-              "name": "cs",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
-            }
-          ],
-          "tags": {}
-        },
-        {
-          "kind": "property",
-          "name": "grow",
-          "required": false,
-          "type": {
-            "kind": "primitive",
-            "value": "boolean"
-          },
-          "description": "True if the component should grow to its container's width. False otherwise.",
-          "declarations": [
-            {
-              "name": "grow",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/types.ts"
-            }
-          ],
-          "tags": {}
-        },
-        {
-          "kind": "property",
-          "name": "as",
-          "description": "Optional override of the default element used by the component. Any valid tag or Component. If you provided a Component, this component should forward the ref using `React.forwardRef`and spread extra props to a root element.\n\n**Note:** Not all elements make sense and some elements may cause accessibility issues. Change this value with care.",
-          "tags": {},
-          "declarations": [],
-          "type": {
-            "kind": "external",
-            "name": "React.ElementType",
-            "url": "https://developer.mozilla.org/en-US/docs/Web/API/element"
-          },
-          "defaultValue": {
-            "kind": "external",
-            "name": "div",
-            "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div"
-          }
-        },
-        {
-          "kind": "property",
-          "name": "ref",
-          "description": "Optional ref. If the component represents an element, this ref will be a reference to the real DOM element of the component. If `as` is set to an element, it will be that element. If `as` is a component, the reference will be to that component (or element if the component uses `React.forwardRef`).",
-          "tags": {},
-          "declarations": [],
-          "type": {
-            "kind": "external",
-            "name": "React.Ref",
-            "url": "https://reactjs.org/docs/refs-and-the-dom.html",
-            "typeParameters": [
-              {
-                "kind": "typeParameter",
-                "name": "R",
-                "required": true,
-                "defaultValue": {
-                  "kind": "external",
-                  "name": "div",
-                  "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div"
-                }
-              }
-            ]
-          }
-        },
-        {
-          "kind": "property",
-          "name": "model",
-          "description": "Optional model to pass to the component. This will override the default model created for the component. This can be useful if you want to access to the state and events of the model, or if you have nested components of the same type and you need to override the model provided by React Context.",
-          "tags": {},
-          "declarations": [],
-          "type": {
-            "kind": "symbol",
-            "name": "FormFieldModel"
-          }
-        },
-        {
-          "kind": "property",
-          "name": "elemPropsHook",
-          "description": "Optional hook that receives the model and all props to be applied to the element. If you use this, it is your responsibility to return props, merging as appropriate. For example, returning an empty object will disable all elemProps hooks associated with this component. This allows finer control over a component without creating a new one.",
-          "tags": {},
-          "declarations": [],
-          "type": {
-            "kind": "function",
-            "parameters": [
-              {
-                "kind": "parameter",
-                "description": "",
-                "tags": {},
-                "declarations": [],
-                "name": "model",
-                "type": {
-                  "kind": "symbol",
-                  "name": "FormFieldModel"
-                },
-                "required": true
-              },
-              {
-                "kind": "parameter",
-                "description": "",
-                "tags": {},
-                "declarations": [],
-                "name": "elemProps",
-                "type": {
-                  "kind": "generic",
-                  "name": "TProps"
-                }
-              }
-            ],
-            "returnType": {
-              "kind": "external",
-              "name": "HTML Attributes",
-              "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes"
-            }
-          }
-        }
-      ],
-      "baseElement": {
-        "kind": "external",
-        "name": "div",
-        "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div"
-      },
-      "model": "FormFieldModel",
-      "styleComponent": {
-        "kind": "symbol",
-        "name": "Flex"
-      },
-      "subComponents": [
-        {
-          "name": "Input",
-          "symbol": "FormFieldInput",
-          "description": "`FormField.Input` will render any `inputs` passed to it via the `as` prop, including `TextInput`, `Select`, `Switch`, `TextArea`, `RadioGroup` or any custom input.\n`FromField.Input` will be associated with `FormField.Label` and `FormField.Hint` by a generated `id`. You can customize this `id` by passing `id` to `FormField`.\n\n**Note: If you pass in a custom input that is *not* as Canvas Kit input, you will have to handle the `error` prop, validation and styling. For a custom approach, reference our Custom storybook example.**\n\n```tsx\n <FormField id='my-unique-id'>\n   <FormField.Label>My Label Text</FormField.Label>\n   <FormField.Input as={TextInput} onChange={(e) => console.log(e)} />\n <FormField>\n```",
-          "declarations": [
-            {
-              "name": "Input",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/form-field/lib/FormField.tsx"
-            },
-            {
-              "name": "FormFieldInput",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/form-field/lib/FormFieldInput.tsx"
-            }
-          ],
-          "tags": {}
-        },
-        {
-          "name": "Label",
-          "symbol": "FormFieldLabel",
-          "description": "`FormField.Label` will render a `label` element that has a matching `id` to the `FormField.Input`.\n\n```tsx\n<FormField>\n   <FormField.Label>First Name</FormField.Label>\n   <FormField.Input as={TextInput} value={value} onChange={(e) => console.log(e)} />\n </FormField>\n```",
-          "declarations": [
-            {
-              "name": "Label",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/form-field/lib/FormField.tsx"
-            },
-            {
-              "name": "FormFieldLabel",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/form-field/lib/FormFieldLabel.tsx"
-            }
-          ],
-          "tags": {
-            "stencil": "formFieldLabelStencil"
-          }
-        },
-        {
-          "name": "Hint",
-          "symbol": "FormFieldHint",
-          "description": "`FormField.Hint` will render any additional information you want to provide to the `FormField.Input`. If you\nset the `orientation` prop to `horizontal` you should use `FormField.Container` to properly align the hint with your `FormField.Input`.\n\n```tsx\n<FormField>\n   <FormField.Label>First Name</FormField.Label>\n   <FormField.Input as={TextInput} value={value} onChange={(e) => console.log(e)} />\n   <FormField.Hint>This is your hint text</FormField.Hint>\n </FormField>\n```",
-          "declarations": [
-            {
-              "name": "Hint",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/form-field/lib/FormField.tsx"
-            },
-            {
-              "name": "FormFieldHint",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/form-field/lib/FormFieldHint.tsx"
-            }
-          ],
-          "tags": {
-            "stencil": "formFieldHintStencil"
-          }
-        },
-        {
-          "name": "Container",
-          "symbol": "FormFieldContainer",
-          "description": "`FormField.Container` allows you to properly center `FormField.Label` when the `orientation` is set to `horizontal` and there is hint text..\n\n```tsx\n<FormField orientation=\"horizontal\">\n   <FormField.Label>First Name</FormField.Label>\n   <FormField.Container>\n     <FormField.Input as={TextInput} value={value} onChange={(e) => console.log(e)} />\n     <FormField.Hint>This is your hint text</FormField.Hint>\n   </FormField.Container>\n </FormField>\n```",
-          "declarations": [
-            {
-              "name": "Container",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/form-field/lib/FormField.tsx"
-            },
-            {
-              "name": "FormFieldContainer",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/form-field/lib/FormFieldContainer.tsx"
-            }
-          ],
-          "tags": {
-            "stencil": "formFieldContainerStencil"
-          }
-        }
-      ]
-    }
-  },
-  {
-    "name": "formFieldContainerStencil",
-    "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/form-field/lib/FormFieldContainer.tsx",
+    "name": "dividerStencil",
+    "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/divider/lib/Divider.tsx",
     "description": "",
     "declarations": [
       {
-        "name": "formFieldContainerStencil",
-        "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/form-field/lib/FormFieldContainer.tsx"
+        "name": "dividerStencil",
+        "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/divider/lib/Divider.tsx"
       }
     ],
     "tags": {},
@@ -6518,21 +6241,63 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
     }
   },
   {
-    "name": "FormFieldContainer",
-    "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/form-field/lib/FormFieldContainer.tsx",
+    "name": "DividerProps",
+    "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/divider/lib/Divider.tsx",
     "description": "",
     "declarations": [
       {
-        "name": "FormFieldContainer",
-        "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/form-field/lib/FormFieldContainer.tsx"
+        "name": "DividerProps",
+        "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/divider/lib/Divider.tsx"
       }
     ],
     "tags": {},
+    "type": {
+      "kind": "alias",
+      "name": "Divider"
+    }
+  },
+  {
+    "name": "Divider",
+    "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/divider/lib/Divider.tsx",
+    "description": "# Divider\nA divider to segment and visually organize content. By default, it renders a semantic `[<hr>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr)` element.\n\n[View Docs](https://workday.github.io/canvas-kit/?path=/docs/preview-divider-react)\n\nThe `space` prop will equally apply top and bottom margin styles.\nIn the example below, `x2` (0.5rem), adds `0.25rem` margin to the top and `0.25rem` to the bottom",
+    "declarations": [
+      {
+        "name": "Divider",
+        "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/divider/lib/Divider.tsx"
+      }
+    ],
+    "tags": {
+      "example": "```tsx\nimport { Divider } from '@workday/canvas-kit-preview-react/divider';\nimport {system} from '@workday/canvas-tokens-web';\n\n<Divider space={system.space.x2} />\n\n```"
+    },
     "type": {
       "kind": "enhancedComponent",
-      "componentType": "subcomponent",
-      "displayName": "FormField.Container",
+      "componentType": "regular",
+      "displayName": "Divider",
       "props": [
+        {
+          "kind": "property",
+          "name": "space",
+          "required": false,
+          "type": {
+            "kind": "primitive",
+            "value": "string"
+          },
+          "description": "Applies top and bottom margin evenly. It divides the provided value by two and applies half to each end.\nE.g. `space=\"2rem\"` would apply `1rem` margin to the top, and `1rem` margin to the bottom.",
+          "declarations": [
+            {
+              "name": "space",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/divider/lib/Divider.tsx"
+            }
+          ],
+          "tags": {
+            "default": "`system.space.x4` (1rem)"
+          },
+          "defaultValue": {
+            "kind": "symbol",
+            "name": "`system.space.x4` (1rem)",
+            "value": "`system.space.x4` (1rem)"
+          }
+        },
         {
           "kind": "property",
           "name": "cs",
@@ -6563,6 +6328,175 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "url": "https://reactjs.org/docs/rendering-elements.html"
           }
         },
+        {
+          "kind": "property",
+          "name": "as",
+          "description": "Optional override of the default element used by the component. Any valid tag or Component. If you provided a Component, this component should forward the ref using `React.forwardRef`and spread extra props to a root element.\n\n**Note:** Not all elements make sense and some elements may cause accessibility issues. Change this value with care.",
+          "tags": {},
+          "declarations": [],
+          "type": {
+            "kind": "external",
+            "name": "React.ElementType",
+            "url": "https://developer.mozilla.org/en-US/docs/Web/API/element"
+          },
+          "defaultValue": {
+            "kind": "external",
+            "name": "hr",
+            "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr"
+          }
+        },
+        {
+          "kind": "property",
+          "name": "ref",
+          "description": "Optional ref. If the component represents an element, this ref will be a reference to the real DOM element of the component. If `as` is set to an element, it will be that element. If `as` is a component, the reference will be to that component (or element if the component uses `React.forwardRef`).",
+          "tags": {},
+          "declarations": [],
+          "type": {
+            "kind": "external",
+            "name": "React.Ref",
+            "url": "https://reactjs.org/docs/refs-and-the-dom.html",
+            "typeParameters": [
+              {
+                "kind": "typeParameter",
+                "name": "R",
+                "required": true,
+                "defaultValue": {
+                  "kind": "external",
+                  "name": "hr",
+                  "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr"
+                }
+              }
+            ]
+          }
+        }
+      ],
+      "baseElement": {
+        "kind": "external",
+        "name": "hr",
+        "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr"
+      }
+    }
+  },
+  {
+    "name": "FormFieldProps",
+    "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/form-field/lib/FormField.tsx",
+    "description": "",
+    "declarations": [
+      {
+        "name": "FormFieldProps",
+        "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/form-field/lib/FormField.tsx"
+      }
+    ],
+    "tags": {},
+    "type": {
+      "kind": "alias",
+      "name": "FormField"
+    }
+  },
+  {
+    "name": "FormField",
+    "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/form-field/lib/FormField.tsx",
+    "description": "Use `FormField` to wrap input components to make them accessible. You can customize the field\nby passing in `TextInput`, `Select`, `RadioGroup` and other form elements to `FormField.Input` through the `as` prop.\n\n```tsx\n<FormField>\n   <FormField.Label>First Name</FormField.Label>\n   <FormField.Input as={TextInput} value={value} onChange={(e) => console.log(e)} />\n </FormField>\n```",
+    "declarations": [
+      {
+        "name": "FormField",
+        "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/form-field/lib/FormField.tsx"
+      }
+    ],
+    "tags": {
+      "stencil": "formFieldStencil"
+    },
+    "type": {
+      "kind": "enhancedComponent",
+      "componentType": "container",
+      "displayName": "FormField",
+      "props": [
+        {
+          "kind": "property",
+          "name": "orientation",
+          "required": false,
+          "type": {
+            "kind": "union",
+            "value": [
+              {
+                "kind": "string",
+                "value": "vertical"
+              },
+              {
+                "kind": "string",
+                "value": "horizontal"
+              }
+            ]
+          },
+          "description": "The direction the child elements should stack",
+          "declarations": [
+            {
+              "name": "orientation",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/form-field/lib/FormField.tsx"
+            }
+          ],
+          "tags": {
+            "default": "vertical"
+          },
+          "defaultValue": {
+            "kind": "symbol",
+            "name": "vertical",
+            "value": "vertical"
+          }
+        },
+        {
+          "kind": "property",
+          "name": "children",
+          "required": true,
+          "type": {
+            "kind": "external",
+            "name": "ReactNode",
+            "url": "https://reactjs.org/docs/rendering-elements.html"
+          },
+          "description": "",
+          "declarations": [
+            {
+              "name": "children",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/form-field/lib/FormField.tsx"
+            }
+          ],
+          "tags": {}
+        },
+        {
+          "kind": "property",
+          "name": "cs",
+          "required": false,
+          "type": {
+            "kind": "symbol",
+            "name": "CSToPropsInput",
+            "value": "CSToPropsInput"
+          },
+          "description": "The `cs` prop takes in a single value or an array of values. You can pass the CSS class name\nreturned by {@link createStyles}, or the result of {@link createVars} and\n{@link createModifiers}. If you're extending a component already using `cs`, you can merge that\nprop in as well. Any style that is passed to the `cs` prop will override style props. If you\nwish to have styles that are overridden by the `css` prop, or styles added via the `styled`\nAPI, use {@link handleCsProp} wherever `elemProps` is used. If your component needs to also\nhandle style props, use {@link mergeStyles} instead.\n\n\n```tsx\nimport {handleCsProp} from '@workday/canvas-kit-styling';\nimport {mergeStyles} from '@workday/canvas-kit-react/layout';\n\n// ...\n\n// `handleCsProp` handles compat mode with Emotion's runtime APIs. `mergeStyles` has the same\n// function signature, but adds support for style props.\n\nreturn (\n <Element\n   {...handleCsProp(elemProps, [\n     myStyles,\n     myModifiers({ size: 'medium' }),\n     myVars({ backgroundColor: 'red' })\n   ])}\n >\n   {children}\n </Element>\n)\n```",
+          "declarations": [
+            {
+              "name": "cs",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
+            }
+          ],
+          "tags": {}
+        },
+        {
+          "kind": "property",
+          "name": "grow",
+          "required": false,
+          "type": {
+            "kind": "primitive",
+            "value": "boolean"
+          },
+          "description": "True if the component should grow to its container's width. False otherwise.",
+          "declarations": [
+            {
+              "name": "grow",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/types.ts"
+            }
+          ],
+          "tags": {}
+        },
         {
           "kind": "property",
           "name": "as",
@@ -6661,17 +6595,93 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
         "name": "div",
         "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div"
       },
-      "model": "FormFieldModel"
+      "model": "FormFieldModel",
+      "styleComponent": {
+        "kind": "symbol",
+        "name": "Flex"
+      },
+      "subComponents": [
+        {
+          "name": "Input",
+          "symbol": "FormFieldInput",
+          "description": "`FormField.Input` will render any `inputs` passed to it via the `as` prop, including `TextInput`, `Select`, `Switch`, `TextArea`, `RadioGroup` or any custom input.\n`FromField.Input` will be associated with `FormField.Label` and `FormField.Hint` by a generated `id`. You can customize this `id` by passing `id` to `FormField`.\n\n**Note: If you pass in a custom input that is *not* as Canvas Kit input, you will have to handle the `error` prop, validation and styling. For a custom approach, reference our Custom storybook example.**\n\n```tsx\n <FormField id='my-unique-id'>\n   <FormField.Label>My Label Text</FormField.Label>\n   <FormField.Input as={TextInput} onChange={(e) => console.log(e)} />\n <FormField>\n```",
+          "declarations": [
+            {
+              "name": "Input",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/form-field/lib/FormField.tsx"
+            },
+            {
+              "name": "FormFieldInput",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/form-field/lib/FormFieldInput.tsx"
+            }
+          ],
+          "tags": {}
+        },
+        {
+          "name": "Label",
+          "symbol": "FormFieldLabel",
+          "description": "`FormField.Label` will render a `label` element that has a matching `id` to the `FormField.Input`.\n\n```tsx\n<FormField>\n   <FormField.Label>First Name</FormField.Label>\n   <FormField.Input as={TextInput} value={value} onChange={(e) => console.log(e)} />\n </FormField>\n```",
+          "declarations": [
+            {
+              "name": "Label",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/form-field/lib/FormField.tsx"
+            },
+            {
+              "name": "FormFieldLabel",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/form-field/lib/FormFieldLabel.tsx"
+            }
+          ],
+          "tags": {
+            "stencil": "formFieldLabelStencil"
+          }
+        },
+        {
+          "name": "Hint",
+          "symbol": "FormFieldHint",
+          "description": "`FormField.Hint` will render any additional information you want to provide to the `FormField.Input`. If you\nset the `orientation` prop to `horizontal` you should use `FormField.Container` to properly align the hint with your `FormField.Input`.\n\n```tsx\n<FormField>\n   <FormField.Label>First Name</FormField.Label>\n   <FormField.Input as={TextInput} value={value} onChange={(e) => console.log(e)} />\n   <FormField.Hint>This is your hint text</FormField.Hint>\n </FormField>\n```",
+          "declarations": [
+            {
+              "name": "Hint",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/form-field/lib/FormField.tsx"
+            },
+            {
+              "name": "FormFieldHint",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/form-field/lib/FormFieldHint.tsx"
+            }
+          ],
+          "tags": {
+            "stencil": "formFieldHintStencil"
+          }
+        },
+        {
+          "name": "Container",
+          "symbol": "FormFieldContainer",
+          "description": "`FormField.Container` allows you to properly center `FormField.Label` when the `orientation` is set to `horizontal` and there is hint text..\n\n```tsx\n<FormField orientation=\"horizontal\">\n   <FormField.Label>First Name</FormField.Label>\n   <FormField.Container>\n     <FormField.Input as={TextInput} value={value} onChange={(e) => console.log(e)} />\n     <FormField.Hint>This is your hint text</FormField.Hint>\n   </FormField.Container>\n </FormField>\n```",
+          "declarations": [
+            {
+              "name": "Container",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/form-field/lib/FormField.tsx"
+            },
+            {
+              "name": "FormFieldContainer",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/form-field/lib/FormFieldContainer.tsx"
+            }
+          ],
+          "tags": {
+            "stencil": "formFieldContainerStencil"
+          }
+        }
+      ]
     }
   },
   {
-    "name": "formFieldHintStencil",
-    "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/form-field/lib/FormFieldHint.tsx",
+    "name": "formFieldContainerStencil",
+    "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/form-field/lib/FormFieldContainer.tsx",
     "description": "",
     "declarations": [
       {
-        "name": "formFieldHintStencil",
-        "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/form-field/lib/FormFieldHint.tsx"
+        "name": "formFieldContainerStencil",
+        "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/form-field/lib/FormFieldContainer.tsx"
       }
     ],
     "tags": {},
@@ -7228,275 +7238,20 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
     }
   },
   {
-    "name": "FormFieldHint",
-    "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/form-field/lib/FormFieldHint.tsx",
-    "description": "",
-    "declarations": [
-      {
-        "name": "FormFieldHint",
-        "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/form-field/lib/FormFieldHint.tsx"
-      }
-    ],
-    "tags": {},
-    "type": {
-      "kind": "enhancedComponent",
-      "componentType": "subcomponent",
-      "elemPropsHook": "useFormFieldHint",
-      "displayName": "FormField.Hint",
-      "props": [
-        {
-          "kind": "property",
-          "name": "typeLevel",
-          "required": false,
-          "type": {
-            "kind": "union",
-            "value": [
-              {
-                "kind": "string",
-                "value": "subtext.medium"
-              },
-              {
-                "kind": "string",
-                "value": "title.large"
-              },
-              {
-                "kind": "string",
-                "value": "title.medium"
-              },
-              {
-                "kind": "string",
-                "value": "title.small"
-              },
-              {
-                "kind": "string",
-                "value": "heading.large"
-              },
-              {
-                "kind": "string",
-                "value": "heading.medium"
-              },
-              {
-                "kind": "string",
-                "value": "heading.small"
-              },
-              {
-                "kind": "string",
-                "value": "body.large"
-              },
-              {
-                "kind": "string",
-                "value": "body.medium"
-              },
-              {
-                "kind": "string",
-                "value": "body.small"
-              },
-              {
-                "kind": "string",
-                "value": "subtext.large"
-              },
-              {
-                "kind": "string",
-                "value": "subtext.small"
-              }
-            ]
-          },
-          "description": "Type token as string with level and size separated by dot.\nThese values map to our [Canvas type levels](https://canvas.workday.com/tokens/type#type-styles).\n\n```tsx\n<Text typeLevel=\"body.small\">Small body text</Text>\n```",
-          "declarations": [
-            {
-              "name": "typeLevel",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/text/lib/Text.tsx"
-            }
-          ],
-          "tags": {}
-        },
-        {
-          "kind": "property",
-          "name": "variant",
-          "required": false,
-          "type": {
-            "kind": "union",
-            "value": [
-              {
-                "kind": "string",
-                "value": "error"
-              },
-              {
-                "kind": "string",
-                "value": "hint"
-              },
-              {
-                "kind": "string",
-                "value": "inverse"
-              }
-            ]
-          },
-          "description": "Type variant token names: `error`, `hint` or `inverse`.\n\n```tsx\n<Text variant=\"error\" typeLevel=\"subtext.large\">Error text</Text>\n```",
-          "declarations": [
-            {
-              "name": "variant",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/text/lib/Text.tsx"
-            }
-          ],
-          "tags": {}
-        },
-        {
-          "kind": "property",
-          "name": "cs",
-          "required": false,
-          "type": {
-            "kind": "symbol",
-            "name": "CSToPropsInput",
-            "value": "CSToPropsInput"
-          },
-          "description": "The `cs` prop takes in a single value or an array of values. You can pass the CSS class name\nreturned by {@link createStyles}, or the result of {@link createVars} and\n{@link createModifiers}. If you're extending a component already using `cs`, you can merge that\nprop in as well. Any style that is passed to the `cs` prop will override style props. If you\nwish to have styles that are overridden by the `css` prop, or styles added via the `styled`\nAPI, use {@link handleCsProp} wherever `elemProps` is used. If your component needs to also\nhandle style props, use {@link mergeStyles} instead.\n\n\n```tsx\nimport {handleCsProp} from '@workday/canvas-kit-styling';\nimport {mergeStyles} from '@workday/canvas-kit-react/layout';\n\n// ...\n\n// `handleCsProp` handles compat mode with Emotion's runtime APIs. `mergeStyles` has the same\n// function signature, but adds support for style props.\n\nreturn (\n <Element\n   {...handleCsProp(elemProps, [\n     myStyles,\n     myModifiers({ size: 'medium' }),\n     myVars({ backgroundColor: 'red' })\n   ])}\n >\n   {children}\n </Element>\n)\n```",
-          "declarations": [
-            {
-              "name": "cs",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
-            }
-          ],
-          "tags": {}
-        },
-        {
-          "kind": "property",
-          "name": "children",
-          "required": false,
-          "type": {
-            "kind": "external",
-            "name": "ReactNode",
-            "url": "https://reactjs.org/docs/rendering-elements.html"
-          },
-          "description": "",
-          "declarations": [
-            {
-              "name": "children",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/layout/lib/Box.tsx"
-            }
-          ],
-          "tags": {}
-        },
-        {
-          "kind": "property",
-          "name": "as",
-          "description": "Optional override of the default element used by the component. Any valid tag or Component. If you provided a Component, this component should forward the ref using `React.forwardRef`and spread extra props to a root element.\n\n**Note:** Not all elements make sense and some elements may cause accessibility issues. Change this value with care.",
-          "tags": {},
-          "declarations": [],
-          "type": {
-            "kind": "external",
-            "name": "React.ElementType",
-            "url": "https://developer.mozilla.org/en-US/docs/Web/API/element"
-          },
-          "defaultValue": {
-            "kind": "external",
-            "name": "p",
-            "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p"
-          }
-        },
-        {
-          "kind": "property",
-          "name": "ref",
-          "description": "Optional ref. If the component represents an element, this ref will be a reference to the real DOM element of the component. If `as` is set to an element, it will be that element. If `as` is a component, the reference will be to that component (or element if the component uses `React.forwardRef`).",
-          "tags": {},
-          "declarations": [],
-          "type": {
-            "kind": "external",
-            "name": "React.Ref",
-            "url": "https://reactjs.org/docs/refs-and-the-dom.html",
-            "typeParameters": [
-              {
-                "kind": "typeParameter",
-                "name": "R",
-                "required": true,
-                "defaultValue": {
-                  "kind": "external",
-                  "name": "p",
-                  "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p"
-                }
-              }
-            ]
-          }
-        },
-        {
-          "kind": "property",
-          "name": "model",
-          "description": "Optional model to pass to the component. This will override the default model created for the component. This can be useful if you want to access to the state and events of the model, or if you have nested components of the same type and you need to override the model provided by React Context.",
-          "tags": {},
-          "declarations": [],
-          "type": {
-            "kind": "symbol",
-            "name": "FormFieldModel"
-          }
-        },
-        {
-          "kind": "property",
-          "name": "elemPropsHook",
-          "description": "Optional hook that receives the model and all props to be applied to the element. If you use this, it is your responsibility to return props, merging as appropriate. For example, returning an empty object will disable all elemProps hooks associated with this component. This allows finer control over a component without creating a new one.",
-          "tags": {},
-          "declarations": [],
-          "type": {
-            "kind": "function",
-            "parameters": [
-              {
-                "kind": "parameter",
-                "description": "",
-                "tags": {},
-                "declarations": [],
-                "name": "model",
-                "type": {
-                  "kind": "symbol",
-                  "name": "FormFieldModel"
-                },
-                "required": true
-              },
-              {
-                "kind": "parameter",
-                "description": "",
-                "tags": {},
-                "declarations": [],
-                "name": "elemProps",
-                "type": {
-                  "kind": "generic",
-                  "name": "TProps"
-                }
-              }
-            ],
-            "returnType": {
-              "kind": "external",
-              "name": "HTML Attributes",
-              "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes"
-            }
-          }
-        }
-      ],
-      "baseElement": {
-        "kind": "external",
-        "name": "p",
-        "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p"
-      },
-      "styleComponent": {
-        "kind": "symbol",
-        "name": "Box"
-      },
-      "model": "FormFieldModel"
-    }
-  },
-  {
-    "name": "FormFieldInput",
-    "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/form-field/lib/FormFieldInput.tsx",
+    "name": "FormFieldContainer",
+    "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/form-field/lib/FormFieldContainer.tsx",
     "description": "",
     "declarations": [
       {
-        "name": "FormFieldInput",
-        "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/form-field/lib/FormFieldInput.tsx"
+        "name": "FormFieldContainer",
+        "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/form-field/lib/FormFieldContainer.tsx"
       }
     ],
     "tags": {},
     "type": {
       "kind": "enhancedComponent",
       "componentType": "subcomponent",
-      "elemPropsHook": "useFormFieldInput",
-      "displayName": "FormField.Input",
+      "displayName": "FormField.Container",
       "props": [
         {
           "kind": "property",
@@ -7541,8 +7296,8 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           },
           "defaultValue": {
             "kind": "external",
-            "name": "input",
-            "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input"
+            "name": "div",
+            "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div"
           }
         },
         {
@@ -7562,8 +7317,8 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
                 "required": true,
                 "defaultValue": {
                   "kind": "external",
-                  "name": "input",
-                  "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input"
+                  "name": "div",
+                  "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div"
                 }
               }
             ]
@@ -7623,40 +7378,20 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       ],
       "baseElement": {
         "kind": "external",
-        "name": "input",
-        "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input"
-      },
-      "styleComponent": {
-        "kind": "symbol",
-        "name": "Box"
+        "name": "div",
+        "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div"
       },
       "model": "FormFieldModel"
     }
   },
   {
-    "name": "FormFieldLabelProps",
-    "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/form-field/lib/FormFieldLabel.tsx",
-    "description": "",
-    "declarations": [
-      {
-        "name": "FormFieldLabelProps",
-        "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/form-field/lib/FormFieldLabel.tsx"
-      }
-    ],
-    "tags": {},
-    "type": {
-      "kind": "alias",
-      "name": "FormFieldLabel"
-    }
-  },
-  {
-    "name": "formFieldLabelStencil",
-    "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/form-field/lib/FormFieldLabel.tsx",
+    "name": "formFieldHintStencil",
+    "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/form-field/lib/FormFieldHint.tsx",
     "description": "",
     "declarations": [
       {
-        "name": "formFieldLabelStencil",
-        "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/form-field/lib/FormFieldLabel.tsx"
+        "name": "formFieldHintStencil",
+        "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/form-field/lib/FormFieldHint.tsx"
       }
     ],
     "tags": {},
@@ -8213,88 +7948,22 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
     }
   },
   {
-    "name": "FormFieldLabel",
-    "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/form-field/lib/FormFieldLabel.tsx",
+    "name": "FormFieldHint",
+    "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/form-field/lib/FormFieldHint.tsx",
     "description": "",
     "declarations": [
       {
-        "name": "FormFieldLabel",
-        "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/form-field/lib/FormFieldLabel.tsx"
+        "name": "FormFieldHint",
+        "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/form-field/lib/FormFieldHint.tsx"
       }
     ],
     "tags": {},
     "type": {
       "kind": "enhancedComponent",
       "componentType": "subcomponent",
-      "elemPropsHook": "useFormFieldLabel",
-      "displayName": "FormField.Label",
+      "elemPropsHook": "useFormFieldHint",
+      "displayName": "FormField.Hint",
       "props": [
-        {
-          "kind": "property",
-          "name": "children",
-          "required": true,
-          "type": {
-            "kind": "external",
-            "name": "ReactNode",
-            "url": "https://reactjs.org/docs/rendering-elements.html"
-          },
-          "description": "The text of the label.",
-          "declarations": [
-            {
-              "name": "children",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/form-field/lib/FormFieldLabel.tsx"
-            }
-          ],
-          "tags": {}
-        },
-        {
-          "kind": "property",
-          "name": "cs",
-          "required": false,
-          "type": {
-            "kind": "symbol",
-            "name": "CSToPropsInput",
-            "value": "CSToPropsInput"
-          },
-          "description": "The `cs` prop takes in a single value or an array of values. You can pass the CSS class name\nreturned by {@link createStyles}, or the result of {@link createVars} and\n{@link createModifiers}. If you're extending a component already using `cs`, you can merge that\nprop in as well. Any style that is passed to the `cs` prop will override style props. If you\nwish to have styles that are overridden by the `css` prop, or styles added via the `styled`\nAPI, use {@link handleCsProp} wherever `elemProps` is used. If your component needs to also\nhandle style props, use {@link mergeStyles} instead.\n\n\n```tsx\nimport {handleCsProp} from '@workday/canvas-kit-styling';\nimport {mergeStyles} from '@workday/canvas-kit-react/layout';\n\n// ...\n\n// `handleCsProp` handles compat mode with Emotion's runtime APIs. `mergeStyles` has the same\n// function signature, but adds support for style props.\n\nreturn (\n <Element\n   {...handleCsProp(elemProps, [\n     myStyles,\n     myModifiers({ size: 'medium' }),\n     myVars({ backgroundColor: 'red' })\n   ])}\n >\n   {children}\n </Element>\n)\n```",
-          "declarations": [
-            {
-              "name": "cs",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
-            }
-          ],
-          "tags": {}
-        },
-        {
-          "kind": "property",
-          "name": "variant",
-          "required": false,
-          "type": {
-            "kind": "union",
-            "value": [
-              {
-                "kind": "string",
-                "value": "error"
-              },
-              {
-                "kind": "string",
-                "value": "hint"
-              },
-              {
-                "kind": "string",
-                "value": "inverse"
-              }
-            ]
-          },
-          "description": "Type variant token names: `error`, `hint` or `inverse`.\n\n```tsx\n<Text variant=\"error\" typeLevel=\"subtext.large\">Error text</Text>\n```",
-          "declarations": [
-            {
-              "name": "variant",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/text/lib/Text.tsx"
-            }
-          ],
-          "tags": {}
-        },
         {
           "kind": "property",
           "name": "typeLevel",
@@ -8361,6 +8030,72 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           ],
           "tags": {}
         },
+        {
+          "kind": "property",
+          "name": "variant",
+          "required": false,
+          "type": {
+            "kind": "union",
+            "value": [
+              {
+                "kind": "string",
+                "value": "error"
+              },
+              {
+                "kind": "string",
+                "value": "hint"
+              },
+              {
+                "kind": "string",
+                "value": "inverse"
+              }
+            ]
+          },
+          "description": "Type variant token names: `error`, `hint` or `inverse`.\n\n```tsx\n<Text variant=\"error\" typeLevel=\"subtext.large\">Error text</Text>\n```",
+          "declarations": [
+            {
+              "name": "variant",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/text/lib/Text.tsx"
+            }
+          ],
+          "tags": {}
+        },
+        {
+          "kind": "property",
+          "name": "cs",
+          "required": false,
+          "type": {
+            "kind": "symbol",
+            "name": "CSToPropsInput",
+            "value": "CSToPropsInput"
+          },
+          "description": "The `cs` prop takes in a single value or an array of values. You can pass the CSS class name\nreturned by {@link createStyles}, or the result of {@link createVars} and\n{@link createModifiers}. If you're extending a component already using `cs`, you can merge that\nprop in as well. Any style that is passed to the `cs` prop will override style props. If you\nwish to have styles that are overridden by the `css` prop, or styles added via the `styled`\nAPI, use {@link handleCsProp} wherever `elemProps` is used. If your component needs to also\nhandle style props, use {@link mergeStyles} instead.\n\n\n```tsx\nimport {handleCsProp} from '@workday/canvas-kit-styling';\nimport {mergeStyles} from '@workday/canvas-kit-react/layout';\n\n// ...\n\n// `handleCsProp` handles compat mode with Emotion's runtime APIs. `mergeStyles` has the same\n// function signature, but adds support for style props.\n\nreturn (\n <Element\n   {...handleCsProp(elemProps, [\n     myStyles,\n     myModifiers({ size: 'medium' }),\n     myVars({ backgroundColor: 'red' })\n   ])}\n >\n   {children}\n </Element>\n)\n```",
+          "declarations": [
+            {
+              "name": "cs",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
+            }
+          ],
+          "tags": {}
+        },
+        {
+          "kind": "property",
+          "name": "children",
+          "required": false,
+          "type": {
+            "kind": "external",
+            "name": "ReactNode",
+            "url": "https://reactjs.org/docs/rendering-elements.html"
+          },
+          "description": "",
+          "declarations": [
+            {
+              "name": "children",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/layout/lib/Box.tsx"
+            }
+          ],
+          "tags": {}
+        },
         {
           "kind": "property",
           "name": "as",
@@ -8374,8 +8109,8 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           },
           "defaultValue": {
             "kind": "external",
-            "name": "label",
-            "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label"
+            "name": "p",
+            "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p"
           }
         },
         {
@@ -8395,8 +8130,8 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
                 "required": true,
                 "defaultValue": {
                   "kind": "external",
-                  "name": "label",
-                  "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label"
+                  "name": "p",
+                  "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p"
                 }
               }
             ]
@@ -8456,24 +8191,1009 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       ],
       "baseElement": {
         "kind": "external",
-        "name": "label",
-        "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label"
+        "name": "p",
+        "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p"
       },
       "styleComponent": {
         "kind": "symbol",
-        "name": "Flex"
+        "name": "Box"
       },
       "model": "FormFieldModel"
     }
   },
   {
-    "name": "formFieldStencil",
-    "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/form-field/lib/formFieldStencil.ts",
+    "name": "FormFieldInput",
+    "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/form-field/lib/FormFieldInput.tsx",
     "description": "",
     "declarations": [
       {
-        "name": "formFieldStencil",
-        "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/form-field/lib/formFieldStencil.ts"
+        "name": "FormFieldInput",
+        "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/form-field/lib/FormFieldInput.tsx"
+      }
+    ],
+    "tags": {},
+    "type": {
+      "kind": "enhancedComponent",
+      "componentType": "subcomponent",
+      "elemPropsHook": "useFormFieldInput",
+      "displayName": "FormField.Input",
+      "props": [
+        {
+          "kind": "property",
+          "name": "cs",
+          "required": false,
+          "type": {
+            "kind": "symbol",
+            "name": "CSToPropsInput",
+            "value": "CSToPropsInput"
+          },
+          "description": "The `cs` prop takes in a single value or an array of values. You can pass the CSS class name\nreturned by {@link createStyles}, or the result of {@link createVars} and\n{@link createModifiers}. If you're extending a component already using `cs`, you can merge that\nprop in as well. Any style that is passed to the `cs` prop will override style props. If you\nwish to have styles that are overridden by the `css` prop, or styles added via the `styled`\nAPI, use {@link handleCsProp} wherever `elemProps` is used. If your component needs to also\nhandle style props, use {@link mergeStyles} instead.\n\n\n```tsx\nimport {handleCsProp} from '@workday/canvas-kit-styling';\nimport {mergeStyles} from '@workday/canvas-kit-react/layout';\n\n// ...\n\n// `handleCsProp` handles compat mode with Emotion's runtime APIs. `mergeStyles` has the same\n// function signature, but adds support for style props.\n\nreturn (\n <Element\n   {...handleCsProp(elemProps, [\n     myStyles,\n     myModifiers({ size: 'medium' }),\n     myVars({ backgroundColor: 'red' })\n   ])}\n >\n   {children}\n </Element>\n)\n```",
+          "declarations": [
+            {
+              "name": "cs",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
+            }
+          ],
+          "tags": {}
+        },
+        {
+          "kind": "property",
+          "name": "children",
+          "description": "",
+          "tags": {},
+          "declarations": [],
+          "type": {
+            "kind": "external",
+            "name": "React.ReactNode",
+            "url": "https://reactjs.org/docs/rendering-elements.html"
+          }
+        },
+        {
+          "kind": "property",
+          "name": "as",
+          "description": "Optional override of the default element used by the component. Any valid tag or Component. If you provided a Component, this component should forward the ref using `React.forwardRef`and spread extra props to a root element.\n\n**Note:** Not all elements make sense and some elements may cause accessibility issues. Change this value with care.",
+          "tags": {},
+          "declarations": [],
+          "type": {
+            "kind": "external",
+            "name": "React.ElementType",
+            "url": "https://developer.mozilla.org/en-US/docs/Web/API/element"
+          },
+          "defaultValue": {
+            "kind": "external",
+            "name": "input",
+            "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input"
+          }
+        },
+        {
+          "kind": "property",
+          "name": "ref",
+          "description": "Optional ref. If the component represents an element, this ref will be a reference to the real DOM element of the component. If `as` is set to an element, it will be that element. If `as` is a component, the reference will be to that component (or element if the component uses `React.forwardRef`).",
+          "tags": {},
+          "declarations": [],
+          "type": {
+            "kind": "external",
+            "name": "React.Ref",
+            "url": "https://reactjs.org/docs/refs-and-the-dom.html",
+            "typeParameters": [
+              {
+                "kind": "typeParameter",
+                "name": "R",
+                "required": true,
+                "defaultValue": {
+                  "kind": "external",
+                  "name": "input",
+                  "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input"
+                }
+              }
+            ]
+          }
+        },
+        {
+          "kind": "property",
+          "name": "model",
+          "description": "Optional model to pass to the component. This will override the default model created for the component. This can be useful if you want to access to the state and events of the model, or if you have nested components of the same type and you need to override the model provided by React Context.",
+          "tags": {},
+          "declarations": [],
+          "type": {
+            "kind": "symbol",
+            "name": "FormFieldModel"
+          }
+        },
+        {
+          "kind": "property",
+          "name": "elemPropsHook",
+          "description": "Optional hook that receives the model and all props to be applied to the element. If you use this, it is your responsibility to return props, merging as appropriate. For example, returning an empty object will disable all elemProps hooks associated with this component. This allows finer control over a component without creating a new one.",
+          "tags": {},
+          "declarations": [],
+          "type": {
+            "kind": "function",
+            "parameters": [
+              {
+                "kind": "parameter",
+                "description": "",
+                "tags": {},
+                "declarations": [],
+                "name": "model",
+                "type": {
+                  "kind": "symbol",
+                  "name": "FormFieldModel"
+                },
+                "required": true
+              },
+              {
+                "kind": "parameter",
+                "description": "",
+                "tags": {},
+                "declarations": [],
+                "name": "elemProps",
+                "type": {
+                  "kind": "generic",
+                  "name": "TProps"
+                }
+              }
+            ],
+            "returnType": {
+              "kind": "external",
+              "name": "HTML Attributes",
+              "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes"
+            }
+          }
+        }
+      ],
+      "baseElement": {
+        "kind": "external",
+        "name": "input",
+        "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input"
+      },
+      "styleComponent": {
+        "kind": "symbol",
+        "name": "Box"
+      },
+      "model": "FormFieldModel"
+    }
+  },
+  {
+    "name": "FormFieldLabelProps",
+    "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/form-field/lib/FormFieldLabel.tsx",
+    "description": "",
+    "declarations": [
+      {
+        "name": "FormFieldLabelProps",
+        "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/form-field/lib/FormFieldLabel.tsx"
+      }
+    ],
+    "tags": {},
+    "type": {
+      "kind": "alias",
+      "name": "FormFieldLabel"
+    }
+  },
+  {
+    "name": "formFieldLabelStencil",
+    "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/form-field/lib/FormFieldLabel.tsx",
+    "description": "",
+    "declarations": [
+      {
+        "name": "formFieldLabelStencil",
+        "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/form-field/lib/FormFieldLabel.tsx"
+      }
+    ],
+    "tags": {},
+    "type": {
+      "kind": "function",
+      "parameters": [
+        {
+          "kind": "parameter",
+          "name": "options",
+          "type": {
+            "kind": "conditional",
+            "check": {
+              "kind": "tuple",
+              "value": [
+                {
+                  "kind": "symbol",
+                  "name": "E",
+                  "value": "E"
+                }
+              ]
+            },
+            "extends": {
+              "kind": "tuple",
+              "value": [
+                {
+                  "kind": "primitive",
+                  "value": "never"
+                }
+              ]
+            },
+            "trueType": {
+              "kind": "intersection",
+              "value": [
+                {
+                  "kind": "symbol",
+                  "name": "ModifierValuesStencil",
+                  "typeParameters": [
+                    {
+                      "kind": "symbol",
+                      "name": "M",
+                      "value": "M"
+                    },
+                    {
+                      "kind": "symbol",
+                      "name": "V",
+                      "value": "V"
+                    }
+                  ],
+                  "value": "ModifierValuesStencil<M, V>"
+                },
+                {
+                  "kind": "symbol",
+                  "name": "VariableValuesStencil",
+                  "typeParameters": [
+                    {
+                      "kind": "symbol",
+                      "name": "V",
+                      "value": "V"
+                    }
+                  ],
+                  "value": "VariableValuesStencil<V>"
+                }
+              ]
+            },
+            "falseType": {
+              "kind": "conditional",
+              "check": {
+                "kind": "symbol",
+                "name": "E",
+                "value": "E"
+              },
+              "extends": {
+                "kind": "symbol",
+                "name": "BaseStencil",
+                "typeParameters": [
+                  {
+                    "kind": "infer",
+                    "value": {
+                      "kind": "typeParameter",
+                      "name": "ME",
+                      "required": true
+                    }
+                  },
+                  {
+                    "kind": "infer",
+                    "value": {
+                      "kind": "typeParameter",
+                      "name": "VE",
+                      "required": true
+                    }
+                  },
+                  {
+                    "kind": "primitive",
+                    "value": "any"
+                  },
+                  {
+                    "kind": "primitive",
+                    "value": "any"
+                  }
+                ],
+                "value": "BaseStencil<M, V, E, ID>"
+              },
+              "trueType": {
+                "kind": "intersection",
+                "value": [
+                  {
+                    "kind": "symbol",
+                    "name": "ModifierValuesStencil",
+                    "typeParameters": [
+                      {
+                        "kind": "intersection",
+                        "value": [
+                          {
+                            "kind": "symbol",
+                            "name": "ME",
+                            "value": "ME"
+                          },
+                          {
+                            "kind": "symbol",
+                            "name": "M",
+                            "value": "M"
+                          }
+                        ]
+                      }
+                    ],
+                    "value": "ModifierValuesStencil<M, V>"
+                  },
+                  {
+                    "kind": "symbol",
+                    "name": "VariableValuesStencil",
+                    "typeParameters": [
+                      {
+                        "kind": "intersection",
+                        "value": [
+                          {
+                            "kind": "symbol",
+                            "name": "VE",
+                            "value": "VE"
+                          },
+                          {
+                            "kind": "symbol",
+                            "name": "V",
+                            "value": "V"
+                          }
+                        ]
+                      }
+                    ],
+                    "value": "VariableValuesStencil<V>"
+                  }
+                ]
+              },
+              "falseType": {
+                "kind": "primitive",
+                "value": "never"
+              }
+            }
+          },
+          "required": false,
+          "rest": false,
+          "description": "",
+          "declarations": [
+            {
+              "name": "options",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
+            }
+          ],
+          "tags": {}
+        }
+      ],
+      "members": [
+        {
+          "kind": "property",
+          "name": "vars",
+          "required": true,
+          "type": {
+            "kind": "symbol",
+            "name": "StencilDefaultVars",
+            "typeParameters": [
+              {
+                "kind": "symbol",
+                "name": "V",
+                "value": "V"
+              },
+              {
+                "kind": "symbol",
+                "name": "E",
+                "value": "E"
+              },
+              {
+                "kind": "symbol",
+                "name": "ID",
+                "value": "ID"
+              }
+            ],
+            "value": "StencilDefaultVars<V, E, ID>"
+          },
+          "description": "",
+          "declarations": [
+            {
+              "name": "vars",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
+            }
+          ],
+          "tags": {}
+        },
+        {
+          "kind": "property",
+          "name": "base",
+          "required": true,
+          "type": {
+            "kind": "primitive",
+            "value": "string"
+          },
+          "description": "",
+          "declarations": [
+            {
+              "name": "base",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
+            }
+          ],
+          "tags": {}
+        },
+        {
+          "kind": "property",
+          "name": "modifiers",
+          "required": true,
+          "type": {
+            "kind": "conditional",
+            "check": {
+              "kind": "tuple",
+              "value": [
+                {
+                  "kind": "symbol",
+                  "name": "E",
+                  "value": "E"
+                }
+              ]
+            },
+            "extends": {
+              "kind": "tuple",
+              "value": [
+                {
+                  "kind": "symbol",
+                  "name": "BaseStencil",
+                  "typeParameters": [
+                    {
+                      "kind": "infer",
+                      "value": {
+                        "kind": "typeParameter",
+                        "name": "ME",
+                        "required": true
+                      }
+                    },
+                    {
+                      "kind": "infer",
+                      "value": {
+                        "kind": "typeParameter",
+                        "name": "VE",
+                        "required": true
+                      }
+                    },
+                    {
+                      "kind": "primitive",
+                      "value": "any"
+                    },
+                    {
+                      "kind": "primitive",
+                      "value": "any"
+                    }
+                  ],
+                  "value": "BaseStencil<M, V, E, ID>"
+                }
+              ]
+            },
+            "trueType": {
+              "kind": "symbol",
+              "name": "StencilModifierReturn",
+              "typeParameters": [
+                {
+                  "kind": "intersection",
+                  "value": [
+                    {
+                      "kind": "symbol",
+                      "name": "ME",
+                      "value": "ME"
+                    },
+                    {
+                      "kind": "symbol",
+                      "name": "M",
+                      "value": "M"
+                    }
+                  ]
+                },
+                {
+                  "kind": "intersection",
+                  "value": [
+                    {
+                      "kind": "symbol",
+                      "name": "VE",
+                      "value": "VE"
+                    },
+                    {
+                      "kind": "symbol",
+                      "name": "V",
+                      "value": "V"
+                    }
+                  ]
+                }
+              ],
+              "value": "StencilModifierReturn<M, V>"
+            },
+            "falseType": {
+              "kind": "symbol",
+              "name": "StencilModifierReturn",
+              "typeParameters": [
+                {
+                  "kind": "symbol",
+                  "name": "M",
+                  "value": "M"
+                },
+                {
+                  "kind": "symbol",
+                  "name": "V",
+                  "value": "V"
+                }
+              ],
+              "value": "StencilModifierReturn<M, V>"
+            }
+          },
+          "description": "",
+          "declarations": [
+            {
+              "name": "modifiers",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
+            }
+          ],
+          "tags": {}
+        },
+        {
+          "kind": "property",
+          "name": "defaultModifiers",
+          "required": true,
+          "type": {
+            "kind": "conditional",
+            "check": {
+              "kind": "tuple",
+              "value": [
+                {
+                  "kind": "symbol",
+                  "name": "E",
+                  "value": "E"
+                }
+              ]
+            },
+            "extends": {
+              "kind": "tuple",
+              "value": [
+                {
+                  "kind": "symbol",
+                  "name": "BaseStencil",
+                  "typeParameters": [
+                    {
+                      "kind": "infer",
+                      "value": {
+                        "kind": "typeParameter",
+                        "name": "ME",
+                        "required": true
+                      }
+                    },
+                    {
+                      "kind": "primitive",
+                      "value": "any"
+                    },
+                    {
+                      "kind": "primitive",
+                      "value": "any"
+                    },
+                    {
+                      "kind": "primitive",
+                      "value": "any"
+                    }
+                  ],
+                  "value": "BaseStencil<M, V, E, ID>"
+                }
+              ]
+            },
+            "trueType": {
+              "kind": "symbol",
+              "name": "StencilDefaultModifierReturn",
+              "typeParameters": [
+                {
+                  "kind": "intersection",
+                  "value": [
+                    {
+                      "kind": "symbol",
+                      "name": "ME",
+                      "value": "ME"
+                    },
+                    {
+                      "kind": "symbol",
+                      "name": "M",
+                      "value": "M"
+                    }
+                  ]
+                }
+              ],
+              "value": "StencilDefaultModifierReturn<M>"
+            },
+            "falseType": {
+              "kind": "symbol",
+              "name": "StencilDefaultModifierReturn",
+              "typeParameters": [
+                {
+                  "kind": "symbol",
+                  "name": "M",
+                  "value": "M"
+                }
+              ],
+              "value": "StencilDefaultModifierReturn<M>"
+            }
+          },
+          "description": "",
+          "declarations": [
+            {
+              "name": "defaultModifiers",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
+            }
+          ],
+          "tags": {}
+        },
+        {
+          "kind": "property",
+          "name": "__extends",
+          "required": false,
+          "type": {
+            "kind": "symbol",
+            "name": "E",
+            "value": "E"
+          },
+          "description": "",
+          "declarations": [
+            {
+              "name": "__extends",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
+            }
+          ],
+          "tags": {}
+        },
+        {
+          "kind": "property",
+          "name": "__vars",
+          "required": true,
+          "type": {
+            "kind": "symbol",
+            "name": "V",
+            "value": "V"
+          },
+          "description": "",
+          "declarations": [
+            {
+              "name": "__vars",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
+            }
+          ],
+          "tags": {}
+        },
+        {
+          "kind": "property",
+          "name": "__modifiers",
+          "required": true,
+          "type": {
+            "kind": "symbol",
+            "name": "M",
+            "value": "M"
+          },
+          "description": "",
+          "declarations": [
+            {
+              "name": "__modifiers",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
+            }
+          ],
+          "tags": {}
+        },
+        {
+          "kind": "property",
+          "name": "__id",
+          "required": true,
+          "type": {
+            "kind": "symbol",
+            "name": "ID",
+            "value": "ID"
+          },
+          "description": "",
+          "declarations": [
+            {
+              "name": "__id",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
+            }
+          ],
+          "tags": {}
+        }
+      ],
+      "returnType": {
+        "kind": "object",
+        "properties": [
+          {
+            "kind": "property",
+            "name": "className",
+            "required": true,
+            "type": {
+              "kind": "primitive",
+              "value": "string"
+            },
+            "description": "",
+            "declarations": [
+              {
+                "name": "className",
+                "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
+              }
+            ],
+            "tags": {}
+          },
+          {
+            "kind": "property",
+            "name": "style",
+            "required": false,
+            "type": {
+              "kind": "external",
+              "name": "Record",
+              "url": "https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeys-type",
+              "typeParameters": [
+                {
+                  "kind": "primitive",
+                  "value": "string"
+                },
+                {
+                  "kind": "primitive",
+                  "value": "string"
+                }
+              ]
+            },
+            "description": "",
+            "declarations": [
+              {
+                "name": "style",
+                "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
+              }
+            ],
+            "tags": {}
+          }
+        ]
+      }
+    }
+  },
+  {
+    "name": "FormFieldLabel",
+    "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/form-field/lib/FormFieldLabel.tsx",
+    "description": "",
+    "declarations": [
+      {
+        "name": "FormFieldLabel",
+        "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/form-field/lib/FormFieldLabel.tsx"
+      }
+    ],
+    "tags": {},
+    "type": {
+      "kind": "enhancedComponent",
+      "componentType": "subcomponent",
+      "elemPropsHook": "useFormFieldLabel",
+      "displayName": "FormField.Label",
+      "props": [
+        {
+          "kind": "property",
+          "name": "children",
+          "required": true,
+          "type": {
+            "kind": "external",
+            "name": "ReactNode",
+            "url": "https://reactjs.org/docs/rendering-elements.html"
+          },
+          "description": "The text of the label.",
+          "declarations": [
+            {
+              "name": "children",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/form-field/lib/FormFieldLabel.tsx"
+            }
+          ],
+          "tags": {}
+        },
+        {
+          "kind": "property",
+          "name": "cs",
+          "required": false,
+          "type": {
+            "kind": "symbol",
+            "name": "CSToPropsInput",
+            "value": "CSToPropsInput"
+          },
+          "description": "The `cs` prop takes in a single value or an array of values. You can pass the CSS class name\nreturned by {@link createStyles}, or the result of {@link createVars} and\n{@link createModifiers}. If you're extending a component already using `cs`, you can merge that\nprop in as well. Any style that is passed to the `cs` prop will override style props. If you\nwish to have styles that are overridden by the `css` prop, or styles added via the `styled`\nAPI, use {@link handleCsProp} wherever `elemProps` is used. If your component needs to also\nhandle style props, use {@link mergeStyles} instead.\n\n\n```tsx\nimport {handleCsProp} from '@workday/canvas-kit-styling';\nimport {mergeStyles} from '@workday/canvas-kit-react/layout';\n\n// ...\n\n// `handleCsProp` handles compat mode with Emotion's runtime APIs. `mergeStyles` has the same\n// function signature, but adds support for style props.\n\nreturn (\n <Element\n   {...handleCsProp(elemProps, [\n     myStyles,\n     myModifiers({ size: 'medium' }),\n     myVars({ backgroundColor: 'red' })\n   ])}\n >\n   {children}\n </Element>\n)\n```",
+          "declarations": [
+            {
+              "name": "cs",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
+            }
+          ],
+          "tags": {}
+        },
+        {
+          "kind": "property",
+          "name": "variant",
+          "required": false,
+          "type": {
+            "kind": "union",
+            "value": [
+              {
+                "kind": "string",
+                "value": "error"
+              },
+              {
+                "kind": "string",
+                "value": "hint"
+              },
+              {
+                "kind": "string",
+                "value": "inverse"
+              }
+            ]
+          },
+          "description": "Type variant token names: `error`, `hint` or `inverse`.\n\n```tsx\n<Text variant=\"error\" typeLevel=\"subtext.large\">Error text</Text>\n```",
+          "declarations": [
+            {
+              "name": "variant",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/text/lib/Text.tsx"
+            }
+          ],
+          "tags": {}
+        },
+        {
+          "kind": "property",
+          "name": "typeLevel",
+          "required": false,
+          "type": {
+            "kind": "union",
+            "value": [
+              {
+                "kind": "string",
+                "value": "subtext.medium"
+              },
+              {
+                "kind": "string",
+                "value": "title.large"
+              },
+              {
+                "kind": "string",
+                "value": "title.medium"
+              },
+              {
+                "kind": "string",
+                "value": "title.small"
+              },
+              {
+                "kind": "string",
+                "value": "heading.large"
+              },
+              {
+                "kind": "string",
+                "value": "heading.medium"
+              },
+              {
+                "kind": "string",
+                "value": "heading.small"
+              },
+              {
+                "kind": "string",
+                "value": "body.large"
+              },
+              {
+                "kind": "string",
+                "value": "body.medium"
+              },
+              {
+                "kind": "string",
+                "value": "body.small"
+              },
+              {
+                "kind": "string",
+                "value": "subtext.large"
+              },
+              {
+                "kind": "string",
+                "value": "subtext.small"
+              }
+            ]
+          },
+          "description": "Type token as string with level and size separated by dot.\nThese values map to our [Canvas type levels](https://canvas.workday.com/tokens/type#type-styles).\n\n```tsx\n<Text typeLevel=\"body.small\">Small body text</Text>\n```",
+          "declarations": [
+            {
+              "name": "typeLevel",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/text/lib/Text.tsx"
+            }
+          ],
+          "tags": {}
+        },
+        {
+          "kind": "property",
+          "name": "as",
+          "description": "Optional override of the default element used by the component. Any valid tag or Component. If you provided a Component, this component should forward the ref using `React.forwardRef`and spread extra props to a root element.\n\n**Note:** Not all elements make sense and some elements may cause accessibility issues. Change this value with care.",
+          "tags": {},
+          "declarations": [],
+          "type": {
+            "kind": "external",
+            "name": "React.ElementType",
+            "url": "https://developer.mozilla.org/en-US/docs/Web/API/element"
+          },
+          "defaultValue": {
+            "kind": "external",
+            "name": "label",
+            "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label"
+          }
+        },
+        {
+          "kind": "property",
+          "name": "ref",
+          "description": "Optional ref. If the component represents an element, this ref will be a reference to the real DOM element of the component. If `as` is set to an element, it will be that element. If `as` is a component, the reference will be to that component (or element if the component uses `React.forwardRef`).",
+          "tags": {},
+          "declarations": [],
+          "type": {
+            "kind": "external",
+            "name": "React.Ref",
+            "url": "https://reactjs.org/docs/refs-and-the-dom.html",
+            "typeParameters": [
+              {
+                "kind": "typeParameter",
+                "name": "R",
+                "required": true,
+                "defaultValue": {
+                  "kind": "external",
+                  "name": "label",
+                  "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label"
+                }
+              }
+            ]
+          }
+        },
+        {
+          "kind": "property",
+          "name": "model",
+          "description": "Optional model to pass to the component. This will override the default model created for the component. This can be useful if you want to access to the state and events of the model, or if you have nested components of the same type and you need to override the model provided by React Context.",
+          "tags": {},
+          "declarations": [],
+          "type": {
+            "kind": "symbol",
+            "name": "FormFieldModel"
+          }
+        },
+        {
+          "kind": "property",
+          "name": "elemPropsHook",
+          "description": "Optional hook that receives the model and all props to be applied to the element. If you use this, it is your responsibility to return props, merging as appropriate. For example, returning an empty object will disable all elemProps hooks associated with this component. This allows finer control over a component without creating a new one.",
+          "tags": {},
+          "declarations": [],
+          "type": {
+            "kind": "function",
+            "parameters": [
+              {
+                "kind": "parameter",
+                "description": "",
+                "tags": {},
+                "declarations": [],
+                "name": "model",
+                "type": {
+                  "kind": "symbol",
+                  "name": "FormFieldModel"
+                },
+                "required": true
+              },
+              {
+                "kind": "parameter",
+                "description": "",
+                "tags": {},
+                "declarations": [],
+                "name": "elemProps",
+                "type": {
+                  "kind": "generic",
+                  "name": "TProps"
+                }
+              }
+            ],
+            "returnType": {
+              "kind": "external",
+              "name": "HTML Attributes",
+              "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes"
+            }
+          }
+        }
+      ],
+      "baseElement": {
+        "kind": "external",
+        "name": "label",
+        "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label"
+      },
+      "styleComponent": {
+        "kind": "symbol",
+        "name": "Flex"
+      },
+      "model": "FormFieldModel"
+    }
+  },
+  {
+    "name": "formFieldStencil",
+    "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/form-field/lib/formFieldStencil.ts",
+    "description": "",
+    "declarations": [
+      {
+        "name": "formFieldStencil",
+        "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/form-field/lib/formFieldStencil.ts"
       }
     ],
     "tags": {},
@@ -66689,6 +67409,243 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           ],
           "tags": {}
         },
+        {
+          "kind": "property",
+          "name": "marginTop",
+          "required": false,
+          "type": {
+            "kind": "union",
+            "value": [
+              {
+                "kind": "primitive",
+                "value": "undefined"
+              },
+              {
+                "kind": "primitive",
+                "value": "number"
+              },
+              {
+                "kind": "intersection",
+                "value": [
+                  {
+                    "kind": "primitive",
+                    "value": "string"
+                  },
+                  {
+                    "kind": "object",
+                    "properties": []
+                  }
+                ]
+              },
+              {
+                "kind": "string",
+                "value": "s"
+              },
+              {
+                "kind": "string",
+                "value": "zero"
+              },
+              {
+                "kind": "string",
+                "value": "m"
+              },
+              {
+                "kind": "string",
+                "value": "l"
+              },
+              {
+                "kind": "string",
+                "value": "xxxs"
+              },
+              {
+                "kind": "string",
+                "value": "xxs"
+              },
+              {
+                "kind": "string",
+                "value": "xs"
+              },
+              {
+                "kind": "string",
+                "value": "xl"
+              },
+              {
+                "kind": "string",
+                "value": "xxl"
+              },
+              {
+                "kind": "string",
+                "value": "xxxl"
+              }
+            ]
+          },
+          "description": "Set the margin top of the list box. You must use this prop and not style any other way. The\n`Menu` uses virtualization and needs margins to be set on the correct element. This ensure\nproper rendering. If a `marginTop` is not provided, the value falls back to `marginY`.",
+          "declarations": [
+            {
+              "name": "marginTop",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/collection/lib/ListBox.tsx"
+            }
+          ],
+          "tags": {}
+        },
+        {
+          "kind": "property",
+          "name": "marginBottom",
+          "required": false,
+          "type": {
+            "kind": "union",
+            "value": [
+              {
+                "kind": "primitive",
+                "value": "undefined"
+              },
+              {
+                "kind": "primitive",
+                "value": "number"
+              },
+              {
+                "kind": "intersection",
+                "value": [
+                  {
+                    "kind": "primitive",
+                    "value": "string"
+                  },
+                  {
+                    "kind": "object",
+                    "properties": []
+                  }
+                ]
+              },
+              {
+                "kind": "string",
+                "value": "s"
+              },
+              {
+                "kind": "string",
+                "value": "zero"
+              },
+              {
+                "kind": "string",
+                "value": "m"
+              },
+              {
+                "kind": "string",
+                "value": "l"
+              },
+              {
+                "kind": "string",
+                "value": "xxxs"
+              },
+              {
+                "kind": "string",
+                "value": "xxs"
+              },
+              {
+                "kind": "string",
+                "value": "xs"
+              },
+              {
+                "kind": "string",
+                "value": "xl"
+              },
+              {
+                "kind": "string",
+                "value": "xxl"
+              },
+              {
+                "kind": "string",
+                "value": "xxxl"
+              }
+            ]
+          },
+          "description": "Set the margin bottom of the list box. You must use this prop and not style any other way. The\n`Menu` uses virtualization and needs margins to be set on the correct element. This ensure\nproper rendering. If a `marginBottom` is not provided, the value falls back to `marginY`.",
+          "declarations": [
+            {
+              "name": "marginBottom",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/collection/lib/ListBox.tsx"
+            }
+          ],
+          "tags": {}
+        },
+        {
+          "kind": "property",
+          "name": "marginY",
+          "required": false,
+          "type": {
+            "kind": "union",
+            "value": [
+              {
+                "kind": "primitive",
+                "value": "undefined"
+              },
+              {
+                "kind": "primitive",
+                "value": "number"
+              },
+              {
+                "kind": "intersection",
+                "value": [
+                  {
+                    "kind": "primitive",
+                    "value": "string"
+                  },
+                  {
+                    "kind": "object",
+                    "properties": []
+                  }
+                ]
+              },
+              {
+                "kind": "string",
+                "value": "s"
+              },
+              {
+                "kind": "string",
+                "value": "zero"
+              },
+              {
+                "kind": "string",
+                "value": "m"
+              },
+              {
+                "kind": "string",
+                "value": "l"
+              },
+              {
+                "kind": "string",
+                "value": "xxxs"
+              },
+              {
+                "kind": "string",
+                "value": "xxs"
+              },
+              {
+                "kind": "string",
+                "value": "xs"
+              },
+              {
+                "kind": "string",
+                "value": "xl"
+              },
+              {
+                "kind": "string",
+                "value": "xxl"
+              },
+              {
+                "kind": "string",
+                "value": "xxxl"
+              }
+            ]
+          },
+          "description": "Set the margin top and bottom of the list box. You must use this prop and not style any other way. The\n`Menu` uses virtualization and needs margins to be set on the correct element. This ensure\nproper rendering.",
+          "declarations": [
+            {
+              "name": "marginY",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/collection/lib/ListBox.tsx"
+            }
+          ],
+          "tags": {}
+        },
         {
           "kind": "property",
           "name": "cs",
@@ -102538,6 +103495,243 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           ],
           "tags": {}
         },
+        {
+          "kind": "property",
+          "name": "marginTop",
+          "required": false,
+          "type": {
+            "kind": "union",
+            "value": [
+              {
+                "kind": "primitive",
+                "value": "undefined"
+              },
+              {
+                "kind": "primitive",
+                "value": "number"
+              },
+              {
+                "kind": "intersection",
+                "value": [
+                  {
+                    "kind": "primitive",
+                    "value": "string"
+                  },
+                  {
+                    "kind": "object",
+                    "properties": []
+                  }
+                ]
+              },
+              {
+                "kind": "string",
+                "value": "s"
+              },
+              {
+                "kind": "string",
+                "value": "zero"
+              },
+              {
+                "kind": "string",
+                "value": "m"
+              },
+              {
+                "kind": "string",
+                "value": "l"
+              },
+              {
+                "kind": "string",
+                "value": "xxxs"
+              },
+              {
+                "kind": "string",
+                "value": "xxs"
+              },
+              {
+                "kind": "string",
+                "value": "xs"
+              },
+              {
+                "kind": "string",
+                "value": "xl"
+              },
+              {
+                "kind": "string",
+                "value": "xxl"
+              },
+              {
+                "kind": "string",
+                "value": "xxxl"
+              }
+            ]
+          },
+          "description": "Set the margin top of the list box. You must use this prop and not style any other way. The\n`Menu` uses virtualization and needs margins to be set on the correct element. This ensure\nproper rendering. If a `marginTop` is not provided, the value falls back to `marginY`.",
+          "declarations": [
+            {
+              "name": "marginTop",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/collection/lib/ListBox.tsx"
+            }
+          ],
+          "tags": {}
+        },
+        {
+          "kind": "property",
+          "name": "marginBottom",
+          "required": false,
+          "type": {
+            "kind": "union",
+            "value": [
+              {
+                "kind": "primitive",
+                "value": "undefined"
+              },
+              {
+                "kind": "primitive",
+                "value": "number"
+              },
+              {
+                "kind": "intersection",
+                "value": [
+                  {
+                    "kind": "primitive",
+                    "value": "string"
+                  },
+                  {
+                    "kind": "object",
+                    "properties": []
+                  }
+                ]
+              },
+              {
+                "kind": "string",
+                "value": "s"
+              },
+              {
+                "kind": "string",
+                "value": "zero"
+              },
+              {
+                "kind": "string",
+                "value": "m"
+              },
+              {
+                "kind": "string",
+                "value": "l"
+              },
+              {
+                "kind": "string",
+                "value": "xxxs"
+              },
+              {
+                "kind": "string",
+                "value": "xxs"
+              },
+              {
+                "kind": "string",
+                "value": "xs"
+              },
+              {
+                "kind": "string",
+                "value": "xl"
+              },
+              {
+                "kind": "string",
+                "value": "xxl"
+              },
+              {
+                "kind": "string",
+                "value": "xxxl"
+              }
+            ]
+          },
+          "description": "Set the margin bottom of the list box. You must use this prop and not style any other way. The\n`Menu` uses virtualization and needs margins to be set on the correct element. This ensure\nproper rendering. If a `marginBottom` is not provided, the value falls back to `marginY`.",
+          "declarations": [
+            {
+              "name": "marginBottom",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/collection/lib/ListBox.tsx"
+            }
+          ],
+          "tags": {}
+        },
+        {
+          "kind": "property",
+          "name": "marginY",
+          "required": false,
+          "type": {
+            "kind": "union",
+            "value": [
+              {
+                "kind": "primitive",
+                "value": "undefined"
+              },
+              {
+                "kind": "primitive",
+                "value": "number"
+              },
+              {
+                "kind": "intersection",
+                "value": [
+                  {
+                    "kind": "primitive",
+                    "value": "string"
+                  },
+                  {
+                    "kind": "object",
+                    "properties": []
+                  }
+                ]
+              },
+              {
+                "kind": "string",
+                "value": "s"
+              },
+              {
+                "kind": "string",
+                "value": "zero"
+              },
+              {
+                "kind": "string",
+                "value": "m"
+              },
+              {
+                "kind": "string",
+                "value": "l"
+              },
+              {
+                "kind": "string",
+                "value": "xxxs"
+              },
+              {
+                "kind": "string",
+                "value": "xxs"
+              },
+              {
+                "kind": "string",
+                "value": "xs"
+              },
+              {
+                "kind": "string",
+                "value": "xl"
+              },
+              {
+                "kind": "string",
+                "value": "xxl"
+              },
+              {
+                "kind": "string",
+                "value": "xxxl"
+              }
+            ]
+          },
+          "description": "Set the margin top and bottom of the list box. You must use this prop and not style any other way. The\n`Menu` uses virtualization and needs margins to be set on the correct element. This ensure\nproper rendering.",
+          "declarations": [
+            {
+              "name": "marginY",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/collection/lib/ListBox.tsx"
+            }
+          ],
+          "tags": {}
+        },
         {
           "kind": "property",
           "name": "cs",
@@ -114006,6 +115200,73 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       }
     }
   },
+  {
+    "name": "filterOutProps",
+    "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/theming/styled.ts",
+    "description": "",
+    "declarations": [
+      {
+        "name": "filterOutProps",
+        "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/theming/styled.ts"
+      }
+    ],
+    "tags": {},
+    "type": {
+      "kind": "function",
+      "parameters": [
+        {
+          "kind": "parameter",
+          "name": "omittedProps",
+          "type": {
+            "kind": "array",
+            "value": {
+              "kind": "primitive",
+              "value": "string"
+            }
+          },
+          "required": true,
+          "rest": false,
+          "description": "",
+          "declarations": [
+            {
+              "name": "omittedProps",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/theming/styled.ts"
+            }
+          ],
+          "tags": {}
+        }
+      ],
+      "members": [],
+      "returnType": {
+        "kind": "function",
+        "parameters": [
+          {
+            "kind": "parameter",
+            "name": "prop",
+            "type": {
+              "kind": "primitive",
+              "value": "string"
+            },
+            "required": true,
+            "rest": false,
+            "description": "",
+            "declarations": [
+              {
+                "name": "prop",
+                "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/theming/styled.ts"
+              }
+            ],
+            "tags": {}
+          }
+        ],
+        "members": [],
+        "returnType": {
+          "kind": "primitive",
+          "value": "boolean"
+        }
+      }
+    }
+  },
   {
     "name": "StyleRewriteFn",
     "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/theming/styled.ts",
@@ -158840,6 +160101,243 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           ],
           "tags": {}
         },
+        {
+          "kind": "property",
+          "name": "marginY",
+          "required": false,
+          "type": {
+            "kind": "union",
+            "value": [
+              {
+                "kind": "primitive",
+                "value": "undefined"
+              },
+              {
+                "kind": "primitive",
+                "value": "number"
+              },
+              {
+                "kind": "intersection",
+                "value": [
+                  {
+                    "kind": "primitive",
+                    "value": "string"
+                  },
+                  {
+                    "kind": "object",
+                    "properties": []
+                  }
+                ]
+              },
+              {
+                "kind": "string",
+                "value": "s"
+              },
+              {
+                "kind": "string",
+                "value": "zero"
+              },
+              {
+                "kind": "string",
+                "value": "m"
+              },
+              {
+                "kind": "string",
+                "value": "l"
+              },
+              {
+                "kind": "string",
+                "value": "xxxs"
+              },
+              {
+                "kind": "string",
+                "value": "xxs"
+              },
+              {
+                "kind": "string",
+                "value": "xs"
+              },
+              {
+                "kind": "string",
+                "value": "xl"
+              },
+              {
+                "kind": "string",
+                "value": "xxl"
+              },
+              {
+                "kind": "string",
+                "value": "xxxl"
+              }
+            ]
+          },
+          "description": "Set the margin top and bottom of the list box. You must use this prop and not style any other way. The\n`Menu` uses virtualization and needs margins to be set on the correct element. This ensure\nproper rendering.",
+          "declarations": [
+            {
+              "name": "marginY",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/collection/lib/ListBox.tsx"
+            }
+          ],
+          "tags": {}
+        },
+        {
+          "kind": "property",
+          "name": "marginTop",
+          "required": false,
+          "type": {
+            "kind": "union",
+            "value": [
+              {
+                "kind": "primitive",
+                "value": "undefined"
+              },
+              {
+                "kind": "primitive",
+                "value": "number"
+              },
+              {
+                "kind": "intersection",
+                "value": [
+                  {
+                    "kind": "primitive",
+                    "value": "string"
+                  },
+                  {
+                    "kind": "object",
+                    "properties": []
+                  }
+                ]
+              },
+              {
+                "kind": "string",
+                "value": "s"
+              },
+              {
+                "kind": "string",
+                "value": "zero"
+              },
+              {
+                "kind": "string",
+                "value": "m"
+              },
+              {
+                "kind": "string",
+                "value": "l"
+              },
+              {
+                "kind": "string",
+                "value": "xxxs"
+              },
+              {
+                "kind": "string",
+                "value": "xxs"
+              },
+              {
+                "kind": "string",
+                "value": "xs"
+              },
+              {
+                "kind": "string",
+                "value": "xl"
+              },
+              {
+                "kind": "string",
+                "value": "xxl"
+              },
+              {
+                "kind": "string",
+                "value": "xxxl"
+              }
+            ]
+          },
+          "description": "Set the margin top of the list box. You must use this prop and not style any other way. The\n`Menu` uses virtualization and needs margins to be set on the correct element. This ensure\nproper rendering. If a `marginTop` is not provided, the value falls back to `marginY`.",
+          "declarations": [
+            {
+              "name": "marginTop",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/collection/lib/ListBox.tsx"
+            }
+          ],
+          "tags": {}
+        },
+        {
+          "kind": "property",
+          "name": "marginBottom",
+          "required": false,
+          "type": {
+            "kind": "union",
+            "value": [
+              {
+                "kind": "primitive",
+                "value": "undefined"
+              },
+              {
+                "kind": "primitive",
+                "value": "number"
+              },
+              {
+                "kind": "intersection",
+                "value": [
+                  {
+                    "kind": "primitive",
+                    "value": "string"
+                  },
+                  {
+                    "kind": "object",
+                    "properties": []
+                  }
+                ]
+              },
+              {
+                "kind": "string",
+                "value": "s"
+              },
+              {
+                "kind": "string",
+                "value": "zero"
+              },
+              {
+                "kind": "string",
+                "value": "m"
+              },
+              {
+                "kind": "string",
+                "value": "l"
+              },
+              {
+                "kind": "string",
+                "value": "xxxs"
+              },
+              {
+                "kind": "string",
+                "value": "xxs"
+              },
+              {
+                "kind": "string",
+                "value": "xs"
+              },
+              {
+                "kind": "string",
+                "value": "xl"
+              },
+              {
+                "kind": "string",
+                "value": "xxl"
+              },
+              {
+                "kind": "string",
+                "value": "xxxl"
+              }
+            ]
+          },
+          "description": "Set the margin bottom of the list box. You must use this prop and not style any other way. The\n`Menu` uses virtualization and needs margins to be set on the correct element. This ensure\nproper rendering. If a `marginBottom` is not provided, the value falls back to `marginY`.",
+          "declarations": [
+            {
+              "name": "marginBottom",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/collection/lib/ListBox.tsx"
+            }
+          ],
+          "tags": {}
+        },
         {
           "kind": "property",
           "name": "cs",
@@ -169284,7 +170782,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
         {
           "name": "Card",
           "symbol": "ModalCard",
-          "description": "The `Modal.Card` is wraps a {@link PopupCard Popup.Card} which wraps a {@link Card}. It is\nthe `role=\"dialog\"` element and is uses `useModalCard` behavior hook which sets\n`aria-modal=\"true\"` and sets the `aria-labelledby` that points to the `id` of the\n{@link ModalHeading Modal.Heading}. If you don't use a `Modal.Heading`, add an `aria-label`\ninstead. The default element is a `div` and can be changed via the `as` prop.",
+          "description": "The `Modal.Card` is wraps a {@link PopupCard Popup.Card} which wraps a {@link Card}. It is\nthe `role=\"dialog\"` element and is uses `useModalCard` behavior hook which sets\n`aria-modal=\"false\"` and sets the `aria-labelledby` that points to the `id` of the\n{@link ModalHeading Modal.Heading}. If you don't use a `Modal.Heading`, add an `aria-label`\ninstead. The default element is a `div` and can be changed via the `as` prop.",
           "declarations": [
             {
               "name": "Card",