var _excluded = ["initialValues", "onSubmit", "disabled", "enableConfirmNavigation", "variant", "validationSchema", "view"],
  _excluded2 = ["children", "className", "onKeyDown", "style"],
  _excluded3 = ["item", "i18nScope"],
  _excluded4 = ["as", "children", "colStart", "colWidth", "disabled", "description", "error", "label", "name", "required", "tooltip", "validate", "view", "inlineLabel", "inlineDescription"],
  _excluded5 = ["as", "children", "colWidth", "disabled", "error", "label", "name", "required", "tooltip", "validate", "view"],
  _excluded6 = ["children"],
  _excluded7 = ["children"],
  _excluded8 = ["onBlur", "onChange", "field"],
  _excluded9 = ["field"],
  _excluded0 = ["onBlur", "onChange", "field"],
  _excluded1 = ["decimalScale", "defaultValue", "field", "fillDecimalScale", "locale", "onChange", "prefix", "suffix"],
  _excluded10 = ["onBlur", "onChange", "field"],
  _excluded11 = ["currencyIsoCode", "currencyDisplay", "decimalScale", "suffix", "prefix"],
  _excluded12 = ["onChange", "field"],
  _excluded13 = ["onChange", "field"],
  _excluded14 = ["field", "i18nScope", "tooltip", "hasRequiredMark", "inlineLabel", "onBlur", "onChange"],
  _excluded15 = ["field", "tooltip", "inlineLabel", "i18nScope", "hasRequiredMark"],
  _excluded16 = ["field", "onBlur", "onChange"],
  _excluded17 = ["field"],
  _excluded18 = ["onChange", "field", "textEditorComponent"],
  _excluded19 = ["field", "textEditorComponent", "onBlur", "onChange", "onClick", "onContextMenu", "onCopy", "onCompositionEnd", "onCompositionStart", "onCompositionUpdate", "onCut", "onDrag", "onDragDrop", "onDragEnd", "onDragGesture", "onDragOver", "onDrop", "onFocus", "onInput", "onKeyDown", "onKeyPress", "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseMove", "onMouseOut", "onMouseOver", "onMouseUp", "onPaste", "onReset", "onSubmit"],
  _excluded20 = ["field", "getId", "getLabel", "isDisabledOption", "options"],
  _excluded21 = ["field", "getId", "getLabel", "options"],
  _excluded22 = ["field", "getId", "getLabel", "isDisabledOption", "isIndeterminateOption", "options"],
  _excluded23 = ["field", "getId", "getLabel", "isDisabledOption", "isIndeterminateOption", "options"],
  _excluded24 = ["getId", "getLabel"],
  _excluded25 = ["getId", "getLabel"],
  _excluded26 = ["afterHide", "field", "getGroup", "getId", "getLabel", "groupGetId", "groupGetLabel", "groupHeaderRenderer", "isSuggestedOption", "onClear", "onSearch", "onSelect", "searchComparator", "options", "optgroups", "optionRenderer"],
  _excluded27 = ["afterHide", "afterShow", "beforeHide", "beforeShow", "field", "footer", "getId", "getGroup", "getLabel", "groupGetId", "groupGetLabel", "groupHeaderRenderer", "i18nScope", "isSuggestedOption", "options", "optgroups", "optionRenderer", "searchComparator", "onBlur", "onClear", "onSearch", "onSelect"],
  _excluded28 = ["field", "onBlur", "onClear", "onSelect", "getId", "getLabel"],
  _excluded29 = ["afterHide", "afterShow", "beforeHide", "beforeShow", "color", "field", "footer", "getColor", "getGroup", "getLabel", "getSuggested", "groupGetId", "groupGetLabel", "i18nScope", "onClear", "onSearch", "onSelect", "options", "optgroups"],
  _excluded30 = ["field", "onBlur", "onChange", "getId", "getLabel"],
  _excluded31 = ["afterHide", "afterShow", "beforeHide", "beforeShow", "emptyMessage", "field", "getGroup", "getId", "getLabel", "groupHeaderRenderer", "isOptionDisabled", "onChange", "onSearch", "onScrollBottom", "options", "optgroups", "optionRenderer", "placement", "placeholder", "tokenRenderer", "qa"],
  _excluded32 = ["field", "onBlur", "onChange", "getId", "getLabel"],
  _excluded33 = ["afterHide", "afterShow", "beforeHide", "beforeShow", "emptyMessage", "field", "getGroup", "getId", "getLabel", "getOptGroup", "groupRenderer", "groups", "isOptionDisabled", "placeholder", "placement", "onChange", "onScrollBottom", "onSearch", "optgroups", "options", "optionRenderer", "optGroupRenderer", "tokenRenderer", "qa"],
  _excluded34 = ["field", "onBlur", "onChange", "onClear", "getId", "getLabel"],
  _excluded35 = ["afterHide", "afterShow", "beforeHide", "beforeShow", "field", "getId", "getLabel", "getGroupId", "getNextGroupId", "getValueString", "i18nScope", "isLeaf", "isTierDisabled", "loadingMore", "onChange", "onClear", "onNavigate", "onScrollBottom", "onSearch", "onQuickCreate", "options", "selectableTiers"];
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
import { Ban, Check } from '@procore/core-icons';
import { useId } from '@react-aria/utils';
import conditionalStrings from 'classnames';
import { Formik, FormikContext, useField as useFormikField, useFormikContext } from 'formik';
import { either, identity, is, isEmpty, prop, startsWith, toLower } from 'ramda';
import React from 'react';
import { Banner, ErrorBanner } from '../Banner';
import { Box } from '../Box';
import { Checkbox } from '../Checkbox';
import { DateSelect } from '../DateSelect';
import { GroupSelect } from '../GroupSelect';
import { Input } from '../Input';
import { MultiSelect } from '../MultiSelect';
import { CurrencyInput as BaseCurrencyInput, NumberInput as BaseNumberInput } from '../NumberInput';
import { getCurrencyProps } from '../NumberInput/NumberInput';
import { defaultCurrencyDecimalScale, defaultCurrencyFillDecimalScale, defaultCurrencyInputPrefix } from '../NumberInput/NumberInput.constants';
import { useNumberFormat } from '../NumberInput/NumberInput.hooks';
import { defaultLocale } from '../NumberInput/NumberInput.utils';
import { Pill } from '../Pill';
import { defaultGetColor, PillSelect } from '../PillSelect/PillSelect';
import { RadioButton } from '../RadioButton';
import { Select } from '../Select';
import { SettingsPage } from '../SettingsPage';
import { TextArea } from '../TextArea';
import { TextEditor } from '../TextEditor';
import { TextEditorOutput } from '../TextEditorOutput';
import { TieredSelect } from '../TieredSelect';
import { Typography } from '../Typography';
import { useDateTime } from '../_hooks/DateTime';
import { useI18nContext } from '../_hooks/I18n';
import { addSubcomponents } from '../_utils/addSubcomponents';
import { useCloseWithConfirmContext } from '../_utils/closeWithConfirm';
import { formatMachineDate, toDate } from '../_utils/dateTime';
import { StyledCheckboxInlineDescription, StyledDescription, StyledForm, StyledFormFieldBanner, StyledFormFieldErrorIcon, StyledFormFieldHeader, StyledFormFieldMain, StyledFormFieldRequiredMark, StyledFormOutputFiledset, StyledFormOutputTextArea, StyledFormRow, StyledLabel, StyledTraditionalFormColumn } from './Form.styles';
import { FormFieldTooltip } from './FormFieldTooltip';
import { StyledFormikForm, StyledTraditionalFormLabel } from './StyledFormikForm.styles';
var emptyObject = {};
var emptyArray = [];
function noop() {}
var isFunction = function isFunction(obj) {
  return typeof obj === 'function';
};
function getValueComponent(view, asComponent) {
  return asComponent[view] || asComponent || TextInput;
}
var SharedPropsContext = /*#__PURE__*/React.createContext(emptyObject);
export var FormContext = /*#__PURE__*/React.createContext({
  different: false,
  disabled: false,
  enableReinitialize: false,
  setFieldDifferent: function setFieldDifferent(k, d) {},
  variant: 'wxp',
  view: 'create'
});
export function useFormContext() {
  var formik = useFormikContext();
  var formulaire = React.useContext(FormContext);
  return _objectSpread(_objectSpread({}, formik), formulaire);
}
export function getPrimitiveValue(value) {
  var getId = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 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() {
  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : emptyObject,
    _disabled = _ref.disabled,
    _ref$error = _ref.error,
    _error = _ref$error === void 0 ? false : _ref$error,
    getId = _ref.getId,
    _ref$required = _ref.required,
    _required = _ref$required === void 0 ? false : _ref$required,
    name = _ref.name,
    validate = _ref.validate,
    _view = _ref.view;
  var _useFormikField = useFormikField({
      name: name,
      validate: validate
    }),
    _useFormikField2 = _slicedToArray(_useFormikField, 3),
    input = _useFormikField2[0],
    meta = _useFormikField2[1],
    helpers = _useFormikField2[2];
  var _React$useContext = React.useContext(FormContext),
    disabled = _React$useContext.disabled,
    setFieldDifferent = _React$useContext.setFieldDifferent,
    validationSchema = _React$useContext.validationSchema,
    view = _React$useContext.view;
  var _useFormikContext = useFormikContext(),
    validateOnBlur = _useFormikContext.validateOnBlur,
    validateOnChange = _useFormikContext.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 (value, shouldValidate) {
    var shouldMarkDifferent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
    if (shouldMarkDifferent) {
      setFieldDifferent(name, initialPrimitiveValue !== getPrimitiveValue(value, getId));
    }
    helpers.setValue(value, shouldValidate);
  }, [initialPrimitiveValue, helpers.setValue, getPrimitiveValue, getId, setFieldDifferent]);
  return {
    input: _objectSpread(_objectSpread({}, input), {}, {
      onChange: onChange
    }),
    helpers: _objectSpread(_objectSpread({}, helpers), {}, {
      setValue: setValue
    }),
    messages: {
      error: typeof _error === 'string' ? _error : meta.error
    },
    meta: _objectSpread(_objectSpread({}, 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 onBeforeUnload(e) {
  // https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload
  e.preventDefault();
  e.returnValue = '';
};
var useDifferent = function useDifferent() {
  var _React$useState = React.useState(emptyObject),
    _React$useState2 = _slicedToArray(_React$useState, 2),
    differentObject = _React$useState2[0],
    setDifferentObject = _React$useState2[1];
  var setFieldDifferent = function setFieldDifferent(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) {
          return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, name, isDiff));
        });
      });
    }
  };
  var resetDifferent = function resetDifferent() {
    return setDifferentObject(emptyObject);
  };
  var different = React.useMemo(function () {
    return Object.values(differentObject).some(identity);
  }, [differentObject]);
  return {
    different: different,
    resetDifferent: resetDifferent,
    setFieldDifferent: setFieldDifferent
  };
};
function Form_(_ref2) {
  var _ref2$initialValues = _ref2.initialValues,
    initialValues = _ref2$initialValues === void 0 ? emptyObject : _ref2$initialValues,
    _ref2$onSubmit = _ref2.onSubmit,
    _onSubmit = _ref2$onSubmit === void 0 ? noop : _ref2$onSubmit,
    _ref2$disabled = _ref2.disabled,
    disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
    _ref2$enableConfirmNa = _ref2.enableConfirmNavigation,
    enableConfirmNavigation = _ref2$enableConfirmNa === void 0 ? false : _ref2$enableConfirmNa,
    _ref2$variant = _ref2.variant,
    variant = _ref2$variant === void 0 ? 'wxp' : _ref2$variant,
    validationSchema = _ref2.validationSchema,
    _ref2$view = _ref2.view,
    view = _ref2$view === void 0 ? 'create' : _ref2$view,
    props = _objectWithoutProperties(_ref2, _excluded);
  var _useDifferent = useDifferent(),
    different = _useDifferent.different,
    resetDifferent = _useDifferent.resetDifferent,
    setFieldDifferent = _useDifferent.setFieldDifferent;
  var _useCloseWithConfirmC = useCloseWithConfirmContext(),
    setFormIsDifferent = _useCloseWithConfirmC.setFormIsDifferent;
  React.useEffect(function () {
    if (enableConfirmNavigation) {
      if (different && (view === 'create' || view === 'update')) {
        window.onbeforeunload = onBeforeUnload;
        setFormIsDifferent(true);
      } else if (!different && (view === 'create' || view === 'update')) {
        window.onbeforeunload = null;
        setFormIsDifferent(false);
      }
    }
  }, [enableConfirmNavigation, different, view]);
  var reset = function reset() {
    if (enableConfirmNavigation) {
      window.onbeforeunload = null;
    }
    resetDifferent();
  };
  var onSubmit = function onSubmit(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 /*#__PURE__*/React.createElement(FormContext.Provider, {
    value: {
      different: different,
      disabled: disabled,
      setFieldDifferent: setFieldDifferent,
      validationSchema: validationSchema,
      variant: variant,
      view: view,
      enableReinitialize: props.enableReinitialize
    }
  }, /*#__PURE__*/React.createElement(Formik, _objectSpread({
    initialValues: initialValues,
    onSubmit: onSubmit,
    validationSchema: validationSchema,
    validateOnBlur: false,
    validateOnChange: false
  }, props), isFunction(props.children) ? props.children : /*#__PURE__*/React.createElement(React.Fragment, null, props.children)));
}
export function FormForm(_ref3) {
  var children = _ref3.children,
    className = _ref3.className,
    onKeyDown = _ref3.onKeyDown,
    style = _ref3.style,
    props = _objectWithoutProperties(_ref3, _excluded2);
  var _React$useContext2 = React.useContext(FormContext),
    view = _React$useContext2.view;
  if (view === 'create' || view === 'update') {
    var preventFormSubmission = function preventFormSubmission(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 /*#__PURE__*/React.createElement(StyledFormikForm, _extends({
      children: children,
      className: className,
      onKeyDown: preventFormSubmission,
      style: style
    }, props));
  }
  return /*#__PURE__*/React.createElement(StyledForm, {
    children: children,
    className: className,
    style: style
  });
}
export function FormErrorBanner(_ref4) {
  var item = _ref4.item,
    _ref4$i18nScope = _ref4.i18nScope,
    i18nScope = _ref4$i18nScope === void 0 ? 'core.form.errorBanner' : _ref4$i18nScope,
    rest = _objectWithoutProperties(_ref4, _excluded3);
  var context = useFormContext();
  var I18n = useI18nContext();
  var errors = context.errors,
    touched = context.touched;
  var someErrorsTouched = context.validateOnBlur || context.validateOnChange ? Object.keys(errors).some(function (errorField) {
    return touched[errorField];
  }) : true;
  if ((context.view === 'create' || context.view === 'update') && !isEmpty(errors) && someErrorsTouched) {
    return /*#__PURE__*/React.createElement(ErrorBanner, _extends({
      role: "alert"
    }, rest), /*#__PURE__*/React.createElement(Banner.Content, null, /*#__PURE__*/React.createElement(Banner.Title, null, context.view === 'create' ? I18n.t('couldNotCreateItem', {
      item: item,
      scope: i18nScope
    }) : I18n.t('couldNotUpdateItem', {
      item: item,
      scope: i18nScope
    })), /*#__PURE__*/React.createElement(Banner.Body, null, context.view === 'create' ? I18n.t('fixErrorsToCreate', {
      scope: i18nScope
    }) : I18n.t('fixErrorsToUpdate', {
      scope: i18nScope
    }))));
  }
  return null;
}
export function isFormFieldEmpty(val) {
  return val === undefined || val === null || val.length === 0 || is(Object, val) && isEmpty(val);
}
export function WXPField(_ref5) {
  var AsComponent = _ref5.as,
    children = _ref5.children,
    _ref5$colStart = _ref5.colStart,
    colStart = _ref5$colStart === void 0 ? 1 : _ref5$colStart,
    _ref5$colWidth = _ref5.colWidth,
    colWidth = _ref5$colWidth === void 0 ? 6 : _ref5$colWidth,
    disabled = _ref5.disabled,
    description = _ref5.description,
    error = _ref5.error,
    label = _ref5.label,
    name = _ref5.name,
    required = _ref5.required,
    tooltip = _ref5.tooltip,
    validate = _ref5.validate,
    view = _ref5.view,
    singleCheckboxInlineLabel = _ref5.inlineLabel,
    singleCheckboxInlineDescription = _ref5.inlineDescription,
    props = _objectWithoutProperties(_ref5, _excluded4);
  var i18n = useI18nContext();
  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);
  var labelId = useId();
  var fieldErrorId = useId();
  var descriptionId = useId();
  var inlineDescriptionId = useId();
  var hasRequiredMark = field.meta.required && (field.meta.view === 'create' || field.meta.view === 'update');
  var errorDescribedBy = field.meta.error && field.messages.error ? fieldErrorId : undefined;
  var descriptionDescribedBy = description ? descriptionId : undefined;
  var inlineDescriptionDescribedBy = singleCheckboxInlineDescription ? inlineDescriptionId : undefined;
  var valueComponentAriaProps = {
    'aria-invalid': field.meta.error ? true : undefined,
    'aria-labelledby': label ? labelId : undefined,
    'aria-describedby': [errorDescribedBy, descriptionDescribedBy, inlineDescriptionDescribedBy].filter(function (value) {
      return value;
    }).join(' ') || undefined
  };

  // Below variables is needed only for SingleCheckbox
  // only SingleCheckbox has inlineLabel
  // at least one label must be present
  // but if not we want to render requiredMark and tooltip at FieldHeader
  var hasLabelOrDoesntHaveBoth = label || !label && !singleCheckboxInlineLabel;
  var hasInlineLabelAndDoesntHaveLabel = singleCheckboxInlineLabel && !label;
  var singleCheckboxComponentProps = {};
  if (hasInlineLabelAndDoesntHaveLabel) {
    singleCheckboxComponentProps = {
      tooltip: tooltip,
      hasRequiredMark: hasRequiredMark,
      inlineLabel: singleCheckboxInlineLabel
    };
  } else if (singleCheckboxInlineLabel) {
    singleCheckboxComponentProps = {
      inlineLabel: singleCheckboxInlineLabel
    };
  }
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledFormFieldHeader, {
    $colIeSpan: colWidth,
    $colStart: colStart,
    $colEnd: colStart + colWidth
  }, label && /*#__PURE__*/React.createElement(StyledLabel, {
    id: labelId,
    htmlFor: name
  }, label), hasLabelOrDoesntHaveBoth && /*#__PURE__*/React.createElement(React.Fragment, null, hasRequiredMark && /*#__PURE__*/React.createElement(StyledFormFieldRequiredMark, null), tooltip && /*#__PURE__*/React.createElement(FormFieldTooltip, {
    overlay: tooltip
  })), description && /*#__PURE__*/React.createElement(StyledDescription, {
    id: descriptionId
  }, description)), /*#__PURE__*/React.createElement(StyledFormFieldMain, {
    $colIeSpan: colWidth,
    $colStart: colStart,
    $colEnd: colStart + colWidth,
    $read: field.meta.view === 'read'
  }, children ? isFunction(children) ? children(field) : children : /*#__PURE__*/React.createElement(ValueComponent, _extends({}, valueComponentAriaProps, props, singleCheckboxComponentProps, {
    field: field
  })), singleCheckboxInlineDescription && /*#__PURE__*/React.createElement(StyledCheckboxInlineDescription, {
    id: inlineDescriptionId,
    $read: field.meta.view === 'read'
  }, singleCheckboxInlineDescription), /*#__PURE__*/React.createElement(StyledFormFieldBanner, null, field.meta.error && /*#__PURE__*/React.createElement(Box, {
    marginRight: "xs"
  }, /*#__PURE__*/React.createElement(StyledFormFieldErrorIcon, {
    size: "sm"
  })), field.meta.error && field.messages.error && /*#__PURE__*/React.createElement(Typography, {
    id: fieldErrorId,
    color: "red50",
    intent: "small",
    style: {
      alignSelf: 'center'
    }
  }, field.messages.error))));
}

