@workday/canvas-kit-react 12.0.0-alpha.899-next.0 → 12.0.0-alpha.903-next.0

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

@@ -32,21 +32,21 @@ const layout_1 = require("@workday/canvas-kit-react/layout");
 const Text_1 = require("./Text");
 const labelTextStencil = (0, canvas_kit_styling_1.createStencil)({
     extends: Text_1.textStencil,
-    base: { name: "z8nyo", styles: "box-sizing:border-box;font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-base-font-weight-400);line-height:var(--cnvs-base-line-height-100);font-size:var(--cnvs-base-font-size-75);letter-spacing:var(--cnvs-base-letter-spacing-150);color:var(--cnvs-sys-color-text-default);" },
+    base: { name: "nuqno", styles: "box-sizing:border-box;font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-base-font-weight-400);line-height:var(--cnvs-base-line-height-100);font-size:var(--cnvs-base-font-size-75);letter-spacing:var(--cnvs-base-letter-spacing-150);color:var(--cnvs-sys-color-text-default);" },
     modifiers: {
         disabled: {
-            true: { name: "z8nyp", styles: "cursor:default;color:var(--cnvs-sys-color-text-disabled);" }
+            true: { name: "nuqnp", styles: "cursor:default;color:var(--cnvs-sys-color-text-disabled);" }
         },
         variant: {
-            inverse: { name: "z8nyq", styles: "color:var(--cnvs-sys-color-text-inverse);" },
-            error: { name: "z8nyr", styles: "color:var(--cnvs-sys-color-text-critical-default);" },
-            hint: { name: "z8nys", styles: "color:var(--cnvs-sys-color-text-hint);" }
+            inverse: { name: "nuqnq", styles: "color:var(--cnvs-sys-color-text-inverse);" },
+            error: { name: "nuqnr", styles: "color:var(--cnvs-sys-color-text-critical-default);" },
+            hint: { name: "nuqns", styles: "color:var(--cnvs-sys-color-text-hint);" }
         }
     },
     compound: [
         {
             modifiers: { variant: 'inverse', disabled: true },
-            styles: { name: "z8nyt", styles: "opacity:var(--cnvs-sys-opacity-disabled);color:var(--cnvs-sys-color-text-inverse);" }
+            styles: { name: "nuqnt", styles: "opacity:var(--cnvs-sys-opacity-disabled);color:var(--cnvs-sys-color-text-inverse);" }
         }
     ]
 }, "label-text-047ddd");

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

@@ -30,30 +30,30 @@ 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");
 exports.textStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "z8ny4", styles: "box-sizing:border-box;" },
