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

package/dist/commonjs/text/lib/Text.js

@@ -2,38 +2,38 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Text = exports.textStencil = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const common_1 = require("@workday/canvas-kit-react/common");
-const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 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.textStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "2ymiq4", styles: "box-sizing:border-box;" },
+    base: { name: "2g0axf", styles: "box-sizing:border-box;" },
     modifiers: {
         typeLevel: {
             // Title level styles
-            'title.large': { name: "1ttnv5", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-title-large);font-size:var(--cnvs-sys-font-size-title-large);color:var(--cnvs-sys-color-text-strong);" },
-            'title.medium': { name: "19ao91", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-title-medium);font-size:var(--cnvs-sys-font-size-title-medium);color:var(--cnvs-sys-color-text-strong);" },
-            'title.small': { name: "1mwvv5", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-title-small);font-size:var(--cnvs-sys-font-size-title-small);color:var(--cnvs-sys-color-text-strong);" },
+            'title.large': { name: "3hledp", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);font-size:var(--cnvs-sys-font-size-title-lg, var(--cnvs-sys-font-size-title-large, 3.5rem));line-height:var(--cnvs-sys-line-height-title-lg, var(--cnvs-sys-line-height-title-large, 4rem));color:var(--cnvs-sys-color-fg-strong);" },
+            'title.medium': { name: "s61gb", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);font-size:var(--cnvs-sys-font-size-title-md, var(--cnvs-sys-font-size-title-medium, 3rem));line-height:var(--cnvs-sys-line-height-title-md, var(--cnvs-sys-line-height-title-medium, 3.5rem));color:var(--cnvs-sys-color-fg-strong);" },
+            'title.small': { name: "283mtq", styles: "font-family:var(--cnvs-sys-font-family-default);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));color:var(--cnvs-sys-color-fg-strong);" },
             // Heading level styles
-            'heading.large': { name: "2h4l52", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-heading-large);font-size:var(--cnvs-sys-font-size-heading-large);color:var(--cnvs-sys-color-text-strong);" },
-            'heading.medium': { name: "33yn2o", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-heading-medium);font-size:var(--cnvs-sys-font-size-heading-medium);color:var(--cnvs-sys-color-text-strong);" },
-            'heading.small': { name: "1dxjwv", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-heading-small);font-size:var(--cnvs-sys-font-size-heading-small);color:var(--cnvs-sys-color-text-strong);" },
+            'heading.large': { name: "38d3hs", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);font-size:var(--cnvs-sys-font-size-heading-lg, var(--cnvs-sys-font-size-heading-large, 2rem));line-height:var(--cnvs-sys-line-height-heading-lg, var(--cnvs-sys-line-height-heading-large, 2.5rem));color:var(--cnvs-sys-color-fg-strong);" },
+            'heading.medium': { name: "2h9uk3", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);font-size:var(--cnvs-sys-font-size-heading-md, var(--cnvs-sys-font-size-heading-medium, 1.75rem));line-height:var(--cnvs-sys-line-height-heading-md, var(--cnvs-sys-line-height-heading-medium, 2.25rem));color:var(--cnvs-sys-color-fg-strong);" },
+            'heading.small': { name: "3qjg7y", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);font-size:var(--cnvs-sys-font-size-heading-sm, var(--cnvs-sys-font-size-heading-small, 1.5rem));line-height:var(--cnvs-sys-line-height-heading-sm, var(--cnvs-sys-line-height-heading-small, 2rem));color:var(--cnvs-sys-color-fg-strong);" },
             // Body level styles
-            'body.large': { name: "20ze3u", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-body-large);font-size:var(--cnvs-sys-font-size-body-large);color:var(--cnvs-sys-color-text-default);" },
-            'body.medium': { name: "3awpkm", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-body-medium);font-size:var(--cnvs-sys-font-size-body-medium);color:var(--cnvs-sys-color-text-default);" },
-            'body.small': { name: "28m6df", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-body-small);font-size:var(--cnvs-sys-font-size-body-small);letter-spacing:var(--cnvs-base-letter-spacing-200);color:var(--cnvs-sys-color-text-default);" },
+            'body.large': { name: "2cqvv4", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);font-size:var(--cnvs-sys-font-size-body-lg, var(--cnvs-sys-font-size-body-large, 1.25rem));line-height:var(--cnvs-sys-line-height-body-lg, var(--cnvs-sys-line-height-body-large, 1.75rem));color:var(--cnvs-sys-color-fg-default);" },
+            'body.medium': { name: "3cqy45", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);font-size:var(--cnvs-sys-font-size-body-md, var(--cnvs-sys-font-size-body-medium, 1.125rem));line-height:var(--cnvs-sys-line-height-body-md, var(--cnvs-sys-line-height-body-medium, 1.75rem));color:var(--cnvs-sys-color-fg-default);" },
+            'body.small': { name: "1mwbg0", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);font-size:var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small, 1rem));line-height:var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small, 1.5rem));letter-spacing:var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-sys-type-letter-spacing-body-small));color:var(--cnvs-sys-color-fg-default);" },
             // Subtext level styles
