@workday/canvas-kit-react 12.0.0-alpha.862-next.0 → 12.0.0-alpha.898-next.0

package/dist/commonjs/action-bar/lib/ActionBarItem.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -25,11 +29,11 @@ const common_1 = require("@workday/canvas-kit-react/common");
 const button_1 = require("@workday/canvas-kit-react/button");
 const collection_1 = require("@workday/canvas-kit-react/collection");
 const useActionBarModel_1 = require("./useActionBarModel");
-exports.useActionBarItem = common_1.composeHooks(collection_1.useOverflowListItemMeasure, collection_1.useListItemRegister);
-exports.ActionBarItem = common_1.createSubcomponent(button_1.SecondaryButton)({
+exports.useActionBarItem = (0, common_1.composeHooks)(collection_1.useOverflowListItemMeasure, collection_1.useListItemRegister);
+exports.ActionBarItem = (0, common_1.createSubcomponent)(button_1.SecondaryButton)({
     displayName: 'ActionBar.Item',
     modelHook: useActionBarModel_1.useActionBarModel,
     elemPropsHook: exports.useActionBarItem,
 })((elemProps, Element) => {
-    return React.createElement(Element, Object.assign({}, elemProps));
+    return React.createElement(Element, { ...elemProps });
 });

package/dist/commonjs/action-bar/lib/ActionBarList.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -26,8 +30,8 @@ const common_1 = require("@workday/canvas-kit-react/common");
 const layout_1 = require("@workday/canvas-kit-react/layout");
 const collection_1 = require("@workday/canvas-kit-react/collection");
 const useActionBarModel_1 = require("./useActionBarModel");
-const ResponsiveList = common_1.styled(layout_1.Flex)(({ theme }) => {
-    const { canvas: canvasTheme } = common_1.getTheme(theme);
+const ResponsiveList = (0, common_1.styled)(layout_1.Flex)(({ theme }) => {
+    const { canvas: canvasTheme } = (0, common_1.getTheme)(theme);
     return {
         [canvasTheme.breakpoints.down('s')]: {
             padding: tokens_1.space.s,
@@ -38,12 +42,12 @@ const ResponsiveList = common_1.styled(layout_1.Flex)(({ theme }) => {
     };
 });
 exports.useActionBarList = collection_1.useOverflowListMeasure;
-exports.ActionBarList = common_1.createSubcomponent('div')({
+exports.ActionBarList = (0, common_1.createSubcomponent)('div')({
     displayName: 'ActionBar.List',
     modelHook: useActionBarModel_1.useActionBarModel,
     elemPropsHook: exports.useActionBarList,
 })(({ children, overflowButton, ...elemProps }, Element, model) => {
-    return (React.createElement(ResponsiveList, Object.assign({ as: Element, gap: "s", depth: 1, background: tokens_1.commonColors.background, borderTop: `solid 1px ${tokens_1.colors.soap400}`, padding: `${tokens_1.space.s} ${tokens_1.space.xl} `, position: "fixed", bottom: 0, left: 0, right: 0 }, elemProps),
-        collection_1.useListRenderItems(model, children),
+    return (React.createElement(ResponsiveList, { as: Element, gap: "s", depth: 1, background: tokens_1.commonColors.background, borderTop: `solid 1px ${tokens_1.colors.soap400}`, padding: `${tokens_1.space.s} ${tokens_1.space.xl} `, position: "fixed", bottom: 0, left: 0, right: 0, ...elemProps },
+        (0, collection_1.useListRenderItems)(model, children),
         overflowButton));
 });

package/dist/commonjs/action-bar/lib/ActionBarOverflowButton.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -31,16 +35,16 @@ const collection_1 = require("@workday/canvas-kit-react/collection");
 const menu_1 = require("@workday/canvas-kit-react/menu");
 const useActionBarModel_1 = require("./useActionBarModel");
 const button_1 = require("@workday/canvas-kit-react/button");
-const StyledSecondaryButton = styled_1.default(button_1.SecondaryButton)({
+const StyledSecondaryButton = (0, styled_1.default)(button_1.SecondaryButton)({
     flex: 0,
 });
-exports.useActionBarOverflowButton = common_1.composeHooks(common_1.createElemPropsHook(useActionBarModel_1.useActionBarModel)(() => ({
+exports.useActionBarOverflowButton = (0, common_1.composeHooks)((0, common_1.createElemPropsHook)(useActionBarModel_1.useActionBarModel)(() => ({
     'aria-haspopup': true,
-})), collection_1.useOverflowListTarget, common_1.createSubModelElemPropsHook(useActionBarModel_1.useActionBarModel)(m => m.menu, menu_1.useMenuTarget));
-exports.ActionBarOverflowButton = common_1.createSubcomponent('button')({
+})), collection_1.useOverflowListTarget, (0, common_1.createSubModelElemPropsHook)(useActionBarModel_1.useActionBarModel)(m => m.menu, menu_1.useMenuTarget));
+exports.ActionBarOverflowButton = (0, common_1.createSubcomponent)('button')({
     displayName: 'ActionBar.OverflowButton',
     modelHook: useActionBarModel_1.useActionBarModel,
     elemPropsHook: exports.useActionBarOverflowButton,
 })((elemProps, Element) => {
-    return React.createElement(StyledSecondaryButton, Object.assign({ as: Element, icon: canvas_system_icons_web_1.relatedActionsIcon }, elemProps));
+    return React.createElement(StyledSecondaryButton, { as: Element, icon: canvas_system_icons_web_1.relatedActionsIcon, ...elemProps });
 });

package/dist/commonjs/action-bar/lib/useActionBarModel.js

@@ -8,7 +8,7 @@ const react_1 = __importDefault(require("react"));
 const common_1 = require("@workday/canvas-kit-react/common");
 const collection_1 = require("@workday/canvas-kit-react/collection");
 const menu_1 = require("@workday/canvas-kit-react/menu");
-exports.useActionBarModel = common_1.createModelHook({
+exports.useActionBarModel = (0, common_1.createModelHook)({
     defaultConfig: {
         ...collection_1.useOverflowListModel.defaultConfig,
         /**
@@ -34,7 +34,7 @@ exports.useActionBarModel = common_1.createModelHook({
 })(config => {
     const getId = config.getId || collection_1.defaultGetId;
     const items = config.items;
-    const model = collection_1.useOverflowListModel(collection_1.useOverflowListModel.mergeConfig(config, {
+    const model = (0, collection_1.useOverflowListModel)(collection_1.useOverflowListModel.mergeConfig(config, {
         orientation: config.orientation || 'horizontal',
         items,
         shouldVirtualize: false,
@@ -68,7 +68,7 @@ exports.useActionBarModel = common_1.createModelHook({
     const events = {
         ...model.events,
     };
-    const menu = menu_1.useMenuModel(menu_1.useMenuModel.mergeConfig(config.menuConfig, {
+    const menu = (0, menu_1.useMenuModel)(menu_1.useMenuModel.mergeConfig(config.menuConfig, {
         id: `act-bar-menu-${model.state.id}`,
         items: overflowItems,
         nonInteractiveIds: state.nonInteractiveIds.filter(key => !state.hiddenIds.includes(key)),

package/dist/commonjs/avatar/index.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/dist/commonjs/avatar/lib/Avatar.d.ts

@@ -1,10 +1,19 @@
 import { Property } from 'csstype';
-export interface AvatarProps {
+import { CSProps } from '@workday/canvas-kit-styling';
+import { SystemIconCircleSize } from '@workday/canvas-kit-react/icon';
+/**
+ * @deprecated `AvatarVariant` is deprecated and will be removed in a future major version. Update your types and values to use the string literal of either `light` or `dark`.
+ */
+export declare enum AvatarVariant {
+    Light = 0,
+    Dark = 1
+}
+export interface AvatarProps extends CSProps {
     /**
      * The variant of the avatar. Use `light` on dark backgrounds and `dark` on light backgrounds.
      * @default "light"
      */
-    variant?: 'light' | 'dark';
+    variant?: 'light' | 'dark' | AvatarVariant;
     /**
      * The size of the Avatar.
      * - `extraExtraLarge`: 7.5rem x 7.5rem (120px  x 120px)
@@ -15,7 +24,7 @@ export interface AvatarProps {
      * - `small`: 1rem x 1rem (16px x 16px)
      * @default "medium"
      */
-    size?: /** size of small */ 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge' | 'extraExtraLarge' | (string & {});
+    size?: 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge' | 'extraExtraLarge' | (string & {}) | SystemIconCircleSize | number;
     /**
      * The alt text of the Avatar image. This prop is also used for the aria-label.
      * @default Avatar
@@ -35,13 +44,13 @@ export declare const avatarStencil: import("@workday/canvas-kit-styling").Stenci
     variant: {
         light: {
             backgroundColor: "--cnvs-sys-color-bg-alt-default";
-            "& [data-slot=\"avatar-icon\"]": {
+            "& [data-part=\"avatar-icon\"]": {
                 [x: string]: "--cnvs-sys-color-fg-default";
             };
         };
         dark: {
             backgroundColor: "--cnvs-sys-color-bg-primary-default";
-            "& [data-slot=\"avatar-icon\"]": {
+            "& [data-part=\"avatar-icon\"]": {
                 [x: string]: "--cnvs-sys-color-fg-inverse";
             };
         };
@@ -50,112 +59,112 @@ export declare const avatarStencil: import("@workday/canvas-kit-styling").Stenci
         extraSmall: {
             width: "--cnvs-sys-space-x4";
             height: "--cnvs-sys-space-x4";
-            "& [data-slot=\"avatar-icon\"]": {
+            "& [data-part=\"avatar-icon\"]": {
                 [x: string]: string;
             };
         };
         small: {
             width: "--cnvs-sys-space-x6";
             height: "--cnvs-sys-space-x6";
-            "& [data-slot=\"avatar-icon\"]": {
+            "& [data-part=\"avatar-icon\"]": {
                 [x: string]: string;
             };
         };
         medium: {
             width: "--cnvs-sys-space-x8";
             height: "--cnvs-sys-space-x8";
-            "& [data-slot=\"avatar-icon\"]": {
+            "& [data-part=\"avatar-icon\"]": {
                 [x: string]: string;
             };
         };
         large: {
             width: "--cnvs-sys-space-x10";
             height: "--cnvs-sys-space-x10";
-            "& [data-slot=\"avatar-icon\"]": {
+            "& [data-part=\"avatar-icon\"]": {
                 [x: string]: string;
             };
         };
         extraLarge: {
             width: "--cnvs-sys-space-x16";
             height: "--cnvs-sys-space-x16";
-            "& [data-slot=\"avatar-icon\"]": {
+            "& [data-part=\"avatar-icon\"]": {
                 [x: string]: string;
             };
         };
         extraExtraLarge: {
             width: string;
             height: string;
-            "& [data-slot=\"avatar-icon\"]": {
+            "& [data-part=\"avatar-icon\"]": {
                 [x: string]: string;
             };
         };
     };
     objectFit: {
         contain: {
-            "& [data-slot=\"avatar-image\"]": {
+            "& [data-part=\"avatar-image\"]": {
                 objectFit: "contain";
             };
         };
         fill: {
-            "& [data-slot=\"avatar-image\"]": {
+            "& [data-part=\"avatar-image\"]": {
                 objectFit: "fill";
             };
         };
         cover: {
-            "& [data-slot=\"avatar-image\"]": {
+            "& [data-part=\"avatar-image\"]": {
                 objectFit: "cover";
             };
         };
         "scale-down": {
-            "& [data-slot=\"avatar-image\"]": {
+            "& [data-part=\"avatar-image\"]": {
                 objectFit: "scale-down";
             };
         };
         none: {
-            "& [data-slot=\"avatar-image\"]": {
+            "& [data-part=\"avatar-image\"]": {
                 objectFit: "none";
             };
         };
         "-moz-initial": {
-            "& [data-slot=\"avatar-image\"]": {
+            "& [data-part=\"avatar-image\"]": {
                 objectFit: "-moz-initial";
             };
         };
         initial: {
-            "& [data-slot=\"avatar-image\"]": {
+            "& [data-part=\"avatar-image\"]": {
                 objectFit: "initial";
             };
         };
         inherit: {
-            "& [data-slot=\"avatar-image\"]": {
+            "& [data-part=\"avatar-image\"]": {
                 objectFit: "inherit";
             };
         };
         revert: {
-            "& [data-slot=\"avatar-image\"]": {
+            "& [data-part=\"avatar-image\"]": {
                 objectFit: "revert";
             };
         };
         unset: {
-            "& [data-slot=\"avatar-image\"]": {
+            "& [data-part=\"avatar-image\"]": {
                 objectFit: "unset";
             };
         };
     };
     isImageLoaded: {
         true: {
-            "& [data-slot=\"avatar-icon\"]": {
+            "& [data-part=\"avatar-icon\"]": {
                 opacity: number;
             };
-            "& [data-slot=\"avatar-image\"]": {
+            "& [data-part=\"avatar-image\"]": {
                 opacity: number;
             };
         };
         false: {
-            "& [data-slot=\"avatar-icon\"]": {
+            "& [data-part=\"avatar-icon\"]": {
                 opacity: number;
             };
-            "& [data-slot=\"avatar-image\"]": {
+            "& [data-part=\"avatar-image\"]": {
                 opacity: number;
             };
         };
@@ -163,5 +172,14 @@ export declare const avatarStencil: import("@workday/canvas-kit-styling").Stenci
 }, {
     size: string;
 }, never, never>;
-export declare const Avatar: import("@workday/canvas-kit-react/common").ElementComponent<"button", AvatarProps>;
+export declare const Avatar: import("@workday/canvas-kit-react/common").ElementComponent<"button", AvatarProps> & {
+    /**
+     * @deprecated `Avatar.Variant` is deprecated and will be removed in a future major version. Use the string literal of `light` or `dark`.
+     */
+    Variant: typeof AvatarVariant;
+    /**
+     * @deprecated `Avatar.Size` is deprecated and will be removed in a future major version. Use the string literal values for size: 'extraSmall' | 'small | 'medium' | 'large' | 'extraLarge | 'extraExtraLarge' | (string & {})
+     */
+    Size: typeof SystemIconCircleSize;
+};
 //# sourceMappingURL=Avatar.d.ts.map

package/dist/commonjs/avatar/lib/Avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../avatar/lib/Avatar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAUjC,MAAM,WAAW,WAAW;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B;;;;;;;;;OASG;IACH,IAAI,CAAC,EACL,AADO,oBAAoB,CAC3B,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,YAAY,GAAG,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAC/F;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,SAAS,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC;CAChC;AAED,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBA+KxB,CAAC;AAEH,eAAO,MAAM,MAAM,oFAqCjB,CAAC"}
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../avatar/lib/Avatar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAEjC,OAAO,EAAsB,OAAO,EAAS,MAAM,6BAA6B,CAAC;AAGjF,OAAO,EAAa,oBAAoB,EAAoB,MAAM,gCAAgC,CAAC;AAKnG;;GAEG;AACH,oBAAY,aAAa;IACvB,KAAK,IAAA;IACL,IAAI,IAAA;CACL;AAED,MAAM,WAAW,WAAY,SAAQ,OAAO;IAC1C;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,aAAa,CAAC;IAC3C;;;;;;;;;OASG;IACH,IAAI,CAAC,EACH,YAAY,GACV,OAAO,GACP,QAAQ,GACR,OAAO,GACP,YAAY,GACZ,iBAAiB,GACjB,CAAC,MAAM,GAAG,EAAE,CAAC,GACb,oBAAoB,GACpB,MAAM,CAAC;IACX;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,SAAS,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC;CAChC;AAED,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBA+KxB,CAAC;AAEH,eAAO,MAAM,MAAM;IAyDf;;OAEG;;IAEH;;OAEG;;CAGL,CAAC"}

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

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -19,7 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Avatar = exports.avatarStencil = void 0;
+exports.Avatar = exports.avatarStencil = exports.AvatarVariant = void 0;
 const react_1 = __importStar(require("react"));
 const common_1 = require("@workday/canvas-kit-react/common");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
@@ -28,39 +32,47 @@ const tokens_1 = require("@workday/canvas-kit-react/tokens");
 const icon_1 = require("@workday/canvas-kit-react/icon");
 const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
-exports.avatarStencil = canvas_kit_styling_1.createStencil({
+/**
+ * @deprecated `AvatarVariant` is deprecated and will be removed in a future major version. Update your types and values to use the string literal of either `light` or `dark`.
+ */
+var AvatarVariant;
+(function (AvatarVariant) {
+    AvatarVariant[AvatarVariant["Light"] = 0] = "Light";
+    AvatarVariant[AvatarVariant["Dark"] = 1] = "Dark";
+})(AvatarVariant = exports.AvatarVariant || (exports.AvatarVariant = {}));
+exports.avatarStencil = (0, canvas_kit_styling_1.createStencil)({
     vars: {
         size: '',
     },
-    base: { name: "b532d4", styles: "box-sizing:border-box;background:var(--cnvs-sys-color-bg-caution-default);position:relative;display:flex;align-items:center;justify-content:center;padding:0;border:0;overflow:hidden;cursor:default;border-radius:var(--cnvs-sys-shape-round);width:var(--size-avatar-f68c19);height:var(--size-avatar-f68c19);&:focus-visible:not([disabled]), &.focus:not([disabled]){outline:none;box-shadow:0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}:is(button){cursor:pointer;}& > [data-slot=\"avatar-icon\"]{transition:opacity 150ms linear;display:flex;align-items:center;justify-content:center;--size-svg-a30d66:calc(var(--size-avatar-f68c19) * 0.625);}& > [data-slot=\"avatar-image\"]{position:absolute;width:100%;height:100%;border-radius:999px;transition:opacity 150ms linear;}" },
+    base: { name: "ksnk2r", styles: "box-sizing:border-box;background:var(--cnvs-sys-color-bg-caution-default);position:relative;display:flex;align-items:center;justify-content:center;padding:0;border:0;overflow:hidden;cursor:default;border-radius:var(--cnvs-sys-shape-round);width:var(--size-avatar-69cee0);height:var(--size-avatar-69cee0);&:focus-visible:not([disabled]), &.focus:not([disabled]){outline:none;box-shadow:0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}:is(button){cursor:pointer;}& > [data-part=\"avatar-icon\"]{transition:opacity 150ms linear;display:flex;align-items:center;justify-content:center;--size-svg-a30d66:calc(var(--size-avatar-69cee0) * 0.625);}& > [data-part=\"avatar-image\"]{position:absolute;width:100%;height:100%;border-radius:999px;transition:opacity 150ms linear;}" },
     modifiers: {
         variant: {
-            light: { name: "93f2f0", styles: "background-color:var(--cnvs-sys-color-bg-alt-default);& [data-slot=\"avatar-icon\"]{--color-system-icon-583fae:var(--cnvs-sys-color-fg-default);}" },
-            dark: { name: "094953", styles: "background-color:var(--cnvs-sys-color-bg-primary-default);& [data-slot=\"avatar-icon\"]{--color-system-icon-583fae:var(--cnvs-sys-color-fg-inverse);}" }
+            light: { name: "ksnk2s", styles: "background-color:var(--cnvs-sys-color-bg-alt-default);& [data-part=\"avatar-icon\"]{--color-system-icon-583fae:var(--cnvs-sys-color-fg-default);}" },
+            dark: { name: "ksnk2t", styles: "background-color:var(--cnvs-sys-color-bg-primary-default);& [data-part=\"avatar-icon\"]{--color-system-icon-583fae:var(--cnvs-sys-color-fg-inverse);}" }
         },
         size: {
-            extraSmall: { name: "dd6bba", styles: "width:var(--cnvs-sys-space-x4);height:var(--cnvs-sys-space-x4);& [data-slot=\"avatar-icon\"]{--size-svg-a30d66:calc(var(--cnvs-sys-space-x4) * 0.625);}" },
-            small: { name: "8bd568", styles: "width:var(--cnvs-sys-space-x6);height:var(--cnvs-sys-space-x6);& [data-slot=\"avatar-icon\"]{--size-svg-a30d66:calc(var(--cnvs-sys-space-x6) * 0.625);}" },
-            medium: { name: "73d354", styles: "width:var(--cnvs-sys-space-x8);height:var(--cnvs-sys-space-x8);& [data-slot=\"avatar-icon\"]{--size-svg-a30d66:calc(var(--cnvs-sys-space-x8) * 0.625);}" },
-            large: { name: "b1ab3d", styles: "width:var(--cnvs-sys-space-x10);height:var(--cnvs-sys-space-x10);& [data-slot=\"avatar-icon\"]{--size-svg-a30d66:calc(var(--cnvs-sys-space-x10) * 0.625);}" },
-            extraLarge: { name: "51b4a9", styles: "width:var(--cnvs-sys-space-x16);height:var(--cnvs-sys-space-x16);& [data-slot=\"avatar-icon\"]{--size-svg-a30d66:calc(var(--cnvs-sys-space-x16) * 0.625);}" },
-            extraExtraLarge: { name: "271180", styles: "width:calc(var(--cnvs-sys-space-x10) * 3);height:calc(var(--cnvs-sys-space-x10) * 3);& [data-slot=\"avatar-icon\"]{--size-svg-a30d66:calc(calc(var(--cnvs-sys-space-x10) * 3) * 0.625);}" }
+            extraSmall: { name: "ksnk2u", styles: "width:var(--cnvs-sys-space-x4);height:var(--cnvs-sys-space-x4);& [data-part=\"avatar-icon\"]{--size-svg-a30d66:calc(var(--cnvs-sys-space-x4) * 0.625);}" },
+            small: { name: "ksnk2v", styles: "width:var(--cnvs-sys-space-x6);height:var(--cnvs-sys-space-x6);& [data-part=\"avatar-icon\"]{--size-svg-a30d66:calc(var(--cnvs-sys-space-x6) * 0.625);}" },
+            medium: { name: "ksnk2w", styles: "width:var(--cnvs-sys-space-x8);height:var(--cnvs-sys-space-x8);& [data-part=\"avatar-icon\"]{--size-svg-a30d66:calc(var(--cnvs-sys-space-x8) * 0.625);}" },
+            large: { name: "ksnk2x", styles: "width:var(--cnvs-sys-space-x10);height:var(--cnvs-sys-space-x10);& [data-part=\"avatar-icon\"]{--size-svg-a30d66:calc(var(--cnvs-sys-space-x10) * 0.625);}" },
+            extraLarge: { name: "ksnk2y", styles: "width:var(--cnvs-sys-space-x16);height:var(--cnvs-sys-space-x16);& [data-part=\"avatar-icon\"]{--size-svg-a30d66:calc(var(--cnvs-sys-space-x16) * 0.625);}" },
+            extraExtraLarge: { name: "ksnk2z", styles: "width:calc(var(--cnvs-sys-space-x10) * 3);height:calc(var(--cnvs-sys-space-x10) * 3);& [data-part=\"avatar-icon\"]{--size-svg-a30d66:calc(calc(var(--cnvs-sys-space-x10) * 3) * 0.625);}" }
         },
         objectFit: {
-            contain: { name: "ec34b8", styles: "& [data-slot=\"avatar-image\"]{object-fit:contain;}" },
-            fill: { name: "f2ce94", styles: "& [data-slot=\"avatar-image\"]{object-fit:fill;}" },
-            cover: { name: "f01d16", styles: "& [data-slot=\"avatar-image\"]{object-fit:cover;}" },
-            ['scale-down']: { name: "b72ff8", styles: "& [data-slot=\"avatar-image\"]{object-fit:scale-down;}" },
-            none: { name: "6349a5", styles: "& [data-slot=\"avatar-image\"]{object-fit:none;}" },
-            ['-moz-initial']: { name: "8d0a0d", styles: "& [data-slot=\"avatar-image\"]{object-fit:-moz-initial;}" },
-            ['initial']: { name: "23e1a7", styles: "& [data-slot=\"avatar-image\"]{object-fit:initial;}" },
-            ['inherit']: { name: "1be8d9", styles: "& [data-slot=\"avatar-image\"]{object-fit:inherit;}" },
-            ['revert']: { name: "1f00e3", styles: "& [data-slot=\"avatar-image\"]{object-fit:revert;}" },
-            ['unset']: { name: "6f1eb7", styles: "& [data-slot=\"avatar-image\"]{object-fit:unset;}" }
+            contain: { name: "ksnk30", styles: "& [data-part=\"avatar-image\"]{object-fit:contain;}" },
+            fill: { name: "ksnk31", styles: "& [data-part=\"avatar-image\"]{object-fit:fill;}" },
+            cover: { name: "ksnk32", styles: "& [data-part=\"avatar-image\"]{object-fit:cover;}" },
+            ['scale-down']: { name: "ksnk33", styles: "& [data-part=\"avatar-image\"]{object-fit:scale-down;}" },
+            none: { name: "ksnk34", styles: "& [data-part=\"avatar-image\"]{object-fit:none;}" },
+            ['-moz-initial']: { name: "ksnk35", styles: "& [data-part=\"avatar-image\"]{object-fit:-moz-initial;}" },
+            ['initial']: { name: "ksnk36", styles: "& [data-part=\"avatar-image\"]{object-fit:initial;}" },
+            ['inherit']: { name: "ksnk37", styles: "& [data-part=\"avatar-image\"]{object-fit:inherit;}" },
+            ['revert']: { name: "ksnk38", styles: "& [data-part=\"avatar-image\"]{object-fit:revert;}" },
+            ['unset']: { name: "ksnk39", styles: "& [data-part=\"avatar-image\"]{object-fit:unset;}" }
         },
         isImageLoaded: {
-            true: { name: "6ab642", styles: "& [data-slot=\"avatar-icon\"]{opacity:0;}& [data-slot=\"avatar-image\"]{opacity:1;}" },
-            false: { name: "53c2af", styles: "& [data-slot=\"avatar-icon\"]{opacity:1;}& [data-slot=\"avatar-image\"]{opacity:0;}" }
+            true: { name: "ksnk3a", styles: "& [data-part=\"avatar-icon\"]{opacity:0;}& [data-part=\"avatar-image\"]{opacity:1;}" },
+            false: { name: "ksnk3b", styles: "& [data-part=\"avatar-icon\"]{opacity:1;}& [data-part=\"avatar-image\"]{opacity:0;}" }
         }
     },
     defaultModifiers: {
@@ -69,11 +81,11 @@ exports.avatarStencil = canvas_kit_styling_1.createStencil({
         isImageLoaded: 'false',
         objectFit: 'contain',
     }
-}, "avatar-f68c19");
-exports.Avatar = common_1.createComponent('button')({
+}, "avatar-69cee0");
+exports.Avatar = (0, common_1.createComponent)('button')({
     displayName: 'Avatar',
     Component: ({ variant, size, altText = 'Avatar', url, objectFit, ...elemProps }, ref, Element) => {
-        const [imageLoaded, setImageLoaded] = react_1.useState(false);
+        const [imageLoaded, setImageLoaded] = (0, react_1.useState)(false);
         const loadImage = () => {
             if (!imageLoaded) {
                 setImageLoaded(true);
@@ -82,15 +94,38 @@ exports.Avatar = common_1.createComponent('button')({
         react_1.default.useLayoutEffect(() => {
             setImageLoaded(false);
         }, [url]);
-        return (react_1.default.createElement(Element, Object.assign({ ref: ref, "aria-label": altText }, layout_1.mergeStyles(elemProps, [
-            exports.avatarStencil({
-                variant,
-                size,
-                objectFit,
-                isImageLoaded: imageLoaded,
-            }),
-        ])),
-            react_1.default.createElement(icon_1.SystemIcon, { icon: canvas_system_icons_web_1.userIcon, "data-slot": "avatar-icon" }),
-            url && react_1.default.createElement("img", { "data-slot": "avatar-image", src: url, alt: altText, onLoad: loadImage })));
+        // TODO: Remove this warning for a hard breaking change in v13
+        if (process.env.NODE_ENV === 'development') {
+            if (typeof variant === 'number') {
+                console.warn('Avatar: Avatar.Variant is deprecated and will be removed in v13. Please use a string literal of "light"  or "dark"');
+            }
+            if (typeof size === 'number') {
+                console.warn("Avatar: Avatar.Size is deprecated and will be removed in v13. Use the string literal values for size: 'extraSmall' | 'small | 'medium' | 'large' | 'extraLarge | 'extraExtraLarge' | (string & {})");
+            }
+        }
+        return (react_1.default.createElement(Element, { ref: ref, "aria-label": altText, role: Element === 'button' ? 'button' : 'img', ...(0, layout_1.mergeStyles)(elemProps, [
+                (0, exports.avatarStencil)({
+                    variant: variant === AvatarVariant.Light
+                        ? 'light'
+                        : variant === AvatarVariant.Dark
+                            ? 'dark'
+                            : variant,
+                    size: typeof size === 'number' ? (0, canvas_kit_styling_1.px2rem)(size) : size,
+                    objectFit,
+                    isImageLoaded: imageLoaded,
+                }),
+            ]) },
+            react_1.default.createElement(icon_1.SystemIcon, { icon: canvas_system_icons_web_1.userIcon, "data-part": "avatar-icon" }),
+            url && react_1.default.createElement("img", { "data-part": "avatar-image", src: url, alt: altText, onLoad: loadImage })));
+    },
+    subComponents: {
+        /**
+         * @deprecated `Avatar.Variant` is deprecated and will be removed in a future major version. Use the string literal of `light` or `dark`.
+         */
+        Variant: AvatarVariant,
+        /**
+         * @deprecated `Avatar.Size` is deprecated and will be removed in a future major version. Use the string literal values for size: 'extraSmall' | 'small | 'medium' | 'large' | 'extraLarge | 'extraExtraLarge' | (string & {})
+         */
+        Size: icon_1.SystemIconCircleSize,
     },
 });

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

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -24,24 +28,24 @@ const React = __importStar(require("react"));
 const common_1 = require("@workday/canvas-kit-react/common");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
-const grow = canvas_kit_styling_1.keyframes({ name: "56eab3", styles: "from{transform:scale(0.85);}to{transform:scale(1.0);}" });
+const grow = (0, canvas_kit_styling_1.keyframes)({ name: "ksnk3c", styles: "from{transform:scale(0.85);}to{transform:scale(1.0);}" });
 // .cnvs-count-badge
-const countBadgeStencil = canvas_kit_styling_1.createStencil({
-    base: { name: "3c746d", styles: "box-sizing:border-box;align-items:center;animation:animation-56eab3 0.2s ease;background:var(--cnvs-sys-color-static-red-default);border-radius:var(--cnvs-sys-shape-round);color:var(--cnvs-sys-color-text-inverse);display:inline-flex;font-family:var(--cnvs-sys-font-family-default);font-size:var(--cnvs-sys-font-size-subtext-medium);font-weight:var(--cnvs-sys-font-weight-bold);height:1.25rem;justify-content:center;line-height:1.25rem;min-width:1.25rem;padding:0 0.40625rem;text-shadow:0 0 0.0625rem rgba(0,0,0, 0.35);" },
+const countBadgeStencil = (0, canvas_kit_styling_1.createStencil)({
+    base: { name: "ksnk3d", styles: "box-sizing:border-box;align-items:center;animation:animation-ksnk3c 0.2s ease;background:var(--cnvs-sys-color-static-red-default);border-radius:var(--cnvs-sys-shape-round);color:var(--cnvs-sys-color-text-inverse);display:inline-flex;font-family:var(--cnvs-sys-font-family-default);font-size:var(--cnvs-sys-font-size-subtext-medium);font-weight:var(--cnvs-sys-font-weight-bold);height:1.25rem;justify-content:center;line-height:1.25rem;min-width:1.25rem;padding:0 0.40625rem;text-shadow:0 0 0.0625rem rgba(0,0,0, 0.35);" },
     modifiers: {
         variant: {
             // .cnvs-count-badge--variant-inverse
-            inverse: { name: "6cf61b", styles: "background:var(--cnvs-sys-color-bg-default);box-shadow:0 0.0625rem 0.125rem rgba(0,0,0, 0.25);color:var(--cnvs-sys-color-text-primary-default);text-shadow:none;" }
+            inverse: { name: "ksnk3e", styles: "background:var(--cnvs-sys-color-bg-default);box-shadow:0 0.0625rem 0.125rem rgba(0,0,0, 0.25);color:var(--cnvs-sys-color-text-primary-default);text-shadow:none;" }
         }
     }
 }, "count-badge-183e28");
 /**
  * `CountBadge` provides a quantity-based summary with dynamic values.
  */
-exports.CountBadge = common_1.createComponent('span')({
+exports.CountBadge = (0, common_1.createComponent)('span')({
     displayName: 'CountBadge',
     Component: ({ count = 0, limit = 1000, variant, ...elemProps }, ref, Element) => {
         const formattedCount = count < limit ? `${count}` : `${limit - 1}+`;
-        return (React.createElement(Element, Object.assign({ ref: ref }, canvas_kit_styling_1.handleCsProp(elemProps, [countBadgeStencil({ variant })])), formattedCount));
+        return (React.createElement(Element, { ref: ref, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, [countBadgeStencil({ variant })]) }, formattedCount));
     },
 });

package/dist/commonjs/banner/index.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

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

@@ -16,7 +16,7 @@ const styles = {
     transition: 'background-color 120ms',
     '&:focus': {
         outline: 'none',
-        ...common_1.focusRing({ separation: 2 }),
+        ...(0, common_1.focusRing)({ separation: 2 }),
     },
     ...common_1.hideMouseFocus,
 };
@@ -51,7 +51,7 @@ const styles = {
  * );
  * ```
  */
-exports.Banner = common_1.createContainer('button')({
+exports.Banner = (0, common_1.createContainer)('button')({
     displayName: 'Banner',
     modelHook: hooks_1.useBannerModel,
     subComponents: {
@@ -85,13 +85,13 @@ exports.Banner = common_1.createContainer('button')({
         ActionText: BannerActionText_1.BannerActionText,
     },
 })(({ children, ...elemProps }, Element, model) => {
-    const palette = hooks_1.useThemedPalette(model.state.hasError ? 'error' : 'alert');
+    const palette = (0, hooks_1.useThemedPalette)(model.state.hasError ? 'error' : 'alert');
     const themedBackgroundStyles = {
         '&:hover': {
             backgroundColor: palette.hover,
         },
     };
-    const isRTL = common_1.useIsRTL();
+    const isRTL = (0, common_1.useIsRTL)();
     const borderBottomLeftRadius = isRTL ? 'borderBottomRightRadius' : 'borderBottomLeftRadius';
     const borderTopLeftRadius = isRTL ? 'borderTopRightRadius' : 'borderTopLeftRadius';
     const borderBottomRightRadius = isRTL ? 'borderBottomLeftRadius' : 'borderBottomRightRadius';
@@ -102,5 +102,5 @@ exports.Banner = common_1.createContainer('button')({
         [borderBottomRightRadius]: model.state.isSticky ? 0 : tokens_1.borderRadius.m,
         [borderTopRightRadius]: model.state.isSticky ? 0 : tokens_1.borderRadius.m,
     };
-    return (react_1.jsx(layout_1.Flex, Object.assign({ as: Element }, tokens_1.type.levels.subtext.large, { fontWeight: "medium", textAlign: "left", width: model.state.isSticky ? '222px' : '328px', backgroundColor: palette.normal, color: palette.contrast, padding: `${tokens_1.space.xxs} ${tokens_1.space.s}`, border: "0", display: "flex", alignItems: "center" }, borderStyleProps, { css: [styles, themedBackgroundStyles] }, elemProps), children));
+    return ((0, react_1.jsx)(layout_1.Flex, { as: Element, ...tokens_1.type.levels.subtext.large, fontWeight: "medium", textAlign: "left", width: model.state.isSticky ? '222px' : '328px', backgroundColor: palette.normal, color: palette.contrast, padding: `${tokens_1.space.xxs} ${tokens_1.space.s}`, border: "0", display: "flex", alignItems: "center", ...borderStyleProps, css: [styles, themedBackgroundStyles], ...elemProps }, children));
 });