@workday/canvas-kit-docs 12.0.0-alpha.852-next.0 → 12.0.0-alpha.862-next.0

package/dist/es6/lib/docs.js

@@ -1380,11 +1380,19 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           "name": "variant",
           "required": false,
           "type": {
-            "kind": "symbol",
-            "name": "AvatarVariant",
-            "value": "AvatarVariant"
+            "kind": "union",
+            "value": [
+              {
+                "kind": "string",
+                "value": "light"
+              },
+              {
+                "kind": "string",
+                "value": "dark"
+              }
+            ]
           },
-          "description": "The variant of the Avatar default state. Accepts `Light` or `Dark`.",
+          "description": "The variant of the avatar. Use `light` on dark backgrounds and `dark` on light backgrounds.",
           "declarations": [
             {
               "name": "variant",
@@ -1392,39 +1400,13 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             }
           ],
           "tags": {
-            "default": "AvatarVariant.Light"
+            "default": "\"light\""
           },
           "defaultValue": {
-            "kind": "symbol",
-            "name": "AvatarVariant.Light",
-            "value": "AvatarVariant.Light"
+            "kind": "string",
+            "value": "light"
           }
         },
-        {
-          "kind": "property",
-          "name": "ref",
-          "required": false,
-          "type": {
-            "kind": "external",
-            "name": "Ref",
-            "url": "https://reactjs.org/docs/refs-and-the-dom.html",
-            "typeParameters": [
-              {
-                "kind": "symbol",
-                "name": "HTMLButtonElement",
-                "value": "HTMLButtonElement"
-              }
-            ]
-          },
-          "description": "",
-          "declarations": [
-            {
-              "name": "ref",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/avatar/lib/Avatar.tsx"
-            }
-          ],
-          "tags": {}
-        },
         {
           "kind": "property",
           "name": "objectFit",
@@ -1434,14 +1416,20 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "name": "Property.ObjectFit",
             "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit"
           },
-          "description": "The object-fit CSS property sets how the content of a replaced element,\nsuch as an `<img>` or `<video>`, should be resized to fit its container.\nSee [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit).\nIf your image is not a square, you can use this property to ensure the image is rendered properly.",
+          "description": "An objectFit property that can customize how to resize your image to fit its container.",
           "declarations": [
             {
               "name": "objectFit",
               "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/avatar/lib/Avatar.tsx"
             }
           ],
-          "tags": {}
+          "tags": {
+            "default": "\"contain\""
+          },
+          "defaultValue": {
+            "kind": "string",
+            "value": "contain"
+          }
         },
         {
           "kind": "property",
@@ -1451,17 +1439,48 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "kind": "union",
             "value": [
               {
-                "kind": "symbol",
-                "name": "SystemIconCircleSize",
-                "value": "SystemIconCircleSize"
+                "kind": "string",
+                "value": "extraSmall"
               },
               {
-                "kind": "primitive",
-                "value": "number"
+                "kind": "string",
+                "value": "small"
+              },
+              {
+                "kind": "string",
+                "value": "medium"
+              },
+              {
+                "kind": "string",
+                "value": "large"
+              },
+              {
+                "kind": "string",
+                "value": "extraLarge"
+              },
+              {
+                "kind": "string",
+                "value": "extraExtraLarge"
+              },
+              {
+                "kind": "parenthesis",
+                "value": {
+                  "kind": "intersection",
+                  "value": [
+                    {
+                      "kind": "primitive",
+                      "value": "string"
+                    },
+                    {
+                      "kind": "object",
+                      "properties": []
+                    }
+                  ]
+                }
               }
             ]
           },
-          "description": "The size of the Avatar.",
+          "description": "The size of the Avatar.\n- `extraExtraLarge`: 7.5rem x 7.5rem (120px  x 120px)\n- `extraLarge`: 4.5rem x 4.5rem (64px x 64px)\n- `large`: 2.5rem x 2.5rem (40px x 40px)\n- `medium`: 2rem x 2rem (32px x 32px)\n- `small`: 1.5rem x 1.5rem (24px x 24px)\n- `small`: 1rem x 1rem (16px x 16px)",
           "declarations": [
             {
               "name": "size",
@@ -1469,12 +1488,11 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             }
           ],
           "tags": {
-            "default": "SystemIconCircleSize.m"
+            "default": "\"medium\""
           },
           "defaultValue": {
-            "kind": "symbol",
-            "name": "SystemIconCircleSize.m",
-            "value": "SystemIconCircleSize.m"
+            "kind": "string",
+            "value": "medium"
           }
         },
         {
@@ -1485,7 +1503,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "kind": "primitive",
             "value": "string"
           },
