@workday/canvas-kit-docs 14.2.3 → 14.2.4

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

@@ -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": "14.2.3",
-    "@workday/canvas-kit-preview-react": "14.2.3",
-    "@workday/canvas-kit-react": "14.2.3",
-    "@workday/canvas-kit-react-fonts": "^14.2.3",
-    "@workday/canvas-kit-styling": "14.2.3",
+    "@workday/canvas-kit-labs-react": "14.2.4",
+    "@workday/canvas-kit-preview-react": "14.2.4",
+    "@workday/canvas-kit-react": "14.2.4",
+    "@workday/canvas-kit-react-fonts": "^14.2.4",
+    "@workday/canvas-kit-styling": "14.2.4",
     "@workday/canvas-system-icons-web": "3.0.36",
     "@workday/canvas-tokens-web": "3.1.2"
   },

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": "14.2.3",
-    "@workday/canvas-kit-preview-react": "14.2.3",
-    "@workday/canvas-kit-react": "14.2.3",
-    "@workday/canvas-kit-react-fonts": "^14.2.3",
-    "@workday/canvas-kit-styling": "14.2.3",
+    "@workday/canvas-kit-labs-react": "14.2.4",
+    "@workday/canvas-kit-preview-react": "14.2.4",
+    "@workday/canvas-kit-react": "14.2.4",
+    "@workday/canvas-kit-react-fonts": "^14.2.4",
+    "@workday/canvas-kit-styling": "14.2.4",
     "@workday/canvas-system-icons-web": "3.0.36",
     "@workday/canvas-tokens-web": "3.1.2"
   },

package/dist/mdx/labs-react/side-panel/SidePanel.mdx

@@ -1,6 +1,11 @@
-import {ExampleCodeBlock, SymbolDoc, Specifications, StorybookStatusIndicator} from '@workday/canvas-kit-docs';
+import {
+  ExampleCodeBlock,
+  SymbolDoc,
+  Specifications,
+  StorybookStatusIndicator,
+} from '@workday/canvas-kit-docs';
 import Basic from './examples/Basic';
-import HiddenName from './examples/HiddenName';
+import Heading from './examples/Heading';
 import AlternatePanel from './examples/Variant';
 import ExternalControl from './examples/ExternalControl';
 import RightOrigin from './examples/RightOrigin';
@@ -23,7 +28,8 @@ yarn add @workday/canvas-kit-labs-react
 
 ## Migrating from Preview
 
-If you're migrating from `@workday/canvas-kit-preview-react/side-panel`, here are the key API changes:
+If you're migrating from `@workday/canvas-kit-preview-react/side-panel`, here are the key API
+changes:
 
 ### Import Changes
 
@@ -37,27 +43,27 @@ import {SidePanel, useSidePanelModel} from '@workday/canvas-kit-labs-react/side-
 
 ### Hook API Changes
 
-| Preview (`useSidePanel`) | Labs (`useSidePanelModel`) |
-|--------------------------|----------------------------|
-| `initialExpanded: boolean` | `initialTransitionState: 'expanded' \| 'collapsed'` |
-| `origin: 'left' \| 'right'` | `origin: 'start' \| 'end'` |
-| Returns `expanded: boolean` | Returns `model.state.transitionState` |
-| Returns `setExpanded(bool)` | Use `model.events.expand()` / `model.events.collapse()` |
-| Returns `panelProps` to spread | Props applied automatically via `elemPropsHook` |
-| Returns `labelProps` to spread | Use `id={model.state.labelId}` on label element |
+| Preview (`useSidePanel`)         | Labs (`useSidePanelModel`)                              |
+| -------------------------------- | ------------------------------------------------------- |
+| `initialExpanded: boolean`       | `initialTransitionState: 'expanded' \| 'collapsed'`     |
+| `origin: 'left' \| 'right'`      | `origin: 'start' \| 'end'`                              |
+| Returns `expanded: boolean`      | Returns `model.state.transitionState`                   |
+| Returns `setExpanded(bool)`      | Use `model.events.expand()` / `model.events.collapse()` |
+| Returns `panelProps` to spread   | Props applied automatically via `elemPropsHook`         |
+| Returns `labelProps` to spread   | Use `id={model.state.labelId}` on label element         |
 | Returns `controlProps` to spread | Props applied automatically to `SidePanel.ToggleButton` |
 
 ### Component API Changes
 
