var _excluded = ["initialValues", "onSubmit", "disabled", "enableConfirmNavigation", "variant", "validationSchema", "view"],
  _excluded2 = ["children", "className", "onKeyDown", "style"],
  _excluded3 = ["as", "children", "colStart", "colWidth", "disabled", "error", "label", "name", "required", "tooltip", "validate", "view"],
  _excluded4 = ["as", "children", "colWidth", "disabled", "error", "label", "name", "required", "tooltip", "validate", "view"],
  _excluded5 = ["children"],
  _excluded6 = ["children"],
  _excluded7 = ["onBlur", "onChange", "field"],
  _excluded8 = ["field"],
  _excluded9 = ["onBlur", "onChange", "field"],
  _excluded10 = ["decimalScale", "defaultValue", "field", "fillDecimalScale", "locale", "onChange", "prefix", "suffix"],
  _excluded11 = ["onBlur", "onChange", "field"],
  _excluded12 = ["currencyIsoCode", "currencyDisplay", "decimalScale", "suffix", "prefix"],
  _excluded13 = ["onChange", "field"],
  _excluded14 = ["onChange", "field"],
  _excluded15 = ["field", "i18nScope", "onBlur", "onChange"],
  _excluded16 = ["field", "i18nScope"],
  _excluded17 = ["field", "onBlur", "onChange"],
  _excluded18 = ["field"],
  _excluded19 = ["onChange", "field"],
  _excluded20 = ["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"],
  _excluded21 = ["field", "getId", "getLabel", "isDisabledOption", "options"],
  _excluded22 = ["field", "getId", "getLabel", "options"],
  _excluded23 = ["field", "getId", "getLabel", "isDisabledOption", "isIndeterminateOption", "options"],
  _excluded24 = ["field", "getId", "getLabel", "isDisabledOption", "isIndeterminateOption", "options"],
  _excluded25 = ["getId", "getLabel"],
  _excluded26 = ["getId", "getLabel"],
  _excluded27 = ["afterHide", "field", "getGroup", "getId", "getLabel", "groupGetId", "groupGetLabel", "groupHeaderRenderer", "isSuggestedOption", "onClear", "onSearch", "onSelect", "searchComparator", "options", "optgroups", "optionRenderer"],
  _excluded28 = ["afterHide", "afterShow", "beforeHide", "beforeShow", "field", "footer", "getId", "getGroup", "getLabel", "groupGetId", "groupGetLabel", "groupHeaderRenderer", "i18nScope", "isSuggestedOption", "options", "optgroups", "optionRenderer", "searchComparator", "onBlur", "onClear", "onSearch", "onSelect"],
  _excluded29 = ["field", "onBlur", "onClear", "onSelect", "getId", "getLabel"],
  _excluded30 = ["afterHide", "afterShow", "beforeHide", "beforeShow", "color", "field", "footer", "getColor", "getGroup", "getLabel", "getSuggested", "groupGetId", "groupGetLabel", "i18nScope", "onClear", "onSearch", "onSelect", "options", "optgroups"],
  _excluded31 = ["field", "onBlur", "onChange", "getId", "getLabel"],
  _excluded32 = ["afterHide", "afterShow", "beforeHide", "beforeShow", "emptyMessage", "field", "getGroup", "getId", "getLabel", "groupHeaderRenderer", "isOptionDisabled", "onChange", "onSearch", "onScrollBottom", "options", "optgroups", "optionRenderer", "placement", "placeholder", "tokenRenderer", "qa"],
  _excluded33 = ["field", "onBlur", "onChange", "getId", "getLabel"],
  _excluded34 = ["afterHide", "afterShow", "beforeHide", "beforeShow", "emptyMessage", "field", "getGroup", "getId", "getLabel", "getOptGroup", "groupRenderer", "groups", "isOptionDisabled", "placeholder", "placement", "onChange", "onScrollBottom", "onSearch", "optgroups", "options", "optionRenderer", "optGroupRenderer", "tokenRenderer", "qa"],
  _excluded35 = ["field", "onBlur", "onChange", "getId", "getLabel"],
  _excluded36 = ["afterHide", "afterShow", "beforeHide", "beforeShow", "field", "getId", "getLabel", "getGroupId", "getNextGroupId", "getValueString", "i18nScope", "isLeaf", "isTierDisabled", "loadingMore", "onChange", "onClear", "onNavigate", "onScrollBottom", "onSearch", "onQuickCreate", "options", "selectableTiers"];
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _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(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _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(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
import { useId } from '@react-aria/utils';
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 { 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 { TextArea } from '../TextArea';
import { TextEditor } from '../TextEditor';
import { TextEditorOutput } from '../TextEditorOutput';
import { TieredSelect } from '../TieredSelect';
import { Tooltip } from '../Tooltip';
import { Typography } from '../Typography';
import { useDateTime } from '../_hooks/DateTime';
import { useI18nContext } from '../_hooks/I18n';
import { addSubcomponents } from '../_utils/addSubcomponents';
import { formatMachineDate, toDate } from '../_utils/dateTime';
import { useCloseWithConfirmContext } from './closeWithConfirm';
import { StyledForm, StyledFormCheckboxInput, StyledFormFieldBanner, StyledFormFieldErrorIcon, StyledFormFieldHeader, StyledFormFieldMain, StyledFormFieldRequiredMark, StyledFormFieldTooltipIcon, StyledFormikForm, StyledFormOutputFiledset, StyledFormOutputTextArea, StyledFormRow, StyledLabel, StyledTraditionalFormColumn, StyledTraditionalFormLabel } from './Form.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;
  var context = useFormContext();
  var I18n = useI18nContext();
  if ((context.view === 'create' || context.view === 'update') && !isEmpty(context.errors)) {
    return /*#__PURE__*/React.createElement(ErrorBanner, {
      role: "alert"
    }, /*#__PURE__*/React.createElement(Banner.Content, null, /*#__PURE__*/React.createElement(Banner.Title, null, context.view === 'create' ? I18n.t('coundNotCreateItem', {
      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 isEmptyField(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,
    error = _ref5.error,
    label = _ref5.label,
    name = _ref5.name,
    required = _ref5.required,
    tooltip = _ref5.tooltip,
    validate = _ref5.validate,
    view = _ref5.view,
    props = _objectWithoutProperties(_ref5, _excluded3);
  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 hasRequiredMark = field.meta.required && (field.meta.view === 'create' || field.meta.view === 'update');
  var valueComponentAriaProps = {
    'aria-invalid': field.meta.error ? true : undefined,
    'aria-labelledby': label ? labelId : undefined,
    'aria-describedby': field.meta.error && field.messages.error ? fieldErrorId : undefined
  };
  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), hasRequiredMark && /*#__PURE__*/React.createElement(StyledFormFieldRequiredMark, null), tooltip && /*#__PURE__*/React.createElement(Tooltip, {
    role: "tooltip",
    overlay: tooltip,
    trigger: ['hover', 'focus']
  }, /*#__PURE__*/React.createElement(StyledFormFieldTooltipIcon, {
    "aria-label": i18n.t('core.form.field.tooltipHelp'),
    "aria-hidden": false,
    size: "sm",
    tabIndex: 0
  }))), /*#__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, {
    field: field
  })), /*#__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("span", {
    id: fieldErrorId
  }, field.messages.error))));
}
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, _excluded4);
  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(Tooltip, {
    role: "tooltip",
    overlay: tooltip,
    placement: "right",
    trigger: ['hover', 'focus']
  }, /*#__PURE__*/React.createElement(StyledFormFieldTooltipIcon, {
    "aria-label": i18n.t('core.form.field.tooltipHelp'),
    "aria-hidden": false,
    size: "sm",
    tabIndex: 0
  })))), /*#__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, _excluded5);
  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, _excluded6);
    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 (isEmptyField(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, _excluded7);
  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));
});
export var TextOutput = /*#__PURE__*/React.forwardRef(function TextOutput(_ref10, ref) {
  var field = _ref10.field,
    props = _objectWithoutProperties(_ref10, _excluded8);
  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(_ref11, ref) {
  var onBlur_ = _ref11.onBlur,
    onChange_ = _ref11.onChange,
    field = _ref11.field,
    props = _objectWithoutProperties(_ref11, _excluded9);
  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(_ref12, ref) {
  var decimalScale = _ref12.decimalScale,
    defaultValue = _ref12.defaultValue,
    field = _ref12.field,
    fillDecimalScale = _ref12.fillDecimalScale,
    _locale = _ref12.locale,
    onChange = _ref12.onChange,
    prefix = _ref12.prefix,
    suffix = _ref12.suffix,
    props = _objectWithoutProperties(_ref12, _excluded10);
  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(_ref13, ref) {
  var onBlur_ = _ref13.onBlur,
    onChange_ = _ref13.onChange,
    field = _ref13.field,
    props = _objectWithoutProperties(_ref13, _excluded11);
  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(_ref14, ref) {
  var currencyIsoCode = _ref14.currencyIsoCode,
    currencyDisplay = _ref14.currencyDisplay,
    _ref14$decimalScale = _ref14.decimalScale,
    decimalScale = _ref14$decimalScale === void 0 ? defaultCurrencyDecimalScale : _ref14$decimalScale,
    suffix = _ref14.suffix,
    _ref14$prefix = _ref14.prefix,
    prefix = _ref14$prefix === void 0 ? defaultCurrencyInputPrefix : _ref14$prefix,
    props = _objectWithoutProperties(_ref14, _excluded12);
  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(_ref15, ref) {
  var _onChange = _ref15.onChange,
    field = _ref15.field,
    props = _objectWithoutProperties(_ref15, _excluded13);
  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(_ref16, ref) {
  var onChange = _ref16.onChange,
    field = _ref16.field,
    props = _objectWithoutProperties(_ref16, _excluded14);
  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(_ref17, ref) {
  var field = _ref17.field,
    i18nScope = _ref17.i18nScope,
    _onBlur = _ref17.onBlur,
    _onChange = _ref17.onChange,
    props = _objectWithoutProperties(_ref17, _excluded15);
  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(StyledFormCheckboxInput, _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)
  }, props));
});
export var CheckboxOutput = /*#__PURE__*/React.forwardRef(function CheckboxOutput(_ref18, ref) {
  var field = _ref18.field,
    _ref18$i18nScope = _ref18.i18nScope,
    i18nScope = _ref18$i18nScope === void 0 ? 'core.form.checkbox' : _ref18$i18nScope,
    props = _objectWithoutProperties(_ref18, _excluded16);
  var i18n = useI18nContext();
  var yes = i18n.t('yes', {
    scope: i18nScope
  });
  var no = i18n.t('no', {
    scope: i18nScope
  });
  return /*#__PURE__*/React.createElement("span", _extends({
    ref: ref
  }, props), field.input.value ? yes : no);
});
var FieldCheckbox = makeField(CheckboxInput, CheckboxOutput, {
  emptyState: false
});

// TEXTAREA

export var TextAreaInput = /*#__PURE__*/React.forwardRef(function TextAreaInput(_ref19, ref) {
  var field = _ref19.field,
    _onBlur = _ref19.onBlur,
    _onChange = _ref19.onChange,
    props = _objectWithoutProperties(_ref19, _excluded17);
  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(_ref20, ref) {
  var field = _ref20.field,
    props = _objectWithoutProperties(_ref20, _excluded18);
  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(_ref21, ref) {
  var _onChange = _ref21.onChange,
    field = _ref21.field,
    props = _objectWithoutProperties(_ref21, _excluded19);
  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(TextEditor, _extends({
    disabled: field.meta.disabled,
    error: field.meta.error,
    value: field.input.value,
    onChange: onChange
  }, props));
});
export var RichTextOutput = /*#__PURE__*/React.forwardRef(function RichTextOutput(_ref22, ref) {
  var field = _ref22.field,
    onBlur = _ref22.onBlur,
    onChange = _ref22.onChange,
    onClick = _ref22.onClick,
    onContextMenu = _ref22.onContextMenu,
    onCopy = _ref22.onCopy,
    onCut = _ref22.onCut,
    onDrag = _ref22.onDrag,
    onDragDrop = _ref22.onDragDrop,
    onDragEnd = _ref22.onDragEnd,
    onDragGesture = _ref22.onDragGesture,
    onDragOver = _ref22.onDragOver,
    onDrop = _ref22.onDrop,
    onFocus = _ref22.onFocus,
    onKeyDown = _ref22.onKeyDown,
    onKeyPress = _ref22.onKeyPress,
    onMouseDown = _ref22.onMouseDown,
    onMouseEnter = _ref22.onMouseEnter,
    onMouseLeave = _ref22.onMouseLeave,
    onMouseMove = _ref22.onMouseMove,
    onMouseOut = _ref22.onMouseOut,
    onMouseOver = _ref22.onMouseOver,
    onMouseUp = _ref22.onMouseUp,
    onPaste = _ref22.onPaste,
    onReset = _ref22.onReset,
    onSubmit = _ref22.onSubmit,
    props = _objectWithoutProperties(_ref22, _excluded20);
  return /*#__PURE__*/React.createElement(TextEditorOutput, _extends({
    value: field.input.value,
    ref: ref
  }, props));
});
var FieldRichText = makeField(RichTextInput, RichTextOutput);

// RADIO BUTTONS

export var RadioButtonsInput = /*#__PURE__*/React.forwardRef(function RadioButtonsInput(_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,
    options = _ref23.options,
    props = _objectWithoutProperties(_ref23, _excluded21);
  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(_ref24, ref) {
  var field = _ref24.field,
    getId = _ref24.getId,
    _ref24$getLabel = _ref24.getLabel,
    getLabel = _ref24$getLabel === void 0 ? defaultGetLabel : _ref24$getLabel,
    options = _ref24.options,
    props = _objectWithoutProperties(_ref24, _excluded22);
  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(_ref25, ref) {
  var field = _ref25.field,
    _ref25$getId = _ref25.getId,
    getId = _ref25$getId === void 0 ? defaultGetId : _ref25$getId,
    _ref25$getLabel = _ref25.getLabel,
    getLabel = _ref25$getLabel === void 0 ? defaultGetLabel : _ref25$getLabel,
    isDisabledOption = _ref25.isDisabledOption,
    isIndeterminateOption = _ref25.isIndeterminateOption,
    options = _ref25.options,
    props = _objectWithoutProperties(_ref25, _excluded23);
  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(_ref26, ref) {
  var field = _ref26.field,
    getId = _ref26.getId,
    _ref26$getLabel = _ref26.getLabel,
    getLabel = _ref26$getLabel === void 0 ? defaultGetLabel : _ref26$getLabel,
    isDisabledOption = _ref26.isDisabledOption,
    isIndeterminateOption = _ref26.isIndeterminateOption,
    options = _ref26.options,
    props = _objectWithoutProperties(_ref26, _excluded24);
  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(_ref27) {
  var value = _ref27.value,
    optgroups = _ref27.optgroups,
    _ref27$options = _ref27.options,
    options = _ref27$options === void 0 ? emptyArray : _ref27$options,
    getLabel = _ref27.getLabel,
    getId = _ref27.getId,
    groupGetId = _ref27.groupGetId,
    _ref27$getGroup = _ref27.getGroup,
    getGroup = _ref27$getGroup === void 0 ? defaultGetGroup : _ref27$getGroup,
    _ref27$comparator = _ref27.comparator,
    comparator = _ref27$comparator === void 0 ? lowerStartsWith : _ref27$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, _ref28) {
  var getId = _ref28.getId,
    getLabel = _ref28.getLabel,
    props = _objectWithoutProperties(_ref28, _excluded25);
  return /*#__PURE__*/React.createElement(Select.Option, props, getLabel(item));
}
function defaultGroupHeaderRenderer(group, _ref29) {
  var getId = _ref29.getId,
    getLabel = _ref29.getLabel,
    props = _objectWithoutProperties(_ref29, _excluded26);
  return /*#__PURE__*/React.createElement(Select.OptGroup, props, getLabel(group));
}
export var SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(_ref30, ref) {
  var _afterHide = _ref30.afterHide,
    field = _ref30.field,
    _ref30$getGroup = _ref30.getGroup,
    getGroup = _ref30$getGroup === void 0 ? defaultGetGroup : _ref30$getGroup,
    _ref30$getId = _ref30.getId,
    getId = _ref30$getId === void 0 ? defaultGetId : _ref30$getId,
    _ref30$getLabel = _ref30.getLabel,
    getLabel = _ref30$getLabel === void 0 ? defaultGetLabel : _ref30$getLabel,
    _ref30$groupGetId = _ref30.groupGetId,
    groupGetId = _ref30$groupGetId === void 0 ? defaultGetId : _ref30$groupGetId,
    _ref30$groupGetLabel = _ref30.groupGetLabel,
    groupGetLabel = _ref30$groupGetLabel === void 0 ? defaultGetLabel : _ref30$groupGetLabel,
    _ref30$groupHeaderRen = _ref30.groupHeaderRenderer,
    groupHeaderRenderer = _ref30$groupHeaderRen === void 0 ? defaultGroupHeaderRenderer : _ref30$groupHeaderRen,
    isSuggestedOption = _ref30.isSuggestedOption,
    _onClear = _ref30.onClear,
    _onSearch = _ref30.onSearch,
    _onSelect = _ref30.onSelect,
    searchComparator = _ref30.searchComparator,
    options = _ref30.options,
    optgroups = _ref30.optgroups,
    _ref30$optionRenderer = _ref30.optionRenderer,
    optionRenderer = _ref30$optionRenderer === void 0 ? defaultOptionRenderer : _ref30$optionRenderer,
    props = _objectWithoutProperties(_ref30, _excluded27);
  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) {
    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 = /*#__PURE__*/React.forwardRef(function SelectOutput(_ref31, ref) {
  var afterHide = _ref31.afterHide,
    afterShow = _ref31.afterShow,
    beforeHide = _ref31.beforeHide,
    beforeShow = _ref31.beforeShow,
    field = _ref31.field,
    footer = _ref31.footer,
    getId = _ref31.getId,
    getGroup = _ref31.getGroup,
    _ref31$getLabel = _ref31.getLabel,
    getLabel = _ref31$getLabel === void 0 ? defaultGetLabel : _ref31$getLabel,
    groupGetId = _ref31.groupGetId,
    groupGetLabel = _ref31.groupGetLabel,
    groupHeaderRenderer = _ref31.groupHeaderRenderer,
    i18nScope = _ref31.i18nScope,
    isSuggestedOption = _ref31.isSuggestedOption,
    options = _ref31.options,
    optgroups = _ref31.optgroups,
    optionRenderer = _ref31.optionRenderer,
    searchComparator = _ref31.searchComparator,
    onBlur = _ref31.onBlur,
    onClear = _ref31.onClear,
    onSearch = _ref31.onSearch,
    onSelect = _ref31.onSelect,
    props = _objectWithoutProperties(_ref31, _excluded28);
  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(_ref32, ref) {
  var field = _ref32.field,
    _onBlur = _ref32.onBlur,
    _onClear = _ref32.onClear,
    _onSelect = _ref32.onSelect,
    _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, _excluded29);
  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(_ref33, ref) {
  var afterHide = _ref33.afterHide,
    afterShow = _ref33.afterShow,
    beforeHide = _ref33.beforeHide,
    beforeShow = _ref33.beforeShow,
    color = _ref33.color,
    field = _ref33.field,
    footer = _ref33.footer,
    _ref33$getColor = _ref33.getColor,
    getColor = _ref33$getColor === void 0 ? defaultGetColor : _ref33$getColor,
    getGroup = _ref33.getGroup,
    _ref33$getLabel = _ref33.getLabel,
    getLabel = _ref33$getLabel === void 0 ? defaultGetLabel : _ref33$getLabel,
    getSuggested = _ref33.getSuggested,
    groupGetId = _ref33.groupGetId,
    groupGetLabel = _ref33.groupGetLabel,
    i18nScope = _ref33.i18nScope,
    onClear = _ref33.onClear,
    onSearch = _ref33.onSearch,
    onSelect = _ref33.onSelect,
    options = _ref33.options,
    optgroups = _ref33.optgroups,
    props = _objectWithoutProperties(_ref33, _excluded30);
  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(_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, _excluded31);
  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(_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,
    groupHeaderRenderer = _ref35.groupHeaderRenderer,
    isOptionDisabled = _ref35.isOptionDisabled,
    onChange = _ref35.onChange,
    onSearch = _ref35.onSearch,
    onScrollBottom = _ref35.onScrollBottom,
    options = _ref35.options,
    optgroups = _ref35.optgroups,
    optionRenderer = _ref35.optionRenderer,
    placement = _ref35.placement,
    placeholder = _ref35.placeholder,
    tokenRenderer = _ref35.tokenRenderer,
    qa = _ref35.qa,
    props = _objectWithoutProperties(_ref35, _excluded32);
  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(_ref36, ref) {
  var field = _ref36.field,
    _onBlur = _ref36.onBlur,
    _onChange = _ref36.onChange,
    _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, _excluded33);
  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(_ref37, ref) {
  var afterHide = _ref37.afterHide,
    afterShow = _ref37.afterShow,
    beforeHide = _ref37.beforeHide,
    beforeShow = _ref37.beforeShow,
    emptyMessage = _ref37.emptyMessage,
    field = _ref37.field,
    getGroup = _ref37.getGroup,
    getId = _ref37.getId,
    _ref37$getLabel = _ref37.getLabel,
    getLabel = _ref37$getLabel === void 0 ? defaultGetLabel : _ref37$getLabel,
    getOptGroup = _ref37.getOptGroup,
    groupRenderer = _ref37.groupRenderer,
    groups = _ref37.groups,
    isOptionDisabled = _ref37.isOptionDisabled,
    placeholder = _ref37.placeholder,
    placement = _ref37.placement,
    onChange = _ref37.onChange,
    onScrollBottom = _ref37.onScrollBottom,
    onSearch = _ref37.onSearch,
    optgroups = _ref37.optgroups,
    options = _ref37.options,
    optionRenderer = _ref37.optionRenderer,
    optGroupRenderer = _ref37.optGroupRenderer,
    tokenRenderer = _ref37.tokenRenderer,
    qa = _ref37.qa,
    props = _objectWithoutProperties(_ref37, _excluded34);
  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(_ref38, ref) {
  var field = _ref38.field,
    _onBlur = _ref38.onBlur,
    _onChange = _ref38.onChange,
    _ref38$getId = _ref38.getId,
    getId = _ref38$getId === void 0 ? defaultGetId : _ref38$getId,
    _ref38$getLabel = _ref38.getLabel,
    getLabel = _ref38$getLabel === void 0 ? defaultGetLabel : _ref38$getLabel,
    props = _objectWithoutProperties(_ref38, _excluded35);
  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);
  };
  return /*#__PURE__*/React.createElement(TieredSelect, _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 TieredSelectOutput = /*#__PURE__*/React.forwardRef(function TieredSelectOutput(_ref39, ref) {
  var afterHide = _ref39.afterHide,
    afterShow = _ref39.afterShow,
    beforeHide = _ref39.beforeHide,
    beforeShow = _ref39.beforeShow,
    field = _ref39.field,
    getId = _ref39.getId,
    _ref39$getLabel = _ref39.getLabel,
    getLabel = _ref39$getLabel === void 0 ? defaultGetLabel : _ref39$getLabel,
    getGroupId = _ref39.getGroupId,
    getNextGroupId = _ref39.getNextGroupId,
    getValueString = _ref39.getValueString,
    i18nScope = _ref39.i18nScope,
    isLeaf = _ref39.isLeaf,
    isTierDisabled = _ref39.isTierDisabled,
    loadingMore = _ref39.loadingMore,
    onChange = _ref39.onChange,
    onClear = _ref39.onClear,
    onNavigate = _ref39.onNavigate,
    onScrollBottom = _ref39.onScrollBottom,
    onSearch = _ref39.onSearch,
    onQuickCreate = _ref39.onQuickCreate,
    options = _ref39.options,
    selectableTiers = _ref39.selectableTiers,
    props = _objectWithoutProperties(_ref39, _excluded36);
  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);
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_);
//# sourceMappingURL=Form.js.map