@workday/canvas-kit-react 15.0.0-alpha.1303-next.0 → 15.0.0

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

@@ -0,0 +1,6 @@
+import { CSProps } from '@workday/canvas-kit-styling';
+export interface AvatarImageProps extends CSProps {
+}
+export declare const avatarImageStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, never>, {}, {}, never, never>;
+export declare const AvatarImage: import("@workday/canvas-kit-react/common").ElementComponent<"img", AvatarImageProps>;
+//# sourceMappingURL=AvatarImage.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarImage.d.ts","sourceRoot":"","sources":["../../../../avatar/lib/AvatarImage.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,OAAO,EAA8B,MAAM,6BAA6B,CAAC;AAEjF,MAAM,WAAW,gBAAiB,SAAQ,OAAO;CAAG;AAEpD,eAAO,MAAM,kBAAkB,iJAM7B,CAAC;AAEH,eAAO,MAAM,WAAW,sFAKtB,CAAC"}

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AvatarImage = exports.avatarImageStencil = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const common_1 = require("@workday/canvas-kit-react/common");
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+exports.avatarImageStencil = (0, canvas_kit_styling_1.createStencil)({
+    base: { name: "279afo", styles: "box-sizing:border-box;height:100%;width:100%;object-fit:cover;" }
+}, "avatar-image-e0bffc");
+exports.AvatarImage = (0, common_1.createComponent)('img')({
+    displayName: 'AvatarImage',
+    Component: ({ ...elemProps }, ref, Element) => {
+        return (0, jsx_runtime_1.jsx)(Element, { ref: ref, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.avatarImageStencil)()) });
+    },
+});

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

@@ -0,0 +1,14 @@
+import { CSProps } from '@workday/canvas-kit-styling';
+export interface AvatarNameProps extends CSProps {
+    /**
+     * The alt text of the Avatar image. This prop is also used for the initials. The first letter of the first name and the first letter of the second name are chosen for the initials.
+     */
+    name: string;
+    /**
+     * If you want full control over the initials, use `preferredInitials` instead.
+     */
+    preferredInitials?: string;
+}
+export declare const avatarNameStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, never>, {}, {}, never, never>;
+export declare const AvatarName: import("@workday/canvas-kit-react/common").ElementComponent<"span", AvatarNameProps>;
+//# sourceMappingURL=AvatarName.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarName.d.ts","sourceRoot":"","sources":["../../../../avatar/lib/AvatarName.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,OAAO,EAA8B,MAAM,6BAA6B,CAAC;AAIjF,MAAM,WAAW,eAAgB,SAAQ,OAAO;IAC9C;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,eAAO,MAAM,iBAAiB,iJAK5B,CAAC;AAEH,eAAO,MAAM,UAAU,sFASrB,CAAC"}

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

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AvatarName = exports.avatarNameStencil = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const common_1 = require("@workday/canvas-kit-react/common");
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const getInitialsFromName_1 = require("./getInitialsFromName");
+exports.avatarNameStencil = (0, canvas_kit_styling_1.createStencil)({
+    base: { name: "25vs7l", styles: "box-sizing:border-box;text-transform:uppercase;cursor:default;" }
+}, "avatar-name-c3d5d9");
+exports.AvatarName = (0, common_1.createComponent)('span')({
+    displayName: 'AvatarName',
+    Component: ({ name, preferredInitials, ...elemProps }, ref, Element) => {
+        return ((0, jsx_runtime_1.jsx)(Element, { ref: ref, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.avatarNameStencil)()), children: preferredInitials || (0, getInitialsFromName_1.getInitialsFromName)(name) }));
+    },
+});

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

