@bonlineza/luxity-lib 2.7.2 → 2.7.3

package/AddInterest.js

@@ -853,7 +853,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;
@@ -1115,7 +1115,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;
@@ -1125,7 +1125,7 @@
   }
 
   function _templateObject$9() {
-    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$9 = function _templateObject() {
       return data;
@@ -1135,10 +1135,10 @@
   }
   var Title = styled__default.h1(_templateObject$9(), 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];
@@ -1156,7 +1156,7 @@
   };
 
   function _templateObject$a() {
-    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$a = function _templateObject() {
       return data;
@@ -1188,6 +1188,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) {
@@ -1198,10 +1200,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;
   });
@@ -2557,7 +2555,7 @@
   };
 
   function _templateObject$i() {
-    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$i = function _templateObject() {
       return data;
@@ -2565,124 +2563,109 @@
 
     return data;
   }
-  var SliderTitle = styled__default.div(_templateObject$i(), function (props) {
-    return props.theme.fontSizes[2];
-  }, function (props) {
-    return props.theme.marginPaddings[3];
-  });
+  var RadioButtonsContainer = styled__default.div(_templateObject$i());
 
   function _templateObject$j() {
-    var data = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"]);
-
-    _templateObject$j = function _templateObject() {
-      return data;
-    };
-
-    return data;
-  }
-  var RadioButtonsContainer = styled__default.div(_templateObject$j());
-
-  function _templateObject$k() {
     var data = _taggedTemplateLiteral(["\n  display: flex;\n  flex-grow: 1;\n  flex-wrap: ", ";\n"]);
 
-    _templateObject$k = function _templateObject() {
+    _templateObject$j = function _templateObject() {
       return data;
     };
 
     return data;
   }
-  var ButtonListWrapper = styled__default.div(_templateObject$k(), function (_ref) {
+  var ButtonListWrapper = styled__default.div(_templateObject$j(), function (_ref) {
     var noWrap = _ref.noWrap;
     return noWrap ? 'nowrap' : 'wrap';
   });
 
-  function _templateObject$l() {
+  function _templateObject$k() {
     var data = _taggedTemplateLiteral(["\n  font-weight: bold;\n  color: ", ";\n  flex-basis: 40%;\n"]);
 
-    _templateObject$l = function _templateObject() {
+    _templateObject$k = function _templateObject() {
       return data;
     };
 
     return data;
   }
-  var Title$3 = styled__default.div(_templateObject$l(), function (props) {
+  var Title$3 = styled__default.div(_templateObject$k(), function (props) {
     return props.theme.colors.base;
   });
 
-  function _templateObject$m() {
+  function _templateObject$l() {
     var data = _taggedTemplateLiteral(["\n  display: flex;\n  margin-bottom: ", ";\n  margin-right: ", ";\n"]);
 
-    _templateObject$m = function _templateObject() {
+    _templateObject$l = function _templateObject() {
       return data;
     };
 
     return data;
   }
-  var RadioButtonLabel = styled__default.label(_templateObject$m(), function (props) {
+  var RadioButtonLabel = styled__default.label(_templateObject$l(), function (props) {
     return props.theme.marginPaddings[0];
   }, function (props) {
     return props.theme.marginPaddings[0];
   });
 
-  function _templateObject$n() {
+  function _templateObject$m() {
     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$n = function _templateObject() {
+    _templateObject$m = function _templateObject() {
       return data;
     };
 
     return data;
   }
-  var RadioButtonCircle = styled__default.div(_templateObject$n(), function (props) {
+  var RadioButtonCircle = styled__default.div(_templateObject$m(), function (props) {
     return props.theme.colors.base;
   });
 
-  function _templateObject$o() {
+  function _templateObject$n() {
     var data = _taggedTemplateLiteral(["\n  height: 8px;\n  width: 8px;\n  border-radius: 50%;\n  margin: auto;\n"]);
 
-    _templateObject$o = function _templateObject() {
+    _templateObject$n = function _templateObject() {
       return data;
     };
 
     return data;
   }
-  var RadioButtonCircleInner = styled__default.div(_templateObject$o());
+  var RadioButtonCircleInner = styled__default.div(_templateObject$n());
 
-  function _templateObject$p() {
+  function _templateObject$o() {
     var data = _taggedTemplateLiteral(["\n  display: none;\n  :checked ~ ", " {\n    ", " {\n      background-color: ", ";\n    }\n  }\n"]);
 
-    _templateObject$p = function _templateObject() {
+    _templateObject$o = function _templateObject() {
       return data;
     };
 
     return data;
   }
-  var RadioButtonInput = styled__default.input(_templateObject$p(), RadioButtonCircle, RadioButtonCircleInner, function (props) {
+  var RadioButtonInput = styled__default.input(_templateObject$o(), RadioButtonCircle, RadioButtonCircleInner, function (props) {
     return props.theme.colors.base;
   });
 
-  function _templateObject$q() {
+  function _templateObject$p() {
     var data = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"]);
 
-    _templateObject$q = function _templateObject() {
+    _templateObject$p = function _templateObject() {
       return data;
     };
 
     return data;
   }
-  var RadioButtonText = styled__default.div(_templateObject$q());
+  var RadioButtonText = styled__default.div(_templateObject$p());
 
-  function _templateObject$r() {
+  function _templateObject$q() {
     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$r = function _templateObject() {
+    _templateObject$q = function _templateObject() {
       return data;
     };
 
     return data;
   }
   var inputMarginRight = '0.2em';
-  var CheckboxLabel = styled__default.label(_templateObject$r(), function (props) {
+  var CheckboxLabel = styled__default.label(_templateObject$q(), 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';
@@ -2779,18 +2762,18 @@
     return data;
   }
 
-  function _templateObject$s() {
-    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$r() {
+    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$s = function _templateObject() {
+    _templateObject$r = function _templateObject() {
       return data;
     };
 
     return data;
   }
-  var TitleWrapper = styled__default.div(_templateObject$s(), function (props) {
+  var TitleWrapper = styled__default.div(_templateObject$r(), 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;
@@ -2906,7 +2889,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,
@@ -2961,16 +2946,16 @@
     inputMode: 'numeric'
   };
 
-  function _templateObject$t() {
+  function _templateObject$s() {
     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$t = function _templateObject() {
+    _templateObject$s = function _templateObject() {
       return data;
     };
 
     return data;
   }
-  var Button$4 = styled__default.button(_templateObject$t(), baseButtonStyle, function (props) {
+  var Button$4 = styled__default.button(_templateObject$s(), baseButtonStyle, function (props) {
     return props.theme.colors.ntrlMin;
   }, function (props) {
     return props.theme.colors.primary;
@@ -2993,16 +2978,16 @@
 
   var SecondaryButton$1 = themed(SecondaryButton);
 
-  function _templateObject$u() {
+  function _templateObject$t() {
     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$u = function _templateObject() {
+    _templateObject$t = function _templateObject() {
       return data;
     };
 
     return data;
   }
-  var CurrencyInputWrapper = styled__default.div(_templateObject$u(), function (props) {
+  var CurrencyInputWrapper = styled__default.div(_templateObject$t(), function (props) {
     return props.theme.colors.primary;
   });
 
@@ -3133,16 +3118,16 @@
     Notifications.notify.show(message, 'error', defaultNotifyTime);
   };
 
-  function _templateObject$v() {
+  function _templateObject$u() {
     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$v = function _templateObject() {
+    _templateObject$u = function _templateObject() {
       return data;
     };
 
     return data;
   }
-  var SelectionWrapper = styled__default.div(_templateObject$v(), function (props) {
+  var SelectionWrapper = styled__default.div(_templateObject$u(), function (props) {
     return props.theme.marginPaddings[2];
   }, function (props) {
     return props.theme.marginPaddings[2];
@@ -3176,16 +3161,16 @@
     return data;
   }
 
-  function _templateObject$w() {
+  function _templateObject$v() {
     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$w = function _templateObject() {
+    _templateObject$v = function _templateObject() {
       return data;
     };
 
     return data;
   }
-  var Content = styled__default.div(_templateObject$w(), function (props) {
+  var Content = styled__default.div(_templateObject$v(), function (props) {
     return props.theme.colors.primary;
   }, function (props) {
     return props.theme.marginPaddings[0];
@@ -3350,34 +3335,34 @@
     }));
   });
 
-  function _templateObject$x() {
-    var data = _taggedTemplateLiteral(["\n  padding: 1rem;\n  svg {\n    width: 23px;\n    height: auto;\n  }\n"]);
+  function _templateObject$w() {
+    var data = _taggedTemplateLiteral(["\n  padding: 1rem;\n  display: flex;\n  svg {\n    width: 23px;\n    height: auto;\n  }\n"]);
 
-    _templateObject$x = function _templateObject() {
+    _templateObject$w = function _templateObject() {
       return data;
     };
 
     return data;
   }
-  var SvgWrapper$1 = styled__default.span(_templateObject$x());
+  var SvgWrapper$1 = styled__default.span(_templateObject$w());
 
-  function _templateObject$y() {
+  function _templateObject$x() {
     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$y = function _templateObject() {
+    _templateObject$x = function _templateObject() {
       return data;
     };
 
     return data;
   }
-  var IconWrapper = styled__default.div(_templateObject$y(), function (props) {
+  var IconWrapper = styled__default.div(_templateObject$x(), 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;
@@ -3387,7 +3372,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;
@@ -3416,17 +3401,17 @@
     return data;
   }
 
-  function _templateObject$z() {
+  function _templateObject$y() {
     var data = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n  border: 1px solid ", ";\n  padding: ", ";\n"]);
 
-    _templateObject$z = function _templateObject() {
+    _templateObject$y = function _templateObject() {
       return data;
     };
 
     return data;
   }
   var UNISEX = genders.UNISEX;
-  var AddInterestContainer = styled__default.div(_templateObject$z(), function (props) {
+  var AddInterestContainer = styled__default.div(_templateObject$y(), function (props) {
     return props.theme.marginPaddings[6];
   }, function (props) {
     return props.theme.colors.borderColor;
@@ -3450,7 +3435,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];
   });

package/BrandSelector.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/CHANGELOG.md

@@ -1,8 +1,9 @@
 
 ## Changelog
 
-### 2.7.2
-- Dont show `MyInterestTitleHeading` if dont have interest items
+### 2.7.3
+- Fix container alignment of `AddInterest` and `InterestItem` so they match
+- Center alignment trash icon in `InterestItem` 
 ### 2.7.1
 - Change svg colors from pink to black
 ### 2.7.0 

package/GenderSelector.js

@@ -130,7 +130,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;
@@ -140,7 +140,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;
@@ -150,10 +150,10 @@
   }
   var Title = styled__default.h1(_templateObject(), function (props) {
     return props.theme.fontSizes[2];
-  }, function (props) {
-    return props.theme.marginPaddings[2];
   });
   var InterestsSubheadingContainer = styled__default.div(_templateObject2(), function (props) {
+    return props.theme.marginPaddings[1];
+  }, function (props) {
     return props.theme.colors.primary;
   }, function (props) {
     return props.theme.marginPaddings[3];

package/GraphQLMultiSelector.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;

package/InterestItem.js

@@ -271,7 +271,7 @@
   });
 
   function _templateObject() {
-    var data = _taggedTemplateLiteral(["\n  padding: 1rem;\n  svg {\n    width: 23px;\n    height: auto;\n  }\n"]);
+    var data = _taggedTemplateLiteral(["\n  padding: 1rem;\n  display: flex;\n  svg {\n    width: 23px;\n    height: auto;\n  }\n"]);
 
     _templateObject = function _templateObject() {
       return data;
@@ -334,7 +334,7 @@
   };
 
   function _templateObject4() {
-    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 = function _templateObject4() {
       return data;