@workday/canvas-kit-react 12.6.25 → 12.6.27

package/banner/lib/Banner.tsx

@@ -4,7 +4,7 @@ import {jsx} from '@emotion/react';
 import * as React from 'react';
 
 import {borderRadius, CSSProperties, space, type} from '@workday/canvas-kit-react/tokens';
-import {createContainer, ExtractProps, focusRing, useIsRTL} from '@workday/canvas-kit-react/common';
+import {createContainer, ExtractProps, useIsRTL} from '@workday/canvas-kit-react/common';
 import {Flex} from '@workday/canvas-kit-react/layout';
 
 import {useBannerModel, useThemedPalette} from './hooks';
@@ -28,7 +28,9 @@ const styles: CSSProperties = {
   outline: `${system.space.x1} solid transparent`,
   '&:focus-visible, &.focus': {
     outline: `${px2rem(4)} double transparent`,
-    ...focusRing({separation: 2}),
+    // using `focusRing` in support doesn't work for components that use `styled` function because we changed the type to be `CSSObjectWithVars`. Changing this to use `boxShadow` works in support for non stencil components.
+    boxShadow:
+      '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))',
   },
 };
 

package/button/lib/ToolbarDropdownButton.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import {colors, space, borderRadius} from '@workday/canvas-kit-react/tokens';
 import {
-  focusRing,
   useTheme,
   Themeable,
   EmotionCanvasTheme,
@@ -13,7 +12,6 @@ import {ButtonColors} from './types';
 import {BaseButton} from './BaseButton';
 import {chevronDownSmallIcon} from '@workday/canvas-system-icons-web';
 import {ToolbarIconButtonProps} from './ToolbarIconButton';
-import {brand} from '@workday/canvas-tokens-web';
 
 export interface ToolbarDropdownButtonProps
   extends Omit<ToolbarIconButtonProps, 'toggled' | 'onToggleChange'>,
@@ -40,12 +38,8 @@ const StyledToolbarDropdownButton = styled(BaseButton)<StyledType & ToolbarDropd
     width: 18, // decrease the space between a custom icon and the chevron per design
   },
   '&:focus-visible, &.focus': {
-    ...focusRing({
-      width: 2,
-      separation: 0,
-      innerColor: 'transparent',
-      outerColor: brand.common.focusOutline,
-    }),
+    // using `focusRing` in support doesn't work for components that use `styled` function because we changed the type to be `CSSObjectWithVars`. Changing this to use `boxShadow` works in support for non stencil components.
+    boxShadow: '0 0 0 0px transparent,0 0 0 2px var(--cnvs-brand-common-focus-outline)',
   },
 });
 

package/button/lib/ToolbarIconButton.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import {borderRadius, colors, space} from '@workday/canvas-kit-react/tokens';
 import {
-  focusRing,
   useTheme,
   Themeable,
   EmotionCanvasTheme,
@@ -12,7 +11,6 @@ import {
 import {ButtonColors} from './types';
 import {BaseButton} from './BaseButton';
 import {TertiaryButtonProps} from './TertiaryButton';
-import {brand} from '@workday/canvas-tokens-web';
 
 export interface ToolbarIconButtonProps
   extends Omit<TertiaryButtonProps, 'size' | 'variant'>,
@@ -29,12 +27,8 @@ const StyledToolbarIconButton = styled(BaseButton)<StyledType & ToolbarIconButto
     height: 20,
   },
   '&:focus-visible, &.focus': {
-    ...focusRing({
-      width: 2,
-      separation: 0,
-      innerColor: 'transparent',
-      outerColor: brand.common.focusOutline,
-    }),
+    // using `focusRing` in support doesn't work for components that use `styled` function because we changed the type to be `CSSObjectWithVars`. Changing this to use `boxShadow` works in support for non stencil components.
+    boxShadow: '0 0 0 0px transparent,0 0 0 2px var(--cnvs-brand-common-focus-outline)',
   },
 });
 

package/common/lib/styles/errorRing.ts

@@ -2,8 +2,12 @@ import {EmotionCanvasTheme} from '../theming/index';
 import {ErrorType} from '../types';
 import {CSSObject} from '@emotion/styled';
 import {colors, inputColors} from '@workday/canvas-kit-react/tokens';
+
 import chroma from 'chroma-js';
 
+// Use a type that works with both new and old styling systems
+type CSSReturnType = CSSObject & Record<string, any>;
+
 const isAccessible = (foreground: string, background: string = colors.frenchVanilla100) => {
   return chroma.contrast(foreground, background) >= 3;
 };
@@ -40,7 +44,7 @@ export function getErrorColors(error?: ErrorType, theme?: EmotionCanvasTheme) {
   }
 }
 