@@ -0,0 +1,144 @@
+import React from 'react';
+import { CSProps } from '@workday/canvas-kit-styling';
+export interface BaseAvatarProps extends CSProps {
+    /**
+     * Children of the BaseAvatar.
+     */
+    children?: React.ReactNode;
+    /**
+     * The variant of the Avatar.
+     * @default "blue"
+     */
+    variant?: 'blue' | 'amber' | 'teal' | 'purple';
+    /**
+     * The size of the Avatar.
+     * `extraExtraSmall` is 24px x 24px
+     * `extraSmall` is 32px x 32px
+     * `small` is 40px x 40px
+     * `medium` is 48px x 48px
+     * `large` is 72px x 72px
+     * `extraLarge` is 96px x 96px
+     * `extraExtraLarge` is 120px x 120px
+     * @default "medium"
+     */
+    size?: 'extraExtraSmall' | 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge' | 'extraExtraLarge' | (string & {});
+}
+export declare const baseAvatarStencil: import("@workday/canvas-kit-styling").Stencil<{
+    variant: {
+        blue: ({ backgroundColor, color }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            backgroundColor: `var(--${string}, var(--cnvs-base-palette-blue-300, oklch(0.7933 0.1076 252.08 / 1)))`;
+            color: `var(--${string}, var(--cnvs-base-palette-blue-800, oklch(0.3908 0.128 256 / 1)))`;
+        };
+        amber: ({ backgroundColor, color }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            backgroundColor: `var(--${string}, var(--cnvs-base-palette-amber-200, oklch(0.9191 0.1547 99.7 / 1)))`;
+            color: `var(--${string}, var(--cnvs-base-palette-amber-700, oklch(0.4824 0.1353 46.11 / 1)))`;
+        };
+        teal: ({ backgroundColor, color }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            backgroundColor: `var(--${string}, var(--cnvs-base-palette-teal-300, oklch(0.7836 0.0874 204.93 / 1)))`;
+            color: `var(--${string}, var(--cnvs-base-palette-teal-800, oklch(0.3982 0.0687 209.08 / 1)))`;
+        };
+        purple: ({ backgroundColor, color }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            backgroundColor: `var(--${string}, var(--cnvs-base-palette-purple-300, oklch(0.8108 0.1412 315.48 / 1)))`;
+            color: `var(--${string}, var(--cnvs-base-palette-purple-800, oklch(0.422 0.136 315.49 / 1)))`;
+        };
+    };
+    size: {
+        extraExtraSmall: ({ size }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            [x: string]: "var(--cnvs-sys-font-size-subtext-sm, var(--cnvs-sys-font-size-subtext-small, 0.625rem))" | "var(--cnvs-sys-line-height-subtext-sm, var(--cnvs-sys-line-height-subtext-small, 1rem))" | "var(--cnvs-sys-letter-spacing-subtext-sm, var(--cnvs-sys-type-letter-spacing-subtext-small))" | "var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem))";
+            lineHeight: "var(--cnvs-sys-line-height-subtext-sm, var(--cnvs-sys-line-height-subtext-small, 1rem))";
+            fontSize: "var(--cnvs-sys-font-size-subtext-sm, var(--cnvs-sys-font-size-subtext-small, 0.625rem))";
+            letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-sm, var(--cnvs-sys-type-letter-spacing-subtext-small))";
+        };
+        extraSmall: ({ size }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            [x: string]: "var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem))" | "var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem))" | "var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium))" | "var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem))";
+            lineHeight: "var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem))";
+            fontSize: "var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem))";
+            letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium))";
+        };
+        small: ({ size }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            [x: string]: "var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small, 1rem))" | "var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small, 1.5rem))" | "var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-sys-type-letter-spacing-body-small))" | "var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem))";
+            lineHeight: "var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small, 1.5rem))";
+            fontSize: "var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small, 1rem))";
+            letterSpacing: "var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-sys-type-letter-spacing-body-small))";
+        };
+        medium: ({ size }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            [x: string]: "var(--cnvs-sys-font-size-body-md, var(--cnvs-sys-font-size-body-medium, 1.125rem))" | "var(--cnvs-sys-line-height-body-md, var(--cnvs-sys-line-height-body-medium, 1.75rem))" | `var(var(--cnvs-base-size-600, 3rem), ${string})`;
+            lineHeight: "var(--cnvs-sys-line-height-body-md, var(--cnvs-sys-line-height-body-medium, 1.75rem))";
+            fontSize: "var(--cnvs-sys-font-size-body-md, var(--cnvs-sys-font-size-body-medium, 1.125rem))";
+        };
+        large: ({ size }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            [x: string]: "--cnvs-sys-font-weight-bold" | "var(--cnvs-sys-font-size-heading-md, var(--cnvs-sys-font-size-heading-medium, 1.75rem))" | "var(--cnvs-sys-line-height-heading-md, var(--cnvs-sys-line-height-heading-medium, 2.25rem))" | `var(var(--cnvs-base-size-900, 4.5rem), ${string})`;
+            fontWeight: "--cnvs-sys-font-weight-bold";
+            lineHeight: "var(--cnvs-sys-line-height-heading-md, var(--cnvs-sys-line-height-heading-medium, 2.25rem))";
+            fontSize: "var(--cnvs-sys-font-size-heading-md, var(--cnvs-sys-font-size-heading-medium, 1.75rem))";
+        };
+        extraLarge: ({ size }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            [x: string]: "--cnvs-sys-font-weight-bold" | "var(--cnvs-sys-line-height-title-sm, var(--cnvs-sys-line-height-title-small, 3rem))" | "var(--cnvs-sys-font-size-title-sm, var(--cnvs-sys-font-size-title-small, 2.5rem))" | `var(var(--cnvs-base-size-1200, 6rem), ${string})`;
+            fontWeight: "--cnvs-sys-font-weight-bold";
+            lineHeight: "var(--cnvs-sys-line-height-title-sm, var(--cnvs-sys-line-height-title-small, 3rem))";
+            fontSize: "var(--cnvs-sys-font-size-title-sm, var(--cnvs-sys-font-size-title-small, 2.5rem))";
+        };
+        extraExtraLarge: ({ size }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            [x: string]: string;
+            fontWeight: "--cnvs-sys-font-weight-bold";
+            lineHeight: "var(--cnvs-sys-line-height-title-md, var(--cnvs-sys-line-height-title-medium, 3.5rem))";
+            fontSize: "var(--cnvs-sys-font-size-title-md, var(--cnvs-sys-font-size-title-medium, 3rem))";
+        };
+    };
+}, {}, {
+    backgroundColor: string;
+    color: string;
+    size: string;
+}, never, never>;
+/**
+ * JSDoc for Avatar. Will be part of the Component API docs
+ */
+export declare const BaseAvatar: import("@workday/canvas-kit-react/common").ElementComponent<"div", BaseAvatarProps> & {
+    Image: import("@workday/canvas-kit-react/common").ElementComponent<"img", import("./AvatarImage").AvatarImageProps>;
+    Name: import("@workday/canvas-kit-react/common").ElementComponent<"span", import("./AvatarName").AvatarNameProps>;
+};
+//# sourceMappingURL=BaseAvatar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BaseAvatar.d.ts","sourceRoot":"","sources":["../../../../avatar/lib/BaseAvatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAC,OAAO,EAA8C,MAAM,6BAA6B,CAAC;AAMjG,MAAM,WAAW,eAAgB,SAAQ,OAAO;IAC9C;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;IAE/C;;;;;;;;;;OAUG;IACH,IAAI,CAAC,EACD,iBAAiB,GACjB,YAAY,GACZ,OAAO,GACP,QAAQ,GACR,OAAO,GACP,YAAY,GACZ,iBAAiB,GACjB,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;CACnB;AAED,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAyF5B,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,UAAU;;;CASrB,CAAC"}

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

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BaseAvatar = exports.baseAvatarStencil = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+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 AvatarImage_1 = require("./AvatarImage");
+const AvatarName_1 = require("./AvatarName");
+exports.baseAvatarStencil = (0, canvas_kit_styling_1.createStencil)({
+    vars: {
+        backgroundColor: '',
+        color: '',
+        size: '',
+    },
+    base: { name: "3ukbpn", styles: "box-sizing:border-box;border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));width:var(--size-base-avatar-61af60, var(--cnvs-sys-size-lg, 3rem));height:var(--size-base-avatar-61af60, var(--cnvs-sys-size-lg, 3rem));min-width:var(--size-base-avatar-61af60, var(--cnvs-sys-size-lg, 3rem));min-height:var(--size-base-avatar-61af60, var(--cnvs-sys-size-lg, 3rem));background-color:var(--backgroundColor-base-avatar-61af60, var(--cnvs-base-palette-blue-300, oklch(0.7933 0.1076 252.08 / 1)));color:var(--color-base-avatar-61af60, var(--cnvs-base-palette-blue-800, oklch(0.3908 0.128 256 / 1)));display:flex;align-items:center;justify-content:center;overflow:hidden;border:none;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-body-md, var(--cnvs-sys-line-height-body-medium, 1.75rem));font-size:var(--cnvs-sys-font-size-body-md, var(--cnvs-sys-font-size-body-medium, 1.125rem));" },
+    modifiers: {
+        variant: {
+            blue: { name: "3ivglo", styles: "background-color:var(--backgroundColor-base-avatar-61af60, var(--cnvs-base-palette-blue-300, oklch(0.7933 0.1076 252.08 / 1)));color:var(--color-base-avatar-61af60, var(--cnvs-base-palette-blue-800, oklch(0.3908 0.128 256 / 1)));" },
+            amber: { name: "2ehsa9", styles: "background-color:var(--backgroundColor-base-avatar-61af60, var(--cnvs-base-palette-amber-200, oklch(0.9191 0.1547 99.7 / 1)));color:var(--color-base-avatar-61af60, var(--cnvs-base-palette-amber-700, oklch(0.4824 0.1353 46.11 / 1)));" },
+            teal: { name: "vgb0y", styles: "background-color:var(--backgroundColor-base-avatar-61af60, var(--cnvs-base-palette-teal-300, oklch(0.7836 0.0874 204.93 / 1)));color:var(--color-base-avatar-61af60, var(--cnvs-base-palette-teal-800, oklch(0.3982 0.0687 209.08 / 1)));" },
+            purple: { name: "32azwa", styles: "background-color:var(--backgroundColor-base-avatar-61af60, var(--cnvs-base-palette-purple-300, oklch(0.8108 0.1412 315.48 / 1)));color:var(--color-base-avatar-61af60, var(--cnvs-base-palette-purple-800, oklch(0.422 0.136 315.49 / 1)));" }
+        },
+        size: {
+            extraExtraSmall: { name: "27wi25", styles: "--size-base-avatar-61af60:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));line-height:var(--cnvs-sys-line-height-subtext-sm, var(--cnvs-sys-line-height-subtext-small, 1rem));font-size:var(--cnvs-sys-font-size-subtext-sm, var(--cnvs-sys-font-size-subtext-small, 0.625rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-sm, var(--cnvs-sys-type-letter-spacing-subtext-small));" },
+            extraSmall: { name: "s0pyn", styles: "--size-base-avatar-61af60:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));line-height:var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem));font-size:var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium));" },
+            small: { name: "2hchf1", styles: "--size-base-avatar-61af60:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));line-height:var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small, 1.5rem));font-size:var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small, 1rem));letter-spacing:var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-sys-type-letter-spacing-body-small));" },
+            medium: { name: "2uvz5c", styles: "--size-base-avatar-61af60:var(var(--cnvs-base-size-600, 3rem), 3rem);line-height:var(--cnvs-sys-line-height-body-md, var(--cnvs-sys-line-height-body-medium, 1.75rem));font-size:var(--cnvs-sys-font-size-body-md, var(--cnvs-sys-font-size-body-medium, 1.125rem));" },
+            large: { name: "gh735", styles: "--size-base-avatar-61af60:var(var(--cnvs-base-size-900, 4.5rem), 4.5rem);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-heading-md, var(--cnvs-sys-line-height-heading-medium, 2.25rem));font-size:var(--cnvs-sys-font-size-heading-md, var(--cnvs-sys-font-size-heading-medium, 1.75rem));" },
+            extraLarge: { name: "38sser", styles: "--size-base-avatar-61af60:var(var(--cnvs-base-size-1200, 6rem), 6rem);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-title-sm, var(--cnvs-sys-line-height-title-small, 3rem));font-size:var(--cnvs-sys-font-size-title-sm, var(--cnvs-sys-font-size-title-small, 2.5rem));" },
+            extraExtraLarge: { name: "1wlfn7", styles: "--size-base-avatar-61af60:7.5rem;font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-title-md, var(--cnvs-sys-line-height-title-medium, 3.5rem));font-size:var(--cnvs-sys-font-size-title-md, var(--cnvs-sys-font-size-title-medium, 3rem));" }
+        }
+    }
+}, "base-avatar-61af60");
+/**
+ * JSDoc for Avatar. Will be part of the Component API docs
+ */
+exports.BaseAvatar = (0, common_1.createComponent)('div')({
+    displayName: 'BaseAvatar',
+    subComponents: {
+        Image: AvatarImage_1.AvatarImage,
+        Name: AvatarName_1.AvatarName,
+    },
+    Component: ({ variant, size, ...elemProps }, ref, Element) => {
+        return (0, jsx_runtime_1.jsx)(Element, { ref: ref, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.baseAvatarStencil)({ variant, size })) });
+    },
+});

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

