@bonlineza/luxity-lib 2.34.2 → 2.34.3

package/LuxityMobileHeader.js

@@ -1,11 +1,12 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('axios')) :
-  typeof define === 'function' && define.amd ? define(['react', 'axios'], factory) :
-  (global = global || self, global.LuxityMobileHeader = factory(global.React, global.axios));
-}(this, (function (React, axios) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('axios'), require('styled-components')) :
+  typeof define === 'function' && define.amd ? define(['react', 'axios', 'styled-components'], factory) :
+  (global = global || self, global.LuxityMobileHeader = factory(global.React, global.axios, global.styled));
+}(this, (function (React, axios, styled) { 'use strict';
 
   var React__default = 'default' in React ? React['default'] : React;
   axios = axios && Object.prototype.hasOwnProperty.call(axios, 'default') ? axios['default'] : axios;
+  var styled__default = 'default' in styled ? styled['default'] : styled;
 
   function _arrayLikeToArray(r, a) {
     (null == a || a > r.length) && (a = r.length);
@@ -23,6 +24,15 @@
       writable: !0
     }) : e[r] = t, e;
   }
+  function _extends() {
+    return _extends = Object.assign ? Object.assign.bind() : function (n) {
+      for (var e = 1; e < arguments.length; e++) {
+        var t = arguments[e];
+        for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+      }
+      return n;
+    }, _extends.apply(null, arguments);
+  }
   function _iterableToArrayLimit(r, l) {
     var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
     if (null != t) {
@@ -77,6 +87,13 @@
   function _slicedToArray(r, e) {
     return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
   }
+  function _taggedTemplateLiteral(e, t) {
+    return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, {
+      raw: {
+        value: Object.freeze(t)
+      }
+    }));
+  }
   function _toPrimitive(t, r) {
     if ("object" != typeof t || !t) return t;
     var e = t[Symbol.toPrimitive];
@@ -555,6 +572,195 @@
     }
   };
 