-export function errorRing(error?: ErrorType, theme?: EmotionCanvasTheme): CSSObject {
+export function errorRing(error?: ErrorType, theme?: EmotionCanvasTheme): CSSReturnType {
   if (error !== ErrorType.Error && error !== ErrorType.Alert) {
     return {};
   }

package/common/lib/styles/focusRing.ts

@@ -1,5 +1,4 @@
-import {CSSObject} from '@emotion/react';
-import {cssVar} from '@workday/canvas-kit-styling';
+import {cssVar, CSSObjectWithVars} from '@workday/canvas-kit-styling';
 import {base, brand} from '@workday/canvas-tokens-web';
 
 interface FocusRingOptions {
@@ -24,7 +23,7 @@ function calculateFocusRing({
   innerColor,
   outerColor,
 }: Required<Omit<FocusRingOptions, 'memoize' | 'inset'>> &
-  Pick<FocusRingOptions, 'inset'>): CSSObject {
+  Pick<FocusRingOptions, 'inset'>): CSSObjectWithVars {
   let boxShadow, innerWidth, outerWidth;
   if (innerColor && innerColor.startsWith('--')) {
     // eslint-disable-next-line no-param-reassign
@@ -71,7 +70,7 @@ function calculateFocusRing({
  * @param innerShadowColor Allows the user to specify the inner shadow color
  * @param outerShadowColor Allows the user to specify the outer shadow color
  *
- * @returns {CSSObject} the css object for the focus ring style
+ * @returns {CSSObjectWithVars} the css object for the focus ring style
  */
 
 /**
@@ -79,9 +78,9 @@ function calculateFocusRing({
  * By default, this mixin will create a 2px focus ring tightly wrapped
  * to the container (no whitespace).
  *
- * @returns {CSSObject} the css object for the focus ring style
+ * @returns {CSSObjectWithVars} the css object for the focus ring style
  */
-export function focusRing(options: FocusRingOptions = {}, theme?: any): CSSObject {
+export function focusRing(options: FocusRingOptions = {}, theme?: any): CSSObjectWithVars {
   const {
     width = 2,
     separation = 0,

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

@@ -48,35 +48,35 @@ exports.avatarStencil = (0, canvas_kit_styling_1.createStencil)({
         icon: 'avatar-icon',
         image: 'avatar-image',
     },
-    base: { name: "o1ob2y", 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;border-radius:var(--cnvs-sys-shape-round);width:var(--size-avatar-69cee0);height:var(--size-avatar-69cee0);&:focus-visible:not([disabled]), &.focus:not([disabled]){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;}& > [data-part=\"avatar-icon\"]{transition:opacity 150ms linear;display:flex;align-items:center;justify-content:center;--size-svg-a30d66:calc(var(--size-avatar-69cee0) * 0.625);}& > [data-part=\"avatar-image\"]{position:absolute;width:100%;height:100%;border-radius:999px;transition:opacity 150ms linear;}" },
+    base: { name: "lx882y", 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;border-radius:var(--cnvs-sys-shape-round);width:var(--size-avatar-69cee0);height:var(--size-avatar-69cee0);&:focus-visible:not([disabled]), &.focus:not([disabled]){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;}& > [data-part=\"avatar-icon\"]{transition:opacity 150ms linear;display:flex;align-items:center;justify-content:center;--size-svg-a30d66:calc(var(--size-avatar-69cee0) * 0.625);}& > [data-part=\"avatar-image\"]{position:absolute;width:100%;height:100%;border-radius:999px;transition:opacity 150ms linear;}" },
     modifiers: {
         variant: {
-            light: { name: "o1ob2z", styles: "background-color:var(--cnvs-sys-color-bg-alt-default);[data-part=\"avatar-icon\"]{--color-system-icon-212f69:var(--cnvs-sys-color-fg-default);}" },
-            dark: { name: "o1ob30", styles: "background-color:var(--cnvs-sys-color-bg-primary-default);[data-part=\"avatar-icon\"]{--color-system-icon-212f69:var(--cnvs-sys-color-fg-inverse);}" }
+            light: { name: "lx882z", styles: "background-color:var(--cnvs-sys-color-bg-alt-default);[data-part=\"avatar-icon\"]{--color-system-icon-212f69:var(--cnvs-sys-color-fg-default);}" },
+            dark: { name: "lx8830", styles: "background-color:var(--cnvs-sys-color-bg-primary-default);[data-part=\"avatar-icon\"]{--color-system-icon-212f69:var(--cnvs-sys-color-fg-inverse);}" }
         },
         size: {
-            extraSmall: { name: "o1ob31", styles: "width:var(--cnvs-sys-space-x4);height:var(--cnvs-sys-space-x4);[data-part=\"avatar-icon\"]{--size-svg-a30d66:calc(var(--cnvs-sys-space-x4) * 0.625);}" },
-            small: { name: "o1ob32", styles: "width:var(--cnvs-sys-space-x6);height:var(--cnvs-sys-space-x6);[data-part=\"avatar-icon\"]{--size-svg-a30d66:calc(var(--cnvs-sys-space-x6) * 0.625);}" },
-            medium: { name: "o1ob33", styles: "width:var(--cnvs-sys-space-x8);height:var(--cnvs-sys-space-x8);[data-part=\"avatar-icon\"]{--size-svg-a30d66:calc(var(--cnvs-sys-space-x8) * 0.625);}" },
-            large: { name: "o1ob34", styles: "width:var(--cnvs-sys-space-x10);height:var(--cnvs-sys-space-x10);[data-part=\"avatar-icon\"]{--size-svg-a30d66:calc(var(--cnvs-sys-space-x10) * 0.625);}" },
-            extraLarge: { name: "o1ob35", styles: "width:var(--cnvs-sys-space-x16);height:var(--cnvs-sys-space-x16);[data-part=\"avatar-icon\"]{--size-svg-a30d66:calc(var(--cnvs-sys-space-x16) * 0.625);}" },
-            extraExtraLarge: { name: "o1ob36", styles: "width:calc(var(--cnvs-sys-space-x10) * 3);height:calc(var(--cnvs-sys-space-x10) * 3);[data-part=\"avatar-icon\"]{--size-svg-a30d66:calc(calc(var(--cnvs-sys-space-x10) * 3) * 0.625);}" }
+            extraSmall: { name: "lx8831", styles: "width:var(--cnvs-sys-space-x4);height:var(--cnvs-sys-space-x4);[data-part=\"avatar-icon\"]{--size-svg-a30d66:calc(var(--cnvs-sys-space-x4) * 0.625);}" },
+            small: { name: "lx8832", styles: "width:var(--cnvs-sys-space-x6);height:var(--cnvs-sys-space-x6);[data-part=\"avatar-icon\"]{--size-svg-a30d66:calc(var(--cnvs-sys-space-x6) * 0.625);}" },
+            medium: { name: "lx8833", styles: "width:var(--cnvs-sys-space-x8);height:var(--cnvs-sys-space-x8);[data-part=\"avatar-icon\"]{--size-svg-a30d66:calc(var(--cnvs-sys-space-x8) * 0.625);}" },
+            large: { name: "lx8834", styles: "width:var(--cnvs-sys-space-x10);height:var(--cnvs-sys-space-x10);[data-part=\"avatar-icon\"]{--size-svg-a30d66:calc(var(--cnvs-sys-space-x10) * 0.625);}" },
+            extraLarge: { name: "lx8835", styles: "width:var(--cnvs-sys-space-x16);height:var(--cnvs-sys-space-x16);[data-part=\"avatar-icon\"]{--size-svg-a30d66:calc(var(--cnvs-sys-space-x16) * 0.625);}" },
+            extraExtraLarge: { name: "lx8836", styles: "width:calc(var(--cnvs-sys-space-x10) * 3);height:calc(var(--cnvs-sys-space-x10) * 3);[data-part=\"avatar-icon\"]{--size-svg-a30d66:calc(calc(var(--cnvs-sys-space-x10) * 3) * 0.625);}" }
         },
         objectFit: {
-            contain: { name: "o1ob37", styles: "[data-part=\"avatar-image\"]{object-fit:contain;}" },
-            fill: { name: "o1ob38", styles: "[data-part=\"avatar-image\"]{object-fit:fill;}" },
-            cover: { name: "o1ob39", styles: "[data-part=\"avatar-image\"]{object-fit:cover;}" },
-            ['scale-down']: { name: "o1ob3a", styles: "[data-part=\"avatar-image\"]{object-fit:scale-down;}" },
-            none: { name: "o1ob3b", styles: "[data-part=\"avatar-image\"]{object-fit:none;}" },
-            ['-moz-initial']: { name: "o1ob3c", styles: "[data-part=\"avatar-image\"]{object-fit:-moz-initial;}" },
-            ['initial']: { name: "o1ob3d", styles: "[data-part=\"avatar-image\"]{object-fit:initial;}" },
-            ['inherit']: { name: "o1ob3e", styles: "[data-part=\"avatar-image\"]{object-fit:inherit;}" },
-            ['revert']: { name: "o1ob3f", styles: "[data-part=\"avatar-image\"]{object-fit:revert;}" },
-            ['unset']: { name: "o1ob3g", styles: "[data-part=\"avatar-image\"]{object-fit:unset;}" }
+            contain: { name: "lx8837", styles: "[data-part=\"avatar-image\"]{object-fit:contain;}" },
+            fill: { name: "lx8838", styles: "[data-part=\"avatar-image\"]{object-fit:fill;}" },
+            cover: { name: "lx8839", styles: "[data-part=\"avatar-image\"]{object-fit:cover;}" },
+            ['scale-down']: { name: "lx883a", styles: "[data-part=\"avatar-image\"]{object-fit:scale-down;}" },
+            none: { name: "lx883b", styles: "[data-part=\"avatar-image\"]{object-fit:none;}" },
+            ['-moz-initial']: { name: "lx883c", styles: "[data-part=\"avatar-image\"]{object-fit:-moz-initial;}" },
+            ['initial']: { name: "lx883d", styles: "[data-part=\"avatar-image\"]{object-fit:initial;}" },
+            ['inherit']: { name: "lx883e", styles: "[data-part=\"avatar-image\"]{object-fit:inherit;}" },
+            ['revert']: { name: "lx883f", styles: "[data-part=\"avatar-image\"]{object-fit:revert;}" },
+            ['unset']: { name: "lx883g", styles: "[data-part=\"avatar-image\"]{object-fit:unset;}" }
         },
         isImageLoaded: {
-            true: { name: "o1ob3h", styles: "[data-part=\"avatar-icon\"]{opacity:0;}[data-part=\"avatar-image\"]{opacity:1;}" },
-            false: { name: "o1ob3i", styles: "[data-part=\"avatar-icon\"]{opacity:1;}[data-part=\"avatar-image\"]{opacity:0;}" }
+            true: { name: "lx883h", styles: "[data-part=\"avatar-icon\"]{opacity:0;}[data-part=\"avatar-image\"]{opacity:1;}" },
+            false: { name: "lx883i", styles: "[data-part=\"avatar-icon\"]{opacity:1;}[data-part=\"avatar-image\"]{opacity:0;}" }
         }
     },
     defaultModifiers: {

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

@@ -28,14 +28,14 @@ const React = __importStar(require("react"));
 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: "o1ob3j", styles: "from{transform:scale(0.85);}to{transform:scale(1.0);}" });
+const grow = (0, canvas_kit_styling_1.keyframes)({ name: "lx883j", styles: "from{transform:scale(0.85);}to{transform:scale(1.0);}" });
 // .cnvs-count-badge
 const countBadgeStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "o1ob3k", styles: "box-sizing:border-box;align-items:center;animation:animation-o1ob3j 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: "lx883k", styles: "box-sizing:border-box;align-items:center;animation:animation-lx883j 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: "o1ob3l", 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: "lx883l", 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-183e28");

package/dist/commonjs/banner/lib/Banner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../../banner/lib/Banner.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAkB,YAAY,EAAsB,MAAM,kCAAkC,CAAC;AACpG,OAAO,EAAC,IAAI,EAAC,MAAM,kCAAkC,CAAC;AAUtD,MAAM,WAAW,WAAY,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC;IACnE;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAYD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,eAAO,MAAM,MAAM;;;;;;;;;;;;IAIf;;;;;;;OAOG;;;;;;;;;IAEH;;;;;;;OAOG;;;;;;;;;IAEH;;;;;;;;OAQG;;;;;;;;;CA4CL,CAAC"}
+{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../../banner/lib/Banner.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAkB,YAAY,EAAW,MAAM,kCAAkC,CAAC;AACzF,OAAO,EAAC,IAAI,EAAC,MAAM,kCAAkC,CAAC;AAUtD,MAAM,WAAW,WAAY,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC;IACnE;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAcD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,eAAO,MAAM,MAAM;;;;;;;;;;;;IAIf;;;;;;;OAOG;;;;;;;;;IAEH;;;;;;;OAOG;;;;;;;;;IAEH;;;;;;;;OAQG;;;;;;;;;CA4CL,CAAC"}

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

@@ -19,7 +19,8 @@ const styles = {
     outline: `${canvas_tokens_web_1.system.space.x1} solid transparent`,
     '&:focus-visible, &.focus': {
         outline: `${(0, canvas_kit_styling_1.px2rem)(4)} double transparent`,
-        ...(0, common_1.focusRing)({ separation: 2 }),
+        // using `focusRing` in support doesn't work for components that use `styled` function because we changed the type to be `CSSObjectWithVars`. Changing this to use `boxShadow` works in support for non stencil components.
+        boxShadow: '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))',
     },
 };
 /**

package/dist/commonjs/button/lib/BaseButton.js

@@ -55,7 +55,7 @@ exports.buttonStencil = (0, canvas_kit_styling_1.createStencil)({
         opacity: '',
         borderRadius: '',
     },
-    base: { name: "o1ob1b", styles: "box-sizing:border-box;font-family:\"Roboto\", \"Helvetica Neue\", \"Helvetica\", Arial, sans-serif;font-size:0.875rem;line-height:normal;letter-spacing:0.015rem;font-weight:var(--cnvs-sys-font-weight-bold);background-color:var(--background-b5fb58, var(--background-button-65cb05, transparent));color:var(--label-b5fb58, var(--label-button-65cb05, var(--cnvs-sys-color-fg-strong)));border-width:0.0625rem;border-style:solid;gap:var(--cnvs-sys-space-x2);border-color:var(--border-b5fb58, var(--border-button-65cb05, transparent));cursor:pointer;display:inline-flex;box-shadow:none;align-items:center;justify-content:center;outline:0.125rem transparent;white-space:nowrap;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-radius:var(--borderRadius-b5fb58, var(--borderRadius-button-65cb05, var(--cnvs-sys-shape-round)));position:relative;vertical-align:middle;overflow:hidden;--color-system-icon-212f69:var(--icon-b5fb58, var(--cnvs-sys-color-fg-strong));transition:box-shadow 120ms linear, border 120ms linear, background-color 120ms linear, color 120ms linear;&:disabled, &:disabled:active, &.disabled{cursor:default;box-shadow:none;opacity:var(--opacity-b5fb58, var(--opacity-button-65cb05, var(--cnvs-sys-opacity-full)));}&:focus-visible, &.focus{background-color:var(--background-2ae7b1, var(--background-button-65cb05, transparent));border-color:var(--border-2ae7b1, var(--border-button-65cb05, transparent));color:var(--label-2ae7b1, var(--label-button-65cb05, var(--cnvs-sys-color-fg-strong)));--color-system-icon-212f69:var(--icon-2ae7b1, var(--cnvs-sys-color-fg-strong));outline:0.125rem solid transparent;outline-offset:0.125rem;box-shadow:0 0 0 2px var(--boxShadowInner-2ae7b1, var(--boxShadowInner-button-65cb05, var(--cnvs-sys-color-border-inverse))), 0 0 0 4px var(--boxShadowOuter-2ae7b1, var(--boxShadowOuter-button-65cb05, var(--cnvs-brand-common-focus-outline)));}&:hover, &.hover{background-color:var(--background-c4b8f8, var(--background-button-65cb05, var(--cnvs-sys-color-bg-contrast-strong)));border-color:var(--border-c4b8f8, var(--border-button-65cb05, transparent));color:var(--label-c4b8f8, var(--label-button-65cb05, var(--cnvs-sys-color-fg-stronger)));--color-system-icon-212f69:var(--icon-c4b8f8, var(--cnvs-sys-color-fg-stronger));}&:hover:active{transition-duration:40ms;}&:active, &.active{background-color:var(--background-93b1ce, var(--background-button-65cb05, transparent));border-color:var(--border-93b1ce, var(--border-button-65cb05, transparent));color:var(--label-93b1ce, var(--label-button-65cb05, var(--cnvs-sys-color-fg-strong)));--color-system-icon-212f69:var(--icon-93b1ce, var(--cnvs-sys-color-fg-strong));}&:disabled, &.disabled{background-color:var(--background-c34400, var(--background-button-65cb05, transparent));border-color:var(--border-c34400, var(--border-button-65cb05, transparent));color:var(--label-c34400, var(--label-button-65cb05, var(--cnvs-sys-color-fg-strong)));--color-system-icon-212f69:var(--icon-c34400, var(--cnvs-sys-color-fg-strong));}@media (prefers-contrast: more){&[aria-pressed=\"true\"]{outline:0.125rem solid transparent;outline-offset:-0.0625rem;}&[aria-pressed=\"true\"]:focus-visible, &[aria-pressed=\"true\"].focus{outline:0.25rem double transparent;outline-offset:0;}}svg{pointer-events:none;}" },
+    base: { name: "lx881b", styles: "box-sizing:border-box;font-family:\"Roboto\", \"Helvetica Neue\", \"Helvetica\", Arial, sans-serif;font-size:0.875rem;line-height:normal;letter-spacing:0.015rem;font-weight:var(--cnvs-sys-font-weight-bold);background-color:var(--background-b5fb58, var(--background-button-65cb05, transparent));color:var(--label-b5fb58, var(--label-button-65cb05, var(--cnvs-sys-color-fg-strong)));border-width:0.0625rem;border-style:solid;gap:var(--cnvs-sys-space-x2);border-color:var(--border-b5fb58, var(--border-button-65cb05, transparent));cursor:pointer;display:inline-flex;box-shadow:none;align-items:center;justify-content:center;outline:0.125rem transparent;white-space:nowrap;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-radius:var(--borderRadius-b5fb58, var(--borderRadius-button-65cb05, var(--cnvs-sys-shape-round)));position:relative;vertical-align:middle;overflow:hidden;--color-system-icon-212f69:var(--icon-b5fb58, var(--cnvs-sys-color-fg-strong));transition:box-shadow 120ms linear, border 120ms linear, background-color 120ms linear, color 120ms linear;&:disabled, &:disabled:active, &.disabled{cursor:default;box-shadow:none;opacity:var(--opacity-b5fb58, var(--opacity-button-65cb05, var(--cnvs-sys-opacity-full)));}&:focus-visible, &.focus{background-color:var(--background-2ae7b1, var(--background-button-65cb05, transparent));border-color:var(--border-2ae7b1, var(--border-button-65cb05, transparent));color:var(--label-2ae7b1, var(--label-button-65cb05, var(--cnvs-sys-color-fg-strong)));--color-system-icon-212f69:var(--icon-2ae7b1, var(--cnvs-sys-color-fg-strong));outline:0.125rem solid transparent;outline-offset:0.125rem;box-shadow:0 0 0 2px var(--boxShadowInner-2ae7b1, var(--boxShadowInner-button-65cb05, var(--cnvs-sys-color-border-inverse))), 0 0 0 4px var(--boxShadowOuter-2ae7b1, var(--boxShadowOuter-button-65cb05, var(--cnvs-brand-common-focus-outline)));}&:hover, &.hover{background-color:var(--background-c4b8f8, var(--background-button-65cb05, var(--cnvs-sys-color-bg-contrast-strong)));border-color:var(--border-c4b8f8, var(--border-button-65cb05, transparent));color:var(--label-c4b8f8, var(--label-button-65cb05, var(--cnvs-sys-color-fg-stronger)));--color-system-icon-212f69:var(--icon-c4b8f8, var(--cnvs-sys-color-fg-stronger));}&:hover:active{transition-duration:40ms;}&:active, &.active{background-color:var(--background-93b1ce, var(--background-button-65cb05, transparent));border-color:var(--border-93b1ce, var(--border-button-65cb05, transparent));color:var(--label-93b1ce, var(--label-button-65cb05, var(--cnvs-sys-color-fg-strong)));--color-system-icon-212f69:var(--icon-93b1ce, var(--cnvs-sys-color-fg-strong));}&:disabled, &.disabled{background-color:var(--background-c34400, var(--background-button-65cb05, transparent));border-color:var(--border-c34400, var(--border-button-65cb05, transparent));color:var(--label-c34400, var(--label-button-65cb05, var(--cnvs-sys-color-fg-strong)));--color-system-icon-212f69:var(--icon-c34400, var(--cnvs-sys-color-fg-strong));}@media (prefers-contrast: more){&[aria-pressed=\"true\"]{outline:0.125rem solid transparent;outline-offset:-0.0625rem;}&[aria-pressed=\"true\"]:focus-visible, &[aria-pressed=\"true\"].focus{outline:0.25rem double transparent;outline-offset:0;}}svg{pointer-events:none;}" },
     modifiers: {
         /**
          * Button modifiers that will overwrite the base styles of Buttons.
@@ -64,70 +64,70 @@ exports.buttonStencil = (0, canvas_kit_styling_1.createStencil)({
          * within a button or if there is only an icon and no text.
          */
         size: {
-            large: { name: "o1ob1c", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-body-small);font-size:var(--cnvs-sys-font-size-body-small);letter-spacing:var(--cnvs-base-letter-spacing-200);height:3rem;padding-inline:var(--cnvs-sys-space-x8);min-width:7rem;" },
-            medium: { name: "o1ob1d", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);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);min-width:6rem;padding-inline:var(--cnvs-sys-space-x6);height:var(--cnvs-sys-space-x10);" },
-            small: { name: "o1ob1e", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);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);height:var(--cnvs-sys-space-x8);min-width:var(--cnvs-sys-space-x20);padding-inline:var(--cnvs-sys-space-x4);gap:var(--cnvs-sys-space-x1);" },
-            extraSmall: { name: "o1ob1f", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-subtext-medium);font-size:var(--cnvs-sys-font-size-subtext-medium);letter-spacing:var(--cnvs-base-letter-spacing-100);height:var(--cnvs-sys-space-x6);min-width:auto;padding-inline:var(--cnvs-sys-space-x3);gap:var(--cnvs-sys-space-x1);" }
+            large: { name: "lx881c", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-body-small);font-size:var(--cnvs-sys-font-size-body-small);letter-spacing:var(--cnvs-base-letter-spacing-200);height:3rem;padding-inline:var(--cnvs-sys-space-x8);min-width:7rem;" },
+            medium: { name: "lx881d", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);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);min-width:6rem;padding-inline:var(--cnvs-sys-space-x6);height:var(--cnvs-sys-space-x10);" },
+            small: { name: "lx881e", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);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);height:var(--cnvs-sys-space-x8);min-width:var(--cnvs-sys-space-x20);padding-inline:var(--cnvs-sys-space-x4);gap:var(--cnvs-sys-space-x1);" },
+            extraSmall: { name: "lx881f", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-subtext-medium);font-size:var(--cnvs-sys-font-size-subtext-medium);letter-spacing:var(--cnvs-base-letter-spacing-100);height:var(--cnvs-sys-space-x6);min-width:auto;padding-inline:var(--cnvs-sys-space-x3);gap:var(--cnvs-sys-space-x1);" }
         },
         grow: {
-            true: { name: "o1ob1g", styles: "width:100%;max-width:100%;" }
+            true: { name: "lx881g", styles: "width:100%;max-width:100%;" }
         },
         // IconPosition Styles
         iconPosition: {
-            only: { name: "o1ob1h", styles: "padding:var(--cnvs-sys-space-zero);" },
-            start: { name: "o1ob1i", styles: "" },
-            end: { name: "o1ob1j", styles: "" }
+            only: { name: "lx881h", styles: "padding:var(--cnvs-sys-space-zero);" },
+            start: { name: "lx881i", styles: "" },
+            end: { name: "lx881j", styles: "" }
         }
     },
     // Compound Modifier Styles
     compound: [
         {
             modifiers: { size: 'large', iconPosition: 'only' },
-            styles: { name: "o1ob1k", styles: "min-width:calc(var(--cnvs-sys-space-x4) * 3);" }
+            styles: { name: "lx881k", styles: "min-width:calc(var(--cnvs-sys-space-x4) * 3);" }
         },
         {
             modifiers: { size: 'large', iconPosition: 'start' },
-            styles: { name: "o1ob1l", styles: "padding-inline-start:var(--cnvs-sys-space-x6);padding-inline-end:var(--cnvs-sys-space-x8);" }
+            styles: { name: "lx881l", styles: "padding-inline-start:var(--cnvs-sys-space-x6);padding-inline-end:var(--cnvs-sys-space-x8);" }
         },
         {
             modifiers: { size: 'large', iconPosition: 'end' },
-            styles: { name: "o1ob1m", styles: "padding-inline-start:var(--cnvs-sys-space-x8);padding-inline-end:var(--cnvs-sys-space-x6);" }
+            styles: { name: "lx881m", styles: "padding-inline-start:var(--cnvs-sys-space-x8);padding-inline-end:var(--cnvs-sys-space-x6);" }
         },
         {
             modifiers: { size: 'medium', iconPosition: 'only' },
-            styles: { name: "o1ob1n", styles: "min-width:var(--cnvs-sys-space-x10);" }
+            styles: { name: "lx881n", styles: "min-width:var(--cnvs-sys-space-x10);" }
         },
         {
             modifiers: { size: 'medium', iconPosition: 'start' },
-            styles: { name: "o1ob1o", styles: "padding-inline-start:calc(var(--cnvs-sys-space-x1) * 5);padding-inline-end:var(--cnvs-sys-space-x6);" }
+            styles: { name: "lx881o", styles: "padding-inline-start:calc(var(--cnvs-sys-space-x1) * 5);padding-inline-end:var(--cnvs-sys-space-x6);" }
         },
         {
             modifiers: { size: 'medium', iconPosition: 'end' },
-            styles: { name: "o1ob1p", styles: "padding-inline-start:var(--cnvs-sys-space-x6);padding-inline-end:calc(var(--cnvs-sys-space-x1) * 5);" }
+            styles: { name: "lx881p", styles: "padding-inline-start:var(--cnvs-sys-space-x6);padding-inline-end:calc(var(--cnvs-sys-space-x1) * 5);" }
         },
         {
             modifiers: { size: 'small', iconPosition: 'only' },
-            styles: { name: "o1ob1q", styles: "min-width:var(--cnvs-sys-space-x8);" }
+            styles: { name: "lx881q", styles: "min-width:var(--cnvs-sys-space-x8);" }
         },
         {
             modifiers: { size: 'small', iconPosition: 'start' },
-            styles: { name: "o1ob1r", styles: "padding-inline-start:var(--cnvs-sys-space-x3);padding-inline-end:var(--cnvs-sys-space-x4);" }
+            styles: { name: "lx881r", styles: "padding-inline-start:var(--cnvs-sys-space-x3);padding-inline-end:var(--cnvs-sys-space-x4);" }
         },
         {
             modifiers: { size: 'small', iconPosition: 'end' },
-            styles: { name: "o1ob1s", styles: "padding-inline-start:var(--cnvs-sys-space-x4);padding-inline-end:var(--cnvs-sys-space-x3);" }
+            styles: { name: "lx881s", styles: "padding-inline-start:var(--cnvs-sys-space-x4);padding-inline-end:var(--cnvs-sys-space-x3);" }
         },
         {
             modifiers: { size: 'extraSmall', iconPosition: 'only' },
-            styles: { name: "o1ob1t", styles: "min-width:var(--cnvs-sys-space-x6);" }
+            styles: { name: "lx881t", styles: "min-width:var(--cnvs-sys-space-x6);" }
         },
         {
             modifiers: { size: 'extraSmall', iconPosition: 'start' },
-            styles: { name: "o1ob1u", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x3);" }
+            styles: { name: "lx881u", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x3);" }
         },
         {
             modifiers: { size: 'extraSmall', iconPosition: 'end' },
-            styles: { name: "o1ob1v", styles: "padding-inline-start:var(--cnvs-sys-space-x3);padding-inline-end:var(--cnvs-sys-space-x2);" }
+            styles: { name: "lx881v", styles: "padding-inline-start:var(--cnvs-sys-space-x3);padding-inline-end:var(--cnvs-sys-space-x2);" }
         }
     ]
 }, "button-65cb05");

package/dist/commonjs/button/lib/DeleteButton.js

@@ -33,7 +33,7 @@ const Button_1 = require("./Button");
 const icon_1 = require("@workday/canvas-kit-react/icon");
 const deleteButtonStencil = (0, canvas_kit_styling_1.createStencil)({
     extends: BaseButton_1.buttonStencil,
-    base: { name: "o1ob2k", styles: "box-sizing:border-box;--background-button-65cb05:var(--cnvs-brand-error-base);--borderRadius-button-65cb05:var(--cnvs-sys-shape-round);--label-button-65cb05:var(--cnvs-brand-error-accent);--color-system-icon-212f69:var(--icon-b5fb58, var(--cnvs-brand-error-accent));&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-brand-error-base);--label-button-65cb05:var(--cnvs-brand-error-accent);--color-system-icon-212f69:var(--icon-2ae7b1, var(--cnvs-brand-error-accent));--boxShadowInner-button-65cb05:var(--cnvs-sys-color-border-inverse);--boxShadowOuter-button-65cb05:var(--cnvs-brand-common-focus-outline);}&:hover, &.hover{--background-button-65cb05:var(--cnvs-brand-error-dark);--label-button-65cb05:var(--cnvs-brand-error-accent);--color-system-icon-212f69:var(--icon-c4b8f8, var(--cnvs-brand-error-accent));}&:active, &.active{--background-button-65cb05:var(--cnvs-brand-error-darkest);--label-button-65cb05:var(--cnvs-brand-error-accent);--color-system-icon-212f69:var(--icon-93b1ce, var(--cnvs-brand-error-accent));}&:disabled, &.disabled{--background-button-65cb05:var(--cnvs-brand-error-base);--label-button-65cb05:var(--cnvs-brand-error-accent);--color-system-icon-212f69:var(--icon-c34400, var(--cnvs-brand-error-accent));--opacity-button-65cb05:var(--cnvs-sys-opacity-disabled);}" }
+    base: { name: "lx882k", styles: "box-sizing:border-box;--background-button-65cb05:var(--cnvs-brand-error-base);--borderRadius-button-65cb05:var(--cnvs-sys-shape-round);--label-button-65cb05:var(--cnvs-brand-error-accent);--color-system-icon-212f69:var(--icon-b5fb58, var(--cnvs-brand-error-accent));&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-brand-error-base);--label-button-65cb05:var(--cnvs-brand-error-accent);--color-system-icon-212f69:var(--icon-2ae7b1, var(--cnvs-brand-error-accent));--boxShadowInner-button-65cb05:var(--cnvs-sys-color-border-inverse);--boxShadowOuter-button-65cb05:var(--cnvs-brand-common-focus-outline);}&:hover, &.hover{--background-button-65cb05:var(--cnvs-brand-error-dark);--label-button-65cb05:var(--cnvs-brand-error-accent);--color-system-icon-212f69:var(--icon-c4b8f8, var(--cnvs-brand-error-accent));}&:active, &.active{--background-button-65cb05:var(--cnvs-brand-error-darkest);--label-button-65cb05:var(--cnvs-brand-error-accent);--color-system-icon-212f69:var(--icon-93b1ce, var(--cnvs-brand-error-accent));}&:disabled, &.disabled{--background-button-65cb05:var(--cnvs-brand-error-base);--label-button-65cb05:var(--cnvs-brand-error-accent);--color-system-icon-212f69:var(--icon-c34400, var(--cnvs-brand-error-accent));--opacity-button-65cb05:var(--cnvs-sys-opacity-disabled);}" }
 }, "delete-button-880e51");
 /**
  * Use sparingly for destructive actions that will result in data loss, can’t be undone, or will

package/dist/commonjs/button/lib/Hyperlink.js

@@ -29,10 +29,10 @@ 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 hyperlinkStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "o1ob2e", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);text-decoration:underline;color:var(--cnvs-sys-color-text-primary-default);cursor:pointer;border-radius:var(--cnvs-sys-shape-half);display:inline-block;padding:0 2px;margin:0 -2px;transition:color 0.15s,background-color 0.15s;&:hover, &.hover{color:var(--cnvs-sys-color-text-primary-strong);background:var(--cnvs-sys-color-bg-alt-soft);}&:focus, &.focus, &:focus-visible{box-shadow:0 0 0 2px var(--cnvs-sys-color-bg-primary-default);outline:none;}&:active, &.active{color:var(--cnvs-sys-color-text-primary-stronger);background:var(--cnvs-sys-color-bg-alt-default);}" },
+    base: { name: "lx882e", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);text-decoration:underline;color:var(--cnvs-sys-color-text-primary-default);cursor:pointer;border-radius:var(--cnvs-sys-shape-half);display:inline-block;padding:0 2px;margin:0 -2px;transition:color 0.15s,background-color 0.15s;&:hover, &.hover{color:var(--cnvs-sys-color-text-primary-strong);background:var(--cnvs-sys-color-bg-alt-soft);}&:focus, &.focus, &:focus-visible{box-shadow:0 0 0 2px var(--cnvs-sys-color-bg-primary-default);outline:none;}&:active, &.active{color:var(--cnvs-sys-color-text-primary-stronger);background:var(--cnvs-sys-color-bg-alt-default);}" },
     modifiers: {
         variant: {
-            inverse: { name: "o1ob2f", styles: "color:var(--cnvs-sys-color-text-inverse);&:hover, &.hover{color:var(--cnvs-sys-color-text-inverse);background:rgba(255, 255, 255, 0.1);}&:focus, &.focus, &:focus-visible{box-shadow:0 0 0 2px var(--cnvs-sys-color-text-inverse);}&:active, &.active{color:var(--cnvs-sys-color-text-primary-stronger);background:var(--cnvs-sys-color-bg-alt-soft);}" }
+            inverse: { name: "lx882f", styles: "color:var(--cnvs-sys-color-text-inverse);&:hover, &.hover{color:var(--cnvs-sys-color-text-inverse);background:rgba(255, 255, 255, 0.1);}&:focus, &.focus, &:focus-visible{box-shadow:0 0 0 2px var(--cnvs-sys-color-text-inverse);}&:active, &.active{color:var(--cnvs-sys-color-text-primary-stronger);background:var(--cnvs-sys-color-bg-alt-soft);}" }
         }
     }
 }, "hyperlink-aaf9ad");

package/dist/commonjs/button/lib/PrimaryButton.js

@@ -33,11 +33,11 @@ const BaseButton_1 = require("./BaseButton");
 const Button_1 = require("./Button");
 const primaryButtonStencil = (0, canvas_kit_styling_1.createStencil)({
     extends: BaseButton_1.buttonStencil,
-    base: { name: "o1ob2g", styles: "box-sizing:border-box;--background-button-65cb05:var(--cnvs-brand-action-base, var(--cnvs-brand-primary-base));--borderRadius-button-65cb05:var(--cnvs-sys-shape-round);--label-button-65cb05:var(--cnvs-brand-action-accent, var(--cnvs-brand-primary-accent));--color-system-icon-212f69:var(--icon-b5fb58, var(--cnvs-brand-action-accent, var(--cnvs-brand-primary-accent)));&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-brand-action-base, var(--cnvs-brand-primary-base));--label-button-65cb05:var(--cnvs-brand-action-accent, var(--cnvs-brand-primary-accent));--boxShadowInner-button-65cb05:var(--cnvs-sys-color-border-inverse);--boxShadowOuter-button-65cb05:var(--cnvs-brand-common-focus-outline);--color-system-icon-212f69:var(--icon-2ae7b1, var(--cnvs-brand-action-accent, var(--cnvs-brand-primary-accent)));}&:hover, &.hover{--background-button-65cb05:var(--cnvs-brand-action-dark, var(--cnvs-brand-primary-dark));--label-button-65cb05:var(--cnvs-brand-action-accent, var(--cnvs-brand-primary-accent));--color-system-icon-212f69:var(--icon-c4b8f8, var(--cnvs-brand-action-accent, var(--cnvs-brand-primary-accent)));}&:active, &.active{--background-button-65cb05:var(--cnvs-brand-action-darkest, var(--cnvs-brand-primary-darkest));--label-button-65cb05:var(--cnvs-brand-action-accent, var(--cnvs-brand-primary-accent));--color-system-icon-212f69:var(--icon-93b1ce, var(--cnvs-brand-action-accent, var(--cnvs-brand-primary-accent)));}&:disabled, &.disabled{--background-button-65cb05:var(--cnvs-brand-action-base, var(--cnvs-brand-primary-base));--label-button-65cb05:var(--cnvs-brand-action-accent, var(--cnvs-brand-primary-accent));--opacity-button-65cb05:var(--cnvs-sys-opacity-disabled);--color-system-icon-212f69:var(--icon-c34400, var(--cnvs-brand-action-accent, var(--cnvs-brand-primary-accent)));}" },
+    base: { name: "lx882g", styles: "box-sizing:border-box;--background-button-65cb05:var(--cnvs-brand-action-base, var(--cnvs-brand-primary-base));--borderRadius-button-65cb05:var(--cnvs-sys-shape-round);--label-button-65cb05:var(--cnvs-brand-action-accent, var(--cnvs-brand-primary-accent));--color-system-icon-212f69:var(--icon-b5fb58, var(--cnvs-brand-action-accent, var(--cnvs-brand-primary-accent)));&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-brand-action-base, var(--cnvs-brand-primary-base));--label-button-65cb05:var(--cnvs-brand-action-accent, var(--cnvs-brand-primary-accent));--boxShadowInner-button-65cb05:var(--cnvs-sys-color-border-inverse);--boxShadowOuter-button-65cb05:var(--cnvs-brand-common-focus-outline);--color-system-icon-212f69:var(--icon-2ae7b1, var(--cnvs-brand-action-accent, var(--cnvs-brand-primary-accent)));}&:hover, &.hover{--background-button-65cb05:var(--cnvs-brand-action-dark, var(--cnvs-brand-primary-dark));--label-button-65cb05:var(--cnvs-brand-action-accent, var(--cnvs-brand-primary-accent));--color-system-icon-212f69:var(--icon-c4b8f8, var(--cnvs-brand-action-accent, var(--cnvs-brand-primary-accent)));}&:active, &.active{--background-button-65cb05:var(--cnvs-brand-action-darkest, var(--cnvs-brand-primary-darkest));--label-button-65cb05:var(--cnvs-brand-action-accent, var(--cnvs-brand-primary-accent));--color-system-icon-212f69:var(--icon-93b1ce, var(--cnvs-brand-action-accent, var(--cnvs-brand-primary-accent)));}&:disabled, &.disabled{--background-button-65cb05:var(--cnvs-brand-action-base, var(--cnvs-brand-primary-base));--label-button-65cb05:var(--cnvs-brand-action-accent, var(--cnvs-brand-primary-accent));--opacity-button-65cb05:var(--cnvs-sys-opacity-disabled);--color-system-icon-212f69:var(--icon-c34400, var(--cnvs-brand-action-accent, var(--cnvs-brand-primary-accent)));}" },
     modifiers: {
         variant: {
             // Inverse Styles
-            inverse: { name: "o1ob2h", styles: "--background-button-65cb05:var(--cnvs-sys-color-bg-default);--borderRadius-button-65cb05:var(--cnvs-sys-shape-round);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-212f69:var(--icon-b5fb58, var(--cnvs-sys-color-fg-strong));&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-sys-color-bg-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--boxShadowInner-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--boxShadowOuter-button-65cb05:var(--cnvs-sys-color-border-inverse);--color-system-icon-212f69:var(--icon-2ae7b1, var(--cnvs-sys-color-fg-strong));}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-default);--label-button-65cb05:var(--cnvs-sys-color-fg-stronger);--color-system-icon-212f69:var(--icon-c4b8f8, var(--cnvs-sys-color-fg-stronger));}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-strong);--label-button-65cb05:var(--cnvs-sys-color-fg-stronger);--color-system-icon-212f69:var(--icon-93b1ce, var(--cnvs-sys-color-fg-stronger));}&:disabled, &.disabled{--background-button-65cb05:var(--cnvs-sys-color-bg-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-212f69:var(--icon-c34400, var(--cnvs-sys-color-fg-strong));}" }
+            inverse: { name: "lx882h", styles: "--background-button-65cb05:var(--cnvs-sys-color-bg-default);--borderRadius-button-65cb05:var(--cnvs-sys-shape-round);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-212f69:var(--icon-b5fb58, var(--cnvs-sys-color-fg-strong));&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-sys-color-bg-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--boxShadowInner-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--boxShadowOuter-button-65cb05:var(--cnvs-sys-color-border-inverse);--color-system-icon-212f69:var(--icon-2ae7b1, var(--cnvs-sys-color-fg-strong));}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-default);--label-button-65cb05:var(--cnvs-sys-color-fg-stronger);--color-system-icon-212f69:var(--icon-c4b8f8, var(--cnvs-sys-color-fg-stronger));}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-strong);--label-button-65cb05:var(--cnvs-sys-color-fg-stronger);--color-system-icon-212f69:var(--icon-93b1ce, var(--cnvs-sys-color-fg-stronger));}&:disabled, &.disabled{--background-button-65cb05:var(--cnvs-sys-color-bg-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-212f69:var(--icon-c34400, var(--cnvs-sys-color-fg-strong));}" }
         }
     }
 }, "primary-button-cc7f35");

package/dist/commonjs/button/lib/SecondaryButton.js

@@ -33,10 +33,10 @@ const Button_1 = require("./Button");
 const icon_1 = require("@workday/canvas-kit-react/icon");
 const secondaryButtonStencil = (0, canvas_kit_styling_1.createStencil)({
     extends: BaseButton_1.buttonStencil,
-    base: { name: "o1ob2i", styles: "box-sizing:border-box;--background-button-65cb05:transparent;--border-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--borderRadius-button-65cb05:var(--cnvs-sys-shape-round);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-212f69:var(--icon-b5fb58, var(--cnvs-sys-color-fg-strong));&:focus-visible, &.focus{--background-button-65cb05:transparent;--border-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--boxShadowInner-button-65cb05:var(--cnvs-sys-color-border-inverse);--boxShadowOuter-button-65cb05:var(--cnvs-brand-common-focus-outline);--color-system-icon-212f69:var(--icon-2ae7b1, var(--cnvs-sys-color-fg-strong));}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-contrast-default);--border-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--label-button-65cb05:var(--cnvs-brand-primary-accent);--color-system-icon-212f69:var(--icon-c4b8f8, var(--cnvs-brand-primary-accent));}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-contrast-strong);--border-button-65cb05:var(--cnvs-sys-color-border-contrast-strong);--label-button-65cb05:var(--cnvs-brand-primary-accent);--color-system-icon-212f69:var(--icon-93b1ce, var(--cnvs-brand-primary-accent));}&:disabled, &.disabled{--background-button-65cb05:transparent;--border-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--opacity-button-65cb05:var(--cnvs-sys-opacity-disabled);--color-system-icon-212f69:var(--icon-c34400, var(--cnvs-sys-color-fg-strong));}" },
+    base: { name: "lx882i", styles: "box-sizing:border-box;--background-button-65cb05:transparent;--border-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--borderRadius-button-65cb05:var(--cnvs-sys-shape-round);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-212f69:var(--icon-b5fb58, var(--cnvs-sys-color-fg-strong));&:focus-visible, &.focus{--background-button-65cb05:transparent;--border-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--boxShadowInner-button-65cb05:var(--cnvs-sys-color-border-inverse);--boxShadowOuter-button-65cb05:var(--cnvs-brand-common-focus-outline);--color-system-icon-212f69:var(--icon-2ae7b1, var(--cnvs-sys-color-fg-strong));}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-contrast-default);--border-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--label-button-65cb05:var(--cnvs-brand-primary-accent);--color-system-icon-212f69:var(--icon-c4b8f8, var(--cnvs-brand-primary-accent));}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-contrast-strong);--border-button-65cb05:var(--cnvs-sys-color-border-contrast-strong);--label-button-65cb05:var(--cnvs-brand-primary-accent);--color-system-icon-212f69:var(--icon-93b1ce, var(--cnvs-brand-primary-accent));}&:disabled, &.disabled{--background-button-65cb05:transparent;--border-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--opacity-button-65cb05:var(--cnvs-sys-opacity-disabled);--color-system-icon-212f69:var(--icon-c34400, var(--cnvs-sys-color-fg-strong));}" },
     modifiers: {
         variant: {
-            inverse: { name: "o1ob2j", styles: "--background-button-65cb05:transparent;--border-button-65cb05:var(--cnvs-sys-color-border-inverse);--label-button-65cb05:var(--cnvs-sys-color-fg-inverse);--color-system-icon-212f69:var(--icon-b5fb58, var(--cnvs-sys-color-fg-inverse));&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-sys-color-bg-default);--border-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--boxShadowInner-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--boxShadowOuter-button-65cb05:var(--cnvs-sys-color-border-inverse);--color-system-icon-212f69:var(--icon-2ae7b1, var(--cnvs-sys-color-fg-strong));}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-default);--border-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-sys-color-fg-stronger);--color-system-icon-212f69:var(--icon-c4b8f8, var(--cnvs-sys-color-fg-stronger));}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-strong);--border-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-sys-color-fg-stronger);--color-system-icon-212f69:var(--icon-93b1ce, var(--cnvs-sys-color-fg-stronger));}&:disabled, &.disabled{--background-button-65cb05:transparent;--border-button-65cb05:var(--cnvs-sys-color-border-inverse);--label-button-65cb05:var(--cnvs-sys-color-fg-inverse);--color-system-icon-212f69:var(--icon-c34400, var(--cnvs-sys-color-fg-inverse));}" }
+            inverse: { name: "lx882j", styles: "--background-button-65cb05:transparent;--border-button-65cb05:var(--cnvs-sys-color-border-inverse);--label-button-65cb05:var(--cnvs-sys-color-fg-inverse);--color-system-icon-212f69:var(--icon-b5fb58, var(--cnvs-sys-color-fg-inverse));&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-sys-color-bg-default);--border-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--boxShadowInner-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--boxShadowOuter-button-65cb05:var(--cnvs-sys-color-border-inverse);--color-system-icon-212f69:var(--icon-2ae7b1, var(--cnvs-sys-color-fg-strong));}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-default);--border-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-sys-color-fg-stronger);--color-system-icon-212f69:var(--icon-c4b8f8, var(--cnvs-sys-color-fg-stronger));}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-strong);--border-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-sys-color-fg-stronger);--color-system-icon-212f69:var(--icon-93b1ce, var(--cnvs-sys-color-fg-stronger));}&:disabled, &.disabled{--background-button-65cb05:transparent;--border-button-65cb05:var(--cnvs-sys-color-border-inverse);--label-button-65cb05:var(--cnvs-sys-color-fg-inverse);--color-system-icon-212f69:var(--icon-c34400, var(--cnvs-sys-color-fg-inverse));}" }
         }
     }
 }, "secondary-button-e11131");

package/dist/commonjs/button/lib/TertiaryButton.js

@@ -34,71 +34,71 @@ const icon_1 = require("@workday/canvas-kit-react/icon");
 const tertiaryButtonStencil = (0, canvas_kit_styling_1.createStencil)({
     extends: BaseButton_1.buttonStencil,
     // Base Styles
-    base: { name: "o1ob1w", styles: "box-sizing:border-box;padding-inline:var(--cnvs-sys-space-x2);min-width:auto;text-decoration:underline;border:var(--cnvs-sys-space-zero);--background-button-65cb05:transparent;--borderRadius-button-65cb05:var(--cnvs-sys-shape-x1);--label-button-65cb05:var(--cnvs-brand-primary-base);--color-system-icon-212f69:var(--icon-b5fb58, var(--cnvs-brand-primary-base));&:focus-visible, &.focus{--background-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-brand-primary-base);--boxShadowInner-button-65cb05:var(--cnvs-brand-common-focus-outline);--boxShadowOuter-button-65cb05:var(--cnvs-brand-common-focus-outline);--color-system-icon-212f69:var(--icon-2ae7b1, var(--cnvs-brand-primary-base));box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse), 0 0 0 2px var(--cnvs-brand-common-focus-outline);}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-default);--label-button-65cb05:var(--cnvs-brand-primary-dark);--color-system-icon-212f69:var(--icon-c4b8f8, var(--cnvs-brand-primary-dark));}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-strong);--label-button-65cb05:var(--cnvs-brand-primary-darkest);--color-system-icon-212f69:var(--icon-93b1ce, var(--cnvs-brand-primary-darkest));}&:disabled, &.disabled{--background-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-brand-primary-base);--opacity-button-65cb05:var(--cnvs-sys-opacity-disabled);--color-system-icon-212f69:var(--icon-93b1ce, var(--cnvs-brand-primary-base));}" },
+    base: { name: "lx881w", styles: "box-sizing:border-box;padding-inline:var(--cnvs-sys-space-x2);min-width:auto;text-decoration:underline;border:var(--cnvs-sys-space-zero);--background-button-65cb05:transparent;--borderRadius-button-65cb05:var(--cnvs-sys-shape-x1);--label-button-65cb05:var(--cnvs-brand-primary-base);--color-system-icon-212f69:var(--icon-b5fb58, var(--cnvs-brand-primary-base));&:focus-visible, &.focus{--background-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-brand-primary-base);--boxShadowInner-button-65cb05:var(--cnvs-brand-common-focus-outline);--boxShadowOuter-button-65cb05:var(--cnvs-brand-common-focus-outline);--color-system-icon-212f69:var(--icon-2ae7b1, var(--cnvs-brand-primary-base));box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse), 0 0 0 2px var(--cnvs-brand-common-focus-outline);}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-default);--label-button-65cb05:var(--cnvs-brand-primary-dark);--color-system-icon-212f69:var(--icon-c4b8f8, var(--cnvs-brand-primary-dark));}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-strong);--label-button-65cb05:var(--cnvs-brand-primary-darkest);--color-system-icon-212f69:var(--icon-93b1ce, var(--cnvs-brand-primary-darkest));}&:disabled, &.disabled{--background-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-brand-primary-base);--opacity-button-65cb05:var(--cnvs-sys-opacity-disabled);--color-system-icon-212f69:var(--icon-93b1ce, var(--cnvs-brand-primary-base));}" },
     modifiers: {
         // IconPosition Styles
         iconPosition: {
-            only: { name: "o1ob1x", styles: "padding:0;border-radius:var(--cnvs-sys-shape-round);--color-system-icon-212f69:var(--icon-b5fb58, var(--cnvs-sys-color-fg-strong));&:focus-visible, &.focus{--color-system-icon-212f69:var(--icon-2ae7b1, var(--cnvs-sys-color-fg-strong));}&:hover, &.hover{--color-system-icon-212f69:var(--icon-c4b8f8, var(--cnvs-sys-color-fg-strong));}&:active, &.active{--color-system-icon-212f69:var(--icon-93b1ce, var(--cnvs-sys-color-fg-strong));}&:disabled, &.disabled{--color-system-icon-212f69:var(--icon-c34400, var(--cnvs-sys-color-fg-strong));}" },
-            start: { name: "o1ob1y", styles: "" },
-            end: { name: "o1ob1z", styles: "" }
+            only: { name: "lx881x", styles: "padding:0;border-radius:var(--cnvs-sys-shape-round);--color-system-icon-212f69:var(--icon-b5fb58, var(--cnvs-sys-color-fg-strong));&:focus-visible, &.focus{--color-system-icon-212f69:var(--icon-2ae7b1, var(--cnvs-sys-color-fg-strong));}&:hover, &.hover{--color-system-icon-212f69:var(--icon-c4b8f8, var(--cnvs-sys-color-fg-strong));}&:active, &.active{--color-system-icon-212f69:var(--icon-93b1ce, var(--cnvs-sys-color-fg-strong));}&:disabled, &.disabled{--color-system-icon-212f69:var(--icon-c34400, var(--cnvs-sys-color-fg-strong));}" },
+            start: { name: "lx881y", styles: "" },
+            end: { name: "lx881z", styles: "" }
         },
         isThemeable: {
-            true: { name: "o1ob20", styles: "--color-system-icon-212f69:var(--icon-b5fb58, var(--cnvs-brand-primary-base));&:focus-visible, &.focus{--color-system-icon-212f69:var(--icon-2ae7b1, var(--cnvs-brand-primary-base));}&:hover, &.hover{--color-system-icon-212f69:var(--icon-c4b8f8, var(--cnvs-brand-primary-dark));}&:active, &.active{--color-system-icon-212f69:var(--icon-93b1ce, var(--cnvs-brand-primary-darkest));}&:disabled, &.disabled{--color-system-icon-212f69:var(--icon-c34400, var(--cnvs-brand-primary-base));}" }
+            true: { name: "lx8820", styles: "--color-system-icon-212f69:var(--icon-b5fb58, var(--cnvs-brand-primary-base));&:focus-visible, &.focus{--color-system-icon-212f69:var(--icon-2ae7b1, var(--cnvs-brand-primary-base));}&:hover, &.hover{--color-system-icon-212f69:var(--icon-c4b8f8, var(--cnvs-brand-primary-dark));}&:active, &.active{--color-system-icon-212f69:var(--icon-93b1ce, var(--cnvs-brand-primary-darkest));}&:disabled, &.disabled{--color-system-icon-212f69:var(--icon-c34400, var(--cnvs-brand-primary-base));}" }
         },
         variant: {
             // Inverse Styles
-            inverse: { name: "o1ob21", styles: "--background-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-sys-color-fg-inverse);--color-system-icon-212f69:var(--icon-b5fb58, var(--cnvs-sys-color-fg-inverse));&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-sys-color-bg-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-212f69:var(--icon-2ae7b1, var(--cnvs-sys-color-fg-strong));box-shadow:inset 0 0 0 2px var(--cnvs-sys-color-border-contrast-default), 0 0 0 2px var(--cnvs-sys-color-border-inverse);}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-212f69:var(--icon-c4b8f8, var(--cnvs-sys-color-fg-strong));}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-soft);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-212f69:var(--icon-93b1ce, var(--cnvs-sys-color-fg-strong));}&:disabled, &.disabled{--background-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-sys-color-fg-inverse);--color-system-icon-212f69:var(--icon-c34400, var(--cnvs-sys-color-fg-inverse));}" }
+            inverse: { name: "lx8821", styles: "--background-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-sys-color-fg-inverse);--color-system-icon-212f69:var(--icon-b5fb58, var(--cnvs-sys-color-fg-inverse));&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-sys-color-bg-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-212f69:var(--icon-2ae7b1, var(--cnvs-sys-color-fg-strong));box-shadow:inset 0 0 0 2px var(--cnvs-sys-color-border-contrast-default), 0 0 0 2px var(--cnvs-sys-color-border-inverse);}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-212f69:var(--icon-c4b8f8, var(--cnvs-sys-color-fg-strong));}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-soft);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-212f69:var(--icon-93b1ce, var(--cnvs-sys-color-fg-strong));}&:disabled, &.disabled{--background-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-sys-color-fg-inverse);--color-system-icon-212f69:var(--icon-c34400, var(--cnvs-sys-color-fg-inverse));}" }
         }
     },
     // Compound Modifier Styles
     compound: [
         {
             modifiers: { size: 'large', iconPosition: 'only' },
-            styles: { name: "o1ob22", styles: "min-width:calc(var(--cnvs-sys-space-x4) * 3);" }
+            styles: { name: "lx8822", styles: "min-width:calc(var(--cnvs-sys-space-x4) * 3);" }
         },
         {
             modifiers: { size: 'large', iconPosition: 'start' },
-            styles: { name: "o1ob23", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x3);" }
+            styles: { name: "lx8823", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x3);" }
         },
         {
             modifiers: { size: 'large', iconPosition: 'end' },
-            styles: { name: "o1ob24", styles: "padding-inline-start:var(--cnvs-sys-space-x3);padding-inline-end:var(--cnvs-sys-space-x2);" }
+            styles: { name: "lx8824", styles: "padding-inline-start:var(--cnvs-sys-space-x3);padding-inline-end:var(--cnvs-sys-space-x2);" }
         },
         {
             modifiers: { size: 'medium', iconPosition: 'only' },
-            styles: { name: "o1ob25", styles: "min-width:var(--cnvs-sys-space-x10);" }
+            styles: { name: "lx8825", styles: "min-width:var(--cnvs-sys-space-x10);" }
         },
         {
             modifiers: { size: 'medium', iconPosition: 'start' },
-            styles: { name: "o1ob26", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x3);" }
+            styles: { name: "lx8826", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x3);" }
         },
         {
             modifiers: { size: 'medium', iconPosition: 'end' },
-            styles: { name: "o1ob27", styles: "padding-inline-start:var(--cnvs-sys-space-x3);padding-inline-end:var(--cnvs-sys-space-x2);" }
+            styles: { name: "lx8827", styles: "padding-inline-start:var(--cnvs-sys-space-x3);padding-inline-end:var(--cnvs-sys-space-x2);" }
         },
         {
             modifiers: { size: 'small', iconPosition: 'only' },
-            styles: { name: "o1ob28", styles: "min-width:var(--cnvs-sys-space-x8);" }
+            styles: { name: "lx8828", styles: "min-width:var(--cnvs-sys-space-x8);" }
         },
         {
             modifiers: { size: 'small', iconPosition: 'start' },
-            styles: { name: "o1ob29", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x3);" }
+            styles: { name: "lx8829", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x3);" }
         },
         {
             modifiers: { size: 'small', iconPosition: 'end' },
-            styles: { name: "o1ob2a", styles: "padding-inline-start:var(--cnvs-sys-space-x3);padding-inline-end:var(--cnvs-sys-space-x2);" }
+            styles: { name: "lx882a", styles: "padding-inline-start:var(--cnvs-sys-space-x3);padding-inline-end:var(--cnvs-sys-space-x2);" }
         },
         {
             modifiers: { size: 'extraSmall', iconPosition: 'only' },
-            styles: { name: "o1ob2b", styles: "min-width:var(--cnvs-sys-space-x6);" }
+            styles: { name: "lx882b", styles: "min-width:var(--cnvs-sys-space-x6);" }
         },
         {
             modifiers: { size: 'extraSmall', iconPosition: 'start' },
-            styles: { name: "o1ob2c", styles: "padding-inline-start:var(--cnvs-sys-space-x1);padding-inline-end:var(--cnvs-sys-space-x2);" }
+            styles: { name: "lx882c", styles: "padding-inline-start:var(--cnvs-sys-space-x1);padding-inline-end:var(--cnvs-sys-space-x2);" }
         },
         {
             modifiers: { size: 'extraSmall', iconPosition: 'end' },
-            styles: { name: "o1ob2d", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x1);" }
+            styles: { name: "lx882d", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x1);" }
         }
     ]
 }, "tertiary-button-4896ac");

package/dist/commonjs/button/lib/ToolbarDropdownButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarDropdownButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/ToolbarDropdownButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,SAAS,EAKV,MAAM,kCAAkC,CAAC;AAI1C,OAAO,EAAC,sBAAsB,EAAC,MAAM,qBAAqB,CAAC;AAG3D,MAAM,WAAW,0BACf,SAAQ,IAAI,CAAC,sBAAsB,EAAE,SAAS,GAAG,gBAAgB,CAAC,EAChE,SAAS;CAAG;AAgChB,eAAO,MAAM,qBAAqB,mGAuChC,CAAC"}
+{"version":3,"file":"ToolbarDropdownButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/ToolbarDropdownButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,SAAS,EAKV,MAAM,kCAAkC,CAAC;AAI1C,OAAO,EAAC,sBAAsB,EAAC,MAAM,qBAAqB,CAAC;AAE3D,MAAM,WAAW,0BACf,SAAQ,IAAI,CAAC,sBAAsB,EAAE,SAAS,GAAG,gBAAgB,CAAC,EAChE,SAAS;CAAG;AA4BhB,eAAO,MAAM,qBAAqB,mGAuChC,CAAC"}

package/dist/commonjs/button/lib/ToolbarDropdownButton.js

@@ -9,7 +9,6 @@ const tokens_1 = require("@workday/canvas-kit-react/tokens");
 const common_1 = require("@workday/canvas-kit-react/common");
 const BaseButton_1 = require("./BaseButton");
 const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
-const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const StyledToolbarDropdownButton = (0, common_1.styled)(BaseButton_1.BaseButton)({
     padding: tokens_1.space.zero,
     minWidth: tokens_1.space.l,
@@ -31,12 +30,8 @@ const StyledToolbarDropdownButton = (0, common_1.styled)(BaseButton_1.BaseButton
         width: 18, // decrease the space between a custom icon and the chevron per design
     },
     '&:focus-visible, &.focus': {
-        ...(0, common_1.focusRing)({
-            width: 2,
-            separation: 0,
-            innerColor: 'transparent',
-            outerColor: canvas_tokens_web_1.brand.common.focusOutline,
-        }),
+        // using `focusRing` in support doesn't work for components that use `styled` function because we changed the type to be `CSSObjectWithVars`. Changing this to use `boxShadow` works in support for non stencil components.
+        boxShadow: '0 0 0 0px transparent,0 0 0 2px var(--cnvs-brand-common-focus-outline)',
     },
 });
 exports.ToolbarDropdownButton = (0, common_1.createComponent)('button')({

package/dist/commonjs/button/lib/ToolbarIconButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarIconButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/ToolbarIconButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,SAAS,EAKV,MAAM,kCAAkC,CAAC;AAG1C,OAAO,EAAC,mBAAmB,EAAC,MAAM,kBAAkB,CAAC;AAGrD,MAAM,WAAW,sBACf,SAAQ,IAAI,CAAC,mBAAmB,EAAE,MAAM,GAAG,SAAS,CAAC,EACnD,SAAS;IACX,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,GAAG,SAAS,KAAK,IAAI,CAAC;IACxD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAkBD,eAAO,MAAM,iBAAiB,+FAiD5B,CAAC"}
+{"version":3,"file":"ToolbarIconButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/ToolbarIconButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,SAAS,EAKV,MAAM,kCAAkC,CAAC;AAG1C,OAAO,EAAC,mBAAmB,EAAC,MAAM,kBAAkB,CAAC;AAErD,MAAM,WAAW,sBACf,SAAQ,IAAI,CAAC,mBAAmB,EAAE,MAAM,GAAG,SAAS,CAAC,EACnD,SAAS;IACX,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,GAAG,SAAS,KAAK,IAAI,CAAC;IACxD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAcD,eAAO,MAAM,iBAAiB,+FAiD5B,CAAC"}