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

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import { createSubcomponent } from '@workday/canvas-kit-react/common';
+import { system, brand } from '@workday/canvas-tokens-web';
+import { createStencil } from '@workday/canvas-kit-styling';
+import { textStencil } from '@workday/canvas-kit-react/text';
+import { mergeStyles } from '@workday/canvas-kit-react/layout';
+import { useFormFieldHint, useFormFieldModel } from './hooks';
+export const formFieldHintStencil = createStencil({
+    extends: textStencil,
+    base: { name: "hbbc47", styles: "box-sizing:border-box;margin:var(--cnvs-sys-space-zero);" },
+    modifiers: {
+        error: {
+            error: { name: "hbbc48", styles: "color:var(--cnvs-brand-error-base);" },
+            alert: { name: "hbbc49", styles: "" }
+        }
+    },
+    defaultModifiers: {
+        typeLevel: 'subtext.medium',
+    }
+}, "form-field-hint-07fcb3");
+export const FormFieldHint = createSubcomponent('p')({
+    displayName: 'FormField.Hint',
+    modelHook: useFormFieldModel,
+    elemPropsHook: useFormFieldHint,
+})(({ children, typeLevel, variant, ...elemProps }, Element, model) => {
+    if (!children) {
+        // If there is no hint text just skip rendering
+        return null;
+    }
+    return (React.createElement(Element, { ...mergeStyles(elemProps, formFieldHintStencil({ typeLevel, variant, error: model.state.error })) }, children));
+});

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

@@ -0,0 +1,10 @@
+export declare const FormFieldInput: 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: {};
+}>;
+//# sourceMappingURL=FormFieldInput.d.ts.map

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

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

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { createSubcomponent } from '@workday/canvas-kit-react/common';
+import { Box, mergeStyles } from '@workday/canvas-kit-react/layout';
+import { useFormFieldInput, useFormFieldModel } from './hooks';
+export const FormFieldInput = createSubcomponent('input')({
+    displayName: 'FormField.Input',
+    modelHook: useFormFieldModel,
+    elemPropsHook: useFormFieldInput,
+})((elemProps, Element) => {
+    return React.createElement(Box, { "data-width": "ck-formfield-width", as: Element, ...mergeStyles(elemProps) });
+});

