@workday/canvas-kit-docs 7.0.0-alpha.0-next.1 → 7.0.0-alpha.0-next.3

package/dist/mdx/preview-react/form-field/examples/Custom.tsx

@@ -45,7 +45,7 @@ export default () => {
 
   const model = useFormFieldModel({isRequired: true});
 
-  const layoutProps = useFormFieldOrientation('vertical')
+  const layoutProps = useFormFieldOrientation('vertical');
 
   return (
     <Stack {...layoutProps}>

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

@@ -1,38 +1,32 @@
-/** @jsx jsx */
 import * as React from 'react';
-import {jsx} from '@emotion/core';
 import {colors, space, type} from '@workday/canvas-kit-react/tokens';
 import {AccentIcon} from '@workday/canvas-kit-react/icon';
 import {rocketIcon} from '@workday/canvas-accent-icons-web';
 import {SidePanel, useSidePanel} from '@workday/canvas-kit-preview-react/side-panel';
-import {Flex} from '@workday/canvas-kit-labs-react/layout';
-import {useThemeRTL} from '@workday/canvas-kit-labs-react/common';
+import {Flex, HStack} from '@workday/canvas-kit-labs-react/layout';
+import {styled} from '@workday/canvas-kit-react/common';
+
+const StyledHeader = styled('h3')({
+  ...type.levels.body.large,
+  color: colors.licorice500,
+  fontWeight: type.properties.fontWeights.bold,
+});
+
+const StyledAccentIcon = styled(AccentIcon)({
+  marginRight: space.s,
+});
 
 export default () => {
   const {panelProps, labelProps} = useSidePanel();
 
-  const {themeRTL} = useThemeRTL();
-  const iconStyles = themeRTL({
-    marginRight: space.s,
-  });
-
   return (
-    <Flex height={320}>
+    <HStack spacing="s" height={320}>
       <SidePanel {...panelProps}>
         <Flex alignItems="center" paddingY="s" paddingX="xs">
-          <AccentIcon css={iconStyles} icon={rocketIcon} />
-          <h3
-            css={{
-              ...type.levels.body.large,
-              color: colors.licorice500,
-              fontWeight: type.properties.fontWeights.bold,
-            }}
-            {...labelProps}
-          >
-            Tasks Panel
-          </h3>
+          <StyledAccentIcon icon={rocketIcon} />
+          <StyledHeader {...labelProps}>Tasks Panel</StyledHeader>
         </Flex>
       </SidePanel>
-    </Flex>
+    </HStack>
   );
 };

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

@@ -1,6 +1,4 @@
-/** @jsx jsx */
 import * as React from 'react';
-import {jsx} from '@emotion/core';
 import {colors, type} from '@workday/canvas-kit-react/tokens';
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
 import {
@@ -9,12 +7,18 @@ import {
   SidePanelTransitionStates,
 } from '@workday/canvas-kit-preview-react/side-panel';
 import {Flex} from '@workday/canvas-kit-labs-react/layout';
-import {CanvasProvider} from '@workday/canvas-kit-react/common';
+import {CanvasProvider, styled} from '@workday/canvas-kit-react/common';
 import {AccentIcon} from '@workday/canvas-kit-react/icon';
 import {rocketIcon} from '@workday/canvas-accent-icons-web';
 // local helper hook for setting content direction;
 import {useDirection} from './useDirection';
 
+const StyledHeader = styled('h3')({
+  ...type.levels.body.large,
+  color: colors.licorice500,
+  fontWeight: type.properties.fontWeights.bold,
+});
+
 export default () => {
   const {direction, toggleDirection} = useDirection();
   const {expanded, panelProps, labelProps, controlProps} = useSidePanel();
@@ -32,16 +36,7 @@ export default () => {
               <Flex marginInlineEnd="s">
                 <AccentIcon icon={rocketIcon} />
               </Flex>
-              <h3
-                css={{
-                  ...type.levels.body.large,
-                  color: colors.licorice500,
-                  fontWeight: type.properties.fontWeights.bold,
-                }}
-                {...labelProps}
-              >
-                Tasks Panel
-              </h3>
+              <StyledHeader {...labelProps}>Tasks Panel</StyledHeader>
             </Flex>
           )}
         </SidePanel>

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

@@ -1,6 +1,4 @@
-/** @jsx jsx */
 import * as React from 'react';
-import {jsx} from '@emotion/core';
 import {
   SidePanel,
   useSidePanel,
@@ -9,6 +7,13 @@ import {
 import {Flex} from '@workday/canvas-kit-labs-react/layout';
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
 import {colors, type} from '@workday/canvas-kit-react/tokens';
+import {styled} from '@workday/canvas-kit-react/common';
+
+const StyledHeader = styled('h3')({
+  ...type.levels.body.large,
+  color: colors.licorice500,
+  fontWeight: type.properties.fontWeights.bold,
+});
 
 export default () => {
   const {expanded, panelProps, labelProps, controlProps} = useSidePanel({initialExpanded: false});
@@ -28,16 +33,7 @@ export default () => {
       >
         {panelState === 'expanded' && (
           <Flex alignItems="center" paddingY="s" paddingX="xs">
-            <h3
-              css={{
-                ...type.levels.body.large,
-                color: colors.licorice500,
-                fontWeight: type.properties.fontWeights.bold,
-              }}
-              {...labelProps}
-            >
-              Tasks Panel
-            </h3>
+            <StyledHeader {...labelProps}>Tasks Panel</StyledHeader>
           </Flex>
         )}
       </SidePanel>

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

@@ -1,6 +1,4 @@
-/** @jsx jsx */
 import * as React from 'react';
-import {jsx} from '@emotion/core';
 import {colors, type} from '@workday/canvas-kit-react/tokens';
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
 import {
@@ -8,42 +6,37 @@ import {
   useSidePanel,
   SidePanelTransitionStates,
 } from '@workday/canvas-kit-preview-react/side-panel';
-import {useThemeRTL} from '@workday/canvas-kit-labs-react/common';
 import {Flex} from '@workday/canvas-kit-labs-react/layout';
-import {CanvasProvider} from '@workday/canvas-kit-react/common';
+import {CanvasProvider, styled} from '@workday/canvas-kit-react/common';
 // local helper hook for setting content direction;
 import {useDirection} from './useDirection';
 
+const StyledHeader = styled('h3')({
+  ...type.levels.body.large,
+  color: colors.licorice500,
+  fontWeight: type.properties.fontWeights.bold,
+});
+
+const StyledSidePanel = styled(SidePanel)({
+  position: 'absolute',
+  right: 0,
+});
+
 const RightPanel = () => {
   const {expanded, panelProps, labelProps, controlProps} = useSidePanel();
   const [panelState, setPanelState] = React.useState<SidePanelTransitionStates>(
     expanded ? 'expanded' : 'collapsed'
   );
 
-  const {themeRTL} = useThemeRTL();
-  const panelStyles = themeRTL({
-    position: 'absolute',
-    right: 0,
-  });
-
   return (
-    <SidePanel {...panelProps} onStateTransition={setPanelState} origin="right" css={panelStyles}>
+    <StyledSidePanel {...panelProps} onStateTransition={setPanelState} origin="right">
       <SidePanel.ToggleButton {...controlProps} />
       {panelState === 'expanded' && (
         <Flex alignItems="center" justifyContent="flex-end" paddingY="s" paddingX="xs">
-          <h3
-            css={{
-              ...type.levels.body.large,
-              color: colors.licorice500,
-              fontWeight: type.properties.fontWeights.bold,
-            }}
-            {...labelProps}
-          >
-            Tasks Panel
-          </h3>
+          <StyledHeader {...labelProps}>Tasks Panel</StyledHeader>
         </Flex>
       )}
-    </SidePanel>
+    </StyledSidePanel>
   );
 };
 

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

@@ -1,6 +1,4 @@
-/** @jsx jsx */
 import * as React from 'react';
-import {jsx} from '@emotion/core';
 import {colors, type} from '@workday/canvas-kit-react/tokens';
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
 import {
@@ -9,10 +7,16 @@ import {
   SidePanelTransitionStates,
 } from '@workday/canvas-kit-preview-react/side-panel';
 import {Flex} from '@workday/canvas-kit-labs-react/layout';
-import {CanvasProvider} from '@workday/canvas-kit-react/common';
+import {CanvasProvider, styled} from '@workday/canvas-kit-react/common';
 // local helper hook for setting content direction;
 import {useDirection} from './useDirection';
 
+const StyledHeader = styled('h3')({
+  ...type.levels.body.large,
+  color: colors.licorice500,
+  fontWeight: type.properties.fontWeights.bold,
+});
+
 export default () => {
   const {direction, toggleDirection} = useDirection();
   const {expanded, panelProps, labelProps, controlProps} = useSidePanel();
@@ -27,16 +31,7 @@ export default () => {
           <SidePanel.ToggleButton {...controlProps} />
           {panelState === 'expanded' && (
             <Flex alignItems="center" paddingY="s" paddingX="xs">
-              <h3
-                css={{
-                  ...type.levels.body.large,
-                  color: colors.licorice500,
-                  fontWeight: type.properties.fontWeights.bold,
-                }}
-                {...labelProps}
-              >
-                Alternate Panel
-              </h3>
+              <StyledHeader {...labelProps}>Alternate Panel</StyledHeader>
             </Flex>
           )}
         </SidePanel>

package/dist/mdx/preview-react/text-area/examples/Alert.tsx

@@ -1,5 +1,6 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
-import { jsx } from '@emotion/core'
+import {jsx} from '@emotion/core';
 import React from 'react';
 import {TextArea} from '@workday/canvas-kit-preview-react/text-area';
 import {useThemedRing} from '@workday/canvas-kit-labs-react/common';
@@ -16,10 +17,15 @@ export default () => {
     value.length < 3 ? 'success' : value.length < 7 ? 'alert' : 'error'
   );
 
-  const hintColor = value.length < 3 ? colors.greenApple600 : value.length < 7 ? colors.cantaloupe600 : colors.cinnamon500
+  const hintColor =
+    value.length < 3
+      ? colors.greenApple600
+      : value.length < 7
+      ? colors.cantaloupe600
+      : colors.cinnamon500;
 
   return (
-    <TextArea orientation='vertical'>
+    <TextArea orientation="vertical">
       <TextArea.Label>Add a comment</TextArea.Label>
       <TextArea.Field css={alertStyles} onChange={handleChange} value={value} />
       <TextArea.Hint paddingTop={space.xxs}>

package/dist/mdx/preview-react/text-area/examples/Basic.tsx

@@ -9,7 +9,7 @@ export default () => {
   };
 
   return (
-    <TextArea orientation='vertical'>
+    <TextArea orientation="vertical">
       <TextArea.Label>Leave a review</TextArea.Label>
       <TextArea.Field onChange={handleChange} value={value} />
     </TextArea>

package/dist/mdx/preview-react/text-area/examples/Disabled.tsx

@@ -9,7 +9,7 @@ export default () => {
   };
 
   return (
-    <TextArea orientation='vertical'>
+    <TextArea orientation="vertical">
       <TextArea.Label>Leave a review</TextArea.Label>
       <TextArea.Field disabled onChange={handleChange} value={value} />
     </TextArea>

package/dist/mdx/preview-react/text-area/examples/Error.tsx

@@ -31,7 +31,7 @@ export default () => {
   };
 
   return (
-    <TextArea hasError={hasError} orientation='vertical'>
+    <TextArea hasError={hasError} orientation="vertical">
       <TextArea.Label>A three letter word</TextArea.Label>
       <TextArea.Field onChange={handleChange} value={value} />
       <TextArea.Hint paddingTop={space.xxs}>{hint}</TextArea.Hint>

package/dist/mdx/preview-react/text-area/examples/Grow.tsx

@@ -9,7 +9,7 @@ export default () => {
   };
 
   return (
-    <TextArea orientation='vertical' alignItems='stretch'>
+    <TextArea orientation="vertical" alignItems="stretch">
       <TextArea.Label>Leave a review</TextArea.Label>
       <TextArea.Field onChange={handleChange} value={value} />
     </TextArea>

package/dist/mdx/preview-react/text-area/examples/HiddenLabel.tsx

@@ -1,8 +1,10 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core'
 import React from 'react';
 import {TextArea} from '@workday/canvas-kit-preview-react/text-area';
-import { accessibleHide } from '@workday/canvas-kit-react/common';
+import {accessibleHide, styled} from '@workday/canvas-kit-react/common';
+
+const StyledTextAreaLabel = styled(TextArea.Label)({
+  ...accessibleHide,
+});
 
 export default () => {
   const [value, setValue] = React.useState('');
@@ -12,8 +14,8 @@ export default () => {
   };
 
   return (
-    <TextArea orientation='vertical' spacing='zero'>
-      <TextArea.Label css={{...accessibleHide}}>Email</TextArea.Label>
+    <TextArea orientation="vertical" spacing="zero">
+      <StyledTextAreaLabel>Email</StyledTextAreaLabel>
       <TextArea.Field onChange={handleChange} value={value} />
     </TextArea>
   );

package/dist/mdx/preview-react/text-area/examples/LabelPositionHorizontal.tsx

@@ -9,7 +9,7 @@ export default () => {
   };
 
   return (
-    <TextArea orientation='horizontal'>
+    <TextArea orientation="horizontal">
       <TextArea.Label>Leave a review</TextArea.Label>
       <TextArea.Field onChange={handleChange} value={value} />
     </TextArea>

package/dist/mdx/preview-react/text-area/examples/LabelPositionVertical.tsx

@@ -9,7 +9,7 @@ export default () => {
   };
 
   return (
-    <TextArea orientation='vertical' spacing='xxxs'>
+    <TextArea orientation="vertical" spacing="xxxs">
       <TextArea.Label>Leave a review</TextArea.Label>
       <TextArea.Field onChange={handleChange} value={value} />
     </TextArea>

package/dist/mdx/preview-react/text-area/examples/Placeholder.tsx

@@ -9,13 +9,9 @@ export default () => {
   };
 
   return (
-    <TextArea orientation='vertical'>
+    <TextArea orientation="vertical">
       <TextArea.Label>Leave a review</TextArea.Label>
-      <TextArea.Field
-        placeholder="Let us know how we did!"
-        onChange={handleChange}
-        value={value}
-      />
+      <TextArea.Field placeholder="Let us know how we did!" onChange={handleChange} value={value} />
     </TextArea>
   );
 };

package/dist/mdx/preview-react/text-area/examples/RefForwarding.tsx

@@ -13,12 +13,12 @@ export default () => {
   };
 
   const handleClick = () => {
-    changeFocus(ref.current)
+    changeFocus(ref.current);
   };
 
   return (
-    <VStack spacing='xxxs' alignItems='flex-start'>
-      <TextArea orientation='vertical'>
+    <VStack spacing="xxxs" alignItems="flex-start">
+      <TextArea orientation="vertical">
         <TextArea.Label>Leave a review</TextArea.Label>
         <TextArea.Field onChange={handleChange} value={value} ref={ref} />
       </TextArea>

package/dist/mdx/preview-react/text-area/examples/Required.tsx

@@ -9,7 +9,7 @@ export default () => {
   };
 
   return (
-    <TextArea isRequired={true} orientation='vertical'>
+    <TextArea isRequired={true} orientation="vertical">
       <TextArea.Label>Leave a review</TextArea.Label>
       <TextArea.Field onChange={handleChange} value={value} />
     </TextArea>

package/dist/mdx/preview-react/text-area/examples/ResizeConstraints.tsx

@@ -14,7 +14,7 @@ export default () => {
   };
 
   return (
-    <TextArea orientation='vertical'>
+    <TextArea orientation="vertical">
       <TextArea.Label>Leave a review</TextArea.Label>
       <StyledField onChange={handleChange} value={value} />
     </TextArea>

package/dist/mdx/preview-react/text-input/examples/Alert.tsx

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
 import {jsx} from '@emotion/core';
 import React from 'react';
@@ -17,14 +18,9 @@ export default () => {
   );
 
   return (
-    <TextInput orientation='vertical'>
+    <TextInput orientation="vertical">
       <TextInput.Label>Password</TextInput.Label>
-      <TextInput.Field
-        css={alertStyles}
-        onChange={handleChange}
-        value={value}
-        type="password"
-      />
+      <TextInput.Field css={alertStyles} onChange={handleChange} value={value} type="password" />
       <TextInput.Hint paddingTop={space.xxs}>
         <strong>Password Strength: </strong>
         {value.length < 3 ? (

package/dist/mdx/preview-react/text-input/examples/Basic.tsx

@@ -9,7 +9,7 @@ export default () => {
   };
 
   return (
-    <TextInput orientation='vertical'>
+    <TextInput orientation="vertical">
       <TextInput.Label>Email</TextInput.Label>
       <TextInput.Field onChange={handleChange} value={value} />
     </TextInput>

package/dist/mdx/preview-react/text-input/examples/Disabled.tsx

@@ -9,7 +9,7 @@ export default () => {
   };
 
   return (
-    <TextInput orientation='vertical'>
+    <TextInput orientation="vertical">
       <TextInput.Label>Email</TextInput.Label>
       <TextInput.Field onChange={handleChange} value={value} disabled />
     </TextInput>

package/dist/mdx/preview-react/text-input/examples/Error.tsx

@@ -31,7 +31,7 @@ export default () => {
   };
 
   return (
-    <TextInput hasError={hasError} orientation='vertical'>
+    <TextInput hasError={hasError} orientation="vertical">
       <TextInput.Label>A three letter word</TextInput.Label>
       <TextInput.Field onChange={handleChange} value={value} />
       <TextInput.Hint paddingTop={space.xxs}>{hint}</TextInput.Hint>

package/dist/mdx/preview-react/text-input/examples/Grow.tsx

@@ -9,7 +9,7 @@ export default () => {
   };
 
   return (
-    <TextInput orientation='vertical' alignItems='stretch'>
+    <TextInput orientation="vertical" alignItems="stretch">
       <TextInput.Label>Street Address</TextInput.Label>
       <TextInput.Field onChange={handleChange} value={value} />
     </TextInput>

package/dist/mdx/preview-react/text-input/examples/HiddenLabel.tsx

@@ -1,8 +1,10 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core'
 import React from 'react';
 import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
-import { accessibleHide } from '@workday/canvas-kit-react/common';
+import {accessibleHide, styled} from '@workday/canvas-kit-react/common';
+
+const StyledTextAreaLabel = styled(TextInput.Label)({
+  ...accessibleHide,
+});
 
 export default () => {
   const [value, setValue] = React.useState('');
@@ -12,8 +14,8 @@ export default () => {
   };
 
   return (
-    <TextInput orientation='vertical' spacing='zero'>
-      <TextInput.Label css={{...accessibleHide}}>Email</TextInput.Label>
+    <TextInput orientation="vertical" spacing="zero">
+      <StyledTextAreaLabel>Email</StyledTextAreaLabel>
       <TextInput.Field onChange={handleChange} value={value} />
     </TextInput>
   );

package/dist/mdx/preview-react/text-input/examples/LabelPositionHorizontal.tsx

@@ -9,7 +9,7 @@ export default () => {
   };
 
   return (
-    <TextInput orientation='horizontal'>
+    <TextInput orientation="horizontal">
       <TextInput.Label>Email</TextInput.Label>
       <TextInput.Field onChange={handleChange} value={value} />
     </TextInput>

package/dist/mdx/preview-react/text-input/examples/LabelPositionVertical.tsx

@@ -9,7 +9,7 @@ export default () => {
   };
 
   return (
-    <TextInput orientation='vertical' spacing='xxxs'>
+    <TextInput orientation="vertical" spacing="xxxs">
       <TextInput.Label>Email</TextInput.Label>
       <TextInput.Field onChange={handleChange} value={value} />
     </TextInput>

package/dist/mdx/preview-react/text-input/examples/LoginForm.tsx

@@ -48,9 +48,9 @@ export default () => {
 
   return (
     <form onSubmit={formik.handleSubmit} action=".">
-      <VStack spacing='xs' alignItems='flex-start'>
+      <VStack spacing="xs" alignItems="flex-start">
         <TextInput
-          orientation='vertical'
+          orientation="vertical"
           isRequired={true}
           hasError={formik.touched.email && !!formik.errors.email}
         >
@@ -66,7 +66,7 @@ export default () => {
           <TextInput.Hint>{formik.touched.email && formik.errors.email}</TextInput.Hint>
         </TextInput>
         <TextInput
-          orientation='vertical'
+          orientation="vertical"
           id={passwordId}
           hasError={formik.touched.password && !!formik.errors.password}
           isRequired={true}

package/dist/mdx/preview-react/text-input/examples/Password.tsx

@@ -9,7 +9,7 @@ export default () => {
   };
 
   return (
-    <TextInput orientation='vertical'>
+    <TextInput orientation="vertical">
       <TextInput.Label>Password</TextInput.Label>
       <TextInput.Field onChange={handleChange} value={value} type="password" />
     </TextInput>

package/dist/mdx/preview-react/text-input/examples/Placeholder.tsx

@@ -9,7 +9,7 @@ export default () => {
   };
 
   return (
-    <TextInput orientation='vertical'>
+    <TextInput orientation="vertical">
       <TextInput.Label>Email</TextInput.Label>
       <TextInput.Field onChange={handleChange} value={value} placeholder="user@email.com" />
     </TextInput>

package/dist/mdx/preview-react/text-input/examples/RefForwarding.tsx

@@ -13,12 +13,12 @@ export default () => {
   };
 
   const handleClick = () => {
-    changeFocus(ref.current)
+    changeFocus(ref.current);
   };
 
   return (
-    <VStack spacing='xxxs' alignItems='flex-start'>
-      <TextInput orientation='vertical'>
+    <VStack spacing="xxxs" alignItems="flex-start">
+      <TextInput orientation="vertical">
         <TextInput.Label>Email</TextInput.Label>
         <TextInput.Field onChange={handleChange} value={value} ref={ref} />
       </TextInput>

package/dist/mdx/preview-react/text-input/examples/Required.tsx

@@ -9,7 +9,7 @@ export default () => {
   };
 
   return (
-    <TextInput isRequired={true} orientation='vertical'>
+    <TextInput isRequired={true} orientation="vertical">
       <TextInput.Label>Email</TextInput.Label>
       <TextInput.Field onChange={handleChange} value={value} />
     </TextInput>

package/dist/mdx/preview-react/text-input/examples/ThemedAlert.tsx

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
 import {jsx} from '@emotion/core';
 import React from 'react';
@@ -37,7 +38,7 @@ const AlertInput = () => {
   const alertStyles = useThemedRing('alert');
 
   return (
-    <TextInput orientation='vertical'>
+    <TextInput orientation="vertical">
       <TextInput.Label>Email</TextInput.Label>
       <TextInput.Field css={alertStyles} onChange={handleChange} value={value} />
       <TextInput.Hint paddingTop={space.xxs}>Please enter a valid email.</TextInput.Hint>

package/dist/mdx/preview-react/text-input/examples/ThemedError.tsx

@@ -25,12 +25,10 @@ export default () => {
 
   return (
     <CanvasProvider theme={theme}>
-      <TextInput hasError={!value} isRequired={true} orientation='vertical'>
+      <TextInput hasError={!value} isRequired={true} orientation="vertical">
         <TextInput.Label>Email</TextInput.Label>
         <TextInput.Field onChange={handleChange} value={value} />
-        <TextInput.Hint paddingTop={space.xxs}>
-          {!value && 'Please enter an email.'}
-        </TextInput.Hint>
+        <TextInput.Hint paddingTop={space.xxs}>{!value && 'Please enter an email.'}</TextInput.Hint>
       </TextInput>
     </CanvasProvider>
   );

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

@@ -1,24 +1,21 @@
-/** @jsx jsx */
-import {jsx} from '@emotion/core';
 import React from 'react';
-
-import {CSSProperties} from '@workday/canvas-kit-react/tokens';
-import {Box, useThemeRTL} from '@workday/canvas-kit-labs-react/common';
+import {Box} from '@workday/canvas-kit-labs-react/common';
 import {Banner} from '@workday/canvas-kit-react/banner';
+import {styled} from '@workday/canvas-kit-react/common';
 
-const styles: CSSProperties = {
+const StyledBanner = styled(Banner)({
   position: 'absolute',
   right: 0,
-};
+});
 
 export default () => {
   return (
     <Box height={64}>
-      <Banner hasError={true} isSticky={true} css={styles}>
+      <StyledBanner hasError={true} isSticky={true}>
         <Banner.Icon />
         <Banner.Label>3 Errors</Banner.Label>
         <Banner.ActionText />
-      </Banner>
+      </StyledBanner>
     </Box>
   );
 };

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

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
 import {jsx, keyframes} from '@emotion/core';
 import React from 'react';

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

@@ -1,37 +1,35 @@
-/** @jsx jsx */
-import {jsx} from '@emotion/core';
 import React from 'react';
 
-import {CSSProperties} from '@workday/canvas-kit-react/tokens';
 import {Box, useThemeRTL} from '@workday/canvas-kit-labs-react/common';
 import {
   CanvasProvider,
   ContentDirection,
   PartialEmotionCanvasTheme,
+  styled,
 } from '@workday/canvas-kit-react/common';
 import {Banner} from '@workday/canvas-kit-react/banner';
 
-const styles: CSSProperties = {
-  position: 'absolute',
-  left: 0,
-};
-
 const theme: PartialEmotionCanvasTheme = {
   canvas: {
     direction: ContentDirection.RTL,
   },
 };
 
+const StyledStickyBanner = styled(Banner)({
+  position: 'absolute',
+  left: 0,
+});
+
 export default () => {
   const {themeRTL} = useThemeRTL();
   return (
     <CanvasProvider theme={theme}>
       <Box height={64}>
-        <Banner isSticky={true} css={styles}>
+        <StyledStickyBanner isSticky={true}>
           <Banner.Icon />
           <Banner.Label>3 אזהרות</Banner.Label>
           <Banner.ActionText />
-        </Banner>
+        </StyledStickyBanner>
       </Box>
     </CanvasProvider>
   );

package/dist/mdx/react/button/icon-button/examples/Inverse.tsx

@@ -1,20 +1,17 @@
-/** @jsx jsx */
-import {jsx} from '@emotion/core';
 import React from 'react';
 
-import {space, colors, borderRadius} from '@workday/canvas-kit-react/tokens';
+import {colors} from '@workday/canvas-kit-react/tokens';
 import {IconButton} from '@workday/canvas-kit-react/button';
 import {activityStreamIcon} from '@workday/canvas-system-icons-web';
-
-const blueBackground = {
-  backgroundColor: colors.blueberry400,
-  borderRadius: borderRadius.m,
-  padding: space.xxs,
-  display: 'inline-block',
-};
+import {Flex} from '@workday/canvas-kit-labs-react/layout';
 
 export default () => (
-  <div css={blueBackground}>
+  <Flex
+    display="inline-flex"
+    backgroundColor={colors.blackPepper400}
+    borderRadius="m"
+    padding="xxs"
+  >
     <IconButton icon={activityStreamIcon} aria-label="Activity Stream" variant="inverse" />
-  </div>
+  </Flex>
 );

package/dist/mdx/react/button/icon-button/examples/InverseFilled.tsx

@@ -1,20 +1,17 @@
-/** @jsx jsx */
-import {jsx} from '@emotion/core';
 import React from 'react';
 
-import {space, colors, borderRadius} from '@workday/canvas-kit-react/tokens';
+import {colors} from '@workday/canvas-kit-react/tokens';
 import {IconButton} from '@workday/canvas-kit-react/button';
 import {activityStreamIcon} from '@workday/canvas-system-icons-web';
-
-const blueBackground = {
-  backgroundColor: colors.blueberry400,
-  borderRadius: borderRadius.m,
-  padding: space.xxs,
-  display: 'inline-block',
-};
+import {Flex} from '@workday/canvas-kit-labs-react/layout';
 
 export default () => (
-  <div css={blueBackground}>
+  <Flex
+    display="inline-flex"
+    backgroundColor={colors.blackPepper400}
+    borderRadius="m"
+    padding="xxs"
+  >
     <IconButton icon={activityStreamIcon} aria-label="Activity Stream" variant="inverseFilled" />
-  </div>
+  </Flex>
 );

package/dist/mdx/react/skeleton/examples/Simulation.tsx

@@ -1,6 +1,5 @@
-/** @jsx jsx */
 import React from 'react';
-import {jsx, keyframes} from '@emotion/core';
+import {keyframes} from '@emotion/core';
 
 import {
   Card,
@@ -9,6 +8,7 @@ import {
   SecondaryButton,
   SystemIconCircle,
   TextInput,
+  styled,
 } from '@workday/canvas-kit-react';
 
 import {Box, Flex} from '@workday/canvas-kit-labs-react';
@@ -16,6 +16,7 @@ import {Box, Flex} from '@workday/canvas-kit-labs-react';
 import {Skeleton} from '@workday/canvas-kit-react/skeleton';
 import {borderRadius, space, type} from '@workday/canvas-kit-react/tokens';
 import {patternIcon} from '@workday/canvas-system-icons-web';
+import {StyledType} from '@workday/canvas-kit-react/common';
 
 const fadeOut = keyframes`
   from {
@@ -27,6 +28,10 @@ const fadeOut = keyframes`
   }
 `;
 
+const StyledSimulation = styled(Box)<StyledType>({
+  pointerEvents: 'none',
+});
+
 export default () => {
   const [loading, setLoading] = React.useState(true);
   const [loadTime, setLoadTime] = React.useState('3000');
@@ -96,16 +101,12 @@ export default () => {
               </Box>
             )}
 
-            <Box
+            <StyledSimulation
               position="absolute"
               top={0}
               left={0}
               width="100%"
-              css={{
-                pointerEvents: 'none',
-                animation: !loading ? `${fadeOut} 150ms ease-out` : undefined,
-                animationFillMode: !loading ? 'forwards' : undefined,
-              }}
+              animation={!loading ? `${fadeOut} 150ms ease-out forwards` : undefined}
             >
               <Skeleton>
                 <Flex alignItems="center">
@@ -120,7 +121,7 @@ export default () => {
                 </Flex>
                 <Skeleton.Text lineCount={3} />
               </Skeleton>
-            </Box>
+            </StyledSimulation>
           </Box>
         </Card.Body>
       </Card>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "7.0.0-alpha.0-next.1+57471fa0",
+  "version": "7.0.0-alpha.0-next.3+14a81c7e",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -50,7 +50,7 @@
   ],
   "dependencies": {
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-react": "^7.0.0-alpha.0-next.1+57471fa0"
+    "@workday/canvas-kit-react": "^7.0.0-alpha.0-next.3+14a81c7e"
   },
   "devDependencies": {
     "fs-extra": "^10.0.0",
@@ -58,5 +58,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "^3.8.3"
   },
-  "gitHead": "57471fa0c73534126f9ef9a18203d49c5834d21e"
+  "gitHead": "14a81c7ef3deb9efaf67fa3ec9cc2d2a3161b00b"
 }