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

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

@@ -1,71 +1,152 @@
-import * as React from 'react';
-import { GrowthBehavior, ErrorType, Themeable } from '@workday/canvas-kit-react/common';
-import { FormFieldLabelPosition } from './types';
-/**
- * @deprecated ⚠️ `FormFieldProps` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead.
- */
-export interface FormFieldProps extends Themeable, React.HTMLAttributes<HTMLDivElement>, GrowthBehavior {
-    /**
-     * The position of the FormField label.
-     * @default FormField.FormFieldLabelPosition.Top
-     */
-    labelPosition?: FormFieldLabelPosition;
-    /**
-     * The text of the FormField label.
-     */
-    label?: React.ReactNode;
-    /**
-     * The text of the message displayed below the input component. This is required if `error` is defined.
-     */
-    hintText?: React.ReactNode;
-    /**
-     * The HTML `id` of the message displayed below the input component. This is required for the `aria-describedby` accessibility attribute if `error` and `hintText` are defined.
-     */
-    hintId?: string;
-    /**
-     * The HTML `id` of the input component. If an `id` is not specified for the input, this will be used as it's `id`. This is referenced by the label's `htmlFor` attribute. This is required for accessiblity if `label` is defined.
-     */
-    inputId?: string;
+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 type of error associated with the FormField (if applicable). This is passed to the input component.
+     * The direction the child elements should stack. In v13, `horizontal` will be removed. Please use `horizontalStart` or `horizontalEnd` for horizontal alignment.
+     * @default vertical
      */
-    error?: ErrorType;
+    orientation?: 'vertical' | 'horizontalStart' | 'horizontalEnd' | 'horizontal';
+    children: React.ReactNode;
+}
+/**
+ * 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.
+ *
+ * ```tsx
+ * <FormField>
+ *    <FormField.Label>First Name</FormField.Label>
+ *    <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;
+    id: string;
+    isRequired: boolean;
+    orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
+}> & {} & {}, {
+    state: {
+        id: string;
+        error: "alert" | "error" | undefined;
+        isRequired: boolean;
+        orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
+    };
+    events: {};
+}> & {
     /**
-     * If true, style the FormField label to indicate that it is required.
-     * @default false
+     * `FormField.Input` will render any `inputs` passed to it via the `as` prop, including `TextInput`, `Select`, `Switch`, `TextArea`, `RadioGroup` or any custom input.
+     * `FromField.Input` will be associated with `FormField.Label` and `FormField.Hint` by a generated `id`. You can customize this `id` by passing `id` to `FormField`.
+     *
+     * **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
+     *  <FormField id='my-unique-id'>
+     *    <FormField.Label>My Label Text</FormField.Label>
+     *    <FormField.Input as={TextInput} onChange={(e) => console.log(e)} />
+     *  <FormField>
+     * ```
      */
-    required?: boolean;
+    Input: import("@workday/canvas-kit-react/common").ElementComponentM<"input", import("@workday/canvas-kit-react/layout").BackgroundStyleProps & import("../../layout/lib/utils/border/color").BorderColorStyleProps & import("../../layout/lib/utils/border/lineStyle").BorderLineStyleProps & import("../../layout/lib/utils/border/radius").BorderRadiusStyleProps & import("../../layout/lib/utils/border/shorthand").BorderShorthandStyleProps & import("../../layout/lib/utils/border/width").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").ColorStyleProps & import("@workday/canvas-kit-react/layout").DepthStyleProps & import("@workday/canvas-kit-react/layout").FlexItemStyleProps & import("@workday/canvas-kit-react/layout").GridItemStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStyleProps & import("@workday/canvas-kit-react/layout").SpaceStyleProps & import("@workday/canvas-kit-react/layout").TextStyleProps & import("@workday/canvas-kit-styling").CSProps, {
+        state: {
+            id: string;
+            error: "alert" | "error" | undefined;
+            isRequired: boolean;
+            orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
+        };
+        events: {};
+    }>;
     /**
-     * If true, render the FormField using a `fieldset` and a `legend` instead of a `div` and a `label`. This must be set to `true` if you're using a Radio Group inside of a FormField (for accessibility reasons).
-     * @default false
+     * `FormField.Label` will render a `label` element that has a matching `id` to the `FormField.Input`.
+     *
+     * ```tsx
+     * <FormField>
+     *    <FormField.Label>First Name</FormField.Label>
+     *    <FormField.Input as={TextInput} value={value} onChange={(e) => console.log(e)} />
+     *  </FormField>
+     * ```
+     *
+     * @stencil formFieldLabelStencil
      */
