@workday/canvas-kit-react 14.0.0-alpha.1238-next.0 → 14.0.0-alpha.1246-next.0

package/dist/es6/expandable/lib/ExpandableAvatar.d.ts

@@ -8,7 +8,7 @@ export declare const expandableAvatarStencil: import("@workday/canvas-kit-stylin
             readonly avatarName: "avatar-name";
         }>) => {
             "[data-part=\"avatar-image\"]": {
-                display: "none";
+                display: string;
             };
         };
     };
@@ -18,7 +18,7 @@ export declare const expandableAvatarStencil: import("@workday/canvas-kit-stylin
             readonly avatarName: "avatar-name";
         }>) => {
             "[data-part=\"avatar-image\"]": {
-                objectFit: "contain";
+                objectFit: string;
             };
         };
         cover: ({ avatarImagePart }: {} & import("@workday/canvas-kit-styling").StencilVarsParts<{
@@ -26,7 +26,7 @@ export declare const expandableAvatarStencil: import("@workday/canvas-kit-stylin
             readonly avatarName: "avatar-name";
         }>) => {
             "[data-part=\"avatar-image\"]": {
-                objectFit: "cover";
+                objectFit: string;
             };
         };
         fill: ({ avatarImagePart }: {} & import("@workday/canvas-kit-styling").StencilVarsParts<{
@@ -34,7 +34,7 @@ export declare const expandableAvatarStencil: import("@workday/canvas-kit-stylin
             readonly avatarName: "avatar-name";
         }>) => {
             "[data-part=\"avatar-image\"]": {
-                objectFit: "fill";
+                objectFit: string;
             };
         };
         none: ({ avatarImagePart }: {} & import("@workday/canvas-kit-styling").StencilVarsParts<{
@@ -42,7 +42,7 @@ export declare const expandableAvatarStencil: import("@workday/canvas-kit-stylin
             readonly avatarName: "avatar-name";
         }>) => {
             "[data-part=\"avatar-image\"]": {
-                objectFit: "none";
+                objectFit: string;
             };
         };
         "scale-down": ({ avatarImagePart }: {} & import("@workday/canvas-kit-styling").StencilVarsParts<{
@@ -50,7 +50,7 @@ export declare const expandableAvatarStencil: import("@workday/canvas-kit-stylin
             readonly avatarName: "avatar-name";
         }>) => {
             "[data-part=\"avatar-image\"]": {
-                objectFit: "scale-down";
+                objectFit: string;
             };
         };
         initial: ({ avatarImagePart }: {} & import("@workday/canvas-kit-styling").StencilVarsParts<{
@@ -58,7 +58,7 @@ export declare const expandableAvatarStencil: import("@workday/canvas-kit-stylin
             readonly avatarName: "avatar-name";
         }>) => {
             "[data-part=\"avatar-image\"]": {
-                objectFit: "initial";
+                objectFit: string;
             };
         };
         inherit: ({ avatarImagePart }: {} & import("@workday/canvas-kit-styling").StencilVarsParts<{
@@ -66,7 +66,7 @@ export declare const expandableAvatarStencil: import("@workday/canvas-kit-stylin
             readonly avatarName: "avatar-name";
         }>) => {
             "[data-part=\"avatar-image\"]": {
-                objectFit: "inherit";
+                objectFit: string;
             };
         };
         unset: ({ avatarImagePart }: {} & import("@workday/canvas-kit-styling").StencilVarsParts<{
@@ -74,7 +74,7 @@ export declare const expandableAvatarStencil: import("@workday/canvas-kit-stylin
             readonly avatarName: "avatar-name";
         }>) => {
             "[data-part=\"avatar-image\"]": {
-                objectFit: "unset";
+                objectFit: string;
             };
         };
         "-moz-initial": ({ avatarImagePart }: {} & import("@workday/canvas-kit-styling").StencilVarsParts<{
@@ -82,7 +82,7 @@ export declare const expandableAvatarStencil: import("@workday/canvas-kit-stylin
             readonly avatarName: "avatar-name";
         }>) => {
             "[data-part=\"avatar-image\"]": {
-                objectFit: "-moz-initial";
+                objectFit: string;
             };
         };
         revert: ({ avatarImagePart }: {} & import("@workday/canvas-kit-styling").StencilVarsParts<{
@@ -90,7 +90,7 @@ export declare const expandableAvatarStencil: import("@workday/canvas-kit-stylin
             readonly avatarName: "avatar-name";
         }>) => {
             "[data-part=\"avatar-image\"]": {
-                objectFit: "revert";
+                objectFit: string;
             };
         };
     };
@@ -100,43 +100,43 @@ export declare const expandableAvatarStencil: import("@workday/canvas-kit-stylin
 }, {}, import("@workday/canvas-kit-styling").Stencil<{
     variant: {
         blue: ({ backgroundColor, color }: {
-            backgroundColor: string;
-            color: string;
-            size: string;
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
         } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
-            backgroundColor: string;
-            color: string;
+            backgroundColor: `var(--${string}, var(--cnvs-base-palette-blue-300))`;
+            color: `var(--${string}, var(--cnvs-base-palette-blue-800))`;
         };
         amber: ({ backgroundColor, color }: {
-            backgroundColor: string;
-            color: string;
-            size: string;
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
         } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
-            backgroundColor: string;
-            color: string;
+            backgroundColor: `var(--${string}, var(--cnvs-base-palette-amber-200))`;
+            color: `var(--${string}, var(--cnvs-base-palette-amber-700))`;
         };
         teal: ({ backgroundColor, color }: {
-            backgroundColor: string;
-            color: string;
-            size: string;
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
         } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
-            backgroundColor: string;
-            color: string;
+            backgroundColor: `var(--${string}, var(--cnvs-base-palette-teal-300))`;
+            color: `var(--${string}, var(--cnvs-base-palette-teal-800))`;
         };
         purple: ({ backgroundColor, color }: {
-            backgroundColor: string;
-            color: string;
-            size: string;
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
         } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
-            backgroundColor: string;
-            color: string;
+            backgroundColor: `var(--${string}, var(--cnvs-base-palette-purple-300))`;
+            color: `var(--${string}, var(--cnvs-base-palette-purple-800))`;
         };
     };
     size: {
         extraExtraSmall: ({ size }: {
-            backgroundColor: string;
-            color: string;
-            size: string;
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
         } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
             fontFamily: "--cnvs-sys-font-family-default";
             fontWeight: "--cnvs-sys-font-weight-normal";
@@ -145,9 +145,9 @@ export declare const expandableAvatarStencil: import("@workday/canvas-kit-stylin
             letterSpacing: "--cnvs-base-letter-spacing-50";
         };
         extraSmall: ({ size }: {
-            backgroundColor: string;
-            color: string;
-            size: string;
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
         } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
             fontFamily: "--cnvs-sys-font-family-default";
             fontWeight: "--cnvs-sys-font-weight-normal";
@@ -156,9 +156,9 @@ export declare const expandableAvatarStencil: import("@workday/canvas-kit-stylin
             letterSpacing: "--cnvs-base-letter-spacing-100";
         };
         small: ({ size }: {
-            backgroundColor: string;
-            color: string;
-            size: string;
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
         } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
             fontFamily: "--cnvs-sys-font-family-default";
             fontWeight: "--cnvs-sys-font-weight-normal";
@@ -167,9 +167,9 @@ export declare const expandableAvatarStencil: import("@workday/canvas-kit-stylin
             letterSpacing: "--cnvs-base-letter-spacing-200";
         };
         medium: ({ size }: {
-            backgroundColor: string;
-            color: string;
-            size: string;
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
         } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
             fontFamily: "--cnvs-sys-font-family-default";
             fontWeight: "--cnvs-sys-font-weight-normal";
@@ -177,9 +177,9 @@ export declare const expandableAvatarStencil: import("@workday/canvas-kit-stylin
             fontSize: "--cnvs-sys-font-size-body-medium";
         };
         large: ({ size }: {
-            backgroundColor: string;
-            color: string;
-            size: string;
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
         } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
             fontFamily: "--cnvs-sys-font-family-default";
             fontWeight: "--cnvs-sys-font-weight-bold";
@@ -187,9 +187,9 @@ export declare const expandableAvatarStencil: import("@workday/canvas-kit-stylin
             fontSize: "--cnvs-sys-font-size-heading-medium";
         };
         extraLarge: ({ size }: {
-            backgroundColor: string;
-            color: string;
-            size: string;
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
         } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
             fontFamily: "--cnvs-sys-font-family-default";
             fontWeight: "--cnvs-sys-font-weight-bold";
@@ -197,9 +197,9 @@ export declare const expandableAvatarStencil: import("@workday/canvas-kit-stylin
             fontSize: "--cnvs-sys-font-size-title-small";
         };
         extraExtraLarge: ({ size }: {
-            backgroundColor: string;
-            color: string;
-            size: string;
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
         } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
             fontFamily: "--cnvs-sys-font-family-default";
             fontWeight: "--cnvs-sys-font-weight-bold";

package/dist/es6/expandable/lib/ExpandableAvatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExpandableAvatar.d.ts","sourceRoot":"","sources":["../../../../expandable/lib/ExpandableAvatar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAS,WAAW,EAAgB,MAAM,0CAA0C,CAAC;AAK5F,MAAM,WAAW,qBAAsB,SAAQ,WAAW;CAAG;AAE7D,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAMlC,CAAC;AAMH,eAAO,MAAM,gBAAgB,2FAa3B,CAAC"}
+{"version":3,"file":"ExpandableAvatar.d.ts","sourceRoot":"","sources":["../../../../expandable/lib/ExpandableAvatar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAS,WAAW,EAAgB,MAAM,0CAA0C,CAAC;AAI5F,MAAM,WAAW,qBAAsB,SAAQ,WAAW;CAAG;AAE7D,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAKlC,CAAC;AAMH,eAAO,MAAM,gBAAgB,2FAa3B,CAAC"}

package/dist/es6/expandable/lib/ExpandableAvatar.js

@@ -1,13 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createComponent } from '@workday/canvas-kit-react/common';
 import { Avatar, avatarStencil } from '@workday/canvas-kit-preview-react/avatar';
-import { system } from '@workday/canvas-tokens-web';
 import { createStencil } from '@workday/canvas-kit-styling';
 import { mergeStyles } from '@workday/canvas-kit-react/layout';
 export const expandableAvatarStencil = createStencil({
     extends: avatarStencil,
-    base: { name: "k8q5u", styles: "box-sizing:border-box;margin-inline-end:var(--cnvs-sys-space-x2);flex-shrink:0;" }
-}, "expandable-avatar-5b8eaf");
+    base: { name: "1gul17", styles: "box-sizing:border-box;flex-shrink:0;" }
+}, "expandable-avatar-4eeed1");
 // When the component is created, it needs to be a button element to match AvatarProps.
 // Once Avatar becomes a `createComponent` we can default the element type to a `div`
 // and the types should be properly extracted

package/dist/es6/expandable/lib/ExpandableContent.js

@@ -6,7 +6,7 @@ import { useExpandableModel } from './hooks/useExpandableModel';
 import { createStencil } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
 export const expandableContentStencil = createStencil({
-    base: { name: "3v2mrq", styles: "box-sizing:border-box;background:var(--cnvs-sys-color-bg-transparent-default);padding:var(--cnvs-sys-space-x4) var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x2);" }
+    base: { name: "242nrk", styles: "box-sizing:border-box;background:var(--cnvs-sys-color-bg-transparent-default);padding:var(--cnvs-sys-space-x4) var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x2);" }
 }, "expandable-content-25e157");
 export const ExpandableContent = createSubcomponent('div')({
     modelHook: useExpandableModel,

package/dist/es6/expandable/lib/ExpandableIcon.d.ts

@@ -32,7 +32,7 @@ export declare const expandableIconStencil: import("@workday/canvas-kit-styling"
 }, import("@workday/canvas-kit-styling").Stencil<{
     shouldMirror: {
         true: {
-            transform: "scaleX(-1)";
+            transform: string;
         };
     };
 }, {}, {

package/dist/es6/expandable/lib/ExpandableIcon.js

@@ -9,34 +9,34 @@ import { mergeStyles } from '@workday/canvas-kit-react/layout';
 import { system } from '@workday/canvas-tokens-web';
 export const expandableIconStencil = createStencil({
     extends: systemIconStencil,
-    base: { name: "405z6m", styles: "box-sizing:border-box;padding:var(--cnvs-sys-space-x1);" },
+    base: { name: "2ge403", styles: "box-sizing:border-box;padding:var(--cnvs-sys-space-x1);" },
     modifiers: {
         isExpanded: {
-            true: { name: "izrah", styles: "" },
-            false: { name: "15kj8y", styles: "" }
+            true: { name: "2oudey", styles: "" },
+            false: { name: "3gxu4d", styles: "" }
         },
         position: {
-            start: { name: "49hbni", styles: "" },
-            end: { name: "2z5e3w", styles: "" },
-            only: { name: "1j8h1o", styles: "" }
+            start: { name: "27587i", styles: "" },
+            end: { name: "339kb7", styles: "" },
+            only: { name: "7hs9s", styles: "" }
         }
     },
     compound: [
         {
             modifiers: { position: 'end', isExpanded: false },
-            styles: { name: "42thb7", styles: "margin-inline-start:auto;transform:rotate(180deg);padding-inline-end:var(--cnvs-sys-space-x3);" }
+            styles: { name: "41521a", styles: "margin-inline-start:auto;transform:rotate(180deg);padding-inline-end:var(--cnvs-sys-space-x3);" }
         },
         {
             modifiers: { position: 'end', isExpanded: true },
-            styles: { name: "1jc6dt", styles: "margin-inline-start:auto;padding-inline-start:var(--cnvs-sys-space-x3);" }
+            styles: { name: "2awvw1", styles: "margin-inline-start:auto;padding-inline-start:var(--cnvs-sys-space-x3);" }
         },
         {
             modifiers: { position: 'start', isExpanded: false },
-            styles: { name: "2rq6nw", styles: "margin-inline-end:var(--cnvs-sys-space-x2);transform:rotate(90deg);:dir(rtl){transform:rotate(-90deg);}" }
+            styles: { name: "3ufcq3", styles: "margin-inline-end:var(--cnvs-sys-space-x2);transform:rotate(90deg);:dir(rtl){transform:rotate(-90deg);}" }
         },
         {
             modifiers: { position: 'start', isExpanded: true },
-            styles: { name: "1gkd6s", styles: "margin-inline-end:var(--cnvs-sys-space-x2);transform:rotate(180deg);" }
+            styles: { name: "2jd769", styles: "margin-inline-end:var(--cnvs-sys-space-x2);transform:rotate(180deg);" }
         }
     ]
 }, "expandable-icon-a75423");

package/dist/es6/expandable/lib/ExpandableTarget.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExpandableTarget.d.ts","sourceRoot":"","sources":["../../../../expandable/lib/ExpandableTarget.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAqB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAClF,OAAO,EAAC,IAAI,EAAc,MAAM,kCAAkC,CAAC;AAOnE,MAAM,WAAW,qBAAsB,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC;IAC7E;;;;;OAKG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,YAAY,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CACxD;AAED,eAAO,MAAM,uBAAuB,iJAoBlC,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;;;;;;;EAe3B,CAAC"}
+{"version":3,"file":"ExpandableTarget.d.ts","sourceRoot":"","sources":["../../../../expandable/lib/ExpandableTarget.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAqB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAClF,OAAO,EAAC,IAAI,EAAc,MAAM,kCAAkC,CAAC;AAOnE,MAAM,WAAW,qBAAsB,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC;IAC7E;;;;;OAKG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,YAAY,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CACxD;AAED,eAAO,MAAM,uBAAuB,iJAqBlC,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;;;;;;;EAe3B,CAAC"}

package/dist/es6/expandable/lib/ExpandableTarget.js

@@ -7,7 +7,7 @@ import { brand, system } from '@workday/canvas-tokens-web';
 import { useExpandableTarget } from './hooks/useExpandableTarget';
 import { useExpandableModel } from './hooks/useExpandableModel';
 export const expandableTargetStencil = createStencil({
-    base: { name: "17ybbn", styles: "box-sizing:border-box;background:var(--cnvs-sys-color-bg-transparent-default);border-color:var(--cnvs-sys-color-bg-transparent-default);border-radius:var(--cnvs-sys-shape-x1);border-width:0;display:flex;align-items:flex-start;flex-direction:row;justify-content:start;padding:var(--cnvs-sys-space-x2);cursor:pointer;width:100%;&:hover, &.hover{background-color:var(--cnvs-sys-color-bg-alt-soft);}&:focus-visible, &.focus{outline:var(--cnvs-brand-common-focus-outline) solid 0.125rem;}" }
+    base: { name: "1htzb3", styles: "box-sizing:border-box;background:var(--cnvs-sys-color-bg-transparent-default);border-color:var(--cnvs-sys-color-bg-transparent-default);border-radius:var(--cnvs-sys-shape-x1);border-width:0;display:flex;align-items:center;flex-direction:row;gap:var(--cnvs-sys-space-x2);justify-content:start;padding:var(--cnvs-sys-space-x2);cursor:pointer;width:100%;&:hover, &.hover{background-color:var(--cnvs-sys-color-bg-alt-soft);}&:focus-visible, &.focus{outline:var(--cnvs-brand-common-focus-outline) solid 0.125rem;}" }
 }, "expandable-target-89840f");
 export const ExpandableTarget = createSubcomponent('button')({
     modelHook: useExpandableModel,

package/dist/es6/expandable/lib/ExpandableTitle.js

@@ -4,7 +4,7 @@ import { mergeStyles } from '@workday/canvas-kit-react/layout';
 import { system } from '@workday/canvas-tokens-web';
 import { createStencil, px2rem } from '@workday/canvas-kit-styling';
 export const expandableTitleStencil = createStencil({
-    base: { name: "2nrhfy", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-body-medium);font-size:var(--cnvs-sys-font-size-body-medium);color:var(--cnvs-sys-color-text-strong);padding:0.125rem var(--cnvs-sys-space-zero);text-align:left;" }
+    base: { name: "gn95t", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-body-medium);font-size:var(--cnvs-sys-font-size-body-medium);color:var(--cnvs-sys-color-text-strong);padding:0.125rem var(--cnvs-sys-space-zero);text-align:left;" }
 }, "expandable-title-afdcf8");
 export const ExpandableTitle = createComponent('div')({
     displayName: 'Expandable.Title',

package/dist/es6/form-field/lib/FormFieldContainer.js

@@ -7,7 +7,7 @@ import { system } from '@workday/canvas-tokens-web';
  * @deprecated `formFieldContainerStencil` is deprecated and will be removed in a future major version. Please use `FormField.Field` to always wrap `FormField.Input` and `FormField.Hint` to always ensure correct label and input alignment.
  */
 export const formFieldContainerStencil = createStencil({
-    base: { name: "42gydo", styles: "box-sizing:border-box;display:flex;flex-direction:column;gap:var(--cnvs-sys-space-x2);" }
+    base: { name: "2e6tla", styles: "box-sizing:border-box;display:flex;flex-direction:column;gap:var(--cnvs-sys-space-x2);" }
 }, "form-field-container-6a4115");
 /**
  * @deprecated `FormField.Container` is deprecated and will be removed in a future major version. Please use `FormField.Field` to always wrap `FormField.Input` and `FormField.Hint` to always ensure correct label and input alignment.

package/dist/es6/form-field/lib/FormFieldField.js

@@ -4,7 +4,7 @@ import { handleCsProp, createStencil } from '@workday/canvas-kit-styling';
 import { useFormFieldModel } from './hooks';
 import { system } from '@workday/canvas-tokens-web';
 export const formFieldFieldStencil = createStencil({
-    base: { name: "1q091r", styles: "box-sizing:border-box;display:flex;flex-direction:column;gap:var(--cnvs-sys-space-x2);" }
+    base: { name: "196he5", styles: "box-sizing:border-box;display:flex;flex-direction:column;gap:var(--cnvs-sys-space-x2);" }
 }, "form-field-field-a35e82");
 export const FormFieldField = createSubcomponent('div')({
     displayName: 'FormField.Field',

package/dist/es6/form-field/lib/FormFieldGroupLabel.d.ts

@@ -8,7 +8,35 @@ export interface FormFieldGroupLabelProps extends FlexProps, Omit<ExtractProps<t
      */
     children: React.ReactNode;
 }
-export declare const formFieldGroupLabelStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, never>, {}, {}, import("@workday/canvas-kit-styling").Stencil<{
+export declare const formFieldGroupLabelStencil: import("@workday/canvas-kit-styling").Stencil<{
+    isRequired: {
+        true: {
+            '&::after': {
+                content: string;
+                fontSize: "--cnvs-sys-font-size-body-large";
+                fontWeight: "--cnvs-sys-font-weight-normal";
+                color: "--cnvs-brand-error-base";
+                textDecoration: string;
+                marginInlineStart: "--cnvs-sys-space-x1";
+            };
+        };
+    };
+    orientation: {
+        vertical: {
+            width: string;
+        };
+        horizontalStart: {
+            justifyContent: string;
+            float: string;
+            maxHeight: "--cnvs-sys-space-x10";
+        };
+        horizontalEnd: {
+            maxHeight: "--cnvs-sys-space-x10";
+            float: string;
+            justifyContent: string;
+        };
+    };
+}, {}, {}, import("@workday/canvas-kit-styling").Stencil<{
     typeLevel: {
         'title.large': {
             color: "--cnvs-sys-color-text-strong";

package/dist/es6/form-field/lib/FormFieldGroupLabel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormFieldGroupLabel.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldGroupLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAqB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAElF,OAAO,EAAC,IAAI,EAAc,MAAM,gCAAgC,CAAC;AACjE,OAAO,EAAC,SAAS,EAAc,MAAM,kCAAkC,CAAC;AAIxE,MAAM,WAAW,wBACf,SAAQ,SAAS,EACf,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,EAAE,SAAS,CAAC;IACnD;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCA4CrC,CAAC;AAEH,eAAO,MAAM,mBAAmB;;;;;;;;EAoB9B,CAAC"}
+{"version":3,"file":"FormFieldGroupLabel.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldGroupLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAqB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAElF,OAAO,EAAC,IAAI,EAAc,MAAM,gCAAgC,CAAC;AACjE,OAAO,EAAC,SAAS,EAAc,MAAM,kCAAkC,CAAC;AAIxE,MAAM,WAAW,wBACf,SAAQ,SAAS,EACf,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,EAAE,SAAS,CAAC;IACnD;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCA0CrC,CAAC;AAEH,eAAO,MAAM,mBAAmB;;;;;;;;EAoB9B,CAAC"}

package/dist/es6/form-field/lib/FormFieldGroupLabel.js

@@ -7,16 +7,15 @@ import { brand, system } from '@workday/canvas-tokens-web';
 import { useFormFieldModel } from './hooks';
 export const formFieldGroupLabelStencil = createStencil({
     extends: textStencil,
-    // @ts-ignore Still weird about CSS font variables
-    base: { name: "1c623y", styles: "box-sizing:border-box;font-weight:var(--cnvs-sys-font-weight-medium);color:var(--cnvs-sys-color-text-default);padding-inline-start:var(--cnvs-sys-space-zero);display:flex;align-items:center;min-width:11.25rem;" },
+    base: { name: "3rnfi9", styles: "box-sizing:border-box;font-weight:var(--cnvs-sys-font-weight-medium);color:var(--cnvs-sys-color-text-default);padding-inline-start:var(--cnvs-sys-space-zero);display:flex;align-items:center;min-width:11.25rem;" },
     modifiers: {
         isRequired: {
-            true: { name: "t7ih5", styles: "&::after{content:\"*\";font-size:var(--cnvs-sys-font-size-body-large);font-weight:var(--cnvs-sys-font-weight-normal);color:var(--cnvs-brand-error-base);text-decoration:unset;margin-inline-start:var(--cnvs-sys-space-x1);}" }
+            true: { name: "3lk0ln", styles: "&::after{content:\"*\";font-size:var(--cnvs-sys-font-size-body-large);font-weight:var(--cnvs-sys-font-weight-normal);color:var(--cnvs-brand-error-base);text-decoration:unset;margin-inline-start:var(--cnvs-sys-space-x1);}" }
         },
         orientation: {
-            vertical: { name: "32n1wk", styles: "width:100%;" },
-            horizontalStart: { name: "1z4lf2", styles: "justify-content:flex-start;float:left;max-height:var(--cnvs-sys-space-x10);" },
-            horizontalEnd: { name: "3svbm5", styles: "max-height:var(--cnvs-sys-space-x10);float:left;justify-content:flex-end;" }
+            vertical: { name: "44m0kh", styles: "width:100%;" },
+            horizontalStart: { name: "24mtno", styles: "justify-content:flex-start;float:left;max-height:var(--cnvs-sys-space-x10);" },
+            horizontalEnd: { name: "12ov27", styles: "max-height:var(--cnvs-sys-space-x10);float:left;justify-content:flex-end;" }
         }
     },
     defaultModifiers: {

package/dist/es6/form-field/lib/FormFieldGroupList.js

@@ -4,11 +4,11 @@ import { createStencil, calc, px2rem, handleCsProp } from '@workday/canvas-kit-s
 import { brand, system } from '@workday/canvas-tokens-web';
 import { useFormFieldModel } from './hooks';
 const formFieldGroupListStencil = createStencil({
-    base: { name: "yzvke", styles: "box-sizing:border-box;display:flex;flex-direction:column;border-radius:var(--cnvs-sys-shape-x1-half);gap:var(--cnvs-sys-space-x2);padding:0.625rem var(--cnvs-sys-space-x3) var(--cnvs-sys-space-x2);margin:0 calc(var(--cnvs-sys-space-x3) * -1);transition:100ms box-shadow;width:fit-content;" },
+    base: { name: "3e658f", styles: "box-sizing:border-box;display:flex;flex-direction:column;border-radius:var(--cnvs-sys-shape-x1-half);gap:var(--cnvs-sys-space-x2);padding:0.625rem var(--cnvs-sys-space-x3) var(--cnvs-sys-space-x2);margin:0 calc(var(--cnvs-sys-space-x3) * -1);transition:100ms box-shadow;width:fit-content;" },
     modifiers: {
         error: {
-            error: { name: "2yydnm", styles: "background-color:var(--cnvs-brand-error-lightest);box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-common-error-inner);" },
-            caution: { name: "476kge", styles: "background-color:var(--cnvs-brand-alert-lightest);box-shadow:inset 0 0 0 0.0625rem var(--cnvs-brand-common-alert-outer), inset 0 0 0 0.1875rem var(--cnvs-brand-common-alert-inner);" }
+            error: { name: "2did8q", styles: "background-color:var(--cnvs-brand-error-lightest);box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-common-error-inner);" },
+            caution: { name: "394l85", styles: "background-color:var(--cnvs-brand-alert-lightest);box-shadow:inset 0 0 0 0.0625rem var(--cnvs-brand-common-alert-outer), inset 0 0 0 0.1875rem var(--cnvs-brand-common-alert-inner);" }
         }
     }
 }, "form-field-group-list-9f0751");

package/dist/es6/form-field/lib/FormFieldHint.js

@@ -7,11 +7,11 @@ import { mergeStyles } from '@workday/canvas-kit-react/layout';
 import { useFormFieldHint, useFormFieldModel } from './hooks';
 export const formFieldHintStencil = createStencil({
     extends: textStencil,
-    base: { name: "29px2v", styles: "box-sizing:border-box;margin:var(--cnvs-sys-space-zero);" },
+    base: { name: "w9rwo", styles: "box-sizing:border-box;margin:var(--cnvs-sys-space-zero);" },
     modifiers: {
         error: {
-            error: { name: "3fnxnx", styles: "color:var(--cnvs-brand-error-base);" },
-            caution: { name: "138w19", styles: "color:var(--cnvs-sys-color-text-caution-default);" }
+            error: { name: "1a7dcj", styles: "color:var(--cnvs-brand-error-base);" },
+            caution: { name: "3955ff", styles: "color:var(--cnvs-sys-color-text-caution-default);" }
         }
     },
     defaultModifiers: {

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

@@ -12,7 +12,51 @@ export interface FormFieldLabelProps extends FlexProps, Omit<ExtractProps<typeof
      */
     isHidden?: boolean;
 }
-export declare const formFieldLabelStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, never>, {}, {}, import("@workday/canvas-kit-styling").Stencil<{
+export declare const formFieldLabelStencil: import("@workday/canvas-kit-styling").Stencil<{
+    isRequired: {
+        true: {
+            '&::after': {
+                content: string;
+                fontSize: "--cnvs-sys-font-size-body-large";
+                fontWeight: "--cnvs-sys-font-weight-normal";
+                color: "--cnvs-brand-error-base";
+                textDecoration: string;
+                marginInlineStart: "--cnvs-sys-space-x1";
+            };
+        };
+    };
+    orientation: {
+        horizontalStart: {
+            justifyContent: string;
+            float: string;
+            maxHeight: "--cnvs-sys-space-x10";
+        };
+        horizontalEnd: {
+            maxHeight: "--cnvs-sys-space-x10";
+            float: string;
+            justifyContent: string;
+        };
+        vertical: {
+            width: string;
+        };
+    };
+    isHidden: {
+        true: {
+            clip: "rect(1px, 1px, 1px, 1px)";
+            clipPath: "polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px)";
+            position: "absolute";
+            overflow: "hidden";
+            whiteSpace: "nowrap";
+            height: "1px";
+            minHeight: "1px";
+            width: "1px";
+            minWidth: "1px";
+            margin: "-1px";
+            padding: 0;
+            border: 0;
+        };
+    };
+}, {}, {}, import("@workday/canvas-kit-styling").Stencil<{
     typeLevel: {
         'title.large': {
             color: "--cnvs-sys-color-text-strong";

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

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

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

@@ -7,19 +7,18 @@ import { brand, system } from '@workday/canvas-tokens-web';
 import { useFormFieldLabel, useFormFieldModel } from './hooks';
 export const formFieldLabelStencil = createStencil({
     extends: textStencil,
-    // @ts-ignore Still weird about CSS font variables
-    base: { name: "474qsv", styles: "box-sizing:border-box;font-weight:var(--cnvs-sys-font-weight-medium);color:var(--cnvs-sys-color-text-default);padding-inline-start:var(--cnvs-sys-space-zero);display:flex;align-items:center;min-width:11.25rem;" },
+    base: { name: "2o1qdt", styles: "box-sizing:border-box;font-weight:var(--cnvs-sys-font-weight-medium);color:var(--cnvs-sys-color-text-default);padding-inline-start:var(--cnvs-sys-space-zero);display:flex;align-items:center;min-width:11.25rem;" },
     modifiers: {
         isRequired: {
-            true: { name: "4e12ja", styles: "&::after{content:\"*\";font-size:var(--cnvs-sys-font-size-body-large);font-weight:var(--cnvs-sys-font-weight-normal);color:var(--cnvs-brand-error-base);text-decoration:unset;margin-inline-start:var(--cnvs-sys-space-x1);}" }
+            true: { name: "3vzsk0", styles: "&::after{content:\"*\";font-size:var(--cnvs-sys-font-size-body-large);font-weight:var(--cnvs-sys-font-weight-normal);color:var(--cnvs-brand-error-base);text-decoration:unset;margin-inline-start:var(--cnvs-sys-space-x1);}" }
         },
         orientation: {
-            horizontalStart: { name: "3a2lk6", styles: "justify-content:flex-start;float:left;max-height:var(--cnvs-sys-space-x10);" },
-            horizontalEnd: { name: "2mjawd", styles: "max-height:var(--cnvs-sys-space-x10);float:left;justify-content:flex-end;" },
-            vertical: { name: "1r45qv", styles: "width:100%;" }
+            horizontalStart: { name: "idhd0", styles: "justify-content:flex-start;float:left;max-height:var(--cnvs-sys-space-x10);" },
+            horizontalEnd: { name: "2i0ar1", styles: "max-height:var(--cnvs-sys-space-x10);float:left;justify-content:flex-end;" },
+            vertical: { name: "kuvd5", styles: "width:100%;" }
         },
         isHidden: {
-            true: { name: "30mniu", styles: "clip:rect(1px, 1px, 1px, 1px);clip-path:polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);position:absolute;overflow:hidden;white-space:nowrap;height:1px;min-height:1px;width:1px;min-width:1px;margin:-1px;padding:0;border:0;" }
+            true: { name: "29pl1m", styles: "clip:rect(1px, 1px, 1px, 1px);clip-path:polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);position:absolute;overflow:hidden;white-space:nowrap;height:1px;min-height:1px;width:1px;min-width:1px;margin:-1px;padding:0;border:0;" }
         }
     },
     defaultModifiers: {

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

@@ -12,17 +12,17 @@ export declare const formFieldStencil: import("@workday/canvas-kit-styling").Ste
     };
     orientation: {
         horizontalStart: {
-            flexDirection: "row";
+            flexDirection: string;
             gap: "--cnvs-sys-space-x8";
         };
         horizontalEnd: {
-            flexDirection: "row";
+            flexDirection: string;
             gap: "--cnvs-sys-space-x8";
         };
         vertical: {
-            flexDirection: "column";
+            flexDirection: string;
             gap: "--cnvs-sys-space-x1";
-            alignItems: "flex-start";
+            alignItems: string;
         };
     };
     required: {

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

@@ -1,22 +1,22 @@
 import { createStencil } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
 export const formFieldStencil = createStencil({
-    base: { name: "nki05", styles: "box-sizing:border-box;display:flex;border:none;padding:var(--cnvs-sys-space-zero);margin:var(--cnvs-sys-space-zero) var(--cnvs-sys-space-zero) var(--cnvs-sys-space-x6);" },
+    base: { name: "11g3c", styles: "box-sizing:border-box;display:flex;border:none;padding:var(--cnvs-sys-space-zero);margin:var(--cnvs-sys-space-zero) var(--cnvs-sys-space-zero) var(--cnvs-sys-space-x6);" },
     modifiers: {
         grow: {
-            true: { name: "7jhrl", styles: "width:100%;[data-width=\"ck-formfield-width\"]{width:100%;}&:has(div[data-width=\"ck-formfield-width\"]){width:100%;}" }
+            true: { name: "28ow8d", styles: "width:100%;[data-width=\"ck-formfield-width\"]{width:100%;}&:has(div[data-width=\"ck-formfield-width\"]){width:100%;}" }
         },
         orientation: {
-            horizontalStart: { name: "11hypl", styles: "flex-direction:row;gap:var(--cnvs-sys-space-x8);" },
-            horizontalEnd: { name: "15sfkv", styles: "flex-direction:row;gap:var(--cnvs-sys-space-x8);" },
-            vertical: { name: "2gdsrh", styles: "flex-direction:column;gap:var(--cnvs-sys-space-x1);align-items:flex-start;" }
+            horizontalStart: { name: "3ebuwx", styles: "flex-direction:row;gap:var(--cnvs-sys-space-x8);" },
+            horizontalEnd: { name: "294ifv", styles: "flex-direction:row;gap:var(--cnvs-sys-space-x8);" },
+            vertical: { name: "33a9wn", styles: "flex-direction:column;gap:var(--cnvs-sys-space-x1);align-items:flex-start;" }
         },
         required: {
-            true: { name: "3f0g3h", styles: "" }
+            true: { name: "zmq8a", styles: "" }
         },
         error: {
-            error: { name: "p8w2d", styles: "" },
-            caution: { name: "1ompzf", styles: "" }
+            error: { name: "2jwklu", styles: "" },
+            caution: { name: "2v5xl3", styles: "" }
         }
     },
     defaultModifiers: {