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

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

@@ -4,13 +4,12 @@ exports.FormField = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const common_1 = require("@workday/canvas-kit-react/common");
 const layout_1 = require("@workday/canvas-kit-react/layout");
-const hooks_1 = require("./hooks");
+const FormFieldField_1 = require("./FormFieldField");
+const FormFieldHint_1 = require("./FormFieldHint");
 const FormFieldInput_1 = require("./FormFieldInput");
 const FormFieldLabel_1 = require("./FormFieldLabel");
-const FormFieldHint_1 = require("./FormFieldHint");
-const FormFieldContainer_1 = require("./FormFieldContainer");
 const formFieldStencil_1 = require("./formFieldStencil");
-const FormFieldField_1 = require("./FormFieldField");
+const hooks_1 = require("./hooks");
 /**
  * Use `FormField` to wrap input components to make them accessible. You can customize the field
  * by passing in `TextInput`, `Select`, `RadioGroup` and other form elements to `FormField.Input` through the `as` prop.
@@ -70,23 +69,6 @@ exports.FormField = (0, common_1.createContainer)('div')({
          * @stencil formFieldHintStencil
          */
         Hint: FormFieldHint_1.FormFieldHint,
-        /**
-         * `FormField.Field` allows you to properly center `FormField.Label` when the `orientation` is set to `horizontal` and there is hint text..
-         *
-         * ```tsx
-         * <FormField orientation="horizontalStart">
-         *    <FormField.Label>First Name</FormField.Label>
-         *    <FormField.Container>
-         *      <FormField.Input as={TextInput} value={value} onChange={(e) => console.log(e)} />
-         *      <FormField.Hint>This is your hint text</FormField.Hint>
-         *    </FormField.Container>
-         *  </FormField>
-         * ```
-         *
-         * @stencil formFieldContainerStencil
-         * @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.
-         */
-        Container: FormFieldContainer_1.FormFieldContainer,
         /**
          * `FormField.Field` allows you to customize container alignment and styles when wrapping your input and hint text.
          * ```tsx

package/dist/commonjs/form-field/lib/FormFieldField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormFieldField.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldField.tsx"],"names":[],"mappings":"AACA,OAAO,EAAe,OAAO,EAAgB,MAAM,6BAA6B,CAAC;AAKjF,eAAO,MAAM,qBAAqB,iJAMhC,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;;;EAUzB,CAAC"}
+{"version":3,"file":"FormFieldField.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldField.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,OAAO,EAA8B,MAAM,6BAA6B,CAAC;AAKjF,eAAO,MAAM,qBAAqB,iJAMhC,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;;;EAUzB,CAAC"}

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

@@ -4,10 +4,10 @@ exports.FormFieldField = exports.formFieldFieldStencil = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const common_1 = require("@workday/canvas-kit-react/common");
 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");
+const hooks_1 = require("./hooks");
 exports.formFieldFieldStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "3per3c", styles: "box-sizing:border-box;display:flex;flex-direction:column;gap:var(--cnvs-sys-space-x2);" }
+    base: { name: "46n4hk", styles: "box-sizing:border-box;display:flex;flex-direction:column;gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));" }
 }, "form-field-field-a35e82");
 exports.FormFieldField = (0, common_1.createSubcomponent)('div')({
     displayName: 'FormField.Field',

package/dist/commonjs/form-field/lib/FormFieldGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormFieldGroup.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAkB,cAAc,EAAC,MAAM,kCAAkC,CAAC;AACjF,OAAO,EAAC,SAAS,EAAc,MAAM,kCAAkC,CAAC;AAWxE,MAAM,WAAW,mBAAoB,SAAQ,SAAS,EAAE,cAAc;IACpE;;;OAGG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,iBAAiB,GAAG,eAAe,CAAC;IAC/D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;IAIvB;;;;;;;;;;;;;;;OAeG;;;;;;;;;;IAEH;;;;;;;;;;;OAWG;;;;;;;;;;IAEH;;OAEG;;;;;;;;;;IAEH;;;;;;;;;;;;;;OAcG;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;OAgBG;;;;;;;;;;CAqBL,CAAC"}
+{"version":3,"file":"FormFieldGroup.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,cAAc,EAAkB,MAAM,kCAAkC,CAAC;AACjF,OAAO,EAAC,SAAS,EAAc,MAAM,kCAAkC,CAAC;AAUxE,MAAM,WAAW,mBAAoB,SAAQ,SAAS,EAAE,cAAc;IACpE;;;OAGG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,iBAAiB,GAAG,eAAe,CAAC;IAC/D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;IAIvB;;;;;;;;;;;;;;;OAeG;;;;;;;;;;IAEH;;;;;;;;;;;OAWG;;;;;;;;;;IAEH;;OAEG;;;;;;;;;;IAEH;;;;;;;;;;;;;;OAcG;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;OAgBG;;;;;;;;;;CAqBL,CAAC"}

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

@@ -4,12 +4,12 @@ exports.FormFieldGroup = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const common_1 = require("@workday/canvas-kit-react/common");
 const layout_1 = require("@workday/canvas-kit-react/layout");
-const FormFieldGroupList_1 = require("./FormFieldGroupList");
+const FormField_1 = require("./FormField");
 const FormFieldGroupInput_1 = require("./FormFieldGroupInput");
 const FormFieldGroupLabel_1 = require("./FormFieldGroupLabel");
-const FormField_1 = require("./FormField");
-const hooks_1 = require("./hooks");
+const FormFieldGroupList_1 = require("./FormFieldGroupList");
 const formFieldStencil_1 = require("./formFieldStencil");
+const hooks_1 = require("./hooks");
 /**
  * Use `FormFieldGroup` to wrap a group of inputs to make them accessible.
  *

package/dist/commonjs/form-field/lib/FormFieldGroupInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormFieldGroupInput.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldGroupInput.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,OAAO,EAAe,MAAM,6BAA6B,CAAC;AAGlE,MAAM,WAAW,wBAAyB,SAAQ,OAAO;CAAG;AAC5D;;GAEG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;EAMjC,CAAC;AAEH,eAAO,MAAM,mBAAmB;;;;;;;;EAM9B,CAAC"}
+{"version":3,"file":"FormFieldGroupInput.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldGroupInput.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,OAAO,EAAe,MAAM,6BAA6B,CAAC;AAIlE,MAAM,WAAW,wBAAyB,SAAQ,OAAO;CAAG;AAC5D;;GAEG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;EAMjC,CAAC;AAEH,eAAO,MAAM,mBAAmB;;;;;;;;EAM9B,CAAC"}

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ExtractProps } from '@workday/canvas-kit-react/common';
-import { Text } from '@workday/canvas-kit-react/text';
 import { FlexProps } from '@workday/canvas-kit-react/layout';
+import { Text } from '@workday/canvas-kit-react/text';
 export interface FormFieldGroupLabelProps extends FlexProps, Omit<ExtractProps<typeof Text, never>, 'display'> {
     /**
      * The text of the label.
@@ -13,11 +13,11 @@ export declare const formFieldGroupLabelStencil: import("@workday/canvas-kit-sty
         true: {
             '&::after': {
                 content: string;
-                fontSize: "--cnvs-sys-font-size-body-large";
+                fontSize: "var(--cnvs-sys-font-size-body-lg, var(--cnvs-sys-font-size-body-large, 1.25rem))";
                 fontWeight: "--cnvs-sys-font-weight-normal";
-                color: "--cnvs-brand-error-base";
+                color: "var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)))";
                 textDecoration: string;
-                marginInlineStart: "--cnvs-sys-space-x1";
+                marginInlineStart: "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem))";
             };
         };
     };
@@ -28,10 +28,10 @@ export declare const formFieldGroupLabelStencil: import("@workday/canvas-kit-sty
         horizontalStart: {
             justifyContent: string;
             float: string;
-            maxHeight: "--cnvs-sys-space-x10";
+            maxHeight: "var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem))";
         };
         horizontalEnd: {
-            maxHeight: "--cnvs-sys-space-x10";
+            maxHeight: "var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem))";
             float: string;
             justifyContent: string;
         };
@@ -39,103 +39,103 @@ export declare const formFieldGroupLabelStencil: import("@workday/canvas-kit-sty
 }, {}, {}, import("@workday/canvas-kit-styling").Stencil<{
     typeLevel: {
         'title.large': {
-            color: "--cnvs-sys-color-text-strong";
             fontFamily: "--cnvs-sys-font-family-default";
             fontWeight: "--cnvs-sys-font-weight-bold";
-            lineHeight: "--cnvs-sys-line-height-title-large";
-            fontSize: "--cnvs-sys-font-size-title-large";
+            fontSize: "var(--cnvs-sys-font-size-title-lg, var(--cnvs-sys-font-size-title-large, 3.5rem))";
+            lineHeight: "var(--cnvs-sys-line-height-title-lg, var(--cnvs-sys-line-height-title-large, 4rem))";
+            color: "--cnvs-sys-color-fg-strong";
         };
         'title.medium': {
-            color: "--cnvs-sys-color-text-strong";
             fontFamily: "--cnvs-sys-font-family-default";
             fontWeight: "--cnvs-sys-font-weight-bold";
-            lineHeight: "--cnvs-sys-line-height-title-medium";
-            fontSize: "--cnvs-sys-font-size-title-medium";
+            fontSize: "var(--cnvs-sys-font-size-title-md, var(--cnvs-sys-font-size-title-medium, 3rem))";
+            lineHeight: "var(--cnvs-sys-line-height-title-md, var(--cnvs-sys-line-height-title-medium, 3.5rem))";
+            color: "--cnvs-sys-color-fg-strong";
         };
         'title.small': {
-            color: "--cnvs-sys-color-text-strong";
             fontFamily: "--cnvs-sys-font-family-default";
             fontWeight: "--cnvs-sys-font-weight-bold";
-            lineHeight: "--cnvs-sys-line-height-title-small";
-            fontSize: "--cnvs-sys-font-size-title-small";
+            lineHeight: "var(--cnvs-sys-line-height-title-sm, var(--cnvs-sys-line-height-title-small, 3rem))";
+            fontSize: "var(--cnvs-sys-font-size-title-sm, var(--cnvs-sys-font-size-title-small, 2.5rem))";
+            color: "--cnvs-sys-color-fg-strong";
         };
         'heading.large': {
-            color: "--cnvs-sys-color-text-strong";
             fontFamily: "--cnvs-sys-font-family-default";
             fontWeight: "--cnvs-sys-font-weight-bold";
-            lineHeight: "--cnvs-sys-line-height-heading-large";
-            fontSize: "--cnvs-sys-font-size-heading-large";
+            fontSize: "var(--cnvs-sys-font-size-heading-lg, var(--cnvs-sys-font-size-heading-large, 2rem))";
+            lineHeight: "var(--cnvs-sys-line-height-heading-lg, var(--cnvs-sys-line-height-heading-large, 2.5rem))";
+            color: "--cnvs-sys-color-fg-strong";
         };
         'heading.medium': {
-            color: "--cnvs-sys-color-text-strong";
             fontFamily: "--cnvs-sys-font-family-default";
             fontWeight: "--cnvs-sys-font-weight-bold";
-            lineHeight: "--cnvs-sys-line-height-heading-medium";
-            fontSize: "--cnvs-sys-font-size-heading-medium";
+            fontSize: "var(--cnvs-sys-font-size-heading-md, var(--cnvs-sys-font-size-heading-medium, 1.75rem))";
+            lineHeight: "var(--cnvs-sys-line-height-heading-md, var(--cnvs-sys-line-height-heading-medium, 2.25rem))";
+            color: "--cnvs-sys-color-fg-strong";
         };
         'heading.small': {
-            color: "--cnvs-sys-color-text-strong";
             fontFamily: "--cnvs-sys-font-family-default";
             fontWeight: "--cnvs-sys-font-weight-bold";
-            lineHeight: "--cnvs-sys-line-height-heading-small";
-            fontSize: "--cnvs-sys-font-size-heading-small";
+            fontSize: "var(--cnvs-sys-font-size-heading-sm, var(--cnvs-sys-font-size-heading-small, 1.5rem))";
+            lineHeight: "var(--cnvs-sys-line-height-heading-sm, var(--cnvs-sys-line-height-heading-small, 2rem))";
+            color: "--cnvs-sys-color-fg-strong";
         };
         'body.large': {
-            color: "--cnvs-sys-color-text-default";
             fontFamily: "--cnvs-sys-font-family-default";
             fontWeight: "--cnvs-sys-font-weight-normal";
-            lineHeight: "--cnvs-sys-line-height-body-large";
-            fontSize: "--cnvs-sys-font-size-body-large";
+            fontSize: "var(--cnvs-sys-font-size-body-lg, var(--cnvs-sys-font-size-body-large, 1.25rem))";
+            lineHeight: "var(--cnvs-sys-line-height-body-lg, var(--cnvs-sys-line-height-body-large, 1.75rem))";
+            color: "--cnvs-sys-color-fg-default";
         };
         'body.medium': {
-            color: "--cnvs-sys-color-text-default";
             fontFamily: "--cnvs-sys-font-family-default";
             fontWeight: "--cnvs-sys-font-weight-normal";
-            lineHeight: "--cnvs-sys-line-height-body-medium";
-            fontSize: "--cnvs-sys-font-size-body-medium";
+            fontSize: "var(--cnvs-sys-font-size-body-md, var(--cnvs-sys-font-size-body-medium, 1.125rem))";
+            lineHeight: "var(--cnvs-sys-line-height-body-md, var(--cnvs-sys-line-height-body-medium, 1.75rem))";
+            color: "--cnvs-sys-color-fg-default";
         };
         'body.small': {
-            color: "--cnvs-sys-color-text-default";
             fontFamily: "--cnvs-sys-font-family-default";
             fontWeight: "--cnvs-sys-font-weight-normal";
-            lineHeight: "--cnvs-sys-line-height-body-small";
-            fontSize: "--cnvs-sys-font-size-body-small";
-            letterSpacing: "--cnvs-base-letter-spacing-200";
+            fontSize: "var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small, 1rem))";
+            lineHeight: "var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small, 1.5rem))";
+            letterSpacing: "var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-sys-type-letter-spacing-body-small))";
+            color: "--cnvs-sys-color-fg-default";
         };
         'subtext.large': {
-            color: "--cnvs-sys-color-text-default";
             fontFamily: "--cnvs-sys-font-family-default";
             fontWeight: "--cnvs-sys-font-weight-normal";
-            lineHeight: "--cnvs-sys-line-height-subtext-large";
-            fontSize: "--cnvs-sys-font-size-subtext-large";
-            letterSpacing: "--cnvs-base-letter-spacing-150";
+            fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem))";
+            lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem))";
+            letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large))";
+            color: "--cnvs-sys-color-fg-default";
         };
         'subtext.medium': {
-            color: "--cnvs-sys-color-text-default";
             fontFamily: "--cnvs-sys-font-family-default";
             fontWeight: "--cnvs-sys-font-weight-normal";
-            lineHeight: "--cnvs-sys-line-height-subtext-medium";
-            fontSize: "--cnvs-sys-font-size-subtext-medium";
-            letterSpacing: "--cnvs-base-letter-spacing-100";
+            fontSize: "var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem))";
+            lineHeight: "var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem))";
+            letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium))";
+            color: "--cnvs-sys-color-fg-default";
         };
         'subtext.small': {
-            color: "--cnvs-sys-color-text-default";
             fontFamily: "--cnvs-sys-font-family-default";
             fontWeight: "--cnvs-sys-font-weight-normal";
-            lineHeight: "--cnvs-sys-line-height-subtext-small";
-            fontSize: "--cnvs-sys-font-size-subtext-small";
-            letterSpacing: "--cnvs-base-letter-spacing-50";
+            fontSize: "var(--cnvs-sys-font-size-subtext-sm, var(--cnvs-sys-font-size-subtext-small, 0.625rem))";
+            lineHeight: "var(--cnvs-sys-line-height-subtext-sm, var(--cnvs-sys-line-height-subtext-small, 1rem))";
+            letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-sm, var(--cnvs-sys-type-letter-spacing-subtext-small))";
+            color: "--cnvs-sys-color-fg-default";
         };
     };
     variant: {
         error: {
-            color: "--cnvs-sys-color-text-critical-default";
+            color: "var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)))";
         };
         hint: {
-            color: "--cnvs-sys-color-text-hint";
+            color: "--cnvs-sys-color-fg-muted-default";
         };
         inverse: {
-            color: "--cnvs-sys-color-text-inverse";
+            color: "--cnvs-sys-color-fg-inverse";
         };
     };
 }, {}, {}, never, never>, never>;

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCA0CrC,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,EAAC,YAAY,EAAqB,MAAM,kCAAkC,CAAC;AAClF,OAAO,EAAC,SAAS,EAAc,MAAM,kCAAkC,CAAC;AACxE,OAAO,EAAC,IAAI,EAAc,MAAM,gCAAgC,CAAC;AAMjE,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

@@ -3,28 +3,28 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormFieldGroupLabel = exports.formFieldGroupLabelStencil = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const common_1 = require("@workday/canvas-kit-react/common");
-const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
-const text_1 = require("@workday/canvas-kit-react/text");
 const layout_1 = require("@workday/canvas-kit-react/layout");
+const text_1 = require("@workday/canvas-kit-react/text");
+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");
 exports.formFieldGroupLabelStencil = (0, canvas_kit_styling_1.createStencil)({
     extends: text_1.textStencil,
-    base: { name: "2ga1hg", 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: "p02v5", styles: "box-sizing:border-box;font-weight:var(--cnvs-sys-font-weight-medium);color:var(--cnvs-sys-color-fg-default);padding-inline-start:0;display:flex;align-items:center;min-width:11.25rem;" },
     modifiers: {
         isRequired: {
-            true: { name: "1enfqn", 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: "34klcr", styles: "&::after{content:\"*\";font-size:var(--cnvs-sys-font-size-body-lg, var(--cnvs-sys-font-size-body-large, 1.25rem));font-weight:var(--cnvs-sys-font-weight-normal);color:var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));text-decoration:unset;margin-inline-start:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));}" }
         },
         orientation: {
-            vertical: { name: "14udt", styles: "width:100%;" },
-            horizontalStart: { name: "2nboac", styles: "justify-content:flex-start;float:left;max-height:var(--cnvs-sys-space-x10);" },
-            horizontalEnd: { name: "21zqgd", styles: "max-height:var(--cnvs-sys-space-x10);float:left;justify-content:flex-end;" }
+            vertical: { name: "1l1od9", styles: "width:100%;" },
+            horizontalStart: { name: "2imliq", styles: "justify-content:flex-start;float:left;max-height:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));" },
+            horizontalEnd: { name: "1f43b", styles: "max-height:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));float:left;justify-content:flex-end;" }
         }
     },
     defaultModifiers: {
         typeLevel: 'subtext.large',
     }
-}, "form-field-group-label-b84717");
+}, "form-field-group-label-0aa718");
 exports.FormFieldGroupLabel = (0, common_1.createSubcomponent)('div')({
     displayName: 'FormFieldGroup.Label',
     modelHook: hooks_1.useFormFieldModel,

package/dist/commonjs/form-field/lib/FormFieldGroupList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormFieldGroupList.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldGroupList.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,SAAS,EAAC,MAAM,kCAAkC,CAAC;AAE3D,OAAO,EAAgB,OAAO,EAA6B,MAAM,6BAA6B,CAAC;AAK/F,MAAM,WAAW,uBAAwB,SAAQ,OAAO,EAAE,SAAS;CAAG;AA6BtE,eAAO,MAAM,kBAAkB;;;;;;;;EAY7B,CAAC"}
+{"version":3,"file":"FormFieldGroupList.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldGroupList.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,SAAS,EAAC,MAAM,kCAAkC,CAAC;AAC3D,OAAO,EAAC,OAAO,EAA4C,MAAM,6BAA6B,CAAC;AAK/F,MAAM,WAAW,uBAAwB,SAAQ,OAAO,EAAE,SAAS;CAAG;AA2BtE,eAAO,MAAM,kBAAkB;;;;;;;;EAY7B,CAAC"}

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

@@ -7,14 +7,14 @@ 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: "1aouj3", 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: "1xlu0u", styles: "box-sizing:border-box;display:flex;flex-direction:column;border-radius:var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem));gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));padding:0.625rem var(--cnvs-base-size-150, 0.75rem) var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));margin:0 calc(var(--cnvs-base-size-150, 0.75rem) * -1);transition:100ms box-shadow;width:fit-content;" },
     modifiers: {
         error: {
-            error: { name: "1421mj", styles: "background-color:var(--cnvs-brand-error-lightest);box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-common-error-inner);" },
-            caution: { name: "38ldec", 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: "2utghx", styles: "background-color:var(--cnvs-sys-color-brand-surface-critical-default, oklch(0.6289 0.2567 29.11 / 0.04));box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));" },
+            caution: { name: "egtql", styles: "background-color:var(--cnvs-sys-color-brand-surface-caution-default, oklch(0.7982 0.159 92.57 / 0.1));box-shadow:inset 0 0 0 0.0625rem var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1))), inset 0 0 0 0.1875rem var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1)));" }
         }
     }
-}, "form-field-group-list-9f0751");
+}, "form-field-group-list-bcc141");
 exports.FormFieldGroupList = (0, common_1.createSubcomponent)('div')({
     displayName: 'FormFieldGroup.List',
     modelHook: hooks_1.useFormFieldModel,

package/dist/commonjs/form-field/lib/FormFieldHint.d.ts

@@ -1,112 +1,112 @@
 export declare const formFieldHintStencil: import("@workday/canvas-kit-styling").Stencil<{
     error: {
         error: {
-            color: "--cnvs-brand-error-base";
+            color: "var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)))";
         };
         caution: {
-            color: "--cnvs-sys-color-text-caution-default";
+            color: "--cnvs-sys-color-fg-default";
         };
     };
 }, {}, {}, import("@workday/canvas-kit-styling").Stencil<{
     typeLevel: {
         'title.large': {
-            color: "--cnvs-sys-color-text-strong";
             fontFamily: "--cnvs-sys-font-family-default";
             fontWeight: "--cnvs-sys-font-weight-bold";
-            lineHeight: "--cnvs-sys-line-height-title-large";
-            fontSize: "--cnvs-sys-font-size-title-large";
+            fontSize: "var(--cnvs-sys-font-size-title-lg, var(--cnvs-sys-font-size-title-large, 3.5rem))";
+            lineHeight: "var(--cnvs-sys-line-height-title-lg, var(--cnvs-sys-line-height-title-large, 4rem))";
+            color: "--cnvs-sys-color-fg-strong";
         };
         'title.medium': {
-            color: "--cnvs-sys-color-text-strong";
             fontFamily: "--cnvs-sys-font-family-default";
             fontWeight: "--cnvs-sys-font-weight-bold";
-            lineHeight: "--cnvs-sys-line-height-title-medium";
-            fontSize: "--cnvs-sys-font-size-title-medium";
+            fontSize: "var(--cnvs-sys-font-size-title-md, var(--cnvs-sys-font-size-title-medium, 3rem))";
+            lineHeight: "var(--cnvs-sys-line-height-title-md, var(--cnvs-sys-line-height-title-medium, 3.5rem))";
+            color: "--cnvs-sys-color-fg-strong";
         };
         'title.small': {
-            color: "--cnvs-sys-color-text-strong";
             fontFamily: "--cnvs-sys-font-family-default";
             fontWeight: "--cnvs-sys-font-weight-bold";
-            lineHeight: "--cnvs-sys-line-height-title-small";
-            fontSize: "--cnvs-sys-font-size-title-small";
+            lineHeight: "var(--cnvs-sys-line-height-title-sm, var(--cnvs-sys-line-height-title-small, 3rem))";
+            fontSize: "var(--cnvs-sys-font-size-title-sm, var(--cnvs-sys-font-size-title-small, 2.5rem))";
+            color: "--cnvs-sys-color-fg-strong";
         };
         'heading.large': {
-            color: "--cnvs-sys-color-text-strong";
             fontFamily: "--cnvs-sys-font-family-default";
             fontWeight: "--cnvs-sys-font-weight-bold";
-            lineHeight: "--cnvs-sys-line-height-heading-large";
-            fontSize: "--cnvs-sys-font-size-heading-large";
+            fontSize: "var(--cnvs-sys-font-size-heading-lg, var(--cnvs-sys-font-size-heading-large, 2rem))";
+            lineHeight: "var(--cnvs-sys-line-height-heading-lg, var(--cnvs-sys-line-height-heading-large, 2.5rem))";
+            color: "--cnvs-sys-color-fg-strong";
         };
         'heading.medium': {
-            color: "--cnvs-sys-color-text-strong";
             fontFamily: "--cnvs-sys-font-family-default";
             fontWeight: "--cnvs-sys-font-weight-bold";
-            lineHeight: "--cnvs-sys-line-height-heading-medium";
-            fontSize: "--cnvs-sys-font-size-heading-medium";
+            fontSize: "var(--cnvs-sys-font-size-heading-md, var(--cnvs-sys-font-size-heading-medium, 1.75rem))";
+            lineHeight: "var(--cnvs-sys-line-height-heading-md, var(--cnvs-sys-line-height-heading-medium, 2.25rem))";
+            color: "--cnvs-sys-color-fg-strong";
         };
         'heading.small': {
-            color: "--cnvs-sys-color-text-strong";
             fontFamily: "--cnvs-sys-font-family-default";
             fontWeight: "--cnvs-sys-font-weight-bold";
-            lineHeight: "--cnvs-sys-line-height-heading-small";
-            fontSize: "--cnvs-sys-font-size-heading-small";
+            fontSize: "var(--cnvs-sys-font-size-heading-sm, var(--cnvs-sys-font-size-heading-small, 1.5rem))";
+            lineHeight: "var(--cnvs-sys-line-height-heading-sm, var(--cnvs-sys-line-height-heading-small, 2rem))";
+            color: "--cnvs-sys-color-fg-strong";
         };
         'body.large': {
-            color: "--cnvs-sys-color-text-default";
             fontFamily: "--cnvs-sys-font-family-default";
             fontWeight: "--cnvs-sys-font-weight-normal";
-            lineHeight: "--cnvs-sys-line-height-body-large";
-            fontSize: "--cnvs-sys-font-size-body-large";
+            fontSize: "var(--cnvs-sys-font-size-body-lg, var(--cnvs-sys-font-size-body-large, 1.25rem))";
+            lineHeight: "var(--cnvs-sys-line-height-body-lg, var(--cnvs-sys-line-height-body-large, 1.75rem))";
+            color: "--cnvs-sys-color-fg-default";
         };
         'body.medium': {
-            color: "--cnvs-sys-color-text-default";
             fontFamily: "--cnvs-sys-font-family-default";
             fontWeight: "--cnvs-sys-font-weight-normal";
-            lineHeight: "--cnvs-sys-line-height-body-medium";
-            fontSize: "--cnvs-sys-font-size-body-medium";
+            fontSize: "var(--cnvs-sys-font-size-body-md, var(--cnvs-sys-font-size-body-medium, 1.125rem))";
+            lineHeight: "var(--cnvs-sys-line-height-body-md, var(--cnvs-sys-line-height-body-medium, 1.75rem))";
+            color: "--cnvs-sys-color-fg-default";
         };
         'body.small': {
-            color: "--cnvs-sys-color-text-default";
             fontFamily: "--cnvs-sys-font-family-default";
             fontWeight: "--cnvs-sys-font-weight-normal";
-            lineHeight: "--cnvs-sys-line-height-body-small";
-            fontSize: "--cnvs-sys-font-size-body-small";
-            letterSpacing: "--cnvs-base-letter-spacing-200";
+            fontSize: "var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small, 1rem))";
+            lineHeight: "var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small, 1.5rem))";
+            letterSpacing: "var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-sys-type-letter-spacing-body-small))";
+            color: "--cnvs-sys-color-fg-default";
         };
         'subtext.large': {
-            color: "--cnvs-sys-color-text-default";
             fontFamily: "--cnvs-sys-font-family-default";
             fontWeight: "--cnvs-sys-font-weight-normal";
-            lineHeight: "--cnvs-sys-line-height-subtext-large";
-            fontSize: "--cnvs-sys-font-size-subtext-large";
-            letterSpacing: "--cnvs-base-letter-spacing-150";
+            fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem))";
+            lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem))";
+            letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large))";
+            color: "--cnvs-sys-color-fg-default";
         };
         'subtext.medium': {
-            color: "--cnvs-sys-color-text-default";
             fontFamily: "--cnvs-sys-font-family-default";
             fontWeight: "--cnvs-sys-font-weight-normal";
-            lineHeight: "--cnvs-sys-line-height-subtext-medium";
-            fontSize: "--cnvs-sys-font-size-subtext-medium";
-            letterSpacing: "--cnvs-base-letter-spacing-100";
+            fontSize: "var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem))";
+            lineHeight: "var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem))";
+            letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium))";
+            color: "--cnvs-sys-color-fg-default";
         };
         'subtext.small': {
-            color: "--cnvs-sys-color-text-default";
             fontFamily: "--cnvs-sys-font-family-default";
             fontWeight: "--cnvs-sys-font-weight-normal";
-            lineHeight: "--cnvs-sys-line-height-subtext-small";
-            fontSize: "--cnvs-sys-font-size-subtext-small";
-            letterSpacing: "--cnvs-base-letter-spacing-50";
+            fontSize: "var(--cnvs-sys-font-size-subtext-sm, var(--cnvs-sys-font-size-subtext-small, 0.625rem))";
+            lineHeight: "var(--cnvs-sys-line-height-subtext-sm, var(--cnvs-sys-line-height-subtext-small, 1rem))";
+            letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-sm, var(--cnvs-sys-type-letter-spacing-subtext-small))";
+            color: "--cnvs-sys-color-fg-default";
         };
     };
     variant: {
         error: {
-            color: "--cnvs-sys-color-text-critical-default";
+            color: "var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)))";
         };
         hint: {
-            color: "--cnvs-sys-color-text-hint";
+            color: "--cnvs-sys-color-fg-muted-default";
         };
         inverse: {
-            color: "--cnvs-sys-color-text-inverse";
+            color: "--cnvs-sys-color-fg-inverse";
         };
     };
 }, {}, {}, never, never>, never>;

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

@@ -3,24 +3,24 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormFieldHint = exports.formFieldHintStencil = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const common_1 = require("@workday/canvas-kit-react/common");
-const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
-const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
-const text_1 = require("@workday/canvas-kit-react/text");
 const layout_1 = require("@workday/canvas-kit-react/layout");
+const text_1 = require("@workday/canvas-kit-react/text");
+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");
 exports.formFieldHintStencil = (0, canvas_kit_styling_1.createStencil)({
     extends: text_1.textStencil,
-    base: { name: "3ywltq", styles: "box-sizing:border-box;margin:var(--cnvs-sys-space-zero);" },
+    base: { name: "3u7389", styles: "box-sizing:border-box;margin:0;" },
     modifiers: {
         error: {
-            error: { name: "3d7auq", styles: "color:var(--cnvs-brand-error-base);" },
-            caution: { name: "3z3r9k", styles: "color:var(--cnvs-sys-color-text-caution-default);" }
+            error: { name: "11p1at", styles: "color:var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));" },
+            caution: { name: "34oa47", styles: "color:var(--cnvs-sys-color-fg-default);" }
         }
     },
     defaultModifiers: {
         typeLevel: 'subtext.medium',
     }
-}, "form-field-hint-4fcd54");
+}, "form-field-hint-4a6eb6");
 exports.FormFieldHint = (0, common_1.createSubcomponent)('p')({
     displayName: 'FormField.Hint',
     modelHook: hooks_1.useFormFieldModel,