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

package/dist/es6/checkbox/lib/CheckboxContainer.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { createComponent } from '@workday/canvas-kit-react/common';
+import { calc, createStyles, cssVar, px2rem, createVars } from '@workday/canvas-kit-styling';
+import { system } from '@workday/canvas-tokens-web';
+import { LabelText } from '@workday/canvas-kit-react/text';
+export const inputVars = createVars({ id: "cnvs-input", args: ["errorInner", "errorOuter", "alertInner", "alertOuter"] });
+const checkboxContainerStyles = createStyles({ name: "flsw04", styles: "display:flex;align-items:center;min-height:var(--cnvs-sys-space-x6, calc(0.25rem * 6));position:relative;&>div{display:flex;height:calc(var(--cnvs-sys-space-x4) + 0.125rem);min-width:calc(var(--cnvs-sys-space-x4) + 0.125rem);margin-top:0.1875rem;align-self:flex-start;}& > label{padding-inline-start:var(--cnvs-sys-space-x3, calc(var(--cnvs-base-unit) * 3));}" });
+export const CheckboxContainer = createComponent('div')({
+    displayName: 'CheckboxContainer',
+    Component: ({ children, disabled, id, label, variant }) => {
+        return (React.createElement("div", { className: checkboxContainerStyles },
+            React.createElement("div", null, children),
+            label && (React.createElement(LabelText, { htmlFor: id, disabled: disabled, variant: variant, style: { cursor: disabled ? 'default' : 'pointer' } }, label))));
+    },
+});

package/dist/es6/checkbox/lib/CheckboxInput.d.ts

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { ErrorType } from '@workday/canvas-kit-react/common';
+import { CSProps } from '@workday/canvas-kit-styling';
+export interface CheckboxProps extends CSProps {
+    /**
+     * If true, set the Checkbox to the checked state.
+     * @default false
+     */
+    checked?: boolean;
+    /**
+     * If true, set the Checkbox to the disabled state.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The type of error associated with the Checkbox (if applicable).
+     */
+    error?: ErrorType;
+    /**
+     * The HTML `id` of the underlying checkbox input element. This is required if `label` is defined as a non-empty string.
+     * @default {useUniqueId}
+     */
+    id?: string;
+    /**
+     * If true, set the Checkbox to an indeterminate state. Use this on a Checkbox with nested child Checkboxes to denote that some (but not all) child Checkboxes are checked.
+     * @default false
+     */
+    indeterminate?: boolean;
+    /**
+     * The text of the Checkbox label.
+     * @default ''
+     */
+    label?: string;
+    /**
+     * The function called when the Checkbox state changes.
+     */
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * The value of the Checkbox.
+     */
+    value?: string;
+    /**
+     * The variant for the checkbox
+     */
+    variant?: 'inverse' | undefined;
+}
+export declare const CheckboxInput: import("@workday/canvas-kit-react/common").ElementComponent<"input", CheckboxProps>;
+//# sourceMappingURL=CheckboxInput.d.ts.map

package/dist/es6/checkbox/lib/CheckboxInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxInput.d.ts","sourceRoot":"","sources":["../../../../checkbox/lib/CheckboxInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAA6B,SAAS,EAAC,MAAM,kCAAkC,CAAC;AAEvF,OAAO,EAML,OAAO,EACR,MAAM,6BAA6B,CAAC;AAIrC,MAAM,WAAW,aAAc,SAAQ,OAAO;IAC5C;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AAgND,eAAO,MAAM,aAAa,qFAcxB,CAAC"}

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

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { createComponent, focusRing } from '@workday/canvas-kit-react/common';
+import { calc, createStencil, cssVar, handleCsProp, px2rem, } from '@workday/canvas-kit-styling';
+import { base, brand, system } from '@workday/canvas-tokens-web';
+import { backgroundVars } from './CheckBackground';
+const checkboxInputStencil = 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");
+export const CheckboxInput = 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 }, handleCsProp(elemProps, checkboxInputStencil({ variant, disabled, error })))));
+    },
+});

package/dist/es6/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/es6/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/es6/checkbox/lib/CheckboxRipple.js

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { createComponent } from '@workday/canvas-kit-react/common';
+import { calc, createStyles, px2rem } from '@workday/canvas-kit-styling';
+import { system } from '@workday/canvas-tokens-web';
+const checkboxRippleStyles = 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;" });
+export const CheckboxRipple = createComponent('span')({
+    displayName: 'CheckboxRipple',
+    Component: elemProps => {
+        return React.createElement("span", Object.assign({ className: checkboxRippleStyles }, elemProps));
+    },
+});

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

@@ -17,7 +17,7 @@ export const accessibleHide = {
     padding: 0,
     border: 0,
 };
