@workday/canvas-kit-react 13.2.25 → 13.2.26

package/dist/commonjs/common/lib/utils/components.js

@@ -8,6 +8,7 @@ const react_1 = __importDefault(require("react"));
 const assert_1 = require("./assert");
 const memoize_1 = require("./memoize");
 const mergeProps_1 = require("./mergeProps");
+const insights_1 = require("./insights");
 function defaultGetElemProps(input) {
     return input;
 }
@@ -100,7 +101,10 @@ exports.createSubcomponent = createSubcomponent;
  */
 const createComponent = (as) => ({ displayName, Component, subComponents, }) => {
     const ReturnedComponent = react_1.default.forwardRef(({ as: asOverride, ...props }, ref) => {
-        return Component(props, ref, 
+        return Component({
+            ...(0, insights_1.setCanvasKitTags)(displayName),
+            ...props,
+        }, ref, 
         // Cast to `any` to avoid: "ts(2345): Type 'undefined' is not assignable to type 'E extends
         // undefined ? never : E'" I'm not sure I can actually cast to this conditional type and it
         // doesn't actually matter, so cast to `any` it is.

package/dist/commonjs/common/lib/utils/insights.d.ts

@@ -0,0 +1,12 @@
+/**
+ * This function returns data attributes for tagging
+ * We use this to track when and where our components render. It also allows us to see what version is rendering.
+ */
+export declare function setCanvasKitTags(displayName?: string): {
+    "data-uxi-canvas-kit-version": string;
+    "data-uxi-canvas-kit-component-type": string;
+} | {
+    "data-uxi-canvas-kit-version": undefined;
+    "data-uxi-canvas-kit-component-type": undefined;
+};
+//# sourceMappingURL=insights.d.ts.map

package/dist/commonjs/common/lib/utils/insights.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"insights.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/insights.ts"],"names":[],"mappings":"AAQA;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,WAAW,SAAK;;;;;;EAgBhD"}

package/dist/commonjs/common/lib/utils/insights.js

@@ -0,0 +1,28 @@
+"use strict";
+/// <reference types="@types/node" />
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setCanvasKitTags = void 0;
+const version_1 = require("@workday/canvas-kit-react/version");
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+// Only add the major version tag for development and test environments
+const versionTag = process.env.NODE_ENV === 'production' ? version_1.version : version_1.version.split('.')[0];
+/**
+ * This function returns data attributes for tagging
+ * We use this to track when and where our components render. It also allows us to see what version is rendering.
+ */
+function setCanvasKitTags(displayName = '') {
+    // Do not add tags for subcomponents. E.g. Card.Text
+    const shouldAddTag = displayName.length && !displayName.includes('.');
+    if (shouldAddTag) {
+        return {
+            ['data-uxi-canvas-kit-version']: versionTag,
+            ['data-uxi-canvas-kit-component-type']: (0, canvas_kit_styling_1.slugify)(displayName),
+        };
+    }
+    // We need to explictily pass these attributes with `undefined` so they will be removed from the DOM.
+    return {
+        ['data-uxi-canvas-kit-version']: undefined,
+        ['data-uxi-canvas-kit-component-type']: undefined,
+    };
+}
+exports.setCanvasKitTags = setCanvasKitTags;

package/dist/commonjs/expandable/lib/Expandable.js

@@ -13,7 +13,7 @@ const useExpandableModel_1 = require("./hooks/useExpandableModel");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 exports.expandableContainerStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "38505n", styles: "box-sizing:border-box;display:flex;flex-direction:column;padding:var(--cnvs-sys-space-x2);" }
+    base: { name: "1pukg0", styles: "box-sizing:border-box;display:flex;flex-direction:column;padding:var(--cnvs-sys-space-x2);" }
 }, "expandable-container-f664d5");
 /**
  * `Expandable` wraps an `Expandable.Target` and an `Expandable.Content`. By default, it provides a

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

@@ -4,7 +4,7 @@ export interface ExpandableAvatarProps extends AvatarProps {
 export declare const expandableAvatarStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, never>, {}, {}, import("@workday/canvas-kit-styling").Stencil<{
     variant: {
         light: ({ iconPart }: {
-            size: string;
+            size: `--${string}`;
         } & import("@workday/canvas-kit-styling").StencilVarsParts<{
             readonly icon: "avatar-icon";
             readonly image: "avatar-image";
@@ -15,7 +15,7 @@ export declare const expandableAvatarStencil: import("@workday/canvas-kit-stylin
             };
         };
         dark: ({ iconPart }: {
-            size: string;
+            size: `--${string}`;
         } & import("@workday/canvas-kit-styling").StencilVarsParts<{
             readonly icon: "avatar-icon";
             readonly image: "avatar-image";
@@ -28,7 +28,7 @@ export declare const expandableAvatarStencil: import("@workday/canvas-kit-stylin
     };
     size: {
         extraSmall: ({ iconPart }: {
-            size: string;
+            size: `--${string}`;
         } & import("@workday/canvas-kit-styling").StencilVarsParts<{
             readonly icon: "avatar-icon";
             readonly image: "avatar-image";
@@ -40,7 +40,7 @@ export declare const expandableAvatarStencil: import("@workday/canvas-kit-stylin
             };
         };
         small: ({ iconPart }: {
-            size: string;
+            size: `--${string}`;
         } & import("@workday/canvas-kit-styling").StencilVarsParts<{
             readonly icon: "avatar-icon";
             readonly image: "avatar-image";
@@ -52,7 +52,7 @@ export declare const expandableAvatarStencil: import("@workday/canvas-kit-stylin
             };
         };
         medium: ({ iconPart }: {
-            size: string;
+            size: `--${string}`;
         } & import("@workday/canvas-kit-styling").StencilVarsParts<{
             readonly icon: "avatar-icon";
             readonly image: "avatar-image";
@@ -64,7 +64,7 @@ export declare const expandableAvatarStencil: import("@workday/canvas-kit-stylin
             };
         };
         large: ({ iconPart }: {
-            size: string;
+            size: `--${string}`;
         } & import("@workday/canvas-kit-styling").StencilVarsParts<{
             readonly icon: "avatar-icon";
             readonly image: "avatar-image";
@@ -76,7 +76,7 @@ export declare const expandableAvatarStencil: import("@workday/canvas-kit-stylin
             };
         };
         extraLarge: ({ iconPart }: {
-            size: string;
+            size: `--${string}`;
         } & import("@workday/canvas-kit-styling").StencilVarsParts<{
             readonly icon: "avatar-icon";
             readonly image: "avatar-image";
@@ -88,7 +88,7 @@ export declare const expandableAvatarStencil: import("@workday/canvas-kit-stylin
             };
         };
         extraExtraLarge: ({ iconPart }: {
-            size: string;
+            size: `--${string}`;
         } & import("@workday/canvas-kit-styling").StencilVarsParts<{
             readonly icon: "avatar-icon";
             readonly image: "avatar-image";
@@ -102,109 +102,109 @@ export declare const expandableAvatarStencil: import("@workday/canvas-kit-stylin
     };
     objectFit: {
         contain: ({ imagePart }: {
-            size: string;
+            size: `--${string}`;
         } & import("@workday/canvas-kit-styling").StencilVarsParts<{
             readonly icon: "avatar-icon";
             readonly image: "avatar-image";
         }>) => {
             "[data-part=\"avatar-image\"]": {
-                objectFit: "contain";
+                objectFit: string;
             };
         };
         fill: ({ imagePart }: {
-            size: string;
+            size: `--${string}`;
         } & import("@workday/canvas-kit-styling").StencilVarsParts<{
             readonly icon: "avatar-icon";
             readonly image: "avatar-image";
         }>) => {
             "[data-part=\"avatar-image\"]": {
-                objectFit: "fill";
+                objectFit: string;
             };
         };
         cover: ({ imagePart }: {
-            size: string;
+            size: `--${string}`;
         } & import("@workday/canvas-kit-styling").StencilVarsParts<{
             readonly icon: "avatar-icon";
             readonly image: "avatar-image";
         }>) => {
             "[data-part=\"avatar-image\"]": {
-                objectFit: "cover";
+                objectFit: string;
             };
         };
         "scale-down": ({ imagePart }: {
-            size: string;
+            size: `--${string}`;
         } & import("@workday/canvas-kit-styling").StencilVarsParts<{
             readonly icon: "avatar-icon";
             readonly image: "avatar-image";
         }>) => {
             "[data-part=\"avatar-image\"]": {
-                objectFit: "scale-down";
+                objectFit: string;
             };
         };
         none: ({ imagePart }: {
-            size: string;
+            size: `--${string}`;
         } & import("@workday/canvas-kit-styling").StencilVarsParts<{
             readonly icon: "avatar-icon";
             readonly image: "avatar-image";
         }>) => {
             "[data-part=\"avatar-image\"]": {
-                objectFit: "none";
+                objectFit: string;
             };
         };
         "-moz-initial": ({ imagePart }: {
-            size: string;
+            size: `--${string}`;
         } & import("@workday/canvas-kit-styling").StencilVarsParts<{
             readonly icon: "avatar-icon";
             readonly image: "avatar-image";
         }>) => {
             "[data-part=\"avatar-image\"]": {
-                objectFit: "-moz-initial";
+                objectFit: string;
             };
         };
         initial: ({ imagePart }: {
-            size: string;
+            size: `--${string}`;
         } & import("@workday/canvas-kit-styling").StencilVarsParts<{
             readonly icon: "avatar-icon";
             readonly image: "avatar-image";
         }>) => {
             "[data-part=\"avatar-image\"]": {
-                objectFit: "initial";
+                objectFit: string;
             };
         };
         inherit: ({ imagePart }: {
-            size: string;
+            size: `--${string}`;
         } & import("@workday/canvas-kit-styling").StencilVarsParts<{
             readonly icon: "avatar-icon";
             readonly image: "avatar-image";
         }>) => {
             "[data-part=\"avatar-image\"]": {
-                objectFit: "inherit";
+                objectFit: string;
             };
         };
         revert: ({ imagePart }: {
-            size: string;
+            size: `--${string}`;
         } & import("@workday/canvas-kit-styling").StencilVarsParts<{
             readonly icon: "avatar-icon";
             readonly image: "avatar-image";
         }>) => {
             "[data-part=\"avatar-image\"]": {
-                objectFit: "revert";
+                objectFit: string;
             };
         };
         unset: ({ imagePart }: {
-            size: string;
+            size: `--${string}`;
         } & import("@workday/canvas-kit-styling").StencilVarsParts<{
             readonly icon: "avatar-icon";
             readonly image: "avatar-image";
         }>) => {
             "[data-part=\"avatar-image\"]": {
-                objectFit: "unset";
+                objectFit: string;
             };
         };
     };
     isImageLoaded: {
         true: ({ iconPart, imagePart }: {
-            size: string;
+            size: `--${string}`;
         } & import("@workday/canvas-kit-styling").StencilVarsParts<{
             readonly icon: "avatar-icon";
             readonly image: "avatar-image";

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

@@ -9,7 +9,7 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const layout_1 = require("@workday/canvas-kit-react/layout");
 exports.expandableAvatarStencil = (0, canvas_kit_styling_1.createStencil)({
     extends: avatar_1.avatarStencil,
-    base: { name: "371rkg", styles: "box-sizing:border-box;margin-inline-end:var(--cnvs-sys-space-x2);flex-shrink:0;" }
+    base: { name: "2tc2ut", styles: "box-sizing:border-box;margin-inline-end:var(--cnvs-sys-space-x2);flex-shrink:0;" }
 }, "expandable-avatar-d56832");
 // 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`

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

@@ -9,7 +9,7 @@ const useExpandableModel_1 = require("./hooks/useExpandableModel");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 exports.expandableContentStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "2km6d0", styles: "box-sizing:border-box;background:var(--cnvs-sys-color-bg-transparent);padding:var(--cnvs-sys-space-x4) var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x2);" }
+    base: { name: "38b4h1", styles: "box-sizing:border-box;background:var(--cnvs-sys-color-bg-transparent);padding:var(--cnvs-sys-space-x4) var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x2);" }
 }, "expandable-content-25e157");
 exports.ExpandableContent = (0, common_1.createSubcomponent)('div')({
     modelHook: useExpandableModel_1.useExpandableModel,

package/dist/commonjs/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/commonjs/expandable/lib/ExpandableIcon.js

@@ -12,34 +12,34 @@ const layout_1 = require("@workday/canvas-kit-react/layout");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 exports.expandableIconStencil = (0, canvas_kit_styling_1.createStencil)({
     extends: icon_1.systemIconStencil,
-    base: { name: "405z6m", styles: "box-sizing:border-box;padding:var(--cnvs-sys-space-x1);" },
+    base: { name: "1e1nd3", styles: "box-sizing:border-box;padding:var(--cnvs-sys-space-x1);" },
     modifiers: {
         isExpanded: {
-            true: { name: "izrah", styles: "" },
-            false: { name: "15kj8y", styles: "" }
+            true: { name: "3ojo5x", styles: "" },
+            false: { name: "2qoqei", styles: "" }
         },
         position: {
-            start: { name: "49hbni", styles: "" },
-            end: { name: "2z5e3w", styles: "" },
-            only: { name: "1j8h1o", styles: "" }
+            start: { name: "1p6669", styles: "" },
+            end: { name: "15eiic", styles: "" },
+            only: { name: "1rw8zf", 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: "2r5ndj", 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: "2fnyyr", 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: "1kl9u9", 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: "s2o34", styles: "margin-inline-end:var(--cnvs-sys-space-x2);transform:rotate(180deg);" }
         }
     ]
 }, "expandable-icon-a75423");

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

@@ -10,7 +10,7 @@ const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const useExpandableTarget_1 = require("./hooks/useExpandableTarget");
 const useExpandableModel_1 = require("./hooks/useExpandableModel");
 exports.expandableTargetStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "2fdtqi", styles: "box-sizing:border-box;background:var(--cnvs-sys-color-bg-transparent);border-color:var(--cnvs-sys-color-bg-transparent);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-default);}" }
+    base: { name: "3ug3kb", styles: "box-sizing:border-box;background:var(--cnvs-sys-color-bg-transparent);border-color:var(--cnvs-sys-color-bg-transparent);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-default);}" }
 }, "expandable-target-23cf82");
 exports.ExpandableTarget = (0, common_1.createSubcomponent)('button')({
     modelHook: useExpandableModel_1.useExpandableModel,

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

@@ -7,7 +7,7 @@ const layout_1 = require("@workday/canvas-kit-react/layout");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 exports.expandableTitleStencil = (0, canvas_kit_styling_1.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: "2a9nbd", 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");
 exports.ExpandableTitle = (0, common_1.createComponent)('div')({
     displayName: 'Expandable.Title',

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

@@ -10,7 +10,7 @@ const canvas_tokens_web_1 = require("@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.
  */
 exports.formFieldContainerStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "42gydo", styles: "box-sizing:border-box;display:flex;flex-direction:column;gap:var(--cnvs-sys-space-x2);" }
