@bonlineza/luxity-lib 2.37.8 → 2.38.0

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 (13) hide show
  1. package/CurrencySelect.js +27 -27
  2. package/GraphQLDropdownSelector.js +8 -8
  3. package/LuxityDesktopHeader.js +148 -54
  4. package/LuxityFooter.js +27 -28
  5. package/LuxityGraphQLDropdownSelector.js +8 -8
  6. package/LuxityMobileHeader.js +148 -54
  7. package/LuxitySideNav.js +27 -27
  8. package/MaterialSelector.js +8 -8
  9. package/ModelSelector.js +8 -8
  10. package/Tooltip.js +27 -27
  11. package/build/bundle.css +1 -1
  12. package/build/bundle.js +151 -57
  13. package/package.json +1 -1
package/Tooltip.js CHANGED
@@ -42,10 +42,10 @@
42
42
  var relativeInlineStyle = styled.css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: relative;\n"])));
43
43
  var topMiddleBodyStyle = styled.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: absolute;\n z-index: 1;\n bottom: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n"])));
44
44
  var getTopMiddleArrowAfterStyle = function getTopMiddleArrowAfterStyle(props) {
45
- return styled.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n /*Bottom Arrow*/\n top: 100%; /* At the bottom of the tooltip */\n left: calc(50% - ", ");\n border-width: ", ";\n border-style: solid;\n border-color: ", " transparent transparent transparent;\n"])), props.$apexWidth, props.$apexWidth, props.theme.colors.base);
45
+ return styled.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n /*Bottom Arrow*/\n top: 100%; /* At the bottom of the tooltip */\n left: calc(50% - ", ");\n border-width: ", ";\n border-style: solid;\n border-color: ", " transparent transparent transparent;\n"])), props.apexWidth, props.apexWidth, props.theme.colors.base);
46
46
  };
47
47
  var getBottomMiddleBodyStyle = function getBottomMiddleBodyStyle(props) {
48
- return styled.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n position: absolute;\n top: 100%;\n left: calc(50% - ", " / 2);\n"])), props.$bodyWidth);
48
+ return styled.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n position: absolute;\n top: 100%;\n left: calc(50% - ", " / 2);\n"])), props.bodyWidth);
49
49
  };