-          "description": "The alt text of the Avatar image. This prop is also used for the aria-label",
+          "description": "The alt text of the Avatar image. This prop is also used for the aria-label.",
           "declarations": [
             {
               "name": "altText",
@@ -1509,7 +1527,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "kind": "primitive",
             "value": "string"
           },
-          "description": "The url of the Avatar image.",
+          "description": "The URL of the user's photo. For best fit, use square images.",
           "declarations": [
             {
               "name": "url",
@@ -11005,11 +11023,19 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           "name": "variant",
           "required": false,
           "type": {
-            "kind": "symbol",
-            "name": "AvatarVariant",
-            "value": "AvatarVariant"
+            "kind": "union",
+            "value": [
+              {
+                "kind": "string",
+                "value": "light"
+              },
+              {
+                "kind": "string",
+                "value": "dark"
+              }
+            ]
           },
-          "description": "The variant of the Avatar default state. Accepts `Light` or `Dark`.",
+          "description": "The variant of the avatar. Use `light` on dark backgrounds and `dark` on light backgrounds.",
           "declarations": [
             {
               "name": "variant",
@@ -11017,12 +11043,11 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             }
           ],
           "tags": {
-            "default": "AvatarVariant.Light"
+            "default": "\"light\""
           },
           "defaultValue": {
-            "kind": "symbol",
-            "name": "AvatarVariant.Light",
-            "value": "AvatarVariant.Light"
+            "kind": "string",
+            "value": "light"
           }
         },
         {
@@ -11033,17 +11058,48 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "kind": "union",
             "value": [
               {
-                "kind": "symbol",
-                "name": "SystemIconCircleSize",
-                "value": "SystemIconCircleSize"
+                "kind": "string",
+                "value": "extraSmall"
               },
               {
-                "kind": "primitive",
-                "value": "number"
+                "kind": "string",
+                "value": "small"
+              },
+              {
+                "kind": "string",
+                "value": "medium"
+              },
+              {
+                "kind": "string",
+                "value": "large"
+              },
+              {
+                "kind": "string",
+                "value": "extraLarge"
+              },
+              {
+                "kind": "string",
+                "value": "extraExtraLarge"
+              },
+              {
+                "kind": "parenthesis",
+                "value": {
+                  "kind": "intersection",
+                  "value": [
+                    {
+                      "kind": "primitive",
+                      "value": "string"
+                    },
+                    {
+                      "kind": "object",
+                      "properties": []
+                    }
+                  ]
+                }
               }
             ]
           },
-          "description": "The size of the Avatar.",
+          "description": "The size of the Avatar.\n- `extraExtraLarge`: 7.5rem x 7.5rem (120px  x 120px)\n- `extraLarge`: 4.5rem x 4.5rem (64px x 64px)\n- `large`: 2.5rem x 2.5rem (40px x 40px)\n- `medium`: 2rem x 2rem (32px x 32px)\n- `small`: 1.5rem x 1.5rem (24px x 24px)\n- `small`: 1rem x 1rem (16px x 16px)",
           "declarations": [
             {
               "name": "size",
@@ -11051,12 +11107,11 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             }
           ],
           "tags": {
-            "default": "SystemIconCircleSize.m"
+            "default": "\"medium\""
           },
           "defaultValue": {
-            "kind": "symbol",
-            "name": "SystemIconCircleSize.m",
-            "value": "SystemIconCircleSize.m"
+            "kind": "string",
+            "value": "medium"
           }
         },
         {
@@ -11067,7 +11122,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "kind": "primitive",
             "value": "string"
           },
-          "description": "The alt text of the Avatar image. This prop is also used for the aria-label",
+          "description": "The alt text of the Avatar image. This prop is also used for the aria-label.",
           "declarations": [
             {
               "name": "altText",
@@ -11091,7 +11146,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "kind": "primitive",
             "value": "string"
           },
-          "description": "The url of the Avatar image.",
+          "description": "The URL of the user's photo. For best fit, use square images.",
           "declarations": [
             {
               "name": "url",
@@ -11102,39 +11157,187 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
         },
         {
           "kind": "property",
-          "name": "as",
+          "name": "objectFit",
           "required": false,
           "type": {
-            "kind": "string",
-            "value": "div"
+            "kind": "external",
+            "name": "Property.ObjectFit",
+            "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit"
           },
-          "description": "The alternative container type for the button. Uses Emotion's special `as` prop.\nWill render an `div` tag instead of a `button` when defined.",
+          "description": "An objectFit property that can customize how to resize your image to fit its container.",
           "declarations": [
             {
-              "name": "as",
+              "name": "objectFit",
               "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/avatar/lib/Avatar.tsx"
             }
           ],
-          "tags": {},
+          "tags": {
+            "default": "\"contain\""
+          },
           "defaultValue": {
             "kind": "string",
-            "value": "div"
+            "value": "contain"
           }
         },
         {
           "kind": "property",
-          "name": "objectFit",
-          "required": false,
+          "name": "children",
+          "description": "",
+          "tags": {},
+          "declarations": [],
           "type": {
             "kind": "external",
-            "name": "Property.ObjectFit",
-            "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit"
+            "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": "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": "PillModel"
+          }
+        },
+        {
+          "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": "PillModel"
+                },
+                "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": "PillModel"
+    }
+  },
+  {
+    "name": "PillCountProps",
+    "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/pill/lib/PillCount.tsx",
+    "description": "",
+    "declarations": [
+      {
+        "name": "PillCountProps",
+        "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/pill/lib/PillCount.tsx"
+      }
+    ],
+    "tags": {},
+    "type": {
+      "kind": "alias",
+      "name": "PillCount"
+    }
+  },
+  {
+    "name": "PillCount",
+    "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/pill/lib/PillCount.tsx",
+    "description": "",
+    "declarations": [
+      {
+        "name": "PillCount",
+        "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/pill/lib/PillCount.tsx"
+      }
+    ],
+    "tags": {},
+    "type": {
+      "kind": "enhancedComponent",
+      "componentType": "regular",
+      "displayName": "Pill.Avatar",
+      "props": [
+        {
+          "kind": "property",
+          "name": "cs",
+          "required": false,
+          "type": {
+            "kind": "symbol",
+            "name": "CSToPropsInput",
+            "value": "CSToPropsInput"
           },
-          "description": "The object-fit CSS property sets how the content of a replaced element,\nsuch as an `<img>` or `<video>`, should be resized to fit its container.\nSee [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit).\nIf your image is not a square, you can use this property to ensure the image is rendered properly.",
+          "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": "objectFit",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/avatar/lib/Avatar.tsx"
+              "name": "cs",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
             }
           ],
           "tags": {}
@@ -11142,13 +11345,389 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
         {
           "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.ReactNode",
+            "name": "React.ElementType",
+            "url": "https://developer.mozilla.org/en-US/docs/Web/API/element"
+          },
+          "defaultValue": {
+            "kind": "external",
+            "name": "span",
+            "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span"
+          }
+        },
+        {
+          "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": "span",
+                  "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span"
+                }
+              }
+            ]
+          }
+        }
+      ],
+      "baseElement": {
+        "kind": "external",
+        "name": "span",
+        "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span"
+      },
+      "styleComponent": {
+        "kind": "symbol",
+        "name": "Flex"
+      }
+    }
+  },
+  {
+    "name": "PillIconProps",
+    "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/pill/lib/PillIcon.tsx",
+    "description": "",
+    "declarations": [
+      {
+        "name": "PillIconProps",
+        "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/pill/lib/PillIcon.tsx"
+      }
+    ],
+    "tags": {},
+    "type": {
+      "kind": "alias",
+      "name": "PillIcon"
+    }
+  },
+  {
+    "name": "PillIcon",
+    "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/pill/lib/PillIcon.tsx",
+    "description": "",
+    "declarations": [
+      {
+        "name": "PillIcon",
+        "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/pill/lib/PillIcon.tsx"
+      }
+    ],
+    "tags": {},
+    "type": {
+      "kind": "enhancedComponent",
+      "componentType": "subcomponent",
+      "props": [
+        {
+          "kind": "property",
+          "name": "icon",
+          "required": false,
+          "type": {
+            "kind": "symbol",
+            "name": "CanvasSystemIcon",
+            "value": "CanvasSystemIcon"
+          },
+          "description": "The system icon rendered by the component",
+          "declarations": [
+            {
+              "name": "icon",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/pill/lib/PillIcon.tsx"
+            }
+          ],
+          "tags": {
+            "default": "`plusIcon`"
+          },
+          "defaultValue": {
+            "kind": "symbol",
+            "name": "`plusIcon`",
+            "value": "`plusIcon`"
+          }
+        },
+        {
+          "kind": "property",
+          "name": "fill",
+          "required": false,
+          "type": {
+            "kind": "primitive",
+            "value": "string"
+          },
+          "description": "The fill color of the SystemIcon. This overrides `color`.",
+          "declarations": [
+            {
+              "name": "fill",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/icon/lib/SystemIcon.tsx"
+            }
+          ],
+          "tags": {
+            "deprecated": "`fill` is deprecated and will be removed in a future version. Please use `color` and specify `accent` color if you want `accent` to be different from `color`."
+          }
+        },
+        {
+          "kind": "property",
+          "name": "background",
+          "required": false,
+          "type": {
+            "kind": "primitive",
+            "value": "string"
+          },
+          "description": "The background color of the SystemIcon.",
+          "declarations": [
+            {
+              "name": "background",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/icon/lib/SystemIcon.tsx"
+            }
+          ],
+          "tags": {
+            "default": "transparent"
+          },
+          "defaultValue": {
+            "kind": "symbol",
+            "name": "transparent",
+            "value": "transparent"
+          }
+        },
+        {
+          "kind": "property",
+          "name": "color",
+          "required": false,
+          "type": {
+            "kind": "primitive",
+            "value": "string"
+          },
+          "description": "The color of the SystemIcon. This defines `accent` and `fill`. `color` may be overwritten by `accent` and `fill`.",
+          "declarations": [
+            {
+              "name": "color",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/icon/lib/SystemIcon.tsx"
+            }
+          ],
+          "tags": {
+            "default": "base.licorice200"
+          },
+          "defaultValue": {
+            "kind": "symbol",
+            "name": "base.licorice200",
+            "value": "base.licorice200"
+          }
+        },
+        {
+          "kind": "property",
+          "name": "shouldMirror",
+          "required": false,
+          "type": {
+            "kind": "primitive",
+            "value": "boolean"
+          },
+          "description": "If set to `true`, transform the SVG's x-axis to mirror the graphic",
+          "declarations": [
+            {
+              "name": "shouldMirror",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/icon/lib/Svg.tsx"
+            }
+          ],
+          "tags": {
+            "default": "false"
+          },
+          "defaultValue": {
+            "kind": "boolean",
+            "value": false
+          }
+        },
+        {
+          "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": "size",
+          "required": false,
+          "type": {
+            "kind": "union",
+            "value": [
+              {
+                "kind": "primitive",
+                "value": "number"
+              },
+              {
+                "kind": "primitive",
+                "value": "string"
+              }
+            ]
+          },
+          "description": "The size of the SystemIcon in `px`.",
+          "declarations": [
+            {
+              "name": "size",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/icon/lib/SystemIcon.tsx"
+            }
+          ],
+          "tags": {},
+          "defaultValue": {
+            "kind": "number",
+            "value": 20
+          }
+        },
+        {
+          "kind": "property",
+          "name": "accent",
+          "required": false,
+          "type": {
+            "kind": "primitive",
+            "value": "string"
+          },
+          "description": "The accent color of the SystemIcon. This overrides `color`.",
+          "declarations": [
+            {
+              "name": "accent",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/icon/lib/SystemIcon.tsx"
+            }
+          ],
+          "tags": {}
+        },
+        {
+          "kind": "property",
+          "name": "accentHover",
+          "required": false,
+          "type": {
+            "kind": "primitive",
+            "value": "string"
+          },
+          "description": "The accent color of the SystemIcon on hover. This overrides `colorHover`.",
+          "declarations": [
+            {
+              "name": "accentHover",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/icon/lib/SystemIcon.tsx"
+            }
+          ],
+          "tags": {
+            "deprecated": "`accentHover` is deprecated and will be removed in a future version. Please use the following instead in your style overrides:\n```tsx\n'&:hover': {\n[systemIconStencil.vars.accent]: desiredAccentHoverColor\n}\n```"
+          }
+        },
+        {
+          "kind": "property",
+          "name": "backgroundHover",
+          "required": false,
+          "type": {
+            "kind": "primitive",
+            "value": "string"
+          },
+          "description": "The background color of the SystemIcon on hover.",
+          "declarations": [
+            {
+              "name": "backgroundHover",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/icon/lib/SystemIcon.tsx"
+            }
+          ],
+          "tags": {
+            "default": "transparent",
+            "deprecated": "`backgroundHover` is deprecated and will be removed in a future version. Please use the following instead in your style overrides:\n```tsx\n'&:hover': {\n[systemIconStencil.vars.background]: desiredBackgroundHoverColor\n}\n```"
+          },
+          "defaultValue": {
+            "kind": "symbol",
+            "name": "transparent",
+            "value": "transparent"
+          }
+        },
+        {
+          "kind": "property",
+          "name": "colorHover",
+          "required": false,
+          "type": {
+            "kind": "primitive",
+            "value": "string"
+          },
+          "description": "The hover color of the SystemIcon. This defines `accentHover` and `fillHover`. `colorHover` may be overwritten by `accentHover` and `fillHover`.",
+          "declarations": [
+            {
+              "name": "colorHover",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/icon/lib/SystemIcon.tsx"
+            }
+          ],
+          "tags": {
+            "default": "base.licorice200",
+            "deprecated": "`colorHover` is deprecated and will be removed in a future version. We have removed the default hover styles on SystemIcon. Please\nuse the following instead in your style overrides:\n```tsx\n'&:hover': {\n[systemIconStencil.vars.color]: desiredColorHoverColor\n}\n```"
+          },
+          "defaultValue": {
+            "kind": "symbol",
+            "name": "base.licorice200",
+            "value": "base.licorice200"
+          }
+        },
+        {
+          "kind": "property",
+          "name": "fillHover",
+          "required": false,
+          "type": {
+            "kind": "primitive",
+            "value": "string"
+          },
+          "description": "The fill color of the SystemIcon on hover. This overrides `colorHover`.",
+          "declarations": [
+            {
+              "name": "fillHover",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/icon/lib/SystemIcon.tsx"
+            }
+          ],
+          "tags": {
+            "deprecated": "`fillHover` is deprecated and will be removed in a future version. Please use the following instead in your style overrides:\n```tsx\n'&:hover': {\n[systemIconStencil.vars.fill]: desiredFillHoverColor\n}\n```"
           }
         },
         {
@@ -11164,8 +11743,8 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           },
           "defaultValue": {
             "kind": "external",
-            "name": "button",
-            "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button"
+            "name": "span",
+            "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span"
           }
         },
         {
@@ -11185,547 +11764,8 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
                 "required": true,
                 "defaultValue": {
                   "kind": "external",
-                  "name": "button",
-                  "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button"
-                }
-              }
-            ]
-          }
-        },
-        {
-          "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": "PillModel"
-          }
-        },
-        {
-          "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": "PillModel"
-                },
-                "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": "button",
-        "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button"
-      },
-      "model": "PillModel"
-    }
-  },
-  {
-    "name": "PillCountProps",
-    "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/pill/lib/PillCount.tsx",
-    "description": "",
-    "declarations": [
-      {
-        "name": "PillCountProps",
-        "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/pill/lib/PillCount.tsx"
-      }
-    ],
-    "tags": {},
-    "type": {
-      "kind": "alias",
-      "name": "PillCount"
-    }
-  },
-  {
-    "name": "PillCount",
-    "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/pill/lib/PillCount.tsx",
-    "description": "",
-    "declarations": [
-      {
-        "name": "PillCount",
-        "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/pill/lib/PillCount.tsx"
-      }
-    ],
-    "tags": {},
-    "type": {
-      "kind": "enhancedComponent",
-      "componentType": "regular",
-      "displayName": "Pill.Avatar",
-      "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",
-          "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": "span",
-            "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span"
-          }
-        },
-        {
-          "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": "span",
-                  "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span"
-                }
-              }
-            ]
-          }
-        }
-      ],
-      "baseElement": {
-        "kind": "external",
-        "name": "span",
-        "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span"
-      },
-      "styleComponent": {
-        "kind": "symbol",
-        "name": "Flex"
-      }
-    }
-  },
-  {
-    "name": "PillIconProps",
-    "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/pill/lib/PillIcon.tsx",
-    "description": "",
-    "declarations": [
-      {
-        "name": "PillIconProps",
-        "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/pill/lib/PillIcon.tsx"
-      }
-    ],
-    "tags": {},
-    "type": {
-      "kind": "alias",
-      "name": "PillIcon"
-    }
-  },
-  {
-    "name": "PillIcon",
-    "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/pill/lib/PillIcon.tsx",
-    "description": "",
-    "declarations": [
-      {
-        "name": "PillIcon",
-        "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/pill/lib/PillIcon.tsx"
-      }
-    ],
-    "tags": {},
-    "type": {
-      "kind": "enhancedComponent",
-      "componentType": "subcomponent",
-      "props": [
-        {
-          "kind": "property",
-          "name": "icon",
-          "required": false,
-          "type": {
-            "kind": "symbol",
-            "name": "CanvasSystemIcon",
-            "value": "CanvasSystemIcon"
-          },
-          "description": "The system icon rendered by the component",
-          "declarations": [
-            {
-              "name": "icon",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/pill/lib/PillIcon.tsx"
-            }
-          ],
-          "tags": {
-            "default": "`plusIcon`"
-          },
-          "defaultValue": {
-            "kind": "symbol",
-            "name": "`plusIcon`",
-            "value": "`plusIcon`"
-          }
-        },
-        {
-          "kind": "property",
-          "name": "fill",
-          "required": false,
-          "type": {
-            "kind": "primitive",
-            "value": "string"
-          },
-          "description": "The fill color of the SystemIcon. This overrides `color`.",
-          "declarations": [
-            {
-              "name": "fill",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/icon/lib/SystemIcon.tsx"
-            }
-          ],
-          "tags": {
-            "deprecated": "`fill` is deprecated and will be removed in a future version. Please use `color` and specify `accent` color if you want `accent` to be different from `color`."
-          }
-        },
-        {
-          "kind": "property",
-          "name": "background",
-          "required": false,
-          "type": {
-            "kind": "primitive",
-            "value": "string"
-          },
-          "description": "The background color of the SystemIcon.",
-          "declarations": [
-            {
-              "name": "background",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/icon/lib/SystemIcon.tsx"
-            }
-          ],
-          "tags": {
-            "default": "transparent"
-          },
-          "defaultValue": {
-            "kind": "symbol",
-            "name": "transparent",
-            "value": "transparent"
-          }
-        },
-        {
-          "kind": "property",
-          "name": "color",
-          "required": false,
-          "type": {
-            "kind": "primitive",
-            "value": "string"
-          },
-          "description": "The color of the SystemIcon. This defines `accent` and `fill`. `color` may be overwritten by `accent` and `fill`.",
-          "declarations": [
-            {
-              "name": "color",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/icon/lib/SystemIcon.tsx"
-            }
-          ],
-          "tags": {
-            "default": "base.licorice200"
-          },
-          "defaultValue": {
-            "kind": "symbol",
-            "name": "base.licorice200",
-            "value": "base.licorice200"
-          }
-        },
-        {
-          "kind": "property",
-          "name": "shouldMirror",
-          "required": false,
-          "type": {
-            "kind": "primitive",
-            "value": "boolean"
-          },
-          "description": "If set to `true`, transform the SVG's x-axis to mirror the graphic",
-          "declarations": [
-            {
-              "name": "shouldMirror",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/icon/lib/Svg.tsx"
-            }
-          ],
-          "tags": {
-            "default": "false"
-          },
-          "defaultValue": {
-            "kind": "boolean",
-            "value": false
-          }
-        },
-        {
-          "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": "size",
-          "required": false,
-          "type": {
-            "kind": "union",
-            "value": [
-              {
-                "kind": "primitive",
-                "value": "number"
-              },
-              {
-                "kind": "primitive",
-                "value": "string"
-              }
-            ]
-          },
-          "description": "The size of the SystemIcon in `px`.",
-          "declarations": [
-            {
-              "name": "size",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/icon/lib/SystemIcon.tsx"
-            }
-          ],
-          "tags": {},
-          "defaultValue": {
-            "kind": "number",
-            "value": 20
-          }
-        },
-        {
-          "kind": "property",
-          "name": "accent",
-          "required": false,
-          "type": {
-            "kind": "primitive",
-            "value": "string"
-          },
-          "description": "The accent color of the SystemIcon. This overrides `color`.",
-          "declarations": [
-            {
-              "name": "accent",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/icon/lib/SystemIcon.tsx"
-            }
-          ],
-          "tags": {}
-        },
-        {
-          "kind": "property",
-          "name": "accentHover",
-          "required": false,
-          "type": {
-            "kind": "primitive",
-            "value": "string"
-          },
-          "description": "The accent color of the SystemIcon on hover. This overrides `colorHover`.",
-          "declarations": [
-            {
-              "name": "accentHover",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/icon/lib/SystemIcon.tsx"
-            }
-          ],
-          "tags": {
-            "deprecated": "`accentHover` is deprecated and will be removed in a future version. Please use the following instead in your style overrides:\n```tsx\n'&:hover': {\n[systemIconStencil.vars.accent]: desiredAccentHoverColor\n}\n```"
-          }
-        },
-        {
-          "kind": "property",
-          "name": "backgroundHover",
-          "required": false,
-          "type": {
-            "kind": "primitive",
-            "value": "string"
-          },
-          "description": "The background color of the SystemIcon on hover.",
-          "declarations": [
-            {
-              "name": "backgroundHover",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/icon/lib/SystemIcon.tsx"
-            }
-          ],
-          "tags": {
-            "default": "transparent",
-            "deprecated": "`backgroundHover` is deprecated and will be removed in a future version. Please use the following instead in your style overrides:\n```tsx\n'&:hover': {\n[systemIconStencil.vars.background]: desiredBackgroundHoverColor\n}\n```"
-          },
-          "defaultValue": {
-            "kind": "symbol",
-            "name": "transparent",
-            "value": "transparent"
-          }
-        },
-        {
-          "kind": "property",
-          "name": "colorHover",
-          "required": false,
-          "type": {
-            "kind": "primitive",
-            "value": "string"
-          },
-          "description": "The hover color of the SystemIcon. This defines `accentHover` and `fillHover`. `colorHover` may be overwritten by `accentHover` and `fillHover`.",
-          "declarations": [
-            {
-              "name": "colorHover",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/icon/lib/SystemIcon.tsx"
-            }
-          ],
-          "tags": {
-            "default": "base.licorice200",
-            "deprecated": "`colorHover` is deprecated and will be removed in a future version. We have removed the default hover styles on SystemIcon. Please\nuse the following instead in your style overrides:\n```tsx\n'&:hover': {\n[systemIconStencil.vars.color]: desiredColorHoverColor\n}\n```"
-          },
-          "defaultValue": {
-            "kind": "symbol",
-            "name": "base.licorice200",
-            "value": "base.licorice200"
-          }
-        },
-        {
-          "kind": "property",
-          "name": "fillHover",
-          "required": false,
-          "type": {
-            "kind": "primitive",
-            "value": "string"
-          },
-          "description": "The fill color of the SystemIcon on hover. This overrides `colorHover`.",
-          "declarations": [
-            {
-              "name": "fillHover",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/icon/lib/SystemIcon.tsx"
-            }
-          ],
-          "tags": {
-            "deprecated": "`fillHover` is deprecated and will be removed in a future version. Please use the following instead in your style overrides:\n```tsx\n'&:hover': {\n[systemIconStencil.vars.fill]: desiredFillHoverColor\n}\n```"
-          }
-        },
-        {
-          "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": "span",
-            "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span"
-          }
-        },
-        {
-          "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": "span",
-                  "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span"
+                  "name": "span",
+                  "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span"
                 }
               }
             ]
