@startlibs/form 1.0.0-alpha-9s → 1.0.0-alpha-9v

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/lib/index.js +758 -284
  2. package/package.json +3 -2
  3. package/rollup.config.js +1 -0
  4. package/src/index.js +24 -0
package/lib/index.js CHANGED
@@ -27,25 +27,30 @@ var polished = require('polished');
27
27
  var reselect = require('reselect');
28
28
  var _toConsumableArray = _interopDefault(require('@babel/runtime/helpers/toConsumableArray'));
29
29
  var _without = _interopDefault(require('lodash/fp/without'));
30
- var _classCallCheck = _interopDefault(require('@babel/runtime/helpers/classCallCheck'));
31
- var _createClass = _interopDefault(require('@babel/runtime/helpers/createClass'));
32
- var _possibleConstructorReturn = _interopDefault(require('@babel/runtime/helpers/possibleConstructorReturn'));
33
- var _getPrototypeOf = _interopDefault(require('@babel/runtime/helpers/getPrototypeOf'));
34
- var _inherits = _interopDefault(require('@babel/runtime/helpers/inherits'));
35
30
  var form = require('@startlibs/form');
36
31
  var _taggedTemplateLiteral = _interopDefault(require('@babel/runtime/helpers/taggedTemplateLiteral'));
37
32
  var _isRegExp = _interopDefault(require('lodash/fp/isRegExp'));
33
+ var _difference = _interopDefault(require('lodash/fp/difference'));
34
+ var _union = _interopDefault(require('lodash/fp/union'));
38
35
  var _flow = _interopDefault(require('lodash/fp/flow'));
36
+ var _isBoolean = _interopDefault(require('lodash/fp/isBoolean'));
39
37
  var _isString = _interopDefault(require('lodash/fp/isString'));
38
+ var _classCallCheck = _interopDefault(require('@babel/runtime/helpers/classCallCheck'));
39
+ var _createClass = _interopDefault(require('@babel/runtime/helpers/createClass'));
40
+ var _possibleConstructorReturn = _interopDefault(require('@babel/runtime/helpers/possibleConstructorReturn'));
41
+ var _getPrototypeOf = _interopDefault(require('@babel/runtime/helpers/getPrototypeOf'));
42
+ var _inherits = _interopDefault(require('@babel/runtime/helpers/inherits'));
40
43
  var _filter = _interopDefault(require('lodash/fp/filter'));
41
44
  var _map = _interopDefault(require('lodash/fp/map'));
42
45
  var _stubFalse = _interopDefault(require('lodash/fp/stubFalse'));
43
46
  var _isObject = _interopDefault(require('lodash/fp/isObject'));
47
+ var _isFinite = _interopDefault(require('lodash/fp/isFinite'));
44
48
  var _zipObject = _interopDefault(require('lodash/fp/zipObject'));
45
49
  var _flatten = _interopDefault(require('lodash/fp/flatten'));
46
50
  var _fromPairs = _interopDefault(require('lodash/fp/fromPairs'));
47
51
  var _pick = _interopDefault(require('lodash/fp/pick'));
48
52
  var _toPairs = _interopDefault(require('lodash/fp/toPairs'));
53
+ var _negate = _interopDefault(require('lodash/fp/negate'));
49
54
  var _get = _interopDefault(require('lodash/fp/get'));
50
55
  var _entries = _interopDefault(require('lodash/fp/entries'));
51
56
 
@@ -102,7 +107,7 @@ var useProvideErrors = function useProvideErrors() {
102
107
  v = _ref6[0],
103
108
  p = _ref6[1];
104
109
 
105
- return value !== v && (p + '.').indexOf(utils.formatPath(path) + '.') !== 0;
110
+ return !(value === v && (p + '.').indexOf(utils.formatPath(path) + '.') >= 0);
106
111
  });
107
112
  });
108
113
  };
@@ -161,13 +166,21 @@ var useProvideErrors = function useProvideErrors() {
161
166
  getErrorsInsidePath: getErrorsInsidePath,
162
167
  hasErrors: function hasErrors(path) {
163
168
  return getErrorsInsidePath(path).length > 0;
169
+ },
170
+ hasError: function hasError(path, value) {
171
+ return getErrorsInsidePath(path).find(function (_ref11) {
172
+ var _ref12 = _slicedToArray(_ref11, 1),
173
+ v = _ref12[0];
174
+
175
+ return v === value;
176
+ });
164
177
  }
165
178
  };
