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

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)
@@ -553,6 +570,13 @@ 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
@@ -594,10 +618,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 +657,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/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`.

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/react/_examples/mdx/examples/common/FilterListWithLiveStatus.tsx

@@ -1,10 +1,11 @@
 import React, {useState} from 'react';
-import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
 import {BodyText, Heading} from '@workday/canvas-kit-react/text';
 import {AriaLiveRegion} from '@workday/canvas-kit-react/common';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {system} from '@workday/canvas-tokens-web';
 import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 
 const fruits = [
   'Apples',
@@ -49,10 +50,12 @@ export default () => {
           </BodyText>
         </AriaLiveRegion>
       </Flex>
-      <TextInput orientation="vertical">
-        <TextInput.Label>Filter Items:</TextInput.Label>
-        <TextInput.Field value={filter} onChange={handleFilter} />
-      </TextInput>
+      <FormField>
+        <FormField.Label>Filter Items:</FormField.Label>
+        <FormField.Field>
+          <FormField.Input as={TextInput} value={filter} onChange={handleFilter} />
+        </FormField.Field>
+      </FormField>
       <ul style={listStyles}>
         {filteredFruits.map(i => (
           <BodyText size="small" as="li" cs={listItemStyles} key={i}>

package/dist/mdx/react/_examples/mdx/examples/common/HiddenLiveRegion.tsx

@@ -1,9 +1,10 @@
 import React, {useState, useRef} from 'react';
 import {AriaLiveRegion, AccessibleHide} from '@workday/canvas-kit-react/common';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
-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 {system} from '@workday/canvas-tokens-web';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 
 export default () => {
   const [message, setMessage] = useState('This is an ARIA Live Region!');
@@ -16,10 +17,12 @@ export default () => {
   return (
     <>
       <Flex gap={`var(${system.space.x4})`} alignItems="flex-end">
-        <TextInput orientation="vertical">
-          <TextInput.Label>Type your message:</TextInput.Label>
-          <TextInput.Field ref={inputRef} />
-        </TextInput>
+        <FormField>
+          <FormField.Label>Type your message:</FormField.Label>
+          <FormField.Field>
+            <FormField.Input as={TextInput} ref={inputRef} />
+          </FormField.Field>
+        </FormField>
         <PrimaryButton onClick={handleSendMessage}>Send Message</PrimaryButton>
       </Flex>
       <AriaLiveRegion>

package/dist/mdx/react/_examples/mdx/examples/common/TextInputWithLiveError.tsx

@@ -1,7 +1,8 @@
 import React, {useState, useRef} from 'react';
-import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
 import {AriaLiveRegion, changeFocus} from '@workday/canvas-kit-react/common';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 
 export default () => {
   const errMsg = 'Error: First name is required.';
@@ -12,13 +13,15 @@ export default () => {
 
   return (
     <>
-      <TextInput orientation="vertical" hasError={hasError} isRequired={true}>
-        <TextInput.Label>First Name:</TextInput.Label>
-        <TextInput.Field onBlur={handleBlur} ref={inputRef} />
-        <TextInput.Hint height={'16px'}>
-          <AriaLiveRegion>{hasError && errMsg}</AriaLiveRegion>
-        </TextInput.Hint>
-      </TextInput>
+      <FormField error={hasError ? 'error' : undefined} isRequired={true}>
+        <FormField.Label>First Name:</FormField.Label>
+        <FormField.Field>
+          <FormField.Input onBlur={handleBlur} as={TextInput} ref={inputRef} />
+          <FormField.Hint>
+            <AriaLiveRegion>{hasError && errMsg}</AriaLiveRegion>
+          </FormField.Hint>
+        </FormField.Field>
+      </FormField>
       <PrimaryButton onClick={handleSubmit}>Continue</PrimaryButton>
     </>
   );

package/dist/mdx/react/_examples/mdx/examples/common/VisibleLiveRegion.tsx

@@ -1,7 +1,8 @@
 import React, {useState, useRef} from 'react';
 import {AriaLiveRegion} from '@workday/canvas-kit-react/common';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
-import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {Text} from '@workday/canvas-kit-react/text';
 import {system} from '@workday/canvas-tokens-web';
@@ -18,6 +19,7 @@ const liveRegionStyle = createStyles({
 export default () => {
   const [message, setMessage] = useState('This is an ARIA Live Region!');
   const inputRef = useRef();
+
   function handleSendMessage() {
     setMessage(inputRef.current.value);
     inputRef.current.value = '';
@@ -29,10 +31,12 @@ export default () => {
         <Text cs={liveRegionStyle}>{message}</Text>
       </AriaLiveRegion>
       <Flex gap={`var(${system.space.x4})`} alignItems="flex-end">
-        <TextInput orientation="vertical">
-          <TextInput.Label>Type your message:</TextInput.Label>
-          <TextInput.Field ref={inputRef} />
-        </TextInput>
+        <FormField>
+          <FormField.Label>Type your message:</FormField.Label>
+          <FormField.Field>
+            <FormField.Input as={TextInput} ref={inputRef} />
+          </FormField.Field>
+        </FormField>
         <PrimaryButton onClick={handleSendMessage}>Send Message</PrimaryButton>
       </Flex>
     </>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "14.0.0-alpha.1230-next.0",
+  "version": "14.0.0-alpha.1233-next.0",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -45,10 +45,10 @@
     "@emotion/styled": "^11.6.0",
     "@stackblitz/sdk": "^1.11.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^14.0.0-alpha.1230-next.0",
-    "@workday/canvas-kit-preview-react": "^14.0.0-alpha.1230-next.0",
-    "@workday/canvas-kit-react": "^14.0.0-alpha.1230-next.0",
-    "@workday/canvas-kit-styling": "^14.0.0-alpha.1230-next.0",
+    "@workday/canvas-kit-labs-react": "^14.0.0-alpha.1233-next.0",
+    "@workday/canvas-kit-preview-react": "^14.0.0-alpha.1233-next.0",
+    "@workday/canvas-kit-react": "^14.0.0-alpha.1233-next.0",
+    "@workday/canvas-kit-styling": "^14.0.0-alpha.1233-next.0",
     "@workday/canvas-system-icons-web": "^3.0.35",
     "@workday/canvas-tokens-web": "3.0.0-alpha.12",
     "markdown-to-jsx": "^7.2.0",
@@ -61,5 +61,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "5.0"
   },
-  "gitHead": "8080313203652737f30e578bb2ef8d4225948d6b"
+  "gitHead": "7ed1570b966cb8473b3db07695fb2bc86af7739c"
 }