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

package/dist/mdx/react/icon/examples/SystemIconList.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+
+import {SystemIcon} from '@workday/canvas-kit-react/icon';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {Subtext} from '@workday/canvas-kit-react/text';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+import * as CanvasIcons from '@workday/canvas-system-icons-web';
+import {system} from '@workday/canvas-tokens-web';
+
+const ImportedIcons = Object.keys(CanvasIcons);
+const allIcons = ImportedIcons.filter(icon => !icon.startsWith('Canvas') && icon.endsWith('Icon'));
+
+const styleOverrides = {
+  parentContainer: createStyles({
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: system.gap.lg,
+  }),
+  firstChildContainer: createStyles({
+    flexWrap: 'wrap',
+  }),
+  secondChildContainer: createStyles({
+    alignItems: 'center',
+    width: `max(320px,20%)`,
+    flexDirection: 'row',
+    gap: px2rem(12),
+    padding: system.padding.sm,
+  }),
+  text: createStyles({
+    fontFamily: system.fontFamily.mono,
+    padding: system.padding.xxs,
+    backgroundColor: system.color.surface.alt.default,
+    borderRadius: system.shape.sm,
+  }),
+};
+
+const getJSFallback = (icon: string) => {
+  const [_, __, first, ...rest] = icon.replace('.svg', '').split('-');
+  return first + rest.map(word => word.charAt(0).toUpperCase() + word.slice(1)).join('') + 'Icon';
+};
+
+export default () => {
+  const [value, setValue] = React.useState('');
+
+  const handleSearch = (e: any) => {
+    setValue(e.target.value);
+  };
+
+  return (
+    <Flex cs={styleOverrides.parentContainer}>
+      <TextInput onKeyDown={e => handleSearch(e)} placeholder="Search for an icon" />
+      <Subtext as="code" size="large" cs={styleOverrides.text}>
+        D - deprecated icon; {'\u2192'} - replacement
+      </Subtext>
+      <Flex cs={styleOverrides.firstChildContainer}>
+        {allIcons
+          .filter(icon => {
+            if (value === '') {
+              return 'No icons found';
+            } else if (icon.toLocaleLowerCase().includes(value.toLocaleLowerCase())) {
+              return icon;
+            }
+          })
+          .map((singleIcon, index) => {
+            const icon = CanvasIcons[singleIcon];
+
+            return (
+              <Flex cs={styleOverrides.secondChildContainer} key={index}>
+                <SystemIcon icon={icon} />
+                <Subtext as="code" size="large" cs={styleOverrides.text}>
+                  {singleIcon} {icon.fallback ? `(D) \u2192 ${getJSFallback(icon.fallback)}` : ''}
+                </Subtext>
+              </Flex>
+            );
+          })}
+      </Flex>
+    </Flex>
+  );
+};

package/dist/mdx/react/information-highlight/InformationHighlight.mdx