+  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+  /* position relative is required for the Body element to be positioned correctly */
+  var relativeInlineStyle = styled.css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n"])));
+  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"])));
+  var getTopMiddleArrowAfterStyle = function getTopMiddleArrowAfterStyle(props) {
+    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);
+  };
+  var getBottomMiddleBodyStyle = function getBottomMiddleBodyStyle(props) {
+    return styled.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 100%;\n  left: calc(50% - ", " / 2);\n"])), props.bodyWidth);
+  };
+  var getBottomMiddleArrowAfterStyle = function getBottomMiddleArrowAfterStyle(props) {
+    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);
+  };
+
+  var _templateObject$1;
+  var getBodyStyle = function getBodyStyle() {
+    var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var _props$toolTipPositio = props.toolTipPosition,
+      toolTipPosition = _props$toolTipPositio === void 0 ? '' : _props$toolTipPositio;
+    switch (toolTipPosition) {
+      case 'top':
+        return topMiddleBodyStyle;
+      case 'bottom':
+        return getBottomMiddleBodyStyle(props);
+      default:
+        return null;
+    }
+  };
+  var getAfterStyling = function getAfterStyling() {
+    var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var toolTipPosition = props.toolTipPosition;
+    switch (toolTipPosition) {
+      case 'top':
+        return getTopMiddleArrowAfterStyle(props);
+      case 'bottom':
+        return getBottomMiddleArrowAfterStyle(props);
+      default:
+        return '';
+    }
+  };
+  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) {
+    return props.bodyWidth;
+  }, function (props) {
+    return props.theme.colors.base || 'black';
+  }, function (props) {
+    return getBodyStyle(props);
+  }, function (props) {
+    return getAfterStyling(props);
+  });
+
+  var _templateObject$2;
+  var Container = styled__default.div(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  ", ";\n  cursor: pointer;\n  &:hover ", " {\n    opacity: 1;\n    visibility: visible;\n  }\n"])), relativeInlineStyle, Body);
+
+  var theme = {
+    breakpoints: ['40em', '52em', '64em'],
+    space: ['0px', '4px', '8px', '16px', '32px', '64px', '128px', '256px', '512px'],
+    fontSizes: ['12px', '14px', '16px', '20px', '24px', '32px', '48px', '64px', '72px'],
+    marginPaddings: ['0.5rem', '1rem', '1.5rem', '2rem', '2.5rem', '3rem', '3.5rem', '4rem', '4.5rem', '5rem', '5.5rem', '6rem'],
+    letterSpacings: ['-0.5px', '0px', '+0.5px'],
+    radii: ['0px', '2px', '4px', '8px'],
+    borderRadius: '6px',
+    colors: {
+      primary: '#000',
+      base: '#4e4949',
+      baseLt: '#817c7c',
+      borderColor: '#d8d8d8',
+      ntrlMin: '#fff',
+      ntrlMinTen: '#e6e6e6',
+      gray: '#efefef',
+      darkerGray: '#454141'
+    },
+    rareStepColors: {
+      primary: '#202b58',
+      secondary: '#ef5c2d',
+      ntrlMin: '#ffffff',
+      ntrl40: '#f4f4f4',
+      ntrl50: '#808080',
+      ntrl60: '#e8e8e8',
+      ntrl70: '#252525',
+      ntrlMax: '#000000'
+    },
+    rareStepFontWeights: {
+      normal: 400,
+      medium: 500,
+      semiBold: 600,
+      bold: 700
+    },
+    rareStepFontSize: {
+      h1: '36px',
+      h2: '30px',
+      h3: '24px',
+      h4: '20px',
+      h5: '16px',
+      h6: '14px',
+      footerTitle: '16px'
+    },
+    rareStepPageSizes: {
+      mobile: '500px',
+      tablet: '768px',
+      desktop: '992px',
+      screenl: '1280px',
+      screenxl: '1680px',
+      screenxxl: '1920px',
+      container: '1600px'
+    }
+  };
+
+  var themed = (function (Component) {
+    return /*#__PURE__*/React.forwardRef(function (props, ref) {
+      return /*#__PURE__*/React__default.createElement(styled.ThemeProvider, {
+        theme: theme
+      }, /*#__PURE__*/React__default.createElement(Component, _extends({}, props, {
+        ref: ref
+      })));
+    });
+  });
+
+  var Tooltip = function Tooltip(_ref) {
+    var children = _ref.children,
+      toolTipText = _ref.toolTipText,
+      toolTipPosition = _ref.toolTipPosition,
+      bodyWidth = _ref.bodyWidth,
+      apexWidth = _ref.apexWidth,
+      containerClassName = _ref.containerClassName,
+      bodyClassName = _ref.bodyClassName;
+    return /*#__PURE__*/React__default.createElement(Container, {
+      className: containerClassName
+    }, children, /*#__PURE__*/React__default.createElement(Body, {
+      toolTipPosition: toolTipPosition,
+      bodyWidth: bodyWidth,
+      apexWidth: apexWidth,
+      className: bodyClassName
+    }, toolTipText));
+  };
+  Tooltip.defaultProps = {
+    children: null,
+    toolTipText: '',
+    toolTipPosition: 'top',
+    bodyWidth: '8em',
+    apexWidth: '5px',
+    containerClassName: '',
+    bodyClassName: ''
+  };
+  var Tooltip$1 = themed(Tooltip);
+
+  var CurrencySelect = function CurrencySelect(_ref) {
+    var currency = _ref.currency,
+      currencyOptions = _ref.currencyOptions,
+      onCurrencyChange = _ref.onCurrencyChange,
+      _ref$isCurrencySelect = _ref.isCurrencySelectionDisabled,
+      isCurrencySelectionDisabled = _ref$isCurrencySelect === void 0 ? false : _ref$isCurrencySelect,
+      _ref$tooltipContent = _ref.tooltipContent,
+      tooltipContent = _ref$tooltipContent === void 0 ? '' : _ref$tooltipContent;
+    if (!currencyOptions || currencyOptions.length === 0) {
+      return null;
+    }
+    var selectedOption = currencyOptions.find(function (opt) {
+      return opt.value === currency;
+    });
+    if (!selectedOption) {
+      return null;
+    }
+    return /*#__PURE__*/React__default.createElement(Tooltip$1, {
+      toolTipText: isCurrencySelectionDisabled ? tooltipContent : '',
+      toolTipPosition: "bottom",
+      bodyWidth: "160px"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "currency-select-container ".concat(isCurrencySelectionDisabled ? 'disabled' : '')
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "currency-flag"
+    }, /*#__PURE__*/React__default.createElement("img", {
+      src: selectedOption.flagSrc,
+      alt: "".concat(currency, " flag")
+    })), /*#__PURE__*/React__default.createElement("select", {
+      value: currency,
+      onChange: function onChange(e) {
+        return onCurrencyChange(e.target.value);
+      },
+      className: "currency-select",
+      disabled: isCurrencySelectionDisabled
+    }, currencyOptions.map(function (option) {
+      return /*#__PURE__*/React__default.createElement("option", {
+        key: option.value,
+        value: option.value
+      }, option.value, " (", option.symbol, ")");
+    }))));
+  };
+
   var LuxitySideNav = function LuxitySideNav(_ref) {
     var accordionIcon = _ref.accordionIcon,
       closeIcon = _ref.closeIcon,
@@ -571,7 +777,12 @@
       showSideNav = _ref.showSideNav,
       onMenuClick = _ref.onMenuClick,
       menuData = _ref.menuData,
-      LinkComponent = _ref.LinkComponent;
+      LinkComponent = _ref.LinkComponent,
+      currency = _ref.currency,
+      currencyOptions = _ref.currencyOptions,
+      onCurrencyChange = _ref.onCurrencyChange,
+      isCurrencySelectionDisabled = _ref.isCurrencySelectionDisabled,
+      tooltipContent = _ref.tooltipContent;
     var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
       subMenuOpen = _useState2[0],
@@ -803,7 +1014,13 @@
       type: "button",
       className: "side-nav__sub-link",
       onClick: onCartClick
-    }, "My Cart")))), /*#__PURE__*/React__default.createElement(BrandsDropDown, {
+    }, "My Cart")), /*#__PURE__*/React__default.createElement(CurrencySelect, {
+      currency: currency,
+      currencyOptions: currencyOptions,
+      onCurrencyChange: onCurrencyChange,
+      isCurrencySelectionDisabled: isCurrencySelectionDisabled,
+      tooltipContent: tooltipContent
+    }))), /*#__PURE__*/React__default.createElement(BrandsDropDown, {
       subMenuOpen: subMenuOpen && displayedSubMenu === 'new',
       onBackClick: onBackClick,
       backIcon: backIcon,
@@ -997,6 +1214,11 @@
       onPastSalesClick = _ref.onPastSalesClick,
       onPaidOutClick = _ref.onPaidOutClick,
       LinkComponent = _ref.LinkComponent,
+      currency = _ref.currency,
+      currencyOptions = _ref.currencyOptions,
+      onCurrencyChange = _ref.onCurrencyChange,
+      isCurrencySelectionDisabled = _ref.isCurrencySelectionDisabled,
+      tooltipContent = _ref.tooltipContent,
       shop = _ref.shop,
       app = _ref.app;
     var _useState = React.useState(''),
@@ -1234,7 +1456,12 @@
       onMenuClick: onMenuClick,
       endpoint: endpoint,
       menuData: menuData,
-      LinkComponent: LinkComponent
+      LinkComponent: LinkComponent,
+      currency: currency,
+      currencyOptions: currencyOptions,
+      onCurrencyChange: onCurrencyChange,
+      isCurrencySelectionDisabled: isCurrencySelectionDisabled,
+      tooltipContent: tooltipContent
     }), app && /*#__PURE__*/React__default.createElement(LuxityAppSideNav, {
       accordionIcon: accordionIcon,
       closeIcon: closeIcon,

package/LuxitySideNav.js

@@ -1,11 +1,12 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('axios')) :
-  typeof define === 'function' && define.amd ? define(['react', 'axios'], factory) :
-  (global = global || self, global.LuxitySideNav = factory(global.React, global.axios));
-}(this, (function (React, axios) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('axios'), require('styled-components')) :
+  typeof define === 'function' && define.amd ? define(['react', 'axios', 'styled-components'], factory) :
+  (global = global || self, global.LuxitySideNav = factory(global.React, global.axios, global.styled));
+}(this, (function (React, axios, styled) { 'use strict';
 
   var React__default = 'default' in React ? React['default'] : React;
   axios = axios && Object.prototype.hasOwnProperty.call(axios, 'default') ? axios['default'] : axios;
+  var styled__default = 'default' in styled ? styled['default'] : styled;
 
   function _arrayLikeToArray(r, a) {
     (null == a || a > r.length) && (a = r.length);
@@ -23,6 +24,15 @@
       writable: !0
     }) : e[r] = t, e;
   }
+  function _extends() {
+    return _extends = Object.assign ? Object.assign.bind() : function (n) {
+      for (var e = 1; e < arguments.length; e++) {
+        var t = arguments[e];
+        for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+      }
+      return n;
+    }, _extends.apply(null, arguments);
+  }
   function _iterableToArrayLimit(r, l) {
     var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
     if (null != t) {
@@ -77,6 +87,13 @@
   function _slicedToArray(r, e) {
     return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
   }
+  function _taggedTemplateLiteral(e, t) {
+    return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, {
+      raw: {
+        value: Object.freeze(t)
+      }
+    }));
+  }
   function _toPrimitive(t, r) {
     if ("object" != typeof t || !t) return t;
     var e = t[Symbol.toPrimitive];
@@ -247,6 +264,195 @@
     }
   };
 