@@ -37160,64 +37200,618 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
     }
   },
   {
-    "name": "AvatarVariant",
+    "name": "AvatarProps",
     "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/avatar/lib/Avatar.tsx",
     "description": "",
     "declarations": [
       {
-        "name": "AvatarVariant",
+        "name": "AvatarProps",
         "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/avatar/lib/Avatar.tsx"
       }
     ],
     "tags": {},
     "type": {
-      "kind": "object",
-      "typeParameters": [],
-      "properties": [
+      "kind": "alias",
+      "name": "Avatar"
+    }
+  },
+  {
+    "name": "avatarStencil",
+    "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/avatar/lib/Avatar.tsx",
+    "description": "",
+    "declarations": [
+      {
+        "name": "avatarStencil",
+        "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/avatar/lib/Avatar.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": "Light",
+          "name": "vars",
+          "required": true,
           "type": {
-            "kind": "number",
-            "value": 0
-          }
+            "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": "Dark",
+          "name": "base",
+          "required": true,
           "type": {
-            "kind": "number",
-            "value": 1
-          }
+            "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": {}
         }
       ],
-      "callSignatures": []
+      "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": "AvatarProps",
+    "name": "Avatar",
     "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/avatar/lib/Avatar.tsx",
     "description": "",
     "declarations": [
       {
-        "name": "AvatarProps",
+        "name": "Avatar",
         "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/avatar/lib/Avatar.tsx"
       }
     ],
     "tags": {},
     "type": {
-      "kind": "object",
-      "properties": [
+      "kind": "enhancedComponent",
+      "componentType": "regular",
+      "displayName": "Avatar",
+      "props": [
         {
           "kind": "property",
           "name": "variant",
           "required": false,
           "type": {
-            "kind": "symbol",
-            "name": "AvatarVariant",
-            "value": "AvatarVariant"
+            "kind": "union",
+            "value": [
+              {
+                "kind": "string",
+                "value": "light"
+              },
+              {
+                "kind": "string",
+                "value": "dark"
+              }
+            ]
           },
-          "description": "The variant of the Avatar default state. Accepts `Light` or `Dark`.",
+          "description": "The variant of the avatar. Use `light` on dark backgrounds and `dark` on light backgrounds.",
           "declarations": [
             {
               "name": "variant",
@@ -37225,7 +37819,11 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             }
           ],
           "tags": {
-            "default": "AvatarVariant.Light"
+            "default": "\"light\""
+          },
+          "defaultValue": {
+            "kind": "string",
+            "value": "light"
           }
         },
         {
@@ -37236,17 +37834,48 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "kind": "union",
             "value": [
               {
-                "kind": "symbol",
-                "name": "SystemIconCircleSize",
-                "value": "SystemIconCircleSize"
+                "kind": "string",
+                "value": "extraSmall"
               },
               {
-                "kind": "primitive",
-                "value": "number"
+                "kind": "string",
+                "value": "small"
+              },
+              {
+                "kind": "string",
+                "value": "medium"
+              },
+              {
+                "kind": "string",
+                "value": "large"
+              },
+              {
+                "kind": "string",
+                "value": "extraLarge"
+              },
+              {
+                "kind": "string",
+                "value": "extraExtraLarge"
+              },
+              {
+                "kind": "parenthesis",
+                "value": {
+                  "kind": "intersection",
+                  "value": [
+                    {
+                      "kind": "primitive",
+                      "value": "string"
+                    },
+                    {
+                      "kind": "object",
+                      "properties": []
+                    }
+                  ]
+                }
               }
             ]
           },
-          "description": "The size of the Avatar.",
+          "description": "The size of the Avatar.\n- `extraExtraLarge`: 7.5rem x 7.5rem (120px  x 120px)\n- `extraLarge`: 4.5rem x 4.5rem (64px x 64px)\n- `large`: 2.5rem x 2.5rem (40px x 40px)\n- `medium`: 2rem x 2rem (32px x 32px)\n- `small`: 1.5rem x 1.5rem (24px x 24px)\n- `small`: 1rem x 1rem (16px x 16px)",
           "declarations": [
             {
               "name": "size",
@@ -37254,7 +37883,11 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             }
           ],
           "tags": {
-            "default": "SystemIconCircleSize.m"
+            "default": "\"medium\""
+          },
+          "defaultValue": {
+            "kind": "string",
+            "value": "medium"
           }
         },
         {
@@ -37265,7 +37898,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "kind": "primitive",
             "value": "string"
           },
-          "description": "The alt text of the Avatar image. This prop is also used for the aria-label",
+          "description": "The alt text of the Avatar image. This prop is also used for the aria-label.",
           "declarations": [
             {
               "name": "altText",
@@ -37274,6 +37907,10 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           ],
           "tags": {
             "default": "Avatar"
+          },
+          "defaultValue": {
+            "kind": "string",
+            "value": "Avatar"
           }
         },
         {
@@ -37284,7 +37921,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "kind": "primitive",
             "value": "string"
           },
-          "description": "The url of the Avatar image.",
+          "description": "The URL of the user's photo. For best fit, use square images.",
           "declarations": [
             {
               "name": "url",
@@ -37293,23 +37930,6 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           ],
           "tags": {}
         },
-        {
-          "kind": "property",
-          "name": "as",
-          "required": false,
-          "type": {
-            "kind": "string",
-            "value": "div"
-          },
-          "description": "The alternative container type for the button. Uses Emotion's special `as` prop.\nWill render an `div` tag instead of a `button` when defined.",
-          "declarations": [
-            {
-              "name": "as",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/avatar/lib/Avatar.tsx"
-            }
-          ],
-          "tags": {}
-        },
         {
           "kind": "property",
           "name": "objectFit",
@@ -37319,69 +37939,80 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "name": "Property.ObjectFit",
             "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit"
           },
-          "description": "The object-fit CSS property sets how the content of a replaced element,\nsuch as an `<img>` or `<video>`, should be resized to fit its container.\nSee [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit).\nIf your image is not a square, you can use this property to ensure the image is rendered properly.",
+          "description": "An objectFit property that can customize how to resize your image to fit its container.",
           "declarations": [
             {
               "name": "objectFit",
               "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/avatar/lib/Avatar.tsx"
             }
           ],
-          "tags": {}
-        }
-      ]
-    }
-  },
-  {
-    "name": "Avatar",
-    "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/avatar/lib/Avatar.tsx",
-    "description": "",
-    "declarations": [
-      {
-        "name": "Avatar",
-        "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/avatar/lib/Avatar.tsx"
-      }
-    ],
-    "tags": {},
-    "type": {
-      "kind": "object",
-      "properties": [
+          "tags": {
+            "default": "\"contain\""
+          },
+          "defaultValue": {
+            "kind": "string",
+            "value": "contain"
+          }
+        },
         {
           "kind": "property",
-          "name": "Variant",
-          "required": true,
-          "type": {
-            "kind": "symbol",
-            "name": "AvatarVariant",
-            "value": "typeof AvatarVariant"
-          },
+          "name": "children",
           "description": "",
-          "declarations": [
-            {
-              "name": "Variant",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/avatar/lib/Avatar.tsx"
-            }
-          ],
-          "tags": {}
+          "tags": {},
+          "declarations": [],
+          "type": {
+            "kind": "external",
+            "name": "React.ReactNode",
+            "url": "https://reactjs.org/docs/rendering-elements.html"
+          }
         },
         {
           "kind": "property",
-          "name": "Size",
-          "required": true,
+          "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": "symbol",
-            "name": "SystemIconCircleSize",
-            "value": "typeof SystemIconCircleSize"
+            "kind": "external",
+            "name": "React.ElementType",
+            "url": "https://developer.mozilla.org/en-US/docs/Web/API/element"
           },
-          "description": "",
-          "declarations": [
-            {
-              "name": "Size",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/avatar/lib/Avatar.tsx"
-            }
-          ],
-          "tags": {}
+          "defaultValue": {
+            "kind": "external",
+            "name": "button",
+            "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button"
+          }
+        },
+        {
+          "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": "button",
+                  "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button"
+                }
+              }
+            ]
+          }
         }