50
50
  var getBottomMiddleArrowAfterStyle = function getBottomMiddleArrowAfterStyle(props) {
51
51
  return styled.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n /*Top Arrow*/\n bottom: 100%; /* At the top of the tooltip */\n top: initial;\n left: 50%;\n border-style: solid;\n border-color: transparent transparent ", " transparent;\n"])), props.theme.colors.base);
@@ -55,10 +55,10 @@
55
55
 
56
56
  var getBodyStyle = function getBodyStyle() {
57
57
  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
58
- var _props$$toolTipPositi = props.$toolTipPosition,
59
- $toolTipPosition = _props$$toolTipPositi === void 0 ? '' : _props$$toolTipPositi;
58
+ var _props$toolTipPositio = props.toolTipPosition,
59
+ toolTipPosition = _props$toolTipPositio === void 0 ? '' : _props$toolTipPositio;
60
60
 
61
- switch ($toolTipPosition) {
61
+ switch (toolTipPosition) {
62
62
  case 'top':
63
63
  return topMiddleBodyStyle;
64
64
 
@@ -72,9 +72,9 @@
72
72
 
73
73
  var getAfterStyling = function getAfterStyling() {
74
74
  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
75
- var $toolTipPosition = props.$toolTipPosition;
75
+ var toolTipPosition = props.toolTipPosition;
76
76
 
77
- switch ($toolTipPosition) {
77
+ switch (toolTipPosition) {
78
78
  case 'top':
79
79
  return getTopMiddleArrowAfterStyle(props);
80
80
 
@@ -87,7 +87,7 @@
87
87
  };
88
88
 
89
89
  var Body = styled__default.span(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n ", ";\n visibility: hidden;\n opacity: 0;\n width: ", ";\n transition: visibility 0.3s linear, opacity 0.3s linear;\n background-color: ", ";\n color: white;\n text-align: center;\n border-radius: 5px;\n ", "\n &::after {\n content: ' ';\n position: absolute;\n ", "\n }\n"])), relativeInlineStyle, function (props) {
90
- return props.$bodyWidth;
90
+ return props.bodyWidth;
91
91
  }, function (props) {
92
92
  return props.theme.colors.base || 'black';
93
93
  }, function (props) {
@@ -163,33 +163,33 @@
163
163
  });
164
164
  });
165
165
 
166
- /* eslint-disable react/require-default-props */
167
-
168
166
  var Tooltip = function Tooltip(_ref) {
169
- var _ref$children = _ref.children,
170
- children = _ref$children === void 0 ? null : _ref$children,
171
- _ref$toolTipText = _ref.toolTipText,
172
- toolTipText = _ref$toolTipText === void 0 ? '' : _ref$toolTipText,
173
- _ref$toolTipPosition = _ref.toolTipPosition,
174
- toolTipPosition = _ref$toolTipPosition === void 0 ? 'top' : _ref$toolTipPosition,
175
- _ref$bodyWidth = _ref.bodyWidth,
176
- bodyWidth = _ref$bodyWidth === void 0 ? '8em' : _ref$bodyWidth,
177
- _ref$apexWidth = _ref.apexWidth,
178
- apexWidth = _ref$apexWidth === void 0 ? '5px' : _ref$apexWidth,
179
- _ref$containerClassNa = _ref.containerClassName,
180
- containerClassName = _ref$containerClassNa === void 0 ? '' : _ref$containerClassNa,
181
- _ref$bodyClassName = _ref.bodyClassName,
182
- bodyClassName = _ref$bodyClassName === void 0 ? '' : _ref$bodyClassName;
167
+ var children = _ref.children,
168
+ toolTipText = _ref.toolTipText,
169
+ toolTipPosition = _ref.toolTipPosition,
170
+ bodyWidth = _ref.bodyWidth,
171
+ apexWidth = _ref.apexWidth,
172
+ containerClassName = _ref.containerClassName,
173
+ bodyClassName = _ref.bodyClassName;
183
174
  return /*#__PURE__*/React__default.createElement(Container, {
184
175
  className: containerClassName
185
176
  }, children, /*#__PURE__*/React__default.createElement(Body, {
186
- $toolTipPosition: toolTipPosition,
187
- $bodyWidth: bodyWidth,
188
- $apexWidth: apexWidth,
177
+ toolTipPosition: toolTipPosition,
178
+ bodyWidth: bodyWidth,
179
+ apexWidth: apexWidth,
189
180
  className: bodyClassName
190
181
  }, toolTipText));
191
182
  };
192
183
 
184
+ Tooltip.defaultProps = {
185
+ children: null,
186
+ toolTipText: '',
187
+ toolTipPosition: 'top',
188
+ bodyWidth: '8em',
189
+ apexWidth: '5px',
190
+ containerClassName: '',
191
+ bodyClassName: ''
192
+ };
193
193
  var index = themed(Tooltip);
194
194
 
195
195
  return index;
package/build/bundle.css CHANGED
@@ -1 +1 @@
1
- .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}.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}}.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}@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;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%}.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}.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}.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{color:#000;font-family:Martel Sans;font-size:14px;font-weight:600;line-height:1}.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:#f5f0ea!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}}.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
+ .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%}.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}.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}.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%}@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}.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}}.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}.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}.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:#f5f0ea!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}}.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
@@ -1565,10 +1565,10 @@
1565
1565
  var relativeInlineStyle = styled.css(_templateObject$i || (_templateObject$i = _taggedTemplateLiteral(["\n position: relative;\n"])));
