@workday/canvas-kit-docs 11.0.0-alpha.795-next.0 → 11.0.0-alpha.796-next.0

package/dist/es6/lib/docs.js

@@ -253837,7 +253837,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
         },
         {
           "kind": "property",
-          "name": "variables",
+          "name": "names",
           "required": true,
           "type": {
             "kind": "external",
@@ -253854,10 +253854,38 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
               }
             ]
           },
-          "description": "",
+          "description": "Name and value pairs for things that cannot be statically resolved via the type system. The\nname is resolved via `getPropertyAccessExpressionText` and the value can be anything. It should\nbe whatever you want the runtime value to be, which is usually a hash. For example:\n\n```ts\nconst myVars = createVars('color');\n\ncolor: myVars.color\n```\n\nThe type of `myVars.color` is `string`, but both in runtime and transpile time, the\n`myVars.color` is resolved to a hard value. The `names` cache is a lookup to that value. The\n`names` cache does not track the AST of `color`, so `const {color} = myVars` will not work. The\nkey comes from `getPropertyAccessExpressionText` which replaces `.` with `-`.",
           "declarations": [
             {
-              "name": "variables",
+              "name": "names",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling-transform/lib/utils/types.ts"
+            }
+          ],
+          "tags": {}
+        },
+        {
+          "kind": "property",
+          "name": "extractedNames",
+          "required": true,
+          "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": "Extracted names is a mapping from `names` to a value that will be output to CSS. If you add an\nentry to `names`, add an entry to `extractedNames` where the `key` of `extractedNames` is the\n`value` of `names`.\n\nFor example:\n```ts\n// names\n{ \"myVars.foo\": \"--css-12345\" },\n// extractedNames\n{ \"--css-12345\": \"--css-my-vars-foo\" }\n```\n\nThe value in `names` will be used for transformation of TypeScript files into JavaScript files.\nThe `extractedNames` will be used for the output CSS files.",
+          "declarations": [
+            {
+              "name": "extractedNames",
               "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling-transform/lib/utils/types.ts"
             }
           ],
@@ -253865,16 +253893,16 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
         },
         {
           "kind": "property",
-          "name": "variableScope",
+          "name": "nameScope",
           "required": false,
           "type": {
             "kind": "primitive",
             "value": "string"
           },
-          "description": "Variable scoping allows for a variable lookup to match a predefined scope. For example, in\nstencils, the `base` config can take a function with the locally defined variable names.\n\n```ts\nconst myStencil = createStencil({\n  vars: {color: 'red'},\n  base({color}) {\n    return {\n      [color]: 'blue'\n    }\n  }\n})\n```\n\nIn this case, a variable lookup would fail because there's no global variable named `color`.\nThere's a global variable named `my-color` which is the fully-qualified variable name. The\nstencil parser will add `my-` as a variable scoping when processing style attributes for\nvariable lookup purposes.",
+          "description": "Variable scoping allows for a variable lookup to match a predefined scope. For example, in\nstencils, the `base` config can take a function with the locally defined variable names.\n\n```ts\nconst myStencil = createStencil({\n  vars: {color: 'red'},\n  base({color}) {\n    return {\n      [color]: 'blue'\n    }\n  }\n})\n```\n\nIn this case, a name lookup would fail because there's no global name named `color`. There's a\nglobal name named `my-color` which is the fully-qualified name. The stencil parser will add\n`my-` as a name scoping when processing style attributes for name lookup purposes.",
           "declarations": [
             {
-              "name": "variableScope",
+              "name": "nameScope",
               "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling-transform/lib/utils/types.ts"
             }
           ],
@@ -254809,7 +254837,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
   {
     "name": "getFallbackVariable",
     "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/styling-transform/lib/utils/getFallbackVariable.ts",
-    "description": "Looks for a variable value that doesn't include a fallback and automatically adds one if found in\nthe current cache of variables. This allows fallbacks to be automatically included in\nenvironments without the variables defined. This is most useful for Storybook or other sandboxes\nthat may not have CSS Variables defined. The fallbacks will allow the UI to look correct without\nadditional setup. Fallbacks come from the `fallbackFiles` transform configuration.",
+    "description": "Looks for a variable value that doesn't include a fallback and automatically adds one if found in\nthe current cache of names. This allows fallbacks to be automatically included in environments\nwithout the names defined. This is most useful for Storybook or other sandboxes that may not have\nCSS Variables defined. The fallbacks will allow the UI to look correct without additional setup.\nFallbacks come from the `fallbackFiles` transform configuration.",
     "declarations": [
       {
         "name": "getFallbackVariable",
@@ -254840,7 +254868,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
         },
         {
           "kind": "parameter",
-          "name": "variables",
+          "name": "names",
           "type": {
             "kind": "external",
             "name": "Record",
@@ -254861,7 +254889,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           "description": "",
           "declarations": [
             {
-              "name": "variables",
+              "name": "names",
               "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling-transform/lib/utils/getFallbackVariable.ts"
             }
           ],
@@ -255096,6 +255124,65 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       "value": "NodeTransformer"
     }
   },
+  {
+    "name": "getClassName",
+    "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/styling-transform/lib/utils/handleCreateStencil.ts",
+    "description": "",
+    "declarations": [
+      {
+        "name": "getClassName",
+        "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling-transform/lib/utils/handleCreateStencil.ts"
+      }
+    ],
+    "tags": {},
+    "type": {
+      "kind": "function",
+      "parameters": [
+        {
+          "kind": "parameter",
+          "name": "name",
+          "type": {
+            "kind": "primitive",
+            "value": "string"
+          },
+          "required": true,
+          "rest": false,
+          "description": "",
+          "declarations": [
+            {
+              "name": "name",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling-transform/lib/utils/handleCreateStencil.ts"
+            }
+          ],
+          "tags": {}
+        },
+        {
+          "kind": "parameter",
+          "name": "__1",
+          "type": {
+            "kind": "symbol",
+            "name": "TransformerContext",
+            "value": "TransformerContext"
+          },
+          "required": true,
+          "rest": false,
+          "description": "",
+          "declarations": [
+            {
+              "name": "__1",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling-transform/lib/utils/handleCreateStencil.ts"
+            }
+          ],
+          "tags": {}
+        }
+      ],
+      "members": [],
+      "returnType": {
+        "kind": "primitive",
+        "value": "string"
+      }
+    }
+  },
   {
     "name": "handleCreateStyles",
     "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/styling-transform/lib/utils/handleCreateStyles.ts",
@@ -255457,46 +255544,6 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       }
     }
   },
-  {
-    "name": "makeEmotionSafe",
-    "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/styling-transform/lib/utils/makeEmotionSafe.ts",
-    "description": "Util function to fix an issue with Emotion by\nappending `EmotionIssue#3066` to end of css variable\nSee issue: [#3066](https://github.com/emotion-js/emotion/issues/3066)",
-    "declarations": [
-      {
-        "name": "makeEmotionSafe",
-        "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling-transform/lib/utils/makeEmotionSafe.ts"
-      }
-    ],
-    "tags": {},
-    "type": {
-      "kind": "function",
-      "parameters": [
-        {
-          "kind": "parameter",
-          "name": "key",
-          "type": {
-            "kind": "primitive",
-            "value": "string"
-          },
-          "required": true,
-          "rest": false,
-          "description": "",
-          "declarations": [
-            {
-              "name": "key",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling-transform/lib/utils/makeEmotionSafe.ts"
-            }
-          ],
-          "tags": {}
-        }
-      ],
-      "members": [],
-      "returnType": {
-        "kind": "primitive",
-        "value": "string"
-      }
-    }
-  },
   {
     "name": "parseNodeToStaticValue",
     "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/styling-transform/lib/utils/parseNodeToStaticValue.ts",
@@ -255818,7 +255865,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
         },
         {
           "kind": "parameter",
-          "name": "variables",
+          "name": "names",
           "type": {
             "kind": "external",
             "name": "Record",
@@ -255839,7 +255886,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           "description": "",
           "declarations": [
             {
-              "name": "variables",
+              "name": "names",
               "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling-transform/lib/utils/parseObjectToStaticValue.ts"
             }
           ],
@@ -255971,7 +256018,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
         },
         {
           "kind": "property",
-          "name": "variables",
+          "name": "names",
           "required": true,
           "type": {
             "kind": "external",
@@ -255988,10 +256035,38 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
               }
             ]
           },
-          "description": "",
+          "description": "Name and value pairs for things that cannot be statically resolved via the type system. The\nname is resolved via `getPropertyAccessExpressionText` and the value can be anything. It should\nbe whatever you want the runtime value to be, which is usually a hash. For example:\n\n```ts\nconst myVars = createVars('color');\n\ncolor: myVars.color\n```\n\nThe type of `myVars.color` is `string`, but both in runtime and transpile time, the\n`myVars.color` is resolved to a hard value. The `names` cache is a lookup to that value. The\n`names` cache does not track the AST of `color`, so `const {color} = myVars` will not work. The\nkey comes from `getPropertyAccessExpressionText` which replaces `.` with `-`.",
           "declarations": [
             {
-              "name": "variables",
+              "name": "names",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling-transform/lib/utils/types.ts"
+            }
+          ],
+          "tags": {}
+        },
+        {
+          "kind": "property",
+          "name": "extractedNames",
+          "required": true,
+          "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": "Extracted names is a mapping from `names` to a value that will be output to CSS. If you add an\nentry to `names`, add an entry to `extractedNames` where the `key` of `extractedNames` is the\n`value` of `names`.\n\nFor example:\n```ts\n// names\n{ \"myVars.foo\": \"--css-12345\" },\n// extractedNames\n{ \"--css-12345\": \"--css-my-vars-foo\" }\n```\n\nThe value in `names` will be used for transformation of TypeScript files into JavaScript files.\nThe `extractedNames` will be used for the output CSS files.",
+          "declarations": [
+            {
+              "name": "extractedNames",
               "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling-transform/lib/utils/types.ts"
             }
           ],
@@ -255999,16 +256074,16 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
         },
         {
           "kind": "property",
-          "name": "variableScope",
+          "name": "nameScope",
           "required": false,
           "type": {
             "kind": "primitive",
             "value": "string"
           },
-          "description": "Variable scoping allows for a variable lookup to match a predefined scope. For example, in\nstencils, the `base` config can take a function with the locally defined variable names.\n\n```ts\nconst myStencil = createStencil({\n  vars: {color: 'red'},\n  base({color}) {\n    return {\n      [color]: 'blue'\n    }\n  }\n})\n```\n\nIn this case, a variable lookup would fail because there's no global variable named `color`.\nThere's a global variable named `my-color` which is the fully-qualified variable name. The\nstencil parser will add `my-` as a variable scoping when processing style attributes for\nvariable lookup purposes.",
+          "description": "Variable scoping allows for a variable lookup to match a predefined scope. For example, in\nstencils, the `base` config can take a function with the locally defined variable names.\n\n```ts\nconst myStencil = createStencil({\n  vars: {color: 'red'},\n  base({color}) {\n    return {\n      [color]: 'blue'\n    }\n  }\n})\n```\n\nIn this case, a name lookup would fail because there's no global name named `color`. There's a\nglobal name named `my-color` which is the fully-qualified name. The stencil parser will add\n`my-` as a name scoping when processing style attributes for name lookup purposes.",
           "declarations": [
             {
-              "name": "variableScope",
+              "name": "nameScope",
               "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling-transform/lib/utils/types.ts"
             }
           ],
@@ -257186,7 +257261,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
   {
     "name": "CsVarsMap",
     "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/lib/cs.ts",
-    "description": "CSS variable map type. In developer/dynamic mode, we don't know what the hash is going to be. All\nvariables will look like `--{hash}-{name}`. But the static optimizers generates the name based on\nthe AST, so the `id` will be known. Instead of something like `--abc123-color`, the `ID` is set\nby the optimizer.\n\nFor example:\n```ts\n// dynamic\nconst myVars = createVars('color') // type is `Record<'color', string>`\n\n// optimizer rewrites the code\nconst myVars = createVars<'color', 'myVars'>('color')\n// type is now `{color: \"--myVars-color\"}`\n\nmyVars.color // type is `--myVars-color`\n```\n\nThis is so optimized variables can be used directly by the static parser downstream. The variable\nnames become statically analyzable.",
+    "description": "CSS variable map type. In developer/dynamic mode, we don't know what the hash is going to be. All\nvariables will look like `--{hash}-{name}`. But the static optimizers generates the name based on\nthe AST, so the `id` will be known. Instead of something like `--abc123-color`, the `ID` is set\nby the optimizer.\n\nFor example:\n```ts\n// dynamic\nconst myVars = createVars('color') // type is `Record<'color', string>`\n\n// optimizer rewrites the code\nconst myVars = createVars<'color', 'myVars'>('color')\n// type is now `{color: \"--color-myVars\"}`\n\nmyVars.color // type is `--color-myVars`\n```\n\nThis is so optimized variables can be used directly by the static parser downstream. The variable\nnames become statically analyzable.",
     "declarations": [
       {
         "name": "CsVarsMap",
@@ -257263,7 +257338,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
         "falseType": {
           "kind": "unknown",
           "value": "unknown",
-          "text": "{[K in T]: `--${ID}-${MakeEmotionSafe<K>}`}"
+          "text": "{[K in T]: `--${K}-${ID}`}"
         }
       }
     }
@@ -257339,7 +257414,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
   {
     "name": "cssVar",
     "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/lib/cs.ts",
-    "description": "Take a CSS Variable name and return a variable property\n\n```ts\nconst myVars = createVars('color')\n\nconst myStyles = createStyles({\n  color: cssVar(myVars.color) // color: 'var(--{hash}-color)'\n})\n```\n\nIt can also support an optional fallback. Fallbacks should only be used if it is reasonable to\nexpect a CSS variable isn't defined.\n```ts\nconst myStyles = createStyles({\n  color: cssVar(myVars.color, 'red') // color: 'var(--{hash}-color, red)'\n})\n```\n\nIf the project is set up for parsing with fallback files, a fallback will automatically be filled\nduring the parsing phase. This is helpful for cases when CSS variables are expected, but not set\nin the environment.",
+    "description": "Take a CSS Variable name and return a variable property\n\n```ts\nconst myVars = createVars('color')\n\nconst myStyles = createStyles({\n  color: cssVar(myVars.color) // color: 'var(--color-{hash})'\n})\n```\n\nIt can also support an optional fallback. Fallbacks should only be used if it is reasonable to\nexpect a CSS variable isn't defined.\n```ts\nconst myStyles = createStyles({\n  color: cssVar(myVars.color, 'red') // color: 'var(--color-{hash}, red)'\n})\n```\n\nIf the project is set up for parsing with fallback files, a fallback will automatically be filled\nduring the parsing phase. This is helpful for cases when CSS variables are expected, but not set\nin the environment.",
     "declarations": [
       {
         "name": "cssVar",
@@ -257397,7 +257472,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
   {
     "name": "createVars",
     "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/lib/cs.ts",
-    "description": "Create temporary CSS variables to use in components. The CSS variable names will\nbe unique at runtime to avoid collisions. The return value is a function and a\nMap. The function can be used to pass in values from JavaScript. The function will\nreturn a map of variable keys to CSS Variable names.\n\n```ts\n// creates a `color` and `background` CSS variable\nconst myVars = createVars('color', 'background')\n\n// 'color' is a typed property. The type is `string`\nconsole.log(myVars.color) // `'var(--{hash}-color)'`\n\n// 'color' is a typed property. The type is `string?`\n// The returned object can be assigned to the `style` property of an element\nconsole.log(myVars({ color: 'red' })) //  `{'--{hash}-color': 'red'}`\n\nconst div = document.createElement('div')\ndiv.style = myVars({ color: 'red' }) // <div style=\"--{hash}-color: red;\" />\n```",
+    "description": "Create temporary CSS variables to use in components. The CSS variable names will\nbe unique at runtime to avoid collisions. The return value is a function and a\nMap. The function can be used to pass in values from JavaScript. The function will\nreturn a map of variable keys to CSS Variable names.\n\n```ts\n// creates a `color` and `background` CSS variable\nconst myVars = createVars('color', 'background')\n\n// 'color' is a typed property. The type is `string`\nconsole.log(myVars.color) // `'var(--color-{hash})'`\n\n// 'color' is a typed property. The type is `string?`\n// The returned object can be assigned to the `style` property of an element\nconsole.log(myVars({ color: 'red' })) //  `{'--color-{hash}': 'red'}`\n\nconst div = document.createElement('div')\ndiv.style = myVars({ color: 'red' }) // <div style=\"--color-{hash}: red;\" />\n```",
     "declarations": [
       {
         "name": "createVars",
@@ -257518,7 +257593,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
   {
     "name": "createVars",
     "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/lib/cs.ts",
-    "description": "Create temporary CSS variables to use in components. The CSS variable names will\nbe unique at runtime to avoid collisions. The return value is a function and a\nMap. The function can be used to pass in values from JavaScript. The function will\nreturn a map of variable keys to CSS Variable names.\n\n```ts\n// creates a `color` and `background` CSS variable\nconst myVars = createVars('color', 'background')\n\n// 'color' is a typed property. The type is `string`\nconsole.log(myVars.color) // `'var(--{hash}-color)'`\n\n// 'color' is a typed property. The type is `string?`\n// The returned object can be assigned to the `style` property of an element\nconsole.log(myVars({ color: 'red' })) //  `{'--{hash}-color': 'red'}`\n\nconst div = document.createElement('div')\ndiv.style = myVars({ color: 'red' }) // <div style=\"--{hash}-color: red;\" />\n```",
+    "description": "Create temporary CSS variables to use in components. The CSS variable names will\nbe unique at runtime to avoid collisions. The return value is a function and a\nMap. The function can be used to pass in values from JavaScript. The function will\nreturn a map of variable keys to CSS Variable names.\n\n```ts\n// creates a `color` and `background` CSS variable\nconst myVars = createVars('color', 'background')\n\n// 'color' is a typed property. The type is `string`\nconsole.log(myVars.color) // `'var(--color-{hash})'`\n\n// 'color' is a typed property. The type is `string?`\n// The returned object can be assigned to the `style` property of an element\nconsole.log(myVars({ color: 'red' })) //  `{'--color-{hash}': 'red'}`\n\nconst div = document.createElement('div')\ndiv.style = myVars({ color: 'red' }) // <div style=\"--color-{hash}: red;\" />\n```",
     "declarations": [
       {
         "name": "createVars",
@@ -257595,7 +257670,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
   {
     "name": "createVars",
     "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/lib/cs.ts",
-    "description": "Create temporary CSS variables to use in components. The CSS variable names will\nbe unique at runtime to avoid collisions. The return value is a function and a\nMap. The function can be used to pass in values from JavaScript. The function will\nreturn a map of variable keys to CSS Variable names.\n\n```ts\n// creates a `color` and `background` CSS variable\nconst myVars = createVars('color', 'background')\n\n// 'color' is a typed property. The type is `string`\nconsole.log(myVars.color) // `'var(--{hash}-color)'`\n\n// 'color' is a typed property. The type is `string?`\n// The returned object can be assigned to the `style` property of an element\nconsole.log(myVars({ color: 'red' })) //  `{'--{hash}-color': 'red'}`\n\nconst div = document.createElement('div')\ndiv.style = myVars({ color: 'red' }) // <div style=\"--{hash}-color: red;\" />\n```",
+    "description": "Create temporary CSS variables to use in components. The CSS variable names will\nbe unique at runtime to avoid collisions. The return value is a function and a\nMap. The function can be used to pass in values from JavaScript. The function will\nreturn a map of variable keys to CSS Variable names.\n\n```ts\n// creates a `color` and `background` CSS variable\nconst myVars = createVars('color', 'background')\n\n// 'color' is a typed property. The type is `string`\nconsole.log(myVars.color) // `'var(--color-{hash})'`\n\n// 'color' is a typed property. The type is `string?`\n// The returned object can be assigned to the `style` property of an element\nconsole.log(myVars({ color: 'red' })) //  `{'--color-{hash}': 'red'}`\n\nconst div = document.createElement('div')\ndiv.style = myVars({ color: 'red' }) // <div style=\"--color-{hash}: red;\" />\n```",
     "declarations": [
       {
         "name": "createVars",
@@ -257691,7 +257766,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
   {
     "name": "createVars",
     "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/lib/cs.ts",
-    "description": "Create temporary CSS variables to use in components. The CSS variable names will\nbe unique at runtime to avoid collisions. The return value is a function and a\nMap. The function can be used to pass in values from JavaScript. The function will\nreturn a map of variable keys to CSS Variable names.\n\n```ts\n// creates a `color` and `background` CSS variable\nconst myVars = createVars('color', 'background')\n\n// 'color' is a typed property. The type is `string`\nconsole.log(myVars.color) // `'var(--{hash}-color)'`\n\n// 'color' is a typed property. The type is `string?`\n// The returned object can be assigned to the `style` property of an element\nconsole.log(myVars({ color: 'red' })) //  `{'--{hash}-color': 'red'}`\n\nconst div = document.createElement('div')\ndiv.style = myVars({ color: 'red' }) // <div style=\"--{hash}-color: red;\" />\n```",
+    "description": "Create temporary CSS variables to use in components. The CSS variable names will\nbe unique at runtime to avoid collisions. The return value is a function and a\nMap. The function can be used to pass in values from JavaScript. The function will\nreturn a map of variable keys to CSS Variable names.\n\n```ts\n// creates a `color` and `background` CSS variable\nconst myVars = createVars('color', 'background')\n\n// 'color' is a typed property. The type is `string`\nconsole.log(myVars.color) // `'var(--color-{hash})'`\n\n// 'color' is a typed property. The type is `string?`\n// The returned object can be assigned to the `style` property of an element\nconsole.log(myVars({ color: 'red' })) //  `{'--color-{hash}': 'red'}`\n\nconst div = document.createElement('div')\ndiv.style = myVars({ color: 'red' }) // <div style=\"--color-{hash}: red;\" />\n```",
     "declarations": [
       {
         "name": "createVars",
@@ -257776,7 +257851,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
   {
     "name": "DefaultedVarsMapToCSSVarNames",
     "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/lib/cs.ts",
-    "description": "Maps JS var names to CSS variable names\n\n```ts\n// ID unknown\nDefaultedVarsMapToCSSVarNames<{foo: 'red'}, never> = Record<'foo', string>\n// ID unknown, nested\nDefaultedVarsMapToCSSVarNames<{foo: { bar: 'red' }}> = Record<'foo', Record<'bar', string>>\n\n// ID known\nDefaultedVarsMapToCSSVarNames<{foo: { bar: 'red' }}, 'my-id'> = { foo: '--my-id-red' }\n// ID known, nested\nDefaultedVarsMapToCSSVarNames<{foo: { bar: 'red' }}, 'my-id'> = { foo: { bar: '--my-id-red' }}\n```",
+    "description": "Maps JS var names to CSS variable names\n\n```ts\n// ID unknown\nDefaultedVarsMapToCSSVarNames<{foo: 'red'}, never> = Record<'foo', string>\n// ID unknown, nested\nDefaultedVarsMapToCSSVarNames<{foo: { bar: 'red' }}> = Record<'foo', Record<'bar', string>>\n\n// ID known\nDefaultedVarsMapToCSSVarNames<{foo: { bar: 'red' }}, 'my-id'> = { foo: '--red-my-id' }\n// ID known, nested\nDefaultedVarsMapToCSSVarNames<{foo: { bar: 'red' }}, 'my-id'> = { foo: { bar: '--red-my-id' }}\n```",
     "declarations": [
       {
         "name": "DefaultedVarsMapToCSSVarNames",
@@ -257871,7 +257946,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
         "falseType": {
           "kind": "unknown",
           "value": "unknown",
-          "text": "{\n      [K in keyof V]: V[K] extends Record<string, string>\n        ? DefaultedVarsMapToCSSVarNames<V[K], `${ID}-${ToString<K>}`> // TypeScript doesn't know K is a string here and will throw an error, so we have to coerce it\n        : CSSVarName<ID, K>;\n    }"
+          "text": "{\n      [K in keyof V]: V[K] extends Record<string, string>\n        ? {[K2 in keyof V[K]]: CSSVarName<`${ToString<K2>}-${ID}`, K>} //DefaultedVarsMapToCSSVarNames<V[K], `${ToString<K>}-${ID}`> // TypeScript doesn't know K is a string here and will throw an error, so we have to coerce it\n        : CSSVarName<ID, K>;\n    }"
         }
       }
     }
@@ -257879,7 +257954,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
   {
     "name": "DefaultedVarsMap",
     "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/lib/cs.ts",
-    "description": "Maps CSS var names to defaulted values if possible. If no ID is provided, TypeScript won't know\nthe CSS var name and will return `Record<string, string>`. If the ID is known, a full mapping\nwill be returned.\n\n```ts\n// ID known\nDefaultedVarsMap<{foo: 'red'}, 'my-id'> = { '--my-id-foo': 'red' }\n// ID known, nested\nDefaultedVarsMap<{foo: { bar: 'red' }}, 'my-id'> = { foo: { '--my-id-bar': 'red' }}\n```",
+    "description": "Maps CSS var names to defaulted values if possible. If no ID is provided, TypeScript won't know\nthe CSS var name and will return `Record<string, string>`. If the ID is known, a full mapping\nwill be returned.\n\n```ts\n// ID known\nDefaultedVarsMap<{foo: 'red'}, 'my-id'> = { '--foo-my-id': 'red' }\n// ID known, nested\nDefaultedVarsMap<{foo: { bar: 'red' }}, 'my-id'> = { foo: { '--bar-my-id': 'red' }}\n```",
     "declarations": [
       {
         "name": "DefaultedVarsMap",
@@ -258434,7 +258509,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
   {
     "name": "csToProps",
     "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/lib/cs.ts",
-    "description": "A function that takes in a single input, or an array. The type of the input is either:\n\n- `string` - it represents a CSS class name\n- `undefined` - there is no value. This is provided for convenience for developers to not have to\n  filter out undefined\n- `{--{hash}-{varName}: {value}}` - a `Map` of CSS variable to values\n- `{style: ..., className: ...}` an object already returned by another `csToProps` function call\n  (for nesting)\n- An array containing any of the above. This will recurse over each entry to produce a single,\n  reduced `{style: ..., className: ...}` object",
+    "description": "A function that takes in a single input, or an array. The type of the input is either:\n\n- `string` - it represents a CSS class name\n- `undefined` - there is no value. This is provided for convenience for developers to not have to\n  filter out undefined\n- `{--{varName}-{hash}: {value}}` - a `Map` of CSS variable to values\n- `{style: ..., className: ...}` an object already returned by another `csToProps` function call\n  (for nesting)\n- An array containing any of the above. This will recurse over each entry to produce a single,\n  reduced `{style: ..., className: ...}` object",
     "declarations": [
       {
         "name": "csToProps",
@@ -258967,7 +259042,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "kind": "generic",
             "name": "V"
           },
-          "description": "A stencil can support CSS variables. Since CSS variables cascade by default, variables are\ndefined with defaults. These defaults are added automatically to the `base` styles to prevent\nCSS variables defined higher in the DOM tree from cascading into a component.\n\n```ts\nconst buttonStencil = createStencil({\n  vars: {color: 'red'},\n  base: {padding: 5}\n})\n```\n\n```css\n.css-button {\n  --css-button-color: red;\n  padding: 5px;\n}\n```\n\nAccess to variables in `base` and `modifiers` is done via a function wrapper that gives\nall variables.\n\n```ts\nconst buttonStencil = createStyles({\n  vars: {color: 'red'},\n  base({color}) {\n    return {color: color}\n  }\n})\n```\n\n```css\n.css-button {\n  --css-button-color: red;\n  color: var(--css-button-color);\n}\n```",
+          "description": "A stencil can support CSS variables. Since CSS variables cascade by default, variables are\ndefined with defaults. These defaults are added automatically to the `base` styles to prevent\nCSS variables defined higher in the DOM tree from cascading into a component.\n\n```ts\nconst buttonStencil = createStencil({\n  vars: {color: 'red'},\n  base: {padding: 5}\n})\n```\n\n```css\n.css-button {\n  --css-button-color: red;\n  padding: 5px;\n}\n```\n\nAccess to variables in `base` and `modifiers` is done via a function wrapper that gives\nall variables.\n\n```ts\nconst buttonStencil = createStyles({\n  vars: {color: 'red'},\n  base({color}) {\n    return {color: color}\n  }\n})\n```\n\n```css\n.css-button {\n  --color-button: red;\n  color: var(--color-button);\n}\n```",
           "declarations": [
             {
               "name": "vars",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "11.0.0-alpha.795-next.0",
+  "version": "11.0.0-alpha.796-next.0",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -44,10 +44,10 @@
   "dependencies": {
     "@emotion/styled": "^11.6.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^11.0.0-alpha.795-next.0",
-    "@workday/canvas-kit-preview-react": "^11.0.0-alpha.795-next.0",
-    "@workday/canvas-kit-react": "^11.0.0-alpha.795-next.0",
-    "@workday/canvas-kit-styling": "^11.0.0-alpha.795-next.0",
+    "@workday/canvas-kit-labs-react": "^11.0.0-alpha.796-next.0",
+    "@workday/canvas-kit-preview-react": "^11.0.0-alpha.796-next.0",
+    "@workday/canvas-kit-react": "^11.0.0-alpha.796-next.0",
+    "@workday/canvas-kit-styling": "^11.0.0-alpha.796-next.0",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^1.3.1",
     "markdown-to-jsx": "^6.10.3",
@@ -59,5 +59,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "4.2"
   },
-  "gitHead": "3762ebcef04e77d2e53ebef07dbfeb4fd48481de"
+  "gitHead": "2313244746a317a77b62512a32c6967fda5374e3"
 }