@moda/om 21.0.0-next.1 → 21.0.0

package/dist/index.esm.js

@@ -1,12 +1,335 @@
 import * as React from 'react';
-import React__default, { useState, createContext, PureComponent, useRef, useEffect, Children, isValidElement, cloneElement, useContext, useCallback, forwardRef, useMemo, useReducer } from 'react';
-import Link from 'next/link';
-import require$$1, { createPortal } from 'react-dom';
+import React__default, { useContext, useState, createContext, forwardRef, useRef, useCallback, useEffect, useMemo, Fragment, PureComponent, Children, isValidElement, cloneElement, useReducer } from 'react';
+import { Link, Prompt } from 'react-router-dom';
+import { createPortal } from 'react-dom';
 
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
 }
 
+function getAugmentedNamespace(n) {
+  if (Object.prototype.hasOwnProperty.call(n, '__esModule')) return n;
+  var f = n.default;
+	if (typeof f == "function") {
+		var a = function a () {
+			if (this instanceof a) {
+        return Reflect.construct(f, arguments, this.constructor);
+			}
+			return f.apply(this, arguments);
+		};
+		a.prototype = f.prototype;
+  } else a = {};
+  Object.defineProperty(a, '__esModule', {value: true});
+	Object.keys(n).forEach(function (k) {
+		var d = Object.getOwnPropertyDescriptor(n, k);
+		Object.defineProperty(a, k, d.get ? d : {
+			enumerable: true,
+			get: function () {
+				return n[k];
+			}
+		});
+	});
+	return a;
+}
+
+var focusVisible$1 = {exports: {}};
+
+var focusVisible = focusVisible$1.exports;
+var hasRequiredFocusVisible;
+function requireFocusVisible() {
+  if (hasRequiredFocusVisible) return focusVisible$1.exports;
+  hasRequiredFocusVisible = 1;
+  (function (module, exports) {
+    (function (global, factory) {
+      factory() ;
+    })(focusVisible, function () {
+
+      /**
+       * Applies the :focus-visible polyfill at the given scope.
+       * A scope in this case is either the top-level Document or a Shadow Root.
+       *
+       * @param {(Document|ShadowRoot)} scope
+       * @see https://github.com/WICG/focus-visible
+       */
+      function applyFocusVisiblePolyfill(scope) {
+        var hadKeyboardEvent = true;
+        var hadFocusVisibleRecently = false;
+        var hadFocusVisibleRecentlyTimeout = null;
+        var inputTypesAllowlist = {
+          text: true,
+          search: true,
+          url: true,
+          tel: true,
+          email: true,
+          password: true,
+          number: true,
+          date: true,
+          month: true,
+          week: true,
+          time: true,
+          datetime: true,
+          'datetime-local': true
+        };
+
+        /**
+         * Helper function for legacy browsers and iframes which sometimes focus
+         * elements like document, body, and non-interactive SVG.
+         * @param {Element} el
+         */
+        function isValidFocusTarget(el) {
+          if (el && el !== document && el.nodeName !== 'HTML' && el.nodeName !== 'BODY' && 'classList' in el && 'contains' in el.classList) {
+            return true;
+          }
+          return false;
+        }
+
+        /**
+         * Computes whether the given element should automatically trigger the
+         * `focus-visible` class being added, i.e. whether it should always match
+         * `:focus-visible` when focused.
+         * @param {Element} el
+         * @return {boolean}
+         */
+        function focusTriggersKeyboardModality(el) {
+          var type = el.type;
+          var tagName = el.tagName;
+          if (tagName === 'INPUT' && inputTypesAllowlist[type] && !el.readOnly) {
+            return true;
+          }
+          if (tagName === 'TEXTAREA' && !el.readOnly) {
+            return true;
+          }
+          if (el.isContentEditable) {
+            return true;
+          }
+          return false;
+        }
+
+        /**
+         * Add the `focus-visible` class to the given element if it was not added by
+         * the author.
+         * @param {Element} el
+         */
+        function addFocusVisibleClass(el) {
+          if (el.classList.contains('focus-visible')) {
+            return;
+          }
+          el.classList.add('focus-visible');
+          el.setAttribute('data-focus-visible-added', '');
+        }
+
+        /**
+         * Remove the `focus-visible` class from the given element if it was not
+         * originally added by the author.
+         * @param {Element} el
+         */
+        function removeFocusVisibleClass(el) {
+          if (!el.hasAttribute('data-focus-visible-added')) {
+            return;
+          }
+          el.classList.remove('focus-visible');
+          el.removeAttribute('data-focus-visible-added');
+        }
+
+        /**
+         * If the most recent user interaction was via the keyboard;
+         * and the key press did not include a meta, alt/option, or control key;
+         * then the modality is keyboard. Otherwise, the modality is not keyboard.
+         * Apply `focus-visible` to any current active element and keep track
+         * of our keyboard modality state with `hadKeyboardEvent`.
+         * @param {KeyboardEvent} e
+         */
+        function onKeyDown(e) {
+          if (e.metaKey || e.altKey || e.ctrlKey) {
+            return;
+          }
+          if (isValidFocusTarget(scope.activeElement)) {
+            addFocusVisibleClass(scope.activeElement);
+          }
+          hadKeyboardEvent = true;
+        }
+
+        /**
+         * If at any point a user clicks with a pointing device, ensure that we change
+         * the modality away from keyboard.
+         * This avoids the situation where a user presses a key on an already focused
+         * element, and then clicks on a different element, focusing it with a
+         * pointing device, while we still think we're in keyboard modality.
+         * @param {Event} e
+         */
+        function onPointerDown(e) {
+          hadKeyboardEvent = false;
+        }
+
+        /**
+         * On `focus`, add the `focus-visible` class to the target if:
+         * - the target received focus as a result of keyboard navigation, or
+         * - the event target is an element that will likely require interaction
+         *   via the keyboard (e.g. a text box)
+         * @param {Event} e
+         */
+        function onFocus(e) {
+          // Prevent IE from focusing the document or HTML element.
+          if (!isValidFocusTarget(e.target)) {
+            return;
+          }
+          if (hadKeyboardEvent || focusTriggersKeyboardModality(e.target)) {
+            addFocusVisibleClass(e.target);
+          }
+        }
+
+        /**
+         * On `blur`, remove the `focus-visible` class from the target.
+         * @param {Event} e
+         */
+        function onBlur(e) {
+          if (!isValidFocusTarget(e.target)) {
+            return;
+          }
+          if (e.target.classList.contains('focus-visible') || e.target.hasAttribute('data-focus-visible-added')) {
+            // To detect a tab/window switch, we look for a blur event followed
+            // rapidly by a visibility change.
+            // If we don't see a visibility change within 100ms, it's probably a
+            // regular focus change.
+            hadFocusVisibleRecently = true;
+            window.clearTimeout(hadFocusVisibleRecentlyTimeout);
+            hadFocusVisibleRecentlyTimeout = window.setTimeout(function () {
+              hadFocusVisibleRecently = false;
+            }, 100);
+            removeFocusVisibleClass(e.target);
+          }
+        }
+
+        /**
+         * If the user changes tabs, keep track of whether or not the previously
+         * focused element had .focus-visible.
+         * @param {Event} e
+         */
+        function onVisibilityChange(e) {
+          if (document.visibilityState === 'hidden') {
+            // If the tab becomes active again, the browser will handle calling focus
+            // on the element (Safari actually calls it twice).
+            // If this tab change caused a blur on an element with focus-visible,
+            // re-apply the class when the user switches back to the tab.
+            if (hadFocusVisibleRecently) {
+              hadKeyboardEvent = true;
+            }
+            addInitialPointerMoveListeners();
+          }
+        }
+
+        /**
+         * Add a group of listeners to detect usage of any pointing devices.
+         * These listeners will be added when the polyfill first loads, and anytime
+         * the window is blurred, so that they are active when the window regains
+         * focus.
+         */
+        function addInitialPointerMoveListeners() {
+          document.addEventListener('mousemove', onInitialPointerMove);
+          document.addEventListener('mousedown', onInitialPointerMove);
+          document.addEventListener('mouseup', onInitialPointerMove);
+          document.addEventListener('pointermove', onInitialPointerMove);
+          document.addEventListener('pointerdown', onInitialPointerMove);
+          document.addEventListener('pointerup', onInitialPointerMove);
+          document.addEventListener('touchmove', onInitialPointerMove);
+          document.addEventListener('touchstart', onInitialPointerMove);
+          document.addEventListener('touchend', onInitialPointerMove);
+        }
+        function removeInitialPointerMoveListeners() {
+          document.removeEventListener('mousemove', onInitialPointerMove);
+          document.removeEventListener('mousedown', onInitialPointerMove);
+          document.removeEventListener('mouseup', onInitialPointerMove);
+          document.removeEventListener('pointermove', onInitialPointerMove);
+          document.removeEventListener('pointerdown', onInitialPointerMove);
+          document.removeEventListener('pointerup', onInitialPointerMove);
+          document.removeEventListener('touchmove', onInitialPointerMove);
+          document.removeEventListener('touchstart', onInitialPointerMove);
+          document.removeEventListener('touchend', onInitialPointerMove);
+        }
+
+        /**
+         * When the polfyill first loads, assume the user is in keyboard modality.
+         * If any event is received from a pointing device (e.g. mouse, pointer,
+         * touch), turn off keyboard modality.
+         * This accounts for situations where focus enters the page from the URL bar.
+         * @param {Event} e
+         */
+        function onInitialPointerMove(e) {
+          // Work around a Safari quirk that fires a mousemove on <html> whenever the
+          // window blurs, even if you're tabbing out of the page. ¯\_(ツ)_/¯
+          if (e.target.nodeName && e.target.nodeName.toLowerCase() === 'html') {
+            return;
+          }
+          hadKeyboardEvent = false;
+          removeInitialPointerMoveListeners();
+        }
+
+        // For some kinds of state, we are interested in changes at the global scope
+        // only. For example, global pointer input, global key presses and global
+        // visibility change should affect the state at every scope:
+        document.addEventListener('keydown', onKeyDown, true);
+        document.addEventListener('mousedown', onPointerDown, true);
+        document.addEventListener('pointerdown', onPointerDown, true);
+        document.addEventListener('touchstart', onPointerDown, true);
+        document.addEventListener('visibilitychange', onVisibilityChange, true);
+        addInitialPointerMoveListeners();
+
+        // For focus and blur, we specifically care about state changes in the local
+        // scope. This is because focus / blur events that originate from within a
+        // shadow root are not re-dispatched from the host element if it was already
+        // the active element in its own scope:
+        scope.addEventListener('focus', onFocus, true);
+        scope.addEventListener('blur', onBlur, true);
+
+        // We detect that a node is a ShadowRoot by ensuring that it is a
+        // DocumentFragment and also has a host property. This check covers native
+        // implementation and polyfill implementation transparently. If we only cared
+        // about the native implementation, we could just check if the scope was
+        // an instance of a ShadowRoot.
+        if (scope.nodeType === Node.DOCUMENT_FRAGMENT_NODE && scope.host) {
+          // Since a ShadowRoot is a special kind of DocumentFragment, it does not
+          // have a root element to add a class to. So, we add this attribute to the
+          // host element instead:
+          scope.host.setAttribute('data-js-focus-visible', '');
+        } else if (scope.nodeType === Node.DOCUMENT_NODE) {
+          document.documentElement.classList.add('js-focus-visible');
+          document.documentElement.setAttribute('data-js-focus-visible', '');
+        }
+      }
+
+      // It is important to wrap all references to global window and document in
+      // these checks to support server-side rendering use cases
+      // @see https://github.com/WICG/focus-visible/issues/199
+      if (typeof window !== 'undefined' && typeof document !== 'undefined') {
+        // Make the polyfill helper globally available. This can be used as a signal
+        // to interested libraries that wish to coordinate with the polyfill for e.g.,
+        // applying the polyfill to a shadow root:
+        window.applyFocusVisiblePolyfill = applyFocusVisiblePolyfill;
+
+        // Notify interested libraries of the polyfill's presence, in case the
+        // polyfill was loaded lazily:
+        var event;
+        try {
+          event = new CustomEvent('focus-visible-polyfill-ready');
+        } catch (error) {
+          // IE11 does not support using CustomEvent as a constructor directly:
+          event = document.createEvent('CustomEvent');
+          event.initCustomEvent('focus-visible-polyfill-ready', false, false, {});
+        }
+        window.dispatchEvent(event);
+      }
+      if (typeof document !== 'undefined') {
+        // Apply the polyfill to the global document, so that no JavaScript
+        // coordination is required to use the polyfill in the top-level document:
+        applyFocusVisiblePolyfill(document);
+      }
+    });
+  })();
+  return focusVisible$1.exports;
+}
+
+requireFocusVisible();
+
 var dist$4 = {};
 
 var colors = {};
