@bonlineza/luxity-lib 2.28.0 → 2.29.1

package/build/bundle.js

@@ -9709,298 +9709,15 @@
 
   var NotificationDropDown$1 = themed(NotificationDropDown);
 
-  var _templateObject$E;
+  var _templateObject$E, _templateObject2$6;
   var ALL_ITEM = {
-    label: 'ALL',
-    value: 'ALL'
-  };
-  var StyledMultiselector = styled__default.div(_templateObject$E || (_templateObject$E = _taggedTemplateLiteral(["\n  .multiselector__selected-items,\n  .multiselector__selectable-items {\n    display: flex;\n    flex-flow: no-wrap;\n    margin-bottom: 40px;\n    .dropdown-select-container {\n      width: 100%;\n      .dropdown-select {\n        &__control {\n          border-color: ", ";\n          border-radius: 0px;\n          background-color: ", ";\n          color: ", ";\n        }\n        &__multi-value {\n          background-color: ", ";\n        }\n        &__multi-value__label {\n          color: ", ";\n          font-size: 100%;\n        }\n        &__multi-value__remove {\n          svg {\n            fill: ", ";\n          }\n        }\n      }\n    }\n  }\n"])), function (props) {
-    return props.theme.colors.primary;
-  }, function (props) {
-    return props.theme.colors.ntrlMin;
-  }, function (props) {
-    return props.theme.colors.primary;
-  }, function (props) {
-    return props.theme.colors.primary;
-  }, function (props) {
-    return props.theme.colors.ntrlMin;
-  }, function (props) {
-    return props.theme.colors.ntrlMin;
-  });
-  /**
-   * Multiselector with a GraphQL flavour (TODO: to be revised to make it remote api agnostic)
-   */
-
-  var GraphQLDropdownSelector = /*#__PURE__*/function (_React$Component) {
-    _inherits(GraphQLDropdownSelector, _React$Component);
-
-    var _super = _createSuper(GraphQLDropdownSelector);
-
-    function GraphQLDropdownSelector(props) {
-      var _this;
-
-      _classCallCheck(this, GraphQLDropdownSelector);
-
-      _this = _super.call(this, props);
-
-      _defineProperty(_assertThisInitialized(_this), "componentDidUpdate", function (prevProps) {
-        if (prevProps.graphQuery !== _this.props.graphQuery) {
-          _this.makeRequest();
-        }
-      });
-
-      _defineProperty(_assertThisInitialized(_this), "makeRequest", function () {
-        _this.pageReady.refreshPage();
-      });
-
-      _defineProperty(_assertThisInitialized(_this), "emptySelected", function () {
-        return _this.setState({
-          selected: [ALL_ITEM]
-        });
-      });
-
-      _defineProperty(_assertThisInitialized(_this), "setNewResults", function (res) {
-        var selectedIds = _this.state.selected.map(function (sel) {
-          return sel.value;
-        });
-
-        var pagination = _this.props.resultProcessor(res);
-
-        var allSelected = _this.state.selected.some(function (item) {
-          return item.value === ALL_ITEM.value;
-        });
-
-        var newList = pagination.filter(function (newItem) {
-          return !selectedIds.includes(newItem.value);
-        });
-        newList = allSelected ? newList : [ALL_ITEM].concat(_toConsumableArray(newList)); // eslint-disable-next-line react/no-unused-state
-
-        _this.setState({
-          list: newList,
-          pagination: pagination
-        });
-      });
-
-      _defineProperty(_assertThisInitialized(_this), "onAddItem", function (addSelectedItem) {
-        var newSelectedList;
-
-        if (addSelectedItem.includes(ALL_ITEM)) {
-          newSelectedList = [ALL_ITEM];
-        } else {
-          newSelectedList = addSelectedItem.filter(function (item) {
-            return item.value !== ALL_ITEM.value;
-          });
-        }
-
-        _this.setState(function (prevState) {
-          return _objectSpread2(_objectSpread2({}, prevState), {}, {
-            selected: newSelectedList
-          });
-        }, function () {
-          _this.props.onChange(_this.state.selected.filter(function (item) {
-            return item.value !== ALL_ITEM.value;
-          }));
-        });
-      });
-
-      _defineProperty(_assertThisInitialized(_this), "onIsLoading", function (flag) {
-        _this.setState({
-          isLoading: flag
-        });
-      });
-
-      _defineProperty(_assertThisInitialized(_this), "render", function () {
-        var _this$props = _this.props,
-            baseClass = _this$props.baseClass,
-            identifier = _this$props.identifier,
-            triggerRequest = _this$props.triggerRequest,
-            className = _this$props.className;
-        var list = _this.state.list;
-        return /*#__PURE__*/React__default.createElement(StyledMultiselector, null, /*#__PURE__*/React__default.createElement("div", {
-          "data-qe-id": identifier,
-          className: "".concat(className, " ").concat(baseClass)
-        }, /*#__PURE__*/React__default.createElement(LuxityPageReady, {
-          ref: function ref(inst) {
-            _this.pageReady = inst;
-          },
-          onData: _this.setNewResults,
-          onIsLoading: _this.onIsLoading,
-          getRequestPromise: function getRequestPromise() {
-            return triggerRequest();
-          }
-        }), /*#__PURE__*/React__default.createElement("div", {
-          className: "".concat(baseClass, "__selectable-items")
-        }, /*#__PURE__*/React__default.createElement(ReactSelectWrapper, {
-          options: list,
-          onChange: function onChange(value) {
-            _this.onAddItem(value);
-          },
-          isMulti: true,
-          isSearchable: true
-        }))));
-      });
-
-      _this.state = {
-        selected: [ALL_ITEM],
-        list: [],
-        pagination: {},
-        isLoading: false
-      };
-      return _this;
-    }
-
-    return _createClass(GraphQLDropdownSelector);
-  }(React__default.Component);
-
-  GraphQLDropdownSelector.defaultProps = {
-    baseClass: 'multiselector'
-  };
-  var GraphQLDropdownSelector$1 = themed(GraphQLDropdownSelector);
-
-  /**
-   * Luxity flavoured GraphQLMultiselector with text Search, category and limit controls
-   */
-  var LuxityGraphQLDropdownSelector = /*#__PURE__*/function (_React$Component) {
-    _inherits(LuxityGraphQLDropdownSelector, _React$Component);
-
-    var _super = _createSuper(LuxityGraphQLDropdownSelector);
-
-    function LuxityGraphQLDropdownSelector(props) {
-      var _this;
-
-      _classCallCheck(this, LuxityGraphQLDropdownSelector);
-
-      _this = _super.call(this, props);
-
-      _defineProperty(_assertThisInitialized(_this), "multiSelectorRef", /*#__PURE__*/React__default.createRef());
-
-      _defineProperty(_assertThisInitialized(_this), "increaseLimit", function () {
-        _this.setState(function (prevState) {
-          return {
-            limit: prevState.limit + _this.props.queryLimitIncrement
-          };
-        });
-      });
-
-      _defineProperty(_assertThisInitialized(_this), "onChange", function (selection) {
-        _this.props.onChange(selection);
-      });
-
-      _defineProperty(_assertThisInitialized(_this), "render", function () {
-        var _this$state = _this.state,
-            limit = _this$state.limit,
-            query_arguments = _this$state.query_arguments;
-        var _this$props = _this.props,
-            title = _this$props.title,
-            baseClass = _this$props.baseClass,
-            getGraphQuery = _this$props.getGraphQuery,
-            resultProcessor = _this$props.resultProcessor,
-            graphApi = _this$props.graphApi,
-            identifier = _this$props.identifier,
-            requestInstance = _this$props.requestInstance;
-        return /*#__PURE__*/React__default.createElement("div", {
-          className: baseClass
-        }, /*#__PURE__*/React__default.createElement(InterestsSubheading, {
-          className: "".concat(baseClass, "__title"),
-          title: title
-        }), /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(GraphQLDropdownSelector$1, {
-          triggerRequest: function triggerRequest() {
-            return requestInstance.post(graphApi, {
-              query: getGraphQuery(limit, 1, 'id|desc', query_arguments)
-            });
-          },
-          graphQuery: getGraphQuery(limit, 1, 'id|desc', query_arguments),
-          identifier: identifier,
-          ref: _this.multiSelectorRef,
-          onChange: _this.onChange,
-          resultProcessor: resultProcessor
-        })));
-      });
-
-      _this.state = {
-        limit: props.baseQueryLimit,
-        query_arguments: props.query_arguments
-      };
-      return _this;
-    }
-
-    _createClass(LuxityGraphQLDropdownSelector, [{
-      key: "componentDidUpdate",
-      value: function componentDidUpdate(prevProps) {
-        var _this$multiSelectorRe;
-
-        if (prevProps.query_arguments !== this.props.query_arguments && (_this$multiSelectorRe = this.multiSelectorRef) !== null && _this$multiSelectorRe !== void 0 && _this$multiSelectorRe.current) {
-          this.multiSelectorRef.current.emptySelected();
-        }
-      }
-    }], [{
-      key: "getDerivedStateFromProps",
-      value: function getDerivedStateFromProps(props, prevState) {
-        if (prevState.query_arguments !== props.query_arguments) {
-          return {
-            query_arguments: props.query_arguments
-          };
-        }
-
-        return null;
-      }
-    }]);
-
-    return LuxityGraphQLDropdownSelector;
-  }(React__default.Component);
-
-  LuxityGraphQLDropdownSelector.defaultProps = {
-    baseClass: '',
-    searchPlaceHolder: '',
-    queryLimitIncrement: 12,
-    baseQueryLimit: 12
-  };
-
-  var BrandSelector = function BrandSelector(_ref) {
-    var onChange = _ref.onChange,
-        category = _ref.category,
-        graphApi = _ref.graphApi,
-        getGraphQuery = _ref.getGraphQuery,
-        resultProcessor = _ref.resultProcessor,
-        requestInstance = _ref.requestInstance;
-    return /*#__PURE__*/React__default.createElement(LuxityGraphQLDropdownSelector, {
-      baseQueryLimit: 9999,
-      title: "Brands",
-      queryId: "getBrands",
-      baseClass: "brand-selector",
-      identifier: "brand-selector",
-      searchPlaceHolder: "Search brands",
-      query_arguments: category,
-      onChange: onChange,
-      graphApi: graphApi,
-      getGraphQuery: getGraphQuery,
-      resultProcessor: resultProcessor,
-      requestInstance: requestInstance
-    });
-  };
-
-  BrandSelector.defaultProps = {
-    resultProcessor: function resultProcessor(result) {
-      return result.data.data.luxity_brands.data.map(function (_ref2) {
-        var id = _ref2.id,
-            name = _ref2.name;
-        return {
-          label: name,
-          value: id
-        };
-      });
-    }
-  };
-
-  var _templateObject$F, _templateObject2$6;
-  var ALL_ITEM$1 = {
     id: 'ALL',
     name: 'ALL'
   };
   var multiSelectorItemMaxHeight = '3rem';
   var multiSelectorItemAnimationDuration = '300ms';
