@workday/canvas-kit-react 13.0.4 → 14.0.0-alpha.1123-next.0

package/breadcrumbs/lib/Breadcrumbs.tsx

@@ -8,8 +8,9 @@ import {BreadcrumbsItem} from './BreadcrumbsItem';
 import {BreadcrumbsLink} from './BreadcrumbsLink';
 import {BreadcrumbsCurrentItem} from './BreadcrumbsCurrentItem';
 import {BreadcrumbsMenu} from './BreadcrumbsMenu';
+import {CSProps, handleCsProp} from '@workday/canvas-kit-styling';
 
-export interface BreadcrumbsProps {
+export interface BreadcrumbsProps extends CSProps {
   /**
    * The accessibility label for the nav element.
    * It's required to be provided by a11y guidance.
@@ -164,7 +165,7 @@ export const Breadcrumbs = createContainer('nav')({
 })<BreadcrumbsProps>(({children, ...elemProps}, _, model) => {
   return (
     <Menu model={model.menu}>
-      <nav role="navigation" {...elemProps}>
+      <nav role="navigation" {...handleCsProp(elemProps)}>
         {children}
       </nav>
     </Menu>

package/breadcrumbs/lib/BreadcrumbsCurrentItem.tsx

@@ -10,13 +10,31 @@ import {
   useListItemRegister,
   useOverflowListItemMeasure,
 } from '@workday/canvas-kit-react/collection';
-import {useBreadcrumbsModel} from './hooks/useBreadcrumbsModel';
 import {Text, TextProps} from '@workday/canvas-kit-react/text';
+import {system} from '@workday/canvas-tokens-web';
+import {createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
+import {useBreadcrumbsModel} from './hooks/useBreadcrumbsModel';
 
 export interface BreadcrumbsCurrentItemProps extends TextProps {
   tooltipProps?: OverflowTooltipProps;
 }
 
+export const breadcrumbsCurrentItemStencil = createStencil({
+  vars: {
+    maxWidth: '',
+  },
+  base: ({maxWidth}) => ({
+    ...system.type.subtext.large,
+    fontWeight: system.fontWeight.medium,
+    color: system.color.text.default,
+    display: 'inline-block',
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+    maxWidth,
+  }),
+});
+
 export const useBreadcrumbsItem = composeHooks(
   createElemPropsHook(useBreadcrumbsModel)((_model: any, ref: any, elemProps) => {
     const {localRef} = useLocalRef(useForkRef(ref));
@@ -47,14 +65,12 @@ export const BreadcrumbsCurrentItem = createSubcomponent('li')({
       <OverflowTooltip {...tooltipProps}>
         <Text
           as={Element}
-          typeLevel="subtext.large"
-          fontWeight="medium"
-          display="inline-block"
-          maxWidth={maxWidth}
-          whiteSpace="nowrap"
-          textOverflow="ellipsis"
-          overflow="hidden"
-          {...elemProps}
+          {...handleCsProp(
+            elemProps,
+            breadcrumbsCurrentItemStencil({
+              maxWidth: typeof maxWidth === 'number' ? px2rem(maxWidth) : maxWidth,
+            })
+          )}
         >
           {children}
         </Text>

package/breadcrumbs/lib/BreadcrumbsItem.tsx

@@ -1,13 +1,15 @@
 import * as React from 'react';
-import {composeHooks, createSubcomponent, useIsRTL} from '@workday/canvas-kit-react/common';
+import {composeHooks, createSubcomponent} from '@workday/canvas-kit-react/common';
 import {
   useListItemRegister,
   useOverflowListItemMeasure,
 } from '@workday/canvas-kit-react/collection';
-import {Flex, FlexProps} from '@workday/canvas-kit-react/layout';
-import {SystemIcon} from '@workday/canvas-kit-react/icon';
+import {FlexProps, mergeStyles} from '@workday/canvas-kit-react/layout';
+import {SystemIcon, systemIconStencil} from '@workday/canvas-kit-react/icon';
+
 import {chevronRightSmallIcon} from '@workday/canvas-system-icons-web';
-import {colors, space} from '@workday/canvas-kit-react/tokens';
+import {system} from '@workday/canvas-tokens-web';
+import {createStencil, px2rem} from '@workday/canvas-kit-styling';
 import {useBreadcrumbsModel} from './hooks/useBreadcrumbsModel';
 import {BreadcrumbsLink} from './BreadcrumbsLink';
 
@@ -28,6 +30,30 @@ export interface BreadcrumbsItemProps extends FlexProps {
   'data-id'?: string;
 }
 
+
+export const breadcrumbsItemStencil = createStencil({
+  parts: {
+    chevronRightIcon: 'breadcrumbs-item-chevron-right-icon',
+  },
+  base: ({chevronRightIconPart}) => ({
+    alignItems: 'center',
+    display: 'inline-flex',
+    whiteSpace: 'nowrap',
+    [systemIconStencil.vars.size]: px2rem(20),
+    [systemIconStencil.vars.color]: system.color.icon.default,
+    [chevronRightIconPart]: {
+      height: system.space.x8,
+      width: system.space.x8,
+      justifyContent: 'center',
+      alignItems: 'center',
+      display: 'inline-flex',
+      ':dir(rtl)': {
+        transform: 'scaleX(-1)',
+      },
+    },
+  }),
+});
+
 export const useBreadcrumbsItem = composeHooks(useOverflowListItemMeasure, useListItemRegister);
 
 export const BreadcrumbsItem = createSubcomponent('li')({
@@ -39,19 +65,13 @@ export const BreadcrumbsItem = createSubcomponent('li')({
   },
 })<BreadcrumbsItemProps>(({children, ...elemProps}, Element) => {
   return (
-    <Flex as={Element} alignItems="center" whiteSpace="nowrap" {...elemProps}>
+    <Element {...mergeStyles(elemProps, breadcrumbsItemStencil())}>
       {children}
       <SystemIcon
         icon={chevronRightSmallIcon}
-        color={colors.licorice200}
-        colorHover={colors.licorice200}
-        size={20}
-        height={space.l}
-        width={space.l}
-        shouldMirror={useIsRTL()}
-        cs={{justifyContent: 'center', alignItems: 'center', display: 'inline-flex'}}
+        {...breadcrumbsItemStencil.parts.chevronRightIcon}
         aria-hidden
       />
-    </Flex>
+    </Element>
   );
 });

package/breadcrumbs/lib/BreadcrumbsLink.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
-import {styled, createComponent, ellipsisStyles} from '@workday/canvas-kit-react/common';
-import {Hyperlink} from '@workday/canvas-kit-react/button';
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {Hyperlink, HyperlinkProps} from '@workday/canvas-kit-react/button';
 import {OverflowTooltip, OverflowTooltipProps} from '@workday/canvas-kit-react/tooltip';
-import {type} from '@workday/canvas-kit-react/tokens';
+import {system} from '@workday/canvas-tokens-web';
+import {createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
 
-export interface BreadcrumbsLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+export interface BreadcrumbsLinkProps extends HyperlinkProps {
   /**
    * The href url of the anchor tag
    */
@@ -18,34 +18,42 @@ export interface BreadcrumbsLinkProps extends React.AnchorHTMLAttributes<HTMLAnc
   tooltipProps?: OverflowTooltipProps | {};
 }
 
-type StyledLinkProps = Pick<BreadcrumbsLinkProps, 'maxWidth' | 'href'>;
-
-const {color, ...subtextLargeStyles} = type.levels.subtext.large;
-
-const StyledLink = styled(Hyperlink)(
-  {
-    ...subtextLargeStyles,
+export const breadcrumbsLinkStencil = createStencil({
+  vars: {
+    maxWidth: '',
   },
-  ({maxWidth}: StyledLinkProps) => ({
-    ...ellipsisStyles,
+  base: ({maxWidth}) => ({
+    ...system.type.subtext.large,
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
     maxWidth,
-  })
-);
+  }),
+});
 
 export const BreadcrumbsLink = createComponent('a')({
   displayName: 'Breadcrumbs.Link',
-  Component: ({
-    maxWidth = 350,
-    href,
-    tooltipProps = {},
-    children,
-    ...props
-  }: BreadcrumbsLinkProps) => {
+  Component: (
+    {maxWidth = 350, href, tooltipProps = {}, children, ...elemProps}: BreadcrumbsLinkProps,
+    ref,
+    Element
+  ) => {
     return (
       <OverflowTooltip {...tooltipProps}>
-        <StyledLink maxWidth={maxWidth} href={href} role="link" {...props}>
+        <Hyperlink
+          href={href}
+          ref={ref}
+          as={Element}
+          role="link"
+          {...handleCsProp(
+            elemProps,
+            breadcrumbsLinkStencil({
+              maxWidth: typeof maxWidth === 'number' ? px2rem(maxWidth) : maxWidth,
+            })
+          )}
+        >
           {children}
-        </StyledLink>
+        </Hyperlink>
       </OverflowTooltip>
     );
   },

package/breadcrumbs/lib/BreadcrumbsList.tsx

@@ -3,7 +3,8 @@ import * as React from 'react';
 import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {useOverflowListMeasure, useListRenderItems} from '@workday/canvas-kit-react/collection';
-import {space} from '@workday/canvas-kit-react/tokens';
+import {system} from '@workday/canvas-tokens-web';
+import {createStencil, handleCsProp} from '@workday/canvas-kit-styling';
 import {useBreadcrumbsModel} from './hooks/useBreadcrumbsModel';
 
 export interface BreadcrumbsListProps<T = any>
@@ -21,6 +22,18 @@ export interface BreadcrumbsListProps<T = any>
   children: ((item: T, index: number) => React.ReactNode) | React.ReactNode;
 }
 
+export const breadcrumbsListStencil = createStencil({
+  base: {
+    padding: 0,
+    margin: 0,
+    display: 'inline-flex',
+    alignItems: 'center',
+    minHeight: system.space.x10,
+    listStyle: 'none',
+    width: '100%',
+  },
+});
+
 export const BreadcrumbsList = createSubcomponent('ul')({
   displayName: 'Breadcrumbs.List',
   modelHook: useBreadcrumbsModel,
@@ -30,21 +43,10 @@ export const BreadcrumbsList = createSubcomponent('ul')({
   const splitIndex = items.length - 2;
 
   return (
-    <Flex
-      as={Element}
-      padding="zero"
-      margin="zero"
-      display="inline-flex"
-      alignItems="center"
-      minHeight={space.xl}
-      listStyle="none"
-      role="list"
-      width="100%"
-      {...elemProps}
-    >
+    <Element role="list" {...handleCsProp(elemProps, breadcrumbsListStencil())}>
       {items.length ? items.slice(0, splitIndex) : items}
       {overflowButton}
       {items.length ? items.slice(splitIndex, items.length) : null}
-    </Flex>
+    </Element>
   );
 });

package/breadcrumbs/lib/BreadcrumbsMenu.tsx

@@ -1,20 +1,39 @@
 import {createContainer, createComponent, ExtractProps} from '@workday/canvas-kit-react/common';
 import {Menu, useMenuModel} from '@workday/canvas-kit-react/menu';
+import {createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
+
+export const breadcrumbsMenuItemStencil = createStencil({
+  base: {
+    textDecoration: 'none',
+  },
+});
 
 export const BreadcrumbsMenuItem = createComponent('a')({
   displayName: 'Breadcrumbs.Menu.Item',
   Component: (props: ExtractProps<typeof Menu.Item, never>, ref, Element) => {
-    return <Menu.Item as={Element} style={{textDecoration: 'none'}} {...props} ref={ref} />;
+    return (
+      <Menu.Item as={Element} {...handleCsProp(props, breadcrumbsMenuItemStencil())} ref={ref} />
+    );
   },
 });
 
+export const breadcrumbsMenuCardStencil = createStencil({
+  base: {
+    width: px2rem(280),
+    maxWidth: px2rem(280),
+    maxHeight: px2rem(296),
+  },
+});
+
+export const BreadcrumbsMenuCard = (elemProps: ExtractProps<typeof Menu.Card, never>) => (
+  <Menu.Card {...handleCsProp(elemProps, breadcrumbsMenuCardStencil())} />
+);
+
 export const BreadcrumbsMenu = createContainer()({
   displayName: 'Breadcrumbs.Menu',
   modelHook: useMenuModel,
   subComponents: {
-    Card: (elemProps: ExtractProps<typeof Menu.Card, never>) => (
-      <Menu.Card width={280} maxWidth={280} maxHeight={296} {...elemProps} />
-    ),
+    Card: BreadcrumbsMenuCard,
     List: Menu.List,
     Item: BreadcrumbsMenuItem,
     Divider: Menu.Divider,

package/breadcrumbs/lib/BreadcrumbsOverflowButton.tsx

@@ -1,18 +1,18 @@
 import {chevronRightSmallIcon, relatedActionsIcon} from '@workday/canvas-system-icons-web';
-import {colors, space} from '@workday/canvas-kit-react/tokens';
-import {SystemIcon} from '@workday/canvas-kit-react/icon';
-import {Flex, FlexProps} from '@workday/canvas-kit-react/layout';
+import {SystemIcon, systemIconStencil} from '@workday/canvas-kit-react/icon';
+import {FlexProps} from '@workday/canvas-kit-react/layout';
 import {
   composeHooks,
   createElemPropsHook,
   createSubcomponent,
   subModelHook,
-  useIsRTL,
 } from '@workday/canvas-kit-react/common';
 import {useOverflowListTarget} from '@workday/canvas-kit-react/collection';
 import {useMenuTarget} from '@workday/canvas-kit-react/menu';
-import {useBreadcrumbsModel} from './hooks/useBreadcrumbsModel';
 import {TertiaryButton, TertiaryButtonProps} from '@workday/canvas-kit-react/button';
+import {system} from '@workday/canvas-tokens-web';
+import {createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
+import {useBreadcrumbsModel} from './hooks/useBreadcrumbsModel';
 
 export interface BreadcrumbsOverflowButtonProps extends TertiaryButtonProps {
   'aria-label': string;
@@ -24,6 +24,29 @@ export interface BreadcrumbsOverflowButtonProps extends TertiaryButtonProps {
   style?: FlexProps;
 }
 
+export const breadcrumbsOverflowButtonStencil = createStencil({
+  parts: {
+    overflowButton: 'breadcrumbs-overflow-button',
+    chevronRightIcon: 'breadcrumbs-overflow-button-chevron-right-icon',
+  },
+  base: ({chevronRightIconPart}) => ({
+    alignItems: 'center',
+    display: 'flex',
+    [systemIconStencil.vars.color]: system.color.icon.default,
+    [systemIconStencil.vars.size]: px2rem(20),
+    [chevronRightIconPart]: {
+      height: system.space.x8,
+      width: system.space.x8,
+      justifyContent: 'center',
+      alignItems: 'center',
+      display: 'inline-flex',
+      ':dir(rtl)': {
+        transform: 'scaleX(-1)',
+      },
+    },
+  }),
+});
+
 export const useBreadcrumbsOverflowButton = composeHooks(
   createElemPropsHook(useBreadcrumbsModel)(() => ({
     'aria-haspopup': true,
@@ -39,19 +62,18 @@ export const BreadcrumbsOverflowButton = createSubcomponent('button')({
   elemPropsHook: useBreadcrumbsOverflowButton,
 })<BreadcrumbsOverflowButtonProps>(({style, ...elemProps}, Element) => {
   return (
-    <Flex as="li" alignItems="center" {...style}>
-      <TertiaryButton as={Element} icon={relatedActionsIcon} {...elemProps} />
+    <li {...breadcrumbsOverflowButtonStencil()} {...style}>
+      <TertiaryButton
+        as={Element}
+        icon={relatedActionsIcon}
+        {...breadcrumbsOverflowButtonStencil.parts.overflowButton}
+        {...handleCsProp(elemProps)}
+      />
       <SystemIcon
         icon={chevronRightSmallIcon}
-        color={colors.licorice200}
-        colorHover={colors.licorice200}
-        size={20}
-        height={space.l}
-        width={space.l}
-        shouldMirror={useIsRTL()}
-        cs={{justifyContent: 'center', alignItems: 'center', display: 'inline-flex'}}
+        {...breadcrumbsOverflowButtonStencil.parts.chevronRightIcon}
         aria-hidden
       />
-    </Flex>
+    </li>
   );
 });

package/dist/commonjs/action-bar/lib/ActionBarList.js

@@ -9,7 +9,7 @@ const collection_1 = require("@workday/canvas-kit-react/collection");
 const useActionBarModel_1 = require("./useActionBarModel");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 exports.actionBarListStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "yjvv31", styles: "box-sizing:border-box;display:flex;box-shadow:var(--cnvs-sys-depth-1);gap:var(--cnvs-sys-space-x4);background:var(--cnvs-sys-color-bg-default);border-block-start:solid 1px var(--cnvs-sys-color-border-divider);padding:var(--cnvs-sys-space-x4) var(--cnvs-sys-space-x10) ;position:fixed;inset-block-end:0;inset-inline-start:0;inset-inline-end:0;@media (max-width: 767.5px){padding:var(--cnvs-sys-space-x4);> *{flex:1;}}" }
+    base: { name: "a69w31", styles: "box-sizing:border-box;display:flex;box-shadow:var(--cnvs-sys-depth-1);gap:var(--cnvs-sys-space-x4);background:var(--cnvs-sys-color-bg-default);border-block-start:solid 1px var(--cnvs-sys-color-border-divider);padding:var(--cnvs-sys-space-x4) var(--cnvs-sys-space-x10) ;position:fixed;inset-block-end:0;inset-inline-start:0;inset-inline-end:0;@media (max-width: 767.5px){padding:var(--cnvs-sys-space-x4);> *{flex:1;}}" }
 }, "action-bar-list-887890");
 exports.useActionBarList = collection_1.useOverflowListMeasure;
 exports.ActionBarList = (0, common_1.createSubcomponent)('div')({

package/dist/commonjs/action-bar/lib/ActionBarOverflowButton.js

@@ -11,7 +11,7 @@ const button_1 = require("@workday/canvas-kit-react/button");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const layout_1 = require("@workday/canvas-kit-react/layout");
 exports.actionBarOverflowButtonStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "yjvv32", styles: "box-sizing:border-box;flex:0;" }
+    base: { name: "a69w32", styles: "box-sizing:border-box;flex:0;" }
 }, "action-bar-overflow-button-0a24d9");
 exports.useActionBarOverflowButton = (0, common_1.composeHooks)((0, common_1.createElemPropsHook)(useActionBarModel_1.useActionBarModel)(() => ({
     'aria-haspopup': true,

package/dist/commonjs/avatar/lib/Avatar.js

@@ -49,34 +49,34 @@ exports.avatarStencil = (0, canvas_kit_styling_1.createStencil)({
         icon: 'avatar-icon',
         image: 'avatar-image',
     },
-    base: { name: "yjvv33", styles: "box-sizing:border-box;background:var(--cnvs-sys-color-bg-caution-default);position:relative;display:flex;align-items:center;justify-content:center;padding:0;border:0;overflow:hidden;cursor:default;pointer-events:none;border-radius:var(--cnvs-sys-shape-round);width:var(--size-avatar-0e1ae7);height:var(--size-avatar-0e1ae7);&:focus-visible, &.focus{outline:none;box-shadow:0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}:is(button){cursor:pointer;pointer-events:auto;}&:disabled, &.disabled{opacity:var(--cnvs-sys-opacity-disabled);}[data-part=\"avatar-icon\"]{transition:opacity 150ms linear;display:flex;align-items:center;justify-content:center;--size-svg-728c60:calc(var(--size-avatar-0e1ae7) * 0.625);opacity:1;}[data-part=\"avatar-image\"]{position:absolute;width:100%;height:100%;border-radius:999px;transition:opacity 150ms linear;opacity:0;}" },
+    base: { name: "a69w33", styles: "box-sizing:border-box;background:var(--cnvs-sys-color-bg-caution-default);position:relative;display:flex;align-items:center;justify-content:center;padding:0;border:0;overflow:hidden;cursor:default;pointer-events:none;border-radius:var(--cnvs-sys-shape-round);width:var(--size-avatar-0e1ae7);height:var(--size-avatar-0e1ae7);&:focus-visible, &.focus{outline:none;box-shadow:0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}:is(button){cursor:pointer;pointer-events:auto;}&:disabled, &.disabled{opacity:var(--cnvs-sys-opacity-disabled);}[data-part=\"avatar-icon\"]{transition:opacity 150ms linear;display:flex;align-items:center;justify-content:center;--size-svg-728c60:calc(var(--size-avatar-0e1ae7) * 0.625);opacity:1;}[data-part=\"avatar-image\"]{position:absolute;width:100%;height:100%;border-radius:999px;transition:opacity 150ms linear;opacity:0;}" },
     modifiers: {
         variant: {
-            light: { name: "yjvv34", styles: "background-color:var(--cnvs-sys-color-bg-alt-default);[data-part=\"avatar-icon\"]{--color-system-icon-99ce3e:var(--cnvs-sys-color-fg-default);}" },
-            dark: { name: "yjvv35", styles: "background-color:var(--cnvs-sys-color-bg-primary-default);[data-part=\"avatar-icon\"]{--color-system-icon-99ce3e:var(--cnvs-sys-color-fg-inverse);}" }
+            light: { name: "a69w34", styles: "background-color:var(--cnvs-sys-color-bg-alt-default);[data-part=\"avatar-icon\"]{--color-system-icon-99ce3e:var(--cnvs-sys-color-fg-default);}" },
+            dark: { name: "a69w35", styles: "background-color:var(--cnvs-sys-color-bg-primary-default);[data-part=\"avatar-icon\"]{--color-system-icon-99ce3e:var(--cnvs-sys-color-fg-inverse);}" }
         },
         size: {
-            extraSmall: { name: "yjvv36", styles: "width:var(--cnvs-sys-space-x4);height:var(--cnvs-sys-space-x4);[data-part=\"avatar-icon\"]{--size-svg-728c60:calc(var(--cnvs-sys-space-x4) * 0.625);}" },
-            small: { name: "yjvv37", styles: "width:var(--cnvs-sys-space-x6);height:var(--cnvs-sys-space-x6);[data-part=\"avatar-icon\"]{--size-svg-728c60:calc(var(--cnvs-sys-space-x6) * 0.625);}" },
-            medium: { name: "yjvv38", styles: "width:var(--cnvs-sys-space-x8);height:var(--cnvs-sys-space-x8);[data-part=\"avatar-icon\"]{--size-svg-728c60:calc(var(--cnvs-sys-space-x8) * 0.625);}" },
-            large: { name: "yjvv39", styles: "width:var(--cnvs-sys-space-x10);height:var(--cnvs-sys-space-x10);[data-part=\"avatar-icon\"]{--size-svg-728c60:calc(var(--cnvs-sys-space-x10) * 0.625);}" },
-            extraLarge: { name: "yjvv3a", styles: "width:var(--cnvs-sys-space-x16);height:var(--cnvs-sys-space-x16);[data-part=\"avatar-icon\"]{--size-svg-728c60:calc(var(--cnvs-sys-space-x16) * 0.625);}" },
-            extraExtraLarge: { name: "yjvv3b", styles: "width:calc(var(--cnvs-sys-space-x10) * 3);height:calc(var(--cnvs-sys-space-x10) * 3);[data-part=\"avatar-icon\"]{--size-svg-728c60:calc(calc(var(--cnvs-sys-space-x10) * 3) * 0.625);}" }
+            extraSmall: { name: "a69w36", styles: "width:var(--cnvs-sys-space-x4);height:var(--cnvs-sys-space-x4);[data-part=\"avatar-icon\"]{--size-svg-728c60:calc(var(--cnvs-sys-space-x4) * 0.625);}" },
+            small: { name: "a69w37", styles: "width:var(--cnvs-sys-space-x6);height:var(--cnvs-sys-space-x6);[data-part=\"avatar-icon\"]{--size-svg-728c60:calc(var(--cnvs-sys-space-x6) * 0.625);}" },
+            medium: { name: "a69w38", styles: "width:var(--cnvs-sys-space-x8);height:var(--cnvs-sys-space-x8);[data-part=\"avatar-icon\"]{--size-svg-728c60:calc(var(--cnvs-sys-space-x8) * 0.625);}" },
+            large: { name: "a69w39", styles: "width:var(--cnvs-sys-space-x10);height:var(--cnvs-sys-space-x10);[data-part=\"avatar-icon\"]{--size-svg-728c60:calc(var(--cnvs-sys-space-x10) * 0.625);}" },
+            extraLarge: { name: "a69w3a", styles: "width:var(--cnvs-sys-space-x16);height:var(--cnvs-sys-space-x16);[data-part=\"avatar-icon\"]{--size-svg-728c60:calc(var(--cnvs-sys-space-x16) * 0.625);}" },
+            extraExtraLarge: { name: "a69w3b", styles: "width:calc(var(--cnvs-sys-space-x10) * 3);height:calc(var(--cnvs-sys-space-x10) * 3);[data-part=\"avatar-icon\"]{--size-svg-728c60:calc(calc(var(--cnvs-sys-space-x10) * 3) * 0.625);}" }
         },
         objectFit: {
-            contain: { name: "yjvv3c", styles: "[data-part=\"avatar-image\"]{object-fit:contain;}" },
-            fill: { name: "yjvv3d", styles: "[data-part=\"avatar-image\"]{object-fit:fill;}" },
-            cover: { name: "yjvv3e", styles: "[data-part=\"avatar-image\"]{object-fit:cover;}" },
-            ['scale-down']: { name: "yjvv3f", styles: "[data-part=\"avatar-image\"]{object-fit:scale-down;}" },
-            none: { name: "yjvv3g", styles: "[data-part=\"avatar-image\"]{object-fit:none;}" },
-            ['-moz-initial']: { name: "yjvv3h", styles: "[data-part=\"avatar-image\"]{object-fit:-moz-initial;}" },
-            ['initial']: { name: "yjvv3i", styles: "[data-part=\"avatar-image\"]{object-fit:initial;}" },
-            ['inherit']: { name: "yjvv3j", styles: "[data-part=\"avatar-image\"]{object-fit:inherit;}" },
-            ['revert']: { name: "yjvv3k", styles: "[data-part=\"avatar-image\"]{object-fit:revert;}" },
-            ['unset']: { name: "yjvv3l", styles: "[data-part=\"avatar-image\"]{object-fit:unset;}" }
+            contain: { name: "a69w3c", styles: "[data-part=\"avatar-image\"]{object-fit:contain;}" },
+            fill: { name: "a69w3d", styles: "[data-part=\"avatar-image\"]{object-fit:fill;}" },
+            cover: { name: "a69w3e", styles: "[data-part=\"avatar-image\"]{object-fit:cover;}" },
+            ['scale-down']: { name: "a69w3f", styles: "[data-part=\"avatar-image\"]{object-fit:scale-down;}" },
+            none: { name: "a69w3g", styles: "[data-part=\"avatar-image\"]{object-fit:none;}" },
+            ['-moz-initial']: { name: "a69w3h", styles: "[data-part=\"avatar-image\"]{object-fit:-moz-initial;}" },
+            ['initial']: { name: "a69w3i", styles: "[data-part=\"avatar-image\"]{object-fit:initial;}" },
+            ['inherit']: { name: "a69w3j", styles: "[data-part=\"avatar-image\"]{object-fit:inherit;}" },
+            ['revert']: { name: "a69w3k", styles: "[data-part=\"avatar-image\"]{object-fit:revert;}" },
+            ['unset']: { name: "a69w3l", styles: "[data-part=\"avatar-image\"]{object-fit:unset;}" }
         },
         isImageLoaded: {
-            true: { name: "yjvv3m", styles: "[data-part=\"avatar-icon\"]{opacity:0;}[data-part=\"avatar-image\"]{opacity:1;}" }
+            true: { name: "a69w3m", styles: "[data-part=\"avatar-icon\"]{opacity:0;}[data-part=\"avatar-image\"]{opacity:1;}" }
         }
     },
     defaultModifiers: {

package/dist/commonjs/badge/lib/CountBadge.js

@@ -5,14 +5,14 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const common_1 = require("@workday/canvas-kit-react/common");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
-const grow = (0, canvas_kit_styling_1.keyframes)({ name: "yjvv3n", styles: "from{transform:scale(0.85);}to{transform:scale(1.0);}" });
+const grow = (0, canvas_kit_styling_1.keyframes)({ name: "a69w3n", styles: "from{transform:scale(0.85);}to{transform:scale(1.0);}" });
 // .cnvs-count-badge
 const countBadgeStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "yjvv3o", styles: "box-sizing:border-box;align-items:center;animation:animation-yjvv3n 0.2s ease;background:var(--cnvs-sys-color-static-red-default);border-radius:var(--cnvs-sys-shape-round);color:var(--cnvs-sys-color-text-inverse);display:inline-flex;font-family:var(--cnvs-sys-font-family-default);font-size:var(--cnvs-sys-font-size-subtext-medium);font-weight:var(--cnvs-sys-font-weight-bold);height:1.25rem;justify-content:center;line-height:1.25rem;min-width:1.25rem;padding:0 0.40625rem;text-shadow:0 0 0.0625rem rgba(0,0,0, 0.35);" },
+    base: { name: "a69w3o", styles: "box-sizing:border-box;align-items:center;animation:animation-a69w3n 0.2s ease;background:var(--cnvs-sys-color-static-red-default);border-radius:var(--cnvs-sys-shape-round);color:var(--cnvs-sys-color-text-inverse);display:inline-flex;font-family:var(--cnvs-sys-font-family-default);font-size:var(--cnvs-sys-font-size-subtext-medium);font-weight:var(--cnvs-sys-font-weight-bold);height:1.25rem;justify-content:center;line-height:1.25rem;min-width:1.25rem;padding:0 0.40625rem;text-shadow:0 0 0.0625rem rgba(0,0,0, 0.35);" },
     modifiers: {
         variant: {
             // .cnvs-count-badge--variant-inverse
-            inverse: { name: "yjvv3p", styles: "background:var(--cnvs-sys-color-bg-default);box-shadow:0 0.0625rem 0.125rem rgba(0,0,0, 0.25);color:var(--cnvs-sys-color-text-primary-default);text-shadow:none;" }
+            inverse: { name: "a69w3p", styles: "background:var(--cnvs-sys-color-bg-default);box-shadow:0 0.0625rem 0.125rem rgba(0,0,0, 0.25);color:var(--cnvs-sys-color-text-primary-default);text-shadow:none;" }
         }
     }
 }, "count-badge-4b6f6d");

package/dist/commonjs/banner/lib/Banner.js

@@ -12,15 +12,15 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const icon_1 = require("@workday/canvas-kit-react/icon");
 exports.bannerStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "yjvv3u", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default), Helvetica Neue, Helvetica, Arial, sans-serif;font-weight:var(--cnvs-sys-font-weight-medium);line-height:var(--cnvs-sys-line-height-subtext-large);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);padding:var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x4);border:0;display:flex;align-items:center;text-align:left;border-start-start-radius:var(--cnvs-sys-shape-x1);border-start-end-radius:var(--cnvs-sys-shape-x1);border-end-start-radius:var(--cnvs-sys-shape-x1);border-end-end-radius:var(--cnvs-sys-shape-x1);cursor:pointer;transition:background-color 120ms;outline:var(--cnvs-sys-space-x1) solid transparent;&:focus-visible, &.focus{outline:var(--cnvs-sys-shape-x1) double transparent;box-shadow:0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}" },
+    base: { name: "a69w3u", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default), Helvetica Neue, Helvetica, Arial, sans-serif;font-weight:var(--cnvs-sys-font-weight-medium);line-height:var(--cnvs-sys-line-height-subtext-large);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);padding:var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x4);border:0;display:flex;align-items:center;text-align:left;border-start-start-radius:var(--cnvs-sys-shape-x1);border-start-end-radius:var(--cnvs-sys-shape-x1);border-end-start-radius:var(--cnvs-sys-shape-x1);border-end-end-radius:var(--cnvs-sys-shape-x1);cursor:pointer;transition:background-color 120ms;outline:var(--cnvs-sys-space-x1) solid transparent;&:focus-visible, &.focus{outline:var(--cnvs-sys-shape-x1) double transparent;box-shadow:0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}" },
     modifiers: {
         hasErrors: {
-            true: { name: "yjvv3v", styles: "background-color:var(--cnvs-brand-error-base);color:var(--cnvs-brand-error-accent);&:hover, &.hover{background:var(--cnvs-brand-error-dark);}& [data-part=\"exclamation-circle-icon\"]{--accentColor-system-icon-99ce3e:var(--cnvs-brand-error-accent);--color-system-icon-99ce3e:var(--cnvs-brand-error-accent);--backgroundColor-system-icon-99ce3e:none;}" },
-            false: { name: "yjvv3w", styles: "background-color:var(--cnvs-brand-alert-base);color:var(--cnvs-sys-color-fg-contrast-default);&:hover, &.hover{background:var(--cnvs-brand-alert-dark);}& [data-part=\"exclamation-triangle-icon\"]{--accentColor-system-icon-99ce3e:var(--cnvs-sys-color-fg-contrast-default);--color-system-icon-99ce3e:var(--cnvs-sys-color-fg-contrast-default);--backgroundColor-system-icon-99ce3e:none;}" }
+            true: { name: "a69w3v", styles: "background-color:var(--cnvs-brand-error-base);color:var(--cnvs-brand-error-accent);&:hover, &.hover{background:var(--cnvs-brand-error-dark);}& [data-part=\"exclamation-circle-icon\"]{--accentColor-system-icon-99ce3e:var(--cnvs-brand-error-accent);--color-system-icon-99ce3e:var(--cnvs-brand-error-accent);--backgroundColor-system-icon-99ce3e:none;}" },
+            false: { name: "a69w3w", styles: "background-color:var(--cnvs-brand-alert-base);color:var(--cnvs-sys-color-fg-contrast-default);&:hover, &.hover{background:var(--cnvs-brand-alert-dark);}& [data-part=\"exclamation-triangle-icon\"]{--accentColor-system-icon-99ce3e:var(--cnvs-sys-color-fg-contrast-default);--color-system-icon-99ce3e:var(--cnvs-sys-color-fg-contrast-default);--backgroundColor-system-icon-99ce3e:none;}" }
         },
         isSticky: {
-            true: { name: "yjvv3x", styles: "width:13.875rem;border-start-end-radius:0;border-end-end-radius:0;" },
-            false: { name: "yjvv3y", styles: "width:20.5rem;" }
+            true: { name: "a69w3x", styles: "width:13.875rem;border-start-end-radius:0;border-end-end-radius:0;" },
+            false: { name: "a69w3y", styles: "width:20.5rem;" }
         }
     }
 }, "banner-4eaf8d");

package/dist/commonjs/banner/lib/BannerActionText.js

@@ -7,10 +7,10 @@ const layout_1 = require("@workday/canvas-kit-react/layout");
 const hooks_1 = require("./hooks");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 exports.actionBarTextStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "yjvv3s", styles: "box-sizing:border-box;text-decoration:underline;display:inline;" },
+    base: { name: "a69w3s", styles: "box-sizing:border-box;text-decoration:underline;display:inline;" },
     modifiers: {
         isSticky: {
-            true: { name: "yjvv3t", styles: "display:none;" }
+            true: { name: "a69w3t", styles: "display:none;" }
         }
     }
 }, "action-bar-text-c1912f");

package/dist/commonjs/banner/lib/BannerIcon.js

@@ -8,7 +8,7 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const hooks_1 = require("./hooks");
 exports.bannerIconStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "yjvv3q", styles: "box-sizing:border-box;margin-inline-end:var(--cnvs-sys-space-x3);" }
+    base: { name: "a69w3q", styles: "box-sizing:border-box;margin-inline-end:var(--cnvs-sys-space-x3);" }
 }, "banner-icon-12b0fa");
 exports.BannerIcon = (0, common_1.createSubcomponent)('span')({
     displayName: 'Banner.Icon',

package/dist/commonjs/banner/lib/BannerLabel.js

@@ -7,7 +7,7 @@ const layout_1 = require("@workday/canvas-kit-react/layout");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const hooks_1 = require("./hooks");
 exports.bannerLabelStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "yjvv3r", styles: "box-sizing:border-box;display:flex;flex:1 1 0%;" }
+    base: { name: "a69w3r", styles: "box-sizing:border-box;display:flex;flex:1 1 0%;" }
 }, "banner-label-416ec4");
 exports.BannerLabel = (0, common_1.createSubcomponent)('div')({
     displayName: 'Banner.Label',