@workday/canvas-kit-react 12.0.0-alpha.862-next.0 → 12.0.0-alpha.898-next.0

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

@@ -0,0 +1,152 @@
+import React from 'react';
+import { GrowthBehavior } from '@workday/canvas-kit-react/common';
+import { FlexProps } from '@workday/canvas-kit-react/layout';
+export interface FormFieldGroupProps extends FlexProps, GrowthBehavior {
+    /**
+     * The direction the child elements should stack. In v13, `horizontal` will be removed. Please use `horizontalStart` or `horizontalEnd` for horizontal alignment.
+     * @default vertical
+     */
+    orientation?: 'vertical' | 'horizontalStart' | 'horizontalEnd' | 'horizontal';
+    children: React.ReactNode;
+}
+/**
+ * Use `FormFieldGroup` to wrap a group of inputs to make them accessible.
+ *
+ * ```tsx
+ * <FormFieldGroup>
+ *    <FormFieldGroup.Label>Choose a Pet</FormFieldGroup.Label>
+ *    <FormFiledGroup.Field>
+ *      <FormFieldGroup.List as={RadioGroup} />
+ *        <FromFieldGroup.Input as={RadioGroup.RadioButton} value='dog'>Dog</FormFieldGroup.Input>
+ *        <FromFieldGroup.Input as={RadioGroup.RadioButton} value='cat'>Cat</FormFieldGroup.Input>
+ *      </FormFieldGroup.List>
+ *    </FormFieldGroup.Field>
+ * </FormFieldGroup>
+ * ```
+ *
+ * @stencil formFieldStencil
+ */
+export declare const FormFieldGroup: import("@workday/canvas-kit-react/common").ElementComponentM<"div", FormFieldGroupProps & Partial<{
+    error: "alert" | "error" | undefined;
+    id: string;
+    isRequired: boolean;
+    orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
+}> & {} & {}, {
+    state: {
+        id: string;
+        error: "alert" | "error" | undefined;
+        isRequired: boolean;
+        orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
+    };
+    events: {};
+}> & {
+    /**
+     * `FormFieldGroup.Input` will render any `inputs` passed to it via the `as` prop. Use this component with checkboxes or radio inputs.
+     * `FormFieldGroup.Input` will apply `aria-invalid` when there is an error on `FromFieldGroup` or `aria-describedby` when an `id` is added on the `FormFieldGroup`.
+     *
+     * **Note: If you pass in a custom input that is *not* as Canvas Kit input, you will have to handle the `error` prop, validation and styling. For a custom approach, reference our Custom storybook example.**
+     *
+     * ```tsx
+     * <FormFieldGroup>
+     *    <FormField.Label>Choose a Pet</FormField.Label>
+     *    <FormFieldGroup.List as={RadioGroup} />
+     *      <FromFieldGroup.Input as={RadioGroup.RadioButton} value='dog'>Dog</FormFieldGroup.Input>
+     *      <FromFieldGroup.Input as={RadioGroup.RadioButton} value='cat'>Cat</FormFieldGroup.Input>
+     *    </FormFieldGroup.List>
+     * </FormFieldGroup>
+     * ```
+     */
+    Input: import("@workday/canvas-kit-react/common").ElementComponentM<"input", import("./FormFieldGroupInput").FormFieldGroupInputProps, {
+        state: {
+            id: string;
+            error: "alert" | "error" | undefined;
+            isRequired: boolean;
+            orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
+        };
+        events: {};
+    }>;
+    /**
+     * `FormFieldGroup.Label` this element labels the contents of the group of inputs..
+     *
+     * ```tsx
+     * <FormFieldGroup>
+     *    <FormFieldGroup.Label>Choose a pet</FormFieldGroup.Label>
+     *    //...
+     *  </FormFieldGroup>
+     * ```
+     *
+     * @stencil formFieldLabelStencil
+     */
+    Label: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("./FormFieldGroupLabel").FormFieldGroupLabelProps, {
+        state: {
+            id: string;
+            error: "alert" | "error" | undefined;
+            isRequired: boolean;
+            orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
+        };
+        events: {};
+    }>;
+    /**
+     * `FormFieldGroup.List` will render a `div`. This element is used to apply the visual error states around the group of inputs. It's contents will be your inputs.
+     */
+    List: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("./FormFieldGroupList").FormFieldGroupListProps, {
+        state: {
+            id: string;
+            error: "alert" | "error" | undefined;
+            isRequired: boolean;
+            orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
+        };
+        events: {};
+    }>;
+    /**
+     * `FormFieldGroup.Hint` will render any additional information you want to provide to the `FormFieldGroup`.
+     *
+     * ```tsx
+     * <FormFieldGroup>
+     *    <FormFieldGroup.Label>Choose a pet</FormFieldGroup.Label>
+     *    <FormFieldGroup.List>
+     *      //...
+     *    <FormFieldGroup.List>
+     *    <FormField.Hint>This is your hint text</FormField.Hint>
+     *  </FormFieldGroup>
+     * ```
+     *
+     * @stencil formFieldHintStencil
+     */
+    Hint: import("@workday/canvas-kit-react/common").ElementComponentM<"p", import("../..").TextProps, {
+        state: {
+            id: string;
+            error: "alert" | "error" | undefined;
+            isRequired: boolean;
+            orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
+        };
+        events: {};
+    }>;
+    /**
+     * `FormFieldGroup.Field` allows you to properly align the legend to the group of inputs.
+     *
+     * ```tsx
+     * <FormFieldGroup orientation="horizontalStart">
+     *    <FormFieldGroup.Label>Choose a pet</FormFieldGroup.Label>
+     *    <FormFieldGroup.Field>
+     *      <FormFieldGroup.List>
+     *        <FromFieldGroup.Input as={RadioGroup.RadioButton} value='dog'>Dog</FormFieldGroup.Input>
+     *        <FromFieldGroup.Input as={RadioGroup.RadioButton} value='cat'>Cat</FormFieldGroup.Input>
+     *      </FormFieldGroup.List>
+     *      <FormFieldGroup.Hint>This is your hint text</FormField.Hint>
+     *    </FormFieldGroup.Field>
+     *  </FormFieldGroup>
+     * ```
+     *
+     */
+    Field: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("@workday/canvas-kit-styling").CSProps, {
+        state: {
+            id: string;
+            error: "alert" | "error" | undefined;
+            isRequired: boolean;
+            orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
+        };
+        events: {};
+    }>;
+};
+//# sourceMappingURL=FormFieldGroup.d.ts.map

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