+    base: { name: "nuqn4", styles: "box-sizing:border-box;" },
     modifiers: {
         typeLevel: {
             // Title level styles
-            'title.large': { name: "z8ny5", styles: "font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-base-font-weight-700);line-height:var(--cnvs-base-line-height-600);font-size:var(--cnvs-base-font-size-600);color:var(--cnvs-sys-color-text-strong);" },
-            'title.medium': { name: "z8ny6", styles: "font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-base-font-weight-700);line-height:var(--cnvs-base-line-height-500);font-size:var(--cnvs-base-font-size-500);color:var(--cnvs-sys-color-text-strong);" },
-            'title.small': { name: "z8ny7", styles: "font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-base-font-weight-700);line-height:var(--cnvs-base-line-height-400);font-size:var(--cnvs-base-font-size-400);color:var(--cnvs-sys-color-text-strong);" },
+            'title.large': { name: "nuqn5", styles: "font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-base-font-weight-700);line-height:var(--cnvs-base-line-height-600);font-size:var(--cnvs-base-font-size-600);color:var(--cnvs-sys-color-text-strong);" },
+            'title.medium': { name: "nuqn6", styles: "font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-base-font-weight-700);line-height:var(--cnvs-base-line-height-500);font-size:var(--cnvs-base-font-size-500);color:var(--cnvs-sys-color-text-strong);" },
+            'title.small': { name: "nuqn7", styles: "font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-base-font-weight-700);line-height:var(--cnvs-base-line-height-400);font-size:var(--cnvs-base-font-size-400);color:var(--cnvs-sys-color-text-strong);" },
             // Heading level styles
-            'heading.large': { name: "z8ny8", styles: "font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-base-font-weight-700);line-height:var(--cnvs-base-line-height-350);font-size:var(--cnvs-base-font-size-300);color:var(--cnvs-sys-color-text-strong);" },
-            'heading.medium': { name: "z8ny9", styles: "font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-base-font-weight-700);line-height:var(--cnvs-base-line-height-300);font-size:var(--cnvs-base-font-size-250);color:var(--cnvs-sys-color-text-strong);" },
-            'heading.small': { name: "z8nya", styles: "font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-base-font-weight-700);line-height:var(--cnvs-base-line-height-250);font-size:var(--cnvs-base-font-size-200);color:var(--cnvs-sys-color-text-strong);" },
+            'heading.large': { name: "nuqn8", styles: "font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-base-font-weight-700);line-height:var(--cnvs-base-line-height-350);font-size:var(--cnvs-base-font-size-300);color:var(--cnvs-sys-color-text-strong);" },
+            'heading.medium': { name: "nuqn9", styles: "font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-base-font-weight-700);line-height:var(--cnvs-base-line-height-300);font-size:var(--cnvs-base-font-size-250);color:var(--cnvs-sys-color-text-strong);" },
+            'heading.small': { name: "nuqna", styles: "font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-base-font-weight-700);line-height:var(--cnvs-base-line-height-250);font-size:var(--cnvs-base-font-size-200);color:var(--cnvs-sys-color-text-strong);" },
             // Body level styles
-            'body.large': { name: "z8nyb", styles: "font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-base-font-weight-400);line-height:var(--cnvs-base-line-height-200);font-size:var(--cnvs-base-font-size-150);color:var(--cnvs-sys-color-text-default);" },
-            'body.medium': { name: "z8nyc", styles: "font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-base-font-weight-400);line-height:var(--cnvs-base-line-height-200);font-size:var(--cnvs-base-font-size-125);color:var(--cnvs-sys-color-text-default);" },
-            'body.small': { name: "z8nyd", styles: "font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-base-font-weight-400);line-height:var(--cnvs-base-line-height-150);font-size:var(--cnvs-base-font-size-100);letter-spacing:var(--cnvs-base-letter-spacing-200);color:var(--cnvs-sys-color-text-default);" },
+            'body.large': { name: "nuqnb", styles: "font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-base-font-weight-400);line-height:var(--cnvs-base-line-height-200);font-size:var(--cnvs-base-font-size-150);color:var(--cnvs-sys-color-text-default);" },
+            'body.medium': { name: "nuqnc", styles: "font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-base-font-weight-400);line-height:var(--cnvs-base-line-height-200);font-size:var(--cnvs-base-font-size-125);color:var(--cnvs-sys-color-text-default);" },
+            'body.small': { name: "nuqnd", styles: "font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-base-font-weight-400);line-height:var(--cnvs-base-line-height-150);font-size:var(--cnvs-base-font-size-100);letter-spacing:var(--cnvs-base-letter-spacing-200);color:var(--cnvs-sys-color-text-default);" },
             // Subtext level styles
-            'subtext.large': { name: "z8nye", styles: "font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-base-font-weight-400);line-height:var(--cnvs-base-line-height-100);font-size:var(--cnvs-base-font-size-75);letter-spacing:var(--cnvs-base-letter-spacing-150);color:var(--cnvs-sys-color-text-default);" },
-            'subtext.medium': { name: "z8nyf", styles: "font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-base-font-weight-400);line-height:var(--cnvs-base-line-height-50);font-size:var(--cnvs-base-font-size-50);letter-spacing:var(--cnvs-base-letter-spacing-100);color:var(--cnvs-sys-color-text-default);" },
-            'subtext.small': { name: "z8nyg", styles: "font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-base-font-weight-400);line-height:var(--cnvs-base-line-height-50);font-size:var(--cnvs-base-font-size-25);letter-spacing:var(--cnvs-base-letter-spacing-50);color:var(--cnvs-sys-color-text-default);" }
+            'subtext.large': { name: "nuqne", styles: "font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-base-font-weight-400);line-height:var(--cnvs-base-line-height-100);font-size:var(--cnvs-base-font-size-75);letter-spacing:var(--cnvs-base-letter-spacing-150);color:var(--cnvs-sys-color-text-default);" },
+            'subtext.medium': { name: "nuqnf", styles: "font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-base-font-weight-400);line-height:var(--cnvs-base-line-height-50);font-size:var(--cnvs-base-font-size-50);letter-spacing:var(--cnvs-base-letter-spacing-100);color:var(--cnvs-sys-color-text-default);" },
+            'subtext.small': { name: "nuqng", styles: "font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-base-font-weight-400);line-height:var(--cnvs-base-line-height-50);font-size:var(--cnvs-base-font-size-25);letter-spacing:var(--cnvs-base-letter-spacing-50);color:var(--cnvs-sys-color-text-default);" }
         },
         variant: {
-            error: { name: "z8nyh", styles: "color:var(--cnvs-sys-color-text-critical-default);" },
-            hint: { name: "z8nyi", styles: "color:var(--cnvs-sys-color-text-hint);" },
-            inverse: { name: "z8nyj", styles: "color:var(--cnvs-sys-color-text-inverse);" }
+            error: { name: "nuqnh", styles: "color:var(--cnvs-sys-color-text-critical-default);" },
+            hint: { name: "nuqni", styles: "color:var(--cnvs-sys-color-text-hint);" },
+            inverse: { name: "nuqnj", styles: "color:var(--cnvs-sys-color-text-inverse);" }
         }
     }
 }, "text-e3da06");

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