-| Preview | Labs |
-|---------|------|
-| `<SidePanel {...panelProps}>` | `<SidePanel model={model}>` or just `<SidePanel>` |
-| `<SidePanel.ToggleButton {...controlProps} />` | `<SidePanel.ToggleButton />` |
-| `<Heading {...labelProps}>` | `<Heading id={model.state.labelId}>` |
-| `expanded` prop on SidePanel | Managed by model's `transitionState` |
-| `touched` prop on SidePanel | Managed internally |
-| `onExpandedChange` callback | Use `onStateTransition` and derive expanded state |
-| `onStateTransition` on component | `onStateTransition` on model config |
+| Preview                                        | Labs                                              |
+| ---------------------------------------------- | ------------------------------------------------- |
+| `<SidePanel {...panelProps}>`                  | `<SidePanel model={model}>` or just `<SidePanel>` |
+| `<SidePanel.ToggleButton {...controlProps} />` | `<SidePanel.ToggleButton />`                      |
+| `<Heading {...labelProps}>`                    | `<Heading id={model.state.labelId}>`              |
+| `expanded` prop on SidePanel                   | Managed by model's `transitionState`              |
+| `touched` prop on SidePanel                    | Managed internally                                |
+| `onExpandedChange` callback                    | Use `onStateTransition` and derive expanded state |
+| `onStateTransition` on component               | `onStateTransition` on model config               |
 
 ### Code Migration Example
 
@@ -67,17 +73,17 @@ const {expanded, panelProps, labelProps, controlProps} = useSidePanel({
   initialExpanded: false,
 });
 
-<SidePanel {...panelProps} origin="right" onExpandedChange={(exp) => console.log(exp)}>
+<SidePanel {...panelProps} origin="right" onExpandedChange={exp => console.log(exp)}>
   <SidePanel.ToggleButton {...controlProps} />
   <Heading {...labelProps}>Panel Title</Heading>
   {expanded && <Content />}
