@bonlineza/luxity-lib 2.30.3 → 2.31.0

package/build/bundle.js

@@ -14001,6 +14001,7 @@
       _formControl.current.formState = getProxyFormState(formState, control);
       return _formControl.current;
   }
+  //# sourceMappingURL=index.esm.mjs.map
 
   var _excluded$8 = ["ref"];
 
@@ -14184,6 +14185,998 @@
 
   var index$5 = themed(CommunicationPreferences);
 
+  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 Event = function Event(instance, track) {
+    var category = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
+    var action = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '';
+    var label = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : '';
+    var value = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : '';
+
+    if (track) {
+      instance.event({
+        category: category,
+        action: action,
+        label: label,
+        value: value
+      });
+    }
+  };
+
+  var GALink = function GALink(props) {
+    var gaOnClick = function gaOnClick(event) {
+      Event(props.instance, props.track, 'Link', "Click on ".concat(props.href), props.label);
+
+      if (typeof props.onClick === 'function') {
+        props.onClick(event);
+      }
+    };
+
+    return /*#__PURE__*/React__default.createElement("a", _extends({
+      href: "/"
+    }, props, {
+      onClick: gaOnClick
+    }), props.children);
+  };
+
+  var LuxityFooter = function LuxityFooter(_ref) {
+    var _ref$showNewsletter = _ref.showNewsletter,
+        showNewsletter = _ref$showNewsletter === void 0 ? true : _ref$showNewsletter,
+        _ref$buyLinks = _ref.buyLinks,
+        buyLinks = _ref$buyLinks === void 0 ? [] : _ref$buyLinks,
+        _ref$sellLinks = _ref.sellLinks,
+        sellLinks = _ref$sellLinks === void 0 ? [] : _ref$sellLinks,
+        _ref$helpLinks = _ref.helpLinks,
+        helpLinks = _ref$helpLinks === void 0 ? [] : _ref$helpLinks,
+        _ref$companyLinks = _ref.companyLinks,
+        companyLinks = _ref$companyLinks === void 0 ? [] : _ref$companyLinks,
+        _ref$socialLinks = _ref.socialLinks,
+        socialLinks = _ref$socialLinks === void 0 ? [] : _ref$socialLinks,
+        _ref$contactLinks = _ref.contactLinks,
+        contactLinks = _ref$contactLinks === void 0 ? [] : _ref$contactLinks,
+        _ref$quickiesLinks = _ref.quickiesLinks,
+        quickiesLinks = _ref$quickiesLinks === void 0 ? [] : _ref$quickiesLinks,
+        visaImgSrc = _ref.visaImgSrc,
+        masterCardSrc = _ref.masterCardSrc,
+        logoSrc = _ref.logoSrc,
+        formIconSrc = _ref.formIconSrc,
+        onSubmit = _ref.onSubmit;
+    var currentYear = new Date().getFullYear();
+
+    var _useForm = useForm(),
+        handleSubmit = _useForm.handleSubmit,
+        register = _useForm.register,
+        errors = _useForm.formState.errors;
+
+    var renderLinks = function renderLinks(links, title) {
+      return /*#__PURE__*/React__default.createElement("div", {
+        className: "footer__link-container"
+      }, /*#__PURE__*/React__default.createElement("div", {
+        className: "footer__link-title"
+      }, title), /*#__PURE__*/React__default.createElement("div", {
+        className: "footer__links"
+      }, !!links.length && links.map(function (link) {
+        return /*#__PURE__*/React__default.createElement(GALink, {
+          key: link.label,
+          instance: link.instance,
+          href: link.href,
+          label: link.label,
+          className: "footer__link",
+          rel: "noopener noreferrer",
+          track: link === null || link === void 0 ? void 0 : link.track,
+          target: link.target
+        }, link.iconClassName && /*#__PURE__*/React__default.createElement("i", {
+          className: link.iconClassName
+        }), link.label);
+      })));
+    };
+
+    return /*#__PURE__*/React__default.createElement(FooterWrapper$1, null, showNewsletter && /*#__PURE__*/React__default.createElement("div", {
+      className: "footer__newsletter-section"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "footer__title-wrapper"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "footer__newsletter-title"
+    }, "Sign up to our news letter"), /*#__PURE__*/React__default.createElement("p", {
+      className: "footer__newsletter-text"
+    }, "By signing up you agree to our terms & conditions and privacy policy. You can unsubscribe anytime.")), /*#__PURE__*/React__default.createElement("div", {
+      className: "footer__newsletter-form"
+    }, /*#__PURE__*/React__default.createElement("form", {
+      onSubmit: handleSubmit(onSubmit)
+    }, /*#__PURE__*/React__default.createElement("input", _extends({}, register('email', {
+      required: 'The email field is required.',
+      pattern: {
+        value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
+        message: 'Invalid email address'
+      }
+    }), {
+      placeholder: "Your Sexy Email",
+      className: "footer__form-input"
+    })), errors.email && /*#__PURE__*/React__default.createElement("span", {
+      className: "footer__form-errors"
+    }, errors.email.message), /*#__PURE__*/React__default.createElement("button", {
+      type: "submit"
+    }, /*#__PURE__*/React__default.createElement("img", {
+      className: "footer__newsletter-icon",
+      src: formIconSrc,
+      alt: "submit"
+    }))))), /*#__PURE__*/React__default.createElement("div", {
+      className: "footer__wrapper footer__wrapper--desktop"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "footer__main-section"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "footer__logo-wrapper"
+    }, /*#__PURE__*/React__default.createElement("img", {
+      className: "footer__logo",
+      src: logoSrc,
+      alt: "luxity-logo"
+    })), renderLinks(buyLinks, 'Buy'), /*#__PURE__*/React__default.createElement("div", null, renderLinks(sellLinks, 'Sell'), /*#__PURE__*/React__default.createElement("div", {
+      className: "footer__link-child"
+    }, renderLinks(companyLinks, 'Company'))), renderLinks(helpLinks, 'Help'), renderLinks(socialLinks, 'Follow us'), /*#__PURE__*/React__default.createElement("div", {
+      className: "footer__link-container"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "footer__link-title"
+    }, "Contact"), /*#__PURE__*/React__default.createElement("div", {
+      className: "footer__links"
+    }, !!contactLinks.map && contactLinks.map(function (link) {
+      return !link.isContact ? /*#__PURE__*/React__default.createElement(GALink, {
+        key: link.label,
+        instance: link.instance,
+        href: link.href,
+        label: link.label,
+        className: "footer__link",
+        rel: "noopener noreferrer",
+        track: link === null || link === void 0 ? void 0 : link.track,
+        target: link.target
+      }, link.label) : /*#__PURE__*/React__default.createElement("div", {
+        className: "footer__text"
+      }, link.label);
+    })), /*#__PURE__*/React__default.createElement("div", {
+      className: "footer__store-hours"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "footer__text"
+    }, "Monday - Friday"), /*#__PURE__*/React__default.createElement("div", {
+      className: "footer__text"
+    }, "8:30am - 5pm")))), /*#__PURE__*/React__default.createElement("div", {
+      className: "footer__copyrights-section"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "footer__payment-icons"
+    }, /*#__PURE__*/React__default.createElement("img", {
+      alt: "visa",
+      src: masterCardSrc
+    }), /*#__PURE__*/React__default.createElement("img", {
+      src: visaImgSrc,
+      alt: "button"
+    })), /*#__PURE__*/React__default.createElement("p", {
+      className: "footer__copyright"
+    }, "Copyright ", currentYear, " | Luxity (Pty) LTD | All Rights Reserved | Website Developed by B Online"))), /*#__PURE__*/React__default.createElement("div", {
+      className: "footer__wrapper footer__wrapper--mobile"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "footer__section-row"
+    }, renderLinks(quickiesLinks, 'Quickies'), renderLinks(socialLinks, 'Follow us')), /*#__PURE__*/React__default.createElement("div", {
+      className: "footer__section-row"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "footer__link-container"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "footer__link-title"
+    }, "We love"), /*#__PURE__*/React__default.createElement("div", {
+      className: "footer__links"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "footer__text"
+    }, "Visa"), /*#__PURE__*/React__default.createElement("div", {
+      className: "footer__text"
+    }, "Mastercard"), /*#__PURE__*/React__default.createElement("div", {
+      className: "footer__text"
+    }, "EFT"))), renderLinks(helpLinks, 'Legal Stuff')), /*#__PURE__*/React__default.createElement("p", {
+      className: "footer__copyright footer__copyright--mobile"
+    }, "Copyright ", currentYear, " | Luxity (Pty) LTD | All Rights Reserved | Website Developed by B Online")));
+  };
+
+  var index$6 = themed(LuxityFooter);
+
+  var Dropdown$1 = 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 LuxityDesktopHeader = function LuxityDesktopHeader(_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,
+        ourStoryLink = _ref.ourStoryLink,
+        blogLink = _ref.blogLink,
+        contactUsLink = _ref.contactUsLink,
+        sellToUsLink = _ref.sellToUsLink;
+
+    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: "luxity-logo"
+    }))), /*#__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 navbar__nav-links--wrap"
+    }, /*#__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$1, {
+      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$1, {
+      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$1, {
+      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$1, {
+      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$1, {
+      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$1, {
+      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: ourStoryLink,
+      className: "navbar__link-item"
+    }, "Our Story")), /*#__PURE__*/React__default.createElement("li", {
+      className: "navbar__company-link"
+    }, /*#__PURE__*/React__default.createElement("a", {
+      href: blogLink,
+      className: "navbar__link-item"
+    }, "Blog")), /*#__PURE__*/React__default.createElement("li", {
+      className: "navbar__company-link"
+    }, /*#__PURE__*/React__default.createElement("a", {
+      href: contactUsLink,
+      className: "navbar__link-item"
+    }, "Contact Us")), /*#__PURE__*/React__default.createElement("li", {
+      className: "navbar__company-link navbar__company-block"
+    }, /*#__PURE__*/React__default.createElement("a", {
+      href: sellToUsLink,
+      className: "navbar__link-item"
+    }, "Sell to us")))))));
+  };
+
+  var StoresDropdown$1 = function StoresDropdown(_ref) {
+    var backIcon = _ref.backIcon,
+        onBackClick = _ref.onBackClick,
+        stores = _ref.stores,
+        contactUsLink = _ref.contactUsLink;
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "side-nav__sub-menu"
+    }, /*#__PURE__*/React__default.createElement("button", {
+      type: "button",
+      className: "side-nav__back-button-wrapper",
+      onClick: onBackClick
+    }, /*#__PURE__*/React__default.createElement("img", {
+      src: backIcon,
+      alt: "back-icon",
+      className: "side-nav__back-icon"
+    }), /*#__PURE__*/React__default.createElement("div", {
+      className: "side-nav__back-button"
+    }, "Back To Menu")), /*#__PURE__*/React__default.createElement("div", {
+      className: "side-nav__store-details"
+    }, !!stores.length && stores.map(function (store) {
+      return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+        className: "stores-dropdown__main-title"
+      }, store.title, ", ", 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), /*#__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("a", {
+        href: "".concat(contactUsLink, "/#").concat(store.slug),
+        className: "stores-dropdown__view-more"
+      }, ' ', "View More"));
+    })));
+  };
+
+  var BrandsDropDown = function BrandsDropDown(_ref) {
+    var subMenuOpen = _ref.subMenuOpen,
+        onBackClick = _ref.onBackClick,
+        backIcon = _ref.backIcon,
+        subMenuCategoryTitle = _ref.subMenuCategoryTitle,
+        productUrl = _ref.productUrl,
+        categoryElements = _ref.categoryElements,
+        subMenuBrandsTitle = _ref.subMenuBrandsTitle,
+        _ref$brandsList = _ref.brandsList,
+        brandsList = _ref$brandsList === void 0 ? [] : _ref$brandsList;
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "side-nav__content ".concat(subMenuOpen ? '' : 'side-nav__content--hidden')
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "side-nav__sub-menu-wrapper"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "side-nav__sub-menu"
+    }, /*#__PURE__*/React__default.createElement("button", {
+      type: "button",
+      className: "side-nav__back-button-wrapper",
+      onClick: onBackClick
+    }, /*#__PURE__*/React__default.createElement("img", {
+      src: backIcon,
+      alt: "back-icon",
+      className: "side-nav__back-icon"
+    }), /*#__PURE__*/React__default.createElement("div", {
+      className: "side-nav__back-button"
+    }, "Back To Menu")), /*#__PURE__*/React__default.createElement("div", {
+      className: "side-nav__sub-menu-title"
+    }, subMenuCategoryTitle), /*#__PURE__*/React__default.createElement("div", {
+      className: "side-nav__elements"
+    }, categoryElements.map(function (category) {
+      return /*#__PURE__*/React__default.createElement("a", {
+        href: "".concat(productUrl, "/").concat(category.slug),
+        className: "side-nav__element"
+      }, category.name);
+    })), /*#__PURE__*/React__default.createElement("br", null), /*#__PURE__*/React__default.createElement("div", {
+      className: "side-nav__elements"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "side-nav__sub-menu-title"
+    }, subMenuBrandsTitle), /*#__PURE__*/React__default.createElement("a", {
+      href: "".concat(productUrl, "/brands"),
+      className: "side-nav__element"
+    }, "All Brands"), !!brandsList.length && brandsList.map(function (brand) {
+      return /*#__PURE__*/React__default.createElement("a", {
+        href: "".concat(productUrl, "/").concat(brand.slug),
+        className: "side-nav__element"
+      }, brand.name);
+    })))));
+  };
+
+  var LuxitySideNav = function LuxitySideNav(_ref) {
+    var accordionIcon = _ref.accordionIcon,
+        closeIcon = _ref.closeIcon,
+        backIcon = _ref.backIcon,
+        productUrl = _ref.productUrl,
+        onAccountClick = _ref.onAccountClick,
+        onCartClick = _ref.onCartClick,
+        contactUsLink = _ref.contactUsLink,
+        ourStoryLink = _ref.ourStoryLink,
+        blogLink = _ref.blogLink,
+        stores = _ref.stores,
+        categoryElements = _ref.categoryElements,
+        _ref$newBrandsList = _ref.newBrandsList,
+        newBrandsList = _ref$newBrandsList === void 0 ? [] : _ref$newBrandsList,
+        _ref$bagsBrandsList = _ref.bagsBrandsList,
+        bagsBrandsList = _ref$bagsBrandsList === void 0 ? [] : _ref$bagsBrandsList,
+        _ref$shoesBrandsList = _ref.shoesBrandsList,
+        shoesBrandsList = _ref$shoesBrandsList === void 0 ? [] : _ref$shoesBrandsList,
+        _ref$clothingBrandsLi = _ref.clothingBrandsList,
+        clothingBrandsList = _ref$clothingBrandsLi === void 0 ? [] : _ref$clothingBrandsLi,
+        _ref$accessoriesBrand = _ref.accessoriesBrandsList,
+        accessoriesBrandsList = _ref$accessoriesBrand === void 0 ? [] : _ref$accessoriesBrand,
+        _ref$watchesBrandsLis = _ref.watchesBrandsList,
+        watchesBrandsList = _ref$watchesBrandsLis === void 0 ? [] : _ref$watchesBrandsLis,
+        showSideNav = _ref.showSideNav,
+        onMenuClick = _ref.onMenuClick;
+
+    var _useState = React.useState(false),
+        _useState2 = _slicedToArray(_useState, 2),
+        subMenuOpen = _useState2[0],
+        setSubMenuOpen = _useState2[1];
+
+    var _useState3 = React.useState(''),
+        _useState4 = _slicedToArray(_useState3, 2),
+        displayedSubMenu = _useState4[0],
+        setDisplayedSubMenu = _useState4[1];
+
+    var onSubMenuClick = function onSubMenuClick(subMenu) {
+      setSubMenuOpen(function (prev) {
+        return !prev;
+      });
+      setDisplayedSubMenu(subMenu);
+    };
+
+    var onStoresClick = function onStoresClick() {
+      setSubMenuOpen(false);
+      setDisplayedSubMenu('stores');
+    };
+
+    var onBackClick = function onBackClick() {
+      setSubMenuOpen(false);
+      setDisplayedSubMenu('');
+    };
+
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "side-nav"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "side-nav__overlay ".concat(showSideNav ? 'side-nav__overlay--visible' : 'side-nav__overlay--hidden', " ")
+    }), /*#__PURE__*/React__default.createElement("div", {
+      className: "side-nav__content ".concat(subMenuOpen ? 'side-nav__content--hidden' : '', " ").concat(showSideNav ? 'side-nav__content--open' : 'side-nav__content--closed')
+    }, /*#__PURE__*/React__default.createElement("button", {
+      type: "button",
+      onClick: onMenuClick,
+      className: "side-nav__icon-container"
+    }, /*#__PURE__*/React__default.createElement("img", {
+      src: closeIcon,
+      alt: "close-icon",
+      className: "side-nav__close-icon"
+    })), /*#__PURE__*/React__default.createElement("div", {
+      className: "side-nav__menu-items-wrapper"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "side-nav__menu-item"
+    }, /*#__PURE__*/React__default.createElement("button", {
+      type: "button",
+      className: "side-nav__menu-title-wrapper",
+      onClick: function onClick() {
+        return onSubMenuClick('new');
+      }
+    }, /*#__PURE__*/React__default.createElement("span", {
+      className: "side-nav__menu-title"
+    }, "New"), /*#__PURE__*/React__default.createElement("img", {
+      src: accordionIcon,
+      alt: "accordion-icon",
+      className: "side-nav__accordion-icon"
+    }))), /*#__PURE__*/React__default.createElement("div", {
+      className: "side-nav__menu-item"
+    }, /*#__PURE__*/React__default.createElement("button", {
+      type: "button",
+      className: "side-nav__menu-title-wrapper",
+      onClick: function onClick() {
+        return onSubMenuClick('bags');
+      }
+    }, /*#__PURE__*/React__default.createElement("span", {
+      className: "side-nav__menu-title"
+    }, "Bags"), /*#__PURE__*/React__default.createElement("img", {
+      src: accordionIcon,
+      alt: "accordion-icon",
+      className: "side-nav__accordion-icon"
+    }))), /*#__PURE__*/React__default.createElement("div", {
+      className: "side-nav__menu-item"
+    }, /*#__PURE__*/React__default.createElement("button", {
+      type: "button",
+      className: "side-nav__menu-title-wrapper",
+      onClick: function onClick() {
+        return onSubMenuClick('shoes');
+      }
+    }, /*#__PURE__*/React__default.createElement("span", {
+      className: "side-nav__menu-title"
+    }, "Shoes"), /*#__PURE__*/React__default.createElement("img", {
+      src: accordionIcon,
+      alt: "accordion-icon",
+      className: "side-nav__accordion-icon"
+    }))), /*#__PURE__*/React__default.createElement("div", {
+      className: "side-nav__menu-item"
+    }, /*#__PURE__*/React__default.createElement("button", {
+      type: "button",
+      className: "side-nav__menu-title-wrapper",
+      onClick: function onClick() {
+        return onSubMenuClick('clothing');
+      }
+    }, /*#__PURE__*/React__default.createElement("span", {
+      className: "side-nav__menu-title"
+    }, "Clothing"), /*#__PURE__*/React__default.createElement("img", {
+      src: accordionIcon,
+      alt: "accordion-icon",
+      className: "side-nav__accordion-icon"
+    }))), /*#__PURE__*/React__default.createElement("div", {
+      className: "side-nav__menu-item"
+    }, /*#__PURE__*/React__default.createElement("button", {
+      type: "button",
+      className: "side-nav__menu-title-wrapper",
+      onClick: function onClick() {
+        return onSubMenuClick('accessories');
+      }
+    }, /*#__PURE__*/React__default.createElement("span", {
+      className: "side-nav__menu-title"
+    }, "Accessories"), /*#__PURE__*/React__default.createElement("img", {
+      src: accordionIcon,
+      alt: "accordion-icon",
+      className: "side-nav__accordion-icon"
+    }))), /*#__PURE__*/React__default.createElement("div", {
+      className: "side-nav__menu-item"
+    }, /*#__PURE__*/React__default.createElement("button", {
+      type: "button",
+      className: "side-nav__menu-title-wrapper",
+      onClick: function onClick() {
+        return onSubMenuClick('watches');
+      }
+    }, /*#__PURE__*/React__default.createElement("span", {
+      className: "side-nav__menu-title"
+    }, "Watches"), /*#__PURE__*/React__default.createElement("img", {
+      src: accordionIcon,
+      alt: "accordion-icon",
+      className: "side-nav__accordion-icon"
+    }))), /*#__PURE__*/React__default.createElement("div", {
+      className: "side-nav__menu-item"
+    }, /*#__PURE__*/React__default.createElement("button", {
+      type: "button",
+      className: "side-nav__menu-title-wrapper",
+      onClick: onStoresClick
+    }, /*#__PURE__*/React__default.createElement("span", {
+      className: "side-nav__menu-title"
+    }, "Our Stores"), /*#__PURE__*/React__default.createElement("img", {
+      src: accordionIcon,
+      alt: "accordion-icon",
+      className: "side-nav__accordion-icon"
+    }))), /*#__PURE__*/React__default.createElement("div", {
+      className: "side-nav__menu-item"
+    }, /*#__PURE__*/React__default.createElement("button", {
+      type: "button",
+      className: "side-nav__block-button",
+      onClick: onStoresClick
+    }, "Sell To Us")), /*#__PURE__*/React__default.createElement("div", {
+      className: "side-nav__menu-item"
+    }, /*#__PURE__*/React__default.createElement("a", {
+      href: ourStoryLink,
+      className: "side-nav__sub-link"
+    }, "Our Story")), /*#__PURE__*/React__default.createElement("div", {
+      className: "side-nav__menu-item"
+    }, /*#__PURE__*/React__default.createElement("a", {
+      href: blogLink,
+      className: "side-nav__sub-link"
+    }, "Blog")), /*#__PURE__*/React__default.createElement("div", {
+      className: "side-nav__menu-item"
+    }, /*#__PURE__*/React__default.createElement("a", {
+      href: contactUsLink,
+      className: "side-nav__sub-link"
+    }, "Contact Us")), /*#__PURE__*/React__default.createElement("div", {
+      className: "side-nav__menu-item"
+    }, /*#__PURE__*/React__default.createElement("button", {
+      type: "button",
+      className: "side-nav__sub-link",
+      onClick: onAccountClick
+    }, "My Account")), /*#__PURE__*/React__default.createElement("div", {
+      className: "side-nav__menu-item"
+    }, /*#__PURE__*/React__default.createElement("button", {
+      type: "button",
+      className: "side-nav__sub-link",
+      onClick: onCartClick
+    }, "My Cart")))), /*#__PURE__*/React__default.createElement(BrandsDropDown, {
+      subMenuOpen: subMenuOpen && displayedSubMenu === 'new',
+      onBackClick: onBackClick,
+      backIcon: backIcon,
+      subMenuCategoryTitle: "Department",
+      productUrl: productUrl,
+      categoryElements: categoryElements,
+      subMenuBrandsTitle: "Brands",
+      brandsList: newBrandsList
+    }), /*#__PURE__*/React__default.createElement(BrandsDropDown, {
+      subMenuOpen: subMenuOpen && displayedSubMenu === 'bags',
+      onBackClick: onBackClick,
+      backIcon: backIcon,
+      subMenuCategoryTitle: "Department",
+      productUrl: productUrl,
+      categoryElements: categoryElements,
+      subMenuBrandsTitle: "Bag Brands",
+      brandsList: bagsBrandsList
+    }), /*#__PURE__*/React__default.createElement(BrandsDropDown, {
+      subMenuOpen: subMenuOpen && displayedSubMenu === 'shoes',
+      onBackClick: onBackClick,
+      backIcon: backIcon,
+      subMenuCategoryTitle: "Department",
+      productUrl: productUrl,
+      categoryElements: categoryElements,
+      subMenuBrandsTitle: "Shoe Brands",
+      brandsList: shoesBrandsList
+    }), /*#__PURE__*/React__default.createElement(BrandsDropDown, {
+      subMenuOpen: subMenuOpen && displayedSubMenu === 'clothing',
+      onBackClick: onBackClick,
+      backIcon: backIcon,
+      subMenuCategoryTitle: "Department",
+      productUrl: productUrl,
+      categoryElements: categoryElements,
+      subMenuBrandsTitle: "Clothing Brands",
+      brandsList: clothingBrandsList
+    }), /*#__PURE__*/React__default.createElement(BrandsDropDown, {
+      subMenuOpen: subMenuOpen && displayedSubMenu === 'accessories',
+      onBackClick: onBackClick,
+      backIcon: backIcon,
+      subMenuCategoryTitle: "Categories",
+      productUrl: productUrl,
+      categoryElements: categoryElements,
+      subMenuBrandsTitle: "Accessory Brands",
+      brandsList: accessoriesBrandsList
+    }), /*#__PURE__*/React__default.createElement(BrandsDropDown, {
+      subMenuOpen: subMenuOpen && displayedSubMenu === 'watches',
+      onBackClick: onBackClick,
+      backIcon: backIcon,
+      subMenuCategoryTitle: "Department",
+      productUrl: productUrl,
+      categoryElements: categoryElements,
+      subMenuBrandsTitle: "Watches Brands",
+      brandsList: watchesBrandsList
+    }), displayedSubMenu === 'stores' && /*#__PURE__*/React__default.createElement("div", {
+      className: "side-nav__content"
+    }, /*#__PURE__*/React__default.createElement(StoresDropdown$1, {
+      backIcon: backIcon,
+      onBackClick: onBackClick,
+      stores: stores,
+      contactUsLink: contactUsLink
+    })));
+  };
+
+  var LuxityMobileHeader = function LuxityMobileHeader(_ref) {
+    var logoSrc = _ref.logoSrc,
+        menuIcon = _ref.menuIcon,
+        inputSearchIcon = _ref.inputSearchIcon,
+        onSearch = _ref.onSearch,
+        onCartClick = _ref.onCartClick,
+        cartIcon = _ref.cartIcon,
+        cartCount = _ref.cartCount,
+        closeIcon = _ref.closeIcon,
+        accordionIcon = _ref.accordionIcon,
+        backIcon = _ref.backIcon,
+        productsUrl = _ref.productsUrl,
+        stores = _ref.stores,
+        categoryElements = _ref.categoryElements,
+        onAccountClick = _ref.onAccountClick,
+        contactUsLink = _ref.contactUsLink,
+        ourStoryLink = _ref.ourStoryLink,
+        blogLink = _ref.blogLink,
+        bagsBrandsList = _ref.bagsBrandsList,
+        newBrandsList = _ref.newBrandsList,
+        shoesBrandsList = _ref.shoesBrandsList,
+        clothingBrandsList = _ref.clothingBrandsList,
+        accessoriesBrandsList = _ref.accessoriesBrandsList,
+        watchesBrandsList = _ref.watchesBrandsList;
+
+    var _useState = React.useState(''),
+        _useState2 = _slicedToArray(_useState, 2),
+        searchValue = _useState2[0],
+        setSearchValue = _useState2[1];
+
+    var _useState3 = React.useState(false),
+        _useState4 = _slicedToArray(_useState3, 2),
+        showSearchBar = _useState4[0],
+        setShowSearchbar = _useState4[1];
+
+    var _useState5 = React.useState(false),
+        _useState6 = _slicedToArray(_useState5, 2),
+        showSideNav = _useState6[0],
+        setShowSideNav = _useState6[1];
+
+    var handleChange = function handleChange(event) {
+      setSearchValue(event.target.value);
+    };
+
+    var handleKeyDown = function handleKeyDown(event) {
+      if (event.key === 'Enter') {
+        onSearch(searchValue);
+      }
+    };
+
+    var onSearchClick = function onSearchClick() {
+      setShowSearchbar(function (prev) {
+        return !prev;
+      });
+    };
+
+    var onMenuClick = function onMenuClick() {
+      setShowSideNav(function (prev) {
+        return !prev;
+      });
+    };
+
+    return /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+      className: "navbar navbar__mobile-wrapper"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "navbar__wrapper"
+    }, /*#__PURE__*/React__default.createElement("button", {
+      type: "button",
+      className: "navbar__menu-icon-wrapper",
+      onClick: onMenuClick
+    }, /*#__PURE__*/React__default.createElement("img", {
+      src: menuIcon,
+      alt: "menu-icon",
+      className: "navbar__menu-icon"
+    })), /*#__PURE__*/React__default.createElement("div", {
+      className: "navbar__search-wrapper"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "navbar__logo"
+    }, /*#__PURE__*/React__default.createElement("img", {
+      src: logoSrc,
+      alt: "luxity-logo"
+    }))), /*#__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: onSearchClick
+    }, /*#__PURE__*/React__default.createElement("img", {
+      src: inputSearchIcon,
+      alt: "interest-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))))), showSearchBar && /*#__PURE__*/React__default.createElement("div", {
+      className: "navbar__product-search-wrapper"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "navbar__product-search"
+    }, /*#__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("button", {
+      type: "button",
+      onClick: onSearchClick
+    }, /*#__PURE__*/React__default.createElement("img", {
+      src: closeIcon,
+      alt: "close-icon",
+      className: "navbar__input-close-icon"
+    })))), /*#__PURE__*/React__default.createElement(LuxitySideNav, {
+      accordionIcon: accordionIcon,
+      logoSrc: logoSrc,
+      closeIcon: closeIcon,
+      backIcon: backIcon,
+      productUrl: productsUrl,
+      onAccountClick: onAccountClick,
+      onCartClick: onCartClick,
+      contactUsLink: contactUsLink,
+      ourStoryLink: ourStoryLink,
+      blogLink: blogLink,
+      stores: stores,
+      categoryElements: categoryElements,
+      newBrandsList: newBrandsList,
+      bagsBrandsList: bagsBrandsList,
+      shoesBrandsList: shoesBrandsList,
+      clothingBrandsList: clothingBrandsList,
+      accessoriesBrandsList: accessoriesBrandsList,
+      watchesBrandsList: watchesBrandsList,
+      showSideNav: showSideNav,
+      onMenuClick: onMenuClick
+    }));
+  };
+
   exports.Accordion = index;
   exports.Checkbox = LuxityCheckbox;
   exports.CheckboxFormWrapper = FormWrapper;
@@ -14194,7 +15187,11 @@
   exports.InterestItem = InterestItem$1;
   exports.Interests = Interests;
   exports.InvertedTextButton = InvertedTextButton$1;
+  exports.LuxityDesktopHeader = LuxityDesktopHeader;
+  exports.LuxityFooter = index$6;
+  exports.LuxityMobileHeader = LuxityMobileHeader;
   exports.LuxityPageReady = LuxityPageReady;
+  exports.LuxitySideNav = LuxitySideNav;
   exports.Notify = LuxityNotifications;
   exports.NotifyError = error;
   exports.NotifySuccess = success;