@bonlineza/luxity-lib 2.18.5 → 2.20.0

package/AddInterest.js

@@ -9660,12 +9660,10 @@
     return props.theme.rareStepFontSize.h5;
   });
   var DropdownBrands = styled__default.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    flex-direction: column;\n    width: 20%;\n  }\n"])));
-  var DropdownModels = styled__default.ul(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n   {\n    padding: 0 ", ";\n    border-left: 1px solid ", ";\n    border-right: 1px solid ", ";\n    width: 50%;\n    column-count: 3;\n  }\n"])), function (props) {
+  var DropdownModels = styled__default.ul(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n   {\n    padding: 0 ", ";\n    border-right: 1px solid ", ";\n    width: 50%;\n    column-count: 3;\n  }\n"])), function (props) {
     return props.theme.marginPaddings[3];
   }, function (props) {
     return props.theme.rareStepColors.ntrl40;
-  }, function (props) {
-    return props.theme.rareStepColors.ntrl40;
   });
   var DropdownModelsList = styled__default.li(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n   {\n    list-style: none;\n  }\n"])));
   var DropdownFigure = styled__default.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    width: 30%;\n    padding-left: ", ";\n  }\n"])), function (props) {

package/BrandSelector.js

@@ -10894,12 +10894,10 @@
     return props.theme.rareStepFontSize.h5;
   });
   var DropdownBrands = styled__default.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    flex-direction: column;\n    width: 20%;\n  }\n"])));
-  var DropdownModels = styled__default.ul(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n   {\n    padding: 0 ", ";\n    border-left: 1px solid ", ";\n    border-right: 1px solid ", ";\n    width: 50%;\n    column-count: 3;\n  }\n"])), function (props) {
+  var DropdownModels = styled__default.ul(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n   {\n    padding: 0 ", ";\n    border-right: 1px solid ", ";\n    width: 50%;\n    column-count: 3;\n  }\n"])), function (props) {
     return props.theme.marginPaddings[3];
   }, function (props) {
     return props.theme.rareStepColors.ntrl40;
-  }, function (props) {
-    return props.theme.rareStepColors.ntrl40;
   });
   var DropdownModelsList = styled__default.li(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n   {\n    list-style: none;\n  }\n"])));
   var DropdownFigure = styled__default.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    width: 30%;\n    padding-left: ", ";\n  }\n"])), function (props) {

package/GraphQLDropdownSelector.js

@@ -11029,12 +11029,10 @@
     return props.theme.rareStepFontSize.h5;
   });
   var DropdownBrands = styled__default.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    flex-direction: column;\n    width: 20%;\n  }\n"])));
-  var DropdownModels = styled__default.ul(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n   {\n    padding: 0 ", ";\n    border-left: 1px solid ", ";\n    border-right: 1px solid ", ";\n    width: 50%;\n    column-count: 3;\n  }\n"])), function (props) {
+  var DropdownModels = styled__default.ul(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n   {\n    padding: 0 ", ";\n    border-right: 1px solid ", ";\n    width: 50%;\n    column-count: 3;\n  }\n"])), function (props) {
     return props.theme.marginPaddings[3];
   }, function (props) {
     return props.theme.rareStepColors.ntrl40;
-  }, function (props) {
-    return props.theme.rareStepColors.ntrl40;
   });
   var DropdownModelsList = styled__default.li(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n   {\n    list-style: none;\n  }\n"])));
   var DropdownFigure = styled__default.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    width: 30%;\n    padding-left: ", ";\n  }\n"])), function (props) {

package/Interests.js

@@ -9463,12 +9463,10 @@
     return props.theme.rareStepFontSize.h5;
   });
   var DropdownBrands = styled__default.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    flex-direction: column;\n    width: 20%;\n  }\n"])));
-  var DropdownModels = styled__default.ul(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n   {\n    padding: 0 ", ";\n    border-left: 1px solid ", ";\n    border-right: 1px solid ", ";\n    width: 50%;\n    column-count: 3;\n  }\n"])), function (props) {
+  var DropdownModels = styled__default.ul(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n   {\n    padding: 0 ", ";\n    border-right: 1px solid ", ";\n    width: 50%;\n    column-count: 3;\n  }\n"])), function (props) {
     return props.theme.marginPaddings[3];
   }, function (props) {
     return props.theme.rareStepColors.ntrl40;
-  }, function (props) {
-    return props.theme.rareStepColors.ntrl40;
   });
   var DropdownModelsList = styled__default.li(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n   {\n    list-style: none;\n  }\n"])));
   var DropdownFigure = styled__default.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    width: 30%;\n    padding-left: ", ";\n  }\n"])), function (props) {

package/LuxityGraphQLDropdownSelector.js

@@ -10930,12 +10930,10 @@
     return props.theme.rareStepFontSize.h5;
   });
   var DropdownBrands = styled__default.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    flex-direction: column;\n    width: 20%;\n  }\n"])));