-      ]
+      ],
+      "baseElement": {
+        "kind": "external",
+        "name": "button",
+        "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button"
+      }
     }
   },
   {
@@ -98521,24 +99152,6 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           ],
           "tags": {}
         },
-        {
-          "kind": "property",
-          "name": "theme",
-          "required": false,
-          "type": {
-            "kind": "symbol",
-            "name": "EmotionCanvasTheme",
-            "value": "EmotionCanvasTheme"
-          },
-          "description": "",
-          "declarations": [
-            {
-              "name": "theme",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/theming/types.ts"
-            }
-          ],
-          "tags": {}
-        },
         {
           "kind": "property",
           "name": "grow",
@@ -99135,24 +99748,6 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           ],
           "tags": {}
         },
-        {
-          "kind": "property",
-          "name": "theme",
-          "required": false,
-          "type": {
-            "kind": "symbol",
-            "name": "EmotionCanvasTheme",
-            "value": "EmotionCanvasTheme"
-          },
-          "description": "",
-          "declarations": [
-            {
-              "name": "theme",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/theming/types.ts"
-            }
-          ],
-          "tags": {}
-        },
         {
           "kind": "property",
           "name": "grow",
@@ -179692,24 +180287,6 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "value": 55
           }
         },
-        {
-          "kind": "property",
-          "name": "theme",
-          "required": false,
-          "type": {
-            "kind": "symbol",
-            "name": "EmotionCanvasTheme",
-            "value": "EmotionCanvasTheme"
-          },
-          "description": "",
-          "declarations": [
-            {
-              "name": "theme",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/theming/types.ts"
-            }
-          ],
-          "tags": {}
-        },
         {
           "kind": "property",
           "name": "grow",
@@ -207762,24 +208339,6 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           ],
           "tags": {}
         },
