@workday/canvas-kit-preview-react 6.0.0-alpha.0-next.33 → 6.0.0-alpha.0-next.39

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

@@ -0,0 +1,46 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { createComponent, useDefaultModel } from '@workday/canvas-kit-react/common';
+import { Stack } from '@workday/canvas-kit-labs-react/layout';
+import { useFormFieldModel, useFormFieldOrientation } from './hooks';
+import { FormFieldInput } from './FormFieldInput';
+import { FormFieldLabel } from './FormFieldLabel';
+import { FormFieldHint } from './FormFieldHint';
+export var FormFieldModelContext = React.createContext({});
+export var FormField = createComponent()({
+    displayName: 'FormField',
+    Component: function (_a, ref) {
+        var children = _a.children, model = _a.model, spacing = _a.spacing, orientation = _a.orientation, props = __rest(_a, ["children", "model", "spacing", "orientation"]);
+        var hasError = props.hasError, id = props.id, isRequired = props.isRequired, elemProps = __rest(props, ["hasError", "id", "isRequired"]);
+        var value = useDefaultModel(model, { hasError: hasError, id: id, isRequired: isRequired }, useFormFieldModel);
+        var layoutProps = useFormFieldOrientation(orientation);
+        return (React.createElement(FormFieldModelContext.Provider, { value: value },
+            React.createElement(Stack, __assign({ ref: ref }, layoutProps, elemProps), children)));
+    },
+    subComponents: {
+        Input: FormFieldInput,
+        Label: FormFieldLabel,
+        Hint: FormFieldHint,
+    },
+});

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ExtractProps } from '@workday/canvas-kit-react/common';
+import { Box } from '@workday/canvas-kit-labs-react/common';
+import { FormFieldModel } from './hooks';
+export interface FormFieldHintProps extends ExtractProps<typeof Box, never> {
+    model?: FormFieldModel;
+    /**
+     * Hint text to show to the user regarding the Error/Alert
+     */
+    children?: React.ReactNode;
+}
+export declare const FormFieldHint: import("@workday/canvas-kit-react/common").ElementComponent<"p", FormFieldHintProps>;
+//# sourceMappingURL=FormFieldHint.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormFieldHint.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldHint.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAkB,YAAY,EAA4B,MAAM,kCAAkC,CAAC;AAE1G,OAAO,EAAC,GAAG,EAAC,MAAM,uCAAuC,CAAC;AAG1D,OAAO,EAAC,cAAc,EAAmB,MAAM,SAAS,CAAC;AAEzD,MAAM,WAAW,kBAAmB,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,KAAK,CAAC;IACzE,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,aAAa,sFA0BxB,CAAC"}

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

@@ -0,0 +1,43 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { createComponent, useModelContext, useTheme } from '@workday/canvas-kit-react/common';
+import { space, type } from '@workday/canvas-kit-react/tokens';
+import { Box } from '@workday/canvas-kit-labs-react/common';
+import { FormFieldModelContext } from './FormField';
+import { useFormFieldHint } from './hooks';
+export var FormFieldHint = createComponent('p')({
+    displayName: 'FormField.Hint',
+    Component: function (_a, ref, Element) {
+        var model = _a.model, children = _a.children, elemProps = __rest(_a, ["model", "children"]);
+        var localModel = useModelContext(FormFieldModelContext, model);
+        var props = useFormFieldHint(localModel, elemProps, ref);
+        var theme = useTheme();
+        if (!children) {
+            // If there is no hint text just skip rendering
+            return null;
+        }
+        return (jsx(Box, __assign({ as: Element, css: __assign({}, type.levels.subtext.medium), color: localModel.state.hasError ? theme.canvas.palette.error.main : undefined, marginY: space.xxs }, props), children));
+    },
+});

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