-  var DropdownModels = styled__default.ul(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n   {\n    padding: 0 ", ";\n    border-left: 1px solid ", ";\n    border-right: 1px solid ", ";\n    width: 50%;\n    column-count: 3;\n  }\n"])), function (props) {
+  var DropdownModels = styled__default.ul(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n   {\n    padding: 0 ", ";\n    border-right: 1px solid ", ";\n    width: 50%;\n    column-count: 3;\n  }\n"])), function (props) {
     return props.theme.marginPaddings[3];
   }, function (props) {
     return props.theme.rareStepColors.ntrl40;
-  }, function (props) {
-    return props.theme.rareStepColors.ntrl40;
   });
   var DropdownModelsList = styled__default.li(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n   {\n    list-style: none;\n  }\n"])));
   var DropdownFigure = styled__default.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    width: 30%;\n    padding-left: ", ";\n  }\n"])), function (props) {

package/MaterialSelector.js

@@ -10895,12 +10895,10 @@
     return props.theme.rareStepFontSize.h5;
   });
   var DropdownBrands = styled__default.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    flex-direction: column;\n    width: 20%;\n  }\n"])));
-  var DropdownModels = styled__default.ul(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n   {\n    padding: 0 ", ";\n    border-left: 1px solid ", ";\n    border-right: 1px solid ", ";\n    width: 50%;\n    column-count: 3;\n  }\n"])), function (props) {
+  var DropdownModels = styled__default.ul(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n   {\n    padding: 0 ", ";\n    border-right: 1px solid ", ";\n    width: 50%;\n    column-count: 3;\n  }\n"])), function (props) {
     return props.theme.marginPaddings[3];
   }, function (props) {
     return props.theme.rareStepColors.ntrl40;
-  }, function (props) {
-    return props.theme.rareStepColors.ntrl40;
   });
   var DropdownModelsList = styled__default.li(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n   {\n    list-style: none;\n  }\n"])));
   var DropdownFigure = styled__default.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    width: 30%;\n    padding-left: ", ";\n  }\n"])), function (props) {

package/ModelSelector.js

@@ -10895,12 +10895,10 @@
     return props.theme.rareStepFontSize.h5;
   });
   var DropdownBrands = styled__default.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    flex-direction: column;\n    width: 20%;\n  }\n"])));
-  var DropdownModels = styled__default.ul(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n   {\n    padding: 0 ", ";\n    border-left: 1px solid ", ";\n    border-right: 1px solid ", ";\n    width: 50%;\n    column-count: 3;\n  }\n"])), function (props) {
+  var DropdownModels = styled__default.ul(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n   {\n    padding: 0 ", ";\n    border-right: 1px solid ", ";\n    width: 50%;\n    column-count: 3;\n  }\n"])), function (props) {
     return props.theme.marginPaddings[3];
   }, function (props) {
     return props.theme.rareStepColors.ntrl40;
-  }, function (props) {
-    return props.theme.rareStepColors.ntrl40;
   });
   var DropdownModelsList = styled__default.li(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n   {\n    list-style: none;\n  }\n"])));
   var DropdownFigure = styled__default.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    width: 30%;\n    padding-left: ", ";\n  }\n"])), function (props) {

package/RareStepFooter.js

@@ -193,7 +193,9 @@
         instagramUrl = _ref.instagramUrl,
         instagramImageUrl = _ref.instagramImageUrl,
         className = _ref.className,
-        wordpressSiteUrl = _ref.wordpressSiteUrl;
+        wordpressSiteUrl = _ref.wordpressSiteUrl,
+        tiktokUrl = _ref.tiktokUrl,
+        tiktokImageUrl = _ref.tiktokImageUrl;
     return /*#__PURE__*/React__default.createElement(FooterConnectContainer, {
       className: className
     }, /*#__PURE__*/React__default.createElement(FooterLogo, {
@@ -214,6 +216,11 @@
       href: instagramUrl
     }, /*#__PURE__*/React__default.createElement(SocialIcon, {
       src: instagramImageUrl
+    })), /*#__PURE__*/React__default.createElement(FooterLink, {
+      target: "_blank",
+      href: tiktokUrl
+    }, /*#__PURE__*/React__default.createElement(SocialIcon, {
+      src: tiktokImageUrl
     }))));
   }
 
@@ -228,7 +235,9 @@
         instagramImageUrl = _ref.instagramImageUrl,
         paymentImage = _ref.paymentImage,
         footerLinks = _ref.footerLinks,
