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

package/dist/mdx/react/_examples/mdx/examples/compoundComponent/CustomCard.tsx

@@ -1,15 +1,17 @@
 import React from 'react';
+
+import {PrimaryButton} from '@workday/canvas-kit-react/button';
+import {Card} from '@workday/canvas-kit-react/card';
 import {
+  ExtractProps,
   createContainer,
   createElemPropsHook,
   createModelHook,
   createSubcomponent,
-  ExtractProps,
 } from '@workday/canvas-kit-react/common';
-import {Card} from '@workday/canvas-kit-react/card';
-import {PrimaryButton} from '@workday/canvas-kit-react/button';
 import {Box} from '@workday/canvas-kit-react/layout';
-import {colors} from '@workday/canvas-kit-react/tokens';
+import {handleCsProp} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 export type Theme = 'dark' | 'light';
 interface CustomCardProps extends ExtractProps<typeof Card> {
@@ -22,8 +24,8 @@ interface CustomCardProps extends ExtractProps<typeof Card> {
 const useCustomCardModel = createModelHook({
   defaultConfig: {theme: 'dark' as Theme},
 })(config => {
-  const lightThemeColor = colors.frenchVanilla100;
-  const darkThemeColor = colors.blackPepper300;
+  const lightThemeColor = system.color.fg.inverse;
+  const darkThemeColor = system.color.fg.default;
   const inverseColor = color => (color === darkThemeColor ? lightThemeColor : darkThemeColor);
 
   const [theme, setTheme] = React.useState(config.theme);
@@ -94,11 +96,7 @@ const CustomCard = createContainer(Card)({
   modelHook: useCustomCardModel,
   elemPropsHook: useCustomCard,
 })<CustomCardProps>(({theme, children, ...elemProps}) => {
-  return (
-    <Card depth={2} {...elemProps}>
-      {children}
-    </Card>
-  );
+  return <Card {...handleCsProp(elemProps, [{boxShadow: system.depth[2]}])}>{children}</Card>;
 });
 
 /**
@@ -115,7 +113,7 @@ export default () => {
   return (
     <CustomCard model={model}>
       <CustomCard.Heading>
-        <Box color={model.state.contrastColor}>Change your theme {icon}</Box>
+        <Box cs={{color: model.state.contrastColor}}>Change your theme {icon}</Box>
       </CustomCard.Heading>
       <CustomCard.Body>
         <CustomCard.Button ref={buttonRef}>Toggle</CustomCard.Button>

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import {Grid, Box} from '@workday/canvas-kit-react/layout';
+import {Box, Grid} from '@workday/canvas-kit-react/layout';
 import {BodyText, Heading} from '@workday/canvas-kit-react/text';
 
 export default () => (

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import {Grid, Box} from '@workday/canvas-kit-react/layout';
+import {Box, Grid} from '@workday/canvas-kit-react/layout';
 import {BodyText, Heading} from '@workday/canvas-kit-react/text';
 
 export default () => (

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import {Grid, Box} from '@workday/canvas-kit-react/layout';
+import {Box, Grid} from '@workday/canvas-kit-react/layout';
 import {BodyText, Heading} from '@workday/canvas-kit-react/text';
 
 export default () => (

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

@@ -1,17 +1,43 @@
 import * as React from 'react';
 
-import {Grid, Box} from '@workday/canvas-kit-react/layout';
+import {Box, Grid} from '@workday/canvas-kit-react/layout';
 import {BodyText, Heading} from '@workday/canvas-kit-react/text';
 import {colors} from '@workday/canvas-kit-react/tokens';
+import {createStencil, createStyles, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const gridStyles = createStyles({
+  gridTemplateAreas: "'Heading Heading Heading' 'FormLeft FormCenter FormRight'",
+  gridAutoRows: 'min-content',
+  gridRowGap: system.gap.sm,
+  gridColumnGap: system.gap.xxl,
+});
+
+const boxHeadingStyles = createStencil({
+  vars: {
+    gridArea: '',
+  },
+  base: ({gridArea}) => ({
+    paddingInline: system.padding.sm,
+    border: `${px2rem(1)} solid ${system.color.brand.border.primary}`,
+    gridArea,
+  }),
+});
+
+const boxStyles = createStencil({
+  vars: {
+    gridArea: '',
+  },
+  base: ({gridArea}) => ({
+    paddingInline: system.padding.md,
+    border: `${px2rem(1)} dashed ${system.color.brand.border.primary}`,
+    gridArea,
+  }),
+});
 
 export default () => (
-  <Grid
-    gridTemplateAreas="'Heading Heading Heading' 'FormLeft FormCenter FormRight'"
-    gridAutoRows="min-content"
-    gridRowGap="s"
-    gridColumnGap="xxxl"
-  >
-    <Box gridArea="Heading" paddingX="s" border={`1px solid ${colors.blueberry400}`}>
+  <Grid cs={gridStyles}>
+    <Box cs={boxHeadingStyles({gridArea: 'Heading'})}>
       <Heading size="medium">Full Width With 3 Columns</Heading>
     </Box>
     <FormSkeleton gridArea="FormLeft" text="Form - Left Third" />
@@ -21,14 +47,26 @@ export default () => (
 );
 
 const FormSkeleton = ({gridArea, text}) => (
-  <Box border={`1px dashed ${colors.blueberry400}`} paddingX="m" gridArea={gridArea}>
+  <Box cs={boxStyles({gridArea})}>
     <BodyText size="small" fontWeight="bold">
       {text}
     </BodyText>
     {Array.from({length: 5}).map(() => (
-      <Grid gridGap="s" marginBottom="xl">
-        <Box backgroundColor="soap500" width="120px" height="s" />
-        <Box borderWidth="1px" borderStyle="solid" borderColor="soap500" width="100%" height="xl" />
+      <Grid cs={{gridGap: system.gap.sm, marginBottom: px2rem(20)}}>
+        <Box
+          cs={{
+            backgroundColor: system.color.surface.default,
+            width: px2rem(120),
+            height: px2rem(12),
+          }}
+        />
+        <Box
+          cs={{
+            border: `${px2rem(1)} solid ${system.color.brand.border.primary}`,
+            width: '100%',
+            height: px2rem(20),
+          }}
+        />
       </Grid>
     ))}
   </Box>

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import {Grid, Box} from '@workday/canvas-kit-react/layout';
+import {Box, Grid} from '@workday/canvas-kit-react/layout';
 import {BodyText, Heading} from '@workday/canvas-kit-react/text';
 import {colors} from '@workday/canvas-kit-react/tokens';
 

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

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import {colors} from '@workday/canvas-kit-react/tokens';
+
+import {styled} from '@workday/canvas-kit-react/common';
 import {Box, Grid} from '@workday/canvas-kit-react/layout';
 import {Heading} from '@workday/canvas-kit-react/text';
-import {styled} from '@workday/canvas-kit-react/common';
+import {colors} from '@workday/canvas-kit-react/tokens';
 
 const Container = styled(Box)({
   columnCount: 3,

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

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

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import {Grid, Box} from '@workday/canvas-kit-react/layout';
+import {Box, Grid} from '@workday/canvas-kit-react/layout';
 import {BodyText, Heading} from '@workday/canvas-kit-react/text';
 import {colors} from '@workday/canvas-kit-react/tokens';
 

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import {Grid, Box} from '@workday/canvas-kit-react/layout';
+import {Box, Grid} from '@workday/canvas-kit-react/layout';
 import {BodyText, Heading} from '@workday/canvas-kit-react/text';
 import {colors} from '@workday/canvas-kit-react/tokens';
 

package/dist/mdx/react/action-bar/ActionBar.mdx

@@ -7,7 +7,7 @@ import OverflowActionBarCustomButtonCount from './examples/OverflowActionBarCust
 
 # Canvas Kit Action Bar
 
-Action Bar is a [compound component](/getting-started/for-developers/resources/compound-components/)
+Action Bar is a [compound component](/get-started/for-developers/documentation/compound-components/)
 that contains primary and secondary actions related to a page or task.
 
 [> Workday Design Reference](https://design.workday.com/components/buttons/action-bar)
@@ -75,9 +75,9 @@ Grouping the actions into an HTML `<section>` element with an `aria-label` strin
 This can be useful for helping screen reader users quickly jump down to the actions at the bottom of
 a page.
 
-Refer to [Button](?path=/docs/components-buttons--docs#accessibility) and
-[Menus](?path=/docs/components-popups-menu--docs#accessibility) for more information about
-accessibiliy of these components in the Action Bar.
+Refer to [Button](/components/buttons/button/#accessibility) and
+[Menus](/components/popups/menu/#accessibility) for more information about accessibiliy of these
+components in the Action Bar.
 
 ## Component API
 

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

@@ -1,6 +1,6 @@
 import {ActionBar} from '@workday/canvas-kit-react/action-bar';
-import {notificationsIcon, alarmClockIcon} from '@workday/canvas-system-icons-web';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
+import {alarmClockIcon, notificationsIcon} from '@workday/canvas-system-icons-web';
 
 export default () => {
   return (

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

@@ -1,9 +1,10 @@
 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 {breakpoints} from '@workday/canvas-kit-react/common';
 import {Box} from '@workday/canvas-kit-react/layout';
+import {SegmentedControl} from '@workday/canvas-kit-react/segmented-control';
 
 type MyActionItem = {
   id: string;
@@ -57,7 +58,7 @@ export default () => {
       <footer>
         <h4>Change Action Bar container size</h4>
         <SegmentedControl onSelect={data => setContainerWidth(data.id)}>
-          <SegmentedControl.List role="group" aria-label="container width control" marginBottom="m">
+          <SegmentedControl.List role="group" aria-label="container width control">
             <SegmentedControl.Item data-id="100%">100%</SegmentedControl.Item>
             <SegmentedControl.Item data-id={`${breakpoints.m}px`}>Small</SegmentedControl.Item>
             <SegmentedControl.Item data-id="420px">420px</SegmentedControl.Item>
@@ -66,6 +67,7 @@ export default () => {
             </SegmentedControl.Item>
           </SegmentedControl.List>
         </SegmentedControl>
+        <br />
         <p>Selected: {containerWidth}</p>
       </footer>
     </div>

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

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import {ActionBar} from '@workday/canvas-kit-react/action-bar';
 
 type MyActionItem = {

package/dist/mdx/{preview-react → react}/avatar/Avatar.mdx

@@ -1,31 +1,37 @@
-import {SymbolDoc, Specifications, ExampleCodeBlock} from '@workday/canvas-kit-docs';
+import {
+    ExampleCodeBlock,
+    Specifications,
+    StorybookStatusIndicator,
+    SymbolDoc,
+} from '@workday/canvas-kit-docs';
+
+
+
+import { Avatar } from '@workday/canvas-kit-react/avatar';
 
-import {Avatar} from '@workday/canvas-kit-preview-react/avatar';
 import Basic from './examples/Basic';
+import Custom from './examples/Custom';
+import Decorative from './examples/Decorative';
 import Image from './examples/Image';
 import Size from './examples/Size';
 import Variant from './examples/Variant';
-import Custom from './examples/Custom';
-import Decorative from './examples/Decorative';
-
-
-# Avatar
 
 
+# Avatar <StorybookStatusIndicator type="promoted" />
 
 ## Installation
 
 ```sh
-yarn add @workday/canvas-kit-preview-react
+yarn add @workday/canvas-kit-react
 ```
 
-
 ## Usage
 
 ### Basic Example
 
 The most basic usage requires only a `name` prop. The component automatically extracts and displays
-the initials. If you want to display a different set of initials, you can use the `preferredInitials` prop.
+the initials. If you want to display a different set of initials, you can use the
+`preferredInitials` prop.
 
 <ExampleCodeBlock code={Basic} />
 
@@ -33,7 +39,8 @@ the initials. If you want to display a different set of initials, you can use th
 
 You can display a profile image by providing the `url` prop.
 
-> Note: The `url` and the `name` prop is required for the image avatar. The `name` is used for the `alt` attribute on the image.
+> Note: The `url` and the `name` prop is required for the image avatar. The `name` is used for the
+> `alt` attribute on the image.
 
 #### Image Fallback Behavior
 
@@ -48,6 +55,7 @@ The Avatar component includes intelligent fallback handling:
 ### Sizes
 
 The Avatar component supports the following sizes:
+
 - `extraExtraSmall` is 24px x 24px
 - `extraSmall` is 32px x 32px
 - `small` is 40px x 40px
@@ -71,10 +79,12 @@ For complete control over styling and behavior, use the `BaseAvatar` component:
 <ExampleCodeBlock code={Custom} />
 
 ### Accessibility
-If the Avatar is purely decorative, you can set the `isDecorative` prop to `true` to prevent the `name` prop from being forwarded to the `alt` attribute of the image.
+
+If the Avatar is purely decorative, you can set the `isDecorative` prop to `true` to prevent the
+`name` prop from being forwarded to the `alt` attribute of the image.
 
 <ExampleCodeBlock code={Decorative} />
 
 ## Component API
 
-<SymbolDoc name="Avatar" fileName="/preview-react/" hideDescription />
+<SymbolDoc name="Avatar" fileName="/react/" hideDescription />

package/dist/mdx/react/avatar/examples/Basic.tsx

@@ -0,0 +1,5 @@
+import {Avatar} from '@workday/canvas-kit-react/avatar';
+
+export default () => {
+  return <Avatar name="John Doe" />;
+};

package/dist/mdx/{preview-react → react}/avatar/examples/Custom.tsx

@@ -1,4 +1,4 @@
-import {BaseAvatar} from '@workday/canvas-kit-preview-react/avatar';
+import {BaseAvatar} from '@workday/canvas-kit-react/avatar';
 import {createStyles, px2rem} from '@workday/canvas-kit-styling';
 import {base} from '@workday/canvas-tokens-web';
 

package/dist/mdx/{preview-react → react}/avatar/examples/Decorative.tsx

@@ -1,12 +1,14 @@
-import {Avatar} from '@workday/canvas-kit-preview-react/avatar';
-// @ts-ignore
-import nicholasAvatar from './nicholas-avatar.png';
-import {createStyles} from '@workday/canvas-kit-styling';
+import {Avatar} from '@workday/canvas-kit-react/avatar';
 import {Text} from '@workday/canvas-kit-react/text';
+import {createStyles} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
+
+// @ts-ignore
+import nicholasAvatar from './nicholas-avatar.jpg';
+
 const containerStyles = createStyles({
   display: 'inline-flex',
-  gap: system.space.x2,
+  gap: system.gap.sm,
   alignItems: 'center',
 });
 export default () => {

package/dist/mdx/{preview-react → react}/avatar/examples/Image.tsx

@@ -1,4 +1,4 @@
-import {Avatar} from '@workday/canvas-kit-preview-react/avatar';
+import {Avatar} from '@workday/canvas-kit-react/avatar';
 
 export default () => {
   return (

package/dist/mdx/{preview-react → react}/avatar/examples/Size.tsx

@@ -1,10 +1,10 @@
-import {Avatar} from '@workday/canvas-kit-preview-react/avatar';
+import {Avatar} from '@workday/canvas-kit-react/avatar';
 import {createStyles} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
 const containerStyles = createStyles({
   display: 'inline-flex',
-  gap: system.space.x2,
+  gap: system.gap.sm,
 });
 
 export default () => {

package/dist/mdx/{preview-react → react}/avatar/examples/Variant.tsx

@@ -1,10 +1,10 @@
-import {Avatar} from '@workday/canvas-kit-preview-react/avatar';
+import {Avatar} from '@workday/canvas-kit-react/avatar';
 import {createStyles} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
 const containerStyles = createStyles({
   display: 'inline-flex',
-  gap: system.space.x2,
+  gap: system.gap.sm,
 });
 
 export default () => {

package/dist/mdx/react/badge/CountBadge.mdx

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

package/dist/mdx/react/badge/examples/Basic.tsx

@@ -4,8 +4,8 @@ import {system} from '@workday/canvas-tokens-web';
 
 const containerStyles = createStyles({
   display: 'flex',
-  gap: system.space.x2,
-  padding: system.space.x4,
+  gap: system.gap.sm,
+  padding: system.padding.md,
 });
 
 export default () => {

package/dist/mdx/react/badge/examples/CustomLimit.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
+
 import {CountBadge} from '@workday/canvas-kit-react/badge';
 import {TertiaryButton} from '@workday/canvas-kit-react/button';
-
 import {createStyles} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
@@ -9,27 +9,27 @@ const columnStyles = createStyles({
   boxSizing: 'border-box',
   display: 'flex',
   flexDirection: 'column',
-  gap: system.space.x4,
+  gap: system.gap.md,
 });
 
 const controls = createStyles({
   boxSizing: 'border-box',
   borderBottom: `solid 1px ${system.color.border.divider}`,
   display: 'flex',
-  gap: system.space.x1,
-  padding: system.space.x1,
+  gap: system.gap.xs,
+  padding: system.padding.xxs,
 });
 
 const defaultBackground = createStyles({
   boxSizing: 'border-box',
-  backgroundColor: system.color.bg.alt.soft,
-  padding: system.space.x4,
+  backgroundColor: system.color.surface.alt.default,
+  padding: system.padding.md,
 });
 
 const inverseBackground = createStyles({
   boxSizing: 'border-box',
-  backgroundColor: system.color.bg.primary.default,
-  padding: system.space.x4,
+  backgroundColor: system.color.brand.accent.primary,
+  padding: system.padding.md,
 });
 
 const initialCount = 1;

package/dist/mdx/react/badge/examples/Emphasis.tsx

@@ -1,17 +1,17 @@
 import {CountBadge} from '@workday/canvas-kit-react/badge';
+import {Text} from '@workday/canvas-kit-react/text';
 import {createStyles} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
-import {Text} from '@workday/canvas-kit-react/text';
 
 const containerStyles = createStyles({
   display: 'flex',
-  gap: system.space.x2,
-  padding: system.space.x4,
+  gap: system.gap.sm,
+  padding: system.padding.md,
   flexDirection: 'column',
 });
 
 const textStyles = createStyles({
-  paddingInlineEnd: system.space.x2,
+  paddingInlineEnd: system.padding.xs,
 });
 
 export default () => {

package/dist/mdx/react/badge/examples/Inverse.tsx

@@ -1,17 +1,18 @@
 import {CountBadge} from '@workday/canvas-kit-react/badge';
-import {createStyles, cssVar} from '@workday/canvas-kit-styling';
-import {system} from '@workday/canvas-tokens-web';
 import {Text} from '@workday/canvas-kit-react/text';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
 const containerStyles = createStyles({
   display: 'flex',
-  gap: system.space.x2,
-  padding: system.space.x4,
-  backgroundColor: system.color.static.blue.default,
+  gap: system.gap.sm,
+  padding: system.padding.md,
+  backgroundColor: system.color.accent.info,
   flexDirection: 'column',
 });
 
 const textStyles = createStyles({
-  paddingInlineEnd: system.space.x2,
+  paddingInlineEnd: system.padding.sm,
 });
 
 export default () => {

package/dist/mdx/react/badge/examples/NotificationBadge.tsx

@@ -1,12 +1,13 @@
 import * as React from 'react';
+
 import {CountBadge} from '@workday/canvas-kit-react/badge';
 import {SecondaryButton, TertiaryButton} from '@workday/canvas-kit-react/button';
 import {AriaLiveRegion, useUniqueId} from '@workday/canvas-kit-react/common';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
 import {createStyles, cssVar} from '@workday/canvas-kit-styling';
 import {notificationsIcon} from '@workday/canvas-system-icons-web';
 import {system} from '@workday/canvas-tokens-web';
-import {Tooltip} from '@workday/canvas-kit-react/tooltip';
-import {Flex} from '@workday/canvas-kit-react/layout';
 
 function negate(value: string, fallback?: string) {
   return `calc(${cssVar(value, fallback)} * -1)`;
@@ -15,13 +16,13 @@ function negate(value: string, fallback?: string) {
 const container = createStyles({
   boxSizing: 'border-box',
   flexDirection: 'column',
-  gap: system.space.x4,
+  gap: system.gap.md,
 });
 
 const controls = createStyles({
   boxSizing: 'border-box',
-  gap: system.space.x2,
-  padding: system.space.x1,
+  gap: system.gap.sm,
+  padding: system.padding.xxs,
 });
 
 const notificationContainerStyles = createStyles({
@@ -32,8 +33,8 @@ const notificationContainerStyles = createStyles({
 const countBadgeStyles = createStyles({
   boxSizing: 'border-box',
   position: 'absolute',
-  top: negate(system.space.x1),
-  insetInlineEnd: negate(system.space.x1),
+  top: negate(system.gap.xs),
+  insetInlineEnd: negate(system.gap.xs),
 });
 
 // Testing notes (Aug. 30, 2024):

package/dist/mdx/react/banner/Banner.mdx

@@ -1,4 +1,4 @@
-import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
+import { ExampleCodeBlock, SymbolDoc } from '@workday/canvas-kit-docs';
 import ActionText from './examples/ActionText';
 import Basic from './examples/Basic';
 import Error from './examples/Error';
@@ -13,7 +13,7 @@ import StickyRTL from './examples/StickyRTL';
 
 # Canvas Kit Banner
 
-`Banner` is a [compound component](/getting-started/for-developers/resources/compound-components/)
+`Banner` is a [compound component](/get-started/for-developers/documentation/compound-components/)
 used surface important information and feedback to the user about a task, action, or state.
 
 [> Workday Design Reference](https://design.workday.com/components/indicators/banners)

package/dist/mdx/react/banner/examples/IconBanner.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
 import {Banner} from '@workday/canvas-kit-react/banner';
-import {Tooltip} from '@workday/canvas-kit-react/tooltip';
 import {styled} from '@workday/canvas-kit-react/common';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
 
 export default () => {
   return (

package/dist/mdx/react/banner/examples/RefForwarding.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
-import {changeFocus} from '@workday/canvas-kit-react/common';
 import {Banner} from '@workday/canvas-kit-react/banner';
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
+import {changeFocus} from '@workday/canvas-kit-react/common';
 import {Flex} from '@workday/canvas-kit-react/layout';
 
 export default () => {

package/dist/mdx/react/banner/examples/Sticky.tsx

@@ -1,6 +1,6 @@
-import {Box} from '@workday/canvas-kit-react/layout';
 import {Banner} from '@workday/canvas-kit-react/banner';
 import {styled} from '@workday/canvas-kit-react/common';
+import {Box} from '@workday/canvas-kit-react/layout';
 
 const StyledBanner = styled(Banner)({
   position: 'absolute',