+    base: { name: "27xuk", 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/commonjs/form-field/lib/FormFieldField.js

@@ -7,7 +7,7 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const hooks_1 = require("./hooks");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 exports.formFieldFieldStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "1q091r", styles: "box-sizing:border-box;display:flex;flex-direction:column;gap:var(--cnvs-sys-space-x2);" }
+    base: { name: "h86tq", styles: "box-sizing:border-box;display:flex;flex-direction:column;gap:var(--cnvs-sys-space-x2);" }
 }, "form-field-field-a35e82");
 exports.FormFieldField = (0, common_1.createSubcomponent)('div')({
     displayName: 'FormField.Field',

package/dist/commonjs/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/commonjs/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/commonjs/form-field/lib/FormFieldGroupLabel.js

@@ -10,16 +10,15 @@ const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const hooks_1 = require("./hooks");
 exports.formFieldGroupLabelStencil = (0, canvas_kit_styling_1.createStencil)({
     extends: text_1.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: "2n704y", 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: "3wwlmb", 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: "3pszdg", styles: "width:100%;" },
+            horizontalStart: { name: "4cy437", styles: "justify-content:flex-start;float:left;max-height:var(--cnvs-sys-space-x10);" },
+            horizontalEnd: { name: "3kemr3", styles: "max-height:var(--cnvs-sys-space-x10);float:left;justify-content:flex-end;" }
         }
     },
     defaultModifiers: {

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

@@ -7,11 +7,11 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const hooks_1 = require("./hooks");
 const formFieldGroupListStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "2bcc16", styles: "box-sizing:border-box;display:flex;flex-direction:column;border-radius:var(--cnvs-sys-shape-x1);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: "9k0ic", styles: "box-sizing:border-box;display:flex;flex-direction:column;border-radius:var(--cnvs-sys-shape-x1);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: "j4k6x", styles: "box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-error-base);" },
-            alert: { name: "2z4nh7", styles: "box-shadow:inset 0 0 0 0.0625rem var(--cnvs-brand-alert-darkest), inset 0 0 0 0.1875rem var(--cnvs-brand-alert-base);" }
+            error: { name: "egh3l", styles: "box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-error-base);" },
+            alert: { name: "15zdjw", styles: "box-shadow:inset 0 0 0 0.0625rem var(--cnvs-brand-alert-darkest), inset 0 0 0 0.1875rem var(--cnvs-brand-alert-base);" }
         }
     }
 }, "form-field-group-list-9f0751");

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

