@workday/canvas-kit-docs 14.0.0-alpha.1233-next.0 → 14.0.0-alpha.1234-next.0

package/dist/es6/lib/docs.js

@@ -10965,7 +10965,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
   {
     "name": "Divider",
     "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/divider/lib/Divider.tsx",
-    "description": "# Divider\nA divider to segment and visually organize content. By default, it renders a semantic `[<hr>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr)` element.\n\n[View Docs](https://workday.github.io/canvas-kit/?path=/docs/preview-divider-react)\n\nThe `space` prop will equally apply top and bottom margin styles.\nIn the example below, `x2` (0.5rem), adds `0.25rem` margin to the top and `0.25rem` to the bottom",
+    "description": "# Divider\nA divider to segment and visually organize content. By default, it renders a semantic `[<hr>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr)` element.\n\n[View Docs](https://workday.github.io/canvas-kit/?path=/docs/preview-divider--docs)\n\nThe `space` prop will equally apply top and bottom margin styles.\nIn the example below, `x2` (0.5rem), adds `0.25rem` margin to the top and `0.25rem` to the bottom",
     "declarations": [
       {
         "name": "Divider",
@@ -63248,7 +63248,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       }
     ],
     "tags": {
-      "deprecated": "⚠️ `scrollIntoViewIfNeeded` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) instead."
+      "deprecated": "⚠️ `scrollIntoViewIfNeeded` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--docs) instead."
     },
     "type": {
       "kind": "function",
@@ -63313,7 +63313,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       }
     ],
     "tags": {
-      "deprecated": "⚠️ `SelectProps` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) instead."
+      "deprecated": "⚠️ `SelectProps` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--docs) instead."
     },
     "type": {
       "kind": "alias",
@@ -63331,7 +63331,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       }
     ],
     "tags": {
-      "deprecated": "⚠️ `Select` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) instead."
+      "deprecated": "⚠️ `Select` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--docs) instead."
     },
     "type": {
       "kind": "enhancedComponent",
@@ -63577,7 +63577,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       }
     ],
     "tags": {
-      "deprecated": "⚠️ `Option` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) instead."
+      "deprecated": "⚠️ `Option` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--docs) instead."
     },
     "type": {
       "kind": "object",
@@ -63693,7 +63693,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       }
     ],
     "tags": {
-      "deprecated": "⚠️ `NormalizedOption` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) instead."
+      "deprecated": "⚠️ `NormalizedOption` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--docs) instead."
     },
     "type": {
       "kind": "object",
@@ -63809,7 +63809,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       }
     ],
     "tags": {
-      "deprecated": "⚠️ `RenderSelectedFunction` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) instead."
+      "deprecated": "⚠️ `RenderSelectedFunction` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--docs) instead."
     },
     "type": {
       "kind": "unknown",
@@ -63828,7 +63828,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       }
     ],
     "tags": {
-      "deprecated": "⚠️ `RenderableOption` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) instead."
+      "deprecated": "⚠️ `RenderableOption` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--docs) instead."
     },
     "type": {
       "kind": "object",
@@ -63978,7 +63978,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       }
     ],
     "tags": {
-      "deprecated": "⚠️ `RenderOptionFunction` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) instead."
+      "deprecated": "⚠️ `RenderOptionFunction` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--docs) instead."
     },
     "type": {
       "kind": "unknown",
@@ -63997,7 +63997,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       }
     ],
     "tags": {
-      "deprecated": "⚠️ `CoreSelectBaseProps` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) instead."
+      "deprecated": "⚠️ `CoreSelectBaseProps` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--docs) instead."
     },
     "type": {
       "kind": "object",
@@ -64126,7 +64126,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       }
     ],
     "tags": {
-      "deprecated": "⚠️ `SelectBaseProps` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) instead."
+      "deprecated": "⚠️ `SelectBaseProps` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--docs) instead."
     },
     "type": {
       "kind": "alias",
@@ -64160,7 +64160,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       }
     ],
     "tags": {
-      "deprecated": "⚠️ `SelectBase` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) instead."
+      "deprecated": "⚠️ `SelectBase` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--docs) instead."
     },
     "type": {
       "kind": "component",
@@ -64683,7 +64683,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       }
     ],
     "tags": {
-      "deprecated": "⚠️ `SelectMenu` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) instead."
+      "deprecated": "⚠️ `SelectMenu` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--docs) instead."
     },
     "type": {
       "kind": "component",
@@ -64904,7 +64904,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       }
     ],
     "tags": {
-      "deprecated": "⚠️ `SelectOptionProps` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) instead."
+      "deprecated": "⚠️ `SelectOptionProps` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--docs) instead."
     },
     "type": {
       "kind": "alias",
@@ -64922,7 +64922,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       }
     ],
     "tags": {
-      "deprecated": "⚠️ `SelectOption` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) instead."
+      "deprecated": "⚠️ `SelectOption` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--docs) instead."
     },
     "type": {
       "kind": "component",
@@ -65082,7 +65082,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       }
     ],
     "tags": {
-      "deprecated": "⚠️ `MenuPlacement` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) instead."
+      "deprecated": "⚠️ `MenuPlacement` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--docs) instead."
     },
     "type": {
       "kind": "type",
@@ -65113,7 +65113,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       }
     ],
     "tags": {
-      "deprecated": "⚠️ `MenuVisibility` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) instead."
+      "deprecated": "⚠️ `MenuVisibility` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--docs) instead."
     },
     "type": {
       "kind": "type",
@@ -65233,7 +65233,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       }
     ],
     "tags": {
-      "deprecated": "⚠️ `getCorrectedIndexByValue` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) instead."
+      "deprecated": "⚠️ `getCorrectedIndexByValue` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--docs) instead."
     },
     "type": {
       "kind": "function",
@@ -343365,7 +343365,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       }
     ],
     "tags": {
-      "deprecated": "⚠️ Status Indicator has been deprecated and will be removed in a future major version. Please use [`Status Indicator`](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--basic) in Preview instead."
+      "deprecated": "⚠️ Status Indicator has been deprecated and will be removed in a future major version. Please use [`Status Indicator`](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--docs) in Preview instead."
     },
     "type": {
       "kind": "object",
@@ -343434,7 +343434,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       }
     ],
     "tags": {
-      "deprecated": "⚠️ Status Indicator has been deprecated and will be removed in a future major version. Please use [`Status Indicator`](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--basic) in Preview instead."
+      "deprecated": "⚠️ Status Indicator has been deprecated and will be removed in a future major version. Please use [`Status Indicator`](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--docs) in Preview instead."
     },
     "type": {
       "kind": "object",
@@ -343471,7 +343471,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       }
     ],
     "tags": {
-      "deprecated": "⚠️ Status Indicator has been deprecated and will be removed in a future major version. Please use [`Status Indicator`](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--basic) in Preview instead."
+      "deprecated": "⚠️ Status Indicator has been deprecated and will be removed in a future major version. Please use [`Status Indicator`](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--docs) in Preview instead."
     },
     "type": {
       "kind": "object",
@@ -343567,7 +343567,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       }
     ],
     "tags": {
-      "deprecated": "⚠️ Status Indicator has been deprecated and will be removed in a future major version. Please use [`Status Indicator`](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--basic) in Preview instead."
+      "deprecated": "⚠️ Status Indicator has been deprecated and will be removed in a future major version. Please use [`Status Indicator`](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--docs) in Preview instead."
     },
     "type": {
       "kind": "symbol",
@@ -343586,7 +343586,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       }
     ],
     "tags": {
-      "deprecated": "⚠️ Status Indicator has been deprecated and will be removed in a future major version. Please use [`Status Indicator`](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--basic) in Preview instead."
+      "deprecated": "⚠️ Status Indicator has been deprecated and will be removed in a future major version. Please use [`Status Indicator`](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--docs) in Preview instead."
     },
     "type": {
       "kind": "alias",
@@ -343604,7 +343604,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       }
     ],
     "tags": {
-      "deprecated": "⚠️ Status Indicator has been deprecated and will be removed in a future major version. Please use [`Status Indicator`](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--basic) in Preview instead."
+      "deprecated": "⚠️ Status Indicator has been deprecated and will be removed in a future major version. Please use [`Status Indicator`](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--docs) in Preview instead."
     },
     "type": {
       "kind": "component",
@@ -387213,7 +387213,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       }
     ],
     "tags": {
-      "deprecated": "⚠️ `LabelText` has been deprecated and will be removed in a future major version. Please use [FormField.Label](https://workday.github.io/canvas-kit/?path=/docs/preview-inputs-form-field--basic) from Preview instead."
+      "deprecated": "⚠️ `LabelText` has been deprecated and will be removed in a future major version. Please use [FormField.Label](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-form-field--docs) from Main instead."
     },
     "type": {
       "kind": "enhancedComponent",
@@ -405013,7 +405013,9 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
         "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/tokens/lib/colors.types.ts"
       }
     ],
