@procore/core-react 10.25.1-rc.14959 → 10.26.0

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

@@ -1,814 +0,0 @@
-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