@procore/core-react 10.26.0 → 10.26.1-rc.2

package/dist/esm/components/Form/Form.js

@@ -0,0 +1,814 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import conditionalStrings from 'classnames';
+import { Formik, useField as useFormikField, useFormikContext, } from 'formik';
+import { either, identity, is, isEmpty, prop, startsWith, toLower } from 'ramda';
+import React from 'react';
+import styled from 'styled-components';
+import { Box } from '../../layouts/Box';
+import { useI18nContext } from '../../state/I18n';
+import { useDateTime } from '../../state/DateTime';
+import { colors } from '../../styles/colors';
+import { addSubcomponents } from '../../utils/addSubcomponents';
+import { formatMachineDate, toDate } from '../../utils/dateTime';
+import { Banner, ErrorBanner } from '../Banner';
+import { Checkbox } from '../Checkbox';
+import { DateSelect } from '../DateSelect';
+import { GroupSelect } from '../GroupSelect';
+import { Input } from '../Input';
+import { MultiSelect } from '../MultiSelect';
+import { CurrencyInput as BaseCurrencyInput, defaultCurrencyDecimalScale, defaultCurrencyFillDecimalScale, defaultCurrencyInputPrefix, NumberInput as BaseNumberInput, } from '../NumberInput';
+import { useNumberFormat } from '../NumberInput/NumberInput.hooks';
+import { Pill } from '../Pill';
+import { defaultGetColor, PillSelect } from '../PillSelect/PillSelect';
+import { RadioButton } from '../RadioButton';
+import { Select } from '../Select';
+import { TextArea } from '../TextArea';
+import { TextEditor } from '../TextEditor';
+import { TextEditorOutput } from '../TextEditorOutput';
+import { TieredSelect } from '../TieredSelect';
+import { Tooltip } from '../Tooltip';
+import { getTypographyIntent, typographyWeights, } from '../Typography/Typography.styles';
+import { StyledForm, StyledFormFieldBanner, StyledFormFieldErrorIcon, StyledFormFieldHeader, StyledFormFieldMain, StyledFormFieldRequiredMark, StyledFormFieldTooltipIcon, StyledFormikForm, StyledFormCheckboxInput, StyledFormOutputFiledset, StyledFormOutputTextArea, StyledFormRow, StyledTraditionalFormColumn, StyledTraditionalFormLabel, } from './Form.styles';
+import Typography from '../Typography';
+var emptyObject = {};
+var emptyArray = [];
+function noop() { }
+var isFunction = function (obj) { return typeof obj === 'function'; };
+function getValueComponent(view, asComponent) {
+    return asComponent[view] || asComponent || TextInput;
+}
+var SharedPropsContext = React.createContext(emptyObject);
+export var FormContext = React.createContext({
+    different: false,
+    disabled: false,
+    enableReinitialize: false,
+    setFieldDifferent: function (k, d) { },
+    variant: 'wxp',
+    view: 'create',
+});
+export function useFormContext() {
+    var formik = useFormikContext();
+    var formulaire = React.useContext(FormContext);
+    return __assign(__assign({}, formik), formulaire);
+}
+export function getPrimitiveValue(value, getId) {
+    if (getId === void 0) { getId = defaultGetId; }
+    if (value === null || value === undefined) {
+        return '';
+    }
+    if (value instanceof Date) {
+        return value.toISOString();
+    }
+    if (is(Array, value)) {
+        return value.map(getId).join();
+    }
+    if (is(Object, value)) {
+        if (isEmpty(value)) {
+            return '';
+        }
+        return getId(value);
+    }
+    return value;
+}
+export function useField(_a) {
+    var _b = _a === void 0 ? emptyObject : _a, _disabled = _b.disabled, _c = _b.error, _error = _c === void 0 ? false : _c, getId = _b.getId, _d = _b.required, _required = _d === void 0 ? false : _d, name = _b.name, validate = _b.validate, _view = _b.view;
+    var _e = useFormikField({ name: name, validate: validate }), input = _e[0], meta = _e[1], helpers = _e[2];
+    var _f = React.useContext(FormContext), disabled = _f.disabled, setFieldDifferent = _f.setFieldDifferent, validationSchema = _f.validationSchema, view = _f.view;
+    var _g = useFormikContext(), validateOnBlur = _g.validateOnBlur, validateOnChange = _g.validateOnChange;
+    var requiredInSchema = React.useMemo(function () {
+        var fieldSchema = validationSchema === null || validationSchema === void 0 ? void 0 : validationSchema.describe().fields[name];
+        return ((fieldSchema === null || fieldSchema === void 0 ? void 0 : fieldSchema.tests.findIndex(function (test) { return test.name === 'required'; })) > -1);
+    }, [validationSchema, name]);
+    var initialPrimitiveValue = React.useMemo(function () {
+        return getPrimitiveValue(meta.initialValue, getId);
+    }, [meta.initialValue, getId]);
+    var onChange = React.useCallback(function (event) {
+        setFieldDifferent(name, initialPrimitiveValue !== getPrimitiveValue(event.target.value, getId));
+        input.onChange(event);
+    }, [
+        initialPrimitiveValue,
+        input.onChange,
+        getPrimitiveValue,
+        getId,
+        setFieldDifferent,
+    ]);
+    var setValue = React.useCallback(function () {
+        var args = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            args[_i] = arguments[_i];
+        }
+        setFieldDifferent(name, initialPrimitiveValue !== getPrimitiveValue(args[0], getId));
+        helpers.setValue.apply(helpers, args);
+    }, [
+        initialPrimitiveValue,
+        helpers.setValue,
+        getPrimitiveValue,
+        getId,
+        setFieldDifferent,
+    ]);
+    return {
+        input: __assign(__assign({}, input), { onChange: onChange }),
+        helpers: __assign(__assign({}, helpers), { setValue: setValue }),
+        messages: {
+            error: typeof _error === 'string' ? _error : meta.error,
+        },
+        meta: __assign(__assign({}, meta), { error: validateOnBlur || validateOnChange
+                ? (meta.error && meta.touched) || Boolean(_error)
+                : Boolean(meta.error) || Boolean(_error), disabled: _disabled !== null && _disabled !== void 0 ? _disabled : disabled, required: requiredInSchema || _required, view: _view || view }),
+    };
+}
+var onBeforeUnload = function (e) {
+    // https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload
+    e.preventDefault();
+    e.returnValue = '';
+};
+var useDifferent = function () {
+    var _a = React.useState(emptyObject), differentObject = _a[0], setDifferentObject = _a[1];
+    var setFieldDifferent = function (name, isDiff) {
+        if (isDiff !== differentObject[name]) {
+            // HACK: Do not change. setTimeout seemingly allows fields to update their
+            // state before causing context re-render. This is specific to TinyMCE behavior.
+            setTimeout(function () {
+                return setDifferentObject(function (prev) {
+                    var _a;
+                    return (__assign(__assign({}, prev), (_a = {}, _a[name] = isDiff, _a)));
+                });
+            });
+        }
+    };
+    var resetDifferent = function () { return setDifferentObject(emptyObject); };
+    var different = React.useMemo(function () {
+        return Object.values(differentObject).some(identity);
+    }, [differentObject]);
+    return { different: different, resetDifferent: resetDifferent, setFieldDifferent: setFieldDifferent };
+};
+function Form_(_a) {
+    var _b = _a.initialValues, initialValues = _b === void 0 ? emptyObject : _b, _c = _a.onSubmit, _onSubmit = _c === void 0 ? noop : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.enableConfirmNavigation, enableConfirmNavigation = _e === void 0 ? false : _e, _f = _a.variant, variant = _f === void 0 ? 'wxp' : _f, validationSchema = _a.validationSchema, _g = _a.view, view = _g === void 0 ? 'create' : _g, props = __rest(_a, ["initialValues", "onSubmit", "disabled", "enableConfirmNavigation", "variant", "validationSchema", "view"]);
+    var _h = useDifferent(), different = _h.different, resetDifferent = _h.resetDifferent, setFieldDifferent = _h.setFieldDifferent;
+    React.useEffect(function () {
+        if (enableConfirmNavigation) {
+            if (different && (view === 'create' || view === 'update')) {
+                window.onbeforeunload = onBeforeUnload;
+            }
+            else if (!different && (view === 'create' || view === 'update')) {
+                window.onbeforeunload = null;
+            }
+        }
+    }, [enableConfirmNavigation, different, view]);
+    var reset = function () {
+        if (enableConfirmNavigation) {
+            window.onbeforeunload = null;
+        }
+        resetDifferent();
+    };
+    var onSubmit = function (values, actions) {
+        var promiseOrUndefined = _onSubmit(values, actions);
+        if (promiseOrUndefined === undefined) {
+            return;
+        }
+        return promiseOrUndefined
+            .then(function (result) {
+            reset();
+            return result;
+        })
+            .catch(function (result) {
+            return result;
+        });
+    };
+    return (React.createElement(FormContext.Provider, { value: {
+            different: different,
+            disabled: disabled,
+            setFieldDifferent: setFieldDifferent,
+            validationSchema: validationSchema,
+            variant: variant,
+            view: view,
+            enableReinitialize: props.enableReinitialize,
+        } },
+        React.createElement(Formik, __assign({}, __assign({ initialValues: initialValues, onSubmit: onSubmit, validationSchema: validationSchema, validateOnBlur: false, validateOnChange: false }, props)), isFunction(props.children) ? props.children : React.createElement(React.Fragment, null, props.children))));
+}
+export function FormForm(_a) {
+    var children = _a.children, className = _a.className, onKeyDown = _a.onKeyDown, style = _a.style, props = __rest(_a, ["children", "className", "onKeyDown", "style"]);
+    var view = React.useContext(FormContext).view;
+    if (view === 'create' || view === 'update') {
+        var preventFormSubmission = function (e) {
+            if (e.key === 'Enter' &&
+                e.target instanceof Element &&
+                (e.target.tagName === 'INPUT' ||
+                    e.target.tagName === 'DIV' ||
+                    e.target.tagName === 'SPAN')) {
+                e.stopPropagation();
+                e.preventDefault();
+            }
+            onKeyDown && onKeyDown(e);
+        };
+        return (React.createElement(StyledFormikForm, __assign({ children: children, className: className, onKeyDown: preventFormSubmission, style: style }, props)));
+    }
+    return React.createElement(StyledForm, { children: children, className: className, style: style });
+}
+export function FormErrorBanner(_a) {
+    var item = _a.item, _b = _a.i18nScope, i18nScope = _b === void 0 ? 'core.form.errorBanner' : _b;
+    var context = useFormContext();
+    var I18n = useI18nContext();
+    if ((context.view === 'create' || context.view === 'update') &&
+        !isEmpty(context.errors)) {
+        return (React.createElement(ErrorBanner, null,
+            React.createElement(Banner.Content, null,
+                React.createElement(Banner.Title, null, context.view === 'create'
+                    ? I18n.t('coundNotCreateItem', { item: item, scope: i18nScope })
+                    : I18n.t('couldNotUpdateItem', { item: item, scope: i18nScope })),
+                React.createElement(Banner.Body, null, context.view === 'create'
+                    ? I18n.t('fixErrorsToCreate', { scope: i18nScope })
+                    : I18n.t('fixErrorsToUpdate', { scope: i18nScope })))));
+    }
+    return null;
+}
+var StyledLabel = styled.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  color: ", ";\n  font-weight: ", ";\n  word-wrap: break-word;\n  word-break: break-word;\n"], ["\n  ", "\n  color: ", ";\n  font-weight: ", ";\n  word-wrap: break-word;\n  word-break: break-word;\n"])), getTypographyIntent('body'), colors.gray15, typographyWeights.bold);
+export function isEmptyField(val) {
+    return (val === undefined ||
+        val === null ||
+        val.length === 0 ||
+        (is(Object, val) && isEmpty(val)));
+}
+export function WXPField(_a) {
+    var AsComponent = _a.as, children = _a.children, _b = _a.colStart, colStart = _b === void 0 ? 1 : _b, _c = _a.colWidth, colWidth = _c === void 0 ? 6 : _c, disabled = _a.disabled, error = _a.error, label = _a.label, name = _a.name, required = _a.required, tooltip = _a.tooltip, validate = _a.validate, view = _a.view, props = __rest(_a, ["as", "children", "colStart", "colWidth", "disabled", "error", "label", "name", "required", "tooltip", "validate", "view"]);
+    var field = useField({
+        disabled: disabled,
+        error: error,
+        getId: props.getId,
+        name: name,
+        required: required,
+        validate: validate,
+        view: view,
+    });
+    var ValueComponent = getValueComponent(field.meta.view, AsComponent);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(StyledFormFieldHeader, { "$colIeSpan": colWidth, "$colStart": colStart, "$colEnd": colStart + colWidth },
+            label && React.createElement(StyledLabel, { htmlFor: name }, label),
+            (field.meta.view === 'create' || field.meta.view === 'update') &&
+                field.meta.required && React.createElement(StyledFormFieldRequiredMark, null),
+            tooltip && (React.createElement(Tooltip, { overlay: tooltip },
+                React.createElement(StyledFormFieldTooltipIcon, { size: "sm" })))),
+        React.createElement(StyledFormFieldMain, { "$colIeSpan": colWidth, "$colStart": colStart, "$colEnd": colStart + colWidth, "$read": field.meta.view === 'read' },
+            children ? (isFunction(children) ? (children(field)) : (children)) : (React.createElement(ValueComponent, __assign({}, props, { field: field }))),
+            React.createElement(StyledFormFieldBanner, null,
+                field.meta.error && (React.createElement(Box, { marginRight: "xs" },
+                    React.createElement(StyledFormFieldErrorIcon, { size: "sm" }))),
+                field.meta.error && field.messages.error && (React.createElement("span", null, field.messages.error))))));
+}
+export function TraditionalField(_a) {
+    var AsComponent = _a.as, children = _a.children, _b = _a.colWidth, colWidth = _b === void 0 ? 6 : _b, disabled = _a.disabled, error = _a.error, label = _a.label, name = _a.name, required = _a.required, tooltip = _a.tooltip, validate = _a.validate, view = _a.view, props = __rest(_a, ["as", "children", "colWidth", "disabled", "error", "label", "name", "required", "tooltip", "validate", "view"]);
+    var field = useField({
+        disabled: disabled,
+        error: error,
+        getId: props.getId,
+        name: name,
+        required: required,
+        validate: validate,
+        view: view,
+    });
+    var ValueComponent = getValueComponent(field.meta.view, AsComponent);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(StyledTraditionalFormColumn, null, label && (React.createElement(React.Fragment, null,
+            React.createElement(StyledTraditionalFormLabel, { "$view": field.meta.view },
+                React.createElement("label", { htmlFor: name },
+                    label,
+                    ":")),
+            (field.meta.view === 'create' || field.meta.view === 'update') &&
+                field.meta.required && React.createElement(StyledFormFieldRequiredMark, null),
+            tooltip && (React.createElement(Tooltip, { overlay: tooltip, placement: "right" },
+                React.createElement(StyledFormFieldTooltipIcon, { size: "sm" })))))),
+        React.createElement(StyledTraditionalFormColumn, { "$fullWidth": colWidth === 12, "$output": field.meta.view === 'read' }, children ? (isFunction(children) ? (children(field)) : (children)) : (React.createElement(ValueComponent, __assign({}, props, { field: field }))))));
+}
+export function Row(_a) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    var _b = React.useContext(FormContext), variant = _b.variant, view = _b.view;
+    return (React.createElement(StyledFormRow, __assign({ "$traditional": variant === 'traditional', "$read": view === 'read' }, props), children));
+}
+export function BaseField(props) {
+    var variant = React.useContext(FormContext).variant;
+    if (variant === 'traditional') {
+        return (React.createElement(TraditionalField, __assign({}, props)));
+    }
+    else {
+        return React.createElement(WXPField, __assign({}, props));
+    }
+}
+// MAKE
+function makeSharedField(viewAs) {
+    return function Field(_a) {
+        var children = _a.children, props = __rest(_a, ["children"]);
+        if (children) {
+            return (React.createElement(SharedPropsContext.Provider, { value: props }, children));
+        }
+        return (React.createElement(BaseField, __assign({ as: viewAs }, props), children));
+    };
+}
+function makeViewField(viewAs, when) {
+    return function FieldView(props) {
+        var view = React.useContext(FormContext).view;
+        var commonProps = React.useContext(SharedPropsContext);
+        if (when === view) {
+            return (React.createElement(BaseField, __assign({ as: viewAs }, commonProps, props)));
+        }
+        return null;
+    };
+}
+export function makeField(editComponent, showComponent, options) {
+    var views = {
+        create: editComponent,
+        read: options && !options.emptyState
+            ? showComponent
+            : withDefaultEmptyState(showComponent),
+        update: editComponent,
+    };
+    // @ts-ignore
+    var Field = makeSharedField(views);
+    var Create = makeViewField(
+    // @ts-ignore
+    views, 'create');
+    var Read = makeViewField(
+    // @ts-ignore
+    views, 'read');
+    var Update = makeViewField(
+    // @ts-ignore
+    views, 'update');
+    return addSubcomponents({
+        Create: Create,
+        Read: Read,
+        Update: Update,
+    }, Field);
+}
+/// FIELD TYPES
+// @ts-ignore
+var defaultGetLabel = either(prop('label'), prop('name'));
+var defaultGetId = prop('id');
+var defaultGetGroup = prop('groupId');
+// EMPTY STATE
+var EmptyState = function (props) {
+    var _a;
+    return (React.createElement(Typography, { intent: "body", color: "gray45", "data-qa": conditionalStrings((_a = {},
+            _a["".concat(props['data-qa'])] = props['data-qa'],
+            _a), "core-form-field-empty") }, "--"));
+};
+export function withDefaultEmptyState(OutputComponent) {
+    var WithDefaultEmptyState = React.forwardRef(function (props, ref) {
+        if (isEmptyField(props.field.input.value)) {
+            return React.createElement(EmptyState, __assign({}, props));
+        }
+        // ComponentWithFieldProp's third type of generic function raises an issue with the component possibly being 'undefined'
+        // @ts-ignore
+        return React.createElement(OutputComponent, __assign({ ref: ref }, props));
+    });
+    // @ts-ignore
+    WithDefaultEmptyState.displayName = "FieldWithEmptyState";
+    return WithDefaultEmptyState;
+}
+// TEXT
+export var TextInput = React.forwardRef(function TextInput(_a, ref) {
+    var _onBlur = _a.onBlur, _onChange = _a.onChange, field = _a.field, props = __rest(_a, ["onBlur", "onChange", "field"]);
+    var onBlur = function (e) {
+        field.input.onBlur(e);
+        _onBlur && _onBlur(e);
+    };
+    var onChange = function (e) {
+        field.input.onChange(e);
+        _onChange && _onChange(e);
+    };
+    return (React.createElement(Input, __assign({ "aria-required": field.meta.required, disabled: field.meta.disabled, error: field.meta.error, name: field.input.name, onBlur: onBlur, onChange: onChange, ref: ref, value: field.input.value || '' }, props)));
+});
+export var TextOutput = React.forwardRef(function TextOutput(_a, ref) {
+    var field = _a.field, props = __rest(_a, ["field"]);
+    return (React.createElement("span", __assign({ ref: ref }, props), field.input.value));
+});
+var FieldText = makeField(TextInput, TextOutput);
+// NUMBER
+export var NumberInput = React.forwardRef(function NumberInput(_a, ref) {
+    var onBlur_ = _a.onBlur, onChange_ = _a.onChange, field = _a.field, props = __rest(_a, ["onBlur", "onChange", "field"]);
+    var onBlur = function (e) {
+        field.input.onBlur(e);
+        onBlur_ === null || onBlur_ === void 0 ? void 0 : onBlur_(e);
+    };
+    var onChange = React.useCallback(function (valueChange) {
+        // field.helpers.setValue always updates. Using field.input.onChange instead.
+        // setValue causes infinite loop with NumberInput changing locale logic
+        // helpers difference reference each update https://github.com/formium/formik/issues/2268
+        field.input.onChange({
+            target: {
+                name: field.input.name,
+                value: valueChange.parsedNumber,
+            },
+        });
+        onChange_ === null || onChange_ === void 0 ? void 0 : onChange_(valueChange);
+    }, [onChange_, field.input.onChange]);
+    return (React.createElement(BaseNumberInput, __assign({ "aria-required": field.meta.required, disabled: field.meta.disabled, error: field.meta.error, name: field.input.name, onBlur: onBlur, onChange: onChange, ref: ref, value: field.input.value }, props)));
+});
+export var NumberOutput = React.forwardRef(function NumberOutput(_a, ref) {
+    var decimalScale = _a.decimalScale, defaultValue = _a.defaultValue, field = _a.field, fillDecimalScale = _a.fillDecimalScale, locale = _a.locale, onChange = _a.onChange, prefix = _a.prefix, props = __rest(_a, ["decimalScale", "defaultValue", "field", "fillDecimalScale", "locale", "onChange", "prefix"]);
+    var formatValue = useNumberFormat({
+        decimalScale: decimalScale,
+        fillDecimalScale: fillDecimalScale === 'always' || fillDecimalScale === 'onBlur'
+            ? 'always'
+            : 'none',
+        locale: locale,
+    }).formatValue;
+    var value = formatValue(field.input.value);
+    return (React.createElement("span", __assign({ ref: ref }, props),
+        value && prefix ? prefix : null,
+        " ",
+        value));
+});
+var FieldNumber = makeField(NumberInput, NumberOutput);
+// CURRENCY
+export var CurrencyInput = React.forwardRef(function CurrencyInput(_a, ref) {
+    var onBlur_ = _a.onBlur, onChange_ = _a.onChange, field = _a.field, props = __rest(_a, ["onBlur", "onChange", "field"]);
+    var onBlur = function (e) {
+        field.input.onBlur(e);
+        onBlur_ === null || onBlur_ === void 0 ? void 0 : onBlur_(e);
+    };
+    var onChange = React.useCallback(function (valueChange) {
+        // field.helpers.setValue always updates. Using field.input.onChange instead.
+        // setValue causes infinite loop with NumberInput changing locale logic
+        field.input.onChange({
+            target: {
+                name: field.input.name,
+                value: valueChange.parsedNumber,
+            },
+        });
+        onChange_ === null || onChange_ === void 0 ? void 0 : onChange_(valueChange);
+    }, [onChange_, field.input.onChange]);
+    return (React.createElement(BaseCurrencyInput, __assign({ "aria-required": field.meta.required, disabled: field.meta.disabled, error: field.meta.error, name: field.input.name, onBlur: onBlur, onChange: onChange, ref: ref, value: field.input.value }, props)));
+});
+export var CurrencyOutput = React.forwardRef(function CurrencyOutput(props, ref) {
+    return (React.createElement(NumberOutput, __assign({ decimalScale: defaultCurrencyDecimalScale, fillDecimalScale: defaultCurrencyFillDecimalScale, prefix: defaultCurrencyInputPrefix, ref: ref }, props)));
+});
+var FieldCurrency = makeField(CurrencyInput, CurrencyOutput);
+// DATE
+export var DateInput = React.forwardRef(function DateInput(_a, ref) {
+    var _onChange = _a.onChange, field = _a.field, props = __rest(_a, ["onChange", "field"]);
+    var value = field.input.value
+        ? toDate(field.input.value, 'Form.DateSelect Create or Update Input')
+        : undefined;
+    var onChange = function (value) {
+        field.helpers.setValue(value);
+        field.helpers.setTouched(true);
+        _onChange && _onChange(value);
+    };
+    return (React.createElement(DateSelect, __assign({ disabled: field.meta.disabled, error: field.meta.error, onChange: onChange, ref: ref, value: value }, props)));
+});
+export var DateOutput = React.forwardRef(function DateOutput(_a, ref) {
+    var onChange = _a.onChange, field = _a.field, props = __rest(_a, ["onChange", "field"]);
+    var dateTime = useDateTime();
+    var value = field.input.value
+        ? dateTime.format(toDate(field.input.value, 'Form.DateSelect Read Output'), 'numeric-date')
+        : undefined;
+    var machineValue = field.input.value
+        ? formatMachineDate(dateTime.shiftUtcToZonedTime(toDate(field.input.value)))
+        : undefined;
+    return (React.createElement("span", __assign({ ref: ref }, props), value && React.createElement("time", { dateTime: machineValue }, value)));
+});
+var FieldDateSelect = makeField(DateInput, DateOutput);
+// CHECKBOX
+export var CheckboxInput = React.forwardRef(function CheckboxInput(_a, ref) {
+    var field = _a.field, i18nScope = _a.i18nScope, _onBlur = _a.onBlur, _onChange = _a.onChange, props = __rest(_a, ["field", "i18nScope", "onBlur", "onChange"]);
+    var value = field.input.value || false;
+    var onBlur = function (e) {
+        field.input.onBlur(e);
+        _onBlur && _onBlur(e);
+    };
+    var onChange = function (e) {
+        field.helpers.setValue(!value);
+        _onChange && _onChange(e);
+    };
+    return (React.createElement(StyledFormCheckboxInput, __assign({ "aria-required": field.meta.required, checked: value, disabled: field.meta.disabled, error: field.meta.error, onBlur: onBlur, onChange: onChange, name: field.input.name, ref: ref, value: String(value) }, props)));
+});
+export var CheckboxOutput = React.forwardRef(function CheckboxOutput(_a, ref) {
+    var field = _a.field, _b = _a.i18nScope, i18nScope = _b === void 0 ? 'core.form.checkbox' : _b, props = __rest(_a, ["field", "i18nScope"]);
+    var i18n = useI18nContext();
+    var yes = i18n.t('yes', { scope: i18nScope });
+    var no = i18n.t('no', { scope: i18nScope });
+    return (React.createElement("span", __assign({ ref: ref }, props), field.input.value ? yes : no));
+});
+var FieldCheckbox = makeField(CheckboxInput, CheckboxOutput, { emptyState: false });
+// TEXTAREA
+export var TextAreaInput = React.forwardRef(function TextAreaInput(_a, ref) {
+    var field = _a.field, _onBlur = _a.onBlur, _onChange = _a.onChange, props = __rest(_a, ["field", "onBlur", "onChange"]);
+    var onBlur = function (e) {
+        field.input.onBlur(e);
+        _onBlur && _onBlur(e);
+    };
+    var onChange = function (e) {
+        field.input.onChange(e);
+        _onChange && _onChange(e);
+    };
+    return (React.createElement(TextArea, __assign({ "aria-required": field.meta.required, disabled: field.meta.disabled, error: field.meta.error, name: field.input.name, onBlur: onBlur, onChange: onChange, ref: ref, value: field.input.value }, props)));
+});
+export var TextAreaOutput = React.forwardRef(function TextAreaOutput(_a, ref) {
+    var field = _a.field, props = __rest(_a, ["field"]);
+    return (React.createElement(StyledFormOutputTextArea, __assign({ ref: ref }, props), field.input.value));
+});
+var FieldTextArea = makeField(TextAreaInput, TextAreaOutput);
+// RICHTEXT
+export var RichTextInput = React.forwardRef(function RichTextInput(_a, ref) {
+    var _onChange = _a.onChange, field = _a.field, props = __rest(_a, ["onChange", "field"]);
+    var onChange = function (value) {
+        field.helpers.setValue(value);
+        field.helpers.setTouched(true);
+        _onChange && _onChange(value);
+    };
+    return (React.createElement(TextEditor, __assign({ disabled: field.meta.disabled, error: field.meta.error, value: field.input.value, onChange: onChange }, props)));
+});
+export var RichTextOutput = React.forwardRef(function RichTextOutput(_a, ref) {
+    var field = _a.field, onBlur = _a.onBlur, onChange = _a.onChange, onClick = _a.onClick, onContextMenu = _a.onContextMenu, onCopy = _a.onCopy, onCut = _a.onCut, onDrag = _a.onDrag, onDragDrop = _a.onDragDrop, onDragEnd = _a.onDragEnd, onDragGesture = _a.onDragGesture, onDragOver = _a.onDragOver, onDrop = _a.onDrop, onFocus = _a.onFocus, onKeyDown = _a.onKeyDown, onKeyPress = _a.onKeyPress, onMouseDown = _a.onMouseDown, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onMouseMove = _a.onMouseMove, onMouseOut = _a.onMouseOut, onMouseOver = _a.onMouseOver, onMouseUp = _a.onMouseUp, onPaste = _a.onPaste, onReset = _a.onReset, onSubmit = _a.onSubmit, props = __rest(_a, ["field", "onBlur", "onChange", "onClick", "onContextMenu", "onCopy", "onCut", "onDrag", "onDragDrop", "onDragEnd", "onDragGesture", "onDragOver", "onDrop", "onFocus", "onKeyDown", "onKeyPress", "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseMove", "onMouseOut", "onMouseOver", "onMouseUp", "onPaste", "onReset", "onSubmit"]);
+    return React.createElement(TextEditorOutput, __assign({ value: field.input.value, ref: ref }, props));
+});
+var FieldRichText = makeField(RichTextInput, RichTextOutput);
+// RADIO BUTTONS
+export var RadioButtonsInput = React.forwardRef(function RadioButtonsInput(_a, ref) {
+    var field = _a.field, _b = _a.getId, getId = _b === void 0 ? defaultGetId : _b, _c = _a.getLabel, getLabel = _c === void 0 ? defaultGetLabel : _c, isDisabledOption = _a.isDisabledOption, options = _a.options, props = __rest(_a, ["field", "getId", "getLabel", "isDisabledOption", "options"]);
+    if (!options || options.length === 0)
+        return null;
+    var onSelect = function (option) { return function () {
+        field.helpers.setValue(option);
+    }; };
+    return (React.createElement(StyledFormOutputFiledset, __assign({ ref: ref, disabled: field.meta.disabled }, props), options.map(function (option) {
+        return (React.createElement(RadioButton, { checked: getId(option) === getId(field.input.value), disabled: isDisabledOption && isDisabledOption(option), error: field.meta.error, key: getId(option), name: field.input.name, onChange: onSelect(option), value: getId(option) }, getLabel(option)));
+    })));
+});
+export var RadioButtonsOutput = React.forwardRef(function RadioButtonsOutput(_a, ref) {
+    var field = _a.field, getId = _a.getId, _b = _a.getLabel, getLabel = _b === void 0 ? defaultGetLabel : _b, options = _a.options, props = __rest(_a, ["field", "getId", "getLabel", "options"]);
+    return (React.createElement("span", __assign({ ref: ref }, props), getLabel(field.input.value)));
+});
+var FieldRadioButtons = makeField(RadioButtonsInput, RadioButtonsOutput);
+// CHECKBOXES
+export var CheckboxesInput = React.forwardRef(function CheckboxesInput(_a, ref) {
+    var field = _a.field, _b = _a.getId, getId = _b === void 0 ? defaultGetId : _b, _c = _a.getLabel, getLabel = _c === void 0 ? defaultGetLabel : _c, isDisabledOption = _a.isDisabledOption, isIndeterminateOption = _a.isIndeterminateOption, options = _a.options, props = __rest(_a, ["field", "getId", "getLabel", "isDisabledOption", "isIndeterminateOption", "options"]);
+    if (!options || options.length === 0)
+        return null;
+    var selectedIds = (field.input.value || emptyArray).map(getId);
+    var onSelect = function (changedOption) { return function () {
+        if (selectedIds.includes(getId(changedOption))) {
+            field.helpers.setValue(field.input.value.filter(function (entry) { return getId(entry) !== getId(changedOption); }));
+        }
+        else {
+            field.helpers.setValue((field.input.value || emptyArray).concat(changedOption));
+        }
+    }; };
+    return (React.createElement(StyledFormOutputFiledset, __assign({ ref: ref, disabled: field.meta.disabled }, props), options.map(function (option) {
+        return (React.createElement(Checkbox, { checked: selectedIds.includes(getId(option)), disabled: isDisabledOption && isDisabledOption(option), error: field.meta.error, indeterminate: isIndeterminateOption && isIndeterminateOption(option), key: getId(option), name: field.input.name, onChange: onSelect(option), value: getId(option) }, getLabel(option)));
+    })));
+});
+export var CheckboxesOutput = React.forwardRef(function CheckboxesOutput(_a, ref) {
+    var field = _a.field, getId = _a.getId, _b = _a.getLabel, getLabel = _b === void 0 ? defaultGetLabel : _b, isDisabledOption = _a.isDisabledOption, isIndeterminateOption = _a.isIndeterminateOption, options = _a.options, props = __rest(_a, ["field", "getId", "getLabel", "isDisabledOption", "isIndeterminateOption", "options"]);
+    return (React.createElement("span", __assign({ ref: ref }, props), field.input.value && field.input.value.map(getLabel).join(', ')));
+});
+var FieldCheckboxes = makeField(CheckboxesInput, CheckboxesOutput);
+// SELECT
+var lowerStartsWith = function (query, value) {
+    if (value === void 0) { value = ''; }
+    return startsWith(toLower(query), toLower(value));
+};
+export function useOptions(_a) {
+    var value = _a.value, optgroups = _a.optgroups, _b = _a.options, options = _b === void 0 ? emptyArray : _b, getLabel = _a.getLabel, getId = _a.getId, groupGetId = _a.groupGetId, _c = _a.getGroup, getGroup = _c === void 0 ? defaultGetGroup : _c, _d = _a.comparator, comparator = _d === void 0 ? lowerStartsWith : _d;
+    var _e = React.useState(''), query = _e[0], setQuery = _e[1];
+    var search = function (e) {
+        return setQuery(e.target.value);
+    };
+    var filteredOptions = React.useMemo(function () { return options.filter(function (option) { return comparator(query, getLabel(option)); }); }, [comparator, query, options, getLabel]);
+    var groupedOptions = React.useMemo(function () {
+        if (!optgroups || !optgroups.length) {
+            return filteredOptions;
+        }
+        var optionsByGroup = optgroups.reduce(function (acc, group) {
+            var _a;
+            return __assign(__assign({}, acc), (_a = {}, _a[groupGetId(group)] = [], _a));
+        }, {});
+        var orphanOptions = [];
+        filteredOptions.forEach(function (option) {
+            var groupId = getGroup(option);
+            var groupOptions = optionsByGroup[groupId];
+            if (!groupId || !groupOptions) {
+                orphanOptions.push(option);
+                return;
+            }
+            optionsByGroup[groupId].push(option);
+        });
+        if (orphanOptions.length) {
+            console.warn("Could not find option groups for the options below. Make sure that every option has a proper \"groupId\" field or if \"getGroup\" is implemented correctly.", orphanOptions);
+        }
+        return optgroups.flatMap(function (group) {
+            var groupHeader = __assign(__assign({}, group), { isGroupHeader: true });
+            var groupOptions = optionsByGroup[groupGetId(group)];
+            if (!groupOptions.length) {
+                return [];
+            }
+            return __spreadArray([groupHeader], groupOptions, true);
+        }, []);
+    }, [filteredOptions, getGroup, groupGetId, optgroups]);
+    var selected = options.find(function (option) { return value && getId(option) === getId(value); }) || value;
+    return { list: groupedOptions, selected: selected, search: search };
+}
+function defaultOptionRenderer(item, _a) {
+    var getId = _a.getId, getLabel = _a.getLabel, props = __rest(_a, ["getId", "getLabel"]);
+    return React.createElement(Select.Option, __assign({}, props), getLabel(item));
+}
+function defaultGroupHeaderRenderer(group, _a) {
+    var getId = _a.getId, getLabel = _a.getLabel, props = __rest(_a, ["getId", "getLabel"]);
+    return React.createElement(Select.OptGroup, __assign({}, props), getLabel(group));
+}
+export var SelectInput = React.forwardRef(function SelectInput(_a, ref) {
+    var _afterHide = _a.afterHide, field = _a.field, _b = _a.getGroup, getGroup = _b === void 0 ? defaultGetGroup : _b, _c = _a.getId, getId = _c === void 0 ? defaultGetId : _c, _d = _a.getLabel, getLabel = _d === void 0 ? defaultGetLabel : _d, _e = _a.groupGetId, groupGetId = _e === void 0 ? defaultGetId : _e, _f = _a.groupGetLabel, groupGetLabel = _f === void 0 ? defaultGetLabel : _f, _g = _a.groupHeaderRenderer, groupHeaderRenderer = _g === void 0 ? defaultGroupHeaderRenderer : _g, isSuggestedOption = _a.isSuggestedOption, _onClear = _a.onClear, _onSearch = _a.onSearch, _onSelect = _a.onSelect, searchComparator = _a.searchComparator, options = _a.options, optgroups = _a.optgroups, _h = _a.optionRenderer, optionRenderer = _h === void 0 ? defaultOptionRenderer : _h, props = __rest(_a, ["afterHide", "field", "getGroup", "getId", "getLabel", "groupGetId", "groupGetLabel", "groupHeaderRenderer", "isSuggestedOption", "onClear", "onSearch", "onSelect", "searchComparator", "options", "optgroups", "optionRenderer"]);
+    var menu = useOptions({
+        options: options,
+        optgroups: optgroups,
+        getGroup: getGroup,
+        getId: getId,
+        getLabel: getLabel,
+        groupGetId: groupGetId,
+        value: field.input.value,
+        comparator: searchComparator,
+    });
+    var label = menu.selected ? getLabel(menu.selected) : undefined;
+    var afterHide = function () {
+        field.helpers.setTouched(true);
+        _afterHide && _afterHide();
+    };
+    var onSelect = function (selection) {
+        field.helpers.setValue(selection.item);
+        _onSelect && _onSelect(selection);
+    };
+    var onClear = function (e) {
+        field.helpers.setValue(null);
+        if (typeof _onClear === 'function') {
+            _onClear(e);
+        }
+    };
+    var onSearch = function (e) {
+        menu.search(e);
+        if (typeof _onSearch === 'function') {
+            _onSearch(e);
+        }
+    };
+    return (React.createElement(Select, __assign({ afterHide: afterHide, block: true, disabled: field.meta.disabled, error: field.meta.error, label: label, onClear: _onClear || _onClear === undefined ? onClear : undefined, onSearch: _onSearch || _onSearch === undefined || searchComparator
+            ? onSearch
+            : undefined, onSelect: onSelect, ref: ref }, props), menu.list.map(function (option) {
+        if (option.isGroupHeader) {
+            return groupHeaderRenderer(option, {
+                getId: groupGetId,
+                getLabel: groupGetLabel,
+                // @ts-ignore
+                // This property is React specific, not a prop on the component renderer
+                key: "group_".concat(groupGetId(option)),
+            });
+        }
+        return optionRenderer(option, {
+            getId: getId,
+            getLabel: getLabel,
+            // @ts-ignore
+            // This property is React specific, not a prop on the component renderer
+            // Object literal may only specify known properties, and 'key' does not exist in type 'OptionProps'.
+            key: getId(option),
+            selected: getId(menu.selected) === getId(option),
+            suggested: isSuggestedOption && isSuggestedOption(option),
+            value: option,
+        });
+    })));
+});
+export var SelectOutput = React.forwardRef(function SelectOutput(_a, ref) {
+    var afterHide = _a.afterHide, afterShow = _a.afterShow, beforeHide = _a.beforeHide, beforeShow = _a.beforeShow, field = _a.field, footer = _a.footer, getId = _a.getId, getGroup = _a.getGroup, _b = _a.getLabel, getLabel = _b === void 0 ? defaultGetLabel : _b, groupGetId = _a.groupGetId, groupGetLabel = _a.groupGetLabel, groupHeaderRenderer = _a.groupHeaderRenderer, i18nScope = _a.i18nScope, isSuggestedOption = _a.isSuggestedOption, options = _a.options, optgroups = _a.optgroups, optionRenderer = _a.optionRenderer, searchComparator = _a.searchComparator, onBlur = _a.onBlur, onClear = _a.onClear, onSearch = _a.onSearch, onSelect = _a.onSelect, props = __rest(_a, ["afterHide", "afterShow", "beforeHide", "beforeShow", "field", "footer", "getId", "getGroup", "getLabel", "groupGetId", "groupGetLabel", "groupHeaderRenderer", "i18nScope", "isSuggestedOption", "options", "optgroups", "optionRenderer", "searchComparator", "onBlur", "onClear", "onSearch", "onSelect"]);
+    return (React.createElement("span", __assign({ ref: ref }, props), getLabel(field.input.value)));
+});
+var FieldSelect = makeField(SelectInput, SelectOutput);
+// PILL SELECT
+export var PillSelectInput = React.forwardRef(function PillSelectInput(_a, ref) {
+    var field = _a.field, _onBlur = _a.onBlur, _onClear = _a.onClear, _onSelect = _a.onSelect, _b = _a.getId, getId = _b === void 0 ? defaultGetId : _b, _c = _a.getLabel, getLabel = _c === void 0 ? defaultGetLabel : _c, props = __rest(_a, ["field", "onBlur", "onClear", "onSelect", "getId", "getLabel"]);
+    var onBlur = function (e) {
+        field.helpers.setTouched(true);
+        _onBlur && _onBlur(e);
+    };
+    var onClear = function (e) {
+        field.helpers.setValue(null);
+        _onClear && _onClear(e);
+    };
+    var onSelect = function (selection) {
+        field.helpers.setValue(selection.item);
+        _onSelect && _onSelect(selection);
+    };
+    return (React.createElement(PillSelect, __assign({ block: true, disabled: field.meta.disabled, error: field.meta.error, getId: getId, getLabel: getLabel, onBlur: onBlur, onClear: _onClear || _onClear === undefined ? onClear : undefined, onSelect: onSelect, ref: ref, value: field.input.value }, props)));
+});
+export var PillSelectOutput = React.forwardRef(function PillSelectOutput(_a, ref) {
+    var afterHide = _a.afterHide, afterShow = _a.afterShow, beforeHide = _a.beforeHide, beforeShow = _a.beforeShow, color = _a.color, field = _a.field, footer = _a.footer, _b = _a.getColor, getColor = _b === void 0 ? defaultGetColor : _b, getGroup = _a.getGroup, _c = _a.getLabel, getLabel = _c === void 0 ? defaultGetLabel : _c, getSuggested = _a.getSuggested, groupGetId = _a.groupGetId, groupGetLabel = _a.groupGetLabel, i18nScope = _a.i18nScope, onClear = _a.onClear, onSearch = _a.onSearch, onSelect = _a.onSelect, options = _a.options, optgroups = _a.optgroups, props = __rest(_a, ["afterHide", "afterShow", "beforeHide", "beforeShow", "color", "field", "footer", "getColor", "getGroup", "getLabel", "getSuggested", "groupGetId", "groupGetLabel", "i18nScope", "onClear", "onSearch", "onSelect", "options", "optgroups"]);
+    return (React.createElement(Pill, __assign({ color: getColor(field.input.value) }, props), getLabel(field.input.value)));
+});
+var FieldPillSelect = makeField(PillSelectInput, PillSelectOutput);
+// MULTISELECT
+export var MultiSelectInput = React.forwardRef(function MultiSelectInput(_a, ref) {
+    var field = _a.field, _onBlur = _a.onBlur, _onChange = _a.onChange, _b = _a.getId, getId = _b === void 0 ? defaultGetId : _b, _c = _a.getLabel, getLabel = _c === void 0 ? defaultGetLabel : _c, props = __rest(_a, ["field", "onBlur", "onChange", "getId", "getLabel"]);
+    var onBlur = function (e) {
+        field.helpers.setTouched(true);
+        _onBlur && _onBlur(e);
+    };
+    var onChange = function (value, e) {
+        field.helpers.setValue(value);
+        _onChange && _onChange(value, e);
+    };
+    return (React.createElement(MultiSelect, __assign({ block: true, disabled: field.meta.disabled, error: field.meta.error, getId: getId, getLabel: getLabel, onBlur: onBlur, onChange: onChange, ref: ref, value: field.input.value }, props)));
+});
+export var MultiSelectOutput = React.forwardRef(function MultiSelectOutput(_a, ref) {
+    var afterHide = _a.afterHide, afterShow = _a.afterShow, beforeHide = _a.beforeHide, beforeShow = _a.beforeShow, emptyMessage = _a.emptyMessage, field = _a.field, getGroup = _a.getGroup, getId = _a.getId, _b = _a.getLabel, getLabel = _b === void 0 ? defaultGetLabel : _b, groupHeaderRenderer = _a.groupHeaderRenderer, isOptionDisabled = _a.isOptionDisabled, onChange = _a.onChange, onSearch = _a.onSearch, onScrollBottom = _a.onScrollBottom, options = _a.options, optgroups = _a.optgroups, optionRenderer = _a.optionRenderer, placement = _a.placement, placeholder = _a.placeholder, tokenRenderer = _a.tokenRenderer, qa = _a.qa, props = __rest(_a, ["afterHide", "afterShow", "beforeHide", "beforeShow", "emptyMessage", "field", "getGroup", "getId", "getLabel", "groupHeaderRenderer", "isOptionDisabled", "onChange", "onSearch", "onScrollBottom", "options", "optgroups", "optionRenderer", "placement", "placeholder", "tokenRenderer", "qa"]);
+    return (React.createElement("span", __assign({ ref: ref }, props), field.input.value && field.input.value.map(getLabel).join(', ')));
+});
+var FieldMultiSelect = makeField(MultiSelectInput, MultiSelectOutput);
+// GROUP SELECT
+export var GroupSelectInput = React.forwardRef(function GroupSelectInput(_a, ref) {
+    var field = _a.field, _onBlur = _a.onBlur, _onChange = _a.onChange, _b = _a.getId, getId = _b === void 0 ? defaultGetId : _b, _c = _a.getLabel, getLabel = _c === void 0 ? defaultGetLabel : _c, props = __rest(_a, ["field", "onBlur", "onChange", "getId", "getLabel"]);
+    var onBlur = function (e) {
+        field.helpers.setTouched(true);
+        _onBlur && _onBlur(e);
+    };
+    var onChange = function (value, e) {
+        field.helpers.setValue(value);
+        _onChange && _onChange(value, e);
+    };
+    return (React.createElement(GroupSelect, __assign({ block: true, disabled: field.meta.disabled, error: field.meta.error, getId: getId, getLabel: getLabel, onBlur: onBlur, onChange: onChange, ref: ref, value: field.input.value }, props)));
+});
+export var GroupSelectOutput = React.forwardRef(function GroupSelectOutput(_a, ref) {
+    var afterHide = _a.afterHide, afterShow = _a.afterShow, beforeHide = _a.beforeHide, beforeShow = _a.beforeShow, emptyMessage = _a.emptyMessage, field = _a.field, getGroup = _a.getGroup, getId = _a.getId, _b = _a.getLabel, getLabel = _b === void 0 ? defaultGetLabel : _b, getOptGroup = _a.getOptGroup, groupRenderer = _a.groupRenderer, groups = _a.groups, isOptionDisabled = _a.isOptionDisabled, placeholder = _a.placeholder, placement = _a.placement, onChange = _a.onChange, onScrollBottom = _a.onScrollBottom, onSearch = _a.onSearch, optgroups = _a.optgroups, options = _a.options, optionRenderer = _a.optionRenderer, optGroupRenderer = _a.optGroupRenderer, tokenRenderer = _a.tokenRenderer, qa = _a.qa, props = __rest(_a, ["afterHide", "afterShow", "beforeHide", "beforeShow", "emptyMessage", "field", "getGroup", "getId", "getLabel", "getOptGroup", "groupRenderer", "groups", "isOptionDisabled", "placeholder", "placement", "onChange", "onScrollBottom", "onSearch", "optgroups", "options", "optionRenderer", "optGroupRenderer", "tokenRenderer", "qa"]);
+    return (React.createElement("span", __assign({ ref: ref }, props), field.input.value && field.input.value.map(getLabel).join(', ')));
+});
+var FieldGroupSelect = makeField(GroupSelectInput, GroupSelectOutput);
+// TIERED SELECT
+export var TieredSelectInput = React.forwardRef(function TieredSelectInput(_a, ref) {
+    var field = _a.field, _onBlur = _a.onBlur, _onChange = _a.onChange, _b = _a.getId, getId = _b === void 0 ? defaultGetId : _b, _c = _a.getLabel, getLabel = _c === void 0 ? defaultGetLabel : _c, props = __rest(_a, ["field", "onBlur", "onChange", "getId", "getLabel"]);
+    var onBlur = function (e) {
+        field.helpers.setTouched(true);
+        _onBlur && _onBlur(e);
+    };
+    var onChange = function (selection) {
+        field.helpers.setValue(selection.value);
+        _onChange && _onChange(selection);
+    };
+    return (React.createElement(TieredSelect, __assign({ block: true, disabled: field.meta.disabled, error: field.meta.error, getId: getId, getLabel: getLabel, onBlur: onBlur, onChange: onChange, ref: ref, value: field.input.value }, props)));
+});
+export var TieredSelectOutput = React.forwardRef(function TieredSelectOutput(_a, ref) {
+    var afterHide = _a.afterHide, afterShow = _a.afterShow, beforeHide = _a.beforeHide, beforeShow = _a.beforeShow, field = _a.field, getId = _a.getId, _b = _a.getLabel, getLabel = _b === void 0 ? defaultGetLabel : _b, getGroupId = _a.getGroupId, getNextGroupId = _a.getNextGroupId, getValueString = _a.getValueString, i18nScope = _a.i18nScope, isLeaf = _a.isLeaf, isTierDisabled = _a.isTierDisabled, loadingMore = _a.loadingMore, onChange = _a.onChange, onClear = _a.onClear, onNavigate = _a.onNavigate, onScrollBottom = _a.onScrollBottom, onSearch = _a.onSearch, onQuickCreate = _a.onQuickCreate, options = _a.options, selectableTiers = _a.selectableTiers, props = __rest(_a, ["afterHide", "afterShow", "beforeHide", "beforeShow", "field", "getId", "getLabel", "getGroupId", "getNextGroupId", "getValueString", "i18nScope", "isLeaf", "isTierDisabled", "loadingMore", "onChange", "onClear", "onNavigate", "onScrollBottom", "onSearch", "onQuickCreate", "options", "selectableTiers"]);
+    return (React.createElement("span", __assign({ ref: ref }, props), field.input.value &&
+        field.input.value.map(function (tier) { return getLabel(tier); }).join(' > ')));
+});
+var FieldTieredSelect = makeField(TieredSelectInput, TieredSelectOutput);
+var FieldAny = makeField(TextInput, TextOutput);
+export var Form = addSubcomponents({
+    Checkboxes: FieldCheckboxes,
+    Checkbox: FieldCheckbox,
+    Currency: FieldCurrency,
+    DateSelect: FieldDateSelect,
+    ErrorBanner: FormErrorBanner,
+    Field: FieldAny,
+    Form: FormForm,
+    GroupSelect: FieldGroupSelect,
+    MultiSelect: FieldMultiSelect,
+    Number: FieldNumber,
+    PillSelect: FieldPillSelect,
+    RadioButtons: FieldRadioButtons,
+    RichText: FieldRichText,
+    Row: Row,
+    Select: FieldSelect,
+    Text: FieldText,
+    TextArea: FieldTextArea,
+    TieredSelect: FieldTieredSelect,
+}, Form_);
+var templateObject_1;
+//# sourceMappingURL=Form.js.map