@@ -0,0 +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,GAAG,YAAY,CAAC;IAC9E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;IAIvB;;;;;;;;;;;;;;;OAeG;;;;;;;;;;IAEH;;;;;;;;;;;OAWG;;;;;;;;;;IAEH;;OAEG;;;;;;;;;;IAEH;;;;;;;;;;;;;;OAcG;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;OAgBG;;;;;;;;;;CAsBL,CAAC"}

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

@@ -0,0 +1,107 @@
+import React from 'react';
+import { createContainer } from '@workday/canvas-kit-react/common';
+import { mergeStyles } from '@workday/canvas-kit-react/layout';
+import { FormFieldGroupList } from './FormFieldGroupList';
+import { FormFieldGroupInput } from './FormFieldGroupInput';
+import { FormFieldGroupLabel } from './FormFieldGroupLabel';
+import { FormField } from './FormField';
+import { useFormFieldModel } from './hooks';
+import { formFieldStencil } from './formFieldStencil';
+/**
+ * Use `FormFieldGroup` to wrap a group of inputs to make them accessible.
+ *
+ * ```tsx
+ * <FormFieldGroup>
+ *    <FormFieldGroup.Label>Choose a Pet</FormFieldGroup.Label>
+ *    <FormFiledGroup.Field>
+ *      <FormFieldGroup.List as={RadioGroup} />
+ *        <FromFieldGroup.Input as={RadioGroup.RadioButton} value='dog'>Dog</FormFieldGroup.Input>
+ *        <FromFieldGroup.Input as={RadioGroup.RadioButton} value='cat'>Cat</FormFieldGroup.Input>
+ *      </FormFieldGroup.List>
+ *    </FormFieldGroup.Field>
+ * </FormFieldGroup>
+ * ```
+ *
+ * @stencil formFieldStencil
+ */
+export const FormFieldGroup = createContainer('div')({
+    displayName: 'FormFieldGroup',
+    modelHook: useFormFieldModel,
+    subComponents: {
+        /**
+         * `FormFieldGroup.Input` will render any `inputs` passed to it via the `as` prop. Use this component with checkboxes or radio inputs.
+         * `FormFieldGroup.Input` will apply `aria-invalid` when there is an error on `FromFieldGroup` or `aria-describedby` when an `id` is added on the `FormFieldGroup`.
+         *
+         * **Note: If you pass in a custom input that is *not* as Canvas Kit input, you will have to handle the `error` prop, validation and styling. For a custom approach, reference our Custom storybook example.**
+         *
+         * ```tsx
+         * <FormFieldGroup>
+         *    <FormField.Label>Choose a Pet</FormField.Label>
+         *    <FormFieldGroup.List as={RadioGroup} />
+         *      <FromFieldGroup.Input as={RadioGroup.RadioButton} value='dog'>Dog</FormFieldGroup.Input>
+         *      <FromFieldGroup.Input as={RadioGroup.RadioButton} value='cat'>Cat</FormFieldGroup.Input>
+         *    </FormFieldGroup.List>
+         * </FormFieldGroup>
+         * ```
+         */
+        Input: FormFieldGroupInput,
+        /**
+         * `FormFieldGroup.Label` this element labels the contents of the group of inputs..
+         *
+         * ```tsx
+         * <FormFieldGroup>
+         *    <FormFieldGroup.Label>Choose a pet</FormFieldGroup.Label>
+         *    //...
+         *  </FormFieldGroup>
+         * ```
+         *
+         * @stencil formFieldLabelStencil
+         */
+        Label: FormFieldGroupLabel,
+        /**
+         * `FormFieldGroup.List` will render a `div`. This element is used to apply the visual error states around the group of inputs. It's contents will be your inputs.
+         */
+        List: FormFieldGroupList,
+        /**
+         * `FormFieldGroup.Hint` will render any additional information you want to provide to the `FormFieldGroup`.
+         *
+         * ```tsx
+         * <FormFieldGroup>
+         *    <FormFieldGroup.Label>Choose a pet</FormFieldGroup.Label>
+         *    <FormFieldGroup.List>
+         *      //...
+         *    <FormFieldGroup.List>
+         *    <FormField.Hint>This is your hint text</FormField.Hint>
+         *  </FormFieldGroup>
+         * ```
+         *
+         * @stencil formFieldHintStencil
+         */
+        Hint: FormField.Hint,
+        /**
+         * `FormFieldGroup.Field` allows you to properly align the legend to the group of inputs.
+         *
+         * ```tsx
+         * <FormFieldGroup orientation="horizontalStart">
+         *    <FormFieldGroup.Label>Choose a pet</FormFieldGroup.Label>
+         *    <FormFieldGroup.Field>
+         *      <FormFieldGroup.List>
+         *        <FromFieldGroup.Input as={RadioGroup.RadioButton} value='dog'>Dog</FormFieldGroup.Input>
+         *        <FromFieldGroup.Input as={RadioGroup.RadioButton} value='cat'>Cat</FormFieldGroup.Input>
+         *      </FormFieldGroup.List>
+         *      <FormFieldGroup.Hint>This is your hint text</FormField.Hint>
+         *    </FormFieldGroup.Field>
+         *  </FormFieldGroup>
+         * ```
+         *
+         */
+        Field: FormField.Field,
+    },
+})(({ children, grow, orientation, ...elemProps }, Element, model) => {
+    return (React.createElement(Element, { "aria-labelledby": model.state.id, role: "group", ...mergeStyles(elemProps, formFieldStencil({
+            grow,
+            orientation: model.state.orientation === 'horizontal' ? 'horizontalStart' : model.state.orientation,
+            error: model.state.error,
+            required: model.state.isRequired,
+        })) }, children));
+});

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