-    "tags": {},
+    "tags": {
+      "deprecated": "⚠️ `BrandingColor` has been deprecated in a future major version. Please use our css var based [`brand colors`](https://workday.github.io/canvas-tokens/?path=/docs/docs-brand-tokens--docs) tokens."
+    },
     "type": {
       "kind": "object",
       "typeParameters": [],
@@ -405224,7 +405226,9 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
         "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/tokens/lib/colors.types.ts"
       }
     ],
-    "tags": {},
+    "tags": {
+      "deprecated": "⚠️ `CanvasColor` has been deprecated in a future major version. Please use our css var based [`color tokens`](https://workday.github.io/canvas-tokens/?path=/docs/docs-base-tokens--docs) tokens."
+    },
     "type": {
       "kind": "type",
       "typeParameters": [],
@@ -405893,7 +405897,9 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
         "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/tokens/lib/depth.ts"
       }
     ],
-    "tags": {},
+    "tags": {
+      "deprecated": "⚠️ `CanvasDepth` has been deprecated in a future major version. Please use our css var based [`depth tokens`](https://workday.github.io/canvas-tokens/?path=/docs/docs-system-tokens-depth--docs) tokens."
+    },
     "type": {
       "kind": "object",
       "properties": [
@@ -406169,7 +406175,9 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
         "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/tokens/lib/depth.ts"
       }
     ],
