@bonlineza/luxity-lib 2.7.2 → 2.7.3

package/Interests.js

@@ -7659,7 +7659,7 @@
   var InvertedTextButton$1 = themed(InvertedTextButton);
 
   function _templateObject2$2() {
-    var data = _taggedTemplateLiteral(["\n  .multiselector__selected-items,\n  .multiselector__selectable-items {\n    display: flex;\n    flex-flow: wrap;\n    margin-left: calc(-1 * ", ");\n    button {\n      &:hover {\n        color: ", ";\n        background-color: ", ";\n      }\n      border-color: ", ";\n      background-color: ", ";\n      color: ", ";\n      padding: ", ";\n      text-transform: none;\n      box-sizing: border-box;\n      animation: ", " ease-in-out\n        ", " forwards;\n      flex-basis: calc(33.33% - ", ");\n      margin-bottom: ", ";\n      margin-left: ", ";\n      text-overflow: ellipsis;\n      overflow-x: hidden;\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"]);
+    var data = _taggedTemplateLiteral(["\n  .multiselector__selected-items,\n  .multiselector__selectable-items {\n    display: flex;\n    flex-flow: wrap;\n    margin-left: calc(-1 * ", ");\n    button {\n      &:hover {\n        color: ", ";\n        background-color: ", ";\n      }\n      border-color: ", ";\n      background-color: ", ";\n      color: ", ";\n      padding: ", ";\n      text-transform: none;\n      box-sizing: border-box;\n      animation: ", " ease-in-out\n        ", " forwards;\n      flex-basis: calc(25% - ", ");\n      margin-bottom: ", ";\n      margin-left: ", ";\n      text-overflow: ellipsis;\n      overflow-x: hidden;\n      min-height: 40px;\n\n      @media (max-width: ", ") {\n        flex-basis: calc(50% - ", ");\n      }\n    }\n  }\n\n  .multiselector__footer {\n    display: flex;\n    justify-content: center;\n    button {\n      &:hover {\n        color: ", ";\n        background-color: ", ";\n      }\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"]);
 
     _templateObject2$2 = function _templateObject2() {
       return data;
@@ -7921,7 +7921,7 @@
   });
 
   function _templateObject2$3() {
-    var data = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  border-bottom: 1px solid ", ";\n  margin-bottom: ", ";\n  margin-top: ", ";\n"]);
+    var data = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: ", ";\n  border-bottom: 1px solid ", ";\n  margin-bottom: ", ";\n  margin-top: ", ";\n  width: 100%;\n  align-items: center;\n"]);
 
     _templateObject2$3 = function _templateObject2() {
       return data;
@@ -7931,7 +7931,7 @@
   }
 
   function _templateObject$b() {
-    var data = _taggedTemplateLiteral(["\n  font-size: ", ";\n  font-weight: bold;\n  margin-bottom: ", ";\n  text-transform: uppercase;\n"]);
+    var data = _taggedTemplateLiteral(["\n  font-size: ", ";\n  font-weight: bold;\n  margin-bottom: 0;\n  text-transform: uppercase;\n"]);
 
     _templateObject$b = function _templateObject() {
       return data;
@@ -7941,10 +7941,10 @@
   }
   var Title = styled__default.h1(_templateObject$b(), function (props) {
     return props.theme.fontSizes[2];
-  }, function (props) {
-    return props.theme.marginPaddings[2];
   });
   var InterestsSubheadingContainer = styled__default.div(_templateObject2$3(), function (props) {
+    return props.theme.marginPaddings[1];
+  }, function (props) {
     return props.theme.colors.primary;
   }, function (props) {
     return props.theme.marginPaddings[3];
@@ -7962,7 +7962,7 @@
   };
 
   function _templateObject$c() {
-    var data = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n  font-weight: bold;\n  display: flex;\n  align-items: center;\n  font-size: ", ";\n\n  .title__search,\n  .title__search {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    svg {\n      margin-left: ", ";\n      fill: ", ";\n      stroke: ", ";\n    }\n\n    input {\n      width: 140px;\n      border: solid 1px transparent;\n      font-size: ", ";\n      transition: 0.2s border-color ease-in-out;\n      margin-left: ", ";\n      padding: 0 ", " 0\n        ", " 0;\n\n      :focus {\n        border-color: ", ";\n        border-bottom: none;\n      }\n    }\n  }\n"]);
+    var data = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n  font-weight: bold;\n  display: flex;\n  align-items: center;\n  font-size: ", ";\n\n  .title__search,\n  .title__search {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    min-height: 30px;\n    margin-bottom: ", ";\n\n    svg {\n      margin-left: ", ";\n      fill: ", ";\n      stroke: ", ";\n    }\n\n    input {\n      width: 140px;\n      border: none;\n      font-size: ", ";\n      transition: 0.2s border-color ease-in-out;\n      margin-left: ", ";\n      padding: 0;\n\n      :focus {\n        border-color: ", ";\n        border-bottom: none;\n      }\n    }\n  }\n"]);
 
     _templateObject$c = function _templateObject() {
       return data;
@@ -7994,6 +7994,8 @@
     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) {
@@ -8004,10 +8006,6 @@
     return props.theme.fontSizes[2];
   }, function (props) {
     return props.theme.marginPaddings[0];
-  }, function (props) {
-    return props.theme.marginPaddings[0];
-  }, function (props) {
-    return props.theme.marginPaddings[0];
   }, function (props) {
     return props.theme.colors.primary;
   });
@@ -9363,7 +9361,7 @@
   };
 
   function _templateObject$k() {
-    var data = _taggedTemplateLiteral(["\n  font-size: ", ";\n  font-weight: bold;\n  margin-bottom: ", ";\n"]);
+    var data = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"]);
 
     _templateObject$k = function _templateObject() {
       return data;
@@ -9371,124 +9369,109 @@
 
     return data;
   }
-  var SliderTitle = styled__default.div(_templateObject$k(), function (props) {
-    return props.theme.fontSizes[2];
-  }, function (props) {
-    return props.theme.marginPaddings[3];
-  });
+  var RadioButtonsContainer = styled__default.div(_templateObject$k());
 
   function _templateObject$l() {
-    var data = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"]);
-
-    _templateObject$l = function _templateObject() {
-      return data;
-    };
-
-    return data;
-  }
-  var RadioButtonsContainer = styled__default.div(_templateObject$l());
-
-  function _templateObject$m() {
     var data = _taggedTemplateLiteral(["\n  display: flex;\n  flex-grow: 1;\n  flex-wrap: ", ";\n"]);
 
-    _templateObject$m = function _templateObject() {
+    _templateObject$l = function _templateObject() {
       return data;
     };
 
     return data;
   }
-  var ButtonListWrapper = styled__default.div(_templateObject$m(), function (_ref) {
+  var ButtonListWrapper = styled__default.div(_templateObject$l(), function (_ref) {
     var noWrap = _ref.noWrap;
     return noWrap ? 'nowrap' : 'wrap';
   });
 
-  function _templateObject$n() {
+  function _templateObject$m() {
     var data = _taggedTemplateLiteral(["\n  font-weight: bold;\n  color: ", ";\n  flex-basis: 40%;\n"]);
 
-    _templateObject$n = function _templateObject() {
+    _templateObject$m = function _templateObject() {
       return data;
     };
 
     return data;
   }
-  var Title$3 = styled__default.div(_templateObject$n(), function (props) {
+  var Title$3 = styled__default.div(_templateObject$m(), function (props) {
     return props.theme.colors.base;
   });
 
-  function _templateObject$o() {
+  function _templateObject$n() {
     var data = _taggedTemplateLiteral(["\n  display: flex;\n  margin-bottom: ", ";\n  margin-right: ", ";\n"]);
 
-    _templateObject$o = function _templateObject() {
+    _templateObject$n = function _templateObject() {
       return data;
     };
 
     return data;
   }
-  var RadioButtonLabel = styled__default.label(_templateObject$o(), function (props) {
+  var RadioButtonLabel = styled__default.label(_templateObject$n(), function (props) {
     return props.theme.marginPaddings[0];
   }, function (props) {
     return props.theme.marginPaddings[0];
   });
 
-  function _templateObject$p() {
+  function _templateObject$o() {
     var data = _taggedTemplateLiteral(["\n  height: 20px;\n  width: 20px;\n  border-radius: 50%;\n  margin-right: 5px;\n  border: 1px solid ", ";\n  display: flex;\n"]);
 
-    _templateObject$p = function _templateObject() {
+    _templateObject$o = function _templateObject() {
       return data;
     };
 
     return data;
   }
-  var RadioButtonCircle = styled__default.div(_templateObject$p(), function (props) {
+  var RadioButtonCircle = styled__default.div(_templateObject$o(), function (props) {
     return props.theme.colors.base;
   });
 
-  function _templateObject$q() {
+  function _templateObject$p() {
     var data = _taggedTemplateLiteral(["\n  height: 8px;\n  width: 8px;\n  border-radius: 50%;\n  margin: auto;\n"]);
 
-    _templateObject$q = function _templateObject() {
+    _templateObject$p = function _templateObject() {
       return data;
     };
 
     return data;
   }
-  var RadioButtonCircleInner = styled__default.div(_templateObject$q());
+  var RadioButtonCircleInner = styled__default.div(_templateObject$p());
 
-  function _templateObject$r() {
+  function _templateObject$q() {
     var data = _taggedTemplateLiteral(["\n  display: none;\n  :checked ~ ", " {\n    ", " {\n      background-color: ", ";\n    }\n  }\n"]);
 
-    _templateObject$r = function _templateObject() {
+    _templateObject$q = function _templateObject() {
       return data;
     };
 
     return data;
   }
-  var RadioButtonInput = styled__default.input(_templateObject$r(), RadioButtonCircle, RadioButtonCircleInner, function (props) {
+  var RadioButtonInput = styled__default.input(_templateObject$q(), RadioButtonCircle, RadioButtonCircleInner, function (props) {
     return props.theme.colors.base;
   });
 
-  function _templateObject$s() {
+  function _templateObject$r() {
     var data = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"]);
 
-    _templateObject$s = function _templateObject() {
+    _templateObject$r = function _templateObject() {
       return data;
     };
 
     return data;
   }
-  var RadioButtonText = styled__default.div(_templateObject$s());
+  var RadioButtonText = styled__default.div(_templateObject$r());
 
-  function _templateObject$t() {
+  function _templateObject$s() {
     var data = _taggedTemplateLiteral(["\n  cursor: pointer;\n  position: relative;\n  display: flex;\n  align-items: center;\n\n  span {\n    :before {\n      content: '\\2713';\n      position: absolute;\n      display: none;\n      color: white;\n      left: 0.4em;\n      top: 0.1em;\n      font-size: ", ";\n      text-align: center;\n    }\n  }\n\n  input {\n    font-size: ", ";\n    background-color: ", ";\n    appearance: none;\n    outline: none;\n    height: 1em;\n    width: 1em;\n    margin-right: ", ";\n    border: 1px solid ", ";\n    border-radius: ", ";\n    transition-duration: 0.3s;\n    cursor: pointer;\n\n    &:checked {\n      background-color: ", ";\n    }\n\n    &:checked + span:before {\n      display: block;\n    }\n  }\n"], ["\n  cursor: pointer;\n  position: relative;\n  display: flex;\n  align-items: center;\n\n  span {\n    :before {\n      content: '\\\\2713';\n      position: absolute;\n      display: none;\n      color: white;\n      left: 0.4em;\n      top: 0.1em;\n      font-size: ", ";\n      text-align: center;\n    }\n  }\n\n  input {\n    font-size: ", ";\n    background-color: ", ";\n    appearance: none;\n    outline: none;\n    height: 1em;\n    width: 1em;\n    margin-right: ", ";\n    border: 1px solid ", ";\n    border-radius: ", ";\n    transition-duration: 0.3s;\n    cursor: pointer;\n\n    &:checked {\n      background-color: ", ";\n    }\n\n    &:checked + span:before {\n      display: block;\n    }\n  }\n"]);
 
-    _templateObject$t = function _templateObject() {
+    _templateObject$s = function _templateObject() {
       return data;
     };
 
     return data;
   }
   var inputMarginRight = '0.2em';
-  var CheckboxLabel = styled__default.label(_templateObject$t(), function (props) {
+  var CheckboxLabel = styled__default.label(_templateObject$s(), function (props) {
     var _props$theme;
 
     return ((_props$theme = props.theme) === null || _props$theme === void 0 ? void 0 : _props$theme.fontSizes.length) ? props.theme.fontSizes[4] : '1em';
@@ -9585,18 +9568,18 @@
     return data;
   }
 
-  function _templateObject$u() {
-    var data = _taggedTemplateLiteral(["\n  display: flex;\n  flex-flow: nowrap row;\n  justify-content: space-between;\n  margin-bottom: ", ";\n  label,\n  ", " {\n    margin-bottom: 0;\n  }\n"]);
+  function _templateObject$t() {
+    var data = _taggedTemplateLiteral(["\n  display: flex;\n  flex-flow: nowrap row;\n  justify-content: space-between;\n  margin-bottom: ", ";\n  label {\n    margin-bottom: 0;\n  }\n"]);
 
-    _templateObject$u = function _templateObject() {
+    _templateObject$t = function _templateObject() {
       return data;
     };
 
     return data;
   }
-  var TitleWrapper = styled__default.div(_templateObject$u(), function (props) {
+  var TitleWrapper = styled__default.div(_templateObject$t(), function (props) {
     return props.theme.marginPaddings[4];
-  }, SliderTitle);
+  });
   var onShoeSizeTypeChangeTimeout = 300;
   var ShoeSizeFadeContainer = styled__default.div(_templateObject2$5(), onShoeSizeTypeChangeTimeout, function (props) {
     return props.childVisible ? 1 : 0;
@@ -9712,7 +9695,9 @@
 
     return React__default.createElement(LuxityPageReady, {
       getRequestPromise: triggerRequest
-    }, React__default.createElement(TitleWrapper, null, React__default.createElement(SliderTitle, null, "Shoe Size Range"), React__default.createElement(RadioButtons$1, shoeSizeTypeProps)), React__default.createElement(LuxityPageReadyContext.Consumer, null, function (_ref3) {
+    }, React__default.createElement(TitleWrapper, null, React__default.createElement(InterestsSubheading, {
+      title: "Shoe Size Range"
+    }, React__default.createElement(RadioButtons$1, shoeSizeTypeProps))), 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,
@@ -9767,16 +9752,16 @@
     inputMode: 'numeric'
   };
 
-  function _templateObject$v() {
+  function _templateObject$u() {
     var data = _taggedTemplateLiteral(["\n  ", ";\n  background-color: ", ";\n  color: ", ";\n  border: 1px solid ", ";\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n  }\n  &:disabled {\n    ", "\n    &:hover {\n      background-color: ", ";\n    }\n  }\n"]);
 
-    _templateObject$v = function _templateObject() {
+    _templateObject$u = function _templateObject() {
       return data;
     };
 
     return data;
   }
-  var Button$4 = styled__default.button(_templateObject$v(), baseButtonStyle, function (props) {
+  var Button$4 = styled__default.button(_templateObject$u(), baseButtonStyle, function (props) {
     return props.theme.colors.ntrlMin;
   }, function (props) {
     return props.theme.colors.primary;
@@ -9799,16 +9784,16 @@
 
   var SecondaryButton$1 = themed(SecondaryButton);
 
-  function _templateObject$w() {
+  function _templateObject$v() {
     var data = _taggedTemplateLiteral(["\n  display: flex;\n  flex-flow: row nowrap;\n  justify-content: space-between;\n\n  input[data-qe-id='masked-input-min'],\n  input[data-qe-id='masked-input-max'] {\n    flex-basis: 30%;\n    border-left: none;\n    border-right: none;\n    border-top: none;\n    border-bottom: 1px solid ", ";\n  }\n"]);
 
-    _templateObject$w = function _templateObject() {
+    _templateObject$v = function _templateObject() {
       return data;
     };
 
     return data;
   }
-  var CurrencyInputWrapper = styled__default.div(_templateObject$w(), function (props) {
+  var CurrencyInputWrapper = styled__default.div(_templateObject$v(), function (props) {
     return props.theme.colors.primary;
   });
 
@@ -9934,16 +9919,16 @@
     category: ''
   };
 
-  function _templateObject$x() {
+  function _templateObject$w() {
     var data = _taggedTemplateLiteral(["\n  display: flex;\n  margin-left: calc(-1 * ", ");\n  label {\n    margin-bottom: ", ";\n    flex-basis: calc(33.33% - ", ");\n    margin-bottom: ", ";\n    margin-left: ", ";\n  }\n  @media (max-width: ", ") {\n    label {\n      flex-basis: calc(50% - ", ");\n    }\n  }\n"]);
 
-    _templateObject$x = function _templateObject() {
+    _templateObject$w = function _templateObject() {
       return data;
     };
 
     return data;
   }
-  var SelectionWrapper = styled__default.div(_templateObject$x(), function (props) {
+  var SelectionWrapper = styled__default.div(_templateObject$w(), function (props) {
     return props.theme.marginPaddings[2];
   }, function (props) {
     return props.theme.marginPaddings[2];
@@ -9977,16 +9962,16 @@
     return data;
   }
 
-  function _templateObject$y() {
+  function _templateObject$x() {
     var data = _taggedTemplateLiteral(["\n  background-color: transparent;\n  border: 1px solid ", ";\n  transition: 200ms ease-in-out;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", ";\n  cursor: pointer;\n"]);
 
-    _templateObject$y = function _templateObject() {
+    _templateObject$x = function _templateObject() {
       return data;
     };
 
     return data;
   }
-  var Content = styled__default.div(_templateObject$y(), function (props) {
+  var Content = styled__default.div(_templateObject$x(), function (props) {
     return props.theme.colors.primary;
   }, function (props) {
     return props.theme.marginPaddings[0];
@@ -10151,34 +10136,34 @@
     }));
   });
 
-  function _templateObject$z() {
-    var data = _taggedTemplateLiteral(["\n  padding: 1rem;\n  svg {\n    width: 23px;\n    height: auto;\n  }\n"]);
+  function _templateObject$y() {
+    var data = _taggedTemplateLiteral(["\n  padding: 1rem;\n  display: flex;\n  svg {\n    width: 23px;\n    height: auto;\n  }\n"]);
 
-    _templateObject$z = function _templateObject() {
+    _templateObject$y = function _templateObject() {
       return data;
     };
 
     return data;
   }
-  var SvgWrapper$1 = styled__default.span(_templateObject$z());
+  var SvgWrapper$1 = styled__default.span(_templateObject$y());
 
-  function _templateObject$A() {
+  function _templateObject$z() {
     var data = _taggedTemplateLiteral(["\n  border: 1px solid ", ";\n  height: auto;\n  margin-bottom: 1rem;\n  margin-left: 1rem;\n  display: flex;\n  align-items: center;\n  height: auto;\n\n  :hover {\n    background-color: ", ";\n    cursor: pointer;\n  }\n\n  #svg-trash {\n    width: 15px;\n  }\n"]);
 
-    _templateObject$A = function _templateObject() {
+    _templateObject$z = function _templateObject() {
       return data;
     };
 
     return data;
   }
-  var IconWrapper = styled__default.div(_templateObject$A(), function (props) {
+  var IconWrapper = styled__default.div(_templateObject$z(), function (props) {
     return props.theme.colors.borderColor;
   }, function (props) {
     return props.theme.colors.borderColor;
   });
 
   function _templateObject5() {
-    var data = _taggedTemplateLiteral(["\n  display: flex;\n\n  #add-icon {\n    margin-bottom: 1.5rem;\n  }\n"]);
+    var data = _taggedTemplateLiteral(["\n  display: flex;\n\n  #add-icon {\n    margin-bottom: 1.5rem;\n\n    svg {\n      width: 15px;\n    }\n  }\n"]);
 
     _templateObject5 = function _templateObject5() {
       return data;
@@ -10188,7 +10173,7 @@
   }
 
   function _templateObject4$1() {
-    var data = _taggedTemplateLiteral(["\n  font-weight: bold;\n  color: ", ";\n  border: 1px solid ", ";\n  padding: ", ";\n  margin-bottom: ", ";\n  width: 95%;\n  font-size: 17px;\n"]);
+    var data = _taggedTemplateLiteral(["\n  font-weight: bold;\n  color: ", ";\n  border: 1px solid ", ";\n  padding-top: ", ";\n  margin-bottom: ", ";\n  padding-left: 1.5rem;\n  width: 95%;\n  font-size: 17px;\n"]);
 
     _templateObject4$1 = function _templateObject4() {
       return data;
@@ -10217,17 +10202,17 @@
     return data;
   }
 
-  function _templateObject$B() {
+  function _templateObject$A() {
     var data = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n  border: 1px solid ", ";\n  padding: ", ";\n"]);
 
-    _templateObject$B = function _templateObject() {
+    _templateObject$A = function _templateObject() {
       return data;
     };
 
     return data;
   }
   var UNISEX = genders.UNISEX;
-  var AddInterestContainer = styled__default.div(_templateObject$B(), function (props) {
+  var AddInterestContainer = styled__default.div(_templateObject$A(), function (props) {
     return props.theme.marginPaddings[6];
   }, function (props) {
     return props.theme.colors.borderColor;
@@ -10251,7 +10236,7 @@
   }, function (props) {
     return props.theme.colors.borderColor;
   }, function (props) {
-    return props.theme.marginPaddings[1];
+    return props.theme.marginPaddings[0];
   }, function (props) {
     return props.theme.marginPaddings[2];
   });
@@ -10569,7 +10554,7 @@
   });
 
   function _templateObject4$2() {
-    var data = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  width: 95%;\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\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"]);
+    var data = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  width: 95%;\n  border: 1px solid ", ";\n  padding: 0.5em;\n  margin-bottom: ", ";\n\n  .interest-item__container_heading {\n    color: ", ";\n    flex-basis: calc(100% / 6);\n    margin-left: ", ";\n    margin-top: 0.3rem;\n\n    @media (max-width: ", ") {\n      display: inline;\n    }\n  }\n\n  .list-items {\n    display: inline-flex;\n    flex-direction: column;\n\n    @media (max-width: ", ") {\n      margin-left: ", ";\n    }\n  }\n\n  @media (max-width: ", ") {\n    flex-direction: column;\n  }\n"]);
 
     _templateObject4$2 = function _templateObject4() {
       return data;
@@ -10598,10 +10583,10 @@
     return data;
   }
 
-  function _templateObject$C() {
+  function _templateObject$B() {
     var data = _taggedTemplateLiteral(["\n  @media (max-width: ", ") {\n    display: none;\n  }\n"]);
 
-    _templateObject$C = function _templateObject() {
+    _templateObject$B = function _templateObject() {
       return data;
     };
 
@@ -10734,7 +10719,7 @@
     return InterestItem;
   }(React__default.Component);
 
-  var SheoSizeContentDiv = styled__default.div(_templateObject$C(), media.xs);
+  var SheoSizeContentDiv = styled__default.div(_templateObject$B(), media.xs);
   var InterestItemTitle = styled__default.div(_templateObject2$8(), media.xs);
   var InterestItemContainer = styled__default.div(_templateObject3$3());
   var InterestItemContent = styled__default.div(_templateObject4$2(), function (props) {
@@ -10758,16 +10743,16 @@
     return React__default.createElement(ThemedInterestItem, props);
   });
 
-  function _templateObject$D() {
+  function _templateObject$C() {
     var data = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n\n  .heading-title-section {\n    display: flex;\n    justify-content: space-between;\n    width: 95%;\n    padding: ", ";\n  }\n\n  .heading-title {\n    color: ", ";\n    font-weight: bold;\n    flex-basis: calc(100% / 6);\n    margin-left: ", ";\n    padding-bottom: 0;\n  }\n\n  .heading-title-empty {\n    flex-basis: 5%;\n    margin-left: 1rem;\n  }\n\n  @media (max-width: ", ") {\n    display: none;\n  }\n"]);
 
-    _templateObject$D = function _templateObject() {
+    _templateObject$C = function _templateObject() {
       return data;
     };
 
     return data;
   }
-  var MyInterestTitleHeadingContainer = styled__default.div(_templateObject$D(), function (props) {
+  var MyInterestTitleHeadingContainer = styled__default.div(_templateObject$C(), function (props) {
     return props.theme.marginPaddings[0];
   }, function (props) {
     return props.theme.colors.primary;
@@ -10797,16 +10782,16 @@
 
   var MyInterestTitleHeading$1 = themed(MyInterestTitleHeading);
 
-  function _templateObject$E() {
+  function _templateObject$D() {
     var data = _taggedTemplateLiteral(["\n  svg {\n    path {\n      fill: ", ";\n    }\n  }\n"]);
 
-    _templateObject$E = function _templateObject() {
+    _templateObject$D = function _templateObject() {
       return data;
     };
 
     return data;
   }
-  var SvgWrapper$2 = styled__default.span(_templateObject$E(), function (props) {
+  var SvgWrapper$2 = styled__default.span(_templateObject$D(), function (props) {
     return props.theme.colors.primary;
   });
   var AccountIcon = themed(function () {

package/InterestsSubheading.js

@@ -20,7 +20,7 @@
   }
 
   function _templateObject2() {
-    var data = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  border-bottom: 1px solid ", ";\n  margin-bottom: ", ";\n  margin-top: ", ";\n"]);
+    var data = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: ", ";\n  border-bottom: 1px solid ", ";\n  margin-bottom: ", ";\n  margin-top: ", ";\n  width: 100%;\n  align-items: center;\n"]);
 
     _templateObject2 = function _templateObject2() {
       return data;
@@ -30,7 +30,7 @@
   }
 
   function _templateObject() {
-    var data = _taggedTemplateLiteral(["\n  font-size: ", ";\n  font-weight: bold;\n  margin-bottom: ", ";\n  text-transform: uppercase;\n"]);
+    var data = _taggedTemplateLiteral(["\n  font-size: ", ";\n  font-weight: bold;\n  margin-bottom: 0;\n  text-transform: uppercase;\n"]);
 
     _templateObject = function _templateObject() {
       return data;
@@ -40,10 +40,10 @@
   }
   var Title = styled.h1(_templateObject(), function (props) {
     return props.theme.fontSizes[2];
-  }, function (props) {
-    return props.theme.marginPaddings[2];
   });
   var InterestsSubheadingContainer = styled.div(_templateObject2(), function (props) {
+    return props.theme.marginPaddings[1];
+  }, function (props) {
     return props.theme.colors.primary;
   }, function (props) {
     return props.theme.marginPaddings[3];

package/LuxityGraphQLMultiselector.js

@@ -453,7 +453,7 @@
   };
 
   function _templateObject2$1() {
-    var data = _taggedTemplateLiteral(["\n  .multiselector__selected-items,\n  .multiselector__selectable-items {\n    display: flex;\n    flex-flow: wrap;\n    margin-left: calc(-1 * ", ");\n    button {\n      &:hover {\n        color: ", ";\n        background-color: ", ";\n      }\n      border-color: ", ";\n      background-color: ", ";\n      color: ", ";\n      padding: ", ";\n      text-transform: none;\n      box-sizing: border-box;\n      animation: ", " ease-in-out\n        ", " forwards;\n      flex-basis: calc(33.33% - ", ");\n      margin-bottom: ", ";\n      margin-left: ", ";\n      text-overflow: ellipsis;\n      overflow-x: hidden;\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"]);
+    var data = _taggedTemplateLiteral(["\n  .multiselector__selected-items,\n  .multiselector__selectable-items {\n    display: flex;\n    flex-flow: wrap;\n    margin-left: calc(-1 * ", ");\n    button {\n      &:hover {\n        color: ", ";\n        background-color: ", ";\n      }\n      border-color: ", ";\n      background-color: ", ";\n      color: ", ";\n      padding: ", ";\n      text-transform: none;\n      box-sizing: border-box;\n      animation: ", " ease-in-out\n        ", " forwards;\n      flex-basis: calc(25% - ", ");\n      margin-bottom: ", ";\n      margin-left: ", ";\n      text-overflow: ellipsis;\n      overflow-x: hidden;\n      min-height: 40px;\n\n      @media (max-width: ", ") {\n        flex-basis: calc(50% - ", ");\n      }\n    }\n  }\n\n  .multiselector__footer {\n    display: flex;\n    justify-content: center;\n    button {\n      &:hover {\n        color: ", ";\n        background-color: ", ";\n      }\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"]);
 
     _templateObject2$1 = function _templateObject2() {
       return data;
@@ -715,7 +715,7 @@
   });
 
   function _templateObject2$2() {
-    var data = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  border-bottom: 1px solid ", ";\n  margin-bottom: ", ";\n  margin-top: ", ";\n"]);
+    var data = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: ", ";\n  border-bottom: 1px solid ", ";\n  margin-bottom: ", ";\n  margin-top: ", ";\n  width: 100%;\n  align-items: center;\n"]);
 
     _templateObject2$2 = function _templateObject2() {
       return data;
@@ -725,7 +725,7 @@
   }
 
   function _templateObject$4() {
-    var data = _taggedTemplateLiteral(["\n  font-size: ", ";\n  font-weight: bold;\n  margin-bottom: ", ";\n  text-transform: uppercase;\n"]);
+    var data = _taggedTemplateLiteral(["\n  font-size: ", ";\n  font-weight: bold;\n  margin-bottom: 0;\n  text-transform: uppercase;\n"]);
 
     _templateObject$4 = function _templateObject() {
       return data;
@@ -735,10 +735,10 @@
   }
   var Title = styled__default.h1(_templateObject$4(), function (props) {
     return props.theme.fontSizes[2];
-  }, function (props) {
-    return props.theme.marginPaddings[2];
   });
   var InterestsSubheadingContainer = styled__default.div(_templateObject2$2(), function (props) {
+    return props.theme.marginPaddings[1];
+  }, function (props) {
     return props.theme.colors.primary;
   }, function (props) {
     return props.theme.marginPaddings[3];
@@ -756,7 +756,7 @@
   };
 
   function _templateObject$5() {
-    var data = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n  font-weight: bold;\n  display: flex;\n  align-items: center;\n  font-size: ", ";\n\n  .title__search,\n  .title__search {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    svg {\n      margin-left: ", ";\n      fill: ", ";\n      stroke: ", ";\n    }\n\n    input {\n      width: 140px;\n      border: solid 1px transparent;\n      font-size: ", ";\n      transition: 0.2s border-color ease-in-out;\n      margin-left: ", ";\n      padding: 0 ", " 0\n        ", " 0;\n\n      :focus {\n        border-color: ", ";\n        border-bottom: none;\n      }\n    }\n  }\n"]);
+    var data = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n  font-weight: bold;\n  display: flex;\n  align-items: center;\n  font-size: ", ";\n\n  .title__search,\n  .title__search {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    min-height: 30px;\n    margin-bottom: ", ";\n\n    svg {\n      margin-left: ", ";\n      fill: ", ";\n      stroke: ", ";\n    }\n\n    input {\n      width: 140px;\n      border: none;\n      font-size: ", ";\n      transition: 0.2s border-color ease-in-out;\n      margin-left: ", ";\n      padding: 0;\n\n      :focus {\n        border-color: ", ";\n        border-bottom: none;\n      }\n    }\n  }\n"]);
 
     _templateObject$5 = function _templateObject() {
       return data;
@@ -788,6 +788,8 @@
     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) {
@@ -798,10 +800,6 @@
     return props.theme.fontSizes[2];
   }, function (props) {
     return props.theme.marginPaddings[0];
-  }, function (props) {
-    return props.theme.marginPaddings[0];
-  }, function (props) {
-    return props.theme.marginPaddings[0];
   }, function (props) {
     return props.theme.colors.primary;
   });

package/PriceRangeSelector.js

@@ -1332,7 +1332,7 @@
   var SecondaryButton$1 = themed(SecondaryButton);
 
   function _templateObject2$2() {
-    var data = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  border-bottom: 1px solid ", ";\n  margin-bottom: ", ";\n  margin-top: ", ";\n"]);
+    var data = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: ", ";\n  border-bottom: 1px solid ", ";\n  margin-bottom: ", ";\n  margin-top: ", ";\n  width: 100%;\n  align-items: center;\n"]);
 
     _templateObject2$2 = function _templateObject2() {
       return data;
@@ -1342,7 +1342,7 @@
   }
 
   function _templateObject$7() {
-    var data = _taggedTemplateLiteral(["\n  font-size: ", ";\n  font-weight: bold;\n  margin-bottom: ", ";\n  text-transform: uppercase;\n"]);
+    var data = _taggedTemplateLiteral(["\n  font-size: ", ";\n  font-weight: bold;\n  margin-bottom: 0;\n  text-transform: uppercase;\n"]);
 
     _templateObject$7 = function _templateObject() {
       return data;
@@ -1352,10 +1352,10 @@
   }
   var Title = styled__default.h1(_templateObject$7(), function (props) {
     return props.theme.fontSizes[2];
-  }, function (props) {
-    return props.theme.marginPaddings[2];
   });
   var InterestsSubheadingContainer = styled__default.div(_templateObject2$2(), function (props) {
+    return props.theme.marginPaddings[1];
+  }, function (props) {
     return props.theme.colors.primary;
   }, function (props) {
     return props.theme.marginPaddings[3];