npm - @bonlineza/luxity-lib - Versions diffs - 2.40.1 → 2.40.3 - Mend

@bonlineza/luxity-lib 2.40.1 → 2.40.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/GraphQLDropdownSelector.js +4 -19
package/LuxityDesktopHeader.js +3 -3
package/LuxityGraphQLDropdownSelector.js +4 -19
package/LuxityMobileHeader.js +3 -3
package/LuxitySideNav.js +2 -2
package/MaterialSelector.js +4 -19
package/ModelSelector.js +4 -19
package/build/bundle.css +1 -1
package/build/bundle.js +10 -464
package/package.json +1 -1
package/TestComponent.js +0 -15
package/build/CountryCodeSelect/index.js +0 -18
package/build/ReactSelectWrapper/index.js +0 -34
package/postcss.config.js +0 -6

package/GraphQLDropdownSelector.js CHANGED Viewed

@@ -12245,32 +12245,17 @@
   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$V, _templateObject2$g;
-  var OptionsRow = styled__default.div(_templateObject$V || (_templateObject$V = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: nowrap;\n  flex-direction: row;\n"])));
-  var Options = styled__default.div(_templateObject2$g || (_templateObject2$g = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: nowrap;\n  flex-direction: row;\n  flex-basis: 60%;\n"])));
-  var _templateObject$W, _templateObject2$h;
-  var SectionContainer = styled__default.div(_templateObject$W || (_templateObject$W = _taggedTemplateLiteral(["\n  border-top: flex 1px solid ", ";\n  border-top-width: calc(100% - 50px);\n  padding: 5px 10px;\n"])), function (props) {
-    return props.theme.colors.primary;
-  });
-  var SectionHeading = styled__default.div(_templateObject2$h || (_templateObject2$h = _taggedTemplateLiteral(["\n  padding: 5px 10px;\n"])));
-  var _templateObject$X, _templateObject2$i, _templateObject3$9;
-  var CommunicationPreferenceContainer = styled__default.div(_templateObject$X || (_templateObject$X = _taggedTemplateLiteral(["\n  border: solid 1px #d1d5dbff;\n  margin-bottom: 40px;\n"])));
-  var EditButtonRow = styled__default.div(_templateObject2$i || (_templateObject2$i = _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 _templateObject$Y;
-  var FooterWrapper$1 = styled__default.div(_templateObject$Y || (_templateObject$Y = _taggedTemplateLiteral(["\n   {\n    background-color: ", ";\n  }\n"])), function (props) {
+  var _templateObject$V;
+  var FooterWrapper$1 = styled__default.div(_templateObject$V || (_templateObject$V = _taggedTemplateLiteral(["\n   {\n    background-color: ", ";\n  }\n"])), function (props) {
     return props.theme.colors.gray;
   });
-  var _templateObject$Z;
+  var _templateObject$W;
   var ALL_ITEM$1 = {
     label: 'ALL',
     value: 'ALL'
   };
-  var StyledMultiselector$1 = styled__default.div(_templateObject$Z || (_templateObject$Z = _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$W || (_templateObject$W = _taggedTemplateLiteral(["\n  .multiselector__selected-items,\n  .multiselector__selectable-items {\n    display: flex;\n    flex-flow: no-wrap;\n    margin-bottom: 40px;\n    .dropdown-select-container {\n      width: 100%;\n      .dropdown-select {\n        &__control {\n          border-color: ", ";\n          border-radius: 0px;\n          background-color: ", ";\n          color: ", ";\n        }\n        &__multi-value {\n          background-color: ", ";\n        }\n        &__multi-value__label {\n          color: ", ";\n          font-size: 100%;\n        }\n        &__multi-value__remove {\n          svg {\n            fill: ", ";\n          }\n        }\n      }\n    }\n  }\n"])), function (props) {
     return props.theme.colors.primary;
   }, function (props) {
     return props.theme.colors.ntrlMin;

package/LuxityDesktopHeader.js CHANGED Viewed

@@ -1188,7 +1188,7 @@
         searchValue = _useState2[0],
         setSearchValue = _useState2[1];
-    var _useState3 = React.useState(false),
+    var _useState3 = React.useState(true),
         _useState4 = _slicedToArray(_useState3, 2),
         loading = _useState4[0],
         setLoading = _useState4[1];
@@ -1289,7 +1289,7 @@
       });
     }
-    React.useMemo(function () {
+    React.useEffect(function () {
       setLoading(true);
       axios.get("".concat(categoryConfig.menuData)).then(function (_ref2) {
         var data = _ref2.data;
@@ -1299,7 +1299,7 @@
         return setHasError(true);
       });
     }, [categoryConfig.menuData]);
-    React.useMemo(function () {
+    React.useEffect(function () {
       if (!initialSearchData) {
         return;
       }

package/LuxityGraphQLDropdownSelector.js CHANGED Viewed

@@ -12245,32 +12245,17 @@
   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$V, _templateObject2$g;
-  var OptionsRow = styled__default.div(_templateObject$V || (_templateObject$V = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: nowrap;\n  flex-direction: row;\n"])));
-  var Options = styled__default.div(_templateObject2$g || (_templateObject2$g = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: nowrap;\n  flex-direction: row;\n  flex-basis: 60%;\n"])));
-  var _templateObject$W, _templateObject2$h;
-  var SectionContainer = styled__default.div(_templateObject$W || (_templateObject$W = _taggedTemplateLiteral(["\n  border-top: flex 1px solid ", ";\n  border-top-width: calc(100% - 50px);\n  padding: 5px 10px;\n"])), function (props) {
-    return props.theme.colors.primary;
-  });
-  var SectionHeading = styled__default.div(_templateObject2$h || (_templateObject2$h = _taggedTemplateLiteral(["\n  padding: 5px 10px;\n"])));
-  var _templateObject$X, _templateObject2$i, _templateObject3$9;
-  var CommunicationPreferenceContainer = styled__default.div(_templateObject$X || (_templateObject$X = _taggedTemplateLiteral(["\n  border: solid 1px #d1d5dbff;\n  margin-bottom: 40px;\n"])));
-  var EditButtonRow = styled__default.div(_templateObject2$i || (_templateObject2$i = _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 _templateObject$Y;
-  var FooterWrapper$1 = styled__default.div(_templateObject$Y || (_templateObject$Y = _taggedTemplateLiteral(["\n   {\n    background-color: ", ";\n  }\n"])), function (props) {
+  var _templateObject$V;
+  var FooterWrapper$1 = styled__default.div(_templateObject$V || (_templateObject$V = _taggedTemplateLiteral(["\n   {\n    background-color: ", ";\n  }\n"])), function (props) {
     return props.theme.colors.gray;
   });
-  var _templateObject$Z;
+  var _templateObject$W;
   var ALL_ITEM$1 = {
     label: 'ALL',
     value: 'ALL'
   };
-  var StyledMultiselector$1 = styled__default.div(_templateObject$Z || (_templateObject$Z = _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$W || (_templateObject$W = _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/LuxityMobileHeader.js CHANGED Viewed

@@ -701,7 +701,7 @@
         displayedSubMenu = _useState4[0],
         setDisplayedSubMenu = _useState4[1];
-    var _useState5 = React.useState(false),
+    var _useState5 = React.useState(true),
         _useState6 = _slicedToArray(_useState5, 2),
         loading = _useState6[0],
         setLoading = _useState6[1];
@@ -751,7 +751,7 @@
       });
     }
-    React.useMemo(function () {
+    React.useEffect(function () {
       setLoading(true);
       axios.get("".concat(categoryConfig.menuData)).then(function (_ref2) {
         var data = _ref2.data;
@@ -1686,7 +1686,7 @@
     var immediateSearch = createImmediateSearch(setSearchValue, setSearchResults, onSearchSubmit);
     var handleChange = useSearchInputChange(setSearchValue, setIsSearchFocused, debouncedSearch, setSearchResults, setCachedResults, app, productsUrl);
     var handleKeyDown = useSearchInputKeyDown(searchValue, immediateSearch, setIsSearchFocused, setSearchValue);
-    React.useMemo(function () {
+    React.useEffect(function () {
       if (!initialSearchData) {
         return;
       }

package/LuxitySideNav.js CHANGED Viewed

@@ -501,7 +501,7 @@
         displayedSubMenu = _useState4[0],
         setDisplayedSubMenu = _useState4[1];
-    var _useState5 = React.useState(false),
+    var _useState5 = React.useState(true),
         _useState6 = _slicedToArray(_useState5, 2),
         loading = _useState6[0],
         setLoading = _useState6[1];
@@ -551,7 +551,7 @@
       });
     }
-    React.useMemo(function () {
+    React.useEffect(function () {
       setLoading(true);
       axios.get("".concat(categoryConfig.menuData)).then(function (_ref2) {
         var data = _ref2.data;

package/MaterialSelector.js CHANGED Viewed

@@ -12245,32 +12245,17 @@
   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$V, _templateObject2$g;
-  var OptionsRow = styled__default.div(_templateObject$V || (_templateObject$V = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: nowrap;\n  flex-direction: row;\n"])));
-  var Options = styled__default.div(_templateObject2$g || (_templateObject2$g = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: nowrap;\n  flex-direction: row;\n  flex-basis: 60%;\n"])));
-  var _templateObject$W, _templateObject2$h;
-  var SectionContainer = styled__default.div(_templateObject$W || (_templateObject$W = _taggedTemplateLiteral(["\n  border-top: flex 1px solid ", ";\n  border-top-width: calc(100% - 50px);\n  padding: 5px 10px;\n"])), function (props) {
-    return props.theme.colors.primary;
-  });
-  var SectionHeading = styled__default.div(_templateObject2$h || (_templateObject2$h = _taggedTemplateLiteral(["\n  padding: 5px 10px;\n"])));
-  var _templateObject$X, _templateObject2$i, _templateObject3$9;
-  var CommunicationPreferenceContainer = styled__default.div(_templateObject$X || (_templateObject$X = _taggedTemplateLiteral(["\n  border: solid 1px #d1d5dbff;\n  margin-bottom: 40px;\n"])));
-  var EditButtonRow = styled__default.div(_templateObject2$i || (_templateObject2$i = _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 _templateObject$Y;
-  var FooterWrapper$1 = styled__default.div(_templateObject$Y || (_templateObject$Y = _taggedTemplateLiteral(["\n   {\n    background-color: ", ";\n  }\n"])), function (props) {
+  var _templateObject$V;
+  var FooterWrapper$1 = styled__default.div(_templateObject$V || (_templateObject$V = _taggedTemplateLiteral(["\n   {\n    background-color: ", ";\n  }\n"])), function (props) {
     return props.theme.colors.gray;
   });
-  var _templateObject$Z;
+  var _templateObject$W;
   var ALL_ITEM$1 = {
     label: 'ALL',
     value: 'ALL'
   };
-  var StyledMultiselector$1 = styled__default.div(_templateObject$Z || (_templateObject$Z = _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$W || (_templateObject$W = _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 CHANGED Viewed

@@ -12245,32 +12245,17 @@
   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$V, _templateObject2$g;
-  var OptionsRow = styled__default.div(_templateObject$V || (_templateObject$V = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: nowrap;\n  flex-direction: row;\n"])));
-  var Options = styled__default.div(_templateObject2$g || (_templateObject2$g = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: nowrap;\n  flex-direction: row;\n  flex-basis: 60%;\n"])));
-  var _templateObject$W, _templateObject2$h;
-  var SectionContainer = styled__default.div(_templateObject$W || (_templateObject$W = _taggedTemplateLiteral(["\n  border-top: flex 1px solid ", ";\n  border-top-width: calc(100% - 50px);\n  padding: 5px 10px;\n"])), function (props) {
-    return props.theme.colors.primary;
-  });
-  var SectionHeading = styled__default.div(_templateObject2$h || (_templateObject2$h = _taggedTemplateLiteral(["\n  padding: 5px 10px;\n"])));
-  var _templateObject$X, _templateObject2$i, _templateObject3$9;
-  var CommunicationPreferenceContainer = styled__default.div(_templateObject$X || (_templateObject$X = _taggedTemplateLiteral(["\n  border: solid 1px #d1d5dbff;\n  margin-bottom: 40px;\n"])));
-  var EditButtonRow = styled__default.div(_templateObject2$i || (_templateObject2$i = _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 _templateObject$Y;
-  var FooterWrapper$1 = styled__default.div(_templateObject$Y || (_templateObject$Y = _taggedTemplateLiteral(["\n   {\n    background-color: ", ";\n  }\n"])), function (props) {
+  var _templateObject$V;
+  var FooterWrapper$1 = styled__default.div(_templateObject$V || (_templateObject$V = _taggedTemplateLiteral(["\n   {\n    background-color: ", ";\n  }\n"])), function (props) {
     return props.theme.colors.gray;
   });
-  var _templateObject$Z;
+  var _templateObject$W;
   var ALL_ITEM$1 = {
     label: 'ALL',
     value: 'ALL'
   };
-  var StyledMultiselector$1 = styled__default.div(_templateObject$Z || (_templateObject$Z = _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$W || (_templateObject$W = _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/build/bundle.css CHANGED Viewed

	@@ -1 +1 @@
1	- .interests__add-button{display:flex;flex-direction:row;gap:10px;width:100%}@media only screen and (max-width:879px){.interests__add-button{flex-direction:column}}.interests__section-wrapper{display:flex;flex-direction:column;width:100%}.interests__select-option{display:flex;flex-direction:column;margin-bottom:15px}.interests__title{font-family:El Messiri;font-size:16px;margin-bottom:10px}.navbar{box-shadow:2px 2px 10px #dfdede;display:flex;padding-bottom:10px;padding-top:20px;position:relative}@media only screen and (max-width:879px){.navbar{padding-top:12px}}.navbar__link-item--desktop{align-items:center;display:flex;height:35px;margin:auto 0;padding-top:5px}.navbar__mobile-wrapper{align-items:center;display:flex;flex-direction:column;padding-left:16px;padding-right:16px}.navbar__container{display:flex;margin:0 auto;max-width:1280px;padding-left:12px;padding-right:12px;width:100%}.navbar__body{flex-basis:60%}.navbar__wrapper{align-items:center;display:flex;gap:10px;justify-content:flex-start;width:100%}@media only screen and (max-width:879px){.navbar__wrapper .navbar__menu-icon-wrapper{margin-right:10px}.navbar__wrapper .navbar__logo{margin-left:0;margin-right:auto}.navbar__wrapper .navbar__icons-wrapper{align-items:center;display:flex;gap:20px;margin-left:auto}.navbar__wrapper .navbar__icons{align-items:center;display:flex;gap:20px;margin:0}.navbar__wrapper .navbar__icon{margin:0}}.navbar__product-search-wrapper{align-items:center;display:flex;justify-content:center;padding:0 20%;width:100%}@media only screen and (max-width:879px){.navbar__product-search-wrapper{padding:0}}.navbar__search-container{width:100%}.navbar__input-close-icon{height:auto;margin-bottom:10px;margin-left:10px;width:20px}@media only screen and (max-width:879px){.navbar__input-close-icon{margin-bottom:0;margin-left:0;width:15px}}.navbar__menu-icon{width:20px}.navbar__product-search{align-items:center;display:flex;max-width:545px;width:100%}.navbar__logo-wrapper{margin-right:18px;width:200px}.navbar__logo{width:200px}@media only screen and (max-width:879px){.navbar__logo{margin-left:10px;margin-top:5px;width:150px}}.navbar__form-input{align-items:center;background:transparent;border:none;display:flex;font-size:13px;outline:none;padding:8px;width:100%}.navbar__product-search{border:1px solid #dfdede;margin-bottom:10px}@media only screen and (max-width:879px){.navbar__product-search{border:none;border-bottom:1px solid #dfdede;margin-bottom:0;margin-right:10px;margin-top:10px}}.navbar__section{align-items:flex-start;display:flex;flex-direction:row;justify-content:space-between;width:100%}.navbar__link{display:inline-block;font-family:Martel Sans;font-size:14px;font-weight:700;margin-right:10px;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;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-left:18px;text-decoration:none}.navbar__company-block{align-items:center;background-color:#000;color:#fff;display:flex;font-weight:700;height:33px;justify-content:center;margin-right:0;padding:0 18px;text-transform:uppercase}.navbar__input-search-icon{height:auto;margin-left:1.125rem;margin-right:.375rem;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;margin-bottom:10px}@media only screen and (max-width:879px){.navbar__icons{display:block;height:20px;margin-bottom:0}}.navbar__icon{cursor:pointer;height:auto;margin-right:18px;width:20px}.navbar__icon.navbar__cart-icon{margin-right:0}.navbar__icon--app{cursor:pointer;height:auto;margin-left:12px;width:20px}@media only screen and (max-width:879px){.navbar__icon--app{margin-right:0}}.navbar__loyalty-icon{height:18px;position:absolute;right:-14px;top:-6px;width:18px}.navbar__cart-icon{position:relative}.navbar__cart-count{bottom:50%;font-size:13px;height:20px;left:60%;position:absolute;width:20px}.navbar__account-initials,.navbar__cart-count{align-items:center;background-color:#f2eeeb;border-radius:50%;color:#000;display:flex;justify-content:center}.navbar__account-initials{font-size:11px;font-weight:500;height:24px;text-transform:uppercase;width:24px}@keyframes navbar-heart-glisten{0%{transform:translateX(-160%) skewX(-20deg)}55%,to{transform:translateX(260%) skewX(-20deg)}}.navbar__interest-heart{background-color:#010101;display:inline-block;height:20px;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;position:relative;width:20px}.navbar__interest-heart:after{animation:navbar-heart-glisten 2.4s ease-in-out infinite;background:linear-gradient(115deg,transparent,hsla(0,0%,100%,.95) 50%,transparent);content:"";height:100%;left:0;pointer-events:none;position:absolute;top:0;transform:translateX(-160%) skewX(-20deg);width:55%}@media (prefers-reduced-motion:reduce){.navbar__interest-heart:after{animation:none}}.footer__newsletter-section{align-items:center;background-color:#000;color:#fff;display:flex;justify-content:space-between;padding:2.265rem 0}@media only screen and (max-width:879px){.footer__newsletter-section{flex-direction:column}}.footer__newsletter-wrapper{align-items:center;display:flex;justify-content:space-between;margin:0 auto;max-width:1280px;padding-left:32px;padding-right:32px;width:100%}@media only screen and (max-width:879px){.footer__newsletter-wrapper{flex-direction:column}.footer__link-container{flex-basis:50%}}.footer__newsletter-icon{height:30px;position:absolute;right:0;top:0;width:32px}.footer__newsletter-form{flex-basis:50%;max-width:250px;position:relative}@media only screen and (max-width:879px){.footer__newsletter-form{display:block;margin-top:20px;max-width:100%;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-input::-moz-placeholder{color:#fff;font-weight:400}.footer__form-input::placeholder{color:#fff;font-weight:400}.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;font-size:16px;font-weight:700;margin-bottom:20px;text-transform:uppercase}@media only screen and (max-width:879px){.footer__link-title{margin-bottom:10px}}.footer__link-child{margin-top:25px}.footer__links{display:flex;flex-direction:column}.footer__link{color:#939393;cursor:pointer;font-family:Martel Sans;font-size:14px;line-height:20px;margin-bottom:7px;text-align:left;text-decoration:none}.footer__link:hover{color:#000;text-decoration:underline}@media only screen and (max-width:879px){.footer__link{margin-bottom:10px}}.footer__link-wrapper{align-items:center;display:flex;gap:5px}.footer__link-icon{height:30px;margin-bottom:18px}.footer__text{color:#939393;font-family:Martel Sans;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;gap:8px}.footer__wrapper{margin:0 auto;max-width:1280px;padding-left:32px;padding-right:32px;width:100%}@media only screen and (max-width:879px){.footer__wrapper{padding:32px 0 0 24px}}.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 10px 30px 0;text-align:center}}.footer__section-row{display:flex;gap:50%}@media only screen and (max-width:879px){.footer__section-row{gap:unset}}.side-nav{font-family:Martel Sans}.side-nav__errors{align-items:center;color:red;display:flex;font-size:16px;justify-content:center}.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;outline:none;width:100%}.side-nav__icon-container{float:right;margin-bottom:10px}.side-nav__menu-title{align-items:center;display:flex;font-size:14px;font-weight:700;justify-content:center;line-height:20px;text-transform:uppercase}.side-nav__menu-icon{display:flex;height:25px;margin-right:10px;width:25px}.side-nav__menu-divider{margin-bottom:40px}.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;line-height:20px;margin-bottom:10px}.side-nav__element,.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%}.side-nav{font-family:Martel Sans}.side-nav__errors{align-items:center;color:red;display:flex;font-size:16px;justify-content:center}.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;line-height:20px;margin-bottom:10px}.side-nav__element,.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%}@charset "UTF-8";.currency-select-container{align-items:center;display:flex;margin-right:18px;position:relative}.currency-select-container .currency-flag{margin-right:5px}.currency-select-container .currency-flag img{height:15px;-o-object-fit:cover;object-fit:cover;width:20px}.currency-select-container .currency-select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-color:transparent;border:none;color:#000;cursor:pointer;font-family:inherit;font-size:14px;margin:0;outline:none;padding:5px 15px 5px 5px}.currency-select-container .currency-select::-ms-expand{display:none}.currency-select-container .currency-select:focus{box-shadow:none;outline:none}.currency-select-container .currency-select:-moz-focusring{color:transparent;text-shadow:0 0 0 #000}.currency-select-container:after{color:#000;content:"▼";font-size:10px;pointer-events:none;position:absolute;right:0;top:50%;transform:translateY(-50%)}@media only screen and (max-width:879px){.currency-select-container .currency-select{appearance:menulist;-webkit-appearance:menulist;-moz-appearance:menulist;padding-right:0}.currency-select-container:after{display:none}}.currency-select-container.disabled{cursor:not-allowed;opacity:.7}.currency-select-container.disabled .currency-select{pointer-events:none}.stores-dropdown{align-items:flex-start;display:flex;font-family:Martel Sans;gap:20px;margin-left:auto;margin-right:auto;max-width:1280px;overflow-x:auto;padding:20px 15px}.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}@keyframes shimmer{0%{background-position:-468px 0}to{background-position:468px 0}}.shimmer{animation:shimmer 1.2s ease-in-out infinite;background:linear-gradient(90deg,#f4f4f4 0,#dfdede 20%,#f4f4f4 40%,#f4f4f4);background-size:800px 104px}@media only screen and (max-width:1052px){.shimmer{background-size:600px 104px}}.search-results{background:#fff;border:1px solid #dfdede;border-radius:2px;box-shadow:0 2px 8px rgba(0,0,0,.08);display:flex;position:absolute;width:770px;z-index:50}@media only screen and (max-width:1052px){.search-results{border:none;box-shadow:none;flex-direction:column;left:0;right:0;top:100%;width:100%}}.search-results__section:first-child{border-right:1px solid #dfdede;flex:1;min-width:240px}.search-results__section:last-child{display:flex;flex:2;flex-direction:column}.search-results__section-header{align-items:center;display:flex;justify-content:space-between}.search-results__header{color:#000;font-family:Martel Sans;font-size:14px;font-weight:600;margin-bottom:0;padding:16px 20px;text-transform:uppercase}@media only screen and (max-width:1052px){.search-results__header{font-size:13px;padding:12px 16px}}.search-results__view-all-link{display:none}@media only screen and (max-width:879px){.search-results__view-all-link{color:#000;display:block;font-family:Martel Sans;font-size:14px;margin-right:20px}}.search-results__list{display:flex;flex-direction:column}.search-results__item{color:grey;font-family:Martel Sans;font-size:14px;padding:8px 20px;text-decoration:none}.search-results__product-list{display:flex;flex-direction:column;overflow-y:auto}.product-card{color:inherit;display:flex;padding:12px 20px;text-decoration:none;transition:background-color .15s ease}.product-card:hover{background-color:#f4f4f4}.product-card__image-container{border-radius:2px;flex-shrink:0;height:90px;margin-right:16px;overflow:hidden;width:90px}.product-card__image{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.product-card__details{display:flex;flex:1;flex-direction:column}.product-card__name{color:#000;font-family:Martel Sans;font-size:14px;line-height:1.4;margin-bottom:24px}.product-card__brand-name{font-weight:600}.product-card__info-row{align-items:flex-end;display:flex;justify-content:space-between}@media only screen and (max-width:879px){.product-card__info-row{align-items:flex-start;flex-direction:column}}.product-card__price-group{display:flex;flex-direction:column;gap:4px}.product-card__price{font-family:Martel Sans;font-size:14px;font-weight:600;line-height:1}.product-card__price--promotion{color:#000}.product-card__price--original{color:#939393;font-weight:400;text-decoration:line-through}.product-card__price-with-promotion{display:flex;flex-direction:column;gap:2px}.product-card__retail-price{color:#939393;font-family:Martel Sans;font-size:14px;text-decoration:line-through}.product-card__condition{color:#000;font-family:Martel Sans;font-size:13px;margin-right:20px;text-align:right}.product-card__condition-label{color:#939393;margin-right:4px}.search-results__view-all-button{background-color:#f2eeeb!important;border:none;color:#000;cursor:pointer;font-family:Martel Sans;font-size:13px;font-weight:400;padding:16px;text-align:center}@media only screen and (max-width:879px){.search-results__view-all-button{display:none}}.search-results__no-results{display:flex;flex-direction:column;width:100%}.search-results__no-results-content{align-items:flex-start;display:flex;gap:20px;padding:20px}@media only screen and (max-width:879px){.search-results__no-results-content{gap:16px;padding:16px}}@media only screen and (max-width:1052px){.search-results__no-results-content{align-items:flex-start;gap:12px;padding:16px 12px}}.search-results__no-results-image{border-radius:4px;flex-shrink:0;height:180px;overflow:hidden;width:180px}@media only screen and (max-width:879px){.search-results__no-results-image{height:120px;width:120px}}@media only screen and (max-width:1052px){.search-results__no-results-image{height:100px;width:100px}}.search-results__no-results-image img{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.search-results__no-results-text{display:flex;flex:1;flex-direction:column;gap:12px;text-align:left}@media only screen and (max-width:1052px){.search-results__no-results-text{gap:8px}}.search-results__no-results-title{color:#000;font-family:Martel Sans;font-size:16px;font-weight:600;line-height:1.4;margin:0}@media only screen and (max-width:879px){.search-results__no-results-title{font-size:14px}}@media only screen and (max-width:1052px){.search-results__no-results-title{font-size:14px;line-height:1.3}}.search-results__no-results-description{color:#939393;font-family:Martel Sans;font-size:14px;line-height:1.5;margin:0}@media only screen and (max-width:879px){.search-results__no-results-description{font-size:13px}}@media only screen and (max-width:1052px){.search-results__no-results-description{font-size:12px;line-height:1.4}}.search-results__create-interest-button{background-color:#f2eeeb!important;border:none;color:#000;cursor:pointer;font-family:Martel Sans;font-size:13px;font-weight:400;padding:16px;text-align:center;width:100%}@media only screen and (max-width:879px){.search-results__create-interest-button{display:block}}@media only screen and (max-width:1052px){.search-results__create-interest-button{font-size:13px;margin-top:8px;padding:14px 16px}}.brand-skeleton{display:flex;flex-direction:column;width:100%}.brand-skeleton__item{background-color:#f4f4f4;border-radius:4px;height:32px;margin:8px 20px}.brand-skeleton__item:first-child{margin-top:0}@media only screen and (max-width:1052px){.brand-skeleton__item{height:28px;margin:6px 16px}}.product-skeleton{display:flex;gap:16px;padding:12px 20px}@media only screen and (max-width:1052px){.product-skeleton{gap:12px;padding:10px 16px}}.product-skeleton__image{background-color:#f4f4f4;border-radius:2px;flex-shrink:0;height:90px;width:90px}@media only screen and (max-width:1052px){.product-skeleton__image{height:70px;width:70px}}.product-skeleton__content{display:flex;flex:1;flex-direction:column;gap:12px}@media only screen and (max-width:1052px){.product-skeleton__content{gap:8px}}.product-skeleton__title{background-color:#f4f4f4;border-radius:4px;height:16px;width:100%}@media only screen and (max-width:1052px){.product-skeleton__title{height:14px}}.product-skeleton__subtitle{background-color:#f4f4f4;border-radius:4px;height:14px;width:80%}@media only screen and (max-width:1052px){.product-skeleton__subtitle{height:12px;width:70%}}.product-skeleton__price{background-color:#f4f4f4;border-radius:4px;height:14px;margin-top:auto;width:60%}@media only screen and (max-width:1052px){.product-skeleton__price{height:12px;width:50%}}.dropdown{display:flex;justify-content:space-between;margin-left:auto;margin-right:auto;max-width:1280px;min-height:500px;overflow-x:auto;padding:20px 0}.dropdown__errors{align-items:center;color:red;display:flex;font-size:16px;justify-content:center;min-height:300px}.dropdown__column{flex:1;padding-left:12px}.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:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));max-height:800px;overflow-y:auto}.dropdown__brand-elements{-moz-column-count:3;column-count:3;max-height:800px}.dropdown__brand-element{cursor:pointer;margin-bottom:10px}.dropdown__element{flex-basis:33.33%;font-family:Martel Sans;font-size:14px;font-weight:400;margin-bottom:10px;text-transform:capitalize}.cover-spinner{align-items:center;background-color:hsla(0,0%,100%,.7);display:flex;height:100%;justify-content:center;min-height:400px;position:relative;top:50%;width:100%;z-index:9999}.cover-spinner:after{animation:spin 1.5s linear infinite;border:4px dotted #000;border-radius:50%;border-top-color:transparent;content:"";display:block;height:40px;position:absolute;width:40px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}
1	+ .interests__add-button{display:flex;flex-direction:row;gap:10px;width:100%}@media only screen and (max-width:879px){.interests__add-button{flex-direction:column}}.interests__section-wrapper{display:flex;flex-direction:column;width:100%}.interests__select-option{display:flex;flex-direction:column;margin-bottom:15px}.interests__title{font-family:El Messiri;font-size:16px;margin-bottom:10px}.navbar{box-shadow:2px 2px 10px #dfdede;display:flex;padding-bottom:10px;padding-top:20px;position:relative}@media only screen and (max-width:879px){.navbar{padding-top:12px}}.navbar__link-item--desktop{align-items:center;display:flex;height:35px;margin:auto 0;padding-top:5px}.navbar__mobile-wrapper{align-items:center;display:flex;flex-direction:column;padding-left:16px;padding-right:16px}.navbar__container{display:flex;margin:0 auto;max-width:1280px;padding-left:12px;padding-right:12px;width:100%}.navbar__body{flex-basis:60%}.navbar__wrapper{align-items:center;display:flex;gap:10px;justify-content:flex-start;width:100%}@media only screen and (max-width:879px){.navbar__wrapper .navbar__menu-icon-wrapper{margin-right:10px}.navbar__wrapper .navbar__logo{margin-left:0;margin-right:auto}.navbar__wrapper .navbar__icons-wrapper{align-items:center;display:flex;gap:20px;margin-left:auto}.navbar__wrapper .navbar__icons{align-items:center;display:flex;gap:20px;margin:0}.navbar__wrapper .navbar__icon{margin:0}}.navbar__product-search-wrapper{align-items:center;display:flex;justify-content:center;padding:0 20%;width:100%}@media only screen and (max-width:879px){.navbar__product-search-wrapper{padding:0}}.navbar__search-container{width:100%}.navbar__input-close-icon{height:auto;margin-bottom:10px;margin-left:10px;width:20px}@media only screen and (max-width:879px){.navbar__input-close-icon{margin-bottom:0;margin-left:0;width:15px}}.navbar__menu-icon{width:20px}.navbar__product-search{align-items:center;display:flex;max-width:545px;width:100%}.navbar__logo-wrapper{margin-right:18px;width:200px}.navbar__logo{width:200px}@media only screen and (max-width:879px){.navbar__logo{margin-left:10px;margin-top:5px;width:150px}}.navbar__form-input{align-items:center;background:transparent;border:none;display:flex;font-size:13px;outline:none;padding:8px;width:100%}.navbar__product-search{border:1px solid #dfdede;margin-bottom:10px}@media only screen and (max-width:879px){.navbar__product-search{border:none;border-bottom:1px solid #dfdede;margin-bottom:0;margin-right:10px;margin-top:10px}}.navbar__section{align-items:flex-start;display:flex;flex-direction:row;justify-content:space-between;width:100%}.navbar__link{display:inline-block;font-family:Martel Sans;font-size:14px;font-weight:700;margin-right:10px;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;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-left:18px;text-decoration:none}.navbar__company-block{align-items:center;background-color:#000;color:#fff;display:flex;font-weight:700;height:33px;justify-content:center;margin-right:0;padding:0 18px;text-transform:uppercase}.navbar__input-search-icon{height:auto;margin-left:1.125rem;margin-right:.375rem;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;margin-bottom:10px}@media only screen and (max-width:879px){.navbar__icons{display:block;height:20px;margin-bottom:0}}.navbar__icon{cursor:pointer;height:auto;margin-right:18px;width:20px}.navbar__icon.navbar__cart-icon{margin-right:0}.navbar__icon--app{cursor:pointer;height:auto;margin-left:12px;width:20px}@media only screen and (max-width:879px){.navbar__icon--app{margin-right:0}}.navbar__loyalty-icon{height:18px;position:absolute;right:-14px;top:-6px;width:18px}.navbar__cart-icon{position:relative}.navbar__cart-count{bottom:50%;font-size:13px;height:20px;left:60%;position:absolute;width:20px}.navbar__account-initials,.navbar__cart-count{align-items:center;background-color:#f2eeeb;border-radius:50%;color:#000;display:flex;justify-content:center}.navbar__account-initials{font-size:11px;font-weight:500;height:24px;text-transform:uppercase;width:24px}@keyframes navbar-heart-glisten{0%{transform:translateX(-160%) skewX(-20deg)}55%,to{transform:translateX(260%) skewX(-20deg)}}.navbar__interest-heart{background-color:#010101;display:inline-block;height:20px;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;position:relative;width:20px}.navbar__interest-heart:after{animation:navbar-heart-glisten 2.4s ease-in-out infinite;background:linear-gradient(115deg,transparent,hsla(0,0%,100%,.95) 50%,transparent);content:"";height:100%;left:0;pointer-events:none;position:absolute;top:0;transform:translateX(-160%) skewX(-20deg);width:55%}@media (prefers-reduced-motion:reduce){.navbar__interest-heart:after{animation:none}}.side-nav{font-family:Martel Sans}.side-nav__errors{align-items:center;color:red;display:flex;font-size:16px;justify-content:center}.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;outline:none;width:100%}.side-nav__icon-container{float:right;margin-bottom:10px}.side-nav__menu-title{align-items:center;display:flex;font-size:14px;font-weight:700;justify-content:center;line-height:20px;text-transform:uppercase}.side-nav__menu-icon{display:flex;height:25px;margin-right:10px;width:25px}.side-nav__menu-divider{margin-bottom:40px}.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;line-height:20px;margin-bottom:10px}.side-nav__element,.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%}.footer__newsletter-section{align-items:center;background-color:#000;color:#fff;display:flex;justify-content:space-between;padding:2.265rem 0}@media only screen and (max-width:879px){.footer__newsletter-section{flex-direction:column}}.footer__newsletter-wrapper{align-items:center;display:flex;justify-content:space-between;margin:0 auto;max-width:1280px;padding-left:32px;padding-right:32px;width:100%}@media only screen and (max-width:879px){.footer__newsletter-wrapper{flex-direction:column}.footer__link-container{flex-basis:50%}}.footer__newsletter-icon{height:30px;position:absolute;right:0;top:0;width:32px}.footer__newsletter-form{flex-basis:50%;max-width:250px;position:relative}@media only screen and (max-width:879px){.footer__newsletter-form{display:block;margin-top:20px;max-width:100%;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-input::-moz-placeholder{color:#fff;font-weight:400}.footer__form-input::placeholder{color:#fff;font-weight:400}.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;font-size:16px;font-weight:700;margin-bottom:20px;text-transform:uppercase}@media only screen and (max-width:879px){.footer__link-title{margin-bottom:10px}}.footer__link-child{margin-top:25px}.footer__links{display:flex;flex-direction:column}.footer__link{color:#939393;cursor:pointer;font-family:Martel Sans;font-size:14px;line-height:20px;margin-bottom:7px;text-align:left;text-decoration:none}.footer__link:hover{color:#000;text-decoration:underline}@media only screen and (max-width:879px){.footer__link{margin-bottom:10px}}.footer__link-wrapper{align-items:center;display:flex;gap:5px}.footer__link-icon{height:30px;margin-bottom:18px}.footer__text{color:#939393;font-family:Martel Sans;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;gap:8px}.footer__wrapper{margin:0 auto;max-width:1280px;padding-left:32px;padding-right:32px;width:100%}@media only screen and (max-width:879px){.footer__wrapper{padding:32px 0 0 24px}}.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 10px 30px 0;text-align:center}}.footer__section-row{display:flex;gap:50%}@media only screen and (max-width:879px){.footer__section-row{gap:unset}}@charset "UTF-8";.currency-select-container{align-items:center;display:flex;margin-right:18px;position:relative}.currency-select-container .currency-flag{margin-right:5px}.currency-select-container .currency-flag img{height:15px;-o-object-fit:cover;object-fit:cover;width:20px}.currency-select-container .currency-select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-color:transparent;border:none;color:#000;cursor:pointer;font-family:inherit;font-size:14px;margin:0;outline:none;padding:5px 15px 5px 5px}.currency-select-container .currency-select::-ms-expand{display:none}.currency-select-container .currency-select:focus{box-shadow:none;outline:none}.currency-select-container .currency-select:-moz-focusring{color:transparent;text-shadow:0 0 0 #000}.currency-select-container:after{color:#000;content:"▼";font-size:10px;pointer-events:none;position:absolute;right:0;top:50%;transform:translateY(-50%)}@media only screen and (max-width:879px){.currency-select-container .currency-select{appearance:menulist;-webkit-appearance:menulist;-moz-appearance:menulist;padding-right:0}.currency-select-container:after{display:none}}.currency-select-container.disabled{cursor:not-allowed;opacity:.7}.currency-select-container.disabled .currency-select{pointer-events:none}.side-nav{font-family:Martel Sans}.side-nav__errors{align-items:center;color:red;display:flex;font-size:16px;justify-content:center}.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;line-height:20px;margin-bottom:10px}.side-nav__element,.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%}@keyframes shimmer{0%{background-position:-468px 0}to{background-position:468px 0}}.shimmer{animation:shimmer 1.2s ease-in-out infinite;background:linear-gradient(90deg,#f4f4f4 0,#dfdede 20%,#f4f4f4 40%,#f4f4f4);background-size:800px 104px}@media only screen and (max-width:1052px){.shimmer{background-size:600px 104px}}.search-results{background:#fff;border:1px solid #dfdede;border-radius:2px;box-shadow:0 2px 8px rgba(0,0,0,.08);display:flex;position:absolute;width:770px;z-index:50}@media only screen and (max-width:1052px){.search-results{border:none;box-shadow:none;flex-direction:column;left:0;right:0;top:100%;width:100%}}.search-results__section:first-child{border-right:1px solid #dfdede;flex:1;min-width:240px}.search-results__section:last-child{display:flex;flex:2;flex-direction:column}.search-results__section-header{align-items:center;display:flex;justify-content:space-between}.search-results__header{color:#000;font-family:Martel Sans;font-size:14px;font-weight:600;margin-bottom:0;padding:16px 20px;text-transform:uppercase}@media only screen and (max-width:1052px){.search-results__header{font-size:13px;padding:12px 16px}}.search-results__view-all-link{display:none}@media only screen and (max-width:879px){.search-results__view-all-link{color:#000;display:block;font-family:Martel Sans;font-size:14px;margin-right:20px}}.search-results__list{display:flex;flex-direction:column}.search-results__item{color:grey;font-family:Martel Sans;font-size:14px;padding:8px 20px;text-decoration:none}.search-results__product-list{display:flex;flex-direction:column;overflow-y:auto}.product-card{color:inherit;display:flex;padding:12px 20px;text-decoration:none;transition:background-color .15s ease}.product-card:hover{background-color:#f4f4f4}.product-card__image-container{border-radius:2px;flex-shrink:0;height:90px;margin-right:16px;overflow:hidden;width:90px}.product-card__image{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.product-card__details{display:flex;flex:1;flex-direction:column}.product-card__name{color:#000;font-family:Martel Sans;font-size:14px;line-height:1.4;margin-bottom:24px}.product-card__brand-name{font-weight:600}.product-card__info-row{align-items:flex-end;display:flex;justify-content:space-between}@media only screen and (max-width:879px){.product-card__info-row{align-items:flex-start;flex-direction:column}}.product-card__price-group{display:flex;flex-direction:column;gap:4px}.product-card__price{font-family:Martel Sans;font-size:14px;font-weight:600;line-height:1}.product-card__price--promotion{color:#000}.product-card__price--original{color:#939393;font-weight:400;text-decoration:line-through}.product-card__price-with-promotion{display:flex;flex-direction:column;gap:2px}.product-card__retail-price{color:#939393;font-family:Martel Sans;font-size:14px;text-decoration:line-through}.product-card__condition{color:#000;font-family:Martel Sans;font-size:13px;margin-right:20px;text-align:right}.product-card__condition-label{color:#939393;margin-right:4px}.search-results__view-all-button{background-color:#f2eeeb!important;border:none;color:#000;cursor:pointer;font-family:Martel Sans;font-size:13px;font-weight:400;padding:16px;text-align:center}@media only screen and (max-width:879px){.search-results__view-all-button{display:none}}.search-results__no-results{display:flex;flex-direction:column;width:100%}.search-results__no-results-content{align-items:flex-start;display:flex;gap:20px;padding:20px}@media only screen and (max-width:879px){.search-results__no-results-content{gap:16px;padding:16px}}@media only screen and (max-width:1052px){.search-results__no-results-content{align-items:flex-start;gap:12px;padding:16px 12px}}.search-results__no-results-image{border-radius:4px;flex-shrink:0;height:180px;overflow:hidden;width:180px}@media only screen and (max-width:879px){.search-results__no-results-image{height:120px;width:120px}}@media only screen and (max-width:1052px){.search-results__no-results-image{height:100px;width:100px}}.search-results__no-results-image img{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.search-results__no-results-text{display:flex;flex:1;flex-direction:column;gap:12px;text-align:left}@media only screen and (max-width:1052px){.search-results__no-results-text{gap:8px}}.search-results__no-results-title{color:#000;font-family:Martel Sans;font-size:16px;font-weight:600;line-height:1.4;margin:0}@media only screen and (max-width:879px){.search-results__no-results-title{font-size:14px}}@media only screen and (max-width:1052px){.search-results__no-results-title{font-size:14px;line-height:1.3}}.search-results__no-results-description{color:#939393;font-family:Martel Sans;font-size:14px;line-height:1.5;margin:0}@media only screen and (max-width:879px){.search-results__no-results-description{font-size:13px}}@media only screen and (max-width:1052px){.search-results__no-results-description{font-size:12px;line-height:1.4}}.search-results__create-interest-button{background-color:#f2eeeb!important;border:none;color:#000;cursor:pointer;font-family:Martel Sans;font-size:13px;font-weight:400;padding:16px;text-align:center;width:100%}@media only screen and (max-width:879px){.search-results__create-interest-button{display:block}}@media only screen and (max-width:1052px){.search-results__create-interest-button{font-size:13px;margin-top:8px;padding:14px 16px}}.brand-skeleton{display:flex;flex-direction:column;width:100%}.brand-skeleton__item{background-color:#f4f4f4;border-radius:4px;height:32px;margin:8px 20px}.brand-skeleton__item:first-child{margin-top:0}@media only screen and (max-width:1052px){.brand-skeleton__item{height:28px;margin:6px 16px}}.product-skeleton{display:flex;gap:16px;padding:12px 20px}@media only screen and (max-width:1052px){.product-skeleton{gap:12px;padding:10px 16px}}.product-skeleton__image{background-color:#f4f4f4;border-radius:2px;flex-shrink:0;height:90px;width:90px}@media only screen and (max-width:1052px){.product-skeleton__image{height:70px;width:70px}}.product-skeleton__content{display:flex;flex:1;flex-direction:column;gap:12px}@media only screen and (max-width:1052px){.product-skeleton__content{gap:8px}}.product-skeleton__title{background-color:#f4f4f4;border-radius:4px;height:16px;width:100%}@media only screen and (max-width:1052px){.product-skeleton__title{height:14px}}.product-skeleton__subtitle{background-color:#f4f4f4;border-radius:4px;height:14px;width:80%}@media only screen and (max-width:1052px){.product-skeleton__subtitle{height:12px;width:70%}}.product-skeleton__price{background-color:#f4f4f4;border-radius:4px;height:14px;margin-top:auto;width:60%}@media only screen and (max-width:1052px){.product-skeleton__price{height:12px;width:50%}}.stores-dropdown{align-items:flex-start;display:flex;font-family:Martel Sans;gap:20px;margin-left:auto;margin-right:auto;max-width:1280px;overflow-x:auto;padding:20px 15px}.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;margin-left:auto;margin-right:auto;max-width:1280px;min-height:500px;overflow-x:auto;padding:20px 0}.dropdown__errors{align-items:center;color:red;display:flex;font-size:16px;justify-content:center;min-height:300px}.dropdown__column{flex:1;padding-left:12px}.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:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));max-height:800px;overflow-y:auto}.dropdown__brand-elements{-moz-column-count:3;column-count:3;max-height:800px}.dropdown__brand-element{cursor:pointer;margin-bottom:10px}.dropdown__element{flex-basis:33.33%;font-family:Martel Sans;font-size:14px;font-weight:400;margin-bottom:10px;text-transform:capitalize}.cover-spinner{align-items:center;background-color:hsla(0,0%,100%,.7);display:flex;height:100%;justify-content:center;min-height:400px;position:relative;top:50%;width:100%;z-index:9999}.cover-spinner:after{animation:spin 1.5s linear infinite;border:4px dotted #000;border-radius:50%;border-top-color:transparent;content:"";display:block;height:40px;position:absolute;width:40px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}

package/build/bundle.js CHANGED Viewed

@@ -13382,37 +13382,6 @@
   };
   const HookFormContext = React__default.createContext(null);
-  /**
-   * This custom hook allows you to access the form context. useFormContext is intended to be used in deeply nested structures, where it would become inconvenient to pass the context as a prop. To be used with {@link FormProvider}.
-   *
-   * @remarks
-   * [API](https://react-hook-form.com/docs/useformcontext) • [Demo](https://codesandbox.io/s/react-hook-form-v7-form-context-ytudi)
-   *
-   * @returns return all useForm methods
-   *
-   * @example
-   * ```tsx
-   * function App() {
-   *   const methods = useForm();
-   *   const onSubmit = data => console.log(data);
-   *
-   *   return (
-   *     <FormProvider {...methods} >
-   *       <form onSubmit={methods.handleSubmit(onSubmit)}>
-   *         <NestedInput />
-   *         <input type="submit" />
-   *       </form>
-   *     </FormProvider>
-   *   );
-   * }
-   *
-   *  function NestedInput() {
-   *   const { register } = useFormContext(); // retrieve all hook methods
-   *   return <input {...register("test")} />;
-   * }
-   * ```
-   */
-  const useFormContext = () => React__default.useContext(HookFormContext);
   var getProxyFormState = (formState, control, localProxyFormState, isRoot = true) => {
       const result = {
@@ -13446,17 +13415,6 @@
   var convertToArrayPayload = (value) => (Array.isArray(value) ? value : [value]);
-  var shouldSubscribeByName = (name, signalName, exact) => exact && signalName
-      ? name === signalName ||
-          (Array.isArray(name) &&
-              name.some((currentName) => currentName && exact && currentName === signalName))
-      : !name ||
-          !signalName ||
-          name === signalName ||
-          convertToArrayPayload(name).some((currentName) => currentName &&
-              (currentName.startsWith(signalName) ||
-                  signalName.startsWith(currentName)));
   function useSubscribe(props) {
       const _props = React__default.useRef(props);
       _props.current = props;
@@ -13472,73 +13430,6 @@
       }, [props.disabled]);
   }
-  /**
-   * This custom hook allows you to subscribe to each form state, and isolate the re-render at the custom hook level. It has its scope in terms of form state subscription, so it would not affect other useFormState and useForm. Using this hook can reduce the re-render impact on large and complex form application.
-   *
-   * @remarks
-   * [API](https://react-hook-form.com/docs/useformstate) • [Demo](https://codesandbox.io/s/useformstate-75xly)
-   *
-   * @param props - include options on specify fields to subscribe. {@link UseFormStateReturn}
-   *
-   * @example
-   * ```tsx
-   * function App() {
-   *   const { register, handleSubmit, control } = useForm({
-   *     defaultValues: {
-   *     firstName: "firstName"
-   *   }});
-   *   const { dirtyFields } = useFormState({
-   *     control
-   *   });
-   *   const onSubmit = (data) => console.log(data);
-   *
-   *   return (
-   *     <form onSubmit={handleSubmit(onSubmit)}>
-   *       <input {...register("firstName")} placeholder="First Name" />
-   *       {dirtyFields.firstName && <p>Field is dirty.</p>}
-   *       <input type="submit" />
-   *     </form>
-   *   );
-   * }
-   * ```
-   */
-  function useFormState(props) {
-      const methods = useFormContext();
-      const { control = methods.control, disabled, name, exact } = props || {};
-      const [formState, updateFormState] = React__default.useState(control._formState);
-      const _mounted = React__default.useRef(true);
-      const _localProxyFormState = React__default.useRef({
-          isDirty: false,
-          isLoading: false,
-          dirtyFields: false,
-          touchedFields: false,
-          isValidating: false,
-          isValid: false,
-          errors: false,
-      });
-      const _name = React__default.useRef(name);
-      _name.current = name;
-      useSubscribe({
-          disabled,
-          next: (value) => _mounted.current &&
-              shouldSubscribeByName(_name.current, value.name, exact) &&
-              shouldRenderFormState(value, _localProxyFormState.current, control._updateFormState) &&
-              updateFormState({
-                  ...control._formState,
-                  ...value,
-              }),
-          subject: control._subjects.state,
-      });
-      React__default.useEffect(() => {
-          _mounted.current = true;
-          _localProxyFormState.current.isValid && control._updateValid(true);
-          return () => {
-              _mounted.current = false;
-          };
-      }, [control]);
-      return getProxyFormState(formState, control, _localProxyFormState.current, false);
-  }
   var isString = (value) => typeof value === 'string';
   var generateWatchOutput = (names, _names, formValues, isGlobal, defaultValue) => {
@@ -13553,41 +13444,6 @@
       return formValues;
   };
-  /**
-   * Custom hook to subscribe to field change and isolate re-rendering at the component level.
-   *
-   * @remarks
-   *
-   * [API](https://react-hook-form.com/docs/usewatch) • [Demo](https://codesandbox.io/s/react-hook-form-v7-ts-usewatch-h9i5e)
-   *
-   * @example
-   * ```tsx
-   * const { watch } = useForm();
-   * const values = useWatch({
-   *   name: "fieldName"
-   *   control,
-   * })
-   * ```
-   */
-  function useWatch(props) {
-      const methods = useFormContext();
-      const { control = methods.control, name, defaultValue, disabled, exact, } = props || {};
-      const _name = React__default.useRef(name);
-      _name.current = name;
-      useSubscribe({
-          disabled,
-          subject: control._subjects.values,
-          next: (formState) => {
-              if (shouldSubscribeByName(_name.current, formState.name, exact)) {
-                  updateValue(cloneObject(generateWatchOutput(_name.current, control._names, formState.values || control._formValues, false, defaultValue)));
-              }
-          },
-      });
-      const [value, updateValue] = React__default.useState(control._getWatch(name, defaultValue));
-      React__default.useEffect(() => control._removeUnmounted());
-      return value;
-  }
   var isKey = (value) => /^\w*$/.test(value);
   var stringToPath = (input) => compact(input.replace(/["|']|\]/g, '').split(/\.|\[/));
@@ -13615,133 +13471,6 @@
       return object;
   }
-  /**
-   * Custom hook to work with controlled component, this function provide you with both form and field level state. Re-render is isolated at the hook level.
-   *
-   * @remarks
-   * [API](https://react-hook-form.com/docs/usecontroller) • [Demo](https://codesandbox.io/s/usecontroller-0o8px)
-   *
-   * @param props - the path name to the form field value, and validation rules.
-   *
-   * @returns field properties, field and form state. {@link UseControllerReturn}
-   *
-   * @example
-   * ```tsx
-   * function Input(props) {
-   *   const { field, fieldState, formState } = useController(props);
-   *   return (
-   *     <div>
-   *       <input {...field} placeholder={props.name} />
-   *       <p>{fieldState.isTouched && "Touched"}</p>
-   *       <p>{formState.isSubmitted ? "submitted" : ""}</p>
-   *     </div>
-   *   );
-   * }
-   * ```
-   */
-  function useController(props) {
-      const methods = useFormContext();
-      const { name, disabled, control = methods.control, shouldUnregister } = props;
-      const isArrayField = isNameInFieldArray(control._names.array, name);
-      const value = useWatch({
-          control,
-          name,
-          defaultValue: get(control._formValues, name, get(control._defaultValues, name, props.defaultValue)),
-          exact: true,
-      });
-      const formState = useFormState({
-          control,
-          name,
-      });
-      const _registerProps = React__default.useRef(control.register(name, {
-          ...props.rules,
-          value,
-      }));
-      _registerProps.current = control.register(name, props.rules);
-      React__default.useEffect(() => {
-          const _shouldUnregisterField = control._options.shouldUnregister || shouldUnregister;
-          const updateMounted = (name, value) => {
-              const field = get(control._fields, name);
-              if (field) {
-                  field._f.mount = value;
-              }
-          };
-          updateMounted(name, true);
-          if (_shouldUnregisterField) {
-              const value = cloneObject(get(control._options.defaultValues, name));
-              set(control._defaultValues, name, value);
-              if (isUndefined(get(control._formValues, name))) {
-                  set(control._formValues, name, value);
-              }
-          }
-          return () => {
-              (isArrayField
-                  ? _shouldUnregisterField && !control._state.action
-                  : _shouldUnregisterField)
-                  ? control.unregister(name)
-                  : updateMounted(name, false);
-          };
-      }, [name, control, isArrayField, shouldUnregister]);
-      React__default.useEffect(() => {
-          control._updateDisabledField({
-              disabled,
-              fields: control._fields,
-              name,
-          });
-      }, [disabled, name, control]);
-      return {
-          field: {
-              name,
-              value,
-              disabled,
-              onChange: React__default.useCallback((event) => _registerProps.current.onChange({
-                  target: {
-                      value: getEventValue(event),
-                      name: name,
-                  },
-                  type: EVENTS.CHANGE,
-              }), [name]),
-              onBlur: React__default.useCallback(() => _registerProps.current.onBlur({
-                  target: {
-                      value: get(control._formValues, name),
-                      name: name,
-                  },
-                  type: EVENTS.BLUR,
-              }), [name, control]),
-              ref: (elm) => {
-                  const field = get(control._fields, name);
-                  if (field && elm) {
-                      field._f.ref = {
-                          focus: () => elm.focus(),
-                          select: () => elm.select(),
-                          setCustomValidity: (message) => elm.setCustomValidity(message),
-                          reportValidity: () => elm.reportValidity(),
-                      };
-                  }
-              },
-          },
-          formState,
-          fieldState: Object.defineProperties({}, {
-              invalid: {
-                  enumerable: true,
-                  get: () => !!get(formState.errors, name),
-              },
-              isDirty: {
-                  enumerable: true,
-                  get: () => !!get(formState.dirtyFields, name),
-              },
-              isTouched: {
-                  enumerable: true,
-                  get: () => !!get(formState.touchedFields, name),
-              },
-              error: {
-                  enumerable: true,
-                  get: () => get(formState.errors, name),
-              },
-          }),
-      };
-  }
   var appendErrors = (name, validateAllFieldCriteria, errors, type, message) => validateAllFieldCriteria
       ? {
           ...errors[name],
@@ -15283,190 +15012,8 @@
       return _formControl.current;
   }
-  var _excluded$9 = ["ref"];
-  var _templateObject$V, _templateObject2$g;
-  var OptionsRow = styled__default.div(_templateObject$V || (_templateObject$V = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: nowrap;\n  flex-direction: row;\n"])));
-  var Options = styled__default.div(_templateObject2$g || (_templateObject2$g = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: nowrap;\n  flex-direction: row;\n  flex-basis: 60%;\n"])));
-  var CommunicationPreferenceOptionsRenderer = function CommunicationPreferenceOptionsRenderer(_ref) {
-    var control = _ref.control,
-        name = _ref.name,
-        isDisabled = _ref.isDisabled,
-        options = _ref.options,
-        defaultValue = _ref.defaultValue,
-        setValue = _ref.setValue;
-    var _useController = useController({
-      name: name,
-      control: control,
-      defaultValue: defaultValue
-    }),
-        _useController$field = _useController.field,
-        ref = _useController$field.ref,
-        inputProps = _objectWithoutProperties(_useController$field, _excluded$9),
-        _useController$fieldS = _useController.fieldState,
-        invalid = _useController$fieldS.invalid,
-        error = _useController$fieldS.error;
-    React.useEffect(function () {
-      if (defaultValue) {
-        setValue(name, defaultValue);
-      }
-    }, [defaultValue, name, setValue]);
-    return /*#__PURE__*/React__default.createElement(OptionsRow, null, /*#__PURE__*/React__default.createElement(Options, null, options.map(function (option) {
-      return /*#__PURE__*/React__default.createElement(RadioButtonLabel, {
-        key: option.value,
-        htmlFor: option.value
-      }, /*#__PURE__*/React__default.createElement(RadioButtonInput, _extends({
-        id: option.value,
-        ref: ref,
-        type: "radio",
-        name: name,
-        defaultChecked: inputProps.value === option.value.toString()
-      }, inputProps, {
-        disabled: isDisabled,
-        value: option.value
-      })), /*#__PURE__*/React__default.createElement(RadioButtonCircle, null, /*#__PURE__*/React__default.createElement(RadioButtonCircleInner, null)), /*#__PURE__*/React__default.createElement(RadioButtonText, null, option.label));
-    })), invalid && /*#__PURE__*/React__default.createElement("span", {
-      className: "form__error"
-    }, error === null || error === void 0 ? void 0 : error.message));
-  };
-  var _templateObject$W, _templateObject2$h;
-  var SectionContainer = styled__default.div(_templateObject$W || (_templateObject$W = _taggedTemplateLiteral(["\n  border-top: flex 1px solid ", ";\n  border-top-width: calc(100% - 50px);\n  padding: 5px 10px;\n"])), function (props) {
-    return props.theme.colors.primary;
-  });
-  var SectionHeading = styled__default.div(_templateObject2$h || (_templateObject2$h = _taggedTemplateLiteral(["\n  padding: 5px 10px;\n"])));
-  var CommunicationPreferenceSection = function CommunicationPreferenceSection(_ref) {
-    var section_heading = _ref.section_heading,
-        description = _ref.description,
-        control = _ref.control,
-        name = _ref.name,
-        isDisabled = _ref.isDisabled,
-        options = _ref.options,
-        defaultValue = _ref.defaultValue,
-        setValue = _ref.setValue;
-    return /*#__PURE__*/React__default.createElement(SectionContainer, null, /*#__PURE__*/React__default.createElement(SectionHeading, null, section_heading), /*#__PURE__*/React__default.createElement(CommunicationPreferenceOptionsRenderer, {
-      description: description,
-      control: control,
-      name: name,
-      isDisabled: isDisabled,
-      options: options,
-      defaultValue: defaultValue,
-      setValue: setValue
-    }));
-  };
-  var CommunicationPreferenceSection$1 = themed(CommunicationPreferenceSection);
-  var _templateObject$X, _templateObject2$i, _templateObject3$9;
-  var CommunicationPreferenceContainer = styled__default.div(_templateObject$X || (_templateObject$X = _taggedTemplateLiteral(["\n  border: solid 1px #d1d5dbff;\n  margin-bottom: 40px;\n"])));
-  var EditButtonRow = styled__default.div(_templateObject2$i || (_templateObject2$i = _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 BaseRequest = {
-    loading: false,
-    success: false,
-    failed: false
-  };
-  var CommunicationPreferences = function CommunicationPreferences(_ref) {
-    var header = _ref.header,
-        requestInstance = _ref.requestInstance,
-        updateNotificationsApi = _ref.updateNotificationsApi,
-        preferenceData = _ref.preferenceData,
-        btnClassName = _ref.btnClassName;
-    var _useForm = useForm(),
-        handleSubmit = _useForm.handleSubmit,
-        control = _useForm.control,
-        setValue = _useForm.setValue;
-    var _useState = React.useState(_objectSpread2({}, BaseRequest)),
-        _useState2 = _slicedToArray(_useState, 2),
-        requestState = _useState2[0],
-        setRequestState = _useState2[1];
-    var _useState3 = React.useState(false),
-        _useState4 = _slicedToArray(_useState3, 2),
-        isEditing = _useState4[0],
-        setIsEditing = _useState4[1]; //
-    var communicationOptions = [{
-      label: 'WhatsApp',
-      value: 'WHATSAPP'
-    }, {
-      label: 'Email',
-      value: 'EMAIL'
-    }];
-    var updateRequestState = function updateRequestState(obj) {
-      setRequestState(_objectSpread2(_objectSpread2({}, BaseRequest), obj));
-    };
-    var onSubmit = function onSubmit(form_data) {
-      updateRequestState({
-        loading: true
-      });
-      simpleRequest(requestInstance, updateNotificationsApi, method.POST, form_data, function () {
-        updateRequestState({
-          success: true,
-          loading: false
-        });
-        success('Communication Preferences Updated.');
-        setTimeout(function () {
-          window.location.reload();
-        }, 2000);
-      }, function (data) {
-        updateRequestState({
-          failed: true,
-          loading: false
-        });
-        var errorMessages = Object.keys(data).map(function (key) {
-          return data[key];
-        }).flat();
-        error(errorMessages.map(function (message, key) {
-          return /*#__PURE__*/React__default.createElement("div", {
-            key: "error-".concat(key)
-          }, message);
-        }));
-      });
-    };
-    return /*#__PURE__*/React__default.createElement(React.Fragment, null, requestState.loading && /*#__PURE__*/React__default.createElement(EllipsisLoader, null), header, /*#__PURE__*/React__default.createElement(CommunicationPreferenceContainer, null, /*#__PURE__*/React__default.createElement("form", {
-      onSubmit: handleSubmit(onSubmit)
-    }, /*#__PURE__*/React__default.createElement(CommunicationPreferenceSection$1, {
-      control: control,
-      name: "default_communication",
-      options: communicationOptions,
-      isDisabled: !isEditing,
-      defaultValue: preferenceData.default_communication,
-      setValue: setValue
-    }), isEditing ? /*#__PURE__*/React__default.createElement(EditButtonRow, null, /*#__PURE__*/React__default.createElement(SubmitButton, {
-      type: "submit",
-      value: "Save",
-      className: "".concat(btnClassName !== null && btnClassName !== void 0 ? btnClassName : 'btn--luxity')
-    }), /*#__PURE__*/React__default.createElement("button", {
-      type: "button",
-      className: "".concat(btnClassName !== null && btnClassName !== void 0 ? btnClassName : 'btn--luxity'),
-      onClick: function onClick() {
-        setIsEditing(!isEditing);
-      }
-    }, "Cancel")) : /*#__PURE__*/React__default.createElement(EditButtonRow, null, /*#__PURE__*/React__default.createElement("button", {
-      type: "button",
-      className: "".concat(btnClassName !== null && btnClassName !== void 0 ? btnClassName : 'btn--luxity'),
-      onClick: function onClick() {
-        setIsEditing(!isEditing);
-      }
-    }, "Edit")))));
-  };
-  var index$5 = themed(CommunicationPreferences);
-  var _templateObject$Y;
-  var FooterWrapper$1 = styled__default.div(_templateObject$Y || (_templateObject$Y = _taggedTemplateLiteral(["\n   {\n    background-color: ", ";\n  }\n"])), function (props) {
+  var _templateObject$V;
+  var FooterWrapper$1 = styled__default.div(_templateObject$V || (_templateObject$V = _taggedTemplateLiteral(["\n   {\n    background-color: ", ";\n  }\n"])), function (props) {
     return props.theme.colors.gray;
   });
@@ -15787,7 +15334,7 @@
     }, "Copyright ", currentYear, " | Luxity (Pty) LTD | All Rights Reserved")));
   };
-  var index$6 = themed(LuxityFooter);
+  var index$5 = themed(LuxityFooter);
   var Dropdown$1 = function Dropdown(_ref) {
     var title = _ref.title,
@@ -16621,7 +16168,7 @@
         searchValue = _useState2[0],
         setSearchValue = _useState2[1];
-    var _useState3 = React.useState(false),
+    var _useState3 = React.useState(true),
         _useState4 = _slicedToArray(_useState3, 2),
         loading = _useState4[0],
         setLoading = _useState4[1];
@@ -16722,7 +16269,7 @@
       });
     }
-    React.useMemo(function () {
+    React.useEffect(function () {
       setLoading(true);
       axios.get("".concat(categoryConfig.menuData)).then(function (_ref2) {
         var data = _ref2.data;
@@ -16732,7 +16279,7 @@
         return setHasError(true);
       });
     }, [categoryConfig.menuData]);
-    React.useMemo(function () {
+    React.useEffect(function () {
       if (!initialSearchData) {
         return;
       }
@@ -17095,7 +16642,7 @@
         displayedSubMenu = _useState4[0],
         setDisplayedSubMenu = _useState4[1];
-    var _useState5 = React.useState(false),
+    var _useState5 = React.useState(true),
         _useState6 = _slicedToArray(_useState5, 2),
         loading = _useState6[0],
         setLoading = _useState6[1];
@@ -17145,7 +16692,7 @@
       });
     }
-    React.useMemo(function () {
+    React.useEffect(function () {
       setLoading(true);
       axios.get("".concat(categoryConfig.menuData)).then(function (_ref2) {
         var data = _ref2.data;
@@ -17651,7 +17198,7 @@
     var immediateSearch = createImmediateSearch(setSearchValue, setSearchResults, onSearchSubmit);
     var handleChange = useSearchInputChange(setSearchValue, setIsSearchFocused, debouncedSearch, setSearchResults, setCachedResults, app, productsUrl);
     var handleKeyDown = useSearchInputKeyDown(searchValue, immediateSearch, setIsSearchFocused, setSearchValue);
-    React.useMemo(function () {
+    React.useEffect(function () {
       if (!initialSearchData) {
         return;
       }
@@ -17937,7 +17484,6 @@
   exports.Accordion = index;
   exports.Checkbox = LuxityCheckbox;
   exports.CheckboxFormWrapper = FormWrapper;
-  exports.CommunicationPreferences = index$5;
   exports.CountryCodeSelect = CountryCodeSelect;
   exports.CurrencyInputFormatter = CurrencyInputFormatter;
   exports.CurrencySelect = CurrencySelect;
@@ -17947,7 +17493,7 @@
   exports.InvertedTextButton = InvertedTextButton$1;
   exports.LuxityAppSideNav = LuxityAppSideNav;
   exports.LuxityDesktopHeader = LuxityDesktopHeader;
-  exports.LuxityFooter = index$6;
+  exports.LuxityFooter = index$5;
   exports.LuxityMobileHeader = LuxityMobileHeader;
   exports.LuxityPageReady = LuxityPageReady;
   exports.LuxitySideNav = LuxitySideNav;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@bonlineza/luxity-lib",
-  "version": "2.40.1",
+  "version": "2.40.3",
   "packageManager": "yarn@1.22.22",
   "scripts": {
     "start": "start-storybook -p 9001 -c .storybook -s ./public",

package/TestComponent.js DELETED Viewed

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

package/build/CountryCodeSelect/index.js DELETED Viewed

@@ -1,18 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var ReactSelectWrapper_1 = __importDefault(require("../ReactSelectWrapper"));
-var responseTransform = function (countryData) {
-    return countryData.map(function (item) { return ({
-        label: "".concat(item.code, " (+").concat(item.dial_code, ")"),
-        value: item.code,
-    }); });
-};
-var CountryCodeSelect = function (_a) {
-    var _b = _a.countryData, countryData = _b === void 0 ? [] : _b, className = _a.className, classNamePrefix = _a.classNamePrefix, _c = _a.defaultCountryCode, defaultCountryCode = _c === void 0 ? 'ZA' : _c, _d = _a.onChange, onChange = _d === void 0 ? function () { return null; } : _d, _e = _a.isSearchable, isSearchable = _e === void 0 ? true : _e, _f = _a.name, name = _f === void 0 ? 'country_code' : _f, _g = _a.renderNoData, renderNoData = _g === void 0 ? function () { return 'Loading...'; } : _g;
-    return (react_1.default.createElement(react_1.default.Fragment, null, countryData && countryData.length ? (react_1.default.createElement(ReactSelectWrapper_1.default, { name: name, className: className, classNamePrefix: classNamePrefix, options: responseTransform(countryData), defaultValue: responseTransform(countryData.filter(function (item) { return item.code === defaultCountryCode; })), onChange: onChange, isSearchable: isSearchable })) : (renderNoData())));
-};
-exports.default = CountryCodeSelect;

package/build/ReactSelectWrapper/index.js DELETED Viewed

@@ -1,34 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var react_select_1 = __importDefault(require("react-select"));
-var ReactSelectWrapper = function (_a) {
-    var _b = _a.isMulti, isMulti = _b === void 0 ? false : _b, _c = _a.isSearchable, isSearchable = _c === void 0 ? false : _c, _d = _a.components, components = _d === void 0 ? { IndicatorSeparator: function () { return null; } } : _d, _e = _a.options, options = _e === void 0 ? [] : _e, _f = _a.className, className = _f === void 0 ? 'dropdown-select-container' : _f, _g = _a.classNamePrefix, classNamePrefix = _g === void 0 ? 'dropdown-select' : _g, _h = _a.onChange, onChange = _h === void 0 ? function () { return null; } : _h, name = _a.name, _j = _a.noOptionsMessage, noOptionsMessage = _j === void 0 ? function () { return 'No Options'; } : _j, rest = __rest(_a, ["isMulti", "isSearchable", "components", "options", "className", "classNamePrefix", "onChange", "name", "noOptionsMessage"]);
-    return (react_1.default.createElement(react_select_1.default, __assign({ isMulti: isMulti, isSearchable: isSearchable, components: components, options: options, className: className, classNamePrefix: classNamePrefix, onChange: onChange, name: name, noOptionsMessage: noOptionsMessage }, rest)));
-};
-exports.default = ReactSelectWrapper;

package/postcss.config.js DELETED Viewed

@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};