@workday/canvas-kit-preview-react 11.0.0-alpha.633-next.0 → 11.0.0-alpha.635-next.0

package/color-picker/lib/ColorPicker.tsx

@@ -3,7 +3,7 @@ import {checkIcon} from '@workday/canvas-system-icons-web';
 import {ColorInput} from '@workday/canvas-kit-react/color-picker';
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
 import * as React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import styled from '@emotion/styled';
 
 import {ResetButton} from './parts/ColorReset';
@@ -204,8 +204,10 @@ export const ColorPicker = ({
       <SwatchBook colors={colorSet} onSelect={onColorChange} value={value} />
       {showCustomHexInput && (
         <ColorInputWrapper onSubmit={onSubmit}>
-          <ColorInputAndLabel label={customHexInputLabel}>
-            <HexColorInput
+          <ColorInputAndLabel>
+            <FormField.Label>{customHexInputLabel}</FormField.Label>
+            <FormField.Input
+              as={HexColorInput}
               onChange={onCustomHexChange}
               onValidColorChange={onValidCustomHexChange}
               value={customHexValue}

package/dist/commonjs/color-picker/lib/ColorPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../../color-picker/lib/ColorPicker.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E;;OAEG;IACH,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC;IACjD;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAsGD,eAAO,MAAM,WAAW;kKAYrB,gBAAgB;;CAoDlB,CAAC"}
+{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../../color-picker/lib/ColorPicker.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E;;OAEG;IACH,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC;IACjD;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAsGD,eAAO,MAAM,WAAW;kKAYrB,gBAAgB;;CAsDlB,CAAC"}

package/dist/commonjs/color-picker/lib/ColorPicker.js

@@ -28,7 +28,7 @@ const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
 const color_picker_1 = require("@workday/canvas-kit-react/color-picker");
 const button_1 = require("@workday/canvas-kit-react/button");
 const React = __importStar(require("react"));
-const form_field_1 = require("@workday/canvas-kit-react/form-field");
+const form_field_1 = require("@workday/canvas-kit-preview-react/form-field");
 const styled_1 = __importDefault(require("@emotion/styled"));
 const ColorReset_1 = require("./parts/ColorReset");
 const SwatchBook_1 = require("./parts/SwatchBook");
@@ -142,8 +142,9 @@ const ColorPicker = ({ colorSet = defaultColorSet, customHexInputLabel = 'Custom
         onColorReset && resetColor && (React.createElement(ColorReset_1.ResetButton, { onClick: onColorReset, resetColor: resetColor, label: resetLabel })),
         React.createElement(SwatchBook_1.SwatchBook, { colors: colorSet, onSelect: onColorChange, value: value }),
         showCustomHexInput && (React.createElement(ColorInputWrapper, { onSubmit: onSubmit },
-            React.createElement(ColorInputAndLabel, { label: customHexInputLabel },
-                React.createElement(HexColorInput, { onChange: onCustomHexChange, onValidColorChange: onValidCustomHexChange, value: customHexValue, showCheck: value === validHexValue || value === customHexValue })),
+            React.createElement(ColorInputAndLabel, null,
+                React.createElement(form_field_1.FormField.Label, null, customHexInputLabel),
+                React.createElement(form_field_1.FormField.Input, { as: HexColorInput, onChange: onCustomHexChange, onValidColorChange: onValidCustomHexChange, value: customHexValue, showCheck: value === validHexValue || value === customHexValue })),
             React.createElement(CheckButton, { "aria-label": submitLabel, icon: canvas_system_icons_web_1.checkIcon, type: "submit", disabled: disabled })))));
 };
 exports.ColorPicker = ColorPicker;

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

@@ -1,47 +1,111 @@
 import React from 'react';
 import { FlexProps } from '@workday/canvas-kit-react/layout';
 export interface FormFieldProps extends FlexProps {
-    /**
-     * Children of the Text Input. Should contain a `<FormField.Input>`, a `<FormField.Label>` and an optional `<FormField.Hint>`
-     */
     children: React.ReactNode;
-    /**
-     * The direction the child elements should stack
-     */
-    orientation: 'vertical' | 'horizontal';
 }
+/**
+ * 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`.
+ *
+ * ```tsx
+ * <FormField>
+ *    <FormField.Label>First Name</FormField.Label>
+ *    <FormField.Input as={TextInput} value={value} onChange={(e) => console.log(e)} />
+ *  </FormField>
+ * ```
+ */
 export declare const FormField: import("@workday/canvas-kit-react/common").ElementComponentM<"div", FormFieldProps & Partial<{
-    hasError: boolean;
+    error: "alert" | "error" | undefined;
+    orientation: "horizontal" | "vertical";
     id: string;
     isRequired: boolean;
 }> & {} & {}, {
     state: {
         id: string;
-        hasError: boolean;
+        error: "alert" | "error" | undefined;
+        orientation: "horizontal" | "vertical";
         isRequired: boolean;
     };
     events: {};
 }> & {
+    /**
+     * `FormField.Input` will render any `inputs` passed to it 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`.
+     *
+     * ```tsx
+     *  <FormField id='my-unique-id'>
+     *    <FormField.Label>My Label Text</FormField.Label>
+     *    <FormField.Input as={TextInput} onChange={(e) => console.log(e)} />
+     *  <FormField>
+     * ```
+     */
     Input: import("@workday/canvas-kit-react/common").ElementComponentM<"input", import("@workday/canvas-kit-react/layout").BackgroundStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/color").BorderColorStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/lineStyle").BorderLineStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/radius").BorderRadiusStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/shorthand").BorderShorthandStyleProps & import("@workday/canvas-kit-react/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;
-            hasError: boolean;
+            error: "alert" | "error" | undefined;
+            orientation: "horizontal" | "vertical";
             isRequired: boolean;
         };
         events: {};
     }>;
+    /**
+     * `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>
+     * ```
+     */
     Label: import("@workday/canvas-kit-react/common").ElementComponentM<import("@workday/canvas-kit-react/common").ElementComponent<"label", import("@workday/canvas-kit-react/text").TypeLabelProps>, import("./FormFieldLabel").FormFieldLabelProps, {
         state: {
             id: string;
-            hasError: boolean;
+            error: "alert" | "error" | undefined;
+            orientation: "horizontal" | "vertical";
             isRequired: boolean;
         };
         events: {};
     }>;
+    /**
+     * `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.Container` 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>
+     * ```
+     */
     Hint: import("@workday/canvas-kit-react/common").ElementComponentM<"p", Omit<import("@workday/canvas-kit-react/text").TypeLevelProps, "size">, {
         state: {
             id: string;
-            hasError: boolean;
+            error: "alert" | "error" | undefined;
+            orientation: "horizontal" | "vertical";
+            isRequired: boolean;
+        };
+        events: {};
+    }>;
+    /**
+     * `FormField.Container` allows you to properly center `FormField.Label` when the `orientation` is set to `horizontal` and there is hint text..
+     *
+     * ```tsx
+     * <FormField orientation="horizontal">
+     *    <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>
+     * ```
+     */
+    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;AAG1B,OAAO,EAAO,SAAS,EAAC,MAAM,kCAAkC,CAAC;AAOjE,MAAM,WAAW,cAAe,SAAQ,SAAS;IAC/C;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,WAAW,EAAE,UAAU,GAAG,YAAY,CAAC;CACxC;AAED,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgBpB,CAAC"}
+{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAO,SAAS,EAAc,MAAM,kCAAkC,CAAC;AAU9E,MAAM,WAAW,cAAe,SAAQ,SAAS;IAC/C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAOD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;IAIlB;;;;;;;;;;OAUG;;;;;;;;;;IAEH;;;;;;;;;OASG;;;;;;;;;;IAEH;;;;;;;;;;;OAWG;;;;;;;;;;IAEH;;;;;;;;;;;;OAYG;;;;;;;;;;CAWL,CAAC"}

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

@@ -7,19 +7,85 @@ 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 tokens_1 = require("@workday/canvas-kit-react/tokens");
 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 formFieldBaseStyles = canvas_kit_styling_1.createStyles({
+    border: 'none',
+    padding: 0,
+    margin: `0 0 ${tokens_1.space.m}`,
+});
+/**
+ * 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`.
+ *
+ * ```tsx
+ * <FormField>
+ *    <FormField.Label>First Name</FormField.Label>
+ *    <FormField.Input as={TextInput} value={value} onChange={(e) => console.log(e)} />
+ *  </FormField>
+ * ```
+ */
 exports.FormField = common_1.createContainer('div')({
     displayName: 'FormField',
     modelHook: hooks_1.useFormFieldModel,
     subComponents: {
+        /**
+         * `FormField.Input` will render any `inputs` passed to it 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`.
+         *
+         * ```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_1.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>
+         * ```
+         */
         Label: FormFieldLabel_1.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.Container` 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>
+         * ```
+         */
         Hint: FormFieldHint_1.FormFieldHint,
+        /**
+         * `FormField.Container` allows you to properly center `FormField.Label` when the `orientation` is set to `horizontal` and there is hint text..
+         *
+         * ```tsx
+         * <FormField orientation="horizontal">
+         *    <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>
+         * ```
+         */
+        Container: FormFieldContainer_1.FormFieldContainer,
     },
-})(({ children, orientation, ...elemProps }, Element) => {
-    const layoutProps = hooks_1.useFormFieldOrientation(orientation);
-    return (react_1.default.createElement(layout_1.Flex, Object.assign({ as: Element }, layoutProps, elemProps), children));
+})(({ 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, formFieldBaseStyles)), children));
 });

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