-    "tags": {},
+    "tags": {
+      "deprecated": "⚠️ `CanvasDepthValues` has been deprecated in a future major version. Please use our css var based [`depth tokens`](https://workday.github.io/canvas-tokens/?path=/docs/docs-system-tokens-depth--docs) tokens."
+    },
     "type": {
       "kind": "type",
       "typeParameters": [],
@@ -406345,7 +406353,8 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       }
     ],
     "tags": {
-      "example": "```tsx\nimport { depth } from '@workday/canvas-kit-react/tokens';\n\nconst CustomCard = () => {\n  return (\n    <div css={depth[2]}>\n      A standard-depth card\n    </div>\n  );\n}\n```"
+      "example": "```tsx\nimport { depth } from '@workday/canvas-kit-react/tokens';\n\nconst CustomCard = () => {\n  return (\n    <div css={depth[2]}>\n      A standard-depth card\n    </div>\n  );\n}\n```",
+      "deprecated": "⚠️ `depth` has been deprecated in a future major version. Please use our css var based [`depth tokens`](https://workday.github.io/canvas-tokens/?path=/docs/docs-system-tokens-depth--docs) tokens."
     },
     "type": {
       "kind": "symbol",
@@ -406363,7 +406372,9 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
         "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/tokens/lib/radius.ts"
       }
     ],
-    "tags": {},
+    "tags": {
+      "deprecated": "⚠️ `CanvasBorderRadius` has been deprecated in a future major version. Please use our css var based [`borderRadius tokens`](https://workday.github.io/canvas-tokens/?path=/docs/docs-system-tokens-shape--docs) tokens."
+    },
     "type": {
       "kind": "object",
       "properties": [
@@ -406465,7 +406476,9 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
         "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/tokens/lib/radius.ts"
       }
     ],
-    "tags": {},
+    "tags": {
+      "deprecated": "⚠️ `CanvasBorderRadiusKeys` has been deprecated in a future major version. Please use our css var based [`borderRadius tokens`](https://workday.github.io/canvas-tokens/?path=/docs/docs-system-tokens-shape--docs) tokens."
+    },
     "type": {
       "kind": "type",
       "typeParameters": [],
@@ -406490,7 +406503,9 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
         "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/tokens/lib/radius.ts"
       }
     ],
-    "tags": {},
+    "tags": {
+      "deprecated": "⚠️ `CanvasBorderRadiusValues` has been deprecated in a future major version. Please use our css var based [`borderRadius tokens`](https://workday.github.io/canvas-tokens/?path=/docs/docs-system-tokens-shape--docs) tokens."
+    },
     "type": {
       "kind": "type",
       "typeParameters": [],
@@ -406531,7 +406546,9 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
         "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/tokens/lib/radius.ts"
       }
     ],
-    "tags": {},
+    "tags": {
+      "deprecated": "⚠️ `borderRadius` has been deprecated in a future major version. Please use our css var based [`borderRadius tokens`](https://workday.github.io/canvas-tokens/?path=/docs/docs-system-tokens-shape--docs) tokens."
+    },
     "type": {
       "kind": "symbol",
       "name": "CanvasBorderRadius",
@@ -406839,7 +406856,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       }
     ],
     "tags": {
-      "deprecated": "⚠️ `spaceNumbers` has been deprecated in a future major version. Please use our `rem` based [`space`](https://workday.github.io/canvas-kit/?path=/docs/tokens--space) tokens. In the case where you need to calculate a value, use [CSS calc()](https://developer.mozilla.org/en-US/docs/Web/CSS/calc)."
+      "deprecated": "⚠️ `spaceNumbers` has been deprecated in a future major version. Please use our css var based [`space`](https://workday.github.io/canvas-tokens/?path=/docs/docs-system-tokens-space--docs) tokens. In the case where you need to calculate a value, use [calc() function](https://workday.github.io/canvas-kit/?path=/docs/styling-utilities--docs#calc-functions)."
     },
     "type": {
       "kind": "object",
@@ -407028,7 +407045,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       }
     ],
     "tags": {
-      "deprecated": "⚠️ `CanvasSpaceNumberValues` has been deprecated in a future major version. Please use our `rem` based [`space`](https://workday.github.io/canvas-kit/?path=/docs/tokens--space) tokens. In the case where you need to calculate a value, use [CSS calc()](https://developer.mozilla.org/en-US/docs/Web/CSS/calc)."
+      "deprecated": "⚠️ `CanvasSpaceNumberValues` has been deprecated in a future major version. Please use our css var based [`space`](https://workday.github.io/canvas-tokens/?path=/docs/docs-system-tokens-space--docs) tokens. In the case where you need to calculate a value, use [calc() function](https://workday.github.io/canvas-kit/?path=/docs/styling-utilities--docs#calc-functions)."
     },
     "type": {
       "kind": "type",
@@ -407091,7 +407108,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       }
     ],
     "tags": {
-      "deprecated": "⚠️ `spaceNumbers` has been deprecated in a future major version. Please use our `rem` based [`space`](https://workday.github.io/canvas-kit/?path=/docs/tokens--space) tokens. In the case where you need to calculate a value, use [CSS calc()](https://developer.mozilla.org/en-US/docs/Web/CSS/calc)."
+      "deprecated": "⚠️ `spaceNumbers` has been deprecated in a future major version. Please use our css var based [`space`](https://workday.github.io/canvas-tokens/?path=/docs/docs-system-tokens-space--docs) tokens. In the case where you need to calculate a value, use [calc() function](https://workday.github.io/canvas-kit/?path=/docs/styling-utilities--docs#calc-functions)."
     },
     "type": {
       "kind": "symbol",
@@ -407109,7 +407126,9 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
         "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/tokens/lib/type/fontFamilies.ts"
       }
     ],
