@moda/om 20.4.0 → 21.0.0

package/dist/index.cjs.js

@@ -2,7 +2,7 @@
 
 var React = require('react');
 var reactRouterDom = require('react-router-dom');
-var require$$1 = require('react-dom');
+var reactDom = require('react-dom');
 
 function _interopNamespaceDefault(e) {
 	var n = Object.create(null);
@@ -945,11 +945,16 @@ function requireHelpers() {
       };
       return __assign.apply(this, arguments);
     };
+    var __importDefault = helpers && helpers.__importDefault || function (mod) {
+      return mod && mod.__esModule ? mod : {
+        "default": mod
+      };
+    };
     Object.defineProperty(exports, "__esModule", {
       value: true
     });
     exports.spacing = exports.colorInHex = exports.color = exports.remToUnitlessPx = exports.text = void 0;
-    var color_string_1 = require$$0;
+    var color_string_1 = __importDefault(require$$0);
     var colors_1 = requireColors();
     var space_1 = requireSpace();
     var typography_1 = requireTypography();
@@ -1260,108 +1265,6 @@ var isRenderProps = function isRenderProps(children) {
   return typeof children === 'function';
 };
 
-var classnames = {exports: {}};
-
-var hasRequiredClassnames;
-function requireClassnames() {
-  if (hasRequiredClassnames) return classnames.exports;
-  hasRequiredClassnames = 1;
-  (function (module) {
-    /* global define */
-
-    (function () {
-
-      var hasOwn = {}.hasOwnProperty;
-      function classNames() {
-        var classes = '';
-        for (var i = 0; i < arguments.length; i++) {
-          var arg = arguments[i];
-          if (arg) {
-            classes = appendClass(classes, parseValue(arg));
-          }
-        }
-        return classes;
-      }
-      function parseValue(arg) {
-        if (typeof arg === 'string' || typeof arg === 'number') {
-          return arg;
-        }
-        if (_typeof$1(arg) !== 'object') {
-          return '';
-        }
-        if (Array.isArray(arg)) {
-          return classNames.apply(null, arg);
-        }
-        if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
-          return arg.toString();
-        }
-        var classes = '';
-        for (var key in arg) {
-          if (hasOwn.call(arg, key) && arg[key]) {
-            classes = appendClass(classes, key);
-          }
-        }
-        return classes;
-      }
-      function appendClass(value, newClass) {
-        if (!newClass) {
-          return value;
-        }
-        if (value) {
-          return value + ' ' + newClass;
-        }
-        return value + newClass;
-      }
-      if (module.exports) {
-        classNames["default"] = classNames;
-        module.exports = classNames;
-      } else {
-        window.classNames = classNames;
-      }
-    })();
-  })(classnames);
-  return classnames.exports;
-}
-
-var classnamesExports = requireClassnames();
-var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
-
-var _excluded$G = ["className", "children", "space", "direction", "alignItems", "justifyContent", "style"];
-var Stack = function Stack(_ref) {
-  var className = _ref.className,
-    children = _ref.children,
-    space = _ref.space,
-    _ref$direction = _ref.direction,
-    direction = _ref$direction === void 0 ? 'vertical' : _ref$direction,
-    alignItems = _ref.alignItems,
-    justifyContent = _ref.justifyContent,
-    style = _ref.style,
-    rest = _objectWithoutProperties(_ref, _excluded$G);
-  return /*#__PURE__*/React.createElement("div", _extends$1({
-    className: classNames("Stack Stack--".concat(direction, "-").concat(space), className),
-    style: _objectSpread2(_objectSpread2({}, style), {}, {
-      alignItems: alignItems,
-      justifyContent: justifyContent
-    })
-  }, rest), children);
-};
-
-var omit$1 = function omit(obj) {
-  for (var _len = arguments.length, keys = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-    keys[_key - 1] = arguments[_key];
-  }
-  return Object.entries(obj).filter(function (_ref) {
-    var _ref2 = _slicedToArray(_ref, 1),
-      key = _ref2[0];
-    return !keys.includes(key);
-  }).reduce(function (obj, _ref3) {
-    var _ref4 = _slicedToArray(_ref3, 2),
-      key = _ref4[0],
-      val = _ref4[1];
-    return Object.assign(obj, _defineProperty$1({}, key, val));
-  }, {});
-};
-
 var truncate = function truncate(string) {
   var maxLength = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 25;
   if (!string) return null;
@@ -1369,7 +1272,6 @@ var truncate = function truncate(string) {
   return "".concat(string.substring(0, maxLength)).concat(ellipsis ? '...' : '');
 };
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 var stringifyProps = function stringifyProps(props) {
   var stringifiedProps = Object.entries(props || {}).reduce(function (memo, _ref) {
     var _ref2 = _slicedToArray(_ref, 2),
@@ -1386,50 +1288,85 @@ var stringifyProps = function stringifyProps(props) {
   return stringifiedProps.trim();
 };
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-/* eslint-enable @typescript-eslint/no-explicit-any */
+var omit$1 = function omit(obj) {
+  for (var _len = arguments.length, keys = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    keys[_key - 1] = arguments[_key];
+  }
+  return Object.entries(obj).filter(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 1),
+      key = _ref2[0];
+    return !keys.includes(key);
+  }).reduce(function (obj, _ref3) {
+    var _ref4 = _slicedToArray(_ref3, 2),
+      key = _ref4[0],
+      val = _ref4[1];
+    return Object.assign(obj, _defineProperty$1({}, key, val));
+  }, {});
+};
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 var isEmpty = function isEmpty(obj) {
   return Object.entries(obj || {}).length === 0;
 };
-var StatesProps = function StatesProps(_ref) {
+
+var DEFAULT_STYLES = {
+  state: {
+    border: '1px dotted #ddd',
+    padding: '0.5rem',
+    marginBottom: '1rem'
+  },
+  stateProps: {
+    display: 'block',
+    marginTop: '0.5rem',
+    paddingTop: '0.5rem',
+    fontFamily: "source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace",
+    fontSize: '0.8125rem',
+    color: '#999',
+    borderTop: '1px dotted #ddd'
+  },
+  statePropsActive: {
+    color: '#111',
+    textDecoration: 'underline'
+  }
+};
+var Styles = /*#__PURE__*/React.createContext(DEFAULT_STYLES);
+var useStyles = function useStyles() {
+  return React.useContext(Styles);
+};
+
+var StateProps = function StateProps(_ref) {
   var props = _ref.props,
     children = _ref.children;
+  var styles = useStyles();
   var childrenProps = omit$1.apply(void 0, [children.props].concat(_toConsumableArray(Object.keys(props || {}))));
-  return /*#__PURE__*/React.createElement(Stack, {
-    className: "StatesProps",
-    space: 2,
-    direction: "horizontal"
-  }, /*#__PURE__*/React.createElement("span", null, children.type.displayName || children.type.name), !isEmpty(props) && /*#__PURE__*/React.createElement("strong", null, stringifyProps(props)), !isRenderProps(children) && !isEmpty(childrenProps) && /*#__PURE__*/React.createElement("span", null, stringifyProps(childrenProps)), /*#__PURE__*/React.createElement("span", null, " "));
+  return /*#__PURE__*/React.createElement("div", {
+    style: styles.stateProps
+  }, '<', /*#__PURE__*/React.createElement("span", null, children.type.displayName || children.type.name), ' ', !isEmpty(props) && /*#__PURE__*/React.createElement("strong", {
+    style: styles.statePropsActive
+  }, stringifyProps(props)), ' ', !isRenderProps(children) && !isEmpty(childrenProps) && /*#__PURE__*/React.createElement("span", null, stringifyProps(childrenProps)), /*#__PURE__*/React.createElement("span", null, ' />'));
 };
 
-var _excluded$F = ["props", "children"];
+var _excluded$G = ["props", "children"];
 var State = function State(_ref) {
   var props = _ref.props,
     children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$F);
+    rest = _objectWithoutProperties(_ref, _excluded$G);
+  var styles = useStyles();
   var Specimen = isRenderProps(children) ? children(props) : /*#__PURE__*/React.cloneElement(children, props);
   var innerChildren = isRenderProps(children) ? children(props) : children;
   return /*#__PURE__*/React.createElement("div", _extends$1({
-    className: "State"
-  }, rest), Specimen, /*#__PURE__*/React.createElement("code", {
-    className: "State__props"
-  }, /*#__PURE__*/React.createElement(StatesProps, {
+    style: styles.state
+  }, rest), Specimen, /*#__PURE__*/React.createElement(StateProps, {
     props: props
-  }, innerChildren)));
+  }, innerChildren));
 };
 
-var _excluded$E = ["states", "children"];
+var _excluded$F = ["states", "children"];
 var States = function States(_ref) {
   var _ref$states = _ref.states,
     states = _ref$states === void 0 ? [{}] : _ref$states,
     children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$E);
-  return /*#__PURE__*/React.createElement("div", {
-    className: "States"
-  }, states.map(function (props, index) {
+    rest = _objectWithoutProperties(_ref, _excluded$F);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, states.map(function (props, index) {
     return /*#__PURE__*/React.createElement(State, _extends$1({
       key: index,
       props: props
@@ -1437,6 +1374,11 @@ var States = function States(_ref) {
   }));
 };
 
+var preventNavigation = function preventNavigation(event) {
+  event.preventDefault();
+  event.returnValue = '';
+};
+
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -5310,6 +5252,72 @@ var FocusOn = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
   }));
 });
 
+var classnames = {exports: {}};
+
+var hasRequiredClassnames;
+function requireClassnames() {
+  if (hasRequiredClassnames) return classnames.exports;
+  hasRequiredClassnames = 1;
+  (function (module) {
+    /* global define */
+
+    (function () {
+
+      var hasOwn = {}.hasOwnProperty;
+      function classNames() {
+        var classes = '';
+        for (var i = 0; i < arguments.length; i++) {
+          var arg = arguments[i];
+          if (arg) {
+            classes = appendClass(classes, parseValue(arg));
+          }
+        }
+        return classes;
+      }
+      function parseValue(arg) {
+        if (typeof arg === 'string' || typeof arg === 'number') {
+          return arg;
+        }
+        if (_typeof$1(arg) !== 'object') {
+          return '';
+        }
+        if (Array.isArray(arg)) {
+          return classNames.apply(null, arg);
+        }
+        if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
+          return arg.toString();
+        }
+        var classes = '';
+        for (var key in arg) {
+          if (hasOwn.call(arg, key) && arg[key]) {
+            classes = appendClass(classes, key);
+          }
+        }
+        return classes;
+      }
+      function appendClass(value, newClass) {
+        if (!newClass) {
+          return value;
+        }
+        if (value) {
+          return value + ' ' + newClass;
+        }
+        return value + newClass;
+      }
+      if (module.exports) {
+        classNames["default"] = classNames;
+        module.exports = classNames;
+      } else {
+        window.classNames = classNames;
+      }
+    })();
+  })(classnames);
+  return classnames.exports;
+}
+
+var classnamesExports = requireClassnames();
+var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
+
 var dist$3 = {};
 
 var scale = {};