-  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$1 = 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) {
+  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 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) {
     return props.theme.colors.ntrlMin;
@@ -10059,7 +9776,7 @@
 
       _defineProperty(_assertThisInitialized(_this), "emptySelected", function () {
         return _this.setState({
-          selected: [ALL_ITEM$1]
+          selected: [ALL_ITEM]
         });
       });
 
@@ -10071,13 +9788,13 @@
         var pagination = _this.props.resultProcessor(res);
 
         var allSelected = _this.state.selected.some(function (item) {
-          return item.id === ALL_ITEM$1.id;
+          return item.id === ALL_ITEM.id;
         });
 
         var newList = pagination.data.filter(function (newItem) {
           return !selectedIds.includes(newItem.id);
         });
-        newList = allSelected ? newList : [ALL_ITEM$1].concat(_toConsumableArray(newList));
+        newList = allSelected ? newList : [ALL_ITEM].concat(_toConsumableArray(newList));
 
         _this.setState({
           list: newList,
@@ -10090,21 +9807,21 @@
           var newSelectedList;
           var newList;
 
-          if (addSelectedItem.id === ALL_ITEM$1.id) {
+          if (addSelectedItem.id === ALL_ITEM.id) {
             // Clear Selected List
             // and move previous Selected items to list
-            newSelectedList = [ALL_ITEM$1];
+            newSelectedList = [ALL_ITEM];
             newList = prevState.list.filter(function (item) {
-              return item.id !== ALL_ITEM$1.id;
+              return item.id !== ALL_ITEM.id;
             }).concat(prevState.selected).sort(function (a, b) {
               return a.id - b.id;
             });
           } else {
             newSelectedList = _toConsumableArray(prevState.selected.filter(function (item) {
-              return item.id !== ALL_ITEM$1.id;
+              return item.id !== ALL_ITEM.id;
             })).concat(addSelectedItem);
-            newList = [ALL_ITEM$1].concat(_toConsumableArray(prevState.list.filter(function (item) {
-              return item.id !== ALL_ITEM$1.id;
+            newList = [ALL_ITEM].concat(_toConsumableArray(prevState.list.filter(function (item) {
+              return item.id !== ALL_ITEM.id;
             }).filter(function (item) {
               return item.id !== addSelectedItem.id;
             })));
@@ -10116,7 +9833,7 @@
           };
         }, function () {
           _this.props.onChange(_this.state.selected.filter(function (item) {
-            return item.id !== ALL_ITEM$1.id;
+            return item.id !== ALL_ITEM.id;
           }));
         });
       });
@@ -10124,7 +9841,7 @@
       _defineProperty(_assertThisInitialized(_this), "onRemoveItem", function (removeSelectedItem) {
         _this.setState(function (prevState) {
           // Cannot remove ALL from selection by unselecting it
-          if ((removeSelectedItem === null || removeSelectedItem === void 0 ? void 0 : removeSelectedItem.id) === ALL_ITEM$1.id) {
+          if ((removeSelectedItem === null || removeSelectedItem === void 0 ? void 0 : removeSelectedItem.id) === ALL_ITEM.id) {
             return {};
           }
 
@@ -10133,18 +9850,18 @@
           });
 
           var newList = _toConsumableArray(prevState.list).concat(removeSelectedItem).filter(function (item) {
-            return item.id !== ALL_ITEM$1.id;
+            return item.id !== ALL_ITEM.id;
           }).sort(function (a, b) {
             return a.id - b.id;
           });
 
           return {
             list: newList,
-            selected: newSelectedList.length ? newSelectedList : [ALL_ITEM$1]
+            selected: newSelectedList.length ? newSelectedList : [ALL_ITEM]
           };
         }, function () {
           _this.props.onChange(_this.state.selected.filter(function (item) {
-            return item.id !== ALL_ITEM$1.id;
+            return item.id !== ALL_ITEM.id;
           }));
         });
       });
@@ -10167,7 +9884,7 @@
             selected = _this$state.selected,
             pagination = _this$state.pagination,
             isLoading = _this$state.isLoading;
-        return /*#__PURE__*/React__default.createElement(StyledMultiselector$1, null, /*#__PURE__*/React__default.createElement("div", {
+        return /*#__PURE__*/React__default.createElement(StyledMultiselector, null, /*#__PURE__*/React__default.createElement("div", {
           "data-qe-id": identifier,
           className: "".concat(className, " ").concat(baseClass)
         }, /*#__PURE__*/React__default.createElement("div", {
@@ -10207,7 +9924,7 @@
       });
 
       _this.state = {
-        selected: [ALL_ITEM$1],
+        selected: [ALL_ITEM],
         list: [],
         pagination: {},
         isLoading: false
@@ -10237,7 +9954,7 @@
     }));
   });
 
-  var _templateObject$G;
+  var _templateObject$F;
 
   var Title$3 = function Title(_ref) {
     var baseClass = _ref.baseClass,
@@ -10258,7 +9975,7 @@
     })));
   };
 