@@ -0,0 +1,96 @@
+import { ExampleCodeBlock, SymbolDoc, Specifications } from '@workday/canvas-kit-docs';
+import Basic from './examples/Basic';
+import Body from './examples/Body';
+import Heading from './examples/Heading';
+import Informational from './examples/Informational';
+import Caution from './examples/Caution';
+import Critical from './examples/Critical';
+import IconCritical from './examples/CustomIconCritical';
+import RTL from './examples/RTL';
+
+
+# Canvas Kit Information Highlight
+
+A container to call out important information on a page or a section of a page that the user should
+be aware of.
+
+## Installation
+
+```sh
+yarn add @workday/canvas-kit-react
+```
+
+## Usage
+
+### Basic Example
+
+<ExampleCodeBlock code={Basic} />
+
+### Variants
+
+`InformationHighlight` has three variants and each `variant` has two types of `emphasis`.
+
+Variants: `informational`, `caution`, `critical`
+
+Emphasis: `low`, `high`
+
+The variants have different icons and colors to convey severity and the emphasis changes the
+background color to have a lower or higher contrast. If no `variant` or `emphasis` is selected the
+layout will default to `Variant: informational, Emphasis: low`.
+
+The following examples will show the `low` and `high` emphasis of the three variants. `low` Emphasis
+will be shown first and should be used when there is other more important information on the page.
+`high` Emphasis will be shown second, and should be used when the highlight is not competing with
+other, more important information.
+
+#### Informational
+
+The informational variant is for _nice to have_ information, such as related features or
+opportunities.
+
+<ExampleCodeBlock code={Informational} />
+
+#### Caution
+
+The caution variant is for _important to know_ information, such as the potential consequences of
+specific actions.
+
+<ExampleCodeBlock code={Caution} />
+
+#### Critical
+
+The critical variant is for _must know_ information that could otherwise cause failure if the user
+is unaware.
+
+<ExampleCodeBlock code={Critical} />
+
+### RTL Example
+
+Information Highlight also supports RTL Languages. To enable RTL, set the `dir` attribute on the
+parent dom element that renders your application.
+
+<ExampleCodeBlock code={RTL} />
+
+### Partial and Custom Information Highlights
+
+`InformationHighlight` can use custom icons or be designed to only use some of its components.
+
+#### Custom Icon: Critical
+
+<ExampleCodeBlock code={IconCritical} />
+
+#### Body Only Example
+
+<ExampleCodeBlock code={Body} />
+
+#### Heading Only Example
+
+<ExampleCodeBlock code={Heading} />
+
+## Component API
+
+<SymbolDoc name="InformationHighlight" fileName="/react/" />
+
+## Specifications
+
+<Specifications file="./cypress/component/InformationHighlight.spec.tsx" name="InformationHighlight" />

