@workday/canvas-kit-preview-react 11.0.0-alpha.796-next.0 → 11.0.0-alpha.798-next.0

package/dist/commonjs/form-field/index.d.ts

@@ -1,3 +1,7 @@
 export * from './lib/FormField';
 export * from './lib/hooks/';
+export { formFieldStencil } from './lib/formFieldStencil';
+export { formFieldContainerStencil } from './lib/FormFieldContainer';
+export { formFieldHintStencil } from './lib/FormFieldHint';
+export { formFieldLabelStencil } from './lib/FormFieldLabel';
 //# sourceMappingURL=index.d.ts.map

package/dist/commonjs/form-field/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../form-field/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../form-field/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,OAAO,EAAC,gBAAgB,EAAC,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAC,yBAAyB,EAAC,MAAM,0BAA0B,CAAC;AACnE,OAAO,EAAC,oBAAoB,EAAC,MAAM,qBAAqB,CAAC;AACzD,OAAO,EAAC,qBAAqB,EAAC,MAAM,sBAAsB,CAAC"}

package/dist/commonjs/form-field/index.js

@@ -10,5 +10,14 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.formFieldLabelStencil = exports.formFieldHintStencil = exports.formFieldContainerStencil = exports.formFieldStencil = void 0;
 __exportStar(require("./lib/FormField"), exports);
 __exportStar(require("./lib/hooks/"), exports);
+var formFieldStencil_1 = require("./lib/formFieldStencil");
+Object.defineProperty(exports, "formFieldStencil", { enumerable: true, get: function () { return formFieldStencil_1.formFieldStencil; } });
+var FormFieldContainer_1 = require("./lib/FormFieldContainer");
+Object.defineProperty(exports, "formFieldContainerStencil", { enumerable: true, get: function () { return FormFieldContainer_1.formFieldContainerStencil; } });
+var FormFieldHint_1 = require("./lib/FormFieldHint");
+Object.defineProperty(exports, "formFieldHintStencil", { enumerable: true, get: function () { return FormFieldHint_1.formFieldHintStencil; } });
+var FormFieldLabel_1 = require("./lib/FormFieldLabel");
+Object.defineProperty(exports, "formFieldLabelStencil", { enumerable: true, get: function () { return FormFieldLabel_1.formFieldLabelStencil; } });

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