-        wordpressSiteUrl = _ref.wordpressSiteUrl;
+        wordpressSiteUrl = _ref.wordpressSiteUrl,
+        tiktokUrl = _ref.tiktokUrl,
+        tiktokImageUrl = _ref.tiktokImageUrl;
     return /*#__PURE__*/React__default.createElement(FooterWrapper, null, /*#__PURE__*/React__default.createElement(PageContainer, {
       className: "footer__page-container"
     }, /*#__PURE__*/React__default.createElement(FooterLinksWrapper, {
@@ -255,7 +264,9 @@
         facebookIconUrl: facebookIconUrl,
         instagramUrl: instagramUrl,
         instagramImageUrl: instagramImageUrl,
-        wordpressSiteUrl: wordpressSiteUrl
+        wordpressSiteUrl: wordpressSiteUrl,
+        tiktokUrl: tiktokUrl,
+        tiktokImageUrl: tiktokImageUrl
       }));
     })), /*#__PURE__*/React__default.createElement(FooterConnect, {
       className: "footer__connect-mobile",
@@ -264,7 +275,9 @@
       facebookIconUrl: facebookIconUrl,
       instagramUrl: instagramUrl,
       instagramImageUrl: instagramImageUrl,
-      wordpressSiteUrl: wordpressSiteUrl
+      wordpressSiteUrl: wordpressSiteUrl,
+      tiktokUrl: tiktokUrl,
+      tiktokImageUrl: tiktokImageUrl
     }), /*#__PURE__*/React__default.createElement(FooterImageWrapper, {
       className: "footer__figure"
     }, /*#__PURE__*/React__default.createElement(FooterImage, {

package/RareStepHeader.js

@@ -224,12 +224,10 @@
     return props.theme.rareStepFontSize.h5;
   });
   var DropdownBrands = styled__default.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    flex-direction: column;\n    width: 20%;\n  }\n"])));
-  var DropdownModels = styled__default.ul(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n   {\n    padding: 0 ", ";\n    border-left: 1px solid ", ";\n    border-right: 1px solid ", ";\n    width: 50%;\n    column-count: 3;\n  }\n"])), function (props) {
+  var DropdownModels = styled__default.ul(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n   {\n    padding: 0 ", ";\n    border-right: 1px solid ", ";\n    width: 50%;\n    column-count: 3;\n  }\n"])), function (props) {
     return props.theme.marginPaddings[3];
   }, function (props) {
     return props.theme.rareStepColors.ntrl40;
-  }, function (props) {
-    return props.theme.rareStepColors.ntrl40;
   });
   var DropdownModelsList = styled__default.li(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n   {\n    list-style: none;\n  }\n"])));
   var DropdownFigure = styled__default.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    width: 30%;\n    padding-left: ", ";\n  }\n"])), function (props) {
