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

package/dist/commonjs/form-field/lib/formFieldStencil.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"formFieldStencil.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/formFieldStencil.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBA6C3B,CAAC"}

package/dist/commonjs/form-field/lib/formFieldStencil.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formFieldStencil = void 0;
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
+exports.formFieldStencil = (0, canvas_kit_styling_1.createStencil)({
+    base: { name: "ksnk4b", styles: "box-sizing:border-box;display:flex;border:none;padding:var(--cnvs-sys-space-zero);margin:var(--cnvs-sys-space-zero) var(--cnvs-sys-space-zero) var(--cnvs-sys-space-x6);" },
+    modifiers: {
+        grow: {
+            true: { name: "ksnk4c", styles: "width:100%;[data-width=\"ck-formfield-width\"]{width:100%;}&:has(div[data-width=\"ck-formfield-width\"]){width:100%;}" }
+        },
+        orientation: {
+            horizontalStart: { name: "ksnk4d", styles: "flex-direction:row;gap:var(--cnvs-sys-space-x8);" },
+            horizontalEnd: { name: "ksnk4e", styles: "flex-direction:row;gap:var(--cnvs-sys-space-x8);" },
+            vertical: { name: "ksnk4f", styles: "flex-direction:column;gap:var(--cnvs-sys-space-x1);align-items:flex-start;" }
+        },
+        required: {
+            true: { name: "ksnk4g", styles: "" }
+        },
+        error: {
+            error: { name: "ksnk4h", styles: "" },
+            alert: { name: "ksnk4i", styles: "" }
+        }
+    },
+    defaultModifiers: {
+        orientation: 'vertical',
+    }
+}, "form-field-db05c5");

package/dist/commonjs/form-field/lib/hooks/index.d.ts

@@ -0,0 +1,6 @@
+export * from './useFormFieldOrientation';
+export * from './useFormFieldHint';
+export * from './useFormFieldInput';
+export * from './useFormFieldModel';
+export * from './useFormFieldLabel';
+//# sourceMappingURL=index.d.ts.map

package/dist/commonjs/form-field/lib/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../form-field/lib/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC"}

package/dist/commonjs/form-field/lib/hooks/index.js

@@ -0,0 +1,21 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = 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];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useFormFieldOrientation"), exports);
+__exportStar(require("./useFormFieldHint"), exports);
+__exportStar(require("./useFormFieldInput"), exports);
+__exportStar(require("./useFormFieldModel"), exports);
+__exportStar(require("./useFormFieldLabel"), exports);

package/dist/commonjs/form-field/lib/hooks/useFormFieldHint.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Adds the necessary props to a `Hint` component.
+ * Used by the FormField.Hint subcomponent and other input type components
+ */
+export declare const useFormFieldHint: import("@workday/canvas-kit-react/common").BehaviorHook<{
+    state: {
+        id: string;
+        error: "alert" | "error" | undefined;
+        isRequired: boolean;
+        orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
+    };
+    events: {};
+}, {
+    id: string;
+}>;
+//# sourceMappingURL=useFormFieldHint.d.ts.map

package/dist/commonjs/form-field/lib/hooks/useFormFieldHint.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFormFieldHint.d.ts","sourceRoot":"","sources":["../../../../../form-field/lib/hooks/useFormFieldHint.tsx"],"names":[],"mappings":"AAGA;;;GAGG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;EAI3B,CAAC"}

package/dist/commonjs/form-field/lib/hooks/useFormFieldHint.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFormFieldHint = void 0;
+const common_1 = require("@workday/canvas-kit-react/common");
+const useFormFieldModel_1 = require("./useFormFieldModel");
+/**
+ * Adds the necessary props to a `Hint` component.
+ * Used by the FormField.Hint subcomponent and other input type components
+ */
+exports.useFormFieldHint = (0, common_1.createElemPropsHook)(useFormFieldModel_1.useFormFieldModel)(({ state }) => {
+    return {
+        id: `hint-${state.id}`,
+    };
+});