@@ -0,0 +1,29 @@
+import { CSProps } from '@workday/canvas-kit-styling';
+export interface FormFieldGroupInputProps extends CSProps {
+}
+/**
+ * Adds the necessary props to an `Input` component for grouped inputs.
+ */
+export declare const useFormFieldGroupInput: import("@workday/canvas-kit-react/common").BehaviorHook<{
+    state: {
+        id: string;
+        error: "alert" | "error" | undefined;
+        isRequired: boolean;
+        orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
+    };
+    events: {};
+}, {
+    'aria-invalid': boolean | undefined;
+    'aria-describedby': string | undefined;
+    'aria-required': boolean | undefined;
+}>;
+export declare const FormFieldGroupInput: import("@workday/canvas-kit-react/common").ElementComponentM<"input", FormFieldGroupInputProps, {
+    state: {
+        id: string;
+        error: "alert" | "error" | undefined;
+        isRequired: boolean;
+        orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
+    };
+    events: {};
+}>;
+//# sourceMappingURL=FormFieldGroupInput.d.ts.map

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

@@ -0,0 +1 @@
+{"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/es6/form-field/lib/FormFieldGroupInput.js

@@ -0,0 +1,21 @@
+import { createElemPropsHook, createSubcomponent } from '@workday/canvas-kit-react/common';
+import { handleCsProp } from '@workday/canvas-kit-styling';
+import React from 'react';
+import { useFormFieldModel } from './hooks';
+/**
+ * Adds the necessary props to an `Input` component for grouped inputs.
+ */
+export const useFormFieldGroupInput = createElemPropsHook(useFormFieldModel)(({ state }) => {
+    return {
+        'aria-invalid': state.error === 'error' ? true : undefined,
+        'aria-describedby': state.id ? `hint-${state.id}` : undefined,
+        'aria-required': state.isRequired ? true : undefined,
+    };
+});
+export const FormFieldGroupInput = createSubcomponent('input')({
+    displayName: 'FormField.Input',
+    modelHook: useFormFieldModel,
+    elemPropsHook: useFormFieldGroupInput,
+})((elemProps, Element) => {
+    return React.createElement(Element, { ...handleCsProp(elemProps) });
+});

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

@@ -0,0 +1,123 @@
+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';
+export interface FormFieldGroupLabelProps extends FlexProps, Omit<ExtractProps<typeof Text, never>, 'display'> {
+    /**
+     * The text of the label.
+     */
+    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<{
+    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 FormFieldGroupLabel: import("@workday/canvas-kit-react/common").ElementComponentM<"div", FormFieldGroupLabelProps, {
+    state: {
+        id: string;
+        error: "alert" | "error" | undefined;
+        isRequired: boolean;
+        orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
+    };
+    events: {};
+}>;
+//# sourceMappingURL=FormFieldGroupLabel.d.ts.map

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

@@ -0,0 +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;AAKxE,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4BA4CrC,CAAC;AAEH,eAAO,MAAM,mBAAmB;;;;;;;;EAsB9B,CAAC"}

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import { createSubcomponent } from '@workday/canvas-kit-react/common';
+import { createStencil, px2rem } from '@workday/canvas-kit-styling';
+import { textStencil } from '@workday/canvas-kit-react/text';
+import { mergeStyles } from '@workday/canvas-kit-react/layout';
+import { brand, system } from '@workday/canvas-tokens-web';
+import { useFormFieldLabel, useFormFieldModel } from './hooks';
+export const formFieldGroupLabelStencil = createStencil({
+    extends: textStencil,
+    // @ts-ignore Still weird about CSS font variables
+    base: { name: "hbbc4n", 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: "hbbc4o", 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: "hbbc4p", styles: "width:100%;" },
+            horizontalStart: { name: "hbbc4q", styles: "justify-content:flex-start;float:left;max-height:var(--cnvs-sys-space-x10);" },
+            horizontalEnd: { name: "hbbc4r", styles: "max-height:var(--cnvs-sys-space-x10);float:left;justify-content:flex-end;" }
+        }
+    },
+    defaultModifiers: {
+        typeLevel: 'subtext.large',
+    }
+}, "form-field-group-label-a86ca3");
+export const FormFieldGroupLabel = createSubcomponent('div')({
+    displayName: 'FormFieldGroup.Label',
+    modelHook: useFormFieldModel,
+    elemPropsHook: useFormFieldLabel,
+})(({ children, typeLevel, variant, ...elemProps }, Element, model) => {
+    return (React.createElement(Element, { id: model.state.id, ...mergeStyles(elemProps, formFieldGroupLabelStencil({
+            typeLevel,
+            variant,
+            isRequired: model.state.isRequired,
+            orientation: model.state.orientation === 'horizontal' ? 'horizontalStart' : model.state.orientation,
+        })) }, children));
+});

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

@@ -0,0 +1,14 @@
+import { FlexProps } from '@workday/canvas-kit-react/layout';
+import { CSProps } from '@workday/canvas-kit-styling';
+export interface FormFieldGroupListProps extends CSProps, FlexProps {
+}
+export declare const FormFieldGroupList: import("@workday/canvas-kit-react/common").ElementComponentM<"div", FormFieldGroupListProps, {
+    state: {
+        id: string;
+        error: "alert" | "error" | undefined;
+        isRequired: boolean;
+        orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
+    };
+    events: {};
+}>;
+//# sourceMappingURL=FormFieldGroupList.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormFieldGroupList.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldGroupList.tsx"],"names":[],"mappings":"AAGA,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;AA2BtE,eAAO,MAAM,kBAAkB;;;;;;;;EAY7B,CAAC"}

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { createSubcomponent } from '@workday/canvas-kit-react/common';
+import { createStencil, calc, px2rem, handleCsProp } from '@workday/canvas-kit-styling';
+import { brand, system } from '@workday/canvas-tokens-web';
+import { useFormFieldModel } from './hooks';
+const formFieldGroupListStencil = createStencil({
+    base: { name: "hbbc4k", 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: "hbbc4l", styles: "box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-error-base);" },
+            alert: { name: "hbbc4m", 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-ea1ca7");
+export const FormFieldGroupList = createSubcomponent('div')({
+    displayName: 'FormFieldGroup.List',
+    modelHook: useFormFieldModel,
+})(({ children, ...elemProps }, Element, model) => {
+    return (React.createElement(Element, { "data-width": "ck-formfield-width", ...handleCsProp(elemProps, formFieldGroupListStencil({ error: model.state.error })) }, children));
+});

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

@@ -0,0 +1,120 @@
+export declare const formFieldHintStencil: import("@workday/canvas-kit-styling").Stencil<{
+    error: {
+        error: {
+            color: "--cnvs-brand-error-base";
+        };
+        alert: {};
+    };
+}, {}, 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;
+        isRequired: boolean;
+        orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
+    };
+    events: {};
+}>;
+//# sourceMappingURL=FormFieldHint.d.ts.map

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

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