@@ -0,0 +1,8 @@
+import { ExtractProps } from '@workday/canvas-kit-react/common';
+import { Box } from '@workday/canvas-kit-labs-react/common';
+import { FormFieldModel } from './hooks';
+export interface FormFieldInputProps extends ExtractProps<typeof Box, never> {
+    model?: FormFieldModel;
+}
+export declare const FormFieldInput: import("@workday/canvas-kit-react/common").ElementComponent<"input", FormFieldInputProps>;
+//# 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":"AAEA,OAAO,EAAkB,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAChG,OAAO,EAAC,GAAG,EAAC,MAAM,uCAAuC,CAAC;AAG1D,OAAO,EAAC,cAAc,EAAoB,MAAM,SAAS,CAAC;AAE1D,MAAM,WAAW,mBAAoB,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,KAAK,CAAC;IAC1E,KAAK,CAAC,EAAE,cAAc,CAAC;CACxB;AAED,eAAO,MAAM,cAAc,2FAQzB,CAAC"}

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

@@ -0,0 +1,36 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { createComponent, useModelContext } from '@workday/canvas-kit-react/common';
+import { Box } from '@workday/canvas-kit-labs-react/common';
+import { FormFieldModelContext } from './FormField';
+import { useFormFieldInput } from './hooks';
+export var FormFieldInput = createComponent('input')({
+    displayName: 'FormField.Input',
+    Component: function (_a, ref, Element) {
+        var model = _a.model, elemProps = __rest(_a, ["model"]);
+        var localModel = useModelContext(FormFieldModelContext, model);
+        var props = useFormFieldInput(localModel, elemProps, ref);
+        return React.createElement(Box, __assign({ as: Element }, props));
+    },
+});

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { ExtractProps } from '@workday/canvas-kit-react/common';
+import { HStack, StackSpacing } from '@workday/canvas-kit-labs-react/layout';
+import { FormFieldModel } from './hooks';
+export interface FormFieldLabelProps extends Omit<ExtractProps<typeof HStack, never>, 'spacing'> {
+    model?: FormFieldModel;
+    /**
+     * The text of the label.
+     */
+    children: React.ReactNode;
+    /**
+     * When the input is required, this is spacing between label and asterisk.
+     * @default xxxs
+     */
+    spacing?: StackSpacing;
+}
+export declare const FormFieldLabel: import("@workday/canvas-kit-react/common").ElementComponent<"label", FormFieldLabelProps>;
+//# 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":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAEL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAG1C,OAAO,EAAC,MAAM,EAAE,YAAY,EAAC,MAAM,uCAAuC,CAAC;AAG3E,OAAO,EAAC,cAAc,EAAoB,MAAM,SAAS,CAAC;AAE1D,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,MAAM,EAAE,KAAK,CAAC,EAAE,SAAS,CAAC;IAC9F,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB;AAcD,eAAO,MAAM,cAAc,2FA2BzB,CAAC"}

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

@@ -0,0 +1,49 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { createComponent, useModelContext, useTheme, } from '@workday/canvas-kit-react/common';
+import { type } from '@workday/canvas-kit-react/tokens';
+import { HStack } from '@workday/canvas-kit-labs-react/layout';
+import { FormFieldModelContext } from './FormField';
+import { useFormFieldLabel } from './hooks';
+var styles = {
+    label: __assign(__assign({}, type.levels.subtext.large), { fontWeight: type.properties.fontWeights.medium }),
+    asterisk: {
+        fontSize: type.properties.fontSizes[16],
+        fontWeight: type.properties.fontWeights.regular,
+        textDecoration: 'unset',
+    },
+};
+export var FormFieldLabel = createComponent('label')({
+    displayName: 'FormField.Label',
+    Component: function (_a, ref) {
+        var _b = _a.spacing, spacing = _b === void 0 ? 'xxxs' : _b, model = _a.model, children = _a.children, elemProps = __rest(_a, ["spacing", "model", "children"]);
+        var localModel = useModelContext(FormFieldModelContext, model);
+        var props = useFormFieldLabel(localModel, elemProps, ref);
+        var theme = useTheme();
+        return (jsx(HStack, __assign({ as: "label", spacing: spacing, css: styles.label, minWidth: '180px' }, props),
+            jsx("span", null, children),
+            localModel.state.isRequired && (jsx("span", { css: [styles.asterisk, { color: theme.canvas.palette.error.main }], "aria-hidden": "true" }, "*"))));
+    },
+});

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,15 @@
+/// <reference types="@emotion/core" />
+/**
+ * Adds the necessary props to a `Hint` component.
+ * Used by the FormField.Hint subcomponent and other input type components
+ */
+export declare const useFormFieldHint: <P extends {}, R>(model: import("@workday/canvas-kit-react/common").Model<{
+    hasError?: boolean | undefined;
+    id?: string | undefined;
+    isRequired?: boolean | undefined;
+}, {}>, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | import("react").RefObject<R> | null | undefined) => {
+    id: string;
+} & P & (R extends HTMLOrSVGElement ? {
+    ref: import("react").Ref<R>;
+} : {});
+//# 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;;;;;;;;OAI3B,CAAC"}

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

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

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