package/dist/commonjs/form-field/lib/hooks/useFormFieldInput.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Adds the necessary props to an `Input` component.
+ * Used by the FormField.Input subcomponent and other input type components
+ */
+export declare const useFormFieldInput: import("@workday/canvas-kit-react/common").BehaviorHook<{
+    state: {
+        id: string;
+        error: "alert" | "error" | undefined;
+        isRequired: boolean;
+        orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
+    };
+    events: {};
+}, {
+    required: boolean | undefined;
+    'aria-invalid': boolean | undefined;
+    'aria-describedby': string | undefined;
+    id: string | undefined;
+    error: "alert" | "error" | undefined;
+}>;
+//# sourceMappingURL=useFormFieldInput.d.ts.map

package/dist/commonjs/form-field/lib/hooks/useFormFieldInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFormFieldInput.d.ts","sourceRoot":"","sources":["../../../../../form-field/lib/hooks/useFormFieldInput.tsx"],"names":[],"mappings":"AAGA;;;GAGG;AACH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;EAQ5B,CAAC"}

package/dist/commonjs/form-field/lib/hooks/useFormFieldInput.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFormFieldInput = void 0;
+const common_1 = require("@workday/canvas-kit-react/common");
+const useFormFieldModel_1 = require("./useFormFieldModel");
+/**
+ * Adds the necessary props to an `Input` component.
+ * Used by the FormField.Input subcomponent and other input type components
+ */
+exports.useFormFieldInput = (0, common_1.createElemPropsHook)(useFormFieldModel_1.useFormFieldModel)(({ state }) => {
+    return {
+        required: state.isRequired ? true : undefined,
+        'aria-invalid': state.error === 'error' ? true : undefined,
+        'aria-describedby': state.id ? `hint-${state.id}` : undefined,
+        id: state.id ? `input-${state.id}` : undefined,
+        error: state.error,
+    };
+});

package/dist/commonjs/form-field/lib/hooks/useFormFieldLabel.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Adds the necessary props to a `Label` component.
+ * Used by the FormField.Label subcomponent and other input type components
+ */
+export declare const useFormFieldLabel: import("@workday/canvas-kit-react/common").BehaviorHook<{
+    state: {
+        id: string;
+        error: "alert" | "error" | undefined;
+        isRequired: boolean;
+        orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
+    };
+    events: {};
+}, {
+    htmlFor: string;
+}>;
+//# sourceMappingURL=useFormFieldLabel.d.ts.map

package/dist/commonjs/form-field/lib/hooks/useFormFieldLabel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFormFieldLabel.d.ts","sourceRoot":"","sources":["../../../../../form-field/lib/hooks/useFormFieldLabel.tsx"],"names":[],"mappings":"AAGA;;;GAGG;AACH,eAAO,MAAM,iBAAiB;;;;;;;;;;EAI5B,CAAC"}

package/dist/commonjs/form-field/lib/hooks/useFormFieldLabel.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFormFieldLabel = void 0;
+const common_1 = require("@workday/canvas-kit-react/common");
+const useFormFieldModel_1 = require("./useFormFieldModel");
+/**
+ * Adds the necessary props to a `Label` component.
+ * Used by the FormField.Label subcomponent and other input type components
+ */
+exports.useFormFieldLabel = (0, common_1.createElemPropsHook)(useFormFieldModel_1.useFormFieldModel)(({ state }) => {
+    return {
+        htmlFor: `input-${state.id}`,
+    };
+});

package/dist/commonjs/form-field/lib/hooks/useFormFieldModel.d.ts

