@bonlineza/luxity-lib 2.9.1 → 2.10.0

package/Interests.js

@@ -1,13 +1,12 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('styled-components'), require('react-notify-toast'), require('@bonlineza/b-lib/EllipsisLoader'), require('@bonlineza/b-lib/PageReady'), require('stylis-rule-sheet'), require('react-dom'), require('prop-types'), require('raf'), require('react-input-autosize'), require('react-transition-group'), require('@bonlineza/b-lib/functions'), require('rc-slider'), require('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';
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('styled-components'), require('react-notify-toast'), 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/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.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, 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;
   var Notifications__default = 'default' in Notifications ? Notifications['default'] : Notifications;
-  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;
   PropTypes = PropTypes && Object.prototype.hasOwnProperty.call(PropTypes, 'default') ? PropTypes['default'] : PropTypes;
@@ -446,6 +445,57 @@
     return message.replace(':error_code', error.status || 'Network Down');
   };
 
+  var LuxityArrowLeft = (function (props) {
+    return /*#__PURE__*/React__default.createElement("svg", {
+      version: "1.0",
+      xmlns: "http://www.w3.org/2000/svg",
+      width: props.width || '100%',
+      height: props.height || '100%',
+      viewBox: "0 0 177.000000 300.000000",
+      preserveAspectRatio: "xMidYMid meet"
+    }, /*#__PURE__*/React__default.createElement("g", {
+      transform: "translate(0.000000,300.000000) scale(0.100000,-0.100000)",
+      fill: "#000000",
+      stroke: "none"
+    }, /*#__PURE__*/React__default.createElement("path", {
+      d: "M808 2628 c-139 -205 -377 -557 -530 -781 l-277 -409 48 -71 c363\n-539 905 -1335 915 -1345 9 -9 90 -12 362 -10 l351 3 -350 515 c-192 283 -409\n603 -482 711 l-134 197 386 568 c212 313 450 665 529 782 l145 212 -355 0\n-355 0 -253 -372z"
+    })));
+  });
+
+  var LuxityArrowRight = (function (props) {
+    return /*#__PURE__*/React__default.createElement("svg", {
+      version: "1.0",
+      xmlns: "http://www.w3.org/2000/svg",
+      width: props.width || '100%',
+      height: props.height || '100%',
+      viewBox: "0 0 177.000000 300.000000",
+      preserveAspectRatio: "xMidYMid meet"
+    }, /*#__PURE__*/React__default.createElement("g", {
+      transform: "translate(0.000000,300.000000) scale(0.100000,-0.100000)",
+      fill: "#000000",
+      stroke: "none"
+    }, /*#__PURE__*/React__default.createElement("path", {
+      d: "M106 2973 c9 -16 226 -336 481 -711 255 -376 465 -687 466 -691 1 -4\n-233 -355 -520 -779 -288 -424 -523 -773 -523 -776 0 -3 159 -6 353 -5 l352 0\n525 776 c289 427 524 780 522 785 -1 5 -219 328 -484 719 l-481 709 -355 0\n-354 0 18 -27z"
+    })));
+  });
+
+  var _templateObject$1, _templateObject2, _templateObject3;
+  var LoaderContainer = styled__default.div(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  margin: 20px auto;\n"])));
+  var LeftImageContainer = styled__default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-start;\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n  animation: slide-left infinite 3s;\n  background-color: white;\n\n  @keyframes slide-left {\n    0% {\n      transform: translateX(0);\n    }\n    40% {\n      transform: translateX(50%);\n    }\n    100% {\n      transform: translateX(150%);\n    }\n  }\n"])));
+  var RightImageContainer = styled__default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-end;\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n  animation: slide-right infinite 3s;\n\n  @keyframes slide-right {\n    0% {\n      transform: translateX(0);\n    }\n    40% {\n      transform: translateX(-50%);\n      opacity: 1;\n    }\n    100% {\n      transform: translateX(-150%);\n      opacity: 0;\n    }\n  }\n"])));
+
+  function LuxityLoader(_ref) {
+    var width = _ref.width,
+        height = _ref.height;
+    return /*#__PURE__*/React__default.createElement(LoaderContainer, null, /*#__PURE__*/React__default.createElement(LeftImageContainer, null, /*#__PURE__*/React__default.createElement(LuxityArrowRight, {
+      width: width,
+      height: height
+    })), /*#__PURE__*/React__default.createElement(RightImageContainer, null, /*#__PURE__*/React__default.createElement(LuxityArrowLeft, {
+      width: width,
+      height: height
+    })));
+  }
+
   var LuxityPageReadyContext = /*#__PURE__*/React__default.createContext({
     data: null
   });
@@ -521,7 +571,10 @@
           customErrorMessage: customErrorMessage,
           customErrorHandler: customErrorHandler,
           renderCustomLoader: function renderCustomLoader() {
-            return /*#__PURE__*/React__default.createElement(EllipsisLoader, null);
+            return /*#__PURE__*/React__default.createElement(LuxityLoader, {
+              height: "40px",
+              width: "95%"
+            });
           },
           errorMessageInterpreter: interpretErrorMessage
         }, /*#__PURE__*/React__default.createElement(LuxityPageReadyContext.Provider, {
@@ -7108,8 +7161,8 @@
 
   var index$1 = manageState(Select);
 
-  var _templateObject$1;
-  var NotifyContainer = styled__default.div(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n  .page-ready {\n    display: flex;\n    align-items: center;\n  }\n\n  .loader {\n    min-width: 150px;\n  }\n\n  .notification-dropdown-select-container {\n    min-width: 150px;\n\n    .notification-dropdown-select__control {\n      min-height: auto;\n      background-color: ", ";\n      border: none;\n      border-radius: 0;\n\n      &--is-focused {\n        border: none;\n        border-radius: 0;\n        box-shadow: none;\n      }\n\n      .notification-dropdown-select__value-container {\n        & > div {\n          padding: 0;\n          margin: 0;\n          color: ", ";\n        }\n        & .notification-dropdown-select__single-value,\n        & .notification-dropdown-select__placeholder {\n          overflow: visible;\n          font-weight: lighter;\n        }\n      }\n    }\n  }\n\n  .notification-dropdown-select__indicators {\n    padding: 0 !important;\n    .notification-dropdown-select__dropdown-indicator {\n      color: ", ";\n    }\n  }\n\n  .notification-dropdown-select__menu {\n    border-radius: 0;\n\n    & > .notification-dropdown-select__menu-list {\n      border-radius: 0;\n\n      & > .notification-dropdown-select__option {\n        font-weight: bold;\n        &:last-child {\n          border-bottom: none;\n        }\n\n        &.notification-dropdown-select__option--is-focused {\n          background-color: ", ";\n          border-style: hidden;\n        }\n        &.notification-dropdown-select__option--is-selected {\n          color: ", ";\n          background-color: ", ";\n          border-style: hidden;\n        }\n        &.notification-dropdown-select__option--is-selected.notification-dropdown-select__option--is-focused {\n          border-style: hidden;\n        }\n      }\n    }\n  }\n"])), function (props) {
+  var _templateObject$2;
+  var NotifyContainer = styled__default.div(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  .page-ready {\n    display: flex;\n    align-items: center;\n  }\n\n  .loader {\n    min-width: 150px;\n  }\n\n  .notification-dropdown-select-container {\n    min-width: 150px;\n\n    .notification-dropdown-select__control {\n      min-height: auto;\n      background-color: ", ";\n      border: none;\n      border-radius: 0;\n\n      &--is-focused {\n        border: none;\n        border-radius: 0;\n        box-shadow: none;\n      }\n\n      .notification-dropdown-select__value-container {\n        & > div {\n          padding: 0;\n          margin: 0;\n          color: ", ";\n        }\n        & .notification-dropdown-select__single-value,\n        & .notification-dropdown-select__placeholder {\n          overflow: visible;\n          font-weight: lighter;\n        }\n      }\n    }\n  }\n\n  .notification-dropdown-select__indicators {\n    padding: 0 !important;\n    .notification-dropdown-select__dropdown-indicator {\n      color: ", ";\n    }\n  }\n\n  .notification-dropdown-select__menu {\n    border-radius: 0;\n\n    & > .notification-dropdown-select__menu-list {\n      border-radius: 0;\n\n      & > .notification-dropdown-select__option {\n        font-weight: bold;\n        &:last-child {\n          border-bottom: none;\n        }\n\n        &.notification-dropdown-select__option--is-focused {\n          background-color: ", ";\n          border-style: hidden;\n        }\n        &.notification-dropdown-select__option--is-selected {\n          color: ", ";\n          background-color: ", ";\n          border-style: hidden;\n        }\n        &.notification-dropdown-select__option--is-selected.notification-dropdown-select__option--is-focused {\n          border-style: hidden;\n        }\n      }\n    }\n  }\n"])), function (props) {
     return props.theme.colors.ntrlMin;
   }, function (props) {
     return props.theme.colors.base;
@@ -7231,7 +7284,10 @@
           }
         }, /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
           className: "notification-dropdown-label"
-        }, "Notification:\xA0"), updating ? /*#__PURE__*/React__default.createElement(EllipsisLoader, null) : /*#__PURE__*/React__default.createElement(index$1, {
+        }, "Notification:\xA0"), updating ? /*#__PURE__*/React__default.createElement(LuxityLoader, {
+          height: "20px",
+          width: "95%"
+        }) : /*#__PURE__*/React__default.createElement(index$1, {
           isMulti: false,
           isSearchable: false,
           components: {
@@ -7310,8 +7366,8 @@
     APPAREL: 100000
   };
 
-  var _templateObject$2;
-  var SvgWrapper = styled__default.div(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  padding: ", ";\n  border: 1px solid\n    ", ";\n  text-align: center;\n  display: flex;\n  flex-flow: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;\n  background-color: ", ";\n  color: ", ";\n\n  h1 {\n    color: ", ";\n  }\n\n  svg {\n    margin-left: auto;\n    margin-right: auto;\n    max-height: 80px;\n    width: auto;\n    /*condition*/\n\n    .fillColor {\n      fill: ", ";\n    }\n\n    .outlineColor {\n      fill: ", ";\n    }\n  }\n  @media (max-width: ", ") {\n    margin-bottom: ", ";\n  }\n"])), function (props) {
+  var _templateObject$3;
+  var SvgWrapper = styled__default.div(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n  padding: ", ";\n  border: 1px solid\n    ", ";\n  text-align: center;\n  display: flex;\n  flex-flow: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;\n  background-color: ", ";\n  color: ", ";\n\n  h1 {\n    color: ", ";\n  }\n\n  svg {\n    margin-left: auto;\n    margin-right: auto;\n    max-height: 80px;\n    width: auto;\n    /*condition*/\n\n    .fillColor {\n      fill: ", ";\n    }\n\n    .outlineColor {\n      fill: ", ";\n    }\n  }\n  @media (max-width: ", ") {\n    margin-bottom: ", ";\n  }\n"])), function (props) {
     return props.theme.marginPaddings[4];
   }, function (props) {
     return props.hasBorder ? props.theme.colors.borderColor : props.theme.colors.ntrlMin;
@@ -7342,8 +7398,8 @@
     isChecked: false
   };
 
-  var _templateObject$3;
-  var Body = styled__default.div(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n  .outlineColor {\n    fill: #ffffff;\n  }\n  display: flex;\n  flex-flow: row wrap;\n\n  button {\n    margin-top: 20px;\n    width: 150px;\n    cursor: pointer;\n    padding: 0;\n    &:not(:last-child) {\n      margin-right: ", ";\n    }\n  }\n  .outlineColor {\n    fill: white;\n  }\n\n  @media (max-width: ", ") {\n    display: block;\n    button {\n      width: 100%;\n      &:not(:last-child) {\n        margin-right: 0;\n      }\n    }\n  }\n"])), function (props) {
+  var _templateObject$4;
+  var Body = styled__default.div(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral(["\n  .outlineColor {\n    fill: #ffffff;\n  }\n  display: flex;\n  flex-flow: row wrap;\n\n  button {\n    margin-top: 20px;\n    width: 150px;\n    cursor: pointer;\n    padding: 0;\n    &:not(:last-child) {\n      margin-right: ", ";\n    }\n  }\n  .outlineColor {\n    fill: white;\n  }\n\n  @media (max-width: ", ") {\n    display: block;\n    button {\n      width: 100%;\n      &:not(:last-child) {\n        margin-right: 0;\n      }\n    }\n  }\n"])), function (props) {
     return props.theme.marginPaddings[2];
   }, media.sm);
 
@@ -7475,21 +7531,21 @@
     }));
   });
 