-  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) {
+  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) {
     return props.theme.marginPaddings[2];
   }, function (props) {
     return props.theme.fontSizes[2];
@@ -10324,10 +10041,7 @@
         var _this$state = _this.state,
             limit = _this$state.limit,
             category = _this$state.category,
-            nameFilter = _this$state.nameFilter,
-            brands = _this$state.brands,
-            models = _this$state.models,
-            materials = _this$state.materials;
+            nameFilter = _this$state.nameFilter;
         var _this$props = _this.props,
             title = _this$props.title,
             baseClass = _this$props.baseClass,
@@ -10348,10 +10062,10 @@
         }), /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(GraphQLMultiSelector$1, {
           triggerRequest: function triggerRequest() {
             return requestInstance.post(graphApi, {
-              query: getGraphQuery(limit, 1, 'id|desc', category, nameFilter, brands, models, materials)
+              query: getGraphQuery(limit, 1, 'id|desc', category, nameFilter)
             });
           },
-          graphQuery: getGraphQuery(limit, 1, 'id|desc', category, nameFilter, brands, models, materials),
+          graphQuery: getGraphQuery(limit, 1, 'id|desc', category, nameFilter),
           identifier: identifier,
           ref: _this.multiSelectorRef,
           onChange: _this.onChange,
@@ -10364,9 +10078,6 @@
       _this.state = {
         limit: props.baseQueryLimit,
         category: props.category,
-        brands: props.brands,
-        models: props.models,
-        materials: props.materials,
         nameFilter: ''
       };
       return _this;
@@ -10375,23 +10086,11 @@
     _createClass(LuxityGraphQLMultiselector, [{
       key: "componentDidUpdate",
       value: function componentDidUpdate(prevProps) {
-        var _this$multiSelectorRe, _this$multiSelectorRe2, _this$multiSelectorRe3, _this$multiSelectorRe4;
+        var _this$multiSelectorRe;
 
         if (prevProps.category !== this.props.category && (_this$multiSelectorRe = this.multiSelectorRef) !== null && _this$multiSelectorRe !== void 0 && _this$multiSelectorRe.current) {
           this.multiSelectorRef.current.emptySelected();
         }
-
-        if (prevProps.brands !== this.props.brands && (_this$multiSelectorRe2 = this.multiSelectorRef) !== null && _this$multiSelectorRe2 !== void 0 && _this$multiSelectorRe2.current) {
-          this.multiSelectorRef.current.emptySelected();
-        }
-
-        if (prevProps.models !== this.props.models && (_this$multiSelectorRe3 = this.multiSelectorRef) !== null && _this$multiSelectorRe3 !== void 0 && _this$multiSelectorRe3.current) {
-          this.multiSelectorRef.current.emptySelected();
-        }
-
-        if (prevProps.materials !== this.props.materials && (_this$multiSelectorRe4 = this.multiSelectorRef) !== null && _this$multiSelectorRe4 !== void 0 && _this$multiSelectorRe4.current) {
-          this.multiSelectorRef.current.emptySelected();
-        }
       }
     }], [{
       key: "getDerivedStateFromProps",
@@ -10402,24 +10101,6 @@
           };
         }
 
-        if (prevState.brands !== props.brands) {
-          return {
-            brands: props.brands
-          };
-        }
-
-        if (prevState.models !== props.models) {
-          return {
-            models: props.models
-          };
-        }
-
-        if (prevState.materials !== props.materials) {
-          return {
-            materials: props.materials
-          };
-        }
-
         return null;
       }
     }]);