package/dist/es6/form-field/lib/FormFieldLabel.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 FormFieldLabelProps extends FlexProps, Omit<ExtractProps<typeof Text, never>, 'display'> {
+    /**
+     * The text of the label.
+     */
+    children: React.ReactNode;
+}
+export declare const formFieldLabelStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, never>, {}, import("@workday/canvas-kit-styling").Stencil<{
+    typeLevel: {
+        'title.large': {
+            color: "--cnvs-sys-color-text-strong";
+            fontFamily: "--cnvs-base-font-family-50";
+            fontWeight: "--cnvs-base-font-weight-700";
+            lineHeight: "--cnvs-base-line-height-600";
+            fontSize: "--cnvs-base-font-size-600";
+        };
+        'title.medium': {
+            color: "--cnvs-sys-color-text-strong";
+            fontFamily: "--cnvs-base-font-family-50";
+            fontWeight: "--cnvs-base-font-weight-700";
+            lineHeight: "--cnvs-base-line-height-500";
+            fontSize: "--cnvs-base-font-size-500";
+        };
+        'title.small': {
+            color: "--cnvs-sys-color-text-strong";
+            fontFamily: "--cnvs-base-font-family-50";
+            fontWeight: "--cnvs-base-font-weight-700";
+            lineHeight: "--cnvs-base-line-height-400";
+            fontSize: "--cnvs-base-font-size-400";
+        };
+        'heading.large': {
+            color: "--cnvs-sys-color-text-strong";
+            fontFamily: "--cnvs-base-font-family-50";
+            fontWeight: "--cnvs-base-font-weight-700";
+            lineHeight: "--cnvs-base-line-height-350";
+            fontSize: "--cnvs-base-font-size-300";
+        };
+        'heading.medium': {
+            color: "--cnvs-sys-color-text-strong";
+            fontFamily: "--cnvs-base-font-family-50";
+            fontWeight: "--cnvs-base-font-weight-700";
+            lineHeight: "--cnvs-base-line-height-300";
+            fontSize: "--cnvs-base-font-size-250";
+        };
+        'heading.small': {
+            color: "--cnvs-sys-color-text-strong";
+            fontFamily: "--cnvs-base-font-family-50";
+            fontWeight: "--cnvs-base-font-weight-700";
+            lineHeight: "--cnvs-base-line-height-250";
+            fontSize: "--cnvs-base-font-size-200";
+        };
+        'body.large': {
+            color: "--cnvs-sys-color-text-default";
+            fontFamily: "--cnvs-base-font-family-50";
+            fontWeight: "--cnvs-base-font-weight-400";
+            lineHeight: "--cnvs-base-line-height-200";
+            fontSize: "--cnvs-base-font-size-150";
+        };
+        'body.medium': {
+            color: "--cnvs-sys-color-text-default";
+            fontFamily: "--cnvs-base-font-family-50";
+            fontWeight: "--cnvs-base-font-weight-400";
+            lineHeight: "--cnvs-base-line-height-200";
+            fontSize: "--cnvs-base-font-size-125";
+        };
+        'body.small': {
+            color: "--cnvs-sys-color-text-default";
+            fontFamily: "--cnvs-base-font-family-50";
+            fontWeight: "--cnvs-base-font-weight-400";
+            lineHeight: "--cnvs-base-line-height-150";
+            fontSize: "--cnvs-base-font-size-100";
+            letterSpacing: "--cnvs-base-letter-spacing-200";
+        };
+        'subtext.large': {
+            color: "--cnvs-sys-color-text-default";
+            fontFamily: "--cnvs-base-font-family-50";
+            fontWeight: "--cnvs-base-font-weight-400";
+            lineHeight: "--cnvs-base-line-height-100";
+            fontSize: "--cnvs-base-font-size-75";
+            letterSpacing: "--cnvs-base-letter-spacing-150";
+        };
+        'subtext.medium': {
+            color: "--cnvs-sys-color-text-default";
+            fontFamily: "--cnvs-base-font-family-50";
+            fontWeight: "--cnvs-base-font-weight-400";
+            lineHeight: "--cnvs-base-line-height-50";
+            fontSize: "--cnvs-base-font-size-50";
+            letterSpacing: "--cnvs-base-letter-spacing-100";
+        };
+        'subtext.small': {
+            color: "--cnvs-sys-color-text-default";
+            fontFamily: "--cnvs-base-font-family-50";
+            fontWeight: "--cnvs-base-font-weight-400";
+            lineHeight: "--cnvs-base-line-height-50";
+            fontSize: "--cnvs-base-font-size-25";
+            letterSpacing: "--cnvs-base-letter-spacing-50";
+        };
+    };
+    variant: {
+        error: {
+            color: "--cnvs-sys-color-text-critical-default";
+        };
+        hint: {
+            color: "--cnvs-sys-color-text-hint";
+        };
+        inverse: {
+            color: "--cnvs-sys-color-text-inverse";
+        };
+    };
+}, {}, never, never>, never>;
+export declare const FormFieldLabel: import("@workday/canvas-kit-react/common").ElementComponentM<"label", FormFieldLabelProps, {
+    state: {
+        id: string;
+        error: "alert" | "error" | undefined;
+        isRequired: boolean;
+        orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
+    };
+    events: {};
+}>;
+//# sourceMappingURL=FormFieldLabel.d.ts.map

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

@@ -0,0 +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,IAAI,EAAc,MAAM,gCAAgC,CAAC;AACjE,OAAO,EAAC,SAAS,EAAc,MAAM,kCAAkC,CAAC;AAKxE,MAAM,WAAW,mBACf,SAAQ,SAAS,EACf,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,EAAE,SAAS,CAAC;IACnD;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4BA6ChC,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;;;EAqBzB,CAAC"}

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

@@ -0,0 +1,38 @@
+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 formFieldLabelStencil = createStencil({
+    extends: textStencil,
+    // @ts-ignore Still weird about CSS font variables
+    base: { name: "hbbc42", 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: "hbbc43", 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: {
+            horizontalStart: { name: "hbbc44", styles: "justify-content:flex-start;float:left;max-height:var(--cnvs-sys-space-x10);" },
+            horizontalEnd: { name: "hbbc45", styles: "max-height:var(--cnvs-sys-space-x10);float:left;justify-content:flex-end;" },
+            vertical: { name: "hbbc46", styles: "width:100%;" }
+        }
+    },
+    defaultModifiers: {
+        typeLevel: 'subtext.large',
+        isRequired: 'false',
+    }
+}, "form-field-label-269904");
+export const FormFieldLabel = createSubcomponent('label')({
+    displayName: 'FormField.Label',
+    modelHook: useFormFieldModel,
+    elemPropsHook: useFormFieldLabel,
+})(({ children, typeLevel, variant, ...elemProps }, Element, model) => {
+    return (React.createElement(Element, { ...mergeStyles(elemProps, formFieldLabelStencil({
+            typeLevel,
+            variant,
+            isRequired: model.state.isRequired,
+            orientation: model.state.orientation === 'horizontal' ? 'horizontalStart' : model.state.orientation,
+        })) }, children));
+});

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

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

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

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

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