-  var _templateObject$4;
-  var ErrorMessage = styled__default.div(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral(["\n  color: ", ";\n  margin-top: ", ";\n"])), function (props) {
+  var _templateObject$5;
+  var ErrorMessage = styled__default.div(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteral(["\n  color: ", ";\n  margin-top: ", ";\n"])), function (props) {
     return props.theme.colors.primary;
   }, function (props) {
     return props.theme.marginPaddings[0];
   });
 
-  var _templateObject$5, _templateObject2;
-  var disabledButtonStyle = styled.css(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteral(["\n  cursor: not-allowed;\n  opacity: 0.4;\n"])));
-  var baseButtonStyle = styled.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: 1rem 3.5rem;\n  cursor: pointer;\n  letter-spacing: 1.3px;\n  border-style: none;\n  text-transform: uppercase;\n  font-size: 12px;\n  color: #fff;\n  transition: 0.2s ease-in-out;\n  outline: none;\n  min-width: 150px;\n"])));
+  var _templateObject$6, _templateObject2$1;
+  var disabledButtonStyle = styled.css(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteral(["\n  cursor: not-allowed;\n  opacity: 0.4;\n"])));
+  var baseButtonStyle = styled.css(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n  padding: 1rem 3.5rem;\n  cursor: pointer;\n  letter-spacing: 1.3px;\n  border-style: none;\n  text-transform: uppercase;\n  font-size: 12px;\n  color: #fff;\n  transition: 0.2s ease-in-out;\n  outline: none;\n  min-width: 150px;\n"])));
 
   var _excluded = ["children"];
 
-  var _templateObject$6;
-  var Button = styled__default.button(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteral(["\n  outline: none;\n  cursor: pointer;\n  background-color: transparent;\n  border: none;\n  &:disabled {\n    ", ";\n  }\n"])), disabledButtonStyle);
+  var _templateObject$7;
+  var Button = styled__default.button(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteral(["\n  outline: none;\n  cursor: pointer;\n  background-color: transparent;\n  border: none;\n  &:disabled {\n    ", ";\n  }\n"])), disabledButtonStyle);
 
   var WrapperButton = function WrapperButton(_ref) {
     var children = _ref.children,
@@ -7498,7 +7554,7 @@
     return /*#__PURE__*/React__default.createElement(Button, restProps, children);
   };
 