@@ -10434,8 +10115,8 @@
     baseQueryLimit: 12
   };
 
-  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) {
+  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) {
     return props.theme.colors.base;
   }, function (props) {
     return props.theme.colors.borderColor;
@@ -10461,6 +10142,38 @@
     return selected ? /*#__PURE__*/React__default.createElement(PrimaryButton$1, props, item.name) : /*#__PURE__*/React__default.createElement(UnselectedButton, props, item.name);
   };
 
+  var BrandSelector = function BrandSelector(_ref) {
+    var onChange = _ref.onChange,
+        category = _ref.category,
+        graphApi = _ref.graphApi,
+        itemRenderer = _ref.itemRenderer,
+        getGraphQuery = _ref.getGraphQuery,
+        resultProcessor = _ref.resultProcessor,
+        requestInstance = _ref.requestInstance;
+    return /*#__PURE__*/React__default.createElement(LuxityGraphQLMultiselector, {
+      baseQueryLimit: 16,
+      title: "Brands",
+      queryId: "getBrands",
+      baseClass: "brand-selector",
+      identifier: "brand-selector",
+      searchPlaceHolder: "Search brands",
+      category: category,
+      onChange: onChange,
+      graphApi: graphApi,
+      itemRenderer: itemRenderer,
+      getGraphQuery: getGraphQuery,
+      resultProcessor: resultProcessor,
+      requestInstance: requestInstance
+    });
+  };
+
+  BrandSelector.defaultProps = {
+    itemRenderer: ItemRenderer,
+    resultProcessor: function resultProcessor(result) {
+      return result.data.data.luxity_brands;
+    }
+  };
+
   var StyleSelector = function StyleSelector(_ref) {
     var onChange = _ref.onChange,
         category = _ref.category,
@@ -10468,10 +10181,7 @@
         itemRenderer = _ref.itemRenderer,
         getGraphQuery = _ref.getGraphQuery,
         resultProcessor = _ref.resultProcessor,
-        requestInstance = _ref.requestInstance,
-        brands = _ref.brands,
-        models = _ref.models,
-        materials = _ref.materials;
+        requestInstance = _ref.requestInstance;
     return /*#__PURE__*/React__default.createElement(LuxityGraphQLMultiselector, {
       title: "Styles",
       queryId: "getStyles",
@@ -10480,9 +10190,6 @@
       identifier: "style-selector",
       searchPlaceHolder: "Search Styles",
       category: category,
-      brands: brands,
-      models: models,
-      materials: materials,
       onChange: onChange,
       graphApi: graphApi,
       itemRenderer: itemRenderer,
@@ -10510,8 +10217,8 @@
     }
   };
 
-  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) {
+  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) {
     return props.theme.marginPaddings[4];
   });
   var onShoeSizeTypeChangeTimeout = 300;