@@ -0,0 +1,25 @@
+import { createStencil } from '@workday/canvas-kit-styling';
+import { system } from '@workday/canvas-tokens-web';
+export const formFieldStencil = createStencil({
+    base: { name: "hbbc4b", styles: "box-sizing:border-box;display:flex;border:none;padding:var(--cnvs-sys-space-zero);margin:var(--cnvs-sys-space-zero) var(--cnvs-sys-space-zero) var(--cnvs-sys-space-x6);" },
+    modifiers: {
+        grow: {
+            true: { name: "hbbc4c", styles: "width:100%;[data-width=\"ck-formfield-width\"]{width:100%;}&:has(div[data-width=\"ck-formfield-width\"]){width:100%;}" }
+        },
+        orientation: {
+            horizontalStart: { name: "hbbc4d", styles: "flex-direction:row;gap:var(--cnvs-sys-space-x8);" },
+            horizontalEnd: { name: "hbbc4e", styles: "flex-direction:row;gap:var(--cnvs-sys-space-x8);" },
+            vertical: { name: "hbbc4f", styles: "flex-direction:column;gap:var(--cnvs-sys-space-x1);align-items:flex-start;" }
+        },
+        required: {
+            true: { name: "hbbc4g", styles: "" }
+        },
+        error: {
+            error: { name: "hbbc4h", styles: "" },
+            alert: { name: "hbbc4i", styles: "" }
+        }
+    },
+    defaultModifiers: {
+        orientation: 'vertical',
+    }
+}, "form-field-db05c5");

package/dist/es6/form-field/lib/hooks/index.d.ts

@@ -0,0 +1,6 @@
+export * from './useFormFieldOrientation';
+export * from './useFormFieldHint';
+export * from './useFormFieldInput';
+export * from './useFormFieldModel';
+export * from './useFormFieldLabel';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../form-field/lib/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC"}

package/dist/es6/form-field/lib/hooks/index.js

@@ -0,0 +1,5 @@
+export * from './useFormFieldOrientation';
+export * from './useFormFieldHint';
+export * from './useFormFieldInput';
+export * from './useFormFieldModel';
+export * from './useFormFieldLabel';

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

@@ -0,0 +1,16 @@
+/**
+ * Adds the necessary props to a `Hint` component.
+ * Used by the FormField.Hint subcomponent and other input type components
+ */
+export declare const useFormFieldHint: import("@workday/canvas-kit-react/common").BehaviorHook<{
+    state: {
+        id: string;
+        error: "alert" | "error" | undefined;
+        isRequired: boolean;
+        orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
+    };
+    events: {};
+}, {
+    id: string;
+}>;
+//# sourceMappingURL=useFormFieldHint.d.ts.map

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

@@ -0,0 +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"}

package/dist/es6/form-field/lib/hooks/useFormFieldHint.js

@@ -0,0 +1,11 @@
+import { createElemPropsHook } from '@workday/canvas-kit-react/common';
+import { useFormFieldModel } from './useFormFieldModel';
+/**
+ * Adds the necessary props to a `Hint` component.
+ * Used by the FormField.Hint subcomponent and other input type components
+ */
+export const useFormFieldHint = createElemPropsHook(useFormFieldModel)(({ state }) => {
+    return {
+        id: `hint-${state.id}`,
+    };
+});

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

@@ -0,0 +1,20 @@
+/**
+ * Adds the necessary props to an `Input` component.
+ * Used by the FormField.Input subcomponent and other input type components
+ */
+export declare const useFormFieldInput: import("@workday/canvas-kit-react/common").BehaviorHook<{
+    state: {
+        id: string;
+        error: "alert" | "error" | undefined;
+        isRequired: boolean;
+        orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
+    };
+    events: {};
+}, {
+    required: boolean | undefined;
+    'aria-invalid': boolean | undefined;
+    'aria-describedby': string | undefined;
+    id: string | undefined;
+    error: "alert" | "error" | undefined;
+}>;
+//# sourceMappingURL=useFormFieldInput.d.ts.map

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

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