@@ -0,0 +1,18 @@
+/// <reference types="@emotion/core" />
+/**
+ * Adds the necessary props to an `Input` component.
+ * Used by the FormField.Input subcomponent and other input type components
+ */
+export declare const useFormFieldInput: <P extends {}, R>(model: import("@workday/canvas-kit-react/common").Model<{
+    hasError?: boolean | undefined;
+    id?: string | undefined;
+    isRequired?: boolean | undefined;
+}, {}>, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | import("react").RefObject<R> | null | undefined) => {
+    required: boolean | undefined;
+    'aria-invalid': boolean | undefined;
+    'aria-describedby': string;
+    id: string;
+} & P & (R extends HTMLOrSVGElement ? {
+    ref: import("react").Ref<R>;
+} : {});
+//# 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;;;;;;;;;;;OAO5B,CAAC"}

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

@@ -0,0 +1,14 @@
+import { createHook } from '@workday/canvas-kit-react/common';
+/**
+ * Adds the necessary props to an `Input` component.
+ * Used by the FormField.Input subcomponent and other input type components
+ */
+export var useFormFieldInput = createHook(function (_a) {
+    var state = _a.state;
+    return {
+        required: state.isRequired ? true : undefined,
+        'aria-invalid': state.hasError ? true : undefined,
+        'aria-describedby': "hint-" + state.id,
+        id: "input-" + state.id,
+    };
+});

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

@@ -0,0 +1,15 @@
+/// <reference types="@emotion/core" />
+/**
+ * Adds the necessary props to a `Label` component.
+ * Used by the FormField.Label subcomponent and other input type components
+ */
+export declare const useFormFieldLabel: <P extends {}, R>(model: import("@workday/canvas-kit-react/common").Model<{
+    hasError?: boolean | undefined;
+    id?: string | undefined;
+    isRequired?: boolean | undefined;
+}, {}>, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | import("react").RefObject<R> | null | undefined) => {
+    htmlFor: string;
+} & P & (R extends HTMLOrSVGElement ? {
+    ref: import("react").Ref<R>;
+} : {});
+//# 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;;;;;;;;OAI5B,CAAC"}

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

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

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

@@ -0,0 +1,36 @@
+import { Model, ToModelConfig } from '@workday/canvas-kit-react/common';
+declare type FormFieldState = {
+    /**
+     * 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.
+     * @default false
+     */
+    hasError?: boolean;
+    /**
+     * 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`.
+     * @default false
+     */
+    isRequired?: boolean;
+};
+declare type FormFieldEvents = {};
+export declare type FormFieldModel = Model<FormFieldState, FormFieldEvents>;
+declare const formFieldEventMap: {
+    guards: {};
+    callbacks: {};
+};
+export declare type FormFieldModelConfig = FormFieldState & Partial<ToModelConfig<FormFieldState, FormFieldEvents, typeof formFieldEventMap>>;
+export declare const useFormFieldModel: (config?: FormFieldModelConfig) => Model<FormFieldState, FormFieldEvents>;
+export {};
+//# 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":"AAAA,OAAO,EAEL,KAAK,EACL,aAAa,EAGd,MAAM,kCAAkC,CAAC;AAE1C,aAAK,cAAc,GAAG;IACpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;;;;OASG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,aAAK,eAAe,GAAG,EAAE,CAAC;AAE1B,oBAAY,cAAc,GAAG,KAAK,CAAC,cAAc,EAAE,eAAe,CAAC,CAAC;AAEpE,QAAA,MAAM,iBAAiB;;;CAGrB,CAAC;AAEH,oBAAY,oBAAoB,GAAG,cAAc,GAC/C,OAAO,CAAC,aAAa,CAAC,cAAc,EAAE,eAAe,EAAE,OAAO,iBAAiB,CAAC,CAAC,CAAC;AAEpF,eAAO,MAAM,iBAAiB,2EAe7B,CAAC"}

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