-</SidePanel>
+</SidePanel>;
 
 // After (labs-react)
 const model = useSidePanelModel({
   initialTransitionState: 'collapsed',
   origin: 'end',
-  onStateTransition: (state) => {
+  onStateTransition: state => {
     const isExpanded = state === 'expanded' || state === 'expanding';
     console.log(isExpanded);
   },
@@ -87,21 +93,25 @@ const model = useSidePanelModel({
   <SidePanel.ToggleButton />
   <Heading id={model.state.labelId}>Panel Title</Heading>
   {model.state.transitionState === 'expanded' && <Content />}
-</SidePanel>
+</SidePanel>;
 ```
 
 ### Checking Expanded State
 
 ```tsx
 // Before (preview-react)
-if (expanded) { /* ... */ }
+if (expanded) {
+  /* ... */
+}
 
 // After (labs-react) - for exact state
-if (model.state.transitionState === 'expanded') { /* ... */ }
+if (model.state.transitionState === 'expanded') {
+  /* ... */
+}
 
 // After (labs-react) - including animation states
-const isExpanded = model.state.transitionState === 'expanded' ||
-                   model.state.transitionState === 'expanding';
+const isExpanded =
+  model.state.transitionState === 'expanded' || model.state.transitionState === 'expanding';
 ```
 
 ## Usage
@@ -111,14 +121,9 @@ const isExpanded = model.state.transitionState === 'expanded' ||
 `SidePanel` is composed of three parts:
 
 - The panel container (with an optional `model` prop)
-- An accessible name (using `model.state.labelId` on a visible or hidden element)
+- A heading (`SidePanel.Heading`) for the panel that is visually hidden when the panel is collapsed
 - A toggle button (`SidePanel.ToggleButton`) to control the expand / collapse states
 
-The component automatically handles:
-- ARIA attributes (`aria-labelledby`, `aria-controls`, `aria-expanded`)
-- Transition states (`expanding`, `expanded`, `collapsing`, `collapsed`)
-- CSS transitions for smooth animations
-
 Bidirectional support is built into `SidePanel`. As seen in the example below, CSS Flexbox flips the
 page layout and the panel's contents. `SidePanel` also has logic to flip the position and direction
 of the `ToggleButton` as well as the direction of the expand / collapse animation. If you're using
@@ -129,13 +134,12 @@ logic or styling for bidirectional support.
 
 ### Hidden Name
 
-`SidePanel` must always have an accessible label for both the HTML `<section>` container and the
-`ToggleButton`. The label element must have `id={model.state.labelId}` to properly connect it to
-the panel and toggle button via `aria-labelledby`. The label can be visually hidden using
-`AccessibleHide` which relies on CSS properties to hide text visually while keeping it available
-for screen readers.
+`SidePanel`'s `<section>` element container should always have an accessible name to help screen
+reader users understand the purpose of the panel. For this reason, we recommend using the
+`SidePanel.Heading` component and setting the `hidden` prop to `true`. This will visually hide the
+heading while keeping it accessible to screen readers.
 
-<ExampleCodeBlock code={HiddenName} />
+<ExampleCodeBlock code={Heading} />
 
 ### Alternate Variant
 
@@ -148,8 +152,8 @@ used (this case is covered in the Examples section).
 ### External Control
 
 Sometimes you'll want to control `SidePanel`'s expand / collapse behavior from outside the
-component. You can use the model's events (`model.events.expand()` and `model.events.collapse()`)
-to programmatically control the panel.
+component. You can use the model's events (`model.events.expand()` and `model.events.collapse()`) to
+programmatically control the panel.
 
 #### Notes about accessibility
 
@@ -168,9 +172,9 @@ state and call `model.events.expand()` or `model.events.collapse()` on click.
 ### Right Origin
 
 By default, `SidePanel` uses a `start` origin (left in LTR, right in RTL). This sets the
-`ToggleButton`'s position and direction as well as the direction of the animation. You can set
-the origin to `"end"` to flip these. The origin uses logical properties (`start`/`end`) for
-proper bidirectional support.
+`ToggleButton`'s position and direction as well as the direction of the animation. You can set the
+origin to `"end"` to flip these. The origin uses logical properties (`start`/`end`) for proper
+bidirectional support.
 
 <ExampleCodeBlock code={RightOrigin} />
 
@@ -183,26 +187,53 @@ If you do not need `SidePanel`'s expand / collapse behavior, you can simply omit
 ### Deriving Expanded State
 
 If you need a simple boolean `expanded` state (similar to the preview-react `onExpandedChange`
-callback), you can derive it from the `transitionState` using the `onStateTransition` callback
-on the model.
+callback), you can derive it from the `transitionState` using the `onStateTransition` callback on
+the model.
 
 ### onStateTransition
 
 The `onStateTransition` callback is called whenever the panel's transition state changes. This
-includes all four states: `expanding`, `expanded`, `collapsing`, and `collapsed`. You can pass
-this callback directly to the `SidePanel` component or to the `useSidePanelModel` hook.
+includes all four states: `expanding`, `expanded`, `collapsing`, and `collapsed`. You can pass this
+callback directly to the `SidePanel` component or to the `useSidePanelModel` hook.
 
 The transition flow is:
+
 1. **Collapsing**: `expanded` → `collapsing` → `collapsed`
 2. **Expanding**: `collapsed` → `expanding` → `expanded`
 
 This is useful for:
+
 - Triggering side effects when the panel state changes
 - Syncing the panel state with external state management
 - Animating child components based on the transition state
 
 <ExampleCodeBlock code={OnStateTransition} />
 
+### Accessibility
+
+`SidePanel` renders a `<section>` element with an accessible name provided by `aria-labelledby`,
+which references the `SidePanel.Heading` component. This ensures screen reader users understand the
+purpose of the panel.
+
+#### Panel and Heading
+
+- The `SidePanel.Heading` provides the accessible name for the panel via `aria-labelledby`
+- When the panel is collapsed, the heading is automatically hidden visually but remains accessible
+  to screen readers
+- Use the `hidden` prop on `SidePanel.Heading` if you want the heading always visually hidden
+
+#### Toggle Button
+
+- `SidePanel.ToggleButton` automatically includes `aria-controls` (references the panel's `id`),
+  `aria-pressed` (indicates current state), and `aria-describedby` (references the panel's heading)
+- Developers must provide a static `aria-label` string on `SidePanel.ToggleButton` to describe the
+  button's purpose (e.g., "Collapse View"). Avoid using ambiguous terms like "Toggle" in the label.
+  Since `aria-pressed` communicates the state, avoid dynamically updating `aria-label`
+- The button includes a Tooltip with customizable text via `tooltipTextExpand` and
+  `tooltipTextCollapse` props (defaults: "Expand View" and "Collapse View")
+- For optimal keyboard navigation, place `SidePanel.ToggleButton` as the first focusable element in
+  the panel
+
 ## Component API
 
 <SymbolDoc name="SidePanel" fileName="/labs-react/" />
@@ -221,17 +252,17 @@ import {useSidePanelModel} from '@workday/canvas-kit-labs-react/side-panel';
 const model = useSidePanelModel({
   initialTransitionState: 'collapsed',
   origin: 'end',
-  onStateTransition: (state) => console.log('State:', state),
+  onStateTransition: state => console.log('State:', state),
 });
 
 // Access state
 model.state.transitionState; // 'expanded' | 'expanding' | 'collapsed' | 'collapsing'
-model.state.panelId;         // unique ID for the panel
-model.state.labelId;         // unique ID for the label
+model.state.panelId; // unique ID for the panel
+model.state.labelId; // unique ID for the label
 
 // Trigger events
-model.events.expand();              // Set to expanded (no animation)
-model.events.collapse();            // Set to collapsed (no animation)
+model.events.expand(); // Set to expanded (no animation)
+model.events.collapse(); // Set to collapsed (no animation)
 model.events.handleAnimationStart(); // Start expand/collapse animation
 ```
 

package/dist/mdx/labs-react/side-panel/examples/AlwaysOpen.tsx

@@ -2,7 +2,7 @@ import {AccentIcon} from '@workday/canvas-kit-react/icon';
 import {rocketIcon} from '@workday/canvas-accent-icons-web';
 import {SidePanel, useSidePanelModel} from '@workday/canvas-kit-labs-react/side-panel';
 import {Flex} from '@workday/canvas-kit-react/layout';
-import {Heading, Text} from '@workday/canvas-kit-react/text';
+import {Text} from '@workday/canvas-kit-react/text';
 import {system} from '@workday/canvas-tokens-web';
 import {createStyles, px2rem} from '@workday/canvas-kit-styling';
 
@@ -37,9 +37,9 @@ export default () => {
       <SidePanel model={model}>
         <Flex cs={stylesOverride.panelContainer}>
           <AccentIcon icon={rocketIcon} cs={stylesOverride.accentIcon} />
-          <Heading size="small" cs={stylesOverride.panelHeading} id={model.state.labelId}>
+          <SidePanel.Heading size="small" cs={stylesOverride.panelHeading}>
             Tasks Panel
-          </Heading>
+          </SidePanel.Heading>
         </Flex>
       </SidePanel>
       <Flex as="main" cs={stylesOverride.mainContent}>

package/dist/mdx/labs-react/side-panel/examples/Basic.tsx

@@ -1,54 +1,34 @@
 import * as React from 'react';
-import {SecondaryButton} from '@workday/canvas-kit-react/button';
+
 import {SidePanel, useSidePanelModel} from '@workday/canvas-kit-labs-react/side-panel';
 import {Flex} from '@workday/canvas-kit-react/layout';
-import {Heading, Text} from '@workday/canvas-kit-react/text';
 import {AccentIcon} from '@workday/canvas-kit-react/icon';
-import {rocketIcon} from '@workday/canvas-accent-icons-web';
 import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+import {rocketIcon} from '@workday/canvas-accent-icons-web';
 import {system} from '@workday/canvas-tokens-web';
 
-const stylesOverride = {
-  viewPortContainer: createStyles({
-    height: px2rem(320),
-  }),
-  panel: createStyles({
-    alignItems: 'center',
-    padding: system.space.x4,
-  }),
-  accentIcon: createStyles({
-    marginInlineEnd: system.space.x4,
-  }),
-  mainContent: createStyles({
-    alignItems: 'center',
-    justifyContent: 'center',
-    flexDirection: 'column',
-    flex: 1,
-    flexBasis: 'auto',
-  }),
-};
+const flexHeadingStyles = createStyles({
+  alignItems: 'center',
+  gap: system.space.x2,
+});
+
+const viewPortStyles = createStyles({
+  height: px2rem(320),
+});
 
 export default () => {
   const model = useSidePanelModel();
 
   return (
-    <Flex cs={stylesOverride.viewPortContainer}>
+    <Flex cs={viewPortStyles}>
       <SidePanel model={model}>
-        <SidePanel.ToggleButton />
-        <Flex cs={stylesOverride.panel}>
-          {model.state.transitionState === 'expanded' && (
-            <Flex cs={stylesOverride.accentIcon}>
-              <AccentIcon icon={rocketIcon} />
-            </Flex>
-          )}
-          <Heading
-            size="small"
-            id={model.state.labelId}
-            hidden={model.state.transitionState === 'collapsed' ? true : undefined}
-          >
+        <SidePanel.Heading size="small">
+          <Flex cs={flexHeadingStyles}>
+            <AccentIcon icon={rocketIcon} />
             Tasks Panel
-          </Heading>
-        </Flex>
+          </Flex>
+        </SidePanel.Heading>
+        <SidePanel.ToggleButton aria-label="Collapse View" />
       </SidePanel>
     </Flex>
   );

package/dist/mdx/labs-react/side-panel/examples/ExternalControl.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {SidePanel, useSidePanelModel} from '@workday/canvas-kit-labs-react/side-panel';
 import {Flex} from '@workday/canvas-kit-react/layout';
-import {Heading, Text} from '@workday/canvas-kit-react/text';
+import {Text} from '@workday/canvas-kit-react/text';
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
 import {createStyles, px2rem} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
@@ -26,19 +26,6 @@ const stylesOverride = {
   }),
 };
 
-/*
- * NOTE TO DEV:
- * Spreading the `controlProps` onto an external control creates serious accessibility issues.
- * - `aria-labelledby` id reference is invalid when the SidePanel is collapsed
- * - `aria-labelledby` will change the name of "Toggle Side Panel" button to "Tasks Panel"
- * - `aria-expanded` won't make sense to screen reader users when the expanded SidePanel content isn't following the control
- * - `aria-controls` is unsupported by screen readers and will not allow users to navigate to the controlled content
- *
- * SOLUTION:
- * - Pass the `controlProps` click handler function down to the external control component.
- * - Add a toggle state to Button components with `aria-pressed` for screen readers,
- * - OR use a similar toggle input like Checkbox or Switch.
- */
 export default () => {
   const model = useSidePanelModel({
     initialTransitionState: 'collapsed',
@@ -48,13 +35,12 @@ export default () => {
   return (
     <Flex cs={stylesOverride.viewport}>
       <SidePanel model={model}>
-        <SidePanel.ToggleButton />
+        <SidePanel.ToggleButton aria-label="Collapse View" />
+        <SidePanel.Heading size="small" cs={stylesOverride.panelHeading}>
+          Task Panel
+        </SidePanel.Heading>
         {model.state.transitionState === 'expanded' && (
-          <Flex cs={stylesOverride.panel}>
-            <Heading size="small" cs={stylesOverride.panelHeading} id={model.state.labelId}>
-              Tasks Panel
-            </Heading>
-          </Flex>
+          <Flex cs={stylesOverride.panel}>Contents</Flex>
         )}
       </SidePanel>
       <Flex as="main" cs={stylesOverride.main}>

package/dist/mdx/labs-react/side-panel/examples/{HiddenName.tsx → Heading.tsx}

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import {SidePanel, useSidePanelModel} from '@workday/canvas-kit-labs-react/side-panel';
 import {Flex} from '@workday/canvas-kit-react/layout';
-import {AccessibleHide} from '@workday/canvas-kit-react/common';
 import {Text} from '@workday/canvas-kit-react/text';
 import {createStyles, px2rem} from '@workday/canvas-kit-styling';
 
@@ -28,8 +27,10 @@ export default () => {
   return (
     <Flex cs={stylesOverride.viewport}>
       <SidePanel model={model}>
-        <SidePanel.ToggleButton />
-        <AccessibleHide id={model.state.labelId}>Hidden Title</AccessibleHide>
+        <SidePanel.ToggleButton aria-label="Collapse View" />
+        <SidePanel.Heading hidden size="small">
+          Tasks Panel
+        </SidePanel.Heading>
       </SidePanel>
       <Flex as="main" cs={stylesOverride.main}>
         <Text as="p" typeLevel="body.large">

package/dist/mdx/labs-react/side-panel/examples/OnStateTransition.tsx

@@ -37,7 +37,9 @@ export default () => {
     <Flex cs={stylesOverride.viewport}>
       <SidePanel model={model}>
         <SidePanel.ToggleButton />
-        <AccessibleHide id={model.state.labelId}>Hidden Title</AccessibleHide>
+        <SidePanel.Heading hidden size="small">
+          Hidden Title
+        </SidePanel.Heading>
       </SidePanel>
       <Flex as="main" cs={stylesOverride.main}>
         <Text as="p" typeLevel="body.large">

package/dist/mdx/labs-react/side-panel/examples/RightOrigin.tsx

@@ -1,7 +1,7 @@
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
 import {SidePanel, useSidePanelModel} from '@workday/canvas-kit-labs-react/side-panel';
 import {Flex} from '@workday/canvas-kit-react/layout';
-import {Heading, Text} from '@workday/canvas-kit-react/text';
+import {Text} from '@workday/canvas-kit-react/text';
 import {CanvasProvider} from '@workday/canvas-kit-react/common';
 import {createStyles, px2rem} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
@@ -37,15 +37,9 @@ const RightPanel = () => {
 
   return (
     <SidePanel model={model} className={stylesOverride.panelContainer}>
-      <SidePanel.ToggleButton />
+      <SidePanel.ToggleButton aria-label="Collapse View" />
       <Flex cs={stylesOverride.panel}>
-        <Heading
-          size="small"
-          hidden={model.state.transitionState === 'collapsed' ? true : undefined}
-          id={model.state.labelId}
-        >
-          Tasks Panel
-        </Heading>
+        <SidePanel.Heading size="small">Tasks Panel</SidePanel.Heading>
       </Flex>
     </SidePanel>
   );

package/dist/mdx/labs-react/side-panel/examples/Variant.tsx

@@ -35,15 +35,9 @@ export default () => {
     <CanvasProvider dir={direction}>
       <Flex cs={stylesOverride.viewport}>
         <SidePanel model={model} variant="alternate">
-          <SidePanel.ToggleButton />
+          <SidePanel.ToggleButton aria-label="Collapse View" />
           <Flex cs={stylesOverride.panel}>
-            <Heading
-              size="small"
-              hidden={model.state.transitionState === 'collapsed' ? true : undefined}
-              id={model.state.labelId}
-            >
-              Alternate Panel
-            </Heading>
+            <SidePanel.Heading size="small">Alternate Panel</SidePanel.Heading>
           </Flex>
         </SidePanel>
         <Flex as="main" cs={stylesOverride.main}>

package/dist/mdx/react/layout/Box.mdx

@@ -1,4 +1,4 @@
-import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
+import { ExampleCodeBlock } from '@workday/canvas-kit-docs';
 import Basic from './examples/Box/Basic';
 
 # Box

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "14.2.3",
+  "version": "14.2.4",
   "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.2.3",
-    "@workday/canvas-kit-preview-react": "^14.2.3",
-    "@workday/canvas-kit-react": "^14.2.3",
-    "@workday/canvas-kit-styling": "^14.2.3",
+    "@workday/canvas-kit-labs-react": "^14.2.4",
+    "@workday/canvas-kit-preview-react": "^14.2.4",
+    "@workday/canvas-kit-react": "^14.2.4",
+    "@workday/canvas-kit-styling": "^14.2.4",
     "@workday/canvas-system-icons-web": "^3.0.36",
     "@workday/canvas-tokens-web": "^3.1.1",
     "markdown-to-jsx": "^7.2.0",
@@ -61,5 +61,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "5.0"
   },
-  "gitHead": "f397e48d3a320c73932e9d5d8dec6c0256c6ed8b"
+  "gitHead": "039da83fef34eac26de361fc512d548760ec1ee8"
 }