@@ -0,0 +1,15 @@
+import { createElemPropsHook } from '@workday/canvas-kit-react/common';
+import { useFormFieldModel } from './useFormFieldModel';
+/**
+ * Adds the necessary props to an `Input` component.
+ * Used by the FormField.Input subcomponent and other input type components
+ */
+export const useFormFieldInput = createElemPropsHook(useFormFieldModel)(({ state }) => {
+    return {
+        required: state.isRequired ? 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/es6/form-field/lib/hooks/useFormFieldLabel.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Adds the necessary props to a `Label` component.
+ * Used by the FormField.Label subcomponent and other input type components
+ */
+export declare const useFormFieldLabel: import("@workday/canvas-kit-react/common").BehaviorHook<{
+    state: {
+        id: string;
+        error: "alert" | "error" | undefined;
+        isRequired: boolean;
+        orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
+    };
+    events: {};
+}, {
+    htmlFor: string;
+}>;
+//# sourceMappingURL=useFormFieldLabel.d.ts.map

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

@@ -0,0 +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"}

package/dist/es6/form-field/lib/hooks/useFormFieldLabel.js

@@ -0,0 +1,11 @@
+import { createElemPropsHook } from '@workday/canvas-kit-react/common';
+import { useFormFieldModel } from './useFormFieldModel';
+/**
+ * Adds the necessary props to a `Label` component.
+ * Used by the FormField.Label subcomponent and other input type components
+ */
+export const useFormFieldLabel = createElemPropsHook(useFormFieldModel)(({ state }) => {
+    return {
+        htmlFor: `input-${state.id}`,
+    };
+});

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

@@ -0,0 +1,98 @@
+export declare const useFormFieldModel: (<TT_Special_Generic>(config?: (Partial<{
+    /**
+     * 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;
+    /**
+     * Optional `id` provided to `FormField`'s subcomponents as HTML attributes:
+     * - `FormField.Input` will set `aria-describedby` to `hint-${id}`
+     * - `FormField.Input` will set `id` to `input-${id}`
+     * - `FormField.Label` will set `htmlFor` to `input-${id}`
+     * - `FormField.Hint` will set `id` to `hint-${id}`
+     *
+     * If a value is not provided, a unique id will be automatically created by `useUniqueId()`.
+     * @default {useUniqueId}
+     */
+    id: string;
+    /**
+     * 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`.
+     */
+    isRequired: boolean;
+    orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
+}> & {} & {}) | undefined) => {
+    state: {
+        id: string;
+        /**
+         * 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;
+        /**
+         * 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`.
+         */
+        isRequired: boolean;
+        orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
+    };
+    events: {};
+}) & import("@workday/canvas-kit-react/common").ModelExtras<{
+    /**
+     * 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;
+    /**
+     * Optional `id` provided to `FormField`'s subcomponents as HTML attributes:
+     * - `FormField.Input` will set `aria-describedby` to `hint-${id}`
+     * - `FormField.Input` will set `id` to `input-${id}`
+     * - `FormField.Label` will set `htmlFor` to `input-${id}`
+     * - `FormField.Hint` will set `id` to `hint-${id}`
+     *
+     * If a value is not provided, a unique id will be automatically created by `useUniqueId()`.
+     * @default {useUniqueId}
+     */
+    id: string;
+    /**
+     * 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`.
+     */
+    isRequired: boolean;
+    orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
+}, {}, {
+    id: string;
+    /**
+     * 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;
+    /**
+     * 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`.
+     */
+    isRequired: boolean;
+    orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
+}, {}, {
+    state: {
+        id: string;
+        /**
+         * 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;
+        /**
+         * 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`.
+         */
+        isRequired: boolean;
+        orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
+    };
+    events: {};
+}>;
+//# sourceMappingURL=useFormFieldModel.d.ts.map

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

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

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

@@ -0,0 +1,38 @@
+import { createModelHook, useUniqueId } from '@workday/canvas-kit-react/common';
+export const useFormFieldModel = createModelHook({
+    defaultConfig: {
+        /**
+         * 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: undefined,
+        /**
+         * Optional `id` provided to `FormField`'s subcomponents as HTML attributes:
+         * - `FormField.Input` will set `aria-describedby` to `hint-${id}`
+         * - `FormField.Input` will set `id` to `input-${id}`
+         * - `FormField.Label` will set `htmlFor` to `input-${id}`
+         * - `FormField.Hint` will set `id` to `hint-${id}`
+         *
+         * If a value is not provided, a unique id will be automatically created by `useUniqueId()`.
+         * @default {useUniqueId}
+         */
+        id: '',
+        /**
+         * 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`.
+         */
+        isRequired: false,
+        orientation: '',
+    },
+})(config => {
+    const id = useUniqueId(config.id);
+    const state = {
+        ...config,
+        id,
+    };
+    return {
+        state,
+        events: {},
+    };
+});

package/dist/es6/form-field/lib/hooks/useFormFieldOrientation.d.ts

@@ -0,0 +1,12 @@
+import { FlexProps } from '@workday/canvas-kit-react/layout';
+/**
+ * Adds the necessary layout props to a `FormField` component.
+ *
+ * @deprecated
+ */
+export declare const useFormFieldOrientation: (orientation: 'horizontal' | 'vertical') => {
+    flexDirection: FlexProps['flexDirection'];
+    alignItems: FlexProps['alignItems'];
+    gap: FlexProps['gap'];
+};
+//# sourceMappingURL=useFormFieldOrientation.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useFormFieldOrientation.d.ts","sourceRoot":"","sources":["../../../../../form-field/lib/hooks/useFormFieldOrientation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,kCAAkC,CAAC;AAG3D;;;;GAIG;AACH,eAAO,MAAM,uBAAuB,gBAAiB,YAAY,GAAG,UAAU;mBAE3D,SAAS,CAAC,eAAe,CAAC;gBAC7B,SAAS,CAAC,YAAY,CAAC;SAC9B,SAAS,CAAC,KAAK,CAAC;CAkBxB,CAAC"}

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

@@ -0,0 +1,24 @@
+import { space } from '@workday/canvas-kit-react/tokens';
+/**
+ * Adds the necessary layout props to a `FormField` component.
+ *
+ * @deprecated
+ */
+export const useFormFieldOrientation = (orientation) => {
+    let layoutProps;
+    if (orientation === 'horizontal') {
+        layoutProps = {
+            flexDirection: 'row',
+            gap: space.l,
+            alignItems: undefined,
+        };
+    }
+    else {
+        layoutProps = {
+            flexDirection: 'column',
+            gap: space.xxxs,
+            alignItems: 'flex-start',
+        };
+    }
+    return layoutProps;
+};

package/dist/es6/icon/lib/AccentIcon.js

@@ -21,23 +21,23 @@ export const accentIconStencil = createStencil({
     vars: {
         color: '',
     },
-    base: { name: "8ab799", styles: "box-sizing:border-box;--size-svg-a30d66:3.5rem;& .color-500{fill:var(--color-accent-icon-f47b2a, var(--cnvs-base-palette-blueberry-500));}& .french-vanilla-100{fill:var(--cnvs-base-palette-french-vanilla-100);}" },
+    base: { name: "hbbc11", styles: "box-sizing:border-box;--size-svg-a30d66:3.5rem;& .color-500{fill:var(--color-accent-icon-f47b2a, var(--cnvs-base-palette-blueberry-500));}& .french-vanilla-100{fill:var(--cnvs-base-palette-french-vanilla-100);}" },
     modifiers: {
         transparent: {
-            true: { name: "0b6c92", styles: "& .french-vanilla-100{fill:transparent;}" }
+            true: { name: "hbbc12", styles: "& .french-vanilla-100{fill:transparent;}" }
         }
     }
 }, "accent-icon-f47b2a");
 export const AccentIcon = createComponent('span')({
     displayName: 'AccentIcon',
     Component: ({ transparent, size, icon, color, shouldMirror, ...elemProps }, ref, Element) => {
-        return (React.createElement(Svg, Object.assign({ src: icon, type: CanvasIconTypes.Accent, as: Element, ref: ref }, handleCsProp(elemProps, [
-            accentIconStencil({
-                color: transformColorNameToToken(color),
-                size: typeof size === 'number' ? px2rem(size) : undefined,
-                shouldMirror,
-                transparent,
-            }),
-        ]))));
+        return (React.createElement(Svg, { src: icon, type: CanvasIconTypes.Accent, as: Element, ref: ref, ...handleCsProp(elemProps, [
+                accentIconStencil({
+                    color: transformColorNameToToken(color),
+                    size: typeof size === 'number' ? px2rem(size) : undefined,
+                    shouldMirror,
+                    transparent,
+                }),
+            ]) }));
     },
 });