1566
1566
  var topMiddleBodyStyle = styled.css(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n position: absolute;\n z-index: 1;\n bottom: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n"])));
1567
1567
  var getTopMiddleArrowAfterStyle = function getTopMiddleArrowAfterStyle(props) {
1568
- return styled.css(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteral(["\n /*Bottom Arrow*/\n top: 100%; /* At the bottom of the tooltip */\n left: calc(50% - ", ");\n border-width: ", ";\n border-style: solid;\n border-color: ", " transparent transparent transparent;\n"])), props.$apexWidth, props.$apexWidth, props.theme.colors.base);
1568
+ return styled.css(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteral(["\n /*Bottom Arrow*/\n top: 100%; /* At the bottom of the tooltip */\n left: calc(50% - ", ");\n border-width: ", ";\n border-style: solid;\n border-color: ", " transparent transparent transparent;\n"])), props.apexWidth, props.apexWidth, props.theme.colors.base);
1569
1569
  };
1570
1570
  var getBottomMiddleBodyStyle = function getBottomMiddleBodyStyle(props) {
1571
- return styled.css(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteral(["\n position: absolute;\n top: 100%;\n left: calc(50% - ", " / 2);\n"])), props.$bodyWidth);
1571
+ return styled.css(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteral(["\n position: absolute;\n top: 100%;\n left: calc(50% - ", " / 2);\n"])), props.bodyWidth);
1572
1572
  };