@@ -10,11 +10,11 @@ const layout_1 = require("@workday/canvas-kit-react/layout");
 const hooks_1 = require("./hooks");
 exports.formFieldHintStencil = (0, canvas_kit_styling_1.createStencil)({
     extends: text_1.textStencil,
-    base: { name: "29px2v", styles: "box-sizing:border-box;margin:var(--cnvs-sys-space-zero);" },
+    base: { name: "35d2sd", styles: "box-sizing:border-box;margin:var(--cnvs-sys-space-zero);" },
     modifiers: {
         error: {
-            error: { name: "3fnxnx", styles: "color:var(--cnvs-brand-error-base);" },
-            alert: { name: "3y3mpi", styles: "" }
+            error: { name: "3f5l1a", styles: "color:var(--cnvs-brand-error-base);" },
+            alert: { name: "420vay", styles: "" }
         }
     },
     defaultModifiers: {

package/dist/commonjs/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/commonjs/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/commonjs/form-field/lib/FormFieldLabel.js

@@ -10,19 +10,18 @@ const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const hooks_1 = require("./hooks");
 exports.formFieldLabelStencil = (0, canvas_kit_styling_1.createStencil)({
     extends: text_1.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: "3zcj8b", 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: "3x81vi", 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: "x8nhj", styles: "justify-content:flex-start;float:left;max-height:var(--cnvs-sys-space-x10);" },
+            horizontalEnd: { name: "1n1fy6", styles: "max-height:var(--cnvs-sys-space-x10);float:left;justify-content:flex-end;" },
+            vertical: { name: "3k9y56", 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: "44zfdy", 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/commonjs/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: {