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

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/form-field/lib/Label.js

@@ -55,13 +55,9 @@ const LabelComponent = styled('label')(...labelStyles);
 class Label extends React.Component {
     render() {
         const { labelPosition = Label.Position.Top, isLegend = false, required, ...elemProps } = this.props;
-        const children = !required
-            ? this.props.children
-            : [
-                React.createElement("span", null,
-                    this.props.children,
-                    React.createElement(RequiredAsterisk, { key: '0', "aria-hidden": true }, "*")),
-            ];
+        const children = !required ? (this.props.children) : (React.createElement("span", null,
+            this.props.children,
+            React.createElement(RequiredAsterisk, { key: '0', "aria-hidden": true }, "*")));
         return (React.createElement(React.Fragment, null, isLegend ? (React.createElement(LegendComponent, Object.assign({ labelPosition: labelPosition, isLegend: isLegend }, elemProps, { children: children }))) : (React.createElement(LabelComponent, Object.assign({ labelPosition: labelPosition }, elemProps, { children: children })))));
     }
 }

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.d.ts

@@ -3,7 +3,8 @@ import { ExtractProps, Themeable } from '@workday/canvas-kit-react/common';
 import { Combobox } from '@workday/canvas-kit-react/combobox';
 import { TextInput } from '@workday/canvas-kit-react/text-input';
 import { CanvasSystemIcon } from '@workday/design-assets-types';