@@ -2,6 +2,11 @@ import React from 'react';
 import { GrowthBehavior } from '@workday/canvas-kit-react/common';
 import { FlexProps } from '@workday/canvas-kit-react/layout';
 export interface FormFieldProps extends FlexProps, GrowthBehavior {
+    /**
+     * The direction the child elements should stack
+     * @default vertical
+     */
+    orientation?: 'vertical' | 'horizontal';
     children: React.ReactNode;
 }
 /**
@@ -14,17 +19,17 @@ export interface FormFieldProps extends FlexProps, GrowthBehavior {
  *    <FormField.Input as={TextInput} value={value} onChange={(e) => console.log(e)} />
  *  </FormField>
  * ```
+ *
+ * @stencil formFieldStencil
  */
 export declare const FormField: import("@workday/canvas-kit-react/common").ElementComponentM<"div", FormFieldProps & Partial<{
     error: "alert" | "error" | undefined;
-    orientation: "horizontal" | "vertical";
     id: string;
     isRequired: boolean;
 }> & {} & {}, {
     state: {
         id: string;
         error: "alert" | "error" | undefined;
-        orientation: "horizontal" | "vertical";
         isRequired: boolean;
     };
     events: {};
@@ -46,7 +51,6 @@ export declare const FormField: import("@workday/canvas-kit-react/common").Eleme
         state: {
             id: string;
             error: "alert" | "error" | undefined;
-            orientation: "horizontal" | "vertical";
             isRequired: boolean;
         };
         events: {};
@@ -60,12 +64,13 @@ export declare const FormField: import("@workday/canvas-kit-react/common").Eleme
      *    <FormField.Input as={TextInput} value={value} onChange={(e) => console.log(e)} />
      *  </FormField>
      * ```
+     *
+     * @stencil formFieldLabelStencil
      */
     Label: import("@workday/canvas-kit-react/common").ElementComponentM<"label", import("./FormFieldLabel").FormFieldLabelProps, {
         state: {
             id: string;
             error: "alert" | "error" | undefined;
-            orientation: "horizontal" | "vertical";
             isRequired: boolean;
         };
         events: {};
@@ -81,12 +86,13 @@ export declare const FormField: import("@workday/canvas-kit-react/common").Eleme
      *    <FormField.Hint>This is your hint text</FormField.Hint>
      *  </FormField>
      * ```
+     *
+     * @stencil formFieldHintStencil
      */
-    Hint: import("@workday/canvas-kit-react/common").ElementComponentM<"p", Omit<import("@workday/canvas-kit-react/text").TypeLevelProps, "size">, {
+    Hint: import("@workday/canvas-kit-react/common").ElementComponentM<"p", import("@workday/canvas-kit-react/text").TextProps, {
         state: {
             id: string;
             error: "alert" | "error" | undefined;
-            orientation: "horizontal" | "vertical";
             isRequired: boolean;
         };
         events: {};
@@ -103,12 +109,13 @@ export declare const FormField: import("@workday/canvas-kit-react/common").Eleme
      *    </FormField.Container>
      *  </FormField>
      * ```
+     *
+     * @stencil formFieldContainerStencil
      */
     Container: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("@workday/canvas-kit-styling").CSProps, {
         state: {
             id: string;
             error: "alert" | "error" | undefined;
-            orientation: "horizontal" | "vertical";
             isRequired: boolean;
         };
         events: {};

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

@@ -1 +1 @@
-{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAkB,cAAc,EAAC,MAAM,kCAAkC,CAAC;AACjF,OAAO,EAAO,SAAS,EAAc,MAAM,kCAAkC,CAAC;AAU9E,MAAM,WAAW,cAAe,SAAQ,SAAS,EAAE,cAAc;IAC/D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAmBD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;IAIlB;;;;;;;;;;;;OAYG;;;;;;;;;;IAEH;;;;;;;;;OASG;;;;;;;;;;IAEH;;;;;;;;;;;OAWG;;;;;;;;;;IAEH;;;;;;;;;;;;OAYG;;;;;;;;;;CAeL,CAAC"}
+{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormField.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;AASxE,MAAM,WAAW,cAAe,SAAQ,SAAS,EAAE,cAAc;IAC/D;;;OAGG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;;IAIlB;;;;;;;;;;;;OAYG;;;;;;;;;IAEH;;;;;;;;;;;OAWG;;;;;;;;;IAEH;;;;;;;;;;;;;OAaG;;;;;;;;;IAEH;;;;;;;;;;;;;;OAcG;;;;;;;;;CAmBL,CAAC"}

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

@@ -7,21 +7,12 @@ exports.FormField = void 0;
 const react_1 = __importDefault(require("react"));
 const common_1 = require("@workday/canvas-kit-react/common");
 const layout_1 = require("@workday/canvas-kit-react/layout");
-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 FormFieldInput_1 = require("./FormFieldInput");
 const FormFieldLabel_1 = require("./FormFieldLabel");
 const FormFieldHint_1 = require("./FormFieldHint");
 const FormFieldContainer_1 = require("./FormFieldContainer");
-const formFieldStencil = canvas_kit_styling_1.createStencil({
-    base: { name: "6fc20a", styles: "box-sizing:border-box;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: "59f66e", styles: "width:100%;[data-width=\"ck-formfield-width\"]{width:100%;}" }
-        }
-    }
-}, "form-field-aed57a");
+const formFieldStencil_1 = require("./formFieldStencil");
 /**
  * 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.
@@ -32,6 +23,8 @@ const formFieldStencil = canvas_kit_styling_1.createStencil({
  *    <FormField.Input as={TextInput} value={value} onChange={(e) => console.log(e)} />
  *  </FormField>
  * ```
+ *
+ * @stencil formFieldStencil
  */
 exports.FormField = common_1.createContainer('div')({
     displayName: 'FormField',
@@ -60,6 +53,8 @@ exports.FormField = common_1.createContainer('div')({
          *    <FormField.Input as={TextInput} value={value} onChange={(e) => console.log(e)} />
          *  </FormField>
          * ```
+         *
+         * @stencil formFieldLabelStencil
          */
         Label: FormFieldLabel_1.FormFieldLabel,
         /**
@@ -73,6 +68,8 @@ exports.FormField = common_1.createContainer('div')({
          *    <FormField.Hint>This is your hint text</FormField.Hint>
          *  </FormField>
          * ```
+         *
+         * @stencil formFieldHintStencil
          */
         Hint: FormFieldHint_1.FormFieldHint,
         /**
@@ -87,10 +84,16 @@ exports.FormField = common_1.createContainer('div')({
          *    </FormField.Container>
          *  </FormField>
          * ```
+         *
+         * @stencil formFieldContainerStencil
          */
         Container: FormFieldContainer_1.FormFieldContainer,
     },
-})(({ children, ...elemProps }, Element, model) => {
-    const layoutProps = hooks_1.useFormFieldOrientation(model.state.orientation);
-    return (react_1.default.createElement(layout_1.Flex, Object.assign({ as: Element }, layoutProps, layout_1.mergeStyles(elemProps, formFieldStencil({ grow: elemProps.grow }))), children));
+})(({ children, grow, orientation, ...elemProps }, Element, model) => {
+    return (react_1.default.createElement(Element, Object.assign({}, layout_1.mergeStyles(elemProps, formFieldStencil_1.formFieldStencil({
+        grow,
+        orientation,
+        error: model.state.error,
+        required: model.state.isRequired,
+    }))), children));
 });

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

@@ -1,9 +1,9 @@
 import { CSProps } from '@workday/canvas-kit-styling';
+export declare const formFieldContainerStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, never>, {}, never, never>;
 export declare const FormFieldContainer: import("@workday/canvas-kit-react/common").ElementComponentM<"div", CSProps, {
     state: {
         id: string;
         error: "alert" | "error" | undefined;
-        orientation: "horizontal" | "vertical";
         isRequired: boolean;
     };
     events: {};

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

@@ -1 +1 @@
-{"version":3,"file":"FormFieldContainer.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldContainer.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAe,OAAO,EAAgB,MAAM,6BAA6B,CAAC;AAWjF,eAAO,MAAM,kBAAkB;;;;;;;;EAU7B,CAAC"}
+{"version":3,"file":"FormFieldContainer.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldContainer.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAe,OAAO,EAAgB,MAAM,6BAA6B,CAAC;AAIjF,eAAO,MAAM,yBAAyB,yIAKpC,CAAC;AAEH,eAAO,MAAM,kBAAkB;;;;;;;EAU7B,CAAC"}

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

@@ -3,17 +3,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FormFieldContainer = void 0;
+exports.FormFieldContainer = exports.formFieldContainerStencil = void 0;
 const react_1 = __importDefault(require("react"));
 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 formFieldContainerStencil = canvas_kit_styling_1.createStencil({
-    base: { name: "299ca4", styles: "box-sizing:border-box;display:flex;flex-direction:column;" }
-}, "form-field-container-8bf936");
+exports.formFieldContainerStencil = canvas_kit_styling_1.createStencil({
+    base: { name: "0926c9", styles: "box-sizing:border-box;display:flex;flex-direction:column;" }
+}, "form-field-container-6d2b75");
 exports.FormFieldContainer = common_1.createSubcomponent('div')({
     displayName: 'FormField.Container',
     modelHook: hooks_1.useFormFieldModel,
 })((elemProps, Element, model) => {
-    return (react_1.default.createElement(Element, Object.assign({ "data-width": "ck-formfield-width" }, canvas_kit_styling_1.handleCsProp(elemProps, formFieldContainerStencil()))));
+    return (react_1.default.createElement(Element, Object.assign({ "data-width": "ck-formfield-width" }, canvas_kit_styling_1.handleCsProp(elemProps, exports.formFieldContainerStencil()))));
 });

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

@@ -1,8 +1,110 @@
-export declare const FormFieldHint: import("@workday/canvas-kit-react/common").ElementComponentM<"p", Omit<import("@workday/canvas-kit-react/text").TypeLevelProps, "size">, {
+export declare const formFieldHintStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, never>, {}, import("@workday/canvas-kit-styling").Stencil<{
+    typeLevel: {
+        'title.large': {
+            color: "--cnvs-sys-color-text-strong";
+            fontFamily: "--cnvs-base-font-family-50";
+            fontWeight: "--cnvs-base-font-weight-700";
+            lineHeight: "--cnvs-base-line-height-600";
+            fontSize: "--cnvs-base-font-size-600";
+        };
+        'title.medium': {
+            color: "--cnvs-sys-color-text-strong";
+            fontFamily: "--cnvs-base-font-family-50";
+            fontWeight: "--cnvs-base-font-weight-700";
+            lineHeight: "--cnvs-base-line-height-500";
+            fontSize: "--cnvs-base-font-size-500";
+        };
+        'title.small': {
+            color: "--cnvs-sys-color-text-strong";
+            fontFamily: "--cnvs-base-font-family-50";
+            fontWeight: "--cnvs-base-font-weight-700";
+            lineHeight: "--cnvs-base-line-height-400";
+            fontSize: "--cnvs-base-font-size-400";
+        };
+        'heading.large': {
+            color: "--cnvs-sys-color-text-strong";
+            fontFamily: "--cnvs-base-font-family-50";
+            fontWeight: "--cnvs-base-font-weight-700";
+            lineHeight: "--cnvs-base-line-height-350";
+            fontSize: "--cnvs-base-font-size-300";
+        };
+        'heading.medium': {
+            color: "--cnvs-sys-color-text-strong";
+            fontFamily: "--cnvs-base-font-family-50";
+            fontWeight: "--cnvs-base-font-weight-700";
+            lineHeight: "--cnvs-base-line-height-300";
+            fontSize: "--cnvs-base-font-size-250";
+        };
+        'heading.small': {
+            color: "--cnvs-sys-color-text-strong";
+            fontFamily: "--cnvs-base-font-family-50";
+            fontWeight: "--cnvs-base-font-weight-700";
+            lineHeight: "--cnvs-base-line-height-250";
+            fontSize: "--cnvs-base-font-size-200";
+        };
+        'body.large': {
+            color: "--cnvs-sys-color-text-default";
+            fontFamily: "--cnvs-base-font-family-50";
+            fontWeight: "--cnvs-base-font-weight-400";
+            lineHeight: "--cnvs-base-line-height-200";
+            fontSize: "--cnvs-base-font-size-150";
+        };
+        'body.medium': {
+            color: "--cnvs-sys-color-text-default";
+            fontFamily: "--cnvs-base-font-family-50";
+            fontWeight: "--cnvs-base-font-weight-400";
+            lineHeight: "--cnvs-base-line-height-200";
+            fontSize: "--cnvs-base-font-size-125";
+        };
+        'body.small': {
+            color: "--cnvs-sys-color-text-default";
+            fontFamily: "--cnvs-base-font-family-50";
+            fontWeight: "--cnvs-base-font-weight-400";
+            lineHeight: "--cnvs-base-line-height-150";
+            fontSize: "--cnvs-base-font-size-100";
+            letterSpacing: "--cnvs-base-letter-spacing-200";
+        };
+        'subtext.large': {
+            color: "--cnvs-sys-color-text-default";
+            fontFamily: "--cnvs-base-font-family-50";
+            fontWeight: "--cnvs-base-font-weight-400";
+            lineHeight: "--cnvs-base-line-height-100";
+            fontSize: "--cnvs-base-font-size-75";
+            letterSpacing: "--cnvs-base-letter-spacing-150";
+        };
+        'subtext.medium': {
+            color: "--cnvs-sys-color-text-default";
+            fontFamily: "--cnvs-base-font-family-50";
+            fontWeight: "--cnvs-base-font-weight-400";
+            lineHeight: "--cnvs-base-line-height-50";
+            fontSize: "--cnvs-base-font-size-50";
+            letterSpacing: "--cnvs-base-letter-spacing-100";
+        };
+        'subtext.small': {
+            color: "--cnvs-sys-color-text-default";
+            fontFamily: "--cnvs-base-font-family-50";
+            fontWeight: "--cnvs-base-font-weight-400";
+            lineHeight: "--cnvs-base-line-height-50";
+            fontSize: "--cnvs-base-font-size-25";
+            letterSpacing: "--cnvs-base-letter-spacing-50";
+        };
+    };
+    variant: {
+        error: {
+            color: "--cnvs-sys-color-text-critical-default";
+        };
+        hint: {
+            color: "--cnvs-sys-color-text-hint";
+        };
+        inverse: {
+            color: "--cnvs-sys-color-text-inverse";
+        };
+    };
+}, {}, never, never>, never>;
+export declare const FormFieldHint: import("@workday/canvas-kit-react/common").ElementComponentM<"p", import("@workday/canvas-kit-react/text").TextProps, {
     state: {
         id: string;
         error: "alert" | "error" | undefined;
-        orientation: "horizontal" | "vertical";
         isRequired: boolean;
     };
     events: {};

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

@@ -1 +1 @@
-{"version":3,"file":"FormFieldHint.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldHint.tsx"],"names":[],"mappings":"AAuBA,eAAO,MAAM,aAAa;;;;;;;;EAqBzB,CAAC"}
+{"version":3,"file":"FormFieldHint.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldHint.tsx"],"names":[],"mappings":"AAWA,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4BAY/B,CAAC;AAEH,eAAO,MAAM,aAAa;;;;;;;EAexB,CAAC"}

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

@@ -3,31 +3,30 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FormFieldHint = void 0;
+exports.FormFieldHint = exports.formFieldHintStencil = void 0;
 const react_1 = __importDefault(require("react"));
 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 hooks_1 = require("./hooks");
 const text_1 = require("@workday/canvas-kit-react/text");
 const layout_1 = require("@workday/canvas-kit-react/layout");
-const formFieldHintStencil = canvas_kit_styling_1.createStencil({
-    base: { name: "b58835", styles: "box-sizing:border-box;margin:var(--cnvs-sys-space-x2) var(--cnvs-sys-space-zero) var(--cnvs-sys-space-zero);" },
-    modifiers: {
-        error: {
-            error: { name: "90c8b0", styles: "color:var(--cnvs-brand-error-base);" },
-            alert: { name: "ac1fad", styles: "" }
-        }
+const hooks_1 = require("./hooks");
+const formFieldStencil_1 = require("./formFieldStencil");
+exports.formFieldHintStencil = canvas_kit_styling_1.createStencil({
+    extends: text_1.textStencil,
+    base: { name: "5bd110", styles: "box-sizing:border-box;margin:var(--cnvs-sys-space-x2) var(--cnvs-sys-space-zero) var(--cnvs-sys-space-zero);.maf76bf :where(&){color:var(--cnvs-brand-error-base);}" },
+    defaultModifiers: {
+        typeLevel: 'subtext.medium',
     }
-}, "form-field-hint-7eb209");
+}, "form-field-hint-7fbdaa");
 exports.FormFieldHint = common_1.createSubcomponent('p')({
     displayName: 'FormField.Hint',
     modelHook: hooks_1.useFormFieldModel,
     elemPropsHook: hooks_1.useFormFieldHint,
-})(({ children, ...elemProps }, Element, model) => {
+})(({ children, typeLevel, variant, ...elemProps }, Element) => {
     if (!children) {
         // If there is no hint text just skip rendering
         return null;
     }
-    return (react_1.default.createElement(text_1.Subtext, Object.assign({ as: Element, size: "medium" }, layout_1.mergeStyles(elemProps, formFieldHintStencil({ error: model.state.error }))), children));
+    return (react_1.default.createElement(Element, Object.assign({}, layout_1.mergeStyles(elemProps, exports.formFieldHintStencil({ typeLevel, variant }))), children));
 });

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

@@ -2,7 +2,6 @@ export declare const FormFieldInput: import("@workday/canvas-kit-react/common").
     state: {
         id: string;
         error: "alert" | "error" | undefined;
-        orientation: "horizontal" | "vertical";
         isRequired: boolean;
     };
     events: {};

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

@@ -1 +1 @@
-{"version":3,"file":"FormFieldInput.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldInput.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,cAAc;;;;;;;;EAMzB,CAAC"}
+{"version":3,"file":"FormFieldInput.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldInput.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,cAAc;;;;;;;EAMzB,CAAC"}

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

@@ -1,23 +1,120 @@
 import React from 'react';
-export interface FormFieldLabelProps {
+import { ExtractProps } from '@workday/canvas-kit-react/common';
+import { Text } from '@workday/canvas-kit-react/text';
+import { FlexProps } from '@workday/canvas-kit-react/layout';
+export interface FormFieldLabelProps extends FlexProps, Omit<ExtractProps<typeof Text, never>, 'display'> {
     /**
      * The text of the label.
      */
     children: React.ReactNode;
-    /**
-     * Will style the text as disabled
-     */
-    disabled?: boolean;
-    /**
-     * Changes the color of the text
-     */
-    variant?: 'error' | 'hint' | 'inverse';
 }
+export declare const formFieldLabelStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, never>, {}, import("@workday/canvas-kit-styling").Stencil<{
+    typeLevel: {
+        'title.large': {
+            color: "--cnvs-sys-color-text-strong";
+            fontFamily: "--cnvs-base-font-family-50";
+            fontWeight: "--cnvs-base-font-weight-700";
+            lineHeight: "--cnvs-base-line-height-600";
+            fontSize: "--cnvs-base-font-size-600";
+        };
+        'title.medium': {
+            color: "--cnvs-sys-color-text-strong";
+            fontFamily: "--cnvs-base-font-family-50";
+            fontWeight: "--cnvs-base-font-weight-700";
+            lineHeight: "--cnvs-base-line-height-500";
+            fontSize: "--cnvs-base-font-size-500";
+        };
+        'title.small': {
+            color: "--cnvs-sys-color-text-strong";
+            fontFamily: "--cnvs-base-font-family-50";
+            fontWeight: "--cnvs-base-font-weight-700";
+            lineHeight: "--cnvs-base-line-height-400";
+            fontSize: "--cnvs-base-font-size-400";
+        };
+        'heading.large': {
+            color: "--cnvs-sys-color-text-strong";
+            fontFamily: "--cnvs-base-font-family-50";
+            fontWeight: "--cnvs-base-font-weight-700";
+            lineHeight: "--cnvs-base-line-height-350";
+            fontSize: "--cnvs-base-font-size-300";
+        };
+        'heading.medium': {
+            color: "--cnvs-sys-color-text-strong";
+            fontFamily: "--cnvs-base-font-family-50";
+            fontWeight: "--cnvs-base-font-weight-700";
+            lineHeight: "--cnvs-base-line-height-300";
+            fontSize: "--cnvs-base-font-size-250";
+        };
+        'heading.small': {
+            color: "--cnvs-sys-color-text-strong";
+            fontFamily: "--cnvs-base-font-family-50";
+            fontWeight: "--cnvs-base-font-weight-700";
+            lineHeight: "--cnvs-base-line-height-250";
+            fontSize: "--cnvs-base-font-size-200";
+        };
+        'body.large': {
+            color: "--cnvs-sys-color-text-default";
+            fontFamily: "--cnvs-base-font-family-50";
+            fontWeight: "--cnvs-base-font-weight-400";
+            lineHeight: "--cnvs-base-line-height-200";
+            fontSize: "--cnvs-base-font-size-150";
+        };
+        'body.medium': {
+            color: "--cnvs-sys-color-text-default";
+            fontFamily: "--cnvs-base-font-family-50";
+            fontWeight: "--cnvs-base-font-weight-400";
+            lineHeight: "--cnvs-base-line-height-200";
+            fontSize: "--cnvs-base-font-size-125";
+        };
+        'body.small': {
+            color: "--cnvs-sys-color-text-default";
+            fontFamily: "--cnvs-base-font-family-50";
+            fontWeight: "--cnvs-base-font-weight-400";
+            lineHeight: "--cnvs-base-line-height-150";
+            fontSize: "--cnvs-base-font-size-100";
+            letterSpacing: "--cnvs-base-letter-spacing-200";
+        };
+        'subtext.large': {
+            color: "--cnvs-sys-color-text-default";
+            fontFamily: "--cnvs-base-font-family-50";
+            fontWeight: "--cnvs-base-font-weight-400";
+            lineHeight: "--cnvs-base-line-height-100";
+            fontSize: "--cnvs-base-font-size-75";
+            letterSpacing: "--cnvs-base-letter-spacing-150";
+        };
+        'subtext.medium': {
+            color: "--cnvs-sys-color-text-default";
+            fontFamily: "--cnvs-base-font-family-50";
+            fontWeight: "--cnvs-base-font-weight-400";
+            lineHeight: "--cnvs-base-line-height-50";
+            fontSize: "--cnvs-base-font-size-50";
+            letterSpacing: "--cnvs-base-letter-spacing-100";
+        };
+        'subtext.small': {
+            color: "--cnvs-sys-color-text-default";
+            fontFamily: "--cnvs-base-font-family-50";
+            fontWeight: "--cnvs-base-font-weight-400";
+            lineHeight: "--cnvs-base-line-height-50";
+            fontSize: "--cnvs-base-font-size-25";
+            letterSpacing: "--cnvs-base-letter-spacing-50";
+        };
+    };
+    variant: {
+        error: {
+            color: "--cnvs-sys-color-text-critical-default";
+        };
+        hint: {
+            color: "--cnvs-sys-color-text-hint";
+        };
+        inverse: {
+            color: "--cnvs-sys-color-text-inverse";
+        };
+    };
+}, {}, never, never>, never>;
 export declare const FormFieldLabel: import("@workday/canvas-kit-react/common").ElementComponentM<"label", FormFieldLabelProps, {
     state: {
         id: string;
         error: "alert" | "error" | undefined;
-        orientation: "horizontal" | "vertical";
         isRequired: boolean;
     };
     events: {};

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;AAQ1B,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;CACxC;AA8DD,eAAO,MAAM,cAAc;;;;;;;;EAmBzB,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,EAAC,MAAM,kCAAkC,CAAC;AAElF,OAAO,EAAC,IAAI,EAAc,MAAM,gCAAgC,CAAC;AACjE,OAAO,EAAC,SAAS,EAAc,MAAM,kCAAkC,CAAC;AAMxE,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;CAC3B;AAED,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4BAoChC,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;;EAUzB,CAAC"}

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

@@ -3,47 +3,27 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FormFieldLabel = void 0;
+exports.FormFieldLabel = exports.formFieldLabelStencil = void 0;
 const react_1 = __importDefault(require("react"));
 const common_1 = require("@workday/canvas-kit-react/common");
-const hooks_1 = require("./hooks");
 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 canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
-const formFieldLabelAsteriskStencil = canvas_kit_styling_1.createStencil({
-    base: { name: "a59d7a", styles: "box-sizing:border-box;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);" }
-}, "form-field-label-asterisk-6c4d1f");
-const formFieldLabelStencil = canvas_kit_styling_1.createStencil({
-    base: { name: "5443ce", styles: "box-sizing:border-box;font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-sys-font-weight-medium);line-height:var(--cnvs-base-line-height-100);font-size:var(--cnvs-base-font-size-75);letter-spacing:var(--cnvs-base-letter-spacing-150);color:var(--cnvs-sys-color-text-default);padding-inline-start:var(--cnvs-sys-space-zero);margin-bottom:var(--cnvs-sys-space-x1);display:flex;align-items:center;min-width:11.25rem;" },
-    modifiers: {
-        orientation: {
-            horizontal: { name: "ccfa06", styles: "float:left;max-height:var(--cnvs-sys-space-x10);" },
-            vertical: { name: "87ba29", styles: "width:100%;" }
-        },
-        variant: {
-            error: { name: "3296af", styles: "color:var(--cnvs-sys-color-text-critical-default);" },
-            hint: { name: "d58a54", styles: "color:var(--cnvs-sys-color-text-hint);" },
-            inverse: { name: "447f36", styles: "color:var(--cnvs-sys-color-text-inverse);" }
-        },
-        disabled: {
-            true: { name: "269a41", styles: "cursor:default;color:var(--cnvs-sys-color-text-disabled);" }
-        }
-    },
-    compound: [
-        {
-            modifiers: { variant: 'inverse', disabled: true },
-            styles: { name: "a1f92a", styles: "opacity:var(--cnvs-sys-opacity-disabled);color:var(--cnvs-sys-color-text-inverse);" }
-        }
-    ]
-}, "form-field-label-4d554f");
+const hooks_1 = require("./hooks");
+const formFieldStencil_1 = require("./formFieldStencil");
+exports.formFieldLabelStencil = canvas_kit_styling_1.createStencil({
+    extends: text_1.textStencil,
+    // @ts-ignore Still weird about CSS variables
+    base: { name: "925c8d", 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);margin-bottom:var(--cnvs-sys-space-x1);display:flex;align-items:center;min-width:11.25rem;.mea419a :where(&){&::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);}}.m33728f :where(&){float:left;max-height:var(--cnvs-sys-space-x10);}.m185604 :where(&){width:100%;}" },
+    defaultModifiers: {
+        typeLevel: 'subtext.large',
+    }
+}, "form-field-label-b9c77f");
 exports.FormFieldLabel = common_1.createSubcomponent('label')({
     displayName: 'FormField.Label',
     modelHook: hooks_1.useFormFieldModel,
     elemPropsHook: hooks_1.useFormFieldLabel,
-})(({ children, disabled, variant, ...elemProps }, Element, model) => {
-    return (react_1.default.createElement(Element, Object.assign({}, layout_1.mergeStyles(elemProps, [
-        formFieldLabelStencil({ orientation: model.state.orientation, disabled, variant }),
-    ])),
-        children,
-        model.state.isRequired && (react_1.default.createElement("span", Object.assign({ "aria-hidden": "true" }, formFieldLabelAsteriskStencil()), "*"))));
+})(({ children, typeLevel, variant, ...elemProps }, Element) => {
+    return (react_1.default.createElement(Element, Object.assign({}, layout_1.mergeStyles(elemProps, exports.formFieldLabelStencil({ typeLevel, variant }))), children));
 });

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

@@ -0,0 +1,29 @@
+export declare const formFieldStencil: import("@workday/canvas-kit-styling").Stencil<{
+    grow: {
+        true: {
+            width: string;
+            '[data-width="ck-formfield-width"]': {
+                width: string;
+            };
+        };
+    };
+    orientation: {
+        horizontal: {
+            flexDirection: "row";
+            gap: "--cnvs-sys-space-x8";
+        };
+        vertical: {
+            flexDirection: "column";
+            gap: "--cnvs-sys-space-x1";
+            alignItems: "flex-start";
+        };
+    };
+    required: {
+        true: {};
+    };
+    error: {
+        error: {};
+        alert: {};
+    };
+}, {}, never, never>;
+//# sourceMappingURL=formFieldStencil.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"formFieldStencil.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/formFieldStencil.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;oBAsC3B,CAAC"}