@@ -325,47 +323,20 @@
   };
 
   var HeaderDropdown = function HeaderDropdown(_ref) {
-    var _headerDropdownProduc;
-
-    var headerDropdownProductObject = _ref.headerDropdownProductObject,
+    var currentSelectedItem = _ref.currentSelectedItem,
         handleShowDropdown = _ref.handleShowDropdown,
         handleHideDropdown = _ref.handleHideDropdown;
-
-    var _useState = React.useState([]),
-        _useState2 = _slicedToArray(_useState, 2),
-        currentModels = _useState2[0],
-        setCurrentModels = _useState2[1];
-
-    var _useState3 = React.useState(null),
-        _useState4 = _slicedToArray(_useState3, 2),
-        currentBrand = _useState4[0],
-        setCurrentBrand = _useState4[1];
-
-    var handleBrandHover = function handleBrandHover(brand) {
-      setCurrentBrand(brand);
-      setCurrentModels(brand.models);
-    };
-
     return /*#__PURE__*/React__default.createElement(Dropdown, {
       onMouseOver: handleShowDropdown,
       onMouseOut: handleHideDropdown
-    }, /*#__PURE__*/React__default.createElement(PageContainer, null, /*#__PURE__*/React__default.createElement(DropdownBrands, null, headerDropdownProductObject === null || headerDropdownProductObject === void 0 ? void 0 : (_headerDropdownProduc = headerDropdownProductObject.brands) === null || _headerDropdownProduc === void 0 ? void 0 : _headerDropdownProduc.map(function (brand, index) {
-      return /*#__PURE__*/React__default.createElement(DropdownBrandLinkContainer, {
-        key: index,
-        onMouseOver: function onMouseOver() {
-          return handleBrandHover(brand);
-        }
-      }, /*#__PURE__*/React__default.createElement(DropdownBrandLinkHR, null), /*#__PURE__*/React__default.createElement(DropdownBrandLink, {
-        href: brand.brandLink
-      }, brand.brandName));
-    })), /*#__PURE__*/React__default.createElement(DropdownModels, null, currentModels === null || currentModels === void 0 ? void 0 : currentModels.map(function (model, index) {
+    }, /*#__PURE__*/React__default.createElement(PageContainer, null, /*#__PURE__*/React__default.createElement(DropdownModels, null, ((currentSelectedItem === null || currentSelectedItem === void 0 ? void 0 : currentSelectedItem.models) || []).map(function (model, index) {
       return /*#__PURE__*/React__default.createElement(DropdownModelsList, {
         key: index
       }, /*#__PURE__*/React__default.createElement(DropdownLink, {
         href: model.modelLink
       }, model.modelName));
-    })), /*#__PURE__*/React__default.createElement(DropdownFigure, null, (currentBrand === null || currentBrand === void 0 ? void 0 : currentBrand.brandImageUrl) && /*#__PURE__*/React__default.createElement(DropdownImage, {
-      src: currentBrand === null || currentBrand === void 0 ? void 0 : currentBrand.brandImageUrl
+    })), /*#__PURE__*/React__default.createElement(DropdownFigure, null, (currentSelectedItem === null || currentSelectedItem === void 0 ? void 0 : currentSelectedItem.brandImageUrl) && /*#__PURE__*/React__default.createElement(DropdownImage, {
+      src: currentSelectedItem === null || currentSelectedItem === void 0 ? void 0 : currentSelectedItem.brandImageUrl
     }))));
   };
 
@@ -374,14 +345,16 @@
         dropdownOpenIconUrl = _ref.dropdownOpenIconUrl,
         handleShowDropdown = _ref.handleShowDropdown,
         handleHideDropdown = _ref.handleHideDropdown,
-        showDropdown = _ref.showDropdown,
+        currentSelectedItem = _ref.currentSelectedItem,
         desktopHeaderLinks = _ref.desktopHeaderLinks;
     return /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(NavigationContainer, null, /*#__PURE__*/React__default.createElement(PageContainer, null, /*#__PURE__*/React__default.createElement(NavigationLinks, null, desktopHeaderLinks.left.map(function (link, index) {
       return link !== null && link !== void 0 && link.isDropdown ? /*#__PURE__*/React__default.createElement(NavigationLink, {
         key: index,
-        onMouseOver: handleShowDropdown,
+        onMouseOver: function onMouseOver() {
+          return handleShowDropdown(link);
+        },
         onMouseOut: handleHideDropdown
-      }, link.name, showDropdown ? /*#__PURE__*/React__default.createElement(DropdownNavigatorIcon, {
+      }, link.name, currentSelectedItem.name === link.name ? /*#__PURE__*/React__default.createElement(DropdownNavigatorIcon, {
         src: dropdownClosedIconUrl
       }) : /*#__PURE__*/React__default.createElement(DropdownNavigatorIcon, {
         src: dropdownOpenIconUrl
@@ -413,18 +386,17 @@
         handleOnAccountClick = _ref.handleOnAccountClick,
         handleOnCartClick = _ref.handleOnCartClick,
         userIconDropdownContent = _ref.userIconDropdownContent;
+    var timeoutIdRef = React.useRef(null);
 
     var _useState = React.useState(false),
         _useState2 = _slicedToArray(_useState, 2),
-        showDropdown = _useState2[0],
-        setShowDropdown = _useState2[1];
+        showSearch = _useState2[0],
+        setShowSearch = _useState2[1];
 
-    var timeoutIdRef = React.useRef(null);
-
-    var _useState3 = React.useState(false),
+    var _useState3 = React.useState({}),
         _useState4 = _slicedToArray(_useState3, 2),
-        showSearch = _useState4[0],
-        setShowSearch = _useState4[1];
+        currentSelectedItem = _useState4[0],
+        setCurrentSelectedItem = _useState4[1];
 
     var _useState5 = React.useState(false),
         _useState6 = _slicedToArray(_useState5, 2),
@@ -437,14 +409,17 @@
       setShowSearch(!showSearch);
     };
 
-    var handleShowDropdown = function handleShowDropdown() {
+    var _handleShowDropdown = function handleShowDropdown(currentItem) {
       clearTimeout(timeoutIdRef.current);
-      setShowDropdown(true);
+
+      if (currentItem) {
+        setCurrentSelectedItem(currentItem);
+      }
     };
 
     var handleHideDropdown = function handleHideDropdown() {
       timeoutIdRef.current = setTimeout(function () {
-        setShowDropdown(false);
+        setCurrentSelectedItem({});
       }, 500);
     };
 
@@ -493,18 +468,21 @@
       dropdownClosedIconUrl: dropdownClosedIconUrl,
       dropdownOpenIconUrl: dropdownOpenIconUrl,
       currencyFlagIconUrl: currencyFlagIconUrl,
-      handleShowDropdown: handleShowDropdown,
+      handleShowDropdown: _handleShowDropdown,
+      currentSelectedItem: currentSelectedItem,
       handleHideDropdown: handleHideDropdown,
-      showDropdown: showDropdown,
       desktopHeaderLinks: desktopHeaderLinks
     }), showSearch && /*#__PURE__*/React__default.createElement(DropdownSearchContainer, null, /*#__PURE__*/React__default.createElement(Search, {
       closeIconUrl: closeIconUrl,
       navigationSearchIconUrl: navigationSearchIconUrl,
       wordpressSiteUrl: wordpressSiteUrl,
       toggleSearch: toggleSearch
-    })), showDropdown && /*#__PURE__*/React__default.createElement(HeaderDropdown, {
+    })), Object.keys(currentSelectedItem).length !== 0 && /*#__PURE__*/React__default.createElement(HeaderDropdown, {
       headerDropdownProductObject: desktopHeaderLinks.headerDropdownProductObject,
-      handleShowDropdown: handleShowDropdown,
+      currentSelectedItem: currentSelectedItem,
+      handleShowDropdown: function handleShowDropdown() {
+        return _handleShowDropdown();
+      },
       handleHideDropdown: handleHideDropdown
     }));
   };

package/build/bundle.js

@@ -11504,12 +11504,10 @@
     return props.theme.rareStepFontSize.h5;
   });
   var DropdownBrands = styled__default.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    flex-direction: column;\n    width: 20%;\n  }\n"])));
-  var DropdownModels = styled__default.ul(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n   {\n    padding: 0 ", ";\n    border-left: 1px solid ", ";\n    border-right: 1px solid ", ";\n    width: 50%;\n    column-count: 3;\n  }\n"])), function (props) {
+  var DropdownModels = styled__default.ul(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n   {\n    padding: 0 ", ";\n    border-right: 1px solid ", ";\n    width: 50%;\n    column-count: 3;\n  }\n"])), function (props) {
     return props.theme.marginPaddings[3];
   }, function (props) {
     return props.theme.rareStepColors.ntrl40;
-  }, function (props) {
-    return props.theme.rareStepColors.ntrl40;
   });
   var DropdownModelsList = styled__default.li(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n   {\n    list-style: none;\n  }\n"])));
   var DropdownFigure = styled__default.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    width: 30%;\n    padding-left: ", ";\n  }\n"])), function (props) {
@@ -11605,47 +11603,20 @@
   };
 
   var HeaderDropdown = function HeaderDropdown(_ref) {
-    var _headerDropdownProduc;
-
-    var headerDropdownProductObject = _ref.headerDropdownProductObject,
+    var currentSelectedItem = _ref.currentSelectedItem,
         handleShowDropdown = _ref.handleShowDropdown,
         handleHideDropdown = _ref.handleHideDropdown;
-
-    var _useState = React.useState([]),
-        _useState2 = _slicedToArray(_useState, 2),
-        currentModels = _useState2[0],
-        setCurrentModels = _useState2[1];
-
-    var _useState3 = React.useState(null),
-        _useState4 = _slicedToArray(_useState3, 2),
-        currentBrand = _useState4[0],
-        setCurrentBrand = _useState4[1];
-
-    var handleBrandHover = function handleBrandHover(brand) {
-      setCurrentBrand(brand);
-      setCurrentModels(brand.models);
-    };
-
     return /*#__PURE__*/React__default.createElement(Dropdown, {
       onMouseOver: handleShowDropdown,
       onMouseOut: handleHideDropdown
-    }, /*#__PURE__*/React__default.createElement(PageContainer, null, /*#__PURE__*/React__default.createElement(DropdownBrands, null, headerDropdownProductObject === null || headerDropdownProductObject === void 0 ? void 0 : (_headerDropdownProduc = headerDropdownProductObject.brands) === null || _headerDropdownProduc === void 0 ? void 0 : _headerDropdownProduc.map(function (brand, index) {
-      return /*#__PURE__*/React__default.createElement(DropdownBrandLinkContainer, {
-        key: index,
-        onMouseOver: function onMouseOver() {
-          return handleBrandHover(brand);
-        }
-      }, /*#__PURE__*/React__default.createElement(DropdownBrandLinkHR, null), /*#__PURE__*/React__default.createElement(DropdownBrandLink, {
-        href: brand.brandLink
-      }, brand.brandName));
-    })), /*#__PURE__*/React__default.createElement(DropdownModels, null, currentModels === null || currentModels === void 0 ? void 0 : currentModels.map(function (model, index) {
+    }, /*#__PURE__*/React__default.createElement(PageContainer, null, /*#__PURE__*/React__default.createElement(DropdownModels, null, ((currentSelectedItem === null || currentSelectedItem === void 0 ? void 0 : currentSelectedItem.models) || []).map(function (model, index) {
       return /*#__PURE__*/React__default.createElement(DropdownModelsList, {
         key: index
       }, /*#__PURE__*/React__default.createElement(DropdownLink, {
         href: model.modelLink
       }, model.modelName));
-    })), /*#__PURE__*/React__default.createElement(DropdownFigure, null, (currentBrand === null || currentBrand === void 0 ? void 0 : currentBrand.brandImageUrl) && /*#__PURE__*/React__default.createElement(DropdownImage, {
-      src: currentBrand === null || currentBrand === void 0 ? void 0 : currentBrand.brandImageUrl
+    })), /*#__PURE__*/React__default.createElement(DropdownFigure, null, (currentSelectedItem === null || currentSelectedItem === void 0 ? void 0 : currentSelectedItem.brandImageUrl) && /*#__PURE__*/React__default.createElement(DropdownImage, {
+      src: currentSelectedItem === null || currentSelectedItem === void 0 ? void 0 : currentSelectedItem.brandImageUrl
     }))));
   };
 
@@ -11654,14 +11625,16 @@
         dropdownOpenIconUrl = _ref.dropdownOpenIconUrl,
         handleShowDropdown = _ref.handleShowDropdown,
         handleHideDropdown = _ref.handleHideDropdown,
-        showDropdown = _ref.showDropdown,
+        currentSelectedItem = _ref.currentSelectedItem,
         desktopHeaderLinks = _ref.desktopHeaderLinks;
     return /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(NavigationContainer, null, /*#__PURE__*/React__default.createElement(PageContainer, null, /*#__PURE__*/React__default.createElement(NavigationLinks, null, desktopHeaderLinks.left.map(function (link, index) {
       return link !== null && link !== void 0 && link.isDropdown ? /*#__PURE__*/React__default.createElement(NavigationLink, {
         key: index,
-        onMouseOver: handleShowDropdown,
+        onMouseOver: function onMouseOver() {
+          return handleShowDropdown(link);
+        },
         onMouseOut: handleHideDropdown
-      }, link.name, showDropdown ? /*#__PURE__*/React__default.createElement(DropdownNavigatorIcon, {
+      }, link.name, currentSelectedItem.name === link.name ? /*#__PURE__*/React__default.createElement(DropdownNavigatorIcon, {
         src: dropdownClosedIconUrl
       }) : /*#__PURE__*/React__default.createElement(DropdownNavigatorIcon, {
         src: dropdownOpenIconUrl
@@ -11693,18 +11666,17 @@
         handleOnAccountClick = _ref.handleOnAccountClick,
         handleOnCartClick = _ref.handleOnCartClick,
         userIconDropdownContent = _ref.userIconDropdownContent;
+    var timeoutIdRef = React.useRef(null);
 
     var _useState = React.useState(false),
         _useState2 = _slicedToArray(_useState, 2),
-        showDropdown = _useState2[0],
-        setShowDropdown = _useState2[1];
-
-    var timeoutIdRef = React.useRef(null);
+        showSearch = _useState2[0],
+        setShowSearch = _useState2[1];
 
-    var _useState3 = React.useState(false),
+    var _useState3 = React.useState({}),
         _useState4 = _slicedToArray(_useState3, 2),
-        showSearch = _useState4[0],
-        setShowSearch = _useState4[1];
+        currentSelectedItem = _useState4[0],
+        setCurrentSelectedItem = _useState4[1];
 
     var _useState5 = React.useState(false),
         _useState6 = _slicedToArray(_useState5, 2),
@@ -11717,14 +11689,17 @@
       setShowSearch(!showSearch);
     };
 
-    var handleShowDropdown = function handleShowDropdown() {
+    var _handleShowDropdown = function handleShowDropdown(currentItem) {
       clearTimeout(timeoutIdRef.current);
-      setShowDropdown(true);
+
+      if (currentItem) {
+        setCurrentSelectedItem(currentItem);
+      }
     };
 
     var handleHideDropdown = function handleHideDropdown() {
       timeoutIdRef.current = setTimeout(function () {
-        setShowDropdown(false);
+        setCurrentSelectedItem({});
       }, 500);
     };
 
@@ -11773,18 +11748,21 @@
       dropdownClosedIconUrl: dropdownClosedIconUrl,
       dropdownOpenIconUrl: dropdownOpenIconUrl,
       currencyFlagIconUrl: currencyFlagIconUrl,
-      handleShowDropdown: handleShowDropdown,
+      handleShowDropdown: _handleShowDropdown,
+      currentSelectedItem: currentSelectedItem,
       handleHideDropdown: handleHideDropdown,
-      showDropdown: showDropdown,
       desktopHeaderLinks: desktopHeaderLinks
     }), showSearch && /*#__PURE__*/React__default.createElement(DropdownSearchContainer, null, /*#__PURE__*/React__default.createElement(Search$1, {
       closeIconUrl: closeIconUrl,
       navigationSearchIconUrl: navigationSearchIconUrl,
       wordpressSiteUrl: wordpressSiteUrl,
       toggleSearch: toggleSearch
-    })), showDropdown && /*#__PURE__*/React__default.createElement(HeaderDropdown, {
+    })), Object.keys(currentSelectedItem).length !== 0 && /*#__PURE__*/React__default.createElement(HeaderDropdown, {
       headerDropdownProductObject: desktopHeaderLinks.headerDropdownProductObject,
-      handleShowDropdown: handleShowDropdown,
+      currentSelectedItem: currentSelectedItem,
+      handleShowDropdown: function handleShowDropdown() {
+        return _handleShowDropdown();
+      },
       handleHideDropdown: handleHideDropdown
     }));
   };
@@ -12205,7 +12183,9 @@
         instagramUrl = _ref.instagramUrl,
         instagramImageUrl = _ref.instagramImageUrl,
         className = _ref.className,
-        wordpressSiteUrl = _ref.wordpressSiteUrl;
+        wordpressSiteUrl = _ref.wordpressSiteUrl,
+        tiktokUrl = _ref.tiktokUrl,
+        tiktokImageUrl = _ref.tiktokImageUrl;
     return /*#__PURE__*/React__default.createElement(FooterConnectContainer, {
       className: className
     }, /*#__PURE__*/React__default.createElement(FooterLogo, {
@@ -12226,6 +12206,11 @@
       href: instagramUrl
     }, /*#__PURE__*/React__default.createElement(SocialIcon, {
       src: instagramImageUrl
+    })), /*#__PURE__*/React__default.createElement(FooterLink, {
+      target: "_blank",
+      href: tiktokUrl
+    }, /*#__PURE__*/React__default.createElement(SocialIcon, {
+      src: tiktokImageUrl
     }))));
   }
 
@@ -12240,7 +12225,9 @@
         instagramImageUrl = _ref.instagramImageUrl,
         paymentImage = _ref.paymentImage,
         footerLinks = _ref.footerLinks,
-        wordpressSiteUrl = _ref.wordpressSiteUrl;
+        wordpressSiteUrl = _ref.wordpressSiteUrl,
+        tiktokUrl = _ref.tiktokUrl,
+        tiktokImageUrl = _ref.tiktokImageUrl;
     return /*#__PURE__*/React__default.createElement(FooterWrapper, null, /*#__PURE__*/React__default.createElement(PageContainer$1, {
       className: "footer__page-container"
     }, /*#__PURE__*/React__default.createElement(FooterLinksWrapper, {
@@ -12267,7 +12254,9 @@
         facebookIconUrl: facebookIconUrl,
         instagramUrl: instagramUrl,
         instagramImageUrl: instagramImageUrl,
-        wordpressSiteUrl: wordpressSiteUrl
+        wordpressSiteUrl: wordpressSiteUrl,
+        tiktokUrl: tiktokUrl,
+        tiktokImageUrl: tiktokImageUrl
       }));
     })), /*#__PURE__*/React__default.createElement(FooterConnect, {
       className: "footer__connect-mobile",
@@ -12276,7 +12265,9 @@
       facebookIconUrl: facebookIconUrl,
       instagramUrl: instagramUrl,
       instagramImageUrl: instagramImageUrl,
-      wordpressSiteUrl: wordpressSiteUrl
+      wordpressSiteUrl: wordpressSiteUrl,
+      tiktokUrl: tiktokUrl,
+      tiktokImageUrl: tiktokImageUrl
     }), /*#__PURE__*/React__default.createElement(FooterImageWrapper, {
       className: "footer__figure"
     }, /*#__PURE__*/React__default.createElement(FooterImage, {

package/package.json

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

package/svg/MyProfile.js

@@ -35,7 +35,8 @@
       d: "M14.5 29C22.5081 29 29 22.5081 29 14.5C29 6.49187 22.5081 0 14.5 0C6.49187 0 0 6.49187 0 14.5C0 22.5081 6.49187 29 14.5 29Z",
       fill: "#E5E5E5"
     }), /*#__PURE__*/React.createElement("mask", {
-      id: "mask0",
+      id: "mask0" // eslint-disable-next-line react/no-unknown-property
+      ,
       "mask-type": "alpha",
       maskUnits: "userSpaceOnUse",
       x: "4",

package/LuxityLoader.js

@@ -1,75 +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.LuxityLoader = factory(global.React, global.styled));
-}(this, (function (React, styled) { 'use strict';
-
-  React = React && Object.prototype.hasOwnProperty.call(React, 'default') ? React['default'] : React;
-  styled = styled && Object.prototype.hasOwnProperty.call(styled, 'default') ? styled['default'] : styled;
-
-  function _taggedTemplateLiteral(strings, raw) {
-    if (!raw) {
-      raw = strings.slice(0);
-    }
-
-    return Object.freeze(Object.defineProperties(strings, {
-      raw: {
-        value: Object.freeze(raw)
-      }
-    }));
-  }
-
-  var LuxityArrowLeft = (function (props) {
-    return /*#__PURE__*/React.createElement("svg", {
-      version: "1.0",
-      xmlns: "http://www.w3.org/2000/svg",
-      width: props.width || '100%',
-      height: props.height || '100%',
-      viewBox: "0 0 177.000000 300.000000",
-      preserveAspectRatio: "xMidYMid meet"
-    }, /*#__PURE__*/React.createElement("g", {
-      transform: "translate(0.000000,300.000000) scale(0.100000,-0.100000)",
-      fill: "#000000",
-      stroke: "none"
-    }, /*#__PURE__*/React.createElement("path", {
-      d: "M808 2628 c-139 -205 -377 -557 -530 -781 l-277 -409 48 -71 c363\n-539 905 -1335 915 -1345 9 -9 90 -12 362 -10 l351 3 -350 515 c-192 283 -409\n603 -482 711 l-134 197 386 568 c212 313 450 665 529 782 l145 212 -355 0\n-355 0 -253 -372z"
-    })));
-  });
-
-  var LuxityArrowRight = (function (props) {
-    return /*#__PURE__*/React.createElement("svg", {
-      version: "1.0",
-      xmlns: "http://www.w3.org/2000/svg",
-      width: props.width || '100%',
-      height: props.height || '100%',
-      viewBox: "0 0 177.000000 300.000000",
-      preserveAspectRatio: "xMidYMid meet"
-    }, /*#__PURE__*/React.createElement("g", {
-      transform: "translate(0.000000,300.000000) scale(0.100000,-0.100000)",
-      fill: "#000000",
-      stroke: "none"
-    }, /*#__PURE__*/React.createElement("path", {
-      d: "M106 2973 c9 -16 226 -336 481 -711 255 -376 465 -687 466 -691 1 -4\n-233 -355 -520 -779 -288 -424 -523 -773 -523 -776 0 -3 159 -6 353 -5 l352 0\n525 776 c289 427 524 780 522 785 -1 5 -219 328 -484 719 l-481 709 -355 0\n-354 0 18 -27z"
-    })));
-  });
-
-  var _templateObject, _templateObject2, _templateObject3;
-  var LoaderContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  margin: 20px auto;\n"])));
-  var LeftImageContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-start;\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n  animation: slide-left infinite 3s;\n  background-color: white;\n\n  @keyframes slide-left {\n    0% {\n      transform: translateX(0);\n    }\n    40% {\n      transform: translateX(50%);\n    }\n    100% {\n      transform: translateX(150%);\n    }\n  }\n"])));
-  var RightImageContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-end;\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n  animation: slide-right infinite 3s;\n\n  @keyframes slide-right {\n    0% {\n      transform: translateX(0);\n    }\n    40% {\n      transform: translateX(-50%);\n      opacity: 1;\n    }\n    100% {\n      transform: translateX(-150%);\n      opacity: 0;\n    }\n  }\n"])));
-
-  function LuxityLoader(_ref) {
-    var width = _ref.width,
-        height = _ref.height;
-    return /*#__PURE__*/React.createElement(LoaderContainer, null, /*#__PURE__*/React.createElement(LeftImageContainer, null, /*#__PURE__*/React.createElement(LuxityArrowRight, {
-      width: width,
-      height: height
-    })), /*#__PURE__*/React.createElement(RightImageContainer, null, /*#__PURE__*/React.createElement(LuxityArrowLeft, {
-      width: width,
-      height: height
-    })));
-  }
-
-  return LuxityLoader;
-
-})));

package/RareStepLoginModal.js

@@ -1,15 +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.RareStepLoginModal = factory(global.React));
-}(this, (function (React) { 'use strict';
-
-  React = React && Object.prototype.hasOwnProperty.call(React, 'default') ? React['default'] : React;
-
-  function RareStepLoginModal() {
-    return /*#__PURE__*/React.createElement("div", null, "RareStepLoginModal");
-  }
-
-  return RareStepLoginModal;
-
-})));

package/svg/LuxityArrowLeft.js

@@ -1,28 +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.svgs = factory(global.React));
-}(this, (function (React) { 'use strict';
-
-  React = React && Object.prototype.hasOwnProperty.call(React, 'default') ? React['default'] : React;
-
-  var LuxityArrowLeft = (function (props) {
-    return /*#__PURE__*/React.createElement("svg", {
-      version: "1.0",
-      xmlns: "http://www.w3.org/2000/svg",
-      width: props.width || '100%',
-      height: props.height || '100%',
-      viewBox: "0 0 177.000000 300.000000",
-      preserveAspectRatio: "xMidYMid meet"
-    }, /*#__PURE__*/React.createElement("g", {
-      transform: "translate(0.000000,300.000000) scale(0.100000,-0.100000)",
-      fill: "#000000",
-      stroke: "none"
-    }, /*#__PURE__*/React.createElement("path", {
-      d: "M106 2973 c9 -16 226 -336 481 -711 255 -376 465 -687 466 -691 1 -4\n-233 -355 -520 -779 -288 -424 -523 -773 -523 -776 0 -3 159 -6 353 -5 l352 0\n525 776 c289 427 524 780 522 785 -1 5 -219 328 -484 719 l-481 709 -355 0\n-354 0 18 -27z"
-    })));
-  });
-
-  return LuxityArrowLeft;
-
-})));