@@ -0,0 +1,2 @@
+export declare const getInitialsFromName: (name: string) => string;
+//# sourceMappingURL=getInitialsFromName.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"getInitialsFromName.d.ts","sourceRoot":"","sources":["../../../../avatar/lib/getInitialsFromName.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,mBAAmB,SAAU,MAAM,WAU/C,CAAC"}

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

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getInitialsFromName = void 0;
+const getInitialsFromName = (name) => {
+    // Trim and split by one or more whitespace characters
+    const nameParts = name.trim().split(/\s+/).filter(Boolean);
+    const first = nameParts[0];
+    const firstInitial = (first === null || first === void 0 ? void 0 : first[0]) || '';
+    const last = nameParts.length > 1 ? nameParts[nameParts.length - 1] : undefined;
+    const lastInitial = (last === null || last === void 0 ? void 0 : last[0]) || '';
+    return `${firstInitial}${lastInitial}`;
+};
+exports.getInitialsFromName = getInitialsFromName;

package/dist/commonjs/badge/index.d.ts

@@ -1,2 +1,2 @@
-export { CountBadge, CountBadgeProps } from './lib/CountBadge';
+export { CountBadge, type CountBadgeProps } from './lib/CountBadge';
 //# sourceMappingURL=index.d.ts.map

