@bonlineza/luxity-lib 2.30.1 → 2.30.3

package/build/bundle.js

@@ -9406,6 +9406,122 @@
     category: ''
   };
 
+  var _templateObject$C;
+  var ShoeSizeInputWrapper = styled__default.div(_templateObject$C || (_templateObject$C = _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: 49%;\n    border: 1px solid ", ";\n    border-radius: 6px;\n    background-color: ", ";\n    padding: 10px;\n  }\n\n  @media (max-width: ", ") {\n    flex-direction: column;\n    input[data-qe-id='masked-input-min'] {\n      margin-bottom: 10px;\n    }\n    input[data-qe-id='masked-input-min'],\n    input[data-qe-id='masked-input-max'] {\n      flex-basis: 100%;\n    }\n  }\n"])), function (props) {
+    return props.theme.rareStepColors.primary;
+  }, function (props) {
+    return props.theme.rareStepColors.ntrl40;
+  }, media.xs);
+
+  var debounceBuilder$2 = functions.debounced(50);
+  var shoeSizeType = {
+    Uk: 'Uk',
+    Eu: 'Eu',
+    Us: 'Us'
+  };
+
+  var getMaxShoeSize = function getMaxShoeSize(euShoeSizes, ukShoeSizes, type) {
+    var shoeSizes = ukShoeSizes;
+
+    if (type === (shoeSizeType === null || shoeSizeType === void 0 ? void 0 : shoeSizeType.Eu)) {
+      shoeSizes = euShoeSizes;
+    }
+
+    var sizes = shoeSizes.map(function (item) {
+      return parseFloat(item.size);
+    }); // Use the Math.max function to find the maximum size value
+
+    var maxSize = sizes.reduce(function (max, current) {
+      return Math.max(max, current);
+    }, -50);
+    return maxSize;
+  };
+  /** UI Slider with minimum and max input fields give the ability to
+   * select a shoe size range */
+
+
+  var ShoeSizeRangeSelector = function ShoeSizeRangeSelector(_ref) {
+    var onChange = _ref.onChange,
+        euShoeSizes = _ref.euShoeSizes,
+        ukShoeSizes = _ref.ukShoeSizes,
+        sizeType = _ref.sizeType;
+    var maxShoeSize = getMaxShoeSize(euShoeSizes, ukShoeSizes, sizeType);
+
+    var handleSlideChange = function handleSlideChange(value) {
+      var min_shoe_size = value.min,
+          max_shoe_size = value.max;
+      onChange({
+        min_shoe_size: min_shoe_size,
+        max_shoe_size: max_shoe_size
+      });
+    };
+
+    var handleMinShoeSizeChange = function handleMinShoeSizeChange(targetValue, currMaxVal, manuallyChangeMinValue) {
+      var value = parseInt(targetValue, 10);
+      value = Number.isNaN(value) ? 0 : value;
+      value = value > currMaxVal ? currMaxVal : value;
+      debounceBuilder$2(function () {
+        manuallyChangeMinValue(value);
+        onChange({
+          min_shoe_size: value,
+          max_shoe_size: currMaxVal
+        });
+      });
+    };
+
+    var handleMaxShoeSizeChange = function handleMaxShoeSizeChange(targetValue, currMinVal, manuallyChangeMaxValue) {
+      var value = parseInt(targetValue, 10);
+      value = Number.isNaN(value) ? 0 : value;
+      value = value < currMinVal ? currMinVal : value;
+      debounceBuilder$2(function () {
+        manuallyChangeMaxValue(value);
+        onChange({
+          max_shoe_size: value,
+          min_shoe_size: currMinVal
+        });
+      });
+    };
+
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "shoe-size-ranges"
+    }, /*#__PURE__*/React__default.createElement(RangeSlider$1, {
+      identifier: "shoe-size-range-slider",
+      max: maxShoeSize,
+      defaultMinValue: 1,
+      min: 1,
+      onChange: handleSlideChange,
+      defaultMaxValue: maxShoeSize,
+      title: "Shoe Size Ranges"
+    }, function (_ref2) {
+      var manuallyChangeMinValue = _ref2.manuallyChangeMinValue,
+          manuallyChangeMaxValue = _ref2.manuallyChangeMaxValue,
+          currMinVal = _ref2.currMinVal,
+          currMaxVal = _ref2.currMaxVal;
+      return /*#__PURE__*/React__default.createElement(ShoeSizeInputWrapper, null, /*#__PURE__*/React__default.createElement("input", {
+        "data-qe-id": "masked-input-min",
+        value: currMinVal,
+        onChange: function onChange(value) {
+          handleMinShoeSizeChange(value, currMaxVal, manuallyChangeMinValue);
+        }
+      }), /*#__PURE__*/React__default.createElement("input", {
+        "data-qe-id": "masked-input-max",
+        value: currMaxVal,
+        onChange: function onChange(value) {
+          handleMaxShoeSizeChange(value, currMinVal, manuallyChangeMaxValue);
+        }
+      }));
+    }));
+  };
+
+  ShoeSizeRangeSelector.defaultProps = {
+    onChange: function onChange() {
+      return false;
+    },
+    euShoeSizes: [],
+    ukShoeSizes: [],
+    sizeType: 'Uk'
+  };
+
   var getMaxSizeIndex = function getMaxSizeIndex() {
     var shoe_sizes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
     return shoe_sizes.length - 1;
@@ -9523,8 +9639,8 @@
     showMessageOnError: true
   };
 