-const accessibleHideStyles = createStyles({ name: "i8ri0", 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 = 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/es6/common/lib/CanvasProvider.js

@@ -6,7 +6,7 @@ import { brand } from '@workday/canvas-tokens-web';
 import { cache } from '@emotion/css';
 import { createStyles } from '@workday/canvas-kit-styling';
 // copied from brand/_variables.css
-const defaultBranding = createStyles({ name: "i8ri1", 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 = 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/es6/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/es6/common/lib/styles/focusRing.js

@@ -1,16 +1,14 @@
-import { keyframes } from '@emotion/react';
-import { canvas } from '@workday/canvas-kit-react/tokens';
 import { cssVar } from '@workday/canvas-kit-styling';
-import { defaultCanvasTheme } from '../theming/index';
-function calculateFocusRing({ width, separation, animate, inset, innerColor, outerColor, }) {
+import { base, brand } from '@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 = cssVar(innerColor);
     }
     if (outerColor && outerColor.startsWith('--')) {
         // eslint-disable-next-line no-param-reassign
-        outerColor = outerColor;
+        outerColor = cssVar(outerColor);
     }
     switch (inset) {
         case 'outer':
@@ -29,13 +27,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 = keyframes({
-            '0%': { boxShadow },
-            '100%': { boxShadow },
-        });
-        return { animation: `${fadeIn} 100ms`, boxShadow };
-    }
     return { boxShadow };
 }
 /**
@@ -61,9 +52,7 @@ function calculateFocusRing({ width, separation, animate, inset, innerColor, out
  * @returns {CSSObject} the css object for the focus ring style
  */
 export function focusRing(options = {}, theme) {
-    const { width = 2, separation = 0, animate = true, innerColor = canvas.colors.frenchVanilla100, outerColor = theme && theme.canvas
-        ? theme.canvas.palette.common.focusOutline
-        : defaultCanvasTheme.palette.common.focusOutline, inset, } = options;
+    const { width = 2, separation = 0, animate = true, innerColor = base.frenchVanilla100, outerColor = brand.common.focusOutline, inset, } = options;
     const args = {
         width: width,
         separation: separation,

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

@@ -10,7 +10,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 = createStyles({ name: "i8ri25", 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 = 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.
  */
@@ -18,7 +18,7 @@ const LoadingAnimationDot = () => React.createElement("div", { className: `${loa
 /**
  * A simple container for the loading dots.
  */
-const containerStyles = createStyles({ name: "i8ri26", styles: "display:inline-flex;gap:var(--cnvs-sys-space-x2, calc(0.25rem * 2));" });
+const containerStyles = 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/es6/radio/lib/Radio.js

@@ -85,17 +85,31 @@ const RadioInput = styled('input')({
             borderWidth: '2px',
             borderColor: variant === 'inverse' ? colors.blackPepper400 : themeFocusOutline,
             boxShadow: 'none',
-            ...{ boxShadow: `0 0 0 ${0} ${variant === 'inverse' ? colors.blackPepper400 : undefined}, 0 0 0 calc(${variant === 'inverse' ? 2 : 0} + ${0}) ${variant === 'inverse' ? colors.frenchVanilla100 : undefined}` },
+            ...focusRing({
+                width: variant === 'inverse' ? 2 : 0,
+                separation: 0,
+                animate: false,
+                innerColor: variant === 'inverse' ? colors.blackPepper400 : undefined,
+                outerColor: variant === 'inverse' ? colors.frenchVanilla100 : undefined,
+            }),
         },
     },
     '&:checked:focus ~ div:first-of-type': {
-        ...{ boxShadow: `0 0 0 ${2} ${variant === 'inverse' ? colors.blackPepper400 : undefined}, 0 0 0 calc(${2} + ${2}) ${variant === 'inverse' ? colors.frenchVanilla100 : themeFocusOutline}` },
+        ...focusRing({
+            separation: 2,
+            width: 2,
+            innerColor: variant === 'inverse' ? colors.blackPepper400 : undefined,
+            outerColor: variant === 'inverse' ? colors.frenchVanilla100 : themeFocusOutline,
+        }),
         borderColor: variant === 'inverse' ? colors.frenchVanilla100 : themePrimary.main,
         borderWidth: '2px',
     },
     ...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' ? colors.frenchVanilla100 : themeFocusOutline}` },
+            ...focusRing({
+                width: 0,
+                outerColor: variant === 'inverse' ? colors.frenchVanilla100 : themeFocusOutline,
+            }),
             borderWidth: '1px',
             borderColor: checked
                 ? variant === 'inverse'

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

@@ -9,7 +9,7 @@ import { useSelectModel } from './hooks/useSelectModel';
 import { useSelectCard } from './hooks/useSelectCard';
 import { useSelectInput } from './hooks/useSelectInput';
 import { createStyles } from '@workday/canvas-kit-styling';
-const selectInputStyles = createStyles({ name: "i8ri27", styles: "caret-color:transparent;cursor:default;&::selection{background-color:transparent;}" });
+const selectInputStyles = createStyles({ name: "1gpclr4", styles: "caret-color:transparent;cursor:default;&::selection{background-color:transparent;}" });
 export const SelectInput = createSubcomponent(TextInput)({
     modelHook: useSelectModel,
     elemPropsHook: useSelectInput,

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

@@ -31,7 +31,7 @@ const SwitchInput = 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"}` },
+                ...focusRing({ separation: 2, animate: false }, theme),
             },
         },
         '& ~ div:first-of-type': {
@@ -41,7 +41,7 @@ const SwitchInput = 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"}` },
+            ...focusRing({ separation: 2, animate: false }, theme),
         },
     };
     return {

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

@@ -31,7 +31,7 @@ export const StyledTabItem = styled(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"}` },
+        ...focusRing({ inset: 'outer', width: 0, separation: 2 }, theme),
     },
     '&:disabled, &[aria-disabled]': {
         color: colors.licorice100,

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

@@ -4,41 +4,41 @@ import { base, system } from '@workday/canvas-tokens-web';
 import { createStencil } from '@workday/canvas-kit-styling';
 import { mergeStyles } from '@workday/canvas-kit-react/layout';
 const labelTextStencil = createStencil({
-    base: { name: "i8rih", 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: "i8rii", 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: "i8rij", 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: "i8rik", 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: "i8ril", 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: "i8rim", 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: "i8rin", 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: "i8rio", 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: "i8rip", 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: "i8riq", 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: "i8rir", 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: "i8ris", 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: "i8rit", 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: "i8riu", styles: "color:var(--cnvs-base-palette-cinnamon-500, rgba(222,46,33,1));" },
-            hint: { name: "i8riv", styles: "color:var(--cnvs-base-palette-licorice-300, rgba(94,106,117,1));" },
-            inverse: { name: "i8riw", styles: "color:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));" },
-        },
-        disabled: {
-            true: { name: "i8rix", 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: "i8riy", 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/es6/text/lib/Text.js

@@ -6,26 +6,26 @@ import { mergeStyles } from '@workday/canvas-kit-react/layout';
 const textModifiers = createModifiers({
     typeLevel: {
         // Title level styles
-        'title.large': createStyles({ name: "i8ri2", 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': createStyles({ name: "i8ri3", 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': createStyles({ name: "i8ri4", 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': 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': 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': 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': createStyles({ name: "i8ri5", 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': createStyles({ name: "i8ri6", 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': createStyles({ name: "i8ri7", 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': 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': 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': 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': createStyles({ name: "i8ri8", 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': createStyles({ name: "i8ri9", 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': createStyles({ name: "i8ria", 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': 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': 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': 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': createStyles({ name: "i8rib", 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': createStyles({ name: "i8ric", 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': createStyles({ name: "i8rid", 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': 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': 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': 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: createStyles({ name: "i8rie", styles: "color:var(--cnvs-base-palette-cinnamon-500, rgba(222,46,33,1));" }),
-        hint: createStyles({ name: "i8rif", styles: "color:var(--cnvs-base-palette-licorice-300, rgba(94,106,117,1));" }),
-        inverse: createStyles({ name: "i8rig", styles: "color:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));" }),
+        error: createStyles({ name: "11i11uz", styles: "color:var(--cnvs-base-palette-cinnamon-500, rgba(222,46,33,1));" }),
+        hint: createStyles({ name: "1g2oxii", styles: "color:var(--cnvs-base-palette-licorice-300, rgba(94,106,117,1));" }),
+        inverse: createStyles({ name: "1j116kj", styles: "color:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));" }),
     },
 });
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "11.0.0-alpha.671-next.0",
+  "version": "11.0.0-alpha.682-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",
@@ -50,8 +50,8 @@
     "@emotion/styled": "^11.6.0",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-popup-stack": "^11.0.0-alpha.671-next.0",
-    "@workday/canvas-kit-styling": "^10.3.1",
+    "@workday/canvas-kit-popup-stack": "^11.0.0-alpha.682-next.0",
+    "@workday/canvas-kit-styling": "^11.0.0-alpha.682-next.0",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^1.0.2",
     "@workday/design-assets-types": "^0.2.8",
@@ -69,5 +69,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "a38c87c96e3c54cb7eb20ea92d615d297c861112"
+  "gitHead": "2c256dd5658519e10bfd8e30d629ceb0a8260a71"
 }