@bonlineza/luxity-lib 2.28.0 → 2.29.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('react-animate-height'), require('numeral'), require('@bonlineza/b-lib/functions'), require('rc-slider')) :
-  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', 'react-animate-height', 'numeral', '@bonlineza/b-lib/functions', 'rc-slider'], 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.AnimateHeight, global.numeral, global.function, global.rcSlider));
-}(this, (function (React, styled, Notifications, EllipsisLoader, PageReady, stylisRuleSheet, reactDom, PropTypes, raf, AutosizeInput, reactTransitionGroup, AnimateHeight, numeral, functions, rcSlider) { '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;
@@ -10,10 +10,9 @@
   EllipsisLoader = EllipsisLoader && Object.prototype.hasOwnProperty.call(EllipsisLoader, 'default') ? EllipsisLoader['default'] : EllipsisLoader;
   PageReady = PageReady && Object.prototype.hasOwnProperty.call(PageReady, 'default') ? PageReady['default'] : PageReady;
   stylisRuleSheet = stylisRuleSheet && Object.prototype.hasOwnProperty.call(stylisRuleSheet, 'default') ? stylisRuleSheet['default'] : stylisRuleSheet;
-  var PropTypes__default = 'default' in PropTypes ? PropTypes['default'] : PropTypes;
+  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;
-  AnimateHeight = AnimateHeight && Object.prototype.hasOwnProperty.call(AnimateHeight, 'default') ? AnimateHeight['default'] : AnimateHeight;
   numeral = numeral && Object.prototype.hasOwnProperty.call(numeral, 'default') ? numeral['default'] : numeral;
 
   function ownKeys(object, enumerableOnly) {
@@ -2526,7 +2525,7 @@
   }(React.Component);
 
   _defineProperty$1(MenuPlacer, "contextTypes", {
-    getPortalPlacement: PropTypes__default.func
+    getPortalPlacement: PropTypes.func
   });
 
   var Menu = function Menu(props) {
@@ -2732,7 +2731,7 @@
   }(React.Component);
 
   _defineProperty$1(MenuPortal, "childContextTypes", {
-    getPortalPlacement: PropTypes__default.func
+    getPortalPlacement: PropTypes.func
   });
 
   var isArray = Array.isArray;
@@ -7596,451 +7595,488 @@
   };
   var CategoryInterestSelector = themed(InterestCatSelector);
 
+  var _excluded$1 = ["children"];
+
   var _templateObject$8;
-  var OuterContainer = styled__default.div(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteral(["\n  border: 1px solid ", ";\n"])), function (props) {
-    return props.theme.colors.borderColor;
+  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;
+  }, disabledButtonStyle, function (props) {
+    return props.theme.colors.base;
   });
 
-  var _templateObject$9;
-  var ToggleButton = styled__default.div(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteral(["\n  padding-left: 3rem;\n  padding-right: 3rem;\n  display: flex;\n  align-items: center;\n  min-height: 70px;\n  height: 70px;\n  cursor: pointer;\n  outline: none;\n"])));
+  var TextButton = function TextButton(_ref) {
+    var children = _ref.children,
+        restProps = _objectWithoutProperties(_ref, _excluded$1);
 
-  var _templateObject$a;
-  var Title = styled__default.div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral(["\n  font-size: ", ";\n  font-weight: bold;\n  flex-grow: 1;\n  color: ", ";\n"])), function (props) {
-    return props.theme.fontSizes[2];
-  }, function (props) {
-    return props.theme.colors.primary || '';
-  });
+    return /*#__PURE__*/React__default.createElement(Button$1, restProps, children);
+  };
 
-  var _templateObject$b;
-  var BodyContent = styled__default.div(_templateObject$b || (_templateObject$b = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n"])), function (props) {
-    return props.theme.marginPaddings[5];
-  });
+  TextButton.defaultProps = {
+    type: 'button'
+  };
+  var TextButton$1 = themed(TextButton);
 
-  var _templateObject$c;
-  var BodyDivider = styled__default.hr(_templateObject$c || (_templateObject$c = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n  margin-top: 0;\n  border-style: none;\n  border-bottom: 1px solid ", ";\n"])), function (props) {
-    return props.theme.marginPaddings[4];
-  }, function (props) {
-    return props.theme.colors.borderColor;
-  });
+  var _excluded$2 = ["children"];
 
