@workday/canvas-kit-react 11.0.0-alpha.671-next.0 → 11.0.0-alpha.682-next.0

package/dist/commonjs/checkbox/lib/CheckboxInput.js

@@ -0,0 +1,59 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckboxInput = void 0;
+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 CheckBackground_1 = require("./CheckBackground");
+const checkboxInputStencil = canvas_kit_styling_1.createStencil({
+    base: { name: "44rtbm", styles: "border-radius:var(--cnvs-sys-shape-half, calc(0.25rem * 0.5));width:var(--cnvs-sys-space-x6, calc(0.25rem * 6));height:var(--cnvs-sys-space-x6, calc(0.25rem * 6));margin:var(--cnvs-sys-space-zero, 0);margin-top:calc(0.1875rem * -1);margin-inline-start:calc(0.1875rem * -1);position:absolute;opacity:0px;&:not(:disabled){cursor:pointer;}&:where(:hover, .hover) ~ span:first-of-type{box-shadow:0 0 0 0.4375rem var(--cnvs-base-palette-soap-200, rgba(240,241,242,1));}&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type{border-color:var(--cnvs-base-palette-licorice-500, rgba(51,61,71,1));}&:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-brand-primary-base, rgba(8,117,225,1));background-color:var(--cnvs-brand-primary-base, rgba(8,117,225,1));}&:disabled ~ div:first-of-type{border-color:var(--cnvs-base-palette-licorice-100, rgba(161,170,179,1));background-color:var(--cnvs-base-palette-soap-100, rgba(246,247,248,1));opacity:1px;}&:disabled:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-brand-primary-light, rgba(166,210,255,1));background-color:var(--cnvs-brand-primary-light, rgba(166,210,255,1));}&:where(:focus-visible, :active, .focus, .active){outline:none;}&:where(:focus-visible, .focus) ~ div:first-of-type{border-color:var(--cnvs-brand-primary-base, rgba(8,117,225,1));border-width:0.125rem;box-shadow:0 0 0 0px var(--cnvs-base-palette-french-vanilla-100), 0 0 0 0px var(--cnvs-brand-common-focus-outline);}&:checked:focus-visible, &:indeterminate:focus-visible, &:checked.focus, &:indeterminate.focus{& ~ div:first-of-type{box-shadow:0 0 0 2px var(--cnvs-base-palette-french-vanilla-100), 0 0 0 4px var(--cnvs-brand-common-focus-outline, var(--cnvs-base-palette-blueberry-400));border-color:var(--cnvs-brand-primary-base, rgba(8,117,225,1));border-width:0.125rem;span{margin-inline-start:calc(0.4375rem * -1);}}}" },
+    modifiers: {
+        modifiers: {
+            inverse: { name: "k4w4a2", styles: "& ~ span:first-of-type{opacity:var(--cnvs-sys-opacity-disabled, 0.4);}& ~ div:first-of-type{border-color:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));}&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type{border-color:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));}&:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));background-color:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));}&:disabled ~ div:first-of-type{background-color:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));opacity:var(--cnvs-sys-opacity-disabled, 0.4);}&:disabled:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));background-color:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));}&:where(:focus-visible, .focus) ~ div:first-of-type{border-color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));box-shadow:0 0 0 0px var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)), 0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));}&:checked:focus-visible, &:checked.focus, &:indeterminate:focus-visible, &:indeterminate.focus{& ~ div:first-of-type{box-shadow:0 0 0 2px var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)), 0 0 0 4px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));border-color:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));}}" }
+        },
+        modifiers: {
+            true: { name: "fg9j9p", styles: "&:where(:hover, .hover) ~ span:first-of-type{box-shadow:none;}" }
+        },
+        modifiers: {
+            error: { name: "cgjiki", styles: "&:not(:where(:focus-visible, .focus)) ~ div:first-of-type{border-color:var(--cnvs-background-inner);box-shadow:\n            0 0 0 0.0625rem var(--cnvs-background-inner), \n            0 0 0 0.125rem var(--cnvs-background-outer);}&:where(:checked, :indeterminate) ~ div:first-of-type{border-color:transparent;box-shadow:\n            0 0 0 0.125rem var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)),\n            0 0 0 0.25rem var(--cnvs-background-inner),\n            0 0 0 0.3125rem var(--cnvs-background-outer);}&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type{border-color:var(--cnvs-background-inner);}" },
+            alert: { name: "hps6d7", styles: "&:not(:where(:focus-visible, .focus)) ~ div:first-of-type{border:0.0625rem solid var(--cnvs-background-inner);box-shadow:\n            0 0 0 0.0625rem var(--cnvs-background-inner), \n            0 0 0 0.125rem var(--cnvs-background-outer);}&:not(where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type{border-color:var(--cnvs-background-inner);}&:where(:checked, :indeterminate) ~ div:first-of-type{border-color:transparent;box-shadow:\n            0 0 0 0.125rem var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)),\n            0 0 0 0.25rem var(--cnvs-background-inner),\n            0 0 0 0.3125rem var(--cnvs-background-outer);}" }
+        }
+    },
+    compound: [
+        {
+            modifiers: { variant: 'inverse', error: 'error' },
+            styles: { name: "b2voah", styles: "&:not(:where(:focus-visible, .focus)) ~ div:first-of-type{border:0.0625rem solid var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));}&:not(where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type{border-color:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));}&:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));}" }
+        },
+        {
+            modifiers: { variant: 'inverse', error: 'alert' },
+            styles: { name: "b2voah", styles: "&:not(:where(:focus-visible, .focus)) ~ div:first-of-type{border:0.0625rem solid var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));}&:not(where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type{border-color:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));}&:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));}" }
+        }
+    ]
+}, "checkbox-input");
+exports.CheckboxInput = common_1.createComponent('input')({
+    displayName: 'CheckboxInput',
+    Component: ({ variant, error, ...elemProps }, ref, Element) => {
+        const { checked, disabled, indeterminate } = elemProps;
+        return (React.createElement(Element, Object.assign({ type: "checkbox", ref: ref, "aria-checked": indeterminate ? 'mixed' : checked }, canvas_kit_styling_1.handleCsProp(elemProps, checkboxInputStencil({ variant, disabled, error })))));
+    },
+});

package/dist/commonjs/checkbox/lib/CheckboxRipple.d.ts

@@ -0,0 +1,2 @@
+export declare const CheckboxRipple: import("@workday/canvas-kit-react/common").ElementComponent<"span", unknown>;
+//# sourceMappingURL=CheckboxRipple.d.ts.map

package/dist/commonjs/checkbox/lib/CheckboxRipple.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxRipple.d.ts","sourceRoot":"","sources":["../../../../checkbox/lib/CheckboxRipple.tsx"],"names":[],"mappings":"AAeA,eAAO,MAAM,cAAc,8EAKzB,CAAC"}

package/dist/commonjs/checkbox/lib/CheckboxRipple.js

@@ -0,0 +1,33 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckboxRipple = void 0;
+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 checkboxRippleStyles = canvas_kit_styling_1.createStyles({ name: "1uqo782", styles: "border-radius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));box-shadow:none;height:calc(var(--cnvs-sys-space-x4) + 0.125rem);width:calc(var(--cnvs-sys-space-x4) + 0.125rem);transition:box-shadow 150ms ease-out;position:absolute;pointer-events:none;" });
+exports.CheckboxRipple = common_1.createComponent('span')({
+    displayName: 'CheckboxRipple',
+    Component: elemProps => {
+        return React.createElement("span", Object.assign({ className: checkboxRippleStyles }, elemProps));
+    },
+});

package/dist/commonjs/common/lib/AccessibleHide.js

@@ -39,7 +39,7 @@ exports.accessibleHide = {
     padding: 0,
     border: 0,
 };
