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

package/dist/es6/table/lib/TableFooter.js

@@ -3,7 +3,7 @@ import { mergeStyles } from '@workday/canvas-kit-react/layout';
 import { createComponent } from '@workday/canvas-kit-react/common';
 import { createStencil } from '@workday/canvas-kit-styling';
 const tableFooterStencil = createStencil({
-    base: { name: "yxg05h", styles: "box-sizing:border-box;display:grid;" }
+    base: { name: "p7t95n", styles: "box-sizing:border-box;display:grid;" }
 }, "table-footer-9bbb07");
 export const TableFooter = createComponent('tfoot')({
     displayName: 'Table.Footer',

package/dist/es6/table/lib/TableHead.js

@@ -4,7 +4,7 @@ import { createComponent } from '@workday/canvas-kit-react/common';
 import { calc, createStencil } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
 const tableHeadStencil = createStencil({
-    base: { name: "yxg05c", styles: "box-sizing:border-box;display:grid;background-color:var(--cnvs-sys-color-bg-alt-softer);min-height:calc(var(--cnvs-sys-space-x16) - var(--cnvs-sys-space-x4));th {&:first-of-type{border-inline-start:none;}&:last-of-type{border-inline-end:none;}}" }
+    base: { name: "p7t95i", styles: "box-sizing:border-box;display:grid;background-color:var(--cnvs-sys-color-bg-alt-softer);min-height:calc(var(--cnvs-sys-space-x16) - var(--cnvs-sys-space-x4));th {&:first-of-type{border-inline-start:none;}&:last-of-type{border-inline-end:none;}}" }
 }, "table-head-c91e37");
 export const TableHead = createComponent('thead')({
     displayName: 'Table.Head',

package/dist/es6/table/lib/TableHeader.js

@@ -4,7 +4,7 @@ import { createComponent } from '@workday/canvas-kit-react/common';
 import { calc, createStencil, px2rem } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
 const tableHeaderStencil = createStencil({
-    base: { name: "yxg05f", styles: "box-sizing:border-box;display:grid;align-items:center;background-color:var(--cnvs-sys-color-bg-default);border-bottom:0.0625rem solid var(--cnvs-sys-color-border-divider);justify-content:start;min-height:calc(var(--cnvs-sys-space-x16) - var(--cnvs-sys-space-x2));padding:var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x4);word-break:break-word;font-weight:var(--cnvs-sys-font-weight-medium);" }
+    base: { name: "p7t95l", styles: "box-sizing:border-box;display:grid;align-items:center;background-color:var(--cnvs-sys-color-bg-default);border-bottom:0.0625rem solid var(--cnvs-sys-color-border-divider);justify-content:start;min-height:calc(var(--cnvs-sys-space-x16) - var(--cnvs-sys-space-x2));padding:var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x4);word-break:break-word;font-weight:var(--cnvs-sys-font-weight-medium);" }
 }, "table-header-8f0b37");
 export const TableHeader = createComponent('th')({
     displayName: 'Table.Header',

package/dist/es6/table/lib/TableRow.js

@@ -5,7 +5,7 @@ import { createStencil, createVars } from '@workday/canvas-kit-styling';
 const childrenVars = createVars({ id: "4d9bf5", args: ["cellNumber"] });
 // Styles for rows including dynamic sizing for amount of cells within a row
 const tableRowStencil = createStencil({
-    base: { name: "yxg05e", styles: "box-sizing:border-box;display:grid;grid-auto-flow:column;grid-template-columns:repeat(var(--cellNumber-4d9bf5), minmax(10rem, 1fr));" }
+    base: { name: "p7t95k", styles: "box-sizing:border-box;display:grid;grid-auto-flow:column;grid-template-columns:repeat(var(--cellNumber-4d9bf5), minmax(10rem, 1fr));" }
 }, "table-row-a6e914");
 export const TableRow = createComponent('tr')({
     displayName: 'Table.Row',

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

@@ -6,21 +6,21 @@ import { mergeStyles } from '@workday/canvas-kit-react/layout';
 import { textStencil } from './Text';
 const labelTextStencil = createStencil({
     extends: textStencil,
-    base: { name: "yxg0o", 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: "p7t9o", 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: "yxg0p", styles: "cursor:default;color:var(--cnvs-sys-color-text-disabled);" }
+            true: { name: "p7t9p", styles: "cursor:default;color:var(--cnvs-sys-color-text-disabled);" }
         },
         variant: {
-            inverse: { name: "yxg0q", styles: "color:var(--cnvs-sys-color-text-inverse);" },
-            error: { name: "yxg0r", styles: "color:var(--cnvs-sys-color-text-critical-default);" },
-            hint: { name: "yxg0s", styles: "color:var(--cnvs-sys-color-text-hint);" }
+            inverse: { name: "p7t9q", styles: "color:var(--cnvs-sys-color-text-inverse);" },
+            error: { name: "p7t9r", styles: "color:var(--cnvs-sys-color-text-critical-default);" },
+            hint: { name: "p7t9s", styles: "color:var(--cnvs-sys-color-text-hint);" }
         }
     },
     compound: [
         {
             modifiers: { variant: 'inverse', disabled: true },
-            styles: { name: "yxg0t", styles: "opacity:var(--cnvs-sys-opacity-disabled);color:var(--cnvs-sys-color-text-inverse);" }
+            styles: { name: "p7t9t", styles: "opacity:var(--cnvs-sys-opacity-disabled);color:var(--cnvs-sys-color-text-inverse);" }
         }
     ]
 }, "label-text-047ddd");

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

@@ -4,30 +4,30 @@ import { createComponent } from '@workday/canvas-kit-react/common';
 import { createStencil } from '@workday/canvas-kit-styling';
 import { mergeStyles } from '@workday/canvas-kit-react/layout';
 export const textStencil = createStencil({
-    base: { name: "yxg04", styles: "box-sizing:border-box;" },
+    base: { name: "p7t94", styles: "box-sizing:border-box;" },
     modifiers: {
         typeLevel: {
             // Title level styles
-            'title.large': { name: "yxg05", 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: "yxg06", 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: "yxg07", 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: "p7t95", 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: "p7t96", 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: "p7t97", 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: "yxg08", 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: "yxg09", 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: "yxg0a", 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: "p7t98", 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: "p7t99", 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: "p7t9a", 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: "yxg0b", 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: "yxg0c", 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: "yxg0d", 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: "p7t9b", 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: "p7t9c", 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: "p7t9d", 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: "yxg0e", 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: "yxg0f", 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: "yxg0g", 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: "p7t9e", 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: "p7t9f", 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: "p7t9g", 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: "yxg0h", styles: "color:var(--cnvs-sys-color-text-critical-default);" },
-            hint: { name: "yxg0i", styles: "color:var(--cnvs-sys-color-text-hint);" },
-            inverse: { name: "yxg0j", styles: "color:var(--cnvs-sys-color-text-inverse);" }
+            error: { name: "p7t9h", styles: "color:var(--cnvs-sys-color-text-critical-default);" },
+            hint: { name: "p7t9i", styles: "color:var(--cnvs-sys-color-text-hint);" },
+            inverse: { name: "p7t9j", styles: "color:var(--cnvs-sys-color-text-inverse);" }
         }
     }
 }, "text-e3da06");

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

@@ -5,7 +5,7 @@ import { mergeStyles } from '@workday/canvas-kit-react/layout';
 import { createStencil } from '@workday/canvas-kit-styling';
 const subtextStencil = createStencil({
     extends: textStencil,
-    base: { name: "yxg0k", styles: "box-sizing:border-box;" }
+    base: { name: "p7t9k", styles: "box-sizing:border-box;" }
 }, "subtext-4e8604");
 /**
  * This component is intended to be used for small subtext content or in tight spaces.
@@ -40,7 +40,7 @@ export const Subtext = createComponent('p')({
 });
 const bodyTextStencil = createStencil({
     extends: textStencil,
-    base: { name: "yxg0l", styles: "box-sizing:border-box;" }
+    base: { name: "p7t9l", styles: "box-sizing:border-box;" }
 }, "body-text-44de3e");
 /**
  * This component is intended to be used for standard body text.
@@ -75,7 +75,7 @@ export const BodyText = createComponent('p')({
 });
 const headingStencil = createStencil({
     extends: textStencil,
-    base: { name: "yxg0m", styles: "box-sizing:border-box;" }
+    base: { name: "p7t9m", styles: "box-sizing:border-box;" }
 }, "heading-5a3efc");
 /**
  * This component is intended to be used for headings and large text.
@@ -110,7 +110,7 @@ export const Heading = createComponent('h2')({
 });
 const titleStencil = createStencil({
     extends: textStencil,
-    base: { name: "yxg0n", styles: "box-sizing:border-box;" }
+    base: { name: "p7t9n", styles: "box-sizing:border-box;" }
 }, "title-2c12c2");
 /**
  * This component is intended to be used large page titles.

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

@@ -11,13 +11,13 @@ export const TextAreaResizeDirection = {
 };
 export const textAreaStencil = createStencil({
     extends: textInputStencil,
-    base: { name: "yxg05k", 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: "p7t95q", 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: "yxg05l", styles: "resize:both;" },
-            horizontal: { name: "yxg05m", styles: "resize:horizontal;" },
-            vertical: { name: "yxg05n", styles: "resize:vertical;" },
-            none: { name: "yxg05o", styles: "resize:none;" }
+            both: { name: "p7t95r", styles: "resize:both;" },
+            horizontal: { name: "p7t95s", styles: "resize:horizontal;" },
+            vertical: { name: "p7t95t", styles: "resize:vertical;" },
+            none: { name: "p7t95u", styles: "resize:none;" }
         }
     },
     defaultModifiers: {

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

@@ -1,8 +1,8 @@
 import React from 'react';
-import { maybeWrapCSSVariables } from '@workday/canvas-kit-styling';
+import { createStencil, handleCsProp, maybeWrapCSSVariables } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
-import { createContainer, createElemPropsHook, createModelHook, createSubcomponent, dispatchInputEvent, useForkRef, useIsRTL, } from '@workday/canvas-kit-react/common';
-import { Flex } from '@workday/canvas-kit-react/layout';
+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 { xSmallIcon } from '@workday/canvas-system-icons-web';
 import { TextInput } from './TextInput';
@@ -15,38 +15,85 @@ export const useInputGroupModel = createModelHook({})(() => {
         events: {},
     };
 });
-export const InputGroupInnerStart = createSubcomponent('div')({
+export const inputGroupInnerStencil = 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: system.space.x10,
+        height: system.space.x10,
+        /**
+         * Some inner input group elements are decoration only and should not have pointer events
+         */
+        pointerEvents: '',
+    },
+    base: { name: "p7t93z", 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: "p7t940", styles: "pointer-events:var(--pointerEvents-input-group-inner-74be52);" }
+        }
+    }
+}, "input-group-inner-74be52");
+const InputGroupInnerStart = createSubcomponent('div')({
     modelHook: useInputGroupModel,
-})((elemProps, Element) => {
-    return (React.createElement(Flex, { as: Element, position: "absolute", alignItems: "center", justifyContent: "center", height: "xl", width: "xl", ...elemProps }));
+})(({ pointerEvents, insetInlineStart, insetInlineEnd, width, height, ...elemProps }, Element) => {
+    return (React.createElement(Element, { ...mergeStyles(elemProps, inputGroupInnerStencil({
+            pointerEvents,
+            insetInlineStart: toPx(insetInlineStart),
+            insetInlineEnd: toPx(insetInlineEnd),
+            width: toPx(width),
+            height: toPx(height),
+        })) }));
 });
-export const InputGroupInnerEnd = createSubcomponent('div')({
+const InputGroupInnerEnd = createSubcomponent('div')({
     modelHook: useInputGroupModel,
-})((elemProps, Element) => {
-    return (React.createElement(Flex, { as: Element, position: "absolute", alignItems: "center", justifyContent: "center", height: "xl", width: "xl", ...elemProps }));
+})(({ pointerEvents, insetInlineStart, insetInlineEnd, width, height, ...elemProps }, Element) => {
+    return (React.createElement(Element, { ...mergeStyles(elemProps, inputGroupInnerStencil({
+            pointerEvents,
+            insetInlineStart: insetInlineStart,
+            insetInlineEnd: insetInlineEnd,
+            width: toPx(width),
+            height: toPx(height),
+        })) }));
 });
-const useInputGroupInput = createElemPropsHook(useInputGroupModel)((model, ref) => {
+export const useInputGroupInput = createElemPropsHook(useInputGroupModel)((model, ref) => {
     const elementRef = useForkRef(ref, model.state.inputRef);
     return {
         ref: elementRef,
     };
 });
-export const InputGroupInput = createSubcomponent(TextInput)({
+export const inputGroupInputStencil = createStencil({
+    vars: {
+        paddingInlineStart: '',
+        paddingInlineEnd: '',
+    },
+    base: { name: "p7t941", styles: "box-sizing:border-box;display:flex;width:100%;" },
+    modifiers: {
+        paddingInlineStart: {
+            _: { name: "p7t942", styles: "padding-inline-start:var(--paddingInlineStart-input-group-input-0042c7);" }
+        },
+        paddingInlineEnd: {
+            _: { name: "p7t943", styles: "padding-inline-end:var(--paddingInlineEnd-input-group-input-0042c7);" }
+        }
+    }
+}, "input-group-input-0042c7");
+const InputGroupInput = createSubcomponent(TextInput)({
     modelHook: useInputGroupModel,
     elemPropsHook: useInputGroupInput,
-})((elemProps, Element) => {
-    return React.createElement(Flex, { as: Element, width: "100%", ...elemProps });
+})(({ paddingInlineStart, paddingInlineEnd, ...elemProps }, Element) => {
+    return (React.createElement(Element, { as: Element, ...mergeStyles(elemProps, inputGroupInputStencil({
+            paddingInlineStart: toPx(paddingInlineStart),
+            paddingInlineEnd: toPx(paddingInlineEnd),
+        })) }));
 });
 export const useClearButton = createElemPropsHook(useInputGroupModel)(model => {
-    const [inputHasValue, setInputHasValue] = React.useState(false);
-    React.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
@@ -56,7 +103,6 @@ export const useClearButton = createElemPropsHook(useInputGroupModel)(model => {
         icon: 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();
@@ -65,20 +111,17 @@ export const useClearButton = createElemPropsHook(useInputGroupModel)(model => {
             // This will clear the input's value
             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.
  */
-export const ClearButton = createSubcomponent(TertiaryButton)({
+const ClearButton = createSubcomponent(TertiaryButton)({
     modelHook: useInputGroupModel,
     elemPropsHook: useClearButton,
 })((elemProps, Element) => {
-    return React.createElement(Element, { ...elemProps });
+    return React.createElement(Element, { "data-part": "input-group-clear-button", ...handleCsProp(elemProps) });
 });
 // make sure we always use pixels if the input is a number - this is required for `calc`
 const toPx = (input) => {
@@ -95,6 +138,9 @@ const wrapInCalc = (values) => {
     }
     return `calc(${values.map(toPx).join(' + ')})`;
 };
+export const inputGroupStencil = createStencil({
+    base: { name: "p7t944", 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
@@ -121,7 +167,7 @@ export const InputGroup = 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.
          */
@@ -133,9 +179,9 @@ export const InputGroup = createContainer('div')({
         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: InputGroupInnerEnd,
         /**
@@ -145,7 +191,6 @@ export const InputGroup = createContainer('div')({
         ClearButton: ClearButton,
     },
 })(({ children, ...elemProps }, Element) => {
-    const isRTL = useIsRTL();
     const offsetsStart = [];
     const offsetsEnd = [];
     // Collect the widths of the `InnerStart` and `InnerEnd` components into `offsetStart` and
@@ -173,23 +218,21 @@ export const InputGroup = createContainer('div')({
                 });
             }
             if (child.type === InputGroupInnerStart) {
-                const offset = wrapInCalc(offsetsStart.slice(0, indexStart)) || 0;
+                const offset = wrapInCalc(offsetsStart.slice(0, indexStart)) || '0px';
                 indexStart++;
                 return React.cloneElement(child, {
-                    left: isRTL ? undefined : offset,
-                    right: isRTL ? offset : undefined,
+                    insetInlineStart: offset,
                 });
             }
             if (child.type === InputGroupInnerEnd) {
-                const offset = wrapInCalc(offsetsEnd.slice(indexEnd, -1)) || 0;
+                const offset = wrapInCalc(offsetsEnd.slice(indexEnd, -1)) || '0px';
                 indexEnd++;
                 return React.cloneElement(child, {
-                    left: isRTL ? offset : undefined,
-                    right: isRTL ? undefined : offset,
+                    insetInlineEnd: offset,
                 });
             }
         }
         return child;
     });
-    return (React.createElement(Flex, { as: Element, position: "relative", ...elemProps }, mappedChildren));
+    return React.createElement(Element, { ...mergeStyles(elemProps, inputGroupStencil()) }, mappedChildren);
 });

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