package/dist/commonjs/badge/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAE,eAAe,EAAC,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAE,KAAK,eAAe,EAAC,MAAM,kBAAkB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"CountBadge.d.ts","sourceRoot":"","sources":["../../../../badge/lib/CountBadge.tsx"],"names":[],"mappings":"AACA,OAAO,EAAe,OAAO,EAAmC,MAAM,6BAA6B,CAAC;AAYpG,MAAM,WAAW,eAAgB,SAAQ,OAAO;IAC9C;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAC1B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AA+CD;;GAEG;AACH,eAAO,MAAM,UAAU,sFAerB,CAAC"}
+{"version":3,"file":"CountBadge.d.ts","sourceRoot":"","sources":["../../../../badge/lib/CountBadge.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,OAAO,EAAiD,MAAM,6BAA6B,CAAC;AAYpG,MAAM,WAAW,eAAgB,SAAQ,OAAO;IAC9C;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAC1B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAgDD;;GAEG;AACH,eAAO,MAAM,UAAU,sFAerB,CAAC"}

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

@@ -5,24 +5,24 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 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 = (0, canvas_kit_styling_1.keyframes)({ name: "3ya359", styles: "from{transform:scale(0.85);}to{transform:scale(1.0);}" });
+const grow = (0, canvas_kit_styling_1.keyframes)({ name: "jdm52", styles: "from{transform:scale(0.85);}to{transform:scale(1.0);}" });
 // .cnvs-count-badge
 const countBadgeStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "3mm0z6", styles: "box-sizing:border-box;align-items:center;animation:animation-3ya359 0.2s ease;border-radius:var(--cnvs-sys-shape-round);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;background:var(--cnvs-sys-color-fg-critical-default);color:var(--cnvs-sys-color-text-inverse);" },
+    base: { name: "20qm33", styles: "box-sizing:border-box;align-items:center;animation:animation-jdm52 0.2s ease;border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));display:inline-flex;font-family:var(--cnvs-sys-font-family-default);font-size:var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem));font-weight:var(--cnvs-sys-font-weight-bold);height:1.25rem;justify-content:center;line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium));min-width:var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));padding:0 0.40625rem;background:var(--cnvs-sys-color-accent-danger, var(--cnvs-sys-color-bg-critical-default, oklch(0.5342 0.2172 29.53 / 1)));color:var(--cnvs-sys-color-fg-inverse);" },
     modifiers: {
         variant: {
             // .cnvs-count-badge--variant-inverse
-            inverse: { name: "21po4j", styles: "background:var(--cnvs-sys-color-bg-default);color:var(--cnvs-sys-color-text-primary-default);" }
+            inverse: { name: "2w83y0", styles: "background:var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));color:var(--cnvs-sys-color-fg-info-strong, var(--cnvs-sys-color-fg-primary-strong, oklch(0.4658 0.1562 255.5 / 1)));" }
         },
         emphasis: {
-            high: { name: "1glhia", styles: "" },
-            low: { name: "1t1uad", styles: "background:var(--cnvs-sys-color-bg-info-softer);color:var(--cnvs-sys-color-fg-info-stronger);" }
+            high: { name: "3bt127", styles: "" },
+            low: { name: "3z28u4", styles: "background:var(--cnvs-sys-color-surface-info-strong, var(--cnvs-sys-color-bg-info-softer, oklch(0.6152 0.2108 256.1 / 0.11)));color:var(--cnvs-sys-color-fg-info-strong, var(--cnvs-sys-color-fg-primary-strong, oklch(0.4658 0.1562 255.5 / 1)));" }
         }
     },
     compound: [
         {
             modifiers: { variant: 'inverse', emphasis: 'low' },
-            styles: { name: "2wbeby", styles: "background:var(--cnvs-sys-color-bg-transparent-strong);color:var(--cnvs-sys-color-fg-inverse);" }
+            styles: { name: "2mabik", styles: "background:var(--cnvs-sys-color-surface-overlay-hover-inverse, oklch(1 0 0 / 0.16));color:var(--cnvs-sys-color-fg-inverse);" }
         }
     ]
 }, "count-badge-524876");