@@ -0,0 +1,11 @@
+import { CSProps } from '@workday/canvas-kit-styling';
+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: {};
+}>;
+//# sourceMappingURL=FormFieldContainer.d.ts.map

package/dist/commonjs/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,EAA6B,OAAO,EAAC,MAAM,6BAA6B,CAAC;AAShF,eAAO,MAAM,kBAAkB;;;;;;;;EAK7B,CAAC"}

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

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormFieldContainer = 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 containerBaseStyles = canvas_kit_styling_1.createStyles({
+    display: 'flex',
+    flexDirection: 'column',
+});
+exports.FormFieldContainer = common_1.createSubcomponent('div')({
+    displayName: 'FormField.Container',
+    modelHook: hooks_1.useFormFieldModel,
+})((elemProps, Element) => {
+    return react_1.default.createElement(Element, Object.assign({}, canvas_kit_styling_1.handleCsProp(elemProps, [containerBaseStyles])));
+});

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

@@ -1,7 +1,8 @@
 export declare const FormFieldHint: import("@workday/canvas-kit-react/common").ElementComponentM<"p", Omit<import("@workday/canvas-kit-react/text").TypeLevelProps, "size">, {
     state: {
         id: string;
-        hasError: boolean;
+        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":"AAOA,eAAO,MAAM,aAAa;;;;;;;EAyBzB,CAAC"}
+{"version":3,"file":"FormFieldHint.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldHint.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,aAAa;;;;;;;;EAyBzB,CAAC"}

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

@@ -19,5 +19,5 @@ exports.FormFieldHint = common_1.createSubcomponent('p')({
         // 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", color: model.state.hasError ? theme.canvas.palette.error.main : undefined, marginY: tokens_1.space.xxs }, elemProps), children));
+    return (react_1.default.createElement(text_1.Subtext, Object.assign({ as: Element, size: "medium", color: model.state.error === 'error' ? theme.canvas.palette.error.main : undefined, marginY: tokens_1.space.xxs }, elemProps), children));
 });

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

@@ -1,7 +1,8 @@
 export declare const FormFieldInput: import("@workday/canvas-kit-react/common").ElementComponentM<"input", import("@workday/canvas-kit-react/layout").BackgroundStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/color").BorderColorStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/lineStyle").BorderLineStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/radius").BorderRadiusStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/shorthand").BorderShorthandStyleProps & import("@workday/canvas-kit-react/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;
-        hasError: boolean;
+        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

@@ -10,7 +10,8 @@ export interface FormFieldLabelProps extends ExtractProps<typeof LabelText, neve
 export declare const FormFieldLabel: import("@workday/canvas-kit-react/common").ElementComponentM<import("@workday/canvas-kit-react/common").ElementComponent<"label", import("@workday/canvas-kit-react/text").TypeLabelProps>, FormFieldLabelProps, {
     state: {
         id: string;
-        hasError: boolean;
+        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;AAE1B,OAAO,EAAqB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAElF,OAAO,EAAC,SAAS,EAAO,MAAM,gCAAgC,CAAC;AAM/D,MAAM,WAAW,mBAAoB,SAAQ,YAAY,CAAC,OAAO,SAAS,EAAE,KAAK,CAAC;IAChF;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAeD,eAAO,MAAM,cAAc;;;;;;;EAezB,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,SAAS,EAAO,MAAM,gCAAgC,CAAC;AAM/D,MAAM,WAAW,mBAAoB,SAAQ,YAAY,CAAC,OAAO,SAAS,EAAE,KAAK,CAAC;IAChF;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AA+BD,eAAO,MAAM,cAAc;;;;;;;;EAqBzB,CAAC"}

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

@@ -14,6 +14,10 @@ const layout_1 = require("@workday/canvas-kit-react/layout");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const labelStyles = canvas_kit_styling_1.createStyles({
     fontWeight: tokens_1.type.properties.fontWeights.medium,
+    paddingInlineStart: 0,
+    marginBottom: tokens_1.space.xxxs,
+    display: 'flex',
+    alignItems: 'center',
     minWidth: '180px',
 });
 const asteriskStyles = canvas_kit_styling_1.createStyles({
@@ -23,12 +27,26 @@ const asteriskStyles = canvas_kit_styling_1.createStyles({
     textDecoration: 'unset',
     color: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.error.base, '#de2e21'),
 });
+const labelModifiers = canvas_kit_styling_1.createModifiers({
+    orientation: {
+        horizontal: canvas_kit_styling_1.createStyles({
+            float: 'left',
+            maxHeight: tokens_1.space.xl,
+        }),
+        vertical: canvas_kit_styling_1.createStyles({
+            width: 'auto',
+        }),
+    },
+});
 exports.FormFieldLabel = common_1.createSubcomponent(text_1.LabelText)({
     displayName: 'FormField.Label',
     modelHook: hooks_1.useFormFieldModel,
     elemPropsHook: hooks_1.useFormFieldLabel,
 })(({ children, ...elemProps }, Element, model) => {
-    return (react_1.default.createElement(text_1.LabelText, Object.assign({ as: Element }, layout_1.mergeStyles(elemProps, [labelStyles])),
+    return (react_1.default.createElement(text_1.LabelText, Object.assign({ as: Element }, layout_1.mergeStyles(elemProps, [
+        labelStyles,
+        labelModifiers({ orientation: model.state.orientation }),
+    ])),
         children,
         model.state.isRequired && (react_1.default.createElement(text_1.Text, { cs: asteriskStyles, "aria-hidden": "true" }, "*"))));
 });

package/dist/commonjs/form-field/lib/hooks/useFormFieldHint.d.ts

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

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

@@ -1 +1 @@
-{"version":3,"file":"useFormFieldHint.d.ts","sourceRoot":"","sources":["../../../../../form-field/lib/hooks/useFormFieldHint.tsx"],"names":[],"mappings":"AAGA;;;GAGG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;EAI3B,CAAC"}
+{"version":3,"file":"useFormFieldHint.d.ts","sourceRoot":"","sources":["../../../../../form-field/lib/hooks/useFormFieldHint.tsx"],"names":[],"mappings":"AAGA;;;GAGG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;EAI3B,CAAC"}

package/dist/commonjs/form-field/lib/hooks/useFormFieldInput.d.ts

@@ -5,7 +5,8 @@
 export declare const useFormFieldInput: import("@workday/canvas-kit-react/common").BehaviorHook<{
     state: {
         id: string;
-        hasError: boolean;
+        error: "alert" | "error" | undefined;
+        orientation: "horizontal" | "vertical";
         isRequired: boolean;
     };
     events: {};
@@ -14,5 +15,6 @@ export declare const useFormFieldInput: import("@workday/canvas-kit-react/common
     'aria-invalid': boolean | undefined;
     'aria-describedby': string | undefined;
     id: string | undefined;
+    error: "alert" | "error" | undefined;
 }>;
 //# sourceMappingURL=useFormFieldInput.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useFormFieldInput.d.ts","sourceRoot":"","sources":["../../../../../form-field/lib/hooks/useFormFieldInput.tsx"],"names":[],"mappings":"AAGA;;;GAGG;AACH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;EAO5B,CAAC"}
+{"version":3,"file":"useFormFieldInput.d.ts","sourceRoot":"","sources":["../../../../../form-field/lib/hooks/useFormFieldInput.tsx"],"names":[],"mappings":"AAGA;;;GAGG;AACH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;EAQ5B,CAAC"}

package/dist/commonjs/form-field/lib/hooks/useFormFieldInput.js

@@ -10,8 +10,9 @@ const useFormFieldModel_1 = require("./useFormFieldModel");
 exports.useFormFieldInput = common_1.createElemPropsHook(useFormFieldModel_1.useFormFieldModel)(({ state }) => {
     return {
         required: state.isRequired ? true : undefined,
-        'aria-invalid': state.hasError ? true : undefined,
+        'aria-invalid': state.error === 'error' ? true : undefined,
         'aria-describedby': state.id ? `hint-${state.id}` : undefined,
         id: state.id ? `input-${state.id}` : undefined,
+        error: state.error,
     };
 });

package/dist/commonjs/form-field/lib/hooks/useFormFieldLabel.d.ts

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

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

@@ -1 +1 @@
-{"version":3,"file":"useFormFieldLabel.d.ts","sourceRoot":"","sources":["../../../../../form-field/lib/hooks/useFormFieldLabel.tsx"],"names":[],"mappings":"AAGA;;;GAGG;AACH,eAAO,MAAM,iBAAiB;;;;;;;;;EAI5B,CAAC"}
+{"version":3,"file":"useFormFieldLabel.d.ts","sourceRoot":"","sources":["../../../../../form-field/lib/hooks/useFormFieldLabel.tsx"],"names":[],"mappings":"AAGA;;;GAGG;AACH,eAAO,MAAM,iBAAiB;;;;;;;;;;EAI5B,CAAC"}

package/dist/commonjs/form-field/lib/hooks/useFormFieldModel.d.ts

@@ -1,9 +1,15 @@
 export declare const useFormFieldModel: (<TT_Special_Generic>(config?: (Partial<{
     /**
-     * Optional flag to denote if this field has an error to display. When true the `FormField.Input` will have
-     * `required` set to true, and usually some subcomponents will have a error color applied.
+     * Optional flag to denote if this field has an error or warning to display.
+     * If value is `error`: `aria-invalid` is added to the `FormField.Input` and the red error ring is added.
+     * If value is `alert`: A visual orange warning ring is added to the `FormField.Input`.
      */
-    hasError: boolean;
+    error: "alert" | "error" | undefined;
+    /**
+     * The direction the child elements should stack
+     * @default vertical
+     */
+    orientation: "horizontal" | "vertical";
     /**
      * Optional `id` provided to `FormField`'s subcomponents as HTML attributes:
      * - `FormField.Input` will set `aria-describedby` to `hint-${id}`
@@ -24,10 +30,16 @@ export declare const useFormFieldModel: (<TT_Special_Generic>(config?: (Partial<
     state: {
         id: string;
         /**
-         * Optional flag to denote if this field has an error to display. When true the `FormField.Input` will have
-         * `required` set to true, and usually some subcomponents will have a error color applied.
+         * Optional flag to denote if this field has an error or warning to display.
+         * If value is `error`: `aria-invalid` is added to the `FormField.Input` and the red error ring is added.
+         * If value is `alert`: A visual orange warning ring is added to the `FormField.Input`.
          */
-        hasError: boolean;
+        error: "alert" | "error" | undefined;
+        /**
+         * The direction the child elements should stack
+         * @default vertical
+         */
+        orientation: "horizontal" | "vertical";
         /**
          * Optional flag to denote if this field is required. When true the `FormField.Input` will have
          * `required` set to true, and an asterisk will be appended to the `FormField.Label`.
@@ -37,10 +49,16 @@ export declare const useFormFieldModel: (<TT_Special_Generic>(config?: (Partial<
     events: {};
 }) & import("@workday/canvas-kit-react/common").ModelExtras<{
     /**
-     * Optional flag to denote if this field has an error to display. When true the `FormField.Input` will have
-     * `required` set to true, and usually some subcomponents will have a error color applied.
+     * Optional flag to denote if this field has an error or warning to display.
+     * If value is `error`: `aria-invalid` is added to the `FormField.Input` and the red error ring is added.
+     * If value is `alert`: A visual orange warning ring is added to the `FormField.Input`.
+     */
+    error: "alert" | "error" | undefined;
+    /**
+     * The direction the child elements should stack
+     * @default vertical
      */
-    hasError: boolean;
+    orientation: "horizontal" | "vertical";
     /**
      * Optional `id` provided to `FormField`'s subcomponents as HTML attributes:
      * - `FormField.Input` will set `aria-describedby` to `hint-${id}`
@@ -60,10 +78,16 @@ export declare const useFormFieldModel: (<TT_Special_Generic>(config?: (Partial<
 }, {}, {
     id: string;
     /**
-     * Optional flag to denote if this field has an error to display. When true the `FormField.Input` will have
-     * `required` set to true, and usually some subcomponents will have a error color applied.
+     * Optional flag to denote if this field has an error or warning to display.
+     * If value is `error`: `aria-invalid` is added to the `FormField.Input` and the red error ring is added.
+     * If value is `alert`: A visual orange warning ring is added to the `FormField.Input`.
+     */
+    error: "alert" | "error" | undefined;
+    /**
+     * The direction the child elements should stack
+     * @default vertical
      */
-    hasError: boolean;
+    orientation: "horizontal" | "vertical";
     /**
      * Optional flag to denote if this field is required. When true the `FormField.Input` will have
      * `required` set to true, and an asterisk will be appended to the `FormField.Label`.
@@ -73,10 +97,16 @@ export declare const useFormFieldModel: (<TT_Special_Generic>(config?: (Partial<
     state: {
         id: string;
         /**
-         * Optional flag to denote if this field has an error to display. When true the `FormField.Input` will have
-         * `required` set to true, and usually some subcomponents will have a error color applied.
+         * Optional flag to denote if this field has an error or warning to display.
+         * If value is `error`: `aria-invalid` is added to the `FormField.Input` and the red error ring is added.
+         * If value is `alert`: A visual orange warning ring is added to the `FormField.Input`.
+         */
+        error: "alert" | "error" | undefined;
+        /**
+         * The direction the child elements should stack
+         * @default vertical
          */
-        hasError: boolean;
+        orientation: "horizontal" | "vertical";
         /**
          * Optional flag to denote if this field is required. When true the `FormField.Input` will have
          * `required` set to true, and an asterisk will be appended to the `FormField.Label`.

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

@@ -1 +1 @@
-{"version":3,"file":"useFormFieldModel.d.ts","sourceRoot":"","sources":["../../../../../form-field/lib/hooks/useFormFieldModel.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB;IAE1B;;;OAGG;;IAEH;;;;;;;;;OASG;;IAEH;;;OAGG;;;;;QAnBH;;;WAGG;;QAaH;;;WAGG;;;;;IAnBH;;;OAGG;;IAEH;;;;;;;;;OASG;;IAEH;;;OAGG;;;;IAnBH;;;OAGG;;IAaH;;;OAGG;;;;;QAnBH;;;WAGG;;QAaH;;;WAGG;;;;EAeL,CAAC"}
+{"version":3,"file":"useFormFieldModel.d.ts","sourceRoot":"","sources":["../../../../../form-field/lib/hooks/useFormFieldModel.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB;IAE1B;;;;OAIG;;IAEH;;;OAGG;;IAEH;;;;;;;;;OASG;;IAEH;;;OAGG;;;;;QAzBH;;;;WAIG;;QAEH;;;WAGG;;QAaH;;;WAGG;;;;;IAzBH;;;;OAIG;;IAEH;;;OAGG;;IAEH;;;;;;;;;OASG;;IAEH;;;OAGG;;;;IAzBH;;;;OAIG;;IAEH;;;OAGG;;IAaH;;;OAGG;;;;;QAzBH;;;;WAIG;;QAEH;;;WAGG;;QAaH;;;WAGG;;;;EAeL,CAAC"}

package/dist/commonjs/form-field/lib/hooks/useFormFieldModel.js

@@ -5,10 +5,16 @@ const common_1 = require("@workday/canvas-kit-react/common");
 exports.useFormFieldModel = common_1.createModelHook({
     defaultConfig: {
         /**
-         * Optional flag to denote if this field has an error to display. When true the `FormField.Input` will have
-         * `required` set to true, and usually some subcomponents will have a error color applied.
+         * Optional flag to denote if this field has an error or warning to display.
+         * If value is `error`: `aria-invalid` is added to the `FormField.Input` and the red error ring is added.
+         * If value is `alert`: A visual orange warning ring is added to the `FormField.Input`.
          */
-        hasError: false,
+        error: undefined,
+        /**
+         * The direction the child elements should stack
+         * @default vertical
+         */
+        orientation: 'vertical',
         /**
          * Optional `id` provided to `FormField`'s subcomponents as HTML attributes:
          * - `FormField.Input` will set `aria-describedby` to `hint-${id}`

package/dist/commonjs/form-field/lib/hooks/useFormFieldOrientation.js

@@ -11,7 +11,7 @@ const useFormFieldOrientation = (orientation) => {
         layoutProps = {
             flexDirection: 'row',
             gap: tokens_1.space.l,
-            alignItems: 'center',
+            alignItems: undefined,
         };
     }
     else {

package/dist/commonjs/radio/lib/RadioGroup.d.ts

@@ -35,8 +35,8 @@ export declare const RadioGroup: import("@workday/canvas-kit-react/common").Elem
     events: {};
 }> & {
     /**
-     * `RadioGroup.Radio` renders an `<input type="radio" />` and its associated `<label>` (using `children` as the label's contents).
-     * This component should satisfy most use cases; use `RadioGroup.Label` if you require more flexibility.
+     * `RadioGroup.RadioButton` renders an `<input type="radio" />` and its associated `<label>` (using `children` as the label's contents).
+     * This component should satisfy most use cases; use `RadioGroup.Label` and its sub components if you require more flexibility.
      *
      * ```tsx
      * <RadioGroup name="pizza-crust" value="thin">