-  var _templateObject$C;
-  var StyledHeader = styled__default.h5(_templateObject$C || (_templateObject$C = _taggedTemplateLiteral(["\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n\n  @media (max-width: ", ") {\n    display: block;\n  }\n\n  .icon-header__left {\n    display: flex;\n    flex-flow: row nowrap;\n    align-items: center;\n\n    @media (max-width: ", ") {\n      align-self: flex-start;\n    }\n\n    svg {\n      height: 1.5em;\n      width: 1.5em;\n      margin-right: ", ";\n    }\n  }\n\n  .icon-header__right {\n    display: flex;\n    flex-grow: 1;\n    justify-content: flex-end;\n  }\n"])), media.sm, media.sm, function (props) {
+  var _templateObject$D;
+  var StyledHeader = styled__default.h5(_templateObject$D || (_templateObject$D = _taggedTemplateLiteral(["\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n\n  @media (max-width: ", ") {\n    display: block;\n  }\n\n  .icon-header__left {\n    display: flex;\n    flex-flow: row nowrap;\n    align-items: center;\n\n    @media (max-width: ", ") {\n      align-self: flex-start;\n    }\n\n    svg {\n      height: 1.5em;\n      width: 1.5em;\n      margin-right: ", ";\n    }\n  }\n\n  .icon-header__right {\n    display: flex;\n    flex-grow: 1;\n    justify-content: flex-end;\n  }\n"])), media.sm, media.sm, function (props) {
     return props.theme.marginPaddings[1];
   });
 
@@ -9570,8 +9686,8 @@
     }));
   });
 
-  var _templateObject$D;
-  var NotifyContainer = styled__default.div(_templateObject$D || (_templateObject$D = _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$E;
+  var NotifyContainer = styled__default.div(_templateObject$E || (_templateObject$E = _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;
@@ -9709,14 +9825,14 @@
 
   var NotificationDropDown$1 = themed(NotificationDropDown);
 
-  var _templateObject$E, _templateObject2$6;
+  var _templateObject$F, _templateObject2$6;
   var ALL_ITEM = {
     id: 'ALL',
     name: 'ALL'
   };
   var multiSelectorItemMaxHeight = '3rem';
   var multiSelectorItemAnimationDuration = '300ms';
-  var multiselectorItemFadeIn = styled.keyframes(_templateObject$E || (_templateObject$E = _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 multiselectorItemFadeIn = styled.keyframes(_templateObject$F || (_templateObject$F = _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$6 || (_templateObject2$6 = _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) {
@@ -9954,7 +10070,7 @@
     }));
   });
 
-  var _templateObject$F;
+  var _templateObject$G;
 
   var Title$3 = function Title(_ref) {
     var baseClass = _ref.baseClass,
@@ -9975,7 +10091,7 @@
     })));
   };
 