package/dist/commonjs/banner/lib/Banner.d.ts

@@ -10,23 +10,23 @@ export interface BannerProps extends ExtractProps<typeof Flex, never> {
 export declare const bannerStencil: import("@workday/canvas-kit-styling").Stencil<{
     hasErrors: {
         true: {
-            backgroundColor: "--cnvs-brand-error-base";
-            color: "--cnvs-brand-error-accent";
+            backgroundColor: "var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)))";
+            color: "--cnvs-sys-color-fg-inverse";
             '&:hover, &.hover': {
-                background: "--cnvs-brand-error-dark";
+                background: string;
             };
             '& [data-part="exclamation-circle-icon"]': {
-                [x: string]: string;
+                [x: string]: "--cnvs-sys-color-fg-inverse" | "var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)))";
             };
         };
         false: {
-            backgroundColor: "--cnvs-brand-alert-base";
-            color: "--cnvs-brand-alert-accent";
+            backgroundColor: "var(--cnvs-sys-color-brand-accent-caution, oklch(0.7909 0.1711 70.15 / 1))";
+            color: "--cnvs-sys-color-fg-contrast-default";
             '&:hover, &.hover': {
-                background: "--cnvs-brand-alert-dark";
+                background: string;
             };
             '& [data-part="exclamation-triangle-icon"]': {
-                [x: string]: string;
+                [x: string]: "var(--cnvs-sys-color-fg-inverse, currentColor)" | "var(--cnvs-sys-color-brand-fg-caution-strong, oklch(0.4824 0.1353 46.11 / 1))";
             };
         };
     };

package/dist/commonjs/banner/lib/Banner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../../banner/lib/Banner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAkB,YAAY,EAAY,MAAM,kCAAkC,CAAC;AAC1F,OAAO,EAAC,IAAI,EAAc,MAAM,kCAAkC,CAAC;AAWnE,MAAM,WAAW,WAAY,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC;IACnE;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA6DxB,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,eAAO,MAAM,MAAM;;;;;;;;;;;;IAIf;;;;;;;OAOG;;;;;;;;;IAEH;;;;;;;OAOG;;;;;;;;;IAEH;;;;;;;;OAQG;;;;;;;;;CAcL,CAAC"}
+{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../../banner/lib/Banner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,YAAY,EAA6B,MAAM,kCAAkC,CAAC;AAE1F,OAAO,EAAC,IAAI,EAAc,MAAM,kCAAkC,CAAC;AASnE,MAAM,WAAW,WAAY,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC;IACnE;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAwExB,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,eAAO,MAAM,MAAM;;;;;;;;;;;;IAIf;;;;;;;OAOG;;;;;;;;;IAEH;;;;;;;OAOG;;;;;;;;;IAEH;;;;;;;;OAQG;;;;;;;;;CAcL,CAAC"}

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

@@ -3,27 +3,27 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Banner = exports.bannerStencil = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const common_1 = require("@workday/canvas-kit-react/common");
+const icon_1 = require("@workday/canvas-kit-react/icon");
 const layout_1 = require("@workday/canvas-kit-react/layout");
-const hooks_1 = require("./hooks");
-const BannerIcon_1 = require("./BannerIcon");
-const BannerLabel_1 = require("./BannerLabel");
-const BannerActionText_1 = require("./BannerActionText");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
-const icon_1 = require("@workday/canvas-kit-react/icon");
+const BannerActionText_1 = require("./BannerActionText");
+const BannerIcon_1 = require("./BannerIcon");
+const BannerLabel_1 = require("./BannerLabel");
+const hooks_1 = require("./hooks");
 exports.bannerStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "2vn70u", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default), Helvetica Neue, Helvetica, Arial, sans-serif;font-weight:var(--cnvs-sys-font-weight-medium);line-height:var(--cnvs-sys-line-height-subtext-large);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);padding:var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x4);border:0;display:flex;align-items:center;text-align:left;border-start-start-radius:var(--cnvs-sys-shape-x1);border-start-end-radius:var(--cnvs-sys-shape-x1);border-end-start-radius:var(--cnvs-sys-shape-x1);border-end-end-radius:var(--cnvs-sys-shape-x1);cursor:pointer;transition:background-color 120ms;outline:var(--cnvs-sys-space-x1) solid transparent;&:focus-visible, &.focus{outline:var(--cnvs-sys-shape-x1) double transparent;box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}" },
