@startlibs/form 1.0.0-alpha-10f → 1.0.0-alpha-10h

package/lib/index.js

@@ -13,10 +13,12 @@ var _objectSpread = _interopDefault(require('@babel/runtime/helpers/objectSpread
 var _set = _interopDefault(require('lodash/fp/set'));
 var _update = _interopDefault(require('lodash/fp/update'));
 var _isFunction = _interopDefault(require('lodash/fp/isFunction'));
+var _get = _interopDefault(require('lodash/fp/get'));
 var React = require('react');
 var React__default = _interopDefault(React);
 var core = require('@startlibs/core');
 var utils = require('@startlibs/utils');
+var _difference = _interopDefault(require('lodash/fp/difference'));
 var _property = _interopDefault(require('lodash/fp/property'));
 var _uniqBy = _interopDefault(require('lodash/fp/uniqBy'));
 var _identity = _interopDefault(require('lodash/fp/identity'));
@@ -25,26 +27,26 @@ var styled__default = _interopDefault(styled);
 var components = require('@startlibs/components');
 var polished = require('polished');
 var reselect = require('reselect');
-var _toConsumableArray = _interopDefault(require('@babel/runtime/helpers/toConsumableArray'));
-var _without = _interopDefault(require('lodash/fp/without'));
-var form = require('@startlibs/form');
 var _taggedTemplateLiteral = _interopDefault(require('@babel/runtime/helpers/taggedTemplateLiteral'));
+var form = require('@startlibs/form');
 var _isRegExp = _interopDefault(require('lodash/fp/isRegExp'));
-var _difference = _interopDefault(require('lodash/fp/difference'));
+var _isString = _interopDefault(require('lodash/fp/isString'));
 var _union = _interopDefault(require('lodash/fp/union'));
 var _flow = _interopDefault(require('lodash/fp/flow'));
-var _isBoolean = _interopDefault(require('lodash/fp/isBoolean'));
-var _isString = _interopDefault(require('lodash/fp/isString'));
+var _stubFalse = _interopDefault(require('lodash/fp/stubFalse'));
+var _isFinite = _interopDefault(require('lodash/fp/isFinite'));
+var _sortBy = _interopDefault(require('lodash/fp/sortBy'));
+var _filter = _interopDefault(require('lodash/fp/filter'));
+var reactWindow = require('react-window');
 var _classCallCheck = _interopDefault(require('@babel/runtime/helpers/classCallCheck'));
 var _createClass = _interopDefault(require('@babel/runtime/helpers/createClass'));
 var _possibleConstructorReturn = _interopDefault(require('@babel/runtime/helpers/possibleConstructorReturn'));
 var _getPrototypeOf = _interopDefault(require('@babel/runtime/helpers/getPrototypeOf'));
 var _inherits = _interopDefault(require('@babel/runtime/helpers/inherits'));
-var _filter = _interopDefault(require('lodash/fp/filter'));
 var _map = _interopDefault(require('lodash/fp/map'));
-var _stubFalse = _interopDefault(require('lodash/fp/stubFalse'));
 var _isObject = _interopDefault(require('lodash/fp/isObject'));
-var _isFinite = _interopDefault(require('lodash/fp/isFinite'));
+var _toConsumableArray = _interopDefault(require('@babel/runtime/helpers/toConsumableArray'));
+var _isBoolean = _interopDefault(require('lodash/fp/isBoolean'));
 var _negate = _interopDefault(require('lodash/fp/negate'));
 var _zipObject = _interopDefault(require('lodash/fp/zipObject'));
 var _last = _interopDefault(require('lodash/fp/last'));
@@ -52,7 +54,6 @@ var _flatten = _interopDefault(require('lodash/fp/flatten'));
 var _fromPairs = _interopDefault(require('lodash/fp/fromPairs'));
 var _pick = _interopDefault(require('lodash/fp/pick'));
 var _toPairs = _interopDefault(require('lodash/fp/toPairs'));
-var _get = _interopDefault(require('lodash/fp/get'));
 var _entries = _interopDefault(require('lodash/fp/entries'));
 
 var errorsInsidePathSelector = function errorsInsidePathSelector() {
@@ -239,7 +240,7 @@ var useTransientErrorHelper = function useTransientErrorHelper() {
     showingErrors.current = newErrors;
   };
 
-  React__default.useEffect(function () {
+  React.useEffect(function () {
     return function () {
       clearCurrentErrors();
     };
@@ -248,24 +249,45 @@ var useTransientErrorHelper = function useTransientErrorHelper() {
 };
 var Errors = function Errors(_ref17) {
   var path = _ref17.path,
-      className = _ref17.className;
+      filter = _ref17.filter,
+      className = _ref17.className,
+      autoScroll = _ref17.autoScroll;
 
   var _useContext2 = React.useContext(ErrorsContext),
       getErrorsInsidePath = _useContext2.getErrorsInsidePath,
       willRemoveError = _useContext2.willRemoveError;
 
-  var filter = React.useContext(ErrorFilterContext);
-  var errors = filter(getErrorsInsidePath(path));
+  var contextFilter = React.useContext(ErrorFilterContext);
+  var ref = React.useRef();
+  var errors = filter ? getErrorsInsidePath(path).filter(filter) : contextFilter(getErrorsInsidePath(path));
+
+  var uniqErrors = _uniqBy(_property(0), errors).filter(function (_ref18) {
+    var _ref19 = _slicedToArray(_ref18, 1),
+        v = _ref19[0];
+
+    return v;
+  });
 
-  var uniqErrors = _uniqBy(_property(0), errors);
+  var prevErrors = core.usePreviousForEffect(uniqErrors);
+  React.useEffect(function () {
+    var _ref$current;
 
+    var changed = _difference(uniqErrors, prevErrors);
+
+    if (autoScroll && changed.length && ((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.scrollIntoView) && !utils.isElementInView(ref.current)) {
+      ref.current.scrollIntoView({
+        behavior: "smooth"
+      });
+    }
+  }, [uniqErrors]);
   return React__default.createElement(components.TransitionDiv, {
     block: true
-  }, errors.length > 0 && React__default.createElement(Errors.Container, {
+  }, uniqErrors.length > 0 && React__default.createElement(Errors.Container, {
+    ref: ref,
     className: className
-  }, uniqErrors.map(function (_ref18) {
-    var _ref19 = _slicedToArray(_ref18, 1),
-        value = _ref19[0];
+  }, uniqErrors.map(function (_ref20) {
+    var _ref21 = _slicedToArray(_ref20, 1),
+        value = _ref21[0];
 
     return value && React__default.createElement(Errors.Item, {
       key: value
@@ -282,7 +304,7 @@ Errors.Container = styled__default.ul.withConfig({
 Errors.Item = styled__default.li.withConfig({
   displayName: "Errors__Item",
   componentId: "sc-1vuw7bx-1"
-})(["background-color:", ";padding:1rem 3.5rem 1rem 1rem;border-radius:8px;border:1px solid ", ";color:", ";position:relative;text-align:left;& ~ &{margin-top:0.5rem;}", ""], function (props) {
+})(["background-color:", ";padding:1rem 3.5rem 1rem 1rem;border-radius:8px;border:1px solid ", ";color:", ";position:relative;text-align:left;font-size:13px;line-height:130%;& ~ &{margin-top:0.5rem;}", ""], function (props) {
   return polished.lighten(0.42, props.theme.colors.alert);
 }, function (props) {
   return polished.lighten(0.35, props.theme.colors.alert);
@@ -292,7 +314,7 @@ Errors.CloseIcon = styled__default(components.Icon).attrs({
 }).withConfig({
   displayName: "Errors__CloseIcon",
   componentId: "sc-1vuw7bx-2"
-})(["color:", ";font-weight:600;display:inline-block;background-color:", ";width:21px;height:21px;line-height:21px;text-align:center;border-radius:50%;cursor:pointer;position:absolute;top:10px;right:10px;z-index:2;&:hover{background-color:", ";}"], utils.getColor('alert'), function (props) {
+})(["color:", ";font-weight:600;display:inline-block;background-color:", ";width:21px;height:21px;line-height:21px;text-align:center;border-radius:50%;cursor:pointer;position:absolute;top:10px;right:10px;font-size:14px;z-index:2;&:hover{background-color:", ";}"], utils.getColor('alert'), function (props) {
   return polished.lighten(0.35, props.theme.colors.alert);
 }, function (props) {
   return polished.lighten(0.32, props.theme.colors.alert);
@@ -558,7 +580,7 @@ var useForm = function useForm(_ref, ref) {
               values = _args.length > 0 && _args[0] !== undefined ? _args[0] : getValues();
               validation = _args.length > 1 && _args[1] !== undefined ? _args[1] : preValidation;
               _context.next = 4;
-              return utils.callIfFunction(validation, values);
+              return utils.callIfFunction(validation, values, utils$1);
 
             case 4:
               errors = _context.sent;
@@ -688,10 +710,14 @@ var useForm = function useForm(_ref, ref) {
               };
 
             case 18:
-              request = transform(values);
+              _context2.next = 20;
+              return transform(values);
+
+            case 20:
+              request = _context2.sent;
 
               if (request) {
-                _context2.next = 24;
+                _context2.next = 26;
                 break;
               }
 
@@ -700,18 +726,19 @@ var useForm = function useForm(_ref, ref) {
                 untransformed: true
               });
 
-            case 24:
+            case 26:
               loading.open();
+              errorsUtils.clearErrors();
 
               if (!(!alwaysSave && !hasChangedRef.get() && (!values || values === getValues()))) {
-                _context2.next = 30;
+                _context2.next = 33;
                 break;
               }
 
-              _context2.next = 28;
+              _context2.next = 31;
               return onSuccess(request);
 
-            case 28:
+            case 31:
               if (!isUnmounted()) {
                 loading.close();
               }
@@ -720,17 +747,17 @@ var useForm = function useForm(_ref, ref) {
                 unrequested: request
               });
 
-            case 30:
-              _context2.prev = 30;
-              _context2.next = 33;
+            case 33:
+              _context2.prev = 33;
+              _context2.next = 36;
               return action(request);
 
-            case 33:
+            case 36:
               response = _context2.sent;
-              _context2.next = 36;
+              _context2.next = 39;
               return onSuccess(request, response);
 
-            case 36:
+            case 39:
               if (!isUnmounted()) {
                 setHasChanged(false);
                 loading.close();
@@ -741,18 +768,18 @@ var useForm = function useForm(_ref, ref) {
                 response: response
               });
 
-            case 40:
-              _context2.prev = 40;
-              _context2.t0 = _context2["catch"](30);
+            case 43:
+              _context2.prev = 43;
+              _context2.t0 = _context2["catch"](33);
 
-              if (_context2.t0[0] && _context2.t0[0].errors) {
+              if (_get([0, 'errors'], _context2.t0)) {
                 errorsUtils.setErrors(_context2.t0[0].errors);
               }
 
-              _context2.next = 45;
+              _context2.next = 48;
               return onFailure(request, _context2.t0, utils$1);
 
-            case 45:
+            case 48:
               if (!isUnmounted()) {
                 loading.close();
               }
@@ -762,12 +789,12 @@ var useForm = function useForm(_ref, ref) {
                 rejection: _context2.t0
               };
 
-            case 47:
+            case 50:
             case "end":
               return _context2.stop();
           }
         }
-      }, _callee2, this, [[30, 40]]);
+      }, _callee2, this, [[33, 43]]);
     }));
 
     return function submitForm(_x) {
@@ -923,13 +950,6 @@ var skipValidation = function skipValidation() {
   return true;
 };
 
-var itemToggle = function itemToggle(item) {
-  return function () {
-    var list = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-    return list.indexOf(item) >= 0 ? _without([item], list) : _toConsumableArray(list).concat([item]);
-  };
-};
-
 var formInput = function formInput(_ref) {
   var undefinedPlaceholder = _ref.undefinedPlaceholder,
       _ref$isChecked = _ref.isChecked,
@@ -955,19 +975,18 @@ var formInput = function formInput(_ref) {
       setFormValue = _useFormValue2[1];
 
   var setValue = function setValue(value, element) {
-    if (!validation(value, path)) {
-      return;
-    }
-
-    setFormValue(transform(value, {
+    var opts = {
       path: path,
-      prevValue: formValue
-    }));
-    utils.callIfFunction(onChange, utils.callIfFunction(value, formValue), {
       prevValue: formValue,
-      path: path,
       element: element
-    });
+    };
+
+    if (!validation(value, opts)) {
+      return;
+    }
+
+    setFormValue(transform(value, opts));
+    utils.callIfFunction(onChange, utils.callIfFunction(value, formValue), opts);
   };
 
   var setValueFromEventTarget = function setValueFromEventTarget(e) {
@@ -983,7 +1002,7 @@ var formInput = function formInput(_ref) {
   };
 
   var toggleItem = function toggleItem() {
-    return setValue(itemToggle(fieldValue));
+    return setValue(utils._s.itemToggle(fieldValue));
   };
 
   return [utils.ifUndefined(formValue, undefinedPlaceholder), setValue, {
@@ -997,7 +1016,10 @@ var formInput = function formInput(_ref) {
 };
 
 var rawInput = function rawInput(_ref2) {
+  var _errorUtils$paths;
+
   var value = _ref2.value,
+      path = _ref2.path,
       _ref2$isChecked = _ref2.isChecked,
       isChecked = _ref2$isChecked === void 0 ? _identity : _ref2$isChecked,
       name = _ref2.name,
@@ -1015,6 +1037,8 @@ var rawInput = function rawInput(_ref2) {
       rawValue = _useState2[0],
       setRawValue = _useState2[1];
 
+  var errorUtils = React.useContext(ErrorsContext);
+  var formattedPath = utils.formatPath(path);
   React.useEffect(function () {
     setRawValue(value);
   }, [value]);
@@ -1044,10 +1068,11 @@ var rawInput = function rawInput(_ref2) {
   };
 
   var toggleItem = function toggleItem() {
-    return setValue(itemToggle(fieldValue));
+    return setValue(utils._s.itemToggle(fieldValue));
   };
 
   return [value, setValue, {
+    hasErrors: errorUtils === null || errorUtils === void 0 ? void 0 : (_errorUtils$paths = errorUtils.paths) === null || _errorUtils$paths === void 0 ? void 0 : _errorUtils$paths.has(formattedPath),
     setFromField: setFromField,
     name: name,
     toggle: toggle,
@@ -1155,14 +1180,41 @@ Field.HelpText = HelpText;
 Field.Description = FieldDescription;
 Field.displayName = "Field";
 
-var addExtraProp = function addExtraProp(element, extra) {
-  var override = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
-  return React__default.cloneElement(element, override ? _objectSpread({}, element.props, extra) : _objectSpread({}, extra, element.props), element.props.children);
-};
+function _templateObject() {
+  var data = _taggedTemplateLiteral(["\n    min-height: 54px;\n    font-size: 14px;\n  "]);
+
+  _templateObject = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+var FieldBoxIcon = styled__default(components.Icon).withConfig({
+  displayName: "FieldBox__FieldBoxIcon",
+  componentId: "sc-18ntu84-0"
+})(["font-size:25px;width:25px;text-align:center;margin-right:0.75rem;color:", ";"], function (props) {
+  return props.color;
+});
+var FieldBoxAction = styled__default.div.withConfig({
+  displayName: "FieldBox__FieldBoxAction",
+  componentId: "sc-18ntu84-1"
+})(["margin-left:auto;color:", ";padding-left:0.5rem;font-size:12px;"], utils.getColor('main'));
+var FieldBox = styled__default.div.withConfig({
+  displayName: "FieldBox",
+  componentId: "sc-18ntu84-2"
+})(["display:flex;width:100%;background-color:", ";background-color:", ";border-radius:6px;min-height:42px;padding:1rem 1.25rem;cursor:pointer;align-items:center;font-size:13px;font-weight:500;color:", ";position:relative;transition:border-radius 0.5s ease;:hover,:active{background-color:", ";background-color:", ";}& ~ &{margin-top:0.75rem;}", "{margin-left:-0.25rem;}", ""], utils.getColor('bluishGray'), utils.getColor('gray240'), utils.getColor('gray60'), function (props) {
+  return polished.darken(0.03, utils.getColor("bluishGray")(props));
+}, function (props) {
+  return polished.darken(0.03, utils.getColor("gray240")(props));
+}, FieldBoxIcon, utils.media.mobile(_templateObject()));
+var FieldBoxHelpText = styled__default.span.withConfig({
+  displayName: "FieldBox__FieldBoxHelpText",
+  componentId: "sc-18ntu84-3"
+})(["font-weight:400;color:rgba(0,0,0,0.4);font-size:12px;"]);
 
 var useConfirmDialog = function useConfirmDialog(dialog, args, toggleCallback) {
   return components.useDialog(function (closeDialog) {
-    return addExtraProp(utils.callIfFunction(dialog, closeDialog), {
+    return utils.addExtraProp(utils.callIfFunction(dialog, closeDialog), {
       closeDialog: closeDialog
     });
   }, args, toggleCallback);
@@ -1173,7 +1225,7 @@ var useConfirmDialogWithProps = function useConfirmDialogWithProps(dialog, args)
       overrideClose = _ref$overrideClose === void 0 ? true : _ref$overrideClose;
 
   return components.useDialogWithToggle(function (toggle) {
-    return addExtraProp(utils.callIfFunction(dialog, toggle.isOpen, toggle.close), {
+    return utils.addExtraProp(utils.callIfFunction(dialog, toggle.isOpen, toggle.close), {
       closeDialog: toggle.close
     }, overrideClose);
   }, args);
@@ -1188,7 +1240,9 @@ var ConfirmDialog = function ConfirmDialog(_ref2) {
       _ref2$cancelLabel = _ref2.cancelLabel,
       cancelLabel = _ref2$cancelLabel === void 0 ? "Cancelar" : _ref2$cancelLabel,
       _ref2$cancelButton = _ref2.cancelButton,
-      cancelButton = _ref2$cancelButton === void 0 ? React__default.createElement(components.Button, null, cancelLabel) : _ref2$cancelButton,
+      cancelButton = _ref2$cancelButton === void 0 ? React__default.createElement(components.Button, {
+    tabIndex: 2
+  }, cancelLabel) : _ref2$cancelButton,
       onFailure = _ref2.onFailure,
       title = _ref2.title,
       keepOnSuccess = _ref2.keepOnSuccess,
@@ -1202,9 +1256,12 @@ var ConfirmDialog = function ConfirmDialog(_ref2) {
       notify = _ref2.notify,
       confirmChanges = _ref2.confirmChanges,
       transform = _ref2.transform,
-      isLoading = _ref2.isLoading;
+      isLoading = _ref2.isLoading,
+      stickyFooter = _ref2.stickyFooter,
+      _ref2$alwaysSave = _ref2.alwaysSave,
+      alwaysSave = _ref2$alwaysSave === void 0 ? true : _ref2$alwaysSave;
   return React__default.createElement(form.WithForm, {
-    alwaysSave: true,
+    alwaysSave: alwaysSave,
     ref: formRef,
     preValidation: preValidation,
     values: values,
@@ -1238,31 +1295,49 @@ var ConfirmDialog = function ConfirmDialog(_ref2) {
       isLoading: isLoading,
       closeDialog: closeDialog,
       form: form$1,
-      footer: React__default.createElement(React__default.Fragment, null, cancelButton && addExtraProp(utils.callIfFunction(cancelButton, closeDialog), {
+      stickyFooter: stickyFooter,
+      footer: React__default.createElement(React__default.Fragment, null, cancelButton && utils.addExtraProp(utils.callIfFunction(cancelButton, closeDialog), {
         onClick: closeDialog
-      }, false), utils.callIfFunction(alternativeButton, closeDialog), confirm && addExtraProp(confirm, {
-        isLoading: form$1.isLoading,
-        type: "submit"
+      }, false), utils.callIfFunction(alternativeButton, closeDialog), confirm && utils.using(utils.callIfFunction(confirm, {
+        form: form$1,
+        isLoading: isLoading
+      }))(function (c) {
+        return c && utils.addExtraProp(c, {
+          isLoading: form$1.isLoading,
+          type: "submit"
+        });
       }))
-    }, utils.callIfFunction(children, form$1), React__default.createElement(form.Errors, null));
+    }, utils.callIfFunction(children, form$1), React__default.createElement(form.Errors, {
+      autoScroll: true
+    }));
   });
 };
 var FormDialog = ConfirmDialog;
 
-function _templateObject2() {
+function _templateObject3() {
   var data = _taggedTemplateLiteral(["\n      padding: 1rem;\n      ", "\n    "]);
 
-  _templateObject2 = function _templateObject2() {
+  _templateObject3 = function _templateObject3() {
     return data;
   };
 
   return data;
 }
 
-function _templateObject() {
+function _templateObject2() {
   var data = _taggedTemplateLiteral(["\n    height: 42px;\n    padding: 0 1rem;\n    @supports (-webkit-touch-callout: none) {\n      font-size: 16px;\n    }\n  "]);
 
-  _templateObject = function _templateObject() {
+  _templateObject2 = function _templateObject2() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject$1() {
+  var data = _taggedTemplateLiteral(["\n    bottom: 10px;\n  "]);
+
+  _templateObject$1 = function _templateObject() {
     return data;
   };
 
@@ -1271,12 +1346,12 @@ function _templateObject() {
 var InputLoading = styled__default(components.Loading).withConfig({
   displayName: "TextInput__InputLoading",
   componentId: "yzpeng-0"
-})(["bottom:8px;right:0.6rem;left:auto;top:auto;"]);
+})(["bottom:8px;right:0.6rem;left:auto;top:auto;", " "], utils.media.mobile(_templateObject$1()));
 var Input = styled__default.input.withConfig({
   displayName: "TextInput__Input",
   componentId: "yzpeng-1"
-})(["width:100%;font-size:14px;border:1px solid ", ";border-radius:6px;outline:0;outline:none;color:", ";background:white;position:relative;height:3rem;padding:0 0.7rem;overflow:auto;", "::-webkit-input-placeholder{color:rgba(0,0,0,0.3);}::-moz-placeholder{color:rgba(0,0,0,0.3);}:-moz-placeholder{color:rgba(0,0,0,0.3);}:-ms-input-placeholder{color:rgba(0,0,0,0.3);}", "::-ms-clear{display:none;}", " ", " ", ""], utils.getColor('gray210'), utils.getColor('gray60'), utils.media.mobile(_templateObject()), function (props) {
-  return !props.hasTextBox && styled.css([":focus{border-color:", ";box-shadow:0px 0px 0px 2px rgba(0,0,0,0.1);}", ""], utils.getColor('gray180'), function (props) {
+})(["width:100%;font-size:14px;border:1px solid ", ";border-radius:6px;outline:0;outline:none;color:", ";background:white;position:relative;height:3rem;padding:0 0.7rem;overflow:auto;", "::-webkit-input-placeholder{color:rgba(0,0,0,0.3);}::-moz-placeholder{color:rgba(0,0,0,0.3);}:-moz-placeholder{color:rgba(0,0,0,0.3);}:-ms-input-placeholder{color:rgba(0,0,0,0.3);}", "::-ms-clear{display:none;}", " ", " ", ""], utils.getColor('gray210'), utils.getColor('gray60'), utils.media.mobile(_templateObject2()), function (props) {
+  return !props.hasTextBox && !props.noFocus && styled.css([":focus{border-color:", ";box-shadow:0px 0px 0px 2px rgba(0,0,0,0.1);}", ""], utils.getColor('gray180'), function (props) {
     return props.hasErrors && styled.css(["border-color:", " !important;"], utils.getColor('alert'));
   });
 }, function (props) {
@@ -1286,7 +1361,7 @@ var Input = styled__default.input.withConfig({
     return props.regularInputHeight ? 36 : props.minHeight || 60;
   }, function (props) {
     return props.autoResize ? 'overflow:hidden;' : 'overflow:auto;';
-  }, utils.media.mobile(_templateObject2(), function (props) {
+  }, utils.media.mobile(_templateObject3(), function (props) {
     return props.regularInputHeight && 'min-height: 42px;';
   }));
 }, utils.customTheme('TextInput'));
@@ -1344,7 +1419,9 @@ var useTextInput = function useTextInput(_ref, ref) {
       rawHasErrors = _ref.rawHasErrors,
       transformOnBlur = _ref.transformOnBlur,
       raw = _ref.raw,
-      rest = _objectWithoutProperties(_ref, ["onFocus", "onBlur", "autoResize", "constraint", "pattern", "path", "rawValue", "rawSetValue", "rawHasErrors", "transformOnBlur", "raw"]);
+      showValue = _ref.showValue,
+      deleteTrailing = _ref.deleteTrailing,
+      rest = _objectWithoutProperties(_ref, ["onFocus", "onBlur", "autoResize", "constraint", "pattern", "path", "rawValue", "rawSetValue", "rawHasErrors", "transformOnBlur", "raw", "showValue", "deleteTrailing"]);
 
   var _useInput = useInput(_objectSpread({
     path: path,
@@ -1362,7 +1439,7 @@ var useTextInput = function useTextInput(_ref, ref) {
       setFocused = _useState2[1];
 
   var lastSelection = core.useRefState();
-  var lastValue = core.useRefState(formValue);
+  var lastValue = core.useRefState(showValue(formValue));
 
   var handleOnFocus = function handleOnFocus(e) {
     setFocused(true);
@@ -1401,7 +1478,7 @@ var useTextInput = function useTextInput(_ref, ref) {
     } catch (e) {}
 
     if (constraint || pattern) {
-      setFormValue(validateConstraint(target.value, constraint, formValue, pattern), ref.current);
+      setFormValue(validateConstraint(target.value, constraint, showValue(formValue), pattern), ref.current);
     } else {
       setFormValue(target.value, ref.current);
     }
@@ -1410,9 +1487,19 @@ var useTextInput = function useTextInput(_ref, ref) {
   var validateConstraint = function validateConstraint(value, constraint, prevValue, pattern) {
     var newValue = '';
 
-    if (value === lastValue.get() || lastValue.get() && value.length < lastValue.get().length && !pattern) {
-      lastValue.set(value);
-      return value;
+    if (value === lastValue.get() + "" || lastValue.get() && (lastValue.get() + "").indexOf(value) >= 0 && !pattern) {
+      newValue = value;
+
+      if (deleteTrailing) {
+        if (_isString(deleteTrailing) && value.slice(-deleteTrailing.length) === deleteTrailing) {
+          newValue = value.slice(0, -deleteTrailing.length);
+        } else if (_isRegExp(deleteTrailing) && deleteTrailing.test(value)) {
+          newValue = value.replace(deleteTrailing, '');
+        }
+      }
+
+      lastValue.set(showValue(newValue));
+      return newValue;
     }
 
     if (pattern) {
@@ -1461,7 +1548,7 @@ var useTextInput = function useTextInput(_ref, ref) {
       newValue = utils.digitsToPattern(constraint, value);
     }
 
-    lastValue.set(newValue);
+    lastValue.set(showValue(newValue));
     return newValue;
   };
 
@@ -1490,6 +1577,7 @@ var TextInput = styled__default(React.forwardRef(function (_ref2, forwardedRef)
       fieldClassName = _ref2$fieldClassName === void 0 ? '' : _ref2$fieldClassName,
       _ref2$FieldType = _ref2.FieldType,
       FieldType = _ref2$FieldType === void 0 ? Field : _ref2$FieldType,
+      margin = _ref2.margin,
       rawValue = _ref2.value,
       rawSetValue = _ref2.setValue,
       rawHasErrors = _ref2.hasErrors,
@@ -1498,6 +1586,7 @@ var TextInput = styled__default(React.forwardRef(function (_ref2, forwardedRef)
       _ref2$onImage = _ref2.onImage,
       onImage = _ref2$onImage === void 0 ? false : _ref2$onImage,
       autoFocus = _ref2.autoFocus,
+      noFocus = _ref2.noFocus,
       onFocus = _ref2.onFocus,
       onBlur = _ref2.onBlur,
       pattern = _ref2.pattern,
@@ -1507,7 +1596,7 @@ var TextInput = styled__default(React.forwardRef(function (_ref2, forwardedRef)
       raw = _ref2.raw,
       _ref2$tabIndex = _ref2.tabIndex,
       tabIndex = _ref2$tabIndex === void 0 ? 1 : _ref2$tabIndex,
-      rest = _objectWithoutProperties(_ref2, ["showValue", "label", "type", "helpText", "descText", "bellowDescText", "mandatory", "isLoading", "locked", "textBoxBefore", "textBoxAfter", "className", "fieldClassName", "FieldType", "value", "setValue", "hasErrors", "textarea", "onImage", "autoFocus", "onFocus", "onBlur", "pattern", "autoResize", "constraint", "path", "raw", "tabIndex"]);
+      rest = _objectWithoutProperties(_ref2, ["showValue", "label", "type", "helpText", "descText", "bellowDescText", "mandatory", "isLoading", "locked", "textBoxBefore", "textBoxAfter", "className", "fieldClassName", "FieldType", "margin", "value", "setValue", "hasErrors", "textarea", "onImage", "autoFocus", "noFocus", "onFocus", "onBlur", "pattern", "autoResize", "constraint", "path", "raw", "tabIndex"]);
 
   var ref = core.useEnsureRef(forwardedRef);
 
@@ -1521,7 +1610,8 @@ var TextInput = styled__default(React.forwardRef(function (_ref2, forwardedRef)
     rawValue: rawValue,
     rawSetValue: rawSetValue,
     rawHasErrors: rawHasErrors,
-    raw: raw
+    raw: raw,
+    showValue: showValue
   }, rest), ref),
       _useTextInput2 = _slicedToArray(_useTextInput, 4),
       value = _useTextInput2[0],
@@ -1561,6 +1651,7 @@ var TextInput = styled__default(React.forwardRef(function (_ref2, forwardedRef)
     "data-hj-whitelist": type !== "password",
     locked: locked,
     autoFocus: !utils.isTouchDevice() && autoFocus,
+    noFocus: noFocus,
     hasErrors: hasErrors,
     isOnImage: onImage,
     ref: ref,
@@ -1581,7 +1672,8 @@ var TextInput = styled__default(React.forwardRef(function (_ref2, forwardedRef)
     bellowDescText: bellowDescText,
     helpText: helpText,
     label: label,
-    labelClick: focusInput
+    labelClick: focusInput,
+    margin: margin
   }, isLoading && React__default.createElement(InputLoading, {
     absolute: true,
     size: 20
@@ -1616,15 +1708,17 @@ var WithImageInput = function WithImageInput(_ref) {
       multiple = _ref.multiple,
       _ref$path = _ref.path,
       path = _ref$path === void 0 ? ["image"] : _ref$path,
-      preValidation = _ref.preValidation,
+      _ref$preValidation = _ref.preValidation,
+      preValidation = _ref$preValidation === void 0 ? _stubFalse : _ref$preValidation,
       onChangeFile = _ref.onChangeFile,
       onClose = _ref.onClose,
       onClick = _ref.onClick,
       uploadFetcher = _ref.uploadFetcher,
       onSuccess = _ref.onSuccess,
+      onFailure = _ref.onFailure,
       ajaxError = _ref.ajaxError,
       onTouchEnd = _ref.onTouchEnd,
-      rest = _objectWithoutProperties(_ref, ["children", "multiple", "path", "preValidation", "onChangeFile", "onClose", "onClick", "uploadFetcher", "onSuccess", "ajaxError", "onTouchEnd"]);
+      rest = _objectWithoutProperties(_ref, ["children", "multiple", "path", "preValidation", "onChangeFile", "onClose", "onClick", "uploadFetcher", "onSuccess", "onFailure", "ajaxError", "onTouchEnd"]);
 
   var form = React.useContext(FormContext);
   var loading = core.useToggle();
@@ -1736,19 +1830,19 @@ var WithImageInput = function WithImageInput(_ref) {
           imageWidth: imageWidth,
           imageHeight: imageHeight
         });
-      }).catch(function () {
+      }).catch(function (e) {
         loading.close();
 
-        if (form.getValue(getIndexedPath('image') !== file)) {
+        if (form.getValue(getIndexedPath('image')) !== file) {
           form.setMeta(_update(['submittingImage'], function (v) {
             return v - 1;
           }));
           return;
         }
 
-        form.setError(getIndexedPath('image').join('.'), ajaxError);
+        form.setError(getIndexedPath('image').join('.'), utils.callIfFunction(ajaxError, _get('[1].status', e)));
         form.setValues(_flow(_set(getIndexedPath('filename'), oldFilename), _set(getIndexedPath('image'), oldImage), _set(getIndexedPath('imageWidth'), oldImageWidth), _set(getIndexedPath('imageHeight'), oldImageHeight)), false);
-        form.setMeta(_flow(_update(['submittingImage'], function (v) {
+        form.setMeta(_flow(_update('uploadingPaths', _difference(_difference.placeholder, [path.join(".")])), _update(['submittingImage'], function (v) {
           return v - 1;
         }), _update(['submittedImages'], function (v) {
           return (v || []).concat([{
@@ -1758,6 +1852,7 @@ var WithImageInput = function WithImageInput(_ref) {
           }]);
         }), _set(getIndexedPath('uploadStatus'), oldUploadStatus)));
         setTempImage(null);
+        utils.callIfFunction(onFailure);
       });
       if (eventTarget && eventTarget.parentNode && typeof eventTarget.parentNode.click === 'function') eventTarget.parentNode.click();
     };
@@ -1811,13 +1906,14 @@ var Checkbox = function Checkbox(_ref) {
       _ref$isChecked = _ref.isChecked,
       isChecked = _ref$isChecked === void 0 ? _identity : _ref$isChecked,
       isList = _ref.isList,
+      onClick = _ref.onClick,
       disabled = _ref.disabled,
       inverted = _ref.inverted,
       path = _ref.path,
       _ref$tabIndex = _ref.tabIndex,
       tabIndex = _ref$tabIndex === void 0 ? 1 : _ref$tabIndex,
       raw = _ref.raw,
-      rest = _objectWithoutProperties(_ref, ["className", "children", "isChecked", "isList", "disabled", "inverted", "path", "tabIndex", "raw"]);
+      rest = _objectWithoutProperties(_ref, ["className", "children", "isChecked", "isList", "onClick", "disabled", "inverted", "path", "tabIndex", "raw"]);
 
   var focused = core.useToggle();
 
@@ -1839,7 +1935,9 @@ var Checkbox = function Checkbox(_ref) {
 
   var value = isChecked(testInvert(isList ? (v === null || v === void 0 ? void 0 : v.indexOf(rest.fieldValue)) >= 0 : v));
 
-  var onClick = function onClick(e) {
+  var _onClick = function _onClick(e) {
+    utils.callIfFunction(onClick, e);
+
     if (!e.isDefaultPrevented()) {
       if (isList) {
         toggleItem();
@@ -1852,7 +1950,7 @@ var Checkbox = function Checkbox(_ref) {
   };
 
   return React__default.createElement("label", {
-    onClick: onClick,
+    onClick: _onClick,
     "data-drag": "false",
     className: className
   }, !utils.isTouchDevice() && React__default.createElement(HiddenInput, {
@@ -1872,8 +1970,18 @@ var Checkbox = function Checkbox(_ref) {
   }));
 };
 
+function _templateObject3$1() {
+  var data = _taggedTemplateLiteral(["\n    bottom: 9px;\n  "]);
+
+  _templateObject3$1 = function _templateObject3() {
+    return data;
+  };
+
+  return data;
+}
+
 function _templateObject2$1() {
-  var data = _taggedTemplateLiteral(["\n      height: 42px;\n      line-height: 40px;\n      padding-left: 1rem;\n  "]);
+  var data = _taggedTemplateLiteral(["\n      min-height: 42px;\n      padding-left: 1rem;\n      ", "\n  "]);
 
   _templateObject2$1 = function _templateObject2() {
     return data;
@@ -1882,10 +1990,10 @@ function _templateObject2$1() {
   return data;
 }
 
-function _templateObject$1() {
+function _templateObject$2() {
   var data = _taggedTemplateLiteral(["\n    ", " > * {\n      font-size: 14px;\n    }\n  "]);
 
-  _templateObject$1 = function _templateObject() {
+  _templateObject$2 = function _templateObject() {
     return data;
   };
 
@@ -1894,16 +2002,24 @@ function _templateObject$1() {
 var ComboboxMenu = styled__default(components.ContextListMenu).withConfig({
   displayName: "Combobox__ComboboxMenu",
   componentId: "u2hz6i-0"
-})(["z-index:100;background-color:white;border-radius:4px 4px 6px 6px;margin-top:-1px;margin-bottom:0.5rem;box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 3px 10px -2px rgba(0,0,0,0.15),0 1px 2px 0px rgba(0,0,0,0.2);border:1px solid #b4b4b4;max-height:25rem;width:auto;", " > *{font-size:13px;}", " ", ""], components.ListItem, utils.media.mobile(_templateObject$1(), components.ListItem), function (props) {
+})(["z-index:100;background-color:white;border-radius:4px 4px 6px 6px;margin-top:-1px;margin-bottom:0.5rem;box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 3px 10px -2px rgba(0,0,0,0.15),0 1px 2px 0px rgba(0,0,0,0.2);border:1px solid #b4b4b4;max-height:25rem;width:auto;", " > *{font-size:13px;}", " ", " ", ""], components.ListItem, utils.media.mobile(_templateObject$2(), components.ListItem), function (props) {
   return props.withoutIcons && styled.css(["", " > *{padding-left:1.25rem;padding-right:1.25rem;}"], components.ListItem);
+}, function (props) {
+  return props.withWindowing && "\n    overflow: hidden;\n    padding: 0;\n  ";
 });
 var ComboboxInput = styled__default.div.withConfig({
   displayName: "Combobox__ComboboxInput",
   componentId: "u2hz6i-1"
-})(["width:100%;font-size:14px;border:1px solid ", ";border-radius:6px;color:", ";background:white;position:relative;line-height:34px;display:block;height:3rem;padding:0 2.25rem 0 0.7rem;;overflow:auto;outline:0;outline:none;cursor:pointer;user-select:none;", " ", ":focus{border-color:", ";box-shadow:0px 0px 0px 2px rgba(0,0,0,0.1);}", ""], utils.getColor('gray210'), utils.getColor('gray60'), utils.media.mobile(_templateObject2$1()), function (props) {
-  return props.comboboxIsOpen && "\n    // border-bottom-left-radius: 0;\n    // border-bottom-right-radius: 0;\n  ";
+})(["width:100%;font-size:14px;border:1px solid ", ";border-radius:6px;color:", ";background:white;position:relative;display:block;min-height:3rem;padding:0.5rem 2.5rem 0.5rem 0.7rem;overflow:auto;outline:0;outline:none;cursor:pointer;user-select:none;overflow:hidden;display:flex;align-items:center;word-break:break-word;", " ", " ", ":focus{border-color:", ";box-shadow:0px 0px 0px 2px rgba(0,0,0,0.1);}", " input{position:absolute;top:-1px;left:0;border:none;", "}"], utils.getColor('gray210'), utils.getColor('gray60'), function (props) {
+  return props.suggestive && "\n    padding-right: 0.7rem;\n  ";
+}, utils.media.mobile(_templateObject2$1(), function (props) {
+  return props.suggestive && "\n        padding-right: 1rem;\n      ";
+}), function (props) {
+  return props.isFocused && styled.css(["border-color:", ";box-shadow:0px 0px 0px 2px rgba(0,0,0,0.1);"], utils.getColor('gray180'));
 }, utils.getColor('gray180'), function (props) {
   return props.hasErrors && styled.css(["border-color:", " !important;"], utils.getColor('alert'));
+}, function (props) {
+  return !props.suggestive && "\n      padding-right: 2.5rem;\n    ";
 });
 var ComboboxDropdownIcon = styled__default(components.Icon).withConfig({
   displayName: "Combobox__ComboboxDropdownIcon",
@@ -1912,16 +2028,25 @@ var ComboboxDropdownIcon = styled__default(components.Icon).withConfig({
 var FooterOptionsContainer = styled__default.div.withConfig({
   displayName: "Combobox__FooterOptionsContainer",
   componentId: "u2hz6i-3"
-})(["position:sticky;bottom:-0.5rem;background:white;border-top:1px solid rgba(0,0,0,0.1);padding:0.5rem 0;margin:0.5rem 0 -0.5rem;"]);
+})(["background:white;border-top:1px solid rgba(0,0,0,0.1);padding:0;", ""], function (props) {
+  return !props.hasWindoning && "\n    padding: 0.5rem 0;\n    margin: 0.5rem 0 -0.5rem;\n    bottom: -0.5rem;\n    position: sticky;\n  ";
+});
 var ComboboxPlaceholder = styled__default.div.withConfig({
   displayName: "Combobox__ComboboxPlaceholder",
   componentId: "u2hz6i-4"
 })(["color:rgba(0,0,0,0.3);"]);
-var SEPARATOR = {}; //shouldRecenter?
+var ComboboxLoading = styled__default(components.Loading).withConfig({
+  displayName: "Combobox__ComboboxLoading",
+  componentId: "u2hz6i-5"
+})(["bottom:6px;right:0.6rem;left:auto;top:auto;", ""], utils.media.mobile(_templateObject3$1()));
+var SEPARATOR = {};
+var NO_DIGITABLE_FOUND = "Nenhum resultado encontrado"; //shouldRecenter?
 
-var Combobox = styled__default(function (_ref) {
+var Combobox = styled__default(React__default.forwardRef(function (_ref, ref) {
   var _ref$getLabel = _ref.getLabel,
       getLabel = _ref$getLabel === void 0 ? _identity : _ref$getLabel,
+      getLabelAs = _ref.getLabelAs,
+      getBoxLabelAs = _ref.getBoxLabelAs,
       getIcon = _ref.getIcon,
       _ref$scrollContainer = _ref.scrollContainer,
       scrollContainer = _ref$scrollContainer === void 0 ? function (el) {
@@ -1930,35 +2055,54 @@ var Combobox = styled__default(function (_ref) {
       className = _ref.className,
       options = _ref.options,
       autoFocus = _ref.autoFocus,
+      autoOpenMenu = _ref.autoOpenMenu,
       mandatory = _ref.mandatory,
       placeholder = _ref.placeholder,
       disabled = _ref.disabled,
       fieldValue = _ref.fieldValue,
       label = _ref.label,
       path = _ref.path,
+      withWindowing = _ref.withWindowing,
       _ref$tabIndex = _ref.tabIndex,
       tabIndex = _ref$tabIndex === void 0 ? 1 : _ref$tabIndex,
       fieldClassName = _ref.fieldClassName,
       descText = _ref.descText,
       helpText = _ref.helpText,
       raw = _ref.raw,
+      digitable = _ref.digitable,
+      digitableConstraint = _ref.digitableConstraint,
+      digitableAsOption = _ref.digitableAsOption,
+      suggestive = _ref.suggestive,
+      onDigitableChange = _ref.onDigitableChange,
       footerOptions = _ref.footerOptions,
+      isLoading = _ref.isLoading,
+      menuRef = _ref.menuRef,
+      overrideSetValue = _ref.overrideSetValue,
+      _ref$transformOnSelec = _ref.transformOnSelect,
+      transformOnSelect = _ref$transformOnSelec === void 0 ? _identity : _ref$transformOnSelec,
       _ref$check = _ref.check,
       check = _ref$check === void 0 ? function (a, b) {
     return a === b;
   } : _ref$check,
-      rest = _objectWithoutProperties(_ref, ["getLabel", "getIcon", "scrollContainer", "className", "options", "autoFocus", "mandatory", "placeholder", "disabled", "fieldValue", "label", "path", "tabIndex", "fieldClassName", "descText", "helpText", "raw", "footerOptions", "check"]);
+      rest = _objectWithoutProperties(_ref, ["getLabel", "getLabelAs", "getBoxLabelAs", "getIcon", "scrollContainer", "className", "options", "autoFocus", "autoOpenMenu", "mandatory", "placeholder", "disabled", "fieldValue", "label", "path", "withWindowing", "tabIndex", "fieldClassName", "descText", "helpText", "raw", "digitable", "digitableConstraint", "digitableAsOption", "suggestive", "onDigitableChange", "footerOptions", "isLoading", "menuRef", "overrideSetValue", "transformOnSelect", "check"]);
 
   var selectedElement = React.useRef();
+  var selectedElementIndex = React.useRef();
   var fieldRef = React.useRef();
+  var windowingRef = React.useRef();
   var skipFocus = core.useRefState(autoFocus);
   var skipHover = core.useRefState();
-  var listElement = React.useRef();
-  var container = React.useRef();
+  var skipDigitableSetValue = core.useRefState();
+  var listElement = core.useEnsureRef(menuRef);
+  var container = core.useEnsureRef(ref);
   var keyState = core.useRefState();
-  var contextMenu = core.useToggle();
+  var contextMenu = core.useToggle(false);
   var hover = core.useToggle();
+  var strongHover = core.useRefState();
   var scrollToVisibility = core.useToggle();
+  var autoCompleteUID = core.useLazyConstant(function () {
+    return utils.getUID();
+  });
 
   var _useInput = useInput(_objectSpread({
     fieldValue: fieldValue,
@@ -1969,11 +2113,43 @@ var Combobox = styled__default(function (_ref) {
       confirmValue = _useInput2[1],
       hasErrors = _useInput2[2].hasErrors;
 
-  var _useState = React.useState(formValue),
-      _useState2 = _slicedToArray(_useState, 2),
-      value = _useState2[0],
-      _setValue = _useState2[1];
+  var value = core.useToggle(formValue);
+
+  var _setValue = function setValue(v) {
+    return value.openWith(v);
+  };
+
+  var digitableValue = core.useToggle(getLabel(value.isOpen));
+  var digitableRef = React.useRef();
+  var ignoringFilter = core.useToggle();
 
+  var setHover = function setHover(v) {
+    hover.openWith(v);
+
+    if (digitable) {
+      strongHover.set(hover.get());
+    } else {
+      _setValue(v);
+    }
+  };
+
+  React__default.useLayoutEffect(function () {
+    if (digitable && !skipDigitableSetValue.get()) {
+      if (contextMenu.isOpen) {
+        digitableRef.current.select();
+
+        if (value.get() && !suggestive) {
+          setHover(transformOnSelect(value.get()));
+        }
+      } else {
+        digitableValue.openWith(getLabel(value.get()));
+        strongHover.set(hover.get());
+        hover.close();
+      }
+    }
+
+    skipDigitableSetValue.set(false);
+  }, [contextMenu.isOpen]);
   React.useEffect(function () {
     contextMenu.isOpen && recenterScroll();
   }, [contextMenu.isOpen]);
@@ -1986,15 +2162,55 @@ var Combobox = styled__default(function (_ref) {
     autoFocus && ((_container$current = container.current) === null || _container$current === void 0 ? void 0 : _container$current.focus());
   }, []);
   React.useEffect(function () {
-    confirmValue(value);
+    autoOpenMenu && toggleCombobox();
+  }, []);
+  core.useUpdateEffect(function () {
+    if (value.isOpen !== formValue && !contextMenu.isOpen) {
+      confirmValue(value.isOpen);
+    }
   }, [!!contextMenu.isOpen]);
   React.useEffect(function () {
-    formValue !== value && _setValue(formValue);
+    if (formValue !== value.isOpen) {
+      _setValue(formValue);
+    }
+
+    if (digitable) {
+      digitableValue.openWith(function (prev) {
+        return prev !== getLabel(formValue) ? getLabel(formValue) : prev;
+      });
+    }
   }, [formValue]);
-  var allOptions = options.concat(footerOptions || []).filter(function (v) {
+  var filteredOptions = React.useMemo(function () {
+    return _flow(_filter(function (v) {
+      if (!digitable || !digitableValue.isOpen || ignoringFilter.isOpen) {
+        return true;
+      }
+
+      return utils.normalizeText(getLabel(v)).includes(utils.normalizeText(digitableValue.isOpen));
+    }), _sortBy(function (v) {
+      return utils.normalizeText(getLabel(v)).indexOf(utils.normalizeText(digitableValue.isOpen)) > 0;
+    }))(options);
+  }, [options, digitable, digitableValue.isOpen, ignoringFilter.isOpen]);
+  var digitableOption = React.useMemo(function () {
+    var option = filteredOptions.length < 8 && digitableAsOption && !!digitableValue.isOpen && utils.callIfFunction(digitableAsOption, digitableValue.isOpen);
+    return option || !filteredOptions.length && digitable && !suggestive && NO_DIGITABLE_FOUND;
+  }, [digitableValue.isOpen, filteredOptions.length]);
+  var availableOptions = filteredOptions.concat(digitableOption || []);
+  var allOptions = availableOptions.concat(footerOptions || []).filter(function (v) {
     return v !== SEPARATOR;
   });
-  var withPlaceholder = !value && value !== 0 && placeholder;
+  var withPlaceholder = !value.isOpen && value.isOpen !== 0 && placeholder;
+  core.useUpdateEffect(function () {
+    if (suggestive) {
+      return;
+    }
+
+    if (hover.isOpen) {
+      setHover(allOptions[0] === NO_DIGITABLE_FOUND ? allOptions[1] : allOptions[0]);
+    } else if (digitableValue.isOpen) {
+      setHover(utils.ifUndefined(value.isOpen, allOptions[0]));
+    }
+  }, [digitableValue.isOpen]);
 
   var toggleCombobox = function toggleCombobox() {
     if (contextMenu.isOpen) {
@@ -2013,25 +2229,43 @@ var Combobox = styled__default(function (_ref) {
   };
 
   var recenterScroll = function recenterScroll() {
-    if (listElement.current.getBoundingClientRect().bottom > window.innerHeight) {
-      var currentScrollContainer = scrollContainer(container.current);
-      currentScrollContainer.scrollTop = listElement.current.getBoundingClientRect().bottom + currentScrollContainer.scrollTop - window.innerHeight;
-    }
+    if (withWindowing) {
+      var index = hover.get() ? availableOptions.indexOf(hover.get()) : selectedElementIndex.current;
+
+      if (windowingRef.current) {
+        windowingRef.current.scrollToItem(_isFinite(index) ? index : availableOptions.map(getLabel).indexOf(getLabel(value.get())) || 0, "center");
+      }
+    } else {
+      if (!listElement.current) {
+        return;
+      }
+
+      if (listElement.current.getBoundingClientRect().bottom > window.innerHeight) {
+        var currentScrollContainer = scrollContainer(container.current);
+        currentScrollContainer.scrollTop = listElement.current.getBoundingClientRect().bottom + currentScrollContainer.scrollTop - window.innerHeight;
+      }
 
-    if (selectedElement.current) {
-      listElement.current.scrollTop = selectedElement.current.offsetTop + selectedElement.current.offsetHeight / 2 - getCurrentHeight() / 2;
+      if (selectedElement.current) {
+        listElement.current.scrollTop = selectedElement.current.offsetTop + selectedElement.current.offsetHeight / 2 - getCurrentHeight() / 2;
+      }
     }
   };
 
   var makeOptionVisible = function makeOptionVisible() {
-    if ((footerOptions === null || footerOptions === void 0 ? void 0 : footerOptions.indexOf(hover.isOpen)) >= 0) {
-      return;
-    } else if (selectedElement.current.offsetTop < listElement.current.scrollTop) {
-      skipHover.set(true);
-      listElement.current.scrollTop = selectedElement.current.offsetTop;
-    } else if (selectedElement.current.offsetTop + selectedElement.current.offsetHeight > listElement.current.scrollTop + getCurrentHeight()) {
-      skipHover.set(true);
-      listElement.current.scrollTop = selectedElement.current.offsetTop + selectedElement.current.offsetHeight - getCurrentHeight();
+    if (withWindowing) {
+      if (windowingRef.current) {
+        windowingRef.current.scrollToItem(selectedElementIndex.current || 0);
+      }
+    } else {
+      if (footerOptions && (footerOptions === null || footerOptions === void 0 ? void 0 : footerOptions.indexOf(hover.isOpen)) >= 0 || !listElement.current) {
+        return;
+      } else if (selectedElement.current.offsetTop < listElement.current.scrollTop) {
+        skipHover.set(true);
+        listElement.current.scrollTop = selectedElement.current.offsetTop;
+      } else if (selectedElement.current.offsetTop + selectedElement.current.offsetHeight > listElement.current.scrollTop + getCurrentHeight()) {
+        skipHover.set(true);
+        listElement.current.scrollTop = selectedElement.current.offsetTop + selectedElement.current.offsetHeight - getCurrentHeight();
+      }
     }
   };
 
@@ -2045,7 +2279,32 @@ var Combobox = styled__default(function (_ref) {
     hover.openWith(value);
   };
 
+  var digitableKeyDown = function digitableKeyDown(e) {
+    if (e.key.length == 1 || e.key == "Spacebar") {
+      e.stopPropagation();
+    } else if (e.key === 'Tab' || e.key === 'Enter') {
+      if (suggestive && allOptions.indexOf(strongHover.get()) < 0) {
+        if (allOptions.indexOf(value.isOpen) >= 0) {
+          _setValue(transformOnSelect(value.isOpen));
+        } else {
+          _setValue(transformOnSelect(utils.callIfFunction(digitableAsOption, digitableValue.get()) || digitableValue.get()));
+        }
+      } else if (strongHover.get() === hover.get()) {
+        _setValue(transformOnSelect(strongHover.get()));
+      }
+
+      if (e.key === "Enter") {
+        skipFocus.set(true);
+        container.current.focus();
+      }
+    }
+  };
+
   var keyDown = function keyDown(e) {
+    if (e.getModifierState('Shift') && e.key === 'Tab') {
+      return;
+    }
+
     if ((e.key === 'Escape' || e.key === 'Tab') && contextMenu.isOpen) {
       e.stopPropagation();
       toggleCombobox();
@@ -2056,6 +2315,12 @@ var Combobox = styled__default(function (_ref) {
 
       if (!contextMenu.isOpen) {
         contextMenu.open();
+
+        if (digitable) {
+          skipDigitableSetValue.set(true);
+          digitableValue.openWith(e.key);
+          return;
+        }
       }
 
       var prevKeyState = keyState.get();
@@ -2077,12 +2342,10 @@ var Combobox = styled__default(function (_ref) {
 
       var goTo = function goTo(index) {
         scrollToVisibility.open();
-        hover.openWith(allOptions[index]);
-
-        _setValue(allOptions[index]);
+        setHover(allOptions[index]);
       };
 
-      var currentIndex = allOptions.indexOf(hover.isOpen !== false ? hover.isOpen : value);
+      var currentIndex = allOptions.indexOf(hover.isOpen !== false ? hover.isOpen : value.isOpen);
       var direction = repeated ? e.shiftKey ? -1 : 1 : 0;
       var fnName = direction < 0 ? 'lastIndexOf' : 'indexOf';
       var item = repeated ? word.slice(0, 1) : word;
@@ -2109,16 +2372,14 @@ var Combobox = styled__default(function (_ref) {
 
     if (contextMenu.isOpen) {
       if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
-        var oldValue = hover.isOpen !== false ? hover.isOpen : value;
+        var oldValue = hover.isOpen !== false ? hover.isOpen : value.isOpen;
         var previousIndex = allOptions.indexOf(oldValue);
         var newIndex = Math.min(Math.max((previousIndex + allOptions.length + (e.key === 'ArrowUp' ? previousIndex < 0 ? 0 : -1 : 1)) % allOptions.length, 0), allOptions.length - 1);
         scrollToVisibility.open();
-        hover.openWith(allOptions[newIndex]);
-
-        _setValue(allOptions[newIndex]);
+        setHover(allOptions[newIndex]);
       } else {
         if (hover.isOpen !== false) {
-          _setValue(hover.isOpen);
+          _setValue(transformOnSelect(hover.isOpen));
         }
 
         toggleCombobox();
@@ -2128,30 +2389,91 @@ var Combobox = styled__default(function (_ref) {
     }
   };
 
-  var createOption = function createOption(option, i) {
+  var createOption = function createOption(option, i, props, opts) {
     if (option === SEPARATOR) {
       return React__default.createElement(components.ListSeparator, {
         key: "separator" + i
       });
     }
 
-    var label = getLabel(option);
-    return React__default.createElement(Option, {
+    if (option === NO_DIGITABLE_FOUND) {
+      return React__default.createElement(Option, {
+        key: NO_DIGITABLE_FOUND + i,
+        disabled: true,
+        label: NO_DIGITABLE_FOUND
+      });
+    }
+
+    var label = getLabel(option, {
+      option: true
+    });
+    var checked = hover.isOpen !== false ? check(option, hover.isOpen) : check(option, value.isOpen);
+
+    if (checked) {
+      selectedElementIndex.current = i;
+    }
+
+    return React__default.createElement(Option, _extends({
       key: label + i,
       option: option,
       icon: utils.callIfFunction(getIcon, option),
-      checked: hover.isOpen !== false ? option === hover.isOpen : check(option, value),
-      label: label,
+      checked: checked,
+      label: getLabelAs ? getLabelAs(option) : label,
       setValue: function setValue(v) {
-        _setValue(v);
+        if (!utils.callIfFunction(overrideSetValue, v, {
+          setValue: _setValue,
+          close: contextMenu.close
+        })) {
+          _setValue(transformOnSelect(v));
 
-        contextMenu.close();
+          contextMenu.close();
+        }
         skipFocus.set(true);
         container.current.focus();
       },
       setRef: selectedElement,
       onHover: handleHover
-    });
+    }, props));
+  };
+
+  var onClickInput = function onClickInput() {
+    if (digitableRef.current && !contextMenu.get()) {
+      digitableRef.current.select();
+    }
+
+    if (!suggestive) {
+      ignoringFilter.open();
+    }
+
+    contextMenu.open();
+  };
+
+  var onFocus = function onFocus(e) {
+    if (skipFocus.get()) {
+      skipFocus.set(false);
+    } else {
+      if (!suggestive) {
+        ignoringFilter.open();
+      }
+
+      contextMenu.open();
+    }
+  };
+
+  var onBlur = function onBlur(e) {
+    var _listElement$current;
+
+    if (!((_listElement$current = listElement.current) === null || _listElement$current === void 0 ? void 0 : _listElement$current.contains(e.relatedTarget))) {
+      if (!availableOptions.length && digitableAsOption && digitableValue.get()) {
+        _setValue(transformOnSelect(utils.callIfFunction(digitableAsOption, digitableValue.get())));
+      } else if (suggestive) {
+        _setValue(transformOnSelect(utils.callIfFunction(digitableAsOption, digitableValue.get()) || digitableValue.get()));
+      } else if (formValue !== value.isOpen) {
+        confirmValue(value.isOpen);
+      }
+
+      contextMenu.close();
+    }
   };
 
   return React__default.createElement(Field, {
@@ -2163,60 +2485,106 @@ var Combobox = styled__default(function (_ref) {
     labelClick: toggleCombobox,
     ref: fieldRef
   }, React__default.createElement(ComboboxInput, {
-    onBlur: function onBlur(e) {
-      var _listElement$current;
-
-      if (!((_listElement$current = listElement.current) === null || _listElement$current === void 0 ? void 0 : _listElement$current.contains(e.relatedTarget))) {
-        confirmValue(value);
-        contextMenu.close();
-      }
-    },
-    onFocus: function onFocus() {
-      return skipFocus.get() ? skipFocus.set(false) : contextMenu.open();
-    },
-    onClick: function onClick() {
-      return contextMenu.openWith(function (v) {
-        return _isBoolean(v) ? 2 : false;
-      });
-    },
+    onBlur: onBlur,
+    onFocus: onFocus,
+    onClick: onClickInput,
     ref: container,
-    tabIndex: tabIndex,
+    tabIndex: contextMenu.isOpen && digitable ? '-1' : tabIndex,
     onKeyDown: keyDown,
     disabled: disabled,
     withPlaceholder: withPlaceholder,
     hasErrors: hasErrors,
-    comboboxIsOpen: contextMenu.isOpen
-  }, withPlaceholder ? React__default.createElement(ComboboxPlaceholder, null, placeholder) : getLabel(value), React__default.createElement(ComboboxDropdownIcon, {
+    comboboxIsOpen: contextMenu.isOpen,
+    isFocused: digitable && !!contextMenu.isOpen,
+    suggestive: suggestive
+  }, digitable && !!contextMenu.isOpen ? React__default.createElement(TextInput, {
+    raw: true,
+    tabIndex: tabIndex,
+    autoFocus: true,
+    autoComplete: autoCompleteUID,
+    ref: digitableRef,
+    constraint: digitableConstraint,
+    onKeyDown: digitableKeyDown,
+    setValue: function setValue(v) {
+      ignoringFilter.close();
+      digitableValue.openWith(v);
+    },
+    value: digitableValue.isOpen || "",
+    placeholder: placeholder,
+    onChange: onDigitableChange
+  }) : withPlaceholder ? React__default.createElement(ComboboxPlaceholder, null, placeholder) : React__default.createElement("div", null, getBoxLabelAs ? getBoxLabelAs(value.isOpen) : getLabel(value.isOpen)), isLoading ? React__default.createElement(ComboboxLoading, {
+    absolute: true,
+    size: 20
+  }) : !suggestive && React__default.createElement(ComboboxDropdownIcon, {
     icon: "arrow-down"
-  }), !!contextMenu.isOpen && React__default.createElement(ComboboxMenuContainer, {
+  }), !!contextMenu.isOpen && (!suggestive || !digitable || allOptions.length && digitableValue.isOpen) && React__default.createElement(ComboboxMenuContainer, {
+    withWindowing: withWindowing,
     ref: listElement,
-    options: options,
+    windowingRef: windowingRef,
+    options: availableOptions,
+    digitableValue: digitableValue.get(),
+    digitableAsOption: digitableAsOption,
     footerOptions: footerOptions,
     getIcon: getIcon,
     createOption: createOption
   })));
-}).withConfig({
+})).withConfig({
   displayName: "Combobox",
-  componentId: "u2hz6i-5"
+  componentId: "u2hz6i-6"
 })(["user-select:none;"]);
 
 var _willUseIsSticky = components.willUseIsSticky(),
     _willUseIsSticky2 = _slicedToArray(_willUseIsSticky, 1),
     WithIsSticky = _willUseIsSticky2[0];
 
-var ComboboxMenuContainer = React__default.forwardRef(function (_ref2, ref) {
-  var options = _ref2.options,
-      footerOptions = _ref2.footerOptions,
-      getIcon = _ref2.getIcon,
-      createOption = _ref2.createOption;
+var Option = function Option(_ref2) {
+  var setValue = _ref2.setValue,
+      icon = _ref2.icon,
+      option = _ref2.option,
+      onHover = _ref2.onHover,
+      checked = _ref2.checked,
+      label = _ref2.label,
+      setRef = _ref2.setRef,
+      props = _objectWithoutProperties(_ref2, ["setValue", "icon", "option", "onHover", "checked", "label", "setRef"]);
+
+  return React__default.createElement(components.ListItem, _extends({
+    hover: checked,
+    tabIndex: -1,
+    onMouseOver: function onMouseOver(e) {
+      return onHover(option, e);
+    },
+    ref: checked ? setRef : undefined,
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      setValue(option);
+    }
+  }, props), React__default.createElement("a", null, icon && React__default.createElement(components.Icon, {
+    icon: icon
+  }), label));
+};
+var ITEM_HEIGHT = 37;
+var ComboboxMenuContainer = React__default.forwardRef(function (_ref3, ref) {
+  var options = _ref3.options,
+      digitableAsOption = _ref3.digitableAsOption,
+      footerOptions = _ref3.footerOptions,
+      getIcon = _ref3.getIcon,
+      createOption = _ref3.createOption,
+      withWindowing = _ref3.withWindowing,
+      digitableValue = _ref3.digitableValue,
+      windowingRef = _ref3.windowingRef;
 
   var _usePositioning = components.usePositioning(ref, {
-    fill: true
+    fill: true,
+    on: options.length
   }),
       _usePositioning2 = _slicedToArray(_usePositioning, 2),
       positionInfo = _usePositioning2[0],
       positionPlaceholder = _usePositioning2[1];
 
+  var getMenuHeight = function getMenuHeight(options) {
+    return Math.min(options.length * ITEM_HEIGHT + 9, 300 - ((footerOptions === null || footerOptions === void 0 ? void 0 : footerOptions.length) || 0) * ITEM_HEIGHT - ((footerOptions === null || footerOptions === void 0 ? void 0 : footerOptions.length) ? 7 : 0));
+  };
+
   var slot = 'Popup';
   var slotName = React.useMemo(function () {
     return components.getDialogLayersSize() === 0 ? slot : slot + '-' + (components.getDialogLayersSize() - 1);
@@ -2225,39 +2593,30 @@ var ComboboxMenuContainer = React__default.forwardRef(function (_ref2, ref) {
     name: slotName
   }, React__default.createElement(ComboboxMenu, _extends({}, positionInfo, {
     ref: ref,
+    withWindowing: withWindowing,
     withoutIcons: !getIcon
-  }), options.map(createOption), footerOptions && React__default.createElement(WithIsSticky, {
+  }), withWindowing ? React__default.createElement(reactWindow.FixedSizeList, {
+    ref: windowingRef,
+    height: getMenuHeight(options),
+    itemCount: options.length,
+    itemSize: ITEM_HEIGHT,
+    width: "100%"
+  }, function (_ref4) {
+    var index = _ref4.index,
+        style = _ref4.style;
+    return createOption(options[index], index, {
+      style: style
+    });
+  }) : options.map(createOption).filter(Boolean), footerOptions && React__default.createElement(WithIsSticky, {
     intersection: true
   }, function (sentinel, isSticky) {
     return React__default.createElement(React__default.Fragment, null, React__default.createElement(FooterOptionsContainer, {
       isSticky: isSticky,
-      className: "JS-list-footer"
+      className: "JS-list-footer",
+      hasWindoning: withWindowing
     }, footerOptions.map(createOption)), sentinel("margin-top:-3px;"));
   }))));
 });
-var Option = function Option(_ref3) {
-  var setValue = _ref3.setValue,
-      icon = _ref3.icon,
-      option = _ref3.option,
-      onHover = _ref3.onHover,
-      checked = _ref3.checked,
-      label = _ref3.label,
-      setRef = _ref3.setRef;
-  return React__default.createElement(components.ListItem, {
-    hover: checked,
-    tabIndex: -1,
-    onMouseOver: function onMouseOver(e) {
-      return onHover(option, e);
-    },
-    ref: checked ? setRef : undefined,
-    onClick: function onClick(e) {
-      e.stopPropagation();
-      setValue(option);
-    }
-  }, React__default.createElement("a", null, icon && React__default.createElement(components.Icon, {
-    icon: icon
-  }), label));
-};
 
 var ComboboxWithCustom = function ComboboxWithCustom(_ref) {
   var options = _ref.options,
@@ -2300,7 +2659,7 @@ var ComboboxWithCustom = function ComboboxWithCustom(_ref) {
     }
   };
 
-  var titleOptions = !value || options.indexOf(value) >= 0 ? options : options.concat(value);
+  var titleOptions = !value || options.indexOf(value) >= 0 ? options : [value].concat(options);
   return customValue.isOpen !== false ? React__default.createElement(TextInput, _extends({
     label: label,
     tabIndex: tabIndex,
@@ -2322,10 +2681,40 @@ var ComboboxWithCustom = function ComboboxWithCustom(_ref) {
   }, extra));
 };
 
-function _templateObject$2() {
+function _templateObject4() {
   var data = _taggedTemplateLiteral(["\n    height: 42px;\n  "]);
 
-  _templateObject$2 = function _templateObject() {
+  _templateObject4 = function _templateObject4() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject3$2() {
+  var data = _taggedTemplateLiteral(["\n    left: 1rem;\n    right: 1rem;\n  "]);
+
+  _templateObject3$2 = function _templateObject3() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject2$2() {
+  var data = _taggedTemplateLiteral(["\n      padding-right: 4rem;\n    "]);
+
+  _templateObject2$2 = function _templateObject2() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject$3() {
+  var data = _taggedTemplateLiteral(["\n    padding: 0.25rem 1rem;\n    min-height: 42px;\n  "]);
+
+  _templateObject$3 = function _templateObject() {
     return data;
   };
 
@@ -2336,21 +2725,21 @@ var isSafari = ua.indexOf('safari') >= 0 && ua.indexOf('chrome') < 0;
 var InputLoading$1 = styled__default(components.Loading).withConfig({
   displayName: "AutoComplete__InputLoading",
   componentId: "g0526o-0"
-})(["bottom:8px;right:0.6rem;left:auto;top:10px;"]);
+})(["bottom:8px;right:0.6rem;left:auto;top:50%;transform:translate(-50%);"]);
 var AutoCompleteInput = styled__default.div.withConfig({
   displayName: "AutoComplete__AutoCompleteInput",
   componentId: "g0526o-1"
-})(["width:100%;font-size:14px;border:1px solid ", ";border-radius:2px;color:", ";cursor:text;background:white;position:relative;outline:0;outline:none;min-height:3rem;line-height:34px;padding:0 0.7rem;", " ", " ", " ", ""], utils.getColor('gray210'), utils.getColor('gray60'), function (props) {
+})(["width:100%;font-size:14px;border:1px solid ", ";border-radius:6px;color:", ";cursor:text;background:white;position:relative;outline:0;outline:none;min-height:3rem;line-height:28px;padding:0.25rem 0.7rem;display:flex;align-items:center;flex-wrap:wrap;", " ", " ", " ", " ", ""], utils.getColor('gray210'), utils.getColor('gray60'), function (props) {
   return props.focused && "\n    border-color: ".concat(utils.getColor('gray180'), ";\n    box-shadow: 0px 0px 0px 2px rgba(0,0,0,0.075);\n  ");
 }, function (props) {
   return props.hasErrors && styled.css(["border-color:", " !important;"], utils.getColor('alert'));
-}, function (props) {
-  return props.withDropdown && styled.css(["padding-right:3rem;"]);
+}, utils.media.mobile(_templateObject$3()), function (props) {
+  return props.withDropdown && styled.css(["padding-right:3rem;", ""], utils.media.mobile(_templateObject2$2()));
 }, utils.customTheme('TextInput'));
 var AutoCompletePlaceholder = styled__default.span.withConfig({
   displayName: "AutoComplete__AutoCompletePlaceholder",
   componentId: "g0526o-2"
-})(["position:absolute;top:0;pointer-events:none;color:rgba(0,0,0,0.4);"]);
+})(["position:absolute;top:50%;transform:translateY(-50%);pointer-events:none;color:rgba(0,0,0,0.3);left:0.7rem;right:0.7rem;", ""], utils.media.mobile(_templateObject3$2()));
 var AutoCompleteTextboxDiv = styled__default.div.withConfig({
   displayName: "AutoComplete__AutoCompleteTextboxDiv",
   componentId: "g0526o-3"
@@ -2358,7 +2747,7 @@ var AutoCompleteTextboxDiv = styled__default.div.withConfig({
 var AddedBox = styled__default.span.withConfig({
   displayName: "AutoComplete__AddedBox",
   componentId: "g0526o-4"
-})(["background-color:rgb(230,230,230);padding:2px 2rem 4px 0.75rem;border-radius:12px;font-size:13px;position:relative;margin:0.4rem 0.7rem 0 -0.25rem;white-space:nowrap;display:inline-block;cursor:default;line-height:normal;max-width:90%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;", ""], isSafari ? "\n    vertical-align: 2px;\n    " : "\n    vertical-align: -7px;\n  ");
+})(["background-color:rgb(230,230,230);padding:5px 2rem 5px 0.75rem;border-radius:12px;font-size:13px;position:relative;margin-left:-3px;margin-right:9px;white-space:nowrap;cursor:default;line-height:normal;max-width:90%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;", ""], isSafari ? "\n    vertical-align: 2px;\n    " : "\n    vertical-align: -7px;\n  ");
 var RemoveIcon = styled__default(components.Icon).withConfig({
   displayName: "AutoComplete__RemoveIcon",
   componentId: "g0526o-5"
@@ -2376,7 +2765,7 @@ var AutoCompleteError = styled__default(Errors).withConfig({
 var DropdownIconContainer = styled__default(components.Icon).withConfig({
   displayName: "AutoComplete__DropdownIconContainer",
   componentId: "g0526o-8"
-})(["position:absolute;right:0;bottom:0;width:3rem;height:3rem;bottom:-1px;", " ", "{position:absolute;width:2rem;height:2rem;line-height:2rem;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,0.1);border-radius:50%;text-align:center;cursor:pointer;color:", ";:hover,:active{background:rgba(0,0,0,0.15);}}"], utils.media.mobile(_templateObject$2()), components.Icon, utils.getColor('gray90'));
+})(["position:absolute;right:0;bottom:0;width:3rem;height:3rem;bottom:-1px;", " ", "{position:absolute;width:2rem;height:2rem;line-height:2rem;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,0.1);border-radius:50%;text-align:center;cursor:pointer;color:", ";:hover,:active{background:rgba(0,0,0,0.15);}}"], utils.media.mobile(_templateObject4()), components.Icon, utils.getColor('gray90'));
 
 var focusBeforeLast = function focusBeforeLast(e) {
   if (e.target && e.target !== e.currentTarget) return;
@@ -2453,6 +2842,7 @@ var AutoComplete = React__default.forwardRef(function (_ref, outerRef) {
       _ref$confirmIfValueKe = _ref.confirmIfValueKeys,
       confirmIfValueKeys = _ref$confirmIfValueKe === void 0 ? ['Tab'] : _ref$confirmIfValueKe,
       placeholder = _ref.placeholder,
+      className = _ref.className,
       _ref$getListItem = _ref.getListItem,
       getListItem = _ref$getListItem === void 0 ? getLabel : _ref$getListItem,
       onAddValue = _ref.onAddValue,
@@ -2463,15 +2853,20 @@ var AutoComplete = React__default.forwardRef(function (_ref, outerRef) {
       mandatory = _ref.mandatory,
       descText = _ref.descText,
       helpText = _ref.helpText,
-      label = _ref.label;
+      label = _ref.label,
+      value = _ref.value,
+      setValue = _ref.setValue,
+      raw = _ref.raw;
   var autoCompleteBox = core.useToggle();
   var hoverIndex = core.useToggle();
   var isLoading = core.useToggle();
 
   var _useInput = useInput({
     path: path,
-    transform: transform
-  }),
+    transform: transform,
+    value: value,
+    setValue: setValue
+  }, raw),
       _useInput2 = _slicedToArray(_useInput, 3),
       formValue = _useInput2[0],
       setFormValue = _useInput2[1],
@@ -2773,6 +3168,7 @@ var AutoComplete = React__default.forwardRef(function (_ref, outerRef) {
   };
 
   var input = React__default.createElement(React__default.Fragment, null, React__default.createElement(AutoCompleteInput, {
+    className: className,
     ref: ref,
     onFocus: autoCompleteList.length ? autoCompleteBox.open : undefined,
     hasErrors: errorUtils.errors.length > 0 || hasErrors,
@@ -2852,7 +3248,7 @@ var AutoComplete = React__default.forwardRef(function (_ref, outerRef) {
     labelClick: focusInput
   }, isLoading.isOpen && React__default.createElement(InputLoading$1, {
     absolute: true,
-    size: 20
+    size: 24
   }), input);
 });
 AutoComplete.AddedBox = AddedBox;
@@ -3044,10 +3440,40 @@ var IfFormValue = function IfFormValue(_ref2) {
 
   return React__default.createElement(components.TransitionDiv, rest, doInvert(utils.callIfFunction(check, value)) ? utils.ifUndefined(utils.callIfFunction(children, value, setValue), _isObject(value) ? null : value, null) : null);
 };
-var FormMeta = function FormMeta(_ref3) {
+var SwitchOnFormValue = function SwitchOnFormValue(_ref3) {
   var path = _ref3.path,
       children = _ref3.children,
-      inputs = _ref3.inputs;
+      inputs = _ref3.inputs,
+      on = _ref3.on,
+      off = _ref3.off,
+      check = _ref3.check,
+      invert = _ref3.invert,
+      _ref3$map = _ref3.map,
+      map = _ref3$map === void 0 ? _identity : _ref3$map,
+      rest = _objectWithoutProperties(_ref3, ["path", "children", "inputs", "on", "off", "check", "invert", "map"]);
+
+  var _useFormValue5 = useFormValue(path, inputs || []),
+      _useFormValue6 = _slicedToArray(_useFormValue5, 2),
+      value = _useFormValue6[0],
+      setValue = _useFormValue6[1];
+
+  var doInvert = function doInvert(v) {
+    return invert ? !v : v;
+  };
+
+  var isOn = check || invert ? doInvert(utils.callIfFunction(check, value)) : value;
+  var mappedValue = map(value);
+  var onKey = React.useMemo(function () {
+    return utils.getUID();
+  }, [isOn, mappedValue]);
+  return React__default.createElement(components.SwitchDiv, _extends({
+    on: onKey
+  }, rest), isOn ? on && on[mappedValue] ? utils.callIfFunction(on[mappedValue], value, setValue) : utils.ifUndefined(utils.callIfFunction(on, value, setValue), _isObject(value) ? null : value, null) : utils.ifUndefined(utils.callIfFunction(off, value, setValue), _isObject(value) ? null : value, null));
+};
+var FormMeta = function FormMeta(_ref4) {
+  var path = _ref4.path,
+      children = _ref4.children,
+      inputs = _ref4.inputs;
 
   var _useFormMeta = useFormMeta(path, inputs || []),
       _useFormMeta2 = _slicedToArray(_useFormMeta, 2),
@@ -3056,6 +3482,28 @@ var FormMeta = function FormMeta(_ref3) {
 
   return utils.ifUndefined(utils.callIfFunction(children, value, setValue), value, null);
 };
+var LazyFormValues = function LazyFormValues(_ref5) {
+  var value = _ref5.value,
+      _ref5$format = _ref5.format,
+      format = _ref5$format === void 0 ? _identity : _ref5$format,
+      children = _ref5.children;
+  var currentValue = value.read();
+
+  var _useState = React.useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      loaded = _useState2[0],
+      setLoaded = _useState2[1];
+
+  var formUtils = React.useContext(FormContext);
+  React.useEffect(function () {
+    formUtils.setValues(format(currentValue), false);
+    setLoaded(utils.getUID);
+    return function () {
+      return value.refresh();
+    };
+  }, []);
+  return utils.callIfFunction(children, loaded);
+};
 
 var addRootPath = function addRootPath(errorRootPath, errors, path) {
   var rootPath = [].concat(errorRootPath || [], path);
@@ -3104,6 +3552,10 @@ var ConfirmEditableBoxes = React.forwardRef(function (_ref, ref) {
                   shared: shared,
                   standalone: standalone
                 } : shared : standalone;
+              }).catch(function () {
+                return withLoading && editableBoxes().forEach(function (_) {
+                  return _.loading().close();
+                });
               }));
 
             case 2:
@@ -3614,6 +4066,8 @@ var SharedEditableTabBox = function SharedEditableTabBox(_ref15) {
         if (!errors) {
           form.setValues(utils._s.unsetOrRemoveAt(path));
         }
+      }).catch(function () {
+        return internalBox.current.loading.close();
       });
       return fetch;
     } else {
@@ -3796,10 +4250,20 @@ var Radiobox = function Radiobox(_ref) {
   }));
 };
 
-function _templateObject$3() {
+function _templateObject2$3() {
+  var data = _taggedTemplateLiteral(["width:100%;"]);
+
+  _templateObject2$3 = function _templateObject2() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject$4() {
   var data = _taggedTemplateLiteral(["\n      padding: 7px 12px 7px 32px;\n    "]);
 
-  _templateObject$3 = function _templateObject() {
+  _templateObject$4 = function _templateObject() {
     return data;
   };
 
@@ -3824,8 +4288,8 @@ var TextLabelContainer = styled__default.div.withConfig({
 var CheckboxContent = styled__default.div.withConfig({
   displayName: "SimpleCheckbox__CheckboxContent",
   componentId: "am8pps-4"
-})(["cursor:pointer;position:relative;padding-left:2rem;", ""], function (props) {
-  return props.framed && styled.css(["border:1px solid ", ";border-radius:6px;min-height:3rem;min-width:8rem;background:white;:hover{background:rgb(245,245,245);}:active{background:rgb(235,235,235);}padding:10px 12px 10px 32px;", " ", " ", " ", " ", ""], utils.getColor('gray210'), utils.media.desktop(_templateObject$3()), function (props) {
+})(["cursor:pointer;position:relative;padding-left:2rem;transition:background 0.2s linear;", ""], function (props) {
+  return props.framed && styled.css(["border:1px solid ", ";border-radius:6px;min-height:3rem;min-width:8rem;background:white;width:100%;align-items:center;display:flex;:hover{background:rgb(245,245,245);}:active{background:rgb(235,235,235);transition:none;}padding:10px 12px 10px 32px;", " ", " ", " ", " ", ""], utils.getColor('gray210'), utils.media.desktop(_templateObject$4()), function (props) {
     return props.hasErrors && styled.css(["border-color:", " !important;"], utils.getColor('alert'));
   }, function (props) {
     return props.checked && props.highlightSelected && styled.css(["border-color:", ";background:", ";:hover{background:", ";}", "{", "{color:", ";}}"], utils.getColor('main'), function (props) {
@@ -3869,22 +4333,34 @@ var SimpleCheckbox = styled__default(function (_ref) {
       ultraHighlightSelected: ultraHighlightSelected,
       hasErrors: hasErrors,
       disabled: disabled
-    }, React__default.createElement(TextLabelContainer, null, React__default.createElement(CheckboxPseudoInput, {
+    }, React__default.createElement(_StyledDiv, null, React__default.createElement(TextLabelContainer, null, React__default.createElement(CheckboxPseudoInput, {
       focused: focused,
       tabIndex: tabIndex
     }, checked && React__default.createElement(components.Icon, {
       icon: "check"
-    })), React__default.createElement(TextLabel, null, label), helpText && React__default.createElement(HelpText, null, helpText)), descText && React__default.createElement(DescText, null, descText));
+    })), React__default.createElement(TextLabel, null, label), helpText && React__default.createElement(HelpText, null, helpText)), descText && React__default.createElement(DescText, null, descText)));
   });
 }).withConfig({
   displayName: "SimpleCheckbox",
   componentId: "am8pps-5"
-})(["cursor:pointer;position:relative;margin-bottom:1rem;display:block;", ""], utils.ifProp('disabled', styled.css(["pointer-events:none;"])));
+})(["cursor:pointer;position:relative;margin-bottom:1rem;display:flex;", ""], utils.ifProp('disabled', styled.css(["pointer-events:none;"])));
 
-function _templateObject$4() {
+var _StyledDiv = styled__default("div")(_templateObject2$3());
+
+function _templateObject2$4() {
+  var data = _taggedTemplateLiteral(["width:100%;"]);
+
+  _templateObject2$4 = function _templateObject2() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject$5() {
   var data = _taggedTemplateLiteral(["\n      padding: 7px 12px 7px 32px;\n    "]);
 
-  _templateObject$4 = function _templateObject() {
+  _templateObject$5 = function _templateObject() {
     return data;
   };
 
@@ -3897,7 +4373,7 @@ var CssCircle = styled__default.div.withConfig({
 var TextLabel$1 = styled__default.span.withConfig({
   displayName: "SimpleRadiobox__TextLabel",
   componentId: "qv83xo-1"
-})(["font-size:13px;line-height:16px;margin:2px 0;display:block;"]);
+})(["font-size:13px;line-height:16px;margin:2px 0.25rem 2px 0;display:block;"]);
 var DescText$1 = styled__default.div.withConfig({
   displayName: "SimpleRadiobox__DescText",
   componentId: "qv83xo-2"
@@ -3905,12 +4381,12 @@ var DescText$1 = styled__default.div.withConfig({
 var TextLabelContainer$1 = styled__default.div.withConfig({
   displayName: "SimpleRadiobox__TextLabelContainer",
   componentId: "qv83xo-3"
-})(["display:flex;align-items:center;position:relative;", "{margin-left:0.25rem;}"], HelpText);
+})(["display:flex;align-items:center;position:relative;flex-wrap:wrap;"]);
 var RadioboxContent = styled__default.div.withConfig({
   displayName: "SimpleRadiobox__RadioboxContent",
   componentId: "qv83xo-4"
-})(["cursor:pointer;position:relative;padding-left:2rem;", ""], function (props) {
-  return props.framed && styled.css(["border:1px solid ", ";border-radius:6px;min-height:3rem;min-width:8rem;background:white;:hover{background:rgb(245,245,245);}:active{background:rgb(235,235,235);}padding:10px 12px 10px 32px;", " ", " ", " ", " ", ""], utils.getColor('gray210'), utils.media.desktop(_templateObject$4()), function (props) {
+})(["cursor:pointer;position:relative;padding-left:2rem;transition:background 0.2s linear;", ""], function (props) {
+  return props.framed && styled.css(["border:1px solid ", ";border-radius:6px;min-height:3rem;min-width:8rem;background:white;width:100%;align-items:center;display:flex;:hover{background:rgb(245,245,245);}:active{background:rgb(235,235,235);transition:none;}padding:10px 12px 10px 32px;", " ", " ", " ", " ", ""], utils.getColor('gray210'), utils.media.desktop(_templateObject$5()), function (props) {
     return props.hasErrors && styled.css(["border-color:", " !important;"], utils.getColor('alert'));
   }, function (props) {
     return props.checked && props.highlightSelected && styled.css(["border-color:", ";background:", ";:hover{background:", ";}", "{:before{background-color:", ";}}"], utils.getColor('main'), function (props) {
@@ -3941,16 +4417,18 @@ var SimpleRadiobox = styled__default(function (props) {
       ultraHighlightSelected: props.ultraHighlightSelected,
       hasErrors: hasErrors,
       disabled: disabled
-    }, React__default.createElement(TextLabelContainer$1, null, React__default.createElement(CssCircle, {
+    }, React__default.createElement(_StyledDiv$1, null, React__default.createElement(TextLabelContainer$1, null, React__default.createElement(CssCircle, {
       checked: checked,
       focused: focused,
       tabIndex: tabIndex
-    }), React__default.createElement(TextLabel$1, null, props.label), props.helpText && React__default.createElement(HelpText, null, props.helpText)), props.descText && React__default.createElement(DescText$1, null, props.descText));
+    }), React__default.createElement(TextLabel$1, null, props.label), props.helpText && React__default.createElement(HelpText, null, " ", props.helpText)), props.descText && React__default.createElement(DescText$1, null, props.descText)));
   });
 }).withConfig({
   displayName: "SimpleRadiobox",
   componentId: "qv83xo-5"
-})(["cursor:pointer;position:relative;margin-bottom:1rem;display:block;", ""], utils.ifProp('disabled', styled.css(["pointer-events:none;"])));
+})(["cursor:pointer;position:relative;margin-bottom:1rem;display:flex;", ""], utils.ifProp('disabled', styled.css(["pointer-events:none;"])));
+
+var _StyledDiv$1 = styled__default("div")(_templateObject2$4());
 
 var InputboxGroup = styled__default(function (_ref) {
   var path = _ref.path,
@@ -3993,7 +4471,7 @@ var InputboxGroup = styled__default(function (_ref) {
 }, function (props) {
   return props.unevenlyWide && "\n    width: 100%;\n    display: flex;\n    label {\n      flex-grow: 1;\n    }\n  ";
 }, function (props) {
-  return props.horizontal ? "\n    @supports (flex-wrap: wrap) {\n      display: flex;\n      flex-wrap: wrap;\n    }\n    min-height: 3rem;\n    align-items: center;\n    ".concat(SimpleRadiobox, ", ").concat(SimpleCheckbox, " {\n      margin-right: 1.5rem;\n      margin-bottom: 0.5rem;\n      display: inline-block;\n    }\n  ") : "\n    ".concat(SimpleRadiobox, ", ").concat(SimpleCheckbox, " {\n      margin-bottom: 0.5rem;\n      :last-child {\n        margin-bottom: 1rem;\n      }\n    }\n  ");
+  return props.horizontal ? "\n    @supports (flex-wrap: wrap) {\n      display: flex;\n      flex-wrap: wrap;\n    }\n    min-height: 3rem;\n    ".concat(SimpleRadiobox, ", ").concat(SimpleCheckbox, " {\n      margin-right: 1.5rem;\n      margin-bottom: 0.5rem;\n    }\n  ") : "\n    ".concat(SimpleRadiobox, ", ").concat(SimpleCheckbox, " {\n      margin-bottom: 0.5rem;\n      :last-child {\n        margin-bottom: 1.5rem;\n      }\n    }\n  ");
 }, function (props) {
   return props.framedBoxes && styled.css(["", ""], function (props) {
     return props.horizontal && "\n      margin: -4px;\n      width: calc(100% + 8px);\n      ".concat(SimpleRadiobox, ", ").concat(SimpleCheckbox, " {\n          margin: 4px;\n      }\n    ");
@@ -4002,20 +4480,20 @@ var InputboxGroup = styled__default(function (_ref) {
 var RadioboxGroup = InputboxGroup;
 var CheckboxGroup = InputboxGroup;
 
-function _templateObject2$2() {
+function _templateObject2$5() {
   var data = _taggedTemplateLiteral(["\n    line-height: 42px;\n    width: 2.25rem;\n  "]);
 
-  _templateObject2$2 = function _templateObject2() {
+  _templateObject2$5 = function _templateObject2() {
     return data;
   };
 
   return data;
 }
 
-function _templateObject$5() {
+function _templateObject$6() {
   var data = _taggedTemplateLiteral(["\n      width: 2.5rem;\n    "]);
 
-  _templateObject$5 = function _templateObject() {
+  _templateObject$6 = function _templateObject() {
     return data;
   };
 
@@ -4028,7 +4506,7 @@ var LEVELS = [DAY, MONTH, YEAR];
 var DatePickerContainer = styled__default.div.withConfig({
   displayName: "DatePicker__DatePickerContainer",
   componentId: "sc-1wo8j4d-0"
-})(["width:20rem;position:absolute;z-index:10;background-color:white;border-radius:5px;border:1px solid ", ";user-select:none;box-shadow:0 0 4px 0 rgba(0,0,0,0.2);font-size:13px;text-align:center;animation:0.2s datePickerFadeInDown ease-out;display:none;@supports (flex-wrap:wrap){display:block;}input{padding-right:2.25rem;", "}@keyframes datePickerFadeInDown{from{opacity:0;transform:translateY(-10px);pointer-events:none;}to{opacity:1;transform:none;pointer-events:none;}}"], utils.getColor('gray210'), utils.media.mobile(_templateObject$5()));
+})(["width:20rem;position:absolute;z-index:10;background-color:white;border-radius:5px;border:1px solid ", ";user-select:none;box-shadow:0 0 4px 0 rgba(0,0,0,0.2);font-size:13px;text-align:center;animation:0.2s datePickerFadeInDown ease-out;display:none;@supports (flex-wrap:wrap){display:block;}input{padding-right:2.25rem;", "}@keyframes datePickerFadeInDown{from{opacity:0;transform:translateY(-10px);pointer-events:none;}to{opacity:1;transform:none;pointer-events:none;}}"], utils.getColor('gray210'), utils.media.mobile(_templateObject$6()));
 var CalendarHeader = styled__default.div.withConfig({
   displayName: "DatePicker__CalendarHeader",
   componentId: "sc-1wo8j4d-1"
@@ -4082,7 +4560,7 @@ var DatePickerInputIcon = styled__default(components.Icon).withConfig({
   componentId: "sc-1wo8j4d-11"
 })(["position:absolute;outline:none;bottom:0;font-size:21px;line-height:3rem;right:0;width:2rem;cursor:pointer;color:", ";:hover{color:", ";}display:none;@supports (flex-wrap:wrap){display:block;}", " ", ""], utils.getColor('gray150'), utils.getColor('main'), function (props) {
   return props.disabled && 'pointer-events: none;';
-}, utils.media.mobile(_templateObject2$2()));
+}, utils.media.mobile(_templateObject2$5()));
 var ClearButton = styled__default(components.Icon).withConfig({
   displayName: "DatePicker__ClearButton",
   componentId: "sc-1wo8j4d-12"
@@ -4701,33 +5179,31 @@ function getClosestNextLeapYear(year) {
   return y;
 }
 
-function _templateObject$6() {
+function _templateObject$7() {
   var data = _taggedTemplateLiteral(["\n      padding 1rem;\n    "]);
 
-  _templateObject$6 = function _templateObject() {
+  _templateObject$7 = function _templateObject() {
     return data;
   };
 
   return data;
 }
 
-var shouldPreventExpand = function shouldPreventExpand(fn) {
-  return function (e) {
-    return e.target.closest('body,[data-expand="false"],label,input,textarea,button').matches('body,[data-expand="true"]') && fn(e);
-  };
+var shouldPreventExpand = function shouldPreventExpand(e, fn) {
+  return !e.target.closest('body,[data-expand="false"],label,input,textarea,button').matches('body,[data-expand="true"]');
 };
 
 var ExpandableBoxStyled = styled__default.div.withConfig({
   displayName: "ExpandableBox__ExpandableBoxStyled",
   componentId: "sc-1nsk1wq-0"
-})(["padding:1rem;border-radius:6px;background:", ";font-size:14px;outline:none;transition:background 0.25s linear;position:relative;", " ", " & ~ &{margin-top:0.75rem;}", " &{margin-top:0.75rem;}"], utils.getColor('gray240'), function (props) {
+})(["padding:1rem;border-radius:6px;background:", ";font-size:14px;outline:none;transition:background 0.2s linear;position:relative;", " ", " & ~ &{margin-top:0.75rem;}", " &{margin-top:0.75rem;}"], utils.getColor('lightBluishGray'), function (props) {
   return props.small && "\n    padding: 0.875rem 1rem;\n    min-height: 3rem;\n  ";
 }, function (props) {
-  return props.collapsed ? styled.css(["cursor:pointer;padding-right:3.25rem;:hover{background:", ";}:active{background:", ";}"], function (props) {
-    return polished.darken(0.05, utils.getColor("gray240")(props));
+  return props.collapsed ? styled.css(["cursor:pointer;padding-right:3.25rem;:hover{background:", ";}:active{background:", ";transition:none;}"], function (props) {
+    return polished.darken(0.035, utils.getColor('lightBluishGray')(props));
   }, function (props) {
-    return polished.darken(0.08, utils.getColor("gray240")(props));
-  }) : styled.css(["padding 1.5rem;", " ", ""], utils.media.max(340)(_templateObject$6()), function (props) {
+    return polished.darken(0.05, utils.getColor('lightBluishGray')(props));
+  }) : styled.css(["padding 1.5rem;", " ", ""], utils.media.max(340)(_templateObject$7()), function (props) {
     return props.fixMarginBottom && "\n      padding-bottom: 0.5rem !important;\n    ";
   });
 }, components.SwitchDiv);
@@ -4762,11 +5238,21 @@ var checkErrors = function checkErrors() {
 };
 var timing = utils.animationTiming('0.25s ease-out');
 var switchAnimation = utils.oneWayAnimation('opacity: 1;transform:translateY(0);', 'opacity: 0;', 'opacity: 0; transform:translateY(30px);');
-var ExpandableBox = function ExpandableBox(_ref) {
-  var children = _ref.children,
+var hasAnyExpanded = 0;
+var ExpandableBox = styled__default(function (_ref) {
+  var className = _ref.className,
+      children = _ref.children,
+      overflowEffect = _ref.overflowEffect,
+      recycleTab = _ref.recycleTab,
+      escCancels = _ref.escCancels,
+      enterConfirms = _ref.enterConfirms,
+      _ref$withIcon = _ref.withIcon,
+      withIcon = _ref$withIcon === void 0 ? true : _ref$withIcon,
       info = _ref.info,
       isOpen = _ref.isOpen,
       openWhen = _ref.openWhen,
+      _ref$canExpand = _ref.canExpand,
+      canExpand = _ref$canExpand === void 0 ? _identity : _ref$canExpand,
       path = _ref.path,
       _ref$retargetFilter = _ref.retargetFilter,
       retargetFilter = _ref$retargetFilter === void 0 ? function (el) {
@@ -4796,6 +5282,10 @@ var ExpandableBox = function ExpandableBox(_ref) {
       _setErrors = _useTransientErrorHel2[0],
       clearErrors = _useTransientErrorHel2[1];
 
+  var previousValue = core.useRefState();
+  var isAutoOpened = core.useToggle(isOpen);
+  var containerRef = React.useRef();
+
   var setErrors = function setErrors() {
     for (var _len2 = arguments.length, errors = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
       errors[_key2] = arguments[_key2];
@@ -4823,6 +5313,12 @@ var ExpandableBox = function ExpandableBox(_ref) {
       return result;
     }
   });
+
+  var _useRecycleFocus = core.useRecycleFocus(containerRef, recycleTab && expand.isOpen, recycleTab),
+      _useRecycleFocus2 = _slicedToArray(_useRecycleFocus, 2),
+      firstFocus = _useRecycleFocus2[0],
+      lastFocus = _useRecycleFocus2[1];
+
   var openWhenResult = utils.callIfFunction(openWhen);
   React.useEffect(function () {
     if (openWhenResult) {
@@ -4836,51 +5332,78 @@ var ExpandableBox = function ExpandableBox(_ref) {
       }
     };
   }, [expand.isOpen]);
+  React.useEffect(function () {
+    if (expand.get() && !isAutoOpened.get()) {
+      previousValue.set(getValue());
+      hasAnyExpanded += 1;
+      return function () {
+        hasAnyExpanded -= 1;
+      };
+    }
+  }, [expand.isOpen, isAutoOpened.isOpen]);
+
+  var cancel = function cancel() {
+    setValue(previousValue.get());
+    expand.close();
+  };
+
   var utils$1 = core.useLazyConstant(function () {
     return {
       close: utils.constrainEvent(expand.close),
-      setValue: setValue
+      setValue: setValue,
+      cancel: cancel
     };
   });
 
   var onBlur = function onBlur(e) {
     if (e.currentTarget !== e.relatedTarget && (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget))) {
-      if (utils.callIfFunction(retargetFilter, e.relatedTarget)) {
+      var retarget = utils.callIfFunction(retargetFilter, e.relatedTarget);
+
+      if (retarget === true) {
         e.target.focus();
-      } else {
+      } else if (retarget === false) {
         expand.close();
       }
     }
   };
 
+  var checkEscEnter = function checkEscEnter(e) {
+    if (e.key === 'Enter' && enterConfirms) {
+      e.stopPropagation();
+      e.preventDefault();
+      expand.close();
+    } else if (e.key === 'Escape' && escCancels) {
+      e.stopPropagation();
+      e.preventDefault();
+      cancel();
+    }
+  };
+
+  var onClick = function onClick(e) {
+    return !shouldPreventExpand(e) && utils.callIfFunction(canExpand, e) && !hasAnyExpanded && expand.open();
+  };
+
   return React__default.createElement(ExpandableBoxStyled, {
+    className: className + (expand.isOpen && (enterConfirms || escCancels) ? " JS-dialog-skip-evts" : ""),
+    ref: containerRef,
     tabIndex: -1,
     onBlur: onBlur,
+    onFocus: isAutoOpened.close,
     collapsed: !expand.isOpen,
     fixMarginBottom: fixMarginBottom,
-    onClick: shouldPreventExpand(expand.open)
-  }, React__default.createElement(FlipDiv$1, {
+    onClick: onClick,
+    onKeyDown: checkEscEnter
+  }, expand.isOpen && firstFocus, React__default.createElement(FlipDiv$1, {
     key: expand.isOpen,
+    overflowEffect: overflowEffect,
     useAnimation: flipAnimation,
     animation: animation,
     animationTiming: animationTiming
-  }, expand.isOpen ? utils.callIfFunction(children, value, utils$1) : React__default.createElement(React__default.Fragment, null, utils.callIfFunction(info, value, utils$1), React__default.createElement(EditIcon, null))));
-};
-
-var overflowEffect = function overflowEffect(element) {
-  var _element$offsetParent;
-
-  if (!(element === null || element === void 0 ? void 0 : (_element$offsetParent = element.offsetParent) === null || _element$offsetParent === void 0 ? void 0 : _element$offsetParent.parentElement)) {
-    return;
-  }
-
-  var parentDom = element.offsetParent.parentElement;
-  var previousOverflow = parentDom.style.overflow;
-  parentDom.style.overflow = 'hidden';
-  return function () {
-    return parentDom.style.overflow = previousOverflow;
-  };
-};
+  }, expand.isOpen ? utils.callIfFunction(children, value, utils$1) : React__default.createElement(React__default.Fragment, null, utils.callIfFunction(info, value, utils$1), withIcon && React__default.createElement(EditIcon, null))), expand.isOpen && lastFocus);
+}).withConfig({
+  displayName: "ExpandableBox",
+  componentId: "sc-1nsk1wq-2"
+})([""]);
 
 var PseudoExpandableBox = function PseudoExpandableBox(_ref2) {
   var children = _ref2.children,
@@ -4894,14 +5417,15 @@ var PseudoExpandableBox = function PseudoExpandableBox(_ref2) {
 };
 var FlipDivStyle = styled__default.div.withConfig({
   displayName: "ExpandableBox__FlipDivStyle",
-  componentId: "sc-1nsk1wq-2"
+  componentId: "sc-1nsk1wq-3"
 })(["position:relative;"]);
 
 var FlipDiv$1 = function FlipDiv(_ref3) {
   var useAnimation = _ref3.useAnimation,
       animation = _ref3.animation,
       animationTiming = _ref3.animationTiming,
-      props = _objectWithoutProperties(_ref3, ["useAnimation", "animation", "animationTiming"]);
+      overflowEffect = _ref3.overflowEffect,
+      props = _objectWithoutProperties(_ref3, ["useAnimation", "animation", "animationTiming", "overflowEffect"]);
 
   var ref = React.useRef();
   useAnimation(ref, null, null, {
@@ -4914,10 +5438,10 @@ var FlipDiv$1 = function FlipDiv(_ref3) {
   }));
 };
 
-function _templateObject$7() {
+function _templateObject$8() {
   var data = _taggedTemplateLiteral(["\n    padding-right: 2.25rem;\n    background: rgba(0,0,0,0.075);\n  "]);
 
-  _templateObject$7 = function _templateObject() {
+  _templateObject$8 = function _templateObject() {
     return data;
   };
 
@@ -5009,7 +5533,7 @@ var RichTextContainer = styled__default.div.withConfig({
 }, function (props) {
   return props.focus && "\n    border-color: ".concat(utils.getColor('gray180'), ";\n    box-shadow: 0px 0px 0px 2px rgba(0,0,0,0.1);\n  ");
 }, function (props) {
-  return props.locked && css(_templateObject$7());
+  return props.locked && css(_templateObject$8());
 });
 var RichTextInput = styled__default.div.withConfig({
   displayName: "RichText__RichTextInput",
@@ -5875,10 +6399,10 @@ var ToggleContainer = styled__default.div.withConfig({
 var Toggle = styled__default.div.withConfig({
   displayName: "ToggleCheckbox__Toggle",
   componentId: "sc-11ob8ah-1"
-})(["cursor:pointer;flex-shrink:0;margin-left:1rem;float:right;width:2.25rem;height:1rem;border-radius:1rem;background:", ";display:inline-block;position:relative;transition:0.25s ease;:after{content:'';transition:0.25s ease;width:1.25rem;height:1.25rem;border-radius:50%;display:block;position:absolute;top:50%;transform:translateY(-50%);", "}", ""], function (props) {
-  return props.checked ? 'rgba(0, 132, 214, 0.3)' : 'rgba(0,0,0,0.15)';
+})(["cursor:pointer;flex-shrink:0;margin-left:1rem;float:right;transition:0.25s ease;width:2.75rem;height:18px;border-radius:18px;background:", ";display:inline-block;position:relative;font-weight:600;:after{content:'';transition:0.25s ease;border-radius:50%;display:block;position:absolute;top:50%;transform:translateY(-50%);width:14px;height:14px;background:white;", "}", ""], function (props) {
+  return props.checked ? utils.getColor('main') : 'rgba(0,0,0,0.14)';
 }, function (props) {
-  return props.checked ? styled.css(["left:100%;transform:translate(-100%,-50%);background:", ";"], utils.getColor('main')) : styled.css(["left:0;background:", ";"], utils.getColor('gray150'));
+  return props.checked ? styled.css(["margin-left:-2px;left:100%;transform:translate(-100%,-50%);"]) : styled.css(["margin-left:2px;left:0;"]);
 }, utils.customTheme('ToggleCheckbox'));
 var ToggleLabel = styled__default.div.withConfig({
   displayName: "ToggleCheckbox__ToggleLabel",
@@ -5888,6 +6412,20 @@ var DescText$2 = styled__default.div.withConfig({
   displayName: "ToggleCheckbox__DescText",
   componentId: "sc-11ob8ah-3"
 })(["font-weight:400;color:rgba(0,0,0,0.4);font-size:12px;margin-top:0.25rem;"]);
+var ToggleCheckboxStyled = styled__default(Checkbox).withConfig({
+  displayName: "ToggleCheckbox__ToggleCheckboxStyled",
+  componentId: "sc-11ob8ah-4"
+})(["position:relative;border-radius:6px;padding:1rem;min-height:42px;font-weight:500;margin-bottom:1.5rem;cursor:pointer;display:flex;align-items:center;justify-content:space-between;transition:background 0.2s linear;& ~ &{margin-top:-1rem;}", " ", " ", " ", ""], function (props) {
+  return props.gray ? "\n    background-color: rgba(0,0,0,0.06);\n    :hover {\n      background-color: rgba(0,0,0,0.08);\n    }\n    :active {\n      background-color: rgba(0,0,0,0.1);\n      transition: none;\n    }\n  " : styled.css(["background-color:", ";:hover{background:", ";}:active{background:", ";transition:none;}"], utils.getColor('lightBluishGray'), function (props) {
+    return polished.darken(0.035, utils.getColor('lightBluishGray')(props));
+  }, function (props) {
+    return polished.darken(0.05, utils.getColor('lightBluishGray')(props));
+  });
+}, function (props) {
+  return !props.noFocus && styled.css([":focus-within{background-color:rgba(0,0,0,0.09);:after{content:'';pointer-events:none;position:absolute;top:-3px;right:-3px;left:-3px;bottom:-3px;border-radius:9px;border:2px solid rgba(0,0,0,0.15);}}"]);
+}, function (props) {
+  return props.disabled && "\n    opacity: 0.8;\n    pointer-events:none;\n  ";
+}, utils.customTheme('ToggleCheckboxBox'));
 var ToggleCheckbox = styled__default(function (_ref) {
   var path = _ref.path,
       disabled = _ref.disabled,
@@ -5895,14 +6433,16 @@ var ToggleCheckbox = styled__default(function (_ref) {
       descText = _ref.descText,
       helpText = _ref.helpText,
       tabIndex = _ref.tabIndex,
+      noFocus = _ref.noFocus,
       className = _ref.className,
-      rest = _objectWithoutProperties(_ref, ["path", "disabled", "label", "descText", "helpText", "tabIndex", "className"]);
+      rest = _objectWithoutProperties(_ref, ["path", "disabled", "label", "descText", "helpText", "tabIndex", "noFocus", "className"]);
 
-  return React__default.createElement(Checkbox, _extends({
-    className: className,
+  return React__default.createElement(ToggleCheckboxStyled, _extends({
     path: path,
     tabIndex: tabIndex,
-    disabled: disabled
+    disabled: disabled,
+    noFocus: noFocus,
+    className: className
   }, rest), function (_ref2) {
     var disabled = _ref2.disabled,
         checked = _ref2.checked,
@@ -5914,17 +6454,13 @@ var ToggleCheckbox = styled__default(function (_ref) {
   });
 }).withConfig({
   displayName: "ToggleCheckbox",
-  componentId: "sc-11ob8ah-4"
-})(["position:relative;background-color:rgba(0,0,0,0.06);border-radius:6px;padding:0.75rem 1rem;min-height:36px;font-weight:600;font-weight:500;margin-bottom:1rem;cursor:pointer;display:flex;align-items:center;justify-content:space-between;:hover{background-color:rgba(0,0,0,0.08);}:active{background-color:rgba(0,0,0,0.1);}& ~ &{margin-top:-0.5rem;}", " ", " ", ""], function (props) {
-  return !props.noFocus && styled.css([":focus-within{background-color:rgba(0,0,0,0.09);:after{content:'';pointer-events:none;position:absolute;top:-3px;right:-3px;left:-3px;bottom:-3px;border-radius:9px;border:2px solid rgba(0,0,0,0.15);}}"]);
-}, function (props) {
-  return props.disabled && "\n    opacity: 0.8;\n    pointer-events:none;\n  ";
-}, utils.customTheme('ToggleCheckboxBox'));
+  componentId: "sc-11ob8ah-5"
+})([""]);
 
-function _templateObject$8() {
+function _templateObject$9() {
   var data = _taggedTemplateLiteral(["\n    min-width: 0;\n    ", "\n  "]);
 
-  _templateObject$8 = function _templateObject() {
+  _templateObject$9 = function _templateObject() {
     return data;
   };
 
@@ -5943,7 +6479,7 @@ var TabButton = styled__default(components.Button).withConfig({
   return props.isFirst !== undefined && !props.isFirst && "\n    border-bottom-left-radius: 0;\n    border-top-left-radius: 0;\n    :focus:after{\n      border-bottom-left-radius: 2px;\n      border-top-left-radius: 2px;\n    }\n  ";
 }, function (props) {
   return props.isLast !== undefined && !props.isLast && "\n    border-bottom-right-radius: 0;\n    border-top-right-radius: 0;\n    :focus:after{\n      border-bottom-right-radius: 2px;\n      border-top-right-radius: 2px;\n      z-index: 2;\n    }\n  ";
-}, utils.media.mobile(_templateObject$8(), function (props) {
+}, utils.media.mobile(_templateObject$9(), function (props) {
   return props.icon ? "\n      padding-left: 1.25rem;\n      padding-right: 1rem;\n    " : "\n      padding-left: 0.25rem;\n      padding-right: 0.25rem;\n    ";
 }), utils.customTheme('TabButton'));
 var InnerButton = styled__default.a.withConfig({
@@ -5980,6 +6516,40 @@ var TabRadiobox = styled__default(function (_ref) {
   componentId: "sc-1vu3bcn-2"
 })(["display:inline-block;"]);
 
+var Tab = styled__default.div.withConfig({
+  displayName: "CleanTabRadiobox__Tab",
+  componentId: "uh7jfp-0"
+})(["width:100%;font-size:16px;color:", ";font-weight:500;margin-left:0;padding:12px 2.5rem;flex-grow:1;height:100%;border-bottom:1px solid ", ";position:relative;", " ", ""], utils.getColor("gray120"), utils.getColor("gray210"), function (props) {
+  return props.checked ? styled.css(["color:", ";:after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:3px;background:", ";border-radius:10px;}"], utils.getColor("main"), utils.getColor("main")) : styled.css(["cursor:pointer;:hover{color:", ";}"], utils.getColor("gray90"));
+}, utils.customTheme('CleanTabButton'));
+var InnerButton$1 = styled__default.a.withConfig({
+  displayName: "CleanTabRadiobox__InnerButton",
+  componentId: "uh7jfp-1"
+})([""]);
+var CleanTabRadiobox = styled__default(function (_ref) {
+  var label = _ref.label,
+      white = _ref.white,
+      icon = _ref.icon,
+      props = _objectWithoutProperties(_ref, ["label", "white", "icon"]);
+
+  return React__default.createElement(Radiobox, props, function (_ref2) {
+    var disabled = _ref2.disabled,
+        checked = _ref2.checked,
+        hasErrors = _ref2.hasErrors,
+        focused = _ref2.focused;
+    return React__default.createElement(Tab, {
+      innerAs: InnerButton$1,
+      tabIndex: -1,
+      focused: focused,
+      checked: checked,
+      disabled: disabled
+    }, label);
+  });
+}).withConfig({
+  displayName: "CleanTabRadiobox",
+  componentId: "uh7jfp-2"
+})(["display:inline-block;"]);
+
 var error = 'Error';
 var messages = {
   required: error,
@@ -6018,6 +6588,14 @@ var confirmEmails = function confirmEmails(emailKey) {
     return (props[emailKey] || confirm) && props[emailKey] !== confirm && messages.confirmEmails;
   };
 };
+var confirm = function confirm(sourceKey, messageKey) {
+  var isEqual = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : function (a, b) {
+    return a === b;
+  };
+  return function (confirm, k, props) {
+    return (props[sourceKey] || confirm) && !isEqual(props[sourceKey], confirm) && (messages[messageKey] || messageKey);
+  };
+};
 var emailRegex = /^(([^<>()[\].,;:\s@"]+(\.[^<>()[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\].,;:\s@"]{2,})$/i;
 var emailValidation = function emailValidation(s, k) {
   return !emailRegex.test(s) && messages.emailValidation;
@@ -6053,9 +6631,85 @@ var buildValidation = function buildValidation(validations) {
     }), _fromPairs)(validations), utils.callIfFunction(custom, props)));
   };
 };
+var buildAsyncValidation = function buildAsyncValidation(validations) {
+  var custom = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] :
+  /*#__PURE__*/
+  _asyncToGenerator(
+  /*#__PURE__*/
+  _regeneratorRuntime.mark(function _callee() {
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee, this);
+  }));
+  return (
+    /*#__PURE__*/
+    function () {
+      var _ref6 = _asyncToGenerator(
+      /*#__PURE__*/
+      _regeneratorRuntime.mark(function _callee2(props) {
+        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                _context2.t0 = onEmpty;
+                _context2.t1 = _objectSpread;
+                _context2.t2 = {};
+                _context2.next = 5;
+                return _flow(_entries, _map(function (_ref7) {
+                  var _ref8 = _slicedToArray(_ref7, 2),
+                      k = _ref8[0],
+                      v = _ref8[1];
+
+                  return Promise.all([].concat(v).map(function (fn) {
+                    return fn(_get(k, props), k, props);
+                  })).then(function (v) {
+                    return [k, v.filter(Boolean)];
+                  });
+                }), function (promiseArray) {
+                  return Promise.all(promiseArray).then(function (v) {
+                    return _flow(_filter(function (_ref9) {
+                      var _ref10 = _slicedToArray(_ref9, 2),
+                          k = _ref10[0],
+                          v = _ref10[1];
+
+                      return v.length;
+                    }), _fromPairs)(v);
+                  });
+                })(validations);
+
+              case 5:
+                _context2.t3 = _context2.sent;
+                _context2.next = 8;
+                return utils.callIfFunction(custom, props);
+
+              case 8:
+                _context2.t4 = _context2.sent;
+                _context2.t5 = (0, _context2.t1)(_context2.t2, _context2.t3, _context2.t4);
+                return _context2.abrupt("return", (0, _context2.t0)(false, _context2.t5));
+
+              case 11:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2, this);
+      }));
+
+      return function (_x) {
+        return _ref6.apply(this, arguments);
+      };
+    }()
+  );
+};
 var responseFailure = function responseFailure(fn) {
-  return function (v, response, _ref5) {
-    var setErrors = _ref5.setErrors;
+  return function (v, response, _ref11) {
+    var setErrors = _ref11.setErrors;
     var errorSetter = setErrors;
     var r = [].concat(response, v);
     console.log(r);
@@ -6077,9 +6731,11 @@ var validation = {
   minLength: minLength,
   confirmPasswords: confirmPasswords,
   confirmEmails: confirmEmails,
+  confirm: confirm,
   emailValidation: emailValidation,
   optional: optional,
   buildValidation: buildValidation,
+  buildAsyncValidation: buildAsyncValidation,
   responseFailure: responseFailure
 };
 
@@ -6088,6 +6744,7 @@ exports.AutoCompleteTextbox = AutoCompleteTextbox;
 exports.BellowFieldDescription = BellowFieldDescription;
 exports.Checkbox = Checkbox;
 exports.CheckboxGroup = CheckboxGroup;
+exports.CleanTabRadiobox = CleanTabRadiobox;
 exports.Combobox = Combobox;
 exports.ComboboxInput = ComboboxInput;
 exports.ComboboxMenu = ComboboxMenu;
@@ -6103,6 +6760,10 @@ exports.Errors = Errors;
 exports.ErrorsContext = ErrorsContext;
 exports.ExpandableBox = ExpandableBox;
 exports.Field = Field;
+exports.FieldBox = FieldBox;
+exports.FieldBoxAction = FieldBoxAction;
+exports.FieldBoxHelpText = FieldBoxHelpText;
+exports.FieldBoxIcon = FieldBoxIcon;
 exports.FieldDescription = FieldDescription;
 exports.FileInput = FileInput;
 exports.FloatLabelTextInput = FloatLabelTextInput;
@@ -6117,6 +6778,8 @@ exports.IconRadioBoxIconContainer = IconRadioBoxIconContainer;
 exports.IconRadioBoxText = IconRadioBoxText;
 exports.IfFormValue = IfFormValue;
 exports.InputboxGroup = InputboxGroup;
+exports.LazyFormValues = LazyFormValues;
+exports.NO_DIGITABLE_FOUND = NO_DIGITABLE_FOUND;
 exports.Option = Option;
 exports.PathContext = PathContext;
 exports.PseudoExpandableBox = PseudoExpandableBox;
@@ -6128,6 +6791,8 @@ exports.RichTextInput = RichTextInput;
 exports.SEPARATOR = SEPARATOR;
 exports.SimpleCheckbox = SimpleCheckbox;
 exports.SimpleRadiobox = SimpleRadiobox;
+exports.SwitchOnFormValue = SwitchOnFormValue;
+exports.Tab = Tab;
 exports.TabButton = TabButton;
 exports.TabRadiobox = TabRadiobox;
 exports.TextInput = TextInput;