@workday/canvas-kit-react 15.0.0-alpha.0292-next.0 → 15.0.0-alpha.0293-next.0

package/breadcrumbs/lib/BreadcrumbsItem.tsx

@@ -7,9 +7,9 @@ import {
 import {composeHooks, createSubcomponent} from '@workday/canvas-kit-react/common';
 import {SystemIcon, systemIconStencil} from '@workday/canvas-kit-react/icon';
 import {FlexProps, mergeStyles} from '@workday/canvas-kit-react/layout';
-import {createStencil, cssVar, px2rem} from '@workday/canvas-kit-styling';
+import {createStencil, cssVar} from '@workday/canvas-kit-styling';
 import {chevronRightSmallIcon} from '@workday/canvas-system-icons-web';
-import {system} from '@workday/canvas-tokens-web';
+import {component, system} from '@workday/canvas-tokens-web';
 
 import {BreadcrumbsLink} from './BreadcrumbsLink';
 import {useBreadcrumbsModel} from './hooks/useBreadcrumbsModel';
@@ -39,7 +39,8 @@ export const breadcrumbsItemStencil = createStencil({
     alignItems: 'center',
     display: 'inline-flex',
     whiteSpace: 'nowrap',
-    [systemIconStencil.vars.size]: px2rem(20),
+    // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+    [systemIconStencil.vars.size]: cssVar(component.systemIcon.size.md, system.space.x5),
     // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
     [systemIconStencil.vars.color]: cssVar(system.color.fg.default, system.color.icon.default),
     [chevronRightIconPart]: {

package/breadcrumbs/lib/BreadcrumbsOverflowButton.tsx

@@ -9,9 +9,9 @@ import {
 import {SystemIcon, systemIconStencil} from '@workday/canvas-kit-react/icon';
 import {FlexProps} from '@workday/canvas-kit-react/layout';
 import {useMenuTarget} from '@workday/canvas-kit-react/menu';
-import {createStencil, cssVar, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
+import {createStencil, cssVar, handleCsProp} from '@workday/canvas-kit-styling';
 import {chevronRightSmallIcon, relatedActionsIcon} from '@workday/canvas-system-icons-web';
-import {system} from '@workday/canvas-tokens-web';
+import {component, system} from '@workday/canvas-tokens-web';
 
 import {useBreadcrumbsModel} from './hooks/useBreadcrumbsModel';
 
@@ -35,7 +35,8 @@ export const breadcrumbsOverflowButtonStencil = createStencil({
     display: 'flex',
     // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
     [systemIconStencil.vars.color]: cssVar(system.color.fg.default, system.color.icon.default),
-    [systemIconStencil.vars.size]: px2rem(20),
+    // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+    [systemIconStencil.vars.size]: cssVar(component.systemIcon.size.md, system.space.x5),
     [chevronRightIconPart]: {
       // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
       height: cssVar(system.size.sm, system.space.x8),

package/button/lib/ExternalHyperlink.tsx

@@ -23,6 +23,7 @@ export const externalHyperlinkStencil = createStencil({
     [externalHyperlinkIconPart]: {
       verticalAlign: 'text-top',
       [systemIconStencil.vars.color]: 'currentColor',
+      // This is still going to be `1em` to stay consistent with the font-size of the link.
       [systemIconStencil.vars.size]: '1em',
       width: calc.subtract('1em', px2rem(1)),
       // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token

package/button/lib/parts/ButtonLabelIcon.tsx

@@ -1,6 +1,6 @@
 import {createComponent} from '@workday/canvas-kit-react/common';
 import {SystemIcon, SystemIconProps, systemIconStencil} from '@workday/canvas-kit-react/icon';
-import {createStencil, cssVar, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
+import {createStencil, cssVar, handleCsProp} from '@workday/canvas-kit-styling';
 import {component, system} from '@workday/canvas-tokens-web';
 
 import {ButtonSizes} from '../types';
@@ -37,7 +37,7 @@ const buttonIconStencil = createStencil({
       extraSmall: {
         // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
         // TODO (icon token): Revisit size variable to icon size token
-        [systemIconStencil.vars.size]: cssVar(component.systemIcon.size.sm, px2rem(18)),
+        [systemIconStencil.vars.size]: cssVar(component.systemIcon.size.xs, system.space.x4),
       },
       small: {
         // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token

package/dist/commonjs/breadcrumbs/lib/BreadcrumbsItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbsItem.d.ts","sourceRoot":"","sources":["../../../../breadcrumbs/lib/BreadcrumbsItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,EAAC,SAAS,EAAc,MAAM,kCAAkC,CAAC;AAQxE,MAAM,WAAW,oBAAqB,SAAQ,SAAS;IACrD;;;;;;OAMG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,sBAAsB;;;;oBAwBjC,CAAC;AAEH,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qPAAgE,CAAC;AAEhG,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkB1B,CAAC"}
+{"version":3,"file":"BreadcrumbsItem.d.ts","sourceRoot":"","sources":["../../../../breadcrumbs/lib/BreadcrumbsItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,EAAC,SAAS,EAAc,MAAM,kCAAkC,CAAC;AAQxE,MAAM,WAAW,oBAAqB,SAAQ,SAAS;IACrD;;;;;;OAMG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,sBAAsB;;;;oBAyBjC,CAAC;AAEH,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qPAAgE,CAAC;AAEhG,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkB1B,CAAC"}

package/dist/commonjs/breadcrumbs/lib/BreadcrumbsItem.js

@@ -15,8 +15,8 @@ exports.breadcrumbsItemStencil = (0, canvas_kit_styling_1.createStencil)({
     parts: {
         chevronRightIcon: 'breadcrumbs-item-chevron-right-icon',
     },
-    base: { name: "rw81u", styles: "box-sizing:border-box;align-items:center;display:inline-flex;white-space:nowrap;--size-svg-2af90b:1.25rem;--color-system-icon-f4b83b:var(--cnvs-sys-color-fg-default, var(--cnvs-sys-color-icon-default));[data-part=\"breadcrumbs-item-chevron-right-icon\"]{height:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8));width:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8));justify-content:center;align-items:center;display:inline-flex;:dir(rtl){transform:scaleX(-1);}}" }
-}, "breadcrumbs-item-e4b0ee");
+    base: { name: "36zw75", styles: "box-sizing:border-box;align-items:center;display:inline-flex;white-space:nowrap;--size-svg-2af90b:var(--cnvs-component-system-icon-size-md, var(--cnvs-sys-space-x5));--color-system-icon-f4b83b:var(--cnvs-sys-color-fg-default, var(--cnvs-sys-color-icon-default));[data-part=\"breadcrumbs-item-chevron-right-icon\"]{height:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8));width:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8));justify-content:center;align-items:center;display:inline-flex;:dir(rtl){transform:scaleX(-1);}}" }
+}, "breadcrumbs-item-aaa4ee");
 exports.useBreadcrumbsItem = (0, common_1.composeHooks)(collection_1.useOverflowListItemMeasure, collection_1.useListItemRegister);
 exports.BreadcrumbsItem = (0, common_1.createSubcomponent)('li')({
     displayName: 'Breadcrumbs.Item',

package/dist/commonjs/breadcrumbs/lib/BreadcrumbsOverflowButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbsOverflowButton.d.ts","sourceRoot":"","sources":["../../../../breadcrumbs/lib/BreadcrumbsOverflowButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,mBAAmB,EAAC,MAAM,kCAAkC,CAAC;AASrF,OAAO,EAAC,SAAS,EAAC,MAAM,kCAAkC,CAAC;AAQ3D,MAAM,WAAW,8BAA+B,SAAQ,IAAI,CAAC,mBAAmB,EAAE,OAAO,CAAC;IACxF,YAAY,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,eAAO,MAAM,gCAAgC;;;;;;oBAwB3C,CAAC;AAEH,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;8aAOxC,CAAC;AAEF,eAAO,MAAM,yBAAyB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoBpC,CAAC"}
+{"version":3,"file":"BreadcrumbsOverflowButton.d.ts","sourceRoot":"","sources":["../../../../breadcrumbs/lib/BreadcrumbsOverflowButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,mBAAmB,EAAC,MAAM,kCAAkC,CAAC;AASrF,OAAO,EAAC,SAAS,EAAC,MAAM,kCAAkC,CAAC;AAQ3D,MAAM,WAAW,8BAA+B,SAAQ,IAAI,CAAC,mBAAmB,EAAE,OAAO,CAAC;IACxF,YAAY,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,eAAO,MAAM,gCAAgC;;;;;;oBAyB3C,CAAC;AAEH,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;8aAOxC,CAAC;AAEF,eAAO,MAAM,yBAAyB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoBpC,CAAC"}

package/dist/commonjs/breadcrumbs/lib/BreadcrumbsOverflowButton.js

@@ -16,8 +16,8 @@ exports.breadcrumbsOverflowButtonStencil = (0, canvas_kit_styling_1.createStenci
         overflowButton: 'breadcrumbs-overflow-button',
         chevronRightIcon: 'breadcrumbs-overflow-button-chevron-right-icon',
     },
-    base: { name: "33m0m9", styles: "box-sizing:border-box;align-items:center;display:flex;--color-system-icon-f4b83b:var(--cnvs-sys-color-fg-default, var(--cnvs-sys-color-icon-default));--size-svg-2af90b:1.25rem;[data-part=\"breadcrumbs-overflow-button-chevron-right-icon\"]{height:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8));width:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8));justify-content:center;align-items:center;display:inline-flex;:dir(rtl){transform:scaleX(-1);}}" }
-}, "breadcrumbs-overflow-button-1992a6");
+    base: { name: "p6eer", styles: "box-sizing:border-box;align-items:center;display:flex;--color-system-icon-f4b83b:var(--cnvs-sys-color-fg-default, var(--cnvs-sys-color-icon-default));--size-svg-2af90b:var(--cnvs-component-system-icon-size-md, var(--cnvs-sys-space-x5));[data-part=\"breadcrumbs-overflow-button-chevron-right-icon\"]{height:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8));width:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8));justify-content:center;align-items:center;display:inline-flex;:dir(rtl){transform:scaleX(-1);}}" }
+}, "breadcrumbs-overflow-button-2bec72");
 exports.useBreadcrumbsOverflowButton = (0, common_1.composeHooks)((0, common_1.createElemPropsHook)(useBreadcrumbsModel_1.useBreadcrumbsModel)(() => ({
     'aria-haspopup': true,
     'aria-controls': 'menu',

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

@@ -1 +1 @@
-{"version":3,"file":"ExternalHyperlink.d.ts","sourceRoot":"","sources":["../../../../button/lib/ExternalHyperlink.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAC,cAAc,EAAmB,MAAM,aAAa,CAAC;AAE7D,MAAM,WAAW,sBAAuB,SAAQ,cAAc;IAC5D;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCA0BnC,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,iBAAiB,0FAsB5B,CAAC"}
+{"version":3,"file":"ExternalHyperlink.d.ts","sourceRoot":"","sources":["../../../../button/lib/ExternalHyperlink.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAC,cAAc,EAAmB,MAAM,aAAa,CAAC;AAE7D,MAAM,WAAW,sBAAuB,SAAQ,cAAc;IAC5D;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCA2BnC,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,iBAAiB,0FAsB5B,CAAC"}

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

@@ -13,7 +13,7 @@ exports.externalHyperlinkStencil = (0, canvas_kit_styling_1.createStencil)({
     parts: {
         externalHyperlinkIcon: 'external-hyperlink-icon',
     },
-    base: { name: "2q9ziq", styles: "box-sizing:border-box;[data-part=\"external-hyperlink-icon\"]{vertical-align:text-top;--color-system-icon-f4b83b:currentColor;--size-svg-2af90b:1em;width:calc(1em - 0.0625rem);min-width:calc(var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4)) - 0.0625rem);margin-inline-start:calc(var(--cnvs-sys-space-x1) - 0.125rem);& > svg{min-width:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4));min-height:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4));}:dir(rtl){transform:rotate(270deg);}}" }
+    base: { name: "2z18fi", styles: "box-sizing:border-box;[data-part=\"external-hyperlink-icon\"]{vertical-align:text-top;--color-system-icon-f4b83b:currentColor;--size-svg-2af90b:1em;width:calc(1em - 0.0625rem);min-width:calc(var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4)) - 0.0625rem);margin-inline-start:calc(var(--cnvs-sys-space-x1) - 0.125rem);& > svg{min-width:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4));min-height:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4));}:dir(rtl){transform:rotate(270deg);}}" }
 }, "external-hyperlink-a82b92");
 /**
  * `ExternalHyperlink`s also have an `inverse` variant. Use this variant when you need to place the

package/dist/commonjs/button/lib/parts/ButtonLabelIcon.js

@@ -7,16 +7,16 @@ const icon_1 = require("@workday/canvas-kit-react/icon");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const buttonIconStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "3gw672", styles: "box-sizing:border-box;display:inline-block;" },
+    base: { name: "41m8ld", styles: "box-sizing:border-box;display:inline-block;" },
     modifiers: {
         size: {
-            extraSmall: { name: "1bw9uz", styles: "--size-svg-2af90b:var(--cnvs-component-system-icon-size-sm, 1.125rem);" },
-            small: { name: "45j5ng", styles: "--size-svg-2af90b:var(--cnvs-component-system-icon-size-md, var(--cnvs-sys-space-x5));" },
-            medium: { name: "42p39h", styles: "--size-svg-2af90b:var(--cnvs-component-system-icon-size-md, var(--cnvs-sys-space-x5));" },
-            large: { name: "39hwsc", styles: "--size-svg-2af90b:var(--cnvs-component-system-icon-size-lg, var(--cnvs-sys-space-x6));" }
+            extraSmall: { name: "1xi210", styles: "--size-svg-2af90b:var(--cnvs-component-system-icon-size-xs, var(--cnvs-sys-space-x4));" },
+            small: { name: "12zb7m", styles: "--size-svg-2af90b:var(--cnvs-component-system-icon-size-md, var(--cnvs-sys-space-x5));" },
+            medium: { name: "2q46eu", styles: "--size-svg-2af90b:var(--cnvs-component-system-icon-size-md, var(--cnvs-sys-space-x5));" },
+            large: { name: "19x041", styles: "--size-svg-2af90b:var(--cnvs-component-system-icon-size-lg, var(--cnvs-sys-space-x6));" }
         }
     }
-}, "button-icon-282a77");
+}, "button-icon-e1f69e");
 exports.ButtonLabelIcon = (0, common_1.createComponent)('span')({
     Component: ({ icon, size = 'medium', shouldMirrorIcon = false, shouldMirrorIconInRTL = false, ...elemProps }, ref, Element) => {
         if (icon === undefined) {

package/dist/commonjs/icon/lib/SystemIconCircle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SystemIconCircle.d.ts","sourceRoot":"","sources":["../../../../icon/lib/SystemIconCircle.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,OAAO,EAMR,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAC,gBAAgB,EAAC,MAAM,kCAAkC,CAAC;AAOlE,oBAAY,oBAAoB;IAC9B,EAAE,KAAK;IACP,CAAC,KAAK;IACN,CAAC,KAAK;IACN,CAAC,KAAK;IACN,EAAE,KAAK;IACP,GAAG,MAAM;CACV;AAcD,KAAK,2BAA2B,GAAG;IACjC;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,oBAAoB,GAAG,MAAM,GAAG,MAAM,CAAC;IAC9C;;;;;OAKG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,OAAO,CAAC;AAEZ;;;GAGG;AACH,MAAM,MAAM,qBAAqB,GAC7B,CAAC,2BAA2B,GAAG;IAAC,UAAU,CAAC,EAAE,KAAK,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAC,CAAC,GACnE,CAAC,2BAA2B,GAAG;IAAC,UAAU,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAC,CAAC,CAAC;AAExE,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;gBA+ClC,CAAC;AAEH,eAAO,MAAM,gBAAgB,4FAsC3B,CAAC"}
+{"version":3,"file":"SystemIconCircle.d.ts","sourceRoot":"","sources":["../../../../icon/lib/SystemIconCircle.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,OAAO,EAMR,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAC,gBAAgB,EAAC,MAAM,kCAAkC,CAAC;AAOlE,oBAAY,oBAAoB;IAC9B,EAAE,KAAK;IACP,CAAC,KAAK;IACN,CAAC,KAAK;IACN,CAAC,KAAK;IACN,EAAE,KAAK;IACP,GAAG,MAAM;CACV;AAcD,KAAK,2BAA2B,GAAG;IACjC;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,oBAAoB,GAAG,MAAM,GAAG,MAAM,CAAC;IAC9C;;;;;OAKG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,OAAO,CAAC;AAEZ;;;GAGG;AACH,MAAM,MAAM,qBAAqB,GAC7B,CAAC,2BAA2B,GAAG;IAAC,UAAU,CAAC,EAAE,KAAK,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAC,CAAC,GACnE,CAAC,2BAA2B,GAAG;IAAC,UAAU,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAC,CAAC,CAAC;AAExE,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;gBAgDlC,CAAC;AAEH,eAAO,MAAM,gBAAgB,4FAsC3B,CAAC"}

package/dist/commonjs/icon/lib/SystemIconCircle.js

@@ -34,10 +34,10 @@ exports.systemIconCircleStencil = (0, canvas_kit_styling_1.createStencil)({
         color: '',
         size: '',
     },
-    base: { name: "3wnloq", styles: "box-sizing:border-box;background:var(--background-system-icon-circle-20bf5c, var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft)));display:flex;align-items:center;justify-content:center;padding:0;border:none;border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round));overflow:hidden;width:var(--size-system-icon-circle-20bf5c, var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10)));height:var(--size-system-icon-circle-20bf5c, var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10)));--size-svg-2af90b:calc(var(--size-system-icon-circle-20bf5c, var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10))) * 0.625);--color-system-icon-f4b83b:var(--color-system-icon-circle-20bf5c);& img{width:100%;height:100%;}" },
+    base: { name: "2u2paw", styles: "box-sizing:border-box;background:var(--background-system-icon-circle-20bf5c, var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft)));display:flex;align-items:center;justify-content:center;padding:0;border:none;border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round));overflow:hidden;width:var(--size-system-icon-circle-20bf5c, var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10)));height:var(--size-system-icon-circle-20bf5c, var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10)));--size-svg-2af90b:calc(var(--size-system-icon-circle-20bf5c, var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10))) * 0.625);--color-system-icon-f4b83b:var(--color-system-icon-circle-20bf5c);& img{width:100%;height:100%;}" },
     modifiers: {
         inverse: {
-            true: { name: "1pzhcr", styles: "background:var(--background-system-icon-circle-20bf5c, var(--cnvs-sys-color-accent-info, var(--cnvs-sys-color-bg-primary-default)));--color-system-icon-f4b83b:var(--color-system-icon-circle-20bf5c, var(--cnvs-sys-color-fg-inverse));" }
+            true: { name: "31wkk0", styles: "background:var(--background-system-icon-circle-20bf5c, var(--cnvs-sys-color-accent-info, var(--cnvs-sys-color-bg-primary-default)));--color-system-icon-f4b83b:var(--color-system-icon-circle-20bf5c, var(--cnvs-sys-color-fg-inverse));" }
         }
     }
 }, "system-icon-circle-20bf5c");

package/dist/commonjs/pill/lib/PillIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PillIcon.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillIcon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,eAAe,EAAoB,MAAM,gCAAgC,CAAC;AAQ9F,MAAM,WAAW,aAAc,SAAQ,OAAO,CAAC,eAAe,CAAC;CAAG;AAElE,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAQ1B,CAAC;AAEH,eAAO,MAAM,QAAQ;;;;;;EAWnB,CAAC"}
+{"version":3,"file":"PillIcon.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillIcon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,eAAe,EAAoB,MAAM,gCAAgC,CAAC;AAQ9F,MAAM,WAAW,aAAc,SAAQ,OAAO,CAAC,eAAe,CAAC;CAAG;AAElE,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAS1B,CAAC;AAEH,eAAO,MAAM,QAAQ;;;;;;EAWnB,CAAC"}

package/dist/commonjs/pill/lib/PillIcon.js

@@ -11,8 +11,8 @@ const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const usePillModel_1 = require("./usePillModel");
 exports.pillIconStencil = (0, canvas_kit_styling_1.createStencil)({
     extends: icon_1.systemIconStencil,
-    base: { name: "1quuc5", styles: "box-sizing:border-box;margin-inline-start:calc(var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1)) * -1);--size-svg-2af90b:1.25rem;flex:0 0 auto;" }
-}, "pill-icon-bc8987");
+    base: { name: "vo5zi", styles: "box-sizing:border-box;margin-inline-start:calc(var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1)) * -1);--size-svg-2af90b:var(--cnvs-component-system-icon-size-sm, 1.125rem);flex:0 0 auto;" }
+}, "pill-icon-dd844e");
 exports.PillIcon = (0, common_1.createSubcomponent)('span')({
     modelHook: usePillModel_1.usePillModel,
 })(({ icon, ...elemProps }, Element) => {

package/dist/commonjs/pill/lib/PillIconButton.js

@@ -12,8 +12,8 @@ const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const usePillModel_1 = require("./usePillModel");
 exports.pillIconButtonStencil = (0, canvas_kit_styling_1.createStencil)({
     extends: button_1.buttonStencil,
-    base: { name: "1ljfob", styles: "box-sizing:border-box;margin-inline-end:calc(0.4375rem * -1);margin-inline-start:calc(0.125rem * -1);border-radius:0.125rem;height:var(--cnvs-sys-size-xxs, 1.25rem);width:var(--cnvs-sys-size-xxs, 1.25rem);padding:0;overflow:visible;flex:0 0 auto;--border-button-b66707:var(--cnvs-sys-color-border-transparent);--background-button-b66707:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-alt-default));--color-system-icon-f4b83b:var(--cnvs-sys-color-fg-strong);--size-svg-2af90b:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6));::after{content:\"\";height:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8));width:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8));position:absolute;left:calc(0.4375rem * -1);bottom:calc(0.4375rem * -1);margin:0;pointer-events:all;}&:focus-visible, &.focus{--border-button-b66707:var(--cnvs-sys-color-border-transparent);box-shadow:0 0 0 0px var(--cnvs-sys-color-border-transparent), 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}&:hover, &.hover{--border-button-b66707:var(--cnvs-sys-color-border-transparent);}&:active, &.active{--border-button-b66707:var(--cnvs-sys-color-border-transparent);}&:disabled, &.disabled{--border-button-b66707:var(--cnvs-sys-color-border-transparent);--color-system-icon-f4b83b:var(--cnvs-sys-color-fg-disabled);}" }
-}, "pill-icon-button-ce05c1");
+    base: { name: "5szxy", styles: "box-sizing:border-box;margin-inline-end:calc(0.4375rem * -1);margin-inline-start:calc(0.125rem * -1);border-radius:0.125rem;height:var(--cnvs-sys-size-xxs, 1.25rem);width:var(--cnvs-sys-size-xxs, 1.25rem);padding:0;overflow:visible;flex:0 0 auto;--border-button-b66707:var(--cnvs-sys-color-border-transparent);--background-button-b66707:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-alt-default));--color-system-icon-f4b83b:var(--cnvs-sys-color-fg-strong);--size-svg-2af90b:var(--cnvs-component-system-icon-size-sm, 1.125rem);::after{content:\"\";height:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8));width:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8));position:absolute;left:calc(0.4375rem * -1);bottom:calc(0.4375rem * -1);margin:0;pointer-events:all;}&:focus-visible, &.focus{--border-button-b66707:var(--cnvs-sys-color-border-transparent);box-shadow:0 0 0 0px var(--cnvs-sys-color-border-transparent), 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}&:hover, &.hover{--border-button-b66707:var(--cnvs-sys-color-border-transparent);}&:active, &.active{--border-button-b66707:var(--cnvs-sys-color-border-transparent);}&:disabled, &.disabled{--border-button-b66707:var(--cnvs-sys-color-border-transparent);--color-system-icon-f4b83b:var(--cnvs-sys-color-fg-disabled);}" }
+}, "pill-icon-button-428f34");
 exports.PillIconButton = (0, common_1.createSubcomponent)('button')({
     modelHook: usePillModel_1.usePillModel,
 })(({ size, icon, children, 'aria-label': ariaLabel = '', ...elemProps }, Element, model) => {

package/dist/commonjs/tabs/lib/TabsItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabsItem.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/TabsItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,EAEL,YAAY,EAQb,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,GAAG,EAAE,SAAS,EAAc,MAAM,kCAAkC,CAAC;AAO7E,MAAM,WAAW,aACf,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,KAAK,CAAC,EACrC,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;IACjC;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;;;;;;OAaG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAgID,eAAO,MAAM,aAAa,sFASxB,CAAC;AAEH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uEAiBvB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiBnB,CAAC"}
+{"version":3,"file":"TabsItem.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/TabsItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,EAEL,YAAY,EAQb,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,GAAG,EAAE,SAAS,EAAc,MAAM,kCAAkC,CAAC;AAO7E,MAAM,WAAW,aACf,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,KAAK,CAAC,EACrC,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;IACjC;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;;;;;;OAaG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAiID,eAAO,MAAM,aAAa,sFASxB,CAAC;AAEH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uEAiBvB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiBnB,CAAC"}

package/dist/commonjs/tabs/lib/TabsItem.js

@@ -12,8 +12,8 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const useTabsModel_1 = require("./useTabsModel");
 const tabItemStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "rlvg5", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large));line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-base-letter-spacing-150));font-weight:var(--cnvs-sys-font-weight-medium);border:none;background-color:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default));flex:0 0 auto;min-width:0;align-items:center;padding:0 var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4));height:var(--cnvs-sys-size-lg, 3rem);cursor:pointer;color:var(--cnvs-sys-color-fg-muted-default);position:relative;border-radius:var(--cnvs-sys-shape-md, var(--cnvs-sys-space-x2)) var(--cnvs-sys-shape-md, var(--cnvs-sys-space-x2)) var(--cnvs-sys-shape-none, var(--cnvs-sys-space-zero)) var(--cnvs-sys-shape-zero, var(--cnvs-sys-space-zero));transition:background 150ms ease, color 150ms ease;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;--color-system-icon-f4b83b:currentColor;--size-svg-2af90b:1.25rem;&:has(span){display:flex;gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2));}&:hover, &.hover, &:focus-visible, &.focus{background-color:var(--cnvs-sys-color-surface-overlay-hover-default, var(--cnvs-sys-color-bg-alt-default));color:var(--cnvs-sys-color-fg-muted-strong, var(--cnvs-sys-color-fg-contrast-default));--color-system-icon-f4b83b:var(--cnvs-sys-color-fg-muted-strong, var(--cnvs-sys-color-fg-contrast-default));}&:focus-visible, &.focus{outline:0.125rem solid transparent;box-shadow:inset 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1)), inset 0 0 0 2px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0));--boxShadowInner-button-b66707:var(--cnvs-sys-color-focus-inverse, var(--cnvs-base-palette-neutral-0));--boxShadowOuter-button-b66707:var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline));color:var(--cnvs-sys-color-fg-strong, var(--cnvs-sys-color-fg-contrast-default));--color-system-icon-f4b83b:var(--cnvs-sys-color-fg-strong, var(--cnvs-sys-color-icon-strong));}&:disabled, &.disabled, &[aria-disabled]{opacity:var(--cnvs-sys-opacity-disabled, 0.4);&:hover{cursor:auto;background-color:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default));--color-system-icon-f4b83b:var(--cnvs-sys-color-fg-muted-default, var(--cnvs-sys-color-fg-disabled));}}&[aria-selected=true]{color:var(--cnvs-sys-color-brand-fg-primary-default, var(--cnvs-brand-primary-base));cursor:default;--color-system-icon-f4b83b:var(--cnvs-sys-color-brand-fg-primary-default, var(--cnvs-brand-primary-base));&:after{position:absolute;border-bottom:var(--cnvs-sys-space-x1) solid transparent;border-radius:var(--cnvs-sys-shape-md, var(--cnvs-sys-space-x2)) var(--cnvs-sys-shape-md, var(--cnvs-sys-space-x2)) var(--cnvs-sys-shape-none, var(--cnvs-sys-space-zero)) var(--cnvs-sys-shape-zero, var(--cnvs-sys-space-zero));background-color:var(--cnvs-sys-color-brand-fg-primary-default, var(--cnvs-brand-primary-base));bottom:var(--cnvs-sys-padding-none, var(--cnvs-sys-space-zero));content:'';left:var(--cnvs-sys-padding-none, var(--cnvs-sys-space-zero));margin-block-start:calc(calc(var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2)) / var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1))) * -1);width:100%;}&:hover, &.hover, &:focus-visible, &.focus{background-color:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default));color:var(--cnvs-sys-color-brand-fg-primary-default, var(--cnvs-brand-primary-base));}}" }
-}, "tab-item-c2fa32");
+    base: { name: "2f3l6u", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large));line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-base-letter-spacing-150));font-weight:var(--cnvs-sys-font-weight-medium);border:none;background-color:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default));flex:0 0 auto;min-width:0;align-items:center;padding:0 var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4));height:var(--cnvs-sys-size-lg, 3rem);cursor:pointer;color:var(--cnvs-sys-color-fg-muted-default);position:relative;border-radius:var(--cnvs-sys-shape-md, var(--cnvs-sys-space-x2)) var(--cnvs-sys-shape-md, var(--cnvs-sys-space-x2)) var(--cnvs-sys-shape-none, var(--cnvs-sys-space-zero)) var(--cnvs-sys-shape-zero, var(--cnvs-sys-space-zero));transition:background 150ms ease, color 150ms ease;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;--color-system-icon-f4b83b:currentColor;--size-svg-2af90b:var(--cnvs-component-system-icon-size-md, var(--cnvs-sys-space-x5));&:has(span){display:flex;gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2));}&:hover, &.hover, &:focus-visible, &.focus{background-color:var(--cnvs-sys-color-surface-overlay-hover-default, var(--cnvs-sys-color-bg-alt-default));color:var(--cnvs-sys-color-fg-muted-strong, var(--cnvs-sys-color-fg-contrast-default));--color-system-icon-f4b83b:var(--cnvs-sys-color-fg-muted-strong, var(--cnvs-sys-color-fg-contrast-default));}&:focus-visible, &.focus{outline:0.125rem solid transparent;box-shadow:inset 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1)), inset 0 0 0 2px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0));--boxShadowInner-button-b66707:var(--cnvs-sys-color-focus-inverse, var(--cnvs-base-palette-neutral-0));--boxShadowOuter-button-b66707:var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline));color:var(--cnvs-sys-color-fg-strong, var(--cnvs-sys-color-fg-contrast-default));--color-system-icon-f4b83b:var(--cnvs-sys-color-fg-strong, var(--cnvs-sys-color-icon-strong));}&:disabled, &.disabled, &[aria-disabled]{opacity:var(--cnvs-sys-opacity-disabled, 0.4);&:hover{cursor:auto;background-color:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default));--color-system-icon-f4b83b:var(--cnvs-sys-color-fg-muted-default, var(--cnvs-sys-color-fg-disabled));}}&[aria-selected=true]{color:var(--cnvs-sys-color-brand-fg-primary-default, var(--cnvs-brand-primary-base));cursor:default;--color-system-icon-f4b83b:var(--cnvs-sys-color-brand-fg-primary-default, var(--cnvs-brand-primary-base));&:after{position:absolute;border-bottom:var(--cnvs-sys-space-x1) solid transparent;border-radius:var(--cnvs-sys-shape-md, var(--cnvs-sys-space-x2)) var(--cnvs-sys-shape-md, var(--cnvs-sys-space-x2)) var(--cnvs-sys-shape-none, var(--cnvs-sys-space-zero)) var(--cnvs-sys-shape-zero, var(--cnvs-sys-space-zero));background-color:var(--cnvs-sys-color-brand-fg-primary-default, var(--cnvs-brand-primary-base));bottom:var(--cnvs-sys-padding-none, var(--cnvs-sys-space-zero));content:'';left:var(--cnvs-sys-padding-none, var(--cnvs-sys-space-zero));margin-block-start:calc(calc(var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2)) / var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1))) * -1);width:100%;}&:hover, &.hover, &:focus-visible, &.focus{background-color:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default));color:var(--cnvs-sys-color-brand-fg-primary-default, var(--cnvs-brand-primary-base));}}" }
+}, "tab-item-917c0e");
 exports.StyledTabItem = (0, common_1.createComponent)('button')({
     displayName: 'StyledTabItem',
     Component: ({ children, ...elemProps }, ref, Element) => {

package/dist/es6/breadcrumbs/lib/BreadcrumbsItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbsItem.d.ts","sourceRoot":"","sources":["../../../../breadcrumbs/lib/BreadcrumbsItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,EAAC,SAAS,EAAc,MAAM,kCAAkC,CAAC;AAQxE,MAAM,WAAW,oBAAqB,SAAQ,SAAS;IACrD;;;;;;OAMG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,sBAAsB;;;;oBAwBjC,CAAC;AAEH,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qPAAgE,CAAC;AAEhG,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkB1B,CAAC"}
+{"version":3,"file":"BreadcrumbsItem.d.ts","sourceRoot":"","sources":["../../../../breadcrumbs/lib/BreadcrumbsItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,EAAC,SAAS,EAAc,MAAM,kCAAkC,CAAC;AAQxE,MAAM,WAAW,oBAAqB,SAAQ,SAAS;IACrD;;;;;;OAMG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,sBAAsB;;;;oBAyBjC,CAAC;AAEH,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qPAAgE,CAAC;AAEhG,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkB1B,CAAC"}

package/dist/es6/breadcrumbs/lib/BreadcrumbsItem.js

@@ -3,17 +3,17 @@ import { useListItemRegister, useOverflowListItemMeasure, } from '@workday/canva
 import { composeHooks, createSubcomponent } from '@workday/canvas-kit-react/common';
 import { SystemIcon, systemIconStencil } from '@workday/canvas-kit-react/icon';
 import { mergeStyles } from '@workday/canvas-kit-react/layout';
-import { createStencil, cssVar, px2rem } from '@workday/canvas-kit-styling';
+import { createStencil, cssVar } from '@workday/canvas-kit-styling';
 import { chevronRightSmallIcon } from '@workday/canvas-system-icons-web';
-import { system } from '@workday/canvas-tokens-web';
+import { component, system } from '@workday/canvas-tokens-web';
 import { BreadcrumbsLink } from './BreadcrumbsLink';
 import { useBreadcrumbsModel } from './hooks/useBreadcrumbsModel';
 export const breadcrumbsItemStencil = createStencil({
     parts: {
         chevronRightIcon: 'breadcrumbs-item-chevron-right-icon',
     },
-    base: { name: "rw81u", styles: "box-sizing:border-box;align-items:center;display:inline-flex;white-space:nowrap;--size-svg-2af90b:1.25rem;--color-system-icon-f4b83b:var(--cnvs-sys-color-fg-default, var(--cnvs-sys-color-icon-default));[data-part=\"breadcrumbs-item-chevron-right-icon\"]{height:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8));width:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8));justify-content:center;align-items:center;display:inline-flex;:dir(rtl){transform:scaleX(-1);}}" }
-}, "breadcrumbs-item-e4b0ee");
+    base: { name: "36zw75", styles: "box-sizing:border-box;align-items:center;display:inline-flex;white-space:nowrap;--size-svg-2af90b:var(--cnvs-component-system-icon-size-md, var(--cnvs-sys-space-x5));--color-system-icon-f4b83b:var(--cnvs-sys-color-fg-default, var(--cnvs-sys-color-icon-default));[data-part=\"breadcrumbs-item-chevron-right-icon\"]{height:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8));width:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8));justify-content:center;align-items:center;display:inline-flex;:dir(rtl){transform:scaleX(-1);}}" }
+}, "breadcrumbs-item-aaa4ee");
 export const useBreadcrumbsItem = composeHooks(useOverflowListItemMeasure, useListItemRegister);
 export const BreadcrumbsItem = createSubcomponent('li')({
     displayName: 'Breadcrumbs.Item',

package/dist/es6/breadcrumbs/lib/BreadcrumbsOverflowButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbsOverflowButton.d.ts","sourceRoot":"","sources":["../../../../breadcrumbs/lib/BreadcrumbsOverflowButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,mBAAmB,EAAC,MAAM,kCAAkC,CAAC;AASrF,OAAO,EAAC,SAAS,EAAC,MAAM,kCAAkC,CAAC;AAQ3D,MAAM,WAAW,8BAA+B,SAAQ,IAAI,CAAC,mBAAmB,EAAE,OAAO,CAAC;IACxF,YAAY,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,eAAO,MAAM,gCAAgC;;;;;;oBAwB3C,CAAC;AAEH,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;8aAOxC,CAAC;AAEF,eAAO,MAAM,yBAAyB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoBpC,CAAC"}
+{"version":3,"file":"BreadcrumbsOverflowButton.d.ts","sourceRoot":"","sources":["../../../../breadcrumbs/lib/BreadcrumbsOverflowButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,mBAAmB,EAAC,MAAM,kCAAkC,CAAC;AASrF,OAAO,EAAC,SAAS,EAAC,MAAM,kCAAkC,CAAC;AAQ3D,MAAM,WAAW,8BAA+B,SAAQ,IAAI,CAAC,mBAAmB,EAAE,OAAO,CAAC;IACxF,YAAY,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,eAAO,MAAM,gCAAgC;;;;;;oBAyB3C,CAAC;AAEH,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;8aAOxC,CAAC;AAEF,eAAO,MAAM,yBAAyB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoBpC,CAAC"}

package/dist/es6/breadcrumbs/lib/BreadcrumbsOverflowButton.js

@@ -4,17 +4,17 @@ import { useOverflowListTarget } from '@workday/canvas-kit-react/collection';
 import { composeHooks, createElemPropsHook, createSubcomponent, subModelHook, } from '@workday/canvas-kit-react/common';
 import { SystemIcon, systemIconStencil } from '@workday/canvas-kit-react/icon';
 import { useMenuTarget } from '@workday/canvas-kit-react/menu';
-import { createStencil, cssVar, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
+import { createStencil, cssVar, handleCsProp } from '@workday/canvas-kit-styling';
 import { chevronRightSmallIcon, relatedActionsIcon } from '@workday/canvas-system-icons-web';
-import { system } from '@workday/canvas-tokens-web';
+import { component, system } from '@workday/canvas-tokens-web';
 import { useBreadcrumbsModel } from './hooks/useBreadcrumbsModel';
 export const breadcrumbsOverflowButtonStencil = createStencil({
     parts: {
         overflowButton: 'breadcrumbs-overflow-button',
         chevronRightIcon: 'breadcrumbs-overflow-button-chevron-right-icon',
     },
-    base: { name: "33m0m9", styles: "box-sizing:border-box;align-items:center;display:flex;--color-system-icon-f4b83b:var(--cnvs-sys-color-fg-default, var(--cnvs-sys-color-icon-default));--size-svg-2af90b:1.25rem;[data-part=\"breadcrumbs-overflow-button-chevron-right-icon\"]{height:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8));width:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8));justify-content:center;align-items:center;display:inline-flex;:dir(rtl){transform:scaleX(-1);}}" }
-}, "breadcrumbs-overflow-button-1992a6");
+    base: { name: "p6eer", styles: "box-sizing:border-box;align-items:center;display:flex;--color-system-icon-f4b83b:var(--cnvs-sys-color-fg-default, var(--cnvs-sys-color-icon-default));--size-svg-2af90b:var(--cnvs-component-system-icon-size-md, var(--cnvs-sys-space-x5));[data-part=\"breadcrumbs-overflow-button-chevron-right-icon\"]{height:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8));width:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8));justify-content:center;align-items:center;display:inline-flex;:dir(rtl){transform:scaleX(-1);}}" }
+}, "breadcrumbs-overflow-button-2bec72");
 export const useBreadcrumbsOverflowButton = composeHooks(createElemPropsHook(useBreadcrumbsModel)(() => ({
     'aria-haspopup': true,
     'aria-controls': 'menu',

package/dist/es6/button/lib/ExternalHyperlink.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExternalHyperlink.d.ts","sourceRoot":"","sources":["../../../../button/lib/ExternalHyperlink.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAC,cAAc,EAAmB,MAAM,aAAa,CAAC;AAE7D,MAAM,WAAW,sBAAuB,SAAQ,cAAc;IAC5D;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCA0BnC,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,iBAAiB,0FAsB5B,CAAC"}
+{"version":3,"file":"ExternalHyperlink.d.ts","sourceRoot":"","sources":["../../../../button/lib/ExternalHyperlink.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAC,cAAc,EAAmB,MAAM,aAAa,CAAC;AAE7D,MAAM,WAAW,sBAAuB,SAAQ,cAAc;IAC5D;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCA2BnC,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,iBAAiB,0FAsB5B,CAAC"}

package/dist/es6/button/lib/ExternalHyperlink.js

@@ -10,7 +10,7 @@ export const externalHyperlinkStencil = createStencil({
     parts: {
         externalHyperlinkIcon: 'external-hyperlink-icon',
     },
-    base: { name: "2q9ziq", styles: "box-sizing:border-box;[data-part=\"external-hyperlink-icon\"]{vertical-align:text-top;--color-system-icon-f4b83b:currentColor;--size-svg-2af90b:1em;width:calc(1em - 0.0625rem);min-width:calc(var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4)) - 0.0625rem);margin-inline-start:calc(var(--cnvs-sys-space-x1) - 0.125rem);& > svg{min-width:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4));min-height:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4));}:dir(rtl){transform:rotate(270deg);}}" }
+    base: { name: "2z18fi", styles: "box-sizing:border-box;[data-part=\"external-hyperlink-icon\"]{vertical-align:text-top;--color-system-icon-f4b83b:currentColor;--size-svg-2af90b:1em;width:calc(1em - 0.0625rem);min-width:calc(var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4)) - 0.0625rem);margin-inline-start:calc(var(--cnvs-sys-space-x1) - 0.125rem);& > svg{min-width:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4));min-height:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4));}:dir(rtl){transform:rotate(270deg);}}" }
 }, "external-hyperlink-a82b92");
 /**
  * `ExternalHyperlink`s also have an `inverse` variant. Use this variant when you need to place the

package/dist/es6/button/lib/parts/ButtonLabelIcon.js

@@ -1,19 +1,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createComponent } from '@workday/canvas-kit-react/common';
 import { SystemIcon, systemIconStencil } from '@workday/canvas-kit-react/icon';
-import { createStencil, cssVar, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
+import { createStencil, cssVar, handleCsProp } from '@workday/canvas-kit-styling';
 import { component, system } from '@workday/canvas-tokens-web';
 const buttonIconStencil = createStencil({
-    base: { name: "3gw672", styles: "box-sizing:border-box;display:inline-block;" },
+    base: { name: "41m8ld", styles: "box-sizing:border-box;display:inline-block;" },
     modifiers: {
         size: {
-            extraSmall: { name: "1bw9uz", styles: "--size-svg-2af90b:var(--cnvs-component-system-icon-size-sm, 1.125rem);" },
-            small: { name: "45j5ng", styles: "--size-svg-2af90b:var(--cnvs-component-system-icon-size-md, var(--cnvs-sys-space-x5));" },
-            medium: { name: "42p39h", styles: "--size-svg-2af90b:var(--cnvs-component-system-icon-size-md, var(--cnvs-sys-space-x5));" },
-            large: { name: "39hwsc", styles: "--size-svg-2af90b:var(--cnvs-component-system-icon-size-lg, var(--cnvs-sys-space-x6));" }
+            extraSmall: { name: "1xi210", styles: "--size-svg-2af90b:var(--cnvs-component-system-icon-size-xs, var(--cnvs-sys-space-x4));" },
+            small: { name: "12zb7m", styles: "--size-svg-2af90b:var(--cnvs-component-system-icon-size-md, var(--cnvs-sys-space-x5));" },
+            medium: { name: "2q46eu", styles: "--size-svg-2af90b:var(--cnvs-component-system-icon-size-md, var(--cnvs-sys-space-x5));" },
+            large: { name: "19x041", styles: "--size-svg-2af90b:var(--cnvs-component-system-icon-size-lg, var(--cnvs-sys-space-x6));" }
         }
     }
-}, "button-icon-282a77");
+}, "button-icon-e1f69e");
 export const ButtonLabelIcon = createComponent('span')({
     Component: ({ icon, size = 'medium', shouldMirrorIcon = false, shouldMirrorIconInRTL = false, ...elemProps }, ref, Element) => {
         if (icon === undefined) {

package/dist/es6/icon/lib/SystemIconCircle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SystemIconCircle.d.ts","sourceRoot":"","sources":["../../../../icon/lib/SystemIconCircle.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,OAAO,EAMR,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAC,gBAAgB,EAAC,MAAM,kCAAkC,CAAC;AAOlE,oBAAY,oBAAoB;IAC9B,EAAE,KAAK;IACP,CAAC,KAAK;IACN,CAAC,KAAK;IACN,CAAC,KAAK;IACN,EAAE,KAAK;IACP,GAAG,MAAM;CACV;AAcD,KAAK,2BAA2B,GAAG;IACjC;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,oBAAoB,GAAG,MAAM,GAAG,MAAM,CAAC;IAC9C;;;;;OAKG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,OAAO,CAAC;AAEZ;;;GAGG;AACH,MAAM,MAAM,qBAAqB,GAC7B,CAAC,2BAA2B,GAAG;IAAC,UAAU,CAAC,EAAE,KAAK,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAC,CAAC,GACnE,CAAC,2BAA2B,GAAG;IAAC,UAAU,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAC,CAAC,CAAC;AAExE,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;gBA+ClC,CAAC;AAEH,eAAO,MAAM,gBAAgB,4FAsC3B,CAAC"}
+{"version":3,"file":"SystemIconCircle.d.ts","sourceRoot":"","sources":["../../../../icon/lib/SystemIconCircle.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,OAAO,EAMR,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAC,gBAAgB,EAAC,MAAM,kCAAkC,CAAC;AAOlE,oBAAY,oBAAoB;IAC9B,EAAE,KAAK;IACP,CAAC,KAAK;IACN,CAAC,KAAK;IACN,CAAC,KAAK;IACN,EAAE,KAAK;IACP,GAAG,MAAM;CACV;AAcD,KAAK,2BAA2B,GAAG;IACjC;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,oBAAoB,GAAG,MAAM,GAAG,MAAM,CAAC;IAC9C;;;;;OAKG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,OAAO,CAAC;AAEZ;;;GAGG;AACH,MAAM,MAAM,qBAAqB,GAC7B,CAAC,2BAA2B,GAAG;IAAC,UAAU,CAAC,EAAE,KAAK,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAC,CAAC,GACnE,CAAC,2BAA2B,GAAG;IAAC,UAAU,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAC,CAAC,CAAC;AAExE,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;gBAgDlC,CAAC;AAEH,eAAO,MAAM,gBAAgB,4FAsC3B,CAAC"}

package/dist/es6/icon/lib/SystemIconCircle.js

@@ -31,10 +31,10 @@ export const systemIconCircleStencil = createStencil({
         color: '',
         size: '',
     },
-    base: { name: "3wnloq", styles: "box-sizing:border-box;background:var(--background-system-icon-circle-20bf5c, var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft)));display:flex;align-items:center;justify-content:center;padding:0;border:none;border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round));overflow:hidden;width:var(--size-system-icon-circle-20bf5c, var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10)));height:var(--size-system-icon-circle-20bf5c, var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10)));--size-svg-2af90b:calc(var(--size-system-icon-circle-20bf5c, var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10))) * 0.625);--color-system-icon-f4b83b:var(--color-system-icon-circle-20bf5c);& img{width:100%;height:100%;}" },
+    base: { name: "2u2paw", styles: "box-sizing:border-box;background:var(--background-system-icon-circle-20bf5c, var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft)));display:flex;align-items:center;justify-content:center;padding:0;border:none;border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round));overflow:hidden;width:var(--size-system-icon-circle-20bf5c, var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10)));height:var(--size-system-icon-circle-20bf5c, var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10)));--size-svg-2af90b:calc(var(--size-system-icon-circle-20bf5c, var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10))) * 0.625);--color-system-icon-f4b83b:var(--color-system-icon-circle-20bf5c);& img{width:100%;height:100%;}" },
     modifiers: {
         inverse: {
-            true: { name: "1pzhcr", styles: "background:var(--background-system-icon-circle-20bf5c, var(--cnvs-sys-color-accent-info, var(--cnvs-sys-color-bg-primary-default)));--color-system-icon-f4b83b:var(--color-system-icon-circle-20bf5c, var(--cnvs-sys-color-fg-inverse));" }
+            true: { name: "31wkk0", styles: "background:var(--background-system-icon-circle-20bf5c, var(--cnvs-sys-color-accent-info, var(--cnvs-sys-color-bg-primary-default)));--color-system-icon-f4b83b:var(--color-system-icon-circle-20bf5c, var(--cnvs-sys-color-fg-inverse));" }
         }
     }
 }, "system-icon-circle-20bf5c");

package/dist/es6/pill/lib/PillIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PillIcon.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillIcon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,eAAe,EAAoB,MAAM,gCAAgC,CAAC;AAQ9F,MAAM,WAAW,aAAc,SAAQ,OAAO,CAAC,eAAe,CAAC;CAAG;AAElE,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAQ1B,CAAC;AAEH,eAAO,MAAM,QAAQ;;;;;;EAWnB,CAAC"}
+{"version":3,"file":"PillIcon.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillIcon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,eAAe,EAAoB,MAAM,gCAAgC,CAAC;AAQ9F,MAAM,WAAW,aAAc,SAAQ,OAAO,CAAC,eAAe,CAAC;CAAG;AAElE,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAS1B,CAAC;AAEH,eAAO,MAAM,QAAQ;;;;;;EAWnB,CAAC"}

package/dist/es6/pill/lib/PillIcon.js

@@ -4,12 +4,12 @@ import { SystemIcon, systemIconStencil } from '@workday/canvas-kit-react/icon';
 import { mergeStyles } from '@workday/canvas-kit-react/layout';
 import { calc, createStencil, cssVar, px2rem } from '@workday/canvas-kit-styling';
 import { plusIcon } from '@workday/canvas-system-icons-web';
-import { system } from '@workday/canvas-tokens-web';
+import { component, system } from '@workday/canvas-tokens-web';
 import { usePillModel } from './usePillModel';
 export const pillIconStencil = createStencil({
     extends: systemIconStencil,
-    base: { name: "1quuc5", styles: "box-sizing:border-box;margin-inline-start:calc(var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1)) * -1);--size-svg-2af90b:1.25rem;flex:0 0 auto;" }
-}, "pill-icon-bc8987");
+    base: { name: "vo5zi", styles: "box-sizing:border-box;margin-inline-start:calc(var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1)) * -1);--size-svg-2af90b:var(--cnvs-component-system-icon-size-sm, 1.125rem);flex:0 0 auto;" }
+}, "pill-icon-dd844e");
 export const PillIcon = createSubcomponent('span')({
     modelHook: usePillModel,
 })(({ icon, ...elemProps }, Element) => {

package/dist/es6/pill/lib/PillIconButton.js

@@ -5,12 +5,12 @@ import { SystemIcon, systemIconStencil } from '@workday/canvas-kit-react/icon';
 import { mergeStyles } from '@workday/canvas-kit-react/layout';
 import { calc, createStencil, cssVar, px2rem } from '@workday/canvas-kit-styling';
 import { xSmallIcon } from '@workday/canvas-system-icons-web';
-import { system } from '@workday/canvas-tokens-web';
+import { component, system } from '@workday/canvas-tokens-web';
 import { usePillModel } from './usePillModel';
 export const pillIconButtonStencil = createStencil({
     extends: buttonStencil,
-    base: { name: "1ljfob", styles: "box-sizing:border-box;margin-inline-end:calc(0.4375rem * -1);margin-inline-start:calc(0.125rem * -1);border-radius:0.125rem;height:var(--cnvs-sys-size-xxs, 1.25rem);width:var(--cnvs-sys-size-xxs, 1.25rem);padding:0;overflow:visible;flex:0 0 auto;--border-button-b66707:var(--cnvs-sys-color-border-transparent);--background-button-b66707:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-alt-default));--color-system-icon-f4b83b:var(--cnvs-sys-color-fg-strong);--size-svg-2af90b:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6));::after{content:\"\";height:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8));width:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8));position:absolute;left:calc(0.4375rem * -1);bottom:calc(0.4375rem * -1);margin:0;pointer-events:all;}&:focus-visible, &.focus{--border-button-b66707:var(--cnvs-sys-color-border-transparent);box-shadow:0 0 0 0px var(--cnvs-sys-color-border-transparent), 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}&:hover, &.hover{--border-button-b66707:var(--cnvs-sys-color-border-transparent);}&:active, &.active{--border-button-b66707:var(--cnvs-sys-color-border-transparent);}&:disabled, &.disabled{--border-button-b66707:var(--cnvs-sys-color-border-transparent);--color-system-icon-f4b83b:var(--cnvs-sys-color-fg-disabled);}" }
-}, "pill-icon-button-ce05c1");
+    base: { name: "5szxy", styles: "box-sizing:border-box;margin-inline-end:calc(0.4375rem * -1);margin-inline-start:calc(0.125rem * -1);border-radius:0.125rem;height:var(--cnvs-sys-size-xxs, 1.25rem);width:var(--cnvs-sys-size-xxs, 1.25rem);padding:0;overflow:visible;flex:0 0 auto;--border-button-b66707:var(--cnvs-sys-color-border-transparent);--background-button-b66707:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-alt-default));--color-system-icon-f4b83b:var(--cnvs-sys-color-fg-strong);--size-svg-2af90b:var(--cnvs-component-system-icon-size-sm, 1.125rem);::after{content:\"\";height:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8));width:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8));position:absolute;left:calc(0.4375rem * -1);bottom:calc(0.4375rem * -1);margin:0;pointer-events:all;}&:focus-visible, &.focus{--border-button-b66707:var(--cnvs-sys-color-border-transparent);box-shadow:0 0 0 0px var(--cnvs-sys-color-border-transparent), 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}&:hover, &.hover{--border-button-b66707:var(--cnvs-sys-color-border-transparent);}&:active, &.active{--border-button-b66707:var(--cnvs-sys-color-border-transparent);}&:disabled, &.disabled{--border-button-b66707:var(--cnvs-sys-color-border-transparent);--color-system-icon-f4b83b:var(--cnvs-sys-color-fg-disabled);}" }
+}, "pill-icon-button-428f34");
 export const PillIconButton = createSubcomponent('button')({
     modelHook: usePillModel,
 })(({ size, icon, children, 'aria-label': ariaLabel = '', ...elemProps }, Element, model) => {

package/dist/es6/tabs/lib/TabsItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabsItem.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/TabsItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,EAEL,YAAY,EAQb,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,GAAG,EAAE,SAAS,EAAc,MAAM,kCAAkC,CAAC;AAO7E,MAAM,WAAW,aACf,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,KAAK,CAAC,EACrC,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;IACjC;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;;;;;;OAaG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAgID,eAAO,MAAM,aAAa,sFASxB,CAAC;AAEH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uEAiBvB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiBnB,CAAC"}
+{"version":3,"file":"TabsItem.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/TabsItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,EAEL,YAAY,EAQb,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,GAAG,EAAE,SAAS,EAAc,MAAM,kCAAkC,CAAC;AAO7E,MAAM,WAAW,aACf,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,KAAK,CAAC,EACrC,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;IACjC;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;;;;;;OAaG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAiID,eAAO,MAAM,aAAa,sFASxB,CAAC;AAEH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uEAiBvB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiBnB,CAAC"}

package/dist/es6/tabs/lib/TabsItem.js

@@ -6,11 +6,11 @@ import { SystemIcon, systemIconStencil } from '@workday/canvas-kit-react/icon';
 import { mergeStyles } from '@workday/canvas-kit-react/layout';
 import { OverflowTooltip } from '@workday/canvas-kit-react/tooltip';
 import { calc, createStencil, cssVar, px2rem } from '@workday/canvas-kit-styling';
-import { base, brand, system } from '@workday/canvas-tokens-web';
+import { base, brand, component, system } from '@workday/canvas-tokens-web';
 import { useTabsModel } from './useTabsModel';
 const tabItemStencil = createStencil({
-    base: { name: "rlvg5", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large));line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-base-letter-spacing-150));font-weight:var(--cnvs-sys-font-weight-medium);border:none;background-color:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default));flex:0 0 auto;min-width:0;align-items:center;padding:0 var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4));height:var(--cnvs-sys-size-lg, 3rem);cursor:pointer;color:var(--cnvs-sys-color-fg-muted-default);position:relative;border-radius:var(--cnvs-sys-shape-md, var(--cnvs-sys-space-x2)) var(--cnvs-sys-shape-md, var(--cnvs-sys-space-x2)) var(--cnvs-sys-shape-none, var(--cnvs-sys-space-zero)) var(--cnvs-sys-shape-zero, var(--cnvs-sys-space-zero));transition:background 150ms ease, color 150ms ease;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;--color-system-icon-f4b83b:currentColor;--size-svg-2af90b:1.25rem;&:has(span){display:flex;gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2));}&:hover, &.hover, &:focus-visible, &.focus{background-color:var(--cnvs-sys-color-surface-overlay-hover-default, var(--cnvs-sys-color-bg-alt-default));color:var(--cnvs-sys-color-fg-muted-strong, var(--cnvs-sys-color-fg-contrast-default));--color-system-icon-f4b83b:var(--cnvs-sys-color-fg-muted-strong, var(--cnvs-sys-color-fg-contrast-default));}&:focus-visible, &.focus{outline:0.125rem solid transparent;box-shadow:inset 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1)), inset 0 0 0 2px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0));--boxShadowInner-button-b66707:var(--cnvs-sys-color-focus-inverse, var(--cnvs-base-palette-neutral-0));--boxShadowOuter-button-b66707:var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline));color:var(--cnvs-sys-color-fg-strong, var(--cnvs-sys-color-fg-contrast-default));--color-system-icon-f4b83b:var(--cnvs-sys-color-fg-strong, var(--cnvs-sys-color-icon-strong));}&:disabled, &.disabled, &[aria-disabled]{opacity:var(--cnvs-sys-opacity-disabled, 0.4);&:hover{cursor:auto;background-color:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default));--color-system-icon-f4b83b:var(--cnvs-sys-color-fg-muted-default, var(--cnvs-sys-color-fg-disabled));}}&[aria-selected=true]{color:var(--cnvs-sys-color-brand-fg-primary-default, var(--cnvs-brand-primary-base));cursor:default;--color-system-icon-f4b83b:var(--cnvs-sys-color-brand-fg-primary-default, var(--cnvs-brand-primary-base));&:after{position:absolute;border-bottom:var(--cnvs-sys-space-x1) solid transparent;border-radius:var(--cnvs-sys-shape-md, var(--cnvs-sys-space-x2)) var(--cnvs-sys-shape-md, var(--cnvs-sys-space-x2)) var(--cnvs-sys-shape-none, var(--cnvs-sys-space-zero)) var(--cnvs-sys-shape-zero, var(--cnvs-sys-space-zero));background-color:var(--cnvs-sys-color-brand-fg-primary-default, var(--cnvs-brand-primary-base));bottom:var(--cnvs-sys-padding-none, var(--cnvs-sys-space-zero));content:'';left:var(--cnvs-sys-padding-none, var(--cnvs-sys-space-zero));margin-block-start:calc(calc(var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2)) / var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1))) * -1);width:100%;}&:hover, &.hover, &:focus-visible, &.focus{background-color:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default));color:var(--cnvs-sys-color-brand-fg-primary-default, var(--cnvs-brand-primary-base));}}" }
-}, "tab-item-c2fa32");
+    base: { name: "2f3l6u", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large));line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-base-letter-spacing-150));font-weight:var(--cnvs-sys-font-weight-medium);border:none;background-color:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default));flex:0 0 auto;min-width:0;align-items:center;padding:0 var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4));height:var(--cnvs-sys-size-lg, 3rem);cursor:pointer;color:var(--cnvs-sys-color-fg-muted-default);position:relative;border-radius:var(--cnvs-sys-shape-md, var(--cnvs-sys-space-x2)) var(--cnvs-sys-shape-md, var(--cnvs-sys-space-x2)) var(--cnvs-sys-shape-none, var(--cnvs-sys-space-zero)) var(--cnvs-sys-shape-zero, var(--cnvs-sys-space-zero));transition:background 150ms ease, color 150ms ease;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;--color-system-icon-f4b83b:currentColor;--size-svg-2af90b:var(--cnvs-component-system-icon-size-md, var(--cnvs-sys-space-x5));&:has(span){display:flex;gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2));}&:hover, &.hover, &:focus-visible, &.focus{background-color:var(--cnvs-sys-color-surface-overlay-hover-default, var(--cnvs-sys-color-bg-alt-default));color:var(--cnvs-sys-color-fg-muted-strong, var(--cnvs-sys-color-fg-contrast-default));--color-system-icon-f4b83b:var(--cnvs-sys-color-fg-muted-strong, var(--cnvs-sys-color-fg-contrast-default));}&:focus-visible, &.focus{outline:0.125rem solid transparent;box-shadow:inset 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1)), inset 0 0 0 2px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0));--boxShadowInner-button-b66707:var(--cnvs-sys-color-focus-inverse, var(--cnvs-base-palette-neutral-0));--boxShadowOuter-button-b66707:var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline));color:var(--cnvs-sys-color-fg-strong, var(--cnvs-sys-color-fg-contrast-default));--color-system-icon-f4b83b:var(--cnvs-sys-color-fg-strong, var(--cnvs-sys-color-icon-strong));}&:disabled, &.disabled, &[aria-disabled]{opacity:var(--cnvs-sys-opacity-disabled, 0.4);&:hover{cursor:auto;background-color:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default));--color-system-icon-f4b83b:var(--cnvs-sys-color-fg-muted-default, var(--cnvs-sys-color-fg-disabled));}}&[aria-selected=true]{color:var(--cnvs-sys-color-brand-fg-primary-default, var(--cnvs-brand-primary-base));cursor:default;--color-system-icon-f4b83b:var(--cnvs-sys-color-brand-fg-primary-default, var(--cnvs-brand-primary-base));&:after{position:absolute;border-bottom:var(--cnvs-sys-space-x1) solid transparent;border-radius:var(--cnvs-sys-shape-md, var(--cnvs-sys-space-x2)) var(--cnvs-sys-shape-md, var(--cnvs-sys-space-x2)) var(--cnvs-sys-shape-none, var(--cnvs-sys-space-zero)) var(--cnvs-sys-shape-zero, var(--cnvs-sys-space-zero));background-color:var(--cnvs-sys-color-brand-fg-primary-default, var(--cnvs-brand-primary-base));bottom:var(--cnvs-sys-padding-none, var(--cnvs-sys-space-zero));content:'';left:var(--cnvs-sys-padding-none, var(--cnvs-sys-space-zero));margin-block-start:calc(calc(var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2)) / var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1))) * -1);width:100%;}&:hover, &.hover, &:focus-visible, &.focus{background-color:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default));color:var(--cnvs-sys-color-brand-fg-primary-default, var(--cnvs-brand-primary-base));}}" }
+}, "tab-item-917c0e");
 export const StyledTabItem = createComponent('button')({
     displayName: 'StyledTabItem',
     Component: ({ children, ...elemProps }, ref, Element) => {

package/icon/lib/SystemIconCircle.tsx

@@ -99,6 +99,7 @@ export const systemIconCircleStencil = createStencil({
     // TODO: Revisit token, using v4 token and fallback to v3 token
     height: cssVar(size, cssVar(system.size.md, system.space.x10)),
     // TODO: Revisit token, using v4 token and fallback to v3 token
+    // There is no `component.systemIcon.size.*` token for `40px` so leaving `size` here.
     [systemIconStencil.vars.size]: calc.multiply(
       cssVar(size, cssVar(system.size.md, system.space.x10)),
       0.625

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "15.0.0-alpha.0292-next.0",
+  "version": "15.0.0-alpha.0293-next.0",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -53,9 +53,9 @@
     "@tanstack/react-virtual": "^3.13.9",
     "@workday/canvas-colors-web": "^2.0.0",
     "@workday/canvas-expressive-icons-web": "1.0.1",
-    "@workday/canvas-kit-popup-stack": "^15.0.0-alpha.0292-next.0",
-    "@workday/canvas-kit-preview-react": "^15.0.0-alpha.0292-next.0",
-    "@workday/canvas-kit-styling": "^15.0.0-alpha.0292-next.0",
+    "@workday/canvas-kit-popup-stack": "^15.0.0-alpha.0293-next.0",
+    "@workday/canvas-kit-preview-react": "^15.0.0-alpha.0293-next.0",
+    "@workday/canvas-kit-styling": "^15.0.0-alpha.0293-next.0",
     "@workday/canvas-system-icons-web": "4.0.2",
     "@workday/canvas-tokens-web": "4.2.0",
     "@workday/design-assets-types": "^0.3.0",
@@ -70,5 +70,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "4406470aaa0662ba08955fd47fb40bdbef18a8fe"
+  "gitHead": "e21a3fdd01e93a24636f46fc9a2aded478404cc8"
 }

package/pill/lib/PillIcon.tsx

@@ -3,7 +3,7 @@ import {SystemIcon, SystemIconProps, systemIconStencil} from '@workday/canvas-ki
 import {mergeStyles} from '@workday/canvas-kit-react/layout';
 import {calc, createStencil, cssVar, px2rem} from '@workday/canvas-kit-styling';
 import {plusIcon} from '@workday/canvas-system-icons-web';
-import {system} from '@workday/canvas-tokens-web';
+import {component, system} from '@workday/canvas-tokens-web';
 
 import {usePillModel} from './usePillModel';
 
@@ -14,7 +14,8 @@ export const pillIconStencil = createStencil({
   base: {
     // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
     marginInlineStart: calc.negate(cssVar(system.gap.xs, system.space.x1)),
-    [systemIconStencil.vars.size]: px2rem(20),
+    // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+    [systemIconStencil.vars.size]: cssVar(component.systemIcon.size.sm, px2rem(18)),
     flex: '0 0 auto',
   },
 });

package/pill/lib/PillIconButton.tsx

@@ -4,7 +4,7 @@ import {SystemIcon, SystemIconProps, systemIconStencil} from '@workday/canvas-ki
 import {mergeStyles} from '@workday/canvas-kit-react/layout';
 import {calc, createStencil, cssVar, px2rem} from '@workday/canvas-kit-styling';
 import {xSmallIcon} from '@workday/canvas-system-icons-web';
-import {system} from '@workday/canvas-tokens-web';
+import {component, system} from '@workday/canvas-tokens-web';
 
 import {usePillModel} from './usePillModel';
 
@@ -36,7 +36,7 @@ export const pillIconButtonStencil = createStencil({
     ),
     [systemIconStencil.vars.color]: system.color.fg.strong,
     // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
-    [systemIconStencil.vars.size]: cssVar(system.size.xs, system.space.x6),
+    [systemIconStencil.vars.size]: cssVar(component.systemIcon.size.sm, px2rem(18)),
     '::after': {
       content: '""',
       // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token

package/tabs/lib/TabsItem.tsx

@@ -23,7 +23,7 @@ import {SystemIcon, systemIconStencil} from '@workday/canvas-kit-react/icon';
 import {Box, FlexProps, mergeStyles} from '@workday/canvas-kit-react/layout';
 import {OverflowTooltip} from '@workday/canvas-kit-react/tooltip';
 import {calc, createStencil, cssVar, px2rem} from '@workday/canvas-kit-styling';
-import {base, brand, system} from '@workday/canvas-tokens-web';
+import {base, brand, component, system} from '@workday/canvas-tokens-web';
 
 import {useTabsModel} from './useTabsModel';
 
@@ -110,7 +110,8 @@ const tabItemStencil = createStencil({
     textOverflow: 'ellipsis',
     overflow: 'hidden',
     [systemIconStencil.vars.color]: 'currentColor',
-    [systemIconStencil.vars.size]: px2rem(20),
+    // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+    [systemIconStencil.vars.size]: cssVar(component.systemIcon.size.md, system.space.x5),
 
     '&:has(span)': {
       display: 'flex',