-  var _templateObject$d;
-  var Body$1 = styled__default.div(_templateObject$d || (_templateObject$d = _taggedTemplateLiteral(["\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (props) {
-    return props.theme.marginPaddings[6];
+  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.marginPaddings[6];
+    return props.theme.colors.primary;
+  }, function (props) {
+    return props.theme.colors.base;
+  }, function (props) {
+    return props.theme.colors.ntrlMin;
+  }, function (props) {
+    return props.theme.colors.ntrlMin;
+  }, function (props) {
+    return props.theme.colors.primary;
   });
 
-  var _templateObject$e;
-  var inputMarginRight = '0.2em';
-  var CheckboxLabel = styled__default.label(_templateObject$e || (_templateObject$e = _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;
+  var InvertedTextButton = function InvertedTextButton(_ref) {
+    var children = _ref.children,
+        restProps = _objectWithoutProperties(_ref, _excluded$2);
 
-    return (_props$theme = props.theme) !== null && _props$theme !== void 0 && _props$theme.fontSizes.length ? props.theme.fontSizes[4] : '1em';
+    return /*#__PURE__*/React__default.createElement(Button$2, restProps, children);
+  };
+
+  var InvertedTextButton$1 = themed(InvertedTextButton);
+
+  var _templateObject$a, _templateObject2$2;
+  var ALL_ITEM = {
+    id: 'ALL',
+    name: 'ALL'
+  };
+  var multiSelectorItemMaxHeight = '3rem';
+  var multiSelectorItemAnimationDuration = '300ms';
+  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.fontSizes[4];
+    return props.theme.colors.ntrlMin;
+  }, function (props) {
+    return props.theme.colors.primary;
+  }, function (props) {
+    return props.theme.colors.primary;
   }, function (props) {
     return props.theme.colors.ntrlMin;
-  }, inputMarginRight, function (props) {
+  }, function (props) {
     return props.theme.colors.primary;
   }, function (props) {
-    return props.theme.borderRadius;
+    return props.theme.marginPaddings[0];
+  }, multiSelectorItemAnimationDuration, multiselectorItemFadeIn, function (props) {
+    return props.theme.marginPaddings[2];
+  }, function (props) {
+    return props.theme.marginPaddings[2];
+  }, function (props) {
+    return props.theme.marginPaddings[2];
+  }, media.sm, function (props) {
+    return props.theme.marginPaddings[2];
   }, function (props) {
     return props.theme.colors.primary;
+  }, function (props) {
+    return props.theme.colors.ntrlMin;
+  }, function (props) {
+    return props.theme.colors.primary;
+  }, function (props) {
+    return props.theme.colors.ntrlMin;
   });
-  var ErrorMessage$1 = styled__default.div({
-    color: function color(props) {
-      return props.theme.colors.primary;
-    }
-  });
-
-  /** @format */
-
-  numeral.register('locale', 'en-ZA', {
-    delimiters: {
-      thousands: ',',
-      decimal: '.'
-    },
-    abbreviations: {
-      thousand: 'k',
-      million: 'm',
-      billion: 'b',
-      trillion: 't'
-    },
-    ordinal: function ordinal() {
-      return '.';
-    },
-    currency: {
-      symbol: 'R'
-    }
-  });
-  numeral.locale('en-ZA');
-  String.locale = numeral.locale;
   /**
-   * Curreny Formatter
-   * @param {number} number - the number to be formatted
-   * @param {boolean} round - flag to indicate if the number needs to be rounded off
+   * Multiselector with a GraphQL flavour (TODO: to be revised to make it remote api agnostic)
    */
 
-  function fC(number) {
-    var round = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-    var parsedNumber = parseFloat(number);
-    return !Number.isNaN(parsedNumber) ? numeral(round ? Math.round(parsedNumber) : parsedNumber).format('$ 0,0.00') : 'R -';
-  }
-
-  var genders = {
-    FEMALE: 0,
-    MALE: 1,
-    UNISEX: 2
-  };
+  var GraphQLMultiSelector = /*#__PURE__*/function (_React$Component) {
+    _inherits(GraphQLMultiSelector, _React$Component);
 
-  var Trash = (function (props) {
-    return /*#__PURE__*/React__default.createElement("svg", _extends({
-      version: "1.1",
-      id: "svg-trash",
-      xmlns: "http://www.w3.org/2000/svg",
-      xmlnsXlink: "http://www.w3.org/1999/xlink",
-      x: "0px",
-      y: "0px",
-      viewBox: "0 0 15.1 17.5",
-      xmlSpace: "preserve"
-    }, 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"
-    }), /*#__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"
-    }), /*#__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"
-    })));
-  });
+    var _super = _createSuper(GraphQLMultiSelector);
 
-  var _templateObject$f;
-  var SvgWrapper$1 = styled__default.span(_templateObject$f || (_templateObject$f = _taggedTemplateLiteral(["\n  padding: 1rem;\n  display: flex;\n  svg {\n    width: 23px;\n    height: auto;\n  }\n"])));
+    function GraphQLMultiSelector(props) {
+      var _this;
 
-  var _templateObject$g;
-  var IconWrapper = styled__default.div(_templateObject$g || (_templateObject$g = _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;
-  });
+      _classCallCheck(this, GraphQLMultiSelector);
 
-  var _templateObject$h, _templateObject2$2, _templateObject3, _templateObject4;
-  var MALE = genders.MALE,
-      FEMALE = genders.FEMALE,
-      UNISEX = genders.UNISEX;
+      _this = _super.call(this, props);
 
-  var TrashIcon = function TrashIcon(_ref) {
-    var onClick = _ref.onClick,
-        id = _ref.id;
-    return /*#__PURE__*/React__default.createElement(IconWrapper, {
-      onClick: onClick,
-      id: id
-    }, /*#__PURE__*/React__default.createElement(SvgWrapper$1, null, /*#__PURE__*/React__default.createElement(Trash, null)));
-  };
+      _defineProperty(_assertThisInitialized(_this), "componentDidUpdate", function (prevProps) {
+        if (prevProps.graphQuery !== _this.props.graphQuery) {
+          _this.makeRequest();
+        }
+      });
 
-  var InterestItem = /*#__PURE__*/function (_React$Component) {
-    _inherits(InterestItem, _React$Component);
+      _defineProperty(_assertThisInitialized(_this), "makeRequest", function () {
+        _this.pageReady.refreshPage();
+      });
 
-    var _super = _createSuper(InterestItem);
+      _defineProperty(_assertThisInitialized(_this), "emptySelected", function () {
+        return _this.setState({
+          selected: [ALL_ITEM]
+        });
+      });
 
-    function InterestItem(props) {
-      var _this;
+      _defineProperty(_assertThisInitialized(_this), "setNewResults", function (res) {
+        var selectedIds = _this.state.selected.map(function (sel) {
+          return sel.id;
+        });
 
-      _classCallCheck(this, InterestItem);
+        var pagination = _this.props.resultProcessor(res);
 
-      _this = _super.call(this, props);
+        var allSelected = _this.state.selected.some(function (item) {
+          return item.id === ALL_ITEM.id;
+        });
 
-      _defineProperty(_assertThisInitialized(_this), "deleteInterestItem", function () {
-        var id = _this.props.data.id;
+        var newList = pagination.data.filter(function (newItem) {
+          return !selectedIds.includes(newItem.id);
+        });
+        newList = allSelected ? newList : [ALL_ITEM].concat(_toConsumableArray(newList));
 
         _this.setState({
-          delete: _objectSpread2(_objectSpread2({}, request), {}, {
-            fetching: true
-          })
+          list: newList,
+          pagination: pagination
         });
+      });
 
-        var url = _this.props.deleteInterestApi(id);
+      _defineProperty(_assertThisInitialized(_this), "onAddItem", function (addSelectedItem) {
+        _this.setState(function (prevState) {
+          var newSelectedList;
+          var newList;
 
-        simpleRequest(_this.props.requestInstance, url, method.DELETE, null, function () {
-          _this.setState({
-            delete: _objectSpread2(_objectSpread2({}, request), {}, {
-              success: true
-            })
-          });
+          if (addSelectedItem.id === ALL_ITEM.id) {
+            // Clear Selected List
+            // and move previous Selected items to list
+            newSelectedList = [ALL_ITEM];
+            newList = prevState.list.filter(function (item) {
+              return item.id !== ALL_ITEM.id;
+            }).concat(prevState.selected).sort(function (a, b) {
+              return a.id - b.id;
+            });
+          } else {
+            newSelectedList = _toConsumableArray(prevState.selected.filter(function (item) {
+              return item.id !== ALL_ITEM.id;
+            })).concat(addSelectedItem);
+            newList = [ALL_ITEM].concat(_toConsumableArray(prevState.list.filter(function (item) {
+              return item.id !== ALL_ITEM.id;
+            }).filter(function (item) {
+              return item.id !== addSelectedItem.id;
+            })));
+          }
 
-          _this.props.onDeleted(_this.props.data);
+          return {
+            selected: newSelectedList,
+            list: newList
+          };
         }, function () {
-          return _this.setState({
-            delete: _objectSpread2({}, request)
-          });
+          _this.props.onChange(_this.state.selected.filter(function (item) {
+            return item.id !== ALL_ITEM.id;
+          }));
         });
       });
 
-      _defineProperty(_assertThisInitialized(_this), "getGender", function (gender) {
-        switch (gender) {
-          case MALE:
-            return 'Male';
+      _defineProperty(_assertThisInitialized(_this), "onRemoveItem", function (removeSelectedItem) {
+        _this.setState(function (prevState) {
+          // Cannot remove ALL from selection by unselecting it
+          if ((removeSelectedItem === null || removeSelectedItem === void 0 ? void 0 : removeSelectedItem.id) === ALL_ITEM.id) {
+            return {};
+          }
 
-          case FEMALE:
-            return 'Female';
+          var newSelectedList = prevState.selected.filter(function (item) {
+            return item.id !== removeSelectedItem.id;
+          });
 
-          case UNISEX:
-          default:
-            return 'Unisex';
-        }
-      });
+          var newList = _toConsumableArray(prevState.list).concat(removeSelectedItem).filter(function (item) {
+            return item.id !== ALL_ITEM.id;
+          }).sort(function (a, b) {
+            return a.id - b.id;
+          });
 
-      _defineProperty(_assertThisInitialized(_this), "getCategory", function (category) {
-        if (category === interestCategories.APPAREL) {
-          return 'CLOTHING';
-        }
+          return {
+            list: newList,
+            selected: newSelectedList.length ? newSelectedList : [ALL_ITEM]
+          };
+        }, function () {
+          _this.props.onChange(_this.state.selected.filter(function (item) {
+            return item.id !== ALL_ITEM.id;
+          }));
+        });
+      });
 
-        return category;
+      _defineProperty(_assertThisInitialized(_this), "onIsLoading", function (flag) {
+        _this.setState({
+          isLoading: flag
+        });
       });
 
       _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 /*#__PURE__*/React__default.createElement(InterestItemContainer, {
-          id: "interests__item--".concat(data.id),
-          className: "".concat(success && 'interests__item--hiding')
-        }, /*#__PURE__*/React__default.createElement(InterestItemContent, {
-          className: "interest-item__container ".concat(_this.props.className || '')
+        var _this$props = _this.props,
+            baseClass = _this$props.baseClass,
+            ItemRenderer = _this$props.itemRenderer,
+            identifier = _this$props.identifier,
+            triggerRequest = _this$props.triggerRequest,
+            className = _this$props.className;
+        var _this$state = _this.state,
+            list = _this$state.list,
+            selected = _this$state.selected,
+            pagination = _this$state.pagination,
+            isLoading = _this$state.isLoading;
+        return /*#__PURE__*/React__default.createElement(StyledMultiselector, null, /*#__PURE__*/React__default.createElement("div", {
+          "data-qe-id": identifier,
+          className: "".concat(className, " ").concat(baseClass)
         }, /*#__PURE__*/React__default.createElement("div", {
-          className: "interest-item__container_heading"
-        }, /*#__PURE__*/React__default.createElement(InterestItemTitle, null, "Category:"), /*#__PURE__*/React__default.createElement("div", {
-          id: "interest-item-".concat(data.id, "__category"),
-          className: "list-items"
-        }, _this.getCategory(data.category_type))), /*#__PURE__*/React__default.createElement("div", {
-          className: "interest-item__container_heading"
-        }, /*#__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 /*#__PURE__*/React__default.createElement("span", {
-            key: "".concat(brand.name, "-").concat(data.id)
-          }, brand.name);
-        }) : 'All')), /*#__PURE__*/React__default.createElement("div", {
-          className: "interest-item__container_heading"
-        }, /*#__PURE__*/React__default.createElement(InterestItemTitle, null, "Department:"), /*#__PURE__*/React__default.createElement("div", {
-          className: "list-items"
-        }, _this.getGender(data.gender))), /*#__PURE__*/React__default.createElement("div", {
-          className: "interest-item__container_heading"
-        }, /*#__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))), /*#__PURE__*/React__default.createElement("div", {
-          className: "interest-item__container_heading"
-        }, /*#__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 /*#__PURE__*/React__default.createElement("span", {
-            key: "".concat(style.name, "-").concat(data.id)
-          }, style.name);
-        }) : '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 ? /*#__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) || '', " "))) : /*#__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) {
-              _this.deleteInterestItem();
-            }
+          className: "".concat(baseClass, "__selected-items")
+        }, selected.map(function (item) {
+          return /*#__PURE__*/React__default.createElement(ItemRenderer, {
+            key: item.id,
+            item: item,
+            onSelect: _this.onRemoveItem,
+            selected: true
+          });
+        })), /*#__PURE__*/React__default.createElement(LuxityPageReady, {
+          ref: function ref(inst) {
+            _this.pageReady = inst;
+          },
+          onData: _this.setNewResults,
+          onIsLoading: _this.onIsLoading,
+          getRequestPromise: function getRequestPromise() {
+            return triggerRequest();
           }
-        }));
+        }), /*#__PURE__*/React__default.createElement("div", {
+          className: "".concat(baseClass, "__selectable-items")
+        }, list.map(function (item) {
+          return /*#__PURE__*/React__default.createElement(ItemRenderer, {
+            key: item.id,
+            item: item,
+            onSelect: _this.onAddItem,
+            selected: false
+          });
+        })), /*#__PURE__*/React__default.createElement("div", {
+          className: "".concat(baseClass, "__footer")
+        }, /*#__PURE__*/React__default.createElement(InvertedTextButton$1, {
+          disabled: isLoading || !pagination.has_more_pages,
+          onClick: _this.props.increaseLimit,
+          type: "button"
+        }, "SHOW MORE"))));
       });
 
       _this.state = {
-        delete: _objectSpread2({}, request)
+        selected: [ALL_ITEM],
+        list: [],
+        pagination: {},
+        isLoading: false
       };
       return _this;
     }
 
-    return _createClass(InterestItem);
+    return _createClass(GraphQLMultiSelector);
   }(React__default.Component);
 
-  var SheoSizeContentDiv = styled__default.div(_templateObject$h || (_templateObject$h = _taggedTemplateLiteral(["\n  @media (max-width: ", ") {\n    display: none;\n  }\n"])), media.xs);
-  var InterestItemTitle = styled__default.div(_templateObject2$2 || (_templateObject2$2 = _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 || (_templateObject3 = _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 || (_templateObject4 = _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% / 8);\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) {
+  GraphQLMultiSelector.defaultProps = {
+    baseClass: 'multiselector'
+  };
+  var GraphQLMultiSelector$1 = themed(GraphQLMultiSelector);
+
+  var Search = (function (props) {
+    return /*#__PURE__*/React__default.createElement("svg", _extends({
+      width: "15",
+      height: "15",
+      viewBox: "0 0 15 15",
+      overflow: "visible",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, 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"
+    }));
+  });
+
+  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 || (_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.darkerGray;
+    return props.theme.colors.primary;
   }, function (props) {
-    return props.theme.marginPaddings[1];
-  }, media.xs, media.xs, function (props) {
-    return props.theme.marginPaddings[0];
-  }, media.xs);
-  var ThemedInterestItem = themed(InterestItem);
-  /**
-   * The Interest Item view shows the selected interest configuration,
-   * and gives user control to delete it.
-   */
-
-  var InterestItem$1 = (function (props) {
-    return /*#__PURE__*/React__default.createElement(ThemedInterestItem, props);
+    return props.theme.marginPaddings[3];
+  }, function (props) {
+    return props.theme.marginPaddings[3];
   });
 
-  var _templateObject$i;
-  var RadioButtonsContainer = styled__default.div(_templateObject$i || (_templateObject$i = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"])));
+  var InterestsSubheading = function InterestsSubheading(_ref) {
+    var title = _ref.title,
+        children = _ref.children,
+        className = _ref.className;
+    return /*#__PURE__*/React__default.createElement(InterestsSubheadingContainer, {
+      className: className
+    }, /*#__PURE__*/React__default.createElement(Title, null, title), /*#__PURE__*/React__default.createElement("div", null, children));
+  };
 
-  var _templateObject$j;
-  var ButtonListWrapper = styled__default.div(_templateObject$j || (_templateObject$j = _taggedTemplateLiteral(["\n  display: flex;\n  flex-grow: 1;\n  flex-wrap: ", ";\n"])), function (_ref) {
-    var noWrap = _ref.noWrap;
-    return noWrap ? 'nowrap' : 'wrap';
-  });
+  var _templateObject$c;
 
-  var _templateObject$k;
-  var Title$1 = styled__default.div(_templateObject$k || (_templateObject$k = _taggedTemplateLiteral(["\n  font-weight: bold;\n  color: ", ";\n  flex-basis: 40%;\n"])), function (props) {
-    return props.theme.colors.base;
-  });
+  var Title$1 = function Title(_ref) {
+    var baseClass = _ref.baseClass,
+        className = _ref.className,
+        title = _ref.title,
+        searchPlaceHolder = _ref.searchPlaceHolder,
+        onSearchChanged = _ref.onSearchChanged;
+    return /*#__PURE__*/React__default.createElement(InterestsSubheading, {
+      className: "".concat(className, " ").concat(baseClass, "__title"),
+      title: title
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "title__search"
+    }, /*#__PURE__*/React__default.createElement(Search, null), /*#__PURE__*/React__default.createElement("input", {
+      placeholder: searchPlaceHolder,
+      type: "text",
+      name: "search",
+      onChange: onSearchChanged
+    })));
+  };
 
-  var _templateObject$l;
-  var RadioButtonLabel = styled__default.label(_templateObject$l || (_templateObject$l = _taggedTemplateLiteral(["\n  display: flex;\n  margin-bottom: ", ";\n  margin-right: ", ";\n"])), 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];
+  }, function (props) {
     return props.theme.marginPaddings[0];
+  }, function (props) {
+    return props.theme.marginPaddings[3];
+  }, function (props) {
+    return props.theme.colors.primary || '';
+  }, function (props) {
+    return props.theme.colors.primary || '';
+  }, function (props) {
+    return props.theme.fontSizes[2];
   }, function (props) {
     return props.theme.marginPaddings[0];
+  }, function (props) {
+    return props.theme.colors.primary;
   });
+  var Title$2 = themed(StyledTitle);
 
-  var _templateObject$m;
-  var RadioButtonCircle = styled__default.div(_templateObject$m || (_templateObject$m = _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;
-  });
+  var debounceBuilder = functions.debounced(200);
 
-  var _templateObject$n;
-  var RadioButtonCircleInner = styled__default.div(_templateObject$n || (_templateObject$n = _taggedTemplateLiteral(["\n  height: 8px;\n  width: 8px;\n  border-radius: 50%;\n  margin: auto;\n"])));
+  /**
+   * Luxity flavoured GraphQLMultiselector with text Search, category and limit controls
+   */
+  var LuxityGraphQLMultiselector = /*#__PURE__*/function (_React$Component) {
+    _inherits(LuxityGraphQLMultiselector, _React$Component);
 
-  var _templateObject$o;
-  var RadioButtonInput = styled__default.input(_templateObject$o || (_templateObject$o = _taggedTemplateLiteral(["\n  display: none;\n  :checked ~ ", " {\n    ", " {\n      background-color: ", ";\n    }\n  }\n"])), RadioButtonCircle, RadioButtonCircleInner, function (props) {
-    return props.theme.colors.base;
-  });
+    var _super = _createSuper(LuxityGraphQLMultiselector);
 
-  var _templateObject$p;
-  var RadioButtonText = styled__default.div(_templateObject$p || (_templateObject$p = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"])));
+    function LuxityGraphQLMultiselector(props) {
+      var _this;
 
-  /**
-   * RadioButtons component can show multiple radios, a title and an error message
-   */
-  var RadioButtons = function RadioButtons(_ref) {
-    var options = _ref.options,
-        name = _ref.name,
-        noWrap = _ref.noWrap,
-        title = _ref.title,
-        errors = _ref.errors;
+      _classCallCheck(this, LuxityGraphQLMultiselector);
 
-    var _useState = React.useState(errors[name]),
-        _useState2 = _slicedToArray(_useState, 2),
-        errMsg = _useState2[0],
-        setErrMsg = _useState2[1];
+      _this = _super.call(this, props);
 
-    React.useEffect(function () {
-      setErrMsg(errors[name]);
-    }, [errors, name]);
-    return /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(RadioButtonsContainer, null, /*#__PURE__*/React__default.createElement(Title$1, null, title), /*#__PURE__*/React__default.createElement(ButtonListWrapper, {
-      noWrap: noWrap
-    }, options.map(function (_ref2, index) {
-      var _ref2$actionCallback = _ref2.actionCallback,
-          actionCallback = _ref2$actionCallback === void 0 ? function () {
-        return null;
-      } : _ref2$actionCallback,
-          _ref2$value = _ref2.value,
-          value = _ref2$value === void 0 ? '' : _ref2$value,
-          _ref2$innerText = _ref2.innerText,
-          innerText = _ref2$innerText === void 0 ? '' : _ref2$innerText,
-          _ref2$checked = _ref2.checked,
-          checked = _ref2$checked === void 0 ? false : _ref2$checked;
-      return /*#__PURE__*/React__default.createElement(RadioButtonLabel, {
-        key: "".concat(name, "-").concat(index),
-        htmlFor: "".concat(name, "_").concat(index)
-      }, /*#__PURE__*/React__default.createElement(RadioButtonInput, {
-        id: "".concat(name, "_").concat(index),
-        type: "radio",
-        name: name,
-        defaultChecked: checked,
-        onChange: function onChange() {
-          setErrMsg('');
-          actionCallback(name, value);
-        },
-        value: value
-      }), /*#__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));
-  };
+      _defineProperty(_assertThisInitialized(_this), "multiSelectorRef", /*#__PURE__*/React__default.createRef());
 
-  RadioButtons.defaultProps = {
-    noWrap: false,
-    title: '',
-    errors: {}
-  };
-  var RadioButtons$1 = themed(RadioButtons);
+      _defineProperty(_assertThisInitialized(_this), "increaseLimit", function () {
+        _this.setState(function (prevState) {
+          return {
+            limit: prevState.limit + _this.props.queryLimitIncrement
+          };
+        });
+      });
 
-  var _templateObject$q, _templateObject2$3, _templateObject3$1, _templateObject4$1, _templateObject5;
-  /* position relative is required for the Body element to be positioned correctly */
+      _defineProperty(_assertThisInitialized(_this), "onChange", function (selection) {
+        _this.props.onChange(selection);
+      });
 
-  var relativeInlineStyle = styled.css(_templateObject$q || (_templateObject$q = _taggedTemplateLiteral(["\n  position: relative;\n"])));
-  var topMiddleBodyStyle = styled.css(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteral(["\n  position: absolute;\n  z-index: 1;\n  bottom: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n"])));
-  var getTopMiddleArrowAfterStyle = function getTopMiddleArrowAfterStyle(props) {
-    return styled.css(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteral(["\n  /*Bottom Arrow*/\n  top: 100%; /* At the bottom of the tooltip */\n  left: calc(50% - ", ");\n  border-width: ", ";\n  border-style: solid;\n  border-color: ", " transparent transparent transparent;\n"])), props.apexWidth, props.apexWidth, props.theme.colors.base);
-  };
-  var getBottomMiddleBodyStyle = function getBottomMiddleBodyStyle(props) {
-    return styled.css(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 100%;\n  left: calc(50% - ", " / 2);\n"])), props.bodyWidth);
-  };
-  var getBottomMiddleArrowAfterStyle = function getBottomMiddleArrowAfterStyle(props) {
-    return styled.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  /*Top Arrow*/\n  bottom: 100%; /* At the top of the tooltip */\n  top: initial;\n  left: 50%;\n  border-style: solid;\n  border-color: transparent transparent ", " transparent;\n"])), props.theme.colors.base);
-  };
+      _defineProperty(_assertThisInitialized(_this), "onSearchChanged", function (event) {
+        event.preventDefault();
+        var searchText = event.target.value;
+        debounceBuilder(function () {
+          _this.setState({
+            nameFilter: searchText
+          });
+        });
+      });
 
-  var _templateObject$r;
+      _defineProperty(_assertThisInitialized(_this), "render", function () {
+        var _this$state = _this.state,
+            limit = _this$state.limit,
+            category = _this$state.category,
+            nameFilter = _this$state.nameFilter;
+        var _this$props = _this.props,
+            title = _this$props.title,
+            baseClass = _this$props.baseClass,
+            getGraphQuery = _this$props.getGraphQuery,
+            resultProcessor = _this$props.resultProcessor,
+            itemRenderer = _this$props.itemRenderer,
+            searchPlaceHolder = _this$props.searchPlaceHolder,
+            graphApi = _this$props.graphApi,
+            identifier = _this$props.identifier,
+            requestInstance = _this$props.requestInstance;
+        return /*#__PURE__*/React__default.createElement("div", {
+          className: baseClass
+        }, /*#__PURE__*/React__default.createElement(Title$2, {
+          title: title,
+          baseClass: baseClass,
+          searchPlaceHolder: searchPlaceHolder,
+          onSearchChanged: _this.onSearchChanged
+        }), /*#__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)
+            });
+          },
+          graphQuery: getGraphQuery(limit, 1, 'id|desc', category, nameFilter),
+          identifier: identifier,
+          ref: _this.multiSelectorRef,
+          onChange: _this.onChange,
+          resultProcessor: resultProcessor,
+          increaseLimit: _this.increaseLimit,
+          itemRenderer: itemRenderer
+        })));
+      });
 
-  var getBodyStyle = function getBodyStyle() {
-    var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    var _props$toolTipPositio = props.toolTipPosition,
-        toolTipPosition = _props$toolTipPositio === void 0 ? '' : _props$toolTipPositio;
+      _this.state = {
+        limit: props.baseQueryLimit,
+        category: props.category,
+        nameFilter: ''
+      };
+      return _this;
+    }
 
-    switch (toolTipPosition) {
-      case 'top':
-        return topMiddleBodyStyle;
+    _createClass(LuxityGraphQLMultiselector, [{
+      key: "componentDidUpdate",
+      value: function componentDidUpdate(prevProps) {
+        var _this$multiSelectorRe;
 
-      case 'bottom':
-        return getBottomMiddleBodyStyle(props);
+        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
+          };
+        }
 
-      default:
         return null;
-    }
-  };
-
-  var getAfterStyling = function getAfterStyling() {
-    var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    var toolTipPosition = props.toolTipPosition;
-
-    switch (toolTipPosition) {
-      case 'top':
-        return getTopMiddleArrowAfterStyle(props);
+      }
+    }]);
 
-      case 'bottom':
-        return getBottomMiddleArrowAfterStyle(props);
+    return LuxityGraphQLMultiselector;
+  }(React__default.Component);
 
-      default:
-        return '';
-    }
+  LuxityGraphQLMultiselector.defaultProps = {
+    baseClass: '',
+    searchPlaceHolder: '',
+    queryLimitIncrement: 12,
+    baseQueryLimit: 12
   };
 
-  var Body$2 = styled__default.span(_templateObject$r || (_templateObject$r = _taggedTemplateLiteral(["\n  ", ";\n  visibility: hidden;\n  opacity: 0;\n  width: ", ";\n  transition: visibility 0.3s linear, opacity 0.3s linear;\n  background-color: ", ";\n  color: white;\n  text-align: center;\n  border-radius: 5px;\n  ", "\n  &::after {\n    content: ' ';\n    position: absolute;\n    ", "\n  }\n"])), relativeInlineStyle, function (props) {
-    return props.bodyWidth;
-  }, function (props) {
-    return props.theme.colors.base || 'black';
-  }, function (props) {
-    return getBodyStyle(props);
-  }, function (props) {
-    return getAfterStyling(props);
-  });
-
-  var _templateObject$s;
-  var Container$1 = styled__default.div(_templateObject$s || (_templateObject$s = _taggedTemplateLiteral(["\n  ", ";\n  cursor: pointer;\n  &:hover ", " {\n    opacity: 1;\n    visibility: visible;\n  }\n"])), relativeInlineStyle, Body$2);
-
-  var _excluded$1 = ["children"];
+  var _excluded$3 = ["children"];
 
-  var _templateObject$t;
-  var Button$1 = styled__default.button(_templateObject$t || (_templateObject$t = _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) {
+  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;
@@ -8052,168 +8088,114 @@
 
   var PrimaryButton = function PrimaryButton(_ref) {
     var children = _ref.children,
-        restProps = _objectWithoutProperties(_ref, _excluded$1);
+        restProps = _objectWithoutProperties(_ref, _excluded$3);
 
-    return /*#__PURE__*/React__default.createElement(Button$1, restProps, children);
+    return /*#__PURE__*/React__default.createElement(Button$3, restProps, children);
   };
 
   var PrimaryButton$1 = themed(PrimaryButton);
 
-  var _excluded$2 = ["children"];
-
-  var _templateObject$u;
-  var Button$2 = 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;
+  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.primary;
+    return props.theme.colors.borderColor;
   }, function (props) {
-    return props.theme.colors.primary;
+    return props.theme.colors.ntrlMin;
   }, function (props) {
     return props.theme.colors.primary;
   }, function (props) {
     return props.theme.colors.ntrlMin;
-  }, disabledButtonStyle, function (props) {
-    return props.theme.colors.base;
   });
+  var UnselectedButton = themed(BaseButton);
 
-  var SecondaryButton = function SecondaryButton(_ref) {
-    var children = _ref.children,
-        restProps = _objectWithoutProperties(_ref, _excluded$2);
-
-    return /*#__PURE__*/React__default.createElement(Button$2, restProps, children);
+  var ItemRenderer = function ItemRenderer(_ref) {
+    var item = _ref.item,
+        onSelect = _ref.onSelect,
+        selected = _ref.selected;
+    var props = {
+      onClick: function onClick(e) {
+        e.preventDefault();
+        onSelect(item);
+      }
+    };
+    return selected ? /*#__PURE__*/React__default.createElement(PrimaryButton$1, props, item.name) : /*#__PURE__*/React__default.createElement(UnselectedButton, props, item.name);
   };
 
-  var SecondaryButton$1 = themed(SecondaryButton);
-
-  var _excluded$3 = ["children"];
+  var BrandSelector = function BrandSelector(_ref) {
+    var onChange = _ref.onChange,
+        category = _ref.category,
+        graphApi = _ref.graphApi,
+        itemRenderer = _ref.itemRenderer,
+        getGraphQuery = _ref.getGraphQuery,
+        resultProcessor = _ref.resultProcessor,
+        requestInstance = _ref.requestInstance;
+    return /*#__PURE__*/React__default.createElement(LuxityGraphQLMultiselector, {
+      baseQueryLimit: 16,
+      title: "Brands",
+      queryId: "getBrands",
+      baseClass: "brand-selector",
+      identifier: "brand-selector",
+      searchPlaceHolder: "Search brands",
+      category: category,
+      onChange: onChange,
+      graphApi: graphApi,
+      itemRenderer: itemRenderer,
+      getGraphQuery: getGraphQuery,
+      resultProcessor: resultProcessor,
+      requestInstance: requestInstance
+    });
+  };
 
-  var _templateObject$v;
-  var Button$3 = styled__default.button(_templateObject$v || (_templateObject$v = _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;
-  }, disabledButtonStyle, function (props) {
-    return props.theme.colors.base;
-  });
+  BrandSelector.defaultProps = {
+    itemRenderer: ItemRenderer,
+    resultProcessor: function resultProcessor(result) {
+      return result.data.data.luxity_brands;
+    }
+  };
 
-  var TextButton = function TextButton(_ref) {
-    var children = _ref.children,
-        restProps = _objectWithoutProperties(_ref, _excluded$3);
+  var StyleSelector = function StyleSelector(_ref) {
+    var onChange = _ref.onChange,
+        category = _ref.category,
+        graphApi = _ref.graphApi,
+        itemRenderer = _ref.itemRenderer,
+        getGraphQuery = _ref.getGraphQuery,
+        resultProcessor = _ref.resultProcessor,
+        requestInstance = _ref.requestInstance;
+    return /*#__PURE__*/React__default.createElement(LuxityGraphQLMultiselector, {
+      title: "Styles",
+      queryId: "getStyles",
+      baseQueryLimit: 16,
+      baseClass: "style-selector",
+      identifier: "style-selector",
+      searchPlaceHolder: "Search Styles",
+      category: category,
+      onChange: onChange,
+      graphApi: graphApi,
+      itemRenderer: itemRenderer,
+      getGraphQuery: getGraphQuery,
+      resultProcessor: resultProcessor,
+      requestInstance: requestInstance
+    });
+  };
 
-    return /*#__PURE__*/React__default.createElement(Button$3, restProps, children);
+  StyleSelector.defaultProps = {
+    itemRenderer: ItemRenderer,
+    resultProcessor: function resultProcessor(result) {
+      return result.data.data.luxity_styles;
+    }
   };
 
-  TextButton.defaultProps = {
-    type: 'button'
+  var genders = {
+    FEMALE: 0,
+    MALE: 1,
+    UNISEX: 2
   };
-  var TextButton$1 = themed(TextButton);
 
-  var _excluded$4 = ["children"];
-
-  var _templateObject$w;
-  var Button$4 = styled__default(TextButton$1)(_templateObject$w || (_templateObject$w = _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;
-  }, function (props) {
-    return props.theme.colors.base;
-  }, function (props) {
-    return props.theme.colors.ntrlMin;
-  }, function (props) {
-    return props.theme.colors.ntrlMin;
-  }, function (props) {
-    return props.theme.colors.primary;
-  });
-
-  var InvertedTextButton = function InvertedTextButton(_ref) {
-    var children = _ref.children,
-        restProps = _objectWithoutProperties(_ref, _excluded$4);
-
-    return /*#__PURE__*/React__default.createElement(Button$4, restProps, children);
-  };
-
-  var InvertedTextButton$1 = themed(InvertedTextButton);
-
-  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 which formats the value to a specific format
-   */
-
-  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);
-
-    var handleValueChange = function handleValueChange(event) {
-      var inputValue = event.target.value;
-      var unmaskedValue = unMask(inputValue);
-      onChange(unmaskedValue);
-    };
-
-    var formatCurrency = function formatCurrency(originalValue) {
-      var numericValue = Number(originalValue);
-      var formattedValue = numericValue.toLocaleString('en-US');
-      return prefix + formattedValue;
-    };
-
-    var formattedValue = formatCurrency(value);
-    return /*#__PURE__*/React__default.createElement("input", _extends({}, rest, {
-      type: "text",
-      value: formattedValue,
-      onChange: handleValueChange
-    }));
-  };
-
-  CurrencyInputFormatter.defaultProps = {
-    value: '',
-    prefix: 'R',
-    groupSeparator: ',',
-    decimalSeparator: '.',
-    allowNegativeValue: false,
-    onChange: function onChange() {}
-  };
-
-  /**
-   * A thin wrapper for 'react-select' with common defaults
-   * @see https://react-select.com/props for full list of props
-   * @param {Object} props - pass all props directly into the react-select component
-   */
-  var ReactSelectWrapper = function ReactSelectWrapper(props) {
-    return /*#__PURE__*/React__default.createElement(index$1, props);
-  };
-
-  ReactSelectWrapper.defaultProps = {
-    isMulti: false,
-    isSearchable: false,
-    components: {
-      IndicatorSeparator: function IndicatorSeparator() {
-        return null;
-      }
-    },
-    options: [],
-    className: 'dropdown-select-container',
-    classNamePrefix: 'dropdown-select',
-    onChange: function onChange() {
-      return null;
-    },
-    name: undefined,
-    noOptionsMessage: function noOptionsMessage() {
-      return 'No Options';
-    }
-  };
-
-  function _extends$2() {
-    _extends$2 = Object.assign ? Object.assign.bind() : function (target) {
-      for (var i = 1; i < arguments.length; i++) {
-        var source = arguments[i];
+  function _extends$2() {
+    _extends$2 = Object.assign ? Object.assign.bind() : function (target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
 
         for (var key in source) {
           if (Object.prototype.hasOwnProperty.call(source, key)) {
@@ -8970,12 +8952,12 @@
   /* ::<number | string, string, string> */
   (transparentize);
 
-  var _templateObject$x;
-  var baseSliderStyles = styled.css(_templateObject$x || (_templateObject$x = _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"])));
+  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"])));
 
-  var _templateObject$y, _templateObject2$4, _templateObject3$2, _templateObject4$2;
+  var _templateObject$g, _templateObject2$4, _templateObject3, _templateObject4;
   var handleDimension = '14px';
-  var SliderContainer = styled__default.div(_templateObject$y || (_templateObject$y = _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) {
+  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;
@@ -8994,22 +8976,22 @@
   var getSliderMarkStyle = function getSliderMarkStyle(_ref) {
     var showMarks = _ref.showMarks,
         primary = _ref.theme.colors.primary;
-    var visiblityStyle = showMarks ? styled.css(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteral([""]))) : styled.css(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteral(["\n        .rc-slider-mark-text,\n        .rc-slider-dot {\n          visibility: hidden;\n        }\n      "])));
-    return styled.css(_templateObject4$2 || (_templateObject4$2 = _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);
+    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);
   };
 
-  var _templateObject$z;
-  var ToolTipWrapper = styled__default.div(_templateObject$z || (_templateObject$z = _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"])));
 
-  var _templateObject$A;
-  var Footer = styled__default.div(_templateObject$A || (_templateObject$A = _taggedTemplateLiteral(["\n  display: flex;\n  flex-flow: row nowrap;\n  justify-content: flex-end;\n"])));
+  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"])));
 
-  var _excluded$6 = ["dragging", "value", "offset", "index"],
+  var _excluded$4 = ["dragging", "value", "offset", "index"],
       _excluded2 = ["renderTitleSection", "marks", "defaultMinValue", "defaultMaxValue", "min", "max", "toolTipComponent", "renderFooterSection", "onChange", "children", "identifier", "showMarks"];
 
-  var _templateObject$B;
-  var debounceBuilder = functions.debounced(100);
-  var ChildrenWrapper = styled__default.div(_templateObject$B || (_templateObject$B = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n"])), function (props) {
+  var _templateObject$j;
+  var debounceBuilder$1 = functions.debounced(100);
+  var ChildrenWrapper = styled__default.div(_templateObject$j || (_templateObject$j = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n"])), function (props) {
     return props.theme.marginPaddings[3];
   });
 
@@ -9022,7 +9004,7 @@
         value = handleProps.value,
         offset = handleProps.offset,
         index = handleProps.index,
-        restHandleProps = _objectWithoutProperties(handleProps, _excluded$6);
+        restHandleProps = _objectWithoutProperties(handleProps, _excluded$4);
 
     var getToolTipProps = function getToolTipProps() {
       var newProps = {}; // Ensures that Tooltip component does not get ref prop
@@ -9112,7 +9094,7 @@
           min: currMinVal,
           max: currMaxVal
         };
-        debounceBuilder(function () {
+        debounceBuilder$1(function () {
           return onChange(value);
         });
       }
@@ -9168,155 +9150,6 @@
   };
   var RangeSlider$1 = themed(RangeSlider);
 
-  var _templateObject$C, _templateObject2$5;
-  var Title$2 = styled__default.h1(_templateObject$C || (_templateObject$C = _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$5 || (_templateObject2$5 = _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;
-  }, function (props) {
-    return props.theme.marginPaddings[3];
-  }, function (props) {
-    return props.theme.marginPaddings[3];
-  });
-
-  var InterestsSubheading = function InterestsSubheading(_ref) {
-    var title = _ref.title,
-        children = _ref.children,
-        className = _ref.className;
-    return /*#__PURE__*/React__default.createElement(InterestsSubheadingContainer, {
-      className: className
-    }, /*#__PURE__*/React__default.createElement(Title$2, null, title), /*#__PURE__*/React__default.createElement("div", null, children));
-  };
-
-  var _templateObject$D;
-  var CurrencyInputWrapper = styled__default.div(_templateObject$D || (_templateObject$D = _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;
-  });
-
-  var debounceBuilder$1 = functions.debounced(50);
-
-  var getMaxPrice = function getMaxPrice() {
-    var interestCategory = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-
-    switch (interestCategory) {
-      case interestCategories.ACCESSORIES:
-        return interestCategoryMaxPrices.ACCESSORIES;
-
-      case interestCategories.BAGS:
-        return interestCategoryMaxPrices.BAGS;
-
-      case interestCategories.SHOES:
-        return interestCategoryMaxPrices.SHOES;
-
-      case interestCategories.WATCHES:
-        return interestCategoryMaxPrices.WATCHES;
-
-      case interestCategories.APPAREL:
-        return interestCategoryMaxPrices.APPAREL;
-
-      default:
-        return 0;
-    }
-  };
-
-  var getFooterButtons = function getFooterButtons(actionObj) {
-    var giveFullRange = actionObj.giveFullRange;
-    return /*#__PURE__*/React__default.createElement(SecondaryButton$1, {
-      type: "button",
-      onClick: giveFullRange
-    }, "Full Price Range");
-  };
-  /** UI Slider with minimum and max input fields give the ability to
-   * select a price range */
-
-
-  var PriceRangeSelector = function PriceRangeSelector(_ref) {
-    var onChange = _ref.onChange,
-        category = _ref.category;
-    var maxPrice = getMaxPrice(category);
-
-    var handleSlideChange = function handleSlideChange(value) {
-      var min_price = value.min,
-          max_price = value.max;
-      onChange({
-        min_price: min_price,
-        max_price: max_price
-      });
-    };
-
-    var handleMinCurrencyChange = function handleMinCurrencyChange(targetValue, currMaxVal, manuallyChangeMinValue) {
-      var value = parseInt(unMask(targetValue), 10);
-      value = Number.isNaN(value) ? 0 : value;
-      value = value > currMaxVal ? currMaxVal : value;
-      debounceBuilder$1(function () {
-        manuallyChangeMinValue(value);
-        onChange({
-          min_price: value,
-          max_price: currMaxVal
-        });
-      });
-    };
-
-    var handleMaxCurrencyChange = function handleMaxCurrencyChange(targetValue, currMinVal, manuallyChangeMaxValue) {
-      var value = parseInt(unMask(targetValue), 10);
-      value = Number.isNaN(value) ? 0 : value;
-      value = value < currMinVal ? currMinVal : value;
-      debounceBuilder$1(function () {
-        manuallyChangeMaxValue(value);
-        onChange({
-          max_price: value,
-          min_price: currMinVal
-        });
-      });
-    };
-
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: "price-ranges"
-    }, /*#__PURE__*/React__default.createElement(RangeSlider$1, {
-      renderTitleSection: function renderTitleSection() {
-        return /*#__PURE__*/React__default.createElement(InterestsSubheading, {
-          title: "Price Range"
-        });
-      },
-      identifier: "price-range-slider",
-      max: maxPrice,
-      defaultMinValue: 0,
-      min: 0,
-      onChange: handleSlideChange,
-      defaultMaxValue: maxPrice,
-      renderFooterButtons: getFooterButtons,
-      title: "Price Ranges"
-    }, function (_ref2) {
-      var manuallyChangeMinValue = _ref2.manuallyChangeMinValue,
-          manuallyChangeMaxValue = _ref2.manuallyChangeMaxValue,
-          currMinVal = _ref2.currMinVal,
-          currMaxVal = _ref2.currMaxVal;
-      return /*#__PURE__*/React__default.createElement(CurrencyInputWrapper, null, /*#__PURE__*/React__default.createElement(CurrencyInputFormatter, {
-        "data-qe-id": "masked-input-min",
-        value: currMinVal,
-        onChange: function onChange(value) {
-          handleMinCurrencyChange(value, currMaxVal, manuallyChangeMinValue);
-        }
-      }), /*#__PURE__*/React__default.createElement(CurrencyInputFormatter, {
-        "data-qe-id": "masked-input-max",
-        value: currMaxVal,
-        onChange: function onChange(value) {
-          handleMaxCurrencyChange(value, currMinVal, manuallyChangeMaxValue);
-        }
-      }));
-    }));
-  };
-
-  PriceRangeSelector.defaultProps = {
-    onChange: function onChange() {
-      return false;
-    },
-    category: ''
-  };
-
   var getMaxSizeIndex = function getMaxSizeIndex() {
     var shoe_sizes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
     return shoe_sizes.length - 1;
@@ -9382,1072 +9215,120 @@
     shoeSizes: []
   };
 
-  var _templateObject$E, _templateObject2$6, _templateObject3$3, _templateObject4$3, _templateObject5$1, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30;
-  var HeaderWrapper = styled__default.div(_templateObject$E || (_templateObject$E = _taggedTemplateLiteral(["\n   {\n    display: inline-block;\n    background-color: ", ";\n    position: relative;\n    width: 100%;\n\n    .header__search-container,\n    .header__search-input {\n      background-color: ", ";\n    }\n\n    .header__search-container {\n      max-width: ", ";\n      margin: 0 auto;\n      padding: ", " 5%;\n    }\n  }\n"])), function (props) {
-    return props.theme.rareStepColors.ntrlMin;
-  }, function (props) {
-    return props.theme.rareStepColors.primary;
-  }, function (props) {
-    return props.theme.rareStepPageSizes.container;
-  }, function (props) {
-    return props.theme.marginPaddings[1];
-  });
-  var PageContainer = styled__default.div(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteral(["\n   {\n    max-width: ", ";\n    margin: 0 auto;\n    width: 100%;\n    padding: 0 5%;\n    display: flex;\n    justify-content: space-between;\n  }\n"])), function (props) {
-    return props.theme.rareStepPageSizes.container;
+  var _templateObject$k;
+  var RadioButtonsContainer = styled__default.div(_templateObject$k || (_templateObject$k = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"])));
+
+  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';
   });
-  var HeaderContainer = styled__default.div(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    justify-content: space-between;\n    padding: ", " 5%;\n    max-width: ", ";\n    margin: 0 auto;\n    width: 100%;\n  }\n"])), function (props) {
-    return props.theme.marginPaddings[1];
-  }, function (props) {
-    return props.theme.rareStepPageSizes.container;
+
+  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;
   });
-  var LogoFigure = styled__default.div(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n"])));
-  var LogoImage = styled__default.img(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteral(["\n   {\n    width: 160px;\n    cursor: pointer;\n  }\n"])));
-  var CurrencyFlagIcon = styled__default.img(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n   {\n    width: 25px;\n    height: 15px;\n    margin-top: 9px;\n    margin-right: 10px;\n  }\n"])));
-  var SellToUsLink = styled__default.a(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n   {\n    color: ", ";\n    font-weight: ", ";\n    font-size: ", ";\n    text-transform: uppercase;\n    letter-spacing: 1px;\n    cursor: pointer;\n    text-decoration: none;\n    font-style: italic;\n\n    &:hover,\n    &:active {\n      color: ", ";\n      text-decoration: none;\n    }\n  }\n"])), function (props) {
-    return props.theme.rareStepColors.secondary;
-  }, function (props) {
-    return props.theme.rareStepFontWeights.bold;
-  }, function (props) {
-    return props.theme.rareStepFontSize.h5;
+
+  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.rareStepColors.secondary;
+    return props.theme.marginPaddings[0];
   });
-  var HeaderIconsContainer = styled__default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    align-items: center;\n\n    .account-icon {\n      &__wrapper {\n        position: relative;\n      }\n\n      &__dropdown {\n        position: absolute;\n        width: 100%;\n        top: 25px;\n        left: 0;\n      }\n    }\n  }\n"])));
-  var HeaderIcon = styled__default.img(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n   {\n    width: 25px;\n    height: 22px;\n    margin-left: ", ";\n    cursor: pointer;\n  }\n"])), function (props) {
-    return props.theme.marginPaddings[3];
+
+  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;
   });
-  var NavigationContainer = styled__default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    justify-content: space-between;\n    background-color: ", ";\n    padding-top: ", ";\n  }\n"])), function (props) {
-    return props.theme.rareStepColors.primary;
-  }, function (props) {
-    return props.theme.marginPaddings[1];
-  });
-  var NavigationLink = styled__default.a(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    flex-wrap: no-wrap;\n    align-items: center;\n    color: ", ";\n    font-size: ", ";\n    margin-right: ", ";\n    padding-top: 2px;\n    padding-bottom: ", ";\n    cursor: pointer;\n    border-bottom: 2px solid ", ";\n    text-decoration: none;\n    white-space: nowrap;\n\n    &:last-child {\n      margin-right: 0;\n    }\n\n    &:hover,\n    &:active {\n      color: ", ";\n      text-decoration: none;\n      border-bottom: 2px solid ", ";\n    }\n  }\n"])), function (props) {
-    return props.theme.rareStepColors.ntrlMin;
-  }, function (props) {
-    return props.theme.rareStepFontSize.h5;
-  }, function (props) {
-    return props.theme.marginPaddings[5];
-  }, function (props) {
-    return props.theme.marginPaddings[1];
-  }, function (props) {
-    return props.theme.rareStepColors.primary;
-  }, function (props) {
-    return props.theme.rareStepColors.ntrlMin;
-  }, function (props) {
-    return props.theme.rareStepColors.secondary;
-  });
-  var NavigationLinks = styled__default.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n  }\n"])));
-  var Dropdown = styled__default.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    background-color: ", ";\n    padding: ", " 0;\n    border-top: 1px solid ", ";\n    font-size: ", ";\n    position: absolute;\n    width: 100%;\n  }\n"])), function (props) {
-    return props.theme.rareStepColors.primary;
-  }, function (props) {
-    return props.theme.marginPaddings[4];
-  }, function (props) {
-    return props.theme.rareStepColors.ntrl40;
-  }, function (props) {
-    return props.theme.rareStepFontSize.h5;
-  });
-  var DropdownBrands = styled__default.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    flex-direction: column;\n    width: 20%;\n  }\n"])));
-  var DropdownModels = styled__default.ul(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n   {\n    padding: 0 ", ";\n    border-right: 1px solid ", ";\n    width: 50%;\n    column-count: 3;\n  }\n"])), function (props) {
-    return props.theme.marginPaddings[3];
-  }, function (props) {
-    return props.theme.rareStepColors.ntrl40;
-  });
-  var DropdownModelsList = styled__default.li(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n   {\n    list-style: none;\n  }\n"])));
-  var DropdownFigure = styled__default.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    width: 30%;\n    padding-left: ", ";\n  }\n"])), function (props) {
-    return props.theme.marginPaddings[5];
-  });
-  var DropdownImage = styled__default.img(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n   {\n    width: 90%;\n    height: 300px;\n    object-fit: cover;\n    margin-left: auto;\n    max-height: 100%;\n  }\n"])));
-  var DropdownLink = styled__default.a(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n   {\n    color: ", ";\n    padding-bottom: ", ";\n    cursor: pointer;\n    text-decoration: none;\n\n    &:hover,\n    &:active {\n      color: ", ";\n      text-decoration: underline;\n    }\n  }\n"])), function (props) {
-    return props.theme.rareStepColors.ntrlMin;
-  }, function (props) {
-    return props.theme.marginPaddings[0];
-  }, function (props) {
-    return props.theme.rareStepColors.ntrlMin;
-  });
-  var DropdownBrandLinkContainer = styled__default.div(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n\n    &:hover {\n      cursor: pointer;\n\n      hr {\n        display: block;\n      }\n\n      a {\n        font-weight: ", ";\n      }\n    }\n  }\n"])), function (props) {
-    return props.theme.rareStepFontWeights.bold;
-  });
-  var DropdownBrandLinkHR = styled__default.hr(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n   {\n    display: none;\n    width: 20px;\n    margin: 10px 10px 0 0;\n    color: ", ";\n    height: 1px;\n    border: 1px solid ", ";\n  }\n"])), function (props) {
-    return props.theme.rareStepColors.secondary;
-  }, function (props) {
-    return props.theme.rareStepColors.secondary;
-  });
-  var DropdownBrandLink = styled__default.a(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n   {\n    color: ", ";\n    padding-bottom: 0.5rem;\n    text-decoration: none;\n\n    &:hover,\n    &:active {\n      color: ", ";\n      text-decoration: none;\n      font-weight: ", ";\n    }\n  }\n"])), function (props) {
-    return props.theme.rareStepColors.ntrlMin;
-  }, function (props) {
-    return props.theme.rareStepColors.ntrlMin;
-  }, function (props) {
-    return props.theme.rareStepFontWeights.bold;
-  });
-  var DropdownNavigatorIcon = styled__default.img(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n   {\n    width: 15px;\n    height: 12px;\n    margin-left: ", ";\n  }\n"])), function (props) {
-    return props.theme.marginPaddings[0];
-  });
-  var SellToUsHR = styled__default.hr(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n   {\n    width: 80px;\n    margin-top: 10px;\n    color: ", ";\n    border: 1px solid ", ";\n    margin-right: 10px;\n  }\n"])), function (props) {
-    return props.theme.rareStepColors.secondary;
-  }, function (props) {
-    return props.theme.rareStepColors.secondary;
-  });
-  var SearchContainer = styled__default.div(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    padding: ", " 0;\n    align-items: center;\n  }\n"])), function (props) {
-    return props.theme.marginPaddings[1];
-  });
-  var SearchInput = styled__default.input(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n   {\n    width: 100%;\n    font-size: ", ";\n    padding-bottom: ", ";\n    color: ", ";\n    border: none;\n    margin-left: ", ";\n\n    &:active,\n    &:focus,\n    &:focus-visible {\n      outline: none;\n      border: none;\n    }\n\n    &::placeholder {\n      color: ", ";\n    }\n  }\n"])), function (props) {
-    return props.theme.rareStepFontSize.footerTitle;
-  }, function (props) {
-    return props.theme.marginPaddings[0];
-  }, function (props) {
-    return props.theme.rareStepColors.ntrl40;
-  }, function (props) {
-    return props.theme.marginPaddings[3];
-  }, function (props) {
-    return props.theme.rareStepColors.ntrl40;
-  });
-  var SearchIcon = styled__default.img(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["\n   {\n    width: 20px;\n    height: 20px;\n    cursor: pointer;\n    margin-bottom: 7px;\n  }\n"])));
-  var CloseIcon = styled__default.img(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["\n   {\n    width: 20px;\n    height: 20px;\n    cursor: pointer;\n  }\n"])));
-  var CurrencyContainer = styled__default.div(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n  }\n"])));
-  var DropdownSearchContainer = styled__default.div(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["\n   {\n    background-color: ", ";\n    border-top: 1px solid ", ";\n  }\n"])), function (props) {
-    return props.theme.rareStepColors.primary;
-  }, function (props) {
-    return props.theme.rareStepColors.ntrl40;
-  });
-
-  var _templateObject$F, _templateObject2$7, _templateObject3$4, _templateObject4$4, _templateObject5$2, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20$1, _templateObject21$1, _templateObject22$1, _templateObject23$1;
-  var HeaderWrapper$1 = styled__default.div(_templateObject$F || (_templateObject$F = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    background-color: ", ";\n    position: relative;\n    width: 100%;\n    justify-content: space-between;\n    align-items: center;\n    padding: ", " 5%;\n  }\n"])), function (props) {
-    return props.theme.rareStepColors.ntrlMin;
-  }, function (props) {
-    return props.theme.marginPaddings[3];
-  });
-  var Icon = styled__default.img(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteral(["\n   {\n    width: 30px;\n    height: 30px;\n    cursor: pointer;\n  }\n"])));
-  var Logo = styled__default.img(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral(["\n   {\n    width: 140px;\n    height: auto;\n    margin-left: 30px;\n    cursor: pointer;\n  }\n"])));
-  var IconWrapper$1 = styled__default.div(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    width: auto;\n    height: 25px;\n\n    .search-icon,\n    .cart-icon {\n      width: 100%;\n      height: 100%;\n    }\n\n    .cart-icon {\n      margin-left: 10px;\n    }\n  }\n"])));
-  var NavigationWrapper = styled__default.div(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteral(["\n  padding: ", ";\n"])), function (props) {
-    return props.theme.marginPaddings[1];
-  });
-  var NavigationWrapperTitle = styled__default.div(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteral(["\n  font-size: 16px;\n"])));
-  var NavigationWrapperItem = styled__default.div(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteral(["\n  padding: 10px 0px 0px 20px;\n  font-size: 14px;\n  cursor: pointer;\n"])));
-  var SideNavWrapper = styled__default.div(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteral(["\n   {\n    position: relative;\n    overflow: hidden;\n\n    .side-nav-link--bottom {\n      font-size: ", ";\n    }\n  }\n"])), function (props) {
-    return props.theme.rareStepFontSize.h6;
-  });
-  var SideNav = styled__default.div(_templateObject9$1 || (_templateObject9$1 = _taggedTemplateLiteral(["\n   {\n    position: fixed;\n    top: 0;\n    left: -100%;\n    width: 80%;\n    height: 100%;\n    background-color: ", ";\n    color: ", ";\n    padding: ", ";\n    z-index: 9;\n  }\n"])), function (props) {
-    return props.theme.rareStepColors.primary;
-  }, function (props) {
-    return props.theme.rareStepColors.ntrlMin;
-  }, function (props) {
-    return props.theme.marginPaddings[1];
-  });
-  var Overlay = styled__default.div(_templateObject10$1 || (_templateObject10$1 = _taggedTemplateLiteral(["\n   {\n    position: fixed;\n    top: 0;\n    right: 200%;\n    width: 20%;\n    height: 100%;\n    background-color: ", ";\n    opacity: 0.5;\n  }\n"])), function (props) {
-    return props.theme.rareStepColors.ntrl40;
-  });
-  var CloseIcon$1 = styled__default.img(_templateObject11$1 || (_templateObject11$1 = _taggedTemplateLiteral(["\n   {\n    width: 25px;\n    height: 25px;\n    cursor: pointer;\n  }\n"])));
-  var SideNavLink = styled__default.a(_templateObject12$1 || (_templateObject12$1 = _taggedTemplateLiteral(["\n   {\n    padding: ", ";\n    color: ", ";\n    text-decoration: none;\n    text-align: left;\n    display: block;\n    width: 100%;\n    cursor: pointer;\n  }\n"])), function (props) {
-    return props.theme.marginPaddings[1];
-  }, function (props) {
-    return props.theme.rareStepColors.ntrlMin;
-  });
-  var CloseIconWrapper = styled__default.div(_templateObject13$1 || (_templateObject13$1 = _taggedTemplateLiteral(["\n   {\n    width: 100%;\n    display: flex;\n    justify-content: flex-end;\n  }\n"])));
-  var SellToUsLink$1 = styled__default.a(_templateObject14$1 || (_templateObject14$1 = _taggedTemplateLiteral(["\n   {\n    color: ", ";\n    border: 1px solid ", ";\n    background-color: transparent;\n    text-transform: uppercase;\n    font-weight: ", ";\n    display: block;\n    width: calc(100% - ", ");\n    padding: ", ";\n    margin: ", ";\n    text-align: center;\n    text-decoration: none;\n    border-radius: 5px;\n    letter-spacing: 1px;\n    font-style: italic;\n    font-size: ", ";\n  }\n"])), function (props) {
-    return props.theme.rareStepColors.secondary;
-  }, function (props) {
-    return props.theme.rareStepColors.secondary;
-  }, function (props) {
-    return props.theme.rareStepFontWeights.bold;
-  }, function (props) {
-    return props.theme.marginPaddings[2];
-  }, function (props) {
-    return props.theme.marginPaddings[1];
-  }, function (props) {
-    return props.theme.marginPaddings[1];
-  }, function (props) {
-    return props.theme.rareStepFontSize.h5;
-  });
-  var SubMenuLinkContainer = styled__default.div(_templateObject15$1 || (_templateObject15$1 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n  }\n"])));
-  var SubMenuRightIcon = styled__default.img(_templateObject16$1 || (_templateObject16$1 = _taggedTemplateLiteral(["\n   {\n    width: 20px;\n    height: 20px;\n  }\n"])));
-  var Hr = styled__default.hr(_templateObject17$1 || (_templateObject17$1 = _taggedTemplateLiteral(["\n   {\n    width: 100%;\n    color: ", ";\n    margin: 0;\n  }\n"])), function (props) {
-    return props.theme.rareStepColors.ntrlMax;
-  });
-  var MobileSearchContainer = styled__default.div(_templateObject18$1 || (_templateObject18$1 = _taggedTemplateLiteral(["\n   {\n    background-color: ", ";\n\n    .header {\n      &__icon {\n        width: 20px;\n        height: 20px;\n      }\n\n      &__search-container {\n        border-top: 1px solid ", ";\n        padding-left: 5%;\n        padding-right: 5%;\n      }\n\n      &__search-input {\n        width: 100%;\n        color: ", ";\n        background-color: ", ";\n\n        &::placeholder {\n          color: ", ";\n        }\n      }\n    }\n  }\n"])), function (props) {
-    return props.theme.rareStepColors.primary;
-  }, function (props) {
-    return props.theme.rareStepColors.ntrl50;
-  }, function (props) {
-    return props.theme.rareStepColors.ntrlMin;
-  }, function (props) {
-    return props.theme.rareStepColors.primary;
-  }, function (props) {
-    return props.theme.rareStepColors.ntrlMin;
-  });
-  var BackButton = styled__default.button(_templateObject19$1 || (_templateObject19$1 = _taggedTemplateLiteral(["\n   {\n    background-color: transparent;\n    border: none;\n    color: ", ";\n    margin: 30px 0;\n    position: relative;\n\n    &:hover {\n      cursor: pointer;\n      background-color: transparent;\n      color: ", ";\n      text-decoration: underline;\n    }\n  }\n"])), function (props) {
-    return props.theme.rareStepColors.ntrlMin;
-  }, function (props) {
-    return props.theme.rareStepColors.ntrlMin;
-  });
-  var BackIcon = styled__default.img(_templateObject20$1 || (_templateObject20$1 = _taggedTemplateLiteral(["\n   {\n    width: 20px;\n    height: 20px;\n    margin-right: 10px;\n    position: absolute;\n    top: 0;\n    left: 10px;\n  }\n"])));
-  var BackButtonContent = styled__default.div(_templateObject21$1 || (_templateObject21$1 = _taggedTemplateLiteral(["\n   {\n    font-size: ", ";\n    text-transform: uppercase;\n    color: ", ";\n    margin-left: 35px;\n    display: inline-block;\n  }\n"])), function (props) {
-    return props.theme.rareStepFontSize.h5;
-  }, function (props) {
-    return props.theme.rareStepColors.ntrlMin;
-  });
-  var SideNavLinksContainer = styled__default.div(_templateObject22$1 || (_templateObject22$1 = _taggedTemplateLiteral(["\n   {\n    overflow-y: auto;\n    overflow-x: hidden;\n    height: 90%;\n    padding-bottom: 50px;\n    overscroll-behavior: contain;\n  }\n"])));
-  var MenuSideNavWrapper = styled__default.div(_templateObject23$1 || (_templateObject23$1 = _taggedTemplateLiteral(["\n   {\n    .side-nav {\n      transition: left 1s ease-in-out;\n\n      &--open {\n        left: 0;\n      }\n\n      &--close {\n        left: -100%;\n      }\n\n      &__currency {\n        margin: ", " 0 0\n          ", ";\n      }\n    }\n\n    .overlay {\n      transition: right 1s ease-in-out;\n\n      &--open {\n        right: 0;\n      }\n\n      &--close {\n        right: 200%;\n      }\n    }\n  }\n"])), function (props) {
-    return props.theme.marginPaddings[4];
-  }, function (props) {
-    return props.theme.marginPaddings[1];
-  });
-
-  var _templateObject$G, _templateObject2$8, _templateObject3$5, _templateObject4$5, _templateObject5$3, _templateObject6$2, _templateObject7$2, _templateObject8$2, _templateObject9$2, _templateObject10$2, _templateObject11$2, _templateObject12$2, _templateObject13$2, _templateObject14$2, _templateObject15$2, _templateObject16$2;
-  var FooterWrapper = styled__default.div(_templateObject$G || (_templateObject$G = _taggedTemplateLiteral(["\n   {\n    background-color: ", ";\n    font-weight: ", ";\n    padding-top: ", ";\n    font-size: ", ";\n  }\n"])), function (props) {
-    return props.theme.rareStepColors.ntrlMax;
-  }, function (props) {
-    return props.theme.rareStepFontWeights.bold;
-  }, function (props) {
-    return props.theme.marginPaddings[4];
-  }, function (props) {
-    return props.theme.rareStepFontSize.h5;
-  });
-  var PageContainer$1 = styled__default.div(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteral(["\n   {\n    max-width: ", ";\n    margin: 0 auto;\n    width: 100%;\n    padding: 0 5%;\n    display: flex;\n    justify-content: space-between;\n  }\n"])), function (props) {
-    return props.theme.rareStepPageSizes.container;
-  });
-  var FooterLinksWrapper = styled__default.div(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    flex-basis: 70%;\n    padding-bottom: ", ";\n  }\n"])), function (props) {
-    return props.theme.marginPaddings[4];
-  });
-  var FooterLinksContainer = styled__default.div(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    padding-right: ", ";\n  }\n"])), function (props) {
-    return props.theme.marginPaddings[4];
-  });
-  var FooterTitleLink = styled__default.a(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteral(["\n   {\n    text-transform: uppercase;\n    color: ", ";\n    margin-bottom: ", ";\n    cursor: pointer;\n    font-weight: ", ";\n    font-size: ", ";\n    text-decoration: none;\n\n    &:hover,\n    &:active {\n      color: ", ";\n      text-decoration: underline;\n    }\n  }\n"])), function (props) {
-    return props.theme.rareStepColors.ntrlMin;
-  }, function (props) {
-    return props.theme.marginPaddings[1];
-  }, function (props) {
-    return props.theme.rareStepFontWeights.bold;
-  }, function (props) {
-    return props.theme.rareStepFontSize.footerTitle;
-  }, function (props) {
-    return props.theme.rareStepColors.ntrlMin;
-  });
-  var FooterLink = styled__default.a(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteral(["\n   {\n    color: ", ";\n    cursor: pointer;\n    margin-bottom: ", ";\n    font-weight: ", ";\n    text-decoration: none;\n    font-size: ", ";\n\n    &:hover,\n    &:active {\n      color: ", ";\n      text-decoration: underline;\n    }\n  }\n"])), function (props) {
-    return props.theme.rareStepColors.ntrlMin;
-  }, function (props) {
-    return props.theme.space[2];
-  }, function (props) {
-    return props.theme.rareStepFontWeights.normal;
-  }, function (props) {
-    return props.theme.rareStepFontSize.h6;
-  }, function (props) {
-    return props.theme.rareStepColors.ntrlMin;
-  });
-  var FooterImage = styled__default.img(_templateObject7$2 || (_templateObject7$2 = _taggedTemplateLiteral(["\n   {\n    width: 100%;\n    height: 100%;\n    max-height: 300px;\n    object-fit: cover;\n  }\n"])));
-  var FooterImageWrapper = styled__default.div(_templateObject8$2 || (_templateObject8$2 = _taggedTemplateLiteral(["\n   {\n    flex-basis: 30%;\n    padding-bottom: ", ";\n  }\n"])), function (props) {
-    return props.theme.marginPaddings[4];
-  });
-  var FooterLogo = styled__default.img(_templateObject9$2 || (_templateObject9$2 = _taggedTemplateLiteral(["\n   {\n    width: 120px;\n    margin-top: ", ";\n    cursor: pointer;\n  }\n"])), function (props) {
-    return props.theme.marginPaddings[5];
-  });
-  var SocialIconWrapper = styled__default.div(_templateObject10$2 || (_templateObject10$2 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n  }\n"])));
-  var SocialIcon = styled__default.img(_templateObject11$2 || (_templateObject11$2 = _taggedTemplateLiteral(["\n   {\n    width: 30px;\n    height: 30px;\n    margin-right: ", ";\n  }\n"])), function (props) {
-    return props.theme.marginPaddings[0];
-  });
-  var FooterCopyrightContainer = styled__default.div(_templateObject12$2 || (_templateObject12$2 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    padding: ", " 0;\n    border-top: 1px solid ", ";\n  }\n"])), function (props) {
-    return props.theme.marginPaddings[1];
-  }, function (props) {
-    return props.theme.rareStepColors.ntrlMin;
-  });
-  var FooterCopyrightText = styled__default.div(_templateObject13$2 || (_templateObject13$2 = _taggedTemplateLiteral(["\n   {\n    color: ", ";\n    font-weight: ", ";\n  }\n"])), function (props) {
-    return props.theme.rareStepColors.ntrlMin;
-  }, function (props) {
-    return props.theme.rareStepFontWeights.normal;
-  });
-  var FooterPayments = styled__default.div(_templateObject14$2 || (_templateObject14$2 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n  }\n"])));
-  var FooterPaymentImage = styled__default.img(_templateObject15$2 || (_templateObject15$2 = _taggedTemplateLiteral(["\n   {\n    width: 100px;\n    height: 30px;\n  }\n"])));
-  var FooterConnectContainer = styled__default.div(_templateObject16$2 || (_templateObject16$2 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    flex-direction: column;\n  }\n"])));
-
-  var _templateObject$H;
-  var ALL_ITEM = {
-    label: 'ALL',
-    value: 'ALL'
-  };
-  var StyledMultiselector = styled__default.div(_templateObject$H || (_templateObject$H = _taggedTemplateLiteral(["\n  .multiselector__selected-items,\n  .multiselector__selectable-items {\n    display: flex;\n    flex-flow: no-wrap;\n    margin-bottom: 40px;\n    .dropdown-select-container {\n      width: 100%;\n      .dropdown-select {\n        &__control {\n          border-color: ", ";\n          border-radius: 0px;\n          background-color: ", ";\n          color: ", ";\n        }\n        &__multi-value {\n          background-color: ", ";\n        }\n        &__multi-value__label {\n          color: ", ";\n          font-size: 100%;\n        }\n        &__multi-value__remove {\n          svg {\n            fill: ", ";\n          }\n        }\n      }\n    }\n  }\n"])), function (props) {
-    return props.theme.colors.primary;
-  }, function (props) {
-    return props.theme.colors.ntrlMin;
-  }, function (props) {
-    return props.theme.colors.primary;
-  }, function (props) {
-    return props.theme.colors.primary;
-  }, function (props) {
-    return props.theme.colors.ntrlMin;
-  }, function (props) {
-    return props.theme.colors.ntrlMin;
-  });
-  /**
-   * Multiselector with a GraphQL flavour (TODO: to be revised to make it remote api agnostic)
-   */
-
-  var GraphQLDropdownSelector = /*#__PURE__*/function (_React$Component) {
-    _inherits(GraphQLDropdownSelector, _React$Component);
-
-    var _super = _createSuper(GraphQLDropdownSelector);
-
-    function GraphQLDropdownSelector(props) {
-      var _this;
-
-      _classCallCheck(this, GraphQLDropdownSelector);
-
-      _this = _super.call(this, props);
-
-      _defineProperty(_assertThisInitialized(_this), "componentDidUpdate", function (prevProps) {
-        if (prevProps.graphQuery !== _this.props.graphQuery) {
-          _this.makeRequest();
-        }
-      });
-
-      _defineProperty(_assertThisInitialized(_this), "makeRequest", function () {
-        _this.pageReady.refreshPage();
-      });
-
-      _defineProperty(_assertThisInitialized(_this), "emptySelected", function () {
-        return _this.setState({
-          selected: [ALL_ITEM]
-        });
-      });
-
-      _defineProperty(_assertThisInitialized(_this), "setNewResults", function (res) {
-        var selectedIds = _this.state.selected.map(function (sel) {
-          return sel.value;
-        });
-
-        var pagination = _this.props.resultProcessor(res);
-
-        var allSelected = _this.state.selected.some(function (item) {
-          return item.value === ALL_ITEM.value;
-        });
-
-        var newList = pagination.filter(function (newItem) {
-          return !selectedIds.includes(newItem.value);
-        });
-        newList = allSelected ? newList : [ALL_ITEM].concat(_toConsumableArray(newList)); // eslint-disable-next-line react/no-unused-state
-
-        _this.setState({
-          list: newList,
-          pagination: pagination
-        });
-      });
-
-      _defineProperty(_assertThisInitialized(_this), "onAddItem", function (addSelectedItem) {
-        var newSelectedList;
-
-        if (addSelectedItem.includes(ALL_ITEM)) {
-          newSelectedList = [ALL_ITEM];
-        } else {
-          newSelectedList = addSelectedItem.filter(function (item) {
-            return item.value !== ALL_ITEM.value;
-          });
-        }
-
-        _this.setState(function (prevState) {
-          return _objectSpread2(_objectSpread2({}, prevState), {}, {
-            selected: newSelectedList
-          });
-        }, function () {
-          _this.props.onChange(_this.state.selected.filter(function (item) {
-            return item.value !== ALL_ITEM.value;
-          }));
-        });
-      });
-
-      _defineProperty(_assertThisInitialized(_this), "onIsLoading", function (flag) {
-        _this.setState({
-          isLoading: flag
-        });
-      });
-
-      _defineProperty(_assertThisInitialized(_this), "render", function () {
-        var _this$props = _this.props,
-            baseClass = _this$props.baseClass,
-            identifier = _this$props.identifier,
-            triggerRequest = _this$props.triggerRequest,
-            className = _this$props.className;
-        var list = _this.state.list;
-        return /*#__PURE__*/React__default.createElement(StyledMultiselector, null, /*#__PURE__*/React__default.createElement("div", {
-          "data-qe-id": identifier,
-          className: "".concat(className, " ").concat(baseClass)
-        }, /*#__PURE__*/React__default.createElement(LuxityPageReady, {
-          ref: function ref(inst) {
-            _this.pageReady = inst;
-          },
-          onData: _this.setNewResults,
-          onIsLoading: _this.onIsLoading,
-          getRequestPromise: function getRequestPromise() {
-            return triggerRequest();
-          }
-        }), /*#__PURE__*/React__default.createElement("div", {
-          className: "".concat(baseClass, "__selectable-items")
-        }, /*#__PURE__*/React__default.createElement(ReactSelectWrapper, {
-          options: list,
-          onChange: function onChange(value) {
-            _this.onAddItem(value);
-          },
-          isMulti: true,
-          isSearchable: true
-        }))));
-      });
-
-      _this.state = {
-        selected: [ALL_ITEM],
-        list: [],
-        pagination: {},
-        isLoading: false
-      };
-      return _this;
-    }
-
-    return _createClass(GraphQLDropdownSelector);
-  }(React__default.Component);
-
-  GraphQLDropdownSelector.defaultProps = {
-    baseClass: 'multiselector'
-  };
-  var GraphQLDropdownSelector$1 = themed(GraphQLDropdownSelector);
-
-  /**
-   * Luxity flavoured GraphQLMultiselector with text Search, category and limit controls
-   */
-  var LuxityGraphQLDropdownSelector = /*#__PURE__*/function (_React$Component) {
-    _inherits(LuxityGraphQLDropdownSelector, _React$Component);
-
-    var _super = _createSuper(LuxityGraphQLDropdownSelector);
-
-    function LuxityGraphQLDropdownSelector(props) {
-      var _this;
-
-      _classCallCheck(this, LuxityGraphQLDropdownSelector);
-
-      _this = _super.call(this, props);
-
-      _defineProperty(_assertThisInitialized(_this), "multiSelectorRef", /*#__PURE__*/React__default.createRef());
-
-      _defineProperty(_assertThisInitialized(_this), "increaseLimit", function () {
-        _this.setState(function (prevState) {
-          return {
-            limit: prevState.limit + _this.props.queryLimitIncrement
-          };
-        });
-      });
-
-      _defineProperty(_assertThisInitialized(_this), "onChange", function (selection) {
-        _this.props.onChange(selection);
-      });
-
-      _defineProperty(_assertThisInitialized(_this), "render", function () {
-        var _this$state = _this.state,
-            limit = _this$state.limit,
-            query_arguments = _this$state.query_arguments;
-        var _this$props = _this.props,
-            title = _this$props.title,
-            baseClass = _this$props.baseClass,
-            getGraphQuery = _this$props.getGraphQuery,
-            resultProcessor = _this$props.resultProcessor,
-            graphApi = _this$props.graphApi,
-            identifier = _this$props.identifier,
-            requestInstance = _this$props.requestInstance;
-        return /*#__PURE__*/React__default.createElement("div", {
-          className: baseClass
-        }, /*#__PURE__*/React__default.createElement(InterestsSubheading, {
-          className: "".concat(baseClass, "__title"),
-          title: title
-        }), /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(GraphQLDropdownSelector$1, {
-          triggerRequest: function triggerRequest() {
-            return requestInstance.post(graphApi, {
-              query: getGraphQuery(limit, 1, 'id|desc', query_arguments)
-            });
-          },
-          graphQuery: getGraphQuery(limit, 1, 'id|desc', query_arguments),
-          identifier: identifier,
-          ref: _this.multiSelectorRef,
-          onChange: _this.onChange,
-          resultProcessor: resultProcessor
-        })));
-      });
-
-      _this.state = {
-        limit: props.baseQueryLimit,
-        query_arguments: props.query_arguments
-      };
-      return _this;
-    }
-
-    _createClass(LuxityGraphQLDropdownSelector, [{
-      key: "componentDidUpdate",
-      value: function componentDidUpdate(prevProps) {
-        var _this$multiSelectorRe;
-
-        if (prevProps.query_arguments !== this.props.query_arguments && (_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.query_arguments !== props.query_arguments) {
-          return {
-            query_arguments: props.query_arguments
-          };
-        }
-
-        return null;
-      }
-    }]);
-
-    return LuxityGraphQLDropdownSelector;
-  }(React__default.Component);
-
-  LuxityGraphQLDropdownSelector.defaultProps = {
-    baseClass: '',
-    searchPlaceHolder: '',
-    queryLimitIncrement: 12,
-    baseQueryLimit: 12
-  };
-
-  var BrandSelector = function BrandSelector(_ref) {
-    var onChange = _ref.onChange,
-        category = _ref.category,
-        graphApi = _ref.graphApi,
-        getGraphQuery = _ref.getGraphQuery,
-        resultProcessor = _ref.resultProcessor,
-        requestInstance = _ref.requestInstance;
-    return /*#__PURE__*/React__default.createElement(LuxityGraphQLDropdownSelector, {
-      baseQueryLimit: 9999,
-      title: "Brands",
-      queryId: "getBrands",
-      baseClass: "brand-selector",
-      identifier: "brand-selector",
-      searchPlaceHolder: "Search brands",
-      query_arguments: category,
-      onChange: onChange,
-      graphApi: graphApi,
-      getGraphQuery: getGraphQuery,
-      resultProcessor: resultProcessor,
-      requestInstance: requestInstance
-    });
-  };
-
-  BrandSelector.defaultProps = {
-    resultProcessor: function resultProcessor(result) {
-      return result.data.data.luxity_brands.data.map(function (_ref2) {
-        var id = _ref2.id,
-            name = _ref2.name;
-        return {
-          label: name,
-          value: id
-        };
-      });
-    }
-  };
-
-  var _templateObject$I, _templateObject2$9;
-  var ALL_ITEM$1 = {
-    id: 'ALL',
-    name: 'ALL'
-  };
-  var multiSelectorItemMaxHeight = '3rem';
-  var multiSelectorItemAnimationDuration = '300ms';
-  var multiselectorItemFadeIn = styled.keyframes(_templateObject$I || (_templateObject$I = _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$1 = styled__default.div(_templateObject2$9 || (_templateObject2$9 = _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;
-  }, function (props) {
-    return props.theme.colors.primary;
-  }, function (props) {
-    return props.theme.colors.primary;
-  }, function (props) {
-    return props.theme.colors.ntrlMin;
-  }, function (props) {
-    return props.theme.colors.primary;
-  }, function (props) {
-    return props.theme.marginPaddings[0];
-  }, multiSelectorItemAnimationDuration, multiselectorItemFadeIn, function (props) {
-    return props.theme.marginPaddings[2];
-  }, function (props) {
-    return props.theme.marginPaddings[2];
-  }, function (props) {
-    return props.theme.marginPaddings[2];
-  }, media.sm, function (props) {
-    return props.theme.marginPaddings[2];
-  }, function (props) {
-    return props.theme.colors.primary;
-  }, function (props) {
-    return props.theme.colors.ntrlMin;
-  }, function (props) {
-    return props.theme.colors.primary;
-  }, function (props) {
-    return props.theme.colors.ntrlMin;
-  });
-  /**
-   * Multiselector with a GraphQL flavour (TODO: to be revised to make it remote api agnostic)
-   */
-
-  var GraphQLMultiSelector = /*#__PURE__*/function (_React$Component) {
-    _inherits(GraphQLMultiSelector, _React$Component);
-
-    var _super = _createSuper(GraphQLMultiSelector);
-
-    function GraphQLMultiSelector(props) {
-      var _this;
-
-      _classCallCheck(this, GraphQLMultiSelector);
-
-      _this = _super.call(this, props);
-
-      _defineProperty(_assertThisInitialized(_this), "componentDidUpdate", function (prevProps) {
-        if (prevProps.graphQuery !== _this.props.graphQuery) {
-          _this.makeRequest();
-        }
-      });
-
-      _defineProperty(_assertThisInitialized(_this), "makeRequest", function () {
-        _this.pageReady.refreshPage();
-      });
-
-      _defineProperty(_assertThisInitialized(_this), "emptySelected", function () {
-        return _this.setState({
-          selected: [ALL_ITEM$1]
-        });
-      });
-
-      _defineProperty(_assertThisInitialized(_this), "setNewResults", function (res) {
-        var selectedIds = _this.state.selected.map(function (sel) {
-          return sel.id;
-        });
-
-        var pagination = _this.props.resultProcessor(res);
-
-        var allSelected = _this.state.selected.some(function (item) {
-          return item.id === ALL_ITEM$1.id;
-        });
-
-        var newList = pagination.data.filter(function (newItem) {
-          return !selectedIds.includes(newItem.id);
-        });
-        newList = allSelected ? newList : [ALL_ITEM$1].concat(_toConsumableArray(newList));
-
-        _this.setState({
-          list: newList,
-          pagination: pagination
-        });
-      });
-
-      _defineProperty(_assertThisInitialized(_this), "onAddItem", function (addSelectedItem) {
-        _this.setState(function (prevState) {
-          var newSelectedList;
-          var newList;
-
-          if (addSelectedItem.id === ALL_ITEM$1.id) {
-            // Clear Selected List
-            // and move previous Selected items to list
-            newSelectedList = [ALL_ITEM$1];
-            newList = prevState.list.filter(function (item) {
-              return item.id !== ALL_ITEM$1.id;
-            }).concat(prevState.selected).sort(function (a, b) {
-              return a.id - b.id;
-            });
-          } else {
-            newSelectedList = _toConsumableArray(prevState.selected.filter(function (item) {
-              return item.id !== ALL_ITEM$1.id;
-            })).concat(addSelectedItem);
-            newList = [ALL_ITEM$1].concat(_toConsumableArray(prevState.list.filter(function (item) {
-              return item.id !== ALL_ITEM$1.id;
-            }).filter(function (item) {
-              return item.id !== addSelectedItem.id;
-            })));
-          }
-
-          return {
-            selected: newSelectedList,
-            list: newList
-          };
-        }, function () {
-          _this.props.onChange(_this.state.selected.filter(function (item) {
-            return item.id !== ALL_ITEM$1.id;
-          }));
-        });
-      });
-
-      _defineProperty(_assertThisInitialized(_this), "onRemoveItem", function (removeSelectedItem) {
-        _this.setState(function (prevState) {
-          // Cannot remove ALL from selection by unselecting it
-          if ((removeSelectedItem === null || removeSelectedItem === void 0 ? void 0 : removeSelectedItem.id) === ALL_ITEM$1.id) {
-            return {};
-          }
-
-          var newSelectedList = prevState.selected.filter(function (item) {
-            return item.id !== removeSelectedItem.id;
-          });
-
-          var newList = _toConsumableArray(prevState.list).concat(removeSelectedItem).filter(function (item) {
-            return item.id !== ALL_ITEM$1.id;
-          }).sort(function (a, b) {
-            return a.id - b.id;
-          });
-
-          return {
-            list: newList,
-            selected: newSelectedList.length ? newSelectedList : [ALL_ITEM$1]
-          };
-        }, function () {
-          _this.props.onChange(_this.state.selected.filter(function (item) {
-            return item.id !== ALL_ITEM$1.id;
-          }));
-        });
-      });
-
-      _defineProperty(_assertThisInitialized(_this), "onIsLoading", function (flag) {
-        _this.setState({
-          isLoading: flag
-        });
-      });
-
-      _defineProperty(_assertThisInitialized(_this), "render", function () {
-        var _this$props = _this.props,
-            baseClass = _this$props.baseClass,
-            ItemRenderer = _this$props.itemRenderer,
-            identifier = _this$props.identifier,
-            triggerRequest = _this$props.triggerRequest,
-            className = _this$props.className;
-        var _this$state = _this.state,
-            list = _this$state.list,
-            selected = _this$state.selected,
-            pagination = _this$state.pagination,
-            isLoading = _this$state.isLoading;
-        return /*#__PURE__*/React__default.createElement(StyledMultiselector$1, null, /*#__PURE__*/React__default.createElement("div", {
-          "data-qe-id": identifier,
-          className: "".concat(className, " ").concat(baseClass)
-        }, /*#__PURE__*/React__default.createElement("div", {
-          className: "".concat(baseClass, "__selected-items")
-        }, selected.map(function (item) {
-          return /*#__PURE__*/React__default.createElement(ItemRenderer, {
-            key: item.id,
-            item: item,
-            onSelect: _this.onRemoveItem,
-            selected: true
-          });
-        })), /*#__PURE__*/React__default.createElement(LuxityPageReady, {
-          ref: function ref(inst) {
-            _this.pageReady = inst;
-          },
-          onData: _this.setNewResults,
-          onIsLoading: _this.onIsLoading,
-          getRequestPromise: function getRequestPromise() {
-            return triggerRequest();
-          }
-        }), /*#__PURE__*/React__default.createElement("div", {
-          className: "".concat(baseClass, "__selectable-items")
-        }, list.map(function (item) {
-          return /*#__PURE__*/React__default.createElement(ItemRenderer, {
-            key: item.id,
-            item: item,
-            onSelect: _this.onAddItem,
-            selected: false
-          });
-        })), /*#__PURE__*/React__default.createElement("div", {
-          className: "".concat(baseClass, "__footer")
-        }, /*#__PURE__*/React__default.createElement(InvertedTextButton$1, {
-          disabled: isLoading || !pagination.has_more_pages,
-          onClick: _this.props.increaseLimit,
-          type: "button"
-        }, "SHOW MORE"))));
-      });
-
-      _this.state = {
-        selected: [ALL_ITEM$1],
-        list: [],
-        pagination: {},
-        isLoading: false
-      };
-      return _this;
-    }
-
-    return _createClass(GraphQLMultiSelector);
-  }(React__default.Component);
 
-  GraphQLMultiSelector.defaultProps = {
-    baseClass: 'multiselector'
-  };
-  var GraphQLMultiSelector$1 = themed(GraphQLMultiSelector);
+  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"])));
 
-  var Search = (function (props) {
-    return /*#__PURE__*/React__default.createElement("svg", _extends({
-      width: "15",
-      height: "15",
-      viewBox: "0 0 15 15",
-      overflow: "visible",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg"
-    }, 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"
-    }));
+  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;
   });
 
-  var _templateObject$J;
+  var _templateObject$r;
+  var RadioButtonText = styled__default.div(_templateObject$r || (_templateObject$r = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"])));
 
-  var Title$3 = function Title(_ref) {
-    var baseClass = _ref.baseClass,
-        className = _ref.className,
-        title = _ref.title,
-        searchPlaceHolder = _ref.searchPlaceHolder,
-        onSearchChanged = _ref.onSearchChanged;
-    return /*#__PURE__*/React__default.createElement(InterestsSubheading, {
-      className: "".concat(className, " ").concat(baseClass, "__title"),
-      title: title
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "title__search"
-    }, /*#__PURE__*/React__default.createElement(Search, null), /*#__PURE__*/React__default.createElement("input", {
-      placeholder: searchPlaceHolder,
-      type: "text",
-      name: "search",
-      onChange: onSearchChanged
-    })));
-  };
+  var _templateObject$s;
+  var inputMarginRight = '0.2em';
+  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;
 
-  var StyledTitle = styled__default(Title$3)(_templateObject$J || (_templateObject$J = _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];
-  }, function (props) {
-    return props.theme.marginPaddings[0];
-  }, function (props) {
-    return props.theme.marginPaddings[3];
-  }, function (props) {
-    return props.theme.colors.primary || '';
+    return (_props$theme = props.theme) !== null && _props$theme !== void 0 && _props$theme.fontSizes.length ? props.theme.fontSizes[4] : '1em';
   }, function (props) {
-    return props.theme.colors.primary || '';
+    return props.theme.fontSizes[4];
   }, function (props) {
-    return props.theme.fontSizes[2];
+    return props.theme.colors.ntrlMin;
+  }, inputMarginRight, function (props) {
+    return props.theme.colors.primary;
   }, function (props) {
-    return props.theme.marginPaddings[0];
+    return props.theme.borderRadius;
   }, function (props) {
     return props.theme.colors.primary;
   });
-  var Title$4 = themed(StyledTitle);
-
-  var debounceBuilder$2 = functions.debounced(200);
+  var ErrorMessage$1 = styled__default.div({
+    color: function color(props) {
+      return props.theme.colors.primary;
+    }
+  });
 
   /**
-   * Luxity flavoured GraphQLMultiselector with text Search, category and limit controls
+   * RadioButtons component can show multiple radios, a title and an error message
    */
-  var LuxityGraphQLMultiselector = /*#__PURE__*/function (_React$Component) {
-    _inherits(LuxityGraphQLMultiselector, _React$Component);
-
-    var _super = _createSuper(LuxityGraphQLMultiselector);
-
-    function LuxityGraphQLMultiselector(props) {
-      var _this;
-
-      _classCallCheck(this, LuxityGraphQLMultiselector);
-
-      _this = _super.call(this, props);
-
-      _defineProperty(_assertThisInitialized(_this), "multiSelectorRef", /*#__PURE__*/React__default.createRef());
-
-      _defineProperty(_assertThisInitialized(_this), "increaseLimit", function () {
-        _this.setState(function (prevState) {
-          return {
-            limit: prevState.limit + _this.props.queryLimitIncrement
-          };
-        });
-      });
-
-      _defineProperty(_assertThisInitialized(_this), "onChange", function (selection) {
-        _this.props.onChange(selection);
-      });
-
-      _defineProperty(_assertThisInitialized(_this), "onSearchChanged", function (event) {
-        event.preventDefault();
-        var searchText = event.target.value;
-        debounceBuilder$2(function () {
-          _this.setState({
-            nameFilter: searchText
-          });
-        });
-      });
-
-      _defineProperty(_assertThisInitialized(_this), "render", function () {
-        var _this$state = _this.state,
-            limit = _this$state.limit,
-            category = _this$state.category,
-            nameFilter = _this$state.nameFilter,
-            brands = _this$state.brands,
-            models = _this$state.models,
-            materials = _this$state.materials;
-        var _this$props = _this.props,
-            title = _this$props.title,
-            baseClass = _this$props.baseClass,
-            getGraphQuery = _this$props.getGraphQuery,
-            resultProcessor = _this$props.resultProcessor,
-            itemRenderer = _this$props.itemRenderer,
-            searchPlaceHolder = _this$props.searchPlaceHolder,
-            graphApi = _this$props.graphApi,
-            identifier = _this$props.identifier,
-            requestInstance = _this$props.requestInstance;
-        return /*#__PURE__*/React__default.createElement("div", {
-          className: baseClass
-        }, /*#__PURE__*/React__default.createElement(Title$4, {
-          title: title,
-          baseClass: baseClass,
-          searchPlaceHolder: searchPlaceHolder,
-          onSearchChanged: _this.onSearchChanged
-        }), /*#__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, brands, models, materials)
-            });
-          },
-          graphQuery: getGraphQuery(limit, 1, 'id|desc', category, nameFilter, brands, models, materials),
-          identifier: identifier,
-          ref: _this.multiSelectorRef,
-          onChange: _this.onChange,
-          resultProcessor: resultProcessor,
-          increaseLimit: _this.increaseLimit,
-          itemRenderer: itemRenderer
-        })));
-      });
-
-      _this.state = {
-        limit: props.baseQueryLimit,
-        category: props.category,
-        brands: props.brands,
-        models: props.models,
-        materials: props.materials,
-        nameFilter: ''
-      };
-      return _this;
-    }
-
-    _createClass(LuxityGraphQLMultiselector, [{
-      key: "componentDidUpdate",
-      value: function componentDidUpdate(prevProps) {
-        var _this$multiSelectorRe, _this$multiSelectorRe2, _this$multiSelectorRe3, _this$multiSelectorRe4;
-
-        if (prevProps.category !== this.props.category && (_this$multiSelectorRe = this.multiSelectorRef) !== null && _this$multiSelectorRe !== void 0 && _this$multiSelectorRe.current) {
-          this.multiSelectorRef.current.emptySelected();
-        }
-
-        if (prevProps.brands !== this.props.brands && (_this$multiSelectorRe2 = this.multiSelectorRef) !== null && _this$multiSelectorRe2 !== void 0 && _this$multiSelectorRe2.current) {
-          this.multiSelectorRef.current.emptySelected();
-        }
-
-        if (prevProps.models !== this.props.models && (_this$multiSelectorRe3 = this.multiSelectorRef) !== null && _this$multiSelectorRe3 !== void 0 && _this$multiSelectorRe3.current) {
-          this.multiSelectorRef.current.emptySelected();
-        }
-
-        if (prevProps.materials !== this.props.materials && (_this$multiSelectorRe4 = this.multiSelectorRef) !== null && _this$multiSelectorRe4 !== void 0 && _this$multiSelectorRe4.current) {
-          this.multiSelectorRef.current.emptySelected();
-        }
-      }
-    }], [{
-      key: "getDerivedStateFromProps",
-      value: function getDerivedStateFromProps(props, prevState) {
-        if (prevState.category !== props.category) {
-          return {
-            category: props.category
-          };
-        }
-
-        if (prevState.brands !== props.brands) {
-          return {
-            brands: props.brands
-          };
-        }
-
-        if (prevState.models !== props.models) {
-          return {
-            models: props.models
-          };
-        }
-
-        if (prevState.materials !== props.materials) {
-          return {
-            materials: props.materials
-          };
-        }
-
-        return null;
-      }
-    }]);
-
-    return LuxityGraphQLMultiselector;
-  }(React__default.Component);
-
-  LuxityGraphQLMultiselector.defaultProps = {
-    baseClass: '',
-    searchPlaceHolder: '',
-    queryLimitIncrement: 12,
-    baseQueryLimit: 12
-  };
-
-  var _templateObject$K;
-  var BaseButton = styled__default.button(_templateObject$K || (_templateObject$K = _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;
-  }, function (props) {
-    return props.theme.colors.ntrlMin;
-  }, function (props) {
-    return props.theme.colors.primary;
-  }, function (props) {
-    return props.theme.colors.ntrlMin;
-  });
-  var UnselectedButton = themed(BaseButton);
+  var RadioButtons = function RadioButtons(_ref) {
+    var options = _ref.options,
+        name = _ref.name,
+        noWrap = _ref.noWrap,
+        title = _ref.title,
+        errors = _ref.errors;
 
-  var ItemRenderer = function ItemRenderer(_ref) {
-    var item = _ref.item,
-        onSelect = _ref.onSelect,
-        selected = _ref.selected;
-    var props = {
-      onClick: function onClick(e) {
-        e.preventDefault();
-        onSelect(item);
-      }
-    };
-    return selected ? /*#__PURE__*/React__default.createElement(PrimaryButton$1, props, item.name) : /*#__PURE__*/React__default.createElement(UnselectedButton, props, item.name);
-  };
+    var _useState = React.useState(errors[name]),
+        _useState2 = _slicedToArray(_useState, 2),
+        errMsg = _useState2[0],
+        setErrMsg = _useState2[1];
 
-  var StyleSelector = function StyleSelector(_ref) {
-    var onChange = _ref.onChange,
-        category = _ref.category,
-        graphApi = _ref.graphApi,
-        itemRenderer = _ref.itemRenderer,
-        getGraphQuery = _ref.getGraphQuery,
-        resultProcessor = _ref.resultProcessor,
-        requestInstance = _ref.requestInstance,
-        brands = _ref.brands,
-        models = _ref.models,
-        materials = _ref.materials;
-    return /*#__PURE__*/React__default.createElement(LuxityGraphQLMultiselector, {
-      title: "Styles",
-      queryId: "getStyles",
-      baseQueryLimit: 16,
-      baseClass: "style-selector",
-      identifier: "style-selector",
-      searchPlaceHolder: "Search Styles",
-      category: category,
-      brands: brands,
-      models: models,
-      materials: materials,
-      onChange: onChange,
-      graphApi: graphApi,
-      itemRenderer: itemRenderer,
-      getGraphQuery: getGraphQuery,
-      resultProcessor: resultProcessor,
-      requestInstance: requestInstance
-    });
+    React.useEffect(function () {
+      setErrMsg(errors[name]);
+    }, [errors, name]);
+    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,
+          actionCallback = _ref2$actionCallback === void 0 ? function () {
+        return null;
+      } : _ref2$actionCallback,
+          _ref2$value = _ref2.value,
+          value = _ref2$value === void 0 ? '' : _ref2$value,
+          _ref2$innerText = _ref2.innerText,
+          innerText = _ref2$innerText === void 0 ? '' : _ref2$innerText,
+          _ref2$checked = _ref2.checked,
+          checked = _ref2$checked === void 0 ? false : _ref2$checked;
+      return /*#__PURE__*/React__default.createElement(RadioButtonLabel, {
+        key: "".concat(name, "-").concat(index),
+        htmlFor: "".concat(name, "_").concat(index)
+      }, /*#__PURE__*/React__default.createElement(RadioButtonInput, {
+        id: "".concat(name, "_").concat(index),
+        type: "radio",
+        name: name,
+        defaultChecked: checked,
+        onChange: function onChange() {
+          setErrMsg('');
+          actionCallback(name, value);
+        },
+        value: value
+      }), /*#__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));
   };
 
-  StyleSelector.defaultProps = {
-    itemRenderer: ItemRenderer,
-    resultProcessor: function resultProcessor(result) {
-      return result.data.data.luxity_styles;
-    }
+  RadioButtons.defaultProps = {
+    noWrap: false,
+    title: '',
+    errors: {}
   };
+  var RadioButtons$1 = themed(RadioButtons);
 
   var shoeSizeTypes = {
     uk: {
@@ -10460,12 +9341,12 @@
     }
   };
 
-  var _templateObject$L, _templateObject2$a;
-  var TitleWrapper = styled__default.div(_templateObject$L || (_templateObject$L = _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) {
+  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$a || (_templateObject2$a = _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) {
+  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;
@@ -10559,48 +9440,247 @@
         onChange: function onChange(value) {
           return handlePropOnChange(value);
         }
-      });
-    };
-
-    var getShoeSizeSelector = function getShoeSizeSelector() {
-      var euShoeSizes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-      var ukShoeShoes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-
-      if (shoeSizeType === shoeSizeTypes.eu.value) {
-        return renderShoeSizeSelector(euShoeSizes);
-      }
-
-      if (shoeSizeType === shoeSizeTypes.uk.value) {
-        return renderShoeSizeSelector(ukShoeShoes);
-      }
-
-      return null;
-    };
-
-    return /*#__PURE__*/React__default.createElement(LuxityPageReady, {
-      getRequestPromise: triggerRequest
-    }, /*#__PURE__*/React__default.createElement(TitleWrapper, null, /*#__PURE__*/React__default.createElement(InterestsSubheading, {
-      title: "Shoe Size Range"
-    }, /*#__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 /*#__PURE__*/React__default.createElement(OpacityTransitionRender, {
-        shoeSizeType: transitionedTo
-      }, getShoeSizeSelector(luxity_eu_shoe_sizes, luxity_uk_shoe_sizes));
+      });
+    };
+
+    var getShoeSizeSelector = function getShoeSizeSelector() {
+      var euShoeSizes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+      var ukShoeShoes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+
+      if (shoeSizeType === shoeSizeTypes.eu.value) {
+        return renderShoeSizeSelector(euShoeSizes);
+      }
+
+      if (shoeSizeType === shoeSizeTypes.uk.value) {
+        return renderShoeSizeSelector(ukShoeShoes);
+      }
+
+      return null;
+    };
+
+    return /*#__PURE__*/React__default.createElement(LuxityPageReady, {
+      getRequestPromise: triggerRequest
+    }, /*#__PURE__*/React__default.createElement(TitleWrapper, null, /*#__PURE__*/React__default.createElement(InterestsSubheading, {
+      title: "Shoe Size Range"
+    }, /*#__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 /*#__PURE__*/React__default.createElement(OpacityTransitionRender, {
+        shoeSizeType: transitionedTo
+      }, getShoeSizeSelector(luxity_eu_shoe_sizes, luxity_uk_shoe_sizes));
+    }));
+  };
+
+  WrappedShoeSizeSelector.defaultProps = {
+    onChange: function onChange() {
+      return false;
+    }
+  };
+
+  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 which formats the value to a specific format
+   */
+
+  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);
+
+    var handleValueChange = function handleValueChange(event) {
+      var inputValue = event.target.value;
+      var unmaskedValue = unMask(inputValue);
+      onChange(unmaskedValue);
+    };
+
+    var formatCurrency = function formatCurrency(originalValue) {
+      var numericValue = Number(originalValue);
+      var formattedValue = numericValue.toLocaleString('en-US');
+      return prefix + formattedValue;
+    };
+
+    var formattedValue = formatCurrency(value);
+    return /*#__PURE__*/React__default.createElement("input", _extends({}, rest, {
+      type: "text",
+      value: formattedValue,
+      onChange: handleValueChange
+    }));
+  };
+
+  CurrencyInputFormatter.defaultProps = {
+    value: '',
+    prefix: 'R',
+    groupSeparator: ',',
+    decimalSeparator: '.',
+    allowNegativeValue: false,
+    onChange: function onChange() {}
+  };
+
+  var _excluded$6 = ["children"];
+
+  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;
+  }, function (props) {
+    return props.theme.colors.primary;
+  }, function (props) {
+    return props.theme.colors.primary;
+  }, function (props) {
+    return props.theme.colors.ntrlMin;
+  }, disabledButtonStyle, function (props) {
+    return props.theme.colors.base;
+  });
+
+  var SecondaryButton = function SecondaryButton(_ref) {
+    var children = _ref.children,
+        restProps = _objectWithoutProperties(_ref, _excluded$6);
+
+    return /*#__PURE__*/React__default.createElement(Button$4, restProps, children);
+  };
+
+  var SecondaryButton$1 = themed(SecondaryButton);
+
+  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;
+  });
+
+  var debounceBuilder$2 = functions.debounced(50);
+
+  var getMaxPrice = function getMaxPrice() {
+    var interestCategory = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+
+    switch (interestCategory) {
+      case interestCategories.ACCESSORIES:
+        return interestCategoryMaxPrices.ACCESSORIES;
+
+      case interestCategories.BAGS:
+        return interestCategoryMaxPrices.BAGS;
+
+      case interestCategories.SHOES:
+        return interestCategoryMaxPrices.SHOES;
+
+      case interestCategories.WATCHES:
+        return interestCategoryMaxPrices.WATCHES;
+
+      case interestCategories.APPAREL:
+        return interestCategoryMaxPrices.APPAREL;
+
+      default:
+        return 0;
+    }
+  };
+
+  var getFooterButtons = function getFooterButtons(actionObj) {
+    var giveFullRange = actionObj.giveFullRange;
+    return /*#__PURE__*/React__default.createElement(SecondaryButton$1, {
+      type: "button",
+      onClick: giveFullRange
+    }, "Full Price Range");
+  };
+  /** UI Slider with minimum and max input fields give the ability to
+   * select a price range */
+
+
+  var PriceRangeSelector = function PriceRangeSelector(_ref) {
+    var onChange = _ref.onChange,
+        category = _ref.category;
+    var maxPrice = getMaxPrice(category);
+
+    var handleSlideChange = function handleSlideChange(value) {
+      var min_price = value.min,
+          max_price = value.max;
+      onChange({
+        min_price: min_price,
+        max_price: max_price
+      });
+    };
+
+    var handleMinCurrencyChange = function handleMinCurrencyChange(targetValue, currMaxVal, manuallyChangeMinValue) {
+      var value = parseInt(unMask(targetValue), 10);
+      value = Number.isNaN(value) ? 0 : value;
+      value = value > currMaxVal ? currMaxVal : value;
+      debounceBuilder$2(function () {
+        manuallyChangeMinValue(value);
+        onChange({
+          min_price: value,
+          max_price: currMaxVal
+        });
+      });
+    };
+
+    var handleMaxCurrencyChange = function handleMaxCurrencyChange(targetValue, currMinVal, manuallyChangeMaxValue) {
+      var value = parseInt(unMask(targetValue), 10);
+      value = Number.isNaN(value) ? 0 : value;
+      value = value < currMinVal ? currMinVal : value;
+      debounceBuilder$2(function () {
+        manuallyChangeMaxValue(value);
+        onChange({
+          max_price: value,
+          min_price: currMinVal
+        });
+      });
+    };
+
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "price-ranges"
+    }, /*#__PURE__*/React__default.createElement(RangeSlider$1, {
+      renderTitleSection: function renderTitleSection() {
+        return /*#__PURE__*/React__default.createElement(InterestsSubheading, {
+          title: "Price Range"
+        });
+      },
+      identifier: "price-range-slider",
+      max: maxPrice,
+      defaultMinValue: 0,
+      min: 0,
+      onChange: handleSlideChange,
+      defaultMaxValue: maxPrice,
+      renderFooterButtons: getFooterButtons,
+      title: "Price Ranges"
+    }, function (_ref2) {
+      var manuallyChangeMinValue = _ref2.manuallyChangeMinValue,
+          manuallyChangeMaxValue = _ref2.manuallyChangeMaxValue,
+          currMinVal = _ref2.currMinVal,
+          currMaxVal = _ref2.currMaxVal;
+      return /*#__PURE__*/React__default.createElement(CurrencyInputWrapper, null, /*#__PURE__*/React__default.createElement(CurrencyInputFormatter, {
+        "data-qe-id": "masked-input-min",
+        value: currMinVal,
+        onChange: function onChange(value) {
+          handleMinCurrencyChange(value, currMaxVal, manuallyChangeMinValue);
+        }
+      }), /*#__PURE__*/React__default.createElement(CurrencyInputFormatter, {
+        "data-qe-id": "masked-input-max",
+        value: currMaxVal,
+        onChange: function onChange(value) {
+          handleMaxCurrencyChange(value, currMinVal, manuallyChangeMaxValue);
+        }
+      }));
     }));
   };
 