@@ -0,0 +1,98 @@
+export declare const useFormFieldModel: (<TT_Special_Generic>(config?: (Partial<{
+    /**
+     * Optional flag to denote if this field has an error or warning to display.
+     * If value is `error`: `aria-invalid` is added to the `FormField.Input` and the red error ring is added.
+     * If value is `alert`: A visual orange warning ring is added to the `FormField.Input`.
+     */
+    error: "alert" | "error" | undefined;
+    /**
+     * Optional `id` provided to `FormField`'s subcomponents as HTML attributes:
+     * - `FormField.Input` will set `aria-describedby` to `hint-${id}`
+     * - `FormField.Input` will set `id` to `input-${id}`
+     * - `FormField.Label` will set `htmlFor` to `input-${id}`
+     * - `FormField.Hint` will set `id` to `hint-${id}`
+     *
+     * If a value is not provided, a unique id will be automatically created by `useUniqueId()`.
+     * @default {useUniqueId}
+     */
+    id: string;
+    /**
+     * Optional flag to denote if this field is required. When true the `FormField.Input` will have
+     * `required` set to true, and an asterisk will be appended to the `FormField.Label`.
+     */
+    isRequired: boolean;
+    orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
+}> & {} & {}) | undefined) => {
+    state: {
+        id: string;
+        /**
+         * Optional flag to denote if this field has an error or warning to display.
+         * If value is `error`: `aria-invalid` is added to the `FormField.Input` and the red error ring is added.
+         * If value is `alert`: A visual orange warning ring is added to the `FormField.Input`.
+         */
+        error: "alert" | "error" | undefined;
+        /**
+         * Optional flag to denote if this field is required. When true the `FormField.Input` will have
+         * `required` set to true, and an asterisk will be appended to the `FormField.Label`.
+         */
+        isRequired: boolean;
+        orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
+    };
+    events: {};
+}) & import("@workday/canvas-kit-react/common").ModelExtras<{
+    /**
+     * Optional flag to denote if this field has an error or warning to display.
+     * If value is `error`: `aria-invalid` is added to the `FormField.Input` and the red error ring is added.
+     * If value is `alert`: A visual orange warning ring is added to the `FormField.Input`.
+     */
+    error: "alert" | "error" | undefined;
+    /**
+     * Optional `id` provided to `FormField`'s subcomponents as HTML attributes:
+     * - `FormField.Input` will set `aria-describedby` to `hint-${id}`
+     * - `FormField.Input` will set `id` to `input-${id}`
+     * - `FormField.Label` will set `htmlFor` to `input-${id}`
+     * - `FormField.Hint` will set `id` to `hint-${id}`
+     *
+     * If a value is not provided, a unique id will be automatically created by `useUniqueId()`.
+     * @default {useUniqueId}
+     */
+    id: string;
+    /**
+     * Optional flag to denote if this field is required. When true the `FormField.Input` will have
+     * `required` set to true, and an asterisk will be appended to the `FormField.Label`.
+     */
+    isRequired: boolean;
+    orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
+}, {}, {
+    id: string;
+    /**
+     * Optional flag to denote if this field has an error or warning to display.
+     * If value is `error`: `aria-invalid` is added to the `FormField.Input` and the red error ring is added.
+     * If value is `alert`: A visual orange warning ring is added to the `FormField.Input`.
+     */
+    error: "alert" | "error" | undefined;
+    /**
+     * Optional flag to denote if this field is required. When true the `FormField.Input` will have
+     * `required` set to true, and an asterisk will be appended to the `FormField.Label`.
+     */
+    isRequired: boolean;
+    orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
+}, {}, {
+    state: {
+        id: string;
+        /**
+         * Optional flag to denote if this field has an error or warning to display.
+         * If value is `error`: `aria-invalid` is added to the `FormField.Input` and the red error ring is added.
+         * If value is `alert`: A visual orange warning ring is added to the `FormField.Input`.
+         */
+        error: "alert" | "error" | undefined;
+        /**
+         * Optional flag to denote if this field is required. When true the `FormField.Input` will have
+         * `required` set to true, and an asterisk will be appended to the `FormField.Label`.
+         */
+        isRequired: boolean;
+        orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
+    };
+    events: {};
+}>;
+//# sourceMappingURL=useFormFieldModel.d.ts.map