@@ -0,0 +1,19 @@
+import { createEventMap, useEventMap, useUniqueId, } from '@workday/canvas-kit-react/common';
+var formFieldEventMap = createEventMap()({
+    guards: {},
+    callbacks: {},
+});
+export var useFormFieldModel = function (config) {
+    if (config === void 0) { config = {}; }
+    var id = useUniqueId(config.id);
+    var state = {
+        hasError: config.hasError,
+        isRequired: config.isRequired,
+        id: id,
+    };
+    var events = useEventMap(formFieldEventMap, state, config, {});
+    return {
+        state: state,
+        events: events,
+    };
+};

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

@@ -0,0 +1,9 @@
+/**
+ * Adds the necessary layout props to a `FormField` component.
+ */
+export declare const useFormFieldOrientation: (orientation: "horizontal" | "vertical") => {
+    flexDirection: "column" | "column-reverse" | "row" | "row-reverse" | undefined;
+    alignItems: (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "stretch" | "center" | "end" | "flex-end" | "flex-start" | "start" | "baseline" | "normal" | "self-end" | "self-start" | undefined;
+    spacing: number | (string & {}) | "s" | "zero" | "m" | "l" | "xl" | "xxxs" | "xxs" | "xs" | "xxl" | "xxxl";
+};
+//# 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":"AAGA;;GAEG;AACH,eAAO,MAAM,uBAAuB;;;;CAsBnC,CAAC"}

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

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

package/dist/es6/index.d.ts

@@ -1,6 +1,9 @@
 export * from './breadcrumbs';
 export * from './color-picker';
+export * from './form-field';
 export * from './menu';
 export * from './select';
 export * from './side-panel';
+export * from './text-area';
+export * from './text-input';
 //# sourceMappingURL=index.d.ts.map

package/dist/es6/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC"}

package/dist/es6/index.js

@@ -1,5 +1,8 @@
 export * from './breadcrumbs';
 export * from './color-picker';
+export * from './form-field';
 export * from './menu';
 export * from './select';
 export * from './side-panel';
+export * from './text-area';
+export * from './text-input';

package/dist/es6/side-panel/lib/SidePanel.d.ts

@@ -66,8 +66,30 @@ export declare const SidePanelContext: React.Context<{
 }>;
 declare const SidePanel: {
     ({ as, children, collapsedWidth, expanded, expandedWidth, onAnimationEnd, onAnimationStart, onExpandedChange, onStateTransition, origin, variant, touched, ...elemProps }: SidePanelProps): JSX.Element;
-    ToggleButton: ({ variant, icon, ...rest }: Pick<IconButtonProps, "size" | "icon" | "children" | "value" | "theme" | "shouldMirrorIcon" | "variant" | "onToggleChange" | "toggled"> & React.ButtonHTMLAttributes<HTMLButtonElement>) => JSX.Element;
+    ToggleButton: ({ variant, icon, tooltipTextExpand: expandLabel, tooltipTextCollapse: collapseLabel, ...rest }: IconButtonProps & {
+        /**
+         * The tooltip text to expand the side panel
+         * @default 'Expand'
+         */
+        tooltipTextExpand?: string | undefined;
+        /**
+         * The tooltip text to collapse the side panel
+         * @default 'Collapse'
+         */
+        tooltipTextCollapse?: string | undefined;
+    } & React.ButtonHTMLAttributes<HTMLButtonElement>) => JSX.Element;
+};
+export declare type ToggleButtonProps = IconButtonProps & {
+    /**
+     * The tooltip text to expand the side panel
+     * @default 'Expand'
+     */
+    tooltipTextExpand?: string;
+    /**
+     * The tooltip text to collapse the side panel
+     * @default 'Collapse'
+     */
+    tooltipTextCollapse?: string;
 };
-export declare type ToggleButtonProps = Omit<IconButtonProps, 'aria-label'>;
 export default SidePanel;
 //# sourceMappingURL=SidePanel.d.ts.map

package/dist/es6/side-panel/lib/SidePanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidePanel.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/SidePanel.tsx"],"names":[],"mappings":"AAAA,eAAe;AACf,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAa,eAAe,EAAC,MAAM,kCAAkC,CAAC;AAI7E,oBAAY,gBAAgB,GAAG,UAAU,GAAG,WAAW,CAAC;AACxD,oBAAY,yBAAyB,GAAG,WAAW,GAAG,YAAY,GAAG,UAAU,GAAG,WAAW,CAAC;AAE9F,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1E;;;;OAIG;IACH,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACvB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1B;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD;;;;;;OAMG;IACH,iBAAiB,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,yBAAyB,KAAK,IAAI,CAAC;IAChE;;;;OAIG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B;;;;OAIG;IACH,OAAO,EAAE,OAAO,CAAC;CAClB;AAsCD,eAAO,MAAM,gBAAgB;;;EAG3B,CAAC;AAEH,QAAA,MAAM,SAAS;;;CAgGd,CAAC;AAEF,oBAAY,iBAAiB,GAAG,IAAI,CAAC,eAAe,EAAE,YAAY,CAAC,CAAC;AA2CpE,eAAe,SAAS,CAAC"}
+{"version":3,"file":"SidePanel.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/SidePanel.tsx"],"names":[],"mappings":"AAAA,eAAe;AACf,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAa,eAAe,EAAC,MAAM,kCAAkC,CAAC;AAK7E,oBAAY,gBAAgB,GAAG,UAAU,GAAG,WAAW,CAAC;AACxD,oBAAY,yBAAyB,GAAG,WAAW,GAAG,YAAY,GAAG,UAAU,GAAG,WAAW,CAAC;AAE9F,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1E;;;;OAIG;IACH,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACvB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1B;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD;;;;;;OAMG;IACH,iBAAiB,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,yBAAyB,KAAK,IAAI,CAAC;IAChE;;;;OAIG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B;;;;OAIG;IACH,OAAO,EAAE,OAAO,CAAC;CAClB;AAsCD,eAAO,MAAM,gBAAgB;;;EAG3B,CAAC;AAEH,QAAA,MAAM,SAAS;;;QAmGb;;;WAGG;;QAEH;;;WAGG;;;CAXJ,CAAC;AAEF,oBAAY,iBAAiB,GAAG,eAAe,GAAG;IAChD;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B,CAAC;AAgDF,eAAe,SAAS,CAAC"}