@@ -37,6 +360,10 @@ function requireColors() {
       "dark-fuchsia": "rgb(180, 60, 160)",
       "teal": "rgb(0, 111, 98)",
       "ivory": "rgb(242, 233, 219)",
+      "chatelle": "rgb(213, 194, 216)",
+      "edgewater": "rgb(198, 225, 209)",
+      "waikawa-gray": "rgb(86, 107, 136)",
+      "tuscany": "rgb(186, 83, 44)",
       "klein-blue": "rgb(38, 48, 120)",
       "persian-blue": "rgb(30, 34, 170)",
       "brick": "rgb(147, 58, 32)",
@@ -60,7 +387,11 @@ function requireColors() {
       "fuchsia": "rgb(196, 76, 176)",
       "dark-fuchsia": "rgb(180, 60, 160)",
       "teal": "rgb(0, 111, 98)",
-      "ivory": "rgb(242, 233, 219)"
+      "ivory": "rgb(242, 233, 219)",
+      "chatelle": "rgb(213, 194, 216)",
+      "edgewater": "rgb(198, 225, 209)",
+      "waikawa-gray": "rgb(86, 107, 136)",
+      "tuscany": "rgb(186, 83, 44)"
     },
     "global": {
       "klein-blue": "rgb(38, 48, 120)",
@@ -237,407 +568,347 @@ function requireBreakpoints() {
 
 var helpers = {};
 
-var colorString = {exports: {}};
-
-var colorName;
-var hasRequiredColorName;
-function requireColorName() {
-  if (hasRequiredColorName) return colorName;
-  hasRequiredColorName = 1;
-  colorName = {
-    "aliceblue": [240, 248, 255],
-    "antiquewhite": [250, 235, 215],
-    "aqua": [0, 255, 255],
-    "aquamarine": [127, 255, 212],
-    "azure": [240, 255, 255],
-    "beige": [245, 245, 220],
-    "bisque": [255, 228, 196],
-    "black": [0, 0, 0],
-    "blanchedalmond": [255, 235, 205],
-    "blue": [0, 0, 255],
-    "blueviolet": [138, 43, 226],
-    "brown": [165, 42, 42],
-    "burlywood": [222, 184, 135],
-    "cadetblue": [95, 158, 160],
-    "chartreuse": [127, 255, 0],
-    "chocolate": [210, 105, 30],
-    "coral": [255, 127, 80],
-    "cornflowerblue": [100, 149, 237],
-    "cornsilk": [255, 248, 220],
-    "crimson": [220, 20, 60],
-    "cyan": [0, 255, 255],
-    "darkblue": [0, 0, 139],
-    "darkcyan": [0, 139, 139],
-    "darkgoldenrod": [184, 134, 11],
-    "darkgray": [169, 169, 169],
-    "darkgreen": [0, 100, 0],
-    "darkgrey": [169, 169, 169],
-    "darkkhaki": [189, 183, 107],
-    "darkmagenta": [139, 0, 139],
-    "darkolivegreen": [85, 107, 47],
-    "darkorange": [255, 140, 0],
-    "darkorchid": [153, 50, 204],
-    "darkred": [139, 0, 0],
-    "darksalmon": [233, 150, 122],
-    "darkseagreen": [143, 188, 143],
-    "darkslateblue": [72, 61, 139],
-    "darkslategray": [47, 79, 79],
-    "darkslategrey": [47, 79, 79],
-    "darkturquoise": [0, 206, 209],
-    "darkviolet": [148, 0, 211],
-    "deeppink": [255, 20, 147],
-    "deepskyblue": [0, 191, 255],
-    "dimgray": [105, 105, 105],
-    "dimgrey": [105, 105, 105],
-    "dodgerblue": [30, 144, 255],
-    "firebrick": [178, 34, 34],
-    "floralwhite": [255, 250, 240],
-    "forestgreen": [34, 139, 34],
-    "fuchsia": [255, 0, 255],
-    "gainsboro": [220, 220, 220],
-    "ghostwhite": [248, 248, 255],
-    "gold": [255, 215, 0],
-    "goldenrod": [218, 165, 32],
-    "gray": [128, 128, 128],
-    "green": [0, 128, 0],
-    "greenyellow": [173, 255, 47],
-    "grey": [128, 128, 128],
-    "honeydew": [240, 255, 240],
-    "hotpink": [255, 105, 180],
-    "indianred": [205, 92, 92],
-    "indigo": [75, 0, 130],
-    "ivory": [255, 255, 240],
-    "khaki": [240, 230, 140],
-    "lavender": [230, 230, 250],
-    "lavenderblush": [255, 240, 245],
-    "lawngreen": [124, 252, 0],
-    "lemonchiffon": [255, 250, 205],
-    "lightblue": [173, 216, 230],
-    "lightcoral": [240, 128, 128],
-    "lightcyan": [224, 255, 255],
-    "lightgoldenrodyellow": [250, 250, 210],
-    "lightgray": [211, 211, 211],
-    "lightgreen": [144, 238, 144],
-    "lightgrey": [211, 211, 211],
-    "lightpink": [255, 182, 193],
-    "lightsalmon": [255, 160, 122],
-    "lightseagreen": [32, 178, 170],
-    "lightskyblue": [135, 206, 250],
-    "lightslategray": [119, 136, 153],
-    "lightslategrey": [119, 136, 153],
-    "lightsteelblue": [176, 196, 222],
-    "lightyellow": [255, 255, 224],
-    "lime": [0, 255, 0],
-    "limegreen": [50, 205, 50],
-    "linen": [250, 240, 230],
-    "magenta": [255, 0, 255],
-    "maroon": [128, 0, 0],
-    "mediumaquamarine": [102, 205, 170],
-    "mediumblue": [0, 0, 205],
-    "mediumorchid": [186, 85, 211],
-    "mediumpurple": [147, 112, 219],
-    "mediumseagreen": [60, 179, 113],
-    "mediumslateblue": [123, 104, 238],
-    "mediumspringgreen": [0, 250, 154],
-    "mediumturquoise": [72, 209, 204],
-    "mediumvioletred": [199, 21, 133],
-    "midnightblue": [25, 25, 112],
-    "mintcream": [245, 255, 250],
-    "mistyrose": [255, 228, 225],
-    "moccasin": [255, 228, 181],
-    "navajowhite": [255, 222, 173],
-    "navy": [0, 0, 128],
-    "oldlace": [253, 245, 230],
-    "olive": [128, 128, 0],
-    "olivedrab": [107, 142, 35],
-    "orange": [255, 165, 0],
-    "orangered": [255, 69, 0],
-    "orchid": [218, 112, 214],
-    "palegoldenrod": [238, 232, 170],
-    "palegreen": [152, 251, 152],
-    "paleturquoise": [175, 238, 238],
-    "palevioletred": [219, 112, 147],
-    "papayawhip": [255, 239, 213],
-    "peachpuff": [255, 218, 185],
-    "peru": [205, 133, 63],
-    "pink": [255, 192, 203],
-    "plum": [221, 160, 221],
-    "powderblue": [176, 224, 230],
-    "purple": [128, 0, 128],
-    "rebeccapurple": [102, 51, 153],
-    "red": [255, 0, 0],
-    "rosybrown": [188, 143, 143],
-    "royalblue": [65, 105, 225],
-    "saddlebrown": [139, 69, 19],
-    "salmon": [250, 128, 114],
-    "sandybrown": [244, 164, 96],
-    "seagreen": [46, 139, 87],
-    "seashell": [255, 245, 238],
-    "sienna": [160, 82, 45],
-    "silver": [192, 192, 192],
-    "skyblue": [135, 206, 235],
-    "slateblue": [106, 90, 205],
-    "slategray": [112, 128, 144],
-    "slategrey": [112, 128, 144],
-    "snow": [255, 250, 250],
-    "springgreen": [0, 255, 127],
-    "steelblue": [70, 130, 180],
-    "tan": [210, 180, 140],
-    "teal": [0, 128, 128],
-    "thistle": [216, 191, 216],
-    "tomato": [255, 99, 71],
-    "turquoise": [64, 224, 208],
-    "violet": [238, 130, 238],
-    "wheat": [245, 222, 179],
-    "white": [255, 255, 255],
-    "whitesmoke": [245, 245, 245],
-    "yellow": [255, 255, 0],
-    "yellowgreen": [154, 205, 50]
-  };
-  return colorName;
-}
-
-var simpleSwizzle = {exports: {}};
-
-var isArrayish;
-var hasRequiredIsArrayish;
-function requireIsArrayish() {
-  if (hasRequiredIsArrayish) return isArrayish;
-  hasRequiredIsArrayish = 1;
-  isArrayish = function isArrayish(obj) {
-    if (!obj || typeof obj === 'string') {
-      return false;
-    }
-    return obj instanceof Array || Array.isArray(obj) || obj.length >= 0 && (obj.splice instanceof Function || Object.getOwnPropertyDescriptor(obj, obj.length - 1) && obj.constructor.name !== 'String');
-  };
-  return isArrayish;
-}
-
-var hasRequiredSimpleSwizzle;
-function requireSimpleSwizzle() {
-  if (hasRequiredSimpleSwizzle) return simpleSwizzle.exports;
-  hasRequiredSimpleSwizzle = 1;
-  var isArrayish = requireIsArrayish();
-  var concat = Array.prototype.concat;
-  var slice = Array.prototype.slice;
-  var swizzle = simpleSwizzle.exports = function swizzle(args) {
-    var results = [];
-    for (var i = 0, len = args.length; i < len; i++) {
-      var arg = args[i];
-      if (isArrayish(arg)) {
-        // http://jsperf.com/javascript-array-concat-vs-push/98
-        results = concat.call(results, slice.call(arg));
-      } else {
-        results.push(arg);
-      }
-    }
-    return results;
-  };
-  swizzle.wrap = function (fn) {
-    return function () {
-      return fn(swizzle(arguments));
-    };
-  };
-  return simpleSwizzle.exports;
-}
-
-/* MIT license */
-var hasRequiredColorString;
-function requireColorString() {
-  if (hasRequiredColorString) return colorString.exports;
-  hasRequiredColorString = 1;
-  var colorNames = requireColorName();
-  var swizzle = requireSimpleSwizzle();
-  var hasOwnProperty = Object.hasOwnProperty;
-  var reverseNames = Object.create(null);
-
-  // create a list of reverse color names
-  for (var name in colorNames) {
-    if (hasOwnProperty.call(colorNames, name)) {
-      reverseNames[colorNames[name]] = name;
-    }
-  }
-  var cs = colorString.exports = {
-    to: {},
-    get: {}
-  };
-  cs.get = function (string) {
-    var prefix = string.substring(0, 3).toLowerCase();
-    var val;
-    var model;
-    switch (prefix) {
-      case 'hsl':
-        val = cs.get.hsl(string);
+var colorNames = {
+  aliceblue: [240, 248, 255],
+  antiquewhite: [250, 235, 215],
+  aqua: [0, 255, 255],
+  aquamarine: [127, 255, 212],
+  azure: [240, 255, 255],
+  beige: [245, 245, 220],
+  bisque: [255, 228, 196],
+  black: [0, 0, 0],
+  blanchedalmond: [255, 235, 205],
+  blue: [0, 0, 255],
+  blueviolet: [138, 43, 226],
+  brown: [165, 42, 42],
+  burlywood: [222, 184, 135],
+  cadetblue: [95, 158, 160],
+  chartreuse: [127, 255, 0],
+  chocolate: [210, 105, 30],
+  coral: [255, 127, 80],
+  cornflowerblue: [100, 149, 237],
+  cornsilk: [255, 248, 220],
+  crimson: [220, 20, 60],
+  cyan: [0, 255, 255],
+  darkblue: [0, 0, 139],
+  darkcyan: [0, 139, 139],
+  darkgoldenrod: [184, 134, 11],
+  darkgray: [169, 169, 169],
+  darkgreen: [0, 100, 0],
+  darkgrey: [169, 169, 169],
+  darkkhaki: [189, 183, 107],
+  darkmagenta: [139, 0, 139],
+  darkolivegreen: [85, 107, 47],
+  darkorange: [255, 140, 0],
+  darkorchid: [153, 50, 204],
+  darkred: [139, 0, 0],
+  darksalmon: [233, 150, 122],
+  darkseagreen: [143, 188, 143],
+  darkslateblue: [72, 61, 139],
+  darkslategray: [47, 79, 79],
+  darkslategrey: [47, 79, 79],
+  darkturquoise: [0, 206, 209],
+  darkviolet: [148, 0, 211],
+  deeppink: [255, 20, 147],
+  deepskyblue: [0, 191, 255],
+  dimgray: [105, 105, 105],
+  dimgrey: [105, 105, 105],
+  dodgerblue: [30, 144, 255],
+  firebrick: [178, 34, 34],
+  floralwhite: [255, 250, 240],
+  forestgreen: [34, 139, 34],
+  fuchsia: [255, 0, 255],
+  gainsboro: [220, 220, 220],
+  ghostwhite: [248, 248, 255],
+  gold: [255, 215, 0],
+  goldenrod: [218, 165, 32],
+  gray: [128, 128, 128],
+  green: [0, 128, 0],
+  greenyellow: [173, 255, 47],
+  grey: [128, 128, 128],
+  honeydew: [240, 255, 240],
+  hotpink: [255, 105, 180],
+  indianred: [205, 92, 92],
+  indigo: [75, 0, 130],
+  ivory: [255, 255, 240],
+  khaki: [240, 230, 140],
+  lavender: [230, 230, 250],
+  lavenderblush: [255, 240, 245],
+  lawngreen: [124, 252, 0],
+  lemonchiffon: [255, 250, 205],
+  lightblue: [173, 216, 230],
+  lightcoral: [240, 128, 128],
+  lightcyan: [224, 255, 255],
+  lightgoldenrodyellow: [250, 250, 210],
+  lightgray: [211, 211, 211],
+  lightgreen: [144, 238, 144],
+  lightgrey: [211, 211, 211],
+  lightpink: [255, 182, 193],
+  lightsalmon: [255, 160, 122],
+  lightseagreen: [32, 178, 170],
+  lightskyblue: [135, 206, 250],
+  lightslategray: [119, 136, 153],
+  lightslategrey: [119, 136, 153],
+  lightsteelblue: [176, 196, 222],
+  lightyellow: [255, 255, 224],
+  lime: [0, 255, 0],
+  limegreen: [50, 205, 50],
+  linen: [250, 240, 230],
+  magenta: [255, 0, 255],
+  maroon: [128, 0, 0],
+  mediumaquamarine: [102, 205, 170],
+  mediumblue: [0, 0, 205],
+  mediumorchid: [186, 85, 211],
+  mediumpurple: [147, 112, 219],
+  mediumseagreen: [60, 179, 113],
+  mediumslateblue: [123, 104, 238],
+  mediumspringgreen: [0, 250, 154],
+  mediumturquoise: [72, 209, 204],
+  mediumvioletred: [199, 21, 133],
+  midnightblue: [25, 25, 112],
+  mintcream: [245, 255, 250],
+  mistyrose: [255, 228, 225],
+  moccasin: [255, 228, 181],
+  navajowhite: [255, 222, 173],
+  navy: [0, 0, 128],
+  oldlace: [253, 245, 230],
+  olive: [128, 128, 0],
+  olivedrab: [107, 142, 35],
+  orange: [255, 165, 0],
+  orangered: [255, 69, 0],
+  orchid: [218, 112, 214],
+  palegoldenrod: [238, 232, 170],
+  palegreen: [152, 251, 152],
+  paleturquoise: [175, 238, 238],
+  palevioletred: [219, 112, 147],
+  papayawhip: [255, 239, 213],
+  peachpuff: [255, 218, 185],
+  peru: [205, 133, 63],
+  pink: [255, 192, 203],
+  plum: [221, 160, 221],
+  powderblue: [176, 224, 230],
+  purple: [128, 0, 128],
+  rebeccapurple: [102, 51, 153],
+  red: [255, 0, 0],
+  rosybrown: [188, 143, 143],
+  royalblue: [65, 105, 225],
+  saddlebrown: [139, 69, 19],
+  salmon: [250, 128, 114],
+  sandybrown: [244, 164, 96],
+  seagreen: [46, 139, 87],
+  seashell: [255, 245, 238],
+  sienna: [160, 82, 45],
+  silver: [192, 192, 192],
+  skyblue: [135, 206, 235],
+  slateblue: [106, 90, 205],
+  slategray: [112, 128, 144],
+  slategrey: [112, 128, 144],
+  snow: [255, 250, 250],
+  springgreen: [0, 255, 127],
+  steelblue: [70, 130, 180],
+  tan: [210, 180, 140],
+  teal: [0, 128, 128],
+  thistle: [216, 191, 216],
+  tomato: [255, 99, 71],
+  turquoise: [64, 224, 208],
+  violet: [238, 130, 238],
+  wheat: [245, 222, 179],
+  white: [255, 255, 255],
+  whitesmoke: [245, 245, 245],
+  yellow: [255, 255, 0],
+  yellowgreen: [154, 205, 50]
+};
+
+var reverseNames = Object.create(null);
+
+// Create a list of reverse color names
+for (var name in colorNames) {
+  if (Object.hasOwn(colorNames, name)) {
+    reverseNames[colorNames[name]] = name;
+  }
+}
+var cs = {
+  to: {},
+  get: {}
+};
+cs.get = function (string) {
+  var prefix = string.slice(0, 3).toLowerCase();
+  var value;
+  var model;
+  switch (prefix) {
+    case 'hsl':
+      {
+        value = cs.get.hsl(string);
         model = 'hsl';
         break;
-      case 'hwb':
-        val = cs.get.hwb(string);
+      }
+    case 'hwb':
+      {
+        value = cs.get.hwb(string);
         model = 'hwb';
         break;
-      default:
-        val = cs.get.rgb(string);
+      }
+    default:
+      {
+        value = cs.get.rgb(string);
         model = 'rgb';
         break;
+      }
+  }
+  if (!value) {
+    return null;
+  }
+  return {
+    model: model,
+    value: value
+  };
+};
+cs.get.rgb = function (string) {
+  if (!string) {
+    return null;
+  }
+  var abbr = /^#([a-f\d]{3,4})$/i;
+  var hex = /^#([a-f\d]{6})([a-f\d]{2})?$/i;
+  var rgba = /^rgba?\(\s*([+-]?\d+)(?=[\s,])\s*(?:,\s*)?([+-]?\d+)(?=[\s,])\s*(?:,\s*)?([+-]?\d+)\s*(?:[,|/]\s*([+-]?[\d.]+)(%?)\s*)?\)$/;
+  var per = /^rgba?\(\s*([+-]?[\d.]+)%\s*,?\s*([+-]?[\d.]+)%\s*,?\s*([+-]?[\d.]+)%\s*(?:[,|/]\s*([+-]?[\d.]+)(%?)\s*)?\)$/;
+  var keyword = /^(\w+)$/;
+  var rgb = [0, 0, 0, 1];
+  var match;
+  var i;
+  var hexAlpha;
+  if (match = string.match(hex)) {
+    hexAlpha = match[2];
+    match = match[1];
+    for (i = 0; i < 3; i++) {
+      // https://jsperf.com/slice-vs-substr-vs-substring-methods-long-string/19
+      var i2 = i * 2;
+      rgb[i] = Number.parseInt(match.slice(i2, i2 + 2), 16);
     }
-    if (!val) {
-      return null;
+    if (hexAlpha) {
+      rgb[3] = Number.parseInt(hexAlpha, 16) / 255;
     }
-    return {
-      model: model,
-      value: val
-    };
-  };
-  cs.get.rgb = function (string) {
-    if (!string) {
-      return null;
+  } else if (match = string.match(abbr)) {
+    match = match[1];
+    hexAlpha = match[3];
+    for (i = 0; i < 3; i++) {
+      rgb[i] = Number.parseInt(match[i] + match[i], 16);
     }
-    var abbr = /^#([a-f0-9]{3,4})$/i;
-    var hex = /^#([a-f0-9]{6})([a-f0-9]{2})?$/i;
-    var rgba = /^rgba?\(\s*([+-]?\d+)(?=[\s,])\s*(?:,\s*)?([+-]?\d+)(?=[\s,])\s*(?:,\s*)?([+-]?\d+)\s*(?:[,|\/]\s*([+-]?[\d\.]+)(%?)\s*)?\)$/;
-    var per = /^rgba?\(\s*([+-]?[\d\.]+)\%\s*,?\s*([+-]?[\d\.]+)\%\s*,?\s*([+-]?[\d\.]+)\%\s*(?:[,|\/]\s*([+-]?[\d\.]+)(%?)\s*)?\)$/;
-    var keyword = /^(\w+)$/;
-    var rgb = [0, 0, 0, 1];
-    var match;
-    var i;
-    var hexAlpha;
-    if (match = string.match(hex)) {
-      hexAlpha = match[2];
-      match = match[1];
-      for (i = 0; i < 3; i++) {
-        // https://jsperf.com/slice-vs-substr-vs-substring-methods-long-string/19
-        var i2 = i * 2;
-        rgb[i] = parseInt(match.slice(i2, i2 + 2), 16);
-      }
-      if (hexAlpha) {
-        rgb[3] = parseInt(hexAlpha, 16) / 255;
-      }
-    } else if (match = string.match(abbr)) {
-      match = match[1];
-      hexAlpha = match[3];
-      for (i = 0; i < 3; i++) {
-        rgb[i] = parseInt(match[i] + match[i], 16);
-      }
-      if (hexAlpha) {
-        rgb[3] = parseInt(hexAlpha + hexAlpha, 16) / 255;
-      }
-    } else if (match = string.match(rgba)) {
-      for (i = 0; i < 3; i++) {
-        rgb[i] = parseInt(match[i + 1], 0);
-      }
-      if (match[4]) {
-        if (match[5]) {
-          rgb[3] = parseFloat(match[4]) * 0.01;
-        } else {
-          rgb[3] = parseFloat(match[4]);
-        }
-      }
-    } else if (match = string.match(per)) {
-      for (i = 0; i < 3; i++) {
-        rgb[i] = Math.round(parseFloat(match[i + 1]) * 2.55);
-      }
-      if (match[4]) {
-        if (match[5]) {
-          rgb[3] = parseFloat(match[4]) * 0.01;
-        } else {
-          rgb[3] = parseFloat(match[4]);
-        }
-      }
-    } else if (match = string.match(keyword)) {
-      if (match[1] === 'transparent') {
-        return [0, 0, 0, 0];
-      }
-      if (!hasOwnProperty.call(colorNames, match[1])) {
-        return null;
-      }
-      rgb = colorNames[match[1]];
-      rgb[3] = 1;
-      return rgb;
-    } else {
-      return null;
+    if (hexAlpha) {
+      rgb[3] = Number.parseInt(hexAlpha + hexAlpha, 16) / 255;
     }
+  } else if (match = string.match(rgba)) {
     for (i = 0; i < 3; i++) {
-      rgb[i] = clamp(rgb[i], 0, 255);
+      rgb[i] = Number.parseInt(match[i + 1], 10);
     }
-    rgb[3] = clamp(rgb[3], 0, 1);
-    return rgb;
-  };
-  cs.get.hsl = function (string) {
-    if (!string) {
-      return null;
+    if (match[4]) {
+      rgb[3] = match[5] ? Number.parseFloat(match[4]) * 0.01 : Number.parseFloat(match[4]);
     }
-    var hsl = /^hsla?\(\s*([+-]?(?:\d{0,3}\.)?\d+)(?:deg)?\s*,?\s*([+-]?[\d\.]+)%\s*,?\s*([+-]?[\d\.]+)%\s*(?:[,|\/]\s*([+-]?(?=\.\d|\d)(?:0|[1-9]\d*)?(?:\.\d*)?(?:[eE][+-]?\d+)?)\s*)?\)$/;
-    var match = string.match(hsl);
-    if (match) {
-      var alpha = parseFloat(match[4]);
-      var h = (parseFloat(match[1]) % 360 + 360) % 360;
-      var s = clamp(parseFloat(match[2]), 0, 100);
-      var l = clamp(parseFloat(match[3]), 0, 100);
-      var a = clamp(isNaN(alpha) ? 1 : alpha, 0, 1);
-      return [h, s, l, a];
+  } else if (match = string.match(per)) {
+    for (i = 0; i < 3; i++) {
+      rgb[i] = Math.round(Number.parseFloat(match[i + 1]) * 2.55);
     }
-    return null;
-  };
-  cs.get.hwb = function (string) {
-    if (!string) {
-      return null;
+    if (match[4]) {
+      rgb[3] = match[5] ? Number.parseFloat(match[4]) * 0.01 : Number.parseFloat(match[4]);
     }
-    var hwb = /^hwb\(\s*([+-]?\d{0,3}(?:\.\d+)?)(?:deg)?\s*,\s*([+-]?[\d\.]+)%\s*,\s*([+-]?[\d\.]+)%\s*(?:,\s*([+-]?(?=\.\d|\d)(?:0|[1-9]\d*)?(?:\.\d*)?(?:[eE][+-]?\d+)?)\s*)?\)$/;
-    var match = string.match(hwb);
-    if (match) {
-      var alpha = parseFloat(match[4]);
-      var h = (parseFloat(match[1]) % 360 + 360) % 360;
-      var w = clamp(parseFloat(match[2]), 0, 100);
-      var b = clamp(parseFloat(match[3]), 0, 100);
-      var a = clamp(isNaN(alpha) ? 1 : alpha, 0, 1);
-      return [h, w, b, a];
+  } else if (match = string.match(keyword)) {
+    if (match[1] === 'transparent') {
+      return [0, 0, 0, 0];
     }
-    return null;
-  };
-  cs.to.hex = function () {
-    var rgba = swizzle(arguments);
-    return '#' + hexDouble(rgba[0]) + hexDouble(rgba[1]) + hexDouble(rgba[2]) + (rgba[3] < 1 ? hexDouble(Math.round(rgba[3] * 255)) : '');
-  };
-  cs.to.rgb = function () {
-    var rgba = swizzle(arguments);
-    return rgba.length < 4 || rgba[3] === 1 ? 'rgb(' + Math.round(rgba[0]) + ', ' + Math.round(rgba[1]) + ', ' + Math.round(rgba[2]) + ')' : 'rgba(' + Math.round(rgba[0]) + ', ' + Math.round(rgba[1]) + ', ' + Math.round(rgba[2]) + ', ' + rgba[3] + ')';
-  };
-  cs.to.rgb.percent = function () {
-    var rgba = swizzle(arguments);
-    var r = Math.round(rgba[0] / 255 * 100);
-    var g = Math.round(rgba[1] / 255 * 100);
-    var b = Math.round(rgba[2] / 255 * 100);
-    return rgba.length < 4 || rgba[3] === 1 ? 'rgb(' + r + '%, ' + g + '%, ' + b + '%)' : 'rgba(' + r + '%, ' + g + '%, ' + b + '%, ' + rgba[3] + ')';
-  };
-  cs.to.hsl = function () {
-    var hsla = swizzle(arguments);
-    return hsla.length < 4 || hsla[3] === 1 ? 'hsl(' + hsla[0] + ', ' + hsla[1] + '%, ' + hsla[2] + '%)' : 'hsla(' + hsla[0] + ', ' + hsla[1] + '%, ' + hsla[2] + '%, ' + hsla[3] + ')';
-  };
-
-  // hwb is a bit different than rgb(a) & hsl(a) since there is no alpha specific syntax
-  // (hwb have alpha optional & 1 is default value)
-  cs.to.hwb = function () {
-    var hwba = swizzle(arguments);
-    var a = '';
-    if (hwba.length >= 4 && hwba[3] !== 1) {
-      a = ', ' + hwba[3];
+    if (!Object.hasOwn(colorNames, match[1])) {
+      return null;
     }
-    return 'hwb(' + hwba[0] + ', ' + hwba[1] + '%, ' + hwba[2] + '%' + a + ')';
-  };
-  cs.to.keyword = function (rgb) {
-    return reverseNames[rgb.slice(0, 3)];
-  };
+    rgb = colorNames[match[1]];
+    rgb[3] = 1;
+    return rgb;
+  } else {
+    return null;
+  }
+  for (i = 0; i < 3; i++) {
+    rgb[i] = clamp(rgb[i], 0, 255);
+  }
+  rgb[3] = clamp(rgb[3], 0, 1);
+  return rgb;
+};
+cs.get.hsl = function (string) {
+  if (!string) {
+    return null;
+  }
+  var hsl = /^hsla?\(\s*([+-]?(?:\d{0,3}\.)?\d+)(?:deg)?\s*,?\s*([+-]?[\d.]+)%\s*,?\s*([+-]?[\d.]+)%\s*(?:[,|/]\s*([+-]?(?=\.\d|\d)(?:0|[1-9]\d*)?(?:\.\d*)?(?:[eE][+-]?\d+)?)\s*)?\)$/;
+  var match = string.match(hsl);
+  if (match) {
+    var alpha = Number.parseFloat(match[4]);
+    var h = (Number.parseFloat(match[1]) % 360 + 360) % 360;
+    var s = clamp(Number.parseFloat(match[2]), 0, 100);
+    var l = clamp(Number.parseFloat(match[3]), 0, 100);
+    var a = clamp(Number.isNaN(alpha) ? 1 : alpha, 0, 1);
+    return [h, s, l, a];
+  }
+  return null;
+};
+cs.get.hwb = function (string) {
+  if (!string) {
+    return null;
+  }
+  var hwb = /^hwb\(\s*([+-]?\d{0,3}(?:\.\d+)?)(?:deg)?\s*,\s*([+-]?[\d.]+)%\s*,\s*([+-]?[\d.]+)%\s*(?:,\s*([+-]?(?=\.\d|\d)(?:0|[1-9]\d*)?(?:\.\d*)?(?:[eE][+-]?\d+)?)\s*)?\)$/;
+  var match = string.match(hwb);
+  if (match) {
+    var alpha = Number.parseFloat(match[4]);
+    var h = (Number.parseFloat(match[1]) % 360 + 360) % 360;
+    var w = clamp(Number.parseFloat(match[2]), 0, 100);
+    var b = clamp(Number.parseFloat(match[3]), 0, 100);
+    var a = clamp(Number.isNaN(alpha) ? 1 : alpha, 0, 1);
+    return [h, w, b, a];
+  }
+  return null;
+};
+cs.to.hex = function () {
+  return '#' + hexDouble(arguments.length <= 0 ? undefined : arguments[0]) + hexDouble(arguments.length <= 1 ? undefined : arguments[1]) + hexDouble(arguments.length <= 2 ? undefined : arguments[2]) + ((arguments.length <= 3 ? undefined : arguments[3]) < 1 ? hexDouble(Math.round((arguments.length <= 3 ? undefined : arguments[3]) * 255)) : '');
+};
+cs.to.rgb = function () {
+  return arguments.length < 4 || (arguments.length <= 3 ? undefined : arguments[3]) === 1 ? 'rgb(' + Math.round(arguments.length <= 0 ? undefined : arguments[0]) + ', ' + Math.round(arguments.length <= 1 ? undefined : arguments[1]) + ', ' + Math.round(arguments.length <= 2 ? undefined : arguments[2]) + ')' : 'rgba(' + Math.round(arguments.length <= 0 ? undefined : arguments[0]) + ', ' + Math.round(arguments.length <= 1 ? undefined : arguments[1]) + ', ' + Math.round(arguments.length <= 2 ? undefined : arguments[2]) + ', ' + (arguments.length <= 3 ? undefined : arguments[3]) + ')';
+};
+cs.to.rgb.percent = function () {
+  var r = Math.round((arguments.length <= 0 ? undefined : arguments[0]) / 255 * 100);
+  var g = Math.round((arguments.length <= 1 ? undefined : arguments[1]) / 255 * 100);
+  var b = Math.round((arguments.length <= 2 ? undefined : arguments[2]) / 255 * 100);
+  return arguments.length < 4 || (arguments.length <= 3 ? undefined : arguments[3]) === 1 ? 'rgb(' + r + '%, ' + g + '%, ' + b + '%)' : 'rgba(' + r + '%, ' + g + '%, ' + b + '%, ' + (arguments.length <= 3 ? undefined : arguments[3]) + ')';
+};
+cs.to.hsl = function () {
+  return arguments.length < 4 || (arguments.length <= 3 ? undefined : arguments[3]) === 1 ? 'hsl(' + (arguments.length <= 0 ? undefined : arguments[0]) + ', ' + (arguments.length <= 1 ? undefined : arguments[1]) + '%, ' + (arguments.length <= 2 ? undefined : arguments[2]) + '%)' : 'hsla(' + (arguments.length <= 0 ? undefined : arguments[0]) + ', ' + (arguments.length <= 1 ? undefined : arguments[1]) + '%, ' + (arguments.length <= 2 ? undefined : arguments[2]) + '%, ' + (arguments.length <= 3 ? undefined : arguments[3]) + ')';
+};
 
-  // helpers
-  function clamp(num, min, max) {
-    return Math.min(Math.max(min, num), max);
+// Hwb is a bit different than rgb(a) & hsl(a) since there is no alpha specific syntax
+// (hwb have alpha optional & 1 is default value)
+cs.to.hwb = function () {
+  var a = '';
+  if (arguments.length >= 4 && (arguments.length <= 3 ? undefined : arguments[3]) !== 1) {
+    a = ', ' + (arguments.length <= 3 ? undefined : arguments[3]);
   }
-  function hexDouble(num) {
-    var str = Math.round(num).toString(16).toUpperCase();
-    return str.length < 2 ? '0' + str : str;
+  return 'hwb(' + (arguments.length <= 0 ? undefined : arguments[0]) + ', ' + (arguments.length <= 1 ? undefined : arguments[1]) + '%, ' + (arguments.length <= 2 ? undefined : arguments[2]) + '%' + a + ')';
+};
+cs.to.keyword = function () {
+  for (var _len = arguments.length, rgb = new Array(_len), _key = 0; _key < _len; _key++) {
+    rgb[_key] = arguments[_key];
   }
-  return colorString.exports;
+  return reverseNames[rgb.slice(0, 3)];
+};
+
+// Helpers
+function clamp(number_, min, max) {
+  return Math.min(Math.max(min, number_), max);
+}
+function hexDouble(number_) {
+  var string_ = Math.round(number_).toString(16).toUpperCase();
+  return string_.length < 2 ? '0' + string_ : string_;
 }
 
+var colorString = /*#__PURE__*/Object.freeze({
+	__proto__: null,
+	default: cs
+});
+
+var require$$0 = /*@__PURE__*/getAugmentedNamespace(colorString);
+
 var hasRequiredHelpers;
 function requireHelpers() {
   if (hasRequiredHelpers) return helpers;
@@ -654,20 +925,16 @@ function requireHelpers() {
       };
       return __assign.apply(this, arguments);
     };
-    var __spreadArray = helpers && helpers.__spreadArray || function (to, from, pack) {
-      if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-          if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-          ar[i] = from[i];
-        }
-      }
-      return to.concat(ar || Array.prototype.slice.call(from));
+    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 colorString = requireColorString();
+    var color_string_1 = __importDefault(require$$0);
     var colors_1 = requireColors();
     var space_1 = requireSpace();
     var typography_1 = requireTypography();
@@ -689,13 +956,20 @@ function requireHelpers() {
     var color = function color(name, alpha) {
       var _a;
       var color = colors_1.colors.all[name];
-      return alpha != null ?
-      // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-      colorString.to.rgb(__spreadArray(__spreadArray([], ((_a = colorString.get.rgb(color)) === null || _a === void 0 ? void 0 : _a.slice(0, 3)) || [], true), [alpha], false)) : color;
+      var _b = (_a = color_string_1["default"].get.rgb(color)) !== null && _a !== void 0 ? _a : [],
+        red = _b[0],
+        green = _b[1],
+        blue = _b[2];
+      return alpha != null ? color_string_1["default"].to.rgb(red, green, blue, alpha) : color;
     };
     exports.color = color;
     var colorInHex = function colorInHex(name, alpha) {
-      return colorString.to.hex(colorString.get.rgb((0, exports.color)(name, alpha)));
+      var _a, _b, _c;
+      var _d = (_b = color_string_1["default"].get.rgb((_a = (0, exports.color)(name, alpha)) !== null && _a !== void 0 ? _a : '')) !== null && _b !== void 0 ? _b : [],
+        red = _d[0],
+        green = _d[1],
+        blue = _d[2];
+      return (_c = color_string_1["default"].to.hex(red, green, blue, alpha)) !== null && _c !== void 0 ? _c : '';
     };
     exports.colorInHex = colorInHex;
     var spacing = function spacing(topY, rightX, bottom, left) {
@@ -796,9 +1070,9 @@ function _createForOfIteratorHelper(r, e) {
         s: F,
         n: function () {
           return n >= r.length ? {
-            done: !0
+            done: true
           } : {
-            done: !1,
+            done: false,
             value: r[n++]
           };
         },
@@ -811,8 +1085,8 @@ function _createForOfIteratorHelper(r, e) {
     throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
   }
   var o,
-    a = !0,
-    u = !1;
+    a = true,
+    u = false;
   return {
     s: function () {
       t = t.call(r);
@@ -822,7 +1096,7 @@ function _createForOfIteratorHelper(r, e) {
       return a = r.done, r;
     },
     e: function (r) {
-      u = !0, o = r;
+      u = true, o = r;
     },
     f: function () {
       try {
@@ -836,9 +1110,9 @@ function _createForOfIteratorHelper(r, e) {
 function _defineProperty$1(e, r, t) {
   return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
     value: t,
-    enumerable: !0,
-    configurable: !0,
-    writable: !0
+    enumerable: true,
+    configurable: true,
+    writable: true
   }) : e[r] = t, e;
 }
 function _extends$1() {
@@ -861,15 +1135,15 @@ function _iterableToArrayLimit(r, l) {
       i,
       u,
       a = [],
-      f = !0,
-      o = !1;
+      f = true,
+      o = false;
     try {
       if (i = (t = t.call(r)).next, 0 === l) {
         if (Object(t) !== t) return;
         f = !1;
       } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
     } catch (r) {
-      o = !0, n = r;
+      o = true, n = r;
     } finally {
       try {
         if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
@@ -902,7 +1176,7 @@ function ownKeys(e, r) {
 function _objectSpread2(e) {
   for (var r = 1; r < arguments.length; r++) {
     var t = null != arguments[r] ? arguments[r] : {};
-    r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
+    r % 2 ? ownKeys(Object(t), true).forEach(function (r) {
       _defineProperty$1(e, r, t[r]);
     }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
       Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
@@ -916,8 +1190,8 @@ function _objectWithoutProperties(e, t) {
     r,
     i = _objectWithoutPropertiesLoose(e, t);
   if (Object.getOwnPropertySymbols) {
-    var s = Object.getOwnPropertySymbols(e);
-    for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
+    var n = Object.getOwnPropertySymbols(e);
+    for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
   }
   return i;
 }
@@ -925,7 +1199,7 @@ function _objectWithoutPropertiesLoose(r, e) {
   if (null == r) return {};
   var t = {};
   for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
-    if (e.includes(n)) continue;
+    if (-1 !== e.indexOf(n)) continue;
     t[n] = r[n];
   }
   return t;
@@ -940,7 +1214,7 @@ function _toPrimitive(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
-    var i = e.call(t, r || "default");
+    var i = e.call(t, r);
     if ("object" != typeof i) return i;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }
@@ -971,108 +1245,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__default.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;
@@ -1080,7 +1252,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),
@@ -1097,50 +1268,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__default.createContext(DEFAULT_STYLES);
+var useStyles = function useStyles() {
+  return 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__default.createElement(Stack, {
-    className: "StatesProps",
-    space: 2,
-    direction: "horizontal"
-  }, /*#__PURE__*/React__default.createElement("span", null, children.type.displayName || children.type.name), !isEmpty(props) && /*#__PURE__*/React__default.createElement("strong", null, stringifyProps(props)), !isRenderProps(children) && !isEmpty(childrenProps) && /*#__PURE__*/React__default.createElement("span", null, stringifyProps(childrenProps)), /*#__PURE__*/React__default.createElement("span", null, " "));
+  return /*#__PURE__*/React__default.createElement("div", {
+    style: styles.stateProps
+  }, '<', /*#__PURE__*/React__default.createElement("span", null, children.type.displayName || children.type.name), ' ', !isEmpty(props) && /*#__PURE__*/React__default.createElement("strong", {
+    style: styles.statePropsActive
+  }, stringifyProps(props)), ' ', !isRenderProps(children) && !isEmpty(childrenProps) && /*#__PURE__*/React__default.createElement("span", null, stringifyProps(childrenProps)), /*#__PURE__*/React__default.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__default.cloneElement(children, props);
   var innerChildren = isRenderProps(children) ? children(props) : children;
   return /*#__PURE__*/React__default.createElement("div", _extends$1({
-    className: "State"
-  }, rest), Specimen, /*#__PURE__*/React__default.createElement("code", {
-    className: "State__props"
-  }, /*#__PURE__*/React__default.createElement(StatesProps, {
+    style: styles.state
+  }, rest), Specimen, /*#__PURE__*/React__default.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__default.createElement("div", {
-    className: "States"
-  }, states.map(function (props, index) {
+    rest = _objectWithoutProperties(_ref, _excluded$F);
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, states.map(function (props, index) {
     return /*#__PURE__*/React__default.createElement(State, _extends$1({
       key: index,
       props: props
@@ -1148,6 +1354,11 @@ var States = function States(_ref) {
   }));
 };
 
+var preventNavigation = function preventNavigation(event) {
+  event.preventDefault();
+  event.returnValue = '';
+};
+
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -2693,16 +2904,16 @@ var mediumSidecar = createSidecarMedium({
 var focusScope = /*#__PURE__*/createContext(undefined);
 
 var emptyArray = [];
-var FocusLock = /*#__PURE__*/React.forwardRef(function FocusLockUI(props, parentRef) {
+var FocusLock = /*#__PURE__*/forwardRef(function FocusLockUI(props, parentRef) {
   var _extends2;
-  var _React$useState = React.useState(),
-    realObserved = _React$useState[0],
-    setObserved = _React$useState[1];
-  var observed = React.useRef();
-  var isActive = React.useRef(false);
-  var originalFocusedElement = React.useRef(null);
-  var _React$useState2 = React.useState({}),
-    update = _React$useState2[1];
+  var _useState = useState(),
+    realObserved = _useState[0],
+    setObserved = _useState[1];
+  var observed = useRef();
+  var isActive = useRef(false);
+  var originalFocusedElement = useRef(null);
+  var _useState2 = useState({}),
+    update = _useState2[1];
   var children = props.children,
     _props$disabled = props.disabled,
     disabled = _props$disabled === void 0 ? false : _props$disabled,
@@ -2731,9 +2942,9 @@ var FocusLock = /*#__PURE__*/React.forwardRef(function FocusLockUI(props, parent
     focusOptions = props.focusOptions,
     onActivationCallback = props.onActivation,
     onDeactivationCallback = props.onDeactivation;
-  var _React$useState3 = React.useState({}),
-    id = _React$useState3[0];
-  var onActivation = React.useCallback(function (_ref) {
+  var _useState3 = useState({}),
+    id = _useState3[0];
+  var onActivation = useCallback(function (_ref) {
     var captureFocusRestore = _ref.captureFocusRestore;
     if (!originalFocusedElement.current) {
       var _document;
@@ -2749,14 +2960,14 @@ var FocusLock = /*#__PURE__*/React.forwardRef(function FocusLockUI(props, parent
     isActive.current = true;
     update();
   }, [onActivationCallback]);
-  var onDeactivation = React.useCallback(function () {
+  var onDeactivation = useCallback(function () {
     isActive.current = false;
     if (onDeactivationCallback) {
       onDeactivationCallback(observed.current);
     }
     update();
   }, [onDeactivationCallback]);
-  var returnFocus = React.useCallback(function (allowDefer) {
+  var returnFocus = useCallback(function (allowDefer) {
     var focusRestore = originalFocusedElement.current;
     if (focusRestore) {
       var returnFocusTo = (typeof focusRestore === 'function' ? focusRestore() : focusRestore) || document.body;
@@ -2774,13 +2985,13 @@ var FocusLock = /*#__PURE__*/React.forwardRef(function FocusLockUI(props, parent
       }
     }
   }, [shouldReturnFocus]);
-  var onFocus = React.useCallback(function (event) {
+  var onFocus = useCallback(function (event) {
     if (isActive.current) {
       mediumFocus.useMedium(event);
     }
   }, []);
   var onBlur = mediumBlur.useMedium;
-  var setObserveNode = React.useCallback(function (newObserved) {
+  var setObserveNode = useCallback(function (newObserved) {
     if (observed.current !== newObserved) {
       observed.current = newObserved;
       setObserved(newObserved);
@@ -2790,7 +3001,7 @@ var FocusLock = /*#__PURE__*/React.forwardRef(function FocusLockUI(props, parent
     if (typeof allowTextSelection !== 'undefined') {
       console.warn('React-Focus-Lock: allowTextSelection is deprecated and enabled by default');
     }
-    React.useEffect(function () {
+    useEffect(function () {
       if (!observed.current && typeof Container !== 'string') {
         console.error('FocusLock: could not obtain ref to internal node');
       }
@@ -2800,7 +3011,7 @@ var FocusLock = /*#__PURE__*/React.forwardRef(function FocusLockUI(props, parent
   var hasLeadingGuards = noFocusGuards !== true;
   var hasTailingGuards = hasLeadingGuards && noFocusGuards !== 'tail';
   var mergedRef = useMergeRefs([parentRef, setObserveNode]);
-  var focusScopeValue = React.useMemo(function () {
+  var focusScopeValue = useMemo(function () {
     return {
       observed: observed,
       shards: shards,
@@ -2808,18 +3019,18 @@ var FocusLock = /*#__PURE__*/React.forwardRef(function FocusLockUI(props, parent
       active: isActive.current
     };
   }, [disabled, isActive.current, shards, realObserved]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, hasLeadingGuards && [/*#__PURE__*/
-  React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement(Fragment, null, hasLeadingGuards && [/*#__PURE__*/
+  React__default.createElement("div", {
     key: "guard-first",
     "data-focus-guard": true,
     tabIndex: disabled ? -1 : 0,
     style: hiddenGuard
-  }), hasPositiveIndices ? /*#__PURE__*/React.createElement("div", {
+  }), hasPositiveIndices ? /*#__PURE__*/React__default.createElement("div", {
     key: "guard-nearest",
     "data-focus-guard": true,
     tabIndex: disabled ? -1 : 1,
     style: hiddenGuard
-  }) : null], !disabled && /*#__PURE__*/React.createElement(SideCar, {
+  }) : null], !disabled && /*#__PURE__*/React__default.createElement(SideCar, {
     id: id,
     sideCar: mediumSidecar,
     observed: realObserved,
@@ -2834,15 +3045,15 @@ var FocusLock = /*#__PURE__*/React.forwardRef(function FocusLockUI(props, parent
     returnFocus: returnFocus,
     focusOptions: focusOptions,
     noFocusGuards: noFocusGuards
-  }), /*#__PURE__*/React.createElement(Container, _extends({
+  }), /*#__PURE__*/React__default.createElement(Container, _extends({
     ref: mergedRef
   }, lockProps, {
     className: className,
     onBlur: onBlur,
     onFocus: onFocus
-  }), /*#__PURE__*/React.createElement(focusScope.Provider, {
+  }), /*#__PURE__*/React__default.createElement(focusScope.Provider, {
     value: focusScopeValue
-  }, children)), hasTailingGuards && /*#__PURE__*/React.createElement("div", {
+  }, children)), hasTailingGuards && /*#__PURE__*/React__default.createElement("div", {
     "data-focus-guard": true,
     tabIndex: disabled ? -1 : 0,
     style: hiddenGuard
@@ -2969,7 +3180,7 @@ function toPrimitive(t, r) {
   if ("object" != _typeof(t) || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
-    var i = e.call(t, r || "default");
+    var i = e.call(t, r);
     if ("object" != _typeof(i)) return i;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }
@@ -2984,9 +3195,9 @@ function toPropertyKey(t) {
 function _defineProperty(e, r, t) {
   return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
     value: t,
-    enumerable: !0,
-    configurable: !0,
-    writable: !0
+    enumerable: true,
+    configurable: true,
+    writable: true
   }) : e[r] = t, e;
 }
 
@@ -3519,8 +3730,18 @@ var newFocus = function newFocus(innerNodes, innerTabbables, outerNodes, activeE
   var firstNodeIndex = outerNodes.indexOf(firstFocus);
   var lastNodeIndex = outerNodes.indexOf(lastFocus);
   var correctedNodes = correctNodes(outerNodes);
-  var correctedIndex = activeElement !== undefined ? correctedNodes.indexOf(activeElement) : -1;
-  var correctedIndexDiff = correctedIndex - (lastNode ? correctedNodes.indexOf(lastNode) : activeIndex);
+  var currentFocusableIndex = activeElement !== undefined ? correctedNodes.indexOf(activeElement) : -1;
+  var previousFocusableIndex = lastNode ? correctedNodes.indexOf(lastNode) : currentFocusableIndex;
+  var tabbableNodes = correctedNodes.filter(function (node) {
+    return node.tabIndex >= 0;
+  });
+  var currentTabbableIndex = activeElement !== undefined ? tabbableNodes.indexOf(activeElement) : -1;
+  var previousTabbableIndex = lastNode ? tabbableNodes.indexOf(lastNode) : currentTabbableIndex;
+  var focusIndexDiff = currentTabbableIndex >= 0 && previousTabbableIndex >= 0 ?
+  // old/new are tabbables, measure distance in tabbable space
+  previousTabbableIndex - currentTabbableIndex :
+  // or else measure in focusable space
+  previousFocusableIndex - currentFocusableIndex;
   // old focus
   if (!indexDiff && lastNodeInside >= 0) {
     return lastNodeInside;
@@ -3543,7 +3764,7 @@ var newFocus = function newFocus(innerNodes, innerTabbables, outerNodes, activeE
     return returnFirstNode;
   }
   // jump out, but not on the guard
-  if (indexDiff && Math.abs(correctedIndexDiff) > 1) {
+  if (indexDiff && Math.abs(focusIndexDiff) > 1) {
     return lastNodeInside;
   }
   // focus above lock
@@ -4099,9 +4320,8 @@ var activateTrap = function activateTrap() {
       focusOptions = _lastActiveTrap.focusOptions,
       noFocusGuards = _lastActiveTrap.noFocusGuards;
     var workingNode = observed || lastPortaledElement && lastPortaledElement.portaledElement;
-    if (focusOnBody() && lastActiveFocus) {
+    if (focusOnBody() && lastActiveFocus && lastActiveFocus !== document.body) {
       if (!document.body.contains(lastActiveFocus) || isNotFocusable(lastActiveFocus)) {
-        lastActiveFocus = null;
         var newTarget = tryRestoreFocus();
         if (newTarget) {
           newTarget.focus();
@@ -4137,9 +4357,11 @@ var activateTrap = function activateTrap() {
               lastPortaledElement = {};
             }
           }
-          focusWasOutsideWindow = false;
           lastActiveFocus = document && document.activeElement;
-          tryRestoreFocus = captureFocusRestore(lastActiveFocus);
+          if (lastActiveFocus !== document.body) {
+            tryRestoreFocus = captureFocusRestore(lastActiveFocus);
+          }
+          focusWasOutsideWindow = false;
         }
       }
       if (document && activeElement !== document.activeElement && document.querySelector('[data-focus-auto-guard]')) {
@@ -4158,7 +4380,7 @@ var activateTrap = function activateTrap() {
             var node = _ref4.node;
             return node.removeAttribute('tabIndex');
           });
-          autoGuard(focusedIndex, allNodes.length, +1, allNodes);
+          autoGuard(focusedIndex, allNodes.length, 1, allNodes);
           autoGuard(focusedIndex, -1, -1, allNodes);
         }
       }
@@ -4565,9 +4787,9 @@ var handleScroll = function handleScroll(axis, endTarget, event, sourceDelta, no
   // self content
   targetInLock && (endTarget.contains(target) || endTarget === target));
   // handle epsilon around 0 (non standard zoom levels)
-  if (isDeltaPositive && (Math.abs(availableScroll) < 1 || !noOverscroll)) {
+  if (isDeltaPositive && (Math.abs(availableScroll) < 1 || false)) {
     shouldCancelScroll = true;
-  } else if (!isDeltaPositive && (Math.abs(availableScrollTop) < 1 || !noOverscroll)) {
+  } else if (!isDeltaPositive && (Math.abs(availableScrollTop) < 1 || false)) {
     shouldCancelScroll = true;
   }
   return shouldCancelScroll;
@@ -4652,7 +4874,7 @@ function RemoveScrollSideCar(props) {
       return true;
     }
     var cancelingAxis = activeAxis.current || currentAxis;
-    return handleScroll(cancelingAxis, parent, event, cancelingAxis === 'h' ? deltaX : deltaY, true);
+    return handleScroll(cancelingAxis, parent, event, cancelingAxis === 'h' ? deltaX : deltaY);
   }, []);
   var shouldPrevent = React.useCallback(function (_event) {
     var event = _event;
@@ -5010,6 +5232,72 @@ var FocusOn = /*#__PURE__*/React.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 = {};
@@ -5110,7 +5398,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;
@@ -5156,7 +5444,7 @@ var AspectRatioBox = /*#__PURE__*/React__default.forwardRef(function (_ref2, for
     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,
@@ -5184,22 +5472,22 @@ var AspectRatioBox = /*#__PURE__*/React__default.forwardRef(function (_ref2, for
 });
 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__default.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__default.createElement("ol", _extends$1({
     itemScope: true,
@@ -5217,7 +5505,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;
 };
@@ -5232,7 +5520,7 @@ var Clickable = /*#__PURE__*/React__default.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,
@@ -5241,7 +5529,6 @@ var Clickable = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     disabled: disabled
   });
   if (isLink(props)) return /*#__PURE__*/React__default.createElement(Link, _extends$1({}, props, {
-    href: props.to,
     ref: ref
   }));
   if (isAnchor(props)) return /*#__PURE__*/React__default.createElement("a", _extends$1({}, props, {
@@ -5254,14 +5541,14 @@ var Clickable = /*#__PURE__*/React__default.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__default.createElement(Clickable, _extends$1({}, rest, {
     className: classNames('ControlLink', {
       'ControlLink--underlined': underlined
@@ -5272,12 +5559,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__default.createElement("li", {
     className: classNames('Breadcrumb', className),
     itemProp: "itemListElement",
@@ -7001,11 +7288,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;
@@ -7016,7 +7303,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,
@@ -7026,7 +7313,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__default.createElement(Clickable, _extends$1({
     className: classNames('Button', {
       'Button--chip': chip,
@@ -7150,7 +7437,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%',
@@ -7169,7 +7456,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 = useState((_ref2 = checked !== null && checked !== void 0 ? checked : defaultChecked) !== null && _ref2 !== void 0 ? _ref2 : false),
     _useState2 = _slicedToArray(_useState, 2),
     isChecked = _useState2[0],
@@ -7261,7 +7548,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,
@@ -7277,7 +7564,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 = useCallback(function (_event) {
     onClick === null || onClick === void 0 || onClick(color, title);
   }, [color, title, onClick]);
@@ -7312,14 +7599,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__default.createElement("div", _extends$1({
     className: classNames('Modal', className)
   }, rest), /*#__PURE__*/React__default.createElement(FocusOn, {
@@ -7330,14 +7617,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__*/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 = useState(show),
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
@@ -7364,7 +7651,7 @@ var Overlay = /*#__PURE__*/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,
@@ -7375,7 +7662,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 = useMemo(function () {
     return typeof document !== 'undefined' ? document.createElement('div') : null;
   }, []);
@@ -7401,6 +7688,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__default.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,
@@ -7549,516 +7856,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 = _interopDefault(React__default),
-    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(!0), 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 = !1;
-    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, !1);
-    }), {
-      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 !1;
-    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 !0;
-        if (++s >= l.length) return !1;
-      }
-      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 !1;
-      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 = !1, f.mounted = !1, 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: !0
-        }) : 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 = !0, f.mounted = !0, 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 = !1, 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 = !0, 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 = !1;
-        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 = !1, 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(!1);
-        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(!1);
-      } else t = React.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.cloneElement(t, o);
-    }, e;
-  }(React.Component);
-  reactInputMask_production_min = InputElement;
-  return reactInputMask_production_min;
-}
+var reactInputMask_production_min = {exports: {}};
 
 /**
  * Copyright (c) 2013-present, Facebook, Inc.
@@ -8170,31 +7968,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__default; 
+  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 = _interopDefault(React__default);
-  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 = React__default;
+  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) {
@@ -8207,11 +8501,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 = {};
@@ -8224,895 +8513,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 isEmpty(maskOptions, value) {
-    return value.split('').every(function (character, i) {
-      return isPermanentCharacter(maskOptions, i) || !isAllowedCharacter(maskOptions, i, character);
-    });
+  function getElementWindow(element) {
+    var _getElementDocument;
+    return (_getElementDocument = getElementDocument(element)) == null ? void 0 : _getElementDocument.defaultView;
   }
-  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;
-      }
-    }
-    return filledLength;
+  function isDOMElement(element) {
+    var elementWindow = getElementWindow(element);
+    return !!elementWindow && element instanceof elementWindow.HTMLElement;
   }
-  function isFilled(maskOptions, value) {
-    return getFilledLength(maskOptions, value) === maskOptions.mask.length;
+  function isFunction(value) {
+    return typeof value === "function";
   }
-  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];
+  function findLastIndex(array, predicate) {
+    for (var i = array.length - 1; i >= 0; i--) {
+      var x = array[i];
+      if (predicate(x, i)) {
+        return i;
       }
-      return value;
     }
-    if (value) {
-      var emptyValue = formatValue(maskOptions, '');
-      return insertString(maskOptions, emptyValue, value, 0);
+    return -1;
+  }
+  function repeat(string, n) {
+    if (n === void 0) {
+      n = 1;
     }
-    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] = '';
-        }
-      }
-      start = Math.max(prefix.length, start);
-      arrayValue.splice(start, end - start);
-      value = arrayValue.join('');
-      return formatValue(maskOptions, value);
+    var result = "";
+    for (var i = 0; i < n; i++) {
+      result += string;
     }
-    return arrayValue.map(function (character, i) {
-      if (i < start || i >= end) {
-        return character;
-      }
-      if (isPermanentCharacter(maskOptions, i)) {
-        return mask[i];
-      }
-      return maskChar;
-    }).join('');
+    return result;
   }
-  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
+  function toString(value) {
+    return "" + value;
+  }
+  function useInputElement(inputRef) {
+    return React.useCallback(function () {
+      var input = inputRef.current;
+      var isDOMNode = typeof window !== "undefined" && isDOMElement(input);
 
-        if (insertPosition >= mask.length) {
-          return false;
-        }
+      // 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");
       }
-      var isAllowed = isAllowedCharacter(maskOptions, insertPosition, insertCharacter) || insertCharacter === maskChar;
-      if (!isAllowed) {
-        return true;
+      return input;
+    }, [inputRef]);
+  }
+  function useDeferLoop(callback) {
+    var deferIdRef = React.useRef(null);
+    var runLoop = React.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.useCallback(function () {
+      cancelDefer(deferIdRef.current);
+      deferIdRef.current = null;
+    }, []);
+    React.useEffect(function () {
+      if (deferIdRef.current) {
+        stopLoop();
+        runLoop();
+      }
+    }, [runLoop, stopLoop]);
+    React.useEffect(cancelDefer, []);
+    return [runLoop, stopLoop];
+  }
+  function useSelection(inputRef, isMasked) {
+    var selectionRef = React.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.useCallback(function () {
+      var input = getInputElement();
+      return getInputSelection(input);
+    }, [getInputElement]);
+    var getLastSelection = React.useCallback(function () {
+      return selectionRef.current;
+    }, []);
+    var setSelection = React.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.useCallback(function () {
+      selectionRef.current = getSelection();
+    }, [getSelection]);
+    var _useDeferLoop = useDeferLoop(selectionLoop),
+      runSelectionLoop = _useDeferLoop[0],
+      stopSelectionLoop = _useDeferLoop[1];
+    React.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.useRef(initialValue);
+    var getValue = React.useCallback(function () {
+      var input = getInputElement();
+      return input.value;
+    }, [getInputElement]);
+    var getLastValue = React.useCallback(function () {
+      return valueRef.current;
+    }, []);
+    var setValue = React.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.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.useRef();
+    React.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;
+  /* 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.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;
+    };
+    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;
         }
-        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;
+      }
+      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;
+        }
+      }
+      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];
         }
-        _this.setInputValue(newValue);
-        if (isFunction(_this.props.onChange)) {
-          _this.props.onChange(event);
+        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 (_this.isWindowsPhoneBrowser) {
-          _this.setSelection(newSelection.start, newSelection.end, {
-            deferred: true
-          });
-        } else {
-          _this.setSelection(newSelection.start, newSelection.end);
+        if (i < start || i >= end) {
+          return character;
         }
-      };
-      _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();
+        if (!isEditable) {
+          return mask[i];
         }
-        if (isFunction(_this.props.onFocus)) {
-          _this.props.onFocus(event);
+        if (maskPlaceholder) {
+          return maskPlaceholder[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 "";
+      }).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.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);
+        }
+      }
+      if (props.onBlur) {
+        props.onBlur(event);
       }
-      _this.value = _newValue;
-      return _this;
     }
-    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
+            }
           }
-        }
+        }).value;
       }
-      if (this.maskOptions.mask && isEmpty(this.maskOptions, newValue) && !showEmpty && (!hasValue || !this.props.value)) {
-        newValue = '';
+      setInputState(_extends({}, getLastInputState(), {
+        value: newValue
+      }));
+    }
+    var lastState = getLastInputState();
+    var lastSelection = lastState.selection;
+    var lastValue = lastState.value;
+    React.useLayoutEffect(function () {
+      if (!isMasked) {
+        return;
       }
-      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);
+      var input = getInputElement();
+      if (!input) {
+        return;
       }
-    };
-    _proto.componentWillUnmount = function componentWillUnmount() {
-      this.mounted = false;
-      if (this.selectionDeferId !== null) {
-        cancelDefer(this.selectionDeferId);
+      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 = "";
+        }
       }
-      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];
-        });
-        inputElement = children(childrenProps);
-        var conflictProps = controlledProps.filter(function (propId) {
-          return inputElement.props[propId] != null && inputElement.props[propId] !== restProps[propId];
+      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
         });
-        !!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.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.cloneElement(inputElement, changedProps);
-      return inputElement;
     };
-    return InputElement;
-  }(React.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.Children.only(children);
+      return /*#__PURE__*/React.cloneElement(onlyChild, _extends({}, inputProps, {
+        ref: refCallback
+      }));
+    }
+    return /*#__PURE__*/React.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();
@@ -10122,7 +10341,7 @@ var t = function t(_t) {
         return !!e && (e.clientHeight < t.scrollHeight || e.clientWidth < t.scrollWidth);
       }(t);
     }
-    return !1;
+    return false;
   },
   o$1 = function o(t, e, n, _o2, l, r, i, s) {
     return r < t && i > e || r > t && i < e ? 0 : r <= t && s <= n || i >= e && s >= n ? r - t - _o2 : i > e && s < n || r < t && s > n ? i - e + l : 0;
@@ -10184,41 +10403,41 @@ var t = function t(_t) {
     for (var _t2 = 0; _t2 < w.length; _t2++) {
       var _e2 = w[_t2],
         _e$getBoundingClientR2 = _e2.getBoundingClientRect(),
-        _n2 = _e$getBoundingClientR2.height,
-        _l = _e$getBoundingClientR2.width,
-        _r = _e$getBoundingClientR2.top,
-        _i = _e$getBoundingClientR2.right,
-        _s = _e$getBoundingClientR2.bottom,
-        _d = _e$getBoundingClientR2.left;
-      if ("if-needed" === c && x >= 0 && R >= 0 && I <= H && C <= b && x >= _r && I <= _s && R >= _d && C <= _i) return L;
-      var _h = getComputedStyle(_e2),
-        _a = parseInt(_h.borderLeftWidth, 10),
-        _g = parseInt(_h.borderTopWidth, 10),
-        _p = parseInt(_h.borderRightWidth, 10),
-        _W = parseInt(_h.borderBottomWidth, 10);
-      var _T = 0,
-        _B = 0;
-      var _F = "offsetWidth" in _e2 ? _e2.offsetWidth - _e2.clientWidth - _a - _p : 0,
-        _V = "offsetHeight" in _e2 ? _e2.offsetHeight - _e2.clientHeight - _g - _W : 0,
-        S = "offsetWidth" in _e2 ? 0 === _e2.offsetWidth ? 0 : _l / _e2.offsetWidth : 0,
-        X = "offsetHeight" in _e2 ? 0 === _e2.offsetHeight ? 0 : _n2 / _e2.offsetHeight : 0;
-      if (m === _e2) _T = "start" === f ? k : "end" === f ? k - H : "nearest" === f ? o$1(M, M + H, H, _g, _W, M + k, M + k + v, v) : k - H / 2, _B = "start" === u ? D : "center" === u ? D - b / 2 : "end" === u ? D - b : o$1(y, y + b, b, _a, _p, y + D, y + D + E, E), _T = Math.max(0, _T + M), _B = Math.max(0, _B + y);else {
-        _T = "start" === f ? k - _r - _g : "end" === f ? k - _s + _W + _V : "nearest" === f ? o$1(_r, _s, _n2, _g, _W + _V, k, k + v, v) : k - (_r + _n2 / 2) + _V / 2, _B = "start" === u ? D - _d - _a : "center" === u ? D - (_d + _l / 2) + _F / 2 : "end" === u ? D - _i + _p + _F : o$1(_d, _i, _l, _a, _p + _F, D, D + E, E);
+        _l = _e$getBoundingClientR2.height,
+        _r = _e$getBoundingClientR2.width,
+        _i = _e$getBoundingClientR2.top,
+        _s = _e$getBoundingClientR2.right,
+        _d = _e$getBoundingClientR2.bottom,
+        _h = _e$getBoundingClientR2.left;
+      if ("if-needed" === c && x >= 0 && R >= 0 && I <= H && C <= b && (_e2 === m && !n(_e2) || x >= _i && I <= _d && R >= _h && C <= _s)) return L;
+      var _a = getComputedStyle(_e2),
+        _g = parseInt(_a.borderLeftWidth, 10),
+        _p = parseInt(_a.borderTopWidth, 10),
+        _W = parseInt(_a.borderRightWidth, 10),
+        _T = parseInt(_a.borderBottomWidth, 10);
+      var _B = 0,
+        _F = 0;
+      var _V = "offsetWidth" in _e2 ? _e2.offsetWidth - _e2.clientWidth - _g - _W : 0,
+        S = "offsetHeight" in _e2 ? _e2.offsetHeight - _e2.clientHeight - _p - _T : 0,
+        X = "offsetWidth" in _e2 ? 0 === _e2.offsetWidth ? 0 : _r / _e2.offsetWidth : 0,
+        Y = "offsetHeight" in _e2 ? 0 === _e2.offsetHeight ? 0 : _l / _e2.offsetHeight : 0;
+      if (m === _e2) _B = "start" === f ? k : "end" === f ? k - H : "nearest" === f ? o$1(M, M + H, H, _p, _T, M + k, M + k + v, v) : k - H / 2, _F = "start" === u ? D : "center" === u ? D - b / 2 : "end" === u ? D - b : o$1(y, y + b, b, _g, _W, y + D, y + D + E, E), _B = Math.max(0, _B + M), _F = Math.max(0, _F + y);else {
+        _B = "start" === f ? k - _i - _p : "end" === f ? k - _d + _T + S : "nearest" === f ? o$1(_i, _d, _l, _p, _T + S, k, k + v, v) : k - (_i + _l / 2) + S / 2, _F = "start" === u ? D - _h - _g : "center" === u ? D - (_h + _r / 2) + _V / 2 : "end" === u ? D - _s + _W + _V : o$1(_h, _s, _r, _g, _W + _V, D, D + E, E);
         var _t3 = _e2.scrollLeft,
-          _h2 = _e2.scrollTop;
-        _T = 0 === X ? 0 : Math.max(0, Math.min(_h2 + _T / X, _e2.scrollHeight - _n2 / X + _V)), _B = 0 === S ? 0 : Math.max(0, Math.min(_t3 + _B / S, _e2.scrollWidth - _l / S + _F)), k += _h2 - _T, D += _t3 - _B;
+          _n2 = _e2.scrollTop;
+        _B = 0 === Y ? 0 : Math.max(0, Math.min(_n2 + _B / Y, _e2.scrollHeight - _l / Y + S)), _F = 0 === X ? 0 : Math.max(0, Math.min(_t3 + _F / X, _e2.scrollWidth - _r / X + _V)), k += _n2 - _B, D += _t3 - _F;
       }
       L.push({
         el: _e2,
-        top: _T,
-        left: _B
+        top: _B,
+        left: _F
       });
     }
     return L;
   };
 
 var o = function o(t) {
-  return !1 === t ? {
+  return false === t ? {
     block: "end",
     inline: "nearest"
   } : function (t) {
@@ -10232,10 +10451,10 @@ function e(e, r$1) {
   if (!e.isConnected || !function (t) {
     var o = t;
     for (; o && o.parentNode;) {
-      if (o.parentNode === document) return !0;
+      if (o.parentNode === document) return true;
       o = o.parentNode instanceof ShadowRoot ? o.parentNode.host : o.parentNode;
     }
-    return !1;
+    return false;
   }(e)) return;
   var n = function (t) {
     var o = window.getComputedStyle(t);
@@ -10880,15 +11099,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__default.createElement(CreditCardNumberInputField, _extends$1({}, rest, inputProps));
-  };
   return /*#__PURE__*/React__default.createElement(InputMask, {
     mask: mask,
-    maskChar: maskChar,
+    maskPlaceholder: maskChar,
     alwaysShowMask: alwaysShowMask,
     disabled: disabled,
     readOnly: readOnly,
@@ -10897,7 +11110,7 @@ var CreditCardNumberInput = function CreditCardNumberInput(_ref) {
     onMouseDown: onMouseDown,
     onFocus: onFocus,
     onBlur: onBlur
-  }, renderInputField);
+  }, /*#__PURE__*/React__default.createElement(CreditCardNumberInputField, rest));
 };
 
 var _excluded$e = ["term", "children", "className"];
@@ -11737,11 +11950,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;
   useEffect(function () {
@@ -11756,11 +11964,14 @@ var usePreventNavigation = function usePreventNavigation() {
 
 var NavigationPreventer = function NavigationPreventer(_ref) {
   var _ref$enabled = _ref.enabled,
-    enabled = _ref$enabled === void 0 ? false : _ref$enabled;
+    enabled = _ref$enabled === void 0 ? false : _ref$enabled,
+    _ref$message = _ref.message,
+    message = _ref$message === void 0 ? 'Changes that you made may not be saved.' : _ref$message;
   usePreventNavigation(enabled);
-
-  // TODO: implement this with next.js https://github.com/vercel/next.js/discussions/32231
-  return null;
+  return /*#__PURE__*/React__default.createElement(Prompt, {
+    when: enabled,
+    message: message
+  });
 };
 
 var __assign$1 = undefined && undefined.__assign || function () {