+  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+  /* position relative is required for the Body element to be positioned correctly */
+  var relativeInlineStyle = styled.css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n"])));
+  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"])));
+  var getTopMiddleArrowAfterStyle = function getTopMiddleArrowAfterStyle(props) {
+    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);
+  };
+  var getBottomMiddleBodyStyle = function getBottomMiddleBodyStyle(props) {
+    return styled.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 100%;\n  left: calc(50% - ", " / 2);\n"])), props.bodyWidth);
+  };
+  var getBottomMiddleArrowAfterStyle = function getBottomMiddleArrowAfterStyle(props) {
+    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);
+  };
+
+  var _templateObject$1;
+  var getBodyStyle = function getBodyStyle() {
+    var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var _props$toolTipPositio = props.toolTipPosition,
+      toolTipPosition = _props$toolTipPositio === void 0 ? '' : _props$toolTipPositio;
+    switch (toolTipPosition) {
+      case 'top':
+        return topMiddleBodyStyle;
+      case 'bottom':
+        return getBottomMiddleBodyStyle(props);
+      default:
+        return null;
+    }
+  };
+  var getAfterStyling = function getAfterStyling() {
+    var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var toolTipPosition = props.toolTipPosition;
+    switch (toolTipPosition) {
+      case 'top':
+        return getTopMiddleArrowAfterStyle(props);
+      case 'bottom':
+        return getBottomMiddleArrowAfterStyle(props);
+      default:
+        return '';
+    }
+  };
+  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) {
+    return props.bodyWidth;
+  }, function (props) {
+    return props.theme.colors.base || 'black';
+  }, function (props) {
+    return getBodyStyle(props);
+  }, function (props) {
+    return getAfterStyling(props);
+  });
+
+  var _templateObject$2;
+  var Container = styled__default.div(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  ", ";\n  cursor: pointer;\n  &:hover ", " {\n    opacity: 1;\n    visibility: visible;\n  }\n"])), relativeInlineStyle, Body);
+
+  var theme = {
+    breakpoints: ['40em', '52em', '64em'],
+    space: ['0px', '4px', '8px', '16px', '32px', '64px', '128px', '256px', '512px'],
+    fontSizes: ['12px', '14px', '16px', '20px', '24px', '32px', '48px', '64px', '72px'],
+    marginPaddings: ['0.5rem', '1rem', '1.5rem', '2rem', '2.5rem', '3rem', '3.5rem', '4rem', '4.5rem', '5rem', '5.5rem', '6rem'],
+    letterSpacings: ['-0.5px', '0px', '+0.5px'],
+    radii: ['0px', '2px', '4px', '8px'],
+    borderRadius: '6px',
+    colors: {
+      primary: '#000',
+      base: '#4e4949',
+      baseLt: '#817c7c',
+      borderColor: '#d8d8d8',
+      ntrlMin: '#fff',
+      ntrlMinTen: '#e6e6e6',
+      gray: '#efefef',
+      darkerGray: '#454141'
+    },
+    rareStepColors: {
+      primary: '#202b58',
+      secondary: '#ef5c2d',
+      ntrlMin: '#ffffff',
+      ntrl40: '#f4f4f4',
+      ntrl50: '#808080',
+      ntrl60: '#e8e8e8',
+      ntrl70: '#252525',
+      ntrlMax: '#000000'
+    },
+    rareStepFontWeights: {
+      normal: 400,
+      medium: 500,
+      semiBold: 600,
+      bold: 700
+    },
+    rareStepFontSize: {
+      h1: '36px',
+      h2: '30px',
+      h3: '24px',
+      h4: '20px',
+      h5: '16px',
+      h6: '14px',
+      footerTitle: '16px'
+    },
+    rareStepPageSizes: {
+      mobile: '500px',
+      tablet: '768px',
+      desktop: '992px',
+      screenl: '1280px',
+      screenxl: '1680px',
+      screenxxl: '1920px',
+      container: '1600px'
+    }
+  };
+
+  var themed = (function (Component) {
+    return /*#__PURE__*/React.forwardRef(function (props, ref) {
+      return /*#__PURE__*/React__default.createElement(styled.ThemeProvider, {
+        theme: theme
+      }, /*#__PURE__*/React__default.createElement(Component, _extends({}, props, {
+        ref: ref
+      })));
+    });
+  });
+
+  var Tooltip = function Tooltip(_ref) {
+    var children = _ref.children,
+      toolTipText = _ref.toolTipText,
+      toolTipPosition = _ref.toolTipPosition,
+      bodyWidth = _ref.bodyWidth,
+      apexWidth = _ref.apexWidth,
+      containerClassName = _ref.containerClassName,
+      bodyClassName = _ref.bodyClassName;
+    return /*#__PURE__*/React__default.createElement(Container, {
+      className: containerClassName
+    }, children, /*#__PURE__*/React__default.createElement(Body, {
+      toolTipPosition: toolTipPosition,
+      bodyWidth: bodyWidth,
+      apexWidth: apexWidth,
+      className: bodyClassName
+    }, toolTipText));
+  };
+  Tooltip.defaultProps = {
+    children: null,
+    toolTipText: '',
+    toolTipPosition: 'top',
+    bodyWidth: '8em',
+    apexWidth: '5px',
+    containerClassName: '',
+    bodyClassName: ''
+  };
+  var Tooltip$1 = themed(Tooltip);
+
+  var CurrencySelect = function CurrencySelect(_ref) {
+    var currency = _ref.currency,
+      currencyOptions = _ref.currencyOptions,
+      onCurrencyChange = _ref.onCurrencyChange,
+      _ref$isCurrencySelect = _ref.isCurrencySelectionDisabled,
+      isCurrencySelectionDisabled = _ref$isCurrencySelect === void 0 ? false : _ref$isCurrencySelect,
+      _ref$tooltipContent = _ref.tooltipContent,
+      tooltipContent = _ref$tooltipContent === void 0 ? '' : _ref$tooltipContent;
+    if (!currencyOptions || currencyOptions.length === 0) {
+      return null;
+    }
+    var selectedOption = currencyOptions.find(function (opt) {
+      return opt.value === currency;
+    });
+    if (!selectedOption) {
+      return null;
+    }
+    return /*#__PURE__*/React__default.createElement(Tooltip$1, {
+      toolTipText: isCurrencySelectionDisabled ? tooltipContent : '',
+      toolTipPosition: "bottom",
+      bodyWidth: "160px"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "currency-select-container ".concat(isCurrencySelectionDisabled ? 'disabled' : '')
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "currency-flag"
+    }, /*#__PURE__*/React__default.createElement("img", {
+      src: selectedOption.flagSrc,
+      alt: "".concat(currency, " flag")
+    })), /*#__PURE__*/React__default.createElement("select", {
+      value: currency,
+      onChange: function onChange(e) {
+        return onCurrencyChange(e.target.value);
+      },
+      className: "currency-select",
+      disabled: isCurrencySelectionDisabled
+    }, currencyOptions.map(function (option) {
+      return /*#__PURE__*/React__default.createElement("option", {
+        key: option.value,
+        value: option.value
+      }, option.value, " (", option.symbol, ")");
+    }))));
+  };
+
   var LuxitySideNav = function LuxitySideNav(_ref) {
     var accordionIcon = _ref.accordionIcon,
       closeIcon = _ref.closeIcon,
@@ -263,7 +469,12 @@
       showSideNav = _ref.showSideNav,
       onMenuClick = _ref.onMenuClick,
       menuData = _ref.menuData,
-      LinkComponent = _ref.LinkComponent;
+      LinkComponent = _ref.LinkComponent,
+      currency = _ref.currency,
+      currencyOptions = _ref.currencyOptions,
+      onCurrencyChange = _ref.onCurrencyChange,
+      isCurrencySelectionDisabled = _ref.isCurrencySelectionDisabled,
+      tooltipContent = _ref.tooltipContent;
     var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
       subMenuOpen = _useState2[0],
@@ -495,7 +706,13 @@
       type: "button",
       className: "side-nav__sub-link",
       onClick: onCartClick
-    }, "My Cart")))), /*#__PURE__*/React__default.createElement(BrandsDropDown, {
+    }, "My Cart")), /*#__PURE__*/React__default.createElement(CurrencySelect, {
+      currency: currency,
+      currencyOptions: currencyOptions,
+      onCurrencyChange: onCurrencyChange,
+      isCurrencySelectionDisabled: isCurrencySelectionDisabled,
+      tooltipContent: tooltipContent
+    }))), /*#__PURE__*/React__default.createElement(BrandsDropDown, {
       subMenuOpen: subMenuOpen && displayedSubMenu === 'new',
       onBackClick: onBackClick,
       backIcon: backIcon,

package/build/bundle.css

@@ -1 +1 @@
-.navbar{box-shadow:2px 2px 10px #dfdede;display:flex;padding-bottom:10px;padding-top:20px;position:relative}.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-bottom:20px;padding-left:32px;padding-right:32px}.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;justify-content:space-between;width:100%}.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__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:30px}.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:125px}}.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}@media only screen and (max-width:879px){.navbar__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__vip-icon{height:16px;position:absolute;right:-12px;top:-4px;width:16px}.navbar__cart-icon{position:relative}.navbar__cart-count{align-items:center;background-color:#000;border-radius:50%;bottom:50%;color:#fff;display:flex;font-size:13px;height:20px;justify-content:center;left:100%;position:absolute;width:20px}.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}}.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}.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)}}
+.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}}.navbar{box-shadow:2px 2px 10px #dfdede;display:flex;padding-bottom:10px;padding-top:20px;position:relative}.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-bottom:20px;padding-left:32px;padding-right:32px}.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;justify-content:space-between;width:100%}.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__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:30px}.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:125px}}.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}@media only screen and (max-width:879px){.navbar__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__vip-icon{height:16px;position:absolute;right:-12px;top:-4px;width:16px}.navbar__cart-icon{position:relative}.navbar__cart-count{align-items:center;background-color:#000;border-radius:50%;bottom:50%;color:#fff;display:flex;font-size:13px;height:20px;justify-content:center;left:100%;position:absolute;width:20px}.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}.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}.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

@@ -15005,7 +15005,12 @@
       showSideNav = _ref.showSideNav,
       onMenuClick = _ref.onMenuClick,
       menuData = _ref.menuData,
-      LinkComponent = _ref.LinkComponent;
+      LinkComponent = _ref.LinkComponent,
+      currency = _ref.currency,
+      currencyOptions = _ref.currencyOptions,
+      onCurrencyChange = _ref.onCurrencyChange,
+      isCurrencySelectionDisabled = _ref.isCurrencySelectionDisabled,
+      tooltipContent = _ref.tooltipContent;
     var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
       subMenuOpen = _useState2[0],
@@ -15237,7 +15242,13 @@
       type: "button",
       className: "side-nav__sub-link",
       onClick: onCartClick
-    }, "My Cart")))), /*#__PURE__*/React__default.createElement(BrandsDropDown, {
+    }, "My Cart")), /*#__PURE__*/React__default.createElement(CurrencySelect, {
+      currency: currency,
+      currencyOptions: currencyOptions,
+      onCurrencyChange: onCurrencyChange,
+      isCurrencySelectionDisabled: isCurrencySelectionDisabled,
+      tooltipContent: tooltipContent
+    }))), /*#__PURE__*/React__default.createElement(BrandsDropDown, {
       subMenuOpen: subMenuOpen && displayedSubMenu === 'new',
       onBackClick: onBackClick,
       backIcon: backIcon,
@@ -15552,6 +15563,11 @@
       onPastSalesClick = _ref.onPastSalesClick,
       onPaidOutClick = _ref.onPaidOutClick,
       LinkComponent = _ref.LinkComponent,
+      currency = _ref.currency,
+      currencyOptions = _ref.currencyOptions,
+      onCurrencyChange = _ref.onCurrencyChange,
+      isCurrencySelectionDisabled = _ref.isCurrencySelectionDisabled,
+      tooltipContent = _ref.tooltipContent,
       shop = _ref.shop,
       app = _ref.app;
     var _useState = React.useState(''),
@@ -15789,7 +15805,12 @@
       onMenuClick: onMenuClick,
       endpoint: endpoint,
       menuData: menuData,
-      LinkComponent: LinkComponent
+      LinkComponent: LinkComponent,
+      currency: currency,
+      currencyOptions: currencyOptions,
+      onCurrencyChange: onCurrencyChange,
+      isCurrencySelectionDisabled: isCurrencySelectionDisabled,
+      tooltipContent: tooltipContent
     }), app && /*#__PURE__*/React__default.createElement(LuxityAppSideNav, {
       accordionIcon: accordionIcon,
       closeIcon: closeIcon,

package/package.json

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