-    "tags": {},
+    "tags": {
+      "deprecated": "⚠️ `fontFamily` has been deprecated in a future major version. Please use our css var based [`fontFamily`](https://workday.github.io/canvas-tokens/?path=/docs/docs-system-tokens-type--docs) tokens."
+    },
     "type": {
       "kind": "union",
       "value": [
@@ -407134,7 +407153,9 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
         "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/tokens/lib/type/fontFamilies.ts"
       }
     ],
-    "tags": {},
+    "tags": {
+      "deprecated": "⚠️ `monoFontFamily` has been deprecated in a future major version. Please use our css var based [`fontFamily`](https://workday.github.io/canvas-tokens/?path=/docs/docs-system-tokens-type--docs) tokens."
+    },
     "type": {
       "kind": "primitive",
       "value": "string"
@@ -407143,7 +407164,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
   {
     "name": "fontFamilies",
     "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/tokens/lib/type/fontFamilies.ts",
-    "description": "### Font Family Tokens\n[View Storybook Docs](https://workday.github.io/canvas-kit/?path=/story/tokens-tokens-react--type)\n\n---\nThere are two font family tokens:\n\n- `default`: \"Roboto\" - what you'll almost always want to choose\n- `monospace`: \"Roboto Mono\" - what you'll want for monospace type\n\nYou can find more detailed information by inspecting individual families.",
+    "description": "### Font Family Tokens\n---\nThere are two font family tokens:\n\n- `default`: \"Roboto\" - what you'll almost always want to choose\n- `monospace`: \"Roboto Mono\" - what you'll want for monospace type\n\nYou can find more detailed information by inspecting individual families.",
     "declarations": [
       {
         "name": "fontFamilies",
@@ -407151,7 +407172,8 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       }
     ],
     "tags": {
-      "example": "```tsx\nimport { type } from '@workday/canvas-kit-react/tokens';\n\nconst MonospaceText = () => (\n  <p css={{fontFamily: type.properties.fonts.monospace}}>\n    monospace_text\n  </p>\n);\n```"
+      "example": "```tsx\nimport { type } from '@workday/canvas-kit-react/tokens';\n\nconst MonospaceText = () => (\n  <p css={{fontFamily: type.properties.fonts.monospace}}>\n    monospace_text\n  </p>\n);\n```",
+      "deprecated": "⚠️ `fontFamilies` has been deprecated in a future major version. Please use our css var based [`fontFamily`](https://workday.github.io/canvas-tokens/?path=/docs/docs-system-tokens-type--docs) tokens."
     },
     "type": {
       "kind": "symbol",
@@ -407169,7 +407191,9 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
         "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/tokens/lib/type/fontFamilies.ts"
       }
     ],
-    "tags": {},
+    "tags": {
+      "deprecated": "⚠️ `CanvasFontFamilies` has been deprecated in a future major version. Please use our css var based [`fontFamily`](https://workday.github.io/canvas-tokens/?path=/docs/docs-system-tokens-type--docs) tokens."
+    },
     "type": {
       "kind": "object",
       "properties": [
@@ -407223,7 +407247,8 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       }
     ],
     "tags": {
-      "example": "```tsx\nimport { type } from '@workday/canvas-kit-react/tokens';\n\nconst LargeText = () => (\n  <p css={{fontSize: type.properties.fontSizes[20]}}>\n    Bold Text\n  </p>\n);\n```"
+      "example": "```tsx\nimport { type } from '@workday/canvas-kit-react/tokens';\n\nconst LargeText = () => (\n  <p css={{fontSize: type.properties.fontSizes[20]}}>\n    Bold Text\n  </p>\n);\n```",
+      "deprecated": "⚠️ `fontSizes` has been deprecated in a future major version. Please use our css var based [`fontFamily`](https://workday.github.io/canvas-tokens/?path=/docs/docs-system-tokens-type--docs) tokens."
     },
     "type": {
       "kind": "symbol",
@@ -407241,7 +407266,9 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
         "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/tokens/lib/type/fontSizes.ts"
       }
     ],
