@workday/canvas-kit-docs 15.0.0-alpha.0010-next.0 → 15.0.0-alpha.0023-next.0

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

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

@@ -15,8 +15,179 @@ space tokens, the new tokens aim to add more semantic meaning to allow for bette
 
 ## Table of Contents
 
+- [Codemod](#codemod)
+  - [Instructions](#instructions)
+- [Component Promotions](#component-promotions)
+  - [Segmented Control](#segmented-control-)
 - [Component Updates](#component-updates)
   - [Buttons](#buttons)
+- [Removals](#removals)
+  - [Segmented Control (Deprecated)](#segmented-control-deprecated)
+- [Glossary](#glossary)
+  - [Main](#main)
+  - [Preview](#preview)
+
+## Codemod
+
+We've provided a [codemod](https://github.com/Workday/canvas-kit/tree/master/modules/codemod) to
+automatically update your code to work with most of the breaking changes in v15. **Breaking changes
+handled by the codemod are marked with 🤖 in the Upgrade Guide.**
+
+A codemod is a script that makes programmatic transformations on your codebase by traversing the
+AST, identifying patterns, and making prescribed changes. This greatly decreases opportunities for
+error and reduces the number of manual updates, which allows you to focus on changes that need your
+attention. **We highly recommend you use the codemod for these reasons.**
+
+If you're new to running codemods or if it's been a minute since you've used one, there are a few
+things you'll want to keep in mind.
+
+- Our codemods are meant to be run sequentially. For example, if you're using v13 of Canvas Kit,
+  you'll need to run the v14 codemod before you run v15.
+- The codemod will update your code to be compatible with the specified version, but it will **not**
+  remove outdated dependencies or upgrade dependencies to the latest version. You'll need to upgrade
+  dependencies on your own.
+  - We recommend upgrading dependencies before running the codemod.
+  - Always review your `package.json` files to make sure your dependency versions look correct.
+- The codemod will not handle every breaking change in v15. You will likely need to make some manual
+  changes to be compatible. Use our Upgrade Guide as a checklist.
+- Codemods are not bulletproof.
+  - Conduct a thorough PR and QA review of all changes to ensure no regressions were introduced.
+  - As a safety precaution, we recommend committing the changes from the codemod as a single
+    isolated commit (separate from other changes) so you can roll back more easily if necessary.
+
+We're here to help! Automatic changes to your codebase can feel scary. You can always reach out to
+our team. We'd be very happy to walk you through the process to set you up for success.
+
+### Instructions
+
+The easiest way to run our codemod is to use `npx` in your terminal.
+
+```sh
+npx @workday/canvas-kit-codemod v15 [path]
+```
+
+Be sure to provide specific directories that need to be updated via the `[path]` argument. This
+decreases the amount of AST the codemod needs to traverse and reduces the chances of the script
+having an error. For example, if your source code lives in `src/`, use `src/` as your `[path]`. Or,
+if you have a monorepo with three packages using Canvas Kit, provide those specific packages as your
+`[path]`.
+
+Alternatively, if you're unable to run the codemod successfully using `npx`, you can install the
+codemod package as a dev dependency, run it with `yarn`, and then remove the package after you're
+finished.
+
+```sh
+yarn add @workday/canvas-kit-codemod --dev
+yarn canvas-kit-codemod v15 [path]
+yarn remove @workday/canvas-kit-codemod
+```
+
+> **Note:** The codemod only works on `.js`, `.jsx`, `.ts`, and `.tsx` files. You'll need to
+> manually edit other file types (`.json`, `.mdx`, `.md`, etc.). You may need to run your linter
+> after executing the codemod, as its resulting formatting (spacing, quotes, etc.) may not match
+> your project conventions.
+
+## Component Promotions
+
+### Segmented Control ⚡️
+
+We've promoted `SegmentedControl` from [Preview](/components/buttons/segmented-control/) to [Main](#main). This replaces the deprecated `SegmentedControl` that was previously in Main.
+
+**Before in v14**
+
+```tsx
+import {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control';
+```
+
+**After in v15**
+
+```tsx
+import {SegmentedControl} from '@workday/canvas-kit-react/segmented-control';
+```
+
+> 🤖 The codemod will handle the change of imports as shown above.
+
+#### API Differences
+
+The new `SegmentedControl` is a [compound component](/getting-started/for-developers/resources/compound-components/)
+with a different API than the deprecated version.
+
+##### Structure Changes
+
+| Deprecated (Old Main) | New (Promoted from Preview)         |
+| --------------------- | ----------------------------------- |
+| `SegmentedControl`    | `SegmentedControl`                  |
+| `SegmentedControl.Button` | `SegmentedControl.List` + `SegmentedControl.Item` |
+
+##### Prop Changes
+
+| Feature          | Deprecated (Old Main)                      | New (Promoted from Preview)                      |
+| ---------------- | ------------------------------------------ | ------------------------------------------------ |
+| Selection        | `value` prop on container                  | `initialValue` prop on container                 |
+| Change handler   | `onChange={(value) => {}}`                 | `onSelect={(data) => setSelected(data.id)}`      |
+| Item identifier  | `value` prop on Button                     | `data-id` prop on Item                           |
+| Disabled (all)   | Not supported                              | `disabled` prop on container model               |
+| Size             | Not supported                              | `size` prop (`small`, `medium`, `large`)         |
+| Orientation      | Not supported                              | `orientation` prop (`horizontal`, `vertical`)    |
+| Text labels      | Not supported                              | `children` on Item                               |
+| Tooltips         | Not supported                              | `tooltipProps` on Item                           |
+| Accessibility    | Manual                                     | Built-in `aria-label` on List                    |
+
+##### Code Migration
+
+**Deprecated API (Old Main)**
+
+```tsx
+import {SegmentedControl} from '@workday/canvas-kit-react/segmented-control';
+
+const [value, setValue] = React.useState<string | number>('list-view');
+
+<SegmentedControl value={value} onChange={setValue}>
+  <SegmentedControl.Button icon={listViewIcon} value="list-view" />
+  <SegmentedControl.Button icon={worksheetsIcon} value="table-view" />
+  <SegmentedControl.Button icon={deviceTabletIcon} value="device-view" />
+</SegmentedControl>
+```
+
+**New API (v15)**
+
+```tsx
+import {SegmentedControl} from '@workday/canvas-kit-react/segmented-control';
+
+const [value, setValue] = React.useState('list-view');
+
+<SegmentedControl initialValue={value} onSelect={data => setValue(data.id)}>
+  <SegmentedControl.List aria-label="View type">
+    <SegmentedControl.Item data-id="list-view" icon={listViewIcon} tooltipProps={{title: 'List'}} />
+    <SegmentedControl.Item data-id="table-view" icon={worksheetsIcon} tooltipProps={{title: 'Table'}} />
+    <SegmentedControl.Item data-id="device-view" icon={deviceTabletIcon} tooltipProps={{title: 'Device'}} />
+  </SegmentedControl.List>
+</SegmentedControl>
+```
+
+##### New Features
+
+The promoted `SegmentedControl` includes several new features:
+
+- **Text and icon support**: Items can display text, icons, or both
+- **Size variants**: `small`, `medium`, and `large` sizes
+- **Vertical orientation**: Use `orientation="vertical"` for vertical layouts
+- **Built-in tooltips**: Add tooltips via `tooltipProps` on items
+- **Disabled state**: Disable all items via the model or individual items
+- **Dynamic items**: Render items dynamically using the collection API
+
+```tsx
+// Text only
+<SegmentedControl.Item data-id="yearly">Yearly</SegmentedControl.Item>
+
+// Icon with text
+<SegmentedControl.Item data-id="list" icon={listViewIcon}>List View</SegmentedControl.Item>
+
+// With size and orientation
+<SegmentedControl size="large" orientation="vertical">
+  ...
+</SegmentedControl>
+```
 
 ## Component Updates
 
@@ -28,4 +199,29 @@ The Following components have been updated to use our new `size`, `padding`, `ga
 tokens. These changes are **only visual**.
 
 `PrimaryButton`, `SecondaryButton`, `DeleteButton`, `TertiaryButton`, `ToolbarButton`,
-`ToolbarDropdownButton`, `Hyperlink`, `ExternalHyperlink`, and `ActionBar`.
+`ToolbarDropdownButton`, `Hyperlink`, `ExternalHyperlink`, and `ActionBar`.
+
+## Removals
+
+### Segmented Control (Deprecated)
+
+The deprecated `SegmentedControl` that was previously in `@workday/canvas-kit-react/segmented-control`
+has been removed. This was the older implementation that used `SegmentedControl.Button` subcomponents.
+
+Please migrate to the new `SegmentedControl` component (promoted from Preview) which uses a compound
+component pattern with `SegmentedControl.List` and `SegmentedControl.Item`. See the
+[API Differences](#api-differences) section above for migration guidance.
+
+## Glossary
+
+For an overview of the different packages we provide, please view our docs
+[here](https://workday.github.io/canvas-kit/?path=/docs/guides-packages--docs).
+
+### Main
+
+Components in the Main package are stable and ready for production use.
+
+### Preview
+
+Components in the Preview package are mostly stable but may still receive breaking changes before
+being promoted to Main.

package/dist/mdx/react/_examples/mdx/examples/Density.tsx

@@ -4,7 +4,7 @@ import {TextInput} from '@workday/canvas-kit-react/text-input';
 import {Select} from '@workday/canvas-kit-react/select';
 import {Switch} from '@workday/canvas-kit-react/switch';
 import {Heading, Text} from '@workday/canvas-kit-react/text';
-import {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control';
+import {SegmentedControl} from '@workday/canvas-kit-react/segmented-control';
 import {calc, createStencil, createStyles, px2rem} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 

package/dist/mdx/react/_examples/mdx/examples/layout/ResponsiveColumns.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import {Grid, Box} from '@workday/canvas-kit-react/layout';
 import {BodyText, Heading} from '@workday/canvas-kit-react/text';
-import {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control';
+import {SegmentedControl} from '@workday/canvas-kit-react/segmented-control';
 
 export default () => {
   const [screen, setScreen] = React.useState('100%');

package/dist/mdx/react/action-bar/examples/OverflowActionBar.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import {breakpoints} from '@workday/canvas-kit-react/common';
 import {ActionBar, useActionBarModel} from '@workday/canvas-kit-react/action-bar';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
-import {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control';
+import {SegmentedControl} from '@workday/canvas-kit-react/segmented-control';
 import {Box} from '@workday/canvas-kit-react/layout';
 
 type MyActionItem = {

package/dist/mdx/react/breadcrumbs/examples/Overflow.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {Breadcrumbs, useBreadcrumbsModel} from '@workday/canvas-kit-react/breadcrumbs';
 import {Box} from '@workday/canvas-kit-react/layout';
-import {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control';
+import {SegmentedControl} from '@workday/canvas-kit-react/segmented-control';
 
 export interface Breadcrumb {
   id: string;

package/dist/mdx/react/segmented-control/SegmentedControl.mdx

@@ -1,29 +1,21 @@
-import {
-  ExampleCodeBlock,
-  StorybookStatusIndicator,
-  SymbolDoc,
-  Specifications,
-} from '@workday/canvas-kit-docs';
-
-import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';
-
+import {ExampleCodeBlock, SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
 import Basic from './examples/Basic';
+import Disabled from './examples/Disabled';
+import TextAndIcon from './examples/TextAndIcon';
+import TextOnly from './examples/TextOnly';
+import Sizes from './examples/Sizes';
+import Vertical from './examples/Vertical';
+import RTL from './examples/RTL';
+import Dynamic from './examples/Dynamic';
+
 
-# Canvas Kit Segmented Control <StorybookStatusIndicator type="deprecated" />
+# Canvas Kit Segmented Control
 
-<InformationHighlight className="sb-unstyled" variant="caution" cs={{p: {marginBlock: 0}}}>
-  <InformationHighlight.Icon />
-  <InformationHighlight.Body>
-    `SegmentedControl` in Main has been deprecated and will be removed in a future major version.
-    Please use `Segmented Control` in Preview instead.
-  </InformationHighlight.Body>
-  <InformationHighlight.Link href="https://workday.github.io/canvas-kit/?path=/docs/preview-segmented-control--docs">
-    Segmented Control Docs
-  </InformationHighlight.Link>
-</InformationHighlight>
+Segmented Control is a
+[compound component](/getting-started/for-developers/resources/compound-components/) that represents
+a linear group of multiple buttons allowing the selection of a specific value.
 
-A linear set of two or more segments, each of which functions as a mutually exclusive button. This
-is a [_controlled_](https://reactjs.org/docs/forms.html#controlled-components) component.
+[> Workday Design Reference](https://design.workday.com/components/buttons/segmented-control)
 
 ## Installation
 
@@ -35,12 +27,113 @@ yarn add @workday/canvas-kit-react
 
 ### Basic Example
 
-Here is a basic example of a Segmented Control with multiple nested `Button`s. **Note:** while
-managing state using a unique `value` for each `Button` child is encouraged, you can also use
-indexes and omit the `value` field. It is strongly recommended to not mix these two methods.
+`SegmentedControl` includes a container `SegmentedControl` component and the following
+subcomponents: `SegmentedControl.List` and `SegmentedControl.Item`.
+
+The example below contains a `SegmentedControl` with four icon-only buttons. Each button is rendered
+using a `SegmentedControl.Item` and is paired with a tooltip describing the button's function. Only
+one button can be active at a time.
 
 <ExampleCodeBlock code={Basic} />
 
+We **strongly** discourage including more than four buttons in a single `SegmentedControl`.
+
+### Accessibility
+
+Our `SegmentedControl` component renders semantic HTML `<button>` elements to the browser DOM,
+wrapped inside of a `<div>` with an explicit ARIA `role="group"`. This is equivalent to an HTML
+`<fieldset>` element, and useful for screen readers to describe the relationship between the
+buttons.
+
+- Each button is a 2-state toggle button with `aria-pressed={true | false}` to indicate the current
+  state to screen readers.
+- Providing your own `aria-label` string to `SegmentedControl.List` is recommended for describing the
+  purpose of the component.
+
+#### Screen Reader Experience
+
+When users interact with a `SegmentedControl` using screen readers:
+
+- The group context is announced (e.g., "View options, group" when using
+  `aria-label="View options"`)
+- Each button announces its text/label, "toggle button" role, and pressed/unpressed state (e.g.,
+  "List view, toggle button, pressed" or "Grid view, toggle button, not pressed")
+- For icon-only buttons with tooltips, the tooltip text is announced along with the button role and
+  state
+- When a button is activated, screen readers should announce the new state
+
+Refer to [Button](?path=/docs/components-buttons--docs#accessibility) for more information about
+accessibility of these components.
+
+### Variations
+
+`SegmentedControl` supports three variations based on whether or not its `SegmentedControl.Item`
+components have an `icon` prop and/or text content: icon-only, text-only, and text-and-icon.
+
+All `SegmentedControl.Item` components within a given `SegmentedControl` must be of the same
+variation.
+
+#### Icon-Only
+
+To render an icon-only `SegmentedControl`, apply the `icon` prop to `SegmentedControl.Item` and do
+not provide it with text content. Refer to the [basic example](#basic-example) above for an instance
+of an icon-only `SegmentedControl`.
+
+The icon-only variation is the only variation which supports a vertical orientation in addition to
+the default horizontal orientation. Set the `orientation` prop of `SegmentedControl` to `vertical`
+to configure the component to render vertically.
+
+<ExampleCodeBlock code={Vertical} />
+
+#### Text-Only
+
+To render a text-only `SegmentedControl`, omit the `icon` prop from `SegmentedControl.Item` and
+provide it with text content.
+
+<ExampleCodeBlock code={TextOnly} />
+
+#### Text-and-Icon
+
+To render a text-and-icon `SegmentedControl`, apply the `icon` prop to `SegmentedControl.Item` and
+provide it with text content.
+
+<ExampleCodeBlock code={TextAndIcon} />
+
+### Sizes
+
+`SegmentedControl` accepts a `size` prop which supports the following values:
+
+- `small`
+- `medium` (Default)
+- `large`
+
+<ExampleCodeBlock code={Sizes} />
+
+### Disabled
+
+Set the `disabled` prop of `SegmentedControl` to disable the entire component including its buttons.
+
+<ExampleCodeBlock code={Disabled} />
+
+### Right-to-Left (RTL)
+
+`SegmentedControl` supports right-to-left languages when specified in the `CanvasProvider` `theme`.
+
+<ExampleCodeBlock code={RTL} />
+
+### Dynamic Items
+
+`SegmentedControl` supports a
+[dynamic API](/getting-started/for-developers/resources/collection-api/#dynamic-items) where instead
+of statically providing the JSX for each `SegmentedControl.Item`, you pass an array of `items` in
+the `model` state and provide a render function to display the items.
+
+<ExampleCodeBlock code={Dynamic} />
+
 ## Component API
 
-<SymbolDoc name="SegmentedControl" fileName="/react/" />
+<SymbolDoc name="SegmentedControl" fileName="/react/" />
+
+## Specifications
+
+<Specifications file="SegmentedControl.spec.ts" name="SegmentedControl" />

package/dist/mdx/react/segmented-control/examples/Basic.tsx

@@ -1,38 +1,42 @@
-import * as React from 'react';
+import React from 'react';
 
+import {SegmentedControl} from '@workday/canvas-kit-react/segmented-control';
+import {BodyText} from '@workday/canvas-kit-react/text';
 import {
+  gridIcon,
   listViewIcon,
-  worksheetsIcon,
-  deviceTabletIcon,
-  percentageIcon,
+  listDetailIcon,
+  pieChartIcon,
 } from '@workday/canvas-system-icons-web';
-import {SegmentedControl} from '@workday/canvas-kit-react/segmented-control';
 
 export default () => {
-  const [value, setValue] = React.useState<string | number>();
-  const handleToggle = (selectedValue: string | number) => {
-    setValue(selectedValue);
-  };
+  const [viewType, setViewType] = React.useState('table');
 
   return (
-    <SegmentedControl value={value} onChange={handleToggle}>
-      <SegmentedControl.Button
-        icon={listViewIcon}
-        value="list-view"
-        onClick={e => console.log('Existing TertiaryButton onClick callback')}
-        id="test"
-      />
-      <SegmentedControl.Button icon={worksheetsIcon} value="table-view" disabled={true} />
-      <SegmentedControl.Button
-        icon={deviceTabletIcon}
-        value="device-view"
-        aria-label="Device View"
-      />
-      <SegmentedControl.Button
-        icon={percentageIcon}
-        value="percent-view"
-        aria-label="Percent View"
-      />
-    </SegmentedControl>
+    <>
+      <SegmentedControl initialValue={viewType} onSelect={data => setViewType(data.id)}>
+        <SegmentedControl.List aria-label="View type">
+          <SegmentedControl.Item data-id="table" icon={gridIcon} tooltipProps={{title: 'Table'}} />
+          <SegmentedControl.Item
+            data-id="list-view"
+            icon={listViewIcon}
+            tooltipProps={{title: 'List'}}
+          />
+          <SegmentedControl.Item
+            data-id="list-detail"
+            icon={listDetailIcon}
+            tooltipProps={{title: 'Detail'}}
+          />
+          <SegmentedControl.Item
+            data-id="diagrams"
+            icon={pieChartIcon}
+            tooltipProps={{title: 'Diagram'}}
+          />
+        </SegmentedControl.List>
+      </SegmentedControl>
+      <BodyText size="small" marginTop="s">
+        Selected: {viewType}
+      </BodyText>
+    </>
   );
 };

package/dist/mdx/{preview-react → react}/segmented-control/examples/Disabled.tsx

@@ -1,4 +1,4 @@
-import {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control';
+import {SegmentedControl} from '@workday/canvas-kit-react/segmented-control';
 import {
   gridIcon,
   listViewIcon,

package/dist/mdx/{preview-react → react}/segmented-control/examples/Dynamic.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import {
   SegmentedControl,
   useSegmentedControlModel,
-} from '@workday/canvas-kit-preview-react/segmented-control';
+} from '@workday/canvas-kit-react/segmented-control';
 import {
   gridIcon,
   listViewIcon,

package/dist/mdx/{preview-react → react}/segmented-control/examples/RTL.tsx

@@ -5,7 +5,7 @@ import {
   listDetailIcon,
   pieChartIcon,
 } from '@workday/canvas-system-icons-web';
-import {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control';
+import {SegmentedControl} from '@workday/canvas-kit-react/segmented-control';
 
 export default () => (
   <CanvasProvider dir="rtl">

package/dist/mdx/{preview-react → react}/segmented-control/examples/Sizes.tsx

@@ -6,7 +6,7 @@ import {
   listDetailIcon,
   pieChartIcon,
 } from '@workday/canvas-system-icons-web';
-import {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control';
+import {SegmentedControl} from '@workday/canvas-kit-react/segmented-control';
 import {BodyText} from '@workday/canvas-kit-react/text';
 
 export default () => (

package/dist/mdx/{preview-react → react}/segmented-control/examples/TextAndIcon.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {gridIcon, listViewIcon, pieChartIcon} from '@workday/canvas-system-icons-web';
-import {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control';
+import {SegmentedControl} from '@workday/canvas-kit-react/segmented-control';
 
 export default () => (
   <SegmentedControl>

package/dist/mdx/{preview-react → react}/segmented-control/examples/TextOnly.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control';
+import {SegmentedControl} from '@workday/canvas-kit-react/segmented-control';
 
 export default () => (
   <SegmentedControl>

package/dist/mdx/{preview-react → react}/segmented-control/examples/Vertical.tsx

@@ -1,4 +1,4 @@
-import {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control';
+import {SegmentedControl} from '@workday/canvas-kit-react/segmented-control';
 import {
   gridIcon,
   listViewIcon,

package/dist/mdx/react/tabs/examples/OverflowTabs.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {Tabs, useTabsModel} from '@workday/canvas-kit-react/tabs';
-import {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control';
+import {SegmentedControl} from '@workday/canvas-kit-react/segmented-control';
 import {Box} from '@workday/canvas-kit-react/layout';
 
 type MyTabItem = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "15.0.0-alpha.0010-next.0",
+  "version": "15.0.0-alpha.0023-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": "^15.0.0-alpha.0010-next.0",
-    "@workday/canvas-kit-preview-react": "^15.0.0-alpha.0010-next.0",
-    "@workday/canvas-kit-react": "^15.0.0-alpha.0010-next.0",
-    "@workday/canvas-kit-styling": "^15.0.0-alpha.0010-next.0",
+    "@workday/canvas-kit-labs-react": "^15.0.0-alpha.0023-next.0",
+    "@workday/canvas-kit-preview-react": "^15.0.0-alpha.0023-next.0",
+    "@workday/canvas-kit-react": "^15.0.0-alpha.0023-next.0",
+    "@workday/canvas-kit-styling": "^15.0.0-alpha.0023-next.0",
     "@workday/canvas-system-icons-web": "^3.0.36",
     "@workday/canvas-tokens-web": "4.0.0-alpha.3",
     "markdown-to-jsx": "^7.2.0",
@@ -61,5 +61,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "5.0"
   },
-  "gitHead": "596c44d0fd4c67d54185ce1a91b1ab3517981dd2"
+  "gitHead": "13b3abf5b4752be5738a78f3c37e31b6252077dc"
 }