-  WrappedShoeSizeSelector.defaultProps = {
+  PriceRangeSelector.defaultProps = {
     onChange: function onChange() {
       return false;
-    }
+    },
+    category: ''
   };
 
-  var _templateObject$M;
-  var SelectionWrapper = styled__default.div(_templateObject$M || (_templateObject$M = _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) {
+  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];
@@ -10616,14 +9696,14 @@
 
   var _excluded$7 = ["title", "checked", "renderIcon", "onChange", "checkedValue", "unCheckedValue"];
 
-  var _templateObject$N, _templateObject2$b, _templateObject3$6;
-  var Content = styled__default.div(_templateObject$N || (_templateObject$N = _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) {
+  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$b || (_templateObject2$b = _taggedTemplateLiteral(["\n  transition: 200ms ease-in;\n  margin-left: auto;\n  margin-right: auto;\n"])));
-  var StyledLabel = styled__default.label(_templateObject3$6 || (_templateObject3$6 = _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) {
+  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;
@@ -10684,8 +9764,8 @@
   };
   var CheckButton$1 = themed(CheckButton);
 
-  var MALE$1 = genders.MALE,
-      FEMALE$1 = genders.FEMALE;
+  var MALE = genders.MALE,
+      FEMALE = genders.FEMALE;
 
   /**
    * Stylized CheckboxButton for selecting gender
@@ -10697,10 +9777,10 @@
 
     var getTitle = function getTitle() {
       switch (gender) {
-        case MALE$1:
+        case MALE:
           return 'Male';
 
-        case FEMALE$1:
+        case FEMALE:
           return 'Female';
 
         default:
@@ -10720,8 +9800,8 @@
     name: ''
   };
 
-  var MALE$2 = genders.MALE,
-      FEMALE$2 = genders.FEMALE;
+  var MALE$1 = genders.MALE,
+      FEMALE$1 = genders.FEMALE;
 
   /**
    *  GenderSelector: specialized selector to pick genders for the Interest Component
@@ -10739,18 +9819,18 @@
       className: "gender-selector__selection-wrapper"
     }, /*#__PURE__*/React__default.createElement(GenderCheckbox, {
       className: "gender-selector__selection-wrapper__input-container",
-      gender: MALE$2,
-      checked: MALE$2 === gender,
+      gender: MALE$1,
+      checked: MALE$1 === gender,
       onInputChange: function onInputChange(isChecked) {
-        return onChange(isChecked, MALE$2);
+        return onChange(isChecked, MALE$1);
       },
       checkBoxButtonRef: maleInputRef
     }), /*#__PURE__*/React__default.createElement(GenderCheckbox, {
       className: "gender-selector__selection-wrapper__input-container",
-      gender: FEMALE$2,
-      checked: FEMALE$2 === gender,
+      gender: FEMALE$1,
+      checked: FEMALE$1 === gender,
       onInputChange: function onInputChange(isChecked) {
-        return onChange(isChecked, FEMALE$2);
+        return onChange(isChecked, FEMALE$1);
       },
       checkBoxButtonRef: femaleInputRef
     })));
@@ -10782,28 +9862,38 @@
     }));
   });
 
