@7shifts/sous-chef 2.5.1 → 2.8.0

package/dist/index.js

@@ -163,7 +163,7 @@ var Inline = function Inline(props) {
   }));
 };
 
-var styles$2 = {"spinner":"_2wtfD","rotator":"_2Jprn","spinner--block":"_Jmh8M","path":"_3zucL","dash":"_3ZqYM","path--mint":"_3XYKx","path--disabled":"_1pYbs","path--contrast":"_3ofDF"};
+var styles$2 = {"spinner":"_2wtfD","rotator":"_2Jprn","spinner--block":"_Jmh8M","path":"_3zucL","dash":"_3ZqYM","path--mint":"_3XYKx","path--disabled":"_1pYbs","path--contrast":"_3ofDF","path--pride":"_e0OH1"};
 
 var Spinner = function Spinner(_ref) {
   var _classnames;
@@ -183,7 +183,75 @@ var Spinner = function Spinner(_ref) {
     height: size,
     viewBox: "0 0 66 66",
     "data-testid": "spinner"
-  }, React__default.createElement("circle", {
+  }, React__default.createElement("defs", null, React__default.createElement("linearGradient", {
+    id: "prideGradient"
+  }, React__default.createElement("stop", {
+    offset: "0",
+    stopColor: "#000000"
+  }), React__default.createElement("stop", {
+    offset: "0.0500",
+    stopColor: "#000000"
+  }), React__default.createElement("stop", {
+    offset: "0.0501",
+    stopColor: "#ffafc7"
+  }), React__default.createElement("stop", {
+    offset: "0.15",
+    stopColor: "#ffafc7"
+  }), React__default.createElement("stop", {
+    offset: "0.1501",
+    stopColor: "#73d7ee"
+  }), React__default.createElement("stop", {
+    offset: "0.25",
+    stopColor: "#73d7ee"
+  }), React__default.createElement("stop", {
+    offset: "0.2501",
+    stopColor: "#613915"
+  }), React__default.createElement("stop", {
+    offset: "0.35",
+    stopColor: "#613915"
+  }), React__default.createElement("stop", {
+    offset: "0.3501",
+    stopColor: "#ffffff"
+  }), React__default.createElement("stop", {
+    offset: "0.45",
+    stopColor: "#ffffff"
+  }), React__default.createElement("stop", {
+    offset: "0.4501",
+    stopColor: "#e50000"
+  }), React__default.createElement("stop", {
+    offset: "0.55",
+    stopColor: "#e50000"
+  }), React__default.createElement("stop", {
+    offset: "0.5501",
+    stopColor: "#ff8d00"
+  }), React__default.createElement("stop", {
+    offset: "0.65",
+    stopColor: "#ff8d00"
+  }), React__default.createElement("stop", {
+    offset: "0.6501",
+    stopColor: "#ddee00"
+  }), React__default.createElement("stop", {
+    offset: "0.75",
+    stopColor: "#ddee00"
+  }), React__default.createElement("stop", {
+    offset: "0.7501",
+    stopColor: "#028121"
+  }), React__default.createElement("stop", {
+    offset: "0.85",
+    stopColor: "#028121"
+  }), React__default.createElement("stop", {
+    offset: "0.8501",
+    stopColor: "#004cff"
+  }), React__default.createElement("stop", {
+    offset: "0.95",
+    stopColor: "#004cff"
+  }), React__default.createElement("stop", {
+    offset: "0.9501",
+    stopColor: "#760088"
+  }), React__default.createElement("stop", {
+    offset: "1",
+    stopColor: "#760088"
+  }))), React__default.createElement("circle", {
     className: classnames(styles$2['path'], styles$2["path--" + theme]),
     fill: "none",
     strokeWidth: "6",
@@ -2735,6 +2803,28 @@ var IconUndo = function IconUndo(props) {
 
 IconUndo.displayName = 'IconUndo';
 
+var IconUniversity = function IconUniversity(props) {
+  return React__default.createElement("svg", Object.assign({
+    viewBox: "0 0 20 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "data-testid": "icon-university",
+    style: getIconStyles(props)
+  }, props), React__default.createElement("g", {
+    clipPath: "url(#icon-university_svg__a)"
+  }, React__default.createElement("path", {
+    d: "M19.375 17.5h-.625v-1.563a.937.937 0 0 0-.938-.937H16.25V8.125H15V15h-2.5V8.125h-1.25V15h-2.5V8.125H7.5V15H5V8.125H3.75V15H2.187a.937.937 0 0 0-.937.938V17.5H.625a.625.625 0 0 0-.625.625v.313a.313.313 0 0 0 .313.312h19.375a.313.313 0 0 0 .312-.313v-.312a.625.625 0 0 0-.625-.625ZM2.5 16.25h15v1.25h-15v-1.25ZM19.698 5.312l-9.105-3.966a1.875 1.875 0 0 0-1.186 0L.302 5.312A.469.469 0 0 0 0 5.752v.343c0 .259.21.468.469.468h.781v.47c0 .258.21.468.469.468H18.28c.26 0 .469-.21.469-.469v-.468h.781c.26 0 .469-.21.469-.47v-.342a.469.469 0 0 0-.302-.439ZM17.5 6.25h-15v-.531L9.842 2.52a.625.625 0 0 1 .316 0L17.5 5.72v.531Z",
+    fill: "currentColor"
+  })), React__default.createElement("defs", null, React__default.createElement("clipPath", {
+    id: "icon-university_svg__a"
+  }, React__default.createElement("path", {
+    fill: "#fff",
+    d: "M0 0h20v20H0z"
+  }))));
+};
+
+IconUniversity.displayName = 'IconUniversity';
+
 var IconUserComputer = function IconUserComputer(props) {
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
@@ -3609,7 +3699,7 @@ var useFieldControllers = function useFieldControllers(_ref) {
         return formik.setFieldValue(name, e.target.value);
       },
       onBlur: _onBlur ? function (e) {
-        controllers.onBlur(e);
+        _onBlur && _onBlur(e.target.value);
         currencyBlur();
       } : function () {
         formik.setFieldTouched(name);
@@ -4491,7 +4581,7 @@ var useRadioGroupFieldControllers = function useRadioGroupFieldControllers(_ref)
       error: error !== undefined ? controllers.error : formikState.error,
       value: value !== undefined ? controllers.value : formikState.value,
       onChange: function onChange(e) {
-        formik.setFieldValue(name, e.target.checked);
+        formik.setFieldValue(name, e.target.value);
         _onChange && _onChange(e.target.value);
       }
     });
@@ -5117,8 +5207,17 @@ var DatePickerCalendar = function DatePickerCalendar(_ref) {
       children = _ref.children,
       onBlur = _ref.onBlur,
       onFocus = _ref.onFocus,
-      tabIndex = _ref.tabIndex;
+      tabIndex = _ref.tabIndex,
+      showCalendar = _ref.showCalendar,
+      onClickOutside = _ref.onClickOutside;
   var inputPosition = inputNode.getBoundingClientRect();
+  var calendarRef = React.useRef(null);
+  useOnClickOutside(calendarRef, onClickOutside);
+
+  if (!showCalendar) {
+    return null;
+  }
+
   return React__default.createElement(Portal, null, React__default.createElement("div", {
     className: classNames.overlayWrapper,
     onBlur: onBlur,
@@ -5128,7 +5227,8 @@ var DatePickerCalendar = function DatePickerCalendar(_ref) {
       zIndex: 9999,
       left: inputPosition.left,
       top: inputPosition.top + window.scrollY + inputPosition.height + 3
-    }
+    },
+    ref: calendarRef
   }, React__default.createElement("div", {
     className: classNames.overlay
   }, children)));
@@ -5198,6 +5298,11 @@ var DateField = function DateField(_ref) {
       _ref$readOnly = _ref.readOnly,
       readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly;
   var inputRef = React.useRef();
+
+  var _useState = React.useState(false),
+      showCalendar = _useState[0],
+      setShowCalendar = _useState[1];
+
   var controllers = useDateFieldControllers({
     name: name,
     id: inputId,
@@ -5239,24 +5344,37 @@ var DateField = function DateField(_ref) {
     defaultValue: defaultValue,
     value: controllers.value || '',
     onDayChange: controllers.onChange,
-    onDayPickerHide: controllers.onBlur,
+    onDayPickerHide: function onDayPickerHide() {
+      controllers.onBlur();
+      setShowCalendar(false);
+    },
     overlayComponent: function overlayComponent(props) {
       return React__default.createElement(DatePickerCalendar, Object.assign({}, props, {
-        inputNode: inputRef.current
+        inputNode: inputRef.current,
+        showCalendar: showCalendar,
+        onClickOutside: function onClickOutside() {
+          return setShowCalendar(false);
+        }
       }));
     },
     dayPickerProps: dayPickerProps,
     inputProps: {
       name: name,
       id: controllers.id,
-      className: classnames(inputStyles['date-field'], (_classnames = {}, _classnames[inputStyles['date--invalid']] = hasError, _classnames)),
+      className: classnames(inputStyles['date-field'], (_classnames = {}, _classnames[inputStyles['date-field--invalid']] = hasError, _classnames)),
       'data-testid': "date-field-" + name,
       'aria-describedby': hasError ? controllers.id + "-error-message" : controllers.id + "-describer",
       'aria-invalid': hasError,
       autoComplete: 'off',
       ref: inputRef,
       readOnly: readOnly,
-      disabled: disabled
+      disabled: disabled,
+      onFocus: function onFocus() {
+        return setShowCalendar(true);
+      }
+    },
+    onDayPickerShow: function onDayPickerShow() {
+      return setShowCalendar(true);
     }
   })));
 };
@@ -5294,7 +5412,7 @@ var useRangeFieldControllers = function useRangeFieldControllers(_ref) {
 
   if (formik && formikState) {
     return _extends({}, initialControllers, {
-      error: error !== undefined ? initialControllers.error : formikState.error,
+      error: error !== undefined ? initialControllers.error : getFormikError(formikState.error),
       value: value !== undefined ? initialControllers.value : formikState.value,
       onChange: _onChange ? initialControllers.onChange : function (newValue) {
         formik.setFieldValue(name, newValue === undefined ? null : newValue);
@@ -5308,12 +5426,33 @@ var useRangeFieldControllers = function useRangeFieldControllers(_ref) {
   return initialControllers;
 };
 
+var getFormikError = function getFormikError(error) {
+  if (!error) {
+    return undefined;
+  }
+
+  if (typeof error === 'string') {
+    return error;
+  }
+
+  if (error.start) {
+    return error.start;
+  }
+
+  if (error.end) {
+    return error.end;
+  }
+
+  return undefined;
+};
+
 var styles$s = {"container":"_1Ini2","wrapper":"_21VnL","interactionDisabled":"_wJ6Cb","DayPicker-Day":"_1c48y","navBar":"_3KwsN","todayButton":"_10CBO","navButtonInteractionDisabled":"_dHL-D","navButtonPrev":"_6kNi3","navButtonNext":"_13W_e","months":"_1FeSY","month":"_wU6A4","caption":"_AMbAo","weekdays":"_1LEst","weekdaysRow":"_2XECo","weekday":"_1C5ry","body":"_11F-Y","week":"_3MAFk","day":"_mG73F","disabled":"_2pgnH","selected":"_MtLaz","outside":"_CRqyX","footer":"_2KG9-","today":"_2JA2y","overlayWrapper":"_1JWbc","overlay":"_2tL6g","weekNumber":"_3u72O","text-field":"_25rf7","date-range-field":"_3qVhi","text-field--invalid":"_2M9Ud","text-field--prefixed":"_3TUb2","text-field--suffixed":"_foqL0","date-range-field--invalid":"_3df9R","date-range-field--disabled":"_2Nkht"};
 
 var FromDate = function FromDate(_ref) {
   var name = _ref.name,
       id = _ref.id,
       format = _ref.format,
+      disabledDays = _ref.disabledDays,
       start = _ref.start,
       end = _ref.end,
       placeholder = _ref.placeholder,
@@ -5321,12 +5460,29 @@ var FromDate = function FromDate(_ref) {
       disabled = _ref.disabled,
       readOnly = _ref.readOnly,
       onChange = _ref.onChange,
-      onDayClick = _ref.onDayClick;
+      _onDayClick = _ref.onDayClick;
+
+  var _useState = React.useState(false),
+      showCalendar = _useState[0],
+      setShowCalendar = _useState[1];
+
   var inputRef = React.useRef();
   var modifiers = {
     from: start,
     to: end
   };
+  var disabledDaysChecks = end ? [{
+    after: end
+  }] : [];
+
+  if (disabledDays) {
+    if (Array.isArray(disabledDays)) {
+      disabledDaysChecks.push.apply(disabledDaysChecks, disabledDays);
+    } else {
+      disabledDaysChecks.push(disabledDays);
+    }
+  }
+
   var dayPickerProps = {
     classNames: styles$s,
     months: MONTH_NAMES,
@@ -5340,12 +5496,18 @@ var FromDate = function FromDate(_ref) {
       from: start,
       to: end
     }],
-    disabledDays: {
-      after: end
-    },
+    disabledDays: disabledDaysChecks,
     toMonth: end,
     modifiers: modifiers,
-    onDayClick: onDayClick
+    onDayClick: function onDayClick(_, activeModifiers) {
+      var isDateDisabled = Object.keys(activeModifiers).find(function (modifier) {
+        return modifier;
+      });
+
+      if (!Boolean(isDateDisabled)) {
+        _onDayClick();
+      }
+    }
   };
   return React__default.createElement(DayPickerInput, {
     format: format,
@@ -5356,9 +5518,16 @@ var FromDate = function FromDate(_ref) {
     parseDate: parseDate,
     placeholder: placeholder,
     onDayChange: onChange,
+    onDayPickerHide: function onDayPickerHide() {
+      return setShowCalendar(false);
+    },
     overlayComponent: function overlayComponent(props) {
       return React__default.createElement(DatePickerCalendar, Object.assign({}, props, {
-        inputNode: inputRef.current
+        inputNode: inputRef.current,
+        showCalendar: showCalendar,
+        onClickOutside: function onClickOutside() {
+          return setShowCalendar(false);
+        }
       }));
     },
     dayPickerProps: dayPickerProps,
@@ -5370,7 +5539,13 @@ var FromDate = function FromDate(_ref) {
       readOnly: readOnly,
       disabled: disabled,
       'data-testid': "range-picker-field-from-" + name,
-      type: 'text'
+      type: 'text',
+      onFocus: function onFocus() {
+        return setShowCalendar(true);
+      }
+    },
+    onDayPickerShow: function onDayPickerShow() {
+      return setShowCalendar(true);
     }
   });
 };
@@ -5378,17 +5553,36 @@ var FromDate = function FromDate(_ref) {
 var ToDate = function ToDate(_ref, ref) {
   var name = _ref.name,
       format = _ref.format,
+      disabledDays = _ref.disabledDays,
       start = _ref.start,
       end = _ref.end,
       placeholder = _ref.placeholder,
       weekStart = _ref.weekStart,
       disabled = _ref.disabled,
       readOnly = _ref.readOnly,
-      onChange = _ref.onChange;
+      onChange = _ref.onChange,
+      _onBlur = _ref.onBlur;
+
+  var _useState = React.useState(false),
+      showCalendar = _useState[0],
+      setShowCalendar = _useState[1];
+
   var modifiers = {
     from: start,
     to: end
   };
+  var disabledDaysChecks = start ? [{
+    before: start
+  }] : [];
+
+  if (disabledDays) {
+    if (Array.isArray(disabledDays)) {
+      disabledDaysChecks.push.apply(disabledDaysChecks, disabledDays);
+    } else {
+      disabledDaysChecks.push(disabledDays);
+    }
+  }
+
   var dayPickerProps = {
     classNames: styles$s,
     months: MONTH_NAMES,
@@ -5402,9 +5596,7 @@ var ToDate = function ToDate(_ref, ref) {
       from: start,
       to: end
     }],
-    disabledDays: {
-      before: start
-    },
+    disabledDays: disabledDaysChecks,
     modifiers: modifiers,
     month: end || start,
     fromMonth: start
@@ -5418,9 +5610,16 @@ var ToDate = function ToDate(_ref, ref) {
     parseDate: parseDate,
     placeholder: placeholder,
     onDayChange: onChange,
+    onDayPickerHide: function onDayPickerHide() {
+      return setShowCalendar(false);
+    },
     overlayComponent: function overlayComponent(props) {
       return React__default.createElement(DatePickerCalendar, Object.assign({}, props, {
-        inputNode: ref === null || ref === void 0 ? void 0 : ref.current
+        inputNode: ref === null || ref === void 0 ? void 0 : ref.current,
+        showCalendar: showCalendar,
+        onClickOutside: function onClickOutside() {
+          return setShowCalendar(false);
+        }
       }));
     },
     dayPickerProps: dayPickerProps,
@@ -5431,7 +5630,16 @@ var ToDate = function ToDate(_ref, ref) {
       readOnly: readOnly,
       disabled: disabled,
       'data-testid': "range-picker-field-to-" + name,
-      type: 'text'
+      type: 'text',
+      onFocus: function onFocus() {
+        return setShowCalendar(true);
+      },
+      onBlur: function onBlur() {
+        setTimeout(_onBlur, 200);
+      }
+    },
+    onDayPickerShow: function onDayPickerShow() {
+      return setShowCalendar(true);
     }
   });
 };
@@ -5439,11 +5647,12 @@ var ToDate = function ToDate(_ref, ref) {
 var ToDate$1 = React.forwardRef(ToDate);
 
 var DateRangeField = function DateRangeField(_ref) {
-  var _classnames, _classnames2;
+  var _classnames;
 
   var name = _ref.name,
       inputId = _ref.id,
       value = _ref.value,
+      disabledDays = _ref.disabledDays,
       _ref$format = _ref.format,
       format = _ref$format === void 0 ? 'MM/dd/yyyy' : _ref$format,
       onChange = _ref.onChange,
@@ -5478,7 +5687,7 @@ var DateRangeField = function DateRangeField(_ref) {
       start = _controllers$value.start,
       end = _controllers$value.end;
   return React__default.createElement(Field, Object.assign({}, fieldProps), React__default.createElement("div", {
-    className: classnames(styles$s['date-range-field'], (_classnames = {}, _classnames[styles$s['date-range-field--invalid']] = hasError, _classnames), (_classnames2 = {}, _classnames2[styles$s['date-range-field--disabled']] = disabled, _classnames2))
+    className: classnames(styles$s['date-range-field'], (_classnames = {}, _classnames[styles$s['date-range-field--invalid']] = hasError, _classnames[styles$s['date-range-field--disabled']] = disabled, _classnames))
   }, React__default.createElement(IconCalendarAlt, {
     size: "medium",
     color: GREY400
@@ -5491,6 +5700,7 @@ var DateRangeField = function DateRangeField(_ref) {
     placeholder: placeholder || format.toUpperCase(),
     weekStart: weekStart,
     disabled: disabled,
+    disabledDays: disabledDays,
     readOnly: readOnly,
     onChange: function onChange(val) {
       return controllers.onChange({
@@ -5514,7 +5724,9 @@ var DateRangeField = function DateRangeField(_ref) {
     placeholder: placeholder || format.toUpperCase(),
     weekStart: weekStart,
     disabled: disabled,
+    disabledDays: disabledDays,
     readOnly: readOnly,
+    onBlur: controllers.onBlur,
     onChange: function onChange(val) {
       return controllers.onChange({
         start: start,
@@ -5554,6 +5766,10 @@ var WeekField = function WeekField(_ref) {
       hoverDate = _useState[0],
       setHoverDate = _useState[1];
 
+  var _useState2 = React.useState(false),
+      showCalendar = _useState2[0],
+      setShowCalendar = _useState2[1];
+
   var inputRef = React.useRef();
   var controllers = useDateFieldControllers({
     name: name,
@@ -5636,21 +5852,31 @@ var WeekField = function WeekField(_ref) {
     onDayPickerHide: controllers.onBlur,
     overlayComponent: function overlayComponent(props) {
       return React__default.createElement(DatePickerCalendar, Object.assign({}, props, {
-        inputNode: inputRef.current
+        inputNode: inputRef.current,
+        showCalendar: showCalendar,
+        onClickOutside: function onClickOutside() {
+          return setShowCalendar(false);
+        }
       }));
     },
     dayPickerProps: dayPickerProps,
     inputProps: {
       name: name,
       id: controllers.id,
-      className: classnames(inputStyles['date-field'], (_classnames = {}, _classnames[inputStyles['date--invalid']] = hasError, _classnames)),
+      className: classnames(inputStyles['date-field'], (_classnames = {}, _classnames[inputStyles['date-field--invalid']] = hasError, _classnames)),
       'data-testid': "week-field-" + name,
       'aria-describedby': hasError ? controllers.id + "-error-message" : controllers.id + "-describer",
       'aria-invalid': hasError,
       autoComplete: 'off',
       ref: inputRef,
       readOnly: readOnly,
-      disabled: disabled
+      disabled: disabled,
+      onFocus: function onFocus() {
+        return setShowCalendar(true);
+      }
+    },
+    onDayPickerShow: function onDayPickerShow() {
+      return setShowCalendar(true);
     }
   })));
 };
@@ -5683,6 +5909,135 @@ var TimeFieldElement = function TimeFieldElement(_ref, ref) {
 
 var TimeField = React.forwardRef(TimeFieldElement);
 
+var _excluded$7 = ["currencySymbol"];
+
+var CurrencyFieldElement = function CurrencyFieldElement(_ref, ref) {
+  var _ref$currencySymbol = _ref.currencySymbol,
+      currencySymbol = _ref$currencySymbol === void 0 ? "$" : _ref$currencySymbol,
+      allOtherProps = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+
+  var _useTextField = useTextField(_extends({}, allOtherProps, {
+    ref: ref
+  })),
+      inputProps = _useTextField.inputProps,
+      fieldProps = _useTextField.fieldProps;
+
+  return React__default.createElement(Field, Object.assign({}, fieldProps), React__default.createElement(AffixContainer, {
+    prefix: currencySymbol
+  }, React__default.createElement("input", Object.assign({}, inputProps, {
+    type: 'number',
+    inputMode: 'decimal',
+    step: '0.01',
+    min: 0,
+    onKeyDown: function onKeyDown(e) {
+      if (e.key === 'e' || e.key === '-') {
+        e.preventDefault();
+        return;
+      }
+
+      inputProps.onKeyDown(e);
+    },
+    onBlur: function onBlur(e) {
+      e.currentTarget.value = parseFloat(e.currentTarget.value).toFixed(2);
+      inputProps.onChange(e);
+      inputProps.onBlur(e);
+    }
+  }))));
+};
+
+var CurrencyField = React.forwardRef(CurrencyFieldElement);
+
+var _excluded$8 = ["max", "min", "precision", "stepSize"];
+
+var PercentageElement = function PercentageElement(_ref, ref) {
+  var _ref$max = _ref.max,
+      max = _ref$max === void 0 ? 100 : _ref$max,
+      _ref$min = _ref.min,
+      min = _ref$min === void 0 ? 0 : _ref$min,
+      _ref$precision = _ref.precision,
+      precision = _ref$precision === void 0 ? 0 : _ref$precision,
+      _ref$stepSize = _ref.stepSize,
+      stepSize = _ref$stepSize === void 0 ? 1 : _ref$stepSize,
+      allOtherProps = _objectWithoutPropertiesLoose(_ref, _excluded$8);
+
+  var _useTextField = useTextField(_extends({}, allOtherProps, {
+    ref: ref
+  })),
+      inputProps = _useTextField.inputProps,
+      fieldProps = _useTextField.fieldProps;
+
+  var inputMode = precision > 0 ? 'decimal' : 'numeric';
+
+  var decimalDigitsCount = function decimalDigitsCount(input) {
+    var decimalIndex = input.indexOf('.');
+    return decimalIndex === -1 ? 0 : input.length - decimalIndex - 1;
+  };
+
+  var inputIsValid = function inputIsValid(valueAsString) {
+    if (valueAsString.startsWith('00')) {
+      return false;
+    }
+
+    if (valueAsString === '-' || valueAsString === '.') {
+      return true;
+    }
+
+    if (valueAsString.indexOf('-') > 0) {
+      return false;
+    }
+
+    return decimalDigitsCount(valueAsString) <= precision;
+  };
+
+  var keyPressIsValid = function keyPressIsValid(keyPress, value) {
+    if (keyPress == 'e' || keyPress == '+' || keyPress == '-' && min >= 0) {
+      return false;
+    }
+
+    if (keyPress == '.' && (precision == 0 || Number(value) == max)) {
+      return false;
+    }
+
+    return true;
+  };
+
+  return React__default.createElement(Field, Object.assign({}, fieldProps), React__default.createElement(AffixContainer, {
+    suffix: '%'
+  }, React__default.createElement("input", Object.assign({}, inputProps, {
+    type: 'number',
+    inputMode: inputMode,
+    step: stepSize,
+    max: max,
+    min: min,
+    onKeyDown: function onKeyDown(e) {
+      var value = e.currentTarget.value + e.key;
+
+      if (e.key.length === 1 && (!keyPressIsValid(e.key, value) || !inputIsValid(value))) {
+        e.preventDefault();
+        return;
+      }
+
+      inputProps.onKeyDown(e);
+    },
+    onChange: function onChange(e) {
+      var number = Number(e.target.value);
+
+      if (number > max) {
+        e.target.value = String(max);
+      }
+
+      if (number < min) {
+        e.target.value = String(min);
+      }
+
+      inputProps.onChange(e);
+      inputProps.onBlur(e);
+    }
+  }))));
+};
+
+var PercentageField = React.forwardRef(PercentageElement);
+
 var styles$u = {"caption":"_1QDLF","label":"_2wiMV","toggle":"_1ui8X","toggle__label":"_1YRJT","toggle__caption":"_1jEiW","toggle__switch":"_3tNyE"};
 
 var Toggle = function Toggle(_ref) {
@@ -5856,7 +6211,7 @@ var FooterContainer = function FooterContainer(_ref2) {
 
 var styles$z = {"badge":"_2f81N","badge--warning":"_2g1GI","badge--danger":"_2zLnM","badge--success":"_27QOo","badge--info":"_2gmsM"};
 
-var _excluded$7 = ["children", "theme", "title"];
+var _excluded$9 = ["children", "theme", "title"];
 
 var Badge = function Badge(_ref, forwardedRef) {
   var _classnames;
@@ -5864,7 +6219,7 @@ var Badge = function Badge(_ref, forwardedRef) {
   var children = _ref.children,
       theme = _ref.theme,
       title = _ref.title,
-      otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+      otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$9);
 
   var internalRef = React.useRef(null);
   var ref = forwardedRef || internalRef;
@@ -5999,6 +6354,7 @@ exports.Avatar = Avatar;
 exports.Badge = Badge$1;
 exports.Button = Button$1;
 exports.CheckboxField = CheckboxField;
+exports.CurrencyField = CurrencyField;
 exports.DataTable = DataTable;
 exports.DataTableCell = DataTableCell;
 exports.DataTableEditableCell = DataTableEditableCell;
@@ -6118,6 +6474,7 @@ exports.IconTimesOctagon = IconTimesOctagon;
 exports.IconTrash = IconTrash;
 exports.IconUnderline = IconUnderline;
 exports.IconUndo = IconUndo;
+exports.IconUniversity = IconUniversity;
 exports.IconUserComputer = IconUserComputer;
 exports.IconUserLight = IconUserLight;
 exports.IconUserPlus = IconUserPlus;
@@ -6137,6 +6494,7 @@ exports.ModalFooter = ModalFooter;
 exports.MultiSelectField = MultiSelectField;
 exports.PaginationControls = PaginationControls;
 exports.PasswordField = PasswordField;
+exports.PercentageField = PercentageField;
 exports.PillSelectField = PillSelectField;
 exports.RadioGroupField = RadioGroupField;
 exports.RadioGroupOption = RadioGroupOption;