@@ -5410,7 +5418,7 @@ function requireDist$3() {
 
 var distExports$3 = requireDist$3();
 
-var _excluded$D = ["aspectWidth", "aspectHeight", "maxWidth", "maxHeight", "outlined", "children", "className"];
+var _excluded$E = ["aspectWidth", "aspectHeight", "maxWidth", "maxHeight", "outlined", "children", "className"];
 var DEFAULT_PRODUCT_ASPECT_WIDTH = 128;
 var DEFAULT_PRODUCT_ASPECT_HEIGHT = 205;
 var DEFAULT_PRODUCT_ASPECT_RATIO = DEFAULT_PRODUCT_ASPECT_HEIGHT / DEFAULT_PRODUCT_ASPECT_WIDTH;
@@ -5456,7 +5464,7 @@ var AspectRatioBox = /*#__PURE__*/React.forwardRef(function (_ref2, forwardedRef
     outlined = _ref2$outlined === void 0 ? false : _ref2$outlined,
     children = _ref2.children,
     className = _ref2.className,
-    rest = _objectWithoutProperties(_ref2, _excluded$D);
+    rest = _objectWithoutProperties(_ref2, _excluded$E);
   var _scaleDimensions = scaleDimensions({
       width: aspectWidth,
       height: aspectHeight,
@@ -5484,22 +5492,22 @@ var AspectRatioBox = /*#__PURE__*/React.forwardRef(function (_ref2, forwardedRef
 });
 AspectRatioBox.displayName = 'AspectRatioBox';
 
-var _excluded$C = ["className", "theme", "children"];
+var _excluded$D = ["className", "theme", "children"];
 var Badge = function Badge(_ref) {
   var className = _ref.className,
     theme = _ref.theme,
     children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$C);
+    rest = _objectWithoutProperties(_ref, _excluded$D);
   return /*#__PURE__*/React.createElement("span", _extends$1({
     className: classNames('Badge', theme && "Badge--".concat(theme), className)
   }, rest), children);
 };
 
-var _excluded$B = ["children", "className"];
+var _excluded$C = ["children", "className"];
 var Breadcrumbs = function Breadcrumbs(_ref) {
   var children = _ref.children,
     className = _ref.className,
-    rest = _objectWithoutProperties(_ref, _excluded$B);
+    rest = _objectWithoutProperties(_ref, _excluded$C);
   var position = 0;
   return /*#__PURE__*/React.createElement("ol", _extends$1({
     itemScope: true,
@@ -5517,7 +5525,7 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
   }));
 };
 
-var _excluded$A = ["className", "styleless", "disabled"];
+var _excluded$B = ["className", "styleless", "disabled"];
 var isLink = function isLink(props) {
   return 'to' in props;
 };
@@ -5532,7 +5540,7 @@ var Clickable = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$styleless = _ref.styleless,
     styleless = _ref$styleless === void 0 ? false : _ref$styleless,
     disabled = _ref.disabled,
-    rest = _objectWithoutProperties(_ref, _excluded$A);
+    rest = _objectWithoutProperties(_ref, _excluded$B);
   var props = _objectSpread2(_objectSpread2({}, rest), {}, {
     className: classNames({
       Clickable: !styleless,
@@ -5553,14 +5561,14 @@ var Clickable = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 Clickable.displayName = 'Clickable';
 
-var _excluded$z = ["className", "disabled", "children", "underlined"];
+var _excluded$A = ["className", "disabled", "children", "underlined"];
 var ControlLink = function ControlLink(_ref) {
   var className = _ref.className,
     disabled = _ref.disabled,
     children = _ref.children,
     _ref$underlined = _ref.underlined,
     underlined = _ref$underlined === void 0 ? true : _ref$underlined,
-    rest = _objectWithoutProperties(_ref, _excluded$z);
+    rest = _objectWithoutProperties(_ref, _excluded$A);
   return /*#__PURE__*/React.createElement(Clickable, _extends$1({}, rest, {
     className: classNames('ControlLink', {
       'ControlLink--underlined': underlined
@@ -5571,12 +5579,12 @@ var ControlLink = function ControlLink(_ref) {
   }), children);
 };
 
-var _excluded$y = ["children", "position", "className"];
+var _excluded$z = ["children", "position", "className"];
 var Breadcrumb = function Breadcrumb(_ref) {
   var children = _ref.children,
     position = _ref.position,
     className = _ref.className,
-    rest = _objectWithoutProperties(_ref, _excluded$y);
+    rest = _objectWithoutProperties(_ref, _excluded$z);
   return /*#__PURE__*/React.createElement("li", {
     className: classNames('Breadcrumb', className),
     itemProp: "itemListElement",
@@ -7300,11 +7308,11 @@ var useBreakpoint = function useBreakpoint(props) {
   };
 };
 
-var _excluded$x = ["children", "className"];
+var _excluded$y = ["children", "className"];
 var Breakpoint = function Breakpoint(_ref) {
   var children = _ref.children,
     className = _ref.className,
-    rest = _objectWithoutProperties(_ref, _excluded$x);
+    rest = _objectWithoutProperties(_ref, _excluded$y);
   var _discriminate = discriminate(rest),
     mode = _discriminate.mode,
     breakpoint = _discriminate.breakpoint;
@@ -7315,7 +7323,7 @@ var Breakpoint = function Breakpoint(_ref) {
   }, omit(['at', 'gt', 'lt'], rest)), children) : null;
 };
 
-var _excluded$w = ["secondary", "tertiary", "elevated", "chip", "hover", "focus", "disabled", "className"];
+var _excluded$x = ["secondary", "tertiary", "elevated", "chip", "hover", "focus", "disabled", "className"];
 var Button = function Button(_ref) {
   var secondary = _ref.secondary,
     tertiary = _ref.tertiary,
@@ -7325,7 +7333,7 @@ var Button = function Button(_ref) {
     focus = _ref.focus,
     disabled = _ref.disabled,
     className = _ref.className,
-    rest = _objectWithoutProperties(_ref, _excluded$w);
+    rest = _objectWithoutProperties(_ref, _excluded$x);
   return /*#__PURE__*/React.createElement(Clickable, _extends$1({
     className: classNames('Button', {
       'Button--chip': chip,
@@ -7449,7 +7457,7 @@ var Circle12 = function Circle12(_a) {
 };
 Circle12.displayName = 'Circle12';
 
-var _excluded$v = ["className", "defaultChecked", "checked", "children", "value", "onChange", "disabled", "checkIcon", "dataTestId", "id"];
+var _excluded$w = ["className", "defaultChecked", "checked", "children", "value", "onChange", "disabled", "checkIcon", "dataTestId", "id"];
 var CHECKED_ITEM_PROPS = {
   className: 'Checkbox__check-mark',
   height: '85%',
@@ -7468,7 +7476,7 @@ var Checkbox = function Checkbox(_ref) {
     checkIcon = _ref$checkIcon === void 0 ? 'checkmark' : _ref$checkIcon,
     dataTestId = _ref.dataTestId,
     id = _ref.id,
-    rest = _objectWithoutProperties(_ref, _excluded$v);
+    rest = _objectWithoutProperties(_ref, _excluded$w);
   var _useState = React.useState((_ref2 = checked !== null && checked !== void 0 ? checked : defaultChecked) !== null && _ref2 !== void 0 ? _ref2 : false),
     _useState2 = _slicedToArray(_useState, 2),
     isChecked = _useState2[0],
@@ -7560,7 +7568,7 @@ var SKU_COLORS = {
   yellow: '#ffca44'
 };
 
-var _excluded$u = ["className", "size", "color", "backgroundUrl", "focus", "hover", "selected", "soldOut", "onSale", "onClick", "onMouseEnter", "disabled", "title"];
+var _excluded$v = ["className", "size", "color", "backgroundUrl", "focus", "hover", "selected", "soldOut", "onSale", "onClick", "onMouseEnter", "disabled", "title"];
 var ColorSwatch = function ColorSwatch(_ref) {
   var _SKU_COLORS;
   var className = _ref.className,
@@ -7576,7 +7584,7 @@ var ColorSwatch = function ColorSwatch(_ref) {
     onMouseEnter = _ref.onMouseEnter,
     disabled = _ref.disabled,
     title = _ref.title,
-    rest = _objectWithoutProperties(_ref, _excluded$u);
+    rest = _objectWithoutProperties(_ref, _excluded$v);
   var handleClick = React.useCallback(function (_event) {
     onClick === null || onClick === void 0 || onClick(color, title);
   }, [color, title, onClick]);
@@ -7611,14 +7619,14 @@ var ColorSwatch = function ColorSwatch(_ref) {
   }));
 };
 
-var _excluded$t = ["className", "children", "onClose", "shards", "autoFocus"];
+var _excluded$u = ["className", "children", "onClose", "shards", "autoFocus"];
 var Modal = function Modal(_ref) {
   var className = _ref.className,
     children = _ref.children,
     onClose = _ref.onClose,
     shards = _ref.shards,
     autoFocus = _ref.autoFocus,
-    rest = _objectWithoutProperties(_ref, _excluded$t);
+    rest = _objectWithoutProperties(_ref, _excluded$u);
   return /*#__PURE__*/React.createElement("div", _extends$1({
     className: classNames('Modal', className)
   }, rest), /*#__PURE__*/React.createElement(FocusOn, {
@@ -7629,14 +7637,14 @@ var Modal = function Modal(_ref) {
   }, children));
 };
 
-var _excluded$s = ["className", "children", "show"];
+var _excluded$t = ["className", "children", "show"];
 var UNMOUNT_DELAY_MS = 500;
 var Overlay = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
   var className = _ref.className,
     children = _ref.children,
     _ref$show = _ref.show,
     show = _ref$show === void 0 ? true : _ref$show,
-    rest = _objectWithoutProperties(_ref, _excluded$s);
+    rest = _objectWithoutProperties(_ref, _excluded$t);
   var _useState = React.useState(show),
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
@@ -7663,7 +7671,7 @@ var Overlay = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
 });
 Overlay.displayName = 'Overlay';
 
-var _excluded$r = ["children", "className", "contentClassName", "onClose", "overlayClassName", "show", "shards", "autoFocus"];
+var _excluded$s = ["children", "className", "contentClassName", "onClose", "overlayClassName", "show", "shards", "autoFocus"];
 var ModalOverlay = function ModalOverlay(_ref) {
   var children = _ref.children,
     className = _ref.className,
@@ -7674,7 +7682,7 @@ var ModalOverlay = function ModalOverlay(_ref) {
     show = _ref$show === void 0 ? true : _ref$show,
     shards = _ref.shards,
     autoFocus = _ref.autoFocus,
-    rest = _objectWithoutProperties(_ref, _excluded$r);
+    rest = _objectWithoutProperties(_ref, _excluded$s);
   var element = React.useMemo(function () {
     return typeof document !== 'undefined' ? document.createElement('div') : null;
   }, []);
@@ -7687,7 +7695,7 @@ var ModalOverlay = function ModalOverlay(_ref) {
     };
   }, [element]);
   if (!element) return null;
-  return /*#__PURE__*/require$$1.createPortal(/*#__PURE__*/React.createElement(Overlay, _extends$1({
+  return /*#__PURE__*/reactDom.createPortal(/*#__PURE__*/React.createElement(Overlay, _extends$1({
     className: classNames('ModalOverlay', overlayClassName),
     show: show
   }, rest), /*#__PURE__*/React.createElement(Modal, {
@@ -7700,6 +7708,26 @@ var ModalOverlay = function ModalOverlay(_ref) {
   }, children))), element);
 };
 
+var _excluded$r = ["className", "children", "space", "direction", "alignItems", "justifyContent", "style"];
+var Stack = function Stack(_ref) {
+  var className = _ref.className,
+    children = _ref.children,
+    space = _ref.space,
+    _ref$direction = _ref.direction,
+    direction = _ref$direction === void 0 ? 'vertical' : _ref$direction,
+    alignItems = _ref.alignItems,
+    justifyContent = _ref.justifyContent,
+    style = _ref.style,
+    rest = _objectWithoutProperties(_ref, _excluded$r);
+  return /*#__PURE__*/React.createElement("div", _extends$1({
+    className: classNames("Stack Stack--".concat(direction, "-").concat(space), className),
+    style: _objectSpread2(_objectSpread2({}, style), {}, {
+      alignItems: alignItems,
+      justifyContent: justifyContent
+    })
+  }, rest), children);
+};
+
 var _excluded$q = ["as", "className", "treatment", "color", "family", "children", "style"];
 var Text = function Text(_ref) {
   var _ref$as = _ref.as,
@@ -7848,516 +7876,7 @@ var ExceedConstrain = function ExceedConstrain(_ref) {
 
 var reactInputMask = {exports: {}};
 
-var reactInputMask_production_min;
-var hasRequiredReactInputMask_production_min;
-function requireReactInputMask_production_min() {
-  if (hasRequiredReactInputMask_production_min) return reactInputMask_production_min;
-  hasRequiredReactInputMask_production_min = 1;
-  function _interopDefault(e) {
-    return e && "object" == _typeof$1(e) && "default" in e ? e["default"] : e;
-  }
-  var React$1 = _interopDefault(React),
-    reactDom = require$$1;
-  function _defaults2(e, t) {
-    for (var n = Object.getOwnPropertyNames(t), a = 0; a < n.length; a++) {
-      var i = n[a],
-        r = Object.getOwnPropertyDescriptor(t, i);
-      r && r.configurable && e[i] === undefined && Object.defineProperty(e, i, r);
-    }
-    return e;
-  }
-  function _extends() {
-    return (_extends = Object.assign || function (e) {
-      for (var t = 1; t < arguments.length; t++) {
-        var n = arguments[t];
-        for (var a in n) Object.prototype.hasOwnProperty.call(n, a) && (e[a] = n[a]);
-      }
-      return e;
-    }).apply(this, arguments);
-  }
-  function _inheritsLoose(e, t) {
-    e.prototype = Object.create(t.prototype), _defaults2(e.prototype.constructor = e, t);
-  }
-  function _objectWithoutPropertiesLoose(e, t) {
-    if (null == e) return {};
-    var n,
-      a,
-      i = {},
-      r = Object.keys(e);
-    for (a = 0; a < r.length; a++) n = r[a], 0 <= t.indexOf(n) || (i[n] = e[n]);
-    return i;
-  }
-  function _assertThisInitialized(e) {
-    if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-    return e;
-  }
-  var invariant = function invariant(e, t, n, a, i, r, o, s) {
-      if (!e) {
-        var l;
-        if (t === undefined) l = new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else {
-          var u = [n, a, i, r, o, s],
-            c = 0;
-          (l = new Error(t.replace(/%s/g, function () {
-            return u[c++];
-          }))).name = "Invariant Violation";
-        }
-        throw l.framesToPop = 1, l;
-      }
-    },
-    invariant_1 = invariant;
-  function setInputSelection(e, t, n) {
-    if ("selectionStart" in e && "selectionEnd" in e) e.selectionStart = t, e.selectionEnd = n;else {
-      var a = e.createTextRange();
-      a.collapse(true), a.moveStart("character", t), a.moveEnd("character", n - t), a.select();
-    }
-  }
-  function getInputSelection(e) {
-    var t = 0,
-      n = 0;
-    if ("selectionStart" in e && "selectionEnd" in e) t = e.selectionStart, n = e.selectionEnd;else {
-      var a = document.selection.createRange();
-      a.parentElement() === e && (t = -a.moveStart("character", -e.value.length), n = -a.moveEnd("character", -e.value.length));
-    }
-    return {
-      start: t,
-      end: n,
-      length: n - t
-    };
-  }
-  var defaultFormatChars = {
-      9: "[0-9]",
-      a: "[A-Za-z]",
-      "*": "[A-Za-z0-9]"
-    },
-    defaultMaskChar = "_";
-  function parseMask(e, t, n) {
-    var a = "",
-      i = "",
-      r = null,
-      o = [];
-    if (t === undefined && (t = defaultMaskChar), null == n && (n = defaultFormatChars), !e || "string" != typeof e) return {
-      maskChar: t,
-      formatChars: n,
-      mask: null,
-      prefix: null,
-      lastEditablePosition: null,
-      permanents: []
-    };
-    var s = false;
-    return e.split("").forEach(function (e) {
-      s = !s && "\\" === e || (s || !n[e] ? (o.push(a.length), a.length === o.length - 1 && (i += e)) : r = a.length + 1, a += e, false);
-    }), {
-      maskChar: t,
-      formatChars: n,
-      prefix: i,
-      mask: a,
-      lastEditablePosition: r,
-      permanents: o
-    };
-  }
-  function isPermanentCharacter(e, t) {
-    return -1 !== e.permanents.indexOf(t);
-  }
-  function isAllowedCharacter(e, t, n) {
-    var a = e.mask,
-      i = e.formatChars;
-    if (!n) return false;
-    if (isPermanentCharacter(e, t)) return a[t] === n;
-    var r = i[a[t]];
-    return new RegExp(r).test(n);
-  }
-  function isEmpty(n, e) {
-    return e.split("").every(function (e, t) {
-      return isPermanentCharacter(n, t) || !isAllowedCharacter(n, t, e);
-    });
-  }
-  function getFilledLength(e, t) {
-    var n = e.maskChar,
-      a = e.prefix;
-    if (!n) {
-      for (; t.length > a.length && isPermanentCharacter(e, t.length - 1);) t = t.slice(0, t.length - 1);
-      return t.length;
-    }
-    for (var i = a.length, r = t.length; r >= a.length; r--) {
-      var o = t[r];
-      if (!isPermanentCharacter(e, r) && isAllowedCharacter(e, r, o)) {
-        i = r + 1;
-        break;
-      }
-    }
-    return i;
-  }
-  function isFilled(e, t) {
-    return getFilledLength(e, t) === e.mask.length;
-  }
-  function formatValue(e, t) {
-    var n = e.maskChar,
-      a = e.mask,
-      i = e.prefix;
-    if (!n) {
-      for ((t = insertString(e, "", t, 0)).length < i.length && (t = i); t.length < a.length && isPermanentCharacter(e, t.length);) t += a[t.length];
-      return t;
-    }
-    if (t) return insertString(e, formatValue(e, ""), t, 0);
-    for (var r = 0; r < a.length; r++) isPermanentCharacter(e, r) ? t += a[r] : t += n;
-    return t;
-  }
-  function clearRange(n, e, a, t) {
-    var i = a + t,
-      r = n.maskChar,
-      o = n.mask,
-      s = n.prefix,
-      l = e.split("");
-    if (r) return l.map(function (e, t) {
-      return t < a || i <= t ? e : isPermanentCharacter(n, t) ? o[t] : r;
-    }).join("");
-    for (var u = i; u < l.length; u++) isPermanentCharacter(n, u) && (l[u] = "");
-    return a = Math.max(s.length, a), l.splice(a, i - a), e = l.join(""), formatValue(n, e);
-  }
-  function insertString(r, o, e, s) {
-    var l = r.mask,
-      u = r.maskChar,
-      c = r.prefix,
-      t = e.split(""),
-      h = isFilled(r, o);
-    return !u && s > o.length && (o += l.slice(o.length, s)), t.every(function (e) {
-      for (; i = e, isPermanentCharacter(r, a = s) && i !== l[a];) {
-        if (s >= o.length && (o += l[s]), t = e, n = s, u && isPermanentCharacter(r, n) && t === u) return true;
-        if (++s >= l.length) return false;
-      }
-      var t, n, a, i;
-      return !isAllowedCharacter(r, s, e) && e !== u || (s < o.length ? o = u || h || s < c.length ? o.slice(0, s) + e + o.slice(s + 1) : (o = o.slice(0, s) + e + o.slice(s), formatValue(r, o)) : u || (o += e), ++s < l.length);
-    }), o;
-  }
-  function getInsertStringLength(a, e, t, i) {
-    var r = a.mask,
-      o = a.maskChar,
-      n = t.split(""),
-      s = i;
-    return n.every(function (e) {
-      for (; n = e, isPermanentCharacter(a, t = i) && n !== r[t];) if (++i >= r.length) return false;
-      var t, n;
-      return (isAllowedCharacter(a, i, e) || e === o) && i++, i < r.length;
-    }), i - s;
-  }
-  function getLeftEditablePosition(e, t) {
-    for (var n = t; 0 <= n; --n) if (!isPermanentCharacter(e, n)) return n;
-    return null;
-  }
-  function getRightEditablePosition(e, t) {
-    for (var n = e.mask, a = t; a < n.length; ++a) if (!isPermanentCharacter(e, a)) return a;
-    return null;
-  }
-  function getStringValue(e) {
-    return e || 0 === e ? e + "" : "";
-  }
-  function processChange(e, t, n, a, i) {
-    var r = e.mask,
-      o = e.prefix,
-      s = e.lastEditablePosition,
-      l = t,
-      u = "",
-      c = 0,
-      h = 0,
-      f = Math.min(i.start, n.start);
-    if (n.end > i.start ? h = (c = getInsertStringLength(e, a, u = l.slice(i.start, n.end), f)) ? i.length : 0 : l.length < a.length && (h = a.length - l.length), l = a, h) {
-      if (1 === h && !i.length) f = i.start === n.start ? getRightEditablePosition(e, n.start) : getLeftEditablePosition(e, n.start);
-      l = clearRange(e, l, f, h);
-    }
-    return l = insertString(e, l, u, f), (f += c) >= r.length ? f = r.length : f < o.length && !c ? f = o.length : f >= o.length && f < s && c && (f = getRightEditablePosition(e, f)), u || (u = null), {
-      value: l = formatValue(e, l),
-      enteredString: u,
-      selection: {
-        start: f,
-        end: f
-      }
-    };
-  }
-  function isWindowsPhoneBrowser() {
-    var e = new RegExp("windows", "i"),
-      t = new RegExp("phone", "i"),
-      n = navigator.userAgent;
-    return e.test(n) && t.test(n);
-  }
-  function isFunction(e) {
-    return "function" == typeof e;
-  }
-  function getRequestAnimationFrame() {
-    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame;
-  }
-  function getCancelAnimationFrame() {
-    return window.cancelAnimationFrame || window.webkitCancelRequestAnimationFrame || window.webkitCancelAnimationFrame || window.mozCancelAnimationFrame;
-  }
-  function defer(e) {
-    return (!!getCancelAnimationFrame() ? getRequestAnimationFrame() : function () {
-      return setTimeout(e, 1e3 / 60);
-    })(e);
-  }
-  function cancelDefer(e) {
-    (getCancelAnimationFrame() || clearTimeout)(e);
-  }
-  var InputElement = function (c) {
-    function e(e) {
-      var f = c.call(this, e) || this;
-      f.focused = false, f.mounted = false, f.previousSelection = null, f.selectionDeferId = null, f.saveSelectionLoopDeferId = null, f.saveSelectionLoop = function () {
-        f.previousSelection = f.getSelection(), f.saveSelectionLoopDeferId = defer(f.saveSelectionLoop);
-      }, f.runSaveSelectionLoop = function () {
-        null === f.saveSelectionLoopDeferId && f.saveSelectionLoop();
-      }, f.stopSaveSelectionLoop = function () {
-        null !== f.saveSelectionLoopDeferId && (cancelDefer(f.saveSelectionLoopDeferId), f.saveSelectionLoopDeferId = null, f.previousSelection = null);
-      }, f.getInputDOMNode = function () {
-        if (!f.mounted) return null;
-        var e = reactDom.findDOMNode(_assertThisInitialized(_assertThisInitialized(f))),
-          t = "undefined" != typeof window && e instanceof window.Element;
-        if (e && !t) return null;
-        if ("INPUT" !== e.nodeName && (e = e.querySelector("input")), !e) throw new Error("react-input-mask: inputComponent doesn't contain input node");
-        return e;
-      }, f.getInputValue = function () {
-        var e = f.getInputDOMNode();
-        return e ? e.value : null;
-      }, f.setInputValue = function (e) {
-        var t = f.getInputDOMNode();
-        t && (f.value = e, t.value = e);
-      }, f.setCursorToEnd = function () {
-        var e = getFilledLength(f.maskOptions, f.value),
-          t = getRightEditablePosition(f.maskOptions, e);
-        null !== t && f.setCursorPosition(t);
-      }, f.setSelection = function (e, t, n) {
-        void 0 === n && (n = {});
-        var a = f.getInputDOMNode(),
-          i = f.isFocused();
-        a && i && (n.deferred || setInputSelection(a, e, t), null !== f.selectionDeferId && cancelDefer(f.selectionDeferId), f.selectionDeferId = defer(function () {
-          f.selectionDeferId = null, setInputSelection(a, e, t);
-        }), f.previousSelection = {
-          start: e,
-          end: t,
-          length: Math.abs(t - e)
-        });
-      }, f.getSelection = function () {
-        return getInputSelection(f.getInputDOMNode());
-      }, f.getCursorPosition = function () {
-        return f.getSelection().start;
-      }, f.setCursorPosition = function (e) {
-        f.setSelection(e, e);
-      }, f.isFocused = function () {
-        return f.focused;
-      }, f.getBeforeMaskedValueChangeConfig = function () {
-        var e = f.maskOptions,
-          t = e.mask,
-          n = e.maskChar,
-          a = e.permanents,
-          i = e.formatChars;
-        return {
-          mask: t,
-          maskChar: n,
-          permanents: a,
-          alwaysShowMask: !!f.props.alwaysShowMask,
-          formatChars: i
-        };
-      }, f.isInputAutofilled = function (e, t, n, a) {
-        var i = f.getInputDOMNode();
-        try {
-          if (i.matches(":-webkit-autofill")) return !0;
-        } catch (r) {}
-        return !f.focused || a.end < n.length && t.end === e.length;
-      }, f.onChange = function (e) {
-        var t = _assertThisInitialized(_assertThisInitialized(f)).beforePasteState,
-          n = _assertThisInitialized(_assertThisInitialized(f)).previousSelection,
-          a = f.props.beforeMaskedValueChange,
-          i = f.getInputValue(),
-          r = f.value,
-          o = f.getSelection();
-        f.isInputAutofilled(i, o, r, n) && (r = formatValue(f.maskOptions, ""), n = {
-          start: 0,
-          end: 0,
-          length: 0
-        }), t && (n = t.selection, r = t.value, o = {
-          start: n.start + i.length,
-          end: n.start + i.length,
-          length: 0
-        }, i = r.slice(0, n.start) + i + r.slice(n.end), f.beforePasteState = null);
-        var s = processChange(f.maskOptions, i, o, r, n),
-          l = s.enteredString,
-          u = s.selection,
-          c = s.value;
-        if (isFunction(a)) {
-          var h = a({
-            value: c,
-            selection: u
-          }, {
-            value: r,
-            selection: n
-          }, l, f.getBeforeMaskedValueChangeConfig());
-          c = h.value, u = h.selection;
-        }
-        f.setInputValue(c), isFunction(f.props.onChange) && f.props.onChange(e), f.isWindowsPhoneBrowser ? f.setSelection(u.start, u.end, {
-          deferred: true
-        }) : f.setSelection(u.start, u.end);
-      }, f.onFocus = function (e) {
-        var t = f.props.beforeMaskedValueChange,
-          n = f.maskOptions,
-          a = n.mask,
-          i = n.prefix;
-        if (f.focused = true, f.mounted = true, a) {
-          if (f.value) getFilledLength(f.maskOptions, f.value) < f.maskOptions.mask.length && f.setCursorToEnd();else {
-            var r = formatValue(f.maskOptions, i),
-              o = formatValue(f.maskOptions, r),
-              s = getFilledLength(f.maskOptions, o),
-              l = getRightEditablePosition(f.maskOptions, s),
-              u = {
-                start: l,
-                end: l
-              };
-            if (isFunction(t)) {
-              var c = t({
-                value: o,
-                selection: u
-              }, {
-                value: f.value,
-                selection: null
-              }, null, f.getBeforeMaskedValueChangeConfig());
-              o = c.value, u = c.selection;
-            }
-            var h = o !== f.getInputValue();
-            h && f.setInputValue(o), h && isFunction(f.props.onChange) && f.props.onChange(e), f.setSelection(u.start, u.end);
-          }
-          f.runSaveSelectionLoop();
-        }
-        isFunction(f.props.onFocus) && f.props.onFocus(e);
-      }, f.onBlur = function (e) {
-        var t = f.props.beforeMaskedValueChange,
-          n = f.maskOptions.mask;
-        if (f.stopSaveSelectionLoop(), f.focused = false, n && !f.props.alwaysShowMask && isEmpty(f.maskOptions, f.value)) {
-          var a = "";
-          if (isFunction(t)) a = t({
-            value: a,
-            selection: null
-          }, {
-            value: f.value,
-            selection: f.previousSelection
-          }, null, f.getBeforeMaskedValueChangeConfig()).value;
-          var i = a !== f.getInputValue();
-          i && f.setInputValue(a), i && isFunction(f.props.onChange) && f.props.onChange(e);
-        }
-        isFunction(f.props.onBlur) && f.props.onBlur(e);
-      }, f.onMouseDown = function (e) {
-        if (!f.focused && document.addEventListener) {
-          f.mouseDownX = e.clientX, f.mouseDownY = e.clientY, f.mouseDownTime = new Date().getTime();
-          var r = function r(e) {
-            if (document.removeEventListener("mouseup", r), f.focused) {
-              var t = Math.abs(e.clientX - f.mouseDownX),
-                n = Math.abs(e.clientY - f.mouseDownY),
-                a = Math.max(t, n),
-                i = new Date().getTime() - f.mouseDownTime;
-              (a <= 10 && i <= 200 || a <= 5 && i <= 300) && f.setCursorToEnd();
-            }
-          };
-          document.addEventListener("mouseup", r);
-        }
-        isFunction(f.props.onMouseDown) && f.props.onMouseDown(e);
-      }, f.onPaste = function (e) {
-        isFunction(f.props.onPaste) && f.props.onPaste(e), e.defaultPrevented || (f.beforePasteState = {
-          value: f.getInputValue(),
-          selection: f.getSelection()
-        }, f.setInputValue(""));
-      }, f.handleRef = function (e) {
-        null == f.props.children && isFunction(f.props.inputRef) && f.props.inputRef(e);
-      };
-      var t = e.mask,
-        n = e.maskChar,
-        a = e.formatChars,
-        i = e.alwaysShowMask,
-        r = e.beforeMaskedValueChange,
-        o = e.defaultValue,
-        s = e.value;
-      f.maskOptions = parseMask(t, n, a), null == o && (o = ""), null == s && (s = o);
-      var l = getStringValue(s);
-      if (f.maskOptions.mask && (i || l) && (l = formatValue(f.maskOptions, l), isFunction(r))) {
-        var u = e.value;
-        null == e.value && (u = o), l = r({
-          value: l,
-          selection: null
-        }, {
-          value: u = getStringValue(u),
-          selection: null
-        }, null, f.getBeforeMaskedValueChangeConfig()).value;
-      }
-      return f.value = l, f;
-    }
-    _inheritsLoose(e, c);
-    var t = e.prototype;
-    return t.componentDidMount = function () {
-      this.mounted = true, this.getInputDOMNode() && (this.isWindowsPhoneBrowser = isWindowsPhoneBrowser(), this.maskOptions.mask && this.getInputValue() !== this.value && this.setInputValue(this.value));
-    }, t.componentDidUpdate = function () {
-      var e = this.previousSelection,
-        t = this.props,
-        n = t.beforeMaskedValueChange,
-        a = t.alwaysShowMask,
-        i = t.mask,
-        r = t.maskChar,
-        o = t.formatChars,
-        s = this.maskOptions,
-        l = a || this.isFocused(),
-        u = null != this.props.value,
-        c = u ? getStringValue(this.props.value) : this.value,
-        h = e ? e.start : null;
-      if (this.maskOptions = parseMask(i, r, o), this.maskOptions.mask) {
-        !s.mask && this.isFocused() && this.runSaveSelectionLoop();
-        var f = this.maskOptions.mask && this.maskOptions.mask !== s.mask;
-        if (s.mask || u || (c = this.getInputValue()), (f || this.maskOptions.mask && (c || l)) && (c = formatValue(this.maskOptions, c)), f) {
-          var p = getFilledLength(this.maskOptions, c);
-          (null === h || p < h) && (h = isFilled(this.maskOptions, c) ? p : getRightEditablePosition(this.maskOptions, p));
-        }
-        !this.maskOptions.mask || !isEmpty(this.maskOptions, c) || l || u && this.props.value || (c = "");
-        var d = {
-          start: h,
-          end: h
-        };
-        if (isFunction(n)) {
-          var m = n({
-            value: c,
-            selection: d
-          }, {
-            value: this.value,
-            selection: this.previousSelection
-          }, null, this.getBeforeMaskedValueChangeConfig());
-          c = m.value, d = m.selection;
-        }
-        this.value = c;
-        var g = this.getInputValue() !== this.value;
-        g ? (this.setInputValue(this.value), this.forceUpdate()) : f && this.forceUpdate();
-        var v = false;
-        null != d.start && null != d.end && (v = !e || e.start !== d.start || e.end !== d.end), (v || g) && this.setSelection(d.start, d.end);
-      } else s.mask && (this.stopSaveSelectionLoop(), this.forceUpdate());
-    }, t.componentWillUnmount = function () {
-      this.mounted = false, null !== this.selectionDeferId && cancelDefer(this.selectionDeferId), this.stopSaveSelectionLoop();
-    }, t.render = function () {
-      var t,
-        e = this.props,
-        n = (e.mask, e.alwaysShowMask, e.maskChar, e.formatChars, e.inputRef, e.beforeMaskedValueChange, e.children),
-        a = _objectWithoutPropertiesLoose(e, ["mask", "alwaysShowMask", "maskChar", "formatChars", "inputRef", "beforeMaskedValueChange", "children"]);
-      if (n) {
-        isFunction(n) || invariant_1(false);
-        var i = ["onChange", "onPaste", "onMouseDown", "onFocus", "onBlur", "value", "disabled", "readOnly"],
-          r = _extends({}, a);
-        i.forEach(function (e) {
-          return delete r[e];
-        }), t = n(r), i.filter(function (e) {
-          return null != t.props[e] && t.props[e] !== a[e];
-        }).length && invariant_1(false);
-      } else t = React$1.createElement("input", _extends({
-        ref: this.handleRef
-      }, a));
-      var o = {
-        onFocus: this.onFocus,
-        onBlur: this.onBlur
-      };
-      return this.maskOptions.mask && (a.disabled || a.readOnly || (o.onChange = this.onChange, o.onPaste = this.onPaste, o.onMouseDown = this.onMouseDown), null != a.value && (o.value = this.value)), t = React$1.cloneElement(t, o);
-    }, e;
-  }(React$1.Component);
-  reactInputMask_production_min = InputElement;
-  return reactInputMask_production_min;
-}
+var reactInputMask_production_min = {exports: {}};
 
 /**
  * Copyright (c) 2013-present, Facebook, Inc.
@@ -8469,31 +7988,527 @@ function requireWarning() {
   return warning_1;
 }
 
+var hasRequiredReactInputMask_production_min;
+function requireReactInputMask_production_min() {
+  if (hasRequiredReactInputMask_production_min) return reactInputMask_production_min.exports;
+  hasRequiredReactInputMask_production_min = 1;
+  var e = React; 
+  var t = requireInvariant();
+  function n() {
+    return n = Object.assign ? Object.assign.bind() : function (e) {
+      for (var t = 1; t < arguments.length; t++) {
+        var n = arguments[t];
+        for (var i in n) Object.prototype.hasOwnProperty.call(n, i) && (e[i] = n[i]);
+      }
+      return e;
+    }, n.apply(this, arguments);
+  }
+  function i(e) {
+    return requestAnimationFrame(e);
+  }
+  function r(e) {
+    cancelAnimationFrame(e);
+  }
+  function a(e) {
+    var t = e.ownerDocument;
+    return t.hasFocus() && t.activeElement === e;
+  }
+  function l(e) {
+    return null == e ? void 0 : e.ownerDocument;
+  }
+  function o(e) {
+    var t = function (e) {
+      var t;
+      return null == (t = l(e)) ? void 0 : t.defaultView;
+    }(e);
+    return !!t && e instanceof t.HTMLElement;
+  }
+  function u(t) {
+    return e.useCallback(function () {
+      var e = t.current,
+        n = "undefined" != typeof window && o(e);
+      if (!e || !n) return null;
+      if ("INPUT" !== e.nodeName && (e = e.querySelector("input")), !e) throw new Error("react-input-mask: inputComponent doesn't contain input node");
+      return e;
+    }, [t]);
+  }
+  function s(t, n) {
+    var l,
+      o,
+      s,
+      c,
+      f = e.useRef({
+        start: null,
+        end: null
+      }),
+      h = u(t),
+      g = e.useCallback(function () {
+        return function (e) {
+          var t = e.selectionStart,
+            n = e.selectionEnd;
+          return {
+            start: t,
+            end: n,
+            length: n - t
+          };
+        }(h());
+      }, [h]),
+      v = e.useCallback(function () {
+        return f.current;
+      }, []),
+      d = e.useCallback(function (e) {
+        var t = h();
+        t && a(t) && (!function (e, t, n) {
+          void 0 === n && (n = t), e.setSelectionRange(t, n);
+        }(t, e.start, e.end), f.current = g());
+      }, [h, g]),
+      m = e.useCallback(function () {
+        f.current = g();
+      }, [g]),
+      p = (l = m, o = e.useRef(null), s = e.useCallback(function () {
+        null === o.current && function e() {
+          l(), o.current = i(e);
+        }();
+      }, [l]), c = e.useCallback(function () {
+        r(o.current), o.current = null;
+      }, []), e.useEffect(function () {
+        o.current && (c(), s());
+      }, [s, c]), e.useEffect(r, []), [s, c]),
+      k = p[0],
+      P = p[1];
+    return e.useLayoutEffect(function () {
+      if (n) {
+        var e = h();
+        return e.addEventListener("focus", k), e.addEventListener("blur", P), a(e) && k(), function () {
+          e.removeEventListener("focus", k), e.removeEventListener("blur", P), P();
+        };
+      }
+    }), {
+      getSelection: g,
+      getLastSelection: v,
+      setSelection: d
+    };
+  }
+  function c(t, n) {
+    var i = e.useRef(),
+      r = s(i, n),
+      a = r.getSelection,
+      l = r.getLastSelection,
+      o = r.setSelection,
+      c = function (t, n) {
+        var i = u(t),
+          r = e.useRef(n);
+        return {
+          getValue: e.useCallback(function () {
+            return i().value;
+          }, [i]),
+          getLastValue: e.useCallback(function () {
+            return r.current;
+          }, []),
+          setValue: e.useCallback(function (e) {
+            r.current = e;
+            var t = i();
+            t && (t.value = e);
+          }, [i])
+        };
+      }(i, t),
+      f = c.getValue,
+      h = c.getLastValue,
+      g = c.setValue;
+    return {
+      inputRef: i,
+      getInputState: function getInputState() {
+        return {
+          value: f(),
+          selection: a()
+        };
+      },
+      getLastInputState: function getLastInputState() {
+        return {
+          value: h(),
+          selection: l()
+        };
+      },
+      setInputState: function setInputState(e) {
+        var t = e.value,
+          n = e.selection;
+        g(t), o(n);
+      }
+    };
+  }
+  requireWarning();
+  var f = ["disabled", "onBlur", "onChange", "onFocus", "onMouseDown", "readOnly", "value"],
+    h = {
+      9: /[0-9]/,
+      a: /[A-Za-z]/,
+      "*": /[A-Za-z0-9]/
+    };
+  var g = function g(e) {
+      var t = this;
+      this.isCharacterAllowedAtPosition = function (e, n) {
+        var i = t.maskOptions.maskPlaceholder;
+        return !!t.isCharacterFillingPosition(e, n) || !!i && i[n] === e;
+      }, this.isCharacterFillingPosition = function (e, n) {
+        var i = t.maskOptions.mask;
+        if (!e || n >= i.length) return false;
+        if (!t.isPositionEditable(n)) return i[n] === e;
+        var r = i[n];
+        return new RegExp(r).test(e);
+      }, this.isPositionEditable = function (e) {
+        var n = t.maskOptions,
+          i = n.mask,
+          r = n.permanents;
+        return e < i.length && -1 === r.indexOf(e);
+      }, this.isValueEmpty = function (e) {
+        return e.split("").every(function (e, n) {
+          return !t.isPositionEditable(n) || !t.isCharacterFillingPosition(e, n);
+        });
+      }, this.isValueFilled = function (e) {
+        return t.getFilledLength(e) === t.maskOptions.lastEditablePosition + 1;
+      }, this.getDefaultSelectionForValue = function (e) {
+        var n = t.getFilledLength(e),
+          i = t.getRightEditablePosition(n);
+        return {
+          start: i,
+          end: i
+        };
+      }, this.getFilledLength = function (e) {
+        return function (e, t) {
+          for (var n = e.length - 1; n >= 0; n--) if (t(e[n], n)) return n;
+          return -1;
+        }(e.split(""), function (e, n) {
+          return t.isPositionEditable(n) && t.isCharacterFillingPosition(e, n);
+        }) + 1;
+      }, this.getStringFillingLengthAtPosition = function (e, n) {
+        return e.split("").reduce(function (e, n) {
+          return t.insertCharacterAtPosition(e, n, e.length);
+        }, function (e, t) {
+          void 0 === t && (t = 1);
+          for (var n = "", i = 0; i < t; i++) n += e;
+          return n;
+        }(" ", n)).length - n;
+      }, this.getLeftEditablePosition = function (e) {
+        for (var n = e; n >= 0; n--) if (t.isPositionEditable(n)) return n;
+        return null;
+      }, this.getRightEditablePosition = function (e) {
+        for (var n = t.maskOptions.mask, i = e; i < n.length; i++) if (t.isPositionEditable(i)) return i;
+        return null;
+      }, this.formatValue = function (e) {
+        var n = t.maskOptions,
+          i = n.maskPlaceholder,
+          r = n.mask;
+        if (!i) {
+          for (e = t.insertStringAtPosition("", e, 0); e.length < r.length && !t.isPositionEditable(e.length);) e += r[e.length];
+          return e;
+        }
+        return t.insertStringAtPosition(i, e, 0);
+      }, this.clearRange = function (e, n, i) {
+        if (!i) return e;
+        var r = n + i,
+          a = t.maskOptions,
+          l = a.maskPlaceholder,
+          o = a.mask,
+          u = e.split("").map(function (e, i) {
+            var a = t.isPositionEditable(i);
+            return !l && i >= r && !a ? "" : i < n || i >= r ? e : a ? l ? l[i] : "" : o[i];
+          }).join("");
+        return t.formatValue(u);
+      }, this.insertCharacterAtPosition = function (e, n, i) {
+        var r = t.maskOptions,
+          a = r.mask,
+          l = r.maskPlaceholder;
+        if (i >= a.length) return e;
+        var o = t.isCharacterAllowedAtPosition(n, i),
+          u = t.isPositionEditable(i),
+          s = t.getRightEditablePosition(i),
+          c = l && s ? n === l[s] : null,
+          f = e.slice(0, i);
+        !o && u || (e = f + (o ? n : a[i]));
+        return o || u || c || (e = t.insertCharacterAtPosition(e, n, i + 1)), e;
+      }, this.insertStringAtPosition = function (e, n, i) {
+        var r = t.maskOptions,
+          a = r.mask,
+          l = r.maskPlaceholder;
+        if (!n || i >= a.length) return e;
+        var o = n.split(""),
+          u = t.isValueFilled(e) || !!l,
+          s = e.slice(i);
+        if (e = o.reduce(function (e, n) {
+          return t.insertCharacterAtPosition(e, n, e.length);
+        }, e.slice(0, i)), u) e += s.slice(e.length - i);else if (t.isValueFilled(e)) e += a.slice(e.length).join("");else {
+          e = s.split("").filter(function (e, n) {
+            return t.isPositionEditable(i + n);
+          }).reduce(function (e, n) {
+            var i = t.getRightEditablePosition(e.length);
+            return null === i ? e : (t.isPositionEditable(e.length) || (e += a.slice(e.length, i).join("")), t.insertCharacterAtPosition(e, n, e.length));
+          }, e);
+        }
+        return e;
+      }, this.processChange = function (e, n) {
+        var i = t.maskOptions,
+          r = i.mask,
+          a = i.prefix,
+          l = i.lastEditablePosition,
+          o = e.value,
+          u = e.selection,
+          s = n.value,
+          c = n.selection,
+          f = o,
+          h = "",
+          g = 0,
+          v = 0,
+          d = Math.min(c.start, u.start);
+        if (u.end > c.start ? (h = f.slice(c.start, u.end), v = (g = t.getStringFillingLengthAtPosition(h, d)) ? c.length : 0) : f.length < s.length && (v = s.length - f.length), f = s, v) {
+          if (1 === v && !c.length) d = c.start === u.start ? t.getRightEditablePosition(u.start) : t.getLeftEditablePosition(u.start);
+          f = t.clearRange(f, d, v);
+        }
+        return f = t.insertStringAtPosition(f, h, d), (d += g) >= r.length ? d = r.length : d < a.length && !g ? d = a.length : d >= a.length && d < l && g && (d = t.getRightEditablePosition(d)), {
+          value: f = t.formatValue(f),
+          enteredString: h,
+          selection: {
+            start: d,
+            end: d
+          }
+        };
+      }, this.maskOptions = function (e) {
+        var t = e.mask,
+          n = e.maskPlaceholder,
+          i = [];
+        if (!t) return {
+          maskPlaceholder: null,
+          mask: null,
+          prefix: null,
+          lastEditablePosition: null,
+          permanents: []
+        };
+        if ("string" == typeof t) {
+          var r = false,
+            a = "";
+          t.split("").forEach(function (e) {
+            r || "\\" !== e ? (!r && h[e] || i.push(a.length), a += e, r = false) : r = true;
+          }), t = a.split("").map(function (e, t) {
+            return -1 === i.indexOf(t) ? h[e] : e;
+          });
+        } else t.forEach(function (e, t) {
+          "string" == typeof e && i.push(t);
+        });
+        n && (n = 1 === n.length ? t.map(function (e, t) {
+          return -1 !== i.indexOf(t) ? e : n;
+        }) : n.split(""), i.forEach(function (e) {
+          n[e] = t[e];
+        }), n = n.join(""));
+        for (var l = i.filter(function (e, t) {
+            return e === t;
+          }).map(function (e) {
+            return t[e];
+          }).join(""), o = t.length - 1; -1 !== i.indexOf(o);) o--;
+        return {
+          maskPlaceholder: n,
+          prefix: l,
+          mask: t,
+          lastEditablePosition: o,
+          permanents: i
+        };
+      }(e);
+    },
+    v = ["alwaysShowMask", "children", "mask", "maskPlaceholder", "beforeMaskedStateChange"],
+    d = e.forwardRef(function (r, o) {
+      var s = r.alwaysShowMask,
+        h = r.children,
+        d = r.mask,
+        m = r.maskPlaceholder,
+        p = r.beforeMaskedStateChange,
+        k = function (e, t) {
+          if (null == e) return {};
+          var n,
+            i,
+            r = {},
+            a = Object.keys(e);
+          for (i = 0; i < a.length; i++) n = a[i], t.indexOf(n) >= 0 || (r[n] = e[n]);
+          return r;
+        }(r, v);
+      !function (e) {
+        var n = e.mask,
+          i = e.maskPlaceholder;
+        n && i && 1 !== i.length && i.length !== n.length && t(false);
+      }(r);
+      var P,
+        b,
+        E = new g({
+          mask: d,
+          maskPlaceholder: m
+        }),
+        S = !!d,
+        C = !k.disabled && !k.readOnly,
+        w = null !== r.value && void 0 !== r.value,
+        V = (P = S, b = e.useRef(), e.useEffect(function () {
+          b.current = P;
+        }), b.current),
+        F = function (e) {
+          return "" + e;
+        }((w ? r.value : r.defaultValue) || ""),
+        y = c(F, S),
+        O = y.inputRef,
+        L = y.getInputState,
+        A = y.setInputState,
+        R = y.getLastInputState,
+        x = u(O);
+      if (S && w) {
+        var M = x(),
+          D = M && a(M) || s || r.value ? E.formatValue(r.value) : r.value;
+        p && (D = p({
+          nextState: {
+            value: D,
+            selection: {
+              start: null,
+              end: null
+            }
+          }
+        }).value), A(n({}, R(), {
+          value: D
+        }));
+      }
+      var j = R(),
+        I = j.selection,
+        q = j.value;
+      e.useLayoutEffect(function () {
+        if (S) {
+          var e = x();
+          if (e) {
+            var t = a(e),
+              i = I,
+              r = L(),
+              l = n({}, r);
+            if (!w) {
+              var o = r.value,
+                u = E.formatValue(o),
+                c = E.isValueEmpty(u);
+              !c || t || s ? l.value = u : c && !t && (l.value = "");
+            }
+            t && !V ? l.selection = E.getDefaultSelectionForValue(l.value) : w && t && i && null !== i.start && null !== i.end && (l.selection = i), p && (l = p({
+              currentState: r,
+              nextState: l
+            })), A(l);
+          }
+        }
+      });
+      var B = function B(e) {
+          O.current = e, !function (e) {
+            return "function" == typeof e;
+          }(o) ? null !== o && "object" == _typeof$1(o) && (o.current = e) : o(e);
+        },
+        T = n({}, k, {
+          onFocus: function onFocus(e) {
+            O.current = e.target;
+            var t = L().value;
+            if (S && !E.isValueFilled(t)) {
+              var n = E.formatValue(t),
+                a = E.getDefaultSelectionForValue(n),
+                l = {
+                  value: n,
+                  selection: a
+                };
+              p && (n = (l = p({
+                currentState: L(),
+                nextState: l
+              })).value, a = l.selection), A(l), n !== t && r.onChange && r.onChange(e), i(function () {
+                A(R());
+              });
+            }
+            r.onFocus && r.onFocus(e);
+          },
+          onBlur: function onBlur(e) {
+            var t = L().value,
+              n = R().value;
+            if (S && !s && E.isValueEmpty(n)) {
+              var i = "",
+                a = {
+                  value: i,
+                  selection: {
+                    start: null,
+                    end: null
+                  }
+                };
+              p && (i = (a = p({
+                currentState: L(),
+                nextState: a
+              })).value), A(a), i !== t && r.onChange && r.onChange(e);
+            }
+            r.onBlur && r.onBlur(e);
+          },
+          onChange: S && C ? function (e) {
+            var t = L(),
+              n = R(),
+              i = E.processChange(t, n);
+            p && (i = p({
+              currentState: t,
+              previousState: n,
+              nextState: i
+            })), A(i), r.onChange && r.onChange(e);
+          } : r.onChange,
+          onMouseDown: S && C ? function (e) {
+            var t = x();
+            if (t) {
+              var i = L().value,
+                o = l(t);
+              if (!a(t) && !E.isValueFilled(i)) {
+                var u = e.clientX,
+                  s = e.clientY,
+                  c = new Date().getTime();
+                o.addEventListener("mouseup", function e(i) {
+                  if (o.removeEventListener("mouseup", e), a(t)) {
+                    var r = Math.abs(i.clientX - u),
+                      l = Math.abs(i.clientY - s),
+                      f = Math.max(r, l),
+                      h = new Date().getTime() - c;
+                    if (f <= 10 && h <= 200 || f <= 5 && h <= 300) {
+                      var g = R(),
+                        v = n({}, g, {
+                          selection: E.getDefaultSelectionForValue(g.value)
+                        });
+                      A(v);
+                    }
+                  }
+                });
+              }
+              r.onMouseDown && r.onMouseDown(e);
+            }
+          } : r.onMouseDown,
+          value: S && w ? q : r.value
+        });
+      if (h) {
+        !function (e, n) {
+          f.filter(function (t) {
+            return null != n.props[t] && n.props[t] !== e[t];
+          }).length && t(false);
+        }(r, h);
+        var N = e.Children.only(h);
+        return e.cloneElement(N, n({}, T, {
+          ref: B
+        }));
+      }
+      return e.createElement("input", n({
+        ref: B
+      }, T));
+    });
+  d.displayName = "InputMask", d.defaultProps = {
+    alwaysShowMask: false,
+    maskPlaceholder: "_"
+  }, reactInputMask_production_min.exports = d;
+  return reactInputMask_production_min.exports;
+}
+
 var reactInputMask_development;
 var hasRequiredReactInputMask_development;
 function requireReactInputMask_development() {
   if (hasRequiredReactInputMask_development) return reactInputMask_development;
   hasRequiredReactInputMask_development = 1;
-  function _interopDefault(ex) {
-    return ex && _typeof$1(ex) === 'object' && 'default' in ex ? ex['default'] : ex;
-  }
-  var React$1 = _interopDefault(React);
-  var reactDom = require$$1;
-  var invariant = _interopDefault(requireInvariant());
-  var warning = _interopDefault(requireWarning());
-  function _defaults2(obj, defaults) {
-    var keys = Object.getOwnPropertyNames(defaults);
-    for (var i = 0; i < keys.length; i++) {
-      var key = keys[i];
-      var value = Object.getOwnPropertyDescriptor(defaults, key);
-      if (value && value.configurable && obj[key] === undefined) {
-        Object.defineProperty(obj, key, value);
-      }
-    }
-    return obj;
-  }
+  var React$1 = React;
+  var PropTypes = /*@__PURE__*/requirePropTypes();
+  var invariant = requireInvariant();
+  var warning = requireWarning();
   function _extends() {
-    _extends = Object.assign || function (target) {
+    _extends = Object.assign ? Object.assign.bind() : function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
         for (var key in source) {
@@ -8506,11 +8521,6 @@ function requireReactInputMask_development() {
     };
     return _extends.apply(this, arguments);
   }
-  function _inheritsLoose(subClass, superClass) {
-    subClass.prototype = Object.create(superClass.prototype);
-    subClass.prototype.constructor = subClass;
-    _defaults2(subClass, superClass);
-  }
   function _objectWithoutPropertiesLoose(source, excluded) {
     if (source == null) return {};
     var target = {};
@@ -8523,895 +8533,825 @@ function requireReactInputMask_development() {
     }
     return target;
   }
-  function _assertThisInitialized(self) {
-    if (self === void 0) {
-      throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-    }
-    return self;
+  function defer(fn) {
+    return requestAnimationFrame(fn);
+  }
+  function cancelDefer(deferId) {
+    cancelAnimationFrame(deferId);
   }
   function setInputSelection(input, start, end) {
-    if ('selectionStart' in input && 'selectionEnd' in input) {
-      input.selectionStart = start;
-      input.selectionEnd = end;
-    } else {
-      var range = input.createTextRange();
-      range.collapse(true);
-      range.moveStart('character', start);
-      range.moveEnd('character', end - start);
-      range.select();
+    if (end === undefined) {
+      end = start;
     }
+    input.setSelectionRange(start, end);
   }
   function getInputSelection(input) {
-    var start = 0;
-    var end = 0;
-    if ('selectionStart' in input && 'selectionEnd' in input) {
-      start = input.selectionStart;
-      end = input.selectionEnd;
-    } else {
-      var range = document.selection.createRange();
-      if (range.parentElement() === input) {
-        start = -range.moveStart('character', -input.value.length);
-        end = -range.moveEnd('character', -input.value.length);
-      }
-    }
+    var start = input.selectionStart;
+    var end = input.selectionEnd;
     return {
       start: start,
       end: end,
       length: end - start
     };
   }
-  var defaultFormatChars = {
-    '9': '[0-9]',
-    'a': '[A-Za-z]',
-    '*': '[A-Za-z0-9]'
-  };
-  var defaultMaskChar = '_';
-  function parseMask(mask, maskChar, formatChars) {
-    var parsedMaskString = '';
-    var prefix = '';
-    var lastEditablePosition = null;
-    var permanents = [];
-    if (maskChar === undefined) {
-      maskChar = defaultMaskChar;
-    }
-    if (formatChars == null) {
-      formatChars = defaultFormatChars;
-    }
-    if (!mask || typeof mask !== 'string') {
-      return {
-        maskChar: maskChar,
-        formatChars: formatChars,
-        mask: null,
-        prefix: null,
-        lastEditablePosition: null,
-        permanents: []
-      };
-    }
-    var isPermanent = false;
-    mask.split('').forEach(function (character) {
-      if (!isPermanent && character === '\\') {
-        isPermanent = true;
-      } else {
-        if (isPermanent || !formatChars[character]) {
-          permanents.push(parsedMaskString.length);
-          if (parsedMaskString.length === permanents.length - 1) {
-            prefix += character;
-          }
-        } else {
-          lastEditablePosition = parsedMaskString.length + 1;
-        }
-        parsedMaskString += character;
-        isPermanent = false;
-      }
-    });
-    return {
-      maskChar: maskChar,
-      formatChars: formatChars,
-      prefix: prefix,
-      mask: parsedMaskString,
-      lastEditablePosition: lastEditablePosition,
-      permanents: permanents
-    };
+  function isInputFocused(input) {
+    var inputDocument = input.ownerDocument;
+    return inputDocument.hasFocus() && inputDocument.activeElement === input;
   }
 
-  /* eslint no-use-before-define: ["error", { functions: false }] */
-  function isPermanentCharacter(maskOptions, pos) {
-    return maskOptions.permanents.indexOf(pos) !== -1;
+  // Element's window may differ from the one within React instance
+  // if element rendered within iframe.
+  // See https://github.com/sanniassin/react-input-mask/issues/182
+  function getElementDocument(element) {
+    return element == null ? void 0 : element.ownerDocument;
   }
-  function isAllowedCharacter(maskOptions, pos, character) {
-    var mask = maskOptions.mask,
-      formatChars = maskOptions.formatChars;
-    if (!character) {
-      return false;
-    }
-    if (isPermanentCharacter(maskOptions, pos)) {
-      return mask[pos] === character;
-    }
-    var ruleChar = mask[pos];
-    var charRule = formatChars[ruleChar];
-    return new RegExp(charRule).test(character);
+  function getElementWindow(element) {
+    var _getElementDocument;
+    return (_getElementDocument = getElementDocument(element)) == null ? void 0 : _getElementDocument.defaultView;
   }
-  function isEmpty(maskOptions, value) {
-    return value.split('').every(function (character, i) {
-      return isPermanentCharacter(maskOptions, i) || !isAllowedCharacter(maskOptions, i, character);
-    });
+  function isDOMElement(element) {
+    var elementWindow = getElementWindow(element);
+    return !!elementWindow && element instanceof elementWindow.HTMLElement;
   }
-  function getFilledLength(maskOptions, value) {
-    var maskChar = maskOptions.maskChar,
-      prefix = maskOptions.prefix;
-    if (!maskChar) {
-      while (value.length > prefix.length && isPermanentCharacter(maskOptions, value.length - 1)) {
-        value = value.slice(0, value.length - 1);
-      }
-      return value.length;
-    }
-    var filledLength = prefix.length;
-    for (var i = value.length; i >= prefix.length; i--) {
-      var character = value[i];
-      var isEnteredCharacter = !isPermanentCharacter(maskOptions, i) && isAllowedCharacter(maskOptions, i, character);
-      if (isEnteredCharacter) {
-        filledLength = i + 1;
-        break;
+  function isFunction(value) {
+    return typeof value === "function";
+  }
+  function findLastIndex(array, predicate) {
+    for (var i = array.length - 1; i >= 0; i--) {
+      var x = array[i];
+      if (predicate(x, i)) {
+        return i;
       }
     }
-    return filledLength;
+    return -1;
   }
-  function isFilled(maskOptions, value) {
-    return getFilledLength(maskOptions, value) === maskOptions.mask.length;
-  }
-  function formatValue(maskOptions, value) {
-    var maskChar = maskOptions.maskChar,
-      mask = maskOptions.mask,
-      prefix = maskOptions.prefix;
-    if (!maskChar) {
-      value = insertString(maskOptions, '', value, 0);
-      if (value.length < prefix.length) {
-        value = prefix;
-      }
-      while (value.length < mask.length && isPermanentCharacter(maskOptions, value.length)) {
-        value += mask[value.length];
-      }
-      return value;
+  function repeat(string, n) {
+    if (n === void 0) {
+      n = 1;
     }
-    if (value) {
-      var emptyValue = formatValue(maskOptions, '');
-      return insertString(maskOptions, emptyValue, value, 0);
+    var result = "";
+    for (var i = 0; i < n; i++) {
+      result += string;
     }
-    for (var i = 0; i < mask.length; i++) {
-      if (isPermanentCharacter(maskOptions, i)) {
-        value += mask[i];
-      } else {
-        value += maskChar;
-      }
-    }
-    return value;
-  }
-  function clearRange(maskOptions, value, start, len) {
-    var end = start + len;
-    var maskChar = maskOptions.maskChar,
-      mask = maskOptions.mask,
-      prefix = maskOptions.prefix;
-    var arrayValue = value.split('');
-    if (!maskChar) {
-      // remove any permanent chars after clear range, they will be added back by formatValue
-      for (var i = end; i < arrayValue.length; i++) {
-        if (isPermanentCharacter(maskOptions, i)) {
-          arrayValue[i] = '';
-        }
+    return result;
+  }
+  function toString(value) {
+    return "" + value;
+  }
+  function useInputElement(inputRef) {
+    return React$1.useCallback(function () {
+      var input = inputRef.current;
+      var isDOMNode = typeof window !== "undefined" && isDOMElement(input);
+
+      // workaround for react-test-renderer
+      // https://github.com/sanniassin/react-input-mask/issues/147
+      if (!input || !isDOMNode) {
+        return null;
       }
-      start = Math.max(prefix.length, start);
-      arrayValue.splice(start, end - start);
-      value = arrayValue.join('');
-      return formatValue(maskOptions, value);
-    }
-    return arrayValue.map(function (character, i) {
-      if (i < start || i >= end) {
-        return character;
+      if (input.nodeName !== "INPUT") {
+        input = input.querySelector("input");
       }
-      if (isPermanentCharacter(maskOptions, i)) {
-        return mask[i];
+      if (!input) {
+        throw new Error("react-input-mask: inputComponent doesn't contain input node");
       }
-      return maskChar;
-    }).join('');
+      return input;
+    }, [inputRef]);
   }
-  function insertString(maskOptions, value, insertStr, insertPosition) {
-    var mask = maskOptions.mask,
-      maskChar = maskOptions.maskChar,
-      prefix = maskOptions.prefix;
-    var arrayInsertStr = insertStr.split('');
-    var isInputFilled = isFilled(maskOptions, value);
-    var isUsablePosition = function isUsablePosition(pos, character) {
-      return !isPermanentCharacter(maskOptions, pos) || character === mask[pos];
-    };
-    var isUsableCharacter = function isUsableCharacter(character, pos) {
-      return !maskChar || !isPermanentCharacter(maskOptions, pos) || character !== maskChar;
-    };
-    if (!maskChar && insertPosition > value.length) {
-      value += mask.slice(value.length, insertPosition);
-    }
-    arrayInsertStr.every(function (insertCharacter) {
-      while (!isUsablePosition(insertPosition, insertCharacter)) {
-        if (insertPosition >= value.length) {
-          value += mask[insertPosition];
-        }
-        if (!isUsableCharacter(insertCharacter, insertPosition)) {
-          return true;
-        }
-        insertPosition++; // stop iteration if maximum value length reached
-
-        if (insertPosition >= mask.length) {
-          return false;
-        }
-      }
-      var isAllowed = isAllowedCharacter(maskOptions, insertPosition, insertCharacter) || insertCharacter === maskChar;
-      if (!isAllowed) {
-        return true;
+  function useDeferLoop(callback) {
+    var deferIdRef = React$1.useRef(null);
+    var runLoop = React$1.useCallback(function () {
+      // If there are simulated focus events, runLoop could be
+      // called multiple times without blur or re-render
+      if (deferIdRef.current !== null) {
+        return;
       }
-      if (insertPosition < value.length) {
-        if (maskChar || isInputFilled || insertPosition < prefix.length) {
-          value = value.slice(0, insertPosition) + insertCharacter + value.slice(insertPosition + 1);
-        } else {
-          value = value.slice(0, insertPosition) + insertCharacter + value.slice(insertPosition);
-          value = formatValue(maskOptions, value);
-        }
-      } else if (!maskChar) {
-        value += insertCharacter;
+      function loop() {
+        callback();
+        deferIdRef.current = defer(loop);
       }
-      insertPosition++; // stop iteration if maximum value length reached
-
-      return insertPosition < mask.length;
+      loop();
+    }, [callback]);
+    var stopLoop = React$1.useCallback(function () {
+      cancelDefer(deferIdRef.current);
+      deferIdRef.current = null;
+    }, []);
+    React$1.useEffect(function () {
+      if (deferIdRef.current) {
+        stopLoop();
+        runLoop();
+      }
+    }, [runLoop, stopLoop]);
+    React$1.useEffect(cancelDefer, []);
+    return [runLoop, stopLoop];
+  }
+  function useSelection(inputRef, isMasked) {
+    var selectionRef = React$1.useRef({
+      start: null,
+      end: null
     });
-    return value;
-  }
-  function getInsertStringLength(maskOptions, value, insertStr, insertPosition) {
-    var mask = maskOptions.mask,
-      maskChar = maskOptions.maskChar;
-    var arrayInsertStr = insertStr.split('');
-    var initialInsertPosition = insertPosition;
-    var isUsablePosition = function isUsablePosition(pos, character) {
-      return !isPermanentCharacter(maskOptions, pos) || character === mask[pos];
-    };
-    arrayInsertStr.every(function (insertCharacter) {
-      while (!isUsablePosition(insertPosition, insertCharacter)) {
-        insertPosition++; // stop iteration if maximum value length reached
+    var getInputElement = useInputElement(inputRef);
+    var getSelection = React$1.useCallback(function () {
+      var input = getInputElement();
+      return getInputSelection(input);
+    }, [getInputElement]);
+    var getLastSelection = React$1.useCallback(function () {
+      return selectionRef.current;
+    }, []);
+    var setSelection = React$1.useCallback(function (selection) {
+      var input = getInputElement();
 
-        if (insertPosition >= mask.length) {
-          return false;
-        }
+      // Don't change selection on unfocused input
+      // because Safari sets focus on selection change (#154)
+      if (!input || !isInputFocused(input)) {
+        return;
       }
-      var isAllowed = isAllowedCharacter(maskOptions, insertPosition, insertCharacter) || insertCharacter === maskChar;
-      if (isAllowed) {
-        insertPosition++;
-      } // stop iteration if maximum value length reached
-
-      return insertPosition < mask.length;
-    });
-    return insertPosition - initialInsertPosition;
-  }
-  function getLeftEditablePosition(maskOptions, pos) {
-    for (var i = pos; i >= 0; --i) {
-      if (!isPermanentCharacter(maskOptions, i)) {
-        return i;
+      setInputSelection(input, selection.start, selection.end);
+
+      // Use actual selection in case the requested one was out of range
+      selectionRef.current = getSelection();
+    }, [getInputElement, getSelection]);
+    var selectionLoop = React$1.useCallback(function () {
+      selectionRef.current = getSelection();
+    }, [getSelection]);
+    var _useDeferLoop = useDeferLoop(selectionLoop),
+      runSelectionLoop = _useDeferLoop[0],
+      stopSelectionLoop = _useDeferLoop[1];
+    React$1.useLayoutEffect(function () {
+      if (!isMasked) {
+        return;
       }
-    }
-    return null;
-  }
-  function getRightEditablePosition(maskOptions, pos) {
-    var mask = maskOptions.mask;
-    for (var i = pos; i < mask.length; ++i) {
-      if (!isPermanentCharacter(maskOptions, i)) {
-        return i;
+      var input = getInputElement();
+      input.addEventListener("focus", runSelectionLoop);
+      input.addEventListener("blur", stopSelectionLoop);
+      if (isInputFocused(input)) {
+        runSelectionLoop();
       }
-    }
-    return null;
+      return function () {
+        input.removeEventListener("focus", runSelectionLoop);
+        input.removeEventListener("blur", stopSelectionLoop);
+        stopSelectionLoop();
+      };
+    });
+    return {
+      getSelection: getSelection,
+      getLastSelection: getLastSelection,
+      setSelection: setSelection
+    };
   }
-  function getStringValue(value) {
-    return !value && value !== 0 ? '' : value + '';
-  }
-  function processChange(maskOptions, value, selection, previousValue, previousSelection) {
-    var mask = maskOptions.mask,
-      prefix = maskOptions.prefix,
-      lastEditablePosition = maskOptions.lastEditablePosition;
-    var newValue = value;
-    var enteredString = '';
-    var formattedEnteredStringLength = 0;
-    var removedLength = 0;
-    var cursorPosition = Math.min(previousSelection.start, selection.start);
-    if (selection.end > previousSelection.start) {
-      enteredString = newValue.slice(previousSelection.start, selection.end);
-      formattedEnteredStringLength = getInsertStringLength(maskOptions, previousValue, enteredString, cursorPosition);
-      if (!formattedEnteredStringLength) {
-        removedLength = 0;
-      } else {
-        removedLength = previousSelection.length;
-      }
-    } else if (newValue.length < previousValue.length) {
-      removedLength = previousValue.length - newValue.length;
-    }
-    newValue = previousValue;
-    if (removedLength) {
-      if (removedLength === 1 && !previousSelection.length) {
-        var deleteFromRight = previousSelection.start === selection.start;
-        cursorPosition = deleteFromRight ? getRightEditablePosition(maskOptions, selection.start) : getLeftEditablePosition(maskOptions, selection.start);
+  function useValue(inputRef, initialValue) {
+    var getInputElement = useInputElement(inputRef);
+    var valueRef = React$1.useRef(initialValue);
+    var getValue = React$1.useCallback(function () {
+      var input = getInputElement();
+      return input.value;
+    }, [getInputElement]);
+    var getLastValue = React$1.useCallback(function () {
+      return valueRef.current;
+    }, []);
+    var setValue = React$1.useCallback(function (newValue) {
+      valueRef.current = newValue;
+      var input = getInputElement();
+      if (input) {
+        input.value = newValue;
       }
-      newValue = clearRange(maskOptions, newValue, cursorPosition, removedLength);
+    }, [getInputElement]);
+    return {
+      getValue: getValue,
+      getLastValue: getLastValue,
+      setValue: setValue
+    };
+  }
+  function useInputState(initialValue, isMasked) {
+    var inputRef = React$1.useRef();
+    var _useSelection = useSelection(inputRef, isMasked),
+      getSelection = _useSelection.getSelection,
+      getLastSelection = _useSelection.getLastSelection,
+      setSelection = _useSelection.setSelection;
+    var _useValue = useValue(inputRef, initialValue),
+      getValue = _useValue.getValue,
+      getLastValue = _useValue.getLastValue,
+      setValue = _useValue.setValue;
+    function getLastInputState() {
+      return {
+        value: getLastValue(),
+        selection: getLastSelection()
+      };
     }
-    newValue = insertString(maskOptions, newValue, enteredString, cursorPosition);
-    cursorPosition = cursorPosition + formattedEnteredStringLength;
-    if (cursorPosition >= mask.length) {
-      cursorPosition = mask.length;
-    } else if (cursorPosition < prefix.length && !formattedEnteredStringLength) {
-      cursorPosition = prefix.length;
-    } else if (cursorPosition >= prefix.length && cursorPosition < lastEditablePosition && formattedEnteredStringLength) {
-      cursorPosition = getRightEditablePosition(maskOptions, cursorPosition);
+    function getInputState() {
+      return {
+        value: getValue(),
+        selection: getSelection()
+      };
     }
-    newValue = formatValue(maskOptions, newValue);
-    if (!enteredString) {
-      enteredString = null;
+    function setInputState(_ref) {
+      var value = _ref.value,
+        selection = _ref.selection;
+      setValue(value);
+      setSelection(selection);
     }
     return {
-      value: newValue,
-      enteredString: enteredString,
-      selection: {
-        start: cursorPosition,
-        end: cursorPosition
-      }
+      inputRef: inputRef,
+      getInputState: getInputState,
+      getLastInputState: getLastInputState,
+      setInputState: setInputState
     };
   }
-  function isWindowsPhoneBrowser() {
-    var windows = new RegExp('windows', 'i');
-    var phone = new RegExp('phone', 'i');
-    var ua = navigator.userAgent;
-    return windows.test(ua) && phone.test(ua);
+  function usePrevious(value) {
+    var ref = React$1.useRef();
+    React$1.useEffect(function () {
+      ref.current = value;
+    });
+    return ref.current;
   }
-  function isFunction(value) {
-    return typeof value === 'function';
+  var CONTROLLED_PROPS = ["disabled", "onBlur", "onChange", "onFocus", "onMouseDown", "readOnly", "value"];
+  var defaultFormatChars = {
+    9: /[0-9]/,
+    a: /[A-Za-z]/,
+    "*": /[A-Za-z0-9]/
+  };
+  function validateMaxLength(props) {
+    process.env.NODE_ENV !== "production" ? warning(!props.maxLength || !props.mask, "react-input-mask: maxLength property shouldn't be passed to the masked input. It breaks masking and unnecessary because length is limited by the mask length.") : void 0;
   }
-  function getRequestAnimationFrame() {
-    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame;
+  function validateMaskPlaceholder(props) {
+    var mask = props.mask,
+      maskPlaceholder = props.maskPlaceholder;
+    !(!mask || !maskPlaceholder || maskPlaceholder.length === 1 || maskPlaceholder.length === mask.length) ? process.env.NODE_ENV !== "production" ? invariant(false, "react-input-mask: maskPlaceholder should either be a single character or have the same length as the mask:\n" + ("mask: " + mask + "\n") + ("maskPlaceholder: " + maskPlaceholder)) : invariant(false) : void 0;
   }
-  function getCancelAnimationFrame() {
-    return window.cancelAnimationFrame || window.webkitCancelRequestAnimationFrame || window.webkitCancelAnimationFrame || window.mozCancelAnimationFrame;
+  function validateChildren(props, inputElement) {
+    var conflictProps = CONTROLLED_PROPS.filter(function (propId) {
+      return inputElement.props[propId] != null && inputElement.props[propId] !== props[propId];
+    });
+    !!conflictProps.length ? process.env.NODE_ENV !== "production" ? invariant(false, "react-input-mask: the following props should be passed to the InputMask component, not to children: " + conflictProps.join(",")) : invariant(false) : void 0;
   }
-  function defer(fn) {
-    var hasCancelAnimationFrame = !!getCancelAnimationFrame();
-    var deferFn;
-    if (hasCancelAnimationFrame) {
-      deferFn = getRequestAnimationFrame();
-    } else {
-      deferFn = function deferFn() {
-        return setTimeout(fn, 1000 / 60);
+  var parseMask = function parseMask(_ref) {
+    var mask = _ref.mask,
+      maskPlaceholder = _ref.maskPlaceholder;
+    var permanents = [];
+    if (!mask) {
+      return {
+        maskPlaceholder: null,
+        mask: null,
+        prefix: null,
+        lastEditablePosition: null,
+        permanents: []
       };
     }
-    return deferFn(fn);
-  }
-  function cancelDefer(deferId) {
-    var cancelFn = getCancelAnimationFrame() || clearTimeout;
-    cancelFn(deferId);
-  }
-  var InputElement = /*#__PURE__*/
-  function (_React$Component) {
-    _inheritsLoose(InputElement, _React$Component);
-    function InputElement(props) {
-      var _this;
-      _this = _React$Component.call(this, props) || this;
-      _this.focused = false;
-      _this.mounted = false;
-      _this.previousSelection = null;
-      _this.selectionDeferId = null;
-      _this.saveSelectionLoopDeferId = null;
-      _this.saveSelectionLoop = function () {
-        _this.previousSelection = _this.getSelection();
-        _this.saveSelectionLoopDeferId = defer(_this.saveSelectionLoop);
-      };
-      _this.runSaveSelectionLoop = function () {
-        if (_this.saveSelectionLoopDeferId === null) {
-          _this.saveSelectionLoop();
-        }
-      };
-      _this.stopSaveSelectionLoop = function () {
-        if (_this.saveSelectionLoopDeferId !== null) {
-          cancelDefer(_this.saveSelectionLoopDeferId);
-          _this.saveSelectionLoopDeferId = null;
-          _this.previousSelection = null;
-        }
-      };
-      _this.getInputDOMNode = function () {
-        if (!_this.mounted) {
-          return null;
-        }
-        var input = reactDom.findDOMNode(_assertThisInitialized(_assertThisInitialized(_this)));
-        var isDOMNode = typeof window !== 'undefined' && input instanceof window.Element; // workaround for react-test-renderer
-        // https://github.com/sanniassin/react-input-mask/issues/147
-
-        if (input && !isDOMNode) {
-          return null;
-        }
-        if (input.nodeName !== 'INPUT') {
-          input = input.querySelector('input');
-        }
-        if (!input) {
-          throw new Error('react-input-mask: inputComponent doesn\'t contain input node');
-        }
-        return input;
-      };
-      _this.getInputValue = function () {
-        var input = _this.getInputDOMNode();
-        if (!input) {
-          return null;
-        }
-        return input.value;
-      };
-      _this.setInputValue = function (value) {
-        var input = _this.getInputDOMNode();
-        if (!input) {
-          return;
-        }
-        _this.value = value;
-        input.value = value;
-      };
-      _this.setCursorToEnd = function () {
-        var filledLength = getFilledLength(_this.maskOptions, _this.value);
-        var pos = getRightEditablePosition(_this.maskOptions, filledLength);
-        if (pos !== null) {
-          _this.setCursorPosition(pos);
-        }
-      };
-      _this.setSelection = function (start, end, options) {
-        if (options === void 0) {
-          options = {};
+    if (typeof mask === "string") {
+      var isPermanent = false;
+      var parsedMaskString = "";
+      mask.split("").forEach(function (character) {
+        if (!isPermanent && character === "\\") {
+          isPermanent = true;
+        } else {
+          if (isPermanent || !defaultFormatChars[character]) {
+            permanents.push(parsedMaskString.length);
+          }
+          parsedMaskString += character;
+          isPermanent = false;
         }
-        var input = _this.getInputDOMNode();
-        var isFocused = _this.isFocused(); // don't change selection on unfocused input
-        // because Safari sets focus on selection change (#154)
-
-        if (!input || !isFocused) {
-          return;
+      });
+      mask = parsedMaskString.split("").map(function (character, index) {
+        if (permanents.indexOf(index) === -1) {
+          return defaultFormatChars[character];
         }
-        var _options = options,
-          deferred = _options.deferred;
-        if (!deferred) {
-          setInputSelection(input, start, end);
+        return character;
+      });
+    } else {
+      mask.forEach(function (character, index) {
+        if (typeof character === "string") {
+          permanents.push(index);
         }
-        if (_this.selectionDeferId !== null) {
-          cancelDefer(_this.selectionDeferId);
-        } // deferred selection update is required for pre-Lollipop Android browser,
-        // but for consistent behavior we do it for all browsers
-
-        _this.selectionDeferId = defer(function () {
-          _this.selectionDeferId = null;
-          setInputSelection(input, start, end);
-        });
-        _this.previousSelection = {
-          start: start,
-          end: end,
-          length: Math.abs(end - start)
-        };
-      };
-      _this.getSelection = function () {
-        var input = _this.getInputDOMNode();
-        return getInputSelection(input);
-      };
-      _this.getCursorPosition = function () {
-        return _this.getSelection().start;
-      };
-      _this.setCursorPosition = function (pos) {
-        _this.setSelection(pos, pos);
-      };
-      _this.isFocused = function () {
-        return _this.focused;
-      };
-      _this.getBeforeMaskedValueChangeConfig = function () {
-        var _this$maskOptions = _this.maskOptions,
-          mask = _this$maskOptions.mask,
-          maskChar = _this$maskOptions.maskChar,
-          permanents = _this$maskOptions.permanents,
-          formatChars = _this$maskOptions.formatChars;
-        var alwaysShowMask = _this.props.alwaysShowMask;
-        return {
-          mask: mask,
-          maskChar: maskChar,
-          permanents: permanents,
-          alwaysShowMask: !!alwaysShowMask,
-          formatChars: formatChars
-        };
-      };
-      _this.isInputAutofilled = function (value, selection, previousValue, previousSelection) {
-        var input = _this.getInputDOMNode(); // only check for positive match because it will be false negative
-        // in case of autofill simulation in tests
-        //
-        // input.matches throws an exception if selector isn't supported
-
-        try {
-          if (input.matches(':-webkit-autofill')) {
-            return true;
+      });
+    }
+    if (maskPlaceholder) {
+      if (maskPlaceholder.length === 1) {
+        maskPlaceholder = mask.map(function (character, index) {
+          if (permanents.indexOf(index) !== -1) {
+            return character;
           }
-        } catch (e) {} // if input isn't focused then change event must have been triggered
-        // either by autofill or event simulation in tests
-
-        if (!_this.focused) {
-          return true;
-        } // if cursor has moved to the end while previousSelection forbids it
-        // then it must be autofill
+          return maskPlaceholder;
+        });
+      } else {
+        maskPlaceholder = maskPlaceholder.split("");
+      }
+      permanents.forEach(function (position) {
+        maskPlaceholder[position] = mask[position];
+      });
+      maskPlaceholder = maskPlaceholder.join("");
+    }
+    var prefix = permanents.filter(function (position, index) {
+      return position === index;
+    }).map(function (position) {
+      return mask[position];
+    }).join("");
+    var lastEditablePosition = mask.length - 1;
+    while (permanents.indexOf(lastEditablePosition) !== -1) {
+      lastEditablePosition--;
+    }
+    return {
+      maskPlaceholder: maskPlaceholder,
+      prefix: prefix,
+      mask: mask,
+      lastEditablePosition: lastEditablePosition,
+      permanents: permanents
+    };
+  };
 
-        return previousSelection.end < previousValue.length && selection.end === value.length;
-      };
-      _this.onChange = function (event) {
-        var _assertThisInitialize = _assertThisInitialized(_assertThisInitialized(_this)),
-          beforePasteState = _assertThisInitialize.beforePasteState;
-        var _assertThisInitialize2 = _assertThisInitialized(_assertThisInitialized(_this)),
-          previousSelection = _assertThisInitialize2.previousSelection;
-        var beforeMaskedValueChange = _this.props.beforeMaskedValueChange;
-        var value = _this.getInputValue();
-        var previousValue = _this.value;
-        var selection = _this.getSelection(); // autofill replaces entire value, ignore old one
-        // https://github.com/sanniassin/react-input-mask/issues/113
-
-        if (_this.isInputAutofilled(value, selection, previousValue, previousSelection)) {
-          previousValue = formatValue(_this.maskOptions, '');
-          previousSelection = {
-            start: 0,
-            end: 0,
-            length: 0
-          };
-        } // set value and selection as if we haven't
-        // cleared input in onPaste handler
-
-        if (beforePasteState) {
-          previousSelection = beforePasteState.selection;
-          previousValue = beforePasteState.value;
-          selection = {
-            start: previousSelection.start + value.length,
-            end: previousSelection.start + value.length,
-            length: 0
-          };
-          value = previousValue.slice(0, previousSelection.start) + value + previousValue.slice(previousSelection.end);
-          _this.beforePasteState = null;
-        }
-        var changedState = processChange(_this.maskOptions, value, selection, previousValue, previousSelection);
-        var enteredString = changedState.enteredString;
-        var newSelection = changedState.selection;
-        var newValue = changedState.value;
-        if (isFunction(beforeMaskedValueChange)) {
-          var modifiedValue = beforeMaskedValueChange({
-            value: newValue,
-            selection: newSelection
-          }, {
-            value: previousValue,
-            selection: previousSelection
-          }, enteredString, _this.getBeforeMaskedValueChangeConfig());
-          newValue = modifiedValue.value;
-          newSelection = modifiedValue.selection;
-        }
-        _this.setInputValue(newValue);
-        if (isFunction(_this.props.onChange)) {
-          _this.props.onChange(event);
-        }
-        if (_this.isWindowsPhoneBrowser) {
-          _this.setSelection(newSelection.start, newSelection.end, {
-            deferred: true
-          });
-        } else {
-          _this.setSelection(newSelection.start, newSelection.end);
-        }
+  /* eslint no-use-before-define: ["error", { functions: false }] */
+  var MaskUtils = function MaskUtils(options) {
+    var _this = this;
+    this.isCharacterAllowedAtPosition = function (character, position) {
+      var maskPlaceholder = _this.maskOptions.maskPlaceholder;
+      if (_this.isCharacterFillingPosition(character, position)) {
+        return true;
+      }
+      if (!maskPlaceholder) {
+        return false;
+      }
+      return maskPlaceholder[position] === character;
+    };
+    this.isCharacterFillingPosition = function (character, position) {
+      var mask = _this.maskOptions.mask;
+      if (!character || position >= mask.length) {
+        return false;
+      }
+      if (!_this.isPositionEditable(position)) {
+        return mask[position] === character;
+      }
+      var charRule = mask[position];
+      return new RegExp(charRule).test(character);
+    };
+    this.isPositionEditable = function (position) {
+      var _this$maskOptions = _this.maskOptions,
+        mask = _this$maskOptions.mask,
+        permanents = _this$maskOptions.permanents;
+      return position < mask.length && permanents.indexOf(position) === -1;
+    };
+    this.isValueEmpty = function (value) {
+      return value.split("").every(function (character, position) {
+        return !_this.isPositionEditable(position) || !_this.isCharacterFillingPosition(character, position);
+      });
+    };
+    this.isValueFilled = function (value) {
+      return _this.getFilledLength(value) === _this.maskOptions.lastEditablePosition + 1;
+    };
+    this.getDefaultSelectionForValue = function (value) {
+      var filledLength = _this.getFilledLength(value);
+      var cursorPosition = _this.getRightEditablePosition(filledLength);
+      return {
+        start: cursorPosition,
+        end: cursorPosition
       };
-      _this.onFocus = function (event) {
-        var beforeMaskedValueChange = _this.props.beforeMaskedValueChange;
-        var _this$maskOptions2 = _this.maskOptions,
-          mask = _this$maskOptions2.mask,
-          prefix = _this$maskOptions2.prefix;
-        _this.focused = true; // if autoFocus is set, onFocus triggers before componentDidMount
-
-        _this.mounted = true;
-        if (mask) {
-          if (!_this.value) {
-            var emptyValue = formatValue(_this.maskOptions, prefix);
-            var newValue = formatValue(_this.maskOptions, emptyValue);
-            var filledLength = getFilledLength(_this.maskOptions, newValue);
-            var cursorPosition = getRightEditablePosition(_this.maskOptions, filledLength);
-            var newSelection = {
-              start: cursorPosition,
-              end: cursorPosition
-            };
-            if (isFunction(beforeMaskedValueChange)) {
-              var modifiedValue = beforeMaskedValueChange({
-                value: newValue,
-                selection: newSelection
-              }, {
-                value: _this.value,
-                selection: null
-              }, null, _this.getBeforeMaskedValueChangeConfig());
-              newValue = modifiedValue.value;
-              newSelection = modifiedValue.selection;
-            }
-            var isInputValueChanged = newValue !== _this.getInputValue();
-            if (isInputValueChanged) {
-              _this.setInputValue(newValue);
-            }
-            if (isInputValueChanged && isFunction(_this.props.onChange)) {
-              _this.props.onChange(event);
-            }
-            _this.setSelection(newSelection.start, newSelection.end);
-          } else if (getFilledLength(_this.maskOptions, _this.value) < _this.maskOptions.mask.length) {
-            _this.setCursorToEnd();
-          }
-          _this.runSaveSelectionLoop();
+    };
+    this.getFilledLength = function (value) {
+      var characters = value.split("");
+      var lastFilledIndex = findLastIndex(characters, function (character, position) {
+        return _this.isPositionEditable(position) && _this.isCharacterFillingPosition(character, position);
+      });
+      return lastFilledIndex + 1;
+    };
+    this.getStringFillingLengthAtPosition = function (string, position) {
+      var characters = string.split("");
+      var insertedValue = characters.reduce(function (value, character) {
+        return _this.insertCharacterAtPosition(value, character, value.length);
+      }, repeat(" ", position));
+      return insertedValue.length - position;
+    };
+    this.getLeftEditablePosition = function (position) {
+      for (var i = position; i >= 0; i--) {
+        if (_this.isPositionEditable(i)) {
+          return i;
         }
-        if (isFunction(_this.props.onFocus)) {
-          _this.props.onFocus(event);
+      }
+      return null;
+    };
+    this.getRightEditablePosition = function (position) {
+      var mask = _this.maskOptions.mask;
+      for (var i = position; i < mask.length; i++) {
+        if (_this.isPositionEditable(i)) {
+          return i;
         }
-      };
-      _this.onBlur = function (event) {
-        var beforeMaskedValueChange = _this.props.beforeMaskedValueChange;
-        var mask = _this.maskOptions.mask;
-        _this.stopSaveSelectionLoop();
-        _this.focused = false;
-        if (mask && !_this.props.alwaysShowMask && isEmpty(_this.maskOptions, _this.value)) {
-          var newValue = '';
-          if (isFunction(beforeMaskedValueChange)) {
-            var modifiedValue = beforeMaskedValueChange({
-              value: newValue,
-              selection: null
-            }, {
-              value: _this.value,
-              selection: _this.previousSelection
-            }, null, _this.getBeforeMaskedValueChangeConfig());
-            newValue = modifiedValue.value;
-          }
-          var isInputValueChanged = newValue !== _this.getInputValue();
-          if (isInputValueChanged) {
-            _this.setInputValue(newValue);
+      }
+      return null;
+    };
+    this.formatValue = function (value) {
+      var _this$maskOptions2 = _this.maskOptions,
+        maskPlaceholder = _this$maskOptions2.maskPlaceholder,
+        mask = _this$maskOptions2.mask;
+      if (!maskPlaceholder) {
+        value = _this.insertStringAtPosition("", value, 0);
+        while (value.length < mask.length && !_this.isPositionEditable(value.length)) {
+          value += mask[value.length];
+        }
+        return value;
+      }
+      return _this.insertStringAtPosition(maskPlaceholder, value, 0);
+    };
+    this.clearRange = function (value, start, len) {
+      if (!len) {
+        return value;
+      }
+      var end = start + len;
+      var _this$maskOptions3 = _this.maskOptions,
+        maskPlaceholder = _this$maskOptions3.maskPlaceholder,
+        mask = _this$maskOptions3.mask;
+      var clearedValue = value.split("").map(function (character, i) {
+        var isEditable = _this.isPositionEditable(i);
+        if (!maskPlaceholder && i >= end && !isEditable) {
+          return "";
+        }
+        if (i < start || i >= end) {
+          return character;
+        }
+        if (!isEditable) {
+          return mask[i];
+        }
+        if (maskPlaceholder) {
+          return maskPlaceholder[i];
+        }
+        return "";
+      }).join("");
+      return _this.formatValue(clearedValue);
+    };
+    this.insertCharacterAtPosition = function (value, character, position) {
+      var _this$maskOptions4 = _this.maskOptions,
+        mask = _this$maskOptions4.mask,
+        maskPlaceholder = _this$maskOptions4.maskPlaceholder;
+      if (position >= mask.length) {
+        return value;
+      }
+      var isAllowed = _this.isCharacterAllowedAtPosition(character, position);
+      var isEditable = _this.isPositionEditable(position);
+      var nextEditablePosition = _this.getRightEditablePosition(position);
+      var isNextPlaceholder = maskPlaceholder && nextEditablePosition ? character === maskPlaceholder[nextEditablePosition] : null;
+      var valueBefore = value.slice(0, position);
+      if (isAllowed || !isEditable) {
+        var insertedCharacter = isAllowed ? character : mask[position];
+        value = valueBefore + insertedCharacter;
+      }
+      if (!isAllowed && !isEditable && !isNextPlaceholder) {
+        value = _this.insertCharacterAtPosition(value, character, position + 1);
+      }
+      return value;
+    };
+    this.insertStringAtPosition = function (value, string, position) {
+      var _this$maskOptions5 = _this.maskOptions,
+        mask = _this$maskOptions5.mask,
+        maskPlaceholder = _this$maskOptions5.maskPlaceholder;
+      if (!string || position >= mask.length) {
+        return value;
+      }
+      var characters = string.split("");
+      var isFixedLength = _this.isValueFilled(value) || !!maskPlaceholder;
+      var valueAfter = value.slice(position);
+      value = characters.reduce(function (value, character) {
+        return _this.insertCharacterAtPosition(value, character, value.length);
+      }, value.slice(0, position));
+      if (isFixedLength) {
+        value += valueAfter.slice(value.length - position);
+      } else if (_this.isValueFilled(value)) {
+        value += mask.slice(value.length).join("");
+      } else {
+        var editableCharactersAfter = valueAfter.split("").filter(function (character, i) {
+          return _this.isPositionEditable(position + i);
+        });
+        value = editableCharactersAfter.reduce(function (value, character) {
+          var nextEditablePosition = _this.getRightEditablePosition(value.length);
+          if (nextEditablePosition === null) {
+            return value;
           }
-          if (isInputValueChanged && isFunction(_this.props.onChange)) {
-            _this.props.onChange(event);
+          if (!_this.isPositionEditable(value.length)) {
+            value += mask.slice(value.length, nextEditablePosition).join("");
           }
+          return _this.insertCharacterAtPosition(value, character, value.length);
+        }, value);
+      }
+      return value;
+    };
+    this.processChange = function (currentState, previousState) {
+      var _this$maskOptions6 = _this.maskOptions,
+        mask = _this$maskOptions6.mask,
+        prefix = _this$maskOptions6.prefix,
+        lastEditablePosition = _this$maskOptions6.lastEditablePosition;
+      var value = currentState.value,
+        selection = currentState.selection;
+      var previousValue = previousState.value;
+      var previousSelection = previousState.selection;
+      var newValue = value;
+      var enteredString = "";
+      var formattedEnteredStringLength = 0;
+      var removedLength = 0;
+      var cursorPosition = Math.min(previousSelection.start, selection.start);
+      if (selection.end > previousSelection.start) {
+        enteredString = newValue.slice(previousSelection.start, selection.end);
+        formattedEnteredStringLength = _this.getStringFillingLengthAtPosition(enteredString, cursorPosition);
+        if (!formattedEnteredStringLength) {
+          removedLength = 0;
+        } else {
+          removedLength = previousSelection.length;
         }
-        if (isFunction(_this.props.onBlur)) {
-          _this.props.onBlur(event);
-        }
-      };
-      _this.onMouseDown = function (event) {
-        // tiny unintentional mouse movements can break cursor
-        // position on focus, so we have to restore it in that case
-        //
-        // https://github.com/sanniassin/react-input-mask/issues/108
-        if (!_this.focused && document.addEventListener) {
-          _this.mouseDownX = event.clientX;
-          _this.mouseDownY = event.clientY;
-          _this.mouseDownTime = new Date().getTime();
-          var mouseUpHandler = function mouseUpHandler(mouseUpEvent) {
-            document.removeEventListener('mouseup', mouseUpHandler);
-            if (!_this.focused) {
-              return;
-            }
-            var deltaX = Math.abs(mouseUpEvent.clientX - _this.mouseDownX);
-            var deltaY = Math.abs(mouseUpEvent.clientY - _this.mouseDownY);
-            var axisDelta = Math.max(deltaX, deltaY);
-            var timeDelta = new Date().getTime() - _this.mouseDownTime;
-            if (axisDelta <= 10 && timeDelta <= 200 || axisDelta <= 5 && timeDelta <= 300) {
-              _this.setCursorToEnd();
-            }
-          };
-          document.addEventListener('mouseup', mouseUpHandler);
+      } else if (newValue.length < previousValue.length) {
+        removedLength = previousValue.length - newValue.length;
+      }
+      newValue = previousValue;
+      if (removedLength) {
+        if (removedLength === 1 && !previousSelection.length) {
+          var deleteFromRight = previousSelection.start === selection.start;
+          cursorPosition = deleteFromRight ? _this.getRightEditablePosition(selection.start) : _this.getLeftEditablePosition(selection.start);
         }
-        if (isFunction(_this.props.onMouseDown)) {
-          _this.props.onMouseDown(event);
+        newValue = _this.clearRange(newValue, cursorPosition, removedLength);
+      }
+      newValue = _this.insertStringAtPosition(newValue, enteredString, cursorPosition);
+      cursorPosition += formattedEnteredStringLength;
+      if (cursorPosition >= mask.length) {
+        cursorPosition = mask.length;
+      } else if (cursorPosition < prefix.length && !formattedEnteredStringLength) {
+        cursorPosition = prefix.length;
+      } else if (cursorPosition >= prefix.length && cursorPosition < lastEditablePosition && formattedEnteredStringLength) {
+        cursorPosition = _this.getRightEditablePosition(cursorPosition);
+      }
+      newValue = _this.formatValue(newValue);
+      return {
+        value: newValue,
+        enteredString: enteredString,
+        selection: {
+          start: cursorPosition,
+          end: cursorPosition
         }
       };
-      _this.onPaste = function (event) {
-        if (isFunction(_this.props.onPaste)) {
-          _this.props.onPaste(event);
-        } // event.clipboardData might not work in Android browser
-        // cleaning input to get raw text inside onChange handler
-
-        if (!event.defaultPrevented) {
-          _this.beforePasteState = {
-            value: _this.getInputValue(),
-            selection: _this.getSelection()
-          };
-          _this.setInputValue('');
+    };
+    this.maskOptions = parseMask(options);
+  };
+  var _excluded = ["alwaysShowMask", "children", "mask", "maskPlaceholder", "beforeMaskedStateChange"];
+
+  // eslint-disable-next-line prefer-arrow-callback
+  var InputMask = /*#__PURE__*/React$1.forwardRef(function InputMask(props, forwardedRef) {
+    var alwaysShowMask = props.alwaysShowMask,
+      children = props.children,
+      mask = props.mask,
+      maskPlaceholder = props.maskPlaceholder,
+      beforeMaskedStateChange = props.beforeMaskedStateChange,
+      restProps = _objectWithoutPropertiesLoose(props, _excluded);
+    validateMaxLength(props);
+    validateMaskPlaceholder(props);
+    var maskUtils = new MaskUtils({
+      mask: mask,
+      maskPlaceholder: maskPlaceholder
+    });
+    var isMasked = !!mask;
+    var isEditable = !restProps.disabled && !restProps.readOnly;
+    var isControlled = props.value !== null && props.value !== undefined;
+    var previousIsMasked = usePrevious(isMasked);
+    var initialValue = toString((isControlled ? props.value : props.defaultValue) || "");
+    var _useInputState = useInputState(initialValue, isMasked),
+      inputRef = _useInputState.inputRef,
+      getInputState = _useInputState.getInputState,
+      setInputState = _useInputState.setInputState,
+      getLastInputState = _useInputState.getLastInputState;
+    var getInputElement = useInputElement(inputRef);
+    function onChange(event) {
+      var currentState = getInputState();
+      var previousState = getLastInputState();
+      var newInputState = maskUtils.processChange(currentState, previousState);
+      if (beforeMaskedStateChange) {
+        newInputState = beforeMaskedStateChange({
+          currentState: currentState,
+          previousState: previousState,
+          nextState: newInputState
+        });
+      }
+      setInputState(newInputState);
+      if (props.onChange) {
+        props.onChange(event);
+      }
+    }
+    function onFocus(event) {
+      // If autoFocus property is set, focus event fires before the ref handler gets called
+      inputRef.current = event.target;
+      var currentValue = getInputState().value;
+      if (isMasked && !maskUtils.isValueFilled(currentValue)) {
+        var newValue = maskUtils.formatValue(currentValue);
+        var newSelection = maskUtils.getDefaultSelectionForValue(newValue);
+        var newInputState = {
+          value: newValue,
+          selection: newSelection
+        };
+        if (beforeMaskedStateChange) {
+          newInputState = beforeMaskedStateChange({
+            currentState: getInputState(),
+            nextState: newInputState
+          });
+          newValue = newInputState.value;
+          newSelection = newInputState.selection;
         }
-      };
-      _this.handleRef = function (ref) {
-        if (_this.props.children == null && isFunction(_this.props.inputRef)) {
-          _this.props.inputRef(ref);
+        setInputState(newInputState);
+        if (newValue !== currentValue && props.onChange) {
+          props.onChange(event);
         }
-      };
-      var _mask = props.mask,
-        _maskChar = props.maskChar,
-        _formatChars = props.formatChars,
-        _alwaysShowMask = props.alwaysShowMask,
-        _beforeMaskedValueChange = props.beforeMaskedValueChange;
-      var defaultValue = props.defaultValue,
-        _value = props.value;
-      _this.maskOptions = parseMask(_mask, _maskChar, _formatChars);
-      if (defaultValue == null) {
-        defaultValue = '';
-      }
-      if (_value == null) {
-        _value = defaultValue;
-      }
-      var _newValue = getStringValue(_value);
-      if (_this.maskOptions.mask && (_alwaysShowMask || _newValue)) {
-        _newValue = formatValue(_this.maskOptions, _newValue);
-        if (isFunction(_beforeMaskedValueChange)) {
-          var oldValue = props.value;
-          if (props.value == null) {
-            oldValue = defaultValue;
+
+        // Chrome resets selection after focus event,
+        // so we want to restore it later
+        defer(function () {
+          setInputState(getLastInputState());
+        });
+      }
+      if (props.onFocus) {
+        props.onFocus(event);
+      }
+    }
+    function onBlur(event) {
+      var currentValue = getInputState().value;
+      var lastValue = getLastInputState().value;
+      if (isMasked && !alwaysShowMask && maskUtils.isValueEmpty(lastValue)) {
+        var newValue = "";
+        var newInputState = {
+          value: newValue,
+          selection: {
+            start: null,
+            end: null
           }
-          oldValue = getStringValue(oldValue);
-          var modifiedValue = _beforeMaskedValueChange({
-            value: _newValue,
-            selection: null
-          }, {
-            value: oldValue,
-            selection: null
-          }, null, _this.getBeforeMaskedValueChangeConfig());
-          _newValue = modifiedValue.value;
+        };
+        if (beforeMaskedStateChange) {
+          newInputState = beforeMaskedStateChange({
+            currentState: getInputState(),
+            nextState: newInputState
+          });
+          newValue = newInputState.value;
+        }
+        setInputState(newInputState);
+        if (newValue !== currentValue && props.onChange) {
+          props.onChange(event);
         }
       }
-      _this.value = _newValue;
-      return _this;
+      if (props.onBlur) {
+        props.onBlur(event);
+      }
     }
-    var _proto = InputElement.prototype;
-    _proto.componentDidMount = function componentDidMount() {
-      this.mounted = true; // workaround for react-test-renderer
-      // https://github.com/sanniassin/react-input-mask/issues/147
 
-      if (!this.getInputDOMNode()) {
-        return;
-      }
-      this.isWindowsPhoneBrowser = isWindowsPhoneBrowser();
-      if (this.maskOptions.mask && this.getInputValue() !== this.value) {
-        this.setInputValue(this.value);
-      }
-    };
-    _proto.componentDidUpdate = function componentDidUpdate() {
-      var previousSelection = this.previousSelection;
-      var _this$props = this.props,
-        beforeMaskedValueChange = _this$props.beforeMaskedValueChange,
-        alwaysShowMask = _this$props.alwaysShowMask,
-        mask = _this$props.mask,
-        maskChar = _this$props.maskChar,
-        formatChars = _this$props.formatChars;
-      var previousMaskOptions = this.maskOptions;
-      var showEmpty = alwaysShowMask || this.isFocused();
-      var hasValue = this.props.value != null;
-      var newValue = hasValue ? getStringValue(this.props.value) : this.value;
-      var cursorPosition = previousSelection ? previousSelection.start : null;
-      this.maskOptions = parseMask(mask, maskChar, formatChars);
-      if (!this.maskOptions.mask) {
-        if (previousMaskOptions.mask) {
-          this.stopSaveSelectionLoop(); // render depends on this.maskOptions and this.value,
-          // call forceUpdate to keep it in sync
-
-          this.forceUpdate();
-        }
+    // Tiny unintentional mouse movements can break cursor
+    // position on focus, so we have to restore it in that case
+    //
+    // https://github.com/sanniassin/react-input-mask/issues/108
+    function onMouseDown(event) {
+      var input = getInputElement();
+      if (!input) {
         return;
-      } else if (!previousMaskOptions.mask && this.isFocused()) {
-        this.runSaveSelectionLoop();
       }
-      var isMaskChanged = this.maskOptions.mask && this.maskOptions.mask !== previousMaskOptions.mask;
-      if (!previousMaskOptions.mask && !hasValue) {
-        newValue = this.getInputValue();
+      var _getInputState = getInputState(),
+        value = _getInputState.value;
+      var inputDocument = getElementDocument(input);
+      if (!isInputFocused(input) && !maskUtils.isValueFilled(value)) {
+        var mouseDownX = event.clientX;
+        var mouseDownY = event.clientY;
+        var mouseDownTime = new Date().getTime();
+        var mouseUpHandler = function mouseUpHandler(mouseUpEvent) {
+          inputDocument.removeEventListener("mouseup", mouseUpHandler);
+          if (!isInputFocused(input)) {
+            return;
+          }
+          var deltaX = Math.abs(mouseUpEvent.clientX - mouseDownX);
+          var deltaY = Math.abs(mouseUpEvent.clientY - mouseDownY);
+          var axisDelta = Math.max(deltaX, deltaY);
+          var timeDelta = new Date().getTime() - mouseDownTime;
+          if (axisDelta <= 10 && timeDelta <= 200 || axisDelta <= 5 && timeDelta <= 300) {
+            var _lastState = getLastInputState();
+            var newSelection = maskUtils.getDefaultSelectionForValue(_lastState.value);
+            var newState = _extends({}, _lastState, {
+              selection: newSelection
+            });
+            setInputState(newState);
+          }
+        };
+        inputDocument.addEventListener("mouseup", mouseUpHandler);
       }
-      if (isMaskChanged || this.maskOptions.mask && (newValue || showEmpty)) {
-        newValue = formatValue(this.maskOptions, newValue);
+      if (props.onMouseDown) {
+        props.onMouseDown(event);
       }
-      if (isMaskChanged) {
-        var filledLength = getFilledLength(this.maskOptions, newValue);
-        if (cursorPosition === null || filledLength < cursorPosition) {
-          if (isFilled(this.maskOptions, newValue)) {
-            cursorPosition = filledLength;
-          } else {
-            cursorPosition = getRightEditablePosition(this.maskOptions, filledLength);
+    }
+
+    // For controlled inputs we want to provide properly formatted
+    // value prop
+    if (isMasked && isControlled) {
+      var input = getInputElement();
+      var isFocused = input && isInputFocused(input);
+      var newValue = isFocused || alwaysShowMask || props.value ? maskUtils.formatValue(props.value) : props.value;
+      if (beforeMaskedStateChange) {
+        newValue = beforeMaskedStateChange({
+          nextState: {
+            value: newValue,
+            selection: {
+              start: null,
+              end: null
+            }
           }
-        }
-      }
-      if (this.maskOptions.mask && isEmpty(this.maskOptions, newValue) && !showEmpty && (!hasValue || !this.props.value)) {
-        newValue = '';
+        }).value;
       }
-      var newSelection = {
-        start: cursorPosition,
-        end: cursorPosition
-      };
-      if (isFunction(beforeMaskedValueChange)) {
-        var modifiedValue = beforeMaskedValueChange({
-          value: newValue,
-          selection: newSelection
-        }, {
-          value: this.value,
-          selection: this.previousSelection
-        }, null, this.getBeforeMaskedValueChangeConfig());
-        newValue = modifiedValue.value;
-        newSelection = modifiedValue.selection;
-      }
-      this.value = newValue;
-      var isValueChanged = this.getInputValue() !== this.value; // render depends on this.maskOptions and this.value,
-      // call forceUpdate to keep it in sync
-
-      if (isValueChanged) {
-        this.setInputValue(this.value);
-        this.forceUpdate();
-      } else if (isMaskChanged) {
-        this.forceUpdate();
-      }
-      var isSelectionChanged = false;
-      if (newSelection.start != null && newSelection.end != null) {
-        isSelectionChanged = !previousSelection || previousSelection.start !== newSelection.start || previousSelection.end !== newSelection.end;
-      }
-      if (isSelectionChanged || isValueChanged) {
-        this.setSelection(newSelection.start, newSelection.end);
+      setInputState(_extends({}, getLastInputState(), {
+        value: newValue
+      }));
+    }
+    var lastState = getLastInputState();
+    var lastSelection = lastState.selection;
+    var lastValue = lastState.value;
+    React$1.useLayoutEffect(function () {
+      if (!isMasked) {
+        return;
       }
-    };
-    _proto.componentWillUnmount = function componentWillUnmount() {
-      this.mounted = false;
-      if (this.selectionDeferId !== null) {
-        cancelDefer(this.selectionDeferId);
+      var input = getInputElement();
+      if (!input) {
+        return;
       }
-      this.stopSaveSelectionLoop();
-    };
-    _proto.render = function render() {
-      var _this$props2 = this.props,
-        mask = _this$props2.mask;
-        _this$props2.alwaysShowMask;
-        var maskChar = _this$props2.maskChar,
-        formatChars = _this$props2.formatChars,
-        inputRef = _this$props2.inputRef;
-        _this$props2.beforeMaskedValueChange;
-        var children = _this$props2.children,
-        restProps = _objectWithoutPropertiesLoose(_this$props2, ["mask", "alwaysShowMask", "maskChar", "formatChars", "inputRef", "beforeMaskedValueChange", "children"]);
-      var inputElement;
-      process.env.NODE_ENV !== "production" ? warning(
-      // parse mask to test against actual mask prop as this.maskOptions
-      // will be updated later in componentDidUpdate
-      !restProps.maxLength || !parseMask(mask, maskChar, formatChars).mask, 'react-input-mask: maxLength property shouldn\'t be passed to the masked input. It breaks masking and unnecessary because length is limited by the mask length.') : void 0;
-      if (children) {
-        !isFunction(children) ? process.env.NODE_ENV !== "production" ? invariant(false, 'react-input-mask: children must be a function') : invariant(false) : void 0;
-        var controlledProps = ['onChange', 'onPaste', 'onMouseDown', 'onFocus', 'onBlur', 'value', 'disabled', 'readOnly'];
-        var childrenProps = _extends({}, restProps);
-        controlledProps.forEach(function (propId) {
-          return delete childrenProps[propId];
+      var isFocused = isInputFocused(input);
+      var previousSelection = lastSelection;
+      var currentState = getInputState();
+      var newInputState = _extends({}, currentState);
+
+      // Update value for uncontrolled inputs to make sure
+      // it's always in sync with mask props
+      if (!isControlled) {
+        var currentValue = currentState.value;
+        var formattedValue = maskUtils.formatValue(currentValue);
+        var isValueEmpty = maskUtils.isValueEmpty(formattedValue);
+        var shouldFormatValue = !isValueEmpty || isFocused || alwaysShowMask;
+        if (shouldFormatValue) {
+          newInputState.value = formattedValue;
+        } else if (isValueEmpty && !isFocused) {
+          newInputState.value = "";
+        }
+      }
+      if (isFocused && !previousIsMasked) {
+        // Adjust selection if input got masked while being focused
+        newInputState.selection = maskUtils.getDefaultSelectionForValue(newInputState.value);
+      } else if (isControlled && isFocused && previousSelection) {
+        // Restore cursor position if value has changed outside change event
+        if (previousSelection.start !== null && previousSelection.end !== null) {
+          newInputState.selection = previousSelection;
+        }
+      }
+      if (beforeMaskedStateChange) {
+        newInputState = beforeMaskedStateChange({
+          currentState: currentState,
+          nextState: newInputState
         });
-        inputElement = children(childrenProps);
-        var conflictProps = controlledProps.filter(function (propId) {
-          return inputElement.props[propId] != null && inputElement.props[propId] !== restProps[propId];
-        });
-        !!conflictProps.length ? process.env.NODE_ENV !== "production" ? invariant(false, "react-input-mask: the following props should be passed to the react-input-mask's component and should not be altered in children's function: " + conflictProps.join(', ')) : invariant(false) : void 0;
-        process.env.NODE_ENV !== "production" ? warning(!inputRef, 'react-input-mask: inputRef is ignored when children is passed, attach ref to the children instead') : void 0;
-      } else {
-        inputElement = React$1.createElement("input", _extends({
-          ref: this.handleRef
-        }, restProps));
       }
-      var changedProps = {
-        onFocus: this.onFocus,
-        onBlur: this.onBlur
-      };
-      if (this.maskOptions.mask) {
-        if (!restProps.disabled && !restProps.readOnly) {
-          changedProps.onChange = this.onChange;
-          changedProps.onPaste = this.onPaste;
-          changedProps.onMouseDown = this.onMouseDown;
-        }
-        if (restProps.value != null) {
-          changedProps.value = this.value;
-        }
+      setInputState(newInputState);
+    });
+    var refCallback = function refCallback(node) {
+      inputRef.current = node;
+
+      // if a ref callback is passed to InputMask
+      if (isFunction(forwardedRef)) {
+        forwardedRef(node);
+      } else if (forwardedRef !== null && _typeof$1(forwardedRef) === "object") {
+        forwardedRef.current = node;
       }
-      inputElement = React$1.cloneElement(inputElement, changedProps);
-      return inputElement;
     };
-    return InputElement;
-  }(React$1.Component);
-  reactInputMask_development = InputElement;
+    var inputProps = _extends({}, restProps, {
+      onFocus: onFocus,
+      onBlur: onBlur,
+      onChange: isMasked && isEditable ? onChange : props.onChange,
+      onMouseDown: isMasked && isEditable ? onMouseDown : props.onMouseDown,
+      value: isMasked && isControlled ? lastValue : props.value
+    });
+    if (children) {
+      validateChildren(props, children);
+
+      // {@link https://stackoverflow.com/q/63149840/327074}
+      var onlyChild = React$1.Children.only(children);
+      return /*#__PURE__*/React$1.cloneElement(onlyChild, _extends({}, inputProps, {
+        ref: refCallback
+      }));
+    }
+    return /*#__PURE__*/React$1.createElement("input", _extends({
+      ref: refCallback
+    }, inputProps));
+  });
+  InputMask.displayName = "InputMask";
+  InputMask.defaultProps = {
+    alwaysShowMask: false,
+    maskPlaceholder: "_"
+  };
+  InputMask.propTypes = {
+    alwaysShowMask: PropTypes.bool,
+    beforeMaskedStateChange: PropTypes.func,
+    children: PropTypes.element,
+    mask: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(RegExp)]))]),
+    maskPlaceholder: PropTypes.string,
+    onFocus: PropTypes.func,
+    onBlur: PropTypes.func,
+    onChange: PropTypes.func,
+    onMouseDown: PropTypes.func
+  };
+  reactInputMask_development = InputMask;
   return reactInputMask_development;
 }
 
+/* eslint-disable import/no-unresolved */
 var hasRequiredReactInputMask;
 function requireReactInputMask() {
   if (hasRequiredReactInputMask) return reactInputMask.exports;
   hasRequiredReactInputMask = 1;
-  if (process.env.NODE_ENV === 'production') {
+  if (process.env.NODE_ENV === "production") {
     reactInputMask.exports = requireReactInputMask_production_min();
   } else {
     reactInputMask.exports = requireReactInputMask_development();
@@ -11179,15 +11119,9 @@ var CreditCardNumberInput = function CreditCardNumberInput(_ref) {
     setValue(event.target.value);
     onChange === null || onChange === void 0 || onChange(event.target.value);
   }, [setValue, onChange]);
-
-  // TODO: get rid of the any, the types of react-input-mask are incorrect here, it should expect a function as a child, but it expects a ReactNode
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  var renderInputField = function renderInputField(inputProps) {
-    return /*#__PURE__*/React.createElement(CreditCardNumberInputField, _extends$1({}, rest, inputProps));
-  };
   return /*#__PURE__*/React.createElement(InputMask, {
     mask: mask,
-    maskChar: maskChar,
+    maskPlaceholder: maskChar,
     alwaysShowMask: alwaysShowMask,
     disabled: disabled,
     readOnly: readOnly,
@@ -11196,7 +11130,7 @@ var CreditCardNumberInput = function CreditCardNumberInput(_ref) {
     onMouseDown: onMouseDown,
     onFocus: onFocus,
     onBlur: onBlur
-  }, renderInputField);
+  }, /*#__PURE__*/React.createElement(CreditCardNumberInputField, rest));
 };
 
 var _excluded$e = ["term", "children", "className"];
@@ -12036,11 +11970,6 @@ var LoadingShapesLavenderBlue = function LoadingShapesLavenderBlue() {
   }));
 };
 
-var preventNavigation = function preventNavigation(event) {
-  event.preventDefault();
-  event.returnValue = '';
-};
-
 var usePreventNavigation = function usePreventNavigation() {
   var enabled = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
   React.useEffect(function () {