/** @deprecated The traditional field layout is deprecated */
export function TraditionalField(_ref6) {
  var AsComponent = _ref6.as,
    children = _ref6.children,
    _ref6$colWidth = _ref6.colWidth,
    colWidth = _ref6$colWidth === void 0 ? 6 : _ref6$colWidth,
    disabled = _ref6.disabled,
    error = _ref6.error,
    label = _ref6.label,
    name = _ref6.name,
    required = _ref6.required,
    tooltip = _ref6.tooltip,
    validate = _ref6.validate,
    view = _ref6.view,
    props = _objectWithoutProperties(_ref6, _excluded5);
  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);
  var labelId = useId();
  var i18n = useI18nContext();
  var valueComponentAriaProps = {
    'aria-invalid': field.meta.error ? true : undefined,
    'aria-labelledby': label ? labelId : undefined
  };
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledTraditionalFormColumn, null, label && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledTraditionalFormLabel, {
    $view: field.meta.view
  }, /*#__PURE__*/React.createElement("label", {
    id: labelId,
    htmlFor: name
  }, label, ":")), (field.meta.view === 'create' || field.meta.view === 'update') && field.meta.required && /*#__PURE__*/React.createElement(StyledFormFieldRequiredMark, null), tooltip && /*#__PURE__*/React.createElement(FormFieldTooltip, {
    overlay: tooltip,
    placement: "right"
  }))), /*#__PURE__*/React.createElement(StyledTraditionalFormColumn, {
    $fullWidth: colWidth === 12,
    $output: field.meta.view === 'read'
  }, children ? isFunction(children) ? children(field) : children : /*#__PURE__*/React.createElement(ValueComponent, _extends({}, valueComponentAriaProps, props, {
    field: field
  }))));
}
export function Row(_ref7) {
  var children = _ref7.children,
    props = _objectWithoutProperties(_ref7, _excluded6);
  var _React$useContext3 = React.useContext(FormContext),
    variant = _React$useContext3.variant,
    view = _React$useContext3.view;
  return /*#__PURE__*/React.createElement(StyledFormRow, _extends({
    $traditional: variant === 'traditional',
    $read: view === 'read'
  }, props), children);
}
export function BaseField(props) {
  var _React$useContext4 = React.useContext(FormContext),
    variant = _React$useContext4.variant;
  if (variant === 'traditional') {
    return /*#__PURE__*/React.createElement(TraditionalField, props);
  } else {
    return /*#__PURE__*/React.createElement(WXPField, props);
  }
}

