@bonlineza/luxity-lib 2.7.5 → 2.9.1

package/PriceRangeSelector.js

@@ -1,31 +1,14 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('@bonlineza/b-lib/functions'), require('rc-slider'), require('styled-components'), require('text-mask-all/addons/dist/createNumberMask'), require('text-mask-all/react/dist/reactTextMask')) :
-  typeof define === 'function' && define.amd ? define(['react', '@bonlineza/b-lib/functions', 'rc-slider', 'styled-components', 'text-mask-all/addons/dist/createNumberMask', 'text-mask-all/react/dist/reactTextMask'], factory) :
-  (global = global || self, global.PriceRangeSelector = factory(global.React, global.function, global.rcSlider, global.styled, global.createNumberMask, global.MaskedInput));
-}(this, (function (React, functions, rcSlider, styled, createNumberMask, MaskedInput) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('@bonlineza/b-lib/functions'), require('rc-slider'), require('styled-components')) :
+  typeof define === 'function' && define.amd ? define(['react', '@bonlineza/b-lib/functions', 'rc-slider', 'styled-components'], factory) :
+  (global = global || self, global.PriceRangeSelector = factory(global.React, global.function, global.rcSlider, global.styled));
+}(this, (function (React, functions, rcSlider, styled) { 'use strict';
 
   var React__default = 'default' in React ? React['default'] : React;
   var styled__default = 'default' in styled ? styled['default'] : styled;
-  createNumberMask = createNumberMask && Object.prototype.hasOwnProperty.call(createNumberMask, 'default') ? createNumberMask['default'] : createNumberMask;
-  MaskedInput = MaskedInput && Object.prototype.hasOwnProperty.call(MaskedInput, 'default') ? MaskedInput['default'] : MaskedInput;
-
-  function _defineProperty(obj, key, value) {
-    if (key in obj) {
-      Object.defineProperty(obj, key, {
-        value: value,
-        enumerable: true,
-        configurable: true,
-        writable: true
-      });
-    } else {
-      obj[key] = value;
-    }
-
-    return obj;
-  }
 
   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];
 
@@ -38,44 +21,9 @@
 
       return target;
     };
-
     return _extends.apply(this, arguments);
   }
 