+    base: { name: "42uood", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default), Helvetica Neue, Helvetica, Arial, sans-serif;font-weight:var(--cnvs-sys-font-weight-medium);line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem)) var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));border:0;display:flex;align-items:center;text-align:left;border-start-start-radius:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));border-start-end-radius:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));border-end-start-radius:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));border-end-end-radius:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));cursor:pointer;transition:background-color 120ms linear;outline:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem)) solid transparent;&:focus-visible, &.focus{outline:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem)) double transparent;box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}" },
     modifiers: {
         hasErrors: {
-            true: { name: "1v551t", styles: "background-color:var(--cnvs-brand-error-base);color:var(--cnvs-brand-error-accent);&:hover, &.hover{background:var(--cnvs-brand-error-dark);}& [data-part=\"exclamation-circle-icon\"]{--accentColor-system-icon-3a4847:currentColor;--color-system-icon-3a4847:currentColor;--backgroundColor-system-icon-3a4847:none;}" },
-            false: { name: "38nann", styles: "background-color:var(--cnvs-brand-alert-base);color:var(--cnvs-brand-alert-accent);&:hover, &.hover{background:var(--cnvs-brand-alert-dark);}& [data-part=\"exclamation-triangle-icon\"]{--accentColor-system-icon-3a4847:currentColor;--color-system-icon-3a4847:currentColor;--backgroundColor-system-icon-3a4847:none;}" }
+            true: { name: "ota34", styles: "background-color:var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));color:var(--cnvs-sys-color-fg-inverse);&:hover, &.hover{background:color-mix(in srgb, var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1))) , var(--cnvs-sys-color-accent-overlay-mixin, oklch(0 0 0 / 1)) calc(var(--cnvs-sys-opacity-accent-hover, 0.18) * 100%));}& [data-part=\"exclamation-circle-icon\"]{--accentColor-system-icon-c9acc3:var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse);--backgroundColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse);}" },
+            false: { name: "1i4l5r", styles: "background-color:var(--cnvs-sys-color-brand-accent-caution, oklch(0.7909 0.1711 70.15 / 1));color:var(--cnvs-sys-color-fg-contrast-default);&:hover, &.hover{background:color-mix(in srgb, var(--cnvs-sys-color-brand-accent-caution, oklch(0.7909 0.1711 70.15 / 1)) , var(--cnvs-sys-color-accent-overlay-mixin, oklch(0 0 0 / 1)) calc(var(--cnvs-sys-opacity-accent-hover, 0.18) * 100%));}& [data-part=\"exclamation-triangle-icon\"]{--accentColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse, currentColor);--color-system-icon-c9acc3:var(--cnvs-sys-color-brand-fg-caution-strong, oklch(0.4824 0.1353 46.11 / 1));--backgroundColor-system-icon-c9acc3:var(--cnvs-sys-color-brand-fg-caution-strong, oklch(0.4824 0.1353 46.11 / 1));}" }
         },
         isSticky: {
-            true: { name: "1wy32u", styles: "width:13.875rem;border-start-end-radius:0;border-end-end-radius:0;" },
-            false: { name: "2n14fx", styles: "width:20.5rem;" }
+            true: { name: "1obsxf", styles: "width:13.875rem;border-start-end-radius:0;border-end-end-radius:0;" },
+            false: { name: "1bg5qc", styles: "width:20.5rem;" }
         }
     }