1573
1573
  var getBottomMiddleArrowAfterStyle = function getBottomMiddleArrowAfterStyle(props) {
1574
1574
  return styled.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n /*Top Arrow*/\n bottom: 100%; /* At the top of the tooltip */\n top: initial;\n left: 50%;\n border-style: solid;\n border-color: transparent transparent ", " transparent;\n"])), props.theme.colors.base);
@@ -1578,10 +1578,10 @@
1578
1578
 
1579
1579
  var getBodyStyle = function getBodyStyle() {
1580
1580
  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
1581
- var _props$$toolTipPositi = props.$toolTipPosition,
1582
- $toolTipPosition = _props$$toolTipPositi === void 0 ? '' : _props$$toolTipPositi;
1581
+ var _props$toolTipPositio = props.toolTipPosition,
1582
+ toolTipPosition = _props$toolTipPositio === void 0 ? '' : _props$toolTipPositio;
1583
1583
 
1584
- switch ($toolTipPosition) {
1584
+ switch (toolTipPosition) {
1585
1585
  case 'top':
1586
1586
  return topMiddleBodyStyle;
1587
1587
 
@@ -1595,9 +1595,9 @@
1595
1595
 
1596
1596
  var getAfterStyling = function getAfterStyling() {
1597
1597
  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
1598
- var $toolTipPosition = props.$toolTipPosition;
1598
+ var toolTipPosition = props.toolTipPosition;
1599
1599
 
1600
- switch ($toolTipPosition) {
1600
+ switch (toolTipPosition) {
1601
1601
  case 'top':
1602
1602
  return getTopMiddleArrowAfterStyle(props);
1603
1603
 
@@ -1610,7 +1610,7 @@
1610
1610
  };
1611
1611
 
1612
1612
  var Body$1 = styled__default.span(_templateObject$j || (_templateObject$j = _taggedTemplateLiteral(["\n ", ";\n visibility: hidden;\n opacity: 0;\n width: ", ";\n transition: visibility 0.3s linear, opacity 0.3s linear;\n background-color: ", ";\n color: white;\n text-align: center;\n border-radius: 5px;\n ", "\n &::after {\n content: ' ';\n position: absolute;\n ", "\n }\n"])), relativeInlineStyle, function (props) {
1613
- return props.$bodyWidth;
1613
+ return props.bodyWidth;
1614
1614
  }, function (props) {
1615
1615
  return props.theme.colors.base || 'black';
1616
1616
  }, function (props) {
@@ -1622,33 +1622,33 @@
1622
1622
  var _templateObject$k;
1623
1623
  var Container = styled__default.div(_templateObject$k || (_templateObject$k = _taggedTemplateLiteral(["\n ", ";\n cursor: pointer;\n &:hover ", " {\n opacity: 1;\n visibility: visible;\n }\n"])), relativeInlineStyle, Body$1);
1624
1624
 
1625
- /* eslint-disable react/require-default-props */
1626
-
1627
1625
  var Tooltip = function Tooltip(_ref) {
1628
- var _ref$children = _ref.children,
1629
- children = _ref$children === void 0 ? null : _ref$children,
1630
- _ref$toolTipText = _ref.toolTipText,
1631
- toolTipText = _ref$toolTipText === void 0 ? '' : _ref$toolTipText,
1632
- _ref$toolTipPosition = _ref.toolTipPosition,
1633
- toolTipPosition = _ref$toolTipPosition === void 0 ? 'top' : _ref$toolTipPosition,
1634
- _ref$bodyWidth = _ref.bodyWidth,
1635
- bodyWidth = _ref$bodyWidth === void 0 ? '8em' : _ref$bodyWidth,
1636
- _ref$apexWidth = _ref.apexWidth,
1637
- apexWidth = _ref$apexWidth === void 0 ? '5px' : _ref$apexWidth,
1638
- _ref$containerClassNa = _ref.containerClassName,
1639
- containerClassName = _ref$containerClassNa === void 0 ? '' : _ref$containerClassNa,
1640
- _ref$bodyClassName = _ref.bodyClassName,
1641
- bodyClassName = _ref$bodyClassName === void 0 ? '' : _ref$bodyClassName;
1626
+ var children = _ref.children,
1627
+ toolTipText = _ref.toolTipText,
1628
+ toolTipPosition = _ref.toolTipPosition,
1629
+ bodyWidth = _ref.bodyWidth,
1630
+ apexWidth = _ref.apexWidth,
1631
+ containerClassName = _ref.containerClassName,
1632
+ bodyClassName = _ref.bodyClassName;
1642
1633
  return /*#__PURE__*/React__default.createElement(Container, {
1643
1634
  className: containerClassName
1644
1635
  }, children, /*#__PURE__*/React__default.createElement(Body$1, {
1645
- $toolTipPosition: toolTipPosition,
1646
- $bodyWidth: bodyWidth,
1647
- $apexWidth: apexWidth,
1636
+ toolTipPosition: toolTipPosition,
1637
+ bodyWidth: bodyWidth,
1638
+ apexWidth: apexWidth,
1648
1639
  className: bodyClassName
1649
1640
  }, toolTipText));
1650
1641
  };
1651
1642
 
1643
+ Tooltip.defaultProps = {
1644
+ children: null,
1645
+ toolTipText: '',
1646
+ toolTipPosition: 'top',
1647
+ bodyWidth: '8em',
1648
+ apexWidth: '5px',
1649
+ containerClassName: '',
1650
+ bodyClassName: ''
1651
+ };
1652
1652
  var Tooltip$1 = themed(Tooltip);
1653
1653
 
1654
1654
  var _templateObject$l, _templateObject2$2;
@@ -15500,7 +15500,6 @@
15500
15500
  track: link === null || link === void 0 ? void 0 : link.track,
15501
15501
  target: link.target
15502
15502
  }, link.label) : /*#__PURE__*/React__default.createElement("div", {
15503
- key: link.label,
15504
15503
  className: "footer__text"
15505
15504
  }, link.label);
15506
15505
  })));
@@ -15863,6 +15862,8 @@
15863
15862
  price: product.price,
15864
15863
  retail_price: product.est_retail_price
15865
15864
  };
15865
+ var displayPrice = product.on_promotion && product.promotion_price ? product.promotion_price : selectedPrice.price;
15866
+ var hasPromotion = product.on_promotion && product.promotion_price;
15866
15867
  return /*#__PURE__*/React__default.createElement("a", {
15867
15868
  key: product.link,
15868
15869
  href: product.link,
@@ -15890,15 +15891,23 @@
15890
15891
  className: "product-card__name"
15891
15892
  }, shouldShowInitialData ? /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement("span", {
15892
15893
  className: "product-card__brand-name"
15893
- }, product.brand.toUpperCase()), ' ', product.name) : product.name), /*#__PURE__*/React__default.createElement("div", {
15894
+ }, product.brand.toUpperCase()), ' ', product.name) : /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement("span", {
15895
+ className: "product-card__brand-name"
15896
+ }, product.brand.toUpperCase()), ' ', product.name)), /*#__PURE__*/React__default.createElement("div", {
15894
15897
  className: "product-card__info-row"
15895
15898
  }, /*#__PURE__*/React__default.createElement("div", {
15896
15899
  className: "product-card__price-group"
15900
+ }, hasPromotion ? /*#__PURE__*/React__default.createElement("div", {
15901
+ className: "product-card__price-with-promotion"
15897
15902
  }, /*#__PURE__*/React__default.createElement("div", {
15903
+ className: "product-card__price product-card__price--promotion"
15904
+ }, formatPrice(displayPrice)), /*#__PURE__*/React__default.createElement("div", {
15905
+ className: "product-card__price product-card__price--original"
15906
+ }, formatPrice(selectedPrice.price))) : /*#__PURE__*/React__default.createElement("div", {
15898
15907
  className: "product-card__price"
15899
- }, formatPrice(selectedPrice.price)), selectedPrice.retail_price > 1 && /*#__PURE__*/React__default.createElement("div", {
15908
+ }, formatPrice(displayPrice)), selectedPrice.retail_price > 1 && selectedPrice.retail_price > displayPrice && /*#__PURE__*/React__default.createElement("div", {
15900
15909
  className: "product-card__retail-price"
15901
- }, "Est. Retail: ", formatPrice(selectedPrice.retail_price))), /*#__PURE__*/React__default.createElement("div", {
15910
+ }, "Est. Retail: ", formatPrice(selectedPrice.retail_price))), product.condition && /*#__PURE__*/React__default.createElement("div", {
15902
15911
  className: "product-card__condition"
15903
15912
  }, /*#__PURE__*/React__default.createElement("span", {
15904
15913
  className: "product-card__condition-label"
@@ -15987,20 +15996,33 @@
15987
15996
  }, "View all items")));
