@bonlineza/luxity-lib 2.31.0 → 2.31.1

package/GraphQLDropdownSelector.js

@@ -10982,11 +10982,16 @@
   var SubmitButton = styled__default.input(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteral(["\n  flex-basis: 15%;\n  margin-right: 5px;\n"])));
 
   var _templateObject$U;
+  var FooterWrapper$1 = styled__default.div(_templateObject$U || (_templateObject$U = _taggedTemplateLiteral(["\n   {\n    background-color: ", ";\n  }\n"])), function (props) {
+    return props.theme.colors.gray;
+  });
+
+  var _templateObject$V;
   var ALL_ITEM$1 = {
     label: 'ALL',
     value: 'ALL'
   };
-  var StyledMultiselector$1 = styled__default.div(_templateObject$U || (_templateObject$U = _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) {
+  var StyledMultiselector$1 = styled__default.div(_templateObject$V || (_templateObject$V = _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;

package/LuxityDesktopHeader.js

@@ -72,7 +72,9 @@
         categoryElements = _ref$categoryElements === void 0 ? [] : _ref$categoryElements,
         _ref$brandElements = _ref.brandElements,
         brandElements = _ref$brandElements === void 0 ? [] : _ref$brandElements,
-        productsUrl = _ref.productsUrl;
+        productsUrl = _ref.productsUrl,
+        categorySlug = _ref.categorySlug,
+        categoryTitle = _ref.categoryTitle;
     return /*#__PURE__*/React__default.createElement("div", {
       className: "dropdown"
     }, /*#__PURE__*/React__default.createElement("div", {
@@ -93,7 +95,10 @@
       className: "dropdown__title"
     }, "Brands"), /*#__PURE__*/React__default.createElement("div", {
       className: "dropdown__elements dropdown__elements--row"
-    }, !!brandElements.length && brandElements.map(function (brand) {
+    }, /*#__PURE__*/React__default.createElement("a", {
+      href: "".concat(productsUrl, "/").concat(categorySlug),
+      className: "dropdown__element"
+    }, "All ", categoryTitle), !!brandElements.length && brandElements.map(function (brand) {
       return /*#__PURE__*/React__default.createElement("a", {
         href: "".concat(productsUrl, "/").concat(brand === null || brand === void 0 ? void 0 : brand.slug),
         className: "dropdown__element",
@@ -150,6 +155,29 @@
     }, contactNumber)));
   };
 
+  var categories = {
+    shoes: {
+      name: 'Shoes',
+      slug: 'shoes'
+    },
+    bags: {
+      name: 'Bags',
+      slug: 'bags'
+    },
+    clothing: {
+      name: 'Clothing',
+      slug: 'apparel'
+    },
+    watches: {
+      name: 'Watches',
+      slug: 'watches'
+    },
+    accessories: {
+      name: 'Accessories',
+      slug: 'accessories'
+    }
+  };
+
   var LuxityDesktopHeader = function LuxityDesktopHeader(_ref) {
     var accountIcon = _ref.accountIcon,
         cartIcon = _ref.cartIcon,
@@ -159,7 +187,7 @@
         categoryElements = _ref.categoryElements,
         newBrandElements = _ref.newBrandElements,
         bagsElements = _ref.bagsElements,
-        shoesElement = _ref.shoesElement,
+        shoesElements = _ref.shoesElements,
         clothingElements = _ref.clothingElements,
         accessoriesElements = _ref.accessoriesElements,
         accessoriesCategoryElements = _ref.accessoriesCategoryElements,
@@ -240,7 +268,9 @@
       imageSrc: newBrandsImage,
       categoryElements: categoryElements,
       brandElements: newBrandElements,
-      productsUrl: productsUrl
+      productsUrl: productsUrl,
+      categorySlug: "brands",
+      categoryTitle: "Brands"
     }))), /*#__PURE__*/React__default.createElement("li", {
       className: "navbar__link"
     }, /*#__PURE__*/React__default.createElement("a", {
@@ -253,7 +283,9 @@
       imageSrc: bagsImage,
       categoryElements: categoryElements,
       brandElements: bagsElements,
-      productsUrl: productsUrl
+      productsUrl: productsUrl,
+      categorySlug: categories.bags.slug,
+      categoryTitle: categories.bags.name
     }))), /*#__PURE__*/React__default.createElement("li", {
       className: "navbar__link"
     }, /*#__PURE__*/React__default.createElement("a", {
@@ -265,8 +297,10 @@
       title: "Department",
       imageSrc: shoesImage,
       categoryElements: categoryElements,
-      brandElements: shoesElement,
-      productsUrl: productsUrl
+      brandElements: shoesElements,
+      productsUrl: productsUrl,
+      categorySlug: categories.shoes.slug,
+      categoryTitle: categories.shoes.name
     }))), /*#__PURE__*/React__default.createElement("li", {
       className: "navbar__link"
     }, /*#__PURE__*/React__default.createElement("a", {
@@ -279,7 +313,9 @@
       imageSrc: clothingImage,
       categoryElements: categoryElements,
       brandElements: clothingElements,
-      productsUrl: productsUrl
+      productsUrl: productsUrl,
+      categorySlug: categories.clothing.slug,
+      categoryTitle: categories.clothing.name
     }))), /*#__PURE__*/React__default.createElement("li", {
       className: "navbar__link"
     }, /*#__PURE__*/React__default.createElement("a", {
@@ -288,11 +324,13 @@
     }, "Accessories"), /*#__PURE__*/React__default.createElement("div", {
       className: "navbar__dropdown"
     }, /*#__PURE__*/React__default.createElement(Dropdown, {
-      title: "Department",
+      title: "Categories",
       imageSrc: accessoriesImage,
       categoryElements: accessoriesCategoryElements,
       brandElements: accessoriesElements,
-      productsUrl: productsUrl
+      productsUrl: productsUrl,
+      categorySlug: categories.accessories.slug,
+      categoryTitle: categories.accessories.name
     }))), /*#__PURE__*/React__default.createElement("li", {
       className: "navbar__link"
     }, /*#__PURE__*/React__default.createElement("a", {
@@ -305,7 +343,9 @@
       imageSrc: watchesImage,
       categoryElements: categoryElements,
       brandElements: watchesElements,
-      productsUrl: productsUrl
+      productsUrl: productsUrl,
+      categorySlug: categories.watches.slug,
+      categoryTitle: categories.watches.name
     }))), /*#__PURE__*/React__default.createElement("li", {
       className: "navbar__link"
     }, /*#__PURE__*/React__default.createElement("a", {

package/build/bundle.css

@@ -1 +1 @@
-.navbar{box-shadow:2px 2px 10px #dfdede;display:flex;padding-bottom:10px;padding-top:20px;position:relative}.navbar__mobile-wrapper{align-items:center;display:flex;flex-direction:column}.navbar__container{display:flex;padding:0 10%;width:100%}.navbar__body{flex-basis:60%}.navbar__wrapper{align-items:center;display:flex;justify-content:space-between;margin-bottom:20px;padding:0 10%;width:100%}.navbar__product-search-wrapper{align-items:center;display:flex;padding:0 20%;width:100%}.navbar__input-close-icon{height:auto;margin-bottom:10px;margin-left:10px;width:20px}.navbar__menu-icon{margin-top:10px;width:30px}.navbar__product-search{align-items:center;display:flex;max-width:545px;width:100%}.navbar__logo-wrapper{margin-right:18px;max-width:100%;width:255px}.navbar__logo{width:150px}.navbar__form-input{align-items:center;background:transparent;border:none;display:flex;font-size:12px;outline:none;padding:10px 10px 10px 0}.navbar__product-search{border:1px solid #dfdede;margin-bottom:10px}.navbar__section{display:flex;flex-direction:row;justify-content:space-between;width:100%}.navbar__link{display:inline-block;font-size:14px;font-weight:700;margin-right:18px;overflow:hidden;text-transform:uppercase;transition:.3s ease-in-out}.navbar__link:after{background-color:#000;content:"";display:block;height:2px;transition:width .25s ease-out;width:0}.navbar__link:hover:after{width:100%}.navbar__link:hover .navbar__dropdown{animation:fadeInDropdown .3s ease-in-out;display:block}.navbar__dropdown{background-color:#fff;box-shadow:5px 5px 5px #dfdede;display:none;left:0;padding-left:10%;padding-right:10%;position:absolute;width:100%;z-index:999}@keyframes fadeInDropdown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.navbar__company-link{font-size:13px;font-weight:400;list-style:none;margin-right:18px;text-decoration:none}.navbar__company-block{align-items:center;background-color:#000;color:#fff;display:flex;font-weight:700;height:35px;justify-content:center;margin-right:0;padding:0 18px;text-transform:uppercase}.navbar__input-search-icon{height:auto;margin:0 18px;width:15px}.navbar__nav-links{align-items:center;display:flex}.navbar__nav-links--wrap{flex-wrap:wrap}.navbar__icons{align-items:center;display:flex;height:40px;justify-content:flex-end}.navbar__icon{cursor:pointer;height:auto;margin-right:18px;width:20px}.navbar__cart-icon{position:relative}.navbar__cart-count{align-items:center;background-color:#000;border-radius:50%;bottom:50%;color:#fff;display:flex;font-size:13px;height:20px;justify-content:center;left:100%;position:absolute;width:20px}.footer__newsletter-section{align-items:center;background-color:#000;color:#fff;display:flex;justify-content:space-between;padding:2.265rem 10%}@media only screen and (max-width:879px){.footer__newsletter-section{flex-direction:column}}.footer__newsletter-icon{height:30px;position:absolute;right:0;top:0;width:32px}.footer__newsletter-form{position:relative}@media only screen and (max-width:879px){.footer__newsletter-form{margin-top:20px;width:100%}}.footer__newsletter-title{font-family:Martel Sans,sans-serif;font-size:14px;font-weight:700;letter-spacing:3px;margin-bottom:1.125rem;text-transform:uppercase}.footer__newsletter-text{font-size:14px}.footer__form-input{background-color:#000;border:none;border-bottom:1px solid #fff;color:#fff;height:30px;outline:none;width:100%}.footer__form-errors{color:#fff;margin-top:5px}.footer__main-section{align-items:flex-start;display:flex;justify-content:space-between;margin-bottom:50px;margin-top:80px}.footer__link-title{font-family:El Messiri;margin-bottom:20px;text-transform:uppercase}.footer__link-child{margin-top:50px}.footer__links{display:flex;flex-direction:column}.footer__link{color:#939393;cursor:pointer;font-size:14px;line-height:20px;margin-bottom:15px;text-align:left;text-decoration:none}.footer__link:hover{color:#000;text-decoration:underline}.footer__text{color:#939393;font-size:14px;line-height:20px;margin-bottom:15px;text-align:left;text-decoration:none}.footer__store-hours{margin-top:35px}.footer__copyrights-section{border-top:1px solid;display:flex;justify-content:space-between;padding-bottom:20px;padding-top:20px}.footer__logo{height:30px;width:135px}.footer__payment-icons{align-items:center;display:flex}.footer__wrapper{padding-left:10%;padding-right:10%}.footer__wrapper--desktop{display:block}@media only screen and (max-width:879px){.footer__wrapper--desktop{display:none}}.footer__wrapper--mobile{display:none}@media only screen and (max-width:879px){.footer__wrapper--mobile{display:block;padding-top:30px}}.footer__copyright{font-size:10px;line-height:22px}.footer__copyright--mobile{display:none}@media only screen and (max-width:879px){.footer__copyright--mobile{display:block;padding:30px 0}}.footer__section-row{display:flex;gap:50%}.side-nav{font-family:Martel Sans}.side-nav__overlay{background-color:rgba(78,73,73,.51);height:100%;opacity:0;position:fixed;top:0;transition:opacity .5s ease-out 0s,visibility .5s ease-out 0s;width:100%;z-index:99999}.side-nav__overlay--visible{opacity:1;visibility:visible}.side-nav__overlay--hidden{opacity:1;visibility:hidden}.side-nav__content{background-color:#fff;bottom:0;overflow-y:scroll;padding:1.5rem;position:fixed;top:0;transition:left .5s ease-in-out;width:80%;z-index:99999}.side-nav__content--hidden{display:none}.side-nav__content--open{left:0}.side-nav__content--closed{left:-100%}.side-nav__menu-title-wrapper{align-items:center;background-color:transparent;border:none;display:flex;justify-content:space-between;outline:none;width:100%}.side-nav__icon-container{float:right;margin-bottom:10px}.side-nav__menu-title{font-size:14px;font-weight:700;line-height:20px;text-transform:uppercase}.side-nav__accordion-icon{height:auto;width:15px}.side-nav__menu-item{margin-bottom:25px}.side-nav__close-icon{height:20px;margin-left:auto;width:20px}.side-nav__back-button-wrapper{align-items:center;display:flex;margin-bottom:25px}.side-nav__back-icon{height:20px;width:20px}.side-nav__back-button,.side-nav__sub-menu-title{font-weight:700;text-transform:uppercase}.side-nav__sub-menu-title{font-size:14px;margin-bottom:10px}.side-nav__elements{display:flex;flex-direction:column}.side-nav__element{color:#555;cursor:pointer;font-size:14px;font-weight:400;line-height:20px;margin-bottom:10px}.side-nav__sub-link{font-size:14px;font-weight:400;text-transform:capitalize}.side-nav__block-button{background-color:#000;color:#fff;font-weight:700;padding:10px 0;width:100%}.stores-dropdown{align-items:flex-start;display:flex;font-family:Martel Sans;gap:20px;padding-bottom:20px;padding-top:20px}.stores-dropdown__image{height:200px;-o-object-fit:cover;object-fit:cover;width:100%}.stores-dropdown__store-details{flex-basis:20%}.stores-dropdown__title{font-family:El Messiri}.stores-dropdown__main-title,.stores-dropdown__title{font-size:16px;font-weight:400;letter-spacing:3px;margin-top:20px}.stores-dropdown__main-title{font-weight:700;margin-bottom:10px}.stores-dropdown__open-days{font-size:12px;font-weight:700;line-height:20px}.stores-dropdown__open-hours{font-size:12px;font-weight:400;line-height:20px}.stores-dropdown__queries-title{font-family:El Messiri;font-size:16px;font-weight:400;letter-spacing:3px}.stores-dropdown__contact-details{font-size:16px;font-weight:700}.stores-dropdown__view-more{cursor:pointer;font-size:14px;font-weight:400;margin-top:10px;text-transform:capitalize}.dropdown{display:flex;justify-content:space-between;padding:20px 0}.dropdown__column{flex:1}.dropdown__column:nth-child(2){flex:2}.dropdown__title{font-family:El Messiri;font-size:16px;font-weight:700;letter-spacing:3px;line-height:1;margin-bottom:20px;text-transform:uppercase}.dropdown__elements{display:flex}.dropdown__elements--column{flex-direction:column}.dropdown__elements--row{flex-flow:row wrap;justify-content:flex-start}.dropdown__element{flex-basis:33.33%;font-family:Martel Sans;font-size:14px;font-weight:400;margin-bottom:10px;text-transform:capitalize}
+.footer__newsletter-section{align-items:center;background-color:#000;color:#fff;display:flex;justify-content:space-between;padding:2.265rem 10%}@media only screen and (max-width:879px){.footer__newsletter-section{flex-direction:column}}.footer__newsletter-icon{height:30px;position:absolute;right:0;top:0;width:32px}.footer__newsletter-form{position:relative}@media only screen and (max-width:879px){.footer__newsletter-form{margin-top:20px;width:100%}}.footer__newsletter-title{font-family:Martel Sans,sans-serif;font-size:14px;font-weight:700;letter-spacing:3px;margin-bottom:1.125rem;text-transform:uppercase}.footer__newsletter-text{font-size:14px}.footer__form-input{background-color:#000;border:none;border-bottom:1px solid #fff;color:#fff;height:30px;outline:none;width:100%}.footer__form-errors{color:#fff;margin-top:5px}.footer__main-section{align-items:flex-start;display:flex;justify-content:space-between;margin-bottom:50px;margin-top:80px}.footer__link-title{font-family:El Messiri;margin-bottom:20px;text-transform:uppercase}.footer__link-child{margin-top:50px}.footer__links{display:flex;flex-direction:column}.footer__link{color:#939393;cursor:pointer;font-size:14px;line-height:20px;margin-bottom:15px;text-align:left;text-decoration:none}.footer__link:hover{color:#000;text-decoration:underline}.footer__text{color:#939393;font-size:14px;line-height:20px;margin-bottom:15px;text-align:left;text-decoration:none}.footer__store-hours{margin-top:35px}.footer__copyrights-section{border-top:1px solid;display:flex;justify-content:space-between;padding-bottom:20px;padding-top:20px}.footer__logo{height:30px;width:135px}.footer__payment-icons{align-items:center;display:flex}.footer__wrapper{padding-left:10%;padding-right:10%}.footer__wrapper--desktop{display:block}@media only screen and (max-width:879px){.footer__wrapper--desktop{display:none}}.footer__wrapper--mobile{display:none}@media only screen and (max-width:879px){.footer__wrapper--mobile{display:block;padding-top:30px}}.footer__copyright{font-size:10px;line-height:22px}.footer__copyright--mobile{display:none}@media only screen and (max-width:879px){.footer__copyright--mobile{display:block;padding:30px 0}}.footer__section-row{display:flex;gap:50%}.side-nav{font-family:Martel Sans}.side-nav__overlay{background-color:rgba(78,73,73,.51);height:100%;opacity:0;position:fixed;top:0;transition:opacity .5s ease-out 0s,visibility .5s ease-out 0s;width:100%;z-index:99999}.side-nav__overlay--visible{opacity:1;visibility:visible}.side-nav__overlay--hidden{opacity:1;visibility:hidden}.side-nav__content{background-color:#fff;bottom:0;overflow-y:scroll;padding:1.5rem;position:fixed;top:0;transition:left .5s ease-in-out;width:80%;z-index:99999}.side-nav__content--hidden{display:none}.side-nav__content--open{left:0}.side-nav__content--closed{left:-100%}.side-nav__menu-title-wrapper{align-items:center;background-color:transparent;border:none;display:flex;justify-content:space-between;outline:none;width:100%}.side-nav__icon-container{float:right;margin-bottom:10px}.side-nav__menu-title{font-size:14px;font-weight:700;line-height:20px;text-transform:uppercase}.side-nav__accordion-icon{height:auto;width:15px}.side-nav__menu-item{margin-bottom:25px}.side-nav__close-icon{height:20px;margin-left:auto;width:20px}.side-nav__back-button-wrapper{align-items:center;display:flex;margin-bottom:25px}.side-nav__back-icon{height:20px;width:20px}.side-nav__back-button,.side-nav__sub-menu-title{font-weight:700;text-transform:uppercase}.side-nav__sub-menu-title{font-size:14px;margin-bottom:10px}.side-nav__elements{display:flex;flex-direction:column}.side-nav__element{color:#555;cursor:pointer;font-size:14px;font-weight:400;line-height:20px;margin-bottom:10px}.side-nav__sub-link{font-size:14px;font-weight:400;text-transform:capitalize}.side-nav__block-button{background-color:#000;color:#fff;font-weight:700;padding:10px 0;width:100%}.navbar{box-shadow:2px 2px 10px #dfdede;display:flex;padding-bottom:10px;padding-top:20px;position:relative}.navbar__mobile-wrapper{align-items:center;display:flex;flex-direction:column}.navbar__container{display:flex;padding:0 10%;width:100%}.navbar__body{flex-basis:60%}.navbar__wrapper{align-items:center;display:flex;justify-content:space-between;margin-bottom:20px;padding:0 10%;width:100%}.navbar__product-search-wrapper{align-items:center;display:flex;padding:0 20%;width:100%}.navbar__input-close-icon{height:auto;margin-bottom:10px;margin-left:10px;width:20px}.navbar__menu-icon{margin-top:10px;width:30px}.navbar__product-search{align-items:center;display:flex;max-width:545px;width:100%}.navbar__logo-wrapper{margin-right:18px;max-width:100%;width:255px}.navbar__logo{width:150px}.navbar__form-input{align-items:center;background:transparent;border:none;display:flex;font-size:12px;outline:none;padding:10px 10px 10px 0}.navbar__product-search{border:1px solid #dfdede;margin-bottom:10px}.navbar__section{display:flex;flex-direction:row;justify-content:space-between;width:100%}.navbar__link{display:inline-block;font-size:14px;font-weight:700;margin-right:18px;overflow:hidden;text-transform:uppercase;transition:.3s ease-in-out}.navbar__link:after{background-color:#000;content:"";display:block;height:2px;transition:width .25s ease-out;width:0}.navbar__link:hover:after{width:100%}.navbar__link:hover .navbar__dropdown{animation:fadeInDropdown .3s ease-in-out;display:block}.navbar__dropdown{background-color:#fff;box-shadow:5px 5px 5px #dfdede;display:none;left:0;padding-left:10%;padding-right:10%;position:absolute;width:100%;z-index:999}@keyframes fadeInDropdown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.navbar__company-link{font-size:13px;font-weight:400;list-style:none;margin-right:18px;text-decoration:none}.navbar__company-block{align-items:center;background-color:#000;color:#fff;display:flex;font-weight:700;height:35px;justify-content:center;margin-right:0;padding:0 18px;text-transform:uppercase}.navbar__input-search-icon{height:auto;margin:0 18px;width:15px}.navbar__nav-links{align-items:center;display:flex}.navbar__nav-links--wrap{flex-wrap:wrap}.navbar__icons{align-items:center;display:flex;height:40px;justify-content:flex-end}.navbar__icon{cursor:pointer;height:auto;margin-right:18px;width:20px}.navbar__cart-icon{position:relative}.navbar__cart-count{align-items:center;background-color:#000;border-radius:50%;bottom:50%;color:#fff;display:flex;font-size:13px;height:20px;justify-content:center;left:100%;position:absolute;width:20px}.stores-dropdown{align-items:flex-start;display:flex;font-family:Martel Sans;gap:20px;padding-bottom:20px;padding-top:20px}.stores-dropdown__image{height:200px;-o-object-fit:cover;object-fit:cover;width:100%}.stores-dropdown__store-details{flex-basis:20%}.stores-dropdown__title{font-family:El Messiri}.stores-dropdown__main-title,.stores-dropdown__title{font-size:16px;font-weight:400;letter-spacing:3px;margin-top:20px}.stores-dropdown__main-title{font-weight:700;margin-bottom:10px}.stores-dropdown__open-days{font-size:12px;font-weight:700;line-height:20px}.stores-dropdown__open-hours{font-size:12px;font-weight:400;line-height:20px}.stores-dropdown__queries-title{font-family:El Messiri;font-size:16px;font-weight:400;letter-spacing:3px}.stores-dropdown__contact-details{font-size:16px;font-weight:700}.stores-dropdown__view-more{cursor:pointer;font-size:14px;font-weight:400;margin-top:10px;text-transform:capitalize}.dropdown{display:flex;justify-content:space-between;padding:20px 0}.dropdown__column{flex:1}.dropdown__column:nth-child(2){flex:2}.dropdown__title{font-family:El Messiri;font-size:16px;font-weight:700;letter-spacing:3px;line-height:1;margin-bottom:20px;text-transform:uppercase}.dropdown__elements{display:flex}.dropdown__elements--column{flex-direction:column}.dropdown__elements--row{flex-flow:row wrap;justify-content:flex-start}.dropdown__element{flex-basis:33.33%;font-family:Martel Sans;font-size:14px;font-weight:400;margin-bottom:10px;text-transform:capitalize}

package/build/bundle.js

@@ -14384,7 +14384,9 @@
         categoryElements = _ref$categoryElements === void 0 ? [] : _ref$categoryElements,
         _ref$brandElements = _ref.brandElements,
         brandElements = _ref$brandElements === void 0 ? [] : _ref$brandElements,
-        productsUrl = _ref.productsUrl;
+        productsUrl = _ref.productsUrl,
+        categorySlug = _ref.categorySlug,
+        categoryTitle = _ref.categoryTitle;
     return /*#__PURE__*/React__default.createElement("div", {
       className: "dropdown"
     }, /*#__PURE__*/React__default.createElement("div", {
@@ -14405,7 +14407,10 @@
       className: "dropdown__title"
     }, "Brands"), /*#__PURE__*/React__default.createElement("div", {
       className: "dropdown__elements dropdown__elements--row"
-    }, !!brandElements.length && brandElements.map(function (brand) {
+    }, /*#__PURE__*/React__default.createElement("a", {
+      href: "".concat(productsUrl, "/").concat(categorySlug),
+      className: "dropdown__element"
+    }, "All ", categoryTitle), !!brandElements.length && brandElements.map(function (brand) {
       return /*#__PURE__*/React__default.createElement("a", {
         href: "".concat(productsUrl, "/").concat(brand === null || brand === void 0 ? void 0 : brand.slug),
         className: "dropdown__element",
@@ -14462,6 +14467,29 @@
     }, contactNumber)));
   };
 
+  var categories$1 = {
+    shoes: {
+      name: 'Shoes',
+      slug: 'shoes'
+    },
+    bags: {
+      name: 'Bags',
+      slug: 'bags'
+    },
+    clothing: {
+      name: 'Clothing',
+      slug: 'apparel'
+    },
+    watches: {
+      name: 'Watches',
+      slug: 'watches'
+    },
+    accessories: {
+      name: 'Accessories',
+      slug: 'accessories'
+    }
+  };
+
   var LuxityDesktopHeader = function LuxityDesktopHeader(_ref) {
     var accountIcon = _ref.accountIcon,
         cartIcon = _ref.cartIcon,
@@ -14471,7 +14499,7 @@
         categoryElements = _ref.categoryElements,
         newBrandElements = _ref.newBrandElements,
         bagsElements = _ref.bagsElements,
-        shoesElement = _ref.shoesElement,
+        shoesElements = _ref.shoesElements,
         clothingElements = _ref.clothingElements,
         accessoriesElements = _ref.accessoriesElements,
         accessoriesCategoryElements = _ref.accessoriesCategoryElements,
@@ -14552,7 +14580,9 @@
       imageSrc: newBrandsImage,
       categoryElements: categoryElements,
       brandElements: newBrandElements,
-      productsUrl: productsUrl
+      productsUrl: productsUrl,
+      categorySlug: "brands",
+      categoryTitle: "Brands"
     }))), /*#__PURE__*/React__default.createElement("li", {
       className: "navbar__link"
     }, /*#__PURE__*/React__default.createElement("a", {
@@ -14565,7 +14595,9 @@
       imageSrc: bagsImage,
       categoryElements: categoryElements,
       brandElements: bagsElements,
-      productsUrl: productsUrl
+      productsUrl: productsUrl,
+      categorySlug: categories$1.bags.slug,
+      categoryTitle: categories$1.bags.name
     }))), /*#__PURE__*/React__default.createElement("li", {
       className: "navbar__link"
     }, /*#__PURE__*/React__default.createElement("a", {
@@ -14577,8 +14609,10 @@
       title: "Department",
       imageSrc: shoesImage,
       categoryElements: categoryElements,
-      brandElements: shoesElement,
-      productsUrl: productsUrl
+      brandElements: shoesElements,
+      productsUrl: productsUrl,
+      categorySlug: categories$1.shoes.slug,
+      categoryTitle: categories$1.shoes.name
     }))), /*#__PURE__*/React__default.createElement("li", {
       className: "navbar__link"
     }, /*#__PURE__*/React__default.createElement("a", {
@@ -14591,7 +14625,9 @@
       imageSrc: clothingImage,
       categoryElements: categoryElements,
       brandElements: clothingElements,
-      productsUrl: productsUrl
+      productsUrl: productsUrl,
+      categorySlug: categories$1.clothing.slug,
+      categoryTitle: categories$1.clothing.name
     }))), /*#__PURE__*/React__default.createElement("li", {
       className: "navbar__link"
     }, /*#__PURE__*/React__default.createElement("a", {
@@ -14600,11 +14636,13 @@
     }, "Accessories"), /*#__PURE__*/React__default.createElement("div", {
       className: "navbar__dropdown"
     }, /*#__PURE__*/React__default.createElement(Dropdown$1, {
-      title: "Department",
+      title: "Categories",
       imageSrc: accessoriesImage,
       categoryElements: accessoriesCategoryElements,
       brandElements: accessoriesElements,
-      productsUrl: productsUrl
+      productsUrl: productsUrl,
+      categorySlug: categories$1.accessories.slug,
+      categoryTitle: categories$1.accessories.name
     }))), /*#__PURE__*/React__default.createElement("li", {
       className: "navbar__link"
     }, /*#__PURE__*/React__default.createElement("a", {
@@ -14617,7 +14655,9 @@
       imageSrc: watchesImage,
       categoryElements: categoryElements,
       brandElements: watchesElements,
-      productsUrl: productsUrl
+      productsUrl: productsUrl,
+      categorySlug: categories$1.watches.slug,
+      categoryTitle: categories$1.watches.name
     }))), /*#__PURE__*/React__default.createElement("li", {
       className: "navbar__link"
     }, /*#__PURE__*/React__default.createElement("a", {

package/package.json

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

package/CHANGELOG.md

@@ -1,299 +0,0 @@
-## Changelog
-
-### 2.31.0
-- Add Luxity Desktop Header Component
-- Add Luxity Mobile Header Component
-- Add Luxity Footer Component
-  
-  
-### 2.30.3
-- update the communication preferences radio buttons to match the existing style of radio buttons.
-- update the is_disabled prop tp follow camel case.
-
-### 2.30.2
-- rename dropdown components to make them more generic.
-- add shoe size range selector
-
-### 2.30.1
-- adding a class name prop for the buttons on the communications preference components.
-- removing the default section header on communication preferences.
-
-### 2.30.0
-- Components added:
-  - `CommunicationPreferences` 
-  - `CommunicationPreferenceSection` 
-  - `CommunicationPreferenceOptionRenderer`
-
-### 2.29.1
-- Allow the search input container to auto focus on render
-
-### 2.29.0
-- Removed models and materials filtering from `Style Selector`
-- Showing brands as multiselect instead of dropdown on `Add Interest` form
-
-### 2.28.0
-Removed models and materials select from `Add Interest`
-
-### 2.27.0
-Add click event on Sidebar of `Rarestep Header`
-
-### 2.26.0
-Once user click on Menu Items Nav will closed `Rarestep Header`
-
-### 2.25.0
-User icon show when it present in `Rarestep Header`
-
-### 2.24.0
-Reduce padding and size of X of `Rarestep Header`
-
-### 2.23.0
-- All items are capitalize headers in `RarestepHeader`
-
-### 2.22.0
-- Add More Navigation Specific for `RarestepHeader`
-
-### 2.21.0
-- Capitalize all headers in `RarestepHeader`
-
-### 2.20.0
-- Move rarestep dropdown brands to header
-
-### 2.19.0
-- Show tiktok icon on `RareStepFooter`
-
-### 2.18.5
-- Allow `RareStepHeader` brands on menu dropdown to be clickable
-
-### 2.18.4
-- Replace `CurrencyInputFormatter` with custom code
-
-### 2.18.3
-- Only show the scroll bar on the `RareStepHeader` side nav when there is scrollable content
-
-### 2.18.2
-- Reduce `RareStepFooter` link font size
-
-### 2.18.1
-- Ensure RareStep SubMenuLink opens SubMenu instead of opening link
-
-### 2.18.0
-- Passing brands, models and materials to the styles graphql query to filter out styles that don't match up to the selected brands, models and materials.
-
-### 2.17.5
-- Open RareStep social media links in a new tab
-
-### 2.17.4
-- Fix stretching of `RareStepFooter` and `RareStepHeader` logo images
-
-### 2.17.3
-- Set a static height size for images on the desktop dropdown menu
-
-### 2.17.2
-- Made links on `RareStepHeader` dropdown clickable
-
-### 2.17.1
-- Aligned `SellToUsLink` with `HeaderIcon`
-
-### 2.17.0
-- Update `HeaderLogo` dimensions
-- Update `HeaderIcon` dimensions
-- Show dropdown on hover of user icon in the header
-
-### 2.16.0
-- Removed unused links from `RareStepFooter` and `RareStepHeader` components 
-- Centre aligned the logo on `RareStepHeader` mobile
-- Changed background color of search container of `RareStepHeader` mobile
-- `RareStepHeader` now accepts handleOnCartClick function to  navigate to cart page 
-
-### 2.15.1
-- Ensure dropdown search fills page width
-- Make `RareStepFooter` and `RareStepHeader` logo clickable
-### 2.15.0
-- Adds sliding animation to `RareStepHeader` on mobile 
-- Change props to camel case for `RareStepFooter` and `RareStepHeader` components 
-
-### 2.14.0
-- Made `RareStepFooter` and `RareStepHeader` components responsive
-
-### 2.13.1
-- Changed interest page heading from `My Interests` to `Interests`.
-
-### 2.13.0
-- Removed `LuxityLoader` component 
-
-### 2.12.0
-- Added a `RareStepHeader` and `RareStepFooter` components
-
-### 2.11.0
-- Components added:
-  -- `GraphQLDropdownSelector`, `LuxityGraphQLDropdownSelector`, `MaterialSelector`, and `ModelSelector`
-- Added models and materials select form fields to add interests.
-
-### 2.10.0
-- Added a `LuxityLoader` component
-### 2.9.2
-- Ensure the search icon is not cutting off
-
-### 2.9.1
-- Ensure the interest categories wrap on small screen
-
-### 2.9.0
-- Added clothing as an interest item
-### 2.8.0
-- Breaking - `CurrencyInput` component renamed to `CurrencyInputFormatter`
-- CurrencyInputFormatter props `onChange, value, prefix, allowNegativeValue,
-  groupSeparator,
-  decimalSeparator,`
-- upgrade react to react 17.0.2
-- upgrade storybook
-- remove storybook-readme
-
-### 2.7.5
-- Change color of the active Interest category
-when adding item as interest
-### 2.7.4
-- Bug fix for IOS, extra space showing on `InterestItem`
-### 2.7.3
-- Fix container alignment of `AddInterest` and `InterestItem` so they match
-- Center alignment trash icon in `InterestItem` 
-### 2.7.2
-- Dont show `MyInterestTitleHeading` if don't have interest items
-### 2.7.1
-- Change svg colors from pink to black
-### 2.7.0 
-- `AddInterest` and `InterestItem` have a new design that does not use the `Accordion` component
-- Can add a watch as interest 
-### 2.6.2
-- Limit the width of the title of `InterestItem` so that it does not overlap with trash icon
-### 2.6.1 
-- Upgrade `@bonlineza/b-lib` to v3.2.2
-
-### 2.6.0
-- `InterestItem` now has a delete button next to the interest title
-### 2.5.4
-- Changed background color on `Add Interest` component buttons to black with white text
-### 2.5.3
-- Changed text color on `Add Interest` component buttons
-
-### 2.5.2
-- `Notify` component now includes a warning function
-### 2.5.1
-- change base color from pink to black
-### 2.5.0
-- `Accordion` component now accepts defaultHeight as a prop
-### 2.4.0
-- Formatted `mark` data for `RangeSlider` 
-### 2.3.0
-- Changed `title` prop on `Accordion` to include support for Component rendering
-### 2.2.0
-- Add `DummyAccordion` component that looks like an `Accordion` only with a button-like behaviour
-- Remove bundle conversion of Flow types to prop-types
-- Strip 'prop-types' from exported bundles (removed the 'prop-types' Dependency)
-- Add `SvgWrapper` as exported component
-- Include `svgs` in package - can now import them induvidually as `@bonlineza/luxity-lib/svg/Add`
-- Update all packages
-- include `package-lock.json` file
-- Update `Tooltip` - allow passing custom classes for `containerClassName` and `bodyClassName`
-- Update `TextButton` - add default `type` prop as 'button' to prevent unintended form submissions
-
-### 2.1.1
-- Update `CountryCodeSelect` change the value that is used in the onChange callback
-
-### 2.1.0
-- Add components: `CountryCodeSelect` and `ReactSelectWrapper`
-
-### 2.0.3
-- Fix: prevent event from being passed into the `closeAccordion` function
-
-### 2.0.2
-- Fix: export `constants` properly - can now import directly from: `@bonlineza/luxity-lib/constants`
-
-### 2.0.1
-- Add fade transition to for `ShoeSizeTypeSelector` to improve ux
-
-### 2.0.0
-- Amend version to `2.0.0` for sanity due to the last feature being a breaking change
-
-### 1.3.0
-- Correct versioning of package due to `shoe-size-type` feature being a breaking 
-change
-
-### 1.2.9
-- Add functionality to choose size type for the `ShoeSelector` in the 
-`AddInterest` component due to spec changes. Add prop `shoe_size_type` to
-payload of of request for adding an interest
-- Add default check functionality for `RadioButton` component
-- Update tests for `RadioButton` and `InterestItem`
-- Correct prop definition `SimpleErrorBoundary` which was preventing `yarn docs`
-from creating an `md` file for that component
-
-### 1.2.8
-- Surround `InterestItem` with `SimpleErrorBoundary`
-- Add sanity to the `getShoeSize` output
-- Export `gender` constants
-
-### 1.2.7
-- Change Full Size Range Button in Add Interest inverted button
-
-### 1.2.6
-- Remove deselectAll from AddInterest
-- Fix infinite loop of CheckboxButton
-- Remove reference props in GenderSelector
-- Update test for CheckboxButton
-
-### 1.2.4
-- Change InterestItem to use the 'title' prop and add test
-
-### 1.2.3
-- Refactor styles of InterestItem so it looks the way it is required to look
-- Fix logic for deselecting brands and styles for GraphQLMultiSelector when a category changes
-- Add forwardRef logic to themed function
-
-### 1.2.2
-- Fix InterstItem render that uses new 'name' prop from Styles
-
-### 1.2.1
-- Fix Border Style for NotificationDropdown
-- Change deleteInterest prop to `deleteInterestApi` to better describe it
-
-### 1.2.0
-- No Longer Exporting: BrandSelector and AddInterest
-- Added Component: Interests
-
-### 1.1.1
-- Fix RangeSlider: Tooltip component receives correct props
-
-### 1.1.0
-- Added Components:
-   - AddInterest
-   - BrandSelector
-   - CurrencyInput
-   - GraphQLMultiSelector
-   - InterestCatSelector
-   - InterestItem
-   - LuxityGraphQLMultiSelector
-   - LuxityPageReady
-   - StyleSelector
-   - RangeSlider
-   - ShoeSizeSelector
-   - PriceRangeSelector
-- Added List of Helper functions to the Readme
-- Added Development guide to the Readme
-- Added Publishing Guide to the Readme
-
-### 1.0.0
-- Breaking Change: Reworked Button 'variant' prop into individual Components
-- Removed Generic Button component
-- New Button components: PrimaryButton, SecondaryButton, TextButton, InvertedTextButton, WrapperButton
-- Added SVG components (see README for full List)
-
-### 0.1.2
-- Updated `styled-components` version to v5
-
-### 0.1.1
-- Moved `styled-components` to dev and peer-dependencies as it is a host project requirement
-
-### 0.1.0
-- Added Components: Checkbox, RadioButtons, Tooltip
-- Added generated ocumentation for components
-- Added Element: Button

package/CreateRarestepInterest.js

@@ -1,85 +0,0 @@
-(function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react')) :
-  typeof define === 'function' && define.amd ? define(['react'], factory) :
-  (global = global || self, global.CreateRarestepInterest = factory(global.React));
-}(this, (function (React) { 'use strict';
-
-  var React__default = 'default' in React ? React['default'] : React;
-
-  function _slicedToArray(arr, i) {
-    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
-  }
-
-  function _arrayWithHoles(arr) {
-    if (Array.isArray(arr)) return arr;
-  }
-
-  function _iterableToArrayLimit(arr, i) {
-    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-
-    if (_i == null) return;
-    var _arr = [];
-    var _n = true;
-    var _d = false;
-
-    var _s, _e;
-
-    try {
-      for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
-        _arr.push(_s.value);
-
-        if (i && _arr.length === i) break;
-      }
-    } catch (err) {
-      _d = true;
-      _e = err;
-    } finally {
-      try {
-        if (!_n && _i["return"] != null) _i["return"]();
-      } finally {
-        if (_d) throw _e;
-      }
-    }
-
-    return _arr;
-  }
-
-  function _unsupportedIterableToArray(o, minLen) {
-    if (!o) return;
-    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-    var n = Object.prototype.toString.call(o).slice(8, -1);
-    if (n === "Object" && o.constructor) n = o.constructor.name;
-    if (n === "Map" || n === "Set") return Array.from(o);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-  }
-
-  function _arrayLikeToArray(arr, len) {
-    if (len == null || len > arr.length) len = arr.length;
-
-    for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-
-    return arr2;
-  }
-
-  function _nonIterableRest() {
-    throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-  }
-
-  var CreateRarestepInterest = function CreateRarestepInterest() {
-    var _useState = React.useState(null),
-        _useState2 = _slicedToArray(_useState, 2),
-        state = _useState2[0],
-        setState = _useState2[1];
-
-    React.useEffect(function () {
-      setState(1);
-    }, []);
-    console.log(state);
-    return /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
-      className: "test"
-    }, /*#__PURE__*/React__default.createElement("h1", null, "Hie")));
-  };
-
-  return CreateRarestepInterest;
-
-})));

