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

package/dist/es6/lib/stackblitzFiles/packageJSONFile.ts

@@ -18,11 +18,11 @@ export const packageJSONFile = `{
     "@emotion/react": "11.11.4",
     "@types/react": "18.2.60",
     "@types/react-dom": "18.2.19",
-    "@workday/canvas-kit-labs-react": "13.2.24",
-    "@workday/canvas-kit-preview-react": "13.2.24",
-    "@workday/canvas-kit-react": "13.2.24",
-    "@workday/canvas-kit-react-fonts": "^13.2.24",
-    "@workday/canvas-kit-styling": "13.2.24",
+    "@workday/canvas-kit-labs-react": "13.2.25",
+    "@workday/canvas-kit-preview-react": "13.2.25",
+    "@workday/canvas-kit-react": "13.2.25",
+    "@workday/canvas-kit-react-fonts": "^13.2.25",
+    "@workday/canvas-kit-styling": "13.2.25",
     "@workday/canvas-system-icons-web": "3.0.22",
     "@workday/canvas-tokens-web": "2.0.0"
   },

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" })] }) }));
 };

package/dist/mdx/14.0-UPGRADE-GUIDE.mdx

@@ -561,7 +561,7 @@ import {BaseAvatar} from '@workday/canvas-kit-preview-react/avatar';
 
 The Combobox component in `@workday/canvas-kit-labs-react/combobox` has been deprecated and will be
 removed in a future major release. Please migrate to the
-[Combobox](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-combobox--docs) in
+[Combobox](https://workday.github.io/canvas-kit/?path=/docs/features-combobox--docs) in
 `@workday/canvas-kit-react`.
 
 ### Radio (Main)
@@ -574,22 +574,24 @@ from the same package, which offers improved accessibility and API consistency.
 
 **PR:** [#3469](https://github.com/Workday/canvas-kit/pull/3469)
 
-The `SearchForm` in `@workday/canvas-kit-labs-react/search-form` has been deprecated and will be removed in a future major release. Please migrate to the new
-[Combobox](https://workday.github.io/canvas-kit/?path=/docs/features-combobox--docs#usage) in `@workday/canvas-kit-react`.
+The `SearchForm` in `@workday/canvas-kit-labs-react/search-form` has been deprecated and will be
+removed in a future major release. Please migrate to the new
+[Combobox](https://workday.github.io/canvas-kit/?path=/docs/features-combobox--docs#usage) in
+`@workday/canvas-kit-react`.
 
 ### Segmented Control (Main)
 
 The Segmented Control component in `@workday/canvas-kit-react/segmented-control` has been
 deprecated. Please migrate to the new
-[Segmented Control](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-segmented-control--docs)
+[Segmented Control](https://workday.github.io/canvas-kit/?path=/docs/components-buttons-segmented-control--docs)
 for improved features and support.
 
 ### Side Panel (Main)
 
 The Side Panel component in `@workday/canvas-kit-react/side-panel` is now deprecated and will be
 removed in a future release. Please use the new
-[Side Panel](https://workday.github.io/canvas-kit/?path=/docs/components-navigation-side-panel--docs)
-for enhanced functionality.
+[Side Panel](https://workday.github.io/canvas-kit/?path=/docs/preview-side-panel--docs) for enhanced
+functionality.
 
 ### Tokens
 
@@ -671,7 +673,7 @@ We've removed `TextArea` from `@workday/canvas-kit-preview-react` package. Pleas
 
 We've removed `TextInput` from `@workday/canvas-kit-preview-react` package. Please use
 [TextInput](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-text-input--docs)
-from `@workday/canvas-kit-react` instead. =======
+from `@workday/canvas-kit-react` instead.
 
 ---
 

package/dist/mdx/MAINTAINING.mdx

@@ -402,7 +402,7 @@ component.
 
 ```tsx
 /**
- * @deprecated ⚠️ Status Indicator in Main has been deprecated and will be removed in a future major release. Please use [Status Indicator in Preview](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--basic) instead.
+ * @deprecated ⚠️ Status Indicator in Main has been deprecated and will be removed in a future major release. Please use [Status Indicator in Preview](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--docs) instead.
  */
 export class StatusIndicator...
 ```
@@ -420,17 +420,17 @@ You may share the same `@deprecation` note for multiple deprecations related to
 
 ```tsx
 /**
- * @deprecated ⚠️ Status Indicator in Main has been deprecated and will be removed in a future major release. Please use [Status Indicator in Preview](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--basic) instead.
+ * @deprecated ⚠️ Status Indicator in Main has been deprecated and will be removed in a future major release. Please use [Status Indicator in Preview](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--docs) instead.
  */
 export enum StatusIndicatorType...
 
 /**
- * @deprecated ⚠️ Status Indicator in Main has been deprecated and will be removed in a future major release. Please use [Status Indicator in Preview](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--basic) instead.
+ * @deprecated ⚠️ Status Indicator in Main has been deprecated and will be removed in a future major release. Please use [Status Indicator in Preview](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--docs) instead.
  */
 export interface StatusIndicatorProps...
 
 /**
- * @deprecated ⚠️ Status Indicator in Main has been deprecated and will be removed in a future major release. Please use [Status Indicator in Preview](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--basic) instead.
+ * @deprecated ⚠️ Status Indicator in Main has been deprecated and will be removed in a future major release. Please use [Status Indicator in Preview](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--docs) instead.
  */
 export class StatusIndicator...
 ```

package/dist/mdx/PACKAGES.mdx

@@ -1,7 +1,7 @@
 ### Main
 
-Our Main package of Canvas Kit components and utilities at `@workday/canvas-kit-react` has
-undergone a full design and a11y review and is approved for use in product.
+Our Main package of Canvas Kit components and utilities at `@workday/canvas-kit-react` has undergone
+a full design and a11y review and is approved for use in product.
 
 Breaking changes to code in Main will only occur during major version updates and will always be
 communicated in advance and accompanied by migration strategies.
@@ -10,10 +10,9 @@ communicated in advance and accompanied by migration strategies.
 
 ### Preview
 
-Our Preview package of Canvas Kit components and utilities at
-`@workday/canvas-kit-preview-react` has undergone a full design and a11y review and is approved for
-use in product, but may not be up to the high code standards upheld in the [Main](#main) package.
-Preview is analagous to code in beta.
+Our Preview package of Canvas Kit components and utilities at `@workday/canvas-kit-preview-react`
+has undergone a full design and a11y review and is approved for use in product, but may not be up to
+the high code standards upheld in the [Main](#main) package. Preview is analagous to code in beta.
 
 Breaking changes are unlikely, but possible, and can be deployed to Preview at any time without
 triggering a major version update, though such changes will be communicated in advance and
@@ -22,7 +21,7 @@ accompanied by migration strategies.
 Generally speaking, our goal is to eventually promote code from Preview to [Main](#main).
 Occasionally, a component with the same name will exist in both [Main](#main) and Preview (for
 example, see Segmented Control in [Preview](/components/buttons/segmented-control/) and
-[Main](https://d2krrudi3mmzzw.cloudfront.net/v8/?path=/docs/components-buttons-segmented-control--basic)).
+[Main](https://workday.github.io/canvas-kit//?path=/docs/components-buttons-segmented-control--docs)).
 In these cases, Preview serves as a staging ground for an improved version of the component with a
 different API. The component in [Main](#main) will eventually be replaced with the one in Preview.
 
@@ -30,8 +29,8 @@ different API. The component in [Main](#main) will eventually be replaced with t
 
 ### Labs
 
-Our Labs package of Canvas Kit components and utilities at `@workday/canvas-kit-labs-react`
-has **not** undergone a full design and a11y review. Labs serves as an incubator space for new and
+Our Labs package of Canvas Kit components and utilities at `@workday/canvas-kit-labs-react` has
+**not** undergone a full design and a11y review. Labs serves as an incubator space for new and
 experimental code and is analagous to code in alpha.
 
 Breaking changes can be deployed to Labs at any time without triggering a major version update and
@@ -43,4 +42,4 @@ changes in [Preview](#preview) and [Main](#main).
 
 This package contains everything needed to create CSS styling. This styling package contains a
 runtime for development and a static parsing process for build time. For more information, visit
-https://workday.github.io/canvas-kit/?path=/docs/styling-why-canvas-styling--docs
+https://workday.github.io/canvas-kit/?path=/docs/styling-guides-why-canvas-styling--docs

package/dist/mdx/labs-react/search-form/SearchForm.mdx

@@ -1,4 +1,4 @@
-import {ExampleCodeBlock, SymbolDoc, StorybookStatusIndicator,} from '@workday/canvas-kit-docs';
+import {ExampleCodeBlock, SymbolDoc, StorybookStatusIndicator} from '@workday/canvas-kit-docs';
 import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';import Basic from './examples/Basic';
 import Collapsed from './examples/Collapsed';
 import CustomTheme from './examples/CustomTheme';
@@ -74,11 +74,16 @@ additional configuration.
 
 ### Custom Styles
 
-You can apply custom styles to the component via the `cs` prop. The example below uses CSS Variables and [createStencil](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs#stencils) to create a custom style for the `SearchForm` component.
+You can apply custom styles to the component via the `cs` prop. The example below uses CSS Variables
+and
+[createStencil](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs#stencils)
+to create a custom style for the `SearchForm` component.
 
 <ExampleCodeBlock code={CustomStyles} />
 
-Learn more in our [Styling](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs) docs.
+Learn more in our
+[Styling](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs)
+docs.
 
 ## Component API
 

package/dist/mdx/preview-react/divider/Divider.mdx

@@ -1,6 +1,6 @@
-import {SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
+import {ExampleCodeBlock, SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
 
-import {Divider} from '@workday/canvas-kit-preview-react/divider';
+import * as Divider from './Divider.stories.ts';
 import Basic from './examples/Basic';
 import CustomSpace from './examples/CustomSpace';
 
@@ -17,17 +17,27 @@ yarn add @workday/canvas-kit-preview-react
 
 ## Usage
 
-Use a `Divider` to separate content and create visual hierarchy. Typically they are used between paragraph sections to indicate a break or shift in content. However, they can also be used as decorative elements to provide greater emphasis and visual hierarchy.
+Use a `Divider` to separate content and create visual hierarchy. Typically they are used between
+paragraph sections to indicate a break or shift in content. However, they can also be used as
+decorative elements to provide greater emphasis and visual hierarchy.
 
 ### Basic Example
 
-By default, `Divider` renders a `<hr>` (horizontal rule) element with `0.5rem` of margin on top and bottom. The `space` prop allows you to adjust the vertical margin evenly. In the example below, the `Divider`s provide a subtle deliniation between each profile card without being as visually prominent as a `Card`. The `space` is adjusted to `0.25rem` which applied `0.125rem` to the top and bottom margin.
+By default, `Divider` renders a `<hr>` (horizontal rule) element with `0.5rem` of margin on top and
+bottom. The `space` prop allows you to adjust the vertical margin evenly. In the example below, the
+`Divider`s provide a subtle deliniation between each profile card without being as visually
+prominent as a `Card`. The `space` is adjusted to `0.25rem` which applied `0.125rem` to the top and
+bottom margin.
 
 <ExampleCodeBlock code={Basic} />
 
 ### Custom Space
 
-You might also want to apply custom space to `Divider` where the top and bottom margin are not equal. The best way to achieve this is with `createStyles` and the `cs` property. In the example below, the `Divider` is applied as a decorative element to add emphasis to the section heading. Custom styles are defined in the `createStyles` function outside the component and are passed to `Divider`'s `cs` prop. These styles remove the top margin and set the bottom margin to `1rem`.
+You might also want to apply custom space to `Divider` where the top and bottom margin are not
+equal. The best way to achieve this is with `createStyles` and the `cs` property. In the example
+below, the `Divider` is applied as a decorative element to add emphasis to the section heading.
+Custom styles are defined in the `createStyles` function outside the component and are passed to
+`Divider`'s `cs` prop. These styles remove the top margin and set the bottom margin to `1rem`.
 
 <ExampleCodeBlock code={CustomSpace} />
 

package/dist/mdx/preview-react/pill/Pill.mdx

@@ -28,9 +28,9 @@ information to help with scanning and organization.
 
 ### Basic Pills
 
-By default a Pill is considered interactive. All leading
-elements (icons or avatars) are intended to be descriptive, helping support the label. Do not rely
-on the leading element to indicate the interaction behavior.
+By default a Pill is considered interactive. All leading elements (icons or avatars) are intended to
+be descriptive, helping support the label. Do not rely on the leading element to indicate the
+interaction behavior.
 
 #### Icon
 
@@ -101,7 +101,7 @@ accordingly.
 ### Custom Styles
 
 `Pill` supports custom styling via the `cs` prop. For more information, check our
-["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs)
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs)
 or view the example below.
 
 <ExampleCodeBlock code={CustomStyles} />

package/dist/mdx/preview-react/radio/Radio.mdx

@@ -1,4 +1,4 @@
-import { ExampleCodeBlock, SymbolDoc } from '@workday/canvas-kit-docs';
+import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
 
 import Basic from './examples/Basic';
 import Alert from './examples/Alert';
@@ -139,7 +139,7 @@ how to use `RadioGroup` with React Hook Form.
 
 Radio and its subcomponents support custom styling via the `cs` prop. For more information, check
 our
-["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs).
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).
 
 ## Component API
 

package/dist/mdx/preview-react/select/Select.mdx

@@ -32,7 +32,7 @@ import GrowLeft from './examples/Left Label/GrowLeft';
     use `Select` in Main instead.
   </InformationHighlight.Body>
   <InformationHighlight.Link href="https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--docs">
-    Form Field Docs
+    Select (main) Docs
   </InformationHighlight.Link>
 </InformationHighlight>
 

package/dist/mdx/preview-react/status-indicator/StatusIndicator.mdx

@@ -1,4 +1,4 @@
-import { ExampleCodeBlock, SymbolDoc } from '@workday/canvas-kit-docs';
+import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
 
 import Basic from './examples/Basic';
 import Emphasis from './examples/Emphasis';
@@ -75,7 +75,7 @@ The background color dictated by the `variant` will be dark or light based on th
 
 Status Indicator and its subcomponents support custom styling via the `cs` prop. For more
 information, check our
-["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs).
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).
 
 ## Component API
 

package/dist/mdx/react/_examples/mdx/Layouts.mdx

@@ -14,7 +14,7 @@ import Tiled4and2Columns from './examples/layout/Tiled4and2Columns';
 
 Below are layout examples to reference as you build your own. For more in-depth information on our
 `Grid` component, please reference our
-[`Grid` documentation](https://workday.github.io/canvas-kit//?path=/docs/components-containers-grid--basic).
+[`Grid` documentation](https://workday.github.io/canvas-kit/?path=/docs/components-layout-grid--docs).
 
 ## Area Column Positioning
 

package/dist/mdx/react/avatar/avatar/Avatar.mdx

@@ -1,4 +1,10 @@
-import {Specifications, SymbolDoc, SymbolDescription, ExampleCodeBlock, StorybookStatusIndicator} from '@workday/canvas-kit-docs';
+import {
+  Specifications,
+  SymbolDoc,
+  SymbolDescription,
+  ExampleCodeBlock,
+  StorybookStatusIndicator,
+} from '@workday/canvas-kit-docs';
 import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';
 
 import Basic from './examples/Basic';
@@ -16,9 +22,9 @@ import CustomStyles from './examples/CustomStyles';
 <InformationHighlight className="sb-unstyled" variant="caution" cs={{p: {marginBlock: 0}}}>
   <InformationHighlight.Icon />
   <InformationHighlight.Body>
-    `Avatar` in Main has been deprecated and will be removed in a future major version.
-    Please use [Avatar](https://workday.github.io/canvas-kit/?path=/docs/preview-avatar--basic) in
-    Preview instead.
+    `Avatar` in Main has been deprecated and will be removed in a future major version. Please use
+    [Avatar](https://workday.github.io/canvas-kit/?path=/docs/preview-avatar--docs) in Preview
+    instead.
   </InformationHighlight.Body>
 </InformationHighlight>
 

package/dist/mdx/react/button/button/Button.mdx

@@ -1,11 +1,11 @@
 import {
-	ExampleCodeBlock,
-	Specifications,
-	SymbolDoc,
-	SymbolDescription,
+  ExampleCodeBlock,
+  Specifications,
+  SymbolDoc,
+  SymbolDescription,
 } from '@workday/canvas-kit-docs';
-import { Pill } from '@workday/canvas-kit-preview-react/pill';
-import { accessibilityIcon } from '@workday/canvas-system-icons-web';
+import {Pill} from '@workday/canvas-kit-preview-react/pill';
+import {accessibilityIcon} from '@workday/canvas-system-icons-web';
 
 import Primary from './examples/Primary';
 import PrimaryInverse from './examples/PrimaryInverse';
@@ -89,27 +89,31 @@ the width of the button to the width of its container.
 ### Custom Styles
 
 All of our buttons support custom styling via the `cs` prop. For more information, check our
-["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs)
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs)
 or view the example below.
 
 <ExampleCodeBlock code={CustomStyles} />
 
 ### Theme Overrides
 
-The most common way to theme our buttons is to pass a `theme` object at the root level of the application via the `CanvasProvider`. In the example below, our buttons use our `brand.action.**` tokens with the fallback being `brand.primary.**`.
+The most common way to theme our buttons is to pass a `theme` object at the root level of the
+application via the `CanvasProvider`. In the example below, our buttons use our `brand.action.**`
+tokens with the fallback being `brand.primary.**`.
 
-> **Caution:** Setting `--cnvs-brand-action**` tokens at the `:root` CSS will override all `PrimaryButton` theme colors set at the `CanvasProvider` level.
+> **Caution:** Setting `--cnvs-brand-action**` tokens at the `:root` CSS will override all
+> `PrimaryButton` theme colors set at the `CanvasProvider` level.
 
-> **Note:** You should **not** individually theme components wrapping them with the `CanvasProvider`, but rather theme at the root level of the application.
+> **Note:** You should **not** individually theme components wrapping them with the
+> `CanvasProvider`, but rather theme at the root level of the application.
 
 <ExampleCodeBlock code={ThemeOverrides} />
 
- ## Accessibility
+## Accessibility
 
- <Pill className='sb-unstyled'>
-	<Pill.Icon icon={accessibilityIcon} />
-	<Pill.Label>WAI-ARIA Reference</Pill.Label>
- </Pill>
+<Pill className="sb-unstyled">
+  <Pill.Icon icon={accessibilityIcon} />
+  <Pill.Label>WAI-ARIA Reference</Pill.Label>
+</Pill>
 
 ### Accessible Use of the `as` Prop
 
@@ -120,7 +124,8 @@ should be used for navigation.
 
 ### Role
 
-By default buttons have a `role` of `button`. If you wish to use buttons in the context of a form, the role should be set to type `submit`.
+By default buttons have a `role` of `button`. If you wish to use buttons in the context of a form,
+the role should be set to type `submit`.
 
 ## Component API
 

package/dist/mdx/react/card/card.mdx

@@ -48,7 +48,7 @@ grayish background to create visual separation from the page background.
 ### Custom Styles
 
 Card and its subcomponents support custom styling via the `cs` prop. For more information, check our
-["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs).
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).
 
 <ExampleCodeBlock code={WithCustomStyles} />
 

package/dist/mdx/react/checkbox/Checkbox.mdx

@@ -1,8 +1,8 @@
 import {
-	ExampleCodeBlock,
-	SymbolDoc,
-	Specifications,
-	InformationHighlight,
+  ExampleCodeBlock,
+  SymbolDoc,
+  Specifications,
+  InformationHighlight,
 } from '@workday/canvas-kit-docs';
 import Alert from './examples/Alert';
 import Basic from './examples/Basic';
@@ -104,7 +104,7 @@ or `Checkbox.ErrorType.Error` if Form Field is not being used.
 ### Custom Styles
 
 Checkbox supports custom styling via the `cs` prop. For more information, check our
-["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs).
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).
 
 ## Component API
 

package/dist/mdx/react/combobox/Combobox.mdx

@@ -1,4 +1,4 @@
-import { ExampleCodeBlock, SymbolDoc, Specifications } from '@workday/canvas-kit-docs';
+import {ExampleCodeBlock, SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
 import Autocomplete from './examples/Autocomplete';
 
 # Combobox
@@ -72,7 +72,7 @@ An Autocomplete is an example of an arbitrary combobox.
 
 Combobox and its subcomponents support custom styling via the `cs` prop. For more information, check
 our
-["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs).
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).
 
 ## Component API
 

package/dist/mdx/react/form-field/FormField.mdx

@@ -1,4 +1,4 @@
-import { ExampleCodeBlock, Specifications, SymbolDoc } from '@workday/canvas-kit-docs';
+import {ExampleCodeBlock, Specifications, SymbolDoc} from '@workday/canvas-kit-docs';
 import Basic from './examples/Basic';
 import Alert from './examples/Alert';
 import Error from './examples/Error';
@@ -202,7 +202,7 @@ You can theme your error rings by wrapping an input in a `CanvasProvider` and de
 
 Form Field and its subcomponents support custom styling via the `cs` prop. For more information,
 check our
-["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs).
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).
 
 ## Component API
 

package/dist/mdx/react/select/Select.mdx

@@ -1,8 +1,8 @@
 import {
-	ExampleCodeBlock,
-	InformationHighlight,
-	SymbolDoc,
-	Specifications,
+  ExampleCodeBlock,
+  InformationHighlight,
+  SymbolDoc,
+  Specifications,
 } from '@workday/canvas-kit-docs';
 import Alert from './examples/Alert';
 import Basic from './examples/Basic';
@@ -20,7 +20,7 @@ import HoistedModel from './examples/HoistedModel';
 import RefForwarding from './examples/RefForwarding';
 import FetchingDynamicItems from './examples/FetchingDynamicItems';
 import Placeholder from './examples/Placeholder';
-import InitialSelectedItem from './examples/InitialSelectedItem';import { Table } from '@workday/canvas-kit-react/table';
+import InitialSelectedItem from './examples/InitialSelectedItem';import {Table} from '@workday/canvas-kit-react/table';
 
 
 # Canvas Kit Select
@@ -305,7 +305,7 @@ prop as well as the `value` DOM property and will update the model accordingly.
 
 Select and its subcomponents support custom styling via the `cs` prop. For more information, check
 our
-["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs).
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).
 
 ## Component API
 

package/dist/mdx/react/status-indicator/StatusIndicator.mdx

@@ -13,7 +13,7 @@ import MaxWidth from './examples/MaxWidth';
   <InformationHighlight.Body>
     `StatusIndicator` in Main 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
+    Indicator](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--docs) in
     Preview instead.
   </InformationHighlight.Body>
 </InformationHighlight>

package/dist/mdx/react/switch/Switch.mdx

@@ -1,8 +1,8 @@
 import {
-	ExampleCodeBlock,
-	SymbolDoc,
-	Specifications,
-	InformationHighlight,
+  ExampleCodeBlock,
+  SymbolDoc,
+  Specifications,
+  InformationHighlight,
 } from '@workday/canvas-kit-docs';
 import Alert from './examples/Alert';
 import Basic from './examples/Basic';
@@ -73,7 +73,7 @@ The `error` prop may be applied directly to the Switch with a value of `Switch.E
 ### Custom Styles
 
 Switch supports custom styling via the `cs` prop. For more information, check our
-["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs).
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).
 
 ## Component API