15988
15997
  };
15989
15998
 
15990
- var searchProducts = function searchProducts(search, limit, currencyCode) {
15999
+ var searchBrandsAggregations = function searchBrandsAggregations(search, currencyCode) {
15991
16000
  return {
15992
- query: "\n query SearchProducts($search: String!, $limit: Int!, $currencyCode: String!) {\n luxity_products_serach_results(search: $search, limit: $limit, currency_code: $currencyCode) {\n brands {\n name\n link\n }\n products {\n name\n link\n price\n est_retail_price\n condition\n featured_image\n }\n luxity_product_ids\n }\n }\n ",
16001
+ query: "\n query GetProductFilterAggregations($search: String!) {\n luxity_products_aggregations(search: $search) {\n luxity_brand {\n name\n }\n }\n }\n ",
16002
+ variables: {
16003
+ search: search,
16004
+ currency_code: currencyCode
16005
+ }
16006
+ };
16007
+ }; // NEW: Get top products for search dropdown (right side)
16008
+
16009
+ var searchProductsFilter = function searchProductsFilter(search, limit, currencyCode) {
16010
+ return {
16011
+ query: "\n query LUXITY_PRODUCTS_FILTER(\n $search: String!\n $limit: Int!\n $page: Int!\n $sort_by: String!\n $with_sold: Boolean!\n $currency_code: String!\n ) {\n luxity_products_filter(\n search: $search\n limit: $limit\n page: $page\n sort_by: $sort_by\n with_sold: $with_sold\n ) {\n data {\n id\n product {\n sku\n name\n price(currency_code: $currency_code)\n promotion_price(currency_code: $currency_code)\n est_retail_price(currency_code: $currency_code)\n condition\n currency_symbol(currency_code: $currency_code)\n }\n category_type\n gender\n status\n featured_image\n on_promotion\n promotion_discount\n luxity_brand {\n id\n name\n slug\n }\n }\n total\n }\n }\n ",
15993
16012
  variables: {
15994
16013
  search: search,
15995
16014
  limit: limit,
15996
- currencyCode: currencyCode
16015
+ page: 1,
16016
+ sort_by: 'newest',
16017
+ with_sold: false,
16018
+ currency_code: currencyCode
15997
16019
  }
15998
16020
  };
15999
16021
  };
16000
16022
 
16001
16023
  var useSearch = function useSearch(_ref) {
16002
16024
  var endpoint = _ref.endpoint,
16003
- onProductIdsReceived = _ref.onProductIdsReceived,
16025
+ onSearchLoading = _ref.onSearchLoading,
16004
16026
  currency = _ref.currency,
16005
16027
  onSearchPreview = _ref.onSearchPreview;
16006
16028
  var currentSearchRequestToken = React.useRef(null);
@@ -16038,8 +16060,7 @@
16038
16060
  if (!searchQuery || searchQuery.trim() === '') {
16039
16061
  setSearchResults({
16040
16062
  brands: [],
16041
- products: [],
16042
- luxity_product_ids: []
16063
+ products: []
16043
16064
  });
16044
16065
  return;
16045
16066
  } // Cancel any ongoing search request to prevent race conditions
@@ -16051,41 +16072,96 @@
16051
16072
 
16052
16073
 
16053
16074
  var newSearchToken = axios.CancelToken.source();
16054
- currentSearchRequestToken.current = newSearchToken;
16055
- axios.post(endpoint, searchProducts(searchQuery, 3, currency), {
16075
+ currentSearchRequestToken.current = newSearchToken; // Set loading to true when starting the search request
16076
+
16077
+ if (typeof onSearchLoading === 'function') {
16078
+ onSearchLoading(true);
16079
+ } // Make TWO parallel queries: brands aggregations + products filter
16080
+
16081
+
16082
+ Promise.all([// Query 1: Get brands aggregations
16083
+ axios.post(endpoint, searchBrandsAggregations(searchQuery, currency), {
16084
+ cancelToken: newSearchToken.token
16085
+ }), // Query 2: Get top 3 products
16086
+ axios.post(endpoint, searchProductsFilter(searchQuery, 3, currency), {
16056
16087
  cancelToken: newSearchToken.token
16057
- }).then(function (response) {
16088
+ })]).then(function (_ref3) {
16089
+ var _ref4 = _slicedToArray(_ref3, 2),
16090
+ brandsResponse = _ref4[0],
16091
+ productsResponse = _ref4[1];
16092
+
16058
16093
  if (currentSearchRequestToken.current === newSearchToken) {
16059
- var searchResults = response.data.data.luxity_products_serach_results;
16094
+ var _brandsResponse$data$, _productsResponse$dat, _productsResponse$dat2;
16095
+
16096
+ // Extract brands from aggregations
16097
+ var brandsData = ((_brandsResponse$data$ = brandsResponse.data.data.luxity_products_aggregations) === null || _brandsResponse$data$ === void 0 ? void 0 : _brandsResponse$data$.luxity_brand) || []; // Extract products from filter
16098
+
16099
+ var productsData = ((_productsResponse$dat = productsResponse.data.data.luxity_products_filter) === null || _productsResponse$dat === void 0 ? void 0 : _productsResponse$dat.data) || [];
16100
+ var totalResults = ((_productsResponse$dat2 = productsResponse.data.data.luxity_products_filter) === null || _productsResponse$dat2 === void 0 ? void 0 : _productsResponse$dat2.total) || 0; // Map brands to old structure: { name, link }
16101
+
16102
+ var brands = brandsData.slice(0, 10).map(function (brand) {
16103
+ return {
16104
+ name: brand.name,
16105
+ link: "/products/brands/".concat(brand.name.toLowerCase().replace(/\s+/g, '-')) // Convert to slug
16106
+
16107
+ };
16108
+ }); // Map products to old structure with prices
16109
+
16110
+ var products = productsData.map(function (product) {
16111
+ return {
16112
+ name: product.product.name,
16113
+ brand: product.luxity_brand.name,
16114
+ link: "/products/".concat(product.id),
16115
+ // Using product ID for link
16116
+ price: product.product.price || 0,
16117
+ promotion_price: product.product.promotion_price || null,
16118
+ est_retail_price: product.product.est_retail_price || 0,
16119
+ condition: product.product.condition || '',
16120
+ currency_symbol: product.product.currency_symbol || '',
16121
+ featured_image: product.featured_image,
16122
+ on_promotion: product.on_promotion || false,
16123
+ promotion_discount: product.promotion_discount || 0,
16124
+ // Keep new fields for potential future use
16125
+ id: product.id,
16126
+ category_type: product.category_type,
16127
+ luxity_brand: product.luxity_brand
16128
+ };
16129
+ });
16130
+ var searchResults = {
16131
+ brands: brands,
16132
+ products: products,
16133
+ total: totalResults
16134
+ };
16060
16135
  setSearchResults(searchResults);
16061
16136
 
16062
- if (searchResults && searchResults.luxity_product_ids) {
16063
- onProductIdsReceived(searchResults.luxity_product_ids);
16064
- }
16065
-
16066
16137
  if (typeof onSearchPreview === 'function') {
16067
- var _searchResults$brands, _searchResults$produc;
16068
-
16069
- var hasResults = ((_searchResults$brands = searchResults.brands) === null || _searchResults$brands === void 0 ? void 0 : _searchResults$brands.length) > 0 || ((_searchResults$produc = searchResults.products) === null || _searchResults$produc === void 0 ? void 0 : _searchResults$produc.length) > 0;
16138
+ var hasResults = brands.length > 0 || products.length > 0;
16070
16139
  onSearchPreview({
16071
16140
  search_string: searchQuery,
16072
16141
  has_results: hasResults
16073
16142
  });
16074
16143
  }
16075
16144
 
16076
- currentSearchRequestToken.current = null;
16145
+ currentSearchRequestToken.current = null; // Set loading to false when search completes successfully
16146
+
16147
+ if (typeof onSearchLoading === 'function') {
16148
+ onSearchLoading(false);
16149
+ }
16077
16150
  }
16078
16151
  }).catch(function (error) {
16079
16152
  if (!axios.isCancel(error)) {
16080
16153
  setSearchResults({
16081
16154
  brands: [],
16082
- products: [],
16083
- luxity_product_ids: []
16155
+ products: []
16084
16156
  });
16085
- currentSearchRequestToken.current = null;
16157
+ currentSearchRequestToken.current = null; // Set loading to false when search fails
16158
+
16159
+ if (typeof onSearchLoading === 'function') {
16160
+ onSearchLoading(false);
16161
+ }
16086
16162
  }
16087
16163
  });
16088
- }, [endpoint, currency, onSearchPreview, onProductIdsReceived]);
16164
+ }, [endpoint, currency, onSearchPreview, onSearchLoading]);
16089
16165
  var debouncedSearch = React.useMemo(function () {
16090
16166
  return debounce(function (searchQuery, setSearchResults) {
16091
16167
  return performSearch(searchQuery, setSearchResults);
@@ -16190,6 +16266,22 @@
16190
16266
  }
16191
16267
  }, [searchValue, immediateSearch, setIsSearchFocused, setSearchValue]);
16192
16268
  };