package/LuxityHeader.js

@@ -1,369 +0,0 @@
-(function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react')) :
-  typeof define === 'function' && define.amd ? define(['react'], factory) :
-  (global = global || self, global.LuxityHeader = factory(global.React));
-}(this, (function (React) { 'use strict';
-
-  var React__default = 'default' in React ? React['default'] : React;
-
-  function _slicedToArray(arr, i) {
-    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
-  }
-
-  function _arrayWithHoles(arr) {
-    if (Array.isArray(arr)) return arr;
-  }
-
-  function _iterableToArrayLimit(arr, i) {
-    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-
-    if (_i == null) return;
-    var _arr = [];
-    var _n = true;
-    var _d = false;
-
-    var _s, _e;
-
-    try {
-      for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
-        _arr.push(_s.value);
-
-        if (i && _arr.length === i) break;
-      }
-    } catch (err) {
-      _d = true;
-      _e = err;
-    } finally {
-      try {
-        if (!_n && _i["return"] != null) _i["return"]();
-      } finally {
-        if (_d) throw _e;
-      }
-    }
-
-    return _arr;
-  }
-
-  function _unsupportedIterableToArray(o, minLen) {
-    if (!o) return;
-    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-    var n = Object.prototype.toString.call(o).slice(8, -1);
-    if (n === "Object" && o.constructor) n = o.constructor.name;
-    if (n === "Map" || n === "Set") return Array.from(o);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-  }
-
-  function _arrayLikeToArray(arr, len) {
-    if (len == null || len > arr.length) len = arr.length;
-
-    for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-
-    return arr2;
-  }
-
-  function _nonIterableRest() {
-    throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-  }
-
-  var Dropdown = function Dropdown(_ref) {
-    var title = _ref.title,
-        imageSrc = _ref.imageSrc,
-        _ref$categoryElements = _ref.categoryElements,
-        categoryElements = _ref$categoryElements === void 0 ? [] : _ref$categoryElements,
-        _ref$brandElements = _ref.brandElements,
-        brandElements = _ref$brandElements === void 0 ? [] : _ref$brandElements,
-        productsUrl = _ref.productsUrl;
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: "dropdown"
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "dropdown__column"
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "dropdown__title"
-    }, title), /*#__PURE__*/React__default.createElement("div", {
-      className: "dropdown__elements dropdown__elements--column"
-    }, !!categoryElements.length && categoryElements.map(function (category) {
-      return /*#__PURE__*/React__default.createElement("a", {
-        href: "".concat(productsUrl, "/").concat(category === null || category === void 0 ? void 0 : category.slug),
-        className: "dropdown__element",
-        key: category.name
-      }, category === null || category === void 0 ? void 0 : category.name);
-    }))), /*#__PURE__*/React__default.createElement("div", {
-      className: "dropdown__column"
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "dropdown__title"
-    }, "Brands"), /*#__PURE__*/React__default.createElement("div", {
-      className: "dropdown__elements dropdown__elements--row"
-    }, !!brandElements.length && brandElements.map(function (brand) {
-      return /*#__PURE__*/React__default.createElement("a", {
-        href: "".concat(productsUrl, "/").concat(brand === null || brand === void 0 ? void 0 : brand.slug),
-        className: "dropdown__element",
-        key: brand.name
-      }, brand === null || brand === void 0 ? void 0 : brand.name);
-    }))), /*#__PURE__*/React__default.createElement("div", {
-      className: "dropdown__column"
-    }, /*#__PURE__*/React__default.createElement("img", {
-      src: imageSrc,
-      alt: "".concat(title)
-    })));
-  };
-
-  var StoresDropdown = function StoresDropdown(_ref) {
-    var _ref$stores = _ref.stores,
-        stores = _ref$stores === void 0 ? [] : _ref$stores,
-        contactNumber = _ref.contactNumber;
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: "stores-dropdown"
-    }, !!stores.length && stores.map(function (store) {
-      return /*#__PURE__*/React__default.createElement("div", {
-        className: "stores-dropdown__store-details",
-        key: store.name
-      }, /*#__PURE__*/React__default.createElement("div", {
-        className: "stores-dropdown__store-image"
-      }, /*#__PURE__*/React__default.createElement("img", {
-        className: "stores-dropdown__image",
-        src: store.image,
-        alt: store.name
-      })), /*#__PURE__*/React__default.createElement("div", {
-        className: "stores-dropdown__store-info"
-      }, /*#__PURE__*/React__default.createElement("h4", {
-        className: "stores-dropdown__title"
-      }, store.title, " ", /*#__PURE__*/React__default.createElement("br", null), " ", store.location), /*#__PURE__*/React__default.createElement("div", {
-        className: "stores-dropdown__open-days"
-      }, store.regularOpenDays), /*#__PURE__*/React__default.createElement("div", {
-        className: "stores-dropdown__open-hours"
-      }, store.regularOpenHours), /*#__PURE__*/React__default.createElement("div", {
-        className: "stores-dropdown__open-days"
-      }, store.holidayOpenDays), /*#__PURE__*/React__default.createElement("div", {
-        className: "stores-dropdown__open-hours"
-      }, store.holidayOpenHours), (store === null || store === void 0 ? void 0 : store.weekendOpenDays) && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
-        className: "stores-dropdown__open-days"
-      }, store.weekendOpenDays), /*#__PURE__*/React__default.createElement("div", {
-        className: "stores-dropdown__open-hours"
-      }, store.weekendOpenHours))));
-    }), /*#__PURE__*/React__default.createElement("div", {
-      className: "stores-dropdown__queries"
-    }, /*#__PURE__*/React__default.createElement("h4", {
-      className: "stores-dropdown__queries-title"
-    }, "Customer Queries: "), /*#__PURE__*/React__default.createElement("a", {
-      className: "stores-dropdown__contact-details",
-      href: "tel:".concat(contactNumber)
-    }, contactNumber)));
-  };
-
-  var LuxtyHeader = function LuxtyHeader(_ref) {
-    var accountIcon = _ref.accountIcon,
-        cartIcon = _ref.cartIcon,
-        interestIcon = _ref.interestIcon,
-        cartCount = _ref.cartCount,
-        logoSrc = _ref.logoSrc,
-        categoryElements = _ref.categoryElements,
-        newBrandElements = _ref.newBrandElements,
-        bagsElements = _ref.bagsElements,
-        shoesElement = _ref.shoesElement,
-        clothingElements = _ref.clothingElements,
-        accessoriesElements = _ref.accessoriesElements,
-        accessoriesCategoryElements = _ref.accessoriesCategoryElements,
-        watchesElements = _ref.watchesElements,
-        newBrandsImage = _ref.newBrandsImage,
-        bagsImage = _ref.bagsImage,
-        shoesImage = _ref.shoesImage,
-        clothingImage = _ref.clothingImage,
-        accessoriesImage = _ref.accessoriesImage,
-        watchesImage = _ref.watchesImage,
-        productsUrl = _ref.productsUrl,
-        stores = _ref.stores,
-        contactNumber = _ref.contactNumber,
-        onInterestClick = _ref.onInterestClick,
-        onCartClick = _ref.onCartClick,
-        onAccountClick = _ref.onAccountClick,
-        inputSearchIcon = _ref.inputSearchIcon,
-        onSearch = _ref.onSearch;
-
-    var _useState = React.useState(''),
-        _useState2 = _slicedToArray(_useState, 2),
-        searchValue = _useState2[0],
-        setSearchValue = _useState2[1];
-
-    var handleChange = function handleChange(event) {
-      setSearchValue(event.target.value);
-    };
-
-    var handleKeyDown = function handleKeyDown(event) {
-      if (event.key === 'Enter') {
-        onSearch(searchValue);
-      }
-    };
-
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: "navbar"
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "navbar__container"
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "navbar__logo-wrapper"
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "navbar__logo"
-    }, /*#__PURE__*/React__default.createElement("img", {
-      src: logoSrc,
-      alt: ""
-    }))), /*#__PURE__*/React__default.createElement("div", {
-      className: "navbar__section"
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "navbar__body"
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "navbar__product-search"
-    }, /*#__PURE__*/React__default.createElement("img", {
-      src: inputSearchIcon,
-      alt: "search-icon",
-      className: "navbar__input-search-icon"
-    }), /*#__PURE__*/React__default.createElement("input", {
-      className: "navbar__form-input",
-      type: "text",
-      placeholder: "Search for items and designs",
-      value: searchValue,
-      onChange: handleChange,
-      onKeyDown: handleKeyDown
-    })), /*#__PURE__*/React__default.createElement("nav", {
-      className: "navbar__nav-links"
-    }, /*#__PURE__*/React__default.createElement("li", {
-      className: "navbar__link"
-    }, /*#__PURE__*/React__default.createElement("a", {
-      href: "#",
-      className: "navbar__link-item"
-    }, "New"), /*#__PURE__*/React__default.createElement("div", {
-      className: "navbar__dropdown"
-    }, /*#__PURE__*/React__default.createElement(Dropdown, {
-      title: "Department",
-      imageSrc: newBrandsImage,
-      categoryElements: categoryElements,
-      brandElements: newBrandElements,
-      productsUrl: productsUrl
-    }))), /*#__PURE__*/React__default.createElement("li", {
-      className: "navbar__link"
-    }, /*#__PURE__*/React__default.createElement("a", {
-      href: "#",
-      className: "navbar__link-item"
-    }, "Bags"), /*#__PURE__*/React__default.createElement("div", {
-      className: "navbar__dropdown"
-    }, /*#__PURE__*/React__default.createElement(Dropdown, {
-      title: "Department",
-      imageSrc: bagsImage,
-      categoryElements: categoryElements,
-      brandElements: bagsElements,
-      productsUrl: productsUrl
-    }))), /*#__PURE__*/React__default.createElement("li", {
-      className: "navbar__link"
-    }, /*#__PURE__*/React__default.createElement("a", {
-      href: "#",
-      className: "navbar__link-item"
-    }, "Shoes"), /*#__PURE__*/React__default.createElement("div", {
-      className: "navbar__dropdown"
-    }, /*#__PURE__*/React__default.createElement(Dropdown, {
-      title: "Department",
-      imageSrc: shoesImage,
-      categoryElements: categoryElements,
-      brandElements: shoesElement,
-      productsUrl: productsUrl
-    }))), /*#__PURE__*/React__default.createElement("li", {
-      className: "navbar__link"
-    }, /*#__PURE__*/React__default.createElement("a", {
-      href: "#",
-      className: "navbar__link-item"
-    }, "Clothing"), /*#__PURE__*/React__default.createElement("div", {
-      className: "navbar__dropdown"
-    }, /*#__PURE__*/React__default.createElement(Dropdown, {
-      title: "Department",
-      imageSrc: clothingImage,
-      categoryElements: categoryElements,
-      brandElements: clothingElements,
-      productsUrl: productsUrl
-    }))), /*#__PURE__*/React__default.createElement("li", {
-      className: "navbar__link"
-    }, /*#__PURE__*/React__default.createElement("a", {
-      href: "#",
-      className: "navbar__link-item"
-    }, "Accessories"), /*#__PURE__*/React__default.createElement("div", {
-      className: "navbar__dropdown"
-    }, /*#__PURE__*/React__default.createElement(Dropdown, {
-      title: "Department",
-      imageSrc: accessoriesImage,
-      categoryElements: accessoriesCategoryElements,
-      brandElements: accessoriesElements,
-      productsUrl: productsUrl
-    }))), /*#__PURE__*/React__default.createElement("li", {
-      className: "navbar__link"
-    }, /*#__PURE__*/React__default.createElement("a", {
-      href: "#",
-      className: "navbar__link-item"
-    }, "Watches"), /*#__PURE__*/React__default.createElement("div", {
-      className: "navbar__dropdown"
-    }, /*#__PURE__*/React__default.createElement(Dropdown, {
-      title: "Department",
-      imageSrc: watchesImage,
-      categoryElements: categoryElements,
-      brandElements: watchesElements,
-      productsUrl: productsUrl
-    }))), /*#__PURE__*/React__default.createElement("li", {
-      className: "navbar__link"
-    }, /*#__PURE__*/React__default.createElement("a", {
-      href: "#",
-      className: "navbar__link-item"
-    }, "Stores"), /*#__PURE__*/React__default.createElement("div", {
-      className: "navbar__dropdown"
-    }, /*#__PURE__*/React__default.createElement(StoresDropdown, {
-      stores: stores,
-      contactNumber: contactNumber
-    }))))), /*#__PURE__*/React__default.createElement("div", {
-      className: "navbar__icons-wrapper"
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "navbar__icons"
-    }, /*#__PURE__*/React__default.createElement("button", {
-      type: "button",
-      className: "navbar__icon",
-      onClick: onInterestClick
-    }, /*#__PURE__*/React__default.createElement("img", {
-      src: interestIcon,
-      alt: "interest-icon"
-    })), /*#__PURE__*/React__default.createElement("button", {
-      type: "button",
-      className: "navbar__icon",
-      onClick: onAccountClick
-    }, /*#__PURE__*/React__default.createElement("img", {
-      src: accountIcon,
-      alt: "account-icon"
-    })), /*#__PURE__*/React__default.createElement("button", {
-      type: "button",
-      className: "navbar__cart-icon navbar__icon",
-      onClick: onCartClick
-    }, /*#__PURE__*/React__default.createElement("img", {
-      src: cartIcon,
-      alt: "cart-icon"
-    }), /*#__PURE__*/React__default.createElement("div", {
-      className: "navbar__cart-count"
-    }, cartCount))), /*#__PURE__*/React__default.createElement("nav", {
-      className: "navbar__nav-links"
-    }, /*#__PURE__*/React__default.createElement("li", {
-      className: "navbar__company-link"
-    }, /*#__PURE__*/React__default.createElement("a", {
-      href: "",
-      className: "navbar__link-item"
-    }, "Our Story")), /*#__PURE__*/React__default.createElement("li", {
-      className: "navbar__company-link"
-    }, /*#__PURE__*/React__default.createElement("a", {
-      href: "",
-      className: "navbar__link-item"
-    }, "Blog")), /*#__PURE__*/React__default.createElement("li", {
-      className: "navbar__company-link"
-    }, /*#__PURE__*/React__default.createElement("a", {
-      href: "",
-      className: "navbar__link-item"
-    }, "Contact Us")), /*#__PURE__*/React__default.createElement("li", {
-      className: "navbar__company-link navbar__company-block"
-    }, /*#__PURE__*/React__default.createElement("a", {
-      href: "",
-      className: "navbar__link-item"
-    }, "Sell to us")))))));
-  };
-
-  return LuxtyHeader;
-
-})));