-const accessibleHideStyles = canvas_kit_styling_1.createStyles({ name: "ydm40", styles: "clip:rect(1px, 1px, 1px, 1px);clip-path:polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);position:absolute;overflow:hidden;white-space:nowrap;height:1px;width:1px;margin:-1px;padding:0px;border:0px;" });
+const accessibleHideStyles = canvas_kit_styling_1.createStyles({ name: "1jqqftm", styles: "clip:rect(1px, 1px, 1px, 1px);clip-path:polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);position:absolute;overflow:hidden;white-space:nowrap;height:1px;width:1px;margin:-1px;padding:0px;border:0px;" });
 /**
  * A convenient component wrapper to visually hide content, while still making it accessible to screen readers
  */

package/dist/commonjs/common/lib/CanvasProvider.js

@@ -28,7 +28,7 @@ const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const css_1 = require("@emotion/css");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 // copied from brand/_variables.css
-const defaultBranding = canvas_kit_styling_1.createStyles({ name: "ydm41", styles: "--cnvs-brand-error-darkest:rgba(128,22,14,1);--cnvs-brand-common-alert-inner:var(--cnvs-base-palette-cantaloupe-400);--cnvs-brand-common-error-inner:var(--cnvs-base-palette-cinnamon-500);--cnvs-brand-common-focus-outline:var(--cnvs-base-palette-blueberry-400);--cnvs-brand-neutral-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-neutral-darkest:var(--cnvs-base-palette-licorice-400);--cnvs-brand-neutral-dark:var(--cnvs-base-palette-licorice-300);--cnvs-brand-neutral-base:var(--cnvs-base-palette-soap-600);--cnvs-brand-neutral-light:var(--cnvs-base-palette-soap-300);--cnvs-brand-neutral-lightest:var(--cnvs-base-palette-soap-200);--cnvs-brand-success-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-success-darkest:var(--cnvs-base-palette-green-apple-600);--cnvs-brand-success-dark:var(--cnvs-base-palette-green-apple-500);--cnvs-brand-success-base:var(--cnvs-base-palette-green-apple-400);--cnvs-brand-success-light:var(--cnvs-base-palette-green-apple-300);--cnvs-brand-success-lightest:var(--cnvs-base-palette-green-apple-100);--cnvs-brand-error-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-error-dark:var(--cnvs-base-palette-cinnamon-600);--cnvs-brand-error-base:var(--cnvs-base-palette-cinnamon-500);--cnvs-brand-error-light:var(--cnvs-base-palette-cinnamon-200);--cnvs-brand-error-lightest:var(--cnvs-base-palette-cinnamon-100);--cnvs-brand-alert-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-alert-darkest:var(--cnvs-base-palette-cantaloupe-600);--cnvs-brand-alert-dark:var(--cnvs-base-palette-cantaloupe-500);--cnvs-brand-alert-base:var(--cnvs-base-palette-cantaloupe-400);--cnvs-brand-alert-light:var(--cnvs-base-palette-cantaloupe-200);--cnvs-brand-alert-lightest:var(--cnvs-base-palette-cantaloupe-100);--cnvs-brand-primary-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-primary-darkest:var(--cnvs-base-palette-blueberry-600);--cnvs-brand-primary-dark:var(--cnvs-base-palette-blueberry-500);--cnvs-brand-primary-base:var(--cnvs-base-palette-blueberry-400);--cnvs-brand-primary-light:var(--cnvs-base-palette-blueberry-200);--cnvs-brand-primary-lightest:var(--cnvs-base-palette-blueberry-100);--cnvs-brand-gradient-primary:linear-gradient(90deg, var(--cnvs-brand-primary-base) 0%, var(--cnvs-brand-primary-dark) 100%);" });
+const defaultBranding = canvas_kit_styling_1.createStyles({ name: "192nfdp", styles: "--cnvs-brand-error-darkest:rgba(128,22,14,1);--cnvs-brand-common-alert-inner:var(--cnvs-base-palette-cantaloupe-400);--cnvs-brand-common-error-inner:var(--cnvs-base-palette-cinnamon-500);--cnvs-brand-common-focus-outline:var(--cnvs-base-palette-blueberry-400);--cnvs-brand-neutral-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-neutral-darkest:var(--cnvs-base-palette-licorice-400);--cnvs-brand-neutral-dark:var(--cnvs-base-palette-licorice-300);--cnvs-brand-neutral-base:var(--cnvs-base-palette-soap-600);--cnvs-brand-neutral-light:var(--cnvs-base-palette-soap-300);--cnvs-brand-neutral-lightest:var(--cnvs-base-palette-soap-200);--cnvs-brand-success-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-success-darkest:var(--cnvs-base-palette-green-apple-600);--cnvs-brand-success-dark:var(--cnvs-base-palette-green-apple-500);--cnvs-brand-success-base:var(--cnvs-base-palette-green-apple-400);--cnvs-brand-success-light:var(--cnvs-base-palette-green-apple-300);--cnvs-brand-success-lightest:var(--cnvs-base-palette-green-apple-100);--cnvs-brand-error-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-error-dark:var(--cnvs-base-palette-cinnamon-600);--cnvs-brand-error-base:var(--cnvs-base-palette-cinnamon-500);--cnvs-brand-error-light:var(--cnvs-base-palette-cinnamon-200);--cnvs-brand-error-lightest:var(--cnvs-base-palette-cinnamon-100);--cnvs-brand-alert-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-alert-darkest:var(--cnvs-base-palette-cantaloupe-600);--cnvs-brand-alert-dark:var(--cnvs-base-palette-cantaloupe-500);--cnvs-brand-alert-base:var(--cnvs-base-palette-cantaloupe-400);--cnvs-brand-alert-light:var(--cnvs-base-palette-cantaloupe-200);--cnvs-brand-alert-lightest:var(--cnvs-base-palette-cantaloupe-100);--cnvs-brand-primary-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-primary-darkest:var(--cnvs-base-palette-blueberry-600);--cnvs-brand-primary-dark:var(--cnvs-base-palette-blueberry-500);--cnvs-brand-primary-base:var(--cnvs-base-palette-blueberry-400);--cnvs-brand-primary-light:var(--cnvs-base-palette-blueberry-200);--cnvs-brand-primary-lightest:var(--cnvs-base-palette-blueberry-100);--cnvs-brand-gradient-primary:linear-gradient(90deg, var(--cnvs-brand-primary-base) 0%, var(--cnvs-brand-primary-dark) 100%);" });
 const mappedKeys = {
     lightest: 'lightest',
     light: 'light',

package/dist/commonjs/common/lib/styles/focusRing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"focusRing.d.ts","sourceRoot":"","sources":["../../../../../common/lib/styles/focusRing.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,EAAE,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAK3D,UAAU,gBAAgB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAqDD;;;;;;;;;;;;;;GAcG;AAEH;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAC,OAAO,GAAE,gBAAqB,EAAE,KAAK,CAAC,EAAE,KAAK,GAAG,SAAS,CAsBlF"}
+{"version":3,"file":"focusRing.d.ts","sourceRoot":"","sources":["../../../../../common/lib/styles/focusRing.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,EAAE,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAIhD,UAAU,gBAAgB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AA2CD;;;;;;;;;;;;;;GAcG;AAEH;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAC,OAAO,GAAE,gBAAqB,EAAE,KAAK,CAAC,EAAE,KAAK,GAAG,SAAS,CAoBlF"}

package/dist/commonjs/common/lib/styles/focusRing.js

@@ -1,19 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.focusRing = void 0;
-const react_1 = require("@emotion/react");
-const tokens_1 = require("@workday/canvas-kit-react/tokens");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
-const index_1 = require("../theming/index");
-function calculateFocusRing({ width, separation, animate, inset, innerColor, outerColor, }) {
+const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
+function calculateFocusRing({ width, separation, inset, innerColor, outerColor, }) {
     let boxShadow, innerWidth, outerWidth;
     if (innerColor && innerColor.startsWith('--')) {
         // eslint-disable-next-line no-param-reassign
-        innerColor = innerColor;
+        innerColor = canvas_kit_styling_1.cssVar(innerColor);
     }
     if (outerColor && outerColor.startsWith('--')) {
         // eslint-disable-next-line no-param-reassign
-        outerColor = outerColor;
+        outerColor = canvas_kit_styling_1.cssVar(outerColor);
     }
     switch (inset) {
         case 'outer':
@@ -32,13 +30,6 @@ function calculateFocusRing({ width, separation, animate, inset, innerColor, out
             boxShadow = `0 0 0 ${innerWidth}px ${innerColor}, 0 0 0 ${outerWidth}px ${outerColor}`;
             break;
     }
-    if (animate) {
-        const fadeIn = react_1.keyframes({
-            '0%': { boxShadow },
-            '100%': { boxShadow },
-        });
-        return { animation: `${fadeIn} 100ms`, boxShadow };
-    }
     return { boxShadow };
 }
 /**
@@ -64,9 +55,7 @@ function calculateFocusRing({ width, separation, animate, inset, innerColor, out
  * @returns {CSSObject} the css object for the focus ring style
  */
 function focusRing(options = {}, theme) {
-    const { width = 2, separation = 0, animate = true, innerColor = tokens_1.canvas.colors.frenchVanilla100, outerColor = theme && theme.canvas
-        ? theme.canvas.palette.common.focusOutline
-        : index_1.defaultCanvasTheme.palette.common.focusOutline, inset, } = options;
+    const { width = 2, separation = 0, animate = true, innerColor = canvas_tokens_web_1.base.frenchVanilla100, outerColor = canvas_tokens_web_1.brand.common.focusOutline, inset, } = options;
     const args = {
         width: width,
         separation: separation,

package/dist/commonjs/loading-dots/lib/LoadingDots.js

@@ -32,7 +32,7 @@ const ANIMATION_DURATION_MS = '1400';
  * Keyframe for the dots loading animation.
  */
 const keyframesLoading = keyframes({ name: "zl77bl", styles: "0%, 80%, 100%{transform:scale(0);}40%{transform:scale(1);}" });
-const loadingDotStyles = canvas_kit_styling_1.createStyles({ name: "ydm425", styles: "background-color:var(--cnvs-base-palette-soap-400, rgba(223,226,230,1));width:var(--cnvs-sys-space-x4, calc(0.25rem * 4));height:var(--cnvs-sys-space-x4, calc(0.25rem * 4));font-size:var(--cnvs-sys-space-zero, 0);border-radius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));transform:scale(0);display:inline-block;animation-name:animation-zl77bl;animation-duration:1400ms;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-fill-mode:both;&:nth-child(1){animation-delay:0ms;}&:nth-child(2){animation-delay:calc(1400ms * (4/35));}&:nth-child(3){animation-delay:calc(1400ms * (8/35));}" });
+const loadingDotStyles = canvas_kit_styling_1.createStyles({ name: "1f3yrdb", styles: "background-color:var(--cnvs-base-palette-soap-400, rgba(223,226,230,1));width:var(--cnvs-sys-space-x4, calc(0.25rem * 4));height:var(--cnvs-sys-space-x4, calc(0.25rem * 4));font-size:var(--cnvs-sys-space-zero, 0);border-radius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));transform:scale(0);display:inline-block;animation-name:animation-zl77bl;animation-duration:1400ms;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-fill-mode:both;&:nth-child(1){animation-delay:0ms;}&:nth-child(2){animation-delay:calc(1400ms * (4/35));}&:nth-child(3){animation-delay:calc(1400ms * (8/35));}" });
 /**
  * The actual loading dot div.
  */
@@ -40,7 +40,7 @@ const LoadingAnimationDot = () => React.createElement("div", { className: `${loa
 /**
  * A simple container for the loading dots.
  */
-const containerStyles = canvas_kit_styling_1.createStyles({ name: "ydm426", styles: "display:inline-flex;gap:var(--cnvs-sys-space-x2, calc(0.25rem * 2));" });
+const containerStyles = canvas_kit_styling_1.createStyles({ name: "14lwp8w", styles: "display:inline-flex;gap:var(--cnvs-sys-space-x2, calc(0.25rem * 2));" });
 /**
  * A simple component that displays three horizontal dots, to be used when some data is loading.
  */

package/dist/commonjs/radio/lib/Radio.js

@@ -107,17 +107,31 @@ const RadioInput = common_1.styled('input')({
             borderWidth: '2px',
             borderColor: variant === 'inverse' ? tokens_1.colors.blackPepper400 : themeFocusOutline,
             boxShadow: 'none',
-            ...{ boxShadow: `0 0 0 ${0} ${variant === 'inverse' ? tokens_1.colors.blackPepper400 : undefined}, 0 0 0 calc(${variant === 'inverse' ? 2 : 0} + ${0}) ${variant === 'inverse' ? tokens_1.colors.frenchVanilla100 : undefined}` },
+            ...common_1.focusRing({
+                width: variant === 'inverse' ? 2 : 0,
+                separation: 0,
+                animate: false,
+                innerColor: variant === 'inverse' ? tokens_1.colors.blackPepper400 : undefined,
+                outerColor: variant === 'inverse' ? tokens_1.colors.frenchVanilla100 : undefined,
+            }),
         },
     },
     '&:checked:focus ~ div:first-of-type': {
-        ...{ boxShadow: `0 0 0 ${2} ${variant === 'inverse' ? tokens_1.colors.blackPepper400 : undefined}, 0 0 0 calc(${2} + ${2}) ${variant === 'inverse' ? tokens_1.colors.frenchVanilla100 : themeFocusOutline}` },
+        ...common_1.focusRing({
+            separation: 2,
+            width: 2,
+            innerColor: variant === 'inverse' ? tokens_1.colors.blackPepper400 : undefined,
+            outerColor: variant === 'inverse' ? tokens_1.colors.frenchVanilla100 : themeFocusOutline,
+        }),
         borderColor: variant === 'inverse' ? tokens_1.colors.frenchVanilla100 : themePrimary.main,
         borderWidth: '2px',
     },
     ...common_1.mouseFocusBehavior({
         '&:focus ~ div:first-of-type': {
-            ...{ boxShadow: `0 0 0 ${"0px"} ${"--cnvs-base-palette-french-vanilla-100"}, 0 0 0 calc(${0} + ${"0px"}) ${variant === 'inverse' ? tokens_1.colors.frenchVanilla100 : themeFocusOutline}` },
+            ...common_1.focusRing({
+                width: 0,
+                outerColor: variant === 'inverse' ? tokens_1.colors.frenchVanilla100 : themeFocusOutline,
+            }),
             borderWidth: '1px',
             borderColor: checked
                 ? variant === 'inverse'

package/dist/commonjs/select/lib/Select.js

@@ -15,7 +15,7 @@ const useSelectModel_1 = require("./hooks/useSelectModel");
 const useSelectCard_1 = require("./hooks/useSelectCard");
 const useSelectInput_1 = require("./hooks/useSelectInput");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
-const selectInputStyles = canvas_kit_styling_1.createStyles({ name: "ydm427", styles: "caret-color:transparent;cursor:default;&::selection{background-color:transparent;}" });
+const selectInputStyles = canvas_kit_styling_1.createStyles({ name: "1gpclr4", styles: "caret-color:transparent;cursor:default;&::selection{background-color:transparent;}" });
 exports.SelectInput = common_1.createSubcomponent(text_input_1.TextInput)({
     modelHook: useSelectModel_1.useSelectModel,
     elemPropsHook: useSelectInput_1.useSelectInput,

package/dist/commonjs/switch/lib/Switch.js

@@ -53,7 +53,7 @@ const SwitchInput = common_1.styled('input')({
         '&:focus': {
             outline: 'none',
             '& ~ div:first-of-type': {
-                ...{ boxShadow: `0 0 0 ${2} ${"--cnvs-base-palette-french-vanilla-100"}, 0 0 0 calc(${"2px"} + ${2}) ${"--cnvs-brand-common-focus-outline"}` },
+                ...common_1.focusRing({ separation: 2, animate: false }, theme),
             },
         },
         '& ~ div:first-of-type': {
@@ -63,7 +63,7 @@ const SwitchInput = common_1.styled('input')({
           0 0 0 5px ${errorColors.outer}`,
         },
         '&:focus ~ div:first-of-type': {
-            ...{ boxShadow: `0 0 0 ${2} ${"--cnvs-base-palette-french-vanilla-100"}, 0 0 0 calc(${"2px"} + ${2}) ${"--cnvs-brand-common-focus-outline"}` },
+            ...common_1.focusRing({ separation: 2, animate: false }, theme),
         },
     };
     return {

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

@@ -53,7 +53,7 @@ exports.StyledTabItem = common_1.styled(layout_1.Box.as('button'))(({ theme }) =
     },
     '&:focus': {
         outline: `none`,
-        ...{ boxShadow: `inset 0 0 0 ${2} ${"--cnvs-brand-common-focus-outline"} inset 0 0 0 calc(${0} + ${2}) ${"--cnvs-base-palette-french-vanilla-100"}` },
+        ...common_1.focusRing({ inset: 'outer', width: 0, separation: 2 }, theme),
     },
     '&:disabled, &[aria-disabled]': {
         color: tokens_1.colors.licorice100,

package/dist/commonjs/text/lib/LabelText.js

@@ -26,41 +26,41 @@ const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const layout_1 = require("@workday/canvas-kit-react/layout");
 const labelTextStencil = canvas_kit_styling_1.createStencil({
-    base: { name: "ydm4h", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-400;line-height:--cnvs-base-line-height-100;font-size:--cnvs-base-font-size-75;letter-spacing:--cnvs-base-letter-spacing-150;color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" },
+    base: { name: "1r9z3st", styles: "font-family:var(--cnvs-base-font-family-50, \"Roboto\");font-weight:var(--cnvs-base-font-weight-400, 400);line-height:var(--cnvs-base-line-height-100, 1.25rem);font-size:var(--cnvs-base-font-size-75, 0.875rem);letter-spacing:var(--cnvs-base-letter-spacing-150, 0.015rem);color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" },
     modifiers: {
-        typeLevel: {
+        modifiers: {
             // Title level styles
-            'title.large': { name: "ydm4i", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-700;line-height:--cnvs-base-line-height-600;font-size:--cnvs-base-font-size-600;color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" },
-            'title.medium': { name: "ydm4j", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-700;line-height:--cnvs-base-line-height-500;font-size:--cnvs-base-font-size-500;color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" },
-            'title.small': { name: "ydm4k", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-700;line-height:--cnvs-base-line-height-400;font-size:--cnvs-base-font-size-400;color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" },
+            'title.large': { name: "cslru0", styles: "font-family:var(--cnvs-base-font-family-50, \"Roboto\");font-weight:var(--cnvs-base-font-weight-700, 700);line-height:var(--cnvs-base-line-height-600, 4rem);font-size:var(--cnvs-base-font-size-600, 3.5rem);color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" },
+            'title.medium': { name: "12cz0zr", styles: "font-family:var(--cnvs-base-font-family-50, \"Roboto\");font-weight:var(--cnvs-base-font-weight-700, 700);line-height:var(--cnvs-base-line-height-500, 3.5rem);font-size:var(--cnvs-base-font-size-500, 3rem);color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" },
+            'title.small': { name: "5xyzrh", styles: "font-family:var(--cnvs-base-font-family-50, \"Roboto\");font-weight:var(--cnvs-base-font-weight-700, 700);line-height:var(--cnvs-base-line-height-400, 3rem);font-size:var(--cnvs-base-font-size-400, 2.5rem);color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" },
             // Heading level styles
-            'heading.large': { name: "ydm4l", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-700;line-height:--cnvs-base-line-height-350;font-size:--cnvs-base-font-size-300;color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" },
-            'heading.medium': { name: "ydm4m", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-700;line-height:--cnvs-base-line-height-300;font-size:--cnvs-base-font-size-250;color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" },
-            'heading.small': { name: "ydm4n", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-700;line-height:--cnvs-base-line-height-250;font-size:--cnvs-base-font-size-200;color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" },
+            'heading.large': { name: "h1czu", styles: "font-family:var(--cnvs-base-font-family-50, \"Roboto\");font-weight:var(--cnvs-base-font-weight-700, 700);line-height:var(--cnvs-base-line-height-350, 2.5rem);font-size:var(--cnvs-base-font-size-300, 2rem);color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" },
+            'heading.medium': { name: "4wfm80", styles: "font-family:var(--cnvs-base-font-family-50, \"Roboto\");font-weight:var(--cnvs-base-font-weight-700, 700);line-height:var(--cnvs-base-line-height-300, 2.25rem);font-size:var(--cnvs-base-font-size-250, 1.75rem);color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" },
+            'heading.small': { name: "z7qa7k", styles: "font-family:var(--cnvs-base-font-family-50, \"Roboto\");font-weight:var(--cnvs-base-font-weight-700, 700);line-height:var(--cnvs-base-line-height-250, 2rem);font-size:var(--cnvs-base-font-size-200, 1.5rem);color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" },
             // Body level styles
-            'body.large': { name: "ydm4o", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-400;line-height:--cnvs-base-line-height-200;font-size:--cnvs-base-font-size-150;color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" },
-            'body.medium': { name: "ydm4p", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-400;line-height:--cnvs-base-line-height-200;font-size:--cnvs-base-font-size-125;color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" },
-            'body.small': { name: "ydm4q", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-400;line-height:--cnvs-base-line-height-150;font-size:--cnvs-base-font-size-100;letter-spacing:--cnvs-base-letter-spacing-200;color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" },
+            'body.large': { name: "1kihtuy", styles: "font-family:var(--cnvs-base-font-family-50, \"Roboto\");font-weight:var(--cnvs-base-font-weight-400, 400);line-height:var(--cnvs-base-line-height-200, 1.75rem);font-size:var(--cnvs-base-font-size-150, 1.25rem);color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" },
+            'body.medium': { name: "unyea3", styles: "font-family:var(--cnvs-base-font-family-50, \"Roboto\");font-weight:var(--cnvs-base-font-weight-400, 400);line-height:var(--cnvs-base-line-height-200, 1.75rem);font-size:var(--cnvs-base-font-size-125, 1.125rem);color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" },
+            'body.small': { name: "1fs92hs", styles: "font-family:var(--cnvs-base-font-family-50, \"Roboto\");font-weight:var(--cnvs-base-font-weight-400, 400);line-height:var(--cnvs-base-line-height-150, 1.5rem);font-size:var(--cnvs-base-font-size-100, 1rem);letter-spacing:var(--cnvs-base-letter-spacing-200, 0.01rem);color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" },
             // Subtext level styles
-            'subtext.large': { name: "ydm4r", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-400;line-height:--cnvs-base-line-height-100;font-size:--cnvs-base-font-size-75;letter-spacing:--cnvs-base-letter-spacing-150;color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" },
-            'subtext.medium': { name: "ydm4s", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-400;line-height:--cnvs-base-line-height-50;font-size:--cnvs-base-font-size-50;letter-spacing:--cnvs-base-letter-spacing-100;color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" },
-            'subtext.small': { name: "ydm4t", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-400;line-height:--cnvs-base-line-height-50;font-size:--cnvs-base-font-size-25;letter-spacing:--cnvs-base-letter-spacing-50;color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" },
+            'subtext.large': { name: "1r9z3st", styles: "font-family:var(--cnvs-base-font-family-50, \"Roboto\");font-weight:var(--cnvs-base-font-weight-400, 400);line-height:var(--cnvs-base-line-height-100, 1.25rem);font-size:var(--cnvs-base-font-size-75, 0.875rem);letter-spacing:var(--cnvs-base-letter-spacing-150, 0.015rem);color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" },
+            'subtext.medium': { name: "rqolil", styles: "font-family:var(--cnvs-base-font-family-50, \"Roboto\");font-weight:var(--cnvs-base-font-weight-400, 400);line-height:var(--cnvs-base-line-height-50, 1rem);font-size:var(--cnvs-base-font-size-50, 0.75rem);letter-spacing:var(--cnvs-base-letter-spacing-100, 0.02rem);color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" },
+            'subtext.small': { name: "89gq7n", styles: "font-family:var(--cnvs-base-font-family-50, \"Roboto\");font-weight:var(--cnvs-base-font-weight-400, 400);line-height:var(--cnvs-base-line-height-50, 1rem);font-size:var(--cnvs-base-font-size-25, 0.625rem);letter-spacing:var(--cnvs-base-letter-spacing-50, 0.025rem);color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" }
         },
-        variant: {
-            error: { name: "ydm4u", styles: "color:var(--cnvs-base-palette-cinnamon-500, rgba(222,46,33,1));" },
-            hint: { name: "ydm4v", styles: "color:var(--cnvs-base-palette-licorice-300, rgba(94,106,117,1));" },
-            inverse: { name: "ydm4w", styles: "color:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));" },
-        },
-        disabled: {
-            true: { name: "ydm4x", styles: "cursor:default;color:var(--cnvs-base-palette-licorice-100, rgba(161,170,179,1));" },
+        modifiers: {
+            error: { name: "11i11uz", styles: "color:var(--cnvs-base-palette-cinnamon-500, rgba(222,46,33,1));" },
+            hint: { name: "1g2oxii", styles: "color:var(--cnvs-base-palette-licorice-300, rgba(94,106,117,1));" },
+            inverse: { name: "1j116kj", styles: "color:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));" }
         },
+        modifiers: {
+            true: { name: "1c1k6kz", styles: "cursor:default;color:var(--cnvs-base-palette-licorice-100, rgba(161,170,179,1));" }
+        }
     },
     compound: [
         {
             modifiers: { variant: 'inverse', disabled: true },
-            styles: { name: "ydm4y", styles: "opacity:var(--cnvs-sys-opacity-disabled, 0.4);color:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));" },
-        },
-    ],
+            styles: { name: "rrp7fc", styles: "opacity:var(--cnvs-sys-opacity-disabled, 0.4);color:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));" }
+        }
+    ]
 }, "label-text");
 /**
  * This component is intended to be used for labeling input fields.

package/dist/commonjs/text/lib/Text.js

@@ -28,26 +28,26 @@ const layout_1 = require("@workday/canvas-kit-react/layout");
 const textModifiers = canvas_kit_styling_1.createModifiers({
     typeLevel: {
         // Title level styles
-        'title.large': canvas_kit_styling_1.createStyles({ name: "ydm42", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-700;line-height:--cnvs-base-line-height-600;font-size:--cnvs-base-font-size-600;color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" }),
-        'title.medium': canvas_kit_styling_1.createStyles({ name: "ydm43", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-700;line-height:--cnvs-base-line-height-500;font-size:--cnvs-base-font-size-500;color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" }),
-        'title.small': canvas_kit_styling_1.createStyles({ name: "ydm44", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-700;line-height:--cnvs-base-line-height-400;font-size:--cnvs-base-font-size-400;color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" }),
+        'title.large': canvas_kit_styling_1.createStyles({ name: "cslru0", styles: "font-family:var(--cnvs-base-font-family-50, \"Roboto\");font-weight:var(--cnvs-base-font-weight-700, 700);line-height:var(--cnvs-base-line-height-600, 4rem);font-size:var(--cnvs-base-font-size-600, 3.5rem);color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" }),
+        'title.medium': canvas_kit_styling_1.createStyles({ name: "12cz0zr", styles: "font-family:var(--cnvs-base-font-family-50, \"Roboto\");font-weight:var(--cnvs-base-font-weight-700, 700);line-height:var(--cnvs-base-line-height-500, 3.5rem);font-size:var(--cnvs-base-font-size-500, 3rem);color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" }),
+        'title.small': canvas_kit_styling_1.createStyles({ name: "5xyzrh", styles: "font-family:var(--cnvs-base-font-family-50, \"Roboto\");font-weight:var(--cnvs-base-font-weight-700, 700);line-height:var(--cnvs-base-line-height-400, 3rem);font-size:var(--cnvs-base-font-size-400, 2.5rem);color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" }),
         // Heading level styles
-        'heading.large': canvas_kit_styling_1.createStyles({ name: "ydm45", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-700;line-height:--cnvs-base-line-height-350;font-size:--cnvs-base-font-size-300;color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" }),
-        'heading.medium': canvas_kit_styling_1.createStyles({ name: "ydm46", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-700;line-height:--cnvs-base-line-height-300;font-size:--cnvs-base-font-size-250;color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" }),
-        'heading.small': canvas_kit_styling_1.createStyles({ name: "ydm47", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-700;line-height:--cnvs-base-line-height-250;font-size:--cnvs-base-font-size-200;color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" }),
+        'heading.large': canvas_kit_styling_1.createStyles({ name: "h1czu", styles: "font-family:var(--cnvs-base-font-family-50, \"Roboto\");font-weight:var(--cnvs-base-font-weight-700, 700);line-height:var(--cnvs-base-line-height-350, 2.5rem);font-size:var(--cnvs-base-font-size-300, 2rem);color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" }),
+        'heading.medium': canvas_kit_styling_1.createStyles({ name: "4wfm80", styles: "font-family:var(--cnvs-base-font-family-50, \"Roboto\");font-weight:var(--cnvs-base-font-weight-700, 700);line-height:var(--cnvs-base-line-height-300, 2.25rem);font-size:var(--cnvs-base-font-size-250, 1.75rem);color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" }),
+        'heading.small': canvas_kit_styling_1.createStyles({ name: "z7qa7k", styles: "font-family:var(--cnvs-base-font-family-50, \"Roboto\");font-weight:var(--cnvs-base-font-weight-700, 700);line-height:var(--cnvs-base-line-height-250, 2rem);font-size:var(--cnvs-base-font-size-200, 1.5rem);color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" }),
         // Body level styles
-        'body.large': canvas_kit_styling_1.createStyles({ name: "ydm48", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-400;line-height:--cnvs-base-line-height-200;font-size:--cnvs-base-font-size-150;color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" }),
-        'body.medium': canvas_kit_styling_1.createStyles({ name: "ydm49", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-400;line-height:--cnvs-base-line-height-200;font-size:--cnvs-base-font-size-125;color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" }),
-        'body.small': canvas_kit_styling_1.createStyles({ name: "ydm4a", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-400;line-height:--cnvs-base-line-height-150;font-size:--cnvs-base-font-size-100;letter-spacing:--cnvs-base-letter-spacing-200;color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" }),
+        'body.large': canvas_kit_styling_1.createStyles({ name: "1kihtuy", styles: "font-family:var(--cnvs-base-font-family-50, \"Roboto\");font-weight:var(--cnvs-base-font-weight-400, 400);line-height:var(--cnvs-base-line-height-200, 1.75rem);font-size:var(--cnvs-base-font-size-150, 1.25rem);color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" }),
+        'body.medium': canvas_kit_styling_1.createStyles({ name: "unyea3", styles: "font-family:var(--cnvs-base-font-family-50, \"Roboto\");font-weight:var(--cnvs-base-font-weight-400, 400);line-height:var(--cnvs-base-line-height-200, 1.75rem);font-size:var(--cnvs-base-font-size-125, 1.125rem);color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" }),
+        'body.small': canvas_kit_styling_1.createStyles({ name: "1fs92hs", styles: "font-family:var(--cnvs-base-font-family-50, \"Roboto\");font-weight:var(--cnvs-base-font-weight-400, 400);line-height:var(--cnvs-base-line-height-150, 1.5rem);font-size:var(--cnvs-base-font-size-100, 1rem);letter-spacing:var(--cnvs-base-letter-spacing-200, 0.01rem);color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" }),
         // Subtext level styles
-        'subtext.large': canvas_kit_styling_1.createStyles({ name: "ydm4b", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-400;line-height:--cnvs-base-line-height-100;font-size:--cnvs-base-font-size-75;letter-spacing:--cnvs-base-letter-spacing-150;color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" }),
-        'subtext.medium': canvas_kit_styling_1.createStyles({ name: "ydm4c", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-400;line-height:--cnvs-base-line-height-50;font-size:--cnvs-base-font-size-50;letter-spacing:--cnvs-base-letter-spacing-100;color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" }),
-        'subtext.small': canvas_kit_styling_1.createStyles({ name: "ydm4d", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-400;line-height:--cnvs-base-line-height-50;font-size:--cnvs-base-font-size-25;letter-spacing:--cnvs-base-letter-spacing-50;color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" }),
+        'subtext.large': canvas_kit_styling_1.createStyles({ name: "1r9z3st", styles: "font-family:var(--cnvs-base-font-family-50, \"Roboto\");font-weight:var(--cnvs-base-font-weight-400, 400);line-height:var(--cnvs-base-line-height-100, 1.25rem);font-size:var(--cnvs-base-font-size-75, 0.875rem);letter-spacing:var(--cnvs-base-letter-spacing-150, 0.015rem);color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" }),
+        'subtext.medium': canvas_kit_styling_1.createStyles({ name: "rqolil", styles: "font-family:var(--cnvs-base-font-family-50, \"Roboto\");font-weight:var(--cnvs-base-font-weight-400, 400);line-height:var(--cnvs-base-line-height-50, 1rem);font-size:var(--cnvs-base-font-size-50, 0.75rem);letter-spacing:var(--cnvs-base-letter-spacing-100, 0.02rem);color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" }),
+        'subtext.small': canvas_kit_styling_1.createStyles({ name: "89gq7n", styles: "font-family:var(--cnvs-base-font-family-50, \"Roboto\");font-weight:var(--cnvs-base-font-weight-400, 400);line-height:var(--cnvs-base-line-height-50, 1rem);font-size:var(--cnvs-base-font-size-25, 0.625rem);letter-spacing:var(--cnvs-base-letter-spacing-50, 0.025rem);color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" }),
     },
     variant: {
-        error: canvas_kit_styling_1.createStyles({ name: "ydm4e", styles: "color:var(--cnvs-base-palette-cinnamon-500, rgba(222,46,33,1));" }),
-        hint: canvas_kit_styling_1.createStyles({ name: "ydm4f", styles: "color:var(--cnvs-base-palette-licorice-300, rgba(94,106,117,1));" }),
-        inverse: canvas_kit_styling_1.createStyles({ name: "ydm4g", styles: "color:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));" }),
+        error: canvas_kit_styling_1.createStyles({ name: "11i11uz", styles: "color:var(--cnvs-base-palette-cinnamon-500, rgba(222,46,33,1));" }),
+        hint: canvas_kit_styling_1.createStyles({ name: "1g2oxii", styles: "color:var(--cnvs-base-palette-licorice-300, rgba(94,106,117,1));" }),
+        inverse: canvas_kit_styling_1.createStyles({ name: "1j116kj", styles: "color:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));" }),
     },
 });
 /**

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

@@ -26,7 +26,7 @@ const StyledContainer = styled('button', {
     '&:not([disabled])': {
         '&:focus': {
             outline: 'none',
-            ...{ boxShadow: `0 0 0 ${2} ${"--cnvs-base-palette-french-vanilla-100"}, 0 0 0 calc(${"2px"} + ${2}) ${"--cnvs-brand-common-focus-outline"}` },
+            ...focusRing({ separation: 2 }),
         },
     },
     ...hideMouseFocus,

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

@@ -4,14 +4,14 @@ import { handleCsProp, createStencil, px2rem, keyframes } from '@workday/canvas-
 import { base, system } from '@workday/canvas-tokens-web';
 const grow = keyframes({ name: "b0dw69", styles: "from{transform:scale(0.85);}to{transform:scale(1.0);}" });
 const countBadgeStencil = createStencil({
-    base: { name: "i8ri22", styles: "align-items:center;animation:animation-b0dw69 0.2s ease;border-radius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));box-sizing:border-box;display:inline-flex;font-family:var(--cnvs-sys-font-family-default, \"Roboto\");font-size:var(--cnvs-sys-font-size-subtext-medium, 0.75rem);font-weight:var(--cnvs-sys-font-weight-bold, 700);height:1.25rem;justify-content:center;line-height:1.25rem;min-width:1.25rem;padding:0 0.40625rem;" },
+    base: { name: "n9a3hm", styles: "align-items:center;animation:animation-b0dw69 0.2s ease;border-radius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));box-sizing:border-box;display:inline-flex;font-family:var(--cnvs-sys-font-family-default, \"Roboto\");font-size:var(--cnvs-sys-font-size-subtext-medium, 0.75rem);font-weight:var(--cnvs-sys-font-weight-bold, 700);height:1.25rem;justify-content:center;line-height:1.25rem;min-width:1.25rem;padding:0 0.375rem;" },
     modifiers: {
-        variant: {
-            default: { name: "i8ri23", styles: "background:var(--cnvs-base-palette-cinnamon-500, rgba(222,46,33,1));color:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));text-shadow:0 0 0.0625rem rgba(0,0,0, 0.35);" },
-            inverse: { name: "i8ri24", styles: "background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));box-shadow:0 0.0625rem 0.125rem rgba(0,0,0, 0.25);color:var(--cnvs-base-palette-blueberry-400, rgba(8,117,225,1));" },
-        },
-    },
-}, "");
+        modifiers: {
+            default: { name: "ls097g", styles: "background:var(--cnvs-base-palette-cinnamon-500, rgba(222,46,33,1));color:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));text-shadow:0 0 0.0625rem rgba(0,0,0, 0.35);" },
+            inverse: { name: "lr1pbf", styles: "background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));box-shadow:0 0.0625rem 0.125rem rgba(0,0,0, 0.25);color:var(--cnvs-base-palette-blueberry-400, rgba(8,117,225,1));" }
+        }
+    }
+}, "count-badge");
 /**
  * `CountBadge` provides a quantity-based summary with dynamic values.
  */

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

@@ -13,7 +13,7 @@ const styles = {
     transition: 'background-color 120ms',
     '&:focus': {
         outline: 'none',
-        ...{ boxShadow: `0 0 0 ${2} ${"--cnvs-base-palette-french-vanilla-100"}, 0 0 0 calc(${"2px"} + ${2}) ${"--cnvs-brand-common-focus-outline"}` },
+        ...focusRing({ separation: 2 }),
     },
     ...hideMouseFocus,
 };

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

@@ -9,16 +9,16 @@ import { base, brand, system } from '@workday/canvas-tokens-web';
  * Temporary css variables to be used across all Buttons.
  */
 export const buttonVars = {
-    default: createVars({ id: "css-button-default", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }),
-    hover: createVars({ id: "css-button-hover", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }),
-    active: createVars({ id: "css-button-active", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }),
-    focus: createVars({ id: "css-button-focus", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }),
-    disabled: createVars({ id: "css-button-disabled", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }),
+    default: createVars({ id: "cnvs-button-default", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }),
+    hover: createVars({ id: "cnvs-button-hover", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }),
+    active: createVars({ id: "cnvs-button-active", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }),
+    focus: createVars({ id: "cnvs-button-focus", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }),
+    disabled: createVars({ id: "cnvs-button-disabled", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }),
 };
 /**
  * Base styles for Buttons.
  */
-const baseButtonStyles = createStyles({ name: "i8ri11", styles: "font-family:\"Roboto\", \"Helvetica Neue\", \"Helvetica\", Arial, sans-serif;font-size:0.875rem;line-height:normal;letter-spacing:0.015rem;font-weight:bold;background-color:var(--css-button-default-background, transparent);color:var(--css-button-default-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));border-width:1px;border-style:solid;gap:var(--cnvs-sys-space-x2, calc(0.25rem * 2));border-color:var(--css-button-default-border, transparent);cursor:pointer;display:inline-flex;box-shadow:none;align-items:center;justify-content:center;box-sizing:border-box;outline:2px transparent;white-space:nowrap;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-radius:var(--css-button-default-borderRadius, var(--cnvs-sys-shape-round, calc(0.25rem * 250)));position:relative;vertical-align:middle;overflow:hidden;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(--css-button-disabled-opacity, 1);}& span .wd-icon-fill{transition-duration:40ms;fill:var(--css-button-default-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-default-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));}&:focus-visible, &.focus{background-color:var(--css-button-focus-background, transparent);border-color:var(--css-button-focus-border, transparent);color:var(--css-button-focus-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));& span .wd-icon-fill{fill:var(--css-button-focus-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-focus-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));}box-shadow:0 0 0 2px var(--css-button-focus-boxShadowInner, var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1))), 0 0 0 calc(2px + 2px) var(--css-button-focus-boxShadowOuter, var(--cnvs-brand-primary-base, rgba(8,117,225,1)));}&:hover, &.hover{background-color:var(--css-button-hover-background, var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1)));border-color:var(--css-button-hover-border, transparent);color:var(--css-button-hover-label-emotion-safe, var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1)));& span .wd-icon-fill{fill:var(--css-button-hover-icon, var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1)));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-hover-icon, var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1)));}}&:hover:active{transition-duration:40ms;}&:active, &.active{background-color:var(--css-button-active-background, transparent);border-color:var(--css-button-active-border, transparent);color:var(--css-button-active-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));& span .wd-icon-fill{fill:var(--css-button-active-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-active-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));}}&:disabled, &.disabled{background-color:var(--css-button-disabled-background, transparent);border-color:var(--css-button-disabled-border, transparent);color:var(--css-button-disabled-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));& span .wd-icon-fill{fill:var(--css-button-disabled-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-disabled-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));}}" });
+const baseButtonStyles = createStyles({ name: "ejxkmr", styles: "font-family:\"Roboto\", \"Helvetica Neue\", \"Helvetica\", Arial, sans-serif;font-size:0.875rem;line-height:normal;letter-spacing:0.015rem;font-weight:bold;background-color:var(--cnvs-button-default-background, transparent);color:var(--cnvs-button-default-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400));border-width:1px;border-style:solid;gap:var(--cnvs-sys-space-x2, calc(0.25rem * 2));border-color:var(--cnvs-button-default-border, transparent);cursor:pointer;display:inline-flex;box-shadow:none;align-items:center;justify-content:center;box-sizing:border-box;outline:2px transparent;white-space:nowrap;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-radius:var(--cnvs-button-default-borderRadius, var(--cnvs-sys-shape-round));position:relative;vertical-align:middle;overflow:hidden;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(--cnvs-button-disabled-opacity, 1);}& span .wd-icon-fill{transition-duration:40ms;fill:var(--cnvs-button-default-icon, var(--cnvs-base-palette-black-pepper-400));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--cnvs-button-default-icon, var(--cnvs-base-palette-black-pepper-400));}&:focus-visible, &.focus{background-color:var(--cnvs-button-focus-background, transparent);border-color:var(--cnvs-button-focus-border, transparent);color:var(--cnvs-button-focus-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400));& span .wd-icon-fill{fill:var(--cnvs-button-focus-icon, var(--cnvs-base-palette-black-pepper-400));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--cnvs-button-focus-icon, var(--cnvs-base-palette-black-pepper-400));}box-shadow:0 0 0 2px var(--cnvs-button-focus-boxShadowInner, var(--cnvs-base-palette-french-vanilla-100)), 0 0 0 4px var(--cnvs-button-focus-boxShadowOuter, var(--cnvs-brand-primary-base));}&:hover, &.hover{background-color:var(--cnvs-button-hover-background, var(--cnvs-base-palette-black-pepper-500));border-color:var(--cnvs-button-hover-border, transparent);color:var(--cnvs-button-hover-label-emotion-safe, var(--cnvs-base-palette-black-pepper-500));& span .wd-icon-fill{fill:var(--cnvs-button-hover-icon, var(--cnvs-base-palette-black-pepper-500));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--cnvs-button-hover-icon, var(--cnvs-base-palette-black-pepper-500));}}&:hover:active{transition-duration:40ms;}&:active, &.active{background-color:var(--cnvs-button-active-background, transparent);border-color:var(--cnvs-button-active-border, transparent);color:var(--cnvs-button-active-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400));& span .wd-icon-fill{fill:var(--cnvs-button-active-icon, var(--cnvs-base-palette-black-pepper-400));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--cnvs-button-active-icon, var(--cnvs-base-palette-black-pepper-400));}}&:disabled, &.disabled{background-color:var(--cnvs-button-disabled-background, transparent);border-color:var(--cnvs-button-disabled-border, transparent);color:var(--cnvs-button-disabled-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400));& span .wd-icon-fill{fill:var(--cnvs-button-disabled-icon, var(--cnvs-base-palette-black-pepper-400));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--cnvs-button-disabled-icon, var(--cnvs-base-palette-black-pepper-400));}}" });
 /**
  * Button modifiers that will overwrite the base styles of Buttons.
  * - `Size`: These modifiers will dictate a size of a Button and has a set of styles to associated with it.
@@ -27,24 +27,24 @@ const baseButtonStyles = createStyles({ name: "i8ri11", styles: "font-family:\"R
  */
 export const buttonModifiers = createModifiers({
     size: {
-        large: createStyles({ name: "i8ri12", styles: "font-size:var(--cnvs-sys-space-x4, calc(0.25rem * 4));line-height:var(--cnvs-sys-space-x6, calc(0.25rem * 6));letter-spacing:0.01rem;height:48px;padding-inline:var(--cnvs-sys-space-x8, calc(0.25rem * 8));min-width:112px;" }),
-        medium: createStyles({ name: "i8ri13", styles: "font-size:0.875rem;letter-spacing:0.015rem;min-width:96px;padding-inline:var(--cnvs-sys-space-x6, calc(0.25rem * 6));height:var(--cnvs-sys-space-x10, calc(0.25rem * 10));" }),
-        small: createStyles({ name: "i8ri14", styles: "font-size:0.875rem;letter-spacing:0.015rem;height:var(--cnvs-sys-space-x8, calc(0.25rem * 8));min-width:var(--cnvs-sys-space-x20, calc(0.25rem * 20));padding-inline:var(--cnvs-sys-space-x4, calc(0.25rem * 4));gap:var(--cnvs-sys-space-x1, 0.25rem);" }),
-        extraSmall: createStyles({ name: "i8ri15", styles: "font-size:0.75rem;line-height:var(--cnvs-sys-space-x4, calc(0.25rem * 4));letter-spacing:0.02rem;height:var(--cnvs-sys-space-x6, calc(0.25rem * 6));min-width:auto;padding-inline:var(--cnvs-sys-space-x3, calc(0.25rem * 3));gap:var(--cnvs-sys-space-x1, 0.25rem);" }),
+        large: createStyles({ name: "1vuu82a", styles: "font-size:var(--cnvs-sys-space-x4, calc(0.25rem * 4));line-height:var(--cnvs-sys-space-x6, calc(0.25rem * 6));letter-spacing:0.01rem;height:48px;padding-inline:var(--cnvs-sys-space-x8, calc(0.25rem * 8));min-width:112px;" }),
+        medium: createStyles({ name: "1tv5kp2", styles: "font-size:0.875rem;letter-spacing:0.015rem;min-width:96px;padding-inline:var(--cnvs-sys-space-x6, calc(0.25rem * 6));height:var(--cnvs-sys-space-x10, calc(0.25rem * 10));" }),
+        small: createStyles({ name: "1bibd9a", styles: "font-size:0.875rem;letter-spacing:0.015rem;height:var(--cnvs-sys-space-x8, calc(0.25rem * 8));min-width:var(--cnvs-sys-space-x20, calc(0.25rem * 20));padding-inline:var(--cnvs-sys-space-x4, calc(0.25rem * 4));gap:var(--cnvs-sys-space-x1, 0.25rem);" }),
+        extraSmall: createStyles({ name: "jxl8ry", styles: "font-size:0.75rem;line-height:var(--cnvs-sys-space-x4, calc(0.25rem * 4));letter-spacing:0.02rem;height:var(--cnvs-sys-space-x6, calc(0.25rem * 6));min-width:auto;padding-inline:var(--cnvs-sys-space-x3, calc(0.25rem * 3));gap:var(--cnvs-sys-space-x1, 0.25rem);" }),
     },
     iconPosition: {
-        largeOnly: createStyles({ name: "i8ri16", styles: "padding:0;min-width:calc(var(--cnvs-sys-space-x4, calc(0.25rem * 4)) * 3);" }),
-        largeStart: createStyles({ name: "i8ri17", styles: "padding-inline-start:var(--cnvs-sys-space-x6, calc(0.25rem * 6));padding-inline-end:var(--cnvs-sys-space-x8, calc(0.25rem * 8));" }),
-        largeEnd: createStyles({ name: "i8ri18", styles: "padding-inline-start:var(--cnvs-sys-space-x8, calc(0.25rem * 8));padding-inline-end:var(--cnvs-sys-space-x6, calc(0.25rem * 6));" }),
-        mediumOnly: createStyles({ name: "i8ri19", styles: "padding:0;min-width:var(--cnvs-sys-space-x10, calc(0.25rem * 10));" }),
-        mediumStart: createStyles({ name: "i8ri1a", styles: "padding-inline-start:calc(var(--cnvs-sys-space-x1, 0.25rem) * 5);padding-inline-end:var(--cnvs-sys-space-x6, calc(0.25rem * 6));" }),
-        mediumEnd: createStyles({ name: "i8ri1b", styles: "padding-inline-start:var(--cnvs-sys-space-x6, calc(0.25rem * 6));padding-inline-end:calc(var(--cnvs-sys-space-x1, 0.25rem) * 5);" }),
-        smallOnly: createStyles({ name: "i8ri1c", styles: "padding:0;min-width:var(--cnvs-sys-space-x8, calc(0.25rem * 8));" }),
-        smallStart: createStyles({ name: "i8ri1d", styles: "padding-inline-start:var(--cnvs-sys-space-x3, calc(0.25rem * 3));padding-inline-end:var(--cnvs-sys-space-x4, calc(0.25rem * 4));" }),
-        smallEnd: createStyles({ name: "i8ri1e", styles: "padding-inline-start:var(--cnvs-sys-space-x4, calc(0.25rem * 4));padding-inline-end:var(--cnvs-sys-space-x3, calc(0.25rem * 3));" }),
-        extraSmallOnly: createStyles({ name: "i8ri1f", styles: "padding:0;min-width:var(--cnvs-sys-space-x6, calc(0.25rem * 6));" }),
-        extraSmallStart: createStyles({ name: "i8ri1g", styles: "padding-inline-start:var(--cnvs-sys-space-x2, calc(0.25rem * 2));padding-inline-end:var(--cnvs-sys-space-x3, calc(0.25rem * 3));" }),
-        extraSmallEnd: createStyles({ name: "i8ri1h", styles: "padding-inline-start:var(--cnvs-sys-space-x3, calc(0.25rem * 3));padding-inline-end:var(--cnvs-sys-space-x2, calc(0.25rem * 2));" }),
+        largeOnly: createStyles({ name: "17x7zv9", styles: "padding:0;min-width:calc(var(--cnvs-sys-space-x4, calc(0.25rem * 4)) * 3);" }),
+        largeStart: createStyles({ name: "6nuy87", styles: "padding-inline-start:var(--cnvs-sys-space-x6, calc(0.25rem * 6));padding-inline-end:var(--cnvs-sys-space-x8, calc(0.25rem * 8));" }),
+        largeEnd: createStyles({ name: "sco5n0", styles: "padding-inline-start:var(--cnvs-sys-space-x8, calc(0.25rem * 8));padding-inline-end:var(--cnvs-sys-space-x6, calc(0.25rem * 6));" }),
+        mediumOnly: createStyles({ name: "184b2d3", styles: "padding:0;min-width:var(--cnvs-sys-space-x10, calc(0.25rem * 10));" }),
+        mediumStart: createStyles({ name: "1spsu3s", styles: "padding-inline-start:calc(var(--cnvs-sys-space-x1, 0.25rem) * 5);padding-inline-end:var(--cnvs-sys-space-x6, calc(0.25rem * 6));" }),
+        mediumEnd: createStyles({ name: "aawort", styles: "padding-inline-start:var(--cnvs-sys-space-x6, calc(0.25rem * 6));padding-inline-end:calc(var(--cnvs-sys-space-x1, 0.25rem) * 5);" }),
+        smallOnly: createStyles({ name: "4un8za", styles: "padding:0;min-width:var(--cnvs-sys-space-x8, calc(0.25rem * 8));" }),
+        smallStart: createStyles({ name: "996eys", styles: "padding-inline-start:var(--cnvs-sys-space-x3, calc(0.25rem * 3));padding-inline-end:var(--cnvs-sys-space-x4, calc(0.25rem * 4));" }),
+        smallEnd: createStyles({ name: "1khaens", styles: "padding-inline-start:var(--cnvs-sys-space-x4, calc(0.25rem * 4));padding-inline-end:var(--cnvs-sys-space-x3, calc(0.25rem * 3));" }),
+        extraSmallOnly: createStyles({ name: "uyhf8a", styles: "padding:0;min-width:var(--cnvs-sys-space-x6, calc(0.25rem * 6));" }),
+        extraSmallStart: createStyles({ name: "1m2nnkm", styles: "padding-inline-start:var(--cnvs-sys-space-x2, calc(0.25rem * 2));padding-inline-end:var(--cnvs-sys-space-x3, calc(0.25rem * 3));" }),
+        extraSmallEnd: createStyles({ name: "11knxyn", styles: "padding-inline-start:var(--cnvs-sys-space-x3, calc(0.25rem * 3));padding-inline-end:var(--cnvs-sys-space-x2, calc(0.25rem * 2));" }),
     },
 });
 export function capitalize(string = '') {