// MAKE

function makeSharedField(viewAs) {
  return function Field(_ref8) {
    var children = _ref8.children,
      props = _objectWithoutProperties(_ref8, _excluded7);
    if (children) {
      return /*#__PURE__*/React.createElement(SharedPropsContext.Provider, {
        value: props
      }, children);
    }
    return /*#__PURE__*/React.createElement(BaseField, _extends({
      as: viewAs
    }, props), children);
  };
}
function makeViewField(viewAs, when) {
  return function FieldView(props) {
    var _React$useContext5 = React.useContext(FormContext),
      view = _React$useContext5.view;
    var commonProps = React.useContext(SharedPropsContext);
    if (when === view) {
      return /*#__PURE__*/React.createElement(BaseField, _extends({
        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 EmptyState(props) {
  return /*#__PURE__*/React.createElement(Typography, {
    "aria-describedby": props['aria-describedby'],
    "aria-labelledby": props['aria-labelledby'],
    intent: "body",
    color: "gray45",
    "data-qa": conditionalStrings(_defineProperty({}, "".concat(props['data-qa']), props['data-qa']), "core-form-field-empty")
  }, "--");
};
export function withDefaultEmptyState(OutputComponent) {
  var WithDefaultEmptyState = /*#__PURE__*/React.forwardRef(function (props, ref) {
    if (isFormFieldEmpty(props.field.input.value)) {
      return /*#__PURE__*/React.createElement(EmptyState, props);
    }
    // ComponentWithFieldProp's third type of generic function raises an issue with the component possibly being 'undefined'
    // @ts-ignore
    return /*#__PURE__*/React.createElement(OutputComponent, _extends({
      ref: ref
    }, props));
  });
  // @ts-ignore
  WithDefaultEmptyState.displayName = "FieldWithEmptyState";
  return WithDefaultEmptyState;
}

// TEXT

export var TextInput = /*#__PURE__*/React.forwardRef(function TextInput(_ref9, ref) {
  var _onBlur = _ref9.onBlur,
    _onChange = _ref9.onChange,
    field = _ref9.field,
    props = _objectWithoutProperties(_ref9, _excluded8);
  var onBlur = function onBlur(e) {
    field.input.onBlur(e);
    _onBlur && _onBlur(e);
  };
  var onChange = function onChange(e) {
    field.input.onChange(e);
    _onChange && _onChange(e);
  };
  return /*#__PURE__*/React.createElement(Input, _extends({
    "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));
});

/**
 * @deprecated This component was for `Form` internal usage only.
 * Try using the supported APIs like `Form.Text view="read"` or
 * `Form.Text.Read` which renders this. Or duplicate the source
 * `<span ref={ref} {...props}>{field.input.value}</span>`.
 * @deprecatedSince 12.21.0
 */
export var TextOutput = /*#__PURE__*/React.forwardRef(function TextOutput(_ref0, ref) {
  var field = _ref0.field,
    props = _objectWithoutProperties(_ref0, _excluded9);
  return /*#__PURE__*/React.createElement("span", _extends({
    ref: ref
  }, props), field.input.value);
});
var FieldText = makeField(TextInput, TextOutput);

// NUMBER

export var NumberInput = /*#__PURE__*/React.forwardRef(function NumberInput(_ref1, ref) {
  var onBlur_ = _ref1.onBlur,
    onChange_ = _ref1.onChange,
    field = _ref1.field,
    props = _objectWithoutProperties(_ref1, _excluded0);
  var onBlur = function onBlur(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 /*#__PURE__*/React.createElement(BaseNumberInput, _extends({
    "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 = /*#__PURE__*/React.forwardRef(function NumberOutput(_ref10, ref) {
  var decimalScale = _ref10.decimalScale,
    defaultValue = _ref10.defaultValue,
    field = _ref10.field,
    fillDecimalScale = _ref10.fillDecimalScale,
    _locale = _ref10.locale,
    onChange = _ref10.onChange,
    prefix = _ref10.prefix,
    suffix = _ref10.suffix,
    props = _objectWithoutProperties(_ref10, _excluded1);
  var I18n = useI18nContext();
  var locale = _locale || I18n.locale || defaultLocale;
  var _useNumberFormat = useNumberFormat({
      decimalScale: decimalScale,
      fillDecimalScale: fillDecimalScale === 'always' || fillDecimalScale === 'onBlur' ? 'always' : 'none',
      locale: locale
    }),
    formatValue = _useNumberFormat.formatValue;
  var value = formatValue(field.input.value);
  return /*#__PURE__*/React.createElement("span", _extends({
    ref: ref
  }, props), value && prefix ? prefix : null, " ", value, ' ', value && suffix ? suffix : null);
});
var FieldNumber = makeField(NumberInput, NumberOutput);

// CURRENCY

export var CurrencyInput = /*#__PURE__*/React.forwardRef(function CurrencyInput(_ref11, ref) {
  var onBlur_ = _ref11.onBlur,
    onChange_ = _ref11.onChange,
    field = _ref11.field,
    props = _objectWithoutProperties(_ref11, _excluded10);
  var onBlur = function onBlur(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 /*#__PURE__*/React.createElement(BaseCurrencyInput, _extends({
    "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 = /*#__PURE__*/React.forwardRef(function CurrencyOutput(_ref12, ref) {
  var currencyIsoCode = _ref12.currencyIsoCode,
    currencyDisplay = _ref12.currencyDisplay,
    _ref12$decimalScale = _ref12.decimalScale,
    decimalScale = _ref12$decimalScale === void 0 ? defaultCurrencyDecimalScale : _ref12$decimalScale,
    suffix = _ref12.suffix,
    _ref12$prefix = _ref12.prefix,
    prefix = _ref12$prefix === void 0 ? defaultCurrencyInputPrefix : _ref12$prefix,
    props = _objectWithoutProperties(_ref12, _excluded11);
  var i18n = useI18nContext();
  var locale = props.locale || i18n.locale || defaultLocale;
  var numberProps = getCurrencyProps(locale, decimalScale, prefix || suffix, currencyIsoCode, currencyDisplay);
  return /*#__PURE__*/React.createElement(NumberOutput, _extends({
    fillDecimalScale: defaultCurrencyFillDecimalScale,
    ref: ref
  }, props, numberProps));
});
var FieldCurrency = makeField(CurrencyInput, CurrencyOutput);

// DATE

export var DateInput = /*#__PURE__*/React.forwardRef(function DateInput(_ref13, ref) {
  var _onChange = _ref13.onChange,
    field = _ref13.field,
    props = _objectWithoutProperties(_ref13, _excluded12);
  var value = field.input.value ? toDate(field.input.value, 'Form.DateSelect Create or Update Input') : undefined;
  var onChange = function onChange(value) {
    field.helpers.setValue(value);
    field.helpers.setTouched(true);
    _onChange && _onChange(value);
  };
  return /*#__PURE__*/React.createElement(DateSelect, _extends({
    disabled: field.meta.disabled,
    error: field.meta.error,
    onChange: onChange,
    ref: ref,
    value: value
  }, props));
});
export var DateOutput = /*#__PURE__*/React.forwardRef(function DateOutput(_ref14, ref) {
  var onChange = _ref14.onChange,
    field = _ref14.field,
    props = _objectWithoutProperties(_ref14, _excluded13);
  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 /*#__PURE__*/React.createElement("span", _extends({
    ref: ref
  }, props), value && /*#__PURE__*/React.createElement("time", {
    dateTime: machineValue
  }, value));
});
var FieldDateSelect = makeField(DateInput, DateOutput);

// CHECKBOX

export var CheckboxInput = /*#__PURE__*/React.forwardRef(function CheckboxInput(_ref15, ref) {
  var field = _ref15.field,
    i18nScope = _ref15.i18nScope,
    tooltip = _ref15.tooltip,
    hasRequiredMark = _ref15.hasRequiredMark,
    inlineLabel = _ref15.inlineLabel,
    _onBlur = _ref15.onBlur,
    _onChange = _ref15.onChange,
    props = _objectWithoutProperties(_ref15, _excluded14);
  var value = field.input.value || false;
  var onBlur = function onBlur(e) {
    field.input.onBlur(e);
    _onBlur && _onBlur(e);
  };
  var onChange = function onChange(e) {
    field.helpers.setValue(!value);
    _onChange && _onChange(e);
  };
  return /*#__PURE__*/React.createElement(Checkbox, _extends({
    "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),
    requiredMark: hasRequiredMark,
    tooltip: tooltip
  }, props), inlineLabel);
});
export var CheckboxOutput = /*#__PURE__*/React.forwardRef(function CheckboxOutput(_ref16, ref) {
  var field = _ref16.field,
    tooltip = _ref16.tooltip,
    inlineLabel = _ref16.inlineLabel,
    _ref16$i18nScope = _ref16.i18nScope,
    i18nScope = _ref16$i18nScope === void 0 ? 'core.form.checkbox' : _ref16$i18nScope,
    hasRequiredMark = _ref16.hasRequiredMark,
    props = _objectWithoutProperties(_ref16, _excluded15);
  var i18n = useI18nContext();
  var yes = /*#__PURE__*/React.createElement("span", {
    style: {
      verticalAlign: 'middle'
    },
    "aria-label": i18n.t('checked', {
      scope: i18nScope,
      // old default supports new key addition and backwards i18nScope support. changed 11.x
      defaultValue: i18n.t('yes', {
        scope: i18nScope
      })
    })
  }, /*#__PURE__*/React.createElement(Check, {
    size: "sm"
  }));
  var no = /*#__PURE__*/React.createElement("span", {
    style: {
      verticalAlign: 'middle'
    },
    "aria-label": i18n.t('unchecked', {
      scope: i18nScope,
      defaultValue: i18n.t('no', {
        scope: i18nScope
      })
    })
  }, /*#__PURE__*/React.createElement(Ban, {
    size: "sm"
  }));
  return /*#__PURE__*/React.createElement("span", _extends({
    ref: ref
  }, props), field.input.value ? yes : no, inlineLabel && /*#__PURE__*/React.createElement(React.Fragment, null, "\xA0", inlineLabel), tooltip && /*#__PURE__*/React.createElement(FormFieldTooltip, {
    overlay: tooltip
  }));
});
var FieldCheckbox = makeField(CheckboxInput, CheckboxOutput, {
  emptyState: false
});

// TEXTAREA

export var TextAreaInput = /*#__PURE__*/React.forwardRef(function TextAreaInput(_ref17, ref) {
  var field = _ref17.field,
    _onBlur = _ref17.onBlur,
    _onChange = _ref17.onChange,
    props = _objectWithoutProperties(_ref17, _excluded16);
  var onBlur = function onBlur(e) {
    field.input.onBlur(e);
    _onBlur && _onBlur(e);
  };
  var onChange = function onChange(e) {
    field.input.onChange(e);
    _onChange && _onChange(e);
  };
  return /*#__PURE__*/React.createElement(TextArea, _extends({
    "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 = /*#__PURE__*/React.forwardRef(function TextAreaOutput(_ref18, ref) {
  var field = _ref18.field,
    props = _objectWithoutProperties(_ref18, _excluded17);
  return /*#__PURE__*/React.createElement(StyledFormOutputTextArea, _extends({
    ref: ref
  }, props), field.input.value);
});
var FieldTextArea = makeField(TextAreaInput, TextAreaOutput);

// RICHTEXT

export var RichTextInput = /*#__PURE__*/React.forwardRef(function RichTextInput(_ref19, ref) {
  var _onChange = _ref19.onChange,
    field = _ref19.field,
    _ref19$textEditorComp = _ref19.textEditorComponent,
    TextEditorComponent = _ref19$textEditorComp === void 0 ? TextEditor : _ref19$textEditorComp,
    props = _objectWithoutProperties(_ref19, _excluded18);
  var onChange = function onChange(value, isDirty) {
    field.helpers.setValue(value, false, isDirty);
    if (isDirty) {
      field.helpers.setTouched(true);
    }
    _onChange === null || _onChange === void 0 ? void 0 : _onChange(value, isDirty);
  };
  return /*#__PURE__*/React.createElement(TextEditorComponent, _extends({
    disabled: field.meta.disabled,
    error: field.meta.error,
    value: field.input.value,
    onChange: onChange
  }, props));
});
export var RichTextOutput = /*#__PURE__*/React.forwardRef(function RichTextOutput(_ref20, ref) {
  var field = _ref20.field,
    _ref20$textEditorComp = _ref20.textEditorComponent,
    TextEditorComponent = _ref20$textEditorComp === void 0 ? TextEditorOutput : _ref20$textEditorComp,
    onBlur = _ref20.onBlur,
    onChange = _ref20.onChange,
    onClick = _ref20.onClick,
    onContextMenu = _ref20.onContextMenu,
    onCopy = _ref20.onCopy,
    onCompositionEnd = _ref20.onCompositionEnd,
    onCompositionStart = _ref20.onCompositionStart,
    onCompositionUpdate = _ref20.onCompositionUpdate,
    onCut = _ref20.onCut,
    onDrag = _ref20.onDrag,
    onDragDrop = _ref20.onDragDrop,
    onDragEnd = _ref20.onDragEnd,
    onDragGesture = _ref20.onDragGesture,
    onDragOver = _ref20.onDragOver,
    onDrop = _ref20.onDrop,
    onFocus = _ref20.onFocus,
    onInput = _ref20.onInput,
    onKeyDown = _ref20.onKeyDown,
    onKeyPress = _ref20.onKeyPress,
    onMouseDown = _ref20.onMouseDown,
    onMouseEnter = _ref20.onMouseEnter,
    onMouseLeave = _ref20.onMouseLeave,
    onMouseMove = _ref20.onMouseMove,
    onMouseOut = _ref20.onMouseOut,
    onMouseOver = _ref20.onMouseOver,
    onMouseUp = _ref20.onMouseUp,
    onPaste = _ref20.onPaste,
    onReset = _ref20.onReset,
    onSubmit = _ref20.onSubmit,
    props = _objectWithoutProperties(_ref20, _excluded19);
  return /*#__PURE__*/React.createElement(TextEditorComponent, _extends({
    value: field.input.value,
    ref: ref,
    readOnly: true
  }, props));
});
var FieldRichText = makeField(RichTextInput, RichTextOutput);

// RADIO BUTTONS

export var RadioButtonsInput = /*#__PURE__*/React.forwardRef(function RadioButtonsInput(_ref21, ref) {
  var field = _ref21.field,
    _ref21$getId = _ref21.getId,
    getId = _ref21$getId === void 0 ? defaultGetId : _ref21$getId,
    _ref21$getLabel = _ref21.getLabel,
    getLabel = _ref21$getLabel === void 0 ? defaultGetLabel : _ref21$getLabel,
    isDisabledOption = _ref21.isDisabledOption,
    options = _ref21.options,
    props = _objectWithoutProperties(_ref21, _excluded20);
  if (!options || options.length === 0) return null;
  var onSelect = function onSelect(option) {
    return function () {
      field.helpers.setValue(option);
    };
  };
  return /*#__PURE__*/React.createElement(StyledFormOutputFiledset, _extends({
    ref: ref,
    disabled: field.meta.disabled
  }, props), options.map(function (option) {
    return /*#__PURE__*/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 = /*#__PURE__*/React.forwardRef(function RadioButtonsOutput(_ref22, ref) {
  var field = _ref22.field,
    getId = _ref22.getId,
    _ref22$getLabel = _ref22.getLabel,
    getLabel = _ref22$getLabel === void 0 ? defaultGetLabel : _ref22$getLabel,
    options = _ref22.options,
    props = _objectWithoutProperties(_ref22, _excluded21);
  return /*#__PURE__*/React.createElement("span", _extends({
    ref: ref
  }, props), getLabel(field.input.value));
});
var FieldRadioButtons = makeField(RadioButtonsInput, RadioButtonsOutput);

// CHECKBOXES

export var CheckboxesInput = /*#__PURE__*/React.forwardRef(function CheckboxesInput(_ref23, ref) {
  var field = _ref23.field,
    _ref23$getId = _ref23.getId,
    getId = _ref23$getId === void 0 ? defaultGetId : _ref23$getId,
    _ref23$getLabel = _ref23.getLabel,
    getLabel = _ref23$getLabel === void 0 ? defaultGetLabel : _ref23$getLabel,
    isDisabledOption = _ref23.isDisabledOption,
    isIndeterminateOption = _ref23.isIndeterminateOption,
    options = _ref23.options,
    props = _objectWithoutProperties(_ref23, _excluded22);
  if (!options || options.length === 0) return null;
  var selectedIds = (field.input.value || emptyArray).map(getId);
  var onSelect = function onSelect(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 /*#__PURE__*/React.createElement(StyledFormOutputFiledset, _extends({
    ref: ref,
    disabled: field.meta.disabled
  }, props), options.map(function (option) {
    return /*#__PURE__*/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 = /*#__PURE__*/React.forwardRef(function CheckboxesOutput(_ref24, ref) {
  var field = _ref24.field,
    getId = _ref24.getId,
    _ref24$getLabel = _ref24.getLabel,
    getLabel = _ref24$getLabel === void 0 ? defaultGetLabel : _ref24$getLabel,
    isDisabledOption = _ref24.isDisabledOption,
    isIndeterminateOption = _ref24.isIndeterminateOption,
    options = _ref24.options,
    props = _objectWithoutProperties(_ref24, _excluded23);
  return /*#__PURE__*/React.createElement("span", _extends({
    ref: ref
  }, props), field.input.value && field.input.value.map(getLabel).join(', '));
});
var FieldCheckboxes = makeField(CheckboxesInput, CheckboxesOutput);

// SELECT

var lowerStartsWith = function lowerStartsWith(query) {
  var value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
  return startsWith(toLower(query), toLower(value));
};
export function useOptions(_ref25) {
  var value = _ref25.value,
    optgroups = _ref25.optgroups,
    _ref25$options = _ref25.options,
    options = _ref25$options === void 0 ? emptyArray : _ref25$options,
    getLabel = _ref25.getLabel,
    getId = _ref25.getId,
    groupGetId = _ref25.groupGetId,
    _ref25$getGroup = _ref25.getGroup,
    getGroup = _ref25$getGroup === void 0 ? defaultGetGroup : _ref25$getGroup,
    _ref25$comparator = _ref25.comparator,
    comparator = _ref25$comparator === void 0 ? lowerStartsWith : _ref25$comparator;
  var _React$useState3 = React.useState(''),
    _React$useState4 = _slicedToArray(_React$useState3, 2),
    query = _React$useState4[0],
    setQuery = _React$useState4[1];
  var search = function search(e) {
    return setQuery(e.target.value);
  };
  var filteredOptions = React.useMemo(function () {
    if (!query) {
      return options;
    }
    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) {
      return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, groupGetId(group), []));
    }, {});
    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 = _objectSpread(_objectSpread({}, group), {}, {
        isGroupHeader: true
      });
      var groupOptions = optionsByGroup[groupGetId(group)];
      if (!groupOptions.length) {
        return [];
      }
      return [groupHeader].concat(_toConsumableArray(groupOptions));
    }, []);
  }, [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, _ref26) {
  var getId = _ref26.getId,
    getLabel = _ref26.getLabel,
    props = _objectWithoutProperties(_ref26, _excluded24);
  return /*#__PURE__*/React.createElement(Select.Option, props, getLabel(item));
}
function defaultGroupHeaderRenderer(group, _ref27) {
  var getId = _ref27.getId,
    getLabel = _ref27.getLabel,
    props = _objectWithoutProperties(_ref27, _excluded25);
  return /*#__PURE__*/React.createElement(Select.OptGroup, props, getLabel(group));
}
export var SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(_ref28, ref) {
  var _afterHide = _ref28.afterHide,
    field = _ref28.field,
    _ref28$getGroup = _ref28.getGroup,
    getGroup = _ref28$getGroup === void 0 ? defaultGetGroup : _ref28$getGroup,
    _ref28$getId = _ref28.getId,
    getId = _ref28$getId === void 0 ? defaultGetId : _ref28$getId,
    _ref28$getLabel = _ref28.getLabel,
    getLabel = _ref28$getLabel === void 0 ? defaultGetLabel : _ref28$getLabel,
    _ref28$groupGetId = _ref28.groupGetId,
    groupGetId = _ref28$groupGetId === void 0 ? defaultGetId : _ref28$groupGetId,
    _ref28$groupGetLabel = _ref28.groupGetLabel,
    groupGetLabel = _ref28$groupGetLabel === void 0 ? defaultGetLabel : _ref28$groupGetLabel,
    _ref28$groupHeaderRen = _ref28.groupHeaderRenderer,
    groupHeaderRenderer = _ref28$groupHeaderRen === void 0 ? defaultGroupHeaderRenderer : _ref28$groupHeaderRen,
    isSuggestedOption = _ref28.isSuggestedOption,
    _onClear = _ref28.onClear,
    _onSearch = _ref28.onSearch,
    _onSelect = _ref28.onSelect,
    searchComparator = _ref28.searchComparator,
    options = _ref28.options,
    optgroups = _ref28.optgroups,
    _ref28$optionRenderer = _ref28.optionRenderer,
    optionRenderer = _ref28$optionRenderer === void 0 ? defaultOptionRenderer : _ref28$optionRenderer,
    props = _objectWithoutProperties(_ref28, _excluded26);
  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 afterHide() {
    field.helpers.setTouched(true);
    _afterHide && _afterHide();
  };
  var onSelect = function onSelect(selection) {
    field.helpers.setValue(selection.item);
    _onSelect && _onSelect(selection);
  };
  var onClear = function onClear(e) {
    field.helpers.setValue(null);
    if (typeof _onClear === 'function') {
      _onClear(e);
    }
  };
  var onSearch = function onSearch(e) {
    menu.search(e);
    if (typeof _onSearch === 'function') {
      _onSearch(e);
    }
  };
  return /*#__PURE__*/React.createElement(Select, _extends({
    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, index) {
    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, {
      index: index,
      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 = /*#__PURE__*/React.forwardRef(function SelectOutput(_ref29, ref) {
  var afterHide = _ref29.afterHide,
    afterShow = _ref29.afterShow,
    beforeHide = _ref29.beforeHide,
    beforeShow = _ref29.beforeShow,
    field = _ref29.field,
    footer = _ref29.footer,
    getId = _ref29.getId,
    getGroup = _ref29.getGroup,
    _ref29$getLabel = _ref29.getLabel,
    getLabel = _ref29$getLabel === void 0 ? defaultGetLabel : _ref29$getLabel,
    groupGetId = _ref29.groupGetId,
    groupGetLabel = _ref29.groupGetLabel,
    groupHeaderRenderer = _ref29.groupHeaderRenderer,
    i18nScope = _ref29.i18nScope,
    isSuggestedOption = _ref29.isSuggestedOption,
    options = _ref29.options,
    optgroups = _ref29.optgroups,
    optionRenderer = _ref29.optionRenderer,
    searchComparator = _ref29.searchComparator,
    onBlur = _ref29.onBlur,
    onClear = _ref29.onClear,
    onSearch = _ref29.onSearch,
    onSelect = _ref29.onSelect,
    props = _objectWithoutProperties(_ref29, _excluded27);
  return /*#__PURE__*/React.createElement("span", _extends({
    ref: ref
  }, props), getLabel(field.input.value));
});
var FieldSelect = makeField(SelectInput, SelectOutput);

// PILL SELECT

export var PillSelectInput = /*#__PURE__*/React.forwardRef(function PillSelectInput(_ref30, ref) {
  var field = _ref30.field,
    _onBlur = _ref30.onBlur,
    _onClear = _ref30.onClear,
    _onSelect = _ref30.onSelect,
    _ref30$getId = _ref30.getId,
    getId = _ref30$getId === void 0 ? defaultGetId : _ref30$getId,
    _ref30$getLabel = _ref30.getLabel,
    getLabel = _ref30$getLabel === void 0 ? defaultGetLabel : _ref30$getLabel,
    props = _objectWithoutProperties(_ref30, _excluded28);
  var onBlur = function onBlur(e) {
    field.helpers.setTouched(true);
    _onBlur && _onBlur(e);
  };
  var onClear = function onClear(e) {
    field.helpers.setValue(null);
    _onClear && _onClear(e);
  };
  var onSelect = function onSelect(selection) {
    field.helpers.setValue(selection.item);
    _onSelect && _onSelect(selection);
  };
  return /*#__PURE__*/React.createElement(PillSelect, _extends({
    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 = /*#__PURE__*/React.forwardRef(function PillSelectOutput(_ref31, ref) {
  var afterHide = _ref31.afterHide,
    afterShow = _ref31.afterShow,
    beforeHide = _ref31.beforeHide,
    beforeShow = _ref31.beforeShow,
    color = _ref31.color,
    field = _ref31.field,
    footer = _ref31.footer,
    _ref31$getColor = _ref31.getColor,
    getColor = _ref31$getColor === void 0 ? defaultGetColor : _ref31$getColor,
    getGroup = _ref31.getGroup,
    _ref31$getLabel = _ref31.getLabel,
    getLabel = _ref31$getLabel === void 0 ? defaultGetLabel : _ref31$getLabel,
    getSuggested = _ref31.getSuggested,
    groupGetId = _ref31.groupGetId,
    groupGetLabel = _ref31.groupGetLabel,
    i18nScope = _ref31.i18nScope,
    onClear = _ref31.onClear,
    onSearch = _ref31.onSearch,
    onSelect = _ref31.onSelect,
    options = _ref31.options,
    optgroups = _ref31.optgroups,
    props = _objectWithoutProperties(_ref31, _excluded29);
  return /*#__PURE__*/React.createElement(Pill, _extends({
    color: getColor(field.input.value)
  }, props), getLabel(field.input.value));
});
var FieldPillSelect = makeField(PillSelectInput, PillSelectOutput);

// MULTISELECT

export var MultiSelectInput = /*#__PURE__*/React.forwardRef(function MultiSelectInput(_ref32, ref) {
  var field = _ref32.field,
    _onBlur = _ref32.onBlur,
    _onChange = _ref32.onChange,
    _ref32$getId = _ref32.getId,
    getId = _ref32$getId === void 0 ? defaultGetId : _ref32$getId,
    _ref32$getLabel = _ref32.getLabel,
    getLabel = _ref32$getLabel === void 0 ? defaultGetLabel : _ref32$getLabel,
    props = _objectWithoutProperties(_ref32, _excluded30);
  var onBlur = function onBlur(e) {
    field.helpers.setTouched(true);
    _onBlur && _onBlur(e);
  };
  var onChange = function onChange(value, e) {
    field.helpers.setValue(value);
    _onChange && _onChange(value, e);
  };
  return /*#__PURE__*/React.createElement(MultiSelect, _extends({
    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 = /*#__PURE__*/React.forwardRef(function MultiSelectOutput(_ref33, ref) {
  var afterHide = _ref33.afterHide,
    afterShow = _ref33.afterShow,
    beforeHide = _ref33.beforeHide,
    beforeShow = _ref33.beforeShow,
    emptyMessage = _ref33.emptyMessage,
    field = _ref33.field,
    getGroup = _ref33.getGroup,
    getId = _ref33.getId,
    _ref33$getLabel = _ref33.getLabel,
    getLabel = _ref33$getLabel === void 0 ? defaultGetLabel : _ref33$getLabel,
    groupHeaderRenderer = _ref33.groupHeaderRenderer,
    isOptionDisabled = _ref33.isOptionDisabled,
    onChange = _ref33.onChange,
    onSearch = _ref33.onSearch,
    onScrollBottom = _ref33.onScrollBottom,
    options = _ref33.options,
    optgroups = _ref33.optgroups,
    optionRenderer = _ref33.optionRenderer,
    placement = _ref33.placement,
    placeholder = _ref33.placeholder,
    tokenRenderer = _ref33.tokenRenderer,
    qa = _ref33.qa,
    props = _objectWithoutProperties(_ref33, _excluded31);
  return /*#__PURE__*/React.createElement("span", _extends({
    ref: ref
  }, props), field.input.value && field.input.value.map(getLabel).join(', '));
});
var FieldMultiSelect = makeField(MultiSelectInput, MultiSelectOutput);

// GROUP SELECT

export var GroupSelectInput = /*#__PURE__*/React.forwardRef(function GroupSelectInput(_ref34, ref) {
  var field = _ref34.field,
    _onBlur = _ref34.onBlur,
    _onChange = _ref34.onChange,
    _ref34$getId = _ref34.getId,
    getId = _ref34$getId === void 0 ? defaultGetId : _ref34$getId,
    _ref34$getLabel = _ref34.getLabel,
    getLabel = _ref34$getLabel === void 0 ? defaultGetLabel : _ref34$getLabel,
    props = _objectWithoutProperties(_ref34, _excluded32);
  var onBlur = function onBlur(e) {
    field.helpers.setTouched(true);
    _onBlur && _onBlur(e);
  };
  var onChange = function onChange(value, e) {
    field.helpers.setValue(value);
    _onChange && _onChange(value, e);
  };
  return /*#__PURE__*/React.createElement(GroupSelect, _extends({
    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 = /*#__PURE__*/React.forwardRef(function GroupSelectOutput(_ref35, ref) {
  var afterHide = _ref35.afterHide,
    afterShow = _ref35.afterShow,
    beforeHide = _ref35.beforeHide,
    beforeShow = _ref35.beforeShow,
    emptyMessage = _ref35.emptyMessage,
    field = _ref35.field,
    getGroup = _ref35.getGroup,
    getId = _ref35.getId,
    _ref35$getLabel = _ref35.getLabel,
    getLabel = _ref35$getLabel === void 0 ? defaultGetLabel : _ref35$getLabel,
    getOptGroup = _ref35.getOptGroup,
    groupRenderer = _ref35.groupRenderer,
    groups = _ref35.groups,
    isOptionDisabled = _ref35.isOptionDisabled,
    placeholder = _ref35.placeholder,
    placement = _ref35.placement,
    onChange = _ref35.onChange,
    onScrollBottom = _ref35.onScrollBottom,
    onSearch = _ref35.onSearch,
    optgroups = _ref35.optgroups,
    options = _ref35.options,
    optionRenderer = _ref35.optionRenderer,
    optGroupRenderer = _ref35.optGroupRenderer,
    tokenRenderer = _ref35.tokenRenderer,
    qa = _ref35.qa,
    props = _objectWithoutProperties(_ref35, _excluded33);
  return /*#__PURE__*/React.createElement("span", _extends({
    ref: ref
  }, props), field.input.value && field.input.value.map(getLabel).join(', '));
});
var FieldGroupSelect = makeField(GroupSelectInput, GroupSelectOutput);

// TIERED SELECT

export var TieredSelectInput = /*#__PURE__*/React.forwardRef(function TieredSelectInput(_ref36, ref) {
  var field = _ref36.field,
    _onBlur = _ref36.onBlur,
    _onChange = _ref36.onChange,
    _onClear = _ref36.onClear,
    _ref36$getId = _ref36.getId,
    getId = _ref36$getId === void 0 ? defaultGetId : _ref36$getId,
    _ref36$getLabel = _ref36.getLabel,
    getLabel = _ref36$getLabel === void 0 ? defaultGetLabel : _ref36$getLabel,
    props = _objectWithoutProperties(_ref36, _excluded34);
  var onBlur = function onBlur(e) {
    field.helpers.setTouched(true);
    _onBlur && _onBlur(e);
  };
  var onChange = function onChange(selection) {
    field.helpers.setValue(selection.value);
    _onChange && _onChange(selection);
  };
  var onClear = function onClear(e) {
    field.helpers.setValue([]);
    _onClear && _onClear(e);
  };
  return /*#__PURE__*/React.createElement(TieredSelect, _extends({
    block: true,
    disabled: field.meta.disabled,
    error: field.meta.error,
    getId: getId,
    getLabel: getLabel,
    onBlur: onBlur,
    onChange: onChange,
    onClear: _onClear || _onClear === undefined ? onClear : undefined,
    ref: ref,
    value: field.input.value
  }, props));
});
export var TieredSelectOutput = /*#__PURE__*/React.forwardRef(function TieredSelectOutput(_ref37, ref) {
  var afterHide = _ref37.afterHide,
    afterShow = _ref37.afterShow,
    beforeHide = _ref37.beforeHide,
    beforeShow = _ref37.beforeShow,
    field = _ref37.field,
    getId = _ref37.getId,
    _ref37$getLabel = _ref37.getLabel,
    getLabel = _ref37$getLabel === void 0 ? defaultGetLabel : _ref37$getLabel,
    getGroupId = _ref37.getGroupId,
    getNextGroupId = _ref37.getNextGroupId,
    getValueString = _ref37.getValueString,
    i18nScope = _ref37.i18nScope,
    isLeaf = _ref37.isLeaf,
    isTierDisabled = _ref37.isTierDisabled,
    loadingMore = _ref37.loadingMore,
    onChange = _ref37.onChange,
    onClear = _ref37.onClear,
    onNavigate = _ref37.onNavigate,
    onScrollBottom = _ref37.onScrollBottom,
    onSearch = _ref37.onSearch,
    onQuickCreate = _ref37.onQuickCreate,
    options = _ref37.options,
    selectableTiers = _ref37.selectableTiers,
    props = _objectWithoutProperties(_ref37, _excluded35);
  return /*#__PURE__*/React.createElement("span", _extends({
    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);
var SettingsPageFooter = /*#__PURE__*/React.forwardRef(function Footer(props, ref) {
  var formik = React.useContext(FormikContext);
  var _React$useState5 = React.useState((formik === null || formik === void 0 ? void 0 : formik.dirty) !== false),
    _React$useState6 = _slicedToArray(_React$useState5, 2),
    isVisible = _React$useState6[0],
    setIsVisible = _React$useState6[1];
  React.useEffect(function () {
    if (formik !== null && formik !== void 0 && formik.dirty) {
      setIsVisible(true);
    }
  }, [formik === null || formik === void 0 ? void 0 : formik.dirty]);
  return /*#__PURE__*/React.createElement(SettingsPage.Footer, _extends({
    ref: ref,
    visible: isVisible
  }, props));
});
export var Form = addSubcomponents({
  Checkboxes: FieldCheckboxes,
  Checkbox: FieldCheckbox,
  Currency: FieldCurrency,
  DateSelect: FieldDateSelect,
  ErrorBanner: FormErrorBanner,
  Field: FieldAny,
  /**
   * `Form.Form` is a small wrapper around an HTML `<form>` element that automatically hooks into Formik's `handleSubmit` and `handleReset`.
   * When the `view` is `read`, it renders a `div` tag instead.
   * @see https://formik.org/docs/api/form
   */
  Form: FormForm,
  GroupSelect: FieldGroupSelect,
  MultiSelect: FieldMultiSelect,
  Number: FieldNumber,
  PillSelect: FieldPillSelect,
  RadioButtons: FieldRadioButtons,
  RichText: FieldRichText,
  Row: Row,
  Select: FieldSelect,
  Text: FieldText,
  TextArea: FieldTextArea,
  TieredSelect: FieldTieredSelect,
  SettingsPageFooter: SettingsPageFooter
}, Form_);
//# sourceMappingURL=Form.js.map