-        {
-          "kind": "property",
-          "name": "theme",
-          "required": false,
-          "type": {
-            "kind": "symbol",
-            "name": "EmotionCanvasTheme",
-            "value": "EmotionCanvasTheme"
-          },
-          "description": "",
-          "declarations": [
-            {
-              "name": "theme",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/theming/types.ts"
-            }
-          ],
-          "tags": {}
-        },
         {
           "kind": "property",
           "name": "grow",
@@ -231508,6 +232067,33 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       ]
     }
   },
+  {
+    "name": "ValueOf",
+    "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/text-area/lib/TextArea.tsx",
+    "description": "",
+    "declarations": [
+      {
+        "name": "ValueOf",
+        "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/text-area/lib/TextArea.tsx"
+      }
+    ],
+    "tags": {},
+    "type": {
+      "kind": "type",
+      "typeParameters": [
+        {
+          "kind": "typeParameter",
+          "name": "T",
+          "required": true
+        }
+      ],
+      "value": {
+        "kind": "symbol",
+        "name": "ValueOf",
+        "value": "ValueOf<T>"
+      }
+    }
+  },
   {
     "name": "TextAreaProps",
     "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/text-area/lib/TextArea.tsx",
@@ -231537,227 +232123,686 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
     "tags": {},
     "type": {
       "kind": "object",
-      "typeParameters": [],
       "properties": [
         {
           "kind": "property",
           "name": "None",
+          "defaultValue": {
+            "kind": "string",
+            "value": "none"
+          },
           "type": {
             "kind": "string",
             "value": "none"
-          }
+          },
+          "required": true,
+          "description": "",
+          "declarations": [
+            {
+              "name": "None",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/text-area/lib/TextArea.tsx"
+            }
+          ],
+          "tags": {}
         },
         {
           "kind": "property",
           "name": "Both",
+          "defaultValue": {
+            "kind": "string",
+            "value": "both"
+          },
           "type": {
             "kind": "string",
             "value": "both"
-          }
+          },
+          "required": true,
+          "description": "",
+          "declarations": [
+            {
+              "name": "Both",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/text-area/lib/TextArea.tsx"
+            }
+          ],
+          "tags": {}
         },
         {
           "kind": "property",
           "name": "Horizontal",
+          "defaultValue": {
+            "kind": "string",
+            "value": "horizontal"
+          },
           "type": {
             "kind": "string",
             "value": "horizontal"
-          }
+          },
+          "required": true,
+          "description": "",
+          "declarations": [
+            {
+              "name": "Horizontal",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/text-area/lib/TextArea.tsx"
+            }
+          ],
+          "tags": {}
         },
         {
           "kind": "property",
           "name": "Vertical",
+          "defaultValue": {
+            "kind": "string",
+            "value": "vertical"
+          },
           "type": {
             "kind": "string",
             "value": "vertical"
-          }
+          },
+          "required": true,
+          "description": "",
+          "declarations": [
+            {
+              "name": "Vertical",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/text-area/lib/TextArea.tsx"
+            }
+          ],
+          "tags": {}
         }