-    useFieldset?: boolean;
+    Label: import("@workday/canvas-kit-react/common").ElementComponentM<"label", import("./FormFieldLabel").FormFieldLabelProps, {
+        state: {
+            id: string;
+            error: "alert" | "error" | undefined;
+            isRequired: boolean;
+            orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
+        };
+        events: {};
+    }>;
     /**
-     * The input component wrapped by the FormField.
+     * `FormField.Hint` will render any additional information you want to provide to the `FormField.Input`. If you
+     * set the `orientation` prop to `horizontal` you should use `FormField.Field` to properly align the hint with your `FormField.Input`.
+     *
+     * ```tsx
+     * <FormField>
+     *    <FormField.Label>First Name</FormField.Label>
+     *    <FormField.Input as={TextInput} value={value} onChange={(e) => console.log(e)} />
+     *    <FormField.Hint>This is your hint text</FormField.Hint>
+     *  </FormField>
+     * ```
+     *
+     * @stencil formFieldHintStencil
      */
-    children: React.ReactNode;
+    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: {};
+    }>;
     /**
-     * The label for the error message hint text if `hintText` and `error` are defined. This prop should only be used for translating the default string 'Error'.
-     * @default 'Error'
+     * `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.
      */
-    errorLabel?: string;
+    Container: 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: {};
+    }>;
     /**
-     * The label for the alert message hint text if `hintText` and `error` are defined. This prop should only be used for translating the default string 'Alert'.
-     * @default 'Alert'
+     * `FormField.Field` allows you to customize container alignment and styles when wrapping your input and hint text.
+     * ```tsx
+     * <FormField orientation="horizontal">
+     *    <FormField.Label>First Name</FormField.Label>
+     *    <FormField.Field>
+     *      <FormField.Input as={TextInput} value={value} onChange={(e) => console.log(e)} />
+     *      <FormField.Hint>This is your hint text</FormField.Hint>
+     *    </FormField.Field>
+     *  </FormField>
+     * ```
      */
-    alertLabel?: string;
-}
-export interface FormFieldErrorBehavior {
-    error?: ErrorType;
-}
-/**
- * @deprecated ⚠️ `FormField` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead.
- */
-export declare class FormField extends React.Component<React.PropsWithChildren<FormFieldProps>> {
-    static LabelPosition: typeof FormFieldLabelPosition;
-    static ErrorType: typeof ErrorType;
-    private inputId;
-    private renderChildren;
-    render(): JSX.Element;
-}
+    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=FormField.d.ts.map

package/dist/es6/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,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACL,cAAc,EACd,SAAS,EAET,SAAS,EAEV,MAAM,kCAAkC,CAAC;AAG1C,OAAO,EAAC,sBAAsB,EAAiC,MAAM,SAAS,CAAC;AAC/E;;GAEG;AACH,MAAM,WAAW,cACf,SAAQ,SAAS,EACf,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,cAAc;IAChB;;;OAGG;IACH,aAAa,CAAC,EAAE,sBAAsB,CAAC;IACvC;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,sBAAsB;IACrC,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAoED;;GAEG;AACH,qBAAa,SAAU,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAAC;IACrF,MAAM,CAAC,aAAa,gCAA0B;IAC9C,MAAM,CAAC,SAAS,mBAAa;IAE7B,OAAO,CAAC,OAAO,CAAoD;IAEnE,OAAO,CAAC,cAAc,CAkCpB;IAEF,MAAM;CAgEP"}
+{"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;AAWxE,MAAM,WAAW,cAAe,SAAQ,SAAS,EAAE,cAAc;IAC/D;;;OAGG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,iBAAiB,GAAG,eAAe,GAAG,YAAY,CAAC;IAC9E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;IAIlB;;;;;;;;;;;;OAYG;;;;;;;;;;IAEH;;;;;;;;;;;OAWG;;;;;;;;;;IAEH;;;;;;;;;;;;;OAaG;;;;;;;;;;IAEH;;;;;;;;;;;;;;;OAeG;;;;;;;;;;IAEH;;;;;;;;;;;OAWG;;;;;;;;;;CA6BL,CAAC"}

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