@@ -31,7 +31,7 @@ const layout_1 = require("@workday/canvas-kit-react/layout");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const subtextStencil = (0, canvas_kit_styling_1.createStencil)({
     extends: Text_1.textStencil,
-    base: { name: "z8nyk", styles: "box-sizing:border-box;" }
+    base: { name: "nuqnk", styles: "box-sizing:border-box;" }
 }, "subtext-4e8604");
 /**
  * This component is intended to be used for small subtext content or in tight spaces.
@@ -66,7 +66,7 @@ exports.Subtext = (0, common_1.createComponent)('p')({
 });
 const bodyTextStencil = (0, canvas_kit_styling_1.createStencil)({
     extends: Text_1.textStencil,
-    base: { name: "z8nyl", styles: "box-sizing:border-box;" }
+    base: { name: "nuqnl", styles: "box-sizing:border-box;" }
 }, "body-text-44de3e");
 /**
  * This component is intended to be used for standard body text.
@@ -101,7 +101,7 @@ exports.BodyText = (0, common_1.createComponent)('p')({
 });
 const headingStencil = (0, canvas_kit_styling_1.createStencil)({
     extends: Text_1.textStencil,
-    base: { name: "z8nym", styles: "box-sizing:border-box;" }
+    base: { name: "nuqnm", styles: "box-sizing:border-box;" }
 }, "heading-5a3efc");
 /**
  * This component is intended to be used for headings and large text.
@@ -136,7 +136,7 @@ exports.Heading = (0, common_1.createComponent)('h2')({
 });
 const titleStencil = (0, canvas_kit_styling_1.createStencil)({
     extends: Text_1.textStencil,
-    base: { name: "z8nyn", styles: "box-sizing:border-box;" }
+    base: { name: "nuqnn", styles: "box-sizing:border-box;" }
 }, "title-2c12c2");
 /**
  * This component is intended to be used large page titles.

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

@@ -46,20 +46,20 @@ export declare const textAreaStencil: import("@workday/canvas-kit-styling").Sten
         error: {
             borderColor: "--cnvs-brand-error-base";
             boxShadow: `inset 0 0 0 ${string} --cnvs-brand-error-base`;
-            '&:hover, &.hover, &:disabled, &.disabled, &:focus-visible:not([disabled]), &.focus:not([disabled])': {
+            '&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled]))': {
                 borderColor: "--cnvs-brand-error-base";
             };
-            '&:focus-visible:not([disabled]), &.focus:not([disabled])': {
+            '&:is(:focus-visible, .focus):not([disabled])': {
                 boxShadow: `inset 0 0 0 ${string} --cnvs-brand-error-base, 0 0 0 2px --cnvs-sys-color-border-inverse, 0 0 0 4px --cnvs-brand-common-focus-outline`;
             };
         };
         alert: {
             borderColor: "--cnvs-brand-alert-darkest";
             boxShadow: `inset 0 0 0 ${string} --cnvs-brand-alert-base`;
-            '&:hover, &.hover, &:disabled, &.disabled, &:focus-visible:not([disabled]), &.focus:not([disabled])': {
+            '&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled]))': {
                 borderColor: "--cnvs-brand-alert-darkest";
             };
-            '&:focus-visible:not([disabled]), &.focus:not([disabled])': {
+            '&:is(:focus-visible, .focus):not([disabled])': {
                 boxShadow: `inset 0 0 0 ${string} --cnvs-brand-alert-base,\n        0 0 0 2px --cnvs-sys-color-border-inverse,\n        0 0 0 4px --cnvs-brand-common-focus-outline`;
             };
         };

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

@@ -37,13 +37,13 @@ exports.TextAreaResizeDirection = {
 };
 exports.textAreaStencil = (0, canvas_kit_styling_1.createStencil)({
     extends: text_input_1.textInputStencil,
-    base: { name: "z8ny5k", 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: "nuqn5q", 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;}" },
     modifiers: {
         resize: {
-            both: { name: "z8ny5l", styles: "resize:both;" },
-            horizontal: { name: "z8ny5m", styles: "resize:horizontal;" },
-            vertical: { name: "z8ny5n", styles: "resize:vertical;" },
-            none: { name: "z8ny5o", styles: "resize:none;" }
+            both: { name: "nuqn5r", styles: "resize:both;" },
+            horizontal: { name: "nuqn5s", styles: "resize:horizontal;" },
+            vertical: { name: "nuqn5t", styles: "resize:vertical;" },
+            none: { name: "nuqn5u", styles: "resize:none;" }
         }
     },
     defaultModifiers: {

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

@@ -12,26 +12,65 @@ export declare const useInputGroupModel: (<TT_Special_Generic>(config?: (Partial
     };
     events: {};
 }>;
-export declare const InputGroupInnerStart: import("@workday/canvas-kit-react/common").ElementComponentM<"div", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").FlexStyleProps, {
-    state: {
-        inputRef: React.RefObject<HTMLInputElement>;
+export declare const inputGroupInnerStencil: import("@workday/canvas-kit-styling").Stencil<{
+    pointerEvents: {
+        _: ({ pointerEvents }: {
+            insetInlineStart: string;
+            insetInlineEnd: string;
+            width: string;
+            height: string;
+            pointerEvents: string;
+        }) => {
+            pointerEvents: string;
+        };
     };
-    events: {};
-}>;
-export declare const InputGroupInnerEnd: import("@workday/canvas-kit-react/common").ElementComponentM<"div", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").FlexStyleProps, {
+}, {
+    /**
+     * Offset of the inner item. Set by the `InputGroup` and depends on siblings. Do not change this
+     * on your own.
+     */
+    insetInlineStart: string;
+    /**
+     * Offset of the inner item. Set by the `InputGroup` and depends on siblings. Do not change this
+     * on your own.
+     */
+    insetInlineEnd: string;
+    width: "--cnvs-sys-space-x10";
+    height: "--cnvs-sys-space-x10";
+    /**
+     * Some inner input group elements are decoration only and should not have pointer events
+     */
+    pointerEvents: string;
+}, never, never>;
+export declare const useInputGroupInput: import("@workday/canvas-kit-react/common").BehaviorHook<{
     state: {
         inputRef: React.RefObject<HTMLInputElement>;
     };
     events: {};
+}, {
+    ref: (instance: unknown) => void;
 }>;