package/RarestepAddInterests.js

@@ -1,118 +0,0 @@
-(function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('styled-components')) :
-  typeof define === 'function' && define.amd ? define(['react', 'styled-components'], factory) :
-  (global = global || self, global.RarestepAddInterests = factory(global.React, global.styled));
-}(this, (function (React, styled) { 'use strict';
-
-  var React__default = 'default' in React ? React['default'] : React;
-  var styled__default = 'default' in styled ? styled['default'] : styled;
-
-  function _extends() {
-    _extends = Object.assign ? Object.assign.bind() : function (target) {
-      for (var i = 1; i < arguments.length; i++) {
-        var source = arguments[i];
-
-        for (var key in source) {
-          if (Object.prototype.hasOwnProperty.call(source, key)) {
-            target[key] = source[key];
-          }
-        }
-      }
-
-      return target;
-    };
-    return _extends.apply(this, arguments);
-  }
-
-  function _taggedTemplateLiteral(strings, raw) {
-    if (!raw) {
-      raw = strings.slice(0);
-    }
-
-    return Object.freeze(Object.defineProperties(strings, {
-      raw: {
-        value: Object.freeze(raw)
-      }
-    }));
-  }
-
-  var _templateObject;
-  var AddInterestWrapper = styled__default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n   {\n    background-color: ", ";\n  }\n"])), function (props) {
-    return props.theme.rareStepColors.ntrl50;
-  });
-
-  var theme = {
-    breakpoints: ['40em', '52em', '64em'],
-    space: ['0px', '4px', '8px', '16px', '32px', '64px', '128px', '256px', '512px'],
-    fontSizes: ['12px', '14px', '16px', '20px', '24px', '32px', '48px', '64px', '72px'],
-    marginPaddings: ['0.5rem', '1rem', '1.5rem', '2rem', '2.5rem', '3rem', '3.5rem', '4rem', '4.5rem', '5rem', '5.5rem', '6rem'],
-    letterSpacings: ['-0.5px', '0px', '+0.5px'],
-    radii: ['0px', '2px', '4px', '8px'],
-    borderRadius: '6px',
-    colors: {
-      primary: '#000',
-      base: '#4e4949',
-      baseLt: '#817c7c',
-      borderColor: '#d8d8d8',
-      ntrlMin: '#fff',
-      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: '16px'
-    },
-    rareStepPageSizes: {
-      mobile: '500px',
-      tablet: '768px',
-      desktop: '992px',
-      screenl: '1280px',
-      screenxl: '1680px',
-      screenxxl: '1920px',
-      container: '1600px'
-    }
-  };
-
-  var themed = (function (Component) {
-    return /*#__PURE__*/React.forwardRef(function (props, ref) {
-      return /*#__PURE__*/React__default.createElement(styled.ThemeProvider, {
-        theme: theme
-      }, /*#__PURE__*/React__default.createElement(Component, _extends({}, props, {
-        ref: ref
-      })));
-    });
-  });
-
-  var RarestepAddInterest = function RarestepAddInterest() {
-    return /*#__PURE__*/React__default.createElement(AddInterestWrapper, null, /*#__PURE__*/React__default.createElement("div", {
-      className: "hello"
-    }, "Hello"));
-  };
-
-  var index = themed(RarestepAddInterest);
-
-  return index;
-
-})));