@@ -1,110 +1,114 @@
-import * as React from 'react';
-import { space } from '@workday/canvas-kit-react/tokens';
-import { ErrorType, styled, generateUniqueId, } from '@workday/canvas-kit-react/common';
-import { Hint } from './Hint';
-import { Label } from './Label';
-import { FormFieldLabelPosition } from './types';
-// Use a fieldset element for accessible radio groups
-const FormFieldFieldsetContainer = styled('fieldset')(({ grow, labelPosition }) => ({
-    display: labelPosition === FormFieldLabelPosition.Top ? 'inline-block' : 'flex',
-    flexGrow: grow ? 1 : undefined,
-    padding: 0,
-    border: 0,
-    margin: 0,
-    marginBottom: space.m,
-}));
-const FormFieldContainer = styled('div')(({ labelPosition, useFieldset, grow }) => {
-    if (useFieldset) {
-        return {
-            display: 'flex',
-        };
-    }
-    if (labelPosition === FormFieldLabelPosition.Left) {
-        return {
-            display: 'flex',
-            marginBottom: space.m,
-        };
-    }
-    return {
-        display: 'block',
-        marginBottom: space.m,
-        width: grow ? '100%' : 'inherit',
-    };
-});
-const FormFieldInputContainer = styled('div')(({ grow, labelPosition }) => {
-    if (grow) {
-        if (labelPosition === FormFieldLabelPosition.Left ||
-            labelPosition === FormFieldLabelPosition.Hidden) {
-            return {
-                flexGrow: 1,
-            };
-        }
-        return {
-            width: '100%',
-            display: 'block',
-        };
-    }
-    if (labelPosition === FormFieldLabelPosition.Left) {
-        return {
-            display: 'inline-flex',
-            alignItems: 'center',
-            flexWrap: 'wrap',
-        };
-    }
-    return {
-        display: 'inline-block',
-    };
-});
+import React from 'react';
+import { createContainer } from '@workday/canvas-kit-react/common';
+import { mergeStyles } from '@workday/canvas-kit-react/layout';
+import { useFormFieldModel } from './hooks';
+import { FormFieldInput } from './FormFieldInput';
+import { FormFieldLabel } from './FormFieldLabel';
+import { FormFieldHint } from './FormFieldHint';
+import { FormFieldContainer } from './FormFieldContainer';
+import { formFieldStencil } from './formFieldStencil';
+import { FormFieldField } from './FormFieldField';
 /**
- * @deprecated ⚠️ `FormField` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead.
+ * 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.
+ *
+ * ```tsx
+ * <FormField>
+ *    <FormField.Label>First Name</FormField.Label>
+ *    <FormField.Input as={TextInput} value={value} onChange={(e) => console.log(e)} />
+ *  </FormField>
+ * ```
+ *
+ * @stencil formFieldStencil
  */
