@bonlineza/luxity-lib 2.30.2 → 2.31.0

package/LuxitySideNav.js

@@ -0,0 +1,424 @@
+(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.LuxitySideNav = 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 StoresDropdown = 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, {
+      backIcon: backIcon,
+      onBackClick: onBackClick,
+      stores: stores,
+      contactUsLink: contactUsLink
+    })));
+  };
+
+  return LuxitySideNav;
+
+})));

package/MaterialSelector.js

@@ -10966,12 +10966,9 @@
   var FooterPaymentImage = styled__default.img(_templateObject15$2 || (_templateObject15$2 = _taggedTemplateLiteral(["\n   {\n    width: 100px;\n    height: 30px;\n  }\n"])));
   var FooterConnectContainer = styled__default.div(_templateObject16$2 || (_templateObject16$2 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    flex-direction: column;\n  }\n"])));
 
-  var _templateObject$R, _templateObject2$d, _templateObject3$8, _templateObject4$7, _templateObject5$5;
+  var _templateObject$R, _templateObject2$d;
   var OptionsRow = styled__default.div(_templateObject$R || (_templateObject$R = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: nowrap;\n  flex-direction: row;\n"])));
-  var OptionsRowDescription = styled__default.div(_templateObject2$d || (_templateObject2$d = _taggedTemplateLiteral(["\n  flex-basis: 30%;\n  margin-right: 10px;\n"])));
-  var Options = styled__default.div(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: nowrap;\n  flex-direction: row;\n  flex-basis: 60%;\n"])));
-  var OptionRadioInputContainer = styled__default.span(_templateObject4$7 || (_templateObject4$7 = _taggedTemplateLiteral(["\n  flex-basis: 50%;\n"])));
-  var OptionRadioInput = styled__default.input(_templateObject5$5 || (_templateObject5$5 = _taggedTemplateLiteral(["\n  margin-right: 5px;\n"])));
+  var Options = styled__default.div(_templateObject2$d || (_templateObject2$d = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: nowrap;\n  flex-direction: row;\n  flex-basis: 60%;\n"])));
 
   var _templateObject$S, _templateObject2$e;
   var SectionContainer = styled__default.div(_templateObject$S || (_templateObject$S = _taggedTemplateLiteral(["\n  border-top: flex 1px solid ", ";\n  border-top-width: calc(100% - 50px);\n  padding: 5px 10px;\n"])), function (props) {
@@ -10979,17 +10976,22 @@
   });
   var SectionHeading = styled__default.div(_templateObject2$e || (_templateObject2$e = _taggedTemplateLiteral(["\n  padding: 5px 10px;\n"])));
 
-  var _templateObject$T, _templateObject2$f, _templateObject3$9;
+  var _templateObject$T, _templateObject2$f, _templateObject3$8;
   var CommunicationPreferenceContainer = styled__default.div(_templateObject$T || (_templateObject$T = _taggedTemplateLiteral(["\n  border: solid 1px #d1d5dbff;\n  margin-bottom: 40px;\n"])));
   var EditButtonRow = styled__default.div(_templateObject2$f || (_templateObject2$f = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: end;\n  padding: 10px 5px;\n  margin-right: 16px;\n"])));
-  var SubmitButton = styled__default.input(_templateObject3$9 || (_templateObject3$9 = _taggedTemplateLiteral(["\n  flex-basis: 15%;\n  margin-right: 5px;\n"])));
+  var SubmitButton = styled__default.input(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteral(["\n  flex-basis: 15%;\n  margin-right: 5px;\n"])));
 
   var _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/ModelSelector.js

@@ -10966,12 +10966,9 @@
   var FooterPaymentImage = styled__default.img(_templateObject15$2 || (_templateObject15$2 = _taggedTemplateLiteral(["\n   {\n    width: 100px;\n    height: 30px;\n  }\n"])));
   var FooterConnectContainer = styled__default.div(_templateObject16$2 || (_templateObject16$2 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    flex-direction: column;\n  }\n"])));
 
-  var _templateObject$R, _templateObject2$d, _templateObject3$8, _templateObject4$7, _templateObject5$5;
+  var _templateObject$R, _templateObject2$d;
   var OptionsRow = styled__default.div(_templateObject$R || (_templateObject$R = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: nowrap;\n  flex-direction: row;\n"])));
-  var OptionsRowDescription = styled__default.div(_templateObject2$d || (_templateObject2$d = _taggedTemplateLiteral(["\n  flex-basis: 30%;\n  margin-right: 10px;\n"])));
-  var Options = styled__default.div(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: nowrap;\n  flex-direction: row;\n  flex-basis: 60%;\n"])));
-  var OptionRadioInputContainer = styled__default.span(_templateObject4$7 || (_templateObject4$7 = _taggedTemplateLiteral(["\n  flex-basis: 50%;\n"])));
-  var OptionRadioInput = styled__default.input(_templateObject5$5 || (_templateObject5$5 = _taggedTemplateLiteral(["\n  margin-right: 5px;\n"])));
+  var Options = styled__default.div(_templateObject2$d || (_templateObject2$d = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: nowrap;\n  flex-direction: row;\n  flex-basis: 60%;\n"])));
 
   var _templateObject$S, _templateObject2$e;
   var SectionContainer = styled__default.div(_templateObject$S || (_templateObject$S = _taggedTemplateLiteral(["\n  border-top: flex 1px solid ", ";\n  border-top-width: calc(100% - 50px);\n  padding: 5px 10px;\n"])), function (props) {
@@ -10979,17 +10976,22 @@
   });
   var SectionHeading = styled__default.div(_templateObject2$e || (_templateObject2$e = _taggedTemplateLiteral(["\n  padding: 5px 10px;\n"])));
 
-  var _templateObject$T, _templateObject2$f, _templateObject3$9;
+  var _templateObject$T, _templateObject2$f, _templateObject3$8;
   var CommunicationPreferenceContainer = styled__default.div(_templateObject$T || (_templateObject$T = _taggedTemplateLiteral(["\n  border: solid 1px #d1d5dbff;\n  margin-bottom: 40px;\n"])));
   var EditButtonRow = styled__default.div(_templateObject2$f || (_templateObject2$f = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: end;\n  padding: 10px 5px;\n  margin-right: 16px;\n"])));
-  var SubmitButton = styled__default.input(_templateObject3$9 || (_templateObject3$9 = _taggedTemplateLiteral(["\n  flex-basis: 15%;\n  margin-right: 5px;\n"])));
+  var SubmitButton = styled__default.input(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteral(["\n  flex-basis: 15%;\n  margin-right: 5px;\n"])));
 
   var _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/Tracking.js

@@ -0,0 +1,27 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+  typeof define === 'function' && define.amd ? define(['exports'], factory) :
+  (global = global || self, factory(global.Tracking = {}));
+}(this, (function (exports) { 'use strict';
+
+  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
+      });
+    }
+  };
+
+  exports.Event = Event;
+
+  Object.defineProperty(exports, '__esModule', { value: true });
+
+})));

package/build/bundle.css

@@ -0,0 +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}