@bonlineza/luxity-lib 2.10.0 → 2.12.0

package/build/bundle.js

@@ -355,6 +355,40 @@
       ntrlMinTen: '#e6e6e6',
       gray: '#efefef',
       darkerGray: '#454141'
+    },
+    rareStepColors: {
+      primary: '#202b58',
+      secondary: '#ef5c2d',
+      ntrlMin: '#ffffff',
+      ntrl40: '#f4f4f4',
+      ntrl50: '#808080',
+      ntrl60: '#e8e8e8',
+      ntrl70: '#252525',
+      ntrlMax: '#000000'
+    },
+    rareStepFontWeights: {
+      normal: 400,
+      medium: 500,
+      semiBold: 600,
+      bold: 700
+    },
+    rareStepFontSize: {
+      h1: '36px',
+      h2: '30px',
+      h3: '24px',
+      h4: '20px',
+      h5: '16px',
+      h6: '14px',
+      footerTitle: '18px'
+    },
+    rareStepPageSizes: {
+      mobile: '500px',
+      tablet: '768px',
+      desktop: '992px',
+      screenl: '1280px',
+      screenxl: '1680px',
+      screenxxl: '1920px',
+      container: '1600px'
     }
   };
 
@@ -868,6 +902,22 @@
           return /*#__PURE__*/React__default.createElement("span", {
             key: "".concat(style.name, "-").concat(data.id)
           }, style.name);