-  var _templateObject$7, _templateObject2$1;
+  var _templateObject$8, _templateObject2$2;
   var categories = catArray;
 
   var getSvg = function getSvg() {
@@ -7525,10 +7581,10 @@
     }
   };
 
-  var Container = styled__default.div(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n"])), function (props) {
+  var Container = styled__default.div(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n"])), function (props) {
     return props.theme.marginPaddings[5];
   });
-  var CategoryTitle = styled__default.h1(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n  margin-top: 10px;\n  font-size: 14px;\n  text-transform: uppercase;\n"])));
+  var CategoryTitle = styled__default.h1(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteral(["\n  margin-top: 10px;\n  font-size: 14px;\n  text-transform: uppercase;\n"])));
   /**
    * InterestCatSelector is a specialized selector for select luxity specific interest categories
    */
@@ -7563,8 +7619,8 @@
 
   var _excluded$1 = ["children"];
 
-  var _templateObject$8;
-  var Button$1 = styled__default.button(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteral(["\n  ", ";\n  background-color: transparent;\n  color: ", ";\n  &:hover {\n    color: ", ";\n  }\n  &:disabled {\n    ", ";\n    color: ", ";\n  }\n"])), baseButtonStyle, function (props) {
+  var _templateObject$9;
+  var Button$1 = styled__default.button(_templateObject$9 || (_templateObject$9 = _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;
@@ -7586,8 +7642,8 @@
 
   var _excluded$2 = ["children"];
 
-  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) {
+  var _templateObject$a;
+  var Button$2 = styled__default(TextButton$1)(_templateObject$a || (_templateObject$a = _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;
@@ -7610,15 +7666,15 @@
 
   var InvertedTextButton$1 = themed(InvertedTextButton);
 
-  var _templateObject$a, _templateObject2$2;
+  var _templateObject$b, _templateObject2$3;
   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) {
+  var multiselectorItemFadeIn = styled.keyframes(_templateObject$b || (_templateObject$b = _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$3 || (_templateObject2$3 = _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;
@@ -7846,6 +7902,7 @@
       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", {
@@ -7854,11 +7911,11 @@
     }));
   });
 
-  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) {
+  var _templateObject$c, _templateObject2$4;
+  var Title = 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$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) {
+  var InterestsSubheadingContainer = styled__default.div(_templateObject2$4 || (_templateObject2$4 = _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;
@@ -7877,7 +7934,7 @@
     }, /*#__PURE__*/React__default.createElement(Title, null, title), /*#__PURE__*/React__default.createElement("div", null, children));
   };
 
-  var _templateObject$c;
+  var _templateObject$d;
 
   var Title$1 = function Title(_ref) {
     var baseClass = _ref.baseClass,
@@ -7898,7 +7955,7 @@
     })));
   };
 
