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

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

@@ -1,36 +1,36 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { system } from '@workday/canvas-tokens-web';
 import { createComponent } from '@workday/canvas-kit-react/common';
-import { createStencil } from '@workday/canvas-kit-styling';
 import { mergeStyles } from '@workday/canvas-kit-react/layout';
+import { createStencil } from '@workday/canvas-kit-styling';
+import { system } from '@workday/canvas-tokens-web';
 export const textStencil = createStencil({
-    base: { name: "2ymiq4", styles: "box-sizing:border-box;" },
+    base: { name: "2aatm4", 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: "17aadg", 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: "1rhkyu", 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: "1pu4gc", 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: "24ndti", 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: "33zkog", 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: "2fooqd", 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: "2ha5lm", 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: "48vc6z", 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: "1pg14r", 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: "1isbln", 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: "45xzjp", 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: "71zrw", 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: "2xe9s2", 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: "254l5k", styles: "color:var(--cnvs-sys-color-fg-muted-default);" },
+            inverse: { name: "3qzt05", 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/es6/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/es6/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/es6/text/lib/TypeLevelComponents.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createComponent } from '@workday/canvas-kit-react/common';
-import { textStencil } from './Text';
 import { mergeStyles } from '@workday/canvas-kit-react/layout';
 import { createStencil } from '@workday/canvas-kit-styling';
+import { textStencil } from './Text';
 const subtextStencil = createStencil({
     extends: textStencil,
-    base: { name: "39dafl", styles: "box-sizing:border-box;" }
-}, "subtext-5df9ce");
+    base: { name: "5homd", 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.
@@ -40,8 +40,8 @@ export const Subtext = createComponent('p')({
 });
 const bodyTextStencil = createStencil({
     extends: textStencil,
-    base: { name: "2q3p7w", styles: "box-sizing:border-box;" }
-}, "body-text-35cc56");
+    base: { name: "1f5wmn", 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.
@@ -73,10 +73,10 @@ export const BodyText = createComponent('p')({
         return _jsx(Element, { ref: ref, ...mergeStyles(elemProps, bodyTextStencil({ typeLevel, variant })) });
     },
 });
-const headingStencil = createStencil({
+export const headingStencil = createStencil({
     extends: textStencil,
-    base: { name: "1wpohl", styles: "box-sizing:border-box;" }
-}, "heading-8ff6f4");
+    base: { name: "4ehvhz", 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.
@@ -110,8 +110,8 @@ export const Heading = createComponent('h2')({
 });
 const titleStencil = createStencil({
     extends: textStencil,
-    base: { name: "4a7aoq", styles: "box-sizing:border-box;" }
-}, "title-d6646c");
+    base: { name: "2p38y", 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/es6/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/es6/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/es6/text-area/lib/TextArea.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createComponent, ErrorType } from '@workday/canvas-kit-react/common';
-import { createStencil, calc, handleCsProp } from '@workday/canvas-kit-styling';
-import { system } from '@workday/canvas-tokens-web';
+import { ErrorType, createComponent } from '@workday/canvas-kit-react/common';
 import { textInputStencil } from '@workday/canvas-kit-react/text-input';
+import { createStencil, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
+import { system } from '@workday/canvas-tokens-web';
 export const TextAreaResizeDirection = {
     None: 'none',
     Both: 'both',
@@ -11,19 +11,19 @@ export const TextAreaResizeDirection = {
 };
 export const textAreaStencil = createStencil({
     extends: 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: "1miwzs", 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: "27hl1t", styles: "resize:both;" },
+            horizontal: { name: "2vemo4", styles: "resize:horizontal;" },
+            vertical: { name: "2i7xb3", styles: "resize:vertical;" },
+            none: { name: "2omzna", styles: "resize:none;" }
         }
     },
     defaultModifiers: {
         resize: 'both',
     }
-}, "text-area-aff4ba");
+}, "text-area-51c69b");
 export const TextArea = createComponent('textarea')({
     displayName: 'TextArea',
     Component: ({ resize = TextAreaResizeDirection.Both, grow, error, ...elemProps }, ref, Element) => _jsx(Element, { ref: ref, ...handleCsProp(elemProps, textAreaStencil({ error, grow, resize })) }),

package/dist/es6/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/es6/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/es6/text-input/lib/InputGroup.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import { createStencil, handleCsProp, wrapProperty } from '@workday/canvas-kit-styling';
-import { system } from '@workday/canvas-tokens-web';
+import { TertiaryButton } from '@workday/canvas-kit-react/button';
 import { createContainer, createElemPropsHook, createModelHook, createSubcomponent, dispatchInputEvent, useForkRef, } from '@workday/canvas-kit-react/common';
 import { mergeStyles } from '@workday/canvas-kit-react/layout';
-import { TertiaryButton } from '@workday/canvas-kit-react/button';
+import { createStencil, handleCsProp, wrapProperty } from '@workday/canvas-kit-styling';
 import { xSmallIcon } from '@workday/canvas-system-icons-web';
+import { system } from '@workday/canvas-tokens-web';
 import { TextInput } from './TextInput';
 export const useInputGroupModel = createModelHook({})(() => {
     const inputRef = React.useRef(null);
@@ -28,20 +28,20 @@ export const inputGroupInnerStencil = createStencil({
          * on your own.
          */
         insetInlineEnd: 'initial',
-        width: system.space.x10,
-        height: system.space.x10,
+        width: system.legacy.size.md,
+        height: 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: "1gip0u", 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: "1wmald", styles: "pointer-events:var(--pointerEvents-input-group-inner-9e2c81);" }
         }
     }
-}, "input-group-inner-42c96b");
+}, "input-group-inner-9e2c81");
 const InputGroupInnerStart = createSubcomponent('div')({
     modelHook: useInputGroupModel,
 })(({ pointerEvents, insetInlineStart, insetInlineEnd, width, height, ...elemProps }, Element) => {
@@ -76,16 +76,16 @@ export const inputGroupInputStencil = createStencil({
         paddingInlineStart: '',
         paddingInlineEnd: '',
     },
-    base: { name: "cq36x", styles: "box-sizing:border-box;display:flex;width:100%;" },
+    base: { name: "6tzns", styles: "box-sizing:border-box;display:flex;width:100%;" },
     modifiers: {
         paddingInlineStart: {
-            _: { name: "38n986", styles: "padding-inline-start:var(--paddingInlineStart-input-group-input-9155da);" }
+            _: { name: "3wme1w", styles: "padding-inline-start:var(--paddingInlineStart-input-group-input-7be7a4);" }
         },
         paddingInlineEnd: {
-            _: { name: "259nim", styles: "padding-inline-end:var(--paddingInlineEnd-input-group-input-9155da);" }
+            _: { name: "4eyvml", styles: "padding-inline-end:var(--paddingInlineEnd-input-group-input-7be7a4);" }
         }
     }
-}, "input-group-input-9155da");
+}, "input-group-input-7be7a4");
 const InputGroupInput = createSubcomponent(TextInput)({
     modelHook: useInputGroupModel,
     elemPropsHook: useInputGroupInput,
@@ -140,8 +140,8 @@ const wrapInCalc = (values) => {
     return `calc(${values.map(toPx).join(' + ')})`;
 };
 export const inputGroupStencil = 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: "3fgcwf", 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
@@ -198,11 +198,11 @@ export const InputGroup = createContainer('div')({
     // `offsetEnd` arrays
     React.Children.forEach(children, child => {
         if (React.isValidElement(child) && child.type === InputGroupInnerStart) {
-            const width = wrapProperty(child.props.width || system.space.x10);
+            const width = wrapProperty(child.props.width || system.legacy.size.md);
             offsetsStart.push(width);
         }
         if (React.isValidElement(child) && child.type === InputGroupInnerEnd) {
-            const width = wrapProperty(child.props.width || system.space.x10);
+            const width = wrapProperty(child.props.width || system.legacy.size.md);
             offsetsEnd.push(width);
         }
     });

package/dist/es6/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/es6/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"}