-    "tags": {},
+    "tags": {
+      "deprecated": "⚠️ `CanvasFontSizes` has been deprecated in a future major version. Please use our css var based [`fontFamily`](https://workday.github.io/canvas-tokens/?path=/docs/docs-system-tokens-type--docs) tokens."
+    },
     "type": {
       "kind": "object",
       "properties": [
@@ -407462,7 +407489,9 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
         "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/tokens/lib/type/fontSizes.ts"
       }
     ],
-    "tags": {},
+    "tags": {
+      "deprecated": "⚠️ `CanvasFontSizeValues` has been deprecated in a future major version. Please use our css var based [`fontFamily`](https://workday.github.io/canvas-tokens/?path=/docs/docs-system-tokens-type--docs) tokens."
+    },
     "type": {
       "kind": "type",
       "typeParameters": [],
@@ -407532,7 +407561,8 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       }
     ],
     "tags": {
-      "example": "```tsx\nimport { type } from '@workday/canvas-kit-react/tokens';\n\nconst BoldText = () => (\n  <p css={{fontWeight: type.properties.fontWeights.bold}>\n    Bold Text\n  </p>\n);\n```"
+      "example": "```tsx\nimport { type } from '@workday/canvas-kit-react/tokens';\n\nconst BoldText = () => (\n  <p css={{fontWeight: type.properties.fontWeights.bold}>\n    Bold Text\n  </p>\n);\n```",
+      "deprecated": "⚠️ `fontWeights` has been deprecated in a future major version. Please use our css var based [`fontFamily`](https://workday.github.io/canvas-tokens/?path=/docs/docs-system-tokens-type--docs) tokens."
     },
     "type": {
       "kind": "symbol",
@@ -407550,7 +407580,9 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
         "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/tokens/lib/type/fontWeights.ts"
       }
     ],
-    "tags": {},
+    "tags": {
+      "deprecated": "⚠️ `CanvasFontWeights` has been deprecated in a future major version. Please use our css var based [`fontFamily`](https://workday.github.io/canvas-tokens/?path=/docs/docs-system-tokens-type--docs) tokens."
+    },
     "type": {
       "kind": "object",
       "properties": [
@@ -407618,7 +407650,9 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
         "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/tokens/lib/type/fontWeights.ts"
       }
     ],