-  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) {
+  var StyledTitle = styled__default(Title$1)(_templateObject$d || (_templateObject$d = _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];
@@ -8040,8 +8097,8 @@
 
   var _excluded$3 = ["children"];
 
-  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) {
+  var _templateObject$e;
+  var Button$3 = styled__default.button(_templateObject$e || (_templateObject$e = _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;
@@ -8060,8 +8117,8 @@
 
   var PrimaryButton$1 = themed(PrimaryButton);
 
-  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) {
+  var _templateObject$f;
+  var BaseButton = styled__default.button(_templateObject$f || (_templateObject$f = _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;
@@ -8917,12 +8974,12 @@
   /* ::<number | string, string, string> */
   (transparentize);
 
-  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$g;
+  var baseSliderStyles = styled.css(_templateObject$g || (_templateObject$g = _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$g, _templateObject2$4, _templateObject3, _templateObject4;
+  var _templateObject$h, _templateObject2$5, _templateObject3$1, _templateObject4;
   var handleDimension = '14px';
-  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) {
+  var SliderContainer = styled__default.div(_templateObject$h || (_templateObject$h = _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;
@@ -8941,22 +8998,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 || (_templateObject3 = _taggedTemplateLiteral(["\n        .rc-slider-mark-text,\n        .rc-slider-dot {\n          visibility: hidden;\n        }\n      "])));
+    var visiblityStyle = showMarks ? styled.css(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral([""]))) : styled.css(_templateObject3$1 || (_templateObject3$1 = _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$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$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 ToolTipWrapper = styled__default.div(_templateObject$i || (_templateObject$i = _taggedTemplateLiteral(["\n  position: absolute;\n  right: auto;\n  top: 20px;\n  transform: translateX(-50%);\n  width: 100px;\n  text-align: center;\n"])));
+
+  var _templateObject$j;
+  var Footer = styled__default.div(_templateObject$j || (_templateObject$j = _taggedTemplateLiteral(["\n  display: flex;\n  flex-flow: row nowrap;\n  justify-content: flex-end;\n"])));
 
   var _excluded$4 = ["dragging", "value", "offset", "index"],
       _excluded2 = ["renderTitleSection", "marks", "defaultMinValue", "defaultMaxValue", "min", "max", "toolTipComponent", "renderFooterSection", "onChange", "children", "identifier", "showMarks"];
 
-  var _templateObject$j;
+  var _templateObject$k;
   var debounceBuilder$1 = functions.debounced(100);
-  var ChildrenWrapper = styled__default.div(_templateObject$j || (_templateObject$j = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n"])), function (props) {
+  var ChildrenWrapper = styled__default.div(_templateObject$k || (_templateObject$k = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n"])), function (props) {
     return props.theme.marginPaddings[3];
   });
 
@@ -9180,46 +9237,46 @@
     shoeSizes: []
   };
 
-  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 RadioButtonsContainer = styled__default.div(_templateObject$l || (_templateObject$l = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"])));
+
+  var _templateObject$m;
+  var ButtonListWrapper = styled__default.div(_templateObject$m || (_templateObject$m = _taggedTemplateLiteral(["\n  display: flex;\n  flex-grow: 1;\n  flex-wrap: ", ";\n"])), function (_ref) {
     var noWrap = _ref.noWrap;
     return noWrap ? 'nowrap' : 'wrap';
   });
 
-  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) {
+  var _templateObject$n;
+  var Title$3 = styled__default.div(_templateObject$n || (_templateObject$n = _taggedTemplateLiteral(["\n  font-weight: bold;\n  color: ", ";\n  flex-basis: 40%;\n"])), function (props) {
     return props.theme.colors.base;
   });
 
-  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) {
+  var _templateObject$o;
+  var RadioButtonLabel = styled__default.label(_templateObject$o || (_templateObject$o = _taggedTemplateLiteral(["\n  display: flex;\n  margin-bottom: ", ";\n  margin-right: ", ";\n"])), function (props) {
     return props.theme.marginPaddings[0];
   }, function (props) {
     return props.theme.marginPaddings[0];
   });
 
-  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) {
+  var _templateObject$p;
+  var RadioButtonCircle = styled__default.div(_templateObject$p || (_templateObject$p = _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 _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 _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 RadioButtonCircleInner = styled__default.div(_templateObject$q || (_templateObject$q = _taggedTemplateLiteral(["\n  height: 8px;\n  width: 8px;\n  border-radius: 50%;\n  margin: auto;\n"])));
 
   var _templateObject$r;
-  var RadioButtonText = styled__default.div(_templateObject$r || (_templateObject$r = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"])));
+  var RadioButtonInput = styled__default.input(_templateObject$r || (_templateObject$r = _taggedTemplateLiteral(["\n  display: none;\n  :checked ~ ", " {\n    ", " {\n      background-color: ", ";\n    }\n  }\n"])), RadioButtonCircle, RadioButtonCircleInner, function (props) {
+    return props.theme.colors.base;
+  });
 
   var _templateObject$s;
+  var RadioButtonText = styled__default.div(_templateObject$s || (_templateObject$s = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"])));
+
+  var _templateObject$t;
   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 CheckboxLabel = styled__default.label(_templateObject$t || (_templateObject$t = _taggedTemplateLiteral(["\n  cursor: pointer;\n  position: relative;\n  display: flex;\n  align-items: center;\n\n  span {\n    :before {\n      content: '\\2713';\n      position: absolute;\n      display: none;\n      color: white;\n      left: 0.4em;\n      top: 0.1em;\n      font-size: ", ";\n      text-align: center;\n    }\n  }\n\n  input {\n    font-size: ", ";\n    background-color: ", ";\n    appearance: none;\n    outline: none;\n    height: 1em;\n    width: 1em;\n    margin-right: ", ";\n    border: 1px solid ", ";\n    border-radius: ", ";\n    transition-duration: 0.3s;\n    cursor: pointer;\n\n    &:checked {\n      background-color: ", ";\n    }\n\n    &:checked + span:before {\n      display: block;\n    }\n  }\n"], ["\n  cursor: pointer;\n  position: relative;\n  display: flex;\n  align-items: center;\n\n  span {\n    :before {\n      content: '\\\\2713';\n      position: absolute;\n      display: none;\n      color: white;\n      left: 0.4em;\n      top: 0.1em;\n      font-size: ", ";\n      text-align: center;\n    }\n  }\n\n  input {\n    font-size: ", ";\n    background-color: ", ";\n    appearance: none;\n    outline: none;\n    height: 1em;\n    width: 1em;\n    margin-right: ", ";\n    border: 1px solid ", ";\n    border-radius: ", ";\n    transition-duration: 0.3s;\n    cursor: pointer;\n\n    &:checked {\n      background-color: ", ";\n    }\n\n    &:checked + span:before {\n      display: block;\n    }\n  }\n"])), function (props) {
     var _props$theme;
 
     return (_props$theme = props.theme) !== null && _props$theme !== void 0 && _props$theme.fontSizes.length ? props.theme.fontSizes[4] : '1em';
@@ -9306,12 +9363,12 @@
     }
   };
 
-  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) {
+  var _templateObject$u, _templateObject2$6;
+  var TitleWrapper = styled__default.div(_templateObject$u || (_templateObject$u = _taggedTemplateLiteral(["\n  display: flex;\n  flex-flow: nowrap row;\n  justify-content: space-between;\n  margin-bottom: ", ";\n  label {\n    margin-bottom: 0;\n  }\n"])), function (props) {
     return props.theme.marginPaddings[4];
   });
   var onShoeSizeTypeChangeTimeout = 300;
-  var ShoeSizeFadeContainer = styled__default.div(_templateObject2$5 || (_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) {
+  var ShoeSizeFadeContainer = styled__default.div(_templateObject2$6 || (_templateObject2$6 = _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;
@@ -10051,8 +10108,8 @@
 
   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) {
+  var _templateObject$v;
+  var Button$4 = styled__default.button(_templateObject$v || (_templateObject$v = _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;
@@ -10075,8 +10132,8 @@
 
   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) {
+  var _templateObject$w;
+  var CurrencyInputWrapper = styled__default.div(_templateObject$w || (_templateObject$w = _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;
   });
 
@@ -10201,8 +10258,8 @@
     category: ''
   };
 
-  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) {
+  var _templateObject$x;
+  var SelectionWrapper = styled__default.div(_templateObject$x || (_templateObject$x = _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];
@@ -10218,14 +10275,14 @@
 
   var _excluded$7 = ["title", "checked", "renderIcon", "onChange", "checkedValue", "unCheckedValue"];
 
-  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) {
+  var _templateObject$y, _templateObject2$7, _templateObject3$2;
+  var Content = styled__default.div(_templateObject$y || (_templateObject$y = _taggedTemplateLiteral(["\n  background-color: transparent;\n  border: 1px solid ", ";\n  transition: 200ms ease-in-out;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", ";\n  cursor: pointer;\n"])), function (props) {
     return props.theme.colors.primary;
   }, function (props) {
     return props.theme.marginPaddings[0];
   });
-  var InputText = styled__default.div(_templateObject2$6 || (_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) {
+  var InputText = styled__default.div(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteral(["\n  transition: 200ms ease-in;\n  margin-left: auto;\n  margin-right: auto;\n"])));
+  var StyledLabel = styled__default.label(_templateObject3$2 || (_templateObject3$2 = _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;
@@ -10384,33 +10441,33 @@
     }));
   });
 
-  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) {
+  var SvgWrapper$1 = styled__default.span(_templateObject$z || (_templateObject$z = _taggedTemplateLiteral(["\n  padding: 1rem;\n  display: flex;\n  svg {\n    width: 23px;\n    height: auto;\n  }\n"])));
+
+  var _templateObject$A;
+  var IconWrapper = styled__default.div(_templateObject$A || (_templateObject$A = _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 _templateObject$B, _templateObject2$8, _templateObject3$3, _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) {
+  var AddInterestContainer = styled__default.div(_templateObject$B || (_templateObject$B = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n  border: 1px solid ", ";\n  padding: ", ";\n"])), function (props) {
     return props.theme.marginPaddings[6];
   }, function (props) {
     return props.theme.colors.borderColor;
   }, function (props) {
     return props.theme.marginPaddings[6];
   });
-  var SaveAndCancelButtonContainer = styled__default.div(_templateObject2$7 || (_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) {
+  var SaveAndCancelButtonContainer = styled__default.div(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteral(["\n  margin-top: ", ";\n\n  @media (max-width: ", ") {\n    .fl-right__item {\n      flex-direction: column;\n      margin-right: 0;\n      margin-left: ", ";\n    }\n\n    button {\n      margin-bottom: ", ";\n    }\n  }\n"])), function (props) {
     return props.theme.marginPaddings[6];
   }, media.xs, function (props) {
     return props.theme.marginPaddings[0];
   }, function (props) {
     return props.theme.marginPaddings[1];
   });
-  var CatSelectorParagraph = styled__default.div(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteral(["\n  font-weight: bold;\n  color: ", ";\n  margin-bottom: ", ";\n"])), function (props) {
+  var CatSelectorParagraph = styled__default.div(_templateObject3$3 || (_templateObject3$3 = _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];
@@ -10737,7 +10794,7 @@
     })));
   });
 
-  var _templateObject$B, _templateObject2$8, _templateObject3$3, _templateObject4$2;
+  var _templateObject$C, _templateObject2$9, _templateObject3$4, _templateObject4$2;
   var MALE$2 = genders.MALE,
       FEMALE$2 = genders.FEMALE,
       UNISEX$1 = genders.UNISEX;
@@ -10873,9 +10930,9 @@
     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 SheoSizeContentDiv = styled__default.div(_templateObject$C || (_templateObject$C = _taggedTemplateLiteral(["\n  @media (max-width: ", ") {\n    display: none;\n  }\n"])), media.xs);
+  var InterestItemTitle = styled__default.div(_templateObject2$9 || (_templateObject2$9 = _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$4 || (_templateObject3$4 = _taggedTemplateLiteral(["\n  display: flex;\n\n  .no-shoe-size-section {\n    @media (max-width: ", ") {\n      display: none;\n    }\n  }\n"])), media.xs);
   var InterestItemContent = styled__default.div(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  width: 95%;\n  height: 100%;\n  border: 1px solid ", ";\n  padding: 0.5em;\n  margin-bottom: ", ";\n\n  .interest-item__container_heading {\n    color: ", ";\n    flex-basis: calc(100% / 6);\n    margin-left: ", ";\n    margin-top: 0.3rem;\n\n    @media (max-width: ", ") {\n      display: inline;\n    }\n  }\n\n  .list-items {\n    display: inline-flex;\n    flex-direction: column;\n\n    @media (max-width: ", ") {\n      margin-left: ", ";\n    }\n  }\n\n  @media (max-width: ", ") {\n    flex-direction: column;\n  }\n"])), function (props) {
     return props.theme.colors.borderColor;
   }, function (props) {
@@ -10897,8 +10954,8 @@
     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) {
+  var _templateObject$D;
+  var MyInterestTitleHeadingContainer = styled__default.div(_templateObject$D || (_templateObject$D = _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;
@@ -10928,8 +10985,8 @@
 
   var MyInterestTitleHeading$1 = themed(MyInterestTitleHeading);
 
-  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) {
+  var _templateObject$E;
+  var SvgWrapper$2 = styled__default.span(_templateObject$E || (_templateObject$E = _taggedTemplateLiteral(["\n  svg {\n    path {\n      fill: ", ";\n    }\n  }\n"])), function (props) {
     return props.theme.colors.primary;
   });
   var AccountIcon = themed(function () {