package/dist/es6/side-panel/lib/SidePanel.js

@@ -31,6 +31,7 @@ import { css, jsx, keyframes } from '@emotion/core';
 import { IconButton } from '@workday/canvas-kit-react/button';
 import { space, colors, depth } from '@workday/canvas-kit-react/tokens';
 import { transformationImportIcon } from '@workday/canvas-system-icons-web';
+import { Tooltip } from '@workday/canvas-kit-react/tooltip';
 var createKeyframes = function (from, to) {
     var normalized = {
         from: typeof from === 'number' ? from + 'px' : from,
@@ -116,7 +117,7 @@ var SidePanel = function (_a) {
  * A toggle button styled specifically for the side panel container.
  */
 var ToggleButton = function (_a) {
-    var _b = _a.variant, variant = _b === void 0 ? 'plain' : _b, _c = _a.icon, icon = _c === void 0 ? transformationImportIcon : _c, rest = __rest(_a, ["variant", "icon"]);
+    var _b = _a.variant, variant = _b === void 0 ? 'plain' : _b, _c = _a.icon, icon = _c === void 0 ? transformationImportIcon : _c, _d = _a.tooltipTextExpand, expandLabel = _d === void 0 ? 'Expand' : _d, _e = _a.tooltipTextCollapse, collapseLabel = _e === void 0 ? 'Collapse' : _e, rest = __rest(_a, ["variant", "icon", "tooltipTextExpand", "tooltipTextCollapse"]);
     var context = React.useContext(SidePanelContext);
     var useRTLOrigin = function () {
         var isRTL = useIsRTL();
@@ -140,8 +141,8 @@ var ToggleButton = function (_a) {
             ? "scaleX(" + (rtlOrigin === 'left' ? '1' : '-1') + ")"
             : "scaleX(" + (rtlOrigin === 'left' ? '-1' : '1') + ")",
     });
-    // @ts-ignore aria-label type error here. The user will decide to use aria-label or aria-labelledby
-    return jsx(IconButton, __assign({ type: "button", css: buttonStyle, icon: icon, variant: variant }, rest));
+    return (jsx(Tooltip, { title: context.state === 'collapsed' ? expandLabel : collapseLabel, type: "muted" },
+        jsx(IconButton, __assign({ type: "button", css: buttonStyle, icon: icon, variant: variant }, rest))));
 };
 SidePanel.ToggleButton = ToggleButton;
 export default SidePanel;

package/dist/es6/text-area/index.d.ts

@@ -0,0 +1,2 @@
+export * from './lib/TextArea';
+//# sourceMappingURL=index.d.ts.map

package/dist/es6/text-area/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../text-area/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}

package/dist/es6/text-area/index.js

@@ -0,0 +1 @@
+export * from './lib/TextArea';

package/dist/es6/text-area/lib/TextArea.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { ExtractProps } from '@workday/canvas-kit-react/common';
+import { FormField } from '@workday/canvas-kit-preview-react/form-field';
+import { TextAreaModel } from './hooks';
+export declare const TextAreaModelContext: React.Context<import("@workday/canvas-kit-react/common").Model<{
+    hasError?: boolean | undefined;
+    id?: string | undefined;
+    isRequired?: boolean | undefined;
+}, {}>>;
+export interface TextAreaProps extends ExtractProps<typeof FormField, never> {
+    model?: TextAreaModel;
+    /**
+     * Children of the Text Input. Should contain a `<TextArea.Field>`, a `<TextArea.Label>` and an optional `<TextArea.Hint>`
+     */
+    children: React.ReactNode;
+}
+export declare const TextArea: import("@workday/canvas-kit-react/common").Component<TextAreaProps> & {
+    Field: import("@workday/canvas-kit-react/common").ElementComponent<"textarea", import("./TextAreaField").TextAreaFieldProps>;
+    Label: import("@workday/canvas-kit-react/common").ElementComponent<"label", import("../../form-field/lib/FormFieldLabel").FormFieldLabelProps>;
+    Hint: import("@workday/canvas-kit-react/common").ElementComponent<"p", import("../../form-field/lib/FormFieldHint").FormFieldHintProps>;
+};
+//# sourceMappingURL=TextArea.d.ts.map

package/dist/es6/text-area/lib/TextArea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../../text-area/lib/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAkB,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAChG,OAAO,EAAC,SAAS,EAAiD,MAAM,8CAA8C,CAAC;AAGvH,OAAO,EAAE,aAAa,EAAoB,MAAM,SAAS,CAAC;AAK1D,eAAO,MAAM,oBAAoB;;;;OAAwB,CAAC;AAE1D,MAAM,WAAW,aAAc,SAAQ,YAAY,CAAC,OAAO,SAAS,EAAE,KAAK,CAAC;IAC1E,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,QAAQ;;;;CAqBnB,CAAC"}