@bonlineza/luxity-lib 2.7.4 → 2.9.0

package/Interests.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('styled-components'), require('react-notify-toast'), require('@bonlineza/b-lib/EllipsisLoader'), require('@bonlineza/b-lib/PageReady'), require('stylis-rule-sheet'), require('react-dom'), require('prop-types'), require('raf'), require('react-input-autosize'), require('react-transition-group'), require('@bonlineza/b-lib/functions'), require('rc-slider'), require('text-mask-all/addons/dist/createNumberMask'), require('text-mask-all/react/dist/reactTextMask'), require('numeral')) :
-  typeof define === 'function' && define.amd ? define(['react', 'styled-components', 'react-notify-toast', '@bonlineza/b-lib/EllipsisLoader', '@bonlineza/b-lib/PageReady', 'stylis-rule-sheet', 'react-dom', 'prop-types', 'raf', 'react-input-autosize', 'react-transition-group', '@bonlineza/b-lib/functions', 'rc-slider', 'text-mask-all/addons/dist/createNumberMask', 'text-mask-all/react/dist/reactTextMask', 'numeral'], factory) :
-  (global = global || self, global.Interests = factory(global.React, global.styled, global['react-notify-toast'], global.EllipsisLoader, global.PageReady, global['stylis-rule-sheet'], global.reactDom, global.PropTypes, global.raf, global['react-input-autosize'], global['react-transition-group'], global.function, global.rcSlider, global.createNumberMask, global.MaskedInput, global.numeral));
-}(this, (function (React, styled, Notifications, EllipsisLoader, PageReady, stylisRuleSheet, reactDom, PropTypes, raf, AutosizeInput, reactTransitionGroup, functions, rcSlider, createNumberMask, MaskedInput, numeral) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('styled-components'), require('react-notify-toast'), require('@bonlineza/b-lib/EllipsisLoader'), require('@bonlineza/b-lib/PageReady'), require('stylis-rule-sheet'), require('react-dom'), require('prop-types'), require('raf'), require('react-input-autosize'), require('react-transition-group'), require('@bonlineza/b-lib/functions'), require('rc-slider'), require('numeral')) :
+  typeof define === 'function' && define.amd ? define(['react', 'styled-components', 'react-notify-toast', '@bonlineza/b-lib/EllipsisLoader', '@bonlineza/b-lib/PageReady', 'stylis-rule-sheet', 'react-dom', 'prop-types', 'raf', 'react-input-autosize', 'react-transition-group', '@bonlineza/b-lib/functions', 'rc-slider', 'numeral'], factory) :
+  (global = global || self, global.Interests = factory(global.React, global.styled, global['react-notify-toast'], global.EllipsisLoader, global.PageReady, global['stylis-rule-sheet'], global.reactDom, global.PropTypes, global.raf, global['react-input-autosize'], global['react-transition-group'], global.function, global.rcSlider, global.numeral));
+}(this, (function (React, styled, Notifications, EllipsisLoader, PageReady, stylisRuleSheet, reactDom, PropTypes, raf, AutosizeInput, reactTransitionGroup, functions, rcSlider, numeral) { 'use strict';
 
   var React__default = 'default' in React ? React['default'] : React;
   var styled__default = 'default' in styled ? styled['default'] : styled;
@@ -13,10 +13,34 @@
   PropTypes = PropTypes && Object.prototype.hasOwnProperty.call(PropTypes, 'default') ? PropTypes['default'] : PropTypes;
   raf = raf && Object.prototype.hasOwnProperty.call(raf, 'default') ? raf['default'] : raf;
   AutosizeInput = AutosizeInput && Object.prototype.hasOwnProperty.call(AutosizeInput, 'default') ? AutosizeInput['default'] : AutosizeInput;
-  createNumberMask = createNumberMask && Object.prototype.hasOwnProperty.call(createNumberMask, 'default') ? createNumberMask['default'] : createNumberMask;
-  MaskedInput = MaskedInput && Object.prototype.hasOwnProperty.call(MaskedInput, 'default') ? MaskedInput['default'] : MaskedInput;
   numeral = numeral && Object.prototype.hasOwnProperty.call(numeral, 'default') ? numeral['default'] : numeral;
 
+  function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+
+    if (Object.getOwnPropertySymbols) {
+      var symbols = Object.getOwnPropertySymbols(object);
+      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 = null != arguments[i] ? arguments[i] : {};
+      i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
+        _defineProperty(target, key, source[key]);
+      }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
+    }
+
+    return target;
+  }
+
   function _classCallCheck(instance, Constructor) {
     if (!(instance instanceof Constructor)) {
       throw new TypeError("Cannot call a class as a function");
@@ -36,6 +60,9 @@
   function _createClass(Constructor, protoProps, staticProps) {
     if (protoProps) _defineProperties(Constructor.prototype, protoProps);
     if (staticProps) _defineProperties(Constructor, staticProps);
+    Object.defineProperty(Constructor, "prototype", {
+      writable: false
+    });
     return Constructor;
   }
 
@@ -55,7 +82,7 @@
   }
 
   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];
 
@@ -68,44 +95,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 _inherits(subClass, superClass) {
     if (typeof superClass !== "function" && superClass !== null) {
       throw new TypeError("Super expression must either be null or a function");
@@ -118,22 +110,24 @@
         configurable: true
       }
     });
+    Object.defineProperty(subClass, "prototype", {
+      writable: false
+    });
     if (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) {
+    _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
       o.__proto__ = p;
       return o;
     };
-
     return _setPrototypeOf(o, p);
   }
 
@@ -143,7 +137,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;
@@ -197,6 +191,8 @@
   function _possibleConstructorReturn(self, call) {
     if (call && (typeof call === "object" || typeof call === "function")) {
       return call;
+    } else if (call !== void 0) {
+      throw new TypeError("Derived constructors may only return object or undefined");
     }
 
     return _assertThisInitialized(self);
@@ -250,18 +246,21 @@
   }
 
   function _iterableToArray(iter) {
-    if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
   }
 
   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;