-export declare const InputGroupInput: import("@workday/canvas-kit-react/common").ElementComponentM<import("@workday/canvas-kit-react/common").ElementComponent<"input", import("./TextInput").TextInputProps> & {
-    ErrorType: typeof import("@workday/canvas-kit-react/common").ErrorType;
-}, Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").FlexStyleProps, {
-    state: {
-        inputRef: React.RefObject<HTMLInputElement>;
+export declare const inputGroupInputStencil: import("@workday/canvas-kit-styling").Stencil<{
+    paddingInlineStart: {
+        _: ({ paddingInlineStart }: {
+            paddingInlineStart: string;
+            paddingInlineEnd: string;
+        }) => {
+            paddingInlineStart: string;
+        };
     };
-    events: {};
-}>;
+    paddingInlineEnd: {
+        _: ({ paddingInlineEnd }: {
+            paddingInlineStart: string;
+            paddingInlineEnd: string;
+        }) => {
+            paddingInlineEnd: string;
+        };
+    };
+}, {
+    paddingInlineStart: string;
+    paddingInlineEnd: string;
+}, never, never>;
 export declare const useClearButton: import("@workday/canvas-kit-react/common").BehaviorHook<{
     state: {
         inputRef: React.RefObject<HTMLInputElement>;
@@ -42,23 +81,11 @@ export declare const useClearButton: import("@workday/canvas-kit-react/common").
     readonly tabIndex: -1;
     readonly icon: import("@workday/design-assets-types").CanvasSystemIcon;
     readonly size: "small";
-    readonly transition: "opacity 300ms ease";
     readonly onMouseDown: (event: React.MouseEvent) => void;
     readonly onClick: () => void;
-    readonly style: {
-        readonly opacity: 0 | 1;
-        readonly pointerEvents: "none" | "auto";
-    };
-}>;
-/**
- * A clear input button. This can be a component later.
- */
-export declare const ClearButton: import("@workday/canvas-kit-react/common").ElementComponentM<import("@workday/canvas-kit-react/common").ElementComponent<"button", import("@workday/canvas-kit-react/button").TertiaryButtonProps>, import("@workday/canvas-kit-react/button").TertiaryButtonProps, {
-    state: {
-        inputRef: React.RefObject<HTMLInputElement>;
-    };
-    events: {};
+    readonly placeholder: "";
 }>;
+export declare const inputGroupStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, never>, {}, never, never>;
 /**
  * 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
@@ -87,7 +114,7 @@ export declare const InputGroup: import("@workday/canvas-kit-react/common").Elem
 }> & {
     /**
      * A component to show inside and at the start of the input. The input's padding will be
-     * adjusted to not overlap with this element. Use `width` (number of pixels only) to adjust the
+     * adjusted by the `InputGroup` to not overlap with this element. Use `width` to adjust the
      * width offset. The width defaults to 40px which is the correct width for icons or icon
      * buttons.
      */
@@ -111,9 +138,9 @@ export declare const InputGroup: import("@workday/canvas-kit-react/common").Elem
     }>;
     /**
      * A component to show inside and at the end of the input. The input's padding will be adjusted
-     * to not overlap with this element. Use `width` (number of pixels only) to adjust the width
-     * offset. The width defaults to 40px which is the correct width for icons or icon buttons
-     * within the input.
+     * by the `InputGroup` to not overlap with this element. Use `width` to adjust the width offset.
+     * The width defaults to 40px which is the correct width for icons or icon buttons within the
+     * input.
      */
     InnerEnd: import("@workday/canvas-kit-react/common").ElementComponentM<"div", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").FlexStyleProps, {
         state: {

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,oBAAoB;;;;;EAc/B,CAAC;AAEH,eAAO,MAAM,kBAAkB;;;;;EAc7B,CAAC;AAUH,eAAO,MAAM,eAAe;;;;;;;EAK1B,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;;;;;;kCAwBJ,gBAAgB;;;;;;EAYrC,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,WAAW;;;;;EAKtB,CAAC;AAmBH;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,UAAU;;;;;;IAInB;;;;;OAKG;;;;;;;IAEH;;;OAGG;;;;;;;;;IAEH;;;;;OAKG;;;;;;;IAEH;;;OAGG;;;;;;;CA6DL,CAAC"}
+{"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;;;;;;;EAM7B,CAAC;AAEH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;gBAiBjC,CAAC;AAsBH,eAAO,MAAM,cAAc;;;;;;;;;;kCAWJ,gBAAgB;;;EASrC,CAAC;AA6BH,eAAO,MAAM,iBAAiB,yIAkB5B,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

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InputGroup = exports.ClearButton = exports.useClearButton = exports.InputGroupInput = exports.InputGroupInnerEnd = exports.InputGroupInnerStart = exports.useInputGroupModel = void 0;
+exports.InputGroup = exports.inputGroupStencil = exports.useClearButton = exports.inputGroupInputStencil = exports.useInputGroupInput = exports.inputGroupInnerStencil = exports.useInputGroupModel = void 0;
 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");
@@ -21,38 +21,85 @@ exports.useInputGroupModel = (0, common_1.createModelHook)({})(() => {
         events: {},
     };
 });
-exports.InputGroupInnerStart = (0, common_1.createSubcomponent)('div')({
+exports.inputGroupInnerStencil = (0, canvas_kit_styling_1.createStencil)({
+    vars: {
+        /**
+         * Offset of the inner item. Set by the `InputGroup` and depends on siblings. Do not change this
+         * on your own.
+         */
+        insetInlineStart: 'initial',
+        /**
+         * Offset of the inner item. Set by the `InputGroup` and depends on siblings. Do not change this
+         * on your own.
+         */
+        insetInlineEnd: 'initial',
+        width: canvas_tokens_web_1.system.space.x10,
+        height: canvas_tokens_web_1.system.space.x10,
+        /**
+         * Some inner input group elements are decoration only and should not have pointer events
+         */
+        pointerEvents: '',
+    },
+    base: { name: "nuqn3z", styles: "--insetInlineStart-input-group-inner-74be52:initial;--insetInlineEnd-input-group-inner-74be52:initial;--width-input-group-inner-74be52:var(--cnvs-sys-space-x10);--height-input-group-inner-74be52: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-74be52);height:var(--height-input-group-inner-74be52);inset-inline-start:var(--insetInlineStart-input-group-inner-74be52);inset-inline-end:var(--insetInlineEnd-input-group-inner-74be52);" },
+    modifiers: {
+        pointerEvents: {
+            _: { name: "nuqn40", styles: "pointer-events:var(--pointerEvents-input-group-inner-74be52);" }
+        }
+    }
+}, "input-group-inner-74be52");
+const InputGroupInnerStart = (0, common_1.createSubcomponent)('div')({
     modelHook: exports.useInputGroupModel,
-})((elemProps, Element) => {
-    return (react_1.default.createElement(layout_1.Flex, { as: Element, position: "absolute", alignItems: "center", justifyContent: "center", height: "xl", width: "xl", ...elemProps }));
+})(({ pointerEvents, insetInlineStart, insetInlineEnd, width, height, ...elemProps }, Element) => {
+    return (react_1.default.createElement(Element, { ...(0, layout_1.mergeStyles)(elemProps, (0, exports.inputGroupInnerStencil)({
+            pointerEvents,
+            insetInlineStart: toPx(insetInlineStart),
+            insetInlineEnd: toPx(insetInlineEnd),
+            width: toPx(width),
+            height: toPx(height),
+        })) }));
 });
-exports.InputGroupInnerEnd = (0, common_1.createSubcomponent)('div')({
+const InputGroupInnerEnd = (0, common_1.createSubcomponent)('div')({
     modelHook: exports.useInputGroupModel,
-})((elemProps, Element) => {
-    return (react_1.default.createElement(layout_1.Flex, { as: Element, position: "absolute", alignItems: "center", justifyContent: "center", height: "xl", width: "xl", ...elemProps }));
+})(({ pointerEvents, insetInlineStart, insetInlineEnd, width, height, ...elemProps }, Element) => {
+    return (react_1.default.createElement(Element, { ...(0, layout_1.mergeStyles)(elemProps, (0, exports.inputGroupInnerStencil)({
+            pointerEvents,
+            insetInlineStart: insetInlineStart,
+            insetInlineEnd: insetInlineEnd,
+            width: toPx(width),
+            height: toPx(height),
+        })) }));
 });
-const useInputGroupInput = (0, common_1.createElemPropsHook)(exports.useInputGroupModel)((model, ref) => {
+exports.useInputGroupInput = (0, common_1.createElemPropsHook)(exports.useInputGroupModel)((model, ref) => {
     const elementRef = (0, common_1.useForkRef)(ref, model.state.inputRef);
     return {
         ref: elementRef,
     };
 });
-exports.InputGroupInput = (0, common_1.createSubcomponent)(TextInput_1.TextInput)({
+exports.inputGroupInputStencil = (0, canvas_kit_styling_1.createStencil)({
+    vars: {
+        paddingInlineStart: '',
+        paddingInlineEnd: '',
+    },
+    base: { name: "nuqn41", styles: "box-sizing:border-box;display:flex;width:100%;" },
+    modifiers: {
+        paddingInlineStart: {
+            _: { name: "nuqn42", styles: "padding-inline-start:var(--paddingInlineStart-input-group-input-0042c7);" }
+        },
+        paddingInlineEnd: {
+            _: { name: "nuqn43", styles: "padding-inline-end:var(--paddingInlineEnd-input-group-input-0042c7);" }
+        }
+    }
+}, "input-group-input-0042c7");
+const InputGroupInput = (0, common_1.createSubcomponent)(TextInput_1.TextInput)({
     modelHook: exports.useInputGroupModel,
-    elemPropsHook: useInputGroupInput,
-})((elemProps, Element) => {
-    return react_1.default.createElement(layout_1.Flex, { as: Element, width: "100%", ...elemProps });
+    elemPropsHook: exports.useInputGroupInput,
+})(({ paddingInlineStart, paddingInlineEnd, ...elemProps }, Element) => {
+    return (react_1.default.createElement(Element, { as: Element, ...(0, layout_1.mergeStyles)(elemProps, (0, exports.inputGroupInputStencil)({
+            paddingInlineStart: toPx(paddingInlineStart),
+            paddingInlineEnd: toPx(paddingInlineEnd),
+        })) }));
 });
 exports.useClearButton = (0, common_1.createElemPropsHook)(exports.useInputGroupModel)(model => {
-    const [inputHasValue, setInputHasValue] = react_1.default.useState(false);
-    react_1.default.useLayoutEffect(() => {
-        const input = model.state.inputRef.current;
-        if (input) {
-            input.addEventListener('input', () => {
-                setInputHasValue(!!input.value);
-            });
-        }
-    }, [model.state.inputRef]);
     return {
         // This element does not need to be accessible via screen reader. The user can already clear
         // an input
@@ -62,7 +109,6 @@ exports.useClearButton = (0, common_1.createElemPropsHook)(exports.useInputGroup
         icon: canvas_system_icons_web_1.xSmallIcon,
         // "small" is needed to render correctly within a `TextInput`
         size: 'small',
-        transition: 'opacity 300ms ease',
         // prevent a focus change to the button. Focus should stay in the input.
         onMouseDown(event) {
             event.preventDefault();
@@ -71,20 +117,17 @@ exports.useClearButton = (0, common_1.createElemPropsHook)(exports.useInputGroup
             // This will clear the input's value
             (0, common_1.dispatchInputEvent)(model.state.inputRef.current, '');
         },
-        style: {
-            opacity: inputHasValue ? 1 : 0,
-            pointerEvents: inputHasValue ? 'auto' : 'none',
-        },
+        placeholder: '', // Make sure a placeholder attribute always exists for `:placeholder-shown`
     };
 });
 /**
  * A clear input button. This can be a component later.
  */
-exports.ClearButton = (0, common_1.createSubcomponent)(button_1.TertiaryButton)({
+const ClearButton = (0, common_1.createSubcomponent)(button_1.TertiaryButton)({
     modelHook: exports.useInputGroupModel,
     elemPropsHook: exports.useClearButton,
 })((elemProps, Element) => {
-    return react_1.default.createElement(Element, { ...elemProps });
+    return react_1.default.createElement(Element, { "data-part": "input-group-clear-button", ...(0, canvas_kit_styling_1.handleCsProp)(elemProps) });
 });
 // make sure we always use pixels if the input is a number - this is required for `calc`
 const toPx = (input) => {
@@ -101,6 +144,9 @@ const wrapInCalc = (values) => {
     }
     return `calc(${values.map(toPx).join(' + ')})`;
 };
+exports.inputGroupStencil = (0, canvas_kit_styling_1.createStencil)({
+    base: { name: "nuqn44", styles: "box-sizing:border-box;display:flex;position:relative;& :has([data-part=\"input-group-clear-button\"]){transition:opacity 300ms ease;opacity:1;pointer-events:auto;}&:where(:has(input:placeholder-shown)) :has([data-part=\"input-group-clear-button\"]){opacity:0;pointer-events:none;}" }
+}, "input-group-e70946");
 /**
  * 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
@@ -127,41 +173,40 @@ exports.InputGroup = (0, common_1.createContainer)('div')({
     subComponents: {
         /**
          * A component to show inside and at the start of the input. The input's padding will be
-         * adjusted to not overlap with this element. Use `width` (number of pixels only) to adjust the
+         * adjusted by the `InputGroup` to not overlap with this element. Use `width` to adjust the
          * width offset. The width defaults to 40px which is the correct width for icons or icon
          * buttons.
          */
-        InnerStart: exports.InputGroupInnerStart,
+        InnerStart: InputGroupInnerStart,
         /**
          * The input to render. By default, this is a {@link TextInput}. Use the `as` prop to change the
          * component to be rendered.
          */
-        Input: exports.InputGroupInput,
+        Input: InputGroupInput,
         /**
          * A component to show inside and at the end of the input. The input's padding will be adjusted
-         * to not overlap with this element. Use `width` (number of pixels only) to adjust the width
-         * offset. The width defaults to 40px which is the correct width for icons or icon buttons
-         * within the input.
+         * by the `InputGroup` to not overlap with this element. Use `width` to adjust the width offset.
+         * The width defaults to 40px which is the correct width for icons or icon buttons within the
+         * input.
          */
-        InnerEnd: exports.InputGroupInnerEnd,
+        InnerEnd: InputGroupInnerEnd,
         /**
          * A component that can be added to an input group that will clear the input. It will only render
          * when the input has a value and will fade when a value is entered.
          */
-        ClearButton: exports.ClearButton,
+        ClearButton: ClearButton,
     },
 })(({ children, ...elemProps }, Element) => {
-    const isRTL = (0, common_1.useIsRTL)();
     const offsetsStart = [];
     const offsetsEnd = [];
     // Collect the widths of the `InnerStart` and `InnerEnd` components into `offsetStart` and
     // `offsetEnd` arrays
     react_1.default.Children.forEach(children, child => {
-        if (react_1.default.isValidElement(child) && child.type === exports.InputGroupInnerStart) {
+        if (react_1.default.isValidElement(child) && child.type === InputGroupInnerStart) {
             const width = (0, canvas_kit_styling_1.maybeWrapCSSVariables)(child.props.width || canvas_tokens_web_1.system.space.x10);
             offsetsStart.push(width);
         }
-        if (react_1.default.isValidElement(child) && child.type === exports.InputGroupInnerEnd) {
+        if (react_1.default.isValidElement(child) && child.type === InputGroupInnerEnd) {
             const width = (0, canvas_kit_styling_1.maybeWrapCSSVariables)(child.props.width || canvas_tokens_web_1.system.space.x10);
             offsetsEnd.push(width);
         }
@@ -172,30 +217,28 @@ exports.InputGroup = (0, common_1.createContainer)('div')({
     // Loop over all the children and set the correct padding and positions
     const mappedChildren = react_1.default.Children.map(children, child => {
         if (react_1.default.isValidElement(child)) {
-            if (child.type === exports.InputGroupInput) {
+            if (child.type === InputGroupInput) {
                 return react_1.default.cloneElement(child, {
                     paddingInlineStart: wrapInCalc(offsetsStart),
                     paddingInlineEnd: wrapInCalc(offsetsEnd),
                 });
             }
-            if (child.type === exports.InputGroupInnerStart) {
-                const offset = wrapInCalc(offsetsStart.slice(0, indexStart)) || 0;
+            if (child.type === InputGroupInnerStart) {
+                const offset = wrapInCalc(offsetsStart.slice(0, indexStart)) || '0px';
                 indexStart++;
                 return react_1.default.cloneElement(child, {
-                    left: isRTL ? undefined : offset,
-                    right: isRTL ? offset : undefined,
+                    insetInlineStart: offset,
                 });
             }
-            if (child.type === exports.InputGroupInnerEnd) {
-                const offset = wrapInCalc(offsetsEnd.slice(indexEnd, -1)) || 0;
+            if (child.type === InputGroupInnerEnd) {
+                const offset = wrapInCalc(offsetsEnd.slice(indexEnd, -1)) || '0px';
                 indexEnd++;
                 return react_1.default.cloneElement(child, {
-                    left: isRTL ? offset : undefined,
-                    right: isRTL ? undefined : offset,
+                    insetInlineEnd: offset,
                 });
             }
         }
         return child;
     });
-    return (react_1.default.createElement(layout_1.Flex, { as: Element, position: "relative", ...elemProps }, mappedChildren));
+    return react_1.default.createElement(Element, { ...(0, layout_1.mergeStyles)(elemProps, (0, exports.inputGroupStencil)()) }, mappedChildren);
 });

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

@@ -24,20 +24,20 @@ export declare const textInputStencil: import("@workday/canvas-kit-styling").Ste
         error: {
             borderColor: "--cnvs-brand-error-base";
             boxShadow: `inset 0 0 0 ${string} --cnvs-brand-error-base`;
-            '&:hover, &.hover, &:disabled, &.disabled, &:focus-visible:not([disabled]), &.focus:not([disabled])': {
+            '&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled]))': {
                 borderColor: "--cnvs-brand-error-base";
             };
-            '&:focus-visible:not([disabled]), &.focus:not([disabled])': {
+            '&:is(:focus-visible, .focus):not([disabled])': {
                 boxShadow: `inset 0 0 0 ${string} --cnvs-brand-error-base, 0 0 0 2px --cnvs-sys-color-border-inverse, 0 0 0 4px --cnvs-brand-common-focus-outline`;
             };
         };
         alert: {
             borderColor: "--cnvs-brand-alert-darkest";
             boxShadow: `inset 0 0 0 ${string} --cnvs-brand-alert-base`;
-            '&:hover, &.hover, &:disabled, &.disabled, &:focus-visible:not([disabled]), &.focus:not([disabled])': {
+            '&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled]))': {
                 borderColor: "--cnvs-brand-alert-darkest";
             };
-            '&:focus-visible:not([disabled]), &.focus:not([disabled])': {
+            '&:is(:focus-visible, .focus):not([disabled])': {
                 boxShadow: `inset 0 0 0 ${string} --cnvs-brand-alert-base,\n        0 0 0 2px --cnvs-sys-color-border-inverse,\n        0 0 0 4px --cnvs-brand-common-focus-outline`;
             };
         };

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":"AACA,OAAO,EAAkB,cAAc,EAAE,SAAS,EAAC,MAAM,kCAAkC,CAAC;AAC5F,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAqF3B,CAAC;AAEH,eAAO,MAAM,SAAS;;CAepB,CAAC"}
+{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/TextInput.tsx"],"names":[],"mappings":"AACA,OAAO,EAAkB,cAAc,EAAE,SAAS,EAAC,MAAM,kCAAkC,CAAC;AAC5F,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAsF3B,CAAC;AAEH,eAAO,MAAM,SAAS;;CAiBpB,CAAC"}

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

@@ -33,15 +33,15 @@ exports.textInputStencil = (0, canvas_kit_styling_1.createStencil)({
     vars: {
         width: '',
     },
-    base: { name: "z8ny3u", styles: "box-sizing:border-box;font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-base-font-weight-400);line-height:var(--cnvs-base-line-height-100);font-size:var(--cnvs-base-font-size-75);letter-spacing:var(--cnvs-base-letter-spacing-150);display:block;border:0.0625rem solid var(--cnvs-sys-color-border-input-default);background-color:var(--cnvs-sys-color-bg-default);border-radius:var(--cnvs-sys-shape-x1);height:var(--cnvs-sys-space-x10);transition:0.2s box-shadow, 0.2s border-color;padding:var(--cnvs-sys-space-x2);margin:0rem;width:var(--width-text-input-d81f49);min-width:var(--width-text-input-d81f49, calc(calc(var(--cnvs-sys-space-x20) * 3) + var(--cnvs-sys-space-x10)));color:var(--cnvs-sys-color-text-default);::-ms-clear{display:none;}&::placeholder{color:var(--cnvs-sys-color-text-hint);}&:hover, &.hover{border-color:var(--cnvs-sys-color-border-input-strong);}&:focus-visible:not([disabled]), &.focus:not([disabled]){border-color:var(--cnvs-brand-common-focus-outline);box-shadow:inset 0 0 0 1px var(--cnvs-brand-common-focus-outline);outline:none;}&:disabled, .disabled{background-color:var(--cnvs-sys-color-bg-alt-softer);border-color:var(--cnvs-sys-color-border-input-disabled);color:var(--cnvs-sys-color-text-disabled);&::placeholder{color:var(--cnvs-sys-color-text-disabled);}}" },
+    base: { name: "nuqn3u", styles: "box-sizing:border-box;font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-base-font-weight-400);line-height:var(--cnvs-base-line-height-100);font-size:var(--cnvs-base-font-size-75);letter-spacing:var(--cnvs-base-letter-spacing-150);display:block;border:0.0625rem solid var(--cnvs-sys-color-border-input-default);background-color:var(--cnvs-sys-color-bg-default);border-radius:var(--cnvs-sys-shape-x1);height:var(--cnvs-sys-space-x10);transition:0.2s box-shadow, 0.2s border-color;padding:var(--cnvs-sys-space-x2);margin:0rem;width:var(--width-text-input-d81f49);min-width:var(--width-text-input-d81f49, calc(calc(var(--cnvs-sys-space-x20) * 3) + var(--cnvs-sys-space-x10)));color:var(--cnvs-sys-color-text-default);text-overflow:ellipsis;::-ms-clear{display:none;}&::placeholder{color:var(--cnvs-sys-color-text-hint);}&:is(:hover, .hover){border-color:var(--cnvs-sys-color-border-input-strong);}&:is(:focus-visible, .focus):where(:not([disabled])){border-color:var(--cnvs-brand-common-focus-outline);box-shadow:inset 0 0 0 1px var(--cnvs-brand-common-focus-outline);outline:none;}&:is(:disabled, .disabled){background-color:var(--cnvs-sys-color-bg-alt-softer);border-color:var(--cnvs-sys-color-border-input-disabled);color:var(--cnvs-sys-color-text-disabled);&::placeholder{color:var(--cnvs-sys-color-text-disabled);}}" },
     modifiers: {
         grow: {
-            true: { name: "z8ny3v", styles: "width:100%;resize:vertical;" },
-            false: { name: "z8ny3w", styles: "width:initial;" }
+            true: { name: "nuqn3v", styles: "width:100%;resize:vertical;" },
+            false: { name: "nuqn3w", styles: "width:initial;" }
         },
         error: {
-            error: { name: "z8ny3x", styles: "border-color:var(--cnvs-brand-error-base);box-shadow:inset 0 0 0 0.0625rem var(--cnvs-brand-error-base);&:hover, &.hover, &:disabled, &.disabled, &:focus-visible:not([disabled]), &.focus:not([disabled]){border-color:var(--cnvs-brand-error-base);}&:focus-visible:not([disabled]), &.focus:not([disabled]){box-shadow:inset 0 0 0 0.0625rem var(--cnvs-brand-error-base), 0 0 0 2px var(--cnvs-sys-color-border-inverse), 0 0 0 4px var(--cnvs-brand-common-focus-outline);}" },
-            alert: { name: "z8ny3y", styles: "border-color:var(--cnvs-brand-alert-darkest);box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-alert-base);&:hover, &.hover, &:disabled, &.disabled, &:focus-visible:not([disabled]), &.focus:not([disabled]){border-color:var(--cnvs-brand-alert-darkest);}&:focus-visible:not([disabled]), &.focus:not([disabled]){box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-alert-base),\n        0 0 0 2px var(--cnvs-sys-color-border-inverse),\n        0 0 0 4px var(--cnvs-brand-common-focus-outline);}" }
+            error: { name: "nuqn3x", styles: "border-color:var(--cnvs-brand-error-base);box-shadow:inset 0 0 0 0.0625rem var(--cnvs-brand-error-base);&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled])){border-color:var(--cnvs-brand-error-base);}&:is(:focus-visible, .focus):not([disabled]){box-shadow:inset 0 0 0 0.0625rem var(--cnvs-brand-error-base), 0 0 0 2px var(--cnvs-sys-color-border-inverse), 0 0 0 4px var(--cnvs-brand-common-focus-outline);}" },
+            alert: { name: "nuqn3y", styles: "border-color:var(--cnvs-brand-alert-darkest);box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-alert-base);&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled])){border-color:var(--cnvs-brand-alert-darkest);}&:is(:focus-visible, .focus):not([disabled]){box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-alert-base),\n        0 0 0 2px var(--cnvs-sys-color-border-inverse),\n        0 0 0 4px var(--cnvs-brand-common-focus-outline);}" }
         }
     },
     defaultModifiers: {
@@ -50,7 +50,9 @@ exports.textInputStencil = (0, canvas_kit_styling_1.createStencil)({
 }, "text-input-d81f49");
 exports.TextInput = (0, common_1.createComponent)('input')({
     displayName: 'TextInput',
-    Component: ({ grow, error, width, ...elemProps }, ref, Element) => (React.createElement(Element, { type: "text", ref: ref, ...(0, layout_1.mergeStyles)(elemProps, (0, exports.textInputStencil)({ width: typeof width === 'number' ? (0, canvas_kit_styling_1.px2rem)(width) : width, grow, error })) })),
+    Component: ({ grow, error, width, ...elemProps }, ref, Element) => {
+        return (React.createElement(Element, { type: "text", ref: ref, ...(0, layout_1.mergeStyles)(elemProps, (0, exports.textInputStencil)({ width: typeof width === 'number' ? (0, canvas_kit_styling_1.px2rem)(width) : width, grow, error })) }));
+    },
     subComponents: {
         ErrorType: common_1.ErrorType,
     },