-  function ownKeys(object, enumerableOnly) {
-    var keys = Object.keys(object);
-
-    if (Object.getOwnPropertySymbols) {
-      var symbols = Object.getOwnPropertySymbols(object);
-      if (enumerableOnly) symbols = symbols.filter(function (sym) {
-        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-      });
-      keys.push.apply(keys, symbols);
-    }
-
-    return keys;
-  }
-
-  function _objectSpread2(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i] != null ? arguments[i] : {};
-
-      if (i % 2) {
-        ownKeys(Object(source), true).forEach(function (key) {
-          _defineProperty(target, key, source[key]);
-        });
-      } else if (Object.getOwnPropertyDescriptors) {
-        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-      } else {
-        ownKeys(Object(source)).forEach(function (key) {
-          Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-        });
-      }
-    }
-
-    return target;
-  }
-
   function _objectWithoutPropertiesLoose(source, excluded) {
     if (source == null) return {};
     var target = {};
@@ -133,14 +81,17 @@
   }
 
   function _iterableToArrayLimit(arr, i) {
-    if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+
+    if (_i == null) return;
     var _arr = [];
     var _n = true;
     var _d = false;
-    var _e = undefined;
+
+    var _s, _e;
 
     try {
-      for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+      for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
         _arr.push(_s.value);
 
         if (i && _arr.length === i) break;
@@ -201,17 +152,17 @@
   };
 
   var themed = (function (Component) {
-    return React.forwardRef(function (props, ref) {
-      return React__default.createElement(styled.ThemeProvider, {
+    return /*#__PURE__*/React.forwardRef(function (props, ref) {
+      return /*#__PURE__*/React__default.createElement(styled.ThemeProvider, {
         theme: theme
-      }, React__default.createElement(Component, _extends({}, props, {
+      }, /*#__PURE__*/React__default.createElement(Component, _extends({}, props, {
         ref: ref
       })));
     });
   });
 
   function _extends$1() {
-    _extends$1 = Object.assign || function (target) {
+    _extends$1 = Object.assign ? Object.assign.bind() : function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
 
@@ -224,7 +175,6 @@
 
       return target;
     };
-
     return _extends$1.apply(this, arguments);
   }
 
@@ -236,28 +186,27 @@
     return self;
   }
 
+  function _setPrototypeOf(o, p) {
+    _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
+      o.__proto__ = p;
+      return o;
+    };
+    return _setPrototypeOf(o, p);
+  }
+
   function _inheritsLoose(subClass, superClass) {
     subClass.prototype = Object.create(superClass.prototype);
     subClass.prototype.constructor = subClass;
-    subClass.__proto__ = superClass;
+    _setPrototypeOf(subClass, superClass);
   }
 
   function _getPrototypeOf(o) {
-    _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+    _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) {
       return o.__proto__ || Object.getPrototypeOf(o);
     };
     return _getPrototypeOf(o);
   }
 
-  function _setPrototypeOf(o, p) {
-    _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
-      o.__proto__ = p;
-      return o;
-    };
-
-    return _setPrototypeOf(o, p);
-  }
-
   function _isNativeFunction(fn) {
     return Function.toString.call(fn).indexOf("[native code]") !== -1;
   }
@@ -268,7 +217,7 @@
     if (typeof Proxy === "function") return true;
 
     try {
-      Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
+      Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
       return true;
     } catch (e) {
       return false;
@@ -277,7 +226,7 @@
 
   function _construct(Parent, args, Class) {
     if (_isNativeReflectConstruct()) {
-      _construct = Reflect.construct;
+      _construct = Reflect.construct.bind();
     } else {
       _construct = function _construct(Parent, args, Class) {
         var a = [null];
@@ -406,7 +355,8 @@
     "71": "Passed invalid pixel value %s to %s(), please pass a value like \"12px\" or 12.\n\n",
     "72": "Passed invalid base value %s to %s(), please pass a value like \"12px\" or 12.\n\n",
     "73": "Please provide a valid CSS variable.\n\n",
-    "74": "CSS variable not found.\n"
+    "74": "CSS variable not found.\n\n",
+    "75": "fromSize and toSize must be provided as stringified numbers with the same units as minScreen and maxScreen.\n"
   };
   /**
    * super basic version of sprintf
@@ -445,7 +395,7 @@
       var _this;
 
       if (process.env.NODE_ENV === 'production') {
-        _this = _Error.call(this, "An error occurred. See https://github.com/styled-components/polished/blob/master/src/internalHelpers/errors.md#" + code + " for more information.") || this;
+        _this = _Error.call(this, "An error occurred. See https://github.com/styled-components/polished/blob/main/src/internalHelpers/errors.md#" + code + " for more information.") || this;
       } else {
         for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
           args[_key2 - 1] = arguments[_key2];
@@ -748,7 +698,7 @@
       };
     }
 
-    var rgbaMatched = rgbaRegex.exec(normalizedColor);
+    var rgbaMatched = rgbaRegex.exec(normalizedColor.substring(0, 50));
 
     if (rgbaMatched) {
       return {
@@ -779,7 +729,7 @@
       };
     }
 
-    var hslaMatched = hslaRegex.exec(normalizedColor);
+    var hslaMatched = hslaRegex.exec(normalizedColor.substring(0, 50));
 
     if (hslaMatched) {
       var _hue = parseInt("" + hslaMatched[1], 10);
@@ -960,7 +910,7 @@
     var alpha = typeof parsedColor.alpha === 'number' ? parsedColor.alpha : 1;
 
     var colorWithAlpha = _extends$1({}, parsedColor, {
-      alpha: guard(0, 1, (alpha * 100 - parseFloat(amount) * 100) / 100)
+      alpha: guard(0, 1, +(alpha * 100 - parseFloat(amount) * 100).toFixed(2) / 100)
     });
 
     return rgba(colorWithAlpha);
@@ -971,58 +921,12 @@
   /* ::<number | string, string, string> */
   (transparentize);
 
-  function _templateObject() {
-    var data = _taggedTemplateLiteral(["\n  .rc-slider {\n    position: relative;\n    height: 14px;\n    padding: 5px 0;\n    width: 100%;\n    border-radius: 6px;\n    touch-action: none;\n    box-sizing: border-box;\n  }\n  .rc-slider * {\n    box-sizing: border-box;\n  }\n  .rc-slider-rail {\n    position: absolute;\n    width: 100%;\n    background-color: #e9e9e9;\n    height: 4px;\n    border-radius: 6px;\n  }\n  .rc-slider-track {\n    position: absolute;\n    left: 0;\n    height: 4px;\n    border-radius: 6px;\n    background-color: #abe2fb;\n  }\n  .rc-slider-handle {\n    position: absolute;\n    width: 14px;\n    height: 14px;\n    cursor: pointer;\n    margin-top: -5px;\n    border-radius: 50%;\n    border: solid 2px #96dbfa;\n    background-color: #fff;\n    -ms-touch-action: pan-x;\n    touch-action: pan-x;\n  }\n  .rc-slider-handle:focus {\n    border-color: #57c5f7;\n    box-shadow: 0 0 0 5px #96dbfa;\n    outline: none;\n  }\n  .rc-slider-handle-click-focused:focus {\n    border-color: #96dbfa;\n    box-shadow: unset;\n  }\n  .rc-slider-handle:hover {\n    border-color: #57c5f7;\n  }\n  .rc-slider-handle:active {\n    border-color: #57c5f7;\n    box-shadow: 0 0 5px #57c5f7;\n    cursor: grabbing;\n  }\n  .rc-slider-mark {\n    position: absolute;\n    top: 18px;\n    left: 0;\n    width: 100%;\n    font-size: 12px;\n  }\n  .rc-slider-mark-text {\n    position: absolute;\n    display: inline-block;\n    vertical-align: middle;\n    text-align: center;\n    cursor: pointer;\n    color: #999;\n  }\n  .rc-slider-mark-text-active {\n    color: #666;\n  }\n  .rc-slider-step {\n    position: absolute;\n    width: 100%;\n    height: 4px;\n    background: transparent;\n  }\n  .rc-slider-dot {\n    position: absolute;\n    bottom: -2px;\n    margin-left: -4px;\n    width: 8px;\n    height: 8px;\n    border: 2px solid #e9e9e9;\n    background-color: #fff;\n    cursor: pointer;\n    border-radius: 50%;\n    vertical-align: middle;\n  }\n  .rc-slider-dot-active {\n    border-color: #96dbfa;\n  }\n  .rc-slider-dot-reverse {\n    margin-left: 0;\n    margin-right: -4px;\n  }\n  .rc-slider-disabled {\n    background-color: #e9e9e9;\n  }\n  .rc-slider-disabled .rc-slider-track {\n    background-color: #ccc;\n  }\n  .rc-slider-disabled .rc-slider-handle,\n  .rc-slider-disabled .rc-slider-dot {\n    border-color: #ccc;\n    box-shadow: none;\n    background-color: #fff;\n    cursor: not-allowed;\n  }\n  .rc-slider-disabled .rc-slider-mark-text,\n  .rc-slider-disabled .rc-slider-dot {\n    cursor: not-allowed !important;\n  }\n  .rc-slider-vertical {\n    width: 14px;\n    height: 100%;\n    padding: 0 5px;\n  }\n  .rc-slider-vertical .rc-slider-rail {\n    height: 100%;\n    width: 4px;\n  }\n  .rc-slider-vertical .rc-slider-track {\n    left: 5px;\n    bottom: 0;\n    width: 4px;\n  }\n  .rc-slider-vertical .rc-slider-handle {\n    margin-left: -5px;\n    -ms-touch-action: pan-y;\n    touch-action: pan-y;\n  }\n  .rc-slider-vertical .rc-slider-mark {\n    top: 0;\n    left: 18px;\n    height: 100%;\n  }\n  .rc-slider-vertical .rc-slider-step {\n    height: 100%;\n    width: 4px;\n  }\n  .rc-slider-vertical .rc-slider-dot {\n    left: 2px;\n    margin-bottom: -4px;\n  }\n  .rc-slider-vertical .rc-slider-dot:first-child {\n    margin-bottom: -4px;\n  }\n  .rc-slider-vertical .rc-slider-dot:last-child {\n    margin-bottom: -4px;\n  }\n  .rc-slider-tooltip-zoom-down-enter,\n  .rc-slider-tooltip-zoom-down-appear {\n    animation-duration: 0.3s;\n    animation-fill-mode: both;\n    display: block !important;\n    animation-play-state: paused;\n  }\n  .rc-slider-tooltip-zoom-down-leave {\n    animation-duration: 0.3s;\n    animation-fill-mode: both;\n    display: block !important;\n    animation-play-state: paused;\n  }\n  .rc-slider-tooltip-zoom-down-enter.rc-slider-tooltip-zoom-down-enter-active,\n  .rc-slider-tooltip-zoom-down-appear.rc-slider-tooltip-zoom-down-appear-active {\n    animation-name: rcSliderTooltipZoomDownIn;\n    animation-play-state: running;\n  }\n  .rc-slider-tooltip-zoom-down-leave.rc-slider-tooltip-zoom-down-leave-active {\n    animation-name: rcSliderTooltipZoomDownOut;\n    animation-play-state: running;\n  }\n  .rc-slider-tooltip-zoom-down-enter,\n  .rc-slider-tooltip-zoom-down-appear {\n    transform: scale(0, 0);\n    animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);\n  }\n  .rc-slider-tooltip-zoom-down-leave {\n    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);\n  }\n  @keyframes rcSliderTooltipZoomDownIn {\n    0% {\n      opacity: 0;\n      transform-origin: 50% 100%;\n      transform: scale(0, 0);\n    }\n    100% {\n      transform-origin: 50% 100%;\n      transform: scale(1, 1);\n    }\n  }\n  @keyframes rcSliderTooltipZoomDownOut {\n    0% {\n      transform-origin: 50% 100%;\n      transform: scale(1, 1);\n    }\n    100% {\n      opacity: 0;\n      transform-origin: 50% 100%;\n      transform: scale(0, 0);\n    }\n  }\n  .rc-slider-tooltip {\n    position: absolute;\n    left: -9999px;\n    top: -9999px;\n    visibility: visible;\n    box-sizing: border-box;\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n  }\n  .rc-slider-tooltip * {\n    box-sizing: border-box;\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n  }\n  .rc-slider-tooltip-hidden {\n    display: none;\n  }\n  .rc-slider-tooltip-placement-top {\n    padding: 4px 0 8px 0;\n  }\n  .rc-slider-tooltip-inner {\n    padding: 6px 2px;\n    min-width: 24px;\n    height: 24px;\n    font-size: 12px;\n    line-height: 1;\n    color: #fff;\n    text-align: center;\n    text-decoration: none;\n    background-color: #6c6c6c;\n    border-radius: 6px;\n    box-shadow: 0 0 4px #d9d9d9;\n  }\n  .rc-slider-tooltip-arrow {\n    position: absolute;\n    width: 0;\n    height: 0;\n    border-color: transparent;\n    border-style: solid;\n  }\n  .rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow {\n    bottom: 4px;\n    left: 50%;\n    margin-left: -4px;\n    border-width: 4px 4px 0;\n    border-top-color: #6c6c6c;\n  }\n"]);
-
-    _templateObject = function _templateObject() {
-      return data;
-    };
-
-    return data;
-  }
-  var baseSliderStyles = styled.css(_templateObject());
-
-  function _templateObject4() {
-    var data = _taggedTemplateLiteral(["\n    .rc-slider-mark-text {\n      color: ", ";\n    }\n\n    .rc-slider-dot {\n      border-color: ", ";\n      background-color: white;\n    }\n    ", "\n  "]);
-
-    _templateObject4 = function _templateObject4() {
-      return data;
-    };
-
-    return data;
-  }
-
-  function _templateObject3() {
-    var data = _taggedTemplateLiteral(["\n        .rc-slider-mark-text,\n        .rc-slider-dot {\n          visibility: hidden;\n        }\n      "]);
-
-    _templateObject3 = function _templateObject3() {
-      return data;
-    };
+  var _templateObject;
+  var baseSliderStyles = styled.css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .rc-slider {\n    position: relative;\n    height: 14px;\n    padding: 5px 0;\n    width: 100%;\n    border-radius: 6px;\n    touch-action: none;\n    box-sizing: border-box;\n  }\n  .rc-slider * {\n    box-sizing: border-box;\n  }\n  .rc-slider-rail {\n    position: absolute;\n    width: 100%;\n    background-color: #e9e9e9;\n    height: 4px;\n    border-radius: 6px;\n  }\n  .rc-slider-track {\n    position: absolute;\n    left: 0;\n    height: 4px;\n    border-radius: 6px;\n    background-color: #abe2fb;\n  }\n  .rc-slider-handle {\n    position: absolute;\n    width: 14px;\n    height: 14px;\n    cursor: pointer;\n    margin-top: -5px;\n    border-radius: 50%;\n    border: solid 2px #96dbfa;\n    background-color: #fff;\n    -ms-touch-action: pan-x;\n    touch-action: pan-x;\n  }\n  .rc-slider-handle:focus {\n    border-color: #57c5f7;\n    box-shadow: 0 0 0 5px #96dbfa;\n    outline: none;\n  }\n  .rc-slider-handle-click-focused:focus {\n    border-color: #96dbfa;\n    box-shadow: unset;\n  }\n  .rc-slider-handle:hover {\n    border-color: #57c5f7;\n  }\n  .rc-slider-handle:active {\n    border-color: #57c5f7;\n    box-shadow: 0 0 5px #57c5f7;\n    cursor: grabbing;\n  }\n  .rc-slider-mark {\n    position: absolute;\n    top: 18px;\n    left: 0;\n    width: 100%;\n    font-size: 12px;\n  }\n  .rc-slider-mark-text {\n    position: absolute;\n    display: inline-block;\n    vertical-align: middle;\n    text-align: center;\n    cursor: pointer;\n    color: #999;\n  }\n  .rc-slider-mark-text-active {\n    color: #666;\n  }\n  .rc-slider-step {\n    position: absolute;\n    width: 100%;\n    height: 4px;\n    background: transparent;\n  }\n  .rc-slider-dot {\n    position: absolute;\n    bottom: -2px;\n    margin-left: -4px;\n    width: 8px;\n    height: 8px;\n    border: 2px solid #e9e9e9;\n    background-color: #fff;\n    cursor: pointer;\n    border-radius: 50%;\n    vertical-align: middle;\n  }\n  .rc-slider-dot-active {\n    border-color: #96dbfa;\n  }\n  .rc-slider-dot-reverse {\n    margin-left: 0;\n    margin-right: -4px;\n  }\n  .rc-slider-disabled {\n    background-color: #e9e9e9;\n  }\n  .rc-slider-disabled .rc-slider-track {\n    background-color: #ccc;\n  }\n  .rc-slider-disabled .rc-slider-handle,\n  .rc-slider-disabled .rc-slider-dot {\n    border-color: #ccc;\n    box-shadow: none;\n    background-color: #fff;\n    cursor: not-allowed;\n  }\n  .rc-slider-disabled .rc-slider-mark-text,\n  .rc-slider-disabled .rc-slider-dot {\n    cursor: not-allowed !important;\n  }\n  .rc-slider-vertical {\n    width: 14px;\n    height: 100%;\n    padding: 0 5px;\n  }\n  .rc-slider-vertical .rc-slider-rail {\n    height: 100%;\n    width: 4px;\n  }\n  .rc-slider-vertical .rc-slider-track {\n    left: 5px;\n    bottom: 0;\n    width: 4px;\n  }\n  .rc-slider-vertical .rc-slider-handle {\n    margin-left: -5px;\n    -ms-touch-action: pan-y;\n    touch-action: pan-y;\n  }\n  .rc-slider-vertical .rc-slider-mark {\n    top: 0;\n    left: 18px;\n    height: 100%;\n  }\n  .rc-slider-vertical .rc-slider-step {\n    height: 100%;\n    width: 4px;\n  }\n  .rc-slider-vertical .rc-slider-dot {\n    left: 2px;\n    margin-bottom: -4px;\n  }\n  .rc-slider-vertical .rc-slider-dot:first-child {\n    margin-bottom: -4px;\n  }\n  .rc-slider-vertical .rc-slider-dot:last-child {\n    margin-bottom: -4px;\n  }\n  .rc-slider-tooltip-zoom-down-enter,\n  .rc-slider-tooltip-zoom-down-appear {\n    animation-duration: 0.3s;\n    animation-fill-mode: both;\n    display: block !important;\n    animation-play-state: paused;\n  }\n  .rc-slider-tooltip-zoom-down-leave {\n    animation-duration: 0.3s;\n    animation-fill-mode: both;\n    display: block !important;\n    animation-play-state: paused;\n  }\n  .rc-slider-tooltip-zoom-down-enter.rc-slider-tooltip-zoom-down-enter-active,\n  .rc-slider-tooltip-zoom-down-appear.rc-slider-tooltip-zoom-down-appear-active {\n    animation-name: rcSliderTooltipZoomDownIn;\n    animation-play-state: running;\n  }\n  .rc-slider-tooltip-zoom-down-leave.rc-slider-tooltip-zoom-down-leave-active {\n    animation-name: rcSliderTooltipZoomDownOut;\n    animation-play-state: running;\n  }\n  .rc-slider-tooltip-zoom-down-enter,\n  .rc-slider-tooltip-zoom-down-appear {\n    transform: scale(0, 0);\n    animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);\n  }\n  .rc-slider-tooltip-zoom-down-leave {\n    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);\n  }\n  @keyframes rcSliderTooltipZoomDownIn {\n    0% {\n      opacity: 0;\n      transform-origin: 50% 100%;\n      transform: scale(0, 0);\n    }\n    100% {\n      transform-origin: 50% 100%;\n      transform: scale(1, 1);\n    }\n  }\n  @keyframes rcSliderTooltipZoomDownOut {\n    0% {\n      transform-origin: 50% 100%;\n      transform: scale(1, 1);\n    }\n    100% {\n      opacity: 0;\n      transform-origin: 50% 100%;\n      transform: scale(0, 0);\n    }\n  }\n  .rc-slider-tooltip {\n    position: absolute;\n    left: -9999px;\n    top: -9999px;\n    visibility: visible;\n    box-sizing: border-box;\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n  }\n  .rc-slider-tooltip * {\n    box-sizing: border-box;\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n  }\n  .rc-slider-tooltip-hidden {\n    display: none;\n  }\n  .rc-slider-tooltip-placement-top {\n    padding: 4px 0 8px 0;\n  }\n  .rc-slider-tooltip-inner {\n    padding: 6px 2px;\n    min-width: 24px;\n    height: 24px;\n    font-size: 12px;\n    line-height: 1;\n    color: #fff;\n    text-align: center;\n    text-decoration: none;\n    background-color: #6c6c6c;\n    border-radius: 6px;\n    box-shadow: 0 0 4px #d9d9d9;\n  }\n  .rc-slider-tooltip-arrow {\n    position: absolute;\n    width: 0;\n    height: 0;\n    border-color: transparent;\n    border-style: solid;\n  }\n  .rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow {\n    bottom: 4px;\n    left: 50%;\n    margin-left: -4px;\n    border-width: 4px 4px 0;\n    border-top-color: #6c6c6c;\n  }\n"])));
 
-    return data;
-  }
-
-  function _templateObject2() {
-    var data = _taggedTemplateLiteral([""]);
-
-    _templateObject2 = function _templateObject2() {
-      return data;
-    };
-
-    return data;
-  }
-
-  function _templateObject$1() {
-    var data = _taggedTemplateLiteral(["\n  ", ";\n  position: relative;\n  .rc-slider-handle {\n    background-color: ", ";\n    border-color: ", ";\n  }\n\n  .rc-slider {\n    margin-bottom: ", ";\n    max-width: calc(100% - ", ");\n    margin-left: auto;\n    margin-right: auto;\n  }\n  .rc-slider-track {\n    background-color: ", ";\n  }\n\n  .rc-slider-handle {\n    height: ", ";\n    width: ", ";\n    transition: border-color 0.5s ease-in-out, box-shadow 0.5s ease-in-out;\n    &:hover,\n    &:focus {\n      border: ", ";\n      box-shadow: 0 0 0 5px\n        ", ";\n    }\n  }\n  ", "\n"]);
-
-    _templateObject$1 = function _templateObject() {
-      return data;
-    };
-
-    return data;
-  }
+  var _templateObject$1, _templateObject2, _templateObject3, _templateObject4;
   var handleDimension = '14px';
-  var SliderContainer = styled__default.div(_templateObject$1(), baseSliderStyles, function (props) {
+  var SliderContainer = styled__default.div(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n  ", ";\n  position: relative;\n  .rc-slider-handle {\n    background-color: ", ";\n    border-color: ", ";\n  }\n\n  .rc-slider {\n    margin-bottom: ", ";\n    max-width: calc(100% - ", ");\n    margin-left: auto;\n    margin-right: auto;\n  }\n  .rc-slider-track {\n    background-color: ", ";\n  }\n\n  .rc-slider-handle {\n    height: ", ";\n    width: ", ";\n    transition: border-color 0.5s ease-in-out, box-shadow 0.5s ease-in-out;\n    &:hover,\n    &:focus {\n      border: ", ";\n      box-shadow: 0 0 0 5px\n        ", ";\n    }\n  }\n  ", "\n"])), baseSliderStyles, function (props) {
     return props.theme.colors.primary;
   }, function (props) {
     return props.theme.colors.primary;
@@ -1041,43 +945,22 @@
   var getSliderMarkStyle = function getSliderMarkStyle(_ref) {
     var showMarks = _ref.showMarks,
         primary = _ref.theme.colors.primary;
-    var visiblityStyle = showMarks ? styled.css(_templateObject2()) : styled.css(_templateObject3());
-    return styled.css(_templateObject4(), primary, primary, visiblityStyle);
+    var visiblityStyle = showMarks ? styled.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([""]))) : styled.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        .rc-slider-mark-text,\n        .rc-slider-dot {\n          visibility: hidden;\n        }\n      "])));
+    return styled.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    .rc-slider-mark-text {\n      color: ", ";\n    }\n\n    .rc-slider-dot {\n      border-color: ", ";\n      background-color: white;\n    }\n    ", "\n  "])), primary, primary, visiblityStyle);
   };
 
-  function _templateObject$2() {
-    var data = _taggedTemplateLiteral(["\n  position: absolute;\n  right: auto;\n  top: 20px;\n  transform: translateX(-50%);\n  width: 100px;\n  text-align: center;\n"]);
-
-    _templateObject$2 = function _templateObject() {
-      return data;
-    };
-
-    return data;
-  }
-  var ToolTipWrapper = styled__default.div(_templateObject$2());
+  var _templateObject$2;
+  var ToolTipWrapper = styled__default.div(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  position: absolute;\n  right: auto;\n  top: 20px;\n  transform: translateX(-50%);\n  width: 100px;\n  text-align: center;\n"])));
 
-  function _templateObject$3() {
-    var data = _taggedTemplateLiteral(["\n  display: flex;\n  flex-flow: row nowrap;\n  justify-content: flex-end;\n"]);
+  var _templateObject$3;
+  var Footer = styled__default.div(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-flow: row nowrap;\n  justify-content: flex-end;\n"])));
 
-    _templateObject$3 = function _templateObject() {
-      return data;
-    };
+  var _excluded = ["dragging", "value", "offset", "index"],
+      _excluded2 = ["renderTitleSection", "marks", "defaultMinValue", "defaultMaxValue", "min", "max", "toolTipComponent", "renderFooterSection", "onChange", "children", "identifier", "showMarks"];
 
-    return data;
-  }
-  var Footer = styled__default.div(_templateObject$3());
-
-  function _templateObject$4() {
-    var data = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n"]);
-
-    _templateObject$4 = function _templateObject() {
-      return data;
-    };
-
-    return data;
-  }
+  var _templateObject$4;
   var debounceBuilder = functions.debounced(100);
-  var ChildrenWrapper = styled__default.div(_templateObject$4(), function (props) {
+  var ChildrenWrapper = styled__default.div(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n"])), function (props) {
     return props.theme.marginPaddings[3];
   });
 
@@ -1090,7 +973,7 @@
         value = handleProps.value,
         offset = handleProps.offset,
         index = handleProps.index,
-        restHandleProps = _objectWithoutProperties(handleProps, ["dragging", "value", "offset", "index"]);
+        restHandleProps = _objectWithoutProperties(handleProps, _excluded);
 
     var getToolTipProps = function getToolTipProps() {
       var newProps = {}; // Ensures that Tooltip component does not get ref prop
@@ -1104,18 +987,18 @@
     };
 
     var Tooltip = toolTipComponent;
-    return React__default.createElement(React.Fragment, {
+    return /*#__PURE__*/React__default.createElement(React.Fragment, {
       key: index
-    }, React__default.createElement(rcSlider.Handle, _extends({
+    }, /*#__PURE__*/React__default.createElement(rcSlider.Handle, _extends({
       offset: offset,
       value: value
     }, restHandleProps, {
       dragging: dragging.toString()
-    })), toolTipComponent && React__default.createElement(ToolTipWrapper, {
+    })), toolTipComponent && /*#__PURE__*/React__default.createElement(ToolTipWrapper, {
       style: {
         left: "".concat(offset, "%")
       }
-    }, React__default.createElement(Tooltip, _extends({
+    }, /*#__PURE__*/React__default.createElement(Tooltip, _extends({
       marks: marks
     }, getToolTipProps()))));
   };
@@ -1135,7 +1018,7 @@
         childRenderer = _ref.children,
         identifier = _ref.identifier,
         showMarks = _ref.showMarks,
-        restProps = _objectWithoutProperties(_ref, ["renderTitleSection", "marks", "defaultMinValue", "defaultMaxValue", "min", "max", "toolTipComponent", "renderFooterSection", "onChange", "children", "identifier", "showMarks"]);
+        restProps = _objectWithoutProperties(_ref, _excluded2);
 
     var _useState = React.useState(defaultMinValue),
         _useState2 = _slicedToArray(_useState, 2),
@@ -1168,15 +1051,12 @@
       setSeed(Date.now());
     };
 
-    var giveFullRange = React.useCallback(function () {
-      manuallyChangeMinValue(min);
-      manuallyChangeMaxValue(max);
-    }, [max, min]);
     var prevMinVal = functions.usePrevious(currMinVal);
     var prevMaxVal = functions.usePrevious(currMaxVal);
     React.useEffect(function () {
-      giveFullRange();
-    }, [min, max, giveFullRange]);
+      manuallyChangeMinValue(min);
+      manuallyChangeMaxValue(max);
+    }, [min, max]);
     React.useEffect(function () {
       if (prevMinVal !== currMinVal || prevMaxVal !== currMaxVal) {
         var value = {
@@ -1191,16 +1071,15 @@
     var actionsObj = {
       manuallyChangeMinValue: manuallyChangeMinValue,
       manuallyChangeMaxValue: manuallyChangeMaxValue,
-      giveFullRange: giveFullRange,
       currMinVal: currMinVal,
       currMaxVal: currMaxVal,
       defaultMinValue: defaultMinValue,
       defaultMaxValue: defaultMaxValue
     };
-    return React__default.createElement(SliderContainer, {
+    return /*#__PURE__*/React__default.createElement(SliderContainer, {
       "data-qe-id": identifier,
       showMarks: showMarks
-    }, renderTitleSection(actionsObj), childRenderer && React__default.createElement(ChildrenWrapper, null, typeof childRenderer === 'function' ? childRenderer(actionsObj) : childRenderer), React__default.createElement(rcSlider.Range, _extends({
+    }, renderTitleSection(actionsObj), childRenderer && /*#__PURE__*/React__default.createElement(ChildrenWrapper, null, typeof childRenderer === 'function' ? childRenderer(actionsObj) : childRenderer), /*#__PURE__*/React__default.createElement(rcSlider.Range, _extends({
       seed: seed,
       min: min,
       max: max,
@@ -1220,7 +1099,7 @@
         return renderCustomHandle(marks, toolTipComponent, props);
       },
       allowCross: false
-    }, restProps)), React__default.createElement(Footer, null, renderFooterSection(actionsObj)));
+    }, restProps)), /*#__PURE__*/React__default.createElement(Footer, null, renderFooterSection(actionsObj)));
   };
 
   RangeSlider.defaultProps = {
@@ -1240,75 +1119,618 @@
   };
   var RangeSlider$1 = themed(RangeSlider);
 
-  var defaultMaskOptions = {
-    prefix: 'R',
-    suffix: '',
-    includeThousandsSeparator: true,
-    thousandsSeparatorSymbol: ',',
-    allowDecimal: true,
-    decimalSymbol: '.',
-    decimalLimit: 2,
-    // how many digits allowed after the decimal
-    allowNegative: false,
-    allowLeadingZeroes: false
+  /*! *****************************************************************************
+  Copyright (c) Microsoft Corporation.
+
+  Permission to use, copy, modify, and/or distribute this software for any
+  purpose with or without fee is hereby granted.
+
+  THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+  REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+  AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+  INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+  LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+  PERFORMANCE OF THIS SOFTWARE.
+  ***************************************************************************** */
+
+  var __assign = function() {
+      __assign = Object.assign || function __assign(t) {
+          for (var s, i = 1, n = arguments.length; i < n; i++) {
+              s = arguments[i];
+              for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+          }
+          return t;
+      };
+      return __assign.apply(this, arguments);
+  };
+
+  function __rest(s, e) {
+      var t = {};
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+          t[p] = s[p];
+      if (s != null && typeof Object.getOwnPropertySymbols === "function")
+          for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+              if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                  t[p[i]] = s[p[i]];
+          }
+      return t;
+  }
+
+  function __spreadArray(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 || from);
+  }
+
+  /**
+   * Escape regex char
+   *
+   * See: https://stackoverflow.com/questions/17885855/use-dynamic-variable-string-as-regex-pattern-in-javascript
+   */
+  var escapeRegExp = function (stringToGoIntoTheRegex) {
+      return stringToGoIntoTheRegex.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
   };
-  var unMask = function unMask() {
-    var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-    return value.replace(/\D/g, '');
+
+  var abbrMap = { k: 1000, m: 1000000, b: 1000000000 };
+  /**
+   * Parse a value with abbreviation e.g 1k = 1000
+   */
+  var parseAbbrValue = function (value, decimalSeparator) {
+      if (decimalSeparator === void 0) { decimalSeparator = '.'; }
+      var reg = new RegExp("(\\d+(" + escapeRegExp(decimalSeparator) + "\\d*)?)([kmb])$", 'i');
+      var match = value.match(reg);
+      if (match) {
+          var digits = match[1], abbr = match[3];
+          var multiplier = abbrMap[abbr.toLowerCase()];
+          return Number(digits.replace(decimalSeparator, '.')) * multiplier;
+      }
+      return undefined;
   };
+
   /**
-   * Currency Input Masks text to specific format
+   * Remove group separator from value eg. 1,000 > 1000
    */
+  var removeSeparators = function (value, separator) {
+      if (separator === void 0) { separator = ','; }
+      var reg = new RegExp(escapeRegExp(separator), 'g');
+      return value.replace(reg, '');
+  };
 
-  var CurrencyInput = function CurrencyInput(_ref) {
-    var inputMode = _ref.inputMode,
-        maskOptions = _ref.maskOptions,
-        inputProps = _objectWithoutProperties(_ref, ["inputMode", "maskOptions"]);
+  /**
+   * Remove invalid characters
+   */
+  var removeInvalidChars = function (value, validChars) {
+      var chars = escapeRegExp(validChars.join(''));
+      var reg = new RegExp("[^\\d" + chars + "]", 'gi');
+      return value.replace(reg, '');
+  };
 
-    var currencyMask = createNumberMask(_objectSpread2(_objectSpread2({}, defaultMaskOptions), maskOptions));
-    return React__default.createElement(MaskedInput, _extends({}, inputProps, {
-      inputMode: inputMode,
-      mask: currencyMask
-    }));
+  /**
+   * Remove prefix, separators and extra decimals from value
+   */
+  var cleanValue = function (_a) {
+      var value = _a.value, _b = _a.groupSeparator, groupSeparator = _b === void 0 ? ',' : _b, _c = _a.decimalSeparator, decimalSeparator = _c === void 0 ? '.' : _c, _d = _a.allowDecimals, allowDecimals = _d === void 0 ? true : _d, _e = _a.decimalsLimit, decimalsLimit = _e === void 0 ? 2 : _e, _f = _a.allowNegativeValue, allowNegativeValue = _f === void 0 ? true : _f, _g = _a.disableAbbreviations, disableAbbreviations = _g === void 0 ? false : _g, _h = _a.prefix, prefix = _h === void 0 ? '' : _h, _j = _a.transformRawValue, transformRawValue = _j === void 0 ? function (rawValue) { return rawValue; } : _j;
+      var transformedValue = transformRawValue(value);
+      if (transformedValue === '-') {
+          return transformedValue;
+      }
+      var abbreviations = disableAbbreviations ? [] : ['k', 'm', 'b'];
+      var reg = new RegExp("((^|\\D)-\\d)|(-" + escapeRegExp(prefix) + ")");
+      var isNegative = reg.test(transformedValue);
+      // Is there a digit before the prefix? eg. 1$
+      var _k = RegExp("(\\d+)-?" + escapeRegExp(prefix)).exec(value) || [], prefixWithValue = _k[0], preValue = _k[1];
+      var withoutPrefix = prefix
+          ? prefixWithValue
+              ? transformedValue.replace(prefixWithValue, '').concat(preValue)
+              : transformedValue.replace(prefix, '')
+          : transformedValue;
+      var withoutSeparators = removeSeparators(withoutPrefix, groupSeparator);
+      var withoutInvalidChars = removeInvalidChars(withoutSeparators, __spreadArray([
+          groupSeparator,
+          decimalSeparator
+      ], abbreviations));
+      var valueOnly = withoutInvalidChars;
+      if (!disableAbbreviations) {
+          // disallow letter without number
+          if (abbreviations.some(function (letter) { return letter === withoutInvalidChars.toLowerCase(); })) {
+              return '';
+          }
+          var parsed = parseAbbrValue(withoutInvalidChars, decimalSeparator);
+          if (parsed) {
+              valueOnly = String(parsed);
+          }
+      }
+      var includeNegative = isNegative && allowNegativeValue ? '-' : '';
+      if (decimalSeparator && valueOnly.includes(decimalSeparator)) {
+          var _l = withoutInvalidChars.split(decimalSeparator), int = _l[0], decimals = _l[1];
+          var trimmedDecimals = decimalsLimit && decimals ? decimals.slice(0, decimalsLimit) : decimals;
+          var includeDecimals = allowDecimals ? "" + decimalSeparator + trimmedDecimals : '';
+          return "" + includeNegative + int + includeDecimals;
+      }
+      return "" + includeNegative + valueOnly;
   };
 
-  CurrencyInput.defaultProps = {
-    maskOptions: defaultMaskOptions,
-    inputMode: 'numeric'
+  var fixedDecimalValue = function (value, decimalSeparator, fixedDecimalLength) {
+      if (fixedDecimalLength && value.length > 1) {
+          if (value.includes(decimalSeparator)) {
+              var _a = value.split(decimalSeparator), int = _a[0], decimals = _a[1];
+              if (decimals.length > fixedDecimalLength) {
+                  return "" + int + decimalSeparator + decimals.slice(0, fixedDecimalLength);
+              }
+          }
+          var reg = value.length > fixedDecimalLength
+              ? new RegExp("(\\d+)(\\d{" + fixedDecimalLength + "})")
+              : new RegExp("(\\d)(\\d+)");
+          var match = value.match(reg);
+          if (match) {
+              var int = match[1], decimals = match[2];
+              return "" + int + decimalSeparator + decimals;
+          }
+      }
+      return value;
   };
 
-  function _templateObject2$1() {
-    var data = _taggedTemplateLiteral(["\n  padding: 1rem 3.5rem;\n  cursor: pointer;\n  letter-spacing: 1.3px;\n  border-style: none;\n  text-transform: uppercase;\n  font-size: 12px;\n  color: #fff;\n  transition: 0.2s ease-in-out;\n  outline: none;\n  min-width: 150px;\n"]);
+  var getSuffix = function (value, _a) {
+      var _b = _a.groupSeparator, groupSeparator = _b === void 0 ? ',' : _b, _c = _a.decimalSeparator, decimalSeparator = _c === void 0 ? '.' : _c;
+      var suffixReg = new RegExp("\\d([^" + escapeRegExp(groupSeparator) + escapeRegExp(decimalSeparator) + "0-9]+)");
+      var suffixMatch = value.match(suffixReg);
+      return suffixMatch ? suffixMatch[1] : undefined;
+  };
 
-    _templateObject2$1 = function _templateObject2() {
-      return data;
-    };
+  /**
+   * Format value with decimal separator, group separator and prefix
+   */
+  var formatValue = function (options) {
+      var _value = options.value, decimalSeparator = options.decimalSeparator, intlConfig = options.intlConfig, decimalScale = options.decimalScale, _a = options.prefix, prefix = _a === void 0 ? '' : _a, _b = options.suffix, suffix = _b === void 0 ? '' : _b;
+      if (_value === '' || _value === undefined) {
+          return '';
+      }
+      if (_value === '-') {
+          return '-';
+      }
+      var isNegative = new RegExp("^\\d?-" + (prefix ? escapeRegExp(prefix) + "?" : '') + "\\d").test(_value);
+      var value = decimalSeparator !== '.'
+          ? replaceDecimalSeparator(_value, decimalSeparator, isNegative)
+          : _value;
+      var numberFormatter = intlConfig
+          ? new Intl.NumberFormat(intlConfig.locale, intlConfig.currency
+              ? {
+                  style: 'currency',
+                  currency: intlConfig.currency,
+                  minimumFractionDigits: decimalScale || 0,
+                  maximumFractionDigits: 20,
+              }
+              : undefined)
+          : new Intl.NumberFormat(undefined, {
+              minimumFractionDigits: decimalScale || 0,
+              maximumFractionDigits: 20,
+          });
+      var parts = numberFormatter.formatToParts(Number(value));
+      var formatted = replaceParts(parts, options);
+      // Does intl formatting add a suffix?
+      var intlSuffix = getSuffix(formatted, __assign({}, options));
+      // Include decimal separator if user input ends with decimal separator
+      var includeDecimalSeparator = _value.slice(-1) === decimalSeparator ? decimalSeparator : '';
+      var _c = value.match(RegExp('\\d+\\.(\\d+)')) || [], decimals = _c[1];
+      // Keep original decimal padding if no decimalScale
+      if (decimalScale === undefined && decimals && decimalSeparator) {
+          if (formatted.includes(decimalSeparator)) {
+              formatted = formatted.replace(RegExp("(\\d+)(" + escapeRegExp(decimalSeparator) + ")(\\d+)", 'g'), "$1$2" + decimals);
+          }
+          else {
+              if (intlSuffix && !suffix) {
+                  formatted = formatted.replace(intlSuffix, "" + decimalSeparator + decimals + intlSuffix);
+              }
+              else {
+                  formatted = "" + formatted + decimalSeparator + decimals;
+              }
+          }
+      }
+      if (suffix && includeDecimalSeparator) {
+          return "" + formatted + includeDecimalSeparator + suffix;
+      }
+      if (intlSuffix && includeDecimalSeparator) {
+          return formatted.replace(intlSuffix, "" + includeDecimalSeparator + intlSuffix);
+      }
+      if (intlSuffix && suffix) {
+          return formatted.replace(intlSuffix, "" + includeDecimalSeparator + suffix);
+      }
+      return [formatted, includeDecimalSeparator, suffix].join('');
+  };
+  /**
+   * Before converting to Number, decimal separator has to be .
+   */
+  var replaceDecimalSeparator = function (value, decimalSeparator, isNegative) {
+      var newValue = value;
+      if (decimalSeparator && decimalSeparator !== '.') {
+          newValue = newValue.replace(RegExp(escapeRegExp(decimalSeparator), 'g'), '.');
+          if (isNegative && decimalSeparator === '-') {
+              newValue = "-" + newValue.slice(1);
+          }
+      }
+      return newValue;
+  };
+  var replaceParts = function (parts, _a) {
+      var prefix = _a.prefix, groupSeparator = _a.groupSeparator, decimalSeparator = _a.decimalSeparator, decimalScale = _a.decimalScale, _b = _a.disableGroupSeparators, disableGroupSeparators = _b === void 0 ? false : _b;
+      return parts
+          .reduce(function (prev, _a, i) {
+          var type = _a.type, value = _a.value;
+          if (i === 0 && prefix) {
+              if (type === 'minusSign') {
+                  return [value, prefix];
+              }
+              if (type === 'currency') {
+                  return __spreadArray(__spreadArray([], prev), [prefix]);
+              }
+              return [prefix, value];
+          }
+          if (type === 'currency') {
+              return prefix ? prev : __spreadArray(__spreadArray([], prev), [value]);
+          }
+          if (type === 'group') {
+              return !disableGroupSeparators
+                  ? __spreadArray(__spreadArray([], prev), [groupSeparator !== undefined ? groupSeparator : value]) : prev;
+          }
+          if (type === 'decimal') {
+              if (decimalScale !== undefined && decimalScale === 0) {
+                  return prev;
+              }
+              return __spreadArray(__spreadArray([], prev), [decimalSeparator !== undefined ? decimalSeparator : value]);
+          }
+          if (type === 'fraction') {
+              return __spreadArray(__spreadArray([], prev), [decimalScale !== undefined ? value.slice(0, decimalScale) : value]);
+          }
+          return __spreadArray(__spreadArray([], prev), [value]);
+      }, [''])
+          .join('');
+  };
 
-    return data;
-  }
+  var defaultConfig = {
+      currencySymbol: '',
+      groupSeparator: '',
+      decimalSeparator: '',
+      prefix: '',
+      suffix: '',
+  };
+  /**
+   * Get locale config from input or default
+   */
+  var getLocaleConfig = function (intlConfig) {
+      var _a = intlConfig || {}, locale = _a.locale, currency = _a.currency;
+      var numberFormatter = locale
+          ? new Intl.NumberFormat(locale, currency ? { currency: currency, style: 'currency' } : undefined)
+          : new Intl.NumberFormat();
+      return numberFormatter.formatToParts(1000.1).reduce(function (prev, curr, i) {
+          if (curr.type === 'currency') {
+              if (i === 0) {
+                  return __assign(__assign({}, prev), { currencySymbol: curr.value, prefix: curr.value });
+              }
+              else {
+                  return __assign(__assign({}, prev), { currencySymbol: curr.value, suffix: curr.value });
+              }
+          }
+          if (curr.type === 'group') {
+              return __assign(__assign({}, prev), { groupSeparator: curr.value });
+          }
+          if (curr.type === 'decimal') {
+              return __assign(__assign({}, prev), { decimalSeparator: curr.value });
+          }
+          return prev;
+      }, defaultConfig);
+  };
 
-  function _templateObject$5() {
-    var data = _taggedTemplateLiteral(["\n  cursor: not-allowed;\n  opacity: 0.4;\n"]);
+  var isNumber = function (input) { return RegExp(/\d/, 'gi').test(input); };
 
-    _templateObject$5 = function _templateObject() {
-      return data;
-    };
+  var padTrimValue = function (value, decimalSeparator, decimalScale) {
+      if (decimalSeparator === void 0) { decimalSeparator = '.'; }
+      if (decimalScale === undefined || value === '' || value === undefined) {
+          return value;
+      }
+      if (!value.match(/\d/g)) {
+          return '';
+      }
+      var _a = value.split(decimalSeparator), int = _a[0], decimals = _a[1];
+      if (decimalScale === 0) {
+          return int;
+      }
+      var newValue = decimals || '';
+      if (newValue.length < decimalScale) {
+          while (newValue.length < decimalScale) {
+              newValue += '0';
+          }
+      }
+      else {
+          newValue = newValue.slice(0, decimalScale);
+      }
+      return "" + int + decimalSeparator + newValue;
+  };
 
-    return data;
-  }
-  var disabledButtonStyle = styled.css(_templateObject$5());
-  var baseButtonStyle = styled.css(_templateObject2$1());
+  /**
+   * Based on the last key stroke and the cursor position, update the value
+   * and reposition the cursor to the right place
+   */
+  var repositionCursor = function (_a) {
+      var selectionStart = _a.selectionStart, value = _a.value, lastKeyStroke = _a.lastKeyStroke, stateValue = _a.stateValue, groupSeparator = _a.groupSeparator;
+      var cursorPosition = selectionStart;
+      var modifiedValue = value;
+      if (stateValue && cursorPosition) {
+          var splitValue = value.split('');
+          // if cursor is to right of groupSeparator and backspace pressed, delete the character to the left of the separator and reposition the cursor
+          if (lastKeyStroke === 'Backspace' && stateValue[cursorPosition] === groupSeparator) {
+              splitValue.splice(cursorPosition - 1, 1);
+              cursorPosition -= 1;
+          }
+          // if cursor is to left of groupSeparator and delete pressed, delete the character to the right of the separator and reposition the cursor
+          if (lastKeyStroke === 'Delete' && stateValue[cursorPosition] === groupSeparator) {
+              splitValue.splice(cursorPosition, 1);
+              cursorPosition += 1;
+          }
+          modifiedValue = splitValue.join('');
+          return { modifiedValue: modifiedValue, cursorPosition: cursorPosition };
+      }
+      return { modifiedValue: modifiedValue, cursorPosition: selectionStart };
+  };
 
-  function _templateObject$6() {
-    var data = _taggedTemplateLiteral(["\n  ", ";\n  background-color: ", ";\n  color: ", ";\n  border: 1px solid ", ";\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n  }\n  &:disabled {\n    ", "\n    &:hover {\n      background-color: ", ";\n    }\n  }\n"]);
+  var CurrencyInput = React.forwardRef(function (_a, ref) {
+      var _b = _a.allowDecimals, allowDecimals = _b === void 0 ? true : _b, _c = _a.allowNegativeValue, allowNegativeValue = _c === void 0 ? true : _c, id = _a.id, name = _a.name, className = _a.className, customInput = _a.customInput, decimalsLimit = _a.decimalsLimit, defaultValue = _a.defaultValue, _d = _a.disabled, disabled = _d === void 0 ? false : _d, userMaxLength = _a.maxLength, userValue = _a.value, onValueChange = _a.onValueChange, fixedDecimalLength = _a.fixedDecimalLength, placeholder = _a.placeholder, decimalScale = _a.decimalScale, prefix = _a.prefix, suffix = _a.suffix, intlConfig = _a.intlConfig, step = _a.step, min = _a.min, max = _a.max, _e = _a.disableGroupSeparators, disableGroupSeparators = _e === void 0 ? false : _e, _f = _a.disableAbbreviations, disableAbbreviations = _f === void 0 ? false : _f, _decimalSeparator = _a.decimalSeparator, _groupSeparator = _a.groupSeparator, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur, onKeyDown = _a.onKeyDown, onKeyUp = _a.onKeyUp, transformRawValue = _a.transformRawValue, props = __rest(_a, ["allowDecimals", "allowNegativeValue", "id", "name", "className", "customInput", "decimalsLimit", "defaultValue", "disabled", "maxLength", "value", "onValueChange", "fixedDecimalLength", "placeholder", "decimalScale", "prefix", "suffix", "intlConfig", "step", "min", "max", "disableGroupSeparators", "disableAbbreviations", "decimalSeparator", "groupSeparator", "onChange", "onFocus", "onBlur", "onKeyDown", "onKeyUp", "transformRawValue"]);
+      if (_decimalSeparator && isNumber(_decimalSeparator)) {
+          throw new Error('decimalSeparator cannot be a number');
+      }
+      if (_groupSeparator && isNumber(_groupSeparator)) {
+          throw new Error('groupSeparator cannot be a number');
+      }
+      var localeConfig = React.useMemo(function () { return getLocaleConfig(intlConfig); }, [intlConfig]);
+      var decimalSeparator = _decimalSeparator || localeConfig.decimalSeparator || '';
+      var groupSeparator = _groupSeparator || localeConfig.groupSeparator || '';
+      if (decimalSeparator &&
+          groupSeparator &&
+          decimalSeparator === groupSeparator &&
+          disableGroupSeparators === false) {
+          throw new Error('decimalSeparator cannot be the same as groupSeparator');
+      }
+      var formatValueOptions = {
+          decimalSeparator: decimalSeparator,
+          groupSeparator: groupSeparator,
+          disableGroupSeparators: disableGroupSeparators,
+          intlConfig: intlConfig,
+          prefix: prefix || localeConfig.prefix,
+          suffix: suffix,
+      };
+      var cleanValueOptions = {
+          decimalSeparator: decimalSeparator,
+          groupSeparator: groupSeparator,
+          allowDecimals: allowDecimals,
+          decimalsLimit: decimalsLimit || fixedDecimalLength || 2,
+          allowNegativeValue: allowNegativeValue,
+          disableAbbreviations: disableAbbreviations,
+          prefix: prefix || localeConfig.prefix,
+          transformRawValue: transformRawValue,
+      };
+      var formattedStateValue = defaultValue !== undefined && defaultValue !== null
+          ? formatValue(__assign(__assign({}, formatValueOptions), { decimalScale: decimalScale, value: String(defaultValue) }))
+          : userValue !== undefined && userValue !== null
+              ? formatValue(__assign(__assign({}, formatValueOptions), { decimalScale: decimalScale, value: String(userValue) }))
+              : '';
+      var _g = React.useState(formattedStateValue), stateValue = _g[0], setStateValue = _g[1];
+      var _h = React.useState(false), dirty = _h[0], setDirty = _h[1];
+      var _j = React.useState(0), cursor = _j[0], setCursor = _j[1];
+      var _k = React.useState(0), changeCount = _k[0], setChangeCount = _k[1];
+      var _l = React.useState(null), lastKeyStroke = _l[0], setLastKeyStroke = _l[1];
+      var inputRef = ref || React.useRef(null);
+      /**
+       * Process change in value
+       */
+      var processChange = function (value, selectionStart) {
+          setDirty(true);
+          var _a = repositionCursor({
+              selectionStart: selectionStart,
+              value: value,
+              lastKeyStroke: lastKeyStroke,
+              stateValue: stateValue,
+              groupSeparator: groupSeparator,
+          }), modifiedValue = _a.modifiedValue, cursorPosition = _a.cursorPosition;
+          var stringValue = cleanValue(__assign({ value: modifiedValue }, cleanValueOptions));
+          if (userMaxLength && stringValue.replace(/-/g, '').length > userMaxLength) {
+              return;
+          }
+          if (stringValue === '' || stringValue === '-' || stringValue === decimalSeparator) {
+              onValueChange && onValueChange(undefined, name, { float: null, formatted: '', value: '' });
+              setStateValue(stringValue);
+              return;
+          }
+          var numberValue = parseFloat(stringValue.replace(decimalSeparator, '.'));
+          var formattedValue = formatValue(__assign({ value: stringValue }, formatValueOptions));
+          if (cursorPosition !== undefined && cursorPosition !== null) {
+              // Prevent cursor jumping
+              var newCursor = cursorPosition + (formattedValue.length - value.length);
+              newCursor = newCursor <= 0 ? (prefix ? prefix.length : 0) : newCursor;
+              setCursor(newCursor);
+              setChangeCount(changeCount + 1);
+          }
+          setStateValue(formattedValue);
+          if (onValueChange) {
+              var values = {
+                  float: numberValue,
+                  formatted: formattedValue,
+                  value: stringValue,
+              };
+              onValueChange(stringValue, name, values);
+          }
+      };
+      /**
+       * Handle change event
+       */
+      var handleOnChange = function (event) {
+          var _a = event.target, value = _a.value, selectionStart = _a.selectionStart;
+          processChange(value, selectionStart);
+          onChange && onChange(event);
+      };
+      /**
+       * Handle focus event
+       */
+      var handleOnFocus = function (event) {
+          onFocus && onFocus(event);
+          return stateValue ? stateValue.length : 0;
+      };
+      /**
+       * Handle blur event
+       *
+       * Format value by padding/trimming decimals if required by
+       */
+      var handleOnBlur = function (event) {
+          var value = event.target.value;
+          var valueOnly = cleanValue(__assign({ value: value }, cleanValueOptions));
+          if (valueOnly === '-' || !valueOnly) {
+              setStateValue('');
+              onBlur && onBlur(event);
+              return;
+          }
+          var fixedDecimals = fixedDecimalValue(valueOnly, decimalSeparator, fixedDecimalLength);
+          var newValue = padTrimValue(fixedDecimals, decimalSeparator, decimalScale !== undefined ? decimalScale : fixedDecimalLength);
+          var numberValue = parseFloat(newValue.replace(decimalSeparator, '.'));
+          var formattedValue = formatValue(__assign(__assign({}, formatValueOptions), { value: newValue }));
+          if (onValueChange) {
+              onValueChange(newValue, name, {
+                  float: numberValue,
+                  formatted: formattedValue,
+                  value: newValue,
+              });
+          }
+          setStateValue(formattedValue);
+          onBlur && onBlur(event);
+      };
+      /**
+       * Handle key down event
+       *
+       * Increase or decrease value by step
+       */
+      var handleOnKeyDown = function (event) {
+          var key = event.key;
+          setLastKeyStroke(key);
+          if (step && (key === 'ArrowUp' || key === 'ArrowDown')) {
+              event.preventDefault();
+              setCursor(stateValue.length);
+              var currentValue = parseFloat(userValue !== undefined && userValue !== null
+                  ? String(userValue).replace(decimalSeparator, '.')
+                  : cleanValue(__assign({ value: stateValue }, cleanValueOptions))) || 0;
+              var newValue = key === 'ArrowUp' ? currentValue + step : currentValue - step;
+              if (min !== undefined && newValue < min) {
+                  return;
+              }
+              if (max !== undefined && newValue > max) {
+                  return;
+              }
+              var fixedLength = String(step).includes('.')
+                  ? Number(String(step).split('.')[1].length)
+                  : undefined;
+              processChange(String(fixedLength ? newValue.toFixed(fixedLength) : newValue).replace('.', decimalSeparator));
+          }
+          onKeyDown && onKeyDown(event);
+      };
+      /**
+       * Handle key up event
+       *
+       * Move cursor if there is a suffix to prevent user typing past suffix
+       */
+      var handleOnKeyUp = function (event) {
+          var key = event.key, selectionStart = event.currentTarget.selectionStart;
+          if (key !== 'ArrowUp' && key !== 'ArrowDown' && stateValue !== '-') {
+              var suffix_1 = getSuffix(stateValue, { groupSeparator: groupSeparator, decimalSeparator: decimalSeparator });
+              if (suffix_1 && selectionStart && selectionStart > stateValue.length - suffix_1.length) {
+                  /* istanbul ignore else */
+                  if (inputRef && typeof inputRef === 'object' && inputRef.current) {
+                      var newCursor = stateValue.length - suffix_1.length;
+                      inputRef.current.setSelectionRange(newCursor, newCursor);
+                  }
+              }
+          }
+          onKeyUp && onKeyUp(event);
+      };
+      React.useEffect(function () {
+          // prevent cursor jumping if editing value
+          if (dirty &&
+              stateValue !== '-' &&
+              inputRef &&
+              typeof inputRef === 'object' &&
+              inputRef.current) {
+              inputRef.current.setSelectionRange(cursor, cursor);
+          }
+      }, [stateValue, cursor, inputRef, dirty, changeCount]);
+      /**
+       * If user has only entered "-" or decimal separator,
+       * keep the char to allow them to enter next value
+       */
+      var getRenderValue = function () {
+          if (userValue !== undefined &&
+              userValue !== null &&
+              stateValue !== '-' &&
+              (!decimalSeparator || stateValue !== decimalSeparator)) {
+              return formatValue(__assign(__assign({}, formatValueOptions), { decimalScale: dirty ? undefined : decimalScale, value: String(userValue) }));
+          }
+          return stateValue;
+      };
+      var inputProps = __assign({ type: 'text', inputMode: 'decimal', id: id,
+          name: name,
+          className: className, onChange: handleOnChange, onBlur: handleOnBlur, onFocus: handleOnFocus, onKeyDown: handleOnKeyDown, onKeyUp: handleOnKeyUp, placeholder: placeholder,
+          disabled: disabled, value: getRenderValue(), ref: inputRef }, props);
+      if (customInput) {
+          var CustomInput = customInput;
+          return React__default.createElement(CustomInput, __assign({}, inputProps));
+      }
+      return React__default.createElement("input", __assign({}, inputProps));
+  });
+  CurrencyInput.displayName = 'CurrencyInput';
 
-    _templateObject$6 = function _templateObject() {
-      return data;
-    };
+  var _excluded$1 = ["value", "onChange", "prefix", "allowNegativeValue", "groupSeparator", "decimalSeparator"];
+  var unMask = function unMask() {
+    var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    return value.replace(/\D/g, '');
+  };
+  /**
+   * Currency Input which formats the value to a specific format
+   */
 
-    return data;
-  }
-  var Button = styled__default.button(_templateObject$6(), baseButtonStyle, function (props) {
+  var CurrencyInputFormatter = function CurrencyInputFormatter(_ref) {
+    var value = _ref.value,
+        onChange = _ref.onChange,
+        prefix = _ref.prefix,
+        allowNegativeValue = _ref.allowNegativeValue,
+        groupSeparator = _ref.groupSeparator,
+        decimalSeparator = _ref.decimalSeparator,
+        rest = _objectWithoutProperties(_ref, _excluded$1);
+
+    return /*#__PURE__*/React__default.createElement(CurrencyInput, _extends({}, rest, {
+      value: value,
+      prefix: prefix,
+      onValueChange: onChange,
+      groupSeparator: groupSeparator,
+      decimalSeparator: decimalSeparator,
+      allowNegativeValue: allowNegativeValue
+    }));
+  };
+
+  CurrencyInputFormatter.defaultProps = {
+    value: '',
+    prefix: 'R',
+    groupSeparator: ',',
+    decimalSeparator: '.',
+    allowNegativeValue: false,
+    onChange: function onChange() {}
+  };
+
+  var _templateObject$5, _templateObject2$1;
+  var disabledButtonStyle = styled.css(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteral(["\n  cursor: not-allowed;\n  opacity: 0.4;\n"])));
+  var baseButtonStyle = styled.css(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n  padding: 1rem 3.5rem;\n  cursor: pointer;\n  letter-spacing: 1.3px;\n  border-style: none;\n  text-transform: uppercase;\n  font-size: 12px;\n  color: #fff;\n  transition: 0.2s ease-in-out;\n  outline: none;\n  min-width: 150px;\n"])));
+
+  var _excluded$2 = ["children"];
+
+  var _templateObject$6;
+  var Button = styled__default.button(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteral(["\n  ", ";\n  background-color: ", ";\n  color: ", ";\n  border: 1px solid ", ";\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n  }\n  &:disabled {\n    ", "\n    &:hover {\n      background-color: ", ";\n    }\n  }\n"])), baseButtonStyle, function (props) {
     return props.theme.colors.ntrlMin;
   }, function (props) {
     return props.theme.colors.primary;
@@ -1324,36 +1746,18 @@
 
   var SecondaryButton = function SecondaryButton(_ref) {
     var children = _ref.children,
-        restProps = _objectWithoutProperties(_ref, ["children"]);
+        restProps = _objectWithoutProperties(_ref, _excluded$2);
 
-    return React__default.createElement(Button, restProps, children);
+    return /*#__PURE__*/React__default.createElement(Button, restProps, children);
   };
 
   var SecondaryButton$1 = themed(SecondaryButton);
 
-  function _templateObject2$2() {
-    var data = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: ", ";\n  border-bottom: 1px solid ", ";\n  margin-bottom: ", ";\n  margin-top: ", ";\n  width: 100%;\n  align-items: center;\n"]);
-
-    _templateObject2$2 = function _templateObject2() {
-      return data;
-    };
-
-    return data;
-  }
-
-  function _templateObject$7() {
-    var data = _taggedTemplateLiteral(["\n  font-size: ", ";\n  font-weight: bold;\n  margin-bottom: 0;\n  text-transform: uppercase;\n"]);
-
-    _templateObject$7 = function _templateObject() {
-      return data;
-    };
-
-    return data;
-  }
-  var Title = styled__default.h1(_templateObject$7(), function (props) {
+  var _templateObject$7, _templateObject2$2;
+  var Title = styled__default.h1(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteral(["\n  font-size: ", ";\n  font-weight: bold;\n  margin-bottom: 0;\n  text-transform: uppercase;\n"])), function (props) {
     return props.theme.fontSizes[2];
   });
-  var InterestsSubheadingContainer = styled__default.div(_templateObject2$2(), function (props) {
+  var InterestsSubheadingContainer = styled__default.div(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: ", ";\n  border-bottom: 1px solid ", ";\n  margin-bottom: ", ";\n  margin-top: ", ";\n  width: 100%;\n  align-items: center;\n"])), function (props) {
     return props.theme.marginPaddings[1];
   }, function (props) {
     return props.theme.colors.primary;
@@ -1367,34 +1771,28 @@
     var title = _ref.title,
         children = _ref.children,
         className = _ref.className;
-    return React__default.createElement(InterestsSubheadingContainer, {
+    return /*#__PURE__*/React__default.createElement(InterestsSubheadingContainer, {
       className: className
-    }, React__default.createElement(Title, null, title), React__default.createElement("div", null, children));
+    }, /*#__PURE__*/React__default.createElement(Title, null, title), /*#__PURE__*/React__default.createElement("div", null, children));
   };
 
   var interestCategories = {
     SHOES: 'SHOES',
     BAGS: 'BAGS',
     ACCESSORIES: 'ACCESSORIES',
-    WATCHES: 'WATCHES'
+    WATCHES: 'WATCHES',
+    APPAREL: 'APPAREL'
   };
   var interestCategoryMaxPrices = {
     SHOES: 50000,
     BAGS: 500000,
     ACCESSORIES: 100000,
-    WATCHES: 500000
+    WATCHES: 500000,
+    APPAREL: 100000
   };
 
-  function _templateObject$8() {
-    var data = _taggedTemplateLiteral(["\n  display: flex;\n  flex-flow: row nowrap;\n  justify-content: space-between;\n\n  input[data-qe-id='masked-input-min'],\n  input[data-qe-id='masked-input-max'] {\n    flex-basis: 30%;\n    border-left: none;\n    border-right: none;\n    border-top: none;\n    border-bottom: 1px solid ", ";\n  }\n"]);
-
-    _templateObject$8 = function _templateObject() {
-      return data;
-    };
-
-    return data;
-  }
-  var CurrencyInputWrapper = styled__default.div(_templateObject$8(), function (props) {
+  var _templateObject$8;
+  var CurrencyInputWrapper = styled__default.div(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-flow: row nowrap;\n  justify-content: space-between;\n\n  input[data-qe-id='masked-input-min'],\n  input[data-qe-id='masked-input-max'] {\n    flex-basis: 30%;\n    border-left: none;\n    border-right: none;\n    border-top: none;\n    border-bottom: 1px solid ", ";\n  }\n"])), function (props) {
     return props.theme.colors.primary;
   });
 
@@ -1416,6 +1814,9 @@
       case interestCategories.WATCHES:
         return interestCategoryMaxPrices.WATCHES;
 
+      case interestCategories.APPAREL:
+        return interestCategoryMaxPrices.APPAREL;
+
       default:
         return 0;
     }
@@ -1423,7 +1824,7 @@
 
   var getFooterButtons = function getFooterButtons(actionObj) {
     var giveFullRange = actionObj.giveFullRange;
-    return React__default.createElement(SecondaryButton$1, {
+    return /*#__PURE__*/React__default.createElement(SecondaryButton$1, {
       type: "button",
       onClick: giveFullRange
     }, "Full Price Range");
@@ -1472,11 +1873,11 @@
       });
     };
 
-    return React__default.createElement("div", {
+    return /*#__PURE__*/React__default.createElement("div", {
       className: "price-ranges"
-    }, React__default.createElement(RangeSlider$1, {
+    }, /*#__PURE__*/React__default.createElement(RangeSlider$1, {
       renderTitleSection: function renderTitleSection() {
-        return React__default.createElement(InterestsSubheading, {
+        return /*#__PURE__*/React__default.createElement(InterestsSubheading, {
           title: "Price Range"
         });
       },
@@ -1493,21 +1894,17 @@
           manuallyChangeMaxValue = _ref2.manuallyChangeMaxValue,
           currMinVal = _ref2.currMinVal,
           currMaxVal = _ref2.currMaxVal;
-      return React__default.createElement(CurrencyInputWrapper, null, React__default.createElement(CurrencyInput, {
+      return /*#__PURE__*/React__default.createElement(CurrencyInputWrapper, null, /*#__PURE__*/React__default.createElement(CurrencyInputFormatter, {
         "data-qe-id": "masked-input-min",
-        type: "text",
         value: currMinVal,
-        onChange: function onChange(e) {
-          e.preventDefault();
-          handleMinCurrencyChange(e.target.value, currMaxVal, manuallyChangeMinValue);
+        onChange: function onChange(value) {
+          handleMinCurrencyChange(value, currMaxVal, manuallyChangeMinValue);
         }
-      }), React__default.createElement(CurrencyInput, {
+      }), /*#__PURE__*/React__default.createElement(CurrencyInputFormatter, {
         "data-qe-id": "masked-input-max",
-        type: "text",
         value: currMaxVal,
-        onChange: function onChange(e) {
-          e.preventDefault();
-          handleMaxCurrencyChange(e.target.value, currMinVal, manuallyChangeMaxValue);
+        onChange: function onChange(value) {
+          handleMaxCurrencyChange(value, currMinVal, manuallyChangeMaxValue);
         }
       }));
     }));