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

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

@@ -26,13 +26,17 @@ 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)
 - [Removals](#removals)
   - [Deprecated Buttons](#deprecated-buttons)
+  - [Input Provider](#input-provider)
   - [Menu (preview)](#menu-preview)
-  - [readyOnlyPillStencil and removeablePillStencil][readyOnlyPillStencil-and-removeablePillStencil]
+  - [readyOnlyPillStencil and removeablePillStencil](readyOnlyPillStencil-and-removeablePillStencil)
+  - [Text Area](#text-area)
+  - [Text Input](#text-input)
 - [Troubleshooting](#troubleshooting)
 - [Glossary](#glossary)
   - [Main](#main)
@@ -104,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>
 ```
 
@@ -147,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
 
@@ -387,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.
@@ -397,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**
 
@@ -417,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)
@@ -552,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
@@ -591,6 +616,34 @@ as a reminder of how far we've come and it part we're thankful for this change.
 Al though unlikely, but not impossible, if you were using `DeprecatedButton` please use our flexible
 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).
+
+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'
+import {PrimaryButton} from '@workday/canvas-kit-react/button'
+
+const buttonStyles = createStyles({
+  '&:focus-visible': {
+    outline: '2px solid red'
+  }
+})
+
+<PrimaryButton cs={buttonStyles}>
+	Click Me
+</PrimaryButton>
+```
+
 ### Menu (preview)
 
 **PR:** [#3353](https://github.com/Workday/canvas-kit/pull/3353)
@@ -604,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.1229-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.1229-next.0",
-    "@workday/canvas-kit-preview-react": "^14.0.0-alpha.1229-next.0",
-    "@workday/canvas-kit-react": "^14.0.0-alpha.1229-next.0",
-    "@workday/canvas-kit-styling": "^14.0.0-alpha.1229-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": "9058e7f2709a2212664672616bf6c8222f3e6eba"
+  "gitHead": "7ed1570b966cb8473b3db07695fb2bc86af7739c"
 }