@workday/canvas-kit-react 11.0.0-alpha.629-next.0 → 11.0.0-alpha.633-next.0

package/dist/commonjs/common/lib/CanvasProvider.d.ts

@@ -3,5 +3,263 @@ import { PartialEmotionCanvasTheme } from './theming';
 export interface CanvasProviderProps {
     theme?: PartialEmotionCanvasTheme;
 }
+export declare const useCanvasThemeToCssVars: (theme: PartialEmotionCanvasTheme | undefined, elemProps: React.HTMLAttributes<HTMLElement>) => {
+    className: string;
+    style: React.CSSProperties;
+    defaultChecked?: boolean | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
+    suppressContentEditableWarning?: boolean | undefined;
+    suppressHydrationWarning?: boolean | undefined;
+    accessKey?: string | undefined;
+    contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
+    contextMenu?: string | undefined;
+    dir?: string | undefined;
+    draggable?: (boolean | "true" | "false") | undefined;
+    hidden?: boolean | undefined;
+    id?: string | undefined;
+    lang?: string | undefined;
+    placeholder?: string | undefined;
+    slot?: string | undefined;
+    spellCheck?: (boolean | "true" | "false") | undefined;
+    tabIndex?: number | undefined;
+    title?: string | undefined;
+    translate?: "no" | "yes" | undefined;
+    radioGroup?: string | undefined;
+    role?: React.AriaRole | undefined;
+    about?: string | undefined;
+    datatype?: string | undefined;
+    inlist?: any;
+    prefix?: string | undefined;
+    property?: string | undefined;
+    resource?: string | undefined;
+    typeof?: string | undefined;
+    vocab?: string | undefined;
+    autoCapitalize?: string | undefined;
+    autoCorrect?: string | undefined;
+    autoSave?: string | undefined;
+    color?: string | undefined;
+    itemProp?: string | undefined;
+    itemScope?: boolean | undefined;
+    itemType?: string | undefined;
+    itemID?: string | undefined;
+    itemRef?: string | undefined;
+    results?: number | undefined;
+    security?: string | undefined;
+    unselectable?: "on" | "off" | undefined;
+    inputMode?: "search" | "none" | "text" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined;
+    is?: string | undefined;
+    'aria-activedescendant'?: string | undefined;
+    'aria-atomic'?: (boolean | "true" | "false") | undefined;
+    'aria-autocomplete'?: "none" | "list" | "both" | "inline" | undefined;
+    'aria-busy'?: (boolean | "true" | "false") | undefined;
+    'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
+    'aria-colcount'?: number | undefined;
+    'aria-colindex'?: number | undefined;
+    'aria-colspan'?: number | undefined;
+    'aria-controls'?: string | undefined;
+    'aria-current'?: boolean | "time" | "date" | "true" | "false" | "page" | "step" | "location" | undefined;
+    'aria-describedby'?: string | undefined;
+    'aria-details'?: string | undefined;
+    'aria-disabled'?: (boolean | "true" | "false") | undefined;
+    'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
+    'aria-errormessage'?: string | undefined;
+    'aria-expanded'?: (boolean | "true" | "false") | undefined;
+    'aria-flowto'?: string | undefined;
+    'aria-grabbed'?: (boolean | "true" | "false") | undefined;
+    'aria-haspopup'?: boolean | "dialog" | "menu" | "grid" | "listbox" | "tree" | "true" | "false" | undefined;
+    'aria-hidden'?: (boolean | "true" | "false") | undefined;
+    'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
+    'aria-keyshortcuts'?: string | undefined;
+    'aria-label'?: string | undefined;
+    'aria-labelledby'?: string | undefined;
+    'aria-level'?: number | undefined;
+    'aria-live'?: "off" | "assertive" | "polite" | undefined;
+    'aria-modal'?: (boolean | "true" | "false") | undefined;
+    'aria-multiline'?: (boolean | "true" | "false") | undefined;
+    'aria-multiselectable'?: (boolean | "true" | "false") | undefined;
+    'aria-orientation'?: "horizontal" | "vertical" | undefined;
+    'aria-owns'?: string | undefined;
+    'aria-placeholder'?: string | undefined;
+    'aria-posinset'?: number | undefined;
+    'aria-pressed'?: boolean | "true" | "false" | "mixed" | undefined;
+    'aria-readonly'?: (boolean | "true" | "false") | undefined;
+    'aria-relevant'?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+    'aria-required'?: (boolean | "true" | "false") | undefined;
+    'aria-roledescription'?: string | undefined;
+    'aria-rowcount'?: number | undefined;
+    'aria-rowindex'?: number | undefined;
+    'aria-rowspan'?: number | undefined;
+    'aria-selected'?: (boolean | "true" | "false") | undefined;
+    'aria-setsize'?: number | undefined;
+    'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
+    'aria-valuemax'?: number | undefined;
+    'aria-valuemin'?: number | undefined;
+    'aria-valuenow'?: number | undefined;
+    'aria-valuetext'?: string | undefined;
+    children?: React.ReactNode;
+    dangerouslySetInnerHTML?: {
+        __html: string;
+    } | undefined;
+    onCopy?: React.ClipboardEventHandler<HTMLElement> | undefined;
+    onCopyCapture?: React.ClipboardEventHandler<HTMLElement> | undefined;
+    onCut?: React.ClipboardEventHandler<HTMLElement> | undefined;
+    onCutCapture?: React.ClipboardEventHandler<HTMLElement> | undefined;
+    onPaste?: React.ClipboardEventHandler<HTMLElement> | undefined;
+    onPasteCapture?: React.ClipboardEventHandler<HTMLElement> | undefined;
+    onCompositionEnd?: React.CompositionEventHandler<HTMLElement> | undefined;
+    onCompositionEndCapture?: React.CompositionEventHandler<HTMLElement> | undefined;
+    onCompositionStart?: React.CompositionEventHandler<HTMLElement> | undefined;
+    onCompositionStartCapture?: React.CompositionEventHandler<HTMLElement> | undefined;
+    onCompositionUpdate?: React.CompositionEventHandler<HTMLElement> | undefined;
+    onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLElement> | undefined;
+    onFocus?: React.FocusEventHandler<HTMLElement> | undefined;
+    onFocusCapture?: React.FocusEventHandler<HTMLElement> | undefined;
+    onBlur?: React.FocusEventHandler<HTMLElement> | undefined;
+    onBlurCapture?: React.FocusEventHandler<HTMLElement> | undefined;
+    onChange?: React.FormEventHandler<HTMLElement> | undefined;
+    onChangeCapture?: React.FormEventHandler<HTMLElement> | undefined;
+    onBeforeInput?: React.FormEventHandler<HTMLElement> | undefined;
+    onBeforeInputCapture?: React.FormEventHandler<HTMLElement> | undefined;
+    onInput?: React.FormEventHandler<HTMLElement> | undefined;
+    onInputCapture?: React.FormEventHandler<HTMLElement> | undefined;
+    onReset?: React.FormEventHandler<HTMLElement> | undefined;
+    onResetCapture?: React.FormEventHandler<HTMLElement> | undefined;
+    onSubmit?: React.FormEventHandler<HTMLElement> | undefined;
+    onSubmitCapture?: React.FormEventHandler<HTMLElement> | undefined;
+    onInvalid?: React.FormEventHandler<HTMLElement> | undefined;
+    onInvalidCapture?: React.FormEventHandler<HTMLElement> | undefined;
+    onLoad?: React.ReactEventHandler<HTMLElement> | undefined;
+    onLoadCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onError?: React.ReactEventHandler<HTMLElement> | undefined;
+    onErrorCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onKeyDown?: React.KeyboardEventHandler<HTMLElement> | undefined;
+    onKeyDownCapture?: React.KeyboardEventHandler<HTMLElement> | undefined;
+    onKeyPress?: React.KeyboardEventHandler<HTMLElement> | undefined;
+    onKeyPressCapture?: React.KeyboardEventHandler<HTMLElement> | undefined;
+    onKeyUp?: React.KeyboardEventHandler<HTMLElement> | undefined;
+    onKeyUpCapture?: React.KeyboardEventHandler<HTMLElement> | undefined;
+    onAbort?: React.ReactEventHandler<HTMLElement> | undefined;
+    onAbortCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onCanPlay?: React.ReactEventHandler<HTMLElement> | undefined;
+    onCanPlayCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onCanPlayThrough?: React.ReactEventHandler<HTMLElement> | undefined;
+    onCanPlayThroughCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onDurationChange?: React.ReactEventHandler<HTMLElement> | undefined;
+    onDurationChangeCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onEmptied?: React.ReactEventHandler<HTMLElement> | undefined;
+    onEmptiedCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onEncrypted?: React.ReactEventHandler<HTMLElement> | undefined;
+    onEncryptedCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onEnded?: React.ReactEventHandler<HTMLElement> | undefined;
+    onEndedCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onLoadedData?: React.ReactEventHandler<HTMLElement> | undefined;
+    onLoadedDataCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onLoadedMetadata?: React.ReactEventHandler<HTMLElement> | undefined;
+    onLoadedMetadataCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onLoadStart?: React.ReactEventHandler<HTMLElement> | undefined;
+    onLoadStartCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onPause?: React.ReactEventHandler<HTMLElement> | undefined;
+    onPauseCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onPlay?: React.ReactEventHandler<HTMLElement> | undefined;
+    onPlayCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onPlaying?: React.ReactEventHandler<HTMLElement> | undefined;
+    onPlayingCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onProgress?: React.ReactEventHandler<HTMLElement> | undefined;
+    onProgressCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onRateChange?: React.ReactEventHandler<HTMLElement> | undefined;
+    onRateChangeCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onSeeked?: React.ReactEventHandler<HTMLElement> | undefined;
+    onSeekedCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onSeeking?: React.ReactEventHandler<HTMLElement> | undefined;
+    onSeekingCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onStalled?: React.ReactEventHandler<HTMLElement> | undefined;
+    onStalledCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onSuspend?: React.ReactEventHandler<HTMLElement> | undefined;
+    onSuspendCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onTimeUpdate?: React.ReactEventHandler<HTMLElement> | undefined;
+    onTimeUpdateCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onVolumeChange?: React.ReactEventHandler<HTMLElement> | undefined;
+    onVolumeChangeCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onWaiting?: React.ReactEventHandler<HTMLElement> | undefined;
+    onWaitingCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onAuxClick?: React.MouseEventHandler<HTMLElement> | undefined;
+    onAuxClickCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+    onClick?: React.MouseEventHandler<HTMLElement> | undefined;
+    onClickCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+    onContextMenu?: React.MouseEventHandler<HTMLElement> | undefined;
+    onContextMenuCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+    onDoubleClick?: React.MouseEventHandler<HTMLElement> | undefined;
+    onDoubleClickCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+    onDrag?: React.DragEventHandler<HTMLElement> | undefined;
+    onDragCapture?: React.DragEventHandler<HTMLElement> | undefined;
+    onDragEnd?: React.DragEventHandler<HTMLElement> | undefined;
+    onDragEndCapture?: React.DragEventHandler<HTMLElement> | undefined;
+    onDragEnter?: React.DragEventHandler<HTMLElement> | undefined;
+    onDragEnterCapture?: React.DragEventHandler<HTMLElement> | undefined;
+    onDragExit?: React.DragEventHandler<HTMLElement> | undefined;
+    onDragExitCapture?: React.DragEventHandler<HTMLElement> | undefined;
+    onDragLeave?: React.DragEventHandler<HTMLElement> | undefined;
+    onDragLeaveCapture?: React.DragEventHandler<HTMLElement> | undefined;
+    onDragOver?: React.DragEventHandler<HTMLElement> | undefined;
+    onDragOverCapture?: React.DragEventHandler<HTMLElement> | undefined;
+    onDragStart?: React.DragEventHandler<HTMLElement> | undefined;
+    onDragStartCapture?: React.DragEventHandler<HTMLElement> | undefined;
+    onDrop?: React.DragEventHandler<HTMLElement> | undefined;
+    onDropCapture?: React.DragEventHandler<HTMLElement> | undefined;
+    onMouseDown?: React.MouseEventHandler<HTMLElement> | undefined;
+    onMouseDownCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+    onMouseEnter?: React.MouseEventHandler<HTMLElement> | undefined;
+    onMouseLeave?: React.MouseEventHandler<HTMLElement> | undefined;
+    onMouseMove?: React.MouseEventHandler<HTMLElement> | undefined;
+    onMouseMoveCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+    onMouseOut?: React.MouseEventHandler<HTMLElement> | undefined;
+    onMouseOutCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+    onMouseOver?: React.MouseEventHandler<HTMLElement> | undefined;
+    onMouseOverCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+    onMouseUp?: React.MouseEventHandler<HTMLElement> | undefined;
+    onMouseUpCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+    onSelect?: React.ReactEventHandler<HTMLElement> | undefined;
+    onSelectCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onTouchCancel?: React.TouchEventHandler<HTMLElement> | undefined;
+    onTouchCancelCapture?: React.TouchEventHandler<HTMLElement> | undefined;
+    onTouchEnd?: React.TouchEventHandler<HTMLElement> | undefined;
+    onTouchEndCapture?: React.TouchEventHandler<HTMLElement> | undefined;
+    onTouchMove?: React.TouchEventHandler<HTMLElement> | undefined;
+    onTouchMoveCapture?: React.TouchEventHandler<HTMLElement> | undefined;
+    onTouchStart?: React.TouchEventHandler<HTMLElement> | undefined;
+    onTouchStartCapture?: React.TouchEventHandler<HTMLElement> | undefined;
+    onPointerDown?: React.PointerEventHandler<HTMLElement> | undefined;
+    onPointerDownCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+    onPointerMove?: React.PointerEventHandler<HTMLElement> | undefined;
+    onPointerMoveCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+    onPointerUp?: React.PointerEventHandler<HTMLElement> | undefined;
+    onPointerUpCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+    onPointerCancel?: React.PointerEventHandler<HTMLElement> | undefined;
+    onPointerCancelCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+    onPointerEnter?: React.PointerEventHandler<HTMLElement> | undefined;
+    onPointerEnterCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+    onPointerLeave?: React.PointerEventHandler<HTMLElement> | undefined;
+    onPointerLeaveCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+    onPointerOver?: React.PointerEventHandler<HTMLElement> | undefined;
+    onPointerOverCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+    onPointerOut?: React.PointerEventHandler<HTMLElement> | undefined;
+    onPointerOutCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+    onGotPointerCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+    onGotPointerCaptureCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+    onLostPointerCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+    onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+    onScroll?: React.UIEventHandler<HTMLElement> | undefined;
+    onScrollCapture?: React.UIEventHandler<HTMLElement> | undefined;
+    onWheel?: React.WheelEventHandler<HTMLElement> | undefined;
+    onWheelCapture?: React.WheelEventHandler<HTMLElement> | undefined;
+    onAnimationStart?: React.AnimationEventHandler<HTMLElement> | undefined;
+    onAnimationStartCapture?: React.AnimationEventHandler<HTMLElement> | undefined;
+    onAnimationEnd?: React.AnimationEventHandler<HTMLElement> | undefined;
+    onAnimationEndCapture?: React.AnimationEventHandler<HTMLElement> | undefined;
+    onAnimationIteration?: React.AnimationEventHandler<HTMLElement> | undefined;
+    onAnimationIterationCapture?: React.AnimationEventHandler<HTMLElement> | undefined;
+    onTransitionEnd?: React.TransitionEventHandler<HTMLElement> | undefined;
+    onTransitionEndCapture?: React.TransitionEventHandler<HTMLElement> | undefined;
+};
 export declare const CanvasProvider: ({ children, theme, ...props }: CanvasProviderProps & React.HTMLAttributes<HTMLElement>) => JSX.Element;
 //# sourceMappingURL=CanvasProvider.d.ts.map

