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

package/dist/commonjs/form-field/lib/FormFieldLabel.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ExtractProps } from '@workday/canvas-kit-react/common';
-import { Text } from '@workday/canvas-kit-react/text';
 import { FlexProps } from '@workday/canvas-kit-react/layout';
+import { Text } from '@workday/canvas-kit-react/text';
 export interface FormFieldLabelProps extends FlexProps, Omit<ExtractProps<typeof Text, never>, 'display'> {
     /**
      * The text of the label.
@@ -17,11 +17,11 @@ export declare const formFieldLabelStencil: import("@workday/canvas-kit-styling"
         true: {
             '&::after': {
                 content: string;
-                fontSize: "--cnvs-sys-font-size-body-large";
+                fontSize: "var(--cnvs-sys-font-size-body-lg, var(--cnvs-sys-font-size-body-large, 1.25rem))";
                 fontWeight: "--cnvs-sys-font-weight-normal";
-                color: "--cnvs-brand-error-base";
+                color: "var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)))";
                 textDecoration: string;
-                marginInlineStart: "--cnvs-sys-space-x1";
+                marginInlineStart: "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem))";
             };
         };
     };
@@ -29,10 +29,10 @@ export declare const formFieldLabelStencil: import("@workday/canvas-kit-styling"
         horizontalStart: {
             justifyContent: string;
             float: string;
-            maxHeight: "--cnvs-sys-space-x10";
+            maxHeight: "var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem))";
         };
         horizontalEnd: {
-            maxHeight: "--cnvs-sys-space-x10";
+            maxHeight: "var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem))";
             float: string;
             justifyContent: string;
         };
@@ -59,103 +59,103 @@ export declare const formFieldLabelStencil: import("@workday/canvas-kit-styling"
 }, {}, {}, import("@workday/canvas-kit-styling").Stencil<{
     typeLevel: {
         'title.large': {
-            color: "--cnvs-sys-color-text-strong";
             fontFamily: "--cnvs-sys-font-family-default";
             fontWeight: "--cnvs-sys-font-weight-bold";
-            lineHeight: "--cnvs-sys-line-height-title-large";
-            fontSize: "--cnvs-sys-font-size-title-large";
+            fontSize: "var(--cnvs-sys-font-size-title-lg, var(--cnvs-sys-font-size-title-large, 3.5rem))";
+            lineHeight: "var(--cnvs-sys-line-height-title-lg, var(--cnvs-sys-line-height-title-large, 4rem))";
+            color: "--cnvs-sys-color-fg-strong";
         };
         'title.medium': {
-            color: "--cnvs-sys-color-text-strong";
             fontFamily: "--cnvs-sys-font-family-default";
             fontWeight: "--cnvs-sys-font-weight-bold";
-            lineHeight: "--cnvs-sys-line-height-title-medium";
-            fontSize: "--cnvs-sys-font-size-title-medium";
+            fontSize: "var(--cnvs-sys-font-size-title-md, var(--cnvs-sys-font-size-title-medium, 3rem))";
+            lineHeight: "var(--cnvs-sys-line-height-title-md, var(--cnvs-sys-line-height-title-medium, 3.5rem))";
+            color: "--cnvs-sys-color-fg-strong";
         };
         'title.small': {
-            color: "--cnvs-sys-color-text-strong";
             fontFamily: "--cnvs-sys-font-family-default";
             fontWeight: "--cnvs-sys-font-weight-bold";
-            lineHeight: "--cnvs-sys-line-height-title-small";
-            fontSize: "--cnvs-sys-font-size-title-small";
+            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))";
+            color: "--cnvs-sys-color-fg-strong";
         };
         'heading.large': {
-            color: "--cnvs-sys-color-text-strong";
             fontFamily: "--cnvs-sys-font-family-default";
             fontWeight: "--cnvs-sys-font-weight-bold";
-            lineHeight: "--cnvs-sys-line-height-heading-large";
-            fontSize: "--cnvs-sys-font-size-heading-large";
+            fontSize: "var(--cnvs-sys-font-size-heading-lg, var(--cnvs-sys-font-size-heading-large, 2rem))";
+            lineHeight: "var(--cnvs-sys-line-height-heading-lg, var(--cnvs-sys-line-height-heading-large, 2.5rem))";
+            color: "--cnvs-sys-color-fg-strong";
         };
         'heading.medium': {
-            color: "--cnvs-sys-color-text-strong";
             fontFamily: "--cnvs-sys-font-family-default";
             fontWeight: "--cnvs-sys-font-weight-bold";
-            lineHeight: "--cnvs-sys-line-height-heading-medium";
-            fontSize: "--cnvs-sys-font-size-heading-medium";
+            fontSize: "var(--cnvs-sys-font-size-heading-md, var(--cnvs-sys-font-size-heading-medium, 1.75rem))";
+            lineHeight: "var(--cnvs-sys-line-height-heading-md, var(--cnvs-sys-line-height-heading-medium, 2.25rem))";
+            color: "--cnvs-sys-color-fg-strong";
         };
         'heading.small': {
-            color: "--cnvs-sys-color-text-strong";
             fontFamily: "--cnvs-sys-font-family-default";
             fontWeight: "--cnvs-sys-font-weight-bold";
-            lineHeight: "--cnvs-sys-line-height-heading-small";
-            fontSize: "--cnvs-sys-font-size-heading-small";
+            fontSize: "var(--cnvs-sys-font-size-heading-sm, var(--cnvs-sys-font-size-heading-small, 1.5rem))";
+            lineHeight: "var(--cnvs-sys-line-height-heading-sm, var(--cnvs-sys-line-height-heading-small, 2rem))";
+            color: "--cnvs-sys-color-fg-strong";
         };
         'body.large': {
-            color: "--cnvs-sys-color-text-default";
             fontFamily: "--cnvs-sys-font-family-default";
             fontWeight: "--cnvs-sys-font-weight-normal";
-            lineHeight: "--cnvs-sys-line-height-body-large";
-            fontSize: "--cnvs-sys-font-size-body-large";
+            fontSize: "var(--cnvs-sys-font-size-body-lg, var(--cnvs-sys-font-size-body-large, 1.25rem))";
+            lineHeight: "var(--cnvs-sys-line-height-body-lg, var(--cnvs-sys-line-height-body-large, 1.75rem))";
+            color: "--cnvs-sys-color-fg-default";
         };
         'body.medium': {
-            color: "--cnvs-sys-color-text-default";
             fontFamily: "--cnvs-sys-font-family-default";
             fontWeight: "--cnvs-sys-font-weight-normal";
-            lineHeight: "--cnvs-sys-line-height-body-medium";
-            fontSize: "--cnvs-sys-font-size-body-medium";
+            fontSize: "var(--cnvs-sys-font-size-body-md, var(--cnvs-sys-font-size-body-medium, 1.125rem))";
+            lineHeight: "var(--cnvs-sys-line-height-body-md, var(--cnvs-sys-line-height-body-medium, 1.75rem))";
+            color: "--cnvs-sys-color-fg-default";
         };
         'body.small': {
-            color: "--cnvs-sys-color-text-default";
             fontFamily: "--cnvs-sys-font-family-default";
             fontWeight: "--cnvs-sys-font-weight-normal";
-            lineHeight: "--cnvs-sys-line-height-body-small";
-            fontSize: "--cnvs-sys-font-size-body-small";
-            letterSpacing: "--cnvs-base-letter-spacing-200";
+            fontSize: "var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small, 1rem))";
+            lineHeight: "var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small, 1.5rem))";
+            letterSpacing: "var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-sys-type-letter-spacing-body-small))";
+            color: "--cnvs-sys-color-fg-default";
         };
         'subtext.large': {
-            color: "--cnvs-sys-color-text-default";
             fontFamily: "--cnvs-sys-font-family-default";
             fontWeight: "--cnvs-sys-font-weight-normal";
-            lineHeight: "--cnvs-sys-line-height-subtext-large";
-            fontSize: "--cnvs-sys-font-size-subtext-large";
-            letterSpacing: "--cnvs-base-letter-spacing-150";
+            fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem))";
+            lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem))";
+            letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large))";
+            color: "--cnvs-sys-color-fg-default";
         };
         'subtext.medium': {
-            color: "--cnvs-sys-color-text-default";
             fontFamily: "--cnvs-sys-font-family-default";
             fontWeight: "--cnvs-sys-font-weight-normal";
-            lineHeight: "--cnvs-sys-line-height-subtext-medium";
-            fontSize: "--cnvs-sys-font-size-subtext-medium";
-            letterSpacing: "--cnvs-base-letter-spacing-100";
+            fontSize: "var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem))";
+            lineHeight: "var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem))";
+            letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium))";
+            color: "--cnvs-sys-color-fg-default";
         };
         'subtext.small': {
-            color: "--cnvs-sys-color-text-default";
             fontFamily: "--cnvs-sys-font-family-default";
             fontWeight: "--cnvs-sys-font-weight-normal";
-            lineHeight: "--cnvs-sys-line-height-subtext-small";
-            fontSize: "--cnvs-sys-font-size-subtext-small";
-            letterSpacing: "--cnvs-base-letter-spacing-50";
+            fontSize: "var(--cnvs-sys-font-size-subtext-sm, var(--cnvs-sys-font-size-subtext-small, 0.625rem))";
+            lineHeight: "var(--cnvs-sys-line-height-subtext-sm, var(--cnvs-sys-line-height-subtext-small, 1rem))";
+            letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-sm, var(--cnvs-sys-type-letter-spacing-subtext-small))";
+            color: "--cnvs-sys-color-fg-default";
         };
     };
     variant: {
         error: {
-            color: "--cnvs-sys-color-text-critical-default";
+            color: "var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)))";
         };
         hint: {
-            color: "--cnvs-sys-color-text-hint";
+            color: "--cnvs-sys-color-fg-muted-default";
         };
         inverse: {
-            color: "--cnvs-sys-color-text-inverse";
+            color: "--cnvs-sys-color-fg-inverse";
         };
     };
 }, {}, {}, never, never>, never>;

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

@@ -1 +1 @@
-{"version":3,"file":"FormFieldLabel.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAqB,YAAY,EAAiB,MAAM,kCAAkC,CAAC;AAElG,OAAO,EAAC,IAAI,EAAc,MAAM,gCAAgC,CAAC;AACjE,OAAO,EAAC,SAAS,EAAc,MAAM,kCAAkC,CAAC;AAKxE,MAAM,WAAW,mBACf,SAAQ,SAAS,EACf,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,EAAE,SAAS,CAAC;IACnD;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCA+ChC,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;;;EAuB1B,CAAC"}
+{"version":3,"file":"FormFieldLabel.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,YAAY,EAAqC,MAAM,kCAAkC,CAAC;AAClG,OAAO,EAAC,SAAS,EAAc,MAAM,kCAAkC,CAAC;AACxE,OAAO,EAAC,IAAI,EAAc,MAAM,gCAAgC,CAAC;AAMjE,MAAM,WAAW,mBACf,SAAQ,SAAS,EACf,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,EAAE,SAAS,CAAC;IACnD;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCA+ChC,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;;;EAuB1B,CAAC"}

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

@@ -3,31 +3,31 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormFieldLabel = exports.formFieldLabelStencil = 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 text_1 = require("@workday/canvas-kit-react/text");
 const layout_1 = require("@workday/canvas-kit-react/layout");
+const text_1 = require("@workday/canvas-kit-react/text");
+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.formFieldLabelStencil = (0, canvas_kit_styling_1.createStencil)({
     extends: text_1.textStencil,
-    base: { name: "ajd6d", styles: "box-sizing:border-box;font-weight:var(--cnvs-sys-font-weight-medium);color:var(--cnvs-sys-color-text-default);padding-inline-start:var(--cnvs-sys-space-zero);display:flex;align-items:center;min-width:11.25rem;" },
+    base: { name: "jtith", styles: "box-sizing:border-box;font-weight:var(--cnvs-sys-font-weight-medium);color:var(--cnvs-sys-color-fg-default);padding-inline-start:0;display:flex;align-items:center;min-width:11.25rem;" },
     modifiers: {
         isRequired: {
-            true: { name: "c9k23", styles: "&::after{content:\"*\";font-size:var(--cnvs-sys-font-size-body-large);font-weight:var(--cnvs-sys-font-weight-normal);color:var(--cnvs-brand-error-base);text-decoration:unset;margin-inline-start:var(--cnvs-sys-space-x1);}" }
+            true: { name: "3fmtyn", styles: "&::after{content:\"*\";font-size:var(--cnvs-sys-font-size-body-lg, var(--cnvs-sys-font-size-body-large, 1.25rem));font-weight:var(--cnvs-sys-font-weight-normal);color:var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));text-decoration:unset;margin-inline-start:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));}" }
         },
         orientation: {
-            horizontalStart: { name: "2lflxb", styles: "justify-content:flex-start;float:left;max-height:var(--cnvs-sys-space-x10);" },
-            horizontalEnd: { name: "1v6cqc", styles: "max-height:var(--cnvs-sys-space-x10);float:left;justify-content:flex-end;" },
-            vertical: { name: "2mah77", styles: "width:100%;" }
+            horizontalStart: { name: "1cudtn", styles: "justify-content:flex-start;float:left;max-height:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));" },
+            horizontalEnd: { name: "3to8e6", styles: "max-height:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));float:left;justify-content:flex-end;" },
+            vertical: { name: "7c5dh", styles: "width:100%;" }
         },
         isHidden: {
-            true: { name: "2jq5rc", styles: "clip:rect(1px, 1px, 1px, 1px);clip-path:polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);position:absolute;overflow:hidden;white-space:nowrap;height:1px;min-height:1px;width:1px;min-width:1px;margin:-1px;padding:0;border:0;" }
+            true: { name: "2sxu7z", styles: "clip:rect(1px, 1px, 1px, 1px);clip-path:polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);position:absolute;overflow:hidden;white-space:nowrap;height:1px;min-height:1px;width:1px;min-width:1px;margin:-1px;padding:0;border:0;" }
         }
     },
     defaultModifiers: {
         typeLevel: 'subtext.large',
     }
-}, "form-field-label-7bb465");
+}, "form-field-label-6d3760");
 exports.FormFieldLabel = (0, common_1.createSubcomponent)('label')({
     displayName: 'FormField.Label',
     modelHook: hooks_1.useFormFieldModel,

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

@@ -13,15 +13,17 @@ export declare const formFieldStencil: import("@workday/canvas-kit-styling").Ste
     orientation: {
         horizontalStart: {
             flexDirection: string;
-            gap: "--cnvs-sys-space-x8";
+            gap: "var(--cnvs-sys-gap-xl, var(--cnvs-sys-space-x8, 2rem))";
+            width: string;
         };
         horizontalEnd: {
             flexDirection: string;
-            gap: "--cnvs-sys-space-x8";
+            gap: "var(--cnvs-sys-gap-xl, var(--cnvs-sys-space-x8, 2rem))";
+            width: string;
         };
         vertical: {
             flexDirection: string;
-            gap: "--cnvs-sys-space-x1";
+            gap: "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem))";
             alignItems: string;
         };
     };

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

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

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

@@ -4,22 +4,22 @@ 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: "2gvjg6", 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);" },
+    base: { name: "sms5q", styles: "box-sizing:border-box;display:flex;border:none;padding:0;margin:0 0 var(--cnvs-sys-gap-lg, var(--cnvs-sys-space-x6, 1.5rem));" },
     modifiers: {
         grow: {
-            true: { name: "1f7c84", styles: "width:100%;[data-width=\"ck-formfield-width\"]{width:100%;}&:has(div[data-width=\"ck-formfield-width\"]){width:100%;}" }
+            true: { name: "21nufo", styles: "width:100%;[data-width=\"ck-formfield-width\"]{width:100%;}&:has(div[data-width=\"ck-formfield-width\"]){width:100%;}" }
         },
         orientation: {
-            horizontalStart: { name: "35t3zv", styles: "flex-direction:row;gap:var(--cnvs-sys-space-x8);" },
-            horizontalEnd: { name: "40f0yr", styles: "flex-direction:row;gap:var(--cnvs-sys-space-x8);" },
-            vertical: { name: "32hmr2", styles: "flex-direction:column;gap:var(--cnvs-sys-space-x1);align-items:flex-start;" }
+            horizontalStart: { name: "3t4g9x", styles: "flex-direction:row;gap:var(--cnvs-sys-gap-xl, var(--cnvs-sys-space-x8, 2rem));width:100%;" },
+            horizontalEnd: { name: "1cjfh9", styles: "flex-direction:row;gap:var(--cnvs-sys-gap-xl, var(--cnvs-sys-space-x8, 2rem));width:100%;" },
+            vertical: { name: "1noi4c", styles: "flex-direction:column;gap:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));align-items:flex-start;" }
         },
         required: {
-            true: { name: "1uk9l9", styles: "" }
+            true: { name: "36dgli", styles: "" }
         },
         error: {
-            error: { name: "144q1t", styles: "" },
-            caution: { name: "1656u1", styles: "" }
+            error: { name: "3cndjh", styles: "" },
+            caution: { name: "2p9ekx", styles: "" }
         }
     },
     defaultModifiers: {

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

@@ -1 +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"}
+{"version":3,"file":"useFormFieldHint.d.ts","sourceRoot":"","sources":["../../../../../form-field/lib/hooks/useFormFieldHint.tsx"],"names":[],"mappings":"AAIA;;;GAGG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;EAI3B,CAAC"}

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

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

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

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

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

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

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

@@ -1,7 +1,8 @@
 export * from './lib/AccentIcon';
 export * from './lib/AppletIcon';
+export * from './lib/ExpressiveIcon';
 export * from './lib/SystemIcon';
 export * from './lib/SystemIconCircle';
 export * from './lib/Graphic';
-export { Svg, SvgProps, svgStencil } from './lib/Svg';
+export { Svg, type SvgProps, svgStencil } from './lib/Svg';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../icon/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAC,GAAG,EAAE,QAAQ,EAAE,UAAU,EAAC,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../icon/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAC,GAAG,EAAE,KAAK,QAAQ,EAAE,UAAU,EAAC,MAAM,WAAW,CAAC"}

package/dist/commonjs/icon/index.js

@@ -17,6 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.svgStencil = exports.Svg = void 0;
 __exportStar(require("./lib/AccentIcon"), exports);
 __exportStar(require("./lib/AppletIcon"), exports);
+__exportStar(require("./lib/ExpressiveIcon"), exports);
 __exportStar(require("./lib/SystemIcon"), exports);
 __exportStar(require("./lib/SystemIconCircle"), exports);
 __exportStar(require("./lib/Graphic"), exports);

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

@@ -1,14 +1,14 @@
-import { CanvasAccentIcon } from '@workday/design-assets-types';
 import { CSSObject } from '@emotion/styled';
 import { SystemPropValues } from '@workday/canvas-kit-react/layout';
+import { CanvasAccentIcon } from '@workday/design-assets-types';
 import { SvgProps } from './Svg';
 /**
- * @deprecated Interface `AccentIconStyles` will be removed in a future version. All props will be moved inside `AccentIconProps`. Consider use the new tokens set to set `color` prop: `color={system.color.bg.primary.strong}`.
+ * @deprecated Interface `AccentIconStyles` will be removed in a future version. All props will be moved inside `AccentIconProps`. Consider use the new tokens set to set `color` prop: `color={system.legacy.color.bg.primary.strong}`. Deprecated in v15.0.0.
  */
 export interface AccentIconStyles {
     /**
      * The fill color of the AccentIcon.
-     * @default system.color.bg.primary.strong
+     * @default system.legacy.color.bg.primary.strong
      */
     color?: SystemPropValues['color'];
     /**
@@ -18,7 +18,21 @@ export interface AccentIconStyles {
      */
     transparent?: boolean;
 }
-export interface AccentIconProps extends AccentIconStyles, Omit<SvgProps, 'src' | 'type'> {
+/**
+ *  @deprecated ⚠️ `AccentIconProps` is deprecated and will be removed in a future major version. Deprecated in v15.0.0.
+ */
+export interface AccentIconProps extends Omit<SvgProps, 'src' | 'type'> {
+    /**
+     * The fill color of the AccentIcon.
+     * @default system.legacy.color.bg.primary.strong
+     */
+    color?: SystemPropValues['color'];
+    /**
+     * If true, set the background fill of the AccentIcon to `transparent`.
+     * If false, set the background fill of the AccentIcon to `system.color.bg.alt.soft`.
+     * @default false
+     */
+    transparent?: boolean;
     /**
      *  The icon to display from `@workday/canvas-accent-icons-web`.
      */
@@ -30,9 +44,12 @@ export interface AccentIconProps extends AccentIconStyles, Omit<SvgProps, 'src'
     size?: number;
 }
 /**
- * @deprecated `accentIconStyles` will be removed in in a future version as a part of implementation of stencils and new tokens. Consider to use `accentIconStencil` instead.
+ * @deprecated `accentIconStyles` will be removed in in a future version as a part of implementation of stencils and new tokens. Consider to use `accentIconStencil` instead. Deprecated in v11.0.0.
  */
 export declare const accentIconStyles: ({ color, transparent, }: AccentIconStyles) => CSSObject;
+/**
+ *  @deprecated ⚠️ `accentIconStencil` is deprecated and will be removed in a future major version. Deprecated in v15.0.0.
+ */
 export declare const accentIconStencil: import("@workday/canvas-kit-styling").Stencil<{
     transparent: {
         true: {
@@ -61,5 +78,8 @@ export declare const accentIconStencil: import("@workday/canvas-kit-styling").St
     height: string;
     size: string;
 }, never, never>, never>;
+/**
+ *  @deprecated ⚠️ `AccentIcon` is deprecated and will be removed in a future major version. Deprecated in v15.0.0.
+ */
 export declare const AccentIcon: import("@workday/canvas-kit-react/common").ElementComponent<"span", AccentIconProps>;
 //# sourceMappingURL=AccentIcon.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"AccentIcon.d.ts","sourceRoot":"","sources":["../../../../icon/lib/AccentIcon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,gBAAgB,EAAkB,MAAM,8BAA8B,CAAC;AAC/E,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAE1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,kCAAkC,CAAC;AAGlE,OAAO,EAAM,QAAQ,EAAwC,MAAM,OAAO,CAAC;AAE3E;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,eAAgB,SAAQ,gBAAgB,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,GAAG,MAAM,CAAC;IACvF;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,4BAG1B,gBAAgB,KAAG,SAOpB,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAuB5B,CAAC;AAEH,eAAO,MAAM,UAAU,sFAiCrB,CAAC"}
+{"version":3,"file":"AccentIcon.d.ts","sourceRoot":"","sources":["../../../../icon/lib/AccentIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAG1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,kCAAkC,CAAC;AAIlE,OAAO,EAAC,gBAAgB,EAAkB,MAAM,8BAA8B,CAAC;AAE/E,OAAO,EAAM,QAAQ,EAAa,MAAM,OAAO,CAAC;AAEhD;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;GAEG;AACH,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,QAAQ,EAAE,KAAK,GAAG,MAAM,CAAC;IACrE;;;OAGG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,4BAG1B,gBAAgB,KAAG,SAOpB,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAuB5B,CAAC;AAgBH;;GAEG;AACH,eAAO,MAAM,UAAU,sFAiCrB,CAAC"}

package/dist/commonjs/icon/lib/AccentIcon.js

@@ -2,14 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AccentIcon = exports.accentIconStencil = exports.accentIconStyles = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const tokens_1 = require("@workday/canvas-kit-react/tokens");
-const design_assets_types_1 = require("@workday/design-assets-types");
 const common_1 = require("@workday/canvas-kit-react/common");
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
+const design_assets_types_1 = require("@workday/design-assets-types");
 const Svg_1 = require("./Svg");
 /**
- * @deprecated `accentIconStyles` will be removed in in a future version as a part of implementation of stencils and new tokens. Consider to use `accentIconStencil` instead.
+ * @deprecated `accentIconStyles` will be removed in in a future version as a part of implementation of stencils and new tokens. Consider to use `accentIconStencil` instead. Deprecated in v11.0.0.
  */
 const accentIconStyles = ({ color = tokens_1.colors.blueberry500, transparent = false, }) => ({
     '& .color-500': {
@@ -20,24 +20,41 @@ const accentIconStyles = ({ color = tokens_1.colors.blueberry500, transparent =
     },
 });
 exports.accentIconStyles = accentIconStyles;
+/**
+ *  @deprecated ⚠️ `accentIconStencil` is deprecated and will be removed in a future major version. Deprecated in v15.0.0.
+ */
 exports.accentIconStencil = (0, canvas_kit_styling_1.createStencil)({
     extends: Svg_1.svgStencil,
     vars: {
         color: '',
     },
-    base: { name: "j3c0u", styles: "box-sizing:border-box;--size-svg-8fcab8:3.5rem;& .color-500{fill:var(--color-accent-icon-05e3c8, var(--cnvs-sys-color-bg-primary-strong));}& .french-vanilla-100{fill:var(--cnvs-sys-color-bg-default);}" },
+    base: { name: "3o4b4k", styles: "box-sizing:border-box;--size-svg-bca693:3.5rem;& .color-500{fill:var(--color-accent-icon-1046a0, var(--cnvs-sys-color-bg-primary-strong));}& .french-vanilla-100{fill:var(--cnvs-sys-color-bg-default);}" },
     modifiers: {
         transparent: {
-            true: { name: "27y8fb", styles: "& .french-vanilla-100{fill:transparent;}" }
+            true: { name: "2a9u2u", styles: "& .french-vanilla-100{fill:transparent;}" }
         }
     }
-}, "accent-icon-05e3c8");
+}, "accent-icon-1046a0");
+/** @deprecated Deprecated in v11 */
+const transformColorNameToToken = (color) => {
+    const { legacy, ...baseTokens } = canvas_tokens_web_1.base;
+    if (color && color in baseTokens) {
+        return (0, canvas_kit_styling_1.cssVar)(baseTokens[color]);
+    }
+    if (color === null || color === void 0 ? void 0 : color.startsWith('--')) {
+        return (0, canvas_kit_styling_1.cssVar)(color);
+    }
+    return color;
+};
+/**
+ *  @deprecated ⚠️ `AccentIcon` is deprecated and will be removed in a future major version. Deprecated in v15.0.0.
+ */
 exports.AccentIcon = (0, common_1.createComponent)('span')({
     displayName: 'AccentIcon',
     Component: ({ transparent, size, icon, color, shouldMirror, shouldMirrorInRTL, ...elemProps }, ref, Element) => {
         return ((0, jsx_runtime_1.jsx)(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),
+                    color: transformColorNameToToken(color),
                     size: typeof size === 'number' ? (0, canvas_kit_styling_1.px2rem)(size) : undefined,
                     shouldMirror,
                     shouldMirrorInRTL,

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

@@ -1,6 +1,6 @@
+import { CSSObject } from '@emotion/styled';
 import { BrandingColor } from '@workday/canvas-kit-react/tokens';
 import { CanvasAppletIcon } from '@workday/design-assets-types';
-import { CSSObject } from '@emotion/styled';
 import { SvgProps } from './Svg';
 /**
  * @deprecated Interface `AppletIconStyles` will be removed in a future version. All props will be moved inside `AppletIconProps`.
@@ -16,6 +16,9 @@ export interface AppletIconStyles {
  * @deprecated `appletIconStyles` will be removed in in a future version as a part of implementation of stencils and new tokens. Consider to use `appletIconStencil` instead.
  */
 export declare const appletIconStyles: ({ color, }: AppletIconStyles) => CSSObject;
+/**
+ *  @deprecated ⚠️ `AppletIconProps` is deprecated and will be removed in a future major version. Deprecated in v15.0.0.
+ */
 export interface AppletIconProps extends AppletIconStyles, Pick<SvgProps, 'shouldMirror' | 'shouldMirrorInRTL' | 'cs'> {
     /**
      * The icon to display from `@workday/canvas-applet-icons-web`.
@@ -27,6 +30,9 @@ export interface AppletIconProps extends AppletIconStyles, Pick<SvgProps, 'shoul
      */
     size?: number;
 }
+/**
+ *  @deprecated ⚠️ `appletIconStencil` is deprecated and will be removed in a future major version. Deprecated in v15.0.0.
+ */
 export declare const appletIconStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {
     color200: string;
     color300: string;
@@ -72,6 +78,9 @@ export declare const appletIconStencil: import("@workday/canvas-kit-styling").St
     height: string;
     size: string;
 }, never, never>, never>;
+/**
+ *  @deprecated ⚠️ `AppletIcon` is deprecated and will be removed in a future major version. Deprecated in v15.0.0.
+ */
 export declare const AppletIcon: import("@workday/canvas-kit-react/common").ElementComponent<"span", AppletIconProps> & {
     Colors: typeof BrandingColor;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"AppletIcon.d.ts","sourceRoot":"","sources":["../../../../icon/lib/AppletIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAS,aAAa,EAAc,MAAM,kCAAkC,CAAC;AACpF,OAAO,EAAC,gBAAgB,EAAkB,MAAM,8BAA8B,CAAC;AAC/E,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAM,QAAQ,EAAa,MAAM,OAAO,CAAC;AAKhD;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,eAE1B,gBAAgB,KAAG,SAsCrB,CAAC;AAEF,MAAM,WAAW,eACf,SAAQ,gBAAgB,EACtB,IAAI,CAAC,QAAQ,EAAE,cAAc,GAAG,mBAAmB,GAAG,IAAI,CAAC;IAC7D;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA6B5B,CAAC;AAEH,eAAO,MAAM,UAAU;;CAyBrB,CAAC"}
+{"version":3,"file":"AppletIcon.d.ts","sourceRoot":"","sources":["../../../../icon/lib/AppletIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAG1C,OAAO,EAAC,aAAa,EAAsB,MAAM,kCAAkC,CAAC;AAGpF,OAAO,EAAC,gBAAgB,EAAkB,MAAM,8BAA8B,CAAC;AAE/E,OAAO,EAAM,QAAQ,EAAa,MAAM,OAAO,CAAC;AAEhD;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,eAE1B,gBAAgB,KAAG,SAsCrB,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,eACf,SAAQ,gBAAgB,EACtB,IAAI,CAAC,QAAQ,EAAE,cAAc,GAAG,mBAAmB,GAAG,IAAI,CAAC;IAC7D;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA6B5B,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,UAAU;;CA4BrB,CAAC"}

package/dist/commonjs/icon/lib/AppletIcon.js

@@ -2,12 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AppletIcon = exports.appletIconStencil = exports.appletIconStyles = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const tokens_1 = require("@workday/canvas-kit-react/tokens");
-const design_assets_types_1 = require("@workday/design-assets-types");
-const Svg_1 = require("./Svg");
 const common_1 = require("@workday/canvas-kit-react/common");
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
+const design_assets_types_1 = require("@workday/design-assets-types");
+const Svg_1 = require("./Svg");
 /**
  * @deprecated `appletIconStyles` will be removed in in a future version as a part of implementation of stencils and new tokens. Consider to use `appletIconStencil` instead.
  */
@@ -47,6 +47,9 @@ const appletIconStyles = ({ color = tokens_1.BrandingColor.Blueberry, }) => {
     };
 };
 exports.appletIconStyles = appletIconStyles;
+/**
+ *  @deprecated ⚠️ `appletIconStencil` is deprecated and will be removed in a future major version. Deprecated in v15.0.0.
+ */
 exports.appletIconStencil = (0, canvas_kit_styling_1.createStencil)({
     extends: Svg_1.svgStencil,
     vars: {
@@ -55,19 +58,25 @@ exports.appletIconStencil = (0, canvas_kit_styling_1.createStencil)({
         color400: '',
         color500: '',
     },
-    base: { name: "3k4429", styles: "box-sizing:border-box;--size-svg-8fcab8:5.75rem;& .color-100{fill:var(--cnvs-sys-color-fg-inverse);}& .color-200{fill:var(--color200-applet-icon-c96fac, var(--cnvs-base-palette-blue-200));}& .color-300{fill:var(--color300-applet-icon-c96fac, var(--cnvs-base-palette-blue-400));}& .color-400{fill:var(--color400-applet-icon-c96fac, var(--cnvs-base-palette-blue-600));}& .color-400-alpha-20{fill:var(--color400-applet-icon-c96fac, var(--cnvs-base-palette-blue-600));}& .color-500{fill:var(--color500-applet-icon-c96fac, var(--cnvs-base-palette-blue-700));}" }
-}, "applet-icon-c96fac");
+    base: { name: "3hninl", styles: "box-sizing:border-box;--size-svg-bca693:5.75rem;& .color-100{fill:var(--cnvs-sys-color-fg-inverse);}& .color-200{fill:var(--color200-applet-icon-02002c, var(--cnvs-base-palette-blue-200, oklch(0.8627 0.0701 250.6 / 1)));}& .color-300{fill:var(--color300-applet-icon-02002c, var(--cnvs-base-palette-blue-400, oklch(0.708 0.1549 255.41 / 1)));}& .color-400{fill:var(--color400-applet-icon-02002c, var(--cnvs-base-palette-blue-600, oklch(0.5198 0.1782 256.11 / 1)));}& .color-400-alpha-20{fill:var(--color400-applet-icon-02002c, var(--cnvs-base-palette-blue-600, oklch(0.5198 0.1782 256.11 / 1)));}& .color-500{fill:var(--color500-applet-icon-02002c, var(--cnvs-base-palette-blue-700, oklch(0.4658 0.1562 255.5 / 1)));}" }
+}, "applet-icon-02002c");
+/**
+ *  @deprecated ⚠️ `AppletIcon` is deprecated and will be removed in a future major version. Deprecated in v15.0.0.
+ */
 exports.AppletIcon = (0, common_1.createComponent)('span')({
     displayName: 'AppletIcon',
     Component: ({ size, icon, color, ...elemProps }, ref, Element) => {
         const colors = color && {
-            color200: canvas_tokens_web_1.base[`${color}200`],
-            color300: canvas_tokens_web_1.base[`${color}300`],
-            color400: canvas_tokens_web_1.base[`${color}400`],
-            color500: canvas_tokens_web_1.base[`${color}500`],
+            color200: canvas_tokens_web_1.base.legacy[`${color}200`],
+            color300: canvas_tokens_web_1.base.legacy[`${color}300`],
+            color400: canvas_tokens_web_1.base.legacy[`${color}400`],
+            color500: canvas_tokens_web_1.base.legacy[`${color}500`],
         };
         return ((0, jsx_runtime_1.jsx)(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 }),
+                (0, exports.appletIconStencil)({
+                    ...colors,
+                    size: size ? (0, canvas_kit_styling_1.px2rem)(size) : undefined,
+                }),
             ]) }));
     },
     subComponents: {