-  var _templateObject$O, _templateObject2$c, _templateObject3$7, _templateObject4$6, _templateObject5$4;
-  var UNISEX$1 = genders.UNISEX;
-  var AddInterestContainer = styled__default.div(_templateObject$O || (_templateObject$O = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n  border: 1px solid ", ";\n  padding: ", ";\n"])), function (props) {
+  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"])));
+
+  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;
+  });
+
+  var _templateObject$A, _templateObject2$7, _templateObject3$2, _templateObject4$1, _templateObject5;
+  var UNISEX = genders.UNISEX;
+  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$c || (_templateObject2$c = _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) {
+  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$7 || (_templateObject3$7 = _taggedTemplateLiteral(["\n  font-weight: bold;\n  color: ", ";\n  margin-bottom: ", ";\n"])), 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$6 || (_templateObject4$6 = _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) {
+  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;
@@ -10812,7 +9902,7 @@
   }, function (props) {
     return props.theme.marginPaddings[2];
   });
-  var AddInterestButtonContainer = styled__default.div(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteral(["\n  display: flex;\n\n  #add-icon {\n    margin-bottom: 1.5rem;\n\n    svg {\n      width: 15px;\n    }\n  }\n"])));
+  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,
@@ -10935,7 +10025,7 @@
         var payloadGender = gender[0];
 
         if (gender.length > 1 || !gender.length) {
-          payloadGender = UNISEX$1;
+          payloadGender = UNISEX;
         }
 
         var basePayload = {
@@ -11072,8 +10162,221 @@
 
   var AddInterest$1 = themed(AddInterest);
 
-  var _templateObject$P;
-  var MyInterestTitleHeadingContainer = styled__default.div(_templateObject$P || (_templateObject$P = _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) {
+  /** @format */
+
+  numeral.register('locale', 'en-ZA', {
+    delimiters: {
+      thousands: ',',
+      decimal: '.'
+    },
+    abbreviations: {
+      thousand: 'k',
+      million: 'm',
+      billion: 'b',
+      trillion: 't'
+    },
+    ordinal: function ordinal() {
+      return '.';
+    },
+    currency: {
+      symbol: 'R'
+    }
+  });
+  numeral.locale('en-ZA');
+  String.locale = numeral.locale;
+  /**
+   * Curreny Formatter
+   * @param {number} number - the number to be formatted
+   * @param {boolean} round - flag to indicate if the number needs to be rounded off
+   */
+
+  function fC(number) {
+    var round = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+    var parsedNumber = parseFloat(number);
+    return !Number.isNaN(parsedNumber) ? numeral(round ? Math.round(parsedNumber) : parsedNumber).format('$ 0,0.00') : 'R -';
+  }
+
+  var Trash = (function (props) {
+    return /*#__PURE__*/React__default.createElement("svg", _extends({
+      version: "1.1",
+      id: "svg-trash",
+      xmlns: "http://www.w3.org/2000/svg",
+      xmlnsXlink: "http://www.w3.org/1999/xlink",
+      x: "0px",
+      y: "0px",
+      viewBox: "0 0 15.1 17.5",
+      xmlSpace: "preserve"
+    }, 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"
+    }), /*#__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"
+    }), /*#__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"
+    })));
+  });
+
+  var _templateObject$B, _templateObject2$8, _templateObject3$3, _templateObject4$2;
+  var MALE$2 = genders.MALE,
+      FEMALE$2 = genders.FEMALE,
+      UNISEX$1 = genders.UNISEX;
+
+  var TrashIcon = function TrashIcon(_ref) {
+    var onClick = _ref.onClick,
+        id = _ref.id;
+    return /*#__PURE__*/React__default.createElement(IconWrapper, {
+      onClick: onClick,
+      id: id
+    }, /*#__PURE__*/React__default.createElement(SvgWrapper$1, null, /*#__PURE__*/React__default.createElement(Trash, null)));
+  };
+
+  var InterestItem = /*#__PURE__*/function (_React$Component) {
+    _inherits(InterestItem, _React$Component);
+
+    var _super = _createSuper(InterestItem);
+
+    function InterestItem(props) {
+      var _this;
+
+      _classCallCheck(this, InterestItem);
+
+      _this = _super.call(this, props);
+
+      _defineProperty(_assertThisInitialized(_this), "deleteInterestItem", function () {
+        var id = _this.props.data.id;
+
+        _this.setState({
+          delete: _objectSpread2(_objectSpread2({}, request), {}, {
+            fetching: true
+          })
+        });
+
+        var url = _this.props.deleteInterestApi(id);
+
+        simpleRequest(_this.props.requestInstance, url, method.DELETE, null, function () {
+          _this.setState({
+            delete: _objectSpread2(_objectSpread2({}, request), {}, {
+              success: true
+            })
+          });
+
+          _this.props.onDeleted(_this.props.data);
+        }, function () {
+          return _this.setState({
+            delete: _objectSpread2({}, request)
+          });
+        });
+      });
+
+      _defineProperty(_assertThisInitialized(_this), "getGender", function (gender) {
+        switch (gender) {
+          case MALE$2:
+            return 'Male';
+
+          case FEMALE$2:
+            return 'Female';
+
+          case UNISEX$1:
+          default:
+            return 'Unisex';
+        }
+      });
+
+      _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 /*#__PURE__*/React__default.createElement(InterestItemContainer, {
+          id: "interests__item--".concat(data.id),
+          className: "".concat(success && 'interests__item--hiding')
+        }, /*#__PURE__*/React__default.createElement(InterestItemContent, {
+          className: "interest-item__container ".concat(_this.props.className || '')
+        }, /*#__PURE__*/React__default.createElement("div", {
+          className: "interest-item__container_heading"
+        }, /*#__PURE__*/React__default.createElement(InterestItemTitle, null, "Category:"), /*#__PURE__*/React__default.createElement("div", {
+          id: "interest-item-".concat(data.id, "__category"),
+          className: "list-items"
+        }, _this.getCategory(data.category_type))), /*#__PURE__*/React__default.createElement("div", {
+          className: "interest-item__container_heading"
+        }, /*#__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 /*#__PURE__*/React__default.createElement("span", {
+            key: "".concat(brand.name, "-").concat(data.id)
+          }, brand.name);
+        }) : 'All')), /*#__PURE__*/React__default.createElement("div", {
+          className: "interest-item__container_heading"
+        }, /*#__PURE__*/React__default.createElement(InterestItemTitle, null, "Department:"), /*#__PURE__*/React__default.createElement("div", {
+          className: "list-items"
+        }, _this.getGender(data.gender))), /*#__PURE__*/React__default.createElement("div", {
+          className: "interest-item__container_heading"
+        }, /*#__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))), /*#__PURE__*/React__default.createElement("div", {
+          className: "interest-item__container_heading"
+        }, /*#__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 /*#__PURE__*/React__default.createElement("span", {
+            key: "".concat(style.name, "-").concat(data.id)
+          }, style.name);
+        }) : '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 ? /*#__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) || '', " "))) : /*#__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) {
+              _this.deleteInterestItem();
+            }
+          }
+        }));
+      });
+
+      _this.state = {
+        delete: _objectSpread2({}, request)
+      };
+      return _this;
+    }
+
+    return _createClass(InterestItem);
+  }(React__default.Component);
+
+  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% / 8);\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];
+  }, function (props) {
+    return props.theme.colors.darkerGray;
+  }, function (props) {
+    return props.theme.marginPaddings[1];
+  }, media.xs, media.xs, function (props) {
+    return props.theme.marginPaddings[0];
+  }, media.xs);
+  var ThemedInterestItem = themed(InterestItem);
+  /**
+   * The Interest Item view shows the selected interest configuration,
+   * and gives user control to delete it.
+   */
+
+  var InterestItem$1 = (function (props) {
+    return /*#__PURE__*/React__default.createElement(ThemedInterestItem, 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;
@@ -11103,8 +10406,8 @@
 
   var MyInterestTitleHeading$1 = themed(MyInterestTitleHeading);
 
-  var _templateObject$Q;
-  var SvgWrapper$2 = styled__default.span(_templateObject$Q || (_templateObject$Q = _taggedTemplateLiteral(["\n  svg {\n    path {\n      fill: ", ";\n    }\n  }\n"])), 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 () {