-      ],
-      "callSignatures": []
+      ]
     }
   },
   {
-    "name": "TextArea",
+    "name": "textAreaStencil",
     "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/text-area/lib/TextArea.tsx",
     "description": "",
     "declarations": [
       {
-        "name": "TextArea",
+        "name": "textAreaStencil",
         "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/text-area/lib/TextArea.tsx"
       }
     ],
     "tags": {},
     "type": {
-      "kind": "enhancedComponent",
-      "componentType": "regular",
-      "displayName": "TextArea",
-      "props": [
+      "kind": "function",
+      "parameters": [
         {
-          "kind": "property",
-          "name": "disabled",
-          "required": false,
+          "kind": "parameter",
+          "name": "options",
           "type": {
-            "kind": "primitive",
-            "value": "boolean"
+            "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"
+              }
+            }
           },
-          "description": "If true, set the TextArea to the disabled state.",
+          "required": false,
+          "rest": false,
+          "description": "",
           "declarations": [
             {
-              "name": "disabled",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/text-area/lib/TextArea.tsx"
+              "name": "options",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
             }
           ],
-          "tags": {
-            "default": "false"
+          "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>"
           },
-          "defaultValue": {
-            "kind": "boolean",
-            "value": false
-          }
+          "description": "",
+          "declarations": [
+            {
+              "name": "vars",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
+            }
+          ],
+          "tags": {}
         },
         {
           "kind": "property",
-          "name": "error",
-          "required": false,
+          "name": "base",
+          "required": true,
           "type": {
-            "kind": "symbol",
-            "name": "ErrorType",
-            "value": "ErrorType"
+            "kind": "primitive",
+            "value": "string"
           },
-          "description": "The type of error associated with the TextArea (if applicable).",
+          "description": "",
           "declarations": [
             {
-              "name": "error",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/text-area/lib/TextArea.tsx"
+              "name": "base",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
             }
           ],
           "tags": {}
         },
         {
           "kind": "property",
-          "name": "onChange",
-          "required": false,
+          "name": "modifiers",
+          "required": true,
           "type": {
-            "kind": "function",
-            "parameters": [
-              {
-                "kind": "parameter",
-                "name": "e",
-                "type": {
+            "kind": "conditional",
+            "check": {
+              "kind": "tuple",
+              "value": [
+                {
                   "kind": "symbol",
-                  "name": "React.ChangeEvent",
+                  "name": "E",
+                  "value": "E"
+                }
+              ]
+            },
+            "extends": {
+              "kind": "tuple",
+              "value": [
+                {
+                  "kind": "symbol",
+                  "name": "BaseStencil",
                   "typeParameters": [
                     {
-                      "kind": "symbol",
-                      "name": "HTMLTextAreaElement",
-                      "value": "HTMLTextAreaElement"
+                      "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": "ChangeEvent<T>"
+                  "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"
+                    }
+                  ]
                 },
-                "required": true,
-                "rest": false,
-                "description": "",
-                "declarations": [
-                  {
-                    "name": "e",
-                    "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/text-area/lib/TextArea.tsx"
-                  }
-                ],
-                "tags": {}
-              }
-            ],
-            "members": [],
-            "returnType": {
-              "kind": "primitive",
-              "value": "void"
+                {
+                  "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": "The function called when the TextArea state changes.",
+          "description": "",
           "declarations": [
             {
-              "name": "onChange",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/text-area/lib/TextArea.tsx"
+              "name": "modifiers",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
             }
           ],
           "tags": {}
         },
         {
           "kind": "property",
-          "name": "placeholder",
-          "required": false,
+          "name": "defaultModifiers",
+          "required": true,
           "type": {
-            "kind": "primitive",
-            "value": "string"
+            "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": "The placeholder text of the TextArea.",
+          "description": "",
           "declarations": [
             {
-              "name": "placeholder",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/text-area/lib/TextArea.tsx"
+              "name": "defaultModifiers",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
             }
           ],
           "tags": {}
         },
         {
           "kind": "property",
-          "name": "readOnly",
+          "name": "__extends",
           "required": false,
           "type": {
-            "kind": "primitive",
-            "value": "boolean"
+            "kind": "symbol",
+            "name": "E",
+            "value": "E"
           },
-          "description": "If true, set the TextArea to read-only. The user will be unable to interact with the TextArea.",
+          "description": "",
           "declarations": [
             {
-              "name": "readOnly",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/text-area/lib/TextArea.tsx"
+              "name": "__extends",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
             }
           ],
-          "tags": {
-            "default": "false"
-          },
-          "defaultValue": {
-            "kind": "boolean",
-            "value": false
-          }
+          "tags": {}
         },
         {
           "kind": "property",
-          "name": "resize",
-          "required": false,
+          "name": "__vars",
+          "required": true,
           "type": {
             "kind": "symbol",
-            "name": "TextAreaResizeDirection",
-            "value": "TextAreaResizeDirection"
+            "name": "V",
+            "value": "V"
           },
-          "description": "The resize constraints of the TextArea.",
+          "description": "",
           "declarations": [
             {
-              "name": "resize",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/text-area/lib/TextArea.tsx"
+              "name": "__vars",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
             }
           ],
-          "tags": {
-            "default": "TextArea.ResizeDirection.Both"
+          "tags": {}
+        },
+        {
+          "kind": "property",
+          "name": "__modifiers",
+          "required": true,
+          "type": {
+            "kind": "symbol",
+            "name": "M",
+            "value": "M"
           },
-          "defaultValue": {
+          "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": "TextArea.ResizeDirection.Both",
-            "value": "TextArea.ResizeDirection.Both"
+            "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": "TextArea",
+    "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/text-area/lib/TextArea.tsx",
+    "description": "",
+    "declarations": [
+      {
+        "name": "TextArea",
+        "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/text-area/lib/TextArea.tsx"
+      }
+    ],
+    "tags": {},
+    "type": {
+      "kind": "enhancedComponent",
+      "componentType": "regular",
+      "displayName": "TextArea",
+      "props": [
         {
           "kind": "property",
-          "name": "value",
+          "name": "error",
           "required": false,
           "type": {
-            "kind": "primitive",
-            "value": "any"
+            "kind": "symbol",
+            "name": "ErrorType",
+            "value": "ErrorType"
           },
-          "description": "The value of the TextArea.",
+          "description": "The type of error associated with the TextArea (if applicable).",
           "declarations": [
             {
-              "name": "value",
+              "name": "error",
               "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/text-area/lib/TextArea.tsx"
             }
           ],
@@ -231765,21 +232810,27 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
         },
         {
           "kind": "property",
-          "name": "theme",
+          "name": "resize",
           "required": false,
           "type": {
             "kind": "symbol",
-            "name": "EmotionCanvasTheme",
-            "value": "EmotionCanvasTheme"
+            "name": "TextAreaResizeDirection"
           },
-          "description": "",
+          "description": "The resize constraints of the TextArea.",
           "declarations": [
             {
-              "name": "theme",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/theming/types.ts"
+              "name": "resize",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/text-area/lib/TextArea.tsx"
             }
           ],
-          "tags": {}
+          "tags": {
+            "default": "TextArea.ResizeDirection.Both"
+          },
+          "defaultValue": {
+            "kind": "symbol",
+            "name": "TextArea.ResizeDirection.Both",
+            "value": "TextArea.ResizeDirection.Both"
+          }
         },
         {
           "kind": "property",
@@ -233453,6 +234504,569 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       "name": "TextInput"
     }
   },
+  {
+    "name": "textInputStencil",
+    "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/text-input/lib/TextInput.tsx",
+    "description": "",
+    "declarations": [
+      {
+        "name": "textInputStencil",
+        "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/text-input/lib/TextInput.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": "TextInput",
     "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/text-input/lib/TextInput.tsx",
@@ -233513,24 +235127,6 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           ],
           "tags": {}
         },
-        {
-          "kind": "property",
-          "name": "theme",
-          "required": false,
-          "type": {
-            "kind": "symbol",
-            "name": "EmotionCanvasTheme",
-            "value": "EmotionCanvasTheme"
-          },
-          "description": "",
-          "declarations": [
-            {
-              "name": "theme",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/theming/types.ts"
-            }
-          ],
-          "tags": {}
-        },
         {
           "kind": "property",
           "name": "grow",
@@ -256735,11 +258331,11 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
         "value": [
           {
             "kind": "string",
-            "value": "4px"
+            "value": "999px"
           },
           {
             "kind": "string",
-            "value": "999px"
+            "value": "4px"
           },
           {
             "kind": "string",