@@ -10649,8 +10356,8 @@
     }
   };
 
-  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) {
+  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) {
     return props.theme.marginPaddings[2];
   }, function (props) {
     return props.theme.marginPaddings[2];
@@ -10666,8 +10373,8 @@
 
   var _excluded$7 = ["title", "checked", "renderIcon", "onChange", "checkedValue", "unCheckedValue"];
 
-  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) {
+  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) {
     return props.theme.colors.primary;
   }, function (props) {
     return props.theme.marginPaddings[0];
@@ -10832,9 +10539,9 @@
     }));
   });
 
-  var _templateObject$L, _templateObject2$9, _templateObject3$4, _templateObject4$3, _templateObject5$1;
+  var _templateObject$K, _templateObject2$9, _templateObject3$4, _templateObject4$3, _templateObject5$1;
   var UNISEX$1 = genders.UNISEX;
-  var AddInterestContainer = styled__default.div(_templateObject$L || (_templateObject$L = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n  border: 1px solid ", ";\n  padding: ", ";\n"])), function (props) {
+  var AddInterestContainer = styled__default.div(_templateObject$K || (_templateObject$K = _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;
@@ -11122,8 +10829,8 @@
 
   var AddInterest$1 = themed(AddInterest);
 
-  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) {
+  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) {
     return props.theme.marginPaddings[0];
   }, function (props) {
     return props.theme.colors.primary;
@@ -11153,8 +10860,8 @@
 
   var MyInterestTitleHeading$1 = themed(MyInterestTitleHeading);
 
-  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) {
+  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) {
     return props.theme.colors.primary;
   });
   var AccountIcon = themed(function () {
@@ -11300,8 +11007,8 @@
     defaultShoeSizeType: shoeSizeTypes.eu.value
   };
 
-  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) {
+  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) {
     return props.theme.rareStepColors.ntrlMin;
   }, function (props) {
     return props.theme.rareStepColors.primary;
@@ -11445,6 +11152,9 @@
       }
     };
 
+    React.useEffect(function () {
+      searchInputRef.current.focus();
+    }, []);
     return /*#__PURE__*/React__default.createElement(SearchContainer, {
       className: "header__search-container"
     }, /*#__PURE__*/React__default.createElement(SearchIcon, {
@@ -11635,8 +11345,8 @@
 
   var RareStepDesktopHeader$1 = themed(RareStepDesktopHeader);
 
-  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) {
+  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) {
     return props.theme.rareStepColors.ntrlMin;
   }, function (props) {
     return props.theme.marginPaddings[3];
@@ -11987,8 +11697,8 @@
   };
   var index$3 = themed(RareStepHeader);
 
-  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) {
+  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) {
     return props.theme.rareStepColors.ntrlMax;
   }, function (props) {
     return props.theme.rareStepFontWeights.bold;