-            'subtext.large': { name: "zc9mw", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);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);color:var(--cnvs-sys-color-text-default);" },
-            'subtext.medium': { name: "301wt3", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-medium);font-size:var(--cnvs-sys-font-size-subtext-medium);letter-spacing:var(--cnvs-base-letter-spacing-100);color:var(--cnvs-sys-color-text-default);" },
-            'subtext.small': { name: "3ed31x", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-small);font-size:var(--cnvs-sys-font-size-subtext-small);letter-spacing:var(--cnvs-base-letter-spacing-50);color:var(--cnvs-sys-color-text-default);" }
+            'subtext.large': { name: "3u2v4o", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));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-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));color:var(--cnvs-sys-color-fg-default);" },
+            'subtext.medium': { name: "24sjnb", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);font-size:var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem));line-height:var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium));color:var(--cnvs-sys-color-fg-default);" },
+            'subtext.small': { name: "3bvq8b", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);font-size:var(--cnvs-sys-font-size-subtext-sm, var(--cnvs-sys-font-size-subtext-small, 0.625rem));line-height:var(--cnvs-sys-line-height-subtext-sm, var(--cnvs-sys-line-height-subtext-small, 1rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-sm, var(--cnvs-sys-type-letter-spacing-subtext-small));color:var(--cnvs-sys-color-fg-default);" }
         },
         variant: {
-            error: { name: "47hrdb", styles: "color:var(--cnvs-sys-color-text-critical-default);" },
-            hint: { name: "tybre", styles: "color:var(--cnvs-sys-color-text-hint);" },
-            inverse: { name: "2qqulg", styles: "color:var(--cnvs-sys-color-text-inverse);" }
+            error: { name: "2r97nw", styles: "color:var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));" },
+            hint: { name: "35u1g1", styles: "color:var(--cnvs-sys-color-fg-muted-default);" },
+            inverse: { name: "1us15r", styles: "color:var(--cnvs-sys-color-fg-inverse);" }
         }
     }
-}, "text-8fe759");
+}, "text-479eff");
 /**
  * This is a generic base component intended to render any text.
  * It has `typeLevel` and `variant` style props that simplify navigating

package/dist/commonjs/text/lib/TypeLevelComponents.d.ts

@@ -60,6 +60,211 @@ export declare const Subtext: import("@workday/canvas-kit-react/common").Element
  * ```
  */
 export declare const BodyText: import("@workday/canvas-kit-react/common").ElementComponent<"p", TypeLevelProps>;