-  var StyledTitle = styled__default(Title$3)(_templateObject$F || (_templateObject$F = _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$3)(_templateObject$G || (_templateObject$G = _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];
@@ -9996,7 +10112,7 @@
   });
   var Title$4 = themed(StyledTitle);
 
-  var debounceBuilder$2 = functions.debounced(200);
+  var debounceBuilder$3 = functions.debounced(200);
 
   /**
    * Luxity flavoured GraphQLMultiselector with text Search, category and limit controls
@@ -10030,7 +10146,7 @@
       _defineProperty(_assertThisInitialized(_this), "onSearchChanged", function (event) {
         event.preventDefault();
         var searchText = event.target.value;
-        debounceBuilder$2(function () {
+        debounceBuilder$3(function () {
           _this.setState({
             nameFilter: searchText
           });
@@ -10115,8 +10231,8 @@
     baseQueryLimit: 12
   };
 
-  var _templateObject$G;
-  var BaseButton = styled__default.button(_templateObject$G || (_templateObject$G = _taggedTemplateLiteral(["\n  color: ", ";\n  border: 1px solid ", ";\n  background-color: ", ";\n  &:hover {\n    color: ", ";\n    background-color: ", ";\n  }\n"])), function (props) {
+  var _templateObject$H;
+  var BaseButton = styled__default.button(_templateObject$H || (_templateObject$H = _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;
@@ -10217,8 +10333,8 @@
     }
   };
 
-  var _templateObject$H, _templateObject2$7;
-  var TitleWrapper = styled__default.div(_templateObject$H || (_templateObject$H = _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$I, _templateObject2$7;
+  var TitleWrapper = styled__default.div(_templateObject$I || (_templateObject$I = _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;
@@ -10356,8 +10472,8 @@
     }
   };
 
-  var _templateObject$I;
-  var SelectionWrapper = styled__default.div(_templateObject$I || (_templateObject$I = _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$J;
+  var SelectionWrapper = styled__default.div(_templateObject$J || (_templateObject$J = _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];
@@ -10373,8 +10489,8 @@
 
   var _excluded$7 = ["title", "checked", "renderIcon", "onChange", "checkedValue", "unCheckedValue"];
 
-  var _templateObject$J, _templateObject2$8, _templateObject3$3;
-  var Content = styled__default.div(_templateObject$J || (_templateObject$J = _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$K, _templateObject2$8, _templateObject3$3;
+  var Content = styled__default.div(_templateObject$K || (_templateObject$K = _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];
@@ -10539,9 +10655,9 @@
     }));
   });
 
-  var _templateObject$K, _templateObject2$9, _templateObject3$4, _templateObject4$3, _templateObject5$1;
+  var _templateObject$L, _templateObject2$9, _templateObject3$4, _templateObject4$3, _templateObject5$1;
   var UNISEX$1 = genders.UNISEX;
-  var AddInterestContainer = styled__default.div(_templateObject$K || (_templateObject$K = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n  border: 1px solid ", ";\n  padding: ", ";\n"])), function (props) {
+  var AddInterestContainer = styled__default.div(_templateObject$L || (_templateObject$L = _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;
@@ -10829,8 +10945,8 @@
 
   var AddInterest$1 = themed(AddInterest);
 
-  var _templateObject$L;
-  var MyInterestTitleHeadingContainer = styled__default.div(_templateObject$L || (_templateObject$L = _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$M;
+  var MyInterestTitleHeadingContainer = styled__default.div(_templateObject$M || (_templateObject$M = _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;
@@ -10860,8 +10976,8 @@
 
   var MyInterestTitleHeading$1 = themed(MyInterestTitleHeading);
 
-  var _templateObject$M;
-  var SvgWrapper$2 = styled__default.span(_templateObject$M || (_templateObject$M = _taggedTemplateLiteral(["\n  svg {\n    path {\n      fill: ", ";\n    }\n  }\n"])), function (props) {
+  var _templateObject$N;
+  var SvgWrapper$2 = styled__default.span(_templateObject$N || (_templateObject$N = _taggedTemplateLiteral(["\n  svg {\n    path {\n      fill: ", ";\n    }\n  }\n"])), function (props) {
     return props.theme.colors.primary;
   });
   var AccountIcon = themed(function () {
@@ -11007,8 +11123,8 @@
     defaultShoeSizeType: shoeSizeTypes.eu.value
   };
 
-  var _templateObject$N, _templateObject2$a, _templateObject3$5, _templateObject4$4, _templateObject5$2, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30;
-  var HeaderWrapper = styled__default.div(_templateObject$N || (_templateObject$N = _taggedTemplateLiteral(["\n   {\n    display: inline-block;\n    background-color: ", ";\n    position: relative;\n    width: 100%;\n\n    .header__search-container,\n    .header__search-input {\n      background-color: ", ";\n    }\n\n    .header__search-container {\n      max-width: ", ";\n      margin: 0 auto;\n      padding: ", " 5%;\n    }\n  }\n"])), function (props) {
+  var _templateObject$O, _templateObject2$a, _templateObject3$5, _templateObject4$4, _templateObject5$2, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30;
+  var HeaderWrapper = styled__default.div(_templateObject$O || (_templateObject$O = _taggedTemplateLiteral(["\n   {\n    display: inline-block;\n    background-color: ", ";\n    position: relative;\n    width: 100%;\n\n    .header__search-container,\n    .header__search-input {\n      background-color: ", ";\n    }\n\n    .header__search-container {\n      max-width: ", ";\n      margin: 0 auto;\n      padding: ", " 5%;\n    }\n  }\n"])), function (props) {
     return props.theme.rareStepColors.ntrlMin;
   }, function (props) {
     return props.theme.rareStepColors.primary;
@@ -11072,12 +11188,12 @@
     return props.theme.rareStepFontSize.h5;
   });
   var DropdownBrands = styled__default.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    flex-direction: column;\n    width: 20%;\n  }\n"])));
-  var DropdownModels = styled__default.ul(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n   {\n    padding: 0 ", ";\n    border-right: 1px solid ", ";\n    width: 50%;\n    column-count: 3;\n  }\n"])), function (props) {
+  var DropdownLinks = styled__default.ul(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n   {\n    padding: 0 ", ";\n    border-right: 1px solid ", ";\n    width: 50%;\n    column-count: 3;\n  }\n"])), function (props) {
     return props.theme.marginPaddings[3];
   }, function (props) {
     return props.theme.rareStepColors.ntrl40;
   });
-  var DropdownModelsList = styled__default.li(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n   {\n    list-style: none;\n  }\n"])));
+  var DropdownLinksList = styled__default.li(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n   {\n    list-style: none;\n  }\n"])));
   var DropdownFigure = styled__default.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    width: 30%;\n    padding-left: ", ";\n  }\n"])), function (props) {
     return props.theme.marginPaddings[5];
   });
@@ -11186,12 +11302,12 @@
     return /*#__PURE__*/React__default.createElement(Dropdown, {
       onMouseOver: handleShowDropdown,
       onMouseOut: handleHideDropdown
-    }, /*#__PURE__*/React__default.createElement(PageContainer, null, /*#__PURE__*/React__default.createElement(DropdownModels, null, ((currentSelectedItem === null || currentSelectedItem === void 0 ? void 0 : currentSelectedItem.models) || []).map(function (model, index) {
-      return /*#__PURE__*/React__default.createElement(DropdownModelsList, {
+    }, /*#__PURE__*/React__default.createElement(PageContainer, null, /*#__PURE__*/React__default.createElement(DropdownLinks, null, ((currentSelectedItem === null || currentSelectedItem === void 0 ? void 0 : currentSelectedItem.items) || []).map(function (item, index) {
+      return /*#__PURE__*/React__default.createElement(DropdownLinksList, {
         key: index
       }, /*#__PURE__*/React__default.createElement(DropdownLink, {
-        href: model.modelLink
-      }, capitalizeWords(model.modelName)));
+        href: item.itemLink
+      }, capitalizeWords(item.itemName)));
     })), /*#__PURE__*/React__default.createElement(DropdownFigure, null, (currentSelectedItem === null || currentSelectedItem === void 0 ? void 0 : currentSelectedItem.brandImageUrl) && /*#__PURE__*/React__default.createElement(DropdownImage, {
       src: currentSelectedItem === null || currentSelectedItem === void 0 ? void 0 : currentSelectedItem.brandImageUrl
     }))));
@@ -11345,8 +11461,8 @@
 
   var RareStepDesktopHeader$1 = themed(RareStepDesktopHeader);
 
-  var _templateObject$O, _templateObject2$b, _templateObject3$6, _templateObject4$5, _templateObject5$3, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20$1, _templateObject21$1, _templateObject22$1, _templateObject23$1;
-  var HeaderWrapper$1 = styled__default.div(_templateObject$O || (_templateObject$O = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    background-color: ", ";\n    position: relative;\n    width: 100%;\n    justify-content: space-between;\n    align-items: center;\n    padding: ", " 5%;\n  }\n"])), function (props) {
+  var _templateObject$P, _templateObject2$b, _templateObject3$6, _templateObject4$5, _templateObject5$3, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20$1, _templateObject21$1, _templateObject22$1, _templateObject23$1;
+  var HeaderWrapper$1 = styled__default.div(_templateObject$P || (_templateObject$P = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    background-color: ", ";\n    position: relative;\n    width: 100%;\n    justify-content: space-between;\n    align-items: center;\n    padding: ", " 5%;\n  }\n"])), function (props) {
     return props.theme.rareStepColors.ntrlMin;
   }, function (props) {
     return props.theme.marginPaddings[3];
@@ -11697,8 +11813,8 @@
   };
   var index$3 = themed(RareStepHeader);
 
-  var _templateObject$P, _templateObject2$c, _templateObject3$7, _templateObject4$6, _templateObject5$4, _templateObject6$2, _templateObject7$2, _templateObject8$2, _templateObject9$2, _templateObject10$2, _templateObject11$2, _templateObject12$2, _templateObject13$2, _templateObject14$2, _templateObject15$2, _templateObject16$2;
-  var FooterWrapper = styled__default.div(_templateObject$P || (_templateObject$P = _taggedTemplateLiteral(["\n   {\n    background-color: ", ";\n    font-weight: ", ";\n    padding-top: ", ";\n    font-size: ", ";\n  }\n"])), function (props) {
+  var _templateObject$Q, _templateObject2$c, _templateObject3$7, _templateObject4$6, _templateObject5$4, _templateObject6$2, _templateObject7$2, _templateObject8$2, _templateObject9$2, _templateObject10$2, _templateObject11$2, _templateObject12$2, _templateObject13$2, _templateObject14$2, _templateObject15$2, _templateObject16$2;
+  var FooterWrapper = styled__default.div(_templateObject$Q || (_templateObject$Q = _taggedTemplateLiteral(["\n   {\n    background-color: ", ";\n    font-weight: ", ";\n    padding-top: ", ";\n    font-size: ", ";\n  }\n"])), function (props) {
     return props.theme.rareStepColors.ntrlMax;
   }, function (props) {
     return props.theme.rareStepFontWeights.bold;
@@ -13888,18 +14004,14 @@
 
   var _excluded$8 = ["ref"];
 
-  var _templateObject$Q, _templateObject2$d, _templateObject3$8, _templateObject4$7, _templateObject5$5;
-  var OptionsRow = styled__default.div(_templateObject$Q || (_templateObject$Q = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: nowrap;\n  flex-direction: row;\n"])));
-  var OptionsRowDescription = styled__default.div(_templateObject2$d || (_templateObject2$d = _taggedTemplateLiteral(["\n  flex-basis: 30%;\n  margin-right: 10px;\n"])));
-  var Options = styled__default.div(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: nowrap;\n  flex-direction: row;\n  flex-basis: 60%;\n"])));
-  var OptionRadioInputContainer = styled__default.span(_templateObject4$7 || (_templateObject4$7 = _taggedTemplateLiteral(["\n  flex-basis: 50%;\n"])));
-  var OptionRadioInput = styled__default.input(_templateObject5$5 || (_templateObject5$5 = _taggedTemplateLiteral(["\n  margin-right: 5px;\n"])));
+  var _templateObject$R, _templateObject2$d;
+  var OptionsRow = styled__default.div(_templateObject$R || (_templateObject$R = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: nowrap;\n  flex-direction: row;\n"])));
+  var Options = styled__default.div(_templateObject2$d || (_templateObject2$d = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: nowrap;\n  flex-direction: row;\n  flex-basis: 60%;\n"])));
 
   var CommunicationPreferenceOptionsRenderer = function CommunicationPreferenceOptionsRenderer(_ref) {
-    var description = _ref.description,
-        control = _ref.control,
+    var control = _ref.control,
         name = _ref.name,
-        is_disabled = _ref.is_disabled,
+        isDisabled = _ref.isDisabled,
         options = _ref.options,
         defaultValue = _ref.defaultValue,
         setValue = _ref.setValue;
@@ -13921,34 +14033,27 @@
         setValue(name, defaultValue);
       }
     }, [defaultValue, name, setValue]);
-    return /*#__PURE__*/React__default.createElement(OptionsRow, null, /*#__PURE__*/React__default.createElement(OptionsRowDescription, null, description), is_disabled ? /*#__PURE__*/React__default.createElement(Options, null, options.map(function (option) {
-      return /*#__PURE__*/React__default.createElement(OptionRadioInputContainer, {
-        key: option.value
-      }, /*#__PURE__*/React__default.createElement(OptionRadioInput, _extends({
-        type: "radio",
-        ref: ref
-      }, inputProps, {
-        value: option.value,
-        checked: inputProps.value === option.value.toString(),
-        disabled: true
-      })), option.label);
-    })) : /*#__PURE__*/React__default.createElement(Options, null, options.map(function (option) {
-      return /*#__PURE__*/React__default.createElement(OptionRadioInputContainer, {
-        key: option.value
-      }, /*#__PURE__*/React__default.createElement(OptionRadioInput, _extends({
+    return /*#__PURE__*/React__default.createElement(OptionsRow, null, /*#__PURE__*/React__default.createElement(Options, null, options.map(function (option) {
+      return /*#__PURE__*/React__default.createElement(RadioButtonLabel, {
+        key: option.value,
+        htmlFor: option.value
+      }, /*#__PURE__*/React__default.createElement(RadioButtonInput, _extends({
+        id: option.value,
+        ref: ref,
         type: "radio",
-        ref: ref
+        name: name,
+        defaultChecked: inputProps.value === option.value.toString()
       }, inputProps, {
-        value: option.value,
-        checked: inputProps.value === option.value.toString()
-      })), option.label);
+        disabled: isDisabled,
+        value: option.value
+      })), /*#__PURE__*/React__default.createElement(RadioButtonCircle, null, /*#__PURE__*/React__default.createElement(RadioButtonCircleInner, null)), /*#__PURE__*/React__default.createElement(RadioButtonText, null, option.label));
     })), invalid && /*#__PURE__*/React__default.createElement("span", {
       className: "form__error"
     }, error === null || error === void 0 ? void 0 : error.message));
   };
 
-  var _templateObject$R, _templateObject2$e;
-  var SectionContainer = styled__default.div(_templateObject$R || (_templateObject$R = _taggedTemplateLiteral(["\n  border-top: flex 1px solid ", ";\n  border-top-width: calc(100% - 50px);\n  padding: 5px 10px;\n"])), function (props) {
+  var _templateObject$S, _templateObject2$e;
+  var SectionContainer = styled__default.div(_templateObject$S || (_templateObject$S = _taggedTemplateLiteral(["\n  border-top: flex 1px solid ", ";\n  border-top-width: calc(100% - 50px);\n  padding: 5px 10px;\n"])), function (props) {
     return props.theme.colors.primary;
   });
   var SectionHeading = styled__default.div(_templateObject2$e || (_templateObject2$e = _taggedTemplateLiteral(["\n  padding: 5px 10px;\n"])));
@@ -13958,7 +14063,7 @@
         description = _ref.description,
         control = _ref.control,
         name = _ref.name,
-        is_disabled = _ref.is_disabled,
+        isDisabled = _ref.isDisabled,
         options = _ref.options,
         defaultValue = _ref.defaultValue,
         setValue = _ref.setValue;
@@ -13966,7 +14071,7 @@
       description: description,
       control: control,
       name: name,
-      is_disabled: is_disabled,
+      isDisabled: isDisabled,
       options: options,
       defaultValue: defaultValue,
       setValue: setValue
@@ -13975,10 +14080,10 @@
 
   var CommunicationPreferenceSection$1 = themed(CommunicationPreferenceSection);
 
-  var _templateObject$S, _templateObject2$f, _templateObject3$9;
-  var CommunicationPreferenceContainer = styled__default.div(_templateObject$S || (_templateObject$S = _taggedTemplateLiteral(["\n  border: solid 1px #d1d5dbff;\n  margin-bottom: 40px;\n"])));
+  var _templateObject$T, _templateObject2$f, _templateObject3$8;
+  var CommunicationPreferenceContainer = styled__default.div(_templateObject$T || (_templateObject$T = _taggedTemplateLiteral(["\n  border: solid 1px #d1d5dbff;\n  margin-bottom: 40px;\n"])));
   var EditButtonRow = styled__default.div(_templateObject2$f || (_templateObject2$f = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: end;\n  padding: 10px 5px;\n  margin-right: 16px;\n"])));
-  var SubmitButton = styled__default.input(_templateObject3$9 || (_templateObject3$9 = _taggedTemplateLiteral(["\n  flex-basis: 15%;\n  margin-right: 5px;\n"])));
+  var SubmitButton = styled__default.input(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteral(["\n  flex-basis: 15%;\n  margin-right: 5px;\n"])));
   var BaseRequest = {
     loading: false,
     success: false,
@@ -14052,11 +14157,10 @@
     return /*#__PURE__*/React__default.createElement(React.Fragment, null, requestState.loading && /*#__PURE__*/React__default.createElement(EllipsisLoader, null), header, /*#__PURE__*/React__default.createElement(CommunicationPreferenceContainer, null, /*#__PURE__*/React__default.createElement("form", {
       onSubmit: handleSubmit(onSubmit)
     }, /*#__PURE__*/React__default.createElement(CommunicationPreferenceSection$1, {
-      description: "How would you prefer to receive communication:  ",
       control: control,
       name: "default_communication",
       options: communicationOptions,
-      is_disabled: !isEditing,
+      isDisabled: !isEditing,
       defaultValue: preferenceData.default_communication,
       setValue: setValue
     }), isEditing ? /*#__PURE__*/React__default.createElement(EditButtonRow, null, /*#__PURE__*/React__default.createElement(SubmitButton, {
@@ -14102,6 +14206,7 @@
   exports.RareStepHeader = index$3;
   exports.ReactSelectWrapper = ReactSelectWrapper;
   exports.SecondaryButton = SecondaryButton$1;
+  exports.ShoeSizeRangeSelector = ShoeSizeRangeSelector;
   exports.ShoeSizeSelector = ShoeSizeSelector;
   exports.TextButton = TextButton$1;
   exports.Tooltip = index$1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonlineza/luxity-lib",
-  "version": "2.30.1",
+  "version": "2.30.3",
   "scripts": {
     "start": "start-storybook -p 9001 -c .storybook -s ./public",
     "clean": "rimraf ./build/*.*",