@workday/canvas-kit-docs 14.0.0-alpha.1230-next.0 → 14.0.0-alpha.1234-next.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

@@ -26,6 +26,7 @@ any questions.
   - [Avatar in Main](#avatar-in-main)
   - [Combobox (Labs)](#combobox-labs)
   - [Radio (Main)](#radio-main)
+  - [SearchForm (Labs)](#search-form-labs)
   - [Segmented Control (Main)](#segmented-control-main)
   - [Side Panel (Main)](#side-panel-main)
   - [Tokens](#tokens)
@@ -34,6 +35,8 @@ any questions.
   - [Input Provider](#input-provider)
   - [Menu (preview)](#menu-preview)
   - [readyOnlyPillStencil and removeablePillStencil](readyOnlyPillStencil-and-removeablePillStencil)
+  - [Text Area](#text-area)
+  - [Text Input](#text-input)
 - [Troubleshooting](#troubleshooting)
 - [Glossary](#glossary)
   - [Main](#main)
@@ -105,42 +108,48 @@ yarn remove @workday/canvas-kit-codemod
 
 ### Canvas Provider 🚨
 
-**PRs:** [#3407](https://github.com/Workday/canvas-kit/pull/3407), [#3394](https://github.com/Workday/canvas-kit/pull/3394)
+**PRs:** [#3407](https://github.com/Workday/canvas-kit/pull/3407),
+[#3394](https://github.com/Workday/canvas-kit/pull/3394)
 
 - `CanvasThemePalette` and `CanvasTheme` type have been updated to include a `lighter` property.
 - `CanvasProvider` `theme` prop has been updated to include a `lighter` color for each palette.
 
 #### Breaking Changes
 
-Canvas Provider has been updated to **remove** default branding colors to ensure proper cascading of our CSS variables. Instead of generating a palette and shifting the brightness and darkness with `chroma.js`, we use `oklch` to generate the palette colors.
+Canvas Provider has been updated to **remove** default branding colors to ensure proper cascading of
+our CSS variables. Instead of generating a palette and shifting the brightness and darkness with
+`chroma.js`, we use `oklch` to generate the palette colors.
 
-**Before in v13**
-In v13, the `useTheme` hook would call `createCanvasTheme` which generated a palette given a `main` color via `chroma.js`.
+**Before in v13** In v13, the `useTheme` hook would call `createCanvasTheme` which generated a
+palette given a `main` color via `chroma.js`.
 
 ```tsx
 <CanvasProvider theme={{canvas: {palette: {primary: {main: 'purple'}}}}}>
-  <App/>
+  <App />
 </CanvasProvider>
 ```
 
-**After in v14**
-We use `oklch` to generate the palette colors. The color shifting will be different. If you want more control over the colors, we suggest providing the full palette object.
+**After in v14** We use `oklch` to generate the palette colors. The color shifting will be
+different. If you want more control over the colors, we suggest providing the full palette object.
 
 ```tsx
-<CanvasProvider theme={
-	{canvas: {
-		palette: {
-			primary: {
-				lightest: base.blue25,
-				light: base.blue200,
-				main: base.blue600,
-				dark: base.blue700,
-				darkest: base.blue800,
-				contrast: base.neutral0,
-			},
-		},
-	}}}>
-  <App/>
+<CanvasProvider
+  theme={{
+    canvas: {
+      palette: {
+        primary: {
+          lightest: base.blue25,
+          light: base.blue200,
+          main: base.blue600,
+          dark: base.blue700,
+          darkest: base.blue800,
+          contrast: base.neutral0,
+        },
+      },
+    },
+  }}
+>
+  <App />
 </CanvasProvider>
 ```
 
@@ -148,19 +157,26 @@ We use `oklch` to generate the palette colors. The color shifting will be differ
 
 ```tsx
 <CanvasProvider theme={{canvas: {palette: {primary: {main: cssVar(base.blue600)}}}}}>
-  <App/>
+  <App />
 </CanvasProvider>
 ```
 
-> **Note:** The way `chroma.js` and `oklch` generate colors **is different**. While we work on a better algorithm to determine hue, chroma and lightness and color shifting that best represents an accessible palette, **you may see color discrepancies**. If you want to continue using the old way of generating a color palette with `chroma.js`, you can use `createCanvasTheme`.
+> **Note:** The way `chroma.js` and `oklch` generate colors **is different**. While we work on a
+> better algorithm to determine hue, chroma and lightness and color shifting that best represents an
+> accessible palette, **you may see color discrepancies**. If you want to continue using the old way
+> of generating a color palette with `chroma.js`, you can use `createCanvasTheme`.
 
 ```tsx
-<CanvasProvider theme={{canvas: createCanvasTheme({palette: {primary: {main: cssVar(base.blue600)}}})}}>
-  <App/>
+<CanvasProvider
+  theme={{canvas: createCanvasTheme({palette: {primary: {main: cssVar(base.blue600)}}})}}
+>
+  <App />
 </CanvasProvider>
 ```
 
-The reason for this change is to ensure that the CSS variables properly cascade to all components. Before in v13, the `CanvasProvider` would add the brand tokens under a class name, creating a higher specificity.
+The reason for this change is to ensure that the CSS variables properly cascade to all components.
+Before in v13, the `CanvasProvider` would add the brand tokens under a class name, creating a higher
+specificity.
 
 ## Component Updates
 
@@ -388,7 +404,8 @@ These changes are only **visual** and should not affect the functionality of the
 
 ### Pill
 
-**PRs:** [#3430](https://github.com/Workday/canvas-kit/pull/3430), [#3446](https://github.com/Workday/canvas-kit/pull/3446)
+**PRs:** [#3430](https://github.com/Workday/canvas-kit/pull/3430),
+[#3446](https://github.com/Workday/canvas-kit/pull/3446)
 
 - `Pill` has been updated to use the `Avatar` component from Preview. This change requires that you
   provide a value for the `name` prop.
@@ -398,7 +415,8 @@ These changes are only **visual** and should not affect the functionality of the
 - The `Pill` component no longer supports `'default'` as a value for the `variant` prop. If the
   `variant` prop is not provided, the component will use its default styling.
 
-- `readyOnlyPillStencil` and `removeablePillStencil` have been removed due to some styling clean up. Please use `pillStencil` instead.
+- `readyOnlyPillStencil` and `removeablePillStencil` have been removed due to some styling clean up.
+  Please use `pillStencil` instead.
 
 **Before in v13**
 
@@ -418,7 +436,6 @@ These changes are only **visual** and should not affect the functionality of the
 </Pill>
 ```
 
-
 ### Search Form 🚨
 
 **PR:** [#3303](https://github.com/Workday/canvas-kit/pull/3303)
@@ -544,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)
@@ -553,19 +570,28 @@ The Radio component in `@workday/canvas-kit-react/radio` has been deprecated. Pl
 [Radio](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-radio--docs) component
 from the same package, which offers improved accessibility and API consistency.
 
+### Search Form (Labs)
+
+**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`.
+
 ### 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
 
@@ -594,10 +620,16 @@ and themable buttons like `PrimaryButton`, `ScondaryButton` or `TertiaryButton`.
 
 ### Input Provider
 
-We've removed `InputProvider` from our codebase and the `CanvasProvider`. The intent of the provider was to check the users input and apply focus styles accordingly to our components. This was needed when we still supported IE11 to ensure we could be consistent on styling based on user input events. Since dropping support and moving to `:focus-visible`, we no longer need this provider.
-We now allow browser heuristics to determine when an element should receive visual focus styles. For more information, please view the [MDN docs on `:focus-visible`](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible).
+We've removed `InputProvider` from our codebase and the `CanvasProvider`. The intent of the provider
+was to check the users input and apply focus styles accordingly to our components. This was needed
+when we still supported IE11 to ensure we could be consistent on styling based on user input events.
+Since dropping support and moving to `:focus-visible`, we no longer need this provider. We now allow
+browser heuristics to determine when an element should receive visual focus styles. For more
+information, please view the
+[MDN docs on `:focus-visible`](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible).
 
-If you are trying to apply focus styles to our components, we strongly avise to use `:focus-visible` pseudo selector.
+If you are trying to apply focus styles to our components, we strongly avise to use `:focus-visible`
+pseudo selector.
 
 ```tsx
 import {createStyles} from '@workday/canvas-kit-styling'
@@ -627,6 +659,22 @@ We've removed `Menu` from `@workday/canvas-kit-preview-react` package. Please us
 The `readyOnlyPillStencil` and `removeablePillStencil` utilities have been removed from the Pill
 package. Please use `pillStencil` instead.
 
+### Text Area (preview)
+
+**PR:** [#3471](https://github.com/Workday/canvas-kit/pull/3471)
+
+We've removed `TextArea` from `@workday/canvas-kit-preview-react` package. Please use
+[TextArea](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-textarea--docs) from
+`@workday/canvas-kit-react` instead.
+
+### Text Input (preview)
+
+**PR:** [#3471](https://github.com/Workday/canvas-kit/pull/3471)
+
+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.
+
 ---
 
 ## Troubleshooting

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/combobox/Combobox.mdx

@@ -18,7 +18,7 @@ import RTL from './examples/RTL';
 <InformationHighlight className="sb-unstyled" variant="caution" cs={{p: {marginBlock: 0}}}>
   <InformationHighlight.Icon />
   <InformationHighlight.Body>
-    `Combobox` in Preview has been deprecated and will be removed in a future major version. Please
+    `Combobox` in Labs has been deprecated and will be removed in a future major version. Please
     use `Combobox` in Main instead.
   </InformationHighlight.Body>
   <InformationHighlight.Link href="https://workday.github.io/canvas-kit/?path=/docs/features-combobox--docs">

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

@@ -1,4 +1,5 @@
-import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';import Basic from './examples/Basic';
+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';
 import Grow from './examples/Grow';
@@ -7,7 +8,18 @@ import Theming from './examples/Theming';
 import CustomStyles from './examples/CustomStyles';
 
 
-# Canvas Kit Search Form
+# Canvas Kit Search Form <StorybookStatusIndicator type="deprecated" />
+
+<InformationHighlight className="sb-unstyled" variant="caution" cs={{p: {marginBlock: 0}}}>
+  <InformationHighlight.Icon />
+  <InformationHighlight.Body>
+    `SearchForm` in Labs has been deprecated and will be removed in a future major version. Please
+    use `Combobox` in Main instead.
+  </InformationHighlight.Body>
+  <InformationHighlight.Link href="https://workday.github.io/canvas-kit/?path=/docs/features-combobox--docs#usage">
+    View Autocomplete Example
+  </InformationHighlight.Link>
+</InformationHighlight>
 
 `SearchForm` is a search form that contains a `Combobox` for rendering search results. It's
 primarily intended to be used within a `Header`.
@@ -62,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/_examples/mdx/examples/TextInputWithFormik.tsx

@@ -3,11 +3,12 @@ import React from 'react';
 import {useFormik} from 'formik';
 import {object, SchemaOf, string} from 'yup';
 
-import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {TertiaryButton, PrimaryButton} from '@workday/canvas-kit-react/button';
 import {visibleIcon, invisibleIcon} from '@workday/canvas-system-icons-web';
 import {useUniqueId} from '@workday/canvas-kit-react/common';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 
 interface LoginSchema {
   email: string;
@@ -47,40 +48,46 @@ export default () => {
   return (
     <form onSubmit={formik.handleSubmit} action=".">
       <Flex gap="xs" flexDirection="column" alignItems="flex-start">
-        <TextInput
+        <FormField
           orientation="vertical"
           isRequired={true}
           error={formik.touched.email && !!formik.errors.email ? 'error' : undefined}
         >
-          <TextInput.Label>Email</TextInput.Label>
-          <TextInput.Field
-            name="email"
-            autoComplete="username"
-            placeholder="yourName@example.com"
-            onChange={formik.handleChange}
-            onBlur={formik.handleBlur}
-            value={formik.values.email}
-          />
-          <TextInput.Hint>{formik.touched.email && formik.errors.email}</TextInput.Hint>
-        </TextInput>
-        <TextInput
+          <FormField.Label>Email</FormField.Label>
+          <FormField.Field>
+            <FormField.Input
+              as={TextInput}
+              name="email"
+              autoComplete="username"
+              placeholder="yourName@example.com"
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              value={formik.values.email}
+            />
+          </FormField.Field>
+          <FormField.Hint>{formik.touched.email && formik.errors.email}</FormField.Hint>
+        </FormField>
+        <FormField
           orientation="vertical"
           id={passwordId}
           error={formik.touched.password && !!formik.errors.password ? 'error' : undefined}
           isRequired={true}
         >
-          <TextInput.Label>Password</TextInput.Label>
+          <FormField.Label>Password</FormField.Label>
           <Flex gap="xxs">
-            <TextInput.Field
-              type={showPassword ? 'text' : 'password'}
-              name="password"
-              autoComplete="current-password"
-              spellCheck={false}
-              ref={passwordRef}
-              onChange={formik.handleChange}
-              onBlur={formik.handleBlur}
-              value={formik.values.password}
-            />
+            <FormField.Field>
+              <FormField.Input
+                as={TextInput}
+                type={showPassword ? 'text' : 'password'}
+                name="password"
+                autoComplete="current-password"
+                spellCheck={false}
+                ref={passwordRef}
+                onChange={formik.handleChange}
+                onBlur={formik.handleBlur}
+                value={formik.values.password}
+              />
+            </FormField.Field>
             <TertiaryButton
               type="button"
               icon={showPassword ? invisibleIcon : visibleIcon}
@@ -92,10 +99,10 @@ export default () => {
               }}
             />
           </Flex>
-          <TextInput.Hint>
+          <FormField.Hint>
             {(formik.touched.password && formik.errors.password) || passwordHint}
-          </TextInput.Hint>
-        </TextInput>
+          </FormField.Hint>
+        </FormField>
 
         <PrimaryButton type="submit">Submit</PrimaryButton>
       </Flex>

package/dist/mdx/preview-react/_examples/mdx/examples/TextInputWithReactHookForm.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import {useForm, FieldErrorsImpl} from 'react-hook-form';
 import {object, SchemaOf, string} from 'yup';
 
-import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {TertiaryButton, PrimaryButton} from '@workday/canvas-kit-react/button';
 import {Select} from '@workday/canvas-kit-react/select';
@@ -120,34 +120,40 @@ export default () => {
             <FormField.Hint>{errors.role?.message}</FormField.Hint>
           </Select>
         </FormField>
-        <TextInput
+        <FormField
           orientation="vertical"
           isRequired={true}
           error={!!errors.email ? 'error' : undefined}
         >
-          <TextInput.Label>Email</TextInput.Label>
-          <TextInput.Field
-            {...register('email')}
-            autoComplete="username"
-            placeholder="yourName@example.com"
-          />
-          <TextInput.Hint>{errors.email?.message}</TextInput.Hint>
-        </TextInput>
-        <TextInput
+          <FormField.Label>Email</FormField.Label>
+          <FormField.Field>
+            <FormField.Input
+              as={TextInput}
+              {...register('email')}
+              autoComplete="username"
+              placeholder="yourName@example.com"
+            />
+          </FormField.Field>
+          <FormField.Hint>{errors.email?.message}</FormField.Hint>
+        </FormField>
+        <FormField
           orientation="vertical"
           id={passwordId}
           isRequired={true}
           error={!!errors.password ? 'error' : undefined}
         >
-          <TextInput.Label>Password</TextInput.Label>
+          <FormField.Label>Password</FormField.Label>
           <Flex gap="xxs">
-            <TextInput.Field
-              {...passwordRegistration}
-              type={showPassword ? 'text' : 'password'}
-              autoComplete="current-password"
-              spellCheck={false}
-              ref={combinePasswordRef}
-            />
+            <FormField.Field>
+              <FormField.Input
+                as={TextInput}
+                {...passwordRegistration}
+                type={showPassword ? 'text' : 'password'}
+                autoComplete="current-password"
+                spellCheck={false}
+                ref={combinePasswordRef}
+              />
+            </FormField.Field>
             <TertiaryButton
               type="button"
               icon={showPassword ? invisibleIcon : visibleIcon}
@@ -159,8 +165,8 @@ export default () => {
               }}
             />
           </Flex>
-          <TextInput.Hint>{errors.password?.message || passwordHint}</TextInput.Hint>
-        </TextInput>
+          <FormField.Hint>{errors.password?.message || passwordHint}</FormField.Hint>
+        </FormField>
 
         <PrimaryButton type="submit">Submit</PrimaryButton>
       </Flex>

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} />