166
179
  var paths = React.useMemo(function () {
167
- return new Set(errors.isOpen.map(function (_ref11) {
168
- var _ref12 = _slicedToArray(_ref11, 2),
169
- _ = _ref12[0],
170
- path = _ref12[1];
180
+ return new Set(errors.isOpen.map(function (_ref13) {
181
+ var _ref14 = _slicedToArray(_ref13, 2),
182
+ _ = _ref14[0],
183
+ path = _ref14[1];
171
184
 
172
185
  return path;
173
186
  }).filter(function (_) {
@@ -199,9 +212,40 @@ var useHasError = function useHasError(path) {
199
212
 
200
213
  return paths.has(utils.formatPath(path));
201
214
  };
202
- var Errors = function Errors(_ref13) {
203
- var path = _ref13.path,
204
- className = _ref13.className;
215
+ var useErrorsUtils = function useErrorsUtils() {
216
+ return React.useContext(ErrorsContext);
217
+ };
218
+ var useTransientErrorHelper = function useTransientErrorHelper() {
219
+ var utils = useErrorsUtils();
220
+ var showingErrors = React.useRef([]);
221
+
222
+ var clearCurrentErrors = function clearCurrentErrors() {
223
+ showingErrors.current.forEach(function (_ref15) {
224
+ var _ref16 = _slicedToArray(_ref15, 2),
225
+ path = _ref16[0],
226
+ value = _ref16[1];
227
+
228
+ return utils === null || utils === void 0 ? void 0 : utils.removeError(value, path);
229
+ });
230
+ showingErrors.current = [];
231
+ };
232
+
233
+ var setErrors = function setErrors(newErrors) {
234
+ clearCurrentErrors();
235
+ utils === null || utils === void 0 ? void 0 : utils.addErrors(newErrors);
236
+ showingErrors.current = newErrors;
237
+ };
238
+
239
+ React__default.useEffect(function () {
240
+ return function () {
241
+ clearCurrentErrors();
242
+ };
243
+ }, []);
244
+ return [setErrors, clearCurrentErrors];
245
+ };
246
+ var Errors = function Errors(_ref17) {
247
+ var path = _ref17.path,
248
+ className = _ref17.className;
205
249
 
206
250
  var _useContext2 = React.useContext(ErrorsContext),
207
251
  getErrorsInsidePath = _useContext2.getErrorsInsidePath,
@@ -212,18 +256,20 @@ var Errors = function Errors(_ref13) {
212
256
 
213
257
  var uniqErrors = _uniqBy(_property(0), errors);
214
258
 
215
- return errors.length > 0 && React__default.createElement(Errors.Container, {
259
+ return React__default.createElement(components.TransitionDiv, {
260
+ block: true
261
+ }, errors.length > 0 && React__default.createElement(Errors.Container, {
216
262
  className: className
217
- }, uniqErrors.map(function (_ref14) {
218
- var _ref15 = _slicedToArray(_ref14, 1),
219
- value = _ref15[0];
263
+ }, uniqErrors.map(function (_ref18) {
264
+ var _ref19 = _slicedToArray(_ref18, 1),
265
+ value = _ref19[0];
220
266
 
221
267
  return value && React__default.createElement(Errors.Item, {
222
268
  key: value
223
269
  }, value, React__default.createElement(Errors.CloseIcon, {
224
270
  onClick: willRemoveError(value, path)
225
271
  }));
226
- }));
272
+ })));
227
273
  };
228
274
  Errors.displayName = 'Errors';
229
275
  Errors.Container = styled__default.ul.withConfig({
@@ -233,7 +279,7 @@ Errors.Container = styled__default.ul.withConfig({
233
279
  Errors.Item = styled__default.li.withConfig({
234
280
  displayName: "Errors__Item",
235
281
  componentId: "sc-1vuw7bx-1"
236
- })(["background-color:", ";padding:1rem 3.5rem 1rem 1rem;border-radius:4px;border:1px solid ", ";color:", ";margin-top:1rem;position:relative;text-align:left;& ~ &{margin-top:0.5rem;}", ""], function (props) {
282
+ })(["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) {
237
283
  return polished.lighten(0.42, props.theme.colors.alert);
238
284
  }, function (props) {
239
285
  return polished.lighten(0.35, props.theme.colors.alert);
@@ -398,7 +444,8 @@ var useForm = function useForm(_ref, ref) {
398
444
  onSuccess = _ref$onSuccess === void 0 ? function () {} : _ref$onSuccess,
399
445
  _ref$onFailure = _ref.onFailure,
400
446
  onFailure = _ref$onFailure === void 0 ? function () {} : _ref$onFailure,
401
- onChange = _ref.onChange;
447
+ onChange = _ref.onChange,
448
+ autoComplete = _ref.autoComplete;
402
449
  var outerConfig = {
403
450
  onSuccess: onSuccess,
404
451
  onFailure: onFailure,
@@ -417,7 +464,7 @@ var useForm = function useForm(_ref, ref) {
417
464
  setHasChangedValue = _useState2[1];
418
465
 
419
466
  var hasChangedRef = core.useRefState(false);
420
- var shouldResubmitForm = core.useToggle(false, function (prev, next) {
467
+ var shouldResubmitForm = core.useToggle(false, function (next, prev) {
421
468
  return prev && !next && errorsUtils.removeErrorPath('_shouldResubmitForm');
422
469
  });
423
470
  var resubmittingForm = core.useRefState(false);
@@ -450,7 +497,7 @@ var useForm = function useForm(_ref, ref) {
450
497
  setHasChanged(true);
451
498
  }
452
499
 
453
- utils.callIfFunction(onChange, prev, next);
500
+ utils.callIfFunction(onChange, prev, next, utils$1);
454
501
  };
455
502
 
456
503
  var setHasChanged = function setHasChanged(v) {
@@ -577,7 +624,7 @@ var useForm = function useForm(_ref, ref) {
577
624
  case 0:
578
625
  config = _args2.length > 1 && _args2[1] !== undefined ? _args2[1] : {};
579
626
 
580
- if (!loading.isOpen) {
627
+ if (!loading.get()) {
581
628
  _context2.next = 3;
582
629
  break;
583
630
  }
@@ -585,7 +632,7 @@ var useForm = function useForm(_ref, ref) {
585
632
  return _context2.abrupt("return", new Promise(function () {}));
586
633
 
587
634
  case 3:
588
- values = utils.ifUndefined(optValues, getValues());
635
+ values = utils.ifUndefined(utils.callIfFunction(optValues, getValues()), getValues());
589
636
 
590
637
  if (!getMeta('submittingImage')) {
591
638
  _context2.next = 10;
@@ -805,6 +852,7 @@ var useForm = function useForm(_ref, ref) {
805
852
  }, React__default.createElement(ErrorsProvider, {
806
853
  value: errorsContext
807
854
  }, !skipDom ? React__default.createElement("form", {
855
+ autoComplete: autoComplete,
808
856
  noValidate: true,
809
857
  onSubmit: willSubmitForm
810
858
  }, utils.callIfFunction(children, utils$1)) : utils.callIfFunction(children, utils$1))))), confirmDraftContent);
@@ -865,7 +913,6 @@ var withForm2 = function withForm2() {
865
913
  };
866
914
  };
867
915
 
868
- var identity = utils.identityFn();
869
916
  var PathContext = React__default.createContext([]);
870
917
  var enhancedInputDisplayName = 'EnhancedInput';
871
918
 
@@ -882,8 +929,10 @@ var itemToggle = function itemToggle(item) {
882
929
 
883
930
  var formInput = function formInput(_ref) {
884
931
  var undefinedPlaceholder = _ref.undefinedPlaceholder,
932
+ _ref$isChecked = _ref.isChecked,
933
+ isChecked = _ref$isChecked === void 0 ? _identity : _ref$isChecked,
885
934
  _ref$transform = _ref.transform,
886
- transform = _ref$transform === void 0 ? identity : _ref$transform,
935
+ transform = _ref$transform === void 0 ? _identity : _ref$transform,
887
936
  _ref$validation = _ref.validation,
888
937
  validation = _ref$validation === void 0 ? skipValidation : _ref$validation,
889
938
  onChange = _ref.onChange,
@@ -907,7 +956,10 @@ var formInput = function formInput(_ref) {
907
956
  return;
908
957
  }
909
958
 
910
- setFormValue(transform(value, path));
959
+ setFormValue(transform(value, {
960
+ path: path,
961
+ prevValue: formValue
962
+ }));
911
963
  utils.callIfFunction(onChange, utils.callIfFunction(value, formValue), {
912
964
  prevValue: formValue,
913
965
  path: path,
@@ -924,7 +976,7 @@ var formInput = function formInput(_ref) {
924
976
  };
925
977
 
926
978
  var toggle = function toggle() {
927
- return setValue(!formValue ? fieldValue || true : !!fieldValue && undefined);
979
+ return setValue(!isChecked(formValue) ? fieldValue || true : !!fieldValue && undefined);
928
980
  };
929
981
 
930
982
  var toggleItem = function toggleItem() {
@@ -943,12 +995,14 @@ var formInput = function formInput(_ref) {
943
995
 
944
996
  var rawInput = function rawInput(_ref2) {
945
997
  var value = _ref2.value,
998
+ _ref2$isChecked = _ref2.isChecked,
999
+ isChecked = _ref2$isChecked === void 0 ? _identity : _ref2$isChecked,
946
1000
  name = _ref2.name,
947
1001
  setValueProp = _ref2.setValue,
948
1002
  _ref2$validation = _ref2.validation,
949
1003
  validation = _ref2$validation === void 0 ? skipValidation : _ref2$validation,
950
1004
  _ref2$transform = _ref2.transform,
951
- transform = _ref2$transform === void 0 ? identity : _ref2$transform,
1005
+ transform = _ref2$transform === void 0 ? _identity : _ref2$transform,
952
1006
  onChange = _ref2.onChange,
953
1007
  fieldValue = _ref2.fieldValue,
954
1008
  defaultValue = _ref2.defaultValue;
@@ -983,7 +1037,7 @@ var rawInput = function rawInput(_ref2) {
983
1037
  };
984
1038
 
985
1039
  var toggle = function toggle() {
986
- return setValue(!rawValue);
1040
+ return setValue(!isChecked(rawValue));
987
1041
  };
988
1042
 
989
1043
  var toggleItem = function toggleItem() {
@@ -1056,7 +1110,7 @@ var Label = styled__default.label.withConfig({
1056
1110
  var HelpText = styled__default.span.withConfig({
1057
1111
  displayName: "Field__HelpText",
1058
1112
  componentId: "p9woft-3"
1059
- })(["color:", ";font-size:13px;font-weight:400;"], utils.getColor('gray120'));
1113
+ })(["color:rgba(0,0,0,0.4);font-weight:400;"]);
1060
1114
  var FieldDescription = styled__default.span.withConfig({
1061
1115
  displayName: "Field__FieldDescription",
1062
1116
  componentId: "p9woft-4"
@@ -1065,55 +1119,29 @@ var BellowFieldDescription = styled__default(FieldDescription).withConfig({
1065
1119
  displayName: "Field__BellowFieldDescription",
1066
1120
  componentId: "p9woft-5"
1067
1121
  })(["margin:0.5rem 0 0;"]);
1068
- var Field =
1069
- /*#__PURE__*/
1070
- function (_React$Component) {
1071
- _inherits(Field, _React$Component);
1072
-
1073
- function Field() {
1074
- var _getPrototypeOf2;
1075
-
1076
- var _this;
1077
-
1078
- _classCallCheck(this, Field);
1079
-
1080
- for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
1081
- args[_key] = arguments[_key];
1082
- }
1083
-
1084
- _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(Field)).call.apply(_getPrototypeOf2, [this].concat(args)));
1085
- _this.props = void 0;
1086
- return _this;
1087
- }
1088
-
1089
- _createClass(Field, [{
1090
- key: "render",
1091
- value: function render() {
1092
- var _this$props = this.props,
1093
- label = _this$props.label,
1094
- children = _this$props.children,
1095
- focused = _this$props.focused,
1096
- mandatory = _this$props.mandatory,
1097
- descText = _this$props.descText,
1098
- bellowDescText = _this$props.bellowDescText,
1099
- helpText = _this$props.helpText,
1100
- labelClick = _this$props.labelClick,
1101
- onImage = _this$props.onImage,
1102
- className = _this$props.className,
1103
- rest = _objectWithoutProperties(_this$props, ["label", "children", "focused", "mandatory", "descText", "bellowDescText", "helpText", "labelClick", "onImage", "className"]);
1104
-
1105
- return React__default.createElement(Container, _extends({}, rest, {
1106
- className: className
1107
- }), label && React__default.createElement(Label, _extends({}, rest, {
1108
- onClick: labelClick
1109
- }), label, mandatory && React__default.createElement(Mandatory, {
1110
- mandatory: mandatory
1111
- }, "*"), helpText && React__default.createElement(HelpText, null, " ", helpText), descText && React__default.createElement(FieldDescription, null, descText)), children, bellowDescText && React__default.createElement(BellowFieldDescription, null, bellowDescText));
1112
- }
1113
- }]);
1122
+ var Field = React__default.forwardRef(function (_ref, ref) {
1123
+ var label = _ref.label,
1124
+ helpText = _ref.helpText,
1125
+ descText = _ref.descText,
1126
+ bellowDescText = _ref.bellowDescText,
1127
+ className = _ref.className,
1128
+ labelClick = _ref.labelClick,
1129
+ focused = _ref.focused,
1130
+ mandatory = _ref.mandatory,
1131
+ onImage = _ref.onImage,
1132
+ children = _ref.children,
1133
+ rest = _objectWithoutProperties(_ref, ["label", "helpText", "descText", "bellowDescText", "className", "labelClick", "focused", "mandatory", "onImage", "children"]);
1114
1134
 
1115
- return Field;
1116
- }(React__default.Component);
1135
+ return React__default.createElement(Container, _extends({
1136
+ ref: ref
1137
+ }, rest, {
1138
+ className: className
1139
+ }), label && React__default.createElement(Label, _extends({}, rest, {
1140
+ onClick: labelClick
1141
+ }), label, mandatory && React__default.createElement(Mandatory, {
1142
+ mandatory: mandatory
1143
+ }, "*"), helpText && React__default.createElement(HelpText, null, " ", helpText), descText && React__default.createElement(FieldDescription, null, descText)), children, bellowDescText && React__default.createElement(BellowFieldDescription, null, bellowDescText));
1144
+ });
1117
1145
  Field.Label = Label;
1118
1146
  Field.Container = Container;
1119
1147
  Field.HelpText = HelpText;
@@ -1125,56 +1153,49 @@ var addExtraProp = function addExtraProp(element, extra) {
1125
1153
  return React__default.cloneElement(element, override ? _objectSpread({}, element.props, extra) : _objectSpread({}, extra, element.props), element.props.children);
1126
1154
  };
1127
1155
 
1128
- var useDialog = function useDialog(dialog) {
1129
- var args = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
1130
- var toggleCallback = arguments.length > 2 ? arguments[2] : undefined;
1131
- var toggle = core.useToggle(false, toggleCallback);
1132
- core.useFill("Dialog", toggle.isOpen && dialog(toggle.close), [toggle.isOpen].concat(_toConsumableArray(args)));
1133
- return toggle.open;
1134
- };
1135
- var useDialogWithToggle = function useDialogWithToggle(dialog) {
1136
- var args = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
1137
- var toggle = core.useToggle();
1138
- core.useFill("Dialog", toggle.isOpen && dialog(toggle), [toggle.isOpen].concat(_toConsumableArray(args)));
1139
- return toggle;
1140
- };
1141
1156
  var useConfirmDialog = function useConfirmDialog(dialog, args, toggleCallback) {
1142
- return useDialog(function (closeDialog) {
1157
+ return components.useDialog(function (closeDialog) {
1143
1158
  return addExtraProp(utils.callIfFunction(dialog, closeDialog), {
1144
1159
  closeDialog: closeDialog
1145
1160
  });
1146
1161
  }, args, toggleCallback);
1147
1162
  };
1148
1163
  var useConfirmDialogWithProps = function useConfirmDialogWithProps(dialog, args) {
1149
- return useDialogWithToggle(function (toggle) {
1150
- return addExtraProp(utils.callIfFunction(dialog, toggle.isOpen), {
1164
+ var _ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
1165
+ _ref$overrideClose = _ref.overrideClose,
1166
+ overrideClose = _ref$overrideClose === void 0 ? true : _ref$overrideClose;
1167
+
1168
+ return components.useDialogWithToggle(function (toggle) {
1169
+ return addExtraProp(utils.callIfFunction(dialog, toggle.isOpen, toggle.close), {
1151
1170
  closeDialog: toggle.close
1152
- });
1171
+ }, overrideClose);
1153
1172
  }, args);
1154
1173
  };
1155
- var ConfirmDialog = function ConfirmDialog(_ref) {
1156
- var _ref$action = _ref.action,
1157
- action = _ref$action === void 0 ? _identity : _ref$action,
1158
- _onSuccess = _ref.onSuccess,
1159
- className = _ref.className,
1160
- closeDialog = _ref.closeDialog,
1161
- _ref$cancelLabel = _ref.cancelLabel,
1162
- cancelLabel = _ref$cancelLabel === void 0 ? "Cancelar" : _ref$cancelLabel,
1163
- _ref$cancelButton = _ref.cancelButton,
1164
- cancelButton = _ref$cancelButton === void 0 ? React__default.createElement(components.Button, null, cancelLabel) : _ref$cancelButton,
1165
- onFailure = _ref.onFailure,
1166
- title = _ref.title,
1167
- keepOnSuccess = _ref.keepOnSuccess,
1168
- confirm = _ref.confirm,
1169
- formRef = _ref.formRef,
1170
- children = _ref.children,
1171
- preValidation = _ref.preValidation,
1172
- values = _ref.values,
1173
- alternativeButton = _ref.alternativeButton,
1174
- notify = _ref.notify,
1175
- confirmChanges = _ref.confirmChanges,
1176
- transform = _ref.transform,
1177
- isLoading = _ref.isLoading;
1174
+ var ConfirmDialog = function ConfirmDialog(_ref2) {
1175
+ var _ref2$action = _ref2.action,
1176
+ action = _ref2$action === void 0 ? _identity : _ref2$action,
1177
+ _onSuccess = _ref2.onSuccess,
1178
+ className = _ref2.className,
1179
+ closeDialog = _ref2.closeDialog,
1180
+ skipCloseIcon = _ref2.skipCloseIcon,
1181
+ _ref2$cancelLabel = _ref2.cancelLabel,
1182
+ cancelLabel = _ref2$cancelLabel === void 0 ? "Cancelar" : _ref2$cancelLabel,
1183
+ _ref2$cancelButton = _ref2.cancelButton,
1184
+ cancelButton = _ref2$cancelButton === void 0 ? React__default.createElement(components.Button, null, cancelLabel) : _ref2$cancelButton,
1185
+ onFailure = _ref2.onFailure,
1186
+ title = _ref2.title,
1187
+ keepOnSuccess = _ref2.keepOnSuccess,
1188
+ confirm = _ref2.confirm,
1189
+ formRef = _ref2.formRef,
1190
+ children = _ref2.children,
1191
+ preValidation = _ref2.preValidation,
1192
+ values = _ref2.values,
1193
+ onChange = _ref2.onChange,
1194
+ alternativeButton = _ref2.alternativeButton,
1195
+ notify = _ref2.notify,
1196
+ confirmChanges = _ref2.confirmChanges,
1197
+ transform = _ref2.transform,
1198
+ isLoading = _ref2.isLoading;
1178
1199
  return React__default.createElement(form.WithForm, {
1179
1200
  alwaysSave: true,
1180
1201
  ref: formRef,
@@ -1183,6 +1204,7 @@ var ConfirmDialog = function ConfirmDialog(_ref) {
1183
1204
  action: action,
1184
1205
  transform: transform,
1185
1206
  onFailure: onFailure,
1207
+ onChange: onChange,
1186
1208
  onSuccess: function onSuccess() {
1187
1209
  for (var _len = arguments.length, props = new Array(_len), _key = 0; _key < _len; _key++) {
1188
1210
  props[_key] = arguments[_key];
@@ -1204,6 +1226,7 @@ var ConfirmDialog = function ConfirmDialog(_ref) {
1204
1226
  return React__default.createElement(components.Dialog, {
1205
1227
  className: className,
1206
1228
  title: title,
1229
+ skipCloseIcon: skipCloseIcon,
1207
1230
  confirmChanges: confirmChanges,
1208
1231
  isLoading: isLoading,
1209
1232
  closeDialog: closeDialog,
@@ -1253,7 +1276,7 @@ var Input = styled__default.input.withConfig({
1253
1276
  return props.locked && styled.css(["padding-right:2.25rem;background:rgba(0,0,0,0.075);"]);
1254
1277
  }, function (props) {
1255
1278
  return props.isTextArea && styled.css(["resize:none;min-height:", "px;padding:.7rem;display:block;", " ", ""], function (props) {
1256
- return props.regularInputHeight ? 36 : props.minHeight || 108;
1279
+ return props.regularInputHeight ? 36 : props.minHeight || 60;
1257
1280
  }, function (props) {
1258
1281
  return props.autoResize ? 'overflow:hidden;' : 'overflow:auto;';
1259
1282
  }, utils.media.mobile(_templateObject2(), function (props) {
@@ -1312,8 +1335,9 @@ var useTextInput = function useTextInput(_ref, ref) {
1312
1335
  rawValue = _ref.rawValue,
1313
1336
  rawSetValue = _ref.rawSetValue,
1314
1337
  rawHasErrors = _ref.rawHasErrors,
1338
+ transformOnBlur = _ref.transformOnBlur,
1315
1339
  raw = _ref.raw,
1316
- rest = _objectWithoutProperties(_ref, ["onFocus", "onBlur", "autoResize", "constraint", "pattern", "path", "rawValue", "rawSetValue", "rawHasErrors", "raw"]);
1340
+ rest = _objectWithoutProperties(_ref, ["onFocus", "onBlur", "autoResize", "constraint", "pattern", "path", "rawValue", "rawSetValue", "rawHasErrors", "transformOnBlur", "raw"]);
1317
1341
 
1318
1342
  var _useInput = useInput(_objectSpread({
1319
1343
  path: path,
@@ -1331,7 +1355,7 @@ var useTextInput = function useTextInput(_ref, ref) {
1331
1355
  setFocused = _useState2[1];
1332
1356
 
1333
1357
  var lastSelection = core.useRefState();
1334
- var lastValue = core.useRefState();
1358
+ var lastValue = core.useRefState(formValue);
1335
1359
 
1336
1360
  var handleOnFocus = function handleOnFocus(e) {
1337
1361
  setFocused(true);
@@ -1341,6 +1365,10 @@ var useTextInput = function useTextInput(_ref, ref) {
1341
1365
  var handleOnBlur = function handleOnBlur(e) {
1342
1366
  setFocused(false);
1343
1367
  utils.callIfFunction(onBlur, e);
1368
+
1369
+ if (transformOnBlur) {
1370
+ setFormValue(transformOnBlur(formValue));
1371
+ }
1344
1372
  };
1345
1373
 
1346
1374
  React.useEffect(function () {
@@ -1375,7 +1403,7 @@ var useTextInput = function useTextInput(_ref, ref) {
1375
1403
  var validateConstraint = function validateConstraint(value, constraint, prevValue, pattern) {
1376
1404
  var newValue = '';
1377
1405
 
1378
- if (value === lastValue.get() || lastValue.get() && value.length < lastValue.get().length) {
1406
+ if (value === lastValue.get() || lastValue.get() && value.length < lastValue.get().length && !pattern) {
1379
1407
  lastValue.set(value);
1380
1408
  return value;
1381
1409
  }
@@ -1391,7 +1419,7 @@ var useTextInput = function useTextInput(_ref, ref) {
1391
1419
  var number = parseFloat(value.replace(',', '.'));
1392
1420
  var commas = value.split(',');
1393
1421
  var fixedNumber = number.toFixed(2);
1394
- newValue = !!commas[0] && commas.length === 2 && parseFloat(fixedNumber) === number && fixedNumber.split('.')[1].indexOf(commas[1]) === 0 ? value : utils.digitsToPattern('>3?????#,##', value);
1422
+ newValue = !!commas[0] && commas.length === 2 && parseFloat(fixedNumber) === number && fixedNumber.split('.')[1].indexOf(commas[1]) === 0 ? value : utils.digitsToPattern('>3???????#,##', value);
1395
1423
  } else if (constraint === 'capitalize') {
1396
1424
  // v = "R$ "+(parseInt(v.replace(/[^1-9]*([0-9]*)(,?)([0-9]{0,3}).*/,"$1$3") || 0)/100).toFixed(2).replace(".",",");
1397
1425
  newValue = value.replace(/^[a-z]/, function (e) {
@@ -1578,15 +1606,18 @@ var FileInput = styled__default.input.attrs({
1578
1606
  })(["z-index:1;cursor:pointer;opacity:0;position:absolute;top:0;right:0;left:0;bottom:0;width:100%;height:100%;overflow:hidden;::-webkit-file-upload-button{visibility:hidden;}::file-upload-button{visibility:hidden;}"]);
1579
1607
  var WithImageInput = function WithImageInput(_ref) {
1580
1608
  var children = _ref.children,
1609
+ multiple = _ref.multiple,
1581
1610
  _ref$path = _ref.path,
1582
1611
  path = _ref$path === void 0 ? ["image"] : _ref$path,
1583
1612
  preValidation = _ref.preValidation,
1613
+ onChangeFile = _ref.onChangeFile,
1614
+ onClose = _ref.onClose,
1584
1615
  onClick = _ref.onClick,
1585
1616
  uploadFetcher = _ref.uploadFetcher,
1586
1617
  onSuccess = _ref.onSuccess,
1587
1618
  ajaxError = _ref.ajaxError,
1588
1619
  onTouchEnd = _ref.onTouchEnd,
1589
- rest = _objectWithoutProperties(_ref, ["children", "path", "preValidation", "onClick", "uploadFetcher", "onSuccess", "ajaxError", "onTouchEnd"]);
1620
+ rest = _objectWithoutProperties(_ref, ["children", "multiple", "path", "preValidation", "onChangeFile", "onClose", "onClick", "uploadFetcher", "onSuccess", "ajaxError", "onTouchEnd"]);
1590
1621
 
1591
1622
  var form = React.useContext(FormContext);
1592
1623
  var loading = core.useToggle();
@@ -1597,7 +1628,8 @@ var WithImageInput = function WithImageInput(_ref) {
1597
1628
  setTempImage = _useState2[1];
1598
1629
 
1599
1630
  var getPath = function getPath(str) {
1600
- return typeof path === 'function' ? [].concat(path(str)) : str !== 'image' ? [].concat(path).slice(0, -1).concat(str) : path;
1631
+ var fileIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
1632
+ return typeof path === 'function' ? [].concat(path(str, fileIndex)) : str !== 'image' ? [].concat(path).slice(0, -1).concat(str) : path;
1601
1633
  };
1602
1634
 
1603
1635
  var imagePath = getPath('image');
@@ -1608,29 +1640,46 @@ var WithImageInput = function WithImageInput(_ref) {
1608
1640
 
1609
1641
  var image = tempImage || formImage;
1610
1642
 
1643
+ var validate = function validate(files) {
1644
+ var validations = files.map(preValidation).filter(Boolean);
1645
+
1646
+ if (validations.length) {
1647
+ validations.forEach(function (v) {
1648
+ return form.setError(getPath('image').join('.'), v);
1649
+ });
1650
+ return files.filter(function (file) {
1651
+ return !preValidation(file);
1652
+ });
1653
+ }
1654
+
1655
+ return files;
1656
+ };
1657
+
1611
1658
  var handleFileEvent = function handleFileEvent(e) {
1612
1659
  e.preventDefault();
1613
- var files = (e.nativeEvent.dataTransfer || e.nativeEvent.target).files;
1660
+ utils.callIfFunction(onClose);
1661
+ var files = Array.from((e.nativeEvent.dataTransfer || e.nativeEvent.target).files);
1614
1662
 
1615
1663
  if (files.length > 0) {
1616
- var file = files[0];
1617
- handleFile(file);
1664
+ validate(files.slice(0, multiple ? undefined : 1)).forEach(function (file, i) {
1665
+ return handleFile(file, e, i);
1666
+ });
1618
1667
  }
1619
1668
  };
1620
1669
 
1621
1670
  var handleFile = function handleFile(file, eventTarget) {
1622
- var validation = utils.callIfFunction(preValidation, file);
1671
+ var fileIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
1623
1672
 
1624
- if (validation) {
1625
- form.setError(getPath('image').join('.'), validation);
1626
- return;
1627
- }
1673
+ var getIndexedPath = function getIndexedPath(str) {
1674
+ return getPath(str, fileIndex);
1675
+ };
1628
1676
 
1629
- var oldUploadStatus = form.getMeta(getPath('uploadStatus'));
1630
- var oldImage = form.getValue(getPath('image'));
1631
- var oldImageHeight = form.getValue(getPath('imageHeight'));
1632
- var oldImageWidth = form.getValue(getPath('imageWidth'));
1633
- var oldFilename = form.getValue(getPath('fileName'));
1677
+ var path = getIndexedPath();
1678
+ var oldUploadStatus = form.getMeta(getIndexedPath('uploadStatus'));
1679
+ var oldImage = form.getValue(getIndexedPath('image'));
1680
+ var oldImageHeight = form.getValue(getIndexedPath('imageHeight'));
1681
+ var oldImageWidth = form.getValue(getIndexedPath('imageWidth'));
1682
+ var oldFilename = form.getValue(getIndexedPath('fileName'));
1634
1683
  var objectUrl = URL.createObjectURL(file);
1635
1684
  var image = document.createElement('img');
1636
1685
 
@@ -1643,18 +1692,19 @@ var WithImageInput = function WithImageInput(_ref) {
1643
1692
  imageWidth: imageWidth,
1644
1693
  imageHeight: imageHeight
1645
1694
  };
1646
- form.setValues(_flow(_set(getPath('filename'), file.name), _set(getPath('image'), file), _set(getPath('imageWidth'), imageWidth), _set(getPath('imageHeight'), imageHeight)));
1695
+ form.setValues(_flow(_set(getIndexedPath('filename'), file.name), _set(getIndexedPath('image'), file), _set(getIndexedPath('imageWidth'), imageWidth), _set(getIndexedPath('imageHeight'), imageHeight)));
1647
1696
  form.setMeta(_flow(_update('submittingImage', function (v) {
1648
1697
  return v ? v + 1 : 1;
1649
- }), _set(getPath('uploadStatus'), 'loading')));
1698
+ }), _update('uploadingPaths', _union([path.join(".")])), _set(getIndexedPath('uploadStatus'), 'loading')));
1650
1699
  setTempImage(objectUrl);
1700
+ utils.callIfFunction(onChangeFile, file);
1651
1701
  loading.open();
1652
1702
  uploadFetcher(file, newValues).then(function (_ref2) {
1653
1703
  var image = _ref2.image,
1654
1704
  uploadStatus = _ref2.uploadStatus;
1655
1705
  loading.close();
1656
1706
 
1657
- if (form.getValue(getPath('image')) !== file) {
1707
+ if (form.getValue(getIndexedPath('image')) !== file) {
1658
1708
  form.setMeta(_update(['submittingImage'], function (v) {
1659
1709
  return v - 1;
1660
1710
  }));
@@ -1662,8 +1712,8 @@ var WithImageInput = function WithImageInput(_ref) {
1662
1712
  }
1663
1713
 
1664
1714
  form.clearErrors();
1665
- form.setValue(getPath('image'), image, false);
1666
- form.setMeta(_flow(_update(['submittingImage'], function (v) {
1715
+ form.setValue(getIndexedPath('image'), image, false);
1716
+ form.setMeta(_flow(_update('uploadingPaths', _difference(_difference.placeholder, [path.join(".")])), _update(['submittingImage'], function (v) {
1667
1717
  return v - 1;
1668
1718
  }), _update(['submittedImages'], function (v) {
1669
1719
  return (v || []).concat([{
@@ -1671,7 +1721,7 @@ var WithImageInput = function WithImageInput(_ref) {
1671
1721
  file: file,
1672
1722
  image: image
1673
1723
  }]);
1674
- }), _set(getPath('uploadStatus'), uploadStatus)));
1724
+ }), _set(getIndexedPath('uploadStatus'), uploadStatus)));
1675
1725
  setTempImage(null);
1676
1726
  utils.callIfFunction(onSuccess, {
1677
1727
  image: image,
@@ -1682,15 +1732,15 @@ var WithImageInput = function WithImageInput(_ref) {
1682
1732
  }).catch(function () {
1683
1733
  loading.close();
1684
1734
 
1685
- if (form.getValue(getPath('image') !== file)) {
1735
+ if (form.getValue(getIndexedPath('image') !== file)) {
1686
1736
  form.setMeta(_update(['submittingImage'], function (v) {
1687
1737
  return v - 1;
1688
1738
  }));
1689
1739
  return;
1690
1740
  }
1691
1741
 
1692
- form.setError(getPath('image').join('.'), ajaxError);
1693
- form.setValues(_flow(_set(getPath('filename'), oldFilename), _set(getPath('image'), oldImage), _set(getPath('imageWidth'), oldImageWidth), _set(getPath('imageHeight'), oldImageHeight)), false);
1742
+ form.setError(getIndexedPath('image').join('.'), ajaxError);
1743
+ form.setValues(_flow(_set(getIndexedPath('filename'), oldFilename), _set(getIndexedPath('image'), oldImage), _set(getIndexedPath('imageWidth'), oldImageWidth), _set(getIndexedPath('imageHeight'), oldImageHeight)), false);
1694
1744
  form.setMeta(_flow(_update(['submittingImage'], function (v) {
1695
1745
  return v - 1;
1696
1746
  }), _update(['submittedImages'], function (v) {
@@ -1699,7 +1749,7 @@ var WithImageInput = function WithImageInput(_ref) {
1699
1749
  file: file,
1700
1750
  image: image
1701
1751
  }]);
1702
- }), _set(getPath('uploadStatus'), oldUploadStatus)));
1752
+ }), _set(getIndexedPath('uploadStatus'), oldUploadStatus)));
1703
1753
  setTempImage(null);
1704
1754
  });
1705
1755
  if (eventTarget && eventTarget.parentNode && typeof eventTarget.parentNode.click === 'function') eventTarget.parentNode.click();
@@ -1708,11 +1758,20 @@ var WithImageInput = function WithImageInput(_ref) {
1708
1758
  image.src = objectUrl;
1709
1759
  };
1710
1760
 
1761
+ var handleClick = function handleClick(e) {
1762
+ utils.callIfFunction(onClick, e);
1763
+ };
1764
+
1765
+ var handleTouchEnd = function handleTouchEnd(e) {
1766
+ utils.callIfFunction(onTouchEnd, e);
1767
+ };
1768
+
1711
1769
  return children(React__default.createElement(FileInput, {
1770
+ multiple: multiple,
1712
1771
  onChange: handleFileEvent,
1713
- onClick: onClick,
1772
+ onClick: handleClick,
1714
1773
  tabIndex: -1,
1715
- onTouchEnd: onTouchEnd
1774
+ onTouchEnd: handleTouchEnd
1716
1775
  }), {
1717
1776
  image: image,
1718
1777
  isLoading: loading.isOpen,
@@ -1742,18 +1801,22 @@ var HiddenInput = styled__default.input.withConfig({
1742
1801
  var Checkbox = function Checkbox(_ref) {
1743
1802
  var className = _ref.className,
1744
1803
  children = _ref.children,
1804
+ _ref$isChecked = _ref.isChecked,
1805
+ isChecked = _ref$isChecked === void 0 ? _identity : _ref$isChecked,
1745
1806
  isList = _ref.isList,
1746
1807
  disabled = _ref.disabled,
1808
+ inverted = _ref.inverted,
1747
1809
  path = _ref.path,
1748
1810
  _ref$tabIndex = _ref.tabIndex,
1749
1811
  tabIndex = _ref$tabIndex === void 0 ? 1 : _ref$tabIndex,
1750
1812
  raw = _ref.raw,
1751
- rest = _objectWithoutProperties(_ref, ["className", "children", "isList", "disabled", "path", "tabIndex", "raw"]);
1813
+ rest = _objectWithoutProperties(_ref, ["className", "children", "isChecked", "isList", "disabled", "inverted", "path", "tabIndex", "raw"]);
1752
1814
 
1753
1815
  var focused = core.useToggle();
1754
1816
 
1755
1817
  var _useInput = useInput(_objectSpread({
1756
- path: path
1818
+ path: path,
1819
+ isChecked: isChecked
1757
1820
  }, rest), raw),
1758
1821
  _useInput2 = _slicedToArray(_useInput, 3),
1759
1822
  v = _useInput2[0],
@@ -1763,7 +1826,11 @@ var Checkbox = function Checkbox(_ref) {
1763
1826
  toggleItem = _useInput2$.toggleItem,
1764
1827
  hasErrors = _useInput2$.hasErrors;
1765
1828
 
1766
- var value = isList ? (v === null || v === void 0 ? void 0 : v.indexOf(rest.fieldValue)) >= 0 : v;
1829
+ var testInvert = function testInvert(v) {
1830
+ return inverted ? !v : v;
1831
+ };
1832
+
1833
+ var value = isChecked(testInvert(isList ? (v === null || v === void 0 ? void 0 : v.indexOf(rest.fieldValue)) >= 0 : v));
1767
1834
 
1768
1835
  var onClick = function onClick(e) {
1769
1836
  if (!e.isDefaultPrevented()) {
@@ -1809,7 +1876,7 @@ function _templateObject2$1() {
1809
1876
  }
1810
1877
 
1811
1878
  function _templateObject$1() {
1812
- var data = _taggedTemplateLiteral(["\n ", " > * {\n padding-left: 1rem;\n padding-right: 1rem;\n }\n "]);
1879
+ var data = _taggedTemplateLiteral(["\n ", " > * {\n font-size: 14px;\n }\n "]);
1813
1880
 
1814
1881
  _templateObject$1 = function _templateObject() {
1815
1882
  return data;
@@ -1820,23 +1887,30 @@ function _templateObject$1() {
1820
1887
  var ComboboxMenu = styled__default(components.ContextListMenu).withConfig({
1821
1888
  displayName: "Combobox__ComboboxMenu",
1822
1889
  componentId: "u2hz6i-0"
1823
- })(["z-index:100;background-color:white;border-radius:0 0 6px 6px;margin-top:-1px;margin-bottom:0.5rem;box-shadow:none;border:1px solid ", ";max-height:25rem;min-width:100%;width:auto;", ""], utils.getColor('gray210'), function (props) {
1824
- return props.withoutIcons && styled.css(["", " > *{padding-left:0.7rem;padding-right:0.7rem;}", ""], components.ListItem, utils.media.mobile(_templateObject$1(), components.ListItem));
1890
+ })(["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) {
1891
+ return props.withoutIcons && styled.css(["", " > *{padding-left:1.25rem;padding-right:1.25rem;}"], components.ListItem);
1825
1892
  });
1826
1893
  var ComboboxInput = styled__default.div.withConfig({
1827
1894
  displayName: "Combobox__ComboboxInput",
1828
1895
  componentId: "u2hz6i-1"
1829
- })(["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) {
1830
- return props.isEmpty && "\n color: rgba(0,0,0,0.2);\n ";
1831
- }, function (props) {
1832
- return props.comboboxIsOpen && "\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n ";
1896
+ })(["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) {
1897
+ return props.comboboxIsOpen && "\n // border-bottom-left-radius: 0;\n // border-bottom-right-radius: 0;\n ";
1833
1898
  }, utils.getColor('gray180'), function (props) {
1834
1899
  return props.hasErrors && styled.css(["border-color:", " !important;"], utils.getColor('alert'));
1835
1900
  });
1836
1901
  var ComboboxDropdownIcon = styled__default(components.Icon).withConfig({
1837
1902
  displayName: "Combobox__ComboboxDropdownIcon",
1838
1903
  componentId: "u2hz6i-2"
1839
- })(["position:absolute;top:51%;transform:translateY(-50%);right:1rem;color:", ";"], utils.getColor('gray60')); //shouldRecenter?
1904
+ })(["position:absolute;top:51%;transform:translateY(-50%);right:1rem;color:", ";"], utils.getColor('gray60'));
1905
+ var FooterOptionsContainer = styled__default.div.withConfig({
1906
+ displayName: "Combobox__FooterOptionsContainer",
1907
+ componentId: "u2hz6i-3"
1908
+ })(["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;"]);
1909
+ var ComboboxPlaceholder = styled__default.div.withConfig({
1910
+ displayName: "Combobox__ComboboxPlaceholder",
1911
+ componentId: "u2hz6i-4"
1912
+ })(["color:rgba(0,0,0,0.3);"]);
1913
+ var SEPARATOR = {}; //shouldRecenter?
1840
1914
 
1841
1915
  var Combobox = styled__default(function (_ref) {
1842
1916
  var _ref$getLabel = _ref.getLabel,
@@ -1848,6 +1922,7 @@ var Combobox = styled__default(function (_ref) {
1848
1922
  } : _ref$scrollContainer,
1849
1923
  className = _ref.className,
1850
1924
  options = _ref.options,
1925
+ autoFocus = _ref.autoFocus,
1851
1926
  mandatory = _ref.mandatory,
1852
1927
  placeholder = _ref.placeholder,
1853
1928
  disabled = _ref.disabled,
@@ -1860,31 +1935,58 @@ var Combobox = styled__default(function (_ref) {
1860
1935
  descText = _ref.descText,
1861
1936
  helpText = _ref.helpText,
1862
1937
  raw = _ref.raw,
1863
- rest = _objectWithoutProperties(_ref, ["getLabel", "getIcon", "scrollContainer", "className", "options", "mandatory", "placeholder", "disabled", "fieldValue", "label", "path", "tabIndex", "fieldClassName", "descText", "helpText", "raw"]);
1938
+ footerOptions = _ref.footerOptions,
1939
+ _ref$check = _ref.check,
1940
+ check = _ref$check === void 0 ? function (a, b) {
1941
+ return a === b;
1942
+ } : _ref$check,
1943
+ rest = _objectWithoutProperties(_ref, ["getLabel", "getIcon", "scrollContainer", "className", "options", "autoFocus", "mandatory", "placeholder", "disabled", "fieldValue", "label", "path", "tabIndex", "fieldClassName", "descText", "helpText", "raw", "footerOptions", "check"]);
1864
1944
 
1865
1945
  var selectedElement = React.useRef();
1946
+ var fieldRef = React.useRef();
1947
+ var skipFocus = core.useRefState(autoFocus);
1948
+ var skipHover = core.useRefState();
1866
1949
  var listElement = React.useRef();
1867
1950
  var container = React.useRef();
1868
- var isFocused = core.useRefState();
1951
+ var keyState = core.useRefState();
1869
1952
  var contextMenu = core.useToggle();
1870
1953
  var hover = core.useToggle();
1871
1954
  var scrollToVisibility = core.useToggle();
1872
- React.useEffect(function () {
1873
- contextMenu.isOpen && recenterScroll();
1874
- }, [contextMenu.isOpen]);
1875
- React.useEffect(function () {
1876
- selectedElement.current && scrollToVisibility.isOpen && makeOptionVisible();
1877
- }, [hover]);
1878
1955
 
1879
1956
  var _useInput = useInput(_objectSpread({
1880
1957
  fieldValue: fieldValue,
1881
1958
  path: path
1882
1959
  }, rest), raw),
1883
1960
  _useInput2 = _slicedToArray(_useInput, 3),
1884
- value = _useInput2[0],
1885
- setValue = _useInput2[1],
1961
+ formValue = _useInput2[0],
1962
+ confirmValue = _useInput2[1],
1886
1963
  hasErrors = _useInput2[2].hasErrors;
1887
1964
 
1965
+ var _useState = React.useState(formValue),
1966
+ _useState2 = _slicedToArray(_useState, 2),
1967
+ value = _useState2[0],
1968
+ _setValue = _useState2[1];
1969
+
1970
+ React.useEffect(function () {
1971
+ contextMenu.isOpen && recenterScroll();
1972
+ }, [contextMenu.isOpen]);
1973
+ React.useEffect(function () {
1974
+ selectedElement.current && scrollToVisibility.isOpen && makeOptionVisible();
1975
+ }, [hover]);
1976
+ React.useEffect(function () {
1977
+ var _container$current;
1978
+
1979
+ autoFocus && ((_container$current = container.current) === null || _container$current === void 0 ? void 0 : _container$current.focus());
1980
+ }, []);
1981
+ React.useEffect(function () {
1982
+ confirmValue(value);
1983
+ }, [!!contextMenu.isOpen]);
1984
+ React.useEffect(function () {
1985
+ formValue !== value && _setValue(formValue);
1986
+ }, [formValue]);
1987
+ var allOptions = options.concat(footerOptions || []).filter(function (v) {
1988
+ return v !== SEPARATOR;
1989
+ });
1888
1990
  var withPlaceholder = !value && value !== 0 && placeholder;
1889
1991
 
1890
1992
  var toggleCombobox = function toggleCombobox() {
@@ -1897,6 +1999,12 @@ var Combobox = styled__default(function (_ref) {
1897
1999
  hover.close();
1898
2000
  };
1899
2001
 
2002
+ var getCurrentHeight = function getCurrentHeight() {
2003
+ var _listElement$current$;
2004
+
2005
+ return listElement.current.offsetHeight - (((_listElement$current$ = listElement.current.querySelector(".JS-list-footer")) === null || _listElement$current$ === void 0 ? void 0 : _listElement$current$.offsetHeight) || 0);
2006
+ };
2007
+
1900
2008
  var recenterScroll = function recenterScroll() {
1901
2009
  if (listElement.current.getBoundingClientRect().bottom > window.innerHeight) {
1902
2010
  var currentScrollContainer = scrollContainer(container.current);
@@ -1904,46 +2012,84 @@ var Combobox = styled__default(function (_ref) {
1904
2012
  }
1905
2013
 
1906
2014
  if (selectedElement.current) {
1907
- listElement.current.scrollTop = selectedElement.current.offsetTop + selectedElement.current.offsetHeight / 2 - listElement.current.offsetHeight / 2;
2015
+ listElement.current.scrollTop = selectedElement.current.offsetTop + selectedElement.current.offsetHeight / 2 - getCurrentHeight() / 2;
1908
2016
  }
1909
2017
  };
1910
2018
 
1911
2019
  var makeOptionVisible = function makeOptionVisible() {
1912
- if (selectedElement.current.offsetTop < listElement.current.scrollTop) {
2020
+ if ((footerOptions === null || footerOptions === void 0 ? void 0 : footerOptions.indexOf(hover.isOpen)) >= 0) {
2021
+ return;
2022
+ } else if (selectedElement.current.offsetTop < listElement.current.scrollTop) {
2023
+ skipHover.set(true);
1913
2024
  listElement.current.scrollTop = selectedElement.current.offsetTop;
1914
- } else if (selectedElement.current.offsetTop + selectedElement.current.offsetHeight > listElement.current.scrollTop + listElement.current.offsetHeight) {
1915
- listElement.current.scrollTop = selectedElement.current.offsetTop + selectedElement.current.offsetHeight - listElement.current.offsetHeight;
2025
+ } else if (selectedElement.current.offsetTop + selectedElement.current.offsetHeight > listElement.current.scrollTop + getCurrentHeight()) {
2026
+ skipHover.set(true);
2027
+ listElement.current.scrollTop = selectedElement.current.offsetTop + selectedElement.current.offsetHeight - getCurrentHeight();
1916
2028
  }
1917
2029
  };
1918
2030
 
1919
- var handleHover = function handleHover(value) {
2031
+ var handleHover = function handleHover(value, e) {
2032
+ if (skipHover.get()) {
2033
+ skipHover.set(false);
2034
+ return;
2035
+ }
2036
+
1920
2037
  scrollToVisibility.close();
1921
2038
  hover.openWith(value);
1922
2039
  };
1923
2040
 
1924
2041
  var keyDown = function keyDown(e) {
1925
- e.stopPropagation();
1926
-
1927
2042
  if ((e.key === 'Escape' || e.key === 'Tab') && contextMenu.isOpen) {
2043
+ e.stopPropagation();
1928
2044
  toggleCombobox();
1929
2045
  }
1930
2046
 
1931
- if (e.key.length === 1 && contextMenu.isOpen) {
1932
- var labels = options.map(function (o) {
2047
+ if (e.key.length === 1) {
2048
+ e.stopPropagation();
2049
+
2050
+ if (!contextMenu.isOpen) {
2051
+ contextMenu.open();
2052
+ }
2053
+
2054
+ var prevKeyState = keyState.get();
2055
+ var repeated = !prevKeyState || e.key === prevKeyState.word[0] && prevKeyState.repeated;
2056
+ var word = ((prevKeyState === null || prevKeyState === void 0 ? void 0 : prevKeyState.word) || '') + e.key;
2057
+ clearTimeout((prevKeyState === null || prevKeyState === void 0 ? void 0 : prevKeyState.timeout) || -1);
2058
+ var timeout = setTimeout(function () {
2059
+ return keyState.set(null);
2060
+ }, 1000);
2061
+ keyState.set({
2062
+ repeated: repeated,
2063
+ word: word,
2064
+ timeout: timeout
2065
+ });
2066
+ var labels = allOptions.map(function (o) {
1933
2067
  var label = getLabel(o);
1934
- return _isString(label) ? label.slice(0, 1).toLowerCase() : "";
2068
+ return _isString(label) ? label.slice(0, repeated ? 1 : word.length).toLowerCase() : "";
1935
2069
  });
1936
- var firstIndex = labels.indexOf(e.key.toLowerCase());
1937
- var lastIndex = labels.lastIndexOf(e.key.toLowerCase()) + 1;
1938
- var delta = lastIndex - firstIndex;
1939
-
1940
- if (firstIndex >= 0) {
1941
- var oldIndex = options.indexOf(hover.isOpen !== false ? hover.isOpen : value);
1942
- var direction = e.shiftKey ? -1 : 1;
1943
- var constrainedOldIndex = Math.min(Math.max(oldIndex, firstIndex - direction), lastIndex - direction);
1944
- var newIndex = (constrainedOldIndex + direction - firstIndex + delta) % delta + firstIndex;
2070
+
2071
+ var goTo = function goTo(index) {
1945
2072
  scrollToVisibility.open();
1946
- hover.openWith(options[newIndex]);
2073
+ hover.openWith(allOptions[index]);
2074
+
2075
+ _setValue(allOptions[index]);
2076
+ };
2077
+
2078
+ var currentIndex = allOptions.indexOf(hover.isOpen !== false ? hover.isOpen : value);
2079
+ var direction = repeated ? e.shiftKey ? -1 : 1 : 0;
2080
+ var fnName = direction < 0 ? 'lastIndexOf' : 'indexOf';
2081
+ var item = repeated ? word.slice(0, 1) : word;
2082
+ var fromIndex = (currentIndex || (direction < 0 ? labels.length - 1 : 0)) + direction;
2083
+ var next = labels[fnName](item, fromIndex);
2084
+
2085
+ if (next >= 0) {
2086
+ goTo(next);
2087
+ } else {
2088
+ var _next = labels[fnName](item);
2089
+
2090
+ if (_next >= 0) {
2091
+ goTo(_next);
2092
+ }
1947
2093
  }
1948
2094
  }
1949
2095
 
@@ -1951,19 +2097,21 @@ var Combobox = styled__default(function (_ref) {
1951
2097
  return;
1952
2098
  }
1953
2099
 
2100
+ e.stopPropagation();
1954
2101
  e.preventDefault();
1955
2102
 
1956
2103
  if (contextMenu.isOpen) {
1957
2104
  if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
1958
2105
  var oldValue = hover.isOpen !== false ? hover.isOpen : value;
1959
-
1960
- var _newIndex = Math.min(Math.max((options.indexOf(oldValue) + options.length + (e.key === 'ArrowUp' ? -1 : 1)) % options.length, 0), options.length - 1);
1961
-
2106
+ var previousIndex = allOptions.indexOf(oldValue);
2107
+ var newIndex = Math.min(Math.max((previousIndex + allOptions.length + (e.key === 'ArrowUp' ? previousIndex < 0 ? 0 : -1 : 1)) % allOptions.length, 0), allOptions.length - 1);
1962
2108
  scrollToVisibility.open();
1963
- hover.openWith(options[_newIndex]);
2109
+ hover.openWith(allOptions[newIndex]);
2110
+
2111
+ _setValue(allOptions[newIndex]);
1964
2112
  } else {
1965
2113
  if (hover.isOpen !== false) {
1966
- setValue(hover.isOpen);
2114
+ _setValue(hover.isOpen);
1967
2115
  }
1968
2116
 
1969
2117
  toggleCombobox();
@@ -1973,23 +2121,56 @@ var Combobox = styled__default(function (_ref) {
1973
2121
  }
1974
2122
  };
1975
2123
 
2124
+ var createOption = function createOption(option, i) {
2125
+ if (option === SEPARATOR) {
2126
+ return React__default.createElement(components.ListSeparator, {
2127
+ key: "separator" + i
2128
+ });
2129
+ }
2130
+
2131
+ var label = getLabel(option);
2132
+ return React__default.createElement(Option, {
2133
+ key: label + i,
2134
+ option: option,
2135
+ icon: utils.callIfFunction(getIcon, option),
2136
+ checked: hover.isOpen !== false ? option === hover.isOpen : check(option, value),
2137
+ label: label,
2138
+ setValue: function setValue(v) {
2139
+ _setValue(v);
2140
+
2141
+ contextMenu.close();
2142
+ skipFocus.set(true);
2143
+ container.current.focus();
2144
+ },
2145
+ setRef: selectedElement,
2146
+ onHover: handleHover
2147
+ });
2148
+ };
2149
+
1976
2150
  return React__default.createElement(Field, {
1977
2151
  className: fieldClassName,
1978
2152
  mandatory: mandatory,
1979
2153
  descText: descText,
1980
2154
  helpText: helpText,
1981
2155
  label: label,
1982
- labelClick: toggleCombobox
2156
+ labelClick: toggleCombobox,
2157
+ ref: fieldRef
1983
2158
  }, React__default.createElement(ComboboxInput, {
1984
2159
  onBlur: function onBlur(e) {
1985
- return !e.currentTarget.contains(document.activeElement) && contextMenu.close();
2160
+ var _listElement$current;
2161
+
2162
+ if (!((_listElement$current = listElement.current) === null || _listElement$current === void 0 ? void 0 : _listElement$current.contains(e.relatedTarget))) {
2163
+ confirmValue(value);
2164
+ contextMenu.close();
2165
+ }
1986
2166
  },
1987
- onFocus: contextMenu.open,
1988
- onMouseDown: function onMouseDown(e) {
1989
- return isFocused.set(e.currentTarget.contains(document.activeElement));
2167
+ onFocus: function onFocus() {
2168
+ return skipFocus.get() ? skipFocus.set(false) : contextMenu.open();
1990
2169
  },
1991
- onClick: function onClick(e) {
1992
- return isFocused.get() && e.currentTarget.blur();
2170
+ onClick: function onClick() {
2171
+ return contextMenu.openWith(function (v) {
2172
+ return _isBoolean(v) ? 2 : false;
2173
+ });
1993
2174
  },
1994
2175
  ref: container,
1995
2176
  tabIndex: tabIndex,
@@ -1998,44 +2179,73 @@ var Combobox = styled__default(function (_ref) {
1998
2179
  withPlaceholder: withPlaceholder,
1999
2180
  hasErrors: hasErrors,
2000
2181
  comboboxIsOpen: contextMenu.isOpen
2001
- }, withPlaceholder ? placeholder : getLabel(value), React__default.createElement(ComboboxDropdownIcon, {
2182
+ }, withPlaceholder ? React__default.createElement(ComboboxPlaceholder, null, placeholder) : getLabel(value), React__default.createElement(ComboboxDropdownIcon, {
2002
2183
  icon: "arrow-down"
2003
- })), contextMenu.isOpen && React__default.createElement(ComboboxMenu, {
2184
+ }), !!contextMenu.isOpen && React__default.createElement(ComboboxMenuContainer, {
2004
2185
  ref: listElement,
2005
- withoutIcons: !getIcon
2006
- }, options.map(function (option) {
2007
- var label = getLabel(option);
2008
- return React__default.createElement(Option, {
2009
- key: label,
2010
- option: option,
2011
- icon: utils.callIfFunction(getIcon, option),
2012
- checked: hover.isOpen !== false ? option === hover.isOpen : option === value,
2013
- label: label,
2014
- setValue: setValue,
2015
- setRef: selectedElement,
2016
- onHover: handleHover
2017
- });
2186
+ options: options,
2187
+ footerOptions: footerOptions,
2188
+ getIcon: getIcon,
2189
+ createOption: createOption
2018
2190
  })));
2019
2191
  }).withConfig({
2020
2192
  displayName: "Combobox",
2021
- componentId: "u2hz6i-3"
2193
+ componentId: "u2hz6i-5"
2022
2194
  })(["user-select:none;"]);
2023
- var Option = function Option(_ref2) {
2024
- var setValue = _ref2.setValue,
2025
- icon = _ref2.icon,
2026
- option = _ref2.option,
2027
- onHover = _ref2.onHover,
2028
- checked = _ref2.checked,
2029
- label = _ref2.label,
2030
- setRef = _ref2.setRef;
2195
+
2196
+ var _willUseIsSticky = components.willUseIsSticky(),
2197
+ _willUseIsSticky2 = _slicedToArray(_willUseIsSticky, 1),
2198
+ WithIsSticky = _willUseIsSticky2[0];
2199
+
2200
+ var ComboboxMenuContainer = React__default.forwardRef(function (_ref2, ref) {
2201
+ var options = _ref2.options,
2202
+ footerOptions = _ref2.footerOptions,
2203
+ getIcon = _ref2.getIcon,
2204
+ createOption = _ref2.createOption;
2205
+
2206
+ var _usePositioning = components.usePositioning(ref, {
2207
+ fill: true
2208
+ }),
2209
+ _usePositioning2 = _slicedToArray(_usePositioning, 2),
2210
+ positionInfo = _usePositioning2[0],
2211
+ positionPlaceholder = _usePositioning2[1];
2212
+
2213
+ var slot = 'Popup';
2214
+ var slotName = React.useMemo(function () {
2215
+ return components.getDialogLayersSize() === 0 ? slot : slot + '-' + (components.getDialogLayersSize() - 1);
2216
+ }, []);
2217
+ return React__default.createElement(React__default.Fragment, null, positionPlaceholder, React__default.createElement(core.Fill, {
2218
+ name: slotName
2219
+ }, React__default.createElement(ComboboxMenu, _extends({}, positionInfo, {
2220
+ ref: ref,
2221
+ withoutIcons: !getIcon
2222
+ }), options.map(createOption), footerOptions && React__default.createElement(WithIsSticky, {
2223
+ intersection: true
2224
+ }, function (sentinel, isSticky) {
2225
+ return React__default.createElement(React__default.Fragment, null, React__default.createElement(FooterOptionsContainer, {
2226
+ isSticky: isSticky,
2227
+ className: "JS-list-footer"
2228
+ }, footerOptions.map(createOption)), sentinel("margin-top:-3px;"));
2229
+ }))));
2230
+ });
2231
+ var Option = function Option(_ref3) {
2232
+ var setValue = _ref3.setValue,
2233
+ icon = _ref3.icon,
2234
+ option = _ref3.option,
2235
+ onHover = _ref3.onHover,
2236
+ checked = _ref3.checked,
2237
+ label = _ref3.label,
2238
+ setRef = _ref3.setRef;
2031
2239
  return React__default.createElement(components.ListItem, {
2032
2240
  hover: checked,
2033
- onMouseOver: function onMouseOver() {
2034
- return onHover(option);
2241
+ tabIndex: -1,
2242
+ onMouseOver: function onMouseOver(e) {
2243
+ return onHover(option, e);
2035
2244
  },
2036
2245
  ref: checked ? setRef : undefined,
2037
- onClick: function onClick() {
2038
- return setValue(option);
2246
+ onClick: function onClick(e) {
2247
+ e.stopPropagation();
2248
+ setValue(option);
2039
2249
  }
2040
2250
  }, React__default.createElement("a", null, icon && React__default.createElement(components.Icon, {
2041
2251
  icon: icon
@@ -2807,10 +3017,30 @@ var FormValue = function FormValue(_ref) {
2807
3017
 
2808
3018
  return utils.ifUndefined(utils.callIfFunction(children, value, setValue), _isObject(value) ? null : value, null);
2809
3019
  };
2810
- var FormMeta = function FormMeta(_ref2) {
3020
+ var IfFormValue = function IfFormValue(_ref2) {
2811
3021
  var path = _ref2.path,
2812
3022
  children = _ref2.children,
2813
- inputs = _ref2.inputs;
3023
+ inputs = _ref2.inputs,
3024
+ _ref2$check = _ref2.check,
3025
+ check = _ref2$check === void 0 ? _identity : _ref2$check,
3026
+ invert = _ref2.invert,
3027
+ rest = _objectWithoutProperties(_ref2, ["path", "children", "inputs", "check", "invert"]);
3028
+
3029
+ var _useFormValue3 = useFormValue(path, inputs || []),
3030
+ _useFormValue4 = _slicedToArray(_useFormValue3, 2),
3031
+ value = _useFormValue4[0],
3032
+ setValue = _useFormValue4[1];
3033
+
3034
+ var doInvert = function doInvert(v) {
3035
+ return invert ? !v : !!v;
3036
+ };
3037
+
3038
+ 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);
3039
+ };
3040
+ var FormMeta = function FormMeta(_ref3) {
3041
+ var path = _ref3.path,
3042
+ children = _ref3.children,
3043
+ inputs = _ref3.inputs;
2814
3044
 
2815
3045
  var _useFormMeta = useFormMeta(path, inputs || []),
2816
3046
  _useFormMeta2 = _slicedToArray(_useFormMeta, 2),
@@ -3188,7 +3418,7 @@ var EditableBoxPresentation = styled__default(React.forwardRef(function (_ref13,
3188
3418
  onTouchStart: onTouchStart,
3189
3419
  className: 'editable-box ' + (!disabledClick ? 'clickable ' : '') + (editing.isOpen ? 'expanded' : 'collapsed') + ' ' + className,
3190
3420
  onClick: editing.isOpen || disabledClick ? undefined : openBox
3191
- }, !editing.isOpen && !(withDelete || withContextMenu) && React__default.createElement(components.Button, {
3421
+ }, !editing.isOpen && !disabledClick && !(withDelete || withContextMenu) && React__default.createElement(components.Button, {
3192
3422
  tabIndex: tabIndex,
3193
3423
  className: "edit-button",
3194
3424
  small: true,
@@ -3203,7 +3433,7 @@ var EditableBoxPresentation = styled__default(React.forwardRef(function (_ref13,
3203
3433
  onClick: utils.stopPropagation(popup.toggle)
3204
3434
  }, popup.isOpen && React__default.createElement(components.ContextMenu, null, React__default.createElement(components.Li, {
3205
3435
  label: "Editar",
3206
- icon: "edit",
3436
+ icon: "edit-line",
3207
3437
  onClick: openBox
3208
3438
  }), withDelete && React__default.createElement(components.Li, {
3209
3439
  label: "Deletar",
@@ -3406,8 +3636,10 @@ var SharedEditableTabBox = function SharedEditableTabBox(_ref15) {
3406
3636
 
3407
3637
  var EditableBox = function EditableBox(_ref17) {
3408
3638
  var path = _ref17.path,
3639
+ onCancel = _ref17.onCancel,
3640
+ onClose = _ref17.onClose,
3409
3641
  isNew = _ref17.isNew,
3410
- props = _objectWithoutProperties(_ref17, ["path", "isNew"]);
3642
+ props = _objectWithoutProperties(_ref17, ["path", "onCancel", "onClose", "isNew"]);
3411
3643
 
3412
3644
  var editableGroup = React.useContext(EditableContext);
3413
3645
  var form = React.useContext(FormContext);
@@ -3418,13 +3650,14 @@ var EditableBox = function EditableBox(_ref17) {
3418
3650
  return path ? form.resetField([].concat(path)) : form.resetForm();
3419
3651
  };
3420
3652
 
3421
- var onClose = function onClose(skipReset) {
3653
+ var _onClose = function _onClose(skipReset) {
3422
3654
  if (!skipReset) {
3423
3655
  resetField();
3424
3656
  }
3425
3657
 
3426
3658
  form.clearErrors(path);
3427
3659
  editableGroup.standaloneBoxes.unregister(selfRef.current);
3660
+ utils.callIfFunction(onClose);
3428
3661
  };
3429
3662
 
3430
3663
  var modifiedValue = function modifiedValue() {
@@ -3441,8 +3674,10 @@ var EditableBox = function EditableBox(_ref17) {
3441
3674
  props.removeItem(props.menuId);
3442
3675
  };
3443
3676
 
3444
- var onCancel = function onCancel(close) {
3445
- return close();
3677
+ var _onCancel = function _onCancel(close) {
3678
+ if (utils.callIfFunction(onCancel, close) !== false) {
3679
+ close();
3680
+ }
3446
3681
  };
3447
3682
 
3448
3683
  var close = function close() {
@@ -3473,9 +3708,9 @@ var EditableBox = function EditableBox(_ref17) {
3473
3708
  ref: internalBox,
3474
3709
  resetField: resetField,
3475
3710
  onOpen: onOpen,
3476
- onClose: onClose,
3711
+ onClose: _onClose,
3477
3712
  onDelete: onDelete,
3478
- onCancel: onCancel,
3713
+ onCancel: _onCancel,
3479
3714
  onSave: onSave,
3480
3715
  form: form,
3481
3716
  path: path,
@@ -3492,18 +3727,20 @@ var Radiobox = function Radiobox(_ref) {
3492
3727
  var className = _ref.className,
3493
3728
  children = _ref.children,
3494
3729
  disabled = _ref.disabled,
3730
+ isChecked = _ref.isChecked,
3495
3731
  fieldValue = _ref.fieldValue,
3496
3732
  path = _ref.path,
3497
3733
  _ref$tabIndex = _ref.tabIndex,
3498
3734
  tabIndex = _ref$tabIndex === void 0 ? 1 : _ref$tabIndex,
3499
3735
  raw = _ref.raw,
3500
- rest = _objectWithoutProperties(_ref, ["className", "children", "disabled", "fieldValue", "path", "tabIndex", "raw"]);
3736
+ rest = _objectWithoutProperties(_ref, ["className", "children", "disabled", "isChecked", "fieldValue", "path", "tabIndex", "raw"]);
3501
3737
 
3502
3738
  var focused = core.useToggle();
3503
3739
 
3504
3740
  var _useInput = useInput(_objectSpread({
3505
3741
  fieldValue: fieldValue,
3506
- path: path
3742
+ path: path,
3743
+ isChecked: isChecked
3507
3744
  }, rest), raw),
3508
3745
  _useInput2 = _slicedToArray(_useInput, 3),
3509
3746
  value = _useInput2[0],
@@ -3512,6 +3749,7 @@ var Radiobox = function Radiobox(_ref) {
3512
3749
  name = _useInput2$.name,
3513
3750
  hasErrors = _useInput2$.hasErrors;
3514
3751
 
3752
+ var checked = isChecked ? isChecked(value) : value === fieldValue;
3515
3753
  return React__default.createElement("label", {
3516
3754
  "data-drag": "false",
3517
3755
  onClick: function onClick(e) {
@@ -3527,14 +3765,14 @@ var Radiobox = function Radiobox(_ref) {
3527
3765
  onBlur: focused.close,
3528
3766
  disabled: disabled,
3529
3767
  type: "radio",
3530
- checked: value === fieldValue,
3768
+ checked: checked,
3531
3769
  value: fieldValue,
3532
3770
  readOnly: true,
3533
3771
  name: name,
3534
3772
  tabIndex: tabIndex
3535
3773
  }), children && children({
3536
3774
  disabled: disabled,
3537
- checked: value === fieldValue,
3775
+ checked: checked,
3538
3776
  hasErrors: hasErrors,
3539
3777
  focused: focused.isOpen
3540
3778
  }));
@@ -3569,13 +3807,13 @@ var CheckboxContent = styled__default.div.withConfig({
3569
3807
  displayName: "SimpleCheckbox__CheckboxContent",
3570
3808
  componentId: "am8pps-4"
3571
3809
  })(["cursor:pointer;position:relative;padding-left:2rem;", ""], function (props) {
3572
- return props.framed && styled.css(["border:1px solid ", ";border-radius:6px;min-height:3rem;min-width:8rem;:hover{background:rgba(0,0,0,0.05);}:active{background:rgba(0,0,0,0.075);}padding:10px 12px 10px 32px;", " ", " ", " ", " ", ""], utils.getColor('gray210'), utils.media.desktop(_templateObject$3()), function (props) {
3810
+ 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) {
3573
3811
  return props.hasErrors && styled.css(["border-color:", " !important;"], utils.getColor('alert'));
3574
3812
  }, function (props) {
3575
3813
  return props.checked && props.highlightSelected && styled.css(["border-color:", ";background:", ";:hover{background:", ";}", "{", "{color:", ";}}"], utils.getColor('main'), function (props) {
3576
- return polished.transparentize(0.9, utils.getColor("main")(props));
3814
+ return polished.desaturate(0.3, polished.lighten(0.52, utils.getColor("main")(props)));
3577
3815
  }, function (props) {
3578
- return polished.transparentize(0.9, utils.getColor("main")(props));
3816
+ return polished.desaturate(0.3, polished.lighten(0.52, utils.getColor("main")(props)));
3579
3817
  }, CheckboxPseudoInput, components.Icon, utils.getColor('main'));
3580
3818
  }, function (props) {
3581
3819
  return props.checked && props.ultraHighlightSelected && styled.css(["border-color:", ";background:", ";color:white;a,a.link{color:white;}:hover{background:", ";}", "{", "{color:", ";}}", "{color:rgba(255,255,255,0.65);}", "{color:rgba(255,255,255,0.65);}"], utils.getColor('main'), utils.getColor('main'), utils.getColor('main'), CheckboxPseudoInput, components.Icon, utils.getColor('main'), HelpText, DescText);
@@ -3641,7 +3879,7 @@ var CssCircle = styled__default.div.withConfig({
3641
3879
  var TextLabel$1 = styled__default.span.withConfig({
3642
3880
  displayName: "SimpleRadiobox__TextLabel",
3643
3881
  componentId: "qv83xo-1"
3644
- })(["font-size:13px;line-height:16px;margin:2px 0;display:block;flex-grow:1;"]);
3882
+ })(["font-size:13px;line-height:16px;margin:2px 0;display:block;"]);
3645
3883
  var DescText$1 = styled__default.div.withConfig({
3646
3884
  displayName: "SimpleRadiobox__DescText",
3647
3885
  componentId: "qv83xo-2"
@@ -3654,13 +3892,13 @@ var RadioboxContent = styled__default.div.withConfig({
3654
3892
  displayName: "SimpleRadiobox__RadioboxContent",
3655
3893
  componentId: "qv83xo-4"
3656
3894
  })(["cursor:pointer;position:relative;padding-left:2rem;", ""], function (props) {
3657
- return props.framed && styled.css(["border:1px solid ", ";border-radius:6px;min-height:3rem;min-width:8rem;:hover{background:rgba(0,0,0,0.05);}:active{background:rgba(0,0,0,0.075);}padding:10px 12px 10px 32px;", " ", " ", " ", " ", ""], utils.getColor('gray210'), utils.media.desktop(_templateObject$4()), function (props) {
3895
+ 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) {
3658
3896
  return props.hasErrors && styled.css(["border-color:", " !important;"], utils.getColor('alert'));
3659
3897
  }, function (props) {
3660
3898
  return props.checked && props.highlightSelected && styled.css(["border-color:", ";background:", ";:hover{background:", ";}", "{:before{background-color:", ";}}"], utils.getColor('main'), function (props) {
3661
- return polished.transparentize(0.9, utils.getColor("main")(props));
3899
+ return polished.desaturate(0.3, polished.lighten(0.52, utils.getColor("main")(props)));
3662
3900
  }, function (props) {
3663
- return polished.transparentize(0.9, utils.getColor("main")(props));
3901
+ return polished.desaturate(0.3, polished.lighten(0.52, utils.getColor("main")(props)));
3664
3902
  }, CssCircle, utils.getColor('main'));
3665
3903
  }, function (props) {
3666
3904
  return props.checked && props.ultraHighlightSelected && styled.css(["border-color:", ";background:", ";color:white;:hover{background:", ";}", "{:before{background-color:", ";}}", "{color:rgba(255,255,255,0.65);}", "{color:rgba(255,255,255,0.65);}"], utils.getColor('main'), utils.getColor('main'), utils.getColor('main'), CssCircle, utils.getColor('main'), HelpText, DescText$1);
@@ -3699,14 +3937,19 @@ var SimpleRadiobox = styled__default(function (props) {
3699
3937
  var InputboxGroup = styled__default(function (_ref) {
3700
3938
  var path = _ref.path,
3701
3939
  className = _ref.className,
3940
+ column = _ref.column,
3941
+ _ref$as = _ref.as,
3942
+ as = _ref$as === void 0 ? column ? components.SplitColumnsContainer : 'div' : _ref$as,
3702
3943
  children = _ref.children,
3703
3944
  label = _ref.label,
3704
3945
  descText = _ref.descText,
3946
+ helpText = _ref.helpText,
3705
3947
  mandatory = _ref.mandatory,
3706
- rest = _objectWithoutProperties(_ref, ["path", "className", "children", "label", "descText", "mandatory"]);
3948
+ rest = _objectWithoutProperties(_ref, ["path", "className", "column", "as", "children", "label", "descText", "helpText", "mandatory"]);
3707
3949
 
3708
3950
  var size = React__default.Children.count(children);
3709
- var boxes = React__default.createElement("div", {
3951
+ var Wrapper = as;
3952
+ var boxes = React__default.createElement(Wrapper, {
3710
3953
  className: className
3711
3954
  }, React__default.Children.toArray(children).filter(function (child) {
3712
3955
  return child.props;
@@ -3721,7 +3964,8 @@ var InputboxGroup = styled__default(function (_ref) {
3721
3964
  return label ? React__default.createElement(Field, {
3722
3965
  label: label,
3723
3966
  mandatory: mandatory,
3724
- descText: descText
3967
+ descText: descText,
3968
+ helpText: helpText
3725
3969
  }, boxes) : boxes;
3726
3970
  }).withConfig({
3727
3971
  displayName: "InputboxGroup",
@@ -3870,10 +4114,13 @@ var DatePicker = React.forwardRef(function (_ref, maybeInputRef) {
3870
4114
  tabIndex = _ref.tabIndex,
3871
4115
  helpText = _ref.helpText,
3872
4116
  path = _ref.path,
4117
+ _ref$timezoneOffset = _ref.timezoneOffset,
4118
+ timezoneOffset = _ref$timezoneOffset === void 0 ? 0 : _ref$timezoneOffset,
3873
4119
  placeholder = _ref.placeholder,
4120
+ onBlur = _ref.onBlur,
3874
4121
  raw = _ref.raw,
3875
4122
  disabled = _ref.disabled,
3876
- rest = _objectWithoutProperties(_ref, ["format", "min", "max", "weekStartsMonday", "label", "mandatory", "tabIndex", "helpText", "path", "placeholder", "raw", "disabled"]);
4123
+ rest = _objectWithoutProperties(_ref, ["format", "min", "max", "weekStartsMonday", "label", "mandatory", "tabIndex", "helpText", "path", "timezoneOffset", "placeholder", "onBlur", "raw", "disabled"]);
3877
4124
 
3878
4125
  var inputRef = core.useEnsureRef(maybeInputRef);
3879
4126
 
@@ -3882,15 +4129,20 @@ var DatePicker = React.forwardRef(function (_ref, maybeInputRef) {
3882
4129
  }, rest), raw),
3883
4130
  _useInput2 = _slicedToArray(_useInput, 3),
3884
4131
  formValue = _useInput2[0],
3885
- setFormValue = _useInput2[1],
4132
+ setUnoffsetedFormValue = _useInput2[1],
3886
4133
  hasErrors = _useInput2[2].hasErrors;
3887
4134
 
4135
+ var setFormValue = function setFormValue(newV) {
4136
+ return setUnoffsetedFormValue(_isFinite(newV) && newV !== -1 ? newV - timezoneOffset * 36e5 : newV);
4137
+ };
4138
+
3888
4139
  var popup = core.usePopupToggle();
3889
4140
  var calendarElement = React.useRef();
3890
4141
  var messages = React.useContext(core.StartlibsContext).dateMessages;
3891
4142
  var time = Number(formValue);
4143
+ var offsetedTime = time + timezoneOffset * 36e5;
3892
4144
 
3893
- var _useState = React.useState(!isNaN(time) ? utils.formatDate(new Date(time), format, messages) : ''),
4145
+ var _useState = React.useState(!isNaN(time) ? utils.formatDate(new Date(offsetedTime), format, messages) : ''),
3894
4146
  _useState2 = _slicedToArray(_useState, 2),
3895
4147
  textValue = _useState2[0],
3896
4148
  setRawTextValue = _useState2[1];
@@ -3961,17 +4213,18 @@ var DatePicker = React.forwardRef(function (_ref, maybeInputRef) {
3961
4213
  setFormValue(-1);
3962
4214
  } else {
3963
4215
  updateText(date);
3964
- setFormValue(date.getTime());
3965
4216
  }
3966
4217
  }
3967
4218
  };
3968
4219
 
3969
- var onBlur = function onBlur(e) {
4220
+ var _onBlur = function _onBlur(e) {
3970
4221
  var currentTarget = e.currentTarget;
3971
4222
  setTimeout(function () {
3972
4223
  if (!currentTarget.contains(document.activeElement)) {
3973
4224
  confirmValue();
3974
4225
  }
4226
+
4227
+ utils.callIfFunction(onBlur);
3975
4228
  }, 1);
3976
4229
  };
3977
4230
 
@@ -4018,7 +4271,7 @@ var DatePicker = React.forwardRef(function (_ref, maybeInputRef) {
4018
4271
  return e.stopPropagation();
4019
4272
  };
4020
4273
 
4021
- var calendarValue = new Date(!isNaN(time) && formValue !== -1 ? time : now());
4274
+ var calendarValue = new Date(!isNaN(time) && formValue !== -1 ? offsetedTime : now());
4022
4275
  calendarValue.setUTCHours(0, 0, 0);
4023
4276
  return React__default.createElement(Field, {
4024
4277
  helpText: helpText,
@@ -4026,7 +4279,7 @@ var DatePicker = React.forwardRef(function (_ref, maybeInputRef) {
4026
4279
  mandatory: mandatory,
4027
4280
  onClick: onClick,
4028
4281
  onFocus: popup.open,
4029
- onBlur: onBlur
4282
+ onBlur: _onBlur
4030
4283
  }, React__default.createElement(TextInput, {
4031
4284
  raw: true,
4032
4285
  disabled: disabled,
@@ -5242,26 +5495,236 @@ var EditLinkPopup = function EditLinkPopup(_ref7) {
5242
5495
  });
5243
5496
  };
5244
5497
 
5245
- var IconRadioText = styled__default.div.withConfig({
5246
- displayName: "IconRadioBox__IconRadioText",
5498
+ function _templateObject$6() {
5499
+ var data = _taggedTemplateLiteral(["\n padding 1rem;\n "]);
5500
+
5501
+ _templateObject$6 = function _templateObject() {
5502
+ return data;
5503
+ };
5504
+
5505
+ return data;
5506
+ }
5507
+
5508
+ var shouldPreventExpand = function shouldPreventExpand(fn) {
5509
+ return function (e) {
5510
+ return e.target.closest('body,[data-expand="false"],label,input,textarea,button').matches('body,[data-expand="true"]') && fn(e);
5511
+ };
5512
+ };
5513
+
5514
+ var ExpandableBoxStyled = styled__default.div.withConfig({
5515
+ displayName: "ExpandableBox__ExpandableBoxStyled",
5516
+ componentId: "sc-1nsk1wq-0"
5517
+ })(["padding:1rem;border-radius:8px;background:", ";font-size:14px;outline:none;transition:background 0.25s linear;", " & ~ &{margin-top:0.75rem;}", " &{margin-top:0.75rem;}"], utils.getColor('gray240'), function (props) {
5518
+ return props.collapsed ? styled.css(["cursor:pointer;padding-right:3.25rem;:hover{background:", ";}:active{background:", ";}"], function (props) {
5519
+ return polished.darken(0.05, utils.getColor("gray240")(props));
5520
+ }, function (props) {
5521
+ return polished.darken(0.08, utils.getColor("gray240")(props));
5522
+ }) : styled.css(["padding 1.5rem;", " ", ""], utils.media.max(340)(_templateObject$6()), function (props) {
5523
+ return props.fixMarginBottom && "\n padding-bottom: 0.5rem !important;\n ";
5524
+ });
5525
+ }, components.SwitchDiv);
5526
+ var EditIcon = styled__default(components.Icon).attrs({
5527
+ icon: 'edit'
5528
+ }).withConfig({
5529
+ displayName: "ExpandableBox__EditIcon",
5530
+ componentId: "sc-1nsk1wq-1"
5531
+ })(["position:absolute;top:50%;transform:translateY(-50%);right:-24px;color:rgba(0,0,0,0.25);font-size:20px;"]);
5532
+ var checkErrors = function checkErrors() {
5533
+ for (var _len = arguments.length, checks = new Array(_len), _key = 0; _key < _len; _key++) {
5534
+ checks[_key] = arguments[_key];
5535
+ }
5536
+
5537
+ return function (v, setErrors) {
5538
+ var results = checks.map(function (c) {
5539
+ return c(v);
5540
+ }).filter(Boolean);
5541
+
5542
+ if (!results.length) {
5543
+ return true;
5544
+ }
5545
+
5546
+ var messages = results.filter(_negate(_isBoolean));
5547
+
5548
+ if (messages.length) {
5549
+ setErrors.apply(void 0, _toConsumableArray(messages));
5550
+ }
5551
+
5552
+ return false;
5553
+ };
5554
+ };
5555
+ var timing = utils.animationTiming('0.25s ease-out');
5556
+ var switchAnimation = utils.oneWayAnimation('opacity: 1;transform:translateY(0);', 'opacity: 0;', 'opacity: 0; transform:translateY(30px);');
5557
+ var ExpandableBox = function ExpandableBox(_ref) {
5558
+ var children = _ref.children,
5559
+ info = _ref.info,
5560
+ isOpen = _ref.isOpen,
5561
+ openWhen = _ref.openWhen,
5562
+ path = _ref.path,
5563
+ _ref$retargetFilter = _ref.retargetFilter,
5564
+ retargetFilter = _ref$retargetFilter === void 0 ? function (el) {
5565
+ var _el$tagName;
5566
+
5567
+ return (el === null || el === void 0 ? void 0 : (_el$tagName = el.tagName) === null || _el$tagName === void 0 ? void 0 : _el$tagName.toLowerCase()) === "button";
5568
+ } : _ref$retargetFilter,
5569
+ _ref$isValid = _ref.isValid,
5570
+ isValid = _ref$isValid === void 0 ? function () {
5571
+ return true;
5572
+ } : _ref$isValid,
5573
+ fixMarginBottom = _ref.fixMarginBottom,
5574
+ _ref$animation = _ref.animation,
5575
+ animation = _ref$animation === void 0 ? switchAnimation : _ref$animation,
5576
+ _ref$animationTiming = _ref.animationTiming,
5577
+ animationTiming = _ref$animationTiming === void 0 ? timing : _ref$animationTiming;
5578
+ var flipAnimation = core.useLazyConstant(components.willUseFlipSwitch);
5579
+
5580
+ var _useFormValue = form.useFormValue(path),
5581
+ _useFormValue2 = _slicedToArray(_useFormValue, 3),
5582
+ value = _useFormValue2[0],
5583
+ setValue = _useFormValue2[1],
5584
+ getValue = _useFormValue2[2];
5585
+
5586
+ var _useTransientErrorHel = useTransientErrorHelper(),
5587
+ _useTransientErrorHel2 = _slicedToArray(_useTransientErrorHel, 2),
5588
+ _setErrors = _useTransientErrorHel2[0],
5589
+ clearErrors = _useTransientErrorHel2[1];
5590
+
5591
+ var setErrors = function setErrors() {
5592
+ for (var _len2 = arguments.length, errors = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
5593
+ errors[_key2] = arguments[_key2];
5594
+ }
5595
+
5596
+ _setErrors(errors.length ? errors.map(function (k) {
5597
+ return _isString(k) ? [k, ''] : k;
5598
+ }) : [[path, '']]);
5599
+
5600
+ return true;
5601
+ };
5602
+
5603
+ var expand = core.useToggle(isOpen, function (newV, prevV) {
5604
+ if (newV === 0 || prevV === 0) {
5605
+ return;
5606
+ }
5607
+
5608
+ if (newV === false) {
5609
+ var result = isValid(getValue(), setErrors);
5610
+
5611
+ if (result === true) {
5612
+ clearErrors();
5613
+ }
5614
+
5615
+ return result;
5616
+ }
5617
+ });
5618
+ var openWhenResult = utils.callIfFunction(openWhen);
5619
+ React.useEffect(function () {
5620
+ if (openWhenResult) {
5621
+ expand.open();
5622
+ }
5623
+ }, [openWhenResult]);
5624
+ React.useEffect(function () {
5625
+ return function () {
5626
+ if (expand.get() === 0) {
5627
+ expand.close();
5628
+ }
5629
+ };
5630
+ }, [expand.isOpen]);
5631
+ var utils$1 = core.useLazyConstant(function () {
5632
+ return {
5633
+ close: utils.constrainEvent(expand.close),
5634
+ setValue: setValue
5635
+ };
5636
+ });
5637
+
5638
+ var onBlur = function onBlur(e) {
5639
+ if (e.currentTarget !== e.relatedTarget && (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget))) {
5640
+ if (utils.callIfFunction(retargetFilter, e.relatedTarget)) {
5641
+ e.target.focus();
5642
+ } else {
5643
+ expand.close();
5644
+ }
5645
+ }
5646
+ };
5647
+
5648
+ return React__default.createElement(ExpandableBoxStyled, {
5649
+ tabIndex: -1,
5650
+ onBlur: onBlur,
5651
+ collapsed: !expand.isOpen,
5652
+ fixMarginBottom: fixMarginBottom,
5653
+ onClick: shouldPreventExpand(expand.open)
5654
+ }, React__default.createElement(FlipDiv$1, {
5655
+ key: expand.isOpen,
5656
+ useAnimation: flipAnimation,
5657
+ animation: animation,
5658
+ animationTiming: animationTiming
5659
+ }, 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))));
5660
+ };
5661
+
5662
+ var overflowEffect = function overflowEffect(element) {
5663
+ var _element$offsetParent;
5664
+
5665
+ if (!(element === null || element === void 0 ? void 0 : (_element$offsetParent = element.offsetParent) === null || _element$offsetParent === void 0 ? void 0 : _element$offsetParent.parentElement)) {
5666
+ return;
5667
+ }
5668
+
5669
+ var parentDom = element.offsetParent.parentElement;
5670
+ var previousOverflow = parentDom.style.overflow;
5671
+ parentDom.style.overflow = 'hidden';
5672
+ return function () {
5673
+ return parentDom.style.overflow = previousOverflow;
5674
+ };
5675
+ };
5676
+
5677
+ var FlipDivStyle = styled__default.div.withConfig({
5678
+ displayName: "ExpandableBox__FlipDivStyle",
5679
+ componentId: "sc-1nsk1wq-2"
5680
+ })(["position:relative;"]);
5681
+
5682
+ var FlipDiv$1 = function FlipDiv(_ref2) {
5683
+ var useAnimation = _ref2.useAnimation,
5684
+ animation = _ref2.animation,
5685
+ animationTiming = _ref2.animationTiming,
5686
+ props = _objectWithoutProperties(_ref2, ["useAnimation", "animation", "animationTiming"]);
5687
+
5688
+ var ref = React.useRef();
5689
+ useAnimation(ref, null, null, {
5690
+ switchAnimation: animation,
5691
+ timing: animationTiming,
5692
+ effect: overflowEffect
5693
+ });
5694
+ return React__default.createElement(FlipDivStyle, _extends({}, props, {
5695
+ ref: ref
5696
+ }));
5697
+ };
5698
+
5699
+ var IconRadioBoxText = styled__default.div.withConfig({
5700
+ displayName: "IconRadioBox__IconRadioBoxText",
5247
5701
  componentId: "ka3uhk-0"
5248
- })(["flex-grow:1;padding:0 0.5rem 0.5rem;min-height:2rem;display:flex;justify-content:center;align-items:center;text-align:center;"]);
5249
- var IconContainer = styled__default.div.withConfig({
5250
- displayName: "IconRadioBox__IconContainer",
5702
+ })(["flex-grow:1;padding:0 0.5rem 0.5rem;min-height:2rem;display:flex;justify-content:center;align-items:center;text-align:center;font-size:12px;color:", ";", " ", ""], utils.getColor('gray120'), function (props) {
5703
+ return props.checked && styled.css(["color:", ";"], utils.getColor('main'));
5704
+ }, function (props) {
5705
+ return props.highlightedDesc && styled.css(["background:", ";padding:0.25rem 0.5rem;min-height:3rem;", ""], utils.getColor('gray240'), function (props) {
5706
+ return props.checked && styled.css(["background:", ";"], function (props) {
5707
+ return polished.desaturate(0.3, polished.lighten(0.52, utils.getColor("main")(props)));
5708
+ });
5709
+ });
5710
+ });
5711
+ var IconRadioBoxIconContainer = styled__default.div.withConfig({
5712
+ displayName: "IconRadioBox__IconRadioBoxIconContainer",
5251
5713
  componentId: "ka3uhk-1"
5252
5714
  })(["display:flex;justify-content:center;align-items:center;text-align:center;"]);
5253
5715
  var Wrapper = styled__default.div.withConfig({
5254
5716
  displayName: "IconRadioBox__Wrapper",
5255
5717
  componentId: "ka3uhk-2"
5256
- })(["width:100%;display:flex;flex-direction:column;color:", ";cursor:pointer;border-radius:6px;background-color:white;border:1px solid ", ";", "{font-size:100px;line-height:50px;line-height:76px;}", " input{opacity:0;position:absolute;left:-20000000px;}", " ", ""], utils.getColor('gray150'), utils.getColor('gray210'), components.Icon, function (props) {
5257
- return props.checked ? styled.css(["color:", ";border-color:", ";", "{}"], utils.getColor('main'), utils.getColor('main'), IconRadioText) : styled.css([":hover ", "{}"], IconRadioText);
5718
+ })(["width:100%;display:flex;flex-direction:column;cursor:pointer;border-radius:6px;background-color:white;border:1px solid ", ";overflow:hidden;color:", ";", "{font-size:100px;line-height:50px;line-height:76px;width:100%;}", " input{opacity:0;position:absolute;left:-20000000px;}", " ", ""], utils.getColor('gray210'), utils.getColor('gray150'), components.Icon, function (props) {
5719
+ return props.checked && styled.css(["color:", ";border-color:", ";"], utils.getColor('main'), utils.getColor('main'));
5258
5720
  }, function (props) {
5259
- return props.focused && "\n ".concat(IconContainer, "::after {\n content: '';\n position: absolute;\n top: -4px;\n right: -4px;\n left: -4px;\n bottom: -4px;\n border-radius: 10px;\n border: 3px solid rgba(0, 0, 0, 0.15);\n }");
5721
+ return props.focused && "\n ".concat(IconRadioBoxIconContainer, "::after {\n content: '';\n position: absolute;\n top: -4px;\n right: -4px;\n left: -4px;\n bottom: -4px;\n border-radius: 10px;\n border: 3px solid rgba(0, 0, 0, 0.15);\n }");
5260
5722
  }, utils.customTheme("IconRadioBox"));
5261
5723
  var IconRadioBox = styled__default(function (_ref) {
5262
5724
  var icon = _ref.icon,
5263
5725
  label = _ref.label,
5264
- props = _objectWithoutProperties(_ref, ["icon", "label"]);
5726
+ highlightedDesc = _ref.highlightedDesc,
5727
+ props = _objectWithoutProperties(_ref, ["icon", "label", "highlightedDesc"]);
5265
5728
 
5266
5729
  return React__default.createElement(Radiobox, props, function (_ref2) {
5267
5730
  var checked = _ref2.checked,
@@ -5271,9 +5734,12 @@ var IconRadioBox = styled__default(function (_ref) {
5271
5734
  return React__default.createElement(Wrapper, {
5272
5735
  checked: checked,
5273
5736
  focused: focused
5274
- }, React__default.createElement(IconContainer, null, React__default.createElement(components.Icon, {
5737
+ }, React__default.createElement(IconRadioBoxIconContainer, null, React__default.createElement(components.Icon, {
5275
5738
  icon: icon
5276
- })), checked, React__default.createElement(IconRadioText, null, label));
5739
+ })), checked, React__default.createElement(IconRadioBoxText, {
5740
+ highlightedDesc: highlightedDesc,
5741
+ checked: checked
5742
+ }, label));
5277
5743
  });
5278
5744
  }).withConfig({
5279
5745
  displayName: "IconRadioBox",
@@ -5295,7 +5761,7 @@ var Toggle = styled__default.div.withConfig({
5295
5761
  var ToggleLabel = styled__default.div.withConfig({
5296
5762
  displayName: "ToggleCheckbox__ToggleLabel",
5297
5763
  componentId: "sc-11ob8ah-2"
5298
- })(["flex-basis:0;flex-grow:1;display:inline-block;"]);
5764
+ })(["flex-basis:0;flex-grow:1;display:inline-block;font-size:13px;"]);
5299
5765
  var DescText$2 = styled__default.div.withConfig({
5300
5766
  displayName: "ToggleCheckbox__DescText",
5301
5767
  componentId: "sc-11ob8ah-3"
@@ -5320,7 +5786,7 @@ var ToggleCheckbox = styled__default(function (_ref) {
5320
5786
  checked = _ref2.checked,
5321
5787
  hasErrors = _ref2.hasErrors,
5322
5788
  focused = _ref2.focused;
5323
- return React__default.createElement(React__default.Fragment, null, React__default.createElement(ToggleLabel, null, label, descText && React__default.createElement(DescText$2, null, descText)), React__default.createElement(Toggle, {
5789
+ return React__default.createElement(React__default.Fragment, null, React__default.createElement(ToggleLabel, null, label, helpText && React__default.createElement(HelpText, null, " ", helpText), descText && React__default.createElement(DescText$2, null, descText)), React__default.createElement(Toggle, {
5324
5790
  checked: checked
5325
5791
  }));
5326
5792
  });
@@ -5333,10 +5799,10 @@ var ToggleCheckbox = styled__default(function (_ref) {
5333
5799
  return props.disabled && "\n opacity: 0.8;\n pointer-events:none;\n ";
5334
5800
  });
5335
5801
 
5336
- function _templateObject$6() {
5337
- var data = _taggedTemplateLiteral(["\n padding-left: 0.25rem;\n padding-right: 0.25rem;\n min-width: 0;\n "]);
5802
+ function _templateObject$7() {
5803
+ var data = _taggedTemplateLiteral(["\n min-width: 0;\n ", "\n "]);
5338
5804
 
5339
- _templateObject$6 = function _templateObject() {
5805
+ _templateObject$7 = function _templateObject() {
5340
5806
  return data;
5341
5807
  };
5342
5808
 
@@ -5345,7 +5811,7 @@ function _templateObject$6() {
5345
5811
  var TabButton = styled__default(components.Button).withConfig({
5346
5812
  displayName: "TabRadiobox__TabButton",
5347
5813
  componentId: "sc-1vu3bcn-0"
5348
- })(["width:100%;margin-left:0;padding:9px 1rem;flex-grow:1;background:", ";box-shadow:none;color:", ";border:1px solid ", ";border-left-width:0;:hover{background:", ";}", " ", " ", " ", " ", " ", ""], function (props) {
5814
+ })(["width:100%;margin-left:0;padding:9px 1rem;flex-grow:1;background:", ";box-shadow:none;color:", ";border:1px solid ", ";border-left-width:0;height:100%;:hover{background:", ";}", " ", " ", " ", " ", " ", ""], function (props) {
5349
5815
  return props.white ? 'white' : utils.getColor('gray240');
5350
5816
  }, utils.getColor('gray120'), utils.getColor('gray210'), function (props) {
5351
5817
  return polished.desaturate(0.6, polished.lighten(0.5, utils.getColor("main")(props)));
@@ -5355,7 +5821,9 @@ var TabButton = styled__default(components.Button).withConfig({
5355
5821
  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 ";
5356
5822
  }, function (props) {
5357
5823
  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 ";
5358
- }, utils.media.mobile(_templateObject$6()), utils.customTheme('TabButton'));
5824
+ }, utils.media.mobile(_templateObject$7(), function (props) {
5825
+ return props.icon ? "\n padding-left: 1.25rem;\n padding-right: 1rem;\n " : "\n padding-left: 0.25rem;\n padding-right: 0.25rem;\n ";
5826
+ }), utils.customTheme('TabButton'));
5359
5827
  var InnerButton = styled__default.a.withConfig({
5360
5828
  displayName: "TabRadiobox__InnerButton",
5361
5829
  componentId: "sc-1vu3bcn-1"
@@ -5511,6 +5979,7 @@ exports.EnhanceInput = EnhanceInput;
5511
5979
  exports.ErrorFilterProvider = ErrorFilterProvider;
5512
5980
  exports.Errors = Errors;
5513
5981
  exports.ErrorsContext = ErrorsContext;
5982
+ exports.ExpandableBox = ExpandableBox;
5514
5983
  exports.Field = Field;
5515
5984
  exports.FieldDescription = FieldDescription;
5516
5985
  exports.FileInput = FileInput;
@@ -5522,7 +5991,9 @@ exports.FormMeta = FormMeta;
5522
5991
  exports.FormValue = FormValue;
5523
5992
  exports.HelpText = HelpText;
5524
5993
  exports.IconRadioBox = IconRadioBox;
5525
- exports.IconRadioText = IconRadioText;
5994
+ exports.IconRadioBoxIconContainer = IconRadioBoxIconContainer;
5995
+ exports.IconRadioBoxText = IconRadioBoxText;
5996
+ exports.IfFormValue = IfFormValue;
5526
5997
  exports.InputboxGroup = InputboxGroup;
5527
5998
  exports.Option = Option;
5528
5999
  exports.PathContext = PathContext;
@@ -5531,22 +6002,24 @@ exports.RadioboxGroup = RadioboxGroup;
5531
6002
  exports.RichText = RichText;
5532
6003
  exports.RichTextContainer = RichTextContainer;
5533
6004
  exports.RichTextInput = RichTextInput;
6005
+ exports.SEPARATOR = SEPARATOR;
5534
6006
  exports.SimpleCheckbox = SimpleCheckbox;
5535
6007
  exports.SimpleRadiobox = SimpleRadiobox;
6008
+ exports.TabButton = TabButton;
5536
6009
  exports.TabRadiobox = TabRadiobox;
5537
6010
  exports.TextInput = TextInput;
5538
6011
  exports.ToggleCheckbox = ToggleCheckbox;
5539
6012
  exports.WithForm = WithForm;
5540
6013
  exports.WithImageInput = WithImageInput;
6014
+ exports.checkErrors = checkErrors;
5541
6015
  exports.enhanceInput = enhanceInput;
5542
6016
  exports.enhancedInputDisplayName = enhancedInputDisplayName;
5543
6017
  exports.getFormResponse = getFormResponse;
5544
6018
  exports.getFormValues = getFormValues;
5545
6019
  exports.useConfirmDialog = useConfirmDialog;
5546
6020
  exports.useConfirmDialogWithProps = useConfirmDialogWithProps;
5547
- exports.useDialog = useDialog;
5548
- exports.useDialogWithToggle = useDialogWithToggle;
5549
6021
  exports.useErrors = useErrors;
6022
+ exports.useErrorsUtils = useErrorsUtils;
5550
6023
  exports.useForm = useForm;
5551
6024
  exports.useFormMeta = useFormMeta;
5552
6025
  exports.useFormValue = useFormValue;
@@ -5555,6 +6028,7 @@ exports.useHasError = useHasError;
5555
6028
  exports.useInput = useInput;
5556
6029
  exports.useProvideErrors = useProvideErrors;
5557
6030
  exports.useTextInput = useTextInput;
6031
+ exports.useTransientErrorHelper = useTransientErrorHelper;
5558
6032
  exports.validation = validation;
5559
6033
  exports.withForm = withForm;
5560
6034
  exports.withForm2 = withForm2;