-export class FormField extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.inputId = this.props.inputId || generateUniqueId();
-        this.renderChildren = (child) => {
-            if (React.isValidElement(child)) {
-                const props = {
-                    ...child.props,
-                };
-                if (this.props.grow) {
-                    props.grow = this.props.grow;
-                }
-                if (typeof this.props.error !== 'undefined') {
-                    props.error = this.props.error;
-                    if (this.props.error === ErrorType.Error) {
-                        props['aria-invalid'] = true;
-                    }
-                }
-                if (this.props.hintId) {
-                    props['aria-describedby'] = this.props.hintId;
-                }
-                if (this.props.required) {
-                    props.required = true;
-                }
-                props.id = this.inputId;
-                return React.cloneElement(child, props);
-            }
-            return child;
-        };
-    }
-    render() {
-        const { errorLabel = 'Error', alertLabel = 'Alert', useFieldset = false, labelPosition = FormField.LabelPosition.Top, label, hintText, hintId, inputId, grow, children, error, required, ...elemProps } = this.props;
-        const field = (React.createElement(React.Fragment, null,
-            typeof label === 'string' ? (React.createElement(Label, { labelPosition: labelPosition, htmlFor: this.inputId, isLegend: useFieldset, required: required, accessibleHide: labelPosition === FormFieldLabelPosition.Hidden }, label)) : (label),
-            React.createElement(FormFieldInputContainer, { grow: grow, labelPosition: labelPosition },
-                React.Children.map(children, this.renderChildren),
-                hintText && (React.createElement(Hint, { errorLabel: errorLabel, alertLabel: alertLabel, error: error, id: hintId }, hintText)))));
-        if (useFieldset) {
-            return (React.createElement(FormFieldContainer, Object.assign({ useFieldset: useFieldset, labelPosition: labelPosition }, elemProps),
-                React.createElement(FormFieldFieldsetContainer, { grow: grow, labelPosition: labelPosition }, field)));
-        }
-        else {
-            return (React.createElement(FormFieldContainer, Object.assign({ useFieldset: useFieldset, labelPosition: labelPosition, grow: grow }, elemProps), field));
+export const FormField = createContainer('div')({
+    displayName: 'FormField',
+    modelHook: useFormFieldModel,
+    subComponents: {
+        /**
+         * `FormField.Input` will render any `inputs` passed to it via the `as` prop, including `TextInput`, `Select`, `Switch`, `TextArea`, `RadioGroup` or any custom input.
+         * `FromField.Input` will be associated with `FormField.Label` and `FormField.Hint` by a generated `id`. You can customize this `id` by passing `id` to `FormField`.
+         *
+         * **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
+         *  <FormField id='my-unique-id'>
+         *    <FormField.Label>My Label Text</FormField.Label>
+         *    <FormField.Input as={TextInput} onChange={(e) => console.log(e)} />
+         *  <FormField>
+         * ```
+         */
+        Input: FormFieldInput,
+        /**
+         * `FormField.Label` will render a `label` element that has a matching `id` to the `FormField.Input`.
+         *
+         * ```tsx
+         * <FormField>
+         *    <FormField.Label>First Name</FormField.Label>
+         *    <FormField.Input as={TextInput} value={value} onChange={(e) => console.log(e)} />
+         *  </FormField>
+         * ```
+         *
+         * @stencil formFieldLabelStencil
+         */
+        Label: FormFieldLabel,
+        /**
+         * `FormField.Hint` will render any additional information you want to provide to the `FormField.Input`. If you
+         * set the `orientation` prop to `horizontal` you should use `FormField.Field` to properly align the hint with your `FormField.Input`.
+         *
+         * ```tsx
+         * <FormField>
+         *    <FormField.Label>First Name</FormField.Label>
+         *    <FormField.Input as={TextInput} value={value} onChange={(e) => console.log(e)} />
+         *    <FormField.Hint>This is your hint text</FormField.Hint>
+         *  </FormField>
+         * ```
+         *
+         * @stencil formFieldHintStencil
+         */
+        Hint: 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,
+        /**
+         * `FormField.Field` allows you to customize container alignment and styles when wrapping your input and hint text.
+         * ```tsx
+         * <FormField orientation="horizontal">
+         *    <FormField.Label>First Name</FormField.Label>
+         *    <FormField.Field>
+         *      <FormField.Input as={TextInput} value={value} onChange={(e) => console.log(e)} />
+         *      <FormField.Hint>This is your hint text</FormField.Hint>
+         *    </FormField.Field>
+         *  </FormField>
+         * ```
+         */
+        Field: FormFieldField,
+    },
+})(({ children, grow, orientation, ...elemProps }, Element, model) => {
+    // TODO: Remove this warning in v13 once we remove horizontal support in favor of horizontalStart and horizontalEnd.
+    if (process.env.NODE_ENV === 'development') {
+        if (orientation === 'horizontal') {
+            console.warn('FormField: Orientation option of "horizontal" is deprecated and will be removed in v13. Please update your types and value to use the string literal of "horizontalStart". The following values will be accepted in v13: "horizontalStart" | "horizontalEnd" | "vertical".');
         }
     }
-}
-FormField.LabelPosition = FormFieldLabelPosition;
-FormField.ErrorType = ErrorType;
-FormField.LabelPosition = FormFieldLabelPosition;
-FormField.ErrorType = ErrorType;
+    return (React.createElement(Element, { ...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/FormFieldContainer.d.ts

@@ -0,0 +1,18 @@
+import { CSProps } from '@workday/canvas-kit-styling';
+/**
+ * @deprecated `formFieldContainerStencil` is deprecated and will be removed in a future major version. Please use `FormField.Field` to always wrap `FormField.Input` and `FormField.Hint` to always ensure correct label and input alignment.
+ */
+export declare const formFieldContainerStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, never>, {}, never, never>;
+/**
+ * @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.
+ */
+export declare const FormFieldContainer: import("@workday/canvas-kit-react/common").ElementComponentM<"div", CSProps, {
+    state: {
+        id: string;
+        error: "alert" | "error" | undefined;
+        isRequired: boolean;
+        orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
+    };
+    events: {};
+}>;
+//# sourceMappingURL=FormFieldContainer.d.ts.map

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

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

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { createSubcomponent } from '@workday/canvas-kit-react/common';
+import { handleCsProp, createStencil } from '@workday/canvas-kit-styling';
+import { useFormFieldModel } from './hooks';
+import { system } from '@workday/canvas-tokens-web';
+/**
+ * @deprecated `formFieldContainerStencil` is deprecated and will be removed in a future major version. Please use `FormField.Field` to always wrap `FormField.Input` and `FormField.Hint` to always ensure correct label and input alignment.
+ */
+export const formFieldContainerStencil = createStencil({
+    base: { name: "hbbc4a", styles: "box-sizing:border-box;display:flex;flex-direction:column;gap:var(--cnvs-sys-space-x2);" }
+}, "form-field-container-b7ba71");
+/**
+ * @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.
+ */
+export const FormFieldContainer = createSubcomponent('div')({
+    displayName: 'FormField.Container',
+    modelHook: useFormFieldModel,
+})((elemProps, Element, model) => {
+    return (React.createElement(Element, { "data-width": "ck-formfield-width", ...handleCsProp(elemProps, formFieldContainerStencil()) }));
+});

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

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

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

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

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { createSubcomponent } from '@workday/canvas-kit-react/common';
+import { handleCsProp, createStencil } from '@workday/canvas-kit-styling';
+import { useFormFieldModel } from './hooks';
+import { system } from '@workday/canvas-tokens-web';
+export const formFieldFieldStencil = createStencil({
+    base: { name: "hbbc4j", styles: "box-sizing:border-box;display:flex;flex-direction:column;gap:var(--cnvs-sys-space-x2);" }
+}, "form-field-field-fc001f");
+export const FormFieldField = createSubcomponent('div')({
+    displayName: 'FormField.Field',
+    modelHook: useFormFieldModel,
+})((elemProps, Element, model) => {
+    return (React.createElement(Element, { "data-width": "ck-formfield-width", ...handleCsProp(elemProps, formFieldFieldStencil()) }));
+});