package/dist/mdx/{preview-react → react}/information-highlight/examples/Basic.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';
+import {InformationHighlight} from '@workday/canvas-kit-react/information-highlight';
 
 export default () => {
   return (

package/dist/mdx/{preview-react → react}/information-highlight/examples/Body.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';
+import {InformationHighlight} from '@workday/canvas-kit-react/information-highlight';
 
 export default () => {
   return (

package/dist/mdx/{preview-react → react}/information-highlight/examples/Caution.tsx

@@ -1,10 +1,10 @@
+import {InformationHighlight} from '@workday/canvas-kit-react/information-highlight';
 import {Flex} from '@workday/canvas-kit-react/layout';
-import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';
 import {system} from '@workday/canvas-tokens-web';
 
 export default () => {
   return (
-    <Flex flexDirection={'column'} gap={system.space.x2}>
+    <Flex cs={{gap: system.gap.sm, flexDirection: 'column'}}>
       <InformationHighlight variant={'caution'}>
         <InformationHighlight.Icon />
         <InformationHighlight.Heading> Caution: Highlight Something </InformationHighlight.Heading>

package/dist/mdx/{preview-react → react}/information-highlight/examples/Critical.tsx

@@ -1,10 +1,10 @@
+import {InformationHighlight} from '@workday/canvas-kit-react/information-highlight';
 import {Flex} from '@workday/canvas-kit-react/layout';
-import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';
 import {system} from '@workday/canvas-tokens-web';
 
 export default () => {
   return (
-    <Flex flexDirection={'column'} gap={system.space.x2}>
+    <Flex cs={{gap: system.gap.sm, flexDirection: 'column'}}>
       <InformationHighlight variant={'critical'}>
         <InformationHighlight.Icon />
         <InformationHighlight.Heading>Attention! Highlight Something</InformationHighlight.Heading>

package/dist/mdx/{preview-react → react}/information-highlight/examples/CustomIconCritical.tsx

@@ -1,14 +1,13 @@
-import React from 'react';
-import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';
-import {chartIcon} from '@workday/canvas-system-icons-web';
+import {InformationHighlight} from '@workday/canvas-kit-react/information-highlight';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {barChartIcon} from '@workday/canvas-system-icons-web';
 import {system} from '@workday/canvas-tokens-web';
 
 export default () => {
   return (
-    <Flex flexDirection={'column'} gap={system.space.x2}>
+    <Flex cs={{gap: system.gap.sm, flexDirection: 'column'}}>
       <InformationHighlight variant={'critical'} emphasis={'low'}>
-        <InformationHighlight.Icon icon={chartIcon} />
+        <InformationHighlight.Icon icon={barChartIcon} />
         <InformationHighlight.Heading> Attention! Custom Highlight </InformationHighlight.Heading>
         <InformationHighlight.Body>
           A custom Icon can be added to the Information Highlight component
@@ -16,7 +15,7 @@ export default () => {
         <InformationHighlight.Link href="#hyperlink">View the Docs</InformationHighlight.Link>
       </InformationHighlight>
       <InformationHighlight variant={'critical'} emphasis={'high'}>
-        <InformationHighlight.Icon icon={chartIcon} />
+        <InformationHighlight.Icon icon={barChartIcon} />
         <InformationHighlight.Heading> Attention! Custom Highlight </InformationHighlight.Heading>
         <InformationHighlight.Body>
           A custom Icon can be added to the Information Highlight component

package/dist/mdx/{preview-react → react}/information-highlight/examples/Heading.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';
+import {InformationHighlight} from '@workday/canvas-kit-react/information-highlight';
 
 export default () => {
   return (

package/dist/mdx/{preview-react → react}/information-highlight/examples/Informational.tsx

@@ -1,7 +1,7 @@
+import {InformationHighlight} from '@workday/canvas-kit-react/information-highlight';
 import {Flex} from '@workday/canvas-kit-react/layout';
-import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';
-import {system} from '@workday/canvas-tokens-web';
 import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 const contentTextStyles = createStyles({
   margin: 0,
@@ -10,14 +10,14 @@ const contentTextStyles = createStyles({
 const contentListStyles = createStyles({
   listStyle: 'inside',
   marginInlineStart: 0,
-  marginBlockStart: system.space.x2,
+  marginBlockStart: system.gap.sm,
   marginBlockEnd: 0,
   padding: 0,
 });
 
 export default () => {
   return (
-    <Flex flexDirection={'column'} gap={system.space.x2}>
+    <Flex cs={{gap: system.gap.sm, flexDirection: 'column'}}>
       <InformationHighlight variant={'informational'}>
         <InformationHighlight.Icon />
         <InformationHighlight.Heading> Informational Highlight </InformationHighlight.Heading>

package/dist/mdx/{preview-react → react}/information-highlight/examples/RTL.tsx

@@ -1,17 +1,12 @@
-import React from 'react';
+import {CanvasProvider} from '@workday/canvas-kit-react/common';
+import {InformationHighlight} from '@workday/canvas-kit-react/information-highlight';
 import {Flex} from '@workday/canvas-kit-react/layout';
-import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';
-import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
 import {system} from '@workday/canvas-tokens-web';
+
 export default () => {
-  const theme = {
-    canvas: {
-      direction: ContentDirection.RTL,
-    },
-  };
   return (
-    <Flex flexDirection={'column'} gap={system.space.x2}>
-      <CanvasProvider theme={theme}>
+    <Flex cs={{gap: system.gap.sm, flexDirection: 'column'}}>
+      <CanvasProvider dir="rtl">
         <InformationHighlight variant={'caution'} emphasis={'low'}>
           <InformationHighlight.Icon />
           <InformationHighlight.Heading>
@@ -24,7 +19,7 @@ export default () => {
           <InformationHighlight.Link href="#hyperlink">وثائق</InformationHighlight.Link>
         </InformationHighlight>
       </CanvasProvider>
-      <CanvasProvider theme={theme}>
+      <CanvasProvider dir="rtl">
         <InformationHighlight variant={'caution'} emphasis={'high'}>
           <InformationHighlight.Icon />
           <InformationHighlight.Heading>

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
@@ -31,18 +31,18 @@ supports all `BoxProps` such as `padding`, it also supports semantic anchor elem
 
 ### Style Props
 
-`Box` exposes [style props](/getting-started/for-developers/resources/style-props/) that allow you
+`Box` exposes [style props](/get-started/for-developers/documentation/style-props/) that allow you
 to modify styles in an ergonomic way across components. To learn more about individual sets of `Box`
 style props, consult the lists below.
 
-- [Background Style Props](/getting-started/for-developers/resources/style-props/#background)
-- [Border Style Props](/getting-started/for-developers/resources/style-props/#border)
-- [Color Style Props](/getting-started/for-developers/resources/style-props/#color)
-- [Depth Style Props](/getting-started/for-developers/resources/style-props/#depth)
-- [Flex Item Style Props](/getting-started/for-developers/resources/style-props/#flex-item)
-- [Grid Item Style Props](/getting-started/for-developers/resources/style-props/#grid-item)
-- [Layout Style Props](/getting-started/for-developers/resources/style-props/#layout)
-- [Other Style Props](/getting-started/for-developers/resources/style-props/#other)
-- [Position Style Props](/getting-started/for-developers/resources/style-props/#position)
-- [Space Style Props](/getting-started/for-developers/resources/style-props/#space)
-- [Text Style Props](/getting-started/for-developers/resources/style-props/#text)
+- [Background Style Props](/get-started/for-developers/documentation/style-props/#background)
+- [Border Style Props](/get-started/for-developers/documentation/style-props/#border)
+- [Color Style Props](/get-started/for-developers/documentation/style-props/#color)
+- [Depth Style Props](/get-started/for-developers/documentation/style-props/#depth)
+- [Flex Item Style Props](/get-started/for-developers/documentation/style-props/#flex-item)
+- [Grid Item Style Props](/get-started/for-developers/documentation/style-props/#grid-item)
+- [Layout Style Props](/get-started/for-developers/documentation/style-props/#layout)
+- [Other Style Props](/get-started/for-developers/documentation/style-props/#other)
+- [Position Style Props](/get-started/for-developers/documentation/style-props/#position)
+- [Space Style Props](/get-started/for-developers/documentation/style-props/#space)
+- [Text Style Props](/get-started/for-developers/documentation/style-props/#text)

package/dist/mdx/react/layout/Flex.mdx

@@ -52,13 +52,13 @@ building layouts.
 #### Props
 
 `Flex` exposes
-[flex container style props](/getting-started/for-developers/resources/style-props/#flex) and `Box`
+[flex container style props](/get-started/for-developers/documentation/style-props/#flex) and `Box`
 style props.
 
 ### Flex.Item
 
 `Flex.Item` is a subcomponent of `Flex`. It is a `Box` component under the hood and exposes
-[flex item style props](/getting-started/for-developers/resources/style-props/#flex-item) that map
+[flex item style props](/get-started/for-developers/documentation/style-props/#flex-item) that map
 to CSS Flexbox Item properties. This provides greater control over how child components render in
 your layout.
 
@@ -73,5 +73,5 @@ your layout.
 #### Props
 
 `Flex.Item` exposes
-[flex item style props](/getting-started/for-developers/resources/style-props/#flex-item) and `Box`
+[flex item style props](/get-started/for-developers/documentation/style-props/#flex-item) and `Box`
 style props.

package/dist/mdx/react/layout/Grid.mdx

@@ -9,7 +9,7 @@ import GridLayoutInteractive from './examples/Grid/GridLayoutInteractive';
 two-dimensional layouts (rows and columns) with
 [CSS Grid](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids).
 
-Please refer to our [layout examples](/examples/layout/) for more examples of how to implement
+Please refer to our [layout examples](/examples-layouts--docs) for more examples of how to implement
 different layouts using `Grid`.
 
 ## Installation
@@ -96,13 +96,13 @@ layouts.
 #### Props
 
 `Grid` exposes
-[grid container style props](/getting-started/for-developers/resources/style-props/#grid) and `Box`
+[grid container style props](/get-started/for-developers/documentation/style-props/#grid) and `Box`
 style props.
 
 ### Grid.Item
 
 `Grid.Item` is a subcomponent of `Grid`. It is a `Box` component under the hood and exposes
-[grid item style props](/getting-started/for-developers/resources/style-props/#grid) that map to CSS
+[grid item style props](/get-started/for-developers/documentation/style-props/#grid) that map to CSS
 Grid Item properties. This provides greater control over how child components render in your layout.
 
 ```tsx

package/dist/mdx/react/layout/examples/Box/Basic.tsx

@@ -1,15 +1,22 @@
-import * as React from 'react';
 import {createComponent} from '@workday/canvas-kit-react/common';
 import {Box, BoxProps} from '@workday/canvas-kit-react/layout';
+import {createStyles, handleCsProp} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 interface CustomCardProps extends BoxProps {
   // custom Card props go here
 }
 
+const customCardStyles = createStyles({
+  borderRadius: system.shape.md,
+  padding: system.padding.md,
+  boxShadow: system.depth[1],
+});
+
 const CustomCard = createComponent('div')({
   displayName: 'CustomCard',
   Component: (props: CustomCardProps, ref, Element) => {
-    return <Box as={Element} ref={ref} borderRadius="m" depth={1} padding="m" {...props} />;
+    return <Box as={Element} ref={ref} {...handleCsProp(props, customCardStyles)} />;
   },
 });
 

package/dist/mdx/react/layout/examples/Flex/Basic.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+
 import {Flex} from '@workday/canvas-kit-react/layout';
 
 const baseStyles = {

package/dist/mdx/react/layout/examples/Grid/Basic.tsx

@@ -1,47 +1,53 @@
 import {Grid} from '@workday/canvas-kit-react/layout';
 import {Heading} from '@workday/canvas-kit-react/text';
+import {createStencil, createStyles, px2rem} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
-import {createStyles, px2rem} from '@workday/canvas-kit-styling';
 
 const containerStyles = createStyles({
   gridTemplateAreas:
     "'Header Header Header Header' 'SideBar BodyContent BodyContent BodyContent' 'Footer Footer Footer Footer'",
-  gridGap: system.space.x4,
+  gridGap: system.gap.md,
   gridTemplateColumns: '3fr 9fr',
   gridTemplateRows: `auto ${px2rem(300)} auto`,
 });
 
-const gridStyles = createStyles({
-  backgroundColor: system.color.bg.primary.default,
-  borderRadius: system.shape.x1,
-  boxShadow: system.depth[1],
-  padding: system.space.x4,
+const gridStyles = createStencil({
+  vars: {
+    gridArea: '',
+  },
+  base: ({gridArea}) => ({
+    backgroundColor: system.color.brand.accent.primary,
+    borderRadius: system.shape.sm,
+    boxShadow: system.depth[1],
+    padding: system.padding.md,
+    gridArea,
+  }),
 });
 
 const headingStyles = createStyles({
-  margin: system.space.zero,
-  ...system.type.heading.small,
+  ...system.type.heading.sm,
+  margin: '0',
 });
 
 export default () => {
   return (
     <Grid cs={containerStyles}>
-      <Grid as="header" gridArea="Header" cs={gridStyles}>
+      <Grid as="header" cs={gridStyles({gridArea: 'Header'})}>
         <Heading variant="inverse" size="small" cs={headingStyles}>
           Page Header
         </Heading>
       </Grid>
-      <Grid as="nav" gridArea="SideBar" cs={gridStyles}>
+      <Grid as="nav" cs={gridStyles({gridArea: 'SideBar'})}>
         <Heading variant="inverse" size="small" cs={headingStyles}>
           Navigation
         </Heading>
       </Grid>
-      <Grid as="main" gridArea="BodyContent" cs={gridStyles}>
+      <Grid as="main" cs={gridStyles({gridArea: 'BodyContent'})}>
         <Heading variant="inverse" size="small" cs={headingStyles}>
           Main Content
         </Heading>
       </Grid>
-      <Grid as="footer" gridArea="Footer" cs={gridStyles}>
+      <Grid as="footer" cs={gridStyles({gridArea: 'Footer'})}>
         <Heading variant="inverse" size="small" cs={headingStyles}>
           Page Footer
         </Heading>

package/dist/mdx/react/layout/examples/Grid/GridCard.tsx

@@ -1,40 +1,50 @@
 import * as React from 'react';
-import {Grid, Box} from '@workday/canvas-kit-react/layout';
+
 import {PrimaryButton, SecondaryButton} from '@workday/canvas-kit-react/button';
-import {type} from '@workday/canvas-kit-react/tokens';
+import {Box, Grid} from '@workday/canvas-kit-react/layout';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const h3Styles = createStyles({
+  ...system.type.body.lg,
+  margin: 0,
+  fontWeight: system.fontWeight.bold,
+});
 
 // temporary placeholder until type components are added to canvas-kit
-const H3 = props => (
-  <h3
-    style={{
-      ...type.levels.body.large,
-      margin: 0,
-      fontWeight: type.properties.fontWeights.bold,
-    }}
-    {...props}
-  />
+const H3 = (props: React.HTMLAttributes<HTMLHeadingElement>) => (
+  <h3 className={h3Styles} {...props} />
+);
+
+const bodyStyles = createStyles({
+  ...system.type.body.sm,
+  margin: 0,
+});
+
+const Body = (props: React.HTMLAttributes<HTMLParagraphElement>) => (
+  <p className={bodyStyles} {...props} />
 );
 
-const Body = props => <p style={{...type.levels.body.small, margin: 0}} {...props} />;
+const containerStyles = createStyles({
+  padding: system.padding.xl,
+  backgroundColor: system.color.surface.info.default,
+  borderRadius: system.shape.lg,
+  boxShadow: system.depth[1],
+  maxWidth: px2rem(600),
+  gridTemplate: 'auto / auto',
+  border: `${px2rem(1)} solid ${system.color.border.contrast.default}`,
+});
 
 export default () => {
   const [isComplete, setIsComplete] = React.useState(false);
   return (
-    <Grid
-      padding="m"
-      depth={1}
-      borderRadius="l"
-      border="solid 1px"
-      borderColor="soap400"
-      maxWidth={600}
-      gridTemplate="auto / auto"
-    >
+    <Grid cs={containerStyles}>
       <H3>Learn about Grid {isComplete && '🥳'}</H3>
-      <Box paddingY="s">
+      <Box cs={{paddingBlock: system.padding.md}}>
         <Body>Complete this task when you have a functional understanding of Grid.</Body>
       </Box>
-      <Grid gridTemplate="auto / 1fr auto" justifyItems="end">
-        <Box marginRight="xxs">
+      <Grid cs={{gridTemplate: 'auto / 1fr auto', justifyItems: 'end'}}>
+        <Box cs={{marginRight: system.gap.sm}}>
           <PrimaryButton onClick={() => setIsComplete(true)}>Complete</PrimaryButton>
         </Box>
         <SecondaryButton onClick={() => setIsComplete(false)}>Cancel</SecondaryButton>

package/dist/mdx/react/layout/examples/Grid/GridLayout.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+
 import {Box, Grid} from '@workday/canvas-kit-react/layout';
 
 const Cell = (props: {children: React.ReactNode}) => {

package/dist/mdx/react/layout/examples/Grid/GridLayoutInteractive.tsx

@@ -1,7 +1,7 @@
-import React, {useState, useEffect, useRef} from 'react';
-import {Grid} from '@workday/canvas-kit-react/layout';
+import React, {useEffect, useRef, useState} from 'react';
+
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
-// eslint-disable-next-line no-duplicate-imports
+import {Grid} from '@workday/canvas-kit-react/layout';
 import {
   arrowDownIcon,
   arrowLeftIcon,

package/dist/mdx/react/loading-dots/LoadingDots.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 RTL from './examples/RTL';
 import Accessible from './examples/Accessible';

package/dist/mdx/react/loading-dots/examples/Accessible.tsx

@@ -1,18 +1,19 @@
 import React from 'react';
-import {LoadingDots} from '@workday/canvas-kit-react/loading-dots';
-import {system} from '@workday/canvas-tokens-web';
-import {Flex} from '@workday/canvas-kit-react/layout';
+
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
-import {createStyles} from '@workday/canvas-kit-styling';
 import {AccessibleHide, AriaLiveRegion} from '@workday/canvas-kit-react/common';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {LoadingDots} from '@workday/canvas-kit-react/loading-dots';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 const styleOverrides = {
   parentContainer: createStyles({
-    gap: system.space.x4,
+    gap: system.gap.md,
   }),
   loadingStyles: createStyles({
-    backgroundColor: system.color.bg.muted.default,
-    padding: system.space.x3,
+    backgroundColor: system.color.accent.muted.default,
+    padding: system.padding.sm,
   }),
 };
 

package/dist/mdx/react/loading-dots/examples/Basic.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import {LoadingDots} from '@workday/canvas-kit-react/loading-dots';
 
 export default () => {