package/dist/commonjs/form-field/lib/hooks/useFormFieldModel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFormFieldModel.d.ts","sourceRoot":"","sources":["../../../../../form-field/lib/hooks/useFormFieldModel.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB;IAE1B;;;;OAIG;;IAEH;;;;;;;;;OASG;;IAEH;;;OAGG;;;;;;QApBH;;;;WAIG;;QAaH;;;WAGG;;;;;;IApBH;;;;OAIG;;IAEH;;;;;;;;;OASG;;IAEH;;;OAGG;;;;;IApBH;;;;OAIG;;IAaH;;;OAGG;;;;;;QApBH;;;;WAIG;;QAaH;;;WAGG;;;;;EAiBL,CAAC"}

package/dist/commonjs/form-field/lib/hooks/useFormFieldModel.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFormFieldModel = void 0;
+const common_1 = require("@workday/canvas-kit-react/common");
+exports.useFormFieldModel = (0, common_1.createModelHook)({
+    defaultConfig: {
+        /**
+         * Optional flag to denote if this field has an error or warning to display.
+         * If value is `error`: `aria-invalid` is added to the `FormField.Input` and the red error ring is added.
+         * If value is `alert`: A visual orange warning ring is added to the `FormField.Input`.
+         */
+        error: undefined,
+        /**
+         * Optional `id` provided to `FormField`'s subcomponents as HTML attributes:
+         * - `FormField.Input` will set `aria-describedby` to `hint-${id}`
+         * - `FormField.Input` will set `id` to `input-${id}`
+         * - `FormField.Label` will set `htmlFor` to `input-${id}`
+         * - `FormField.Hint` will set `id` to `hint-${id}`
+         *
+         * If a value is not provided, a unique id will be automatically created by `useUniqueId()`.
+         * @default {useUniqueId}
+         */
+        id: '',
+        /**
+         * Optional flag to denote if this field is required. When true the `FormField.Input` will have
+         * `required` set to true, and an asterisk will be appended to the `FormField.Label`.
+         */
+        isRequired: false,
+        orientation: '',
+    },
+})(config => {
+    const id = (0, common_1.useUniqueId)(config.id);
+    const state = {
+        ...config,
+        id,
+    };
+    return {
+        state,
+        events: {},
+    };
+});

package/dist/commonjs/form-field/lib/hooks/useFormFieldOrientation.d.ts

@@ -0,0 +1,12 @@
+import { FlexProps } from '@workday/canvas-kit-react/layout';
+/**
+ * Adds the necessary layout props to a `FormField` component.
+ *
+ * @deprecated
+ */
+export declare const useFormFieldOrientation: (orientation: 'horizontal' | 'vertical') => {
+    flexDirection: FlexProps['flexDirection'];
+    alignItems: FlexProps['alignItems'];
+    gap: FlexProps['gap'];
+};
+//# sourceMappingURL=useFormFieldOrientation.d.ts.map

package/dist/commonjs/form-field/lib/hooks/useFormFieldOrientation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFormFieldOrientation.d.ts","sourceRoot":"","sources":["../../../../../form-field/lib/hooks/useFormFieldOrientation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,kCAAkC,CAAC;AAG3D;;;;GAIG;AACH,eAAO,MAAM,uBAAuB,gBAAiB,YAAY,GAAG,UAAU;mBAE3D,SAAS,CAAC,eAAe,CAAC;gBAC7B,SAAS,CAAC,YAAY,CAAC;SAC9B,SAAS,CAAC,KAAK,CAAC;CAkBxB,CAAC"}

package/dist/commonjs/form-field/lib/hooks/useFormFieldOrientation.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFormFieldOrientation = void 0;
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+/**
+ * Adds the necessary layout props to a `FormField` component.
+ *
+ * @deprecated
+ */
+const useFormFieldOrientation = (orientation) => {
+    let layoutProps;
+    if (orientation === 'horizontal') {
+        layoutProps = {
+            flexDirection: 'row',
+            gap: tokens_1.space.l,
+            alignItems: undefined,
+        };
+    }
+    else {
+        layoutProps = {
+            flexDirection: 'column',
+            gap: tokens_1.space.xxxs,
+            alignItems: 'flex-start',
+        };
+    }
+    return layoutProps;
+};
+exports.useFormFieldOrientation = useFormFieldOrientation;