-}, "banner-4eaf8d");
+}, "banner-1de0cd");
 /**
  * `Banner` is a container component rendered as a `<button>` element that is responsible for creating
  * a `BannerModel` and sharing it with its subcomponents using React context.

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

@@ -4,13 +4,13 @@ exports.BannerActionText = exports.actionBarTextStencil = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const common_1 = require("@workday/canvas-kit-react/common");
 const layout_1 = require("@workday/canvas-kit-react/layout");
-const hooks_1 = require("./hooks");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const hooks_1 = require("./hooks");
 exports.actionBarTextStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "4cb5w", styles: "box-sizing:border-box;text-decoration:underline;display:inline;" },
+    base: { name: "3uq626", styles: "box-sizing:border-box;text-decoration:underline;display:inline;" },
     modifiers: {
         isSticky: {
-            true: { name: "1ax524", styles: "display:none;" }
+            true: { name: "1wa6xc", styles: "display:none;" }
         }
     }
 }, "action-bar-text-c1912f");

package/dist/commonjs/banner/lib/BannerIcon.d.ts

@@ -1,6 +1,6 @@
 import { ExtractProps } from '@workday/canvas-kit-react/common';
 import { SystemIcon } from '@workday/canvas-kit-react/icon';
-import { CanvasSystemIcon } from '@workday/design-assets-types';
+import { CanvasSystemIcon } from '@workday/canvas-system-icons-web';
 export interface BannerIconProps extends Omit<ExtractProps<typeof SystemIcon, never>, 'icon'> {
     /**
      * Icon to show next to label

package/dist/commonjs/banner/lib/BannerIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BannerIcon.d.ts","sourceRoot":"","sources":["../../../../banner/lib/BannerIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAqB,MAAM,kCAAkC,CAAC;AAClF,OAAO,EAAC,UAAU,EAAC,MAAM,gCAAgC,CAAC;AAG1D,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAI9D,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,UAAU,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAC3F;;OAEG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;CACzB;AAED,eAAO,MAAM,iBAAiB,iJAI5B,CAAC;AAEH,eAAO,MAAM,UAAU;;;;;;;EAerB,CAAC"}
+{"version":3,"file":"BannerIcon.d.ts","sourceRoot":"","sources":["../../../../banner/lib/BannerIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAqB,MAAM,kCAAkC,CAAC;AAClF,OAAO,EAAC,UAAU,EAAC,MAAM,gCAAgC,CAAC;AAE1D,OAAO,EAAC,gBAAgB,EAAC,MAAM,kCAAkC,CAAC;AAIlE,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,UAAU,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAC3F;;OAEG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;CACzB;AAED,eAAO,MAAM,iBAAiB,iJAI5B,CAAC;AAEH,eAAO,MAAM,UAAU;;;;;;;EAerB,CAAC"}

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

@@ -5,11 +5,10 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const common_1 = require("@workday/canvas-kit-react/common");
 const icon_1 = require("@workday/canvas-kit-react/icon");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
-const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const hooks_1 = require("./hooks");
 exports.bannerIconStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "woekm", styles: "box-sizing:border-box;margin-inline-end:var(--cnvs-sys-space-x3);" }
-}, "banner-icon-12b0fa");
+    base: { name: "vpote", styles: "box-sizing:border-box;margin-inline-end:0;" }
+}, "banner-icon-ebbb70");
 exports.BannerIcon = (0, common_1.createSubcomponent)('span')({
     displayName: 'Banner.Icon',
     modelHook: hooks_1.useBannerModel,

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

@@ -7,7 +7,7 @@ const layout_1 = require("@workday/canvas-kit-react/layout");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const hooks_1 = require("./hooks");
 exports.bannerLabelStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "3gkqa9", styles: "box-sizing:border-box;display:flex;flex:1 1 0%;" }
+    base: { name: "1qujb2", styles: "box-sizing:border-box;display:flex;flex:1 1 0%;" }
 }, "banner-label-416ec4");
 exports.BannerLabel = (0, common_1.createSubcomponent)('div')({
     displayName: 'Banner.Label',

package/dist/commonjs/banner/lib/hooks/useBannerActionText.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useBannerActionText.d.ts","sourceRoot":"","sources":["../../../../../banner/lib/hooks/useBannerActionText.tsx"],"names":[],"mappings":"AAGA;;;GAGG;AACH,eAAO,MAAM,mBAAmB;;;;;;;;;EAI9B,CAAC"}
+{"version":3,"file":"useBannerActionText.d.ts","sourceRoot":"","sources":["../../../../../banner/lib/hooks/useBannerActionText.tsx"],"names":[],"mappings":"AAIA;;;GAGG;AACH,eAAO,MAAM,mBAAmB;;;;;;;;;EAI9B,CAAC"}

package/dist/commonjs/banner/lib/hooks/useBannerIcon.d.ts

@@ -1,3 +1,4 @@
+import { CanvasSystemIcon } from '@workday/design-assets-types';
 /**
  * Adds the necessary props to a `Icon` component.
  * Used by the Banner.Icon subcomponent
@@ -10,7 +11,7 @@ export declare const useBannerIcon: import("@workday/canvas-kit-react/common").B
     };
     events: {};
 }, {
-    readonly icon: import("@workday/design-assets-types").CanvasSystemIcon;
+    readonly icon: CanvasSystemIcon;
     readonly size: 24;
 }>;
 //# sourceMappingURL=useBannerIcon.d.ts.map

package/dist/commonjs/banner/lib/hooks/useBannerIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useBannerIcon.d.ts","sourceRoot":"","sources":["../../../../../banner/lib/hooks/useBannerIcon.tsx"],"names":[],"mappings":"AAIA;;;GAGG;AACH,eAAO,MAAM,aAAa;;;;;;;;;;EAKxB,CAAC"}
+{"version":3,"file":"useBannerIcon.d.ts","sourceRoot":"","sources":["../../../../../banner/lib/hooks/useBannerIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAI9D;;;GAGG;AACH,eAAO,MAAM,aAAa;;;;;;;;;;EAOxB,CAAC"}

package/dist/commonjs/banner/lib/hooks/useBannerIcon.js

@@ -9,8 +9,9 @@ const useBannerModel_1 = require("./useBannerModel");
  * Used by the Banner.Icon subcomponent
  */
 exports.useBannerIcon = (0, common_1.createElemPropsHook)(useBannerModel_1.useBannerModel)(({ state }) => {
+    const icon = state.hasError ? canvas_system_icons_web_1.exclamationCircleIcon : canvas_system_icons_web_1.exclamationTriangleIcon;
     return {
-        icon: state.hasError ? canvas_system_icons_web_1.exclamationCircleIcon : canvas_system_icons_web_1.exclamationTriangleIcon,
+        icon: icon,
         size: 24,
     };
 });

package/dist/commonjs/banner/lib/hooks/useBannerLabel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useBannerLabel.d.ts","sourceRoot":"","sources":["../../../../../banner/lib/hooks/useBannerLabel.tsx"],"names":[],"mappings":"AAGA;;;GAGG;AACH,eAAO,MAAM,cAAc;;;;;;;;;EAIzB,CAAC"}
+{"version":3,"file":"useBannerLabel.d.ts","sourceRoot":"","sources":["../../../../../banner/lib/hooks/useBannerLabel.tsx"],"names":[],"mappings":"AAIA;;;GAGG;AACH,eAAO,MAAM,cAAc;;;;;;;;;EAIzB,CAAC"}