-export interface SelectInputProps extends ExtractProps<typeof TextInput> {
+import { CSProps } from '@workday/canvas-kit-styling';
+export interface SelectInputProps extends ExtractProps<typeof TextInput>, CSProps {
     /**
      * The Icon to render at the start of the `input`. Use this prop if your options
      * include icons that you would like to render in the `input` when selected.

package/dist/es6/select/lib/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../select/lib/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEL,YAAY,EAEZ,SAAS,EACV,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,QAAQ,EAAC,MAAM,oCAAoC,CAAC;AAE5D,OAAO,EAAa,SAAS,EAAC,MAAM,sCAAsC,CAAC;AAO3E,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAG9D,MAAM,WAAW,gBAAiB,SAAQ,YAAY,CAAC,OAAO,SAAS,CAAC;IACtE;;;;OAIG;IACH,cAAc,CAAC,EAAE,gBAAgB,CAAC;CACnC;AAUD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuBvB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAWrB,CAAC;AAEH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EASrB,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,YAAY,CAAC,OAAO,QAAQ,CAAC;CAAG;AAChF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAIf;;;;;;;;;;;;OAYG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;OAaG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;;OAiBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;;OAiBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;;OAiBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CASL,CAAC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../select/lib/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEL,YAAY,EAEZ,SAAS,EACV,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,QAAQ,EAAC,MAAM,oCAAoC,CAAC;AAE5D,OAAO,EAAa,SAAS,EAAC,MAAM,sCAAsC,CAAC;AAO3E,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAe,OAAO,EAAC,MAAM,6BAA6B,CAAC;AAElE,MAAM,WAAW,gBAAiB,SAAQ,YAAY,CAAC,OAAO,SAAS,CAAC,EAAE,OAAO;IAC/E;;;;OAIG;IACH,cAAc,CAAC,EAAE,gBAAgB,CAAC;CACnC;AAqBD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2DvB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAWrB,CAAC;AAEH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EASrB,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,YAAY,CAAC,OAAO,QAAQ,CAAC;CAAG;AAChF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAIf;;;;;;;;;;;;OAYG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;OAaG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;;OAiBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;;OAiBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;;OAiBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CASL,CAAC"}

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

@@ -9,15 +9,17 @@ 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;}" });
+const hiddenSelectStyles = createStyles({ name: "1uxiz6e", styles: "position:absolute;top:0px;bottom:0px;left:0px;right:0px;opacity:0px;cursor:default;pointer-events:none;" });
 export const SelectInput = createSubcomponent(TextInput)({
     modelHook: useSelectModel,
     elemPropsHook: useSelectInput,
-})(({ placeholder = 'Choose an option', inputStartIcon, width, ...elemProps }, Element, model) => {
+})(({ placeholder = 'Choose an option', inputStartIcon, error, textInputProps, disabled, width, ref, onChange, onInput, onFocus, value, name, ...elemProps }, Element, model) => {
     return (React.createElement(InputGroup, { width: width, "data-width": "ck-formfield-width" },
         inputStartIcon && model.state.selectedIds.length > 0 && (React.createElement(InputGroup.InnerStart, { pointerEvents: "none" },
             React.createElement(SystemIcon, { icon: inputStartIcon }))),
-        React.createElement(InputGroup.Input, Object.assign({ as: Element, placeholder: placeholder }, mergeStyles(elemProps, [selectInputStyles]))),
+        React.createElement(InputGroup.Input, { error: error, disabled: disabled, className: hiddenSelectStyles, tabIndex: -1, "aria-hidden": true, onChange: onChange, onInput: onInput, value: value, onFocus: onFocus, name: name, ref: ref }),
+        React.createElement(InputGroup.Input, Object.assign({ as: Element, disabled: disabled, placeholder: placeholder, error: error }, textInputProps, mergeStyles(elemProps, [selectInputStyles]))),
         React.createElement(InputGroup.InnerEnd, { position: "absolute", pointerEvents: "none" },
             React.createElement(SystemIcon, { icon: caretDownSmallIcon }))));
 });

package/dist/es6/select/lib/hooks/useSelectInput.d.ts

@@ -80,8 +80,13 @@ export declare const useSelectInput: import("@workday/canvas-kit-react/common").
     getId: (item: any) => string;
 }, {
     readonly onKeyDown: (event: React.KeyboardEvent) => void;
-    readonly ref: (instance: HTMLInputElement | null) => void;
+    readonly onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
     readonly autoComplete: "off";
+    readonly onFocus: () => void;
+    readonly textInputProps: {
+        readonly ref: React.RefObject<HTMLInputElement>;
+    };
+    readonly ref: (instance: HTMLInputElement | null) => void;
     readonly defaultValue: string | undefined;
 } & {
     onKeyDown(event: React.KeyboardEvent<Element>): void;
@@ -97,6 +102,7 @@ export declare const useSelectInput: import("@workday/canvas-kit-react/common").
     readonly 'aria-expanded': boolean;
     readonly 'aria-autocomplete': "list";
     readonly 'aria-controls': `${string}-list`;
+    readonly 'aria-activedescendant': null | undefined;
     readonly id: string;
     readonly ref: (instance: unknown) => void;
 } & {

package/dist/es6/select/lib/hooks/useSelectInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSelectInput.d.ts","sourceRoot":"","sources":["../../../../../select/lib/hooks/useSelectInput.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAgB1B;;GAEG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAkBJ,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqCzC,CAAC"}
+{"version":3,"file":"useSelectInput.d.ts","sourceRoot":"","sources":["../../../../../select/lib/hooks/useSelectInput.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAgB1B;;GAEG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCA8CF,mBAAmB;+BAvCP,MAAM,WAAW,CAAC,gBAAgB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0FvE,CAAC"}

package/dist/es6/select/lib/hooks/useSelectInput.js

@@ -1,13 +1,24 @@
-import { composeHooks, createElemPropsHook, useForkRef, useLocalRef, useResizeObserver, } from '@workday/canvas-kit-react/common';
+import React from 'react';
+import { composeHooks, createElemPropsHook, useLocalRef, useResizeObserver, dispatchInputEvent, } from '@workday/canvas-kit-react/common';
 import { useComboboxInput, useComboboxKeyboardTypeAhead, useComboboxMoveCursorToSelected, useComboboxResetCursorToSelected, } from '@workday/canvas-kit-react/combobox';
 import { useSelectModel } from './useSelectModel';
 /**
  * `useSelectInput` extends {@link useComboboxInput useComboboxInput}  and {@link useComboboxKeyboardTypeAhead useComboboxKeyboardTypeAhead} and adds type ahead functionality and Select-specific [keyboard support](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/).
  */
 export const useSelectInput = composeHooks(createElemPropsHook(useSelectModel)((model, ref, elemProps = {}) => {
-    const { localRef, elementRef } = useLocalRef(useForkRef(ref, ref));
+    const { elementRef } = useLocalRef(ref);
+    const textInputRef = React.useRef(null);
+    // Update the text value of the input
+    const handleOnChange = (event) => {
+        var _a;
+        const value = (_a = model.navigation.getItem(event.target.value, model)) === null || _a === void 0 ? void 0 : _a.textValue;
+        const nativeInputValue = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(textInputRef.current), 'value');
+        if (nativeInputValue && nativeInputValue.set) {
+            nativeInputValue.set.call(textInputRef.current, value);
+        }
+    };
     useResizeObserver({
-        ref: localRef,
+        ref: textInputRef,
         onResize: data => {
             if (model.state.visibility === 'visible') {
                 // Width of the Input + 2px border + 8px padding
@@ -16,6 +27,20 @@ export const useSelectInput = composeHooks(createElemPropsHook(useSelectModel)((
             }
         },
     });
+    // The intent is if items are loaded after the component is rendered, it will update the input with the value.
+    // **Note: We might need to watch for other things or how often we should do this**
+    React.useEffect(() => {
+        if (model.state.inputRef.current &&
+            model.state.items.length > 0 &&
+            model.state.selectedIds[0]) {
+            const value = model.navigation.getItem(model.state.selectedIds[0], model).id;
+            if (model.state.inputRef.current.value !== value) {
+                // Programmatically dispatch an onChange once items are loaded. This account for when a consumer wants an initial selected item and they're loading them from a server.
+                dispatchInputEvent(model.state.inputRef.current, value);
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [model.state.inputRef, model.state.items.length]);
     return {
         onKeyDown(event) {
             // Prevent the keys from being enter in the input
@@ -39,8 +64,21 @@ export const useSelectInput = composeHooks(createElemPropsHook(useSelectModel)((
                 }
             }
         },
-        ref: elementRef,
+        onChange: handleOnChange,
         autoComplete: 'off',
-        defaultValue: model.navigation.getItem(model.state.selectedIds[0], model).textValue || model.state.value,
+        // When the hidden input is focused, we want to show the focus/hover states of the input that sits below it.
+        onFocus() {
+            var _a;
+            (_a = textInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        },
+        textInputProps: {
+            ref: textInputRef,
+        },
+        ref: elementRef,
+        // Account for the case where an initial item is selected when the Select first renders
+        defaultValue: model.state.selectedIds.length > 0 && model.state.items.length > 0
+            ? model.navigation.getItem(model.state.selectedIds[0], model).textValue ||
+                model.state.value
+            : undefined,
     };
 }), useComboboxKeyboardTypeAhead, useComboboxResetCursorToSelected, useComboboxMoveCursorToSelected, useComboboxInput);

package/dist/es6/select/lib/hooks/useSelectModel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSelectModel.d.ts","sourceRoot":"","sources":["../../../../../select/lib/hooks/useSelectModel.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAYzB,CAAC"}
+{"version":3,"file":"useSelectModel.d.ts","sourceRoot":"","sources":["../../../../../select/lib/hooks/useSelectModel.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAWzB,CAAC"}

package/dist/es6/select/lib/hooks/useSelectModel.js

@@ -24,6 +24,5 @@ export const useSelectModel = createModelHook({
     },
     contextOverride: useComboboxModel.Context,
 })(config => {
-    const model = useComboboxModel(config);
-    return model;
+    return useComboboxModel(config);
 });

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/dist/es6/text-input/lib/TextInput.js

@@ -15,10 +15,10 @@ const StyledTextInput = styled('input')({
     '&::placeholder': {
         color: inputColors.placeholder,
     },
-    '&:hover': {
+    '&:hover, &.hover': {
         borderColor: inputColors.hoverBorder,
     },
-    '&:focus:not([disabled])': {
+    '&:focus-visible:not([disabled]), &.focus:not([disabled]), &:focus:not([disabled])': {
         borderColor: inputColors.focusBorder,
         boxShadow: `inset 0 0 0 1px ${inputColors.focusBorder}`,
         outline: 'none',
@@ -41,7 +41,7 @@ const StyledTextInput = styled('input')({
     width: '100%',
 }, ({ theme, error }) => {
     return {
-        '&:focus:not([disabled])': {
+        '&:focus-visible:not([disabled]), &.focus:not([disabled])': {
             borderColor: theme.canvas.palette.common.focusOutline,
             boxShadow: `inset 0 0 0 1px ${theme.canvas.palette.common.focusOutline}`,
             outline: 'none',

package/dist/es6/tooltip/lib/OverflowTooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OverflowTooltip.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/OverflowTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAEL,SAAS,EAGV,MAAM,iCAAiC,CAAC;AAMzC;;;GAGG;AACH,eAAO,MAAM,mBAAmB,YAAa,OAAO,KAAG,OAAO,GAAG,IAmBhE,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,mBAAmB,YAAa,OAAO,KAAG,OAAO,GAAG,IAahE,CAAC;AAcF,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAC/F;;;;;;;OAOG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;IAClC;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,SAAS,EAAE,CAAC;CAClC;AAiBD,eAAO,MAAM,eAAe,8DAKzB,oBAAoB,gBAwCtB,CAAC"}
+{"version":3,"file":"OverflowTooltip.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/OverflowTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAEL,SAAS,EAGV,MAAM,iCAAiC,CAAC;AAMzC;;;GAGG;AACH,eAAO,MAAM,mBAAmB,YAAa,OAAO,KAAG,OAAO,GAAG,IAmBhE,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,mBAAmB,YAAa,OAAO,KAAG,OAAO,GAAG,IAahE,CAAC;AAeF,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAC/F;;;;;;;OAOG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;IAClC;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,SAAS,EAAE,CAAC;CAClC;AAiBD,eAAO,MAAM,eAAe,8DAKzB,oBAAoB,gBAwCtB,CAAC"}

package/dist/es6/tooltip/lib/OverflowTooltip.js

@@ -48,8 +48,9 @@ export const findEllipsisElement = (element) => {
 const isOverflowed = (element) => {
     const overflowElement = findEllipsisElement(element) || findOverflowElement(element);
     if (overflowElement) {
-        return (overflowElement.scrollWidth > overflowElement.clientWidth ||
-            overflowElement.scrollHeight > overflowElement.clientHeight);
+        const clientRect = overflowElement.getBoundingClientRect();
+        return (overflowElement.scrollWidth > clientRect.width ||
+            overflowElement.scrollHeight > clientRect.height);
     }
     return false;
 };

package/form-field/lib/Label.tsx

@@ -102,16 +102,16 @@ class Label extends React.Component<React.PropsWithChildren<LabelProps>> {
       required,
       ...elemProps
     } = this.props;
-    const children = !required
-      ? this.props.children
-      : [
-          <span>
-            {this.props.children}
-            <RequiredAsterisk key={'0'} aria-hidden>
-              *
-            </RequiredAsterisk>
-          </span>,
-        ];
+    const children = !required ? (
+      this.props.children
+    ) : (
+      <span>
+        {this.props.children}
+        <RequiredAsterisk key={'0'} aria-hidden>
+          *
+        </RequiredAsterisk>
+      </span>
+    );
     return (
       <>
         {isLegend ? (

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.693-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.693-next.0",
+    "@workday/canvas-kit-styling": "^11.0.0-alpha.693-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": "2ba2e730d7a13e5067afa7f482887539011d742f"
 }