package/svg/LuxityArrowRight.js

@@ -1,28 +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.svgs = factory(global.React));
-}(this, (function (React) { 'use strict';
-
-  React = React && Object.prototype.hasOwnProperty.call(React, 'default') ? React['default'] : React;
-
-  var LuxityArrowRight = (function (props) {
-    return /*#__PURE__*/React.createElement("svg", {
-      version: "1.0",
-      xmlns: "http://www.w3.org/2000/svg",
-      width: props.width || '100%',
-      height: props.height || '100%',
-      viewBox: "0 0 177.000000 300.000000",
-      preserveAspectRatio: "xMidYMid meet"
-    }, /*#__PURE__*/React.createElement("g", {
-      transform: "translate(0.000000,300.000000) scale(0.100000,-0.100000)",
-      fill: "#000000",
-      stroke: "none"
-    }, /*#__PURE__*/React.createElement("path", {
-      d: "M808 2628 c-139 -205 -377 -557 -530 -781 l-277 -409 48 -71 c363\n-539 905 -1335 915 -1345 9 -9 90 -12 362 -10 l351 3 -350 515 c-192 283 -409\n603 -482 711 l-134 197 386 568 c212 313 450 665 529 782 l145 212 -355 0\n-355 0 -253 -372z"
-    })));
-  });
-
-  return LuxityArrowRight;
-
-})));

package/svg/RareStepLogo.js

@@ -1,8 +0,0 @@
-(function (factory) {
-	typeof define === 'function' && define.amd ? define(factory) :
-	factory();
-}((function () { 'use strict';
-
-
-
-})));