+        }) : 'All')), /*#__PURE__*/React__default.createElement("div", {
+          className: "interest-item__container_heading"
+        }, /*#__PURE__*/React__default.createElement(InterestItemTitle, null, "Models:"), /*#__PURE__*/React__default.createElement("div", {
+          className: "list-items"
+        }, data.luxity_models != null && data.luxity_models.length > 0 ? data.luxity_models.map(function (model) {
+          return /*#__PURE__*/React__default.createElement("span", {
+            key: "".concat(model.name, "-").concat(data.id)
+          }, model.name);
+        }) : 'All')), /*#__PURE__*/React__default.createElement("div", {
+          className: "interest-item__container_heading"
+        }, /*#__PURE__*/React__default.createElement(InterestItemTitle, null, "Materials:"), /*#__PURE__*/React__default.createElement("div", {
+          className: "list-items"
+        }, data.luxity_materials != null && data.luxity_materials.length > 0 ? data.luxity_materials.map(function (material) {
+          return /*#__PURE__*/React__default.createElement("span", {
+            key: "".concat(material.name, "-").concat(data.id)
+          }, material.name);
         }) : 'All')), /*#__PURE__*/React__default.createElement("div", {
           className: "interest-item__container_heading ".concat(data.category_type === interestCategories.SHOES ? '' : 'no-shoe-size-section')
         }, data.category_type === interestCategories.SHOES ? /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(InterestItemTitle, null, "Shoe Size:"), /*#__PURE__*/React__default.createElement("div", {
@@ -894,7 +944,7 @@
   var SheoSizeContentDiv = styled__default.div(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteral(["\n  @media (max-width: ", ") {\n    display: none;\n  }\n"])), media.xs);
   var InterestItemTitle = styled__default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  font-weight: bold;\n  display: none;\n\n  @media (max-width: ", ") {\n    display: inline;\n  }\n"])), media.xs);
   var InterestItemContainer = styled__default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n\n  .no-shoe-size-section {\n    @media (max-width: ", ") {\n      display: none;\n    }\n  }\n"])), media.xs);
-  var InterestItemContent = styled__default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  width: 95%;\n  height: 100%;\n  border: 1px solid ", ";\n  padding: 0.5em;\n  margin-bottom: ", ";\n\n  .interest-item__container_heading {\n    color: ", ";\n    flex-basis: calc(100% / 6);\n    margin-left: ", ";\n    margin-top: 0.3rem;\n\n    @media (max-width: ", ") {\n      display: inline;\n    }\n  }\n\n  .list-items {\n    display: inline-flex;\n    flex-direction: column;\n\n    @media (max-width: ", ") {\n      margin-left: ", ";\n    }\n  }\n\n  @media (max-width: ", ") {\n    flex-direction: column;\n  }\n"])), function (props) {
+  var InterestItemContent = styled__default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  width: 95%;\n  height: 100%;\n  border: 1px solid ", ";\n  padding: 0.5em;\n  margin-bottom: ", ";\n\n  .interest-item__container_heading {\n    color: ", ";\n    flex-basis: calc(100% / 8);\n    margin-left: ", ";\n    margin-top: 0.3rem;\n\n    @media (max-width: ", ") {\n      display: inline;\n    }\n  }\n\n  .list-items {\n    display: inline-flex;\n    flex-direction: column;\n\n    @media (max-width: ", ") {\n      margin-left: ", ";\n    }\n  }\n\n  @media (max-width: ", ") {\n    flex-direction: column;\n  }\n"])), function (props) {
     return props.theme.colors.borderColor;
   }, function (props) {
     return props.theme.marginPaddings[1];
@@ -10288,15 +10338,298 @@
 
   var NotificationDropDown$1 = themed(NotificationDropDown);
 
-  var _templateObject$F, _templateObject2$7;
+  var _templateObject$F;
   var ALL_ITEM = {
+    label: 'ALL',
+    value: 'ALL'
+  };
+  var StyledMultiselector = styled__default.div(_templateObject$F || (_templateObject$F = _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$G, _templateObject2$7;
+  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 = styled__default.div(_templateObject2$7 || (_templateObject2$7 = _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$G || (_templateObject$G = _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$7 || (_templateObject2$7 = _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;
@@ -10355,7 +10688,7 @@
 
       _defineProperty(_assertThisInitialized(_this), "emptySelected", function () {
         return _this.setState({
-          selected: [ALL_ITEM]
+          selected: [ALL_ITEM$1]
         });
       });
 
@@ -10367,13 +10700,13 @@
         var pagination = _this.props.resultProcessor(res);
 
         var allSelected = _this.state.selected.some(function (item) {
-          return item.id === ALL_ITEM.id;
+          return item.id === ALL_ITEM$1.id;
         });
 
         var newList = pagination.data.filter(function (newItem) {
           return !selectedIds.includes(newItem.id);
         });
-        newList = allSelected ? newList : [ALL_ITEM].concat(_toConsumableArray(newList));
+        newList = allSelected ? newList : [ALL_ITEM$1].concat(_toConsumableArray(newList));
 
         _this.setState({
           list: newList,
@@ -10386,21 +10719,21 @@
           var newSelectedList;
           var newList;
 
-          if (addSelectedItem.id === ALL_ITEM.id) {
+          if (addSelectedItem.id === ALL_ITEM$1.id) {
             // Clear Selected List
             // and move previous Selected items to list
-            newSelectedList = [ALL_ITEM];
+            newSelectedList = [ALL_ITEM$1];
             newList = prevState.list.filter(function (item) {
-              return item.id !== ALL_ITEM.id;
+              return item.id !== ALL_ITEM$1.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.id;
+              return item.id !== ALL_ITEM$1.id;
             })).concat(addSelectedItem);
-            newList = [ALL_ITEM].concat(_toConsumableArray(prevState.list.filter(function (item) {
-              return item.id !== ALL_ITEM.id;
+            newList = [ALL_ITEM$1].concat(_toConsumableArray(prevState.list.filter(function (item) {
+              return item.id !== ALL_ITEM$1.id;
             }).filter(function (item) {
               return item.id !== addSelectedItem.id;
             })));
@@ -10412,7 +10745,7 @@
           };
         }, function () {
           _this.props.onChange(_this.state.selected.filter(function (item) {
-            return item.id !== ALL_ITEM.id;
+            return item.id !== ALL_ITEM$1.id;
           }));
         });
       });
@@ -10420,7 +10753,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.id) {
+          if ((removeSelectedItem === null || removeSelectedItem === void 0 ? void 0 : removeSelectedItem.id) === ALL_ITEM$1.id) {
             return {};
           }
 
@@ -10429,18 +10762,18 @@
           });
 
           var newList = _toConsumableArray(prevState.list).concat(removeSelectedItem).filter(function (item) {
-            return item.id !== ALL_ITEM.id;
+            return item.id !== ALL_ITEM$1.id;
           }).sort(function (a, b) {
             return a.id - b.id;
           });
 
           return {
             list: newList,
-            selected: newSelectedList.length ? newSelectedList : [ALL_ITEM]
+            selected: newSelectedList.length ? newSelectedList : [ALL_ITEM$1]
           };
         }, function () {
           _this.props.onChange(_this.state.selected.filter(function (item) {
-            return item.id !== ALL_ITEM.id;
+            return item.id !== ALL_ITEM$1.id;
           }));
         });
       });
@@ -10463,7 +10796,7 @@
             selected = _this$state.selected,
             pagination = _this$state.pagination,
             isLoading = _this$state.isLoading;
-        return /*#__PURE__*/React__default.createElement(StyledMultiselector, null, /*#__PURE__*/React__default.createElement("div", {
+        return /*#__PURE__*/React__default.createElement(StyledMultiselector$1, null, /*#__PURE__*/React__default.createElement("div", {
           "data-qe-id": identifier,
           className: "".concat(className, " ").concat(baseClass)
         }, /*#__PURE__*/React__default.createElement("div", {
@@ -10503,7 +10836,7 @@
       });
 
       _this.state = {
-        selected: [ALL_ITEM],
+        selected: [ALL_ITEM$1],
         list: [],
         pagination: {},
         isLoading: false
@@ -10533,7 +10866,7 @@
     }));
   });
 
-  var _templateObject$G;
+  var _templateObject$H;
 
   var Title$3 = function Title(_ref) {
     var baseClass = _ref.baseClass,
@@ -10554,7 +10887,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$H || (_templateObject$H = _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];
@@ -10694,8 +11027,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$I;
+  var BaseButton = styled__default.button(_templateObject$I || (_templateObject$I = _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;
@@ -10721,38 +11054,6 @@
     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,
@@ -10796,8 +11097,8 @@
     }
   };
 
-  var _templateObject$I, _templateObject2$8;
-  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$J, _templateObject2$8;
+  var TitleWrapper = styled__default.div(_templateObject$J || (_templateObject$J = _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;
@@ -10935,8 +11236,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$K;
+  var SelectionWrapper = styled__default.div(_templateObject$K || (_templateObject$K = _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];
@@ -10952,8 +11253,8 @@
 
   var _excluded$7 = ["title", "checked", "renderIcon", "onChange", "checkedValue", "unCheckedValue"];
 
-  var _templateObject$K, _templateObject2$9, _templateObject3$4;
-  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$L, _templateObject2$9, _templateObject3$4;
+  var Content = styled__default.div(_templateObject$L || (_templateObject$L = _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];
@@ -11118,9 +11419,79 @@
     }));
   });
 
-  var _templateObject$L, _templateObject2$a, _templateObject3$5, _templateObject4$3, _templateObject5$1;
+  var ModelSelector = function ModelSelector(_ref) {
+    var onChange = _ref.onChange,
+        brands = _ref.brands,
+        graphApi = _ref.graphApi,
+        getGraphQuery = _ref.getGraphQuery,
+        resultProcessor = _ref.resultProcessor,
+        requestInstance = _ref.requestInstance;
+    return /*#__PURE__*/React__default.createElement(LuxityGraphQLDropdownSelector, {
+      baseQueryLimit: 1000,
+      title: "Models",
+      queryId: "getModels",
+      baseClass: "model-selector",
+      identifier: "model-selector",
+      query_arguments: brands,
+      onChange: onChange,
+      graphApi: graphApi,
+      getGraphQuery: getGraphQuery,
+      resultProcessor: resultProcessor,
+      requestInstance: requestInstance
+    });
+  };
+
+  ModelSelector.defaultProps = {
+    resultProcessor: function resultProcessor(result) {
+      return result.data.data.luxity_models.data.map(function (_ref2) {
+        var id = _ref2.id,
+            name = _ref2.name;
+        return {
+          label: name,
+          value: id
+        };
+      });
+    }
+  };
+
+  var MaterialSelector = function MaterialSelector(_ref) {
+    var onChange = _ref.onChange,
+        brands = _ref.brands,
+        graphApi = _ref.graphApi,
+        getGraphQuery = _ref.getGraphQuery,
+        resultProcessor = _ref.resultProcessor,
+        requestInstance = _ref.requestInstance;
+    return /*#__PURE__*/React__default.createElement(LuxityGraphQLDropdownSelector, {
+      baseQueryLimit: 1000,
+      title: "Materials",
+      queryId: "getMaterials",
+      baseClass: "material-selector",
+      identifier: "material-selector",
+      query_arguments: brands,
+      onChange: onChange,
+      graphApi: graphApi,
+      getGraphQuery: getGraphQuery,
+      resultProcessor: resultProcessor,
+      requestInstance: requestInstance
+    });
+  };
+
+  MaterialSelector.defaultProps = {
+    resultProcessor: function resultProcessor(result) {
+      return result.data.data.luxity_materials.data.map(function (_ref2) {
+        var id = _ref2.id,
+            name = _ref2.name;
+        return {
+          label: name,
+          value: id
+        };
+      });
+    }
+  };
+
+  var _templateObject$M, _templateObject2$a, _templateObject3$5, _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$M || (_templateObject$M = _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;
@@ -11169,7 +11540,9 @@
     styles: [],
     gender: [],
     request: _objectSpread2({}, request),
-    isCategoriesShown: false
+    isCategoriesShown: false,
+    models: [],
+    materials: []
   };
   /**
    * Generates Interest UI and submits graph payloads as a highly specialised component
@@ -11223,7 +11596,7 @@
       _defineProperty(_assertThisInitialized(_this), "onBrandsChanged", function (brandsArray) {
         _this.setState({
           brands: brandsArray.map(function (brand) {
-            return brand.id;
+            return brand.value;
           })
         });
       });
@@ -11244,6 +11617,22 @@
         });
       });
 
+      _defineProperty(_assertThisInitialized(_this), "onModelsChanged", function (modelsArray) {
+        _this.setState({
+          models: modelsArray.map(function (model) {
+            return model.value;
+          })
+        });
+      });
+
+      _defineProperty(_assertThisInitialized(_this), "onMaterialsChanged", function (materialsArray) {
+        _this.setState({
+          materials: materialsArray.map(function (material) {
+            return material.value;
+          })
+        });
+      });
+
       _defineProperty(_assertThisInitialized(_this), "payloadIsValid", function () {
         // price/shoe-size always have initial values as soon as category is set
         var category_type = _this.state.category_type;
@@ -11267,7 +11656,9 @@
             styles = _this$state.styles,
             category_type = _this$state.category_type,
             requestState = _this$state.request,
-            gender = _this$state.gender;
+            gender = _this$state.gender,
+            models = _this$state.models,
+            materials = _this$state.materials;
         var payloadGender = gender[0];
 
         if (gender.length > 1 || !gender.length) {
@@ -11281,7 +11672,9 @@
           max_price: max_price,
           styles: styles,
           gender: payloadGender,
-          request: requestState
+          request: requestState,
+          models: models,
+          materials: materials
         };
         var shoeSizesPayload = category_type === interestCategories.SHOES ? {
           min_shoe_size_id: min_shoe_size_id,
@@ -11338,14 +11731,17 @@
       _defineProperty(_assertThisInitialized(_this), "render", function () {
         var _this$state2 = _this.state,
             category_type = _this$state2.category_type,
-            fetching = _this$state2.request.fetching;
+            fetching = _this$state2.request.fetching,
+            brands = _this$state2.brands;
         var _this$props = _this.props,
             requestInstance = _this$props.requestInstance,
             baseGraphApi = _this$props.baseGraphApi,
             getBrandsGraphQuery = _this$props.getBrandsGraphQuery,
             getStylesGraphQuery = _this$props.getStylesGraphQuery,
             getShoesGraphQuery = _this$props.getShoesGraphQuery,
-            defaultShoeSizeType = _this$props.defaultShoeSizeType;
+            defaultShoeSizeType = _this$props.defaultShoeSizeType,
+            getModelsGraphQuery = _this$props.getModelsGraphQuery,
+            getMaterialsGraphQuery = _this$props.getMaterialsGraphQuery;
         return /*#__PURE__*/React__default.createElement(React.Fragment, null, !_this.state.isCategoriesShown && /*#__PURE__*/React__default.createElement(AddInterestButtonContainer, {
           onClick: _this.onAddInterestClick
         }, /*#__PURE__*/React__default.createElement(AddInterestButton, null, "Add Interest"), /*#__PURE__*/React__default.createElement(AddIcon, {
@@ -11361,7 +11757,19 @@
           requestInstance: requestInstance,
           graphApi: "".concat(baseGraphApi, "?id=getBrands"),
           getGraphQuery: getBrandsGraphQuery
-        }), category_type === interestCategories.SHOES && /*#__PURE__*/React__default.createElement(WrappedShoeSizeSelector, {
+        }), brands.length > 0 && /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(ModelSelector, {
+          brands: brands,
+          getGraphQuery: getModelsGraphQuery,
+          graphApi: "".concat(baseGraphApi, "?id=getModels"),
+          requestInstance: requestInstance,
+          onChange: _this.onModelsChanged
+        }), /*#__PURE__*/React__default.createElement(MaterialSelector, {
+          brands: brands,
+          getGraphQuery: getMaterialsGraphQuery,
+          graphApi: "".concat(baseGraphApi, "?id=getMaterials"),
+          requestInstance: requestInstance,
+          onChange: _this.onMaterialsChanged
+        })), category_type === interestCategories.SHOES && /*#__PURE__*/React__default.createElement(WrappedShoeSizeSelector, {
           defaultShoeSizeType: defaultShoeSizeType,
           getGraphQuery: getShoesGraphQuery,
           graphApi: "".concat(baseGraphApi, "?id=shoeSizeQuery"),
@@ -11408,8 +11816,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$N;
+  var MyInterestTitleHeadingContainer = styled__default.div(_templateObject$N || (_templateObject$N = _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;
@@ -11432,6 +11840,10 @@
       className: "heading-title"
     }, "Style"), /*#__PURE__*/React__default.createElement("div", {
       className: "heading-title"
+    }, "Models"), /*#__PURE__*/React__default.createElement("div", {
+      className: "heading-title"
+    }, "Materials"), /*#__PURE__*/React__default.createElement("div", {
+      className: "heading-title"
     }, "Shoe Size")), /*#__PURE__*/React__default.createElement("div", {
       className: "heading-title-empty"
     }));
@@ -11439,8 +11851,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$O;
+  var SvgWrapper$2 = styled__default.span(_templateObject$O || (_templateObject$O = _taggedTemplateLiteral(["\n  svg {\n    path {\n      fill: ", ";\n    }\n  }\n"])), function (props) {
     return props.theme.colors.primary;
   });
   var AccountIcon = themed(function () {
@@ -11522,6 +11934,8 @@
             getBrandsGraphQuery = _this$props2.getBrandsGraphQuery,
             getStylesGraphQuery = _this$props2.getStylesGraphQuery,
             getShoesGraphQuery = _this$props2.getShoesGraphQuery,
+            getModelsGraphQuery = _this$props2.getModelsGraphQuery,
+            getMaterialsGraphQuery = _this$props2.getMaterialsGraphQuery,
             deleteInterestApi = _this$props2.deleteInterestApi,
             setSchedule = _this$props2.setSchedule,
             getSchedule = _this$props2.getSchedule,
@@ -11555,7 +11969,9 @@
           getBrandsGraphQuery: getBrandsGraphQuery,
           getStylesGraphQuery: getStylesGraphQuery,
           getShoesGraphQuery: getShoesGraphQuery,
-          defaultShoeSizeType: defaultShoeSizeType
+          defaultShoeSizeType: defaultShoeSizeType,
+          getModelsGraphQuery: getModelsGraphQuery,
+          getMaterialsGraphQuery: getMaterialsGraphQuery
         }), interests.length > 0 ? /*#__PURE__*/React__default.createElement(MyInterestTitleHeading$1, null) : '', /*#__PURE__*/React__default.createElement(LuxityPageReady, {
           getRequestPromise: function getRequestPromise() {
             return _this2.triggerInterestRequest();
@@ -11586,6 +12002,405 @@
     defaultShoeSizeType: shoeSizeTypes.eu.value
   };
 
+  var _templateObject$P, _templateObject2$b, _templateObject3$6, _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;
+  var HeaderWrapper = styled__default.div(_templateObject$P || (_templateObject$P = _taggedTemplateLiteral(["\n   {\n    display: inline-block;\n    background-color: ", ";\n    position: relative;\n    width: 100%;\n  }\n"])), function (props) {
+    return props.theme.rareStepColors.ntrlMin;
+  });
+  var PageContainer = styled__default.div(_templateObject2$b || (_templateObject2$b = _taggedTemplateLiteral(["\n   {\n    max-width: ", ";\n    margin: 0 auto;\n    width: 100%;\n    padding: 0 5%;\n    display: flex;\n    justify-content: space-between;\n  }\n"])), function (props) {
+    return props.theme.rareStepPageSizes.container;
+  });
+  var HeaderContainer = styled__default.div(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    justify-content: space-between;\n    padding: ", " 5%;\n    max-width: ", ";\n    margin: 0 auto;\n    width: 100%;\n  }\n"])), function (props) {
+    return props.theme.marginPaddings[3];
+  }, function (props) {
+    return props.theme.rareStepPageSizes.container;
+  });
+  var LogoFigure = styled__default.div(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n"])));
+  var LogoImage = styled__default.img(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteral(["\n   {\n    width: 200px;\n    height: 70px;\n  }\n"])));
+  var CurrencyFlagIcon = styled__default.img(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n   {\n    width: 25px;\n    height: 15px;\n    margin-top: 9px;\n    margin-right: 10px;\n  }\n"])));
+  var SellToUsLink = styled__default.a(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n   {\n    color: ", ";\n    font-weight: ", ";\n    font-size: ", ";\n    padding-top: 10px;\n    text-transform: uppercase;\n    letter-spacing: 1px;\n    cursor: pointer;\n\n    &:hover,\n    &:active {\n      color: ", ";\n      text-decoration: none;\n    }\n  }\n"])), function (props) {
+    return props.theme.rareStepColors.secondary;
+  }, function (props) {
+    return props.theme.rareStepFontWeights.bold;
+  }, function (props) {
+    return props.theme.rareStepFontSize.h5;
+  }, function (props) {
+    return props.theme.rareStepColors.secondary;
+  });
+  var HeaderIconsContainer = styled__default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    align-items: center;\n  }\n"])));
+  var HeaderIcon = styled__default.img(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n   {\n    width: 30px;\n    height: 30px;\n    margin-left: ", ";\n    cursor: pointer;\n  }\n"])), function (props) {
+    return props.theme.marginPaddings[3];
+  });
+  var NavigationContainer = styled__default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    justify-content: space-between;\n    background-color: ", ";\n    padding-top: ", ";\n  }\n"])), function (props) {
+    return props.theme.rareStepColors.primary;
+  }, function (props) {
+    return props.theme.marginPaddings[1];
+  });
+  var NavigationLink = styled__default.a(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    flex-wrap: no-wrap;\n    align-items: center;\n    color: ", ";\n    font-size: ", ";\n    margin-right: ", ";\n    padding-top: 2px;\n    padding-bottom: ", ";\n    cursor: pointer;\n    border-bottom: 2px solid ", ";\n\n    &:last-child {\n      margin-right: 0;\n    }\n\n    &:hover,\n    &:active {\n      color: ", ";\n      text-decoration: none;\n      border-bottom: 2px solid ", ";\n    }\n  }\n"])), function (props) {
+    return props.theme.rareStepColors.ntrlMin;
+  }, function (props) {
+    return props.theme.rareStepFontSize.h5;
+  }, function (props) {
+    return props.theme.marginPaddings[5];
+  }, function (props) {
+    return props.theme.marginPaddings[1];
+  }, function (props) {
+    return props.theme.rareStepColors.primary;
+  }, function (props) {
+    return props.theme.rareStepColors.ntrlMin;
+  }, function (props) {
+    return props.theme.rareStepColors.secondary;
+  });
+  var NavigationLinks = styled__default.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n  }\n"])));
+  var Dropdown = styled__default.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    background-color: ", ";\n    padding: ", " 0;\n    border-top: 1px solid ", ";\n    font-size: ", ";\n    position: absolute;\n    width: 100%;\n  }\n"])), function (props) {
+    return props.theme.rareStepColors.primary;
+  }, function (props) {
+    return props.theme.marginPaddings[4];
+  }, function (props) {
+    return props.theme.rareStepColors.ntrl40;
+  }, function (props) {
+    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-left: 1px solid ", ";\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;
+  }, function (props) {
+    return props.theme.rareStepColors.ntrl40;
+  });
+  var DropdownModelsList = 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];
+  });
+  var DropdownImage = styled__default.img(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n   {\n    width: 90%;\n    height: 100%;\n    object-fit: cover;\n    margin-left: auto;\n  }\n"])));
+  var DropdownLink = styled__default.a(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n   {\n    color: ", ";\n    padding-bottom: ", ";\n    cursor: pointer;\n\n    &:hover,\n    &:active {\n      color: ", ";\n      text-decoration: underline;\n    }\n  }\n"])), function (props) {
+    return props.theme.rareStepColors.ntrlMin;
+  }, function (props) {
+    return props.theme.marginPaddings[0];
+  }, function (props) {
+    return props.theme.rareStepColors.ntrlMin;
+  });
+  var DropdownBrandLinkContainer = styled__default.div(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n\n    &:hover {\n      cursor: pointer;\n\n      hr {\n        display: block;\n      }\n\n      a {\n        font-weight: ", ";\n      }\n    }\n  }\n"])), function (props) {
+    return props.theme.rareStepFontWeights.bold;
+  });
+  var DropdownBrandLinkHR = styled__default.hr(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n   {\n    display: none;\n    width: 20px;\n    margin: 10px 10px 0 0;\n    color: ", ";\n    height: 1px;\n    border: 1px solid ", ";\n  }\n"])), function (props) {
+    return props.theme.rareStepColors.secondary;
+  }, function (props) {
+    return props.theme.rareStepColors.secondary;
+  });
+  var DropdownBrandLink = styled__default.a(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n   {\n    color: ", ";\n    padding-bottom: 0.5rem;\n\n    &:hover,\n    &:active {\n      color: ", ";\n      text-decoration: none;\n      font-weight: ", ";\n    }\n  }\n"])), function (props) {
+    return props.theme.rareStepColors.ntrlMin;
+  }, function (props) {
+    return props.theme.rareStepColors.ntrlMin;
+  }, function (props) {
+    return props.theme.rareStepFontWeights.bold;
+  });
+  var DropdownNavigatorIcon = styled__default.img(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n   {\n    width: 15px;\n    height: 12px;\n    margin-left: ", ";\n  }\n"])), function (props) {
+    return props.theme.marginPaddings[0];
+  });
+  var SellToUsHR = styled__default.hr(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n   {\n    width: 80px;\n    margin-top: 20px;\n    color: ", ";\n    border: 1px solid ", ";\n    margin-right: 10px;\n  }\n"])), function (props) {
+    return props.theme.rareStepColors.secondary;
+  }, function (props) {
+    return props.theme.rareStepColors.secondary;
+  });
+  var SearchContainer = styled__default.div(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    padding: ", "\n      ", ";\n    background-color: ", ";\n    align-items: center;\n    border-top: 1px solid ", ";\n  }\n"])), function (props) {
+    return props.theme.marginPaddings[1];
+  }, function (props) {
+    return props.theme.marginPaddings[3];
+  }, function (props) {
+    return props.theme.rareStepColors.primary;
+  }, function (props) {
+    return props.theme.rareStepColors.ntrl40;
+  });
+  var SearchInput = styled__default.input(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n   {\n    width: 50%;\n    font-size: ", ";\n    padding-bottom: ", ";\n    background-color: ", ";\n    color: ", ";\n    border: none;\n    margin-left: ", ";\n\n    &:active,\n    &:focus,\n    &:focus-visible {\n      outline: none;\n      border: none;\n    }\n\n    &::placeholder {\n      color: ", ";\n    }\n  }\n"])), function (props) {
+    return props.theme.rareStepFontSize.footerTitle;
+  }, function (props) {
+    return props.theme.marginPaddings[0];
+  }, function (props) {
+    return props.theme.rareStepColors.primary;
+  }, function (props) {
+    return props.theme.rareStepColors.ntrl40;
+  }, function (props) {
+    return props.theme.marginPaddings[3];
+  }, function (props) {
+    return props.theme.rareStepColors.ntrl40;
+  });
+  var SearchIcon = styled__default.img(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["\n   {\n    width: 20px;\n    height: 20px;\n    cursor: pointer;\n    margin-bottom: 7px;\n  }\n"])));
+  var CloseIcon = styled__default.img(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["\n   {\n    width: 20px;\n    height: 20px;\n    margin-left: auto;\n    cursor: pointer;\n  }\n"])));
+
+  var DropdownSearch = function DropdownSearch(_ref) {
+    var close_icon_url = _ref.close_icon_url,
+        navigation_search_icon_url = _ref.navigation_search_icon_url,
+        wordpress_site_url = _ref.wordpress_site_url,
+        toggleSearch = _ref.toggleSearch;
+    var searchInputRef = React.useRef(null);
+
+    var handleOnSearch = function handleOnSearch() {
+      window.location.replace("".concat(wordpress_site_url, "?post_type=product&s=").concat(searchInputRef.current.value));
+    };
+
+    var handleKeyDown = function handleKeyDown(e) {
+      if (e.key === 'Enter') {
+        handleOnSearch();
+      }
+    };
+
+    return /*#__PURE__*/React__default.createElement(SearchContainer, null, /*#__PURE__*/React__default.createElement(SearchIcon, {
+      src: navigation_search_icon_url,
+      onClick: handleOnSearch
+    }), /*#__PURE__*/React__default.createElement(SearchInput, {
+      ref: searchInputRef,
+      placeholder: "Search...",
+      onKeyDown: handleKeyDown
+    }), /*#__PURE__*/React__default.createElement(CloseIcon, {
+      src: close_icon_url,
+      onClick: toggleSearch
+    }));
+  };
+
+  var HeaderDropdown = function HeaderDropdown(_ref) {
+    var _header_dropdown_prod;
+
+    var header_dropdown_product_object = _ref.header_dropdown_product_object,
+        handleShowDropdown = _ref.handleShowDropdown,
+        handleHideDropdown = _ref.handleHideDropdown;
+
+    var _useState = React.useState([]),
+        _useState2 = _slicedToArray(_useState, 2),
+        currentModels = _useState2[0],
+        setCurrentModels = _useState2[1];
+
+    var _useState3 = React.useState(null),
+        _useState4 = _slicedToArray(_useState3, 2),
+        currentBrand = _useState4[0],
+        setCurrentBrand = _useState4[1];
+
+    var handleBrandHover = function handleBrandHover(brand) {
+      setCurrentBrand(brand);
+      setCurrentModels(brand.models);
+    };
+
+    return /*#__PURE__*/React__default.createElement(Dropdown, {
+      onMouseOver: handleShowDropdown,
+      onMouseOut: handleHideDropdown
+    }, /*#__PURE__*/React__default.createElement(PageContainer, null, /*#__PURE__*/React__default.createElement(DropdownBrands, null, header_dropdown_product_object === null || header_dropdown_product_object === void 0 ? void 0 : (_header_dropdown_prod = header_dropdown_product_object.brands) === null || _header_dropdown_prod === void 0 ? void 0 : _header_dropdown_prod.map(function (brand, index) {
+      return /*#__PURE__*/React__default.createElement(DropdownBrandLinkContainer, {
+        key: index,
+        onMouseOver: function onMouseOver() {
+          return handleBrandHover(brand);
+        }
+      }, /*#__PURE__*/React__default.createElement(DropdownBrandLinkHR, null), /*#__PURE__*/React__default.createElement(DropdownBrandLink, null, brand.brand_name));
+    })), /*#__PURE__*/React__default.createElement(DropdownModels, null, currentModels === null || currentModels === void 0 ? void 0 : currentModels.map(function (model, index) {
+      return /*#__PURE__*/React__default.createElement(DropdownModelsList, null, /*#__PURE__*/React__default.createElement(DropdownLink, {
+        key: index
+      }, model.model_name));
+    })), /*#__PURE__*/React__default.createElement(DropdownFigure, null, (currentBrand === null || currentBrand === void 0 ? void 0 : currentBrand.brand_image_url) && /*#__PURE__*/React__default.createElement(DropdownImage, {
+      src: currentBrand === null || currentBrand === void 0 ? void 0 : currentBrand.brand_image_url
+    }))));
+  };
+
+  var RareStepHeader = function RareStepHeader(_ref) {
+    var header_logo_img_url = _ref.header_logo_img_url,
+        search_icon_url = _ref.search_icon_url,
+        cart_icon_url = _ref.cart_icon_url,
+        user_icon_url = _ref.user_icon_url,
+        interest_icon_url = _ref.interest_icon_url,
+        dropdown_closed_icon_url = _ref.dropdown_closed_icon_url,
+        dropdown_open_icon_url = _ref.dropdown_open_icon_url,
+        currency_flag_icon_url = _ref.currency_flag_icon_url,
+        close_icon_url = _ref.close_icon_url,
+        navigation_search_icon_url = _ref.navigation_search_icon_url,
+        wordpress_site_url = _ref.wordpress_site_url,
+        header_dropdown_product_object = _ref.header_dropdown_product_object;
+
+    var _useState = React.useState(false),
+        _useState2 = _slicedToArray(_useState, 2),
+        showDropdown = _useState2[0],
+        setShowDropdown = _useState2[1];
+
+    var timeoutIdRef = React.useRef(null);
+
+    var _useState3 = React.useState(false),
+        _useState4 = _slicedToArray(_useState3, 2),
+        showSearch = _useState4[0],
+        setShowSearch = _useState4[1];
+
+    var toggleSearch = function toggleSearch() {
+      setShowSearch(!showSearch);
+    };
+
+    var handleShowDropdown = function handleShowDropdown() {
+      clearTimeout(timeoutIdRef.current);
+      setShowDropdown(true);
+    };
+
+    var handleHideDropdown = function handleHideDropdown() {
+      timeoutIdRef.current = setTimeout(function () {
+        setShowDropdown(false);
+      }, 500);
+    };
+
+    return /*#__PURE__*/React__default.createElement(HeaderWrapper, null, /*#__PURE__*/React__default.createElement(HeaderContainer, null, /*#__PURE__*/React__default.createElement(LogoFigure, null, /*#__PURE__*/React__default.createElement(LogoImage, {
+      src: header_logo_img_url
+    })), /*#__PURE__*/React__default.createElement(HeaderIconsContainer, null, /*#__PURE__*/React__default.createElement(SellToUsHR, null), /*#__PURE__*/React__default.createElement(SellToUsLink, null, "Sell to us"), /*#__PURE__*/React__default.createElement(HeaderIcon, {
+      src: search_icon_url,
+      onClick: toggleSearch
+    }), /*#__PURE__*/React__default.createElement(HeaderIcon, {
+      src: interest_icon_url
+    }), /*#__PURE__*/React__default.createElement(HeaderIcon, {
+      src: user_icon_url
+    }), /*#__PURE__*/React__default.createElement(HeaderIcon, {
+      src: cart_icon_url
+    }))), /*#__PURE__*/React__default.createElement(NavigationContainer, null, /*#__PURE__*/React__default.createElement(PageContainer, null, /*#__PURE__*/React__default.createElement(NavigationLinks, null, /*#__PURE__*/React__default.createElement(NavigationLink, null, "New Arrivals"), /*#__PURE__*/React__default.createElement(NavigationLink, {
+      onMouseOver: handleShowDropdown,
+      onMouseOut: handleHideDropdown
+    }, header_dropdown_product_object.product_type, showDropdown ? /*#__PURE__*/React__default.createElement(DropdownNavigatorIcon, {
+      src: dropdown_closed_icon_url
+    }) : /*#__PURE__*/React__default.createElement(DropdownNavigatorIcon, {
+      src: dropdown_open_icon_url
+    })), /*#__PURE__*/React__default.createElement(NavigationLink, null, "Create Your Interests"), /*#__PURE__*/React__default.createElement(NavigationLink, null, "Rare Step Finder")), /*#__PURE__*/React__default.createElement(NavigationLinks, null, /*#__PURE__*/React__default.createElement(NavigationLink, null, "Our Story"), /*#__PURE__*/React__default.createElement(NavigationLink, null, "Blog"), /*#__PURE__*/React__default.createElement(NavigationLink, null, "Contact Us"), /*#__PURE__*/React__default.createElement(CurrencyFlagIcon, {
+      src: currency_flag_icon_url
+    }), /*#__PURE__*/React__default.createElement(NavigationLink, null, "South African (ZAR, R)")))), showSearch && /*#__PURE__*/React__default.createElement(DropdownSearch, {
+      close_icon_url: close_icon_url,
+      navigation_search_icon_url: navigation_search_icon_url,
+      wordpress_site_url: wordpress_site_url,
+      toggleSearch: toggleSearch
+    }), showDropdown && /*#__PURE__*/React__default.createElement(HeaderDropdown, {
+      header_dropdown_product_object: header_dropdown_product_object,
+      handleShowDropdown: handleShowDropdown,
+      handleHideDropdown: handleHideDropdown
+    }));
+  };
+
+  var index$3 = themed(RareStepHeader);
+
+  var _templateObject$Q, _templateObject2$c, _templateObject3$7, _templateObject4$5, _templateObject5$3, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1;
+  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;
+  }, function (props) {
+    return props.theme.marginPaddings[4];
+  }, function (props) {
+    return props.theme.rareStepFontSize.h5;
+  });
+  var PageContainer$1 = styled__default.div(_templateObject2$c || (_templateObject2$c = _taggedTemplateLiteral(["\n   {\n    max-width: ", ";\n    margin: 0 auto;\n    width: 100%;\n    padding: 0 5%;\n    display: flex;\n    justify-content: space-between;\n  }\n"])), function (props) {
+    return props.theme.rareStepPageSizes.container;
+  });
+  var FooterLinksWrapper = styled__default.div(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    flex-basis: 70%;\n    padding-bottom: ", ";\n  }\n"])), function (props) {
+    return props.theme.marginPaddings[4];
+  });
+  var FooterLinksContainer = styled__default.div(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    padding-right: ", ";\n  }\n"])), function (props) {
+    return props.theme.marginPaddings[4];
+  });
+  var FooterTitleLink = styled__default.a(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteral(["\n   {\n    text-transform: uppercase;\n    color: ", ";\n    margin-bottom: ", ";\n    cursor: pointer;\n    font-weight: ", ";\n    font-size: ", ";\n    text-decoration: none;\n\n    &:hover,\n    &:active {\n      color: ", ";\n      text-decoration: underline;\n    }\n  }\n"])), function (props) {
+    return props.theme.rareStepColors.ntrlMin;
+  }, function (props) {
+    return props.theme.marginPaddings[1];
+  }, function (props) {
+    return props.theme.rareStepFontWeights.bold;
+  }, function (props) {
+    return props.theme.rareStepFontSize.footerTitle;
+  }, function (props) {
+    return props.theme.rareStepColors.ntrlMin;
+  });
+  var FooterLink = styled__default.a(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteral(["\n   {\n    color: ", ";\n    cursor: pointer;\n    margin-bottom: ", ";\n    font-weight: ", ";\n    text-decoration: none;\n\n    &:hover,\n    &:active {\n      color: ", ";\n      text-decoration: underline;\n    }\n  }\n"])), function (props) {
+    return props.theme.rareStepColors.ntrlMin;
+  }, function (props) {
+    return props.theme.space[2];
+  }, function (props) {
+    return props.theme.rareStepFontWeights.normal;
+  }, function (props) {
+    return props.theme.rareStepColors.ntrlMin;
+  });
+  var FooterImage = styled__default.img(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteral(["\n   {\n    width: 100%;\n    height: 100%;\n    max-height: 300px;\n    object-fit: cover;\n  }\n"])));
+  var FooterImageWrapper = styled__default.div(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteral(["\n   {\n    flex-basis: 30%;\n    padding-bottom: ", ";\n  }\n"])), function (props) {
+    return props.theme.marginPaddings[4];
+  });
+  var FooterLogo = styled__default.img(_templateObject9$1 || (_templateObject9$1 = _taggedTemplateLiteral(["\n   {\n    width: 120px;\n    height: 50px;\n    margin-top: ", ";\n  }\n"])), function (props) {
+    return props.theme.marginPaddings[5];
+  });
+  var SocialIconWrapper = styled__default.div(_templateObject10$1 || (_templateObject10$1 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n  }\n"])));
+  var SocialIcon = styled__default.img(_templateObject11$1 || (_templateObject11$1 = _taggedTemplateLiteral(["\n   {\n    width: 30px;\n    height: 30px;\n    margin-right: ", ";\n  }\n"])), function (props) {
+    return props.theme.marginPaddings[0];
+  });
+  var FooterCopyrightContainer = styled__default.div(_templateObject12$1 || (_templateObject12$1 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    padding: ", " 0;\n    border-top: 1px solid ", ";\n  }\n"])), function (props) {
+    return props.theme.marginPaddings[1];
+  }, function (props) {
+    return props.theme.rareStepColors.ntrlMin;
+  });
+  var FooterCopyrightText = styled__default.div(_templateObject13$1 || (_templateObject13$1 = _taggedTemplateLiteral(["\n   {\n    color: ", ";\n    font-weight: ", ";\n  }\n"])), function (props) {
+    return props.theme.rareStepColors.ntrlMin;
+  }, function (props) {
+    return props.theme.rareStepFontWeights.normal;
+  });
+  var FooterPayments = styled__default.div(_templateObject14$1 || (_templateObject14$1 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n  }\n"])));
+  var FooterPaymentImage = styled__default.img(_templateObject15$1 || (_templateObject15$1 = _taggedTemplateLiteral(["\n   {\n    width: 100px;\n    height: 30px;\n  }\n"])));
+
+  var FooterCopyright = function FooterCopyright(_ref) {
+    var payment_image = _ref.payment_image;
+    return /*#__PURE__*/React__default.createElement(FooterCopyrightContainer, null, /*#__PURE__*/React__default.createElement(PageContainer$1, null, /*#__PURE__*/React__default.createElement(FooterCopyrightText, null, "\xA9".concat(new Date().getFullYear(), " \u2022 Rare Step \u2022 Website Developed by B Online")), /*#__PURE__*/React__default.createElement(FooterPayments, null, /*#__PURE__*/React__default.createElement(FooterPaymentImage, {
+      src: payment_image
+    }))));
+  };
+
+  var RareStepFooter = function RareStepFooter(_ref) {
+    var footer_image_url = _ref.footer_image_url,
+        footer_logo_image_url = _ref.footer_logo_image_url,
+        facebook_url = _ref.facebook_url,
+        facebook_icon_url = _ref.facebook_icon_url,
+        instagram_url = _ref.instagram_url,
+        instagram_image_url = _ref.instagram_image_url,
+        payment_image = _ref.payment_image;
+    return /*#__PURE__*/React__default.createElement(FooterWrapper, null, /*#__PURE__*/React__default.createElement(PageContainer$1, null, /*#__PURE__*/React__default.createElement(FooterLinksWrapper, null, /*#__PURE__*/React__default.createElement(FooterLinksContainer, null, /*#__PURE__*/React__default.createElement(FooterTitleLink, {
+      href: "/contact-us"
+    }, "Contact"), /*#__PURE__*/React__default.createElement(FooterLink, {
+      href: "/contact-us"
+    }, "Contact Us"), /*#__PURE__*/React__default.createElement(FooterLink, null), /*#__PURE__*/React__default.createElement(FooterLink, null, "000 000 0000"), /*#__PURE__*/React__default.createElement(FooterLink, {
+      href: "mailto:myorder@rarestep.co.za"
+    }, "myorder@rarestep.co.za"), /*#__PURE__*/React__default.createElement(FooterLogo, {
+      src: footer_logo_image_url
+    }), /*#__PURE__*/React__default.createElement(FooterTitleLink, null, "Connect"), /*#__PURE__*/React__default.createElement(SocialIconWrapper, null, /*#__PURE__*/React__default.createElement(FooterLink, {
+      href: facebook_url
+    }, /*#__PURE__*/React__default.createElement(SocialIcon, {
+      src: facebook_icon_url
+    })), /*#__PURE__*/React__default.createElement(FooterLink, {
+      href: instagram_url
+    }, /*#__PURE__*/React__default.createElement(SocialIcon, {
+      src: instagram_image_url
+    })))), /*#__PURE__*/React__default.createElement(FooterLinksContainer, null, /*#__PURE__*/React__default.createElement(FooterTitleLink, {
+      href: "/buy-sell"
+    }, "Buy & Sell"), /*#__PURE__*/React__default.createElement(FooterLink, {
+      href: "/product-category/brands"
+    }, "New Arrival"), /*#__PURE__*/React__default.createElement(FooterLink, {
+      href: "/product-category/sneakers/brands/"
+    }, "Sneakers"), /*#__PURE__*/React__default.createElement(FooterLink, null, "Create Your Interest"), /*#__PURE__*/React__default.createElement(FooterLink, {
+      href: "/sell-to-us"
+    }, "Sell To Us")), /*#__PURE__*/React__default.createElement(FooterLinksContainer, null, /*#__PURE__*/React__default.createElement(FooterTitleLink, {
+      href: "/about"
+    }, "Company"), /*#__PURE__*/React__default.createElement(FooterLink, {
+      href: "/about"
+    }, "Our Story"), /*#__PURE__*/React__default.createElement(FooterLink, {
+      href: "/blog"
+    }, "Sneakers")), /*#__PURE__*/React__default.createElement(FooterLinksContainer, null, /*#__PURE__*/React__default.createElement(FooterTitleLink, {
+      href: "/faq"
+    }, "Help"), /*#__PURE__*/React__default.createElement(FooterLink, {
+      href: "/faq"
+    }, "FAQs"), /*#__PURE__*/React__default.createElement(FooterLink, {
+      href: "/shipping"
+    }, "Shipping & Returns"), /*#__PURE__*/React__default.createElement(FooterLink, {
+      href: "/terms-conditions"
+    }, "Terms & Conditions"), /*#__PURE__*/React__default.createElement(FooterLink, {
+      href: "/privacy"
+    }, "Privacy Policy"))), /*#__PURE__*/React__default.createElement(FooterImageWrapper, null, /*#__PURE__*/React__default.createElement(FooterImage, {
+      src: footer_image_url
+    }))), /*#__PURE__*/React__default.createElement(FooterCopyright, {
+      payment_image: payment_image
+    }));
+  };
+
+  var index$4 = themed(RareStepFooter);
+
   exports.Accordion = index;
   exports.Checkbox = LuxityCheckbox;
   exports.CheckboxFormWrapper = FormWrapper;
@@ -11603,6 +12418,8 @@
   exports.PrimaryButton = PrimaryButton$1;
   exports.RadioButtons = RadioButtons$1;
   exports.RadioButtonsFormWrapper = FormWrapper$1;
+  exports.RareStepFooter = index$4;
+  exports.RareStepHeader = index$3;
   exports.ReactSelectWrapper = ReactSelectWrapper;
   exports.SecondaryButton = SecondaryButton$1;
   exports.ShoeSizeSelector = ShoeSizeSelector;