@@ -333,7 +332,7 @@
       value: function render() {
         if (this.state.hasError) {
           // You can render any custom fallback UI
-          return this.props.showMessageOnError ? React__default.createElement("h1", null, this.props.errorMessage) : null;
+          return this.props.showMessageOnError ? /*#__PURE__*/React__default.createElement("h1", null, this.props.errorMessage) : null;
         }
 
         return this.props.children;
@@ -385,25 +384,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 _templateObject() {
-    var data = _taggedTemplateLiteral(["\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n\n  @media (max-width: ", ") {\n    display: block;\n  }\n\n  .icon-header__left {\n    display: flex;\n    flex-flow: row nowrap;\n    align-items: center;\n\n    @media (max-width: ", ") {\n      align-self: flex-start;\n    }\n\n    svg {\n      height: 1.5em;\n      width: 1.5em;\n      margin-right: ", ";\n    }\n  }\n\n  .icon-header__right {\n    display: flex;\n    flex-grow: 1;\n    justify-content: flex-end;\n  }\n"]);
-
-    _templateObject = function _templateObject() {
-      return data;
-    };
-
-    return data;
-  }
-  var StyledHeader = styled__default.h5(_templateObject(), media.sm, media.sm, function (props) {
+  var _templateObject;
+  var StyledHeader = styled__default.h5(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n\n  @media (max-width: ", ") {\n    display: block;\n  }\n\n  .icon-header__left {\n    display: flex;\n    flex-flow: row nowrap;\n    align-items: center;\n\n    @media (max-width: ", ") {\n      align-self: flex-start;\n    }\n\n    svg {\n      height: 1.5em;\n      width: 1.5em;\n      margin-right: ", ";\n    }\n  }\n\n  .icon-header__right {\n    display: flex;\n    flex-grow: 1;\n    justify-content: flex-end;\n  }\n"])), media.sm, media.sm, function (props) {
     return props.theme.marginPaddings[1];
   });
 
@@ -414,9 +405,9 @@
     var title = _ref.title,
         SvgComponent = _ref.svgComponent,
         renderAppendage = _ref.renderAppendage;
-    return React__default.createElement(StyledHeader, null, React__default.createElement("div", {
+    return /*#__PURE__*/React__default.createElement(StyledHeader, null, /*#__PURE__*/React__default.createElement("div", {
       className: "icon-header__left"
-    }, React__default.createElement(SvgComponent, null), title), React__default.createElement("div", {
+    }, /*#__PURE__*/React__default.createElement(SvgComponent, null), title), /*#__PURE__*/React__default.createElement("div", {
       className: "icon-header__right"
     }, renderAppendage && renderAppendage()));
   };
@@ -433,17 +424,17 @@
   var IconHeader$1 = themed(IconHeader);
 
   var Account = (function (props) {
-    return React__default.createElement("svg", _extends({
+    return /*#__PURE__*/React__default.createElement("svg", _extends({
       id: "svg-account",
       width: "25",
       height: "29",
       viewBox: "0 0 25 29",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
-    }, props), React__default.createElement("path", {
+    }, props), /*#__PURE__*/React__default.createElement("path", {
       d: "M20.9496 10.2519V7.6666C20.9496 3.43926 17.1602 0 12.5016 0C7.84173 0 4.05044 3.43926 4.05044 7.6666V10.2519C2.26758 10.6808 1 12.2658 1 14.1175V24.021C1 26.2148 2.78986 28 4.9908 28H20.0092C22.2101 28 24 26.2148 24 24.021V14.115C24 12.2652 22.7324 10.6808 20.9496 10.2519ZM5.70052 10.136V7.6666C5.70052 4.34833 8.7516 1.64836 12.501 1.64836C16.249 1.64836 19.2988 4.34833 19.2988 7.6666V10.136H5.70052ZM20.0092 26.3548H4.9908C3.70162 26.3548 2.65261 25.3076 2.65261 24.021V14.115C2.65261 12.8296 3.70099 11.7843 4.9908 11.7843H20.0092C21.2996 11.7843 22.3499 12.8296 22.3499 14.115V24.021C22.3499 25.3076 21.2996 26.3548 20.0092 26.3548Z",
       fill: "currentColor"
-    }), React__default.createElement("path", {
+    }), /*#__PURE__*/React__default.createElement("path", {
       d: "M12.5012 14.1892C11.2038 14.1892 10.1484 15.2421 10.1484 16.5357V19.5739C10.1484 20.8675 11.2038 21.9204 12.5012 21.9204C13.7974 21.9204 14.8515 20.8675 14.8515 19.5739V16.5357C14.8515 15.2421 13.7974 14.1892 12.5012 14.1892ZM13.1982 16.5357V19.5739C13.1982 19.9591 12.8856 20.2721 12.5006 20.2721C12.1149 20.2721 11.8011 19.9591 11.8011 19.5739V16.5357C11.8011 16.1505 12.1149 15.8376 12.5012 15.8376C12.8856 15.8376 13.1982 16.1505 13.1982 16.5357Z",
       fill: "currentColor"
     }));
@@ -455,7 +446,7 @@
     return message.replace(':error_code', error.status || 'Network Down');
   };
 
-  var LuxityPageReadyContext = React__default.createContext({
+  var LuxityPageReadyContext = /*#__PURE__*/React__default.createContext({
     data: null
   });
   /**
@@ -503,7 +494,7 @@
             _onData = _this$props.onData,
             children = _this$props.children;
         var data = this.state.data;
-        return React__default.createElement(PageReady, {
+        return /*#__PURE__*/React__default.createElement(PageReady, {
           ref: function ref(inst) {
             _this2.pageReadyInstance = inst;
           },
@@ -530,10 +521,10 @@
           customErrorMessage: customErrorMessage,
           customErrorHandler: customErrorHandler,
           renderCustomLoader: function renderCustomLoader() {
-            return React__default.createElement(EllipsisLoader, null);
+            return /*#__PURE__*/React__default.createElement(EllipsisLoader, null);
           },
           errorMessageInterpreter: interpretErrorMessage
-        }, React__default.createElement(LuxityPageReadyContext.Provider, {
+        }, /*#__PURE__*/React__default.createElement(LuxityPageReadyContext.Provider, {
           value: {
             data: data
           }
@@ -557,12 +548,25 @@
     }
   };
 
+  var safeIsNaN = Number.isNaN ||
+      function ponyfill(value) {
+          return typeof value === 'number' && value !== value;
+      };
+  function isEqual(first, second) {
+      if (first === second) {
+          return true;
+      }
+      if (safeIsNaN(first) && safeIsNaN(second)) {
+          return true;
+      }
+      return false;
+  }
   function areInputsEqual(newInputs, lastInputs) {
       if (newInputs.length !== lastInputs.length) {
           return false;
       }
       for (var i = 0; i < newInputs.length; i++) {
-          if (newInputs[i] !== lastInputs[i]) {
+          if (!isEqual(newInputs[i], lastInputs[i])) {
               return false;
           }
       }
@@ -7104,16 +7108,8 @@
 
   var index$1 = manageState(Select);
 
-  function _templateObject$1() {
-    var data = _taggedTemplateLiteral(["\n  .page-ready {\n    display: flex;\n    align-items: center;\n  }\n\n  .loader {\n    min-width: 150px;\n  }\n\n  .notification-dropdown-select-container {\n    min-width: 150px;\n\n    .notification-dropdown-select__control {\n      min-height: auto;\n      background-color: ", ";\n      border: none;\n      border-radius: 0;\n\n      &--is-focused {\n        border: none;\n        border-radius: 0;\n        box-shadow: none;\n      }\n\n      .notification-dropdown-select__value-container {\n        & > div {\n          padding: 0;\n          margin: 0;\n          color: ", ";\n        }\n        & .notification-dropdown-select__single-value,\n        & .notification-dropdown-select__placeholder {\n          overflow: visible;\n          font-weight: lighter;\n        }\n      }\n    }\n  }\n\n  .notification-dropdown-select__indicators {\n    padding: 0 !important;\n    .notification-dropdown-select__dropdown-indicator {\n      color: ", ";\n    }\n  }\n\n  .notification-dropdown-select__menu {\n    border-radius: 0;\n\n    & > .notification-dropdown-select__menu-list {\n      border-radius: 0;\n\n      & > .notification-dropdown-select__option {\n        font-weight: bold;\n        &:last-child {\n          border-bottom: none;\n        }\n\n        &.notification-dropdown-select__option--is-focused {\n          background-color: ", ";\n          border-style: hidden;\n        }\n        &.notification-dropdown-select__option--is-selected {\n          color: ", ";\n          background-color: ", ";\n          border-style: hidden;\n        }\n        &.notification-dropdown-select__option--is-selected.notification-dropdown-select__option--is-focused {\n          border-style: hidden;\n        }\n      }\n    }\n  }\n"]);
-
-    _templateObject$1 = function _templateObject() {
-      return data;
-    };
-
-    return data;
-  }
-  var NotifyContainer = styled__default.div(_templateObject$1(), function (props) {
+  var _templateObject$1;
+  var NotifyContainer = styled__default.div(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n  .page-ready {\n    display: flex;\n    align-items: center;\n  }\n\n  .loader {\n    min-width: 150px;\n  }\n\n  .notification-dropdown-select-container {\n    min-width: 150px;\n\n    .notification-dropdown-select__control {\n      min-height: auto;\n      background-color: ", ";\n      border: none;\n      border-radius: 0;\n\n      &--is-focused {\n        border: none;\n        border-radius: 0;\n        box-shadow: none;\n      }\n\n      .notification-dropdown-select__value-container {\n        & > div {\n          padding: 0;\n          margin: 0;\n          color: ", ";\n        }\n        & .notification-dropdown-select__single-value,\n        & .notification-dropdown-select__placeholder {\n          overflow: visible;\n          font-weight: lighter;\n        }\n      }\n    }\n  }\n\n  .notification-dropdown-select__indicators {\n    padding: 0 !important;\n    .notification-dropdown-select__dropdown-indicator {\n      color: ", ";\n    }\n  }\n\n  .notification-dropdown-select__menu {\n    border-radius: 0;\n\n    & > .notification-dropdown-select__menu-list {\n      border-radius: 0;\n\n      & > .notification-dropdown-select__option {\n        font-weight: bold;\n        &:last-child {\n          border-bottom: none;\n        }\n\n        &.notification-dropdown-select__option--is-focused {\n          background-color: ", ";\n          border-style: hidden;\n        }\n        &.notification-dropdown-select__option--is-selected {\n          color: ", ";\n          background-color: ", ";\n          border-style: hidden;\n        }\n        &.notification-dropdown-select__option--is-selected.notification-dropdown-select__option--is-focused {\n          border-style: hidden;\n        }\n      }\n    }\n  }\n"])), function (props) {
     return props.theme.colors.ntrlMin;
   }, function (props) {
     return props.theme.colors.base;
@@ -7139,7 +7135,7 @@
    * */
 
   var LuxityNotifications = function LuxityNotifications(props) {
-    return React__default.createElement(Notifications__default, props);
+    return /*#__PURE__*/React__default.createElement(Notifications__default, props);
   };
 
   /** @format */
@@ -7228,14 +7224,14 @@
             options = _this$state.options,
             selectedOption = _this$state.selectedOption,
             updating = _this$state.request.fetching;
-        return React__default.createElement(NotifyContainer, null, React__default.createElement(LuxityNotifications, null), React__default.createElement(LuxityPageReady, {
+        return /*#__PURE__*/React__default.createElement(NotifyContainer, null, /*#__PURE__*/React__default.createElement(LuxityNotifications, null), /*#__PURE__*/React__default.createElement(LuxityPageReady, {
           getRequestPromise: _this.props.getSchedule,
           onData: function onData(data) {
             return _this.onData(data);
           }
-        }, React__default.createElement(React.Fragment, null, React__default.createElement("div", {
+        }, /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
           className: "notification-dropdown-label"
-        }, "Notification:\xA0"), updating ? React__default.createElement(EllipsisLoader, null) : React__default.createElement(index$1, {
+        }, "Notification:\xA0"), updating ? /*#__PURE__*/React__default.createElement(EllipsisLoader, null) : /*#__PURE__*/React__default.createElement(index$1, {
           isMulti: false,
           isSearchable: false,
           components: {
@@ -7259,7 +7255,7 @@
       return _this;
     }
 
-    return NotificationDropDown;
+    return _createClass(NotificationDropDown);
   }(React__default.Component);
 
   var NotificationDropDown$1 = themed(NotificationDropDown);
@@ -7287,7 +7283,8 @@
     SHOES: 'SHOES',
     BAGS: 'BAGS',
     ACCESSORIES: 'ACCESSORIES',
-    WATCHES: 'WATCHES'
+    WATCHES: 'WATCHES',
+    APPAREL: 'APPAREL'
   };
   var catArray = [{
     categoryTitle: 'Bags',
@@ -7298,6 +7295,9 @@
   }, {
     categoryTitle: 'Accessories',
     value: interestCategories.ACCESSORIES
+  }, {
+    categoryTitle: 'Clothing',
+    value: interestCategories.APPAREL
   }, {
     categoryTitle: 'Watches',
     value: interestCategories.WATCHES
@@ -7306,26 +7306,19 @@
     SHOES: 50000,
     BAGS: 500000,
     ACCESSORIES: 100000,
-    WATCHES: 500000
+    WATCHES: 500000,
+    APPAREL: 100000
   };
 
-  function _templateObject$2() {
-    var data = _taggedTemplateLiteral(["\n  padding: ", ";\n  border: 1px solid\n    ", ";\n  text-align: center;\n  display: flex;\n  flex-flow: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;\n  background-color: ", ";\n  color: ", ";\n  svg {\n    margin-left: auto;\n    margin-right: auto;\n    max-height: 80px;\n    width: auto;\n    /*condition*/\n\n    .fillColor {\n      fill: ", ";\n    }\n\n    .outlineColor {\n      fill: ", ";\n    }\n  }\n  @media (max-width: ", ") {\n    margin-bottom: ", ";\n  }\n"]);
-
-    _templateObject$2 = function _templateObject() {
-      return data;
-    };
-
-    return data;
-  }
-  var SvgWrapper = styled__default.div(_templateObject$2(), function (props) {
+  var _templateObject$2;
+  var SvgWrapper = styled__default.div(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  padding: ", ";\n  border: 1px solid\n    ", ";\n  text-align: center;\n  display: flex;\n  flex-flow: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;\n  background-color: ", ";\n  color: ", ";\n\n  h1 {\n    color: ", ";\n  }\n\n  svg {\n    margin-left: auto;\n    margin-right: auto;\n    max-height: 80px;\n    width: auto;\n    /*condition*/\n\n    .fillColor {\n      fill: ", ";\n    }\n\n    .outlineColor {\n      fill: ", ";\n    }\n  }\n  @media (max-width: ", ") {\n    margin-bottom: ", ";\n  }\n"])), function (props) {
     return props.theme.marginPaddings[4];
   }, function (props) {
     return props.hasBorder ? props.theme.colors.borderColor : props.theme.colors.ntrlMin;
   }, function (_ref) {
     var isChecked = _ref.isChecked,
         theme = _ref.theme;
-    return isChecked ? theme.colors.ntrlMin : theme.colors.gray;
+    return isChecked ? theme.colors.primary : theme.colors.gray;
   }, function (_ref2) {
     var isChecked = _ref2.isChecked,
         theme = _ref2.theme;
@@ -7333,10 +7326,14 @@
   }, function (_ref3) {
     var isChecked = _ref3.isChecked,
         theme = _ref3.theme;
-    return isChecked ? 'white' : theme.colors.base;
+    return isChecked ? theme.colors.ntrlMin : theme.colors.primary;
   }, function (_ref4) {
     var isChecked = _ref4.isChecked,
         theme = _ref4.theme;
+    return isChecked ? 'white' : theme.colors.base;
+  }, function (_ref5) {
+    var isChecked = _ref5.isChecked,
+        theme = _ref5.theme;
     return isChecked ? theme.colors.primary : 'white';
   }, media.sm, function (props) {
     return props.theme.marginPaddings[2];
@@ -7345,21 +7342,13 @@
     isChecked: false
   };
 
-  function _templateObject$3() {
-    var data = _taggedTemplateLiteral(["\n  .outlineColor {\n    fill: #ffffff;\n  }\n  display: flex;\n  flex-flow: row nowrap;\n\n  button {\n    flex-basis: 25%;\n    width: 100%;\n    cursor: pointer;\n    padding: 0;\n    &:not(:last-child) {\n      margin-right: ", ";\n    }\n  }\n  .outlineColor {\n    fill: white;\n  }\n\n  @media (max-width: ", ") {\n    display: block;\n    button {\n      &:not(:last-child) {\n        margin-right: 0;\n      }\n    }\n  }\n"]);
-
-    _templateObject$3 = function _templateObject() {
-      return data;
-    };
-
-    return data;
-  }
-  var Body = styled__default.div(_templateObject$3(), function (props) {
+  var _templateObject$3;
+  var Body = styled__default.div(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n  .outlineColor {\n    fill: #ffffff;\n  }\n  display: flex;\n  flex-flow: row nowrap;\n\n  button {\n    flex-basis: 25%;\n    width: 100%;\n    cursor: pointer;\n    padding: 0;\n    &:not(:last-child) {\n      margin-right: ", ";\n    }\n  }\n  .outlineColor {\n    fill: white;\n  }\n\n  @media (max-width: ", ") {\n    display: block;\n    button {\n      &:not(:last-child) {\n        margin-right: 0;\n      }\n    }\n  }\n"])), function (props) {
     return props.theme.marginPaddings[2];
   }, media.sm);
 
   var Shoes = (function (props) {
-    return React__default.createElement("svg", _extends({
+    return /*#__PURE__*/React__default.createElement("svg", _extends({
       version: "1.1",
       id: "svg-shoes",
       xmlns: "http://www.w3.org/2000/svg",
@@ -7368,22 +7357,44 @@
       y: "0px",
       viewBox: "0 0 83.8 83.8",
       xmlSpace: "preserve"
-    }, props), React__default.createElement("circle", {
+    }, props), /*#__PURE__*/React__default.createElement("circle", {
       fill: "#fff",
       cx: "41.9",
       cy: "41.9",
       r: "41.9"
-    }), React__default.createElement("path", {
+    }), /*#__PURE__*/React__default.createElement("path", {
       d: "M61.12,56.33a1.22,1.22,0,1,1-1.22-1.21A1.22,1.22,0,0,1,61.12,56.33Z"
-    }), React__default.createElement("path", {
+    }), /*#__PURE__*/React__default.createElement("path", {
       d: "M63.7,51.62a14.51,14.51,0,0,0-7.79-4,1.17,1.17,0,0,0-1,.3,7,7,0,0,1-4.3,1.43,6.5,6.5,0,0,1-5.48-3l-.07-.12L38.61,37A74.75,74.75,0,0,0,24.39,21.81a1.22,1.22,0,0,0-1.52,0,16.11,16.11,0,0,0-3.8,4.35,14.21,14.21,0,0,0-1.91,9.94v0a11.13,11.13,0,0,0,1.15,3.14,18.64,18.64,0,0,1,2.48,9V60.2A1.22,1.22,0,0,0,22,61.42h3.86a1.22,1.22,0,0,0,1.22-1.22V49.42a14.33,14.33,0,0,1,1.36-6.09A38.51,38.51,0,0,1,38.79,57.15a7.08,7.08,0,0,0,6.44,4.27h7.91A57.75,57.75,0,0,0,62.23,61c1.16-.2,4.69-.81,4.69-3.65C66.92,55.75,65.66,53.52,63.7,51.62Zm-39-2.2V59H23.22V48.27c0-.3,0-.62,0-1a21.72,21.72,0,0,0-2.72-9.19,38.86,38.86,0,0,1,6.05,3.67A16.07,16.07,0,0,0,24.66,49.42Zm37.16,9.13a56.25,56.25,0,0,1-8.68.43H45.23A4.65,4.65,0,0,1,41,56.17,40.59,40.59,0,0,0,19.44,35a12.14,12.14,0,0,1,1.72-7.6,13.43,13.43,0,0,1,2.48-3.05,72.42,72.42,0,0,1,13,14.1L43,47.58a9,9,0,0,0,7.59,4.17,9.89,9.89,0,0,0,5.45-1.67A12.39,12.39,0,0,1,62,53.36c1.61,1.57,2.48,3.2,2.48,3.94C64.49,57.8,63.49,58.27,61.82,58.55Z"
-    }), React__default.createElement("path", {
+    }), /*#__PURE__*/React__default.createElement("path", {
       d: "M57.25,56.33A1.21,1.21,0,0,1,56,57.55H45.21a1.22,1.22,0,1,1,0-2.43H56A1.21,1.21,0,0,1,57.25,56.33Z"
     }));
   });
 
+  var Clothing = (function (props) {
+    return /*#__PURE__*/React__default.createElement("svg", _extends({
+      version: "1.1",
+      id: "Layer_1",
+      xmlns: "http://www.w3.org/2000/svg",
+      xmlnsXlink: "http://www.w3.org/1999/xlink",
+      x: "0px",
+      y: "0px",
+      viewBox: "0 0 85.2 85.2",
+      xmlSpace: "preserve"
+    }, props), /*#__PURE__*/React__default.createElement("circle", {
+      className: "st0",
+      cx: "42.6",
+      cy: "42.6",
+      r: "42.6"
+    }), /*#__PURE__*/React__default.createElement("path", {
+      d: "M69.4,58.9C69,56.7,68,55,66.2,53.6l-4.4-3.3c-4.4-3.3-8.8-6.5-13.2-9.8c-0.6-0.4-1.3-0.8-2.3-1.2l-0.1,0 c-0.6-0.2-0.6-0.2-0.7-1c0-0.6,0.2-0.9,0.7-1.1c3-1.5,4.6-4.7,4.2-8c-0.5-3.6-3.4-6.4-7-6.7c-3.5-0.4-6.9,1.8-8.1,5.2 c-0.5,1.5,0.1,3.1,1.6,3.6c1.5,0.6,3.1-0.1,3.8-1.6l0.1-0.2c0-0.1,0.1-0.2,0.1-0.3c0.4-0.9,1.4-1.3,2.3-1.1c1,0.2,1.7,1,1.7,2 c0,1.1-0.6,1.8-1.6,2.2c-2.1,0.7-3.3,2.4-3.3,4.6v0.5c0,0.5,0,1.1,0,1.7v0.1c0,0,0,0-0.1,0c-1,0.2-2,0.7-2.9,1.4L19,53.7 c-1.7,1.3-2.7,2.9-3.1,4.8c-0.2,1-0.2,2-0.2,3c0,0.4,0.3,1,0.7,1.2c0.4,0.2,1,0,1.3-0.1c0.6-0.3,1.1-0.7,1.6-1.1 c0.2-0.2,0.5-0.3,0.9-0.3h5.2c12.5,0,25.4,0,38,0h0c1.8,0,2.9,0.4,3.9,1.2c0.2,0.2,0.6,0.5,1,0.5h0c0.4,0,0.8-0.3,1.1-0.7l0.1-0.1 v-2.9L69.4,58.9z M42.2,36.3c0.1-0.9,0.6-1.5,1.6-1.8c2-0.6,3.2-2.2,3.3-4.1c0.1-2.2-1.4-4.1-3.5-4.6c-2.2-0.5-4.3,0.6-5.2,2.7 l0,0.1c0,0,0,0.1,0,0.1c-0.1,0.3-0.4,0.4-0.7,0.3c-0.1-0.1-0.3-0.1-0.2-0.6c0.5-1.5,1.7-2.7,3.3-3.3c1.6-0.6,3.3-0.4,4.7,0.5 c1.6,1,2.5,2.8,2.5,4.7c0,1.9-1.1,3.6-2.8,4.6C45.1,35,45,35,44.9,35.1l-0.2,0.1c-1.1,0.6-1.7,1.5-1.7,2.7l0,1h-0.9 c0-0.2,0-0.4,0-0.6C42.1,37.6,42.1,37,42.2,36.3z M47.3,45.3c-1.5-1-3.1-1.6-4.7-1.6c-1.6,0-3.2,0.5-4.6,1.5c-1.9,1.3-3.8,2.7-5.7,4 l-0.7,0.5c-0.3,0.2-0.6,0.6-0.6,0.9c0,0.3,0,0.6,0.2,0.9c0.4,0.5,1.1,0.6,1.7,0.2c0,0,0.1-0.1,0.2-0.1l1.7-1.2 c1.5-1.1,3-2.1,4.5-3.2c0.6-0.4,1.2-0.7,1.8-0.9c1.7-0.5,3.4-0.2,5,0.9c2.9,2.1,5.8,4.1,8.7,6.2l3.1,2.2l4.2,3.1H23.3l3.4-2.5l2-1.5 l0,0l1.1-0.8c0.1,0,0.1-0.1,0.2-0.1c0.6-0.5,0.7-1.2,0.3-1.7c-0.4-0.5-1.1-0.6-1.7-0.2c-0.4,0.2-0.7,0.5-1,0.7l-9.4,6.7 c0.1-1,0.5-1.9,1.1-2.7c0.3-0.4,0.7-0.8,1.1-1.1c4-3,8-5.9,12-8.9l5.7-4.2c1.1-0.8,2.2-1.2,3.5-1.2h0.7c0.7,0,1.5,0,2.2,0.1 c0.8,0.1,1.6,0.4,2.5,1l17.8,13.1c1.3,0.9,2,2.2,2.2,3.7L47.3,45.3z"
+    }), /*#__PURE__*/React__default.createElement("path", {
+      d: "M42.6,42.6L42.6,42.6z"
+    }));
+  });
+
   var Bags = (function (props) {
-    return React__default.createElement("svg", _extends({
+    return /*#__PURE__*/React__default.createElement("svg", _extends({
       version: "1.1",
       id: "svg-bags",
       xmlns: "http://www.w3.org/2000/svg",
@@ -7392,25 +7403,25 @@
       y: "0px",
       viewBox: "0 0 83.8 83.8",
       xmlSpace: "preserve"
-    }, props), React__default.createElement("circle", {
+    }, props), /*#__PURE__*/React__default.createElement("circle", {
       fill: "#fff",
       cx: "41.9",
       cy: "41.9",
       r: "41.9"
-    }), React__default.createElement("g", null, React__default.createElement("path", {
+    }), /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("path", {
       fill: "#010101",
       d: "M65.4,33.4H52.3v-5.8c0-5.7-4.6-10.4-10.4-10.4s-10.4,4.6-10.4,10.4v5.8H18.4c-0.4,0-0.7,0-0.9,0.3 c-0.2,0.2-0.4,0.6-0.3,0.9l4.6,25c0.6,3.5,3.7,6,7.2,6.1h25.9c3.6-0.1,6.6-2.7,7.2-6.2l4.6-25c0.1-0.3-0.1-0.7-0.3-0.9 C66.1,33.5,65.8,33.3,65.4,33.4z M34,27.6c0-4.4,3.6-7.9,7.9-7.9s7.9,3.6,7.9,7.9v5.8H34V27.6z M59.6,59.3c-0.4,2.3-2.4,4-4.8,4H29 c-2.4,0-4.4-1.7-4.8-4l-4.3-23.5H64L59.6,59.3z"
-    }), React__default.createElement("path", {
+    }), /*#__PURE__*/React__default.createElement("path", {
       fill: "#010101",
       d: "M51.1,47.7c0.7,0,1.2-0.5,1.2-1.2v-3.7c0-0.7-0.5-1.2-1.2-1.2c-0.7,0-1.2,0.5-1.2,1.2v3.7 C49.9,47.2,50.4,47.7,51.1,47.7z"
-    }), React__default.createElement("path", {
+    }), /*#__PURE__*/React__default.createElement("path", {
       fill: "#010101",
       d: "M32.8,47.7c0.7,0,1.2-0.5,1.2-1.2v-3.7c0-0.7-0.5-1.2-1.2-1.2c-0.7,0-1.2,0.5-1.2,1.2v3.7 C31.5,47.2,32.1,47.7,32.8,47.7z"
     })));
   });
 
   var Accessories = (function (props) {
-    return React__default.createElement("svg", _extends({
+    return /*#__PURE__*/React__default.createElement("svg", _extends({
       version: "1.1",
       id: "svg-accessories",
       xmlns: "http://www.w3.org/2000/svg",
@@ -7420,18 +7431,18 @@
       viewBox: "0 0 83.8 83.8",
       xmlSpace: "preserve",
       color: "#fff"
-    }, props), React__default.createElement("circle", {
+    }, props), /*#__PURE__*/React__default.createElement("circle", {
       fill: "#fff",
       cx: "41.9",
       cy: "41.9",
       r: "41.9"
-    }), React__default.createElement("path", {
+    }), /*#__PURE__*/React__default.createElement("path", {
       d: "M66.1,45.7v-8.5c0-3-2.6-5.8-7.5-7.7c-4.5-1.8-10.3-2.8-16.6-2.8s-12.2,1-16.7,2.8c-4.9,2-7.6,4.7-7.6,7.7v8.5 c0,1.8,1,4.5,5.6,6.9c3.1,1.6,7.5,2.8,12.3,3.3h0.1l0,0c0.8,1.1,2,1.7,3.4,1.7h5.8c1.2,0,2.3-0.5,3.1-1.4l0,0h2 c2.7,0,5.4,0.6,7.8,1.8c1.8,0.9,4,0.8,5.7-0.2c1.6-1,2.6-2.8,2.6-4.8c0-1.3-0.5-2.6-1.3-3.6l-0.1-0.1l0.1-0.1 C65.6,48.1,66.1,46.9,66.1,45.7z M35,47.4c0,0.2,0,0.3,0,0.4v5.4l-0.1,0c-4.1-0.6-7.6-1.6-10.2-2.9c-2.7-1.4-4.2-3-4.2-4.6V42 l0.2,0.2c4.2,3.4,11.4,4.7,14.3,5l0.1,0L35,47.4z M46.4,53.5c0,0.8-0.7,1.5-1.6,1.5h-5.8c-0.9,0-1.5-0.7-1.5-1.5v-1.5H42 c0.7,0,1.3-0.6,1.3-1.3c0-0.7-0.6-1.3-1.3-1.3h-4.5v-1.5c0-0.9,0.7-1.5,1.5-1.5h5.8c0.9,0,1.6,0.7,1.6,1.5V53.5z M47.8,44.8 L47.8,44.8l-0.1,0c-0.8-0.7-1.8-1.1-2.8-1.1h-5.8c-1,0-2,0.4-2.8,1.1l0,0l-0.1,0c-3.7-0.4-7.2-1.2-9.9-2.3l0,0l0,0 c-0.1-0.2-0.2-0.4-0.2-0.5c0-0.5,0.9-1.6,4.2-2.6c3.2-1,7.3-1.5,11.8-1.5c4.4,0,8.6,0.5,11.7,1.5c2.8,0.9,4.1,2,4.1,2.6 c0,0.1,0,0.3-0.2,0.5l0,0l0,0C54.8,43.6,51.5,44.4,47.8,44.8z M62.1,55.6C61.6,55.9,61,56,60.4,56c-0.5,0-1-0.1-1.5-0.3 c-2.8-1.4-5.9-2.1-8.9-2.1h-1v-5.9h3c3.5,0,6.9,0.9,9.9,2.6c1,0.5,1.6,1.6,1.6,2.7C63.5,54.1,63,55,62.1,55.6z M63.5,45.7 c0,0.7-0.3,1.3-0.8,2l-0.1,0.1l-0.1,0c-1.7-0.9-3.5-1.6-5.4-2l-0.4-0.1l0.4-0.1c2.6-0.9,4.7-2,6.2-3.2l0.2-0.2V45.7z M60.4,41.1 l-0.1,0.1L60.2,41c-0.5-1.7-2.5-3.1-5.8-4.2c-3.4-1.1-7.8-1.7-12.5-1.7c-4.7,0-9.2,0.6-12.5,1.7c-3.4,1.1-5.3,2.5-5.9,4.2l-0.1,0.2 L23.4,41c-2-1.2-3.1-2.6-3.1-3.9c0-1.9,2.2-3.8,5.9-5.3c4.2-1.7,9.8-2.6,15.7-2.6c12.7,0,21.5,4.2,21.5,8 C63.5,38.5,62.4,39.8,60.4,41.1z"
     }));
   });
 
   var Watches = (function (props) {
-    return React__default.createElement("svg", _extends({
+    return /*#__PURE__*/React__default.createElement("svg", _extends({
       version: "1.1",
       id: "svg-watches",
       xmlns: "http://www.w3.org/2000/svg",
@@ -7440,104 +7451,54 @@
       y: "0px",
       viewBox: "0 0 83.8 83.8",
       xmlSpace: "preserve"
-    }, props), React__default.createElement("circle", {
+    }, props), /*#__PURE__*/React__default.createElement("circle", {
       fill: "#fff",
       cx: "41.9",
       cy: "41.9",
       r: "41.9"
-    }), React__default.createElement("path", {
+    }), /*#__PURE__*/React__default.createElement("path", {
       d: "M55.7,40v-3.8c0-4.1-2.8-7.5-6.6-8.3v-7.4c0-1.6-1.3-2.8-2.8-2.8h-9.5c-1.6,0-2.8,1.3-2.8,2.8v7.4c-3.8,0.9-6.6,4.3-6.6,8.3 v11.4c0,4.1,2.8,7.5,6.6,8.3v7.4c0,1.6,1.3,2.8,2.8,2.8h9.5c1.6,0,2.8-1.3,2.8-2.8v-7.4c3.8-0.9,6.6-4.3,6.6-8.3v-3.8 c0.5,0,0.9-0.4,0.9-0.9V41C56.6,40.5,56.2,40,55.7,40L55.7,40z M47.1,63.4c0,0.5-0.4,0.9-0.9,0.9h-9.5c-0.5,0-0.9-0.4-0.9-0.9v-7.2 h11.4V63.4z M53.8,47.6c0,3.7-3,6.6-6.6,6.6H35.8c-3.7,0-6.6-3-6.6-6.6V36.2c0-3.7,3-6.6,6.6-6.6h1.4c0.5,0,0.9-0.4,0.9-0.9 c0-0.5-0.4-0.9-0.9-0.9h-1.4v-7.2c0-0.5,0.4-0.9,0.9-0.9h9.5c0.5,0,0.9,0.4,0.9,0.9v7.2h-1.4c-0.5,0-0.9,0.4-0.9,0.9 c0,0.5,0.4,0.9,0.9,0.9h1.4c3.7,0,6.6,3,6.6,6.6V47.6z M53.8,47.6"
-    }), React__default.createElement("path", {
+    }), /*#__PURE__*/React__default.createElement("path", {
       d: "M46.2,66.4h-9.5c-1.7,0-3.1-1.4-3.1-3.1v-7.2c-3.9-1-6.6-4.5-6.6-8.5V36.2c0-4,2.8-7.5,6.6-8.5v-7.2c0-1.7,1.4-3.1,3.1-3.1 h9.5c1.7,0,3.1,1.4,3.1,3.1v7.2c3.9,1,6.6,4.5,6.6,8.5v3.6c0.5,0.1,0.9,0.6,0.9,1.2v1.9c0,0.6-0.4,1.1-0.9,1.2v3.6 c0,4-2.8,7.5-6.6,8.5v7.2C49.3,65.1,47.9,66.4,46.2,66.4z M36.7,17.9c-1.4,0-2.6,1.2-2.6,2.6v7.6l-0.2,0c-3.7,0.9-6.4,4.2-6.4,8.1 v11.4c0,3.8,2.7,7.2,6.4,8.1l0.2,0v7.6c0,1.4,1.2,2.6,2.6,2.6h9.5c1.4,0,2.6-1.2,2.6-2.6v-7.6l0.2,0c3.7-0.9,6.4-4.2,6.4-8.1v-4h0.2 c0.4,0,0.7-0.3,0.7-0.7V41c0-0.4-0.3-0.7-0.7-0.7h-0.2v-4c0-3.8-2.7-7.2-6.4-8.1l-0.2,0v-7.6c0-1.4-1.2-2.6-2.6-2.6H36.7z M46.2,64.6h-9.5c-0.7,0-1.2-0.5-1.2-1.2v-7.5h11.9v7.5C47.4,64,46.9,64.6,46.2,64.6z M36,56.4v7c0,0.4,0.3,0.7,0.7,0.7h9.5 c0.4,0,0.7-0.3,0.7-0.7v-7H36z M47.1,54.5H35.8c-3.8,0-6.9-3.1-6.9-6.9V36.2c0-3.8,3.1-6.9,6.9-6.9h1.4c0.4,0,0.7-0.3,0.7-0.7 c0-0.4-0.3-0.7-0.7-0.7h-1.7v-7.5c0-0.7,0.5-1.2,1.2-1.2h9.5c0.7,0,1.2,0.5,1.2,1.2v7.5h-1.7c-0.4,0-0.7,0.3-0.7,0.7 c0,0.4,0.3,0.7,0.7,0.7h1.4c3.8,0,6.9,3.1,6.9,6.9v11.4C54,51.4,50.9,54.5,47.1,54.5z M35.8,29.8c-3.5,0-6.4,2.9-6.4,6.4v11.4 c0,3.5,2.9,6.4,6.4,6.4h11.4c3.5,0,6.4-2.9,6.4-6.4V36.2c0-3.5-2.9-6.4-6.4-6.4h-1.4c-0.7,0-1.2-0.5-1.2-1.2c0-0.7,0.5-1.2,1.2-1.2 h1.2v-7c0-0.4-0.3-0.7-0.7-0.7h-9.5c-0.4,0-0.7,0.3-0.7,0.7v7h1.2c0.7,0,1.2,0.5,1.2,1.2c0,0.7-0.5,1.2-1.2,1.2H35.8z"
-    }), React__default.createElement("path", {
+    }), /*#__PURE__*/React__default.createElement("path", {
       d: "M45.2,41h-2.8v-4.7c0-0.5-0.4-0.9-0.9-0.9s-0.9,0.4-0.9,0.9v5.7c0,0.5,0.4,0.9,0.9,0.9h3.8c0.5,0,0.9-0.4,0.9-0.9 C46.2,41.4,45.8,41,45.2,41L45.2,41z M45.2,41"
-    }), React__default.createElement("path", {
+    }), /*#__PURE__*/React__default.createElement("path", {
       d: "M45.2,43.1h-3.8c-0.7,0-1.2-0.5-1.2-1.2v-5.7c0-0.7,0.5-1.2,1.2-1.2s1.2,0.5,1.2,1.2v4.5h2.6c0.7,0,1.2,0.5,1.2,1.2 S45.9,43.1,45.2,43.1z M41.4,35.5c-0.4,0-0.7,0.3-0.7,0.7v5.7c0,0.4,0.3,0.7,0.7,0.7h3.8c0.4,0,0.7-0.3,0.7-0.7s-0.3-0.7-0.7-0.7 h-3.1v-5C42.1,35.8,41.8,35.5,41.4,35.5z"
-    }), React__default.createElement("path", {
+    }), /*#__PURE__*/React__default.createElement("path", {
       d: "M47.1,31.5H35.8c-2.6,0-4.7,2.1-4.7,4.7v11.4c0,2.6,2.1,4.7,4.7,4.7h11.4c2.6,0,4.7-2.1,4.7-4.7V36.2 C51.9,33.6,49.8,31.5,47.1,31.5L47.1,31.5z M47.1,50.5h-4.7v-0.8c0-0.5-0.4-0.9-0.9-0.9s-0.9,0.4-0.9,0.9v0.8h-4.7 c-1.6,0-2.8-1.3-2.8-2.8v-4.7h0.8c0.5,0,0.9-0.4,0.9-0.9c0-0.5-0.4-0.9-0.9-0.9h-0.8v-4.7c0-1.6,1.3-2.8,2.8-2.8h11.4 c1.6,0,2.8,1.3,2.8,2.8V41h-0.8c-0.5,0-0.9,0.4-0.9,0.9c0,0.5,0.4,0.9,0.9,0.9H50v4.7C50,49.2,48.7,50.5,47.1,50.5L47.1,50.5z M47.1,50.5"
-    }), React__default.createElement("path", {
+    }), /*#__PURE__*/React__default.createElement("path", {
       d: "M47.1,52.6H35.8c-2.8,0-5-2.2-5-5V36.2c0-2.8,2.2-5,5-5h11.4c2.8,0,5,2.2,5,5v11.4C52.1,50.4,49.9,52.6,47.1,52.6z M35.8,31.7c-2.5,0-4.5,2-4.5,4.5v11.4c0,2.5,2,4.5,4.5,4.5h11.4c2.5,0,4.5-2,4.5-4.5V36.2c0-2.5-2-4.5-4.5-4.5H35.8z M47.1,50.7h-5 v-1c0-0.4-0.3-0.7-0.7-0.7s-0.7,0.3-0.7,0.7v1h-5c-1.7,0-3.1-1.4-3.1-3.1v-5h1c0.4,0,0.7-0.3,0.7-0.7s-0.3-0.7-0.7-0.7h-1v-5 c0-1.7,1.4-3.1,3.1-3.1h11.4c1.7,0,3.1,1.4,3.1,3.1v5h-1c-0.4,0-0.7,0.3-0.7,0.7s0.3,0.7,0.7,0.7h1v5C50.2,49.3,48.8,50.7,47.1,50.7 z M42.6,50.2h4.5c1.4,0,2.6-1.2,2.6-2.6v-4.5h-0.5c-0.7,0-1.2-0.5-1.2-1.2s0.5-1.2,1.2-1.2h0.5v-4.5c0-1.4-1.2-2.6-2.6-2.6H35.8 c-1.4,0-2.6,1.2-2.6,2.6v4.5h0.5c0.7,0,1.2,0.5,1.2,1.2s-0.5,1.2-1.2,1.2h-0.5v4.5c0,1.4,1.2,2.6,2.6,2.6h4.5v-0.5 c0-0.7,0.5-1.2,1.2-1.2s1.2,0.5,1.2,1.2V50.2z"
-    }), React__default.createElement("path", {
+    }), /*#__PURE__*/React__default.createElement("path", {
       d: "M41.4,29.6c0.5,0,0.9-0.4,0.9-0.9c0-0.5-0.4-0.9-0.9-0.9h0c-0.5,0-0.9,0.4-0.9,0.9C40.5,29.2,40.9,29.6,41.4,29.6L41.4,29.6 z M41.4,29.6"
-    }), React__default.createElement("path", {
+    }), /*#__PURE__*/React__default.createElement("path", {
       d: "M41.4,29.8c-0.7,0-1.2-0.5-1.2-1.2c0-0.7,0.5-1.2,1.2-1.2s1.2,0.5,1.2,1.2C42.6,29.3,42.1,29.8,41.4,29.8z M41.4,27.9 c-0.4,0-0.7,0.3-0.7,0.7s0.3,0.7,0.7,0.7c0.4,0,0.7-0.3,0.7-0.7S41.8,27.9,41.4,27.9z"
     }));
   });
 
-  function _templateObject$4() {
-    var data = _taggedTemplateLiteral(["\n  color: ", ";\n  margin-top: ", ";\n"]);
-
-    _templateObject$4 = function _templateObject() {
-      return data;
-    };
-
-    return data;
-  }
-  var ErrorMessage = styled__default.div(_templateObject$4(), function (props) {
+  var _templateObject$4;
+  var ErrorMessage = styled__default.div(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral(["\n  color: ", ";\n  margin-top: ", ";\n"])), function (props) {
     return props.theme.colors.primary;
   }, function (props) {
     return props.theme.marginPaddings[0];
   });
 
-  function _templateObject2() {
-    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 _templateObject$5, _templateObject2;
+  var disabledButtonStyle = styled.css(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteral(["\n  cursor: not-allowed;\n  opacity: 0.4;\n"])));
+  var baseButtonStyle = styled.css(_templateObject2 || (_templateObject2 = _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"])));
 
-    _templateObject2 = function _templateObject2() {
-      return data;
-    };
+  var _excluded = ["children"];
 
-    return data;
-  }
-
-  function _templateObject$5() {
-    var data = _taggedTemplateLiteral(["\n  cursor: not-allowed;\n  opacity: 0.4;\n"]);
-
-    _templateObject$5 = function _templateObject() {
-      return data;
-    };
-
-    return data;
-  }
-  var disabledButtonStyle = styled.css(_templateObject$5());
-  var baseButtonStyle = styled.css(_templateObject2());
-
-  function _templateObject$6() {
-    var data = _taggedTemplateLiteral(["\n  outline: none;\n  cursor: pointer;\n  background-color: transparent;\n  border: none;\n  &:disabled {\n    ", ";\n  }\n"]);
-
-    _templateObject$6 = function _templateObject() {
-      return data;
-    };
-
-    return data;
-  }
-  var Button = styled__default.button(_templateObject$6(), disabledButtonStyle);
+  var _templateObject$6;
+  var Button = styled__default.button(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteral(["\n  outline: none;\n  cursor: pointer;\n  background-color: transparent;\n  border: none;\n  &:disabled {\n    ", ";\n  }\n"])), disabledButtonStyle);
 
   var WrapperButton = function WrapperButton(_ref) {
     var children = _ref.children,
-        restProps = _objectWithoutProperties(_ref, ["children"]);
+        restProps = _objectWithoutProperties(_ref, _excluded);
 
-    return React__default.createElement(Button, restProps, children);
+    return /*#__PURE__*/React__default.createElement(Button, restProps, children);
   };
 
-  function _templateObject2$1() {
-    var data = _taggedTemplateLiteral(["\n  margin-top: 10px;\n  font-size: 14px;\n  text-transform: uppercase;\n"]);
-
-    _templateObject2$1 = function _templateObject2() {
-      return data;
-    };
-
-    return data;
-  }
-
-  function _templateObject$7() {
-    var data = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n"]);
-
-    _templateObject$7 = function _templateObject() {
-      return data;
-    };
-
-    return data;
-  }
+  var _templateObject$7, _templateObject2$1;
   var categories = catArray;
 
   var getSvg = function getSvg() {
@@ -7545,26 +7506,29 @@
 
     switch (category) {
       case interestCategories.BAGS:
-        return React__default.createElement(Bags, null);
+        return /*#__PURE__*/React__default.createElement(Bags, null);
 
       case interestCategories.SHOES:
-        return React__default.createElement(Shoes, null);
+        return /*#__PURE__*/React__default.createElement(Shoes, null);
+
+      case interestCategories.APPAREL:
+        return /*#__PURE__*/React__default.createElement(Clothing, null);
 
       case interestCategories.ACCESSORIES:
-        return React__default.createElement(Accessories, null);
+        return /*#__PURE__*/React__default.createElement(Accessories, null);
 
       case interestCategories.WATCHES:
-        return React__default.createElement(Watches, null);
+        return /*#__PURE__*/React__default.createElement(Watches, null);
 
       default:
         return null;
     }
   };
 
-  var Container = styled__default.div(_templateObject$7(), function (props) {
+  var Container = styled__default.div(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n"])), function (props) {
     return props.theme.marginPaddings[5];
   });
-  var CategoryTitle = styled__default.h1(_templateObject2$1());
+  var CategoryTitle = styled__default.h1(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n  margin-top: 10px;\n  font-size: 14px;\n  text-transform: uppercase;\n"])));
   /**
    * InterestCatSelector is a specialized selector for select luxity specific interest categories
    */
@@ -7573,8 +7537,8 @@
     var onCategoryChange = _ref.onCategoryChange,
         errorMessage = _ref.errorMessage,
         category = _ref.category;
-    return React__default.createElement(Container, null, React__default.createElement(Body, null, categories.map(function (cat, index) {
-      return React__default.createElement(WrapperButton, {
+    return /*#__PURE__*/React__default.createElement(Container, null, /*#__PURE__*/React__default.createElement(Body, null, categories.map(function (cat, index) {
+      return /*#__PURE__*/React__default.createElement(WrapperButton, {
         key: "cat-".concat(index),
         id: "cat-".concat(index),
         type: "button",
@@ -7582,10 +7546,10 @@
         onClick: function onClick() {
           return onCategoryChange(cat.value);
         }
-      }, React__default.createElement(SvgWrapper, {
+      }, /*#__PURE__*/React__default.createElement(SvgWrapper, {
         isChecked: category === cat.value
-      }, getSvg(cat.value), React__default.createElement(CategoryTitle, null, cat.categoryTitle)));
-    })), errorMessage && React__default.createElement(ErrorMessage, null, errorMessage));
+      }, getSvg(cat.value), /*#__PURE__*/React__default.createElement(CategoryTitle, null, cat.categoryTitle)));
+    })), errorMessage && /*#__PURE__*/React__default.createElement(ErrorMessage, null, errorMessage));
   };
 
   InterestCatSelector.defaultProps = {
@@ -7597,16 +7561,10 @@
   };
   var CategoryInterestSelector = themed(InterestCatSelector);
 
-  function _templateObject$8() {
-    var data = _taggedTemplateLiteral(["\n  ", ";\n  background-color: transparent;\n  color: ", ";\n  &:hover {\n    color: ", ";\n  }\n  &:disabled {\n    ", ";\n    color: ", ";\n  }\n"]);
-
-    _templateObject$8 = function _templateObject() {
-      return data;
-    };
+  var _excluded$1 = ["children"];
 
-    return data;
-  }
-  var Button$1 = styled__default.button(_templateObject$8(), baseButtonStyle, function (props) {
+  var _templateObject$8;
+  var Button$1 = styled__default.button(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteral(["\n  ", ";\n  background-color: transparent;\n  color: ", ";\n  &:hover {\n    color: ", ";\n  }\n  &:disabled {\n    ", ";\n    color: ", ";\n  }\n"])), baseButtonStyle, function (props) {
     return props.theme.colors.base;
   }, function (props) {
     return props.theme.colors.primary;
@@ -7616,9 +7574,9 @@
 
   var TextButton = function TextButton(_ref) {
     var children = _ref.children,
-        restProps = _objectWithoutProperties(_ref, ["children"]);
+        restProps = _objectWithoutProperties(_ref, _excluded$1);
 
-    return React__default.createElement(Button$1, restProps, children);
+    return /*#__PURE__*/React__default.createElement(Button$1, restProps, children);
   };
 
   TextButton.defaultProps = {
@@ -7626,16 +7584,10 @@
   };
   var TextButton$1 = themed(TextButton);
 
-  function _templateObject$9() {
-    var data = _taggedTemplateLiteral(["\n  color: ", ";\n  background-color: ", ";\n  &:hover {\n    color: ", ";\n    background-color: ", ";\n  }\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n  }\n"]);
-
-    _templateObject$9 = function _templateObject() {
-      return data;
-    };
+  var _excluded$2 = ["children"];
 
-    return data;
-  }
-  var Button$2 = styled__default(TextButton$1)(_templateObject$9(), function (props) {
+  var _templateObject$9;
+  var Button$2 = styled__default(TextButton$1)(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteral(["\n  color: ", ";\n  background-color: ", ";\n  &:hover {\n    color: ", ";\n    background-color: ", ";\n  }\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n  }\n"])), function (props) {
     return props.theme.colors.ntrlMin;
   }, function (props) {
     return props.theme.colors.primary;
@@ -7651,40 +7603,22 @@
 
   var InvertedTextButton = function InvertedTextButton(_ref) {
     var children = _ref.children,
-        restProps = _objectWithoutProperties(_ref, ["children"]);
+        restProps = _objectWithoutProperties(_ref, _excluded$2);
 
-    return React__default.createElement(Button$2, restProps, children);
+    return /*#__PURE__*/React__default.createElement(Button$2, restProps, children);
   };
 
   var InvertedTextButton$1 = themed(InvertedTextButton);
 
-  function _templateObject2$2() {
-    var data = _taggedTemplateLiteral(["\n  .multiselector__selected-items,\n  .multiselector__selectable-items {\n    display: flex;\n    flex-flow: wrap;\n    margin-left: calc(-1 * ", ");\n    button {\n      &:hover {\n        color: ", ";\n        background-color: ", ";\n      }\n      border-color: ", ";\n      background-color: ", ";\n      color: ", ";\n      padding: ", ";\n      text-transform: none;\n      box-sizing: border-box;\n      animation: ", " ease-in-out\n        ", " forwards;\n      flex-basis: calc(25% - ", ");\n      margin-bottom: ", ";\n      margin-left: ", ";\n      text-overflow: ellipsis;\n      overflow-x: hidden;\n      min-height: 40px;\n\n      @media (max-width: ", ") {\n        flex-basis: calc(50% - ", ");\n      }\n    }\n  }\n\n  .multiselector__footer {\n    display: flex;\n    justify-content: center;\n    button {\n      &:hover {\n        color: ", ";\n        background-color: ", ";\n      }\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"]);
-
-    _templateObject2$2 = function _templateObject2() {
-      return data;
-    };
-
-    return data;
-  }
-
-  function _templateObject$a() {
-    var data = _taggedTemplateLiteral(["\n  from {\n    margin: 0;\n    max-height: 0px;\n    opacity: 0;\n  }\n  to {\n    max-height: ", ";\n    opacity: 1;\n  }\n"]);
-
-    _templateObject$a = function _templateObject() {
-      return data;
-    };
-
-    return data;
-  }
+  var _templateObject$a, _templateObject2$2;
   var ALL_ITEM = {
     id: 'ALL',
     name: 'ALL'
   };
   var multiSelectorItemMaxHeight = '3rem';
   var multiSelectorItemAnimationDuration = '300ms';
-  var multiselectorItemFadeIn = styled.keyframes(_templateObject$a(), multiSelectorItemMaxHeight);
-  var StyledMultiselector = styled__default.div(_templateObject2$2(), function (props) {
+  var multiselectorItemFadeIn = styled.keyframes(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral(["\n  from {\n    margin: 0;\n    max-height: 0px;\n    opacity: 0;\n  }\n  to {\n    max-height: ", ";\n    opacity: 1;\n  }\n"])), multiSelectorItemMaxHeight);
+  var StyledMultiselector = styled__default.div(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteral(["\n  .multiselector__selected-items,\n  .multiselector__selectable-items {\n    display: flex;\n    flex-flow: wrap;\n    margin-left: calc(-1 * ", ");\n    button {\n      &:hover {\n        color: ", ";\n        background-color: ", ";\n      }\n      border-color: ", ";\n      background-color: ", ";\n      color: ", ";\n      padding: ", ";\n      text-transform: none;\n      box-sizing: border-box;\n      animation: ", " ease-in-out\n        ", " forwards;\n      flex-basis: calc(25% - ", ");\n      margin-bottom: ", ";\n      margin-left: ", ";\n      text-overflow: ellipsis;\n      overflow-x: hidden;\n      min-height: 40px;\n\n      @media (max-width: ", ") {\n        flex-basis: calc(50% - ", ");\n      }\n    }\n  }\n\n  .multiselector__footer {\n    display: flex;\n    justify-content: center;\n    button {\n      &:hover {\n        color: ", ";\n        background-color: ", ";\n      }\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"])), function (props) {
     return props.theme.marginPaddings[2];
   }, function (props) {
     return props.theme.colors.ntrlMin;
@@ -7851,19 +7785,19 @@
             selected = _this$state.selected,
             pagination = _this$state.pagination,
             isLoading = _this$state.isLoading;
-        return React__default.createElement(StyledMultiselector, null, React__default.createElement("div", {
+        return /*#__PURE__*/React__default.createElement(StyledMultiselector, null, /*#__PURE__*/React__default.createElement("div", {
           "data-qe-id": identifier,
           className: "".concat(className, " ").concat(baseClass)
-        }, React__default.createElement("div", {
+        }, /*#__PURE__*/React__default.createElement("div", {
           className: "".concat(baseClass, "__selected-items")
         }, selected.map(function (item) {
-          return React__default.createElement(ItemRenderer, {
+          return /*#__PURE__*/React__default.createElement(ItemRenderer, {
             key: item.id,
             item: item,
             onSelect: _this.onRemoveItem,
             selected: true
           });
-        })), React__default.createElement(LuxityPageReady, {
+        })), /*#__PURE__*/React__default.createElement(LuxityPageReady, {
           ref: function ref(inst) {
             _this.pageReady = inst;
           },
@@ -7872,18 +7806,18 @@
           getRequestPromise: function getRequestPromise() {
             return triggerRequest();
           }
-        }), React__default.createElement("div", {
+        }), /*#__PURE__*/React__default.createElement("div", {
           className: "".concat(baseClass, "__selectable-items")
         }, list.map(function (item) {
-          return React__default.createElement(ItemRenderer, {
+          return /*#__PURE__*/React__default.createElement(ItemRenderer, {
             key: item.id,
             item: item,
             onSelect: _this.onAddItem,
             selected: false
           });
-        })), React__default.createElement("div", {
+        })), /*#__PURE__*/React__default.createElement("div", {
           className: "".concat(baseClass, "__footer")
-        }, React__default.createElement(InvertedTextButton$1, {
+        }, /*#__PURE__*/React__default.createElement(InvertedTextButton$1, {
           disabled: isLoading || !pagination.has_more_pages,
           onClick: _this.props.increaseLimit,
           type: "button"
@@ -7899,7 +7833,7 @@
       return _this;
     }
 
-    return GraphQLMultiSelector;
+    return _createClass(GraphQLMultiSelector);
   }(React__default.Component);
 
   GraphQLMultiSelector.defaultProps = {
@@ -7908,41 +7842,23 @@
   var GraphQLMultiSelector$1 = themed(GraphQLMultiSelector);
 
   var Search = (function (props) {
-    return React__default.createElement("svg", _extends({
+    return /*#__PURE__*/React__default.createElement("svg", _extends({
       width: "15",
       height: "15",
       viewBox: "0 0 15 15",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
-    }, props), React__default.createElement("path", {
+    }, props), /*#__PURE__*/React__default.createElement("path", {
       d: "M14.82 13.93L11.21 10.32C12.1 9.23 12.64 7.83 12.64 6.31C12.64 2.83 9.81 0 6.32 0C2.83 0 0 2.83 0 6.32C0 9.81 2.83 12.64 6.32 12.64C7.84 12.64 9.23 12.1 10.32 11.21L13.93 14.81C14.17 15.06 14.57 15.06 14.81 14.81C15.06 14.57 15.06 14.18 14.82 13.93ZM6.32 11.38C3.53 11.38 1.25 9.11 1.25 6.32C1.25 3.53 3.52 1.25 6.32 1.25C9.11 1.25 11.39 3.52 11.39 6.32C11.39 9.12 9.11 11.38 6.32 11.38Z",
       fill: "currentColor"
     }));
   });
 
-  function _templateObject2$3() {
-    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$3 = function _templateObject2() {
-      return data;
-    };
-
-    return data;
-  }
-
-  function _templateObject$b() {
-    var data = _taggedTemplateLiteral(["\n  font-size: ", ";\n  font-weight: bold;\n  margin-bottom: 0;\n  text-transform: uppercase;\n"]);
-
-    _templateObject$b = function _templateObject() {
-      return data;
-    };
-
-    return data;
-  }
-  var Title = styled__default.h1(_templateObject$b(), function (props) {
+  var _templateObject$b, _templateObject2$3;
+  var Title = styled__default.h1(_templateObject$b || (_templateObject$b = _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$3(), function (props) {
+  var InterestsSubheadingContainer = styled__default.div(_templateObject2$3 || (_templateObject2$3 = _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;
@@ -7956,20 +7872,12 @@
     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));
   };
 
-  function _templateObject$c() {
-    var data = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n  font-weight: bold;\n  display: flex;\n  align-items: center;\n  font-size: ", ";\n\n  .title__search,\n  .title__search {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    min-height: 30px;\n    margin-bottom: ", ";\n\n    svg {\n      margin-left: ", ";\n      fill: ", ";\n      stroke: ", ";\n    }\n\n    input {\n      width: 140px;\n      border: none;\n      font-size: ", ";\n      transition: 0.2s border-color ease-in-out;\n      margin-left: ", ";\n      padding: 0;\n\n      :focus {\n        border-color: ", ";\n        border-bottom: none;\n      }\n    }\n  }\n"]);
-
-    _templateObject$c = function _templateObject() {
-      return data;
-    };
-
-    return data;
-  }
+  var _templateObject$c;
 
   var Title$1 = function Title(_ref) {
     var baseClass = _ref.baseClass,
@@ -7977,12 +7885,12 @@
         title = _ref.title,
         searchPlaceHolder = _ref.searchPlaceHolder,
         onSearchChanged = _ref.onSearchChanged;
-    return React__default.createElement(InterestsSubheading, {
+    return /*#__PURE__*/React__default.createElement(InterestsSubheading, {
       className: "".concat(className, " ").concat(baseClass, "__title"),
       title: title
-    }, React__default.createElement("div", {
+    }, /*#__PURE__*/React__default.createElement("div", {
       className: "title__search"
-    }, React__default.createElement(Search, null), React__default.createElement("input", {
+    }, /*#__PURE__*/React__default.createElement(Search, null), /*#__PURE__*/React__default.createElement("input", {
       placeholder: searchPlaceHolder,
       type: "text",
       name: "search",
@@ -7990,7 +7898,7 @@
     })));
   };
 
-  var StyledTitle = styled__default(Title$1)(_templateObject$c(), function (props) {
+  var StyledTitle = styled__default(Title$1)(_templateObject$c || (_templateObject$c = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n  font-weight: bold;\n  display: flex;\n  align-items: center;\n  font-size: ", ";\n\n  .title__search,\n  .title__search {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    min-height: 30px;\n    margin-bottom: ", ";\n\n    svg {\n      margin-left: ", ";\n      fill: ", ";\n      stroke: ", ";\n    }\n\n    input {\n      width: 140px;\n      border: none;\n      font-size: ", ";\n      transition: 0.2s border-color ease-in-out;\n      margin-left: ", ";\n      padding: 0;\n\n      :focus {\n        border-color: ", ";\n        border-bottom: none;\n      }\n    }\n  }\n"])), function (props) {
     return props.theme.marginPaddings[2];
   }, function (props) {
     return props.theme.fontSizes[2];
@@ -8021,19 +7929,6 @@
 
     var _super = _createSuper(LuxityGraphQLMultiselector);
 
-    _createClass(LuxityGraphQLMultiselector, null, [{
-      key: "getDerivedStateFromProps",
-      value: function getDerivedStateFromProps(props, prevState) {
-        if (prevState.category !== props.category) {
-          return {
-            category: props.category
-          };
-        }
-
-        return null;
-      }
-    }]);
-
     function LuxityGraphQLMultiselector(props) {
       var _this;
 
@@ -8041,7 +7936,7 @@
 
       _this = _super.call(this, props);
 
-      _defineProperty(_assertThisInitialized(_this), "multiSelectorRef", React__default.createRef());
+      _defineProperty(_assertThisInitialized(_this), "multiSelectorRef", /*#__PURE__*/React__default.createRef());
 
       _defineProperty(_assertThisInitialized(_this), "increaseLimit", function () {
         _this.setState(function (prevState) {
@@ -8080,14 +7975,14 @@
             graphApi = _this$props.graphApi,
             identifier = _this$props.identifier,
             requestInstance = _this$props.requestInstance;
-        return React__default.createElement("div", {
+        return /*#__PURE__*/React__default.createElement("div", {
           className: baseClass
-        }, React__default.createElement(Title$2, {
+        }, /*#__PURE__*/React__default.createElement(Title$2, {
           title: title,
           baseClass: baseClass,
           searchPlaceHolder: searchPlaceHolder,
           onSearchChanged: _this.onSearchChanged
-        }), React__default.createElement(React.Fragment, null, React__default.createElement(GraphQLMultiSelector$1, {
+        }), /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(GraphQLMultiSelector$1, {
           triggerRequest: function triggerRequest() {
             return requestInstance.post(graphApi, {
               query: getGraphQuery(limit, 1, 'id|desc', category, nameFilter)
@@ -8116,10 +8011,21 @@
       value: function componentDidUpdate(prevProps) {
         var _this$multiSelectorRe;
 
-        if (prevProps.category !== this.props.category && ((_this$multiSelectorRe = this.multiSelectorRef) === null || _this$multiSelectorRe === void 0 ? void 0 : _this$multiSelectorRe.current)) {
+        if (prevProps.category !== this.props.category && (_this$multiSelectorRe = this.multiSelectorRef) !== null && _this$multiSelectorRe !== void 0 && _this$multiSelectorRe.current) {
           this.multiSelectorRef.current.emptySelected();
         }
       }
+    }], [{
+      key: "getDerivedStateFromProps",
+      value: function getDerivedStateFromProps(props, prevState) {
+        if (prevState.category !== props.category) {
+          return {
+            category: props.category
+          };
+        }
+
+        return null;
+      }
     }]);
 
     return LuxityGraphQLMultiselector;
@@ -8132,16 +8038,10 @@
     baseQueryLimit: 12
   };
 
-  function _templateObject$d() {
-    var data = _taggedTemplateLiteral(["\n  ", ";\n  background-color: ", ";\n  color: ", ";\n  &:active,\n  &:hover {\n    background-color: #fff;\n    color: ", ";\n  }\n\n  &:disabled {\n    ", "\n\n    &:hover {\n      background-color: ", ";\n      color: #ffff;\n    }\n  }\n"]);
-
-    _templateObject$d = function _templateObject() {
-      return data;
-    };
+  var _excluded$3 = ["children"];
 
-    return data;
-  }
-  var Button$3 = styled__default.button(_templateObject$d(), baseButtonStyle, function (props) {
+  var _templateObject$d;
+  var Button$3 = styled__default.button(_templateObject$d || (_templateObject$d = _taggedTemplateLiteral(["\n  ", ";\n  background-color: ", ";\n  color: ", ";\n  &:active,\n  &:hover {\n    background-color: #fff;\n    color: ", ";\n  }\n\n  &:disabled {\n    ", "\n\n    &:hover {\n      background-color: ", ";\n      color: #ffff;\n    }\n  }\n"])), baseButtonStyle, function (props) {
     return props.theme.colors.primary;
   }, function (props) {
     return props.theme.colors.ntrlMin;
@@ -8153,23 +8053,15 @@
 
   var PrimaryButton = function PrimaryButton(_ref) {
     var children = _ref.children,
-        restProps = _objectWithoutProperties(_ref, ["children"]);
+        restProps = _objectWithoutProperties(_ref, _excluded$3);
 
-    return React__default.createElement(Button$3, restProps, children);
+    return /*#__PURE__*/React__default.createElement(Button$3, restProps, children);
   };
 
   var PrimaryButton$1 = themed(PrimaryButton);
 
-  function _templateObject$e() {
-    var data = _taggedTemplateLiteral(["\n  color: ", ";\n  border: 1px solid ", ";\n  background-color: ", ";\n  &:hover {\n    color: ", ";\n    background-color: ", ";\n  }\n"]);
-
-    _templateObject$e = function _templateObject() {
-      return data;
-    };
-
-    return data;
-  }
-  var BaseButton = styled__default.button(_templateObject$e(), function (props) {
+  var _templateObject$e;
+  var BaseButton = styled__default.button(_templateObject$e || (_templateObject$e = _taggedTemplateLiteral(["\n  color: ", ";\n  border: 1px solid ", ";\n  background-color: ", ";\n  &:hover {\n    color: ", ";\n    background-color: ", ";\n  }\n"])), function (props) {
     return props.theme.colors.base;
   }, function (props) {
     return props.theme.colors.borderColor;
@@ -8192,7 +8084,7 @@
         onSelect(item);
       }
     };
-    return selected ? React__default.createElement(PrimaryButton$1, props, item.name) : React__default.createElement(UnselectedButton, props, item.name);
+    return selected ? /*#__PURE__*/React__default.createElement(PrimaryButton$1, props, item.name) : /*#__PURE__*/React__default.createElement(UnselectedButton, props, item.name);
   };
 
   var BrandSelector = function BrandSelector(_ref) {
@@ -8203,7 +8095,7 @@
         getGraphQuery = _ref.getGraphQuery,
         resultProcessor = _ref.resultProcessor,
         requestInstance = _ref.requestInstance;
-    return React__default.createElement(LuxityGraphQLMultiselector, {
+    return /*#__PURE__*/React__default.createElement(LuxityGraphQLMultiselector, {
       baseQueryLimit: 16,
       title: "Brands",
       queryId: "getBrands",
@@ -8235,7 +8127,7 @@
         getGraphQuery = _ref.getGraphQuery,
         resultProcessor = _ref.resultProcessor,
         requestInstance = _ref.requestInstance;
-    return React__default.createElement(LuxityGraphQLMultiselector, {
+    return /*#__PURE__*/React__default.createElement(LuxityGraphQLMultiselector, {
       title: "Styles",
       queryId: "getStyles",
       baseQueryLimit: 16,
@@ -8266,7 +8158,7 @@
   };
 
   function _extends$2() {
-    _extends$2 = Object.assign || function (target) {
+    _extends$2 = Object.assign ? Object.assign.bind() : function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
 
@@ -8279,7 +8171,6 @@
 
       return target;
     };
-
     return _extends$2.apply(this, arguments);
   }
 
@@ -8291,28 +8182,27 @@
     return self;
   }
 
+  function _setPrototypeOf$2(o, p) {
+    _setPrototypeOf$2 = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
+      o.__proto__ = p;
+      return o;
+    };
+    return _setPrototypeOf$2(o, p);
+  }
+
   function _inheritsLoose(subClass, superClass) {
     subClass.prototype = Object.create(superClass.prototype);
     subClass.prototype.constructor = subClass;
-    subClass.__proto__ = superClass;
+    _setPrototypeOf$2(subClass, superClass);
   }
 
   function _getPrototypeOf$2(o) {
-    _getPrototypeOf$2 = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+    _getPrototypeOf$2 = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) {
       return o.__proto__ || Object.getPrototypeOf(o);
     };
     return _getPrototypeOf$2(o);
   }
 
-  function _setPrototypeOf$2(o, p) {
-    _setPrototypeOf$2 = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
-      o.__proto__ = p;
-      return o;
-    };
-
-    return _setPrototypeOf$2(o, p);
-  }
-
   function _isNativeFunction(fn) {
     return Function.toString.call(fn).indexOf("[native code]") !== -1;
   }
@@ -8323,7 +8213,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;
@@ -8332,7 +8222,7 @@
 
   function _construct(Parent, args, Class) {
     if (_isNativeReflectConstruct$1()) {
-      _construct = Reflect.construct;
+      _construct = Reflect.construct.bind();
     } else {
       _construct = function _construct(Parent, args, Class) {
         var a = [null];
@@ -8461,7 +8351,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
@@ -8500,7 +8391,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];
@@ -8803,7 +8694,7 @@
       };
     }
 
-    var rgbaMatched = rgbaRegex.exec(normalizedColor);
+    var rgbaMatched = rgbaRegex.exec(normalizedColor.substring(0, 50));
 
     if (rgbaMatched) {
       return {
@@ -8834,7 +8725,7 @@
       };
     }
 
-    var hslaMatched = hslaRegex.exec(normalizedColor);
+    var hslaMatched = hslaRegex.exec(normalizedColor.substring(0, 50));
 
     if (hslaMatched) {
       var _hue = parseInt("" + hslaMatched[1], 10);
@@ -9015,7 +8906,7 @@
     var alpha = typeof parsedColor.alpha === 'number' ? parsedColor.alpha : 1;
 
     var colorWithAlpha = _extends$2({}, 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);
@@ -9026,58 +8917,12 @@
   /* ::<number | string, string, string> */
   (transparentize);
 
-  function _templateObject$f() {
-    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$f = function _templateObject() {
-      return data;
-    };
-
-    return data;
-  }
-  var baseSliderStyles = styled.css(_templateObject$f());
-
-  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  "]);
+  var _templateObject$f;
+  var baseSliderStyles = styled.css(_templateObject$f || (_templateObject$f = _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"])));
 
-    _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;
-    };
-
-    return data;
-  }
-
-  function _templateObject2$4() {
-    var data = _taggedTemplateLiteral([""]);
-
-    _templateObject2$4 = function _templateObject2() {
-      return data;
-    };
-
-    return data;
-  }
-
-  function _templateObject$g() {
-    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$g = function _templateObject() {
-      return data;
-    };
-
-    return data;
-  }
+  var _templateObject$g, _templateObject2$4, _templateObject3, _templateObject4;
   var handleDimension = '14px';
-  var SliderContainer = styled__default.div(_templateObject$g(), baseSliderStyles, function (props) {
+  var SliderContainer = styled__default.div(_templateObject$g || (_templateObject$g = _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;
@@ -9096,43 +8941,22 @@
   var getSliderMarkStyle = function getSliderMarkStyle(_ref) {
     var showMarks = _ref.showMarks,
         primary = _ref.theme.colors.primary;
-    var visiblityStyle = showMarks ? styled.css(_templateObject2$4()) : styled.css(_templateObject3());
-    return styled.css(_templateObject4(), primary, primary, visiblityStyle);
+    var visiblityStyle = showMarks ? styled.css(_templateObject2$4 || (_templateObject2$4 = _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$h() {
-    var data = _taggedTemplateLiteral(["\n  position: absolute;\n  right: auto;\n  top: 20px;\n  transform: translateX(-50%);\n  width: 100px;\n  text-align: center;\n"]);
+  var _templateObject$h;
+  var ToolTipWrapper = styled__default.div(_templateObject$h || (_templateObject$h = _taggedTemplateLiteral(["\n  position: absolute;\n  right: auto;\n  top: 20px;\n  transform: translateX(-50%);\n  width: 100px;\n  text-align: center;\n"])));
 
-    _templateObject$h = function _templateObject() {
-      return data;
-    };
+  var _templateObject$i;
+  var Footer = styled__default.div(_templateObject$i || (_templateObject$i = _taggedTemplateLiteral(["\n  display: flex;\n  flex-flow: row nowrap;\n  justify-content: flex-end;\n"])));
 
-    return data;
-  }
-  var ToolTipWrapper = styled__default.div(_templateObject$h());
-
-  function _templateObject$i() {
-    var data = _taggedTemplateLiteral(["\n  display: flex;\n  flex-flow: row nowrap;\n  justify-content: flex-end;\n"]);
-
-    _templateObject$i = function _templateObject() {
-      return data;
-    };
+  var _excluded$4 = ["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$i());
-
-  function _templateObject$j() {
-    var data = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n"]);
-
-    _templateObject$j = function _templateObject() {
-      return data;
-    };
-
-    return data;
-  }
+  var _templateObject$j;
   var debounceBuilder$1 = functions.debounced(100);
-  var ChildrenWrapper = styled__default.div(_templateObject$j(), function (props) {
+  var ChildrenWrapper = styled__default.div(_templateObject$j || (_templateObject$j = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n"])), function (props) {
     return props.theme.marginPaddings[3];
   });
 
@@ -9145,7 +8969,7 @@
         value = handleProps.value,
         offset = handleProps.offset,
         index = handleProps.index,
-        restHandleProps = _objectWithoutProperties(handleProps, ["dragging", "value", "offset", "index"]);
+        restHandleProps = _objectWithoutProperties(handleProps, _excluded$4);
 
     var getToolTipProps = function getToolTipProps() {
       var newProps = {}; // Ensures that Tooltip component does not get ref prop
@@ -9159,18 +8983,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()))));
   };
@@ -9190,7 +9014,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),
@@ -9223,15 +9047,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 = {
@@ -9246,16 +9067,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,
@@ -9275,7 +9095,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 = {
@@ -9313,7 +9133,7 @@
   var ToolTipComponent = function ToolTipComponent(props) {
     var marks = props.marks,
         value = props.value;
-    return React__default.createElement("div", null, marks[value]);
+    return /*#__PURE__*/React__default.createElement("div", null, marks[value]);
   };
   /** slider ui component for shoe size selection interests */
 
@@ -9333,14 +9153,14 @@
 
     var getFooterButtons = function getFooterButtons(actionObj) {
       var giveFullRange = actionObj.giveFullRange;
-      return React__default.createElement(React__default.Fragment, null, React__default.createElement(InvertedTextButton$1, {
+      return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(InvertedTextButton$1, {
         type: "button",
         className: "shoe-size-selector-full-btn",
         onClick: giveFullRange
       }, "Full Shoe Size Range"));
     };
 
-    return React__default.createElement(React__default.Fragment, null, React__default.createElement(RangeSlider$1, {
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(RangeSlider$1, {
       identifier: "shoe-size-range-slider",
       marks: formatResultsForRangeSlider(shoeSizes),
       min: 0,
@@ -9360,121 +9180,49 @@
     shoeSizes: []
   };
 
-  function _templateObject$k() {
-    var data = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"]);
-
-    _templateObject$k = function _templateObject() {
-      return data;
-    };
-
-    return data;
-  }
-  var RadioButtonsContainer = styled__default.div(_templateObject$k());
-
-  function _templateObject$l() {
-    var data = _taggedTemplateLiteral(["\n  display: flex;\n  flex-grow: 1;\n  flex-wrap: ", ";\n"]);
+  var _templateObject$k;
+  var RadioButtonsContainer = styled__default.div(_templateObject$k || (_templateObject$k = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"])));
 
-    _templateObject$l = function _templateObject() {
-      return data;
-    };
-
-    return data;
-  }
-  var ButtonListWrapper = styled__default.div(_templateObject$l(), function (_ref) {
+  var _templateObject$l;
+  var ButtonListWrapper = styled__default.div(_templateObject$l || (_templateObject$l = _taggedTemplateLiteral(["\n  display: flex;\n  flex-grow: 1;\n  flex-wrap: ", ";\n"])), function (_ref) {
     var noWrap = _ref.noWrap;
     return noWrap ? 'nowrap' : 'wrap';
   });
 
-  function _templateObject$m() {
-    var data = _taggedTemplateLiteral(["\n  font-weight: bold;\n  color: ", ";\n  flex-basis: 40%;\n"]);
-
-    _templateObject$m = function _templateObject() {
-      return data;
-    };
-
-    return data;
-  }
-  var Title$3 = styled__default.div(_templateObject$m(), function (props) {
+  var _templateObject$m;
+  var Title$3 = styled__default.div(_templateObject$m || (_templateObject$m = _taggedTemplateLiteral(["\n  font-weight: bold;\n  color: ", ";\n  flex-basis: 40%;\n"])), function (props) {
     return props.theme.colors.base;
   });
 
-  function _templateObject$n() {
-    var data = _taggedTemplateLiteral(["\n  display: flex;\n  margin-bottom: ", ";\n  margin-right: ", ";\n"]);
-
-    _templateObject$n = function _templateObject() {
-      return data;
-    };
-
-    return data;
-  }
-  var RadioButtonLabel = styled__default.label(_templateObject$n(), function (props) {
+  var _templateObject$n;
+  var RadioButtonLabel = styled__default.label(_templateObject$n || (_templateObject$n = _taggedTemplateLiteral(["\n  display: flex;\n  margin-bottom: ", ";\n  margin-right: ", ";\n"])), function (props) {
     return props.theme.marginPaddings[0];
   }, function (props) {
     return props.theme.marginPaddings[0];
   });
 
-  function _templateObject$o() {
-    var data = _taggedTemplateLiteral(["\n  height: 20px;\n  width: 20px;\n  border-radius: 50%;\n  margin-right: 5px;\n  border: 1px solid ", ";\n  display: flex;\n"]);
-
-    _templateObject$o = function _templateObject() {
-      return data;
-    };
-
-    return data;
-  }
-  var RadioButtonCircle = styled__default.div(_templateObject$o(), function (props) {
+  var _templateObject$o;
+  var RadioButtonCircle = styled__default.div(_templateObject$o || (_templateObject$o = _taggedTemplateLiteral(["\n  height: 20px;\n  width: 20px;\n  border-radius: 50%;\n  margin-right: 5px;\n  border: 1px solid ", ";\n  display: flex;\n"])), function (props) {
     return props.theme.colors.base;
   });
 
-  function _templateObject$p() {
-    var data = _taggedTemplateLiteral(["\n  height: 8px;\n  width: 8px;\n  border-radius: 50%;\n  margin: auto;\n"]);
+  var _templateObject$p;
+  var RadioButtonCircleInner = styled__default.div(_templateObject$p || (_templateObject$p = _taggedTemplateLiteral(["\n  height: 8px;\n  width: 8px;\n  border-radius: 50%;\n  margin: auto;\n"])));
 
-    _templateObject$p = function _templateObject() {
-      return data;
-    };
-
-    return data;
-  }
-  var RadioButtonCircleInner = styled__default.div(_templateObject$p());
-
-  function _templateObject$q() {
-    var data = _taggedTemplateLiteral(["\n  display: none;\n  :checked ~ ", " {\n    ", " {\n      background-color: ", ";\n    }\n  }\n"]);
-
-    _templateObject$q = function _templateObject() {
-      return data;
-    };
-
-    return data;
-  }
-  var RadioButtonInput = styled__default.input(_templateObject$q(), RadioButtonCircle, RadioButtonCircleInner, function (props) {
+  var _templateObject$q;
+  var RadioButtonInput = styled__default.input(_templateObject$q || (_templateObject$q = _taggedTemplateLiteral(["\n  display: none;\n  :checked ~ ", " {\n    ", " {\n      background-color: ", ";\n    }\n  }\n"])), RadioButtonCircle, RadioButtonCircleInner, function (props) {
     return props.theme.colors.base;
   });
 
-  function _templateObject$r() {
-    var data = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"]);
+  var _templateObject$r;
+  var RadioButtonText = styled__default.div(_templateObject$r || (_templateObject$r = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"])));
 
-    _templateObject$r = function _templateObject() {
-      return data;
-    };
-
-    return data;
-  }
-  var RadioButtonText = styled__default.div(_templateObject$r());
-
-  function _templateObject$s() {
-    var data = _taggedTemplateLiteral(["\n  cursor: pointer;\n  position: relative;\n  display: flex;\n  align-items: center;\n\n  span {\n    :before {\n      content: '\\2713';\n      position: absolute;\n      display: none;\n      color: white;\n      left: 0.4em;\n      top: 0.1em;\n      font-size: ", ";\n      text-align: center;\n    }\n  }\n\n  input {\n    font-size: ", ";\n    background-color: ", ";\n    appearance: none;\n    outline: none;\n    height: 1em;\n    width: 1em;\n    margin-right: ", ";\n    border: 1px solid ", ";\n    border-radius: ", ";\n    transition-duration: 0.3s;\n    cursor: pointer;\n\n    &:checked {\n      background-color: ", ";\n    }\n\n    &:checked + span:before {\n      display: block;\n    }\n  }\n"], ["\n  cursor: pointer;\n  position: relative;\n  display: flex;\n  align-items: center;\n\n  span {\n    :before {\n      content: '\\\\2713';\n      position: absolute;\n      display: none;\n      color: white;\n      left: 0.4em;\n      top: 0.1em;\n      font-size: ", ";\n      text-align: center;\n    }\n  }\n\n  input {\n    font-size: ", ";\n    background-color: ", ";\n    appearance: none;\n    outline: none;\n    height: 1em;\n    width: 1em;\n    margin-right: ", ";\n    border: 1px solid ", ";\n    border-radius: ", ";\n    transition-duration: 0.3s;\n    cursor: pointer;\n\n    &:checked {\n      background-color: ", ";\n    }\n\n    &:checked + span:before {\n      display: block;\n    }\n  }\n"]);
-
-    _templateObject$s = function _templateObject() {
-      return data;
-    };
-
-    return data;
-  }
+  var _templateObject$s;
   var inputMarginRight = '0.2em';
-  var CheckboxLabel = styled__default.label(_templateObject$s(), function (props) {
+  var CheckboxLabel = styled__default.label(_templateObject$s || (_templateObject$s = _taggedTemplateLiteral(["\n  cursor: pointer;\n  position: relative;\n  display: flex;\n  align-items: center;\n\n  span {\n    :before {\n      content: '\\2713';\n      position: absolute;\n      display: none;\n      color: white;\n      left: 0.4em;\n      top: 0.1em;\n      font-size: ", ";\n      text-align: center;\n    }\n  }\n\n  input {\n    font-size: ", ";\n    background-color: ", ";\n    appearance: none;\n    outline: none;\n    height: 1em;\n    width: 1em;\n    margin-right: ", ";\n    border: 1px solid ", ";\n    border-radius: ", ";\n    transition-duration: 0.3s;\n    cursor: pointer;\n\n    &:checked {\n      background-color: ", ";\n    }\n\n    &:checked + span:before {\n      display: block;\n    }\n  }\n"], ["\n  cursor: pointer;\n  position: relative;\n  display: flex;\n  align-items: center;\n\n  span {\n    :before {\n      content: '\\\\2713';\n      position: absolute;\n      display: none;\n      color: white;\n      left: 0.4em;\n      top: 0.1em;\n      font-size: ", ";\n      text-align: center;\n    }\n  }\n\n  input {\n    font-size: ", ";\n    background-color: ", ";\n    appearance: none;\n    outline: none;\n    height: 1em;\n    width: 1em;\n    margin-right: ", ";\n    border: 1px solid ", ";\n    border-radius: ", ";\n    transition-duration: 0.3s;\n    cursor: pointer;\n\n    &:checked {\n      background-color: ", ";\n    }\n\n    &:checked + span:before {\n      display: block;\n    }\n  }\n"])), function (props) {
     var _props$theme;
 
-    return ((_props$theme = props.theme) === null || _props$theme === void 0 ? void 0 : _props$theme.fontSizes.length) ? props.theme.fontSizes[4] : '1em';
+    return (_props$theme = props.theme) !== null && _props$theme !== void 0 && _props$theme.fontSizes.length ? props.theme.fontSizes[4] : '1em';
   }, function (props) {
     return props.theme.fontSizes[4];
   }, function (props) {
@@ -9510,7 +9258,7 @@
     React.useEffect(function () {
       setErrMsg(errors[name]);
     }, [errors, name]);
-    return React__default.createElement(React.Fragment, null, React__default.createElement(RadioButtonsContainer, null, React__default.createElement(Title$3, null, title), React__default.createElement(ButtonListWrapper, {
+    return /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(RadioButtonsContainer, null, /*#__PURE__*/React__default.createElement(Title$3, null, title), /*#__PURE__*/React__default.createElement(ButtonListWrapper, {
       noWrap: noWrap
     }, options.map(function (_ref2, index) {
       var _ref2$actionCallback = _ref2.actionCallback,
@@ -9523,10 +9271,10 @@
           innerText = _ref2$innerText === void 0 ? '' : _ref2$innerText,
           _ref2$checked = _ref2.checked,
           checked = _ref2$checked === void 0 ? false : _ref2$checked;
-      return React__default.createElement(RadioButtonLabel, {
+      return /*#__PURE__*/React__default.createElement(RadioButtonLabel, {
         key: "".concat(name, "-").concat(index),
         htmlFor: "".concat(name, "_").concat(index)
-      }, React__default.createElement(RadioButtonInput, {
+      }, /*#__PURE__*/React__default.createElement(RadioButtonInput, {
         id: "".concat(name, "_").concat(index),
         type: "radio",
         name: name,
@@ -9536,8 +9284,8 @@
           actionCallback(name, value);
         },
         value: value
-      }), React__default.createElement(RadioButtonCircle, null, React__default.createElement(RadioButtonCircleInner, null)), React__default.createElement(RadioButtonText, null, innerText));
-    }))), errMsg && React__default.createElement(ErrorMessage$1, null, errMsg));
+      }), /*#__PURE__*/React__default.createElement(RadioButtonCircle, null, /*#__PURE__*/React__default.createElement(RadioButtonCircleInner, null)), /*#__PURE__*/React__default.createElement(RadioButtonText, null, innerText));
+    }))), errMsg && /*#__PURE__*/React__default.createElement(ErrorMessage$1, null, errMsg));
   };
 
   RadioButtons.defaultProps = {
@@ -9558,30 +9306,12 @@
     }
   };
 
-  function _templateObject2$5() {
-    var data = _taggedTemplateLiteral(["\n  transition: opacity ease-in-out ", "ms;\n  opacity: ", ";\n  .rc-slider-handle,\n  .rc-slider-handle-2,\n  .shoe-size-tooltip {\n    transition: opacity ease-in-out ", "ms;\n    opacity: ", ";\n  }\n"]);
-
-    _templateObject2$5 = function _templateObject2() {
-      return data;
-    };
-
-    return data;
-  }
-
-  function _templateObject$t() {
-    var data = _taggedTemplateLiteral(["\n  display: flex;\n  flex-flow: nowrap row;\n  justify-content: space-between;\n  margin-bottom: ", ";\n  label {\n    margin-bottom: 0;\n  }\n"]);
-
-    _templateObject$t = function _templateObject() {
-      return data;
-    };
-
-    return data;
-  }
-  var TitleWrapper = styled__default.div(_templateObject$t(), function (props) {
+  var _templateObject$t, _templateObject2$5;
+  var TitleWrapper = styled__default.div(_templateObject$t || (_templateObject$t = _taggedTemplateLiteral(["\n  display: flex;\n  flex-flow: nowrap row;\n  justify-content: space-between;\n  margin-bottom: ", ";\n  label {\n    margin-bottom: 0;\n  }\n"])), function (props) {
     return props.theme.marginPaddings[4];
   });
   var onShoeSizeTypeChangeTimeout = 300;
-  var ShoeSizeFadeContainer = styled__default.div(_templateObject2$5(), onShoeSizeTypeChangeTimeout, function (props) {
+  var ShoeSizeFadeContainer = styled__default.div(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral(["\n  transition: opacity ease-in-out ", "ms;\n  opacity: ", ";\n  .rc-slider-handle,\n  .rc-slider-handle-2,\n  .shoe-size-tooltip {\n    transition: opacity ease-in-out ", "ms;\n    opacity: ", ";\n  }\n"])), onShoeSizeTypeChangeTimeout, function (props) {
     return props.childVisible ? 1 : 0;
   }, onShoeSizeTypeChangeTimeout, function (props) {
     return props.childVisible ? 1 : 0;
@@ -9608,7 +9338,7 @@
         }, onShoeSizeTypeChangeTimeout);
       }
     }, [prevShoeSizeType, shoeSizeType]);
-    return React__default.createElement(ShoeSizeFadeContainer, {
+    return /*#__PURE__*/React__default.createElement(ShoeSizeFadeContainer, {
       childVisible: childVisible
     }, children);
   };
@@ -9670,7 +9400,7 @@
 
     var renderShoeSizeSelector = function renderShoeSizeSelector() {
       var passedShoeSizes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-      return React__default.createElement(ShoeSizeSelector, {
+      return /*#__PURE__*/React__default.createElement(ShoeSizeSelector, {
         shoeSizes: passedShoeSizes,
         onChange: function onChange(value) {
           return handlePropOnChange(value);
@@ -9693,17 +9423,17 @@
       return null;
     };
 
-    return React__default.createElement(LuxityPageReady, {
+    return /*#__PURE__*/React__default.createElement(LuxityPageReady, {
       getRequestPromise: triggerRequest
-    }, React__default.createElement(TitleWrapper, null, React__default.createElement(InterestsSubheading, {
+    }, /*#__PURE__*/React__default.createElement(TitleWrapper, null, /*#__PURE__*/React__default.createElement(InterestsSubheading, {
       title: "Shoe Size Range"
-    }, React__default.createElement(RadioButtons$1, shoeSizeTypeProps))), React__default.createElement(LuxityPageReadyContext.Consumer, null, function (_ref3) {
+    }, /*#__PURE__*/React__default.createElement(RadioButtons$1, shoeSizeTypeProps))), /*#__PURE__*/React__default.createElement(LuxityPageReadyContext.Consumer, null, function (_ref3) {
       var _ref3$data$data = _ref3.data.data,
           _ref3$data$data$luxit = _ref3$data$data.luxity_eu_shoe_sizes,
           luxity_eu_shoe_sizes = _ref3$data$data$luxit === void 0 ? [] : _ref3$data$data$luxit,
           _ref3$data$data$luxit2 = _ref3$data$data.luxity_uk_shoe_sizes,
           luxity_uk_shoe_sizes = _ref3$data$data$luxit2 === void 0 ? [] : _ref3$data$data$luxit2;
-      return React__default.createElement(OpacityTransitionRender, {
+      return /*#__PURE__*/React__default.createElement(OpacityTransitionRender, {
         shoeSizeType: transitionedTo
       }, getShoeSizeSelector(luxity_eu_shoe_sizes, luxity_uk_shoe_sizes));
     }));
@@ -9715,53 +9445,614 @@
     }
   };
 
-  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 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;
+  };
+
+  /**
+   * 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, '');
+  };
+
+  /**
+   * Remove invalid characters
+   */
+  var removeInvalidChars = function (value, validChars) {
+      var chars = escapeRegExp(validChars.join(''));
+      var reg = new RegExp("[^\\d" + chars + "]", 'gi');
+      return value.replace(reg, '');
+  };
+
+  /**
+   * Remove prefix, separators and extra decimals from value
+   */
+  var cleanValue$1 = 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;
+  };
+
+  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;
+  };
+
+  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;
+  };
+
+  /**
+   * 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('');
+  };
+
+  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);
+  };
+
+  var isNumber = function (input) { return RegExp(/\d/, 'gi').test(input); };
+
+  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;
+  };
+
+  /**
+   * 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 };
+  };
+
+  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$1(__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$1(__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$1(__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';
+
+  var _excluded$5 = ["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 Masks text to specific format
+   * Currency Input which formats the value to a specific format
    */
 
-  var CurrencyInput = function CurrencyInput(_ref) {
-    var inputMode = _ref.inputMode,
-        maskOptions = _ref.maskOptions,
-        inputProps = _objectWithoutProperties(_ref, ["inputMode", "maskOptions"]);
-
-    var currencyMask = createNumberMask(_objectSpread2(_objectSpread2({}, defaultMaskOptions), maskOptions));
-    return React__default.createElement(MaskedInput, _extends({}, inputProps, {
-      inputMode: inputMode,
-      mask: currencyMask
+  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$5);
+
+    return /*#__PURE__*/React__default.createElement(CurrencyInput, _extends({}, rest, {
+      value: value,
+      prefix: prefix,
+      onValueChange: onChange,
+      groupSeparator: groupSeparator,
+      decimalSeparator: decimalSeparator,
+      allowNegativeValue: allowNegativeValue
     }));
   };
 
-  CurrencyInput.defaultProps = {
-    maskOptions: defaultMaskOptions,
-    inputMode: 'numeric'
+  CurrencyInputFormatter.defaultProps = {
+    value: '',
+    prefix: 'R',
+    groupSeparator: ',',
+    decimalSeparator: '.',
+    allowNegativeValue: false,
+    onChange: function onChange() {}
   };
 
-  function _templateObject$u() {
-    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"]);
-
-    _templateObject$u = function _templateObject() {
-      return data;
-    };
+  var _excluded$6 = ["children"];
 
-    return data;
-  }
-  var Button$4 = styled__default.button(_templateObject$u(), baseButtonStyle, function (props) {
+  var _templateObject$u;
+  var Button$4 = styled__default.button(_templateObject$u || (_templateObject$u = _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;
@@ -9777,23 +10068,15 @@
 
   var SecondaryButton = function SecondaryButton(_ref) {
     var children = _ref.children,
-        restProps = _objectWithoutProperties(_ref, ["children"]);
+        restProps = _objectWithoutProperties(_ref, _excluded$6);
 
-    return React__default.createElement(Button$4, restProps, children);
+    return /*#__PURE__*/React__default.createElement(Button$4, restProps, children);
   };
 
   var SecondaryButton$1 = themed(SecondaryButton);
 
-  function _templateObject$v() {
-    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$v = function _templateObject() {
-      return data;
-    };
-
-    return data;
-  }
-  var CurrencyInputWrapper = styled__default.div(_templateObject$v(), function (props) {
+  var _templateObject$v;
+  var CurrencyInputWrapper = styled__default.div(_templateObject$v || (_templateObject$v = _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;
   });
 
@@ -9815,6 +10098,9 @@
       case interestCategories.WATCHES:
         return interestCategoryMaxPrices.WATCHES;
 
+      case interestCategories.APPAREL:
+        return interestCategoryMaxPrices.APPAREL;
+
       default:
         return 0;
     }
@@ -9822,7 +10108,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");
@@ -9871,11 +10157,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"
         });
       },
@@ -9892,21 +10178,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);
         }
       }));
     }));
@@ -9919,16 +10201,8 @@
     category: ''
   };
 
-  function _templateObject$w() {
-    var data = _taggedTemplateLiteral(["\n  display: flex;\n  margin-left: calc(-1 * ", ");\n  label {\n    margin-bottom: ", ";\n    flex-basis: calc(33.33% - ", ");\n    margin-bottom: ", ";\n    margin-left: ", ";\n  }\n  @media (max-width: ", ") {\n    label {\n      flex-basis: calc(50% - ", ");\n    }\n  }\n"]);
-
-    _templateObject$w = function _templateObject() {
-      return data;
-    };
-
-    return data;
-  }
-  var SelectionWrapper = styled__default.div(_templateObject$w(), function (props) {
+  var _templateObject$w;
+  var SelectionWrapper = styled__default.div(_templateObject$w || (_templateObject$w = _taggedTemplateLiteral(["\n  display: flex;\n  margin-left: calc(-1 * ", ");\n  label {\n    margin-bottom: ", ";\n    flex-basis: calc(33.33% - ", ");\n    margin-bottom: ", ";\n    margin-left: ", ";\n  }\n  @media (max-width: ", ") {\n    label {\n      flex-basis: calc(50% - ", ");\n    }\n  }\n"])), function (props) {
     return props.theme.marginPaddings[2];
   }, function (props) {
     return props.theme.marginPaddings[2];
@@ -9942,42 +10216,16 @@
     return props.theme.marginPaddings[2];
   });
 
-  function _templateObject3$1() {
-    var data = _taggedTemplateLiteral(["\n  line-height: initial;\n  display: block;\n  box-sizing: border-box;\n  transition: 200ms ease-in-out;\n  text-align: center;\n\n  &:hover ", " {\n    color: ", ";\n  }\n\n  input {\n    display: none;\n    &:checked ~ ", " {\n      background-color: ", ";\n      border-color: ", ";\n      color: ", ";\n    }\n\n    &:checked ~ ", " ", " {\n      color: ", ";\n    }\n\n    &:disabled ~ ", " {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n  }\n"]);
-
-    _templateObject3$1 = function _templateObject3() {
-      return data;
-    };
-
-    return data;
-  }
-
-  function _templateObject2$6() {
-    var data = _taggedTemplateLiteral(["\n  transition: 200ms ease-in;\n  margin-left: auto;\n  margin-right: auto;\n"]);
+  var _excluded$7 = ["title", "checked", "renderIcon", "onChange", "checkedValue", "unCheckedValue"];
 
-    _templateObject2$6 = function _templateObject2() {
-      return data;
-    };
-
-    return data;
-  }
-
-  function _templateObject$x() {
-    var data = _taggedTemplateLiteral(["\n  background-color: transparent;\n  border: 1px solid ", ";\n  transition: 200ms ease-in-out;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", ";\n  cursor: pointer;\n"]);
-
-    _templateObject$x = function _templateObject() {
-      return data;
-    };
-
-    return data;
-  }
-  var Content = styled__default.div(_templateObject$x(), function (props) {
+  var _templateObject$x, _templateObject2$6, _templateObject3$1;
+  var Content = styled__default.div(_templateObject$x || (_templateObject$x = _taggedTemplateLiteral(["\n  background-color: transparent;\n  border: 1px solid ", ";\n  transition: 200ms ease-in-out;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", ";\n  cursor: pointer;\n"])), function (props) {
     return props.theme.colors.primary;
   }, function (props) {
     return props.theme.marginPaddings[0];
   });
-  var InputText = styled__default.div(_templateObject2$6());
-  var StyledLabel = styled__default.label(_templateObject3$1(), InputText, function (props) {
+  var InputText = styled__default.div(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteral(["\n  transition: 200ms ease-in;\n  margin-left: auto;\n  margin-right: auto;\n"])));
+  var StyledLabel = styled__default.label(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteral(["\n  line-height: initial;\n  display: block;\n  box-sizing: border-box;\n  transition: 200ms ease-in-out;\n  text-align: center;\n\n  &:hover ", " {\n    color: ", ";\n  }\n\n  input {\n    display: none;\n    &:checked ~ ", " {\n      background-color: ", ";\n      border-color: ", ";\n      color: ", ";\n    }\n\n    &:checked ~ ", " ", " {\n      color: ", ";\n    }\n\n    &:disabled ~ ", " {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n  }\n"])), InputText, function (props) {
     return props.theme.colors.primary;
   }, Content, function (props) {
     return props.theme.colors.primary;
@@ -9999,7 +10247,7 @@
         onChange = props.onChange,
         checkedValue = props.checkedValue,
         unCheckedValue = props.unCheckedValue,
-        restProps = _objectWithoutProperties(props, ["title", "checked", "renderIcon", "onChange", "checkedValue", "unCheckedValue"]);
+        restProps = _objectWithoutProperties(props, _excluded$7);
 
     var _React$useState = React__default.useState(checked),
         _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -10018,12 +10266,12 @@
       setCheck(targetChecked);
     };
 
-    return React__default.createElement(StyledLabel, null, React__default.createElement("input", _extends({
+    return /*#__PURE__*/React__default.createElement(StyledLabel, null, /*#__PURE__*/React__default.createElement("input", _extends({
       defaultChecked: checked
     }, restProps, {
       type: "checkbox",
       onChange: handleInputChange
-    })), React__default.createElement(Content, null, React__default.createElement(InputText, null, title), renderIcon(checkedState)));
+    })), /*#__PURE__*/React__default.createElement(Content, null, /*#__PURE__*/React__default.createElement(InputText, null, title), renderIcon(checkedState)));
   };
 
   CheckButton.defaultProps = {
@@ -10062,7 +10310,7 @@
       }
     };
 
-    return React__default.createElement(CheckButton$1, {
+    return /*#__PURE__*/React__default.createElement(CheckButton$1, {
       onChange: onInputChange,
       checked: checked,
       name: getTitle().toLowerCase(),
@@ -10085,13 +10333,13 @@
         onChange = _ref.onChange,
         maleInputRef = _ref.maleInputRef,
         femaleInputRef = _ref.femaleInputRef;
-    return React__default.createElement("div", {
+    return /*#__PURE__*/React__default.createElement("div", {
       className: "gender-selector"
-    }, React__default.createElement(InterestsSubheading, {
+    }, /*#__PURE__*/React__default.createElement(InterestsSubheading, {
       title: "Department"
-    }), React__default.createElement(SelectionWrapper, {
+    }), /*#__PURE__*/React__default.createElement(SelectionWrapper, {
       className: "gender-selector__selection-wrapper"
-    }, React__default.createElement(GenderCheckbox, {
+    }, /*#__PURE__*/React__default.createElement(GenderCheckbox, {
       className: "gender-selector__selection-wrapper__input-container",
       gender: MALE$1,
       checked: MALE$1 === gender,
@@ -10099,7 +10347,7 @@
         return onChange(isChecked, MALE$1);
       },
       checkBoxButtonRef: maleInputRef
-    }), React__default.createElement(GenderCheckbox, {
+    }), /*#__PURE__*/React__default.createElement(GenderCheckbox, {
       className: "gender-selector__selection-wrapper__input-container",
       gender: FEMALE$1,
       checked: FEMALE$1 === gender,
@@ -10119,119 +10367,55 @@
   var GenderSelector$1 = themed(GenderSelector);
 
   var Add = (function (props) {
-    return React__default.createElement("svg", _extends({
+    return /*#__PURE__*/React__default.createElement("svg", _extends({
       width: "23",
       height: "23",
       viewBox: "0 0 23 23",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
-    }, props), React__default.createElement("path", {
+    }, props), /*#__PURE__*/React__default.createElement("path", {
       d: "M0 11.5H23",
       stroke: "#000000",
       strokeWidth: "1.8"
-    }), React__default.createElement("path", {
+    }), /*#__PURE__*/React__default.createElement("path", {
       d: "M11.5 0L11.5 23",
       stroke: "#000000",
       strokeWidth: "1.8"
     }));
   });
 
-  function _templateObject$y() {
-    var data = _taggedTemplateLiteral(["\n  padding: 1rem;\n  display: flex;\n  svg {\n    width: 23px;\n    height: auto;\n  }\n"]);
-
-    _templateObject$y = function _templateObject() {
-      return data;
-    };
-
-    return data;
-  }
-  var SvgWrapper$1 = styled__default.span(_templateObject$y());
-
-  function _templateObject$z() {
-    var data = _taggedTemplateLiteral(["\n  border: 1px solid ", ";\n  height: auto;\n  margin-bottom: 1rem;\n  margin-left: 1rem;\n  display: flex;\n  align-items: center;\n  height: auto;\n\n  :hover {\n    background-color: ", ";\n    cursor: pointer;\n  }\n\n  #svg-trash {\n    width: 15px;\n    height: 100%;\n  }\n"]);
+  var _templateObject$y;
+  var SvgWrapper$1 = styled__default.span(_templateObject$y || (_templateObject$y = _taggedTemplateLiteral(["\n  padding: 1rem;\n  display: flex;\n  svg {\n    width: 23px;\n    height: auto;\n  }\n"])));
 
-    _templateObject$z = function _templateObject() {
-      return data;
-    };
-
-    return data;
-  }
-  var IconWrapper = styled__default.div(_templateObject$z(), function (props) {
+  var _templateObject$z;
+  var IconWrapper = styled__default.div(_templateObject$z || (_templateObject$z = _taggedTemplateLiteral(["\n  border: 1px solid ", ";\n  height: auto;\n  margin-bottom: 1rem;\n  margin-left: 1rem;\n  display: flex;\n  align-items: center;\n  height: auto;\n\n  :hover {\n    background-color: ", ";\n    cursor: pointer;\n  }\n\n  #svg-trash {\n    width: 15px;\n    height: 100%;\n  }\n"])), function (props) {
     return props.theme.colors.borderColor;
   }, function (props) {
     return props.theme.colors.borderColor;
   });
 
-  function _templateObject5() {
-    var data = _taggedTemplateLiteral(["\n  display: flex;\n\n  #add-icon {\n    margin-bottom: 1.5rem;\n\n    svg {\n      width: 15px;\n    }\n  }\n"]);
-
-    _templateObject5 = function _templateObject5() {
-      return data;
-    };
-
-    return data;
-  }
-
-  function _templateObject4$1() {
-    var data = _taggedTemplateLiteral(["\n  font-weight: bold;\n  color: ", ";\n  border: 1px solid ", ";\n  padding-top: ", ";\n  margin-bottom: ", ";\n  padding-left: 1.5rem;\n  width: 95%;\n  font-size: 17px;\n"]);
-
-    _templateObject4$1 = function _templateObject4() {
-      return data;
-    };
-
-    return data;
-  }
-
-  function _templateObject3$2() {
-    var data = _taggedTemplateLiteral(["\n  font-weight: bold;\n  color: ", ";\n  margin-bottom: ", ";\n"]);
-
-    _templateObject3$2 = function _templateObject3() {
-      return data;
-    };
-
-    return data;
-  }
-
-  function _templateObject2$7() {
-    var data = _taggedTemplateLiteral(["\n  margin-top: ", ";\n\n  @media (max-width: ", ") {\n    .fl-right__item {\n      flex-direction: column;\n      margin-right: 0;\n      margin-left: ", ";\n    }\n\n    button {\n      margin-bottom: ", ";\n    }\n  }\n"]);
-
-    _templateObject2$7 = function _templateObject2() {
-      return data;
-    };
-
-    return data;
-  }
-
-  function _templateObject$A() {
-    var data = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n  border: 1px solid ", ";\n  padding: ", ";\n"]);
-
-    _templateObject$A = function _templateObject() {
-      return data;
-    };
-
-    return data;
-  }
+  var _templateObject$A, _templateObject2$7, _templateObject3$2, _templateObject4$1, _templateObject5;
   var UNISEX = genders.UNISEX;
-  var AddInterestContainer = styled__default.div(_templateObject$A(), function (props) {
+  var AddInterestContainer = styled__default.div(_templateObject$A || (_templateObject$A = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n  border: 1px solid ", ";\n  padding: ", ";\n"])), function (props) {
     return props.theme.marginPaddings[6];
   }, function (props) {
     return props.theme.colors.borderColor;
   }, function (props) {
     return props.theme.marginPaddings[6];
   });
-  var SaveAndCancelButtonContainer = styled__default.div(_templateObject2$7(), function (props) {
+  var SaveAndCancelButtonContainer = styled__default.div(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteral(["\n  margin-top: ", ";\n\n  @media (max-width: ", ") {\n    .fl-right__item {\n      flex-direction: column;\n      margin-right: 0;\n      margin-left: ", ";\n    }\n\n    button {\n      margin-bottom: ", ";\n    }\n  }\n"])), function (props) {
     return props.theme.marginPaddings[6];
   }, media.xs, function (props) {
     return props.theme.marginPaddings[0];
   }, function (props) {
     return props.theme.marginPaddings[1];
   });
-  var CatSelectorParagraph = styled__default.div(_templateObject3$2(), function (props) {
+  var CatSelectorParagraph = styled__default.div(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteral(["\n  font-weight: bold;\n  color: ", ";\n  margin-bottom: ", ";\n"])), function (props) {
     return props.theme.colors.darkerGray;
   }, function (props) {
     return props.theme.marginPaddings[2];
   });
-  var AddInterestButton = styled__default.div(_templateObject4$1(), function (props) {
+  var AddInterestButton = styled__default.div(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteral(["\n  font-weight: bold;\n  color: ", ";\n  border: 1px solid ", ";\n  padding-top: ", ";\n  margin-bottom: ", ";\n  padding-left: 1.5rem;\n  width: 95%;\n  font-size: 17px;\n"])), function (props) {
     return props.theme.colors.darkerGray;
   }, function (props) {
     return props.theme.colors.borderColor;
@@ -10240,15 +10424,15 @@
   }, function (props) {
     return props.theme.marginPaddings[2];
   });
-  var AddInterestButtonContainer = styled__default.div(_templateObject5());
+  var AddInterestButtonContainer = styled__default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n\n  #add-icon {\n    margin-bottom: 1.5rem;\n\n    svg {\n      width: 15px;\n    }\n  }\n"])));
 
   var AddIcon = function AddIcon(_ref) {
     var onClick = _ref.onClick,
         id = _ref.id;
-    return React__default.createElement(IconWrapper, {
+    return /*#__PURE__*/React__default.createElement(IconWrapper, {
       id: id,
       onClick: onClick
-    }, React__default.createElement(SvgWrapper$1, null, React__default.createElement(Add, null)));
+    }, /*#__PURE__*/React__default.createElement(SvgWrapper$1, null, /*#__PURE__*/React__default.createElement(Add, null)));
   };
 
   var defaultState = {
@@ -10279,9 +10463,9 @@
 
       _this = _super.call(this, props);
 
-      _defineProperty(_assertThisInitialized(_this), "maleCheckBoxRef", React__default.createRef());
+      _defineProperty(_assertThisInitialized(_this), "maleCheckBoxRef", /*#__PURE__*/React__default.createRef());
 
-      _defineProperty(_assertThisInitialized(_this), "femaleCheckBoxRef", React__default.createRef());
+      _defineProperty(_assertThisInitialized(_this), "femaleCheckBoxRef", /*#__PURE__*/React__default.createRef());
 
       _defineProperty(_assertThisInitialized(_this), "onCategoryChanged", function (categoryType) {
         _this.setState({
@@ -10405,7 +10589,7 @@
           return data[key];
         }).flat();
         error(errorMessages.map(function (message, key) {
-          return React__default.createElement("div", {
+          return /*#__PURE__*/React__default.createElement("div", {
             key: "error-".concat(key)
           }, message);
         }));
@@ -10438,48 +10622,48 @@
             getStylesGraphQuery = _this$props.getStylesGraphQuery,
             getShoesGraphQuery = _this$props.getShoesGraphQuery,
             defaultShoeSizeType = _this$props.defaultShoeSizeType;
-        return React__default.createElement(React.Fragment, null, !_this.state.isCategoriesShown && React__default.createElement(AddInterestButtonContainer, {
+        return /*#__PURE__*/React__default.createElement(React.Fragment, null, !_this.state.isCategoriesShown && /*#__PURE__*/React__default.createElement(AddInterestButtonContainer, {
           onClick: _this.onAddInterestClick
-        }, React__default.createElement(AddInterestButton, null, "Add Interest"), React__default.createElement(AddIcon, {
+        }, /*#__PURE__*/React__default.createElement(AddInterestButton, null, "Add Interest"), /*#__PURE__*/React__default.createElement(AddIcon, {
           id: "add-icon"
-        })), _this.state.isCategoriesShown && React__default.createElement(AddInterestContainer, null, React__default.createElement(React.Fragment, null, React__default.createElement(CatSelectorParagraph, null, "Select the catergory that interests you"), React__default.createElement(CategoryInterestSelector, {
+        })), _this.state.isCategoriesShown && /*#__PURE__*/React__default.createElement(AddInterestContainer, null, /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(CatSelectorParagraph, null, "Select the catergory that interests you"), /*#__PURE__*/React__default.createElement(CategoryInterestSelector, {
           category: category_type,
           onCategoryChange: _this.onCategoryChanged
-        }), category_type ? React__default.createElement(React.Fragment, null, React__default.createElement(GenderSelector$1, {
+        }), category_type ? /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(GenderSelector$1, {
           onChange: _this.handleGenderChange
-        }), React__default.createElement(BrandSelector, {
+        }), /*#__PURE__*/React__default.createElement(BrandSelector, {
           category: category_type,
           onChange: _this.onBrandsChanged,
           requestInstance: requestInstance,
           graphApi: "".concat(baseGraphApi, "?id=getBrands"),
           getGraphQuery: getBrandsGraphQuery
-        }), category_type === interestCategories.SHOES && React__default.createElement(WrappedShoeSizeSelector, {
+        }), category_type === interestCategories.SHOES && /*#__PURE__*/React__default.createElement(WrappedShoeSizeSelector, {
           defaultShoeSizeType: defaultShoeSizeType,
           getGraphQuery: getShoesGraphQuery,
           graphApi: "".concat(baseGraphApi, "?id=shoeSizeQuery"),
           requestInstance: requestInstance,
           onChange: _this.onShoeSizesChanged
-        }), React__default.createElement(PriceRangeSelector, {
+        }), /*#__PURE__*/React__default.createElement(PriceRangeSelector, {
           category: category_type,
           onChange: _this.onPriceRangesChanged
-        }), React__default.createElement(StyleSelector, {
+        }), /*#__PURE__*/React__default.createElement(StyleSelector, {
           category: category_type,
           onChange: _this.onStylesChanged,
           requestInstance: requestInstance,
           graphApi: "".concat(baseGraphApi, "?id=getStyles"),
           getGraphQuery: getStylesGraphQuery
-        })) : null, React__default.createElement(SaveAndCancelButtonContainer, null, React__default.createElement("div", {
+        })) : null, /*#__PURE__*/React__default.createElement(SaveAndCancelButtonContainer, null, /*#__PURE__*/React__default.createElement("div", {
           className: "fl-right"
-        }, React__default.createElement("div", {
+        }, /*#__PURE__*/React__default.createElement("div", {
           className: "fl-right__item"
-        }, React__default.createElement(SecondaryButton$1, {
+        }, /*#__PURE__*/React__default.createElement(SecondaryButton$1, {
           type: "button",
           onClick: function onClick() {
             return _this.resetState();
           }
-        }, "CANCEL")), React__default.createElement("div", {
+        }, "CANCEL")), /*#__PURE__*/React__default.createElement("div", {
           className: "fl-right__item"
-        }, React__default.createElement(PrimaryButton$1, {
+        }, /*#__PURE__*/React__default.createElement(PrimaryButton$1, {
           "data-qe-id": "add-interest-btn",
           disabled: fetching || !_this.payloadIsValid(),
           type: "button",
@@ -10495,7 +10679,7 @@
       return _this;
     }
 
-    return AddInterest;
+    return _createClass(AddInterest);
   }(React__default.Component);
 
   var AddInterest$1 = themed(AddInterest);
@@ -10535,7 +10719,7 @@
   }
 
   var Trash = (function (props) {
-    return React__default.createElement("svg", _extends({
+    return /*#__PURE__*/React__default.createElement("svg", _extends({
       version: "1.1",
       id: "svg-trash",
       xmlns: "http://www.w3.org/2000/svg",
@@ -10544,54 +10728,16 @@
       y: "0px",
       viewBox: "0 0 15.1 17.5",
       xmlSpace: "preserve"
-    }, props), React__default.createElement("g", null, React__default.createElement("path", {
+    }, props), /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("path", {
       d: "M2.4,17.5c-0.4-0.1-0.5-0.4-0.5-0.8c0-4,0-7.9,0-11.9c0-0.1,0-0.1,0-0.2c-0.1,0-0.1,0-0.2,0c-0.3,0-0.7,0-1,0 C0.3,4.6,0,4.3,0,4C0,3.3,0,2.7,0,2c0.1-0.8,0.8-1.5,1.7-1.6c1.3,0,2.6,0,3.9,0c0.1,0,0.2,0,0.3-0.1C6,0.1,6.2,0,6.5,0 c0.7,0,1.4,0,2.1,0c0.3,0,0.5,0.1,0.6,0.3c0.1,0.1,0.1,0.1,0.2,0.1c1.3,0,2.5,0,3.8,0c0.8,0,1.4,0.4,1.7,1.1C15,1.7,15,2,15,2.3 c0,0.5,0,1,0,1.6c0,0.5-0.3,0.7-0.7,0.7c-0.4,0-0.7,0-1.1,0c0,0,0,0-0.1,0c0,0.1,0,0.1,0,0.2c0,4,0,7.9,0,11.9 c0,0.4-0.1,0.7-0.5,0.8C9.2,17.5,5.8,17.5,2.4,17.5z M11.8,16.2c0-3.9,0-7.7,0-11.6c-2.9,0-5.7,0-8.6,0c0,3.9,0,7.7,0,11.6 C6.1,16.2,9,16.2,11.8,16.2z M1.3,3.2c4.1,0,8.3,0,12.4,0c0-0.3,0-0.6,0-0.9c0-0.5-0.2-0.6-0.6-0.6c-3.7,0-7.4,0-11.1,0 c-0.1,0-0.2,0-0.3,0C1.5,1.8,1.3,2,1.3,2.2C1.3,2.5,1.3,2.9,1.3,3.2z"
-    }), React__default.createElement("path", {
+    }), /*#__PURE__*/React__default.createElement("path", {
       d: "M5.1,9.8c0-1.1,0-2.3,0-3.4c0-0.4,0.2-0.7,0.5-0.7C6,5.6,6.3,5.8,6.4,6.1c0,0.1,0,0.2,0,0.3c0,2.2,0,4.5,0,6.7 c0,0.1,0,0.3-0.1,0.4C6.2,13.8,6,14,5.7,13.9c-0.3,0-0.5-0.2-0.6-0.5c0-0.1,0-0.2,0-0.3C5.1,12,5.1,10.9,5.1,9.8z"
-    }), React__default.createElement("path", {
+    }), /*#__PURE__*/React__default.createElement("path", {
       d: "M9.9,9.8c0,1.1,0,2.3,0,3.4c0,0.3-0.2,0.6-0.5,0.7c-0.4,0.1-0.8-0.1-0.9-0.5c0-0.1,0-0.2,0-0.2c0-2.3,0-4.5,0-6.8 c0-0.4,0.2-0.7,0.5-0.7c0.3-0.1,0.7,0.1,0.7,0.5c0,0.1,0,0.2,0,0.3C9.9,7.6,9.9,8.7,9.9,9.8z"
     })));
   });
 
-  function _templateObject4$2() {
-    var data = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  width: 95%;\n  height: 100%;\n  border: 1px solid ", ";\n  padding: 0.5em;\n  margin-bottom: ", ";\n\n  .interest-item__container_heading {\n    color: ", ";\n    flex-basis: calc(100% / 6);\n    margin-left: ", ";\n    margin-top: 0.3rem;\n\n    @media (max-width: ", ") {\n      display: inline;\n    }\n  }\n\n  .list-items {\n    display: inline-flex;\n    flex-direction: column;\n\n    @media (max-width: ", ") {\n      margin-left: ", ";\n    }\n  }\n\n  @media (max-width: ", ") {\n    flex-direction: column;\n  }\n"]);
-
-    _templateObject4$2 = function _templateObject4() {
-      return data;
-    };
-
-    return data;
-  }
-
-  function _templateObject3$3() {
-    var data = _taggedTemplateLiteral(["\n  display: flex;\n\n  .no-shoe-size-section {\n    @media (max-width: ", ") {\n      display: none;\n    }\n  }\n"]);
-
-    _templateObject3$3 = function _templateObject3() {
-      return data;
-    };
-
-    return data;
-  }
-
-  function _templateObject2$8() {
-    var data = _taggedTemplateLiteral(["\n  font-weight: bold;\n  display: none;\n\n  @media (max-width: ", ") {\n    display: inline;\n  }\n"]);
-
-    _templateObject2$8 = function _templateObject2() {
-      return data;
-    };
-
-    return data;
-  }
-
-  function _templateObject$B() {
-    var data = _taggedTemplateLiteral(["\n  @media (max-width: ", ") {\n    display: none;\n  }\n"]);
-
-    _templateObject$B = function _templateObject() {
-      return data;
-    };
-
-    return data;
-  }
+  var _templateObject$B, _templateObject2$8, _templateObject3$3, _templateObject4$2;
   var MALE$2 = genders.MALE,
       FEMALE$2 = genders.FEMALE,
       UNISEX$1 = genders.UNISEX;
@@ -10599,10 +10745,10 @@
   var TrashIcon = function TrashIcon(_ref) {
     var onClick = _ref.onClick,
         id = _ref.id;
-    return React__default.createElement(IconWrapper, {
+    return /*#__PURE__*/React__default.createElement(IconWrapper, {
       onClick: onClick,
       id: id
-    }, React__default.createElement(SvgWrapper$1, null, React__default.createElement(Trash, null)));
+    }, /*#__PURE__*/React__default.createElement(SvgWrapper$1, null, /*#__PURE__*/React__default.createElement(Trash, null)));
   };
 
   var InterestItem = /*#__PURE__*/function (_React$Component) {
@@ -10657,50 +10803,58 @@
         }
       });
 
+      _defineProperty(_assertThisInitialized(_this), "getCategory", function (category) {
+        if (category === interestCategories.APPAREL) {
+          return 'CLOTHING';
+        }
+
+        return category;
+      });
+
       _defineProperty(_assertThisInitialized(_this), "render", function () {
         var _data$min_shoe_size, _data$max_shoe_size;
 
         var data = _this.props.data;
         var success = _this.state.delete.success;
-        return React__default.createElement(InterestItemContainer, {
+        return /*#__PURE__*/React__default.createElement(InterestItemContainer, {
           id: "interests__item--".concat(data.id),
           className: "".concat(success && 'interests__item--hiding')
-        }, React__default.createElement(InterestItemContent, {
+        }, /*#__PURE__*/React__default.createElement(InterestItemContent, {
           className: "interest-item__container ".concat(_this.props.className || '')
-        }, React__default.createElement("div", {
+        }, /*#__PURE__*/React__default.createElement("div", {
           className: "interest-item__container_heading"
-        }, React__default.createElement(InterestItemTitle, null, "Category:"), React__default.createElement("div", {
+        }, /*#__PURE__*/React__default.createElement(InterestItemTitle, null, "Category:"), /*#__PURE__*/React__default.createElement("div", {
           id: "interest-item-".concat(data.id, "__category"),
           className: "list-items"
-        }, data.category_type)), React__default.createElement("div", {
+        }, _this.getCategory(data.category_type))), /*#__PURE__*/React__default.createElement("div", {
           className: "interest-item__container_heading"
-        }, React__default.createElement(InterestItemTitle, null, "Brands:"), React__default.createElement("div", {
+        }, /*#__PURE__*/React__default.createElement(InterestItemTitle, null, "Brands:"), /*#__PURE__*/React__default.createElement("div", {
           className: "list-items"
         }, data.luxity_brands.length > 0 ? data.luxity_brands.map(function (brand) {
-          return React__default.createElement("span", {
-            key: data.id
+          return /*#__PURE__*/React__default.createElement("span", {
+            key: "".concat(brand.name, "-").concat(data.id)
           }, brand.name);
-        }) : 'All')), React__default.createElement("div", {
+        }) : 'All')), /*#__PURE__*/React__default.createElement("div", {
           className: "interest-item__container_heading"
-        }, React__default.createElement(InterestItemTitle, null, "Department:"), React__default.createElement("div", {
+        }, /*#__PURE__*/React__default.createElement(InterestItemTitle, null, "Department:"), /*#__PURE__*/React__default.createElement("div", {
           className: "list-items"
-        }, _this.getGender(data.gender))), React__default.createElement("div", {
+        }, _this.getGender(data.gender))), /*#__PURE__*/React__default.createElement("div", {
           className: "interest-item__container_heading"
-        }, React__default.createElement(InterestItemTitle, null, "Price:"), React__default.createElement("div", {
+        }, /*#__PURE__*/React__default.createElement(InterestItemTitle, null, "Price:"), /*#__PURE__*/React__default.createElement("div", {
           className: "list-items"
-        }, fC(data.min_price), "\xA0-\xA0", fC(data.max_price))), React__default.createElement("div", {
+        }, fC(data.min_price), "\xA0-\xA0", fC(data.max_price))), /*#__PURE__*/React__default.createElement("div", {
           className: "interest-item__container_heading"
-        }, React__default.createElement(InterestItemTitle, null, "Style:"), React__default.createElement("div", {
+        }, /*#__PURE__*/React__default.createElement(InterestItemTitle, null, "Style:"), /*#__PURE__*/React__default.createElement("div", {
           className: "list-items"
         }, data.luxity_styles.length > 0 ? data.luxity_styles.map(function (style) {
-          return React__default.createElement("span", {
-            key: data.id
+          return /*#__PURE__*/React__default.createElement("span", {
+            key: "".concat(style.name, "-").concat(data.id)
           }, style.name);
-        }) : 'All')), React__default.createElement("div", {
+        }) : 'All')), /*#__PURE__*/React__default.createElement("div", {
           className: "interest-item__container_heading ".concat(data.category_type === interestCategories.SHOES ? '' : 'no-shoe-size-section')
-        }, data.category_type === interestCategories.SHOES ? React__default.createElement("div", null, React__default.createElement(InterestItemTitle, null, "Shoe Size:"), React__default.createElement("div", {
+        }, data.category_type === interestCategories.SHOES ? /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(InterestItemTitle, null, "Shoe Size:"), /*#__PURE__*/React__default.createElement("div", {
           className: "list-items"
-        }, "".concat((data === null || data === void 0 ? void 0 : (_data$min_shoe_size = data.min_shoe_size) === null || _data$min_shoe_size === void 0 ? void 0 : _data$min_shoe_size.size) || '', " - "), "".concat((data === null || data === void 0 ? void 0 : (_data$max_shoe_size = data.max_shoe_size) === null || _data$max_shoe_size === void 0 ? void 0 : _data$max_shoe_size.size) || '', " "))) : React__default.createElement(SheoSizeContentDiv, null, "-"))), React__default.createElement(TrashIcon, {
+        }, "".concat((data === null || data === void 0 ? void 0 : (_data$min_shoe_size = data.min_shoe_size) === null || _data$min_shoe_size === void 0 ? void 0 : _data$min_shoe_size.size) || '', " - "), "".concat((data === null || data === void 0 ? void 0 : (_data$max_shoe_size = data.max_shoe_size) === null || _data$max_shoe_size === void 0 ? void 0 : _data$max_shoe_size.size) || '', " "))) : /*#__PURE__*/React__default.createElement(SheoSizeContentDiv, null, "-"))), /*#__PURE__*/React__default.createElement(TrashIcon, {
           id: "interest-".concat(data.id, "-delete-button"),
           onClick: function onClick() {
             if (!_this.state.delete.fetching) {
@@ -10716,13 +10870,13 @@
       return _this;
     }
 
-    return InterestItem;
+    return _createClass(InterestItem);
   }(React__default.Component);
 
-  var SheoSizeContentDiv = styled__default.div(_templateObject$B(), media.xs);
-  var InterestItemTitle = styled__default.div(_templateObject2$8(), media.xs);
-  var InterestItemContainer = styled__default.div(_templateObject3$3(), media.xs);
-  var InterestItemContent = styled__default.div(_templateObject4$2(), function (props) {
+  var SheoSizeContentDiv = styled__default.div(_templateObject$B || (_templateObject$B = _taggedTemplateLiteral(["\n  @media (max-width: ", ") {\n    display: none;\n  }\n"])), media.xs);
+  var InterestItemTitle = styled__default.div(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteral(["\n  font-weight: bold;\n  display: none;\n\n  @media (max-width: ", ") {\n    display: inline;\n  }\n"])), media.xs);
+  var InterestItemContainer = styled__default.div(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteral(["\n  display: flex;\n\n  .no-shoe-size-section {\n    @media (max-width: ", ") {\n      display: none;\n    }\n  }\n"])), media.xs);
+  var InterestItemContent = styled__default.div(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  width: 95%;\n  height: 100%;\n  border: 1px solid ", ";\n  padding: 0.5em;\n  margin-bottom: ", ";\n\n  .interest-item__container_heading {\n    color: ", ";\n    flex-basis: calc(100% / 6);\n    margin-left: ", ";\n    margin-top: 0.3rem;\n\n    @media (max-width: ", ") {\n      display: inline;\n    }\n  }\n\n  .list-items {\n    display: inline-flex;\n    flex-direction: column;\n\n    @media (max-width: ", ") {\n      margin-left: ", ";\n    }\n  }\n\n  @media (max-width: ", ") {\n    flex-direction: column;\n  }\n"])), function (props) {
     return props.theme.colors.borderColor;
   }, function (props) {
     return props.theme.marginPaddings[1];
@@ -10740,19 +10894,11 @@
    */
 
   var InterestItem$1 = (function (props) {
-    return React__default.createElement(ThemedInterestItem, props);
+    return /*#__PURE__*/React__default.createElement(ThemedInterestItem, props);
   });
 
-  function _templateObject$C() {
-    var data = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n\n  .heading-title-section {\n    display: flex;\n    justify-content: space-between;\n    width: 95%;\n    padding: ", ";\n  }\n\n  .heading-title {\n    color: ", ";\n    font-weight: bold;\n    flex-basis: calc(100% / 6);\n    margin-left: ", ";\n    padding-bottom: 0;\n  }\n\n  .heading-title-empty {\n    flex-basis: 5%;\n    margin-left: 1rem;\n  }\n\n  @media (max-width: ", ") {\n    display: none;\n  }\n"]);
-
-    _templateObject$C = function _templateObject() {
-      return data;
-    };
-
-    return data;
-  }
-  var MyInterestTitleHeadingContainer = styled__default.div(_templateObject$C(), function (props) {
+  var _templateObject$C;
+  var MyInterestTitleHeadingContainer = styled__default.div(_templateObject$C || (_templateObject$C = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n\n  .heading-title-section {\n    display: flex;\n    justify-content: space-between;\n    width: 95%;\n    padding: ", ";\n  }\n\n  .heading-title {\n    color: ", ";\n    font-weight: bold;\n    flex-basis: calc(100% / 6);\n    margin-left: ", ";\n    padding-bottom: 0;\n  }\n\n  .heading-title-empty {\n    flex-basis: 5%;\n    margin-left: 1rem;\n  }\n\n  @media (max-width: ", ") {\n    display: none;\n  }\n"])), function (props) {
     return props.theme.marginPaddings[0];
   }, function (props) {
     return props.theme.colors.primary;
@@ -10761,41 +10907,33 @@
   }, media.xs);
 
   var MyInterestTitleHeading = function MyInterestTitleHeading() {
-    return React__default.createElement(MyInterestTitleHeadingContainer, null, React__default.createElement("div", {
+    return /*#__PURE__*/React__default.createElement(MyInterestTitleHeadingContainer, null, /*#__PURE__*/React__default.createElement("div", {
       className: "heading-title-section"
-    }, React__default.createElement("div", {
+    }, /*#__PURE__*/React__default.createElement("div", {
       className: "heading-title"
-    }, "Category"), React__default.createElement("div", {
+    }, "Category"), /*#__PURE__*/React__default.createElement("div", {
       className: "heading-title"
-    }, "Brands"), React__default.createElement("div", {
+    }, "Brands"), /*#__PURE__*/React__default.createElement("div", {
       className: "heading-title"
-    }, "Department"), React__default.createElement("div", {
+    }, "Department"), /*#__PURE__*/React__default.createElement("div", {
       className: "heading-title"
-    }, "Price Range"), React__default.createElement("div", {
+    }, "Price Range"), /*#__PURE__*/React__default.createElement("div", {
       className: "heading-title"
-    }, "Style"), React__default.createElement("div", {
+    }, "Style"), /*#__PURE__*/React__default.createElement("div", {
       className: "heading-title"
-    }, "Shoe Size")), React__default.createElement("div", {
+    }, "Shoe Size")), /*#__PURE__*/React__default.createElement("div", {
       className: "heading-title-empty"
     }));
   };
 
   var MyInterestTitleHeading$1 = themed(MyInterestTitleHeading);
 
-  function _templateObject$D() {
-    var data = _taggedTemplateLiteral(["\n  svg {\n    path {\n      fill: ", ";\n    }\n  }\n"]);
-
-    _templateObject$D = function _templateObject() {
-      return data;
-    };
-
-    return data;
-  }
-  var SvgWrapper$2 = styled__default.span(_templateObject$D(), function (props) {
+  var _templateObject$D;
+  var SvgWrapper$2 = styled__default.span(_templateObject$D || (_templateObject$D = _taggedTemplateLiteral(["\n  svg {\n    path {\n      fill: ", ";\n    }\n  }\n"])), function (props) {
     return props.theme.colors.primary;
   });
   var AccountIcon = themed(function () {
-    return React__default.createElement(SvgWrapper$2, null, React__default.createElement(Account, null));
+    return /*#__PURE__*/React__default.createElement(SvgWrapper$2, null, /*#__PURE__*/React__default.createElement(Account, null));
   });
 
   /**
@@ -10878,25 +11016,25 @@
             getSchedule = _this$props2.getSchedule,
             interestsTitle = _this$props2.interestsTitle,
             defaultShoeSizeType = _this$props2.defaultShoeSizeType;
-        return React__default.createElement("div", {
+        return /*#__PURE__*/React__default.createElement("div", {
           className: "interests"
-        }, React__default.createElement(Notifications__default, {
+        }, /*#__PURE__*/React__default.createElement(Notifications__default, {
           options: {
             zIndex: 9999999
           }
-        }), React__default.createElement(IconHeader$1, {
+        }), /*#__PURE__*/React__default.createElement(IconHeader$1, {
           svgComponent: function svgComponent() {
-            return React__default.createElement(AccountIcon, null);
+            return /*#__PURE__*/React__default.createElement(AccountIcon, null);
           },
           title: interestsTitle,
           svgName: "account",
           renderAppendage: function renderAppendage() {
-            return React__default.createElement(NotificationDropDown$1, {
+            return /*#__PURE__*/React__default.createElement(NotificationDropDown$1, {
               getSchedule: getSchedule,
               setSchedule: setSchedule
             });
           }
-        }), React__default.createElement(AddInterest$1, {
+        }), /*#__PURE__*/React__default.createElement(AddInterest$1, {
           addInterestApi: addInterestApi,
           onSubmitSuccess: function onSubmitSuccess(interest) {
             return _this2.onInterestSubmitSuccess(interest);
@@ -10907,7 +11045,7 @@
           getStylesGraphQuery: getStylesGraphQuery,
           getShoesGraphQuery: getShoesGraphQuery,
           defaultShoeSizeType: defaultShoeSizeType
-        }), interests.length > 0 ? React__default.createElement(MyInterestTitleHeading$1, null) : '', React__default.createElement(LuxityPageReady, {
+        }), interests.length > 0 ? /*#__PURE__*/React__default.createElement(MyInterestTitleHeading$1, null) : '', /*#__PURE__*/React__default.createElement(LuxityPageReady, {
           getRequestPromise: function getRequestPromise() {
             return _this2.triggerInterestRequest();
           },
@@ -10915,11 +11053,11 @@
             _this2.pageReady = inst;
           },
           onData: this.setInterests
-        }, React__default.createElement(React.Fragment, null, interests.map(function (item) {
-          return React__default.createElement(SimpleErrorBoundary, {
+        }, /*#__PURE__*/React__default.createElement(React.Fragment, null, interests.map(function (item) {
+          return /*#__PURE__*/React__default.createElement(SimpleErrorBoundary, {
             showMessageOnError: false,
             key: "interest-item-error-".concat(item.id)
-          }, React__default.createElement(InterestItem$1, {
+          }, /*#__PURE__*/React__default.createElement(InterestItem$1, {
             deleteInterestApi: deleteInterestApi,
             requestInstance: requestInstance,
             onDeleted: _this2.onDeleteInterest,