package/RarestepInterests.js

@@ -1,118 +0,0 @@
-(function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('styled-components')) :
-  typeof define === 'function' && define.amd ? define(['react', 'styled-components'], factory) :
-  (global = global || self, global.RarestepInterests = factory(global.React, global.styled));
-}(this, (function (React, styled) { 'use strict';
-
-  var React__default = 'default' in React ? React['default'] : React;
-  var styled__default = 'default' in styled ? styled['default'] : styled;
-
-  function _extends() {
-    _extends = Object.assign ? Object.assign.bind() : function (target) {
-      for (var i = 1; i < arguments.length; i++) {
-        var source = arguments[i];
-
-        for (var key in source) {
-          if (Object.prototype.hasOwnProperty.call(source, key)) {
-            target[key] = source[key];
-          }
-        }
-      }
-
-      return target;
-    };
-    return _extends.apply(this, arguments);
-  }
-
-  function _taggedTemplateLiteral(strings, raw) {
-    if (!raw) {
-      raw = strings.slice(0);
-    }
-
-    return Object.freeze(Object.defineProperties(strings, {
-      raw: {
-        value: Object.freeze(raw)
-      }
-    }));
-  }
-
-  var _templateObject;
-  var AddInterestWrapper = styled__default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n   {\n    background-color: ", ";\n  }\n"])), function (props) {
-    return props.theme.rareStepColors.ntrl50;
-  });
-
-  var theme = {
-    breakpoints: ['40em', '52em', '64em'],
-    space: ['0px', '4px', '8px', '16px', '32px', '64px', '128px', '256px', '512px'],
-    fontSizes: ['12px', '14px', '16px', '20px', '24px', '32px', '48px', '64px', '72px'],
-    marginPaddings: ['0.5rem', '1rem', '1.5rem', '2rem', '2.5rem', '3rem', '3.5rem', '4rem', '4.5rem', '5rem', '5.5rem', '6rem'],
-    letterSpacings: ['-0.5px', '0px', '+0.5px'],
-    radii: ['0px', '2px', '4px', '8px'],
-    borderRadius: '6px',
-    colors: {
-      primary: '#000',
-      base: '#4e4949',
-      baseLt: '#817c7c',
-      borderColor: '#d8d8d8',
-      ntrlMin: '#fff',
-      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: '16px'
-    },
-    rareStepPageSizes: {
-      mobile: '500px',
-      tablet: '768px',
-      desktop: '992px',
-      screenl: '1280px',
-      screenxl: '1680px',
-      screenxxl: '1920px',
-      container: '1600px'
-    }
-  };
-
-  var themed = (function (Component) {
-    return /*#__PURE__*/React.forwardRef(function (props, ref) {
-      return /*#__PURE__*/React__default.createElement(styled.ThemeProvider, {
-        theme: theme
-      }, /*#__PURE__*/React__default.createElement(Component, _extends({}, props, {
-        ref: ref
-      })));
-    });
-  });
-
-  var RarestepAddInterest = function RarestepAddInterest() {
-    return /*#__PURE__*/React__default.createElement(AddInterestWrapper, null, /*#__PURE__*/React__default.createElement("div", {
-      className: "hello"
-    }, "Hello"));
-  };
-
-  var index = themed(RarestepAddInterest);
-
-  return index;
-
-})));