package/dist/commonjs/banner/lib/hooks/useThemedPalette.d.ts

@@ -5,7 +5,13 @@ interface BackgroundColors {
     hover?: string;
     contrast?: string;
 }
+/**
+ * @deprecated ⚠️ `getPaletteColors` is deprecated. Use CSS variables from `@workday/canvas-tokens-web` instead. For more information, view our [Theming Docs](https://workday.github.io/canvas-kit/?path=/docs/features-theming-overview--docs#-preferred-approach-v14).
+ */
 export declare const getPaletteColors: (type: paletteSelection, theme: EmotionCanvasTheme) => BackgroundColors;
+/**
+ * @deprecated ⚠️ `useThemedPalette` is deprecated. In previous versions of Canvas Kit, we allowed teams to pass a theme object, this supported [Emotion's theming](https://emotion.sh/docs/theming). Now that we're shifting to a global theming approach based on CSS variables, we advise to no longer using the theme prop. For more information, view our [Theming Docs](https://workday.github.io/canvas-kit/?path=/docs/features-theming-overview--docs#-preferred-approach-v14).
+ */
 export declare const useThemedPalette: (type: paletteSelection) => BackgroundColors;
 export {};
 //# sourceMappingURL=useThemedPalette.d.ts.map

package/dist/commonjs/banner/lib/hooks/useThemedPalette.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useThemedPalette.d.ts","sourceRoot":"","sources":["../../../../../banner/lib/hooks/useThemedPalette.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,kBAAkB,EAAW,MAAM,kCAAkC,CAAC;AAIlG,KAAK,gBAAgB,GAAG,OAAO,CAAC,MAAM,kBAAkB,CAAC,QAAQ,CAAC,CAAC,SAAS,CAAC,EAAE,QAAQ,CAAC,CAAC;AAEzF,UAAU,gBAAgB;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAmBD,eAAO,MAAM,gBAAgB,SACrB,gBAAgB,SACf,kBAAkB,KACxB,gBAcF,CAAC;AAEF,eAAO,MAAM,gBAAgB,SAAU,gBAAgB,qBAItD,CAAC"}
+{"version":3,"file":"useThemedPalette.d.ts","sourceRoot":"","sources":["../../../../../banner/lib/hooks/useThemedPalette.ts"],"names":[],"mappings":"AAEA,OAAO,EAAqB,kBAAkB,EAAW,MAAM,kCAAkC,CAAC;AAElG,KAAK,gBAAgB,GAAG,OAAO,CAAC,MAAM,kBAAkB,CAAC,QAAQ,CAAC,CAAC,SAAS,CAAC,EAAE,QAAQ,CAAC,CAAC;AAEzF,UAAU,gBAAgB;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAmBD;;GAEG;AACH,eAAO,MAAM,gBAAgB,SACrB,gBAAgB,SACf,kBAAkB,KACxB,gBAcF,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB,SAAU,gBAAgB,qBAItD,CAAC"}

package/dist/commonjs/banner/lib/hooks/useThemedPalette.js

@@ -4,9 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useThemedPalette = exports.getPaletteColors = void 0;
-const common_1 = require("@workday/canvas-kit-react/common");
-const tokens_1 = require("@workday/canvas-kit-react/tokens");
 const chroma_js_1 = __importDefault(require("chroma-js"));
+const common_1 = require("@workday/canvas-kit-react/common");
 const isAccessible = (foreground, background) => {
     return chroma_js_1.default.contrast(foreground, background) >= 3;
 };
@@ -19,14 +18,17 @@ const getPaletteColorsFromTheme = (palette, fallbackColors) => {
             : fallbackColors === null || fallbackColors === void 0 ? void 0 : fallbackColors.contrast,
     };
 };
+/**
+ * @deprecated ⚠️ `getPaletteColors` is deprecated. Use CSS variables from `@workday/canvas-tokens-web` instead. For more information, view our [Theming Docs](https://workday.github.io/canvas-kit/?path=/docs/features-theming-overview--docs#-preferred-approach-v14).
+ */
 const getPaletteColors = (type, theme) => {
     const palette = theme.canvas.palette[type];
     switch (type) {
         case 'error': {
-            return getPaletteColorsFromTheme(palette, { contrast: tokens_1.colors.frenchVanilla100 });
+            return getPaletteColorsFromTheme(palette, { contrast: '#FFFFFF' });
         }
         case 'alert': {
-            return getPaletteColorsFromTheme(palette, { contrast: tokens_1.colors.blackPepper400 });
+            return getPaletteColorsFromTheme(palette, { contrast: '#333333' });
         }
         default: {
             return getPaletteColorsFromTheme(palette);
@@ -34,6 +36,9 @@ const getPaletteColors = (type, theme) => {
     }
 };
 exports.getPaletteColors = getPaletteColors;
+/**
+ * @deprecated ⚠️ `useThemedPalette` is deprecated. In previous versions of Canvas Kit, we allowed teams to pass a theme object, this supported [Emotion's theming](https://emotion.sh/docs/theming). Now that we're shifting to a global theming approach based on CSS variables, we advise to no longer using the theme prop. For more information, view our [Theming Docs](https://workday.github.io/canvas-kit/?path=/docs/features-theming-overview--docs#-preferred-approach-v14).
+ */
 const useThemedPalette = (type) => {
     const theme = (0, common_1.useTheme)();
     return (0, exports.getPaletteColors)(type, theme);