-    "tags": {},
+    "tags": {
+      "deprecated": "⚠️ `CanvasFontWeightValues` has been deprecated in a future major version. Please use our css var based [`fontFamily`](https://workday.github.io/canvas-tokens/?path=/docs/docs-system-tokens-type--docs) tokens."
+    },
     "type": {
       "kind": "type",
       "typeParameters": [],
@@ -407644,14 +407678,16 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
   {
     "name": "type",
     "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/tokens/lib/type/index.ts",
-    "description": "### Canvas Type Tokens\n[View Storybook Docs](https://workday.github.io/canvas-kit/?path=/story/tokens--type)\n\n---\nType tokens are separated into three sections:\n\n- `levels` - provide higher-level styles for the Canvas type hierarchy: title, heading, body, and subtext\n- `properties` - provide low-level type properties (font families, sizes, and weights)\n- `variants` - provide modifiers for text styles (error, hint, and inverse)",
+    "description": "### Canvas Type Tokens\n[View Storybook Docs](https://workday.github.io/canvas-tokens/?path=/docs/docs-system-tokens-type--docs)\n\n---\nType tokens are separated into three sections:\n\n- `levels` - provide higher-level styles for the Canvas type hierarchy: title, heading, body, and subtext\n- `properties` - provide low-level type properties (font families, sizes, and weights)\n- `variants` - provide modifiers for text styles (error, hint, and inverse)",
     "declarations": [
       {
         "name": "type",
         "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/tokens/lib/type/index.ts"
       }
     ],
-    "tags": {},
+    "tags": {
+      "deprecated": "⚠️ `type` has been deprecated in a future major version. Please use our css var based [`fontFamily`](https://workday.github.io/canvas-tokens/?path=/docs/docs-system-tokens-type--docs) tokens."
+    },
     "type": {
       "kind": "symbol",
       "name": "CanvasType",
@@ -407668,7 +407704,9 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
         "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/tokens/lib/type/index.ts"
       }
     ],
-    "tags": {},
+    "tags": {
+      "deprecated": "⚠️ `CanvasType` has been deprecated in a future major version. Please use our css var based [`fontFamily`](https://workday.github.io/canvas-tokens/?path=/docs/docs-system-tokens-type--docs) tokens."
+    },
     "type": {
       "kind": "object",
       "properties": [
@@ -407796,7 +407834,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
   {
     "name": "levels",
     "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/tokens/lib/type/levels.ts",
-    "description": "### Canvas Type Hierarchy\n[View Storybook Docs](https://workday.github.io/canvas-kit/?path=/story/tokens-tokens-react--type)\n\n---\nThe hierarchy is organized into four levels, which correspond to levels defined in Figma.\n\n- `title`: Intended to be used for large page titles.\n- `heading`: Intended to be used for headings and large text.\n- `body`: Intended to be used for standard body text.\n- `subtext`: Intended to be used for small subtext content or in tight spaces.\n\nEach level has three sizes: `large`, `medium`, and `small`.\n\nThe type hierarchy tokens are recommended for most type usage.\nThese objects handle font sizes, weights, line heights, letter spacing, and color for you,\nmaking it really simple to implement consistent type without much effort\n\nYou can find more detailed information by inspecting individual levels and sizes.",
+    "description": "### Canvas Type Hierarchy\n[View Storybook Docs](https://workday.github.io/canvas-tokens/?path=/docs/docs-system-tokens-type--docs)\n\n---\nThe hierarchy is organized into four levels, which correspond to levels defined in Figma.\n\n- `title`: Intended to be used for large page titles.\n- `heading`: Intended to be used for headings and large text.\n- `body`: Intended to be used for standard body text.\n- `subtext`: Intended to be used for small subtext content or in tight spaces.\n\nEach level has three sizes: `large`, `medium`, and `small`.\n\nThe type hierarchy tokens are recommended for most type usage.\nThese objects handle font sizes, weights, line heights, letter spacing, and color for you,\nmaking it really simple to implement consistent type without much effort\n\nYou can find more detailed information by inspecting individual levels and sizes.",
     "declarations": [
       {
         "name": "levels",
@@ -407804,7 +407842,8 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       }
     ],
     "tags": {
-      "example": "```tsx\nimport { type } from '@workday/canvas-kit-react/tokens';\n\nconst Heading = () => (\n  <h3 css={type.levels.heading.medium}>\n    Heading Text\n  </h3>\n);\n```"
+      "example": "```tsx\nimport { type } from '@workday/canvas-kit-react/tokens';\n\nconst Heading = () => (\n  <h3 css={type.levels.heading.medium}>\n    Heading Text\n  </h3>\n);\n```",
+      "deprecated": "⚠️ `levels` has been deprecated in a future major version. Please use our css var based [`fontFamily`](https://workday.github.io/canvas-tokens/?path=/docs/docs-system-tokens-type--docs) tokens."
     },
     "type": {
       "kind": "symbol",
@@ -407822,7 +407861,9 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
         "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/tokens/lib/type/levels.ts"
       }
     ],
-    "tags": {},
+    "tags": {
+      "deprecated": "⚠️ `CanvasTypeHierarchy` has been deprecated in a future major version. Please use our css var based [`fontFamily`](https://workday.github.io/canvas-tokens/?path=/docs/docs-system-tokens-type--docs) tokens."
+    },
     "type": {
       "kind": "object",
       "properties": [
@@ -409336,7 +409377,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
   {
     "name": "variants",
     "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/tokens/lib/type/variants.ts",
-    "description": "### Canvas Type Variants\n[View Storybook Docs](https://workday.github.io/canvas-kit/?path=/story/tokens-tokens-react--type)\n\n---\nThere are three type variants:\n\n- `error` Used for making errors more visible\n- `hint` Used for help text and secondary content\n- `inverse` Used for any text on a dark or colored background\n\nType variants provide modifiers for text styles.\nThey are typically used in conjunction with other type styles\nsuch as the type hierarchy and type properties tokens.\nYou can find more detailed information by inspecting individual variants.",
+    "description": "### Canvas Type Variants\n[View Storybook Docs](https://workday.github.io/canvas-tokens/?path=/docs/docs-system-tokens-type--docs)\n\n---\nThere are three type variants:\n\n- `error` Used for making errors more visible\n- `hint` Used for help text and secondary content\n- `inverse` Used for any text on a dark or colored background\n\nType variants provide modifiers for text styles.\nThey are typically used in conjunction with other type styles\nsuch as the type hierarchy and type properties tokens.\nYou can find more detailed information by inspecting individual variants.",
     "declarations": [
       {
         "name": "variants",
@@ -409344,7 +409385,8 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       }
     ],
     "tags": {
-      "example": "```tsx\nimport { type } from '@workday/canvas-kit-react/tokens';\n\nconst ErrorText = () => (\n  <span css={{ ...type.levels.subtext.small, ...type.variants.error}}>\n    Error Text\n  </span>\n);\n```"
+      "example": "```tsx\nimport { type } from '@workday/canvas-kit-react/tokens';\n\nconst ErrorText = () => (\n  <span css={{ ...type.levels.subtext.small, ...type.variants.error}}>\n    Error Text\n  </span>\n);\n```",
+      "deprecated": "⚠️ `variants` has been deprecated in a future major version. Please use our css var based [`fontFamily`](https://workday.github.io/canvas-tokens/?path=/docs/docs-system-tokens-type--docs) tokens."
     },
     "type": {
       "kind": "symbol",
@@ -409362,7 +409404,9 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
         "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/tokens/lib/type/variants.ts"
       }
     ],
-    "tags": {},
+    "tags": {
+      "deprecated": "⚠️ `CanvasTypeVariants` has been deprecated in a future major version. Please use our css var based [`fontFamily`](https://workday.github.io/canvas-tokens/?path=/docs/docs-system-tokens-type--docs) tokens."
+    },
     "type": {
       "kind": "object",
       "properties": [

package/dist/es6/mdx/installBlock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"installBlock.d.ts","sourceRoot":"","sources":["../../../mdx/installBlock.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,iBAAiB;IAChC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,YAAY,6BAA4B,iBAAiB,4CA8BrE,CAAC"}
+{"version":3,"file":"installBlock.d.ts","sourceRoot":"","sources":["../../../mdx/installBlock.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,iBAAiB;IAChC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,YAAY,6BAA4B,iBAAiB,4CAqCrE,CAAC"}

package/dist/es6/mdx/installBlock.js

@@ -16,5 +16,8 @@ export const InstallBlock = ({ command, packageName }) => {
             navigator.clipboard.writeText(commandRef.current.innerText);
         }
     };
-    return (_jsxs(Flex, { padding: "xs", backgroundColor: system.color.bg.contrast.default, borderRadius: "m", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", children: [_jsxs("pre", { ref: commandRef, children: [_jsx("span", { style: { color: cssVar(system.color.fg.primary.soft) }, children: command }), ' ', _jsx("span", { style: { color: cssVar(system.color.fg.inverse) }, children: packageName })] }), _jsx(PrimaryButton, { variant: "inverse", onClick: handleCopy, size: "small", children: copied ? 'Copied' : 'Copy' })] }));
+    return (_jsxs(Flex, { padding: "xs", backgroundColor: system.color.bg.contrast.default, borderRadius: "m", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", children: [_jsxs("pre", { ref: commandRef, children: [_jsx("span", { style: {
+                            color: cssVar(system.color.fg.primary.soft),
+                            marginInlineEnd: cssVar(system.space.x2),
+                        }, children: command }), _jsx("span", { style: { color: cssVar(system.color.fg.inverse) }, children: packageName })] }), _jsx(PrimaryButton, { variant: "inverse", onClick: handleCopy, size: "small", children: copied ? 'Copied' : 'Copy' })] }));
 };

package/dist/es6/mdx/welcomePage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"welcomePage.d.ts","sourceRoot":"","sources":["../../../mdx/welcomePage.tsx"],"names":[],"mappings":"AAgDA,eAAO,MAAM,WAAW,+CAiHvB,CAAC"}
+{"version":3,"file":"welcomePage.d.ts","sourceRoot":"","sources":["../../../mdx/welcomePage.tsx"],"names":[],"mappings":"AAgDA,eAAO,MAAM,WAAW,+CAmGvB,CAAC"}

package/dist/es6/mdx/welcomePage.js

@@ -41,5 +41,5 @@ const linkStyles = createStyles({
     marginTop: system.space.x3,
 });
 export const WelcomePage = () => {
-    return (_jsx("div", { className: "sb-unstyled", children: _jsxs("div", { className: parentFlexStyles, children: [_jsxs(Box, { cs: { overflow: 'hidden', position: 'relative' }, children: [_jsx("img", { src: headerImage, alt: "banner with canvas kit logo and version", className: imageStyles }), _jsx(Flex, { cs: { flexDirection: 'row', position: 'absolute', top: '45%', right: '5%' }, children: _jsxs(Text, { typeLevel: "title.medium", cs: [bannerTextStyles, versionStyles], children: ["v", version] }) })] }), _jsxs(Text, { typeLevel: "body.medium", children: ["This project provides a set of components for the Workday Canvas Design System that can be used to implement user experiences consistent with ", ' ', _jsx(ExternalHyperlink, { href: "https://canvas.workdaydesign.com/", iconLabel: "Open docs in new window", children: "Workday Design Principles." })] }), _jsx(Heading, { size: "medium", children: "Quick Links" }), _jsxs(Grid, { gridAutoColumns: "auto", gridTemplateColumns: "repeat(auto-fill, minmax(250px, 1fr))", gridGap: "s", children: [_jsxs(Grid, { as: Card, className: gridStyles, children: [_jsx(SystemIcon, { color: base.magenta600, icon: rocketIcon, size: 60 }), _jsx(Card.Heading, { children: "Getting Started" }), _jsx(Card.Body, { children: _jsx(Text, { children: "For all things getting started including helpful guides and docs." }) }), _jsx(Grid.Item, { as: Hyperlink, className: linkStyles, href: "https://workday.github.io/canvas-kit/?path=/docs/guides-getting-started--docs", children: "Getting Started Guide" })] }), _jsxs(Grid, { as: Card, className: gridStyles, children: [_jsx(SystemIcon, { color: base.red300, icon: tokensIcon, size: 60 }), _jsx(Card.Heading, { children: "Tokens" }), _jsx(Card.Body, { children: _jsx(Text, { children: "Tokens are the smallest pieces of our Design System with the primary function of storing UI information." }) }), _jsx(Grid.Item, { as: ExternalHyperlink, className: linkStyles, href: "https://workday.github.io/canvas-tokens/?path=%2Fdocs%2Fdocs-getting-started--docs", children: "View Our Tokens" })] }), _jsxs(Grid, { as: Card, className: gridStyles, children: [_jsx(SystemIcon, { color: base.teal500, icon: shapesIcon, size: 60 }), _jsx(Card.Heading, { children: "Styling" }), _jsx(Card.Body, { children: _jsx(Text, { children: "Learn how to style Canvas components using tokens, theming, and custom CSS approaches." }) }), _jsx(Grid.Item, { as: Hyperlink, className: linkStyles, href: "https://workday.github.io/canvas-kit/?path=/docs/styling-getting-started-overview--docs", children: "Get Started" })] })] }), _jsx(Heading, { size: "medium", children: "Installation" }), _jsx(Text, { children: "To get started using Canvas Kit React first add or install the module to your existing React project" }), _jsx(InstallBlock, { command: "yarn add", packageName: "@workday/canvas-kit-react @workday/canvas-tokens-web" }), "or", _jsx(InstallBlock, { command: "npm install", packageName: "@workday/canvas-kit-react @workday/canvas-tokens-web" })] }) }));
+    return (_jsx("div", { className: "sb-unstyled", children: _jsxs("div", { className: parentFlexStyles, children: [_jsxs(Box, { cs: { overflow: 'hidden', position: 'relative' }, children: [_jsx("img", { src: headerImage, alt: "banner with canvas kit logo and version", className: imageStyles }), _jsx(Flex, { cs: { flexDirection: 'row', position: 'absolute', top: '45%', right: '5%' }, children: _jsxs(Text, { typeLevel: "title.medium", cs: [bannerTextStyles, versionStyles], children: ["v", version] }) })] }), _jsxs(Text, { typeLevel: "body.medium", children: ["This project provides a set of components for the Workday Canvas Design System that can be used to implement user experiences consistent with", _jsx(ExternalHyperlink, { href: "https://canvas.workdaydesign.com/", iconLabel: "Open docs in new window", cs: { marginInlineStart: system.space.x1 }, children: "Workday Design Principles." })] }), _jsx(Heading, { size: "medium", children: "Quick Links" }), _jsxs(Grid, { gridAutoColumns: "auto", gridTemplateColumns: "repeat(auto-fill, minmax(250px, 1fr))", gridGap: "s", children: [_jsxs(Grid, { as: Card, className: gridStyles, children: [_jsx(SystemIcon, { color: base.magenta600, icon: rocketIcon, size: 60 }), _jsx(Card.Heading, { children: "Getting Started" }), _jsx(Card.Body, { children: _jsx(Text, { children: "For all things getting started including helpful guides and docs." }) }), _jsx(Grid.Item, { as: Hyperlink, className: linkStyles, href: "https://workday.github.io/canvas-kit/?path=/docs/guides-getting-started--docs", children: "Getting Started Guide" })] }), _jsxs(Grid, { as: Card, className: gridStyles, children: [_jsx(SystemIcon, { color: base.red300, icon: tokensIcon, size: 60 }), _jsx(Card.Heading, { children: "Tokens" }), _jsx(Card.Body, { children: _jsx(Text, { children: "Tokens are the smallest pieces of our Design System with the primary function of storing UI information." }) }), _jsx(Grid.Item, { as: ExternalHyperlink, className: linkStyles, href: "https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs", children: "View Our Tokens" })] }), _jsxs(Grid, { as: Card, className: gridStyles, children: [_jsx(SystemIcon, { color: base.teal500, icon: shapesIcon, size: 60 }), _jsx(Card.Heading, { children: "Styling" }), _jsx(Card.Body, { children: _jsx(Text, { children: "Learn how to style Canvas components using tokens, theming, and custom CSS approaches." }) }), _jsx(Grid.Item, { as: Hyperlink, className: linkStyles, href: "https://workday.github.io/canvas-kit/?path=/docs/styling-getting-started-overview--docs", children: "Get Started" })] })] }), _jsx(Heading, { size: "medium", children: "Installation" }), _jsx(Text, { children: "To get started using Canvas Kit React first add or install the module to your existing React project" }), _jsx(InstallBlock, { command: "yarn add", packageName: "@workday/canvas-kit-react @workday/canvas-tokens-web" }), "or", _jsx(InstallBlock, { command: "npm install", packageName: "@workday/canvas-kit-react @workday/canvas-tokens-web" })] }) }));
 };