16269
+ var useSearchUrlQuery = function useSearchUrlQuery(setSearchValue, debouncedSearch) {
16270
+ var hasProcessedUrlQuery = React.useRef(false);
16271
+ React.useEffect(function () {
16272
+ if (hasProcessedUrlQuery.current) return;
16273
+ var urlParams = new URLSearchParams(window.location.search);
16274
+ var queryParam = urlParams.get('q');
16275
+ var isSearchPage = window.location.pathname.includes('/search');
16276
+
16277
+ if (queryParam && queryParam.trim() !== '' && isSearchPage) {
16278
+ hasProcessedUrlQuery.current = true;
16279
+ setSearchValue(queryParam);
16280
+ debouncedSearch(queryParam);
16281
+ }
16282
+ }, [setSearchValue, debouncedSearch]);
16283
+ return hasProcessedUrlQuery;
16284
+ };
16193
16285
 
16194
16286
  var removeCategoryByName = function removeCategoryByName(categories, name) {
16195
16287
  var _categories$filter;
@@ -16225,7 +16317,7 @@
16225
16317
  onSearchPreview = _ref.onSearchPreview,
16226
16318
  onProductSearchResultClick = _ref.onProductSearchResultClick,
16227
16319
  onBrandSearchResultClick = _ref.onBrandSearchResultClick,
16228
- onProductIdsReceived = _ref.onProductIdsReceived,
16320
+ onSearchLoading = _ref.onSearchLoading,
16229
16321
  currency = _ref.currency,
16230
16322
  currencySymbol = _ref.currencySymbol,
16231
16323
  currencyOptions = _ref.currencyOptions,
@@ -16243,7 +16335,7 @@
16243
16335
 
16244
16336
  var _useSearch = useSearch({
16245
16337
  endpoint: endpoint,
16246
- onProductIdsReceived: onProductIdsReceived,
16338
+ onSearchLoading: onSearchLoading,
16247
16339
  currency: currency,
16248
16340
  onSearchPreview: onSearchPreview
16249
16341
  }),
@@ -16307,6 +16399,7 @@
16307
16399
  });