+export declare const headingStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, import("@workday/canvas-kit-styling").Stencil<{
+    typeLevel: {
+        'title.large': {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-bold";
+            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': {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-bold";
+            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': {
+            fontFamily: "--cnvs-sys-font-family-default";
+            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))";
+            color: "--cnvs-sys-color-fg-strong";
+        };
+        'heading.large': {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-bold";
+            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': {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-bold";
+            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': {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-bold";
+            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': {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-normal";
+            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': {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-normal";
+            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': {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-normal";
+            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': {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-normal";
+            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': {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-normal";
+            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': {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-normal";
+            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: "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-fg-muted-default";
+        };
+        inverse: {
+            color: "--cnvs-sys-color-fg-inverse";
+        };
+    };
+}, {}, {}, never, never>>, {}, {}, import("@workday/canvas-kit-styling").Stencil<{
+    typeLevel: {
+        'title.large': {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-bold";
+            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': {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-bold";
+            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': {
+            fontFamily: "--cnvs-sys-font-family-default";
+            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))";
+            color: "--cnvs-sys-color-fg-strong";
+        };
+        'heading.large': {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-bold";
+            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': {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-bold";
+            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': {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-bold";
+            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': {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-normal";
+            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': {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-normal";
+            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': {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-normal";
+            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': {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-normal";
+            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': {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-normal";
+            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': {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-normal";
+            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: "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-fg-muted-default";
+        };
+        inverse: {
+            color: "--cnvs-sys-color-fg-inverse";
+        };
+    };
+}, {}, {}, never, never>, never>;
 /**
  * This component is intended to be used for headings and large text.
  * By default, it renders a semantic `h2` element, but you can adjust this as needed with the `as` prop.

package/dist/commonjs/text/lib/TypeLevelComponents.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TypeLevelComponents.d.ts","sourceRoot":"","sources":["../../../../text/lib/TypeLevelComponents.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,SAAS,EAAc,MAAM,QAAQ,CAAC;AAI9C,KAAK,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEzC;;;GAGG;AACH,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,SAAS,EAAE,WAAW,CAAC;IAClE;;OAEG;IACH,IAAI,EAAE,IAAI,CAAC;CACZ;AAOD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,OAAO,kFAMlB,CAAC;AAOH;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,QAAQ,kFAMnB,CAAC;AAOH;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,OAAO,mFAMlB,CAAC;AAOH;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,KAAK,mFAMhB,CAAC"}
+{"version":3,"file":"TypeLevelComponents.d.ts","sourceRoot":"","sources":["../../../../text/lib/TypeLevelComponents.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAC,SAAS,EAAc,MAAM,QAAQ,CAAC;AAE9C,KAAK,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEzC;;;GAGG;AACH,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,SAAS,EAAE,WAAW,CAAC;IAClE;;OAEG;IACH,IAAI,EAAE,IAAI,CAAC;CACZ;AAOD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,OAAO,kFAMlB,CAAC;AAOH;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,QAAQ,kFAMnB,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAGzB,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,OAAO,mFAMlB,CAAC;AAOH;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,KAAK,mFAMhB,CAAC"}

package/dist/commonjs/text/lib/TypeLevelComponents.js

@@ -1,15 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Title = exports.Heading = exports.BodyText = exports.Subtext = void 0;
+exports.Title = exports.Heading = exports.headingStencil = exports.BodyText = exports.Subtext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const common_1 = require("@workday/canvas-kit-react/common");
-const Text_1 = require("./Text");
 const layout_1 = require("@workday/canvas-kit-react/layout");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const Text_1 = require("./Text");
 const subtextStencil = (0, canvas_kit_styling_1.createStencil)({
     extends: Text_1.textStencil,
-    base: { name: "39dafl", styles: "box-sizing:border-box;" }
-}, "subtext-5df9ce");
+    base: { name: "2sgdeq", styles: "box-sizing:border-box;" }
+}, "subtext-5f1e4c");
 /**
  * This component is intended to be used for small subtext content or in tight spaces.
  * By default, it renders a semantic `p` element, but you can adjust this as needed with the `as` prop.
@@ -43,8 +43,8 @@ exports.Subtext = (0, common_1.createComponent)('p')({
 });
 const bodyTextStencil = (0, canvas_kit_styling_1.createStencil)({
     extends: Text_1.textStencil,
-    base: { name: "2q3p7w", styles: "box-sizing:border-box;" }
-}, "body-text-35cc56");
+    base: { name: "3dztj6", styles: "box-sizing:border-box;" }
+}, "body-text-3fa494");
 /**
  * This component is intended to be used for standard body text.
  * By default, it renders a semantic `p` element, but you can adjust this as needed with the `as` prop.
@@ -76,10 +76,10 @@ exports.BodyText = (0, common_1.createComponent)('p')({
         return (0, jsx_runtime_1.jsx)(Element, { ref: ref, ...(0, layout_1.mergeStyles)(elemProps, bodyTextStencil({ typeLevel, variant })) });
     },
 });
-const headingStencil = (0, canvas_kit_styling_1.createStencil)({
+exports.headingStencil = (0, canvas_kit_styling_1.createStencil)({
     extends: Text_1.textStencil,
-    base: { name: "1wpohl", styles: "box-sizing:border-box;" }
-}, "heading-8ff6f4");
+    base: { name: "2782rb", styles: "box-sizing:border-box;" }
+}, "heading-5f541c");
 /**
  * This component is intended to be used for headings and large text.
  * By default, it renders a semantic `h2` element, but you can adjust this as needed with the `as` prop.
@@ -108,13 +108,13 @@ exports.Heading = (0, common_1.createComponent)('h2')({
     displayName: 'Heading',
     Component: ({ size, variant, ...elemProps }, ref, Element) => {
         const typeLevel = `heading.${size}`;
-        return (0, jsx_runtime_1.jsx)(Element, { ref: ref, ...(0, layout_1.mergeStyles)(elemProps, headingStencil({ typeLevel, variant })) });
+        return (0, jsx_runtime_1.jsx)(Element, { ref: ref, ...(0, layout_1.mergeStyles)(elemProps, (0, exports.headingStencil)({ typeLevel, variant })) });
     },
 });
 const titleStencil = (0, canvas_kit_styling_1.createStencil)({
     extends: Text_1.textStencil,
-    base: { name: "4a7aoq", styles: "box-sizing:border-box;" }
-}, "title-d6646c");
+    base: { name: "u9w9w", styles: "box-sizing:border-box;" }
+}, "title-ee184f");
 /**
  * This component is intended to be used large page titles.
  * By default, it renders a semantic `h1` element, but you can adjust this as needed with the `as` prop.

package/dist/commonjs/text-area/lib/TextArea.d.ts

@@ -1,4 +1,4 @@
-import { GrowthBehavior, ErrorType } from '@workday/canvas-kit-react/common';
+import { ErrorType, GrowthBehavior } from '@workday/canvas-kit-react/common';
 export type ValueOf<T> = T[keyof T];
 export interface TextAreaProps extends GrowthBehavior {
     /**
@@ -44,11 +44,11 @@ export declare const textAreaStencil: import("@workday/canvas-kit-styling").Sten
     };
     error: {
         error: {
-            borderColor: "--cnvs-brand-common-error-inner";
-            borderWidth: string;
-            backgroundColor: "--cnvs-brand-error-lightest";
+            borderColor: "var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1))";
+            boxShadow: string;
+            backgroundColor: "var(--cnvs-sys-color-brand-surface-critical-default, oklch(0.6289 0.2567 29.11 / 0.04))";
             '&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled]))': {
-                borderColor: "--cnvs-brand-common-error-inner";
+                borderColor: "var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1))";
             };
             '&:is(:focus-visible, .focus):not([disabled])': {
                 boxShadow: string;
@@ -56,11 +56,11 @@ export declare const textAreaStencil: import("@workday/canvas-kit-styling").Sten
             };
         };
         caution: {
-            borderColor: "--cnvs-brand-common-alert-outer";
+            borderColor: "var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)))";
             boxShadow: string;
-            backgroundColor: "--cnvs-brand-alert-lightest";
+            backgroundColor: "var(--cnvs-sys-color-brand-surface-caution-default, oklch(0.7982 0.159 92.57 / 0.1))";
             '&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled]))': {
-                borderColor: "--cnvs-brand-common-alert-outer";
+                borderColor: "var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)))";
             };
             '&:is(:focus-visible, .focus):not([disabled])': {
                 boxShadow: string;

package/dist/commonjs/text-area/lib/TextArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../../text-area/lib/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkB,cAAc,EAAE,SAAS,EAAC,MAAM,kCAAkC,CAAC;AAI5F,MAAM,MAAM,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAEpC,MAAM,WAAW,aAAc,SAAQ,cAAc;IACnD;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC,OAAO,uBAAuB,CAAC,CAAC;CAClD;AAED,eAAO,MAAM,uBAAuB;;;;;CAK1B,CAAC;AAEX,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA6B1B,CAAC;AAEH,eAAO,MAAM,QAAQ;;;;;;;;CAWnB,CAAC"}
+{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../../text-area/lib/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,cAAc,EAAkB,MAAM,kCAAkC,CAAC;AAK5F,MAAM,MAAM,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAEpC,MAAM,WAAW,aAAc,SAAQ,cAAc;IACnD;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC,OAAO,uBAAuB,CAAC,CAAC;CAClD;AAED,eAAO,MAAM,uBAAuB;;;;;CAK1B,CAAC;AAEX,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA6B1B,CAAC;AAEH,eAAO,MAAM,QAAQ;;;;;;;;CAWnB,CAAC"}

package/dist/commonjs/text-area/lib/TextArea.js

@@ -3,9 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextArea = exports.textAreaStencil = exports.TextAreaResizeDirection = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const common_1 = require("@workday/canvas-kit-react/common");
+const text_input_1 = require("@workday/canvas-kit-react/text-input");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
-const text_input_1 = require("@workday/canvas-kit-react/text-input");
 exports.TextAreaResizeDirection = {
     None: 'none',
     Both: 'both',
@@ -14,19 +14,19 @@ exports.TextAreaResizeDirection = {
 };
 exports.textAreaStencil = (0, canvas_kit_styling_1.createStencil)({
     extends: text_input_1.textInputStencil,
-    base: { name: "1oa07e", styles: "box-sizing:border-box;min-height:var(--cnvs-sys-space-x16);min-width:calc(calc(var(--cnvs-sys-space-x20) * 3) + var(--cnvs-sys-space-x10));&::webkit-resizer{display:none;}" },
+    base: { name: "ek5c0", styles: "box-sizing:border-box;min-height:var(--cnvs-sys-size-xxl, var(--cnvs-sys-space-x16, 4rem));min-width:17.5rem;&::webkit-resizer{display:none;}" },
     modifiers: {
         resize: {
-            both: { name: "2m34xs", styles: "resize:both;" },
-            horizontal: { name: "27wvu9", styles: "resize:horizontal;" },
-            vertical: { name: "2su1gh", styles: "resize:vertical;" },
-            none: { name: "2gno8i", styles: "resize:none;" }
+            both: { name: "kl5sb", styles: "resize:both;" },
+            horizontal: { name: "2f9b88", styles: "resize:horizontal;" },
+            vertical: { name: "39ze4d", styles: "resize:vertical;" },
+            none: { name: "4at385", styles: "resize:none;" }
         }
     },
     defaultModifiers: {
         resize: 'both',
     }
-}, "text-area-aff4ba");
+}, "text-area-51c69b");
 exports.TextArea = (0, common_1.createComponent)('textarea')({
     displayName: 'TextArea',
     Component: ({ resize = exports.TextAreaResizeDirection.Both, grow, error, ...elemProps }, ref, Element) => (0, jsx_runtime_1.jsx)(Element, { ref: ref, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.textAreaStencil)({ error, grow, resize })) }),

package/dist/commonjs/text-input/lib/InputGroup.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { CanvasSystemIcon } from '@workday/canvas-system-icons-web';
 export declare const useInputGroupModel: (<TT_Special_Generic>(config?: (Partial<{}> & {} & {}) | undefined) => {
     state: {
         inputRef: React.RefObject<HTMLInputElement>;
@@ -35,8 +36,8 @@ export declare const inputGroupInnerStencil: import("@workday/canvas-kit-styling
      * on your own.
      */
     insetInlineEnd: string;