package/dist/commonjs/icon/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/icon/lib/AccentIcon.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];
@@ -32,35 +36,35 @@ const Svg_1 = require("./Svg");
  */
 const accentIconStyles = ({ color = tokens_1.colors.blueberry500, transparent = false, }) => ({
     '& .color-500': {
-        fill: common_1.getColor(color),
+        fill: (0, common_1.getColor)(color),
     },
     '& .french-vanilla-100': {
         fill: transparent ? 'transparent' : tokens_1.colors.frenchVanilla100,
     },
 });
 exports.accentIconStyles = accentIconStyles;
-exports.accentIconStencil = canvas_kit_styling_1.createStencil({
+exports.accentIconStencil = (0, canvas_kit_styling_1.createStencil)({
     extends: Svg_1.svgStencil,
     vars: {
         color: '',
     },
-    base: { name: "8ab799", styles: "box-sizing:border-box;--size-svg-a30d66:3.5rem;& .color-500{fill:var(--color-accent-icon-f47b2a, var(--cnvs-base-palette-blueberry-500));}& .french-vanilla-100{fill:var(--cnvs-base-palette-french-vanilla-100);}" },
+    base: { name: "ksnk11", styles: "box-sizing:border-box;--size-svg-a30d66:3.5rem;& .color-500{fill:var(--color-accent-icon-f47b2a, var(--cnvs-base-palette-blueberry-500));}& .french-vanilla-100{fill:var(--cnvs-base-palette-french-vanilla-100);}" },
     modifiers: {
         transparent: {
-            true: { name: "0b6c92", styles: "& .french-vanilla-100{fill:transparent;}" }
+            true: { name: "ksnk12", styles: "& .french-vanilla-100{fill:transparent;}" }
         }
     }
 }, "accent-icon-f47b2a");
-exports.AccentIcon = common_1.createComponent('span')({
+exports.AccentIcon = (0, common_1.createComponent)('span')({
     displayName: 'AccentIcon',
     Component: ({ transparent, size, icon, color, shouldMirror, ...elemProps }, ref, Element) => {
-        return (React.createElement(Svg_1.Svg, Object.assign({ src: icon, type: design_assets_types_1.CanvasIconTypes.Accent, as: Element, ref: ref }, canvas_kit_styling_1.handleCsProp(elemProps, [
-            exports.accentIconStencil({
-                color: Svg_1.transformColorNameToToken(color),
-                size: typeof size === 'number' ? canvas_kit_styling_1.px2rem(size) : undefined,
-                shouldMirror,
-                transparent,
-            }),
-        ]))));
+        return (React.createElement(Svg_1.Svg, { src: icon, type: design_assets_types_1.CanvasIconTypes.Accent, as: Element, ref: ref, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, [
+                (0, exports.accentIconStencil)({
+                    color: (0, Svg_1.transformColorNameToToken)(color),
+                    size: typeof size === 'number' ? (0, canvas_kit_styling_1.px2rem)(size) : undefined,
+                    shouldMirror,
+                    transparent,
+                }),
+            ]) }));
     },
 });

package/dist/commonjs/icon/lib/AppletIcon.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];
@@ -66,7 +70,7 @@ const appletIconStyles = ({ color = tokens_1.BrandingColor.Blueberry, }) => {
     };
 };
 exports.appletIconStyles = appletIconStyles;
-exports.appletIconStencil = canvas_kit_styling_1.createStencil({
+exports.appletIconStencil = (0, canvas_kit_styling_1.createStencil)({
     extends: Svg_1.svgStencil,
     vars: {
         color200: '',
@@ -74,9 +78,9 @@ exports.appletIconStencil = canvas_kit_styling_1.createStencil({
         color400: '',
         color500: '',
     },
-    base: { name: "ce2e64", styles: "box-sizing:border-box;--size-svg-a30d66:5.75rem;& .color-100{fill:var(--cnvs-base-palette-french-vanilla-100);}& .color-200{fill:var(--color200-applet-icon-757179, var(--cnvs-base-palette-blueberry-200));}& .color-300{fill:var(--color300-applet-icon-757179, var(--cnvs-base-palette-blueberry-300));}& .color-400{fill:var(--color400-applet-icon-757179, var(--cnvs-base-palette-blueberry-400));}& .color-400-alpha-20{fill:var(--color400-applet-icon-757179, var(--cnvs-base-palette-blueberry-400));}& .color-500{fill:var(--color500-applet-icon-757179, var(--cnvs-base-palette-blueberry-400));}" }
+    base: { name: "ksnk13", styles: "box-sizing:border-box;--size-svg-a30d66:5.75rem;& .color-100{fill:var(--cnvs-base-palette-french-vanilla-100);}& .color-200{fill:var(--color200-applet-icon-757179, var(--cnvs-base-palette-blueberry-200));}& .color-300{fill:var(--color300-applet-icon-757179, var(--cnvs-base-palette-blueberry-300));}& .color-400{fill:var(--color400-applet-icon-757179, var(--cnvs-base-palette-blueberry-400));}& .color-400-alpha-20{fill:var(--color400-applet-icon-757179, var(--cnvs-base-palette-blueberry-400));}& .color-500{fill:var(--color500-applet-icon-757179, var(--cnvs-base-palette-blueberry-400));}" }
 }, "applet-icon-757179");
-exports.AppletIcon = common_1.createComponent('span')({
+exports.AppletIcon = (0, common_1.createComponent)('span')({
     displayName: 'AppletIcon',
     Component: ({ size, icon, color, ...elemProps }, ref, Element) => {
         const colors = color && {
@@ -85,9 +89,9 @@ exports.AppletIcon = common_1.createComponent('span')({
             color400: canvas_tokens_web_1.base[`${color}400`],
             color500: canvas_tokens_web_1.base[`${color}500`],
         };
-        return (React.createElement(Svg_1.Svg, Object.assign({ src: icon, type: design_assets_types_1.CanvasIconTypes.Applet, as: Element, ref: ref }, canvas_kit_styling_1.handleCsProp(elemProps, [
-            exports.appletIconStencil({ ...colors, size: size ? canvas_kit_styling_1.px2rem(size) : undefined }),
-        ]))));
+        return (React.createElement(Svg_1.Svg, { src: icon, type: design_assets_types_1.CanvasIconTypes.Applet, as: Element, ref: ref, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, [
+                (0, exports.appletIconStencil)({ ...colors, size: size ? (0, canvas_kit_styling_1.px2rem)(size) : undefined }),
+            ]) }));
     },
     subComponents: {
         Colors: tokens_1.BrandingColor,

package/dist/commonjs/icon/lib/Graphic.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];
@@ -57,22 +61,22 @@ const graphicStyles = ({ width, height, grow }) => {
     return {};
 };
 exports.graphicStyles = graphicStyles;
-exports.graphicStencil = canvas_kit_styling_1.createStencil({
+exports.graphicStencil = (0, canvas_kit_styling_1.createStencil)({
     extends: Svg_1.svgStencil,
-    base: { name: "61ea39", styles: "box-sizing:border-box;" },
+    base: { name: "ksnk16", styles: "box-sizing:border-box;" },
     modifiers: {
         grow: {
-            true: { name: "fd9f26", styles: "width:100%;--width-svg-a30d66:100%;" }
+            true: { name: "ksnk17", styles: "width:100%;--width-svg-a30d66:100%;" }
         }
     }
 }, "graphic-ee386a");
-exports.Graphic = common_1.createComponent('span')({
+exports.Graphic = (0, common_1.createComponent)('span')({
     displayName: 'Graphic',
     Component: ({ grow, width, height, ...elemProps }, ref, Element) => {
-        return (React.createElement(Svg_1.Svg, Object.assign({ type: design_assets_types_1.CanvasIconTypes.Graphic, as: Element, ref: ref }, canvas_kit_styling_1.handleCsProp(elemProps, exports.graphicStencil({
-            grow,
-            width: typeof width === 'number' ? canvas_kit_styling_1.px2rem(width) : width,
-            height: typeof height === 'number' ? canvas_kit_styling_1.px2rem(height) : height,
-        })))));
+        return (React.createElement(Svg_1.Svg, { type: design_assets_types_1.CanvasIconTypes.Graphic, as: Element, ref: ref, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.graphicStencil)({
+                grow,
+                width: typeof width === 'number' ? (0, canvas_kit_styling_1.px2rem)(width) : width,
+                height: typeof height === 'number' ? (0, canvas_kit_styling_1.px2rem)(height) : height,
+            })) }));
     },
 });

package/dist/commonjs/icon/lib/Svg.d.ts

@@ -24,6 +24,6 @@ export declare const svgStencil: import("@workday/canvas-kit-styling").Stencil<{
     size: string;
 }, never, never>;
 /** @deprecated */
-export declare const transformColorNameToToken: (color?: string | undefined) => string | undefined;
+export declare const transformColorNameToToken: (color?: string) => string | undefined;
 export declare const Svg: import("@workday/canvas-kit-react/common").ElementComponent<"span", SvgProps>;
 //# sourceMappingURL=Svg.d.ts.map

package/dist/commonjs/icon/lib/Svg.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Svg.d.ts","sourceRoot":"","sources":["../../../../icon/lib/Svg.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,UAAU,EAAE,eAAe,EAAC,MAAM,8BAA8B,CAAC;AAGzE,OAAO,EAAC,QAAQ,EAAc,MAAM,kCAAkC,CAAC;AAIvE,MAAM,WAAW,QAAS,SAAQ,QAAQ;IACxC,GAAG,EAAE,UAAU,CAAC;IAChB,IAAI,EAAE,eAAe,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,UAAU;;;;;;;IAEnB,gCAAgC;;IAEhC,iCAAiC;;IAEjC,2CAA2C;;gBAkB7C,CAAC;AAEH,kBAAkB;AAClB,eAAO,MAAM,yBAAyB,oDAUrC,CAAC;AAEF,eAAO,MAAM,GAAG,+EAkBd,CAAC"}
+{"version":3,"file":"Svg.d.ts","sourceRoot":"","sources":["../../../../icon/lib/Svg.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,UAAU,EAAE,eAAe,EAAC,MAAM,8BAA8B,CAAC;AAGzE,OAAO,EAAC,QAAQ,EAAc,MAAM,kCAAkC,CAAC;AAIvE,MAAM,WAAW,QAAS,SAAQ,QAAQ;IACxC,GAAG,EAAE,UAAU,CAAC;IAChB,IAAI,EAAE,eAAe,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,UAAU;;;;;;;IAEnB,gCAAgC;;IAEhC,iCAAiC;;IAEjC,2CAA2C;;gBAkB7C,CAAC;AAEH,kBAAkB;AAClB,eAAO,MAAM,yBAAyB,WAAY,MAAM,uBAUvD,CAAC;AAEF,eAAO,MAAM,GAAG,+EAkBd,CAAC"}

package/dist/commonjs/icon/lib/Svg.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,7 +30,7 @@ const common_1 = require("@workday/canvas-kit-react/common");
 const layout_1 = require("@workday/canvas-kit-react/layout");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
-exports.svgStencil = canvas_kit_styling_1.createStencil({
+exports.svgStencil = (0, canvas_kit_styling_1.createStencil)({
     vars: {
         /** sets width of svg element */
         width: '',
@@ -35,34 +39,34 @@ exports.svgStencil = canvas_kit_styling_1.createStencil({
         /** sets width and height of svg element */
         size: '',
     },
-    base: { name: "003268", styles: "box-sizing:border-box;display:inline-block;> svg{display:block;width:var(--width-svg-a30d66, var(--size-svg-a30d66));height:var(--height-svg-a30d66, var(--size-svg-a30d66));}" },
+    base: { name: "ksnkz", styles: "box-sizing:border-box;display:inline-block;> svg{display:block;width:var(--width-svg-a30d66, var(--size-svg-a30d66));height:var(--height-svg-a30d66, var(--size-svg-a30d66));}" },
     modifiers: {
         shouldMirror: {
-            true: { name: "d9e55d", styles: "transform:scaleX(-1);" }
+            true: { name: "ksnk10", styles: "transform:scaleX(-1);" }
         }
     }
 }, "svg-a30d66");
 /** @deprecated */
 const transformColorNameToToken = (color) => {
     if (color && color in canvas_tokens_web_1.base) {
-        return canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base[color]);
+        return (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.base[color]);
     }
     if (color === null || color === void 0 ? void 0 : color.startsWith('--')) {
-        return canvas_kit_styling_1.cssVar(color);
+        return (0, canvas_kit_styling_1.cssVar)(color);
     }
     return color;
 };
 exports.transformColorNameToToken = transformColorNameToToken;
-exports.Svg = common_1.createComponent('span')({
+exports.Svg = (0, common_1.createComponent)('span')({
     displayName: 'Svg',
     Component: ({ shouldMirror, src, type, ...elemProps }, ref, Element) => {
         try {
-            utils_1.validateIconType(src, type);
+            (0, utils_1.validateIconType)(src, type);
         }
         catch (e) {
             console.error(e);
             return null;
         }
-        return (React.createElement(Element, Object.assign({ ref: ref, dangerouslySetInnerHTML: { __html: src.svg } }, layout_1.mergeStyles(elemProps, exports.svgStencil({ shouldMirror })))));
+        return (React.createElement(Element, { ref: ref, dangerouslySetInnerHTML: { __html: src.svg }, ...(0, layout_1.mergeStyles)(elemProps, (0, exports.svgStencil)({ shouldMirror })) }));
     },
 });

package/dist/commonjs/icon/lib/SystemIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SystemIcon.d.ts","sourceRoot":"","sources":["../../../../icon/lib/SystemIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,gBAAgB,EAAkB,MAAM,8BAA8B,CAAC;AAC/E,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAI1C,OAAO,EAAM,QAAQ,EAAwC,MAAM,OAAO,CAAC;AAE3E;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;;;;;OAQG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;;;;;OASG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;;;OAUG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,eACf,SAAQ,gBAAgB,EACtB,IAAI,CAAC,QAAQ,EAAE,KAAK,GAAG,MAAM,GAAG,MAAM,GAAG,YAAY,GAAG,OAAO,CAAC;IAClE;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,gBAAgB,8FAS1B,gBAAgB,KAAG,SAmBpB,CAAC;AAiBH,eAAO,MAAM,iBAAiB;IAG1B;;;;OAIG;;;;;IAJH;;;;OAIG;;;;;;;;;;;;;;wBAoCL,CAAC;AAEH,eAAO,MAAM,UAAU,sFA6CrB,CAAC"}
+{"version":3,"file":"SystemIcon.d.ts","sourceRoot":"","sources":["../../../../icon/lib/SystemIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,gBAAgB,EAAkB,MAAM,8BAA8B,CAAC;AAC/E,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAI1C,OAAO,EAAM,QAAQ,EAAwC,MAAM,OAAO,CAAC;AAE3E;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;;;;;OAQG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;;;;;OASG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;;;OAUG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,eACf,SAAQ,gBAAgB,EACtB,IAAI,CAAC,QAAQ,EAAE,KAAK,GAAG,MAAM,GAAG,MAAM,GAAG,YAAY,GAAG,OAAO,CAAC;IAClE;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,gBAAgB,8FAS1B,gBAAgB,KAAG,SAmBpB,CAAC;AAiBH,eAAO,MAAM,iBAAiB;IAG1B;;;;OAIG;;;;;IAJH;;;;OAIG;;;;;;;;;;;;;;wBAuCL,CAAC;AAEH,eAAO,MAAM,UAAU,sFA6CrB,CAAC"}