package/dist/commonjs/common/lib/CanvasProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CanvasProvider.d.ts","sourceRoot":"","sources":["../../../../common/lib/CanvasProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAqB,yBAAyB,EAAW,MAAM,WAAW,CAAC;AAKlF,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,yBAAyB,CAAC;CACnC;AAkCD,eAAO,MAAM,cAAc,kCAIxB,mBAAmB,GAAG,MAAM,cAAc,CAAC,WAAW,CAAC,gBAezD,CAAC"}
+{"version":3,"file":"CanvasProvider.d.ts","sourceRoot":"","sources":["../../../../common/lib/CanvasProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAqB,yBAAyB,EAAW,MAAM,WAAW,CAAC;AAMlF,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,yBAAyB,CAAC;CACnC;AAkDD,eAAO,MAAM,uBAAuB,UAC3B,yBAAyB,GAAG,SAAS,aACjC,MAAM,cAAc,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqB7C,CAAC;AAEF,eAAO,MAAM,cAAc,kCAIxB,mBAAmB,GAAG,MAAM,cAAc,CAAC,WAAW,CAAC,gBAezD,CAAC"}

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

@@ -19,7 +19,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CanvasProvider = void 0;
+exports.CanvasProvider = exports.useCanvasThemeToCssVars = void 0;
 const React = __importStar(require("react"));
 const react_1 = require("@emotion/react");
 const InputProvider_1 = require("./InputProvider");
@@ -27,6 +27,9 @@ const theming_1 = require("./theming");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 // eslint-disable-next-line @emotion/no-vanilla
 const css_1 = require("@emotion/css");
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+// copied from brand/_variables.css
+const defaultBranding = canvas_kit_styling_1.createStyles({ name: "b5n40", styles: "--cnvs-brand-error-darkest{}--cnvs-brand-common-alert-inner{}--cnvs-brand-common-error-inner{}--cnvs-brand-common-focus-outline{}--cnvs-brand-neutral-accent{}--cnvs-brand-neutral-darkest{}--cnvs-brand-neutral-dark{}--cnvs-brand-neutral-base{}--cnvs-brand-neutral-light{}--cnvs-brand-neutral-lightest{}--cnvs-brand-success-accent{}--cnvs-brand-success-darkest{}--cnvs-brand-success-dark{}--cnvs-brand-success-base{}--cnvs-brand-success-light{}--cnvs-brand-success-lightest{}--cnvs-brand-error-accent{}--cnvs-brand-error-dark{}--cnvs-brand-error-base{}--cnvs-brand-error-light{}--cnvs-brand-error-lightest{}--cnvs-brand-alert-accent{}--cnvs-brand-alert-darkest{}--cnvs-brand-alert-dark{}--cnvs-brand-alert-base{}--cnvs-brand-alert-light{}--cnvs-brand-alert-lightest{}--cnvs-brand-primary-accent{}--cnvs-brand-primary-darkest{}--cnvs-brand-primary-dark{}--cnvs-brand-primary-base{}--cnvs-brand-primary-light{}--cnvs-brand-primary-lightest{}--cnvs-brand-gradient-primary{}" });
 const mappedKeys = {
     lightest: 'lightest',
     light: 'light',
@@ -37,23 +40,29 @@ const mappedKeys = {
 };
 const useCanvasThemeToCssVars = (theme, elemProps) => {
     const filledTheme = theming_1.useTheme(theme);
+    const className = (elemProps.className || '').split(' ').concat(defaultBranding).join(' ');
+    const style = elemProps.style || {};
     const { palette } = filledTheme.canvas;
-    const style = ['common', 'primary', 'error', 'alert', 'success', 'neutral'].reduce((result, color) => {
+    ['common', 'primary', 'error', 'alert', 'success', 'neutral'].forEach(color => {
         if (color === 'common') {
             // @ts-ignore
-            result[canvas_tokens_web_1.brand.common.focusOutline] = palette.common.focusOutline;
+            style[canvas_tokens_web_1.brand.common.focusOutline] = palette.common.focusOutline;
         }
         ['lightest', 'light', 'main', 'dark', 'darkest', 'contrast'].forEach(key => {
+            // We only want to set custom colors if they do not match the default. The `defaultBranding` class will take care of the rest.
             // @ts-ignore
-            result[canvas_tokens_web_1.brand[color][mappedKeys[key]]] = palette[color][key];
+            if (palette[color][key] !== theming_1.defaultCanvasTheme.palette[color][key]) {
+                // @ts-ignore
+                style[canvas_tokens_web_1.brand[color][mappedKeys[key]]] = palette[color][key];
+            }
         });
-        return result;
-    }, elemProps.style || {});
-    return { ...elemProps, style };
+    });
+    return { ...elemProps, className, style };
 };
+exports.useCanvasThemeToCssVars = useCanvasThemeToCssVars;
 const CanvasProvider = ({ children, theme = { canvas: theming_1.defaultCanvasTheme }, ...props }) => {
     var _a;
-    const elemProps = useCanvasThemeToCssVars(theme, props);
+    const elemProps = exports.useCanvasThemeToCssVars(theme, props);
     return (React.createElement(react_1.CacheProvider, { value: css_1.cache },
         React.createElement(react_1.ThemeProvider, { theme: theme },
             React.createElement(InputProvider_1.InputProvider, null),

package/dist/commonjs/popup/lib/hooks/usePopupStack.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePopupStack.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/usePopupStack.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,eAAO,MAAM,aAAa,8HAGvB,MAAM,SAAS,CAAC,WAAW,CA2C7B,CAAC"}
+{"version":3,"file":"usePopupStack.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/usePopupStack.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,eAAO,MAAM,aAAa,8HAGvB,MAAM,SAAS,CAAC,WAAW,CA0E7B,CAAC"}

package/dist/commonjs/popup/lib/hooks/usePopupStack.js

@@ -7,6 +7,7 @@ exports.usePopupStack = void 0;
 const react_1 = __importDefault(require("react"));
 const canvas_kit_popup_stack_1 = require("@workday/canvas-kit-popup-stack");
 const common_1 = require("@workday/canvas-kit-react/common");
+const react_2 = require("@emotion/react");
 /**
  * **Note:** If you're using {@link Popper}, you do not need to use this hook directly.
  *
@@ -52,6 +53,8 @@ const common_1 = require("@workday/canvas-kit-react/common");
 const usePopupStack = (ref, target) => {
     const { elementRef, localRef } = common_1.useLocalRef(ref);
     const isRTL = common_1.useIsRTL();
+    const theme = react_1.default.useContext(react_2.ThemeContext);
+    const { className, style } = common_1.useCanvasThemeToCssVars(theme, {});
     // useState function input ensures we only create a container once.
     const [popupRef] = react_1.default.useState(() => {
         const container = canvas_kit_popup_stack_1.PopupStack.createContainer();
@@ -87,6 +90,33 @@ const usePopupStack = (ref, target) => {
             (_b = localRef.current) === null || _b === void 0 ? void 0 : _b.removeAttribute('dir');
         }
     }, [localRef, isRTL]);
+    // theming className
+    react_1.default.useLayoutEffect(() => {
+        const element = localRef.current;
+        element === null || element === void 0 ? void 0 : element.classList.add(className.trim());
+        return () => {
+            element === null || element === void 0 ? void 0 : element.classList.remove(className.trim());
+        };
+    }, [localRef, className]);
+    react_1.default.useLayoutEffect(() => {
+        const element = localRef.current;
+        if (element) {
+            // eslint-disable-next-line guard-for-in
+            for (const key in style) {
+                // @ts-ignore
+                element.style.setProperty(key, style[key]);
+            }
+        }
+        return () => {
+            if (element) {
+                // eslint-disable-next-line guard-for-in
+                for (const key in style) {
+                    // @ts-ignore
+                    element.style.removeProperty(key, style[key]);
+                }
+            }
+        };
+    }, [localRef, style]);
     return localRef;
 };
 exports.usePopupStack = usePopupStack;

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

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

package/dist/es6/badge/lib/CountBadge.d.ts

@@ -1,8 +1,27 @@
-import * as React from 'react';
-export interface CountBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+import { CSProps } from '@workday/canvas-kit-styling';
+export interface CountBadgeProps extends CSProps {
+    /**
+     * Sets the count displayed in the badge
+     *
+     * @default 0
+     */
     count?: number;
+    /**
+     * Sets the maximum count to display before formatting the number.
+     * E.g. Given a count of `100` and a limit of `100`, the badge would display `99+`.
+     *
+     * @default 1000
+     */
     limit?: number;
+    /**
+     * Sets the variant of the Count Badge
+     *
+     * @default 'default'
+     */
     variant?: 'default' | 'inverse';
 }
-export declare const CountBadge: (props: CountBadgeProps) => JSX.Element;
+/**
+ * `CountBadge` provides a quantity-based summary with dynamic values.
+ */
+export declare const CountBadge: import("@workday/canvas-kit-react/common").ElementComponent<"span", CountBadgeProps>;
 //# sourceMappingURL=CountBadge.d.ts.map

package/dist/es6/badge/lib/CountBadge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CountBadge.d.ts","sourceRoot":"","sources":["../../../../badge/lib/CountBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AA8CD,eAAO,MAAM,UAAU,UAAW,eAAe,gBAUhD,CAAC"}
+{"version":3,"file":"CountBadge.d.ts","sourceRoot":"","sources":["../../../../badge/lib/CountBadge.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAe,OAAO,EAAwB,MAAM,6BAA6B,CAAC;AAazF,MAAM,WAAW,eAAgB,SAAQ,OAAO;IAC9C;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AAmCD;;GAEG;AACH,eAAO,MAAM,UAAU,sFAerB,CAAC"}

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

@@ -1,19 +1,9 @@
 import * as React from 'react';
-import { keyframes } from '@emotion/react';
-import styled from '@emotion/styled';
-import { borderRadius, colors, fontFamily } from '@workday/canvas-kit-react/tokens';
-const variants = {
-    default: {
-        background: colors.cinnamon500,
-        color: colors.frenchVanilla100,
-        textShadow: '0 0 1px rgba(0,0,0, 0.35)',
-    },
-    inverse: {
-        background: colors.frenchVanilla100,
-        boxShadow: '0 1px 2px rgba(0,0,0, 0.25)',
-        color: colors.blueberry400,
-    },
-};
+// eslint-disable-next-line @emotion/no-vanilla
+import { keyframes } from '@emotion/css';
+import { createComponent } from '@workday/canvas-kit-react/common';
+import { handleCsProp, createStencil, px2rem } from '@workday/canvas-kit-styling';
+import { base, system } from '@workday/canvas-tokens-web';
 const grow = keyframes `
   from {
     transform: scale(0.85);
@@ -23,25 +13,45 @@ const grow = keyframes `
     transform: scale(1.0);
   }
 `;
-const Container = styled('span')({
-    alignItems: 'center',
-    animation: `${grow} 0.2s ease`,
-    borderRadius: borderRadius.circle,
-    boxSizing: 'border-box',
-    display: 'inline-flex',
-    fontFamily,
-    fontSize: '12px',
-    fontWeight: 700,
-    height: '20px',
-    justifyContent: 'center',
-    lineHeight: '20px',
-    minWidth: '20px',
-    padding: '0 6.5px',
-}, ({ variant = 'default' }) => ({
-    ...variants[variant],
-}));
-export const CountBadge = (props) => {
-    const { variant = 'default', count = 0, limit = 1000, ...elemProps } = props;
-    const formattedCount = count < limit ? `${count}` : `${limit - 1}+`;
-    return (React.createElement(Container, Object.assign({ variant: variant }, elemProps), formattedCount));
-};
+const countBadgeStencil = createStencil({
+    base: {
+        alignItems: 'center',
+        animation: `${grow} 0.2s ease`,
+        borderRadius: system.shape.round,
+        boxSizing: 'border-box',
+        display: 'inline-flex',
+        fontFamily: system.fontFamily.default,
+        fontSize: system.fontSize.subtext.medium,
+        //@ts-ignore
+        fontWeight: system.fontWeight.bold,
+        height: px2rem(20),
+        justifyContent: 'center',
+        lineHeight: px2rem(20),
+        minWidth: px2rem(20),
+        padding: `0 ${px2rem(6.5)}`,
+    },
+    modifiers: {
+        variant: {
+            default: {
+                background: base.cinnamon500,
+                color: base.frenchVanilla100,
+                textShadow: `0 0 ${px2rem(1)} rgba(0,0,0, 0.35)`,
+            },
+            inverse: {
+                background: base.frenchVanilla100,
+                boxShadow: `0 ${px2rem(1)} ${px2rem(2)} rgba(0,0,0, 0.25)`,
+                color: base.blueberry400,
+            },
+        },
+    },
+});
+/**
+ * `CountBadge` provides a quantity-based summary with dynamic values.
+ */
+export const CountBadge = createComponent('span')({
+    displayName: 'NewCountBadge',
+    Component: ({ count = 0, limit = 1000, variant = 'default', ...elemProps }, ref, Element) => {
+        const formattedCount = count < limit ? `${count}` : `${limit - 1}+`;
+        return (React.createElement(Element, Object.assign({ ref: ref }, handleCsProp(elemProps, [countBadgeStencil({ variant })])), formattedCount));
+    },
+});

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

@@ -18,7 +18,7 @@ export const buttonVars = {
 /**
  * Base styles for Buttons.
  */
-const baseButtonStyles = createStyles({ name: "hmvv0", styles: "font-family:\"Roboto\", \"Helvetica Neue\", \"Helvetica\", Arial, sans-serif;font-size:0.875rem;line-height:normal;letter-spacing:0.015rem;font-weight:bold;background-color:var(--css-button-vars-default-background, transparent);color:var(--css-button-vars-default-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400, #333333));border-width:1px;border-style:solid;gap:var(--cnvs-sys-space-x2, 0.5rem);border-color:var(--css-button-vars-default-border, transparent);cursor:pointer;display:inline-flex;box-shadow:none;align-items:center;justify-content:center;box-sizing:border-box;outline:2px transparent;white-space:nowrap;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-radius:var(--css-button-vars-default-borderRadius, var(--cnvs-sys-shape-round, 62.5rem));position:relative;vertical-align:middle;overflow:hidden;transition:box-shadow 120ms linear, border 120ms linear, background-color 120ms linear, color 120ms linear;&:disabled, &:disabled:active, &.disabled{cursor:default;box-shadow:none;opacity:var(--css-button-vars-disabled-opacity, 1);}& span .wd-icon-fill{transition-duration:40ms;fill:var(--css-button-vars-default-icon, var(--cnvs-base-palette-black-pepper-400, #333333));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-vars-default-icon, var(--cnvs-base-palette-black-pepper-400, #333333));}&:focus-visible, &.focus{background-color:var(--css-button-vars-focus-background, transparent);border-color:var(--css-button-vars-focus-border, transparent);color:var(--css-button-vars-focus-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400, #333333));& span .wd-icon-fill{fill:var(--css-button-vars-focus-icon, var(--cnvs-base-palette-black-pepper-400, #333333));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-vars-focus-icon, var(--cnvs-base-palette-black-pepper-400, #333333));}box-shadow:0 0 0 2px var(--css-button-vars-focus-boxShadowInner, var(--cnvs-base-palette-french-vanilla-100, #fff)), 0 0 0 calc(2px + 2px) var(--css-button-vars-focus-boxShadowOuter, var(--cnvs-brand-primary-base, rgba(0,92,184,1)));}&:hover, &.hover{background-color:var(--css-button-vars-hover-background, var(--cnvs-base-palette-black-pepper-500, #1e1e1e));border-color:var(--css-button-vars-hover-border, transparent);color:var(--css-button-vars-hover-label-emotion-safe, var(--cnvs-base-palette-black-pepper-500, #1e1e1e));& span .wd-icon-fill{fill:var(--css-button-vars-hover-icon, var(--cnvs-base-palette-black-pepper-500, #1e1e1e));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-vars-hover-icon, var(--cnvs-base-palette-black-pepper-500, #1e1e1e));}}&:hover:active{transition-duration:40ms;}&:active, &.active{background-color:var(--css-button-vars-active-background, transparent);border-color:var(--css-button-vars-active-border, transparent);color:var(--css-button-vars-active-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400, #333333));& span .wd-icon-fill{fill:var(--css-button-vars-active-icon, var(--cnvs-base-palette-black-pepper-400, #333333));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-vars-active-icon);}}&:disabled, &.disabled{background-color:var(--css-button-vars-disabled-background, transparent);border-color:var(--css-button-vars-disabled-border, transparent);color:var(--css-button-vars-disabled-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400, #333333));& span .wd-icon-fill{fill:var(--css-button-vars-disabled-icon, var(--cnvs-base-palette-black-pepper-400, #333333));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-vars-disabled-icon, var(--cnvs-base-palette-black-pepper-400, #333333));}}" });
+const baseButtonStyles = createStyles({ name: "y1191", styles: "font-family:\"Roboto\", \"Helvetica Neue\", \"Helvetica\", Arial, sans-serif;font-size:0.875rem;line-height:normal;letter-spacing:0.015rem;font-weight:bold;background-color:var(--css-button-vars-default-background, transparent);color:var(--css-button-vars-default-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400, #333333));border-width:1px;border-style:solid;gap:var(--cnvs-sys-space-x2, 0.5rem);border-color:var(--css-button-vars-default-border, transparent);cursor:pointer;display:inline-flex;box-shadow:none;align-items:center;justify-content:center;box-sizing:border-box;outline:2px transparent;white-space:nowrap;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-radius:var(--css-button-vars-default-borderRadius, var(--cnvs-sys-shape-round, 62.5rem));position:relative;vertical-align:middle;overflow:hidden;transition:box-shadow 120ms linear, border 120ms linear, background-color 120ms linear, color 120ms linear;&:disabled, &:disabled:active, &.disabled{cursor:default;box-shadow:none;opacity:var(--css-button-vars-disabled-opacity, 1);}& span .wd-icon-fill{transition-duration:40ms;fill:var(--css-button-vars-default-icon, var(--cnvs-base-palette-black-pepper-400, #333333));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-vars-default-icon, var(--cnvs-base-palette-black-pepper-400, #333333));}&:focus-visible, &.focus{background-color:var(--css-button-vars-focus-background, transparent);border-color:var(--css-button-vars-focus-border, transparent);color:var(--css-button-vars-focus-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400, #333333));& span .wd-icon-fill{fill:var(--css-button-vars-focus-icon, var(--cnvs-base-palette-black-pepper-400, #333333));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-vars-focus-icon, var(--cnvs-base-palette-black-pepper-400, #333333));}box-shadow:0 0 0 2px var(--css-button-vars-focus-boxShadowInner, var(--cnvs-base-palette-french-vanilla-100, #fff)), 0 0 0 calc(2px + 2px) var(--css-button-vars-focus-boxShadowOuter, var(--cnvs-brand-primary-base, rgba(0,92,184,1)));}&:hover, &.hover{background-color:var(--css-button-vars-hover-background, var(--cnvs-base-palette-black-pepper-500, #1e1e1e));border-color:var(--css-button-vars-hover-border, transparent);color:var(--css-button-vars-hover-label-emotion-safe, var(--cnvs-base-palette-black-pepper-500, #1e1e1e));& span .wd-icon-fill{fill:var(--css-button-vars-hover-icon, var(--cnvs-base-palette-black-pepper-500, #1e1e1e));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-vars-hover-icon, var(--cnvs-base-palette-black-pepper-500, #1e1e1e));}}&:hover:active{transition-duration:40ms;}&:active, &.active{background-color:var(--css-button-vars-active-background, transparent);border-color:var(--css-button-vars-active-border, transparent);color:var(--css-button-vars-active-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400, #333333));& span .wd-icon-fill{fill:var(--css-button-vars-active-icon, var(--cnvs-base-palette-black-pepper-400, #333333));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-vars-active-icon);}}&:disabled, &.disabled{background-color:var(--css-button-vars-disabled-background, transparent);border-color:var(--css-button-vars-disabled-border, transparent);color:var(--css-button-vars-disabled-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400, #333333));& span .wd-icon-fill{fill:var(--css-button-vars-disabled-icon, var(--cnvs-base-palette-black-pepper-400, #333333));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-vars-disabled-icon, var(--cnvs-base-palette-black-pepper-400, #333333));}}" });
 /**
  * Button modifiers that will overwrite the base styles of Buttons.
  * - `Size`: These modifiers will dictate a size of a Button and has a set of styles to associated with it.
@@ -27,24 +27,24 @@ const baseButtonStyles = createStyles({ name: "hmvv0", styles: "font-family:\"Ro
  */
 export const buttonModifiers = createModifiers({
     size: {
-        large: createStyles({ name: "hmvv1", styles: "font-size:var(--cnvs-sys-space-x4, 1rem);line-height:var(--cnvs-sys-space-x6, 1.5rem);letter-spacing:0.01rem;height:48px;padding-inline:var(--cnvs-sys-space-x8, 2rem);min-width:112px;" }),
-        medium: createStyles({ name: "hmvv2", styles: "font-size:0.875rem;letter-spacing:0.015rem;min-width:96px;padding-inline:var(--cnvs-sys-space-x6, 1.5rem);height:var(--cnvs-sys-space-x10, 2.5rem);" }),
-        small: createStyles({ name: "hmvv3", styles: "font-size:0.875rem;letter-spacing:0.015rem;height:var(--cnvs-sys-space-x8, 2rem);min-width:var(--cnvs-sys-space-x20, 5rem);padding-inline:var(--cnvs-sys-space-x4, 1rem);gap:var(--cnvs-sys-space-x1, 0.25rem);" }),
-        extraSmall: createStyles({ name: "hmvv4", styles: "font-size:0.75rem;line-height:var(--cnvs-sys-space-x4, 1rem);letter-spacing:0.02rem;height:var(--cnvs-sys-space-x6, 1.5rem);min-width:auto;padding-inline:var(--cnvs-sys-space-x3, 0.75rem);gap:var(--cnvs-sys-space-x1, 0.25rem);" }),
+        large: createStyles({ name: "y1192", styles: "font-size:var(--cnvs-sys-space-x4, 1rem);line-height:var(--cnvs-sys-space-x6, 1.5rem);letter-spacing:0.01rem;height:48px;padding-inline:var(--cnvs-sys-space-x8, 2rem);min-width:112px;" }),
+        medium: createStyles({ name: "y1193", styles: "font-size:0.875rem;letter-spacing:0.015rem;min-width:96px;padding-inline:var(--cnvs-sys-space-x6, 1.5rem);height:var(--cnvs-sys-space-x10, 2.5rem);" }),
+        small: createStyles({ name: "y1194", styles: "font-size:0.875rem;letter-spacing:0.015rem;height:var(--cnvs-sys-space-x8, 2rem);min-width:var(--cnvs-sys-space-x20, 5rem);padding-inline:var(--cnvs-sys-space-x4, 1rem);gap:var(--cnvs-sys-space-x1, 0.25rem);" }),
+        extraSmall: createStyles({ name: "y1195", styles: "font-size:0.75rem;line-height:var(--cnvs-sys-space-x4, 1rem);letter-spacing:0.02rem;height:var(--cnvs-sys-space-x6, 1.5rem);min-width:auto;padding-inline:var(--cnvs-sys-space-x3, 0.75rem);gap:var(--cnvs-sys-space-x1, 0.25rem);" }),
     },
     iconPosition: {
-        largeOnly: createStyles({ name: "hmvv5", styles: "padding:0;min-width:calc(var(--cnvs-sys-space-x4, 1rem) * 3);" }),
-        largeStart: createStyles({ name: "hmvv6", styles: "padding-inline-start:var(--cnvs-sys-space-x6, 1.5rem);padding-inline-end:var(--cnvs-sys-space-x8, 2rem);" }),
-        largeEnd: createStyles({ name: "hmvv7", styles: "padding-inline-start:var(--cnvs-sys-space-x8, 2rem);padding-inline-end:var(--cnvs-sys-space-x6, 1.5rem);" }),
-        mediumOnly: createStyles({ name: "hmvv8", styles: "padding:0;min-width:var(--cnvs-sys-space-x10, 2.5rem);" }),
-        mediumStart: createStyles({ name: "hmvv9", styles: "padding-inline-start:calc(var(--cnvs-sys-space-x1, 0.25rem) * 5);padding-inline-end:var(--cnvs-sys-space-x6, 1.5rem);" }),
-        mediumEnd: createStyles({ name: "hmvva", styles: "padding-inline-start:var(--cnvs-sys-space-x6, 1.5rem);padding-inline-end:calc(var(--cnvs-sys-space-x1, 0.25rem) * 5);" }),
-        smallOnly: createStyles({ name: "hmvvb", styles: "padding:0;min-width:var(--cnvs-sys-space-x8, 2rem);" }),
-        smallStart: createStyles({ name: "hmvvc", styles: "padding-inline-start:var(--cnvs-sys-space-x3, 0.75rem);padding-inline-end:var(--cnvs-sys-space-x4, 1rem);" }),
-        smallEnd: createStyles({ name: "hmvvd", styles: "padding-inline-start:var(--cnvs-sys-space-x4, 1rem);padding-inline-end:var(--cnvs-sys-space-x3, 0.75rem);" }),
-        extraSmallOnly: createStyles({ name: "hmvve", styles: "padding:0;min-width:var(--cnvs-sys-space-x6, 1.5rem);" }),
-        extraSmallStart: createStyles({ name: "hmvvf", styles: "padding-inline-start:var(--cnvs-sys-space-x2, 0.5rem);padding-inline-end:var(--cnvs-sys-space-x3, 0.75rem);" }),
-        extraSmallEnd: createStyles({ name: "hmvvg", styles: "padding-inline-start:var(--cnvs-sys-space-x3, 0.75rem);padding-inline-end:var(--cnvs-sys-space-x2, 0.5rem);" }),
+        largeOnly: createStyles({ name: "y1196", styles: "padding:0;min-width:calc(var(--cnvs-sys-space-x4, 1rem) * 3);" }),
+        largeStart: createStyles({ name: "y1197", styles: "padding-inline-start:var(--cnvs-sys-space-x6, 1.5rem);padding-inline-end:var(--cnvs-sys-space-x8, 2rem);" }),
+        largeEnd: createStyles({ name: "y1198", styles: "padding-inline-start:var(--cnvs-sys-space-x8, 2rem);padding-inline-end:var(--cnvs-sys-space-x6, 1.5rem);" }),
+        mediumOnly: createStyles({ name: "y1199", styles: "padding:0;min-width:var(--cnvs-sys-space-x10, 2.5rem);" }),
+        mediumStart: createStyles({ name: "y119a", styles: "padding-inline-start:calc(var(--cnvs-sys-space-x1, 0.25rem) * 5);padding-inline-end:var(--cnvs-sys-space-x6, 1.5rem);" }),
+        mediumEnd: createStyles({ name: "y119b", styles: "padding-inline-start:var(--cnvs-sys-space-x6, 1.5rem);padding-inline-end:calc(var(--cnvs-sys-space-x1, 0.25rem) * 5);" }),
+        smallOnly: createStyles({ name: "y119c", styles: "padding:0;min-width:var(--cnvs-sys-space-x8, 2rem);" }),
+        smallStart: createStyles({ name: "y119d", styles: "padding-inline-start:var(--cnvs-sys-space-x3, 0.75rem);padding-inline-end:var(--cnvs-sys-space-x4, 1rem);" }),
+        smallEnd: createStyles({ name: "y119e", styles: "padding-inline-start:var(--cnvs-sys-space-x4, 1rem);padding-inline-end:var(--cnvs-sys-space-x3, 0.75rem);" }),
+        extraSmallOnly: createStyles({ name: "y119f", styles: "padding:0;min-width:var(--cnvs-sys-space-x6, 1.5rem);" }),
+        extraSmallStart: createStyles({ name: "y119g", styles: "padding-inline-start:var(--cnvs-sys-space-x2, 0.5rem);padding-inline-end:var(--cnvs-sys-space-x3, 0.75rem);" }),
+        extraSmallEnd: createStyles({ name: "y119h", styles: "padding-inline-start:var(--cnvs-sys-space-x3, 0.75rem);padding-inline-end:var(--cnvs-sys-space-x2, 0.5rem);" }),
     },
 });
 export function capitalize(string = '') {

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

@@ -5,7 +5,7 @@ import { createStyles, cssVar } from '@workday/canvas-kit-styling';
 import { mergeStyles } from '@workday/canvas-kit-react/layout';
 import { base, brand, system } from '@workday/canvas-tokens-web';
 import { Button } from './Button';
-const deleteStyles = createStyles({ name: "hmvv10", styles: "--css-button-vars-default-background:var(--cnvs-brand-error-base, #de2e21);--css-button-vars-default-border:transparent;--css-button-vars-default-borderRadius:var(--cnvs-sys-shape-round, 62.5rem);--css-button-vars-default-label-emotion-safe:var(--cnvs-brand-error-accent, #ffffff);--css-button-vars-default-icon:var(--cnvs-brand-error-accent, #ffffff);&:hover, &.hover{--css-button-vars-hover-background:var(--cnvs-brand-error-dark, #a31b12);--css-button-vars-hover-border:transparent;--css-button-vars-hover-label-emotion-safe:var(--cnvs-brand-error-accent, #ffffff);--css-button-vars-hover-icon:var(--cnvs-brand-error-accent, #ffffff);}&:focus-visible, &.focus{--css-button-vars-focus-background:var(--cnvs-brand-error-base, #de2e21);--css-button-vars-focus-border:transparent;--css-button-vars-focus-label-emotion-safe:var(--cnvs-brand-error-accent, #ffffff);--css-button-vars-focus-icon:var(--cnvs-brand-error-accent, #ffffff);--css-button-vars-focus-boxShadowInner:var(--cnvs-base-palette-french-vanilla-100, #ffffff);--css-button-vars-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, #0875e1);}&:active, &.active{--css-button-vars-active-background:var(--cnvs-brand-error-darkest, rgba(128,22,14,1));--css-button-vars-active-border:transparent;--css-button-vars-active-label-emotion-safe:var(--cnvs-brand-error-accent, #ffffff);--css-button-vars-active-icon:var(--cnvs-brand-error-accent, #ffffff);}&:disabled, &:active:disabled, &:focus:disabled, &:hover:disabled{--css-button-vars-disabled-background:var(--cnvs-brand-error-light, #fcc9c5);--css-button-vars-disabled-label-emotion-safe:var(--cnvs-brand-error-accent, #ffffff);--css-button-vars-disabled-icon:var(--cnvs-brand-error-accent, #ffffff);opacity:1px;}" });
+const deleteStyles = createStyles({ name: "y11911", styles: "--css-button-vars-default-background:var(--cnvs-brand-error-base, #de2e21);--css-button-vars-default-border:transparent;--css-button-vars-default-borderRadius:var(--cnvs-sys-shape-round, 62.5rem);--css-button-vars-default-label-emotion-safe:var(--cnvs-brand-error-accent, #ffffff);--css-button-vars-default-icon:var(--cnvs-brand-error-accent, #ffffff);&:hover, &.hover{--css-button-vars-hover-background:var(--cnvs-brand-error-dark, #a31b12);--css-button-vars-hover-border:transparent;--css-button-vars-hover-label-emotion-safe:var(--cnvs-brand-error-accent, #ffffff);--css-button-vars-hover-icon:var(--cnvs-brand-error-accent, #ffffff);}&:focus-visible, &.focus{--css-button-vars-focus-background:var(--cnvs-brand-error-base, #de2e21);--css-button-vars-focus-border:transparent;--css-button-vars-focus-label-emotion-safe:var(--cnvs-brand-error-accent, #ffffff);--css-button-vars-focus-icon:var(--cnvs-brand-error-accent, #ffffff);--css-button-vars-focus-boxShadowInner:var(--cnvs-base-palette-french-vanilla-100, #ffffff);--css-button-vars-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, #0875e1);}&:active, &.active{--css-button-vars-active-background:var(--cnvs-brand-error-darkest, rgba(128,22,14,1));--css-button-vars-active-border:transparent;--css-button-vars-active-label-emotion-safe:var(--cnvs-brand-error-accent, #ffffff);--css-button-vars-active-icon:var(--cnvs-brand-error-accent, #ffffff);}&:disabled, &:active:disabled, &:focus:disabled, &:hover:disabled{--css-button-vars-disabled-background:var(--cnvs-brand-error-light, #fcc9c5);--css-button-vars-disabled-label-emotion-safe:var(--cnvs-brand-error-accent, #ffffff);--css-button-vars-disabled-icon:var(--cnvs-brand-error-accent, #ffffff);opacity:1px;}" });
 /**
  * Use sparingly for destructive actions that will result in data loss, can’t be undone, or will
  * have significant consequences. They commonly appear in confirmation dialogs as the final