-    width: "--cnvs-sys-space-x10";
-    height: "--cnvs-sys-space-x10";
+    width: "var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem))";
+    height: "var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem))";
     /**
      * Some inner input group elements are decoration only and should not have pointer events
      */
@@ -80,7 +81,7 @@ export declare const useClearButton: import("@workday/canvas-kit-react/common").
 }, {
     readonly role: "presentation";
     readonly tabIndex: -1;
-    readonly icon: import("@workday/design-assets-types").CanvasSystemIcon;
+    readonly icon: CanvasSystemIcon;
     readonly size: "small";
     readonly onMouseDown: (event: React.MouseEvent) => void;
     readonly onClick: () => void;

package/dist/commonjs/text-input/lib/InputGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputGroup.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/InputGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAoB1B,eAAO,MAAM,kBAAkB;;;;;;;;;;;;EAS7B,CAAC;AAEH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;IAE/B;;;OAGG;;IAEH;;;OAGG;;;;IAIH;;OAEG;;gBAkBL,CAAC;AA4CH,eAAO,MAAM,kBAAkB;;;;;;;;EAO7B,CAAC;AAEH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;gBAiBjC,CAAC;AAsBH,eAAO,MAAM,cAAc;;;;;;;;;;kCAWJ,gBAAgB;;EAQrC,CAAC;AA6BH,eAAO,MAAM,iBAAiB,iJAiB5B,CAAC;AAEH;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,UAAU;;;;;;IAInB;;;;;OAKG;;;;;;;IAEH;;;OAGG;;;;;;;;;IAEH;;;;;OAKG;;;;;;;IAEH;;;OAGG;;;;;;;CAsDL,CAAC"}
+{"version":3,"file":"InputGroup.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/InputGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAc1B,OAAO,EAAC,gBAAgB,EAAa,MAAM,kCAAkC,CAAC;AAK9E,eAAO,MAAM,kBAAkB;;;;;;;;;;;;EAS7B,CAAC;AAEH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;IAE/B;;;OAGG;;IAEH;;;OAGG;;;;IAIH;;OAEG;;gBAkBL,CAAC;AA4CH,eAAO,MAAM,kBAAkB;;;;;;;;EAO7B,CAAC;AAEH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;gBAiBjC,CAAC;AAsBH,eAAO,MAAM,cAAc;;;;;;;;;;kCAWJ,gBAAgB;;EAQrC,CAAC;AA6BH,eAAO,MAAM,iBAAiB,iJAiB5B,CAAC;AAEH;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,UAAU;;;;;;IAInB;;;;;OAKG;;;;;;;IAEH;;;OAGG;;;;;;;;;IAEH;;;;;OAKG;;;;;;;IAEH;;;OAGG;;;;;;;CAsDL,CAAC"}

package/dist/commonjs/text-input/lib/InputGroup.js

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.InputGroup = exports.inputGroupStencil = exports.useClearButton = exports.inputGroupInputStencil = exports.useInputGroupInput = exports.inputGroupInnerStencil = exports.useInputGroupModel = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importDefault(require("react"));
-const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
-const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
+const button_1 = require("@workday/canvas-kit-react/button");
 const common_1 = require("@workday/canvas-kit-react/common");
 const layout_1 = require("@workday/canvas-kit-react/layout");
-const button_1 = require("@workday/canvas-kit-react/button");
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
+const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const TextInput_1 = require("./TextInput");
 exports.useInputGroupModel = (0, common_1.createModelHook)({})(() => {
     const inputRef = react_1.default.useRef(null);
@@ -34,20 +34,20 @@ exports.inputGroupInnerStencil = (0, canvas_kit_styling_1.createStencil)({
          * on your own.
          */
         insetInlineEnd: 'initial',
-        width: canvas_tokens_web_1.system.space.x10,
-        height: canvas_tokens_web_1.system.space.x10,
+        width: canvas_tokens_web_1.system.legacy.size.md,
+        height: canvas_tokens_web_1.system.legacy.size.md,
         /**
          * Some inner input group elements are decoration only and should not have pointer events
          */
         pointerEvents: '',
     },
-    base: { name: "1qme3k", styles: "--insetInlineStart-input-group-inner-42c96b:initial;--insetInlineEnd-input-group-inner-42c96b:initial;--width-input-group-inner-42c96b:var(--cnvs-sys-space-x10);--height-input-group-inner-42c96b:var(--cnvs-sys-space-x10);box-sizing:border-box;display:flex;position:absolute;align-items:center;justify-content:center;width:var(--width-input-group-inner-42c96b);height:var(--height-input-group-inner-42c96b);inset-inline-start:var(--insetInlineStart-input-group-inner-42c96b);inset-inline-end:var(--insetInlineEnd-input-group-inner-42c96b);" },
+    base: { name: "193gjm", styles: "--insetInlineStart-input-group-inner-9e2c81:initial;--insetInlineEnd-input-group-inner-9e2c81:initial;--width-input-group-inner-9e2c81:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));--height-input-group-inner-9e2c81:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));box-sizing:border-box;display:flex;position:absolute;align-items:center;justify-content:center;width:var(--width-input-group-inner-9e2c81);height:var(--height-input-group-inner-9e2c81);inset-inline-start:var(--insetInlineStart-input-group-inner-9e2c81);inset-inline-end:var(--insetInlineEnd-input-group-inner-9e2c81);" },
     modifiers: {
         pointerEvents: {
-            _: { name: "3a4pdy", styles: "pointer-events:var(--pointerEvents-input-group-inner-42c96b);" }
+            _: { name: "2dsjth", styles: "pointer-events:var(--pointerEvents-input-group-inner-9e2c81);" }
         }
     }
-}, "input-group-inner-42c96b");
+}, "input-group-inner-9e2c81");
 const InputGroupInnerStart = (0, common_1.createSubcomponent)('div')({
     modelHook: exports.useInputGroupModel,
 })(({ pointerEvents, insetInlineStart, insetInlineEnd, width, height, ...elemProps }, Element) => {
@@ -82,16 +82,16 @@ exports.inputGroupInputStencil = (0, canvas_kit_styling_1.createStencil)({
         paddingInlineStart: '',
         paddingInlineEnd: '',
     },
-    base: { name: "cq36x", styles: "box-sizing:border-box;display:flex;width:100%;" },
+    base: { name: "v82v4", styles: "box-sizing:border-box;display:flex;width:100%;" },
     modifiers: {
         paddingInlineStart: {
-            _: { name: "38n986", styles: "padding-inline-start:var(--paddingInlineStart-input-group-input-9155da);" }
+            _: { name: "tgju7", styles: "padding-inline-start:var(--paddingInlineStart-input-group-input-7be7a4);" }
         },
         paddingInlineEnd: {
-            _: { name: "259nim", styles: "padding-inline-end:var(--paddingInlineEnd-input-group-input-9155da);" }
+            _: { name: "3365jg", styles: "padding-inline-end:var(--paddingInlineEnd-input-group-input-7be7a4);" }
         }
     }
-}, "input-group-input-9155da");
+}, "input-group-input-7be7a4");
 const InputGroupInput = (0, common_1.createSubcomponent)(TextInput_1.TextInput)({
     modelHook: exports.useInputGroupModel,
     elemPropsHook: exports.useInputGroupInput,
@@ -146,8 +146,8 @@ const wrapInCalc = (values) => {
     return `calc(${values.map(toPx).join(' + ')})`;
 };
 exports.inputGroupStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "25etye", styles: "box-sizing:border-box;display:flex;position:relative;align-items:center;& :has([data-part=\"input-group-clear-button\"]){transition:opacity 300ms ease;}&:where(:has(input:placeholder-shown)) :has([data-part=\"input-group-clear-button\"]){opacity:0;pointer-events:none;}" }
-}, "input-group-27e30b");
+    base: { name: "1t2vyk", styles: "box-sizing:border-box;display:flex;position:relative;align-items:center;& :has([data-part=\"input-group-clear-button\"]){transition:opacity 300ms ease;}&:where(:has(input:placeholder-shown)) :has([data-part=\"input-group-clear-button\"]){opacity:0;pointer-events:none;}" }
+}, "input-group-2e0e78");
 /**
  * An `InputGroup` is a container around a {@link TextInput} with optional inner start and end
  * elements. The inner start and end elements are usually icons or icon buttons visually represented
@@ -204,11 +204,11 @@ exports.InputGroup = (0, common_1.createContainer)('div')({
     // `offsetEnd` arrays
     react_1.default.Children.forEach(children, child => {
         if (react_1.default.isValidElement(child) && child.type === InputGroupInnerStart) {
-            const width = (0, canvas_kit_styling_1.wrapProperty)(child.props.width || canvas_tokens_web_1.system.space.x10);
+            const width = (0, canvas_kit_styling_1.wrapProperty)(child.props.width || canvas_tokens_web_1.system.legacy.size.md);
             offsetsStart.push(width);
         }
         if (react_1.default.isValidElement(child) && child.type === InputGroupInnerEnd) {
-            const width = (0, canvas_kit_styling_1.wrapProperty)(child.props.width || canvas_tokens_web_1.system.space.x10);
+            const width = (0, canvas_kit_styling_1.wrapProperty)(child.props.width || canvas_tokens_web_1.system.legacy.size.md);
             offsetsEnd.push(width);
         }
     });

package/dist/commonjs/text-input/lib/TextInput.d.ts

@@ -1,4 +1,4 @@
-import { GrowthBehavior, ErrorType } from '@workday/canvas-kit-react/common';
+import { ErrorType, GrowthBehavior } from '@workday/canvas-kit-react/common';
 import { CSProps } from '@workday/canvas-kit-styling';
 export interface TextInputProps extends GrowthBehavior, CSProps {
     /**
@@ -22,11 +22,11 @@ export declare const textInputStencil: import("@workday/canvas-kit-styling").Ste
     };
     error: {
         error: {
-            borderColor: "--cnvs-brand-common-error-inner";
-            borderWidth: string;
-            backgroundColor: "--cnvs-brand-error-lightest";
+            borderColor: "var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1))";
+            boxShadow: string;
+            backgroundColor: "var(--cnvs-sys-color-brand-surface-critical-default, oklch(0.6289 0.2567 29.11 / 0.04))";
             '&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled]))': {
-                borderColor: "--cnvs-brand-common-error-inner";
+                borderColor: "var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1))";
             };
             '&:is(:focus-visible, .focus):not([disabled])': {
                 boxShadow: string;
@@ -34,11 +34,11 @@ export declare const textInputStencil: import("@workday/canvas-kit-styling").Ste
             };
         };
         caution: {
-            borderColor: "--cnvs-brand-common-alert-outer";
+            borderColor: "var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)))";
             boxShadow: string;
-            backgroundColor: "--cnvs-brand-alert-lightest";
+            backgroundColor: "var(--cnvs-sys-color-brand-surface-caution-default, oklch(0.7982 0.159 92.57 / 0.1))";
             '&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled]))': {
-                borderColor: "--cnvs-brand-common-alert-outer";
+                borderColor: "var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)))";
             };
             '&:is(:focus-visible, .focus):not([disabled])': {
                 boxShadow: string;

package/dist/commonjs/text-input/lib/TextInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,cAAc,EACd,SAAS,EAEV,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAsC,OAAO,EAAC,MAAM,6BAA6B,CAAC;AAIzF,MAAM,WAAW,cAAe,SAAQ,cAAc,EAAE,OAAO;IAC7D;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAyF3B,CAAC;AAEH,eAAO,MAAM,SAAS;;CAiBpB,CAAC"}
+{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,cAAc,EAAkB,MAAM,kCAAkC,CAAC;AAE5F,OAAO,EAAC,OAAO,EAAgC,MAAM,6BAA6B,CAAC;AAGnF,MAAM,WAAW,cAAe,SAAQ,cAAc,EAAE,OAAO;IAC7D;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBA4F3B,CAAC;AAEH,eAAO,MAAM,SAAS;;CAiBpB,CAAC"}