16308
16400
  var immediateSearch = createImmediateSearch(setSearchValue, setSearchResults, onSearchSubmit);
16309
16401
  var handleChange = useSearchInputChange(setSearchValue, setIsSearchFocused, debouncedSearch, setSearchResults, setCachedResults);
16402
+ useSearchUrlQuery(setSearchValue, debouncedSearch);
16310
16403
  useSearchClickOutside(searchResultsRef, searchResults, setCachedResults, setIsSearchFocused, setSearchResults);
16311
16404
 
16312
16405
  var handleSearchClick = function handleSearchClick() {
@@ -17140,7 +17233,7 @@
17140
17233
  onSearchPreview = _ref.onSearchPreview,
17141
17234
  onProductSearchResultClick = _ref.onProductSearchResultClick,
17142
17235
  onBrandSearchResultClick = _ref.onBrandSearchResultClick,
17143
- onProductIdsReceived = _ref.onProductIdsReceived,
17236
+ onSearchLoading = _ref.onSearchLoading,
17144
17237
  onLogoutClick = _ref.onLogoutClick,
17145
17238
  onInterestClick = _ref.onInterestClick,
17146
17239
  onAddressClick = _ref.onAddressClick,
@@ -17165,7 +17258,7 @@
17165
17258
 
17166
17259
  var _useSearch = useSearch({
17167
17260
  endpoint: endpoint,
17168
- onProductIdsReceived: onProductIdsReceived,
17261
+ onSearchLoading: onSearchLoading,
17169
17262
  currency: currency,
17170
17263
  onSearchPreview: onSearchPreview
17171
17264
  }),
@@ -17225,6 +17318,7 @@
17225
17318
  });
17226
17319
  var immediateSearch = createImmediateSearch(setSearchValue, setSearchResults, onSearchSubmit);
17227
17320
  var handleChange = useSearchInputChange(setSearchValue, setIsSearchFocused, debouncedSearch, setSearchResults, setCachedResults);
17321
+ useSearchUrlQuery(setSearchValue, debouncedSearch);
17228
17322
  var handleKeyDown = useSearchInputKeyDown(searchValue, immediateSearch, setIsSearchFocused, setSearchValue);
17229
17323
  React.useMemo(function () {
17230
17324
  if (!initialSearchData) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bonlineza/luxity-lib",
3
- "version": "2.37.8",
3
+ "version": "2.38.0",
4
4
  "scripts": {
5
5
  "start": "start-storybook -p 9001 -c .storybook -s ./public",
6
6
  "clean": "rimraf ./build/*.*",