@workday/canvas-kit-docs 14.0.0-alpha.1165-next.0 → 14.0.0-alpha.1168-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": "13.2.1",
-    "@workday/canvas-kit-preview-react": "13.2.1",
-    "@workday/canvas-kit-react": "13.2.1",
-    "@workday/canvas-kit-react-fonts": "^13.2.1",
-    "@workday/canvas-kit-styling": "13.2.1",
+    "@workday/canvas-kit-labs-react": "13.2.2",
+    "@workday/canvas-kit-preview-react": "13.2.2",
+    "@workday/canvas-kit-react": "13.2.2",
+    "@workday/canvas-kit-react-fonts": "^13.2.2",
+    "@workday/canvas-kit-styling": "13.2.2",
     "@workday/canvas-system-icons-web": "3.0.22",
     "@workday/canvas-tokens-web": "2.0.0"
   },

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": "13.2.1",
-    "@workday/canvas-kit-preview-react": "13.2.1",
-    "@workday/canvas-kit-react": "13.2.1",
-    "@workday/canvas-kit-react-fonts": "^13.2.1",
-    "@workday/canvas-kit-styling": "13.2.1",
+    "@workday/canvas-kit-labs-react": "13.2.2",
+    "@workday/canvas-kit-preview-react": "13.2.2",
+    "@workday/canvas-kit-react": "13.2.2",
+    "@workday/canvas-kit-react-fonts": "^13.2.2",
+    "@workday/canvas-kit-styling": "13.2.2",
     "@workday/canvas-system-icons-web": "3.0.22",
     "@workday/canvas-tokens-web": "2.0.0"
   },

package/dist/mdx/preview-react/select/Select.mdx

@@ -1,4 +1,10 @@
-import {ExampleCodeBlock, SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
+import {
+  ExampleCodeBlock,
+  StorybookStatusIndicator,
+  SymbolDoc,
+  Specifications,
+} from '@workday/canvas-kit-docs';
+import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';
 import Default from './examples/Top Label/Default';
 import DefaultWithCustomOptions from './examples/Top Label/DefaultWithCustomOptions';
 import DefaultWithSimpleOptions from './examples/Top Label/DefaultWithSimpleOptions';
@@ -17,8 +23,20 @@ import ErrorLeft from './examples/Left Label/ErrorLeft';
 import GrowLeft from './examples/Left Label/GrowLeft';
 
 
+# Canvas Kit Select <StorybookStatusIndicator type="deprecated" />
 
-# Canvas Kit Select
+<InformationHighlight className="sb-unstyled" variant="caution" cs={{p: {marginBlock: 0}}}>
+  <InformationHighlight.Icon />
+  <InformationHighlight.Body>
+    `Select` in Preview has been deprecated and will be removed in a future major version. Please
+    use `Select` in Main instead.
+  </InformationHighlight.Body>
+  <InformationHighlight.Link href="https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--docs">
+    Form Field Docs
+  </InformationHighlight.Link>
+</InformationHighlight>
+
+<br />
 
 ## Top Label
 

package/dist/mdx/preview-react/text-area/TextArea.mdx

@@ -1,4 +1,10 @@
-import {ExampleCodeBlock, SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
+import {
+  ExampleCodeBlock,
+  StorybookStatusIndicator,
+  SymbolDoc,
+  Specifications,
+} from '@workday/canvas-kit-docs';
+import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';
 
 import Alert from './examples/Alert';
 import Basic from './examples/Basic';
@@ -14,15 +20,18 @@ import Required from './examples/Required';
 import ResizeConstraints from './examples/ResizeConstraints';
 
 
-# Canvas Kit Text Area
+# Canvas Kit Text Area <StorybookStatusIndicator type="deprecated" />
 
-<StatusIndicator variant="red">
-  <StatusIndicator.Label>Deprecated</StatusIndicator.Label>
-</StatusIndicator>
-
-`TextArea` in Preview has been deprecated and will be removed in a future major version. Please use
-[`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic)
-instead.
+<InformationHighlight className="sb-unstyled" variant="caution" cs={{p: {marginBlock: 0}}}>
+  <InformationHighlight.Icon />
+  <InformationHighlight.Body>
+    `TextArea` in Preview has been deprecated and will be removed in a future major version. Please
+    use `FormField` instead.
+  </InformationHighlight.Body>
+  <InformationHighlight.Link href="https://workday.github.io/canvas-kit/?path=/story/components-inputs-form-field--docs">
+    Form Field Docs
+  </InformationHighlight.Link>
+</InformationHighlight>
 
 TextArea's allow users to enter and edit multiple lines of text.
 

package/dist/mdx/preview-react/text-input/TextInput.mdx

@@ -1,4 +1,10 @@
-import {ExampleCodeBlock, SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
+import {
+  ExampleCodeBlock,
+  StorybookStatusIndicator,
+  SymbolDoc,
+  Specifications,
+} from '@workday/canvas-kit-docs';
+import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';
 
 import Basic from './examples/Basic';
 import Disabled from './examples/Disabled';
@@ -18,15 +24,18 @@ import Error from './examples/Error';
 import Alert from './examples/Alert';
 
 
-# Canvas Kit Text Input
+# Canvas Kit Text Input <StorybookStatusIndicator type="deprecated" />
 
-<StatusIndicator variant="red">
-  <StatusIndicator.Label>Deprecated</StatusIndicator.Label>
-</StatusIndicator>
-
-`TextInput` in Preview has been deprecated and will be removed in a future major version. Please use
-[`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic)
-instead.
+<InformationHighlight className="sb-unstyled" variant="caution" cs={{p: {marginBlock: 0}}}>
+  <InformationHighlight.Icon />
+  <InformationHighlight.Body>
+    `TextInput` in Preview has been deprecated and will be removed in a future major version. Please
+    use `FormField` instead.
+  </InformationHighlight.Body>
+  <InformationHighlight.Link href="https://workday.github.io/canvas-kit/?path=/story/components-inputs-form-field--docs">
+    Form Field Docs
+  </InformationHighlight.Link>
+</InformationHighlight>
 
 Text Inputs allow users to enter words or characters without styling.
 
@@ -78,7 +87,7 @@ Set `TextInput.Field`'s `type` prop to `hidden` to completly hide a field while
 value, often used for things like security tokens. Note: You will likely need to manually
 set`aria-describedby={undefined}`and`id={undefined}`
 
-<ExampleCodeBlock code={HiddenInput} />
+<ExampleCodeBlock code={Hidden} />
 
 ### Ref Forwarding
 

package/dist/mdx/react/status-indicator/StatusIndicator.mdx

@@ -1,21 +1,22 @@
-import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
-import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
+import {ExampleCodeBlock, StorybookStatusIndicator, SymbolDoc} from '@workday/canvas-kit-docs';
+import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';
 
 import Basic from './examples/Basic';
 import Icon from './examples/Icon';
 import Emphasis from './examples/Emphasis';
 import MaxWidth from './examples/MaxWidth';
 
-# Canvas Kit Status Indicator
-
-<StatusIndicator variant="red">
-  <StatusIndicator.Label>Deprecated</StatusIndicator.Label>
-</StatusIndicator>
-
-`StatusIndicator` in Main has been deprecated and will be removed in a future major version. Please
-use
-[`StatusIndicator`](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--basic)
-in Preview instead.
+# Canvas Kit Status Indicator <StorybookStatusIndicator type="deprecated" />
+
+<InformationHighlight className="sb-unstyled" variant="caution" cs={{p: {marginBlock: 0}}}>
+  <InformationHighlight.Icon />
+  <InformationHighlight.Body>
+    `StatusIndicator` in Main has been deprecated and will be removed in a future major version.
+    Please use [Status
+    Indicator](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--basic) in
+    Preview instead.
+  </InformationHighlight.Body>
+</InformationHighlight>
 
 Status Indicators help the user quickly identify the status of a task, action, or page element.
 

package/dist/mdx/react/text/LabelText.mdx

@@ -1,18 +1,21 @@
-import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
-import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
+import {ExampleCodeBlock, StorybookStatusIndicator, SymbolDoc} from '@workday/canvas-kit-docs';
+import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';
 import Basic from './examples/LabelText/Basic';
 import Cursor from './examples/LabelText/Cursor';
 import Disabled from './examples/LabelText/Disabled';
 
-# Canvas Kit Label Text
-
-<StatusIndicator variant="red">
-  <StatusIndicator.Label>Deprecated</StatusIndicator.Label>
-</StatusIndicator>
-
-`LabelText` has been deprecated and will be removed in a future major version. Please use
-[FormField.Label](https://workday.github.io/canvas-kit/?path=/docs/preview-inputs-form-field--basic)
-from Preview instead.
+# Canvas Kit Label Text <StorybookStatusIndicator type="deprecated" />
+
+<InformationHighlight className="sb-unstyled" variant="caution" cs={{p: {marginBlock: 0}}}>
+  <InformationHighlight.Icon />
+  <InformationHighlight.Body>
+    `LabelText` has been deprecated and will be removed in a future major version. Please use
+    `FormField.Label` instead.
+  </InformationHighlight.Body>
+  <InformationHighlight.Link href="https://workday.github.io/canvas-kit/?path=/story/components-inputs-form-field--docs">
+    Form Field Docs
+  </InformationHighlight.Link>
+</InformationHighlight>
 
 `LabelText` provides a simple way to render a label with built-in support for Canvas type tokens.
 

package/dist/mdx/react/tokens/Tokens.mdx

@@ -1,13 +1,12 @@
-import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
+import {ExampleCodeBlock, StorybookStatusIndicator} from '@workday/canvas-kit-docs';
 import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';import {BorderRadius, Space, Depth, Colors, Type} from './examples/Tokens';
 import Overview from './examples/Overview';
 
 
-# Tokens
+# Tokens <StorybookStatusIndicator type="deprecated" />
 
 <InformationHighlight variant="caution" className="sb-unstyled" cs={{p: {margin: 0}}}>
   <InformationHighlight.Icon />
-  <InformationHighlight.Heading>React tokens have been deprecated!</InformationHighlight.Heading>
   <InformationHighlight.Body>
     The tokens documented below are deprecated and will be removed in a future release. You must
     migrate to the new Canvas Tokens Web package to ensure continued support and access to the
@@ -23,6 +22,8 @@ information. They enable building components and patterns with consistency acros
 
 <ExampleCodeBlock code={Overview} />
 
+<br />
+
 ## Border Radius
 
 ### Usage

package/dist/mdx/styling/mdx/Overview.mdx

@@ -1,6 +1,6 @@
 import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';
 import {Hyperlink} from '@workday/canvas-kit-react/button';
-import {system} from '@workday/canvas-tokens-web'
+import {system} from '@workday/canvas-tokens-web';
 
 
 # Canvas Kit Styling
@@ -27,7 +27,8 @@ The Canvas Kit styling system consists of two main packages:
 - `@workday/canvas-kit-styling` - Core styling utilities for runtime use
 - `@workday/canvas-kit-styling-transform` - Build-time optimization tools
 
-These packages work together to provide a CSS-in-JS experience during development while enabling optimized static CSS in production.
+These packages work together to provide a CSS-in-JS experience during development while enabling
+optimized static CSS in production.
 
 ## Installation
 
@@ -55,74 +56,219 @@ const root = createRoot(domNode);
 root.render(<div className={myStyles}>Hello!</div>);
 ```
 
+## Style Merging
+
+The `@workday/canvas-kit-styling` package uses `@emotion/css` to inject styles during JavaScript
+evaluation time rather than `@emotion/react` or `@emotion/styled` injecting when a component is
+rendered. This means the Emotion cache needs to be known before any style is created. In order to
+properly merge styles with components using either dynamic styling package, the Emotion cache must
+be changed on any React application. Without this, styles will not be merged correctly when static
+and dynamic styles are used on the same element.
+
+If you're using Canvas Kit React, you should use the `<CanvasProvider>` which includes Emotion's
+`<CacheProvider>` with the proper cache already set. If you're not using Canvas Kit React, you
+should use the `<CacheProvider>`:
+
+```tsx
+// ONLY use if not using the <CanvasProvider>
+import {getCache} from '@workday/canvas-kit-styling';
+
+// in your application bootstrap
+const root = React.createRoot(document.getElementById('root'));
+
+root.render(
+  <CacheProvider value={getCache()}>
+    <App />
+  </CacheProvider>
+);
+```
+
+## Known issues
+
+### Hot Reloading
+
+Style merging works by using CSS specificity rather than JavaScript runtime. This can cause problems
+during hot reloading. If you specify all styles in the same file, hot reloading shouldn't result in
+any style merging problems. But if you use `extends` in `createStencil` that references another
+file, you may run into style merge issues.
+
+For example:
+
+```ts
+// base.tsx file
+export const baseStencil = createStencil({
+  base: {
+    color: 'red',
+  },
+});
+
+// extended.tsx file
+import {baseStencil} from './base';
+
+export const extendedStencil = createStencil({
+  extends: baseStencil,
+  base: {
+    color: 'blue',
+  },
+});
+```
+
+This will render correctly until you change `color` in `base.tsx` and get a hot reload:
+
+```tsx
+// base.tsx file
+export const baseStencil = createStencil({
+  base: {
+    color: 'purple',
+  },
+});
+```
+
+The hot reload will evaluate this update and inject a new style.
+
 ## Development
 
-Canvas Kit Styling comes with a runtime that doesn't need anything special for developement. The
-runtime uses `@emotion/css` to include your styles on the page.
+Canvas Kit Styling comes with a runtime that doesn't need anything special for development. The
+runtime uses `@emotion/css` to include your styles on the page. If you plan to use static
+compilation, we recommend enabling in production as well so you can fix static compilation errors as
+you develop rather than get errors only in production builds.
 
-## Production
+## Static compilation
 
-If you wish to use the static compilation, you must use the `@workday/canvas-kit-styling-transform`
-package. Add the following to your project's `tsconfig.json` file:
+The `@workday/canvas-kit-styling-transform` package can to pre-build styles. This process takes
+style objects and turns them into CSS strings. This process moves serialization and hashing to build
+time rather than browser runtime when `@emotion/css` is processing styles. This will speed up
+production builds at runtime.
 
-```json
-{
-  "compilerOptions": {
-    // other options
-    "plugins": [
-      {
-        "transform": "@workday/canvas-kit-styling-transform",
-        "prefix": "css",
-        "fallbackFiles": [""]
-      }
-    ]
-  }
-}
+Static compilation has stricter requirements than when doing runtime styling. The static compiler
+uses the TypeScript type system to statically analyze style values and thus requires value types to
+be known by TypeScript. See [Restrictions](#restrictions).
+
+Static compilation may be required for server side rendering (SSR), especially when using React
+Server Components.
+
+### Hash generation
+
+Emotion generates hashes based on the serialized style object. This means a style should always give
+the same hash. Static styling hashes differently. Every `createStyles` or `createStencil` call will
+generate a unique hash even if the style object is the same. This is required for proper style
+merging because static styling doesn't give single class names, but rather merges styles using CSS
+specificity.
+
+For runtime development, the hash is always unique. For static compilation, the hash is based on the
+start and end character count in the source file of the style block. This is required for SSR so
+that the server and client agree on the same value during hydration. This means that while
+debugging, the hash depends on any code before it. If you add a `console.log` for example, the
+character index of a style block could shift which will generate a new hash.
+
+### Restrictions
+
+The static compiler uses the TypeScript type checker. The easiest way to think of these restrictions
+is if TypeScript knows the exact value, the static compiler will also know. A simple example:
+
+```ts
+// won't work - `value` is a type of `string` because `let` allows a value to be mutated
+let value = 'absolute'; // `string`
+
+const myStyles = createStyles({
+  position: value, // error - `string` isn't specific enough.
+});
+
+// will work - `value` is a type of `'absolute'` because `const` restricts to a string literal
+const value = 'absolute'; // `'absolute'`
+
+const myStyles = createStyles({
+  position: value, // works. If you mouse over `value` in your editor, you'll see the type is `'absolute'`
+});
 ```
 
-This adds a list of plugins to use when transforming TypeScript files into JavaScript files. The
-[ts-patch](https://www.npmjs.com/package/ts-patch) projects uses the `plugins` when running
-transforms.
+More complex examples may be objects:
 
-### Webpack
+```ts
+// won't work. TypeScript will not understand that the position will only be `'absolute'` and makes it a `string` instead
+const reusableStyles = {
+  position: 'absolute',
+}; // `{ position: string }`
 
-You will need to transform TypeScript files using the `ts-patch` which is the same as the TypeScript
-tanspiler except it uses TypeScript's
-[transform API](https://levelup.gitconnected.com/writing-a-custom-typescript-ast-transformer-731e2b0b66e6)
-to transform code during compilation.
+const myStyles = createStyles({
+  ...reusableStyles, // error - `position` is a `string` and not specific enough
+});
 
-In your webpack config, you add the following:
+// will work. Adding `as const` tells TypeScript the object is readonly and therefore no values can change
+const reusableStyles = {
+  position: 'absolute',
+} as const; // `{ readonly position: 'absolute' }`
+
+const myStyles = createStyles({
+  ...reusableStyles, // works. If you mouse over, the position is a string literal `'absolute'`
+});
+```
+
+Functions are a little more tricky and may require generics.
+
+```ts
+// generic makes the type be statically knowable
+function getPosition<V extends 'relative' | 'absolute'>(value: V): {position: V} {
+  return {position: value};
+}
+
+// mouse over `position` in your editor an the type will be `{ position: 'absolute' }`
+const position = getPosition('absolute'); // { position: 'absolute' }
+
+const myStyles = createStyles({
+  ...getPosition('absolute'), // works - `{ position: 'absolute' }`
+});
+```
+
+### Webpack
+
+The `@webpack/canvas-kit-styling-transform` package comes with a webpack loader that can be added to
+development and/or production.
 
 ```js
+// import the transform - CJS and ESM are supported
+import {StylingWebpackPlugin} from '@workday/canvas-kit-styling-transform';
+
+// somewhere only once. For static webpack config files, this can be near the top.
+// If inside Storybook, Gatsby, Next.js, etc configs, put inside the function that is called that
+// returns a webpack config
+const tsPlugin = const tsPlugin = new StylingWebpackPlugin({
+  tsconfigPath: path.resolve(__dirname, '../tsconfig.json'), // allows your TS config to be used
+  // A different tsconfig could be used if you want to use TS to transpile to something like ES2019 and
+  // also have Babel process the file.
+});
+
+// However you need to define rules.
+// This is different for using webpack directly or in Storybook/Gatsby/Next.js/etc
 {
   rules: [
     //...
     {
       test: /.\.tsx?$/,
-      loaders: [
-        // ts-loader
+      use: [
         {
-          loader: require.resolve('ts-loader'),
-          options: {
-            compiler: 'ts-patch/compiler',
-          },
-        },
-        // OR awesome-typescript-loader
-        {
-          loader: require.resolve('awesome-typescript-loader'),
+          loader: require.resolve('@workday/canvas-kit-styling-transform/webpack-loader'),
+          options: tsPlugin.getLoaderOptions(),
         },
       ],
+      enforce: 'pre'
     },
   ];
+  // We need to pass the plugin to Webpack's plugin list. Failure to do this will result in a
+  // production build hanging
+  plugins: [tsPlugin]
 }
 ```
 
 ## Core Styling Approaches for Static Styling
+
 For proper static styling there's two methods that you can use to apply styles.
+
 1. Using `createStyles` for simple object base styles.
 2. Using `createStencil` for dynamic styles and reusable components.
 
-Both approaches are intended to be used in tandem with the `cs` prop when applying styles to our components.
+Both approaches are intended to be used in tandem with the `cs` prop when applying styles to our
+components.
 
 ### `cs` Prop
 
@@ -132,7 +278,8 @@ everything together and applies `className` and `style` attributes to a React el
 components extend the `cs` prop so that you can statically apply styles to them.
 
 > **Important**: While the `cs` prop accepts a style object, **this will not** be considered
-> statically styling an element and you will lose the performance benefits. We plan on providing a babel plugin to extract these styles statically in a future version.
+> statically styling an element and you will lose the performance benefits. We plan on providing a
+> babel plugin to extract these styles statically in a future version.
 
 ```tsx
 import {system} from '@workday/canvas-tokens-webs';
@@ -172,15 +319,15 @@ function MyComponent() {
 }
 ```
 
-Most of our components support using the `cs` prop to apply the static styles. It merges
-everything together and applies `className` and `style` attributes to a React element.
+Most of our components support using the `cs` prop to apply the static styles. It merges everything
+together and applies `className` and `style` attributes to a React element.
 
-<InformationHighlight className="sb-unstyled" cs={{marginBlock: system.space.x4,}}>
-	<InformationHighlight.Icon />
-	<InformationHighlight.Heading>Information</InformationHighlight.Heading>
-	<InformationHighlight.Body>
-		For a more in depth overview, please view our <Hyperlink src="https://workday.github.io/canvas-kit/?path=/docs/styling-getting-started-create-styles--docs">Create Styles</Hyperlink> docs.
-	</InformationHighlight.Body>
+<InformationHighlight className="sb-unstyled" cs={{marginBlock: system.space.x4}}>
+  <InformationHighlight.Icon />
+  <InformationHighlight.Heading>Information</InformationHighlight.Heading>
+  <InformationHighlight.Body>
+    For a more in depth overview, please view our <Hyperlink src="https://workday.github.io/canvas-kit/?path=/docs/styling-getting-started-create-styles--docs"> Create Styles </Hyperlink> docs.
+  </InformationHighlight.Body>
 </InformationHighlight>
 
 ### `createStencil`
@@ -245,10 +392,10 @@ const ThemedCard = ({isDarkTheme, headerColor, elemProps}) => {
 };
 ```
 
-<InformationHighlight className="sb-unstyled" cs={{marginBlock: system.space.x4,}}>
-	<InformationHighlight.Icon />
-	<InformationHighlight.Heading>Information</InformationHighlight.Heading>
-	<InformationHighlight.Body>
-		For a more in depth overview, please view our <Hyperlink src="https://workday.github.io/canvas-kit/?path=/docs/styling-getting-started-stencils--docs">Create Stencil</Hyperlink> docs.
-	</InformationHighlight.Body>
+<InformationHighlight className="sb-unstyled" cs={{marginBlock: system.space.x4}}>
+  <InformationHighlight.Icon />
+  <InformationHighlight.Heading>Information</InformationHighlight.Heading>
+  <InformationHighlight.Body>
+    For a more in depth overview, please view our <Hyperlink src="https://workday.github.io/canvas-kit/?path=/docs/styling-getting-started-stencils--docs">Create Stencil</Hyperlink> docs.
+  </InformationHighlight.Body>
 </InformationHighlight>

package/dist/mdx/tokens/TokenMigrationOverview.mdx

@@ -1,4 +1,4 @@
-import {AIIndicator, DownloadLLMFile} from '@workday/canvas-kit-docs';
+import {StorybookStatusIndicator, DownloadLLMFile} from '@workday/canvas-kit-docs';
 import {StorybookInformationHighlight} from './StorybookInformationHighlight';
 
 
@@ -15,7 +15,7 @@ Canvas Kit v10+ introduces a new token system that replaces the old JavaScript-b
   Android
 - **Future-Proofing**: Aligns with modern CSS capabilities and Canvas Kit's long-term direction
 
-## LLM Assisted Migration <AIIndicator />
+## LLM Assisted Migration <StorybookStatusIndicator type="ai" />
 
 We provide a **LLM migration mapping file** (`llm-token-migration.txt`) specifically designed for
 use with LLM-based code assistants (such as [Cursor](https://www.cursor.so/) or similar tools). This
@@ -23,8 +23,7 @@ file is not intended for direct human reference or team documentation, but rathe
 input for LLMs to automate and assist with your token migration process.
 
 > The LLM migration file is regularly updated to reflect the latest token mappings and best
-> practices.
-> For more details, see other sections of this migration guide.
+> practices. For more details, see other sections of this migration guide.
 
 This file contains a comprehensive mapping of old Canvas Kit token usages to their new equivalents
 in `@workday/canvas-tokens-web`, along with migration tips and examples and formatted for optimal

package/index.ts

@@ -1,4 +1,4 @@
-export {AIIndicator} from './lib/AIIndicator';
+export {StorybookStatusIndicator} from './lib/StorybookStatusIndicator';
 export {DownloadLLMFile} from './lib/DownloadLLMFile';
 export {ExampleCodeBlock} from './lib/ExampleCodeBlock';
 export * from './lib/specs';