@bonlineza/luxity-lib 2.11.0 → 2.12.0

package/RareStepHeader.js

@@ -5,7 +5,24 @@
 }(this, (function (React, styled) { 'use strict';
 
   var React__default = 'default' in React ? React['default'] : React;
-  styled = styled && Object.prototype.hasOwnProperty.call(styled, 'default') ? styled['default'] : styled;
+  var styled__default = 'default' in styled ? styled['default'] : styled;
+
+  function _extends() {
+    _extends = Object.assign ? Object.assign.bind() : function (target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
+
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
+          }
+        }
+      }
+
+      return target;
+    };
+    return _extends.apply(this, arguments);
+  }
 
   function _taggedTemplateLiteral(strings, raw) {
     if (!raw) {
@@ -78,17 +95,86 @@
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
   }
 
-  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26;
-  var HeaderWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    flex-direction: column;\n    background-color: ", ";\n  }\n"])), function (props) {
+  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: '18px'
+    },
+    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 _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28;
+  var HeaderWrapper = styled__default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n   {\n    display: inline-block;\n    background-color: ", ";\n    position: relative;\n    width: 100%;\n  }\n"])), function (props) {
     return props.theme.rareStepColors.ntrlMin;
   });
-  var HeaderContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    justify-content: space-between;\n    padding: ", ";\n  }\n"])), function (props) {
+  var PageContainer = styled__default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n   {\n    max-width: ", ";\n    margin: 0 auto;\n    width: 100%;\n    padding: 0 5%;\n    display: flex;\n    justify-content: space-between;\n  }\n"])), function (props) {
+    return props.theme.rareStepPageSizes.container;
+  });
+  var HeaderContainer = styled__default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    justify-content: space-between;\n    padding: ", " 5%;\n    max-width: ", ";\n    margin: 0 auto;\n    width: 100%;\n  }\n"])), function (props) {
     return props.theme.marginPaddings[3];
+  }, function (props) {
+    return props.theme.rareStepPageSizes.container;
   });
-  var LogoFigure = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n"])));
-  var LogoImage = styled.img(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n   {\n    width: 200px;\n    height: 70px;\n  }\n"])));
-  var CurrencyFlagIcon = styled.img(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n   {\n    width: 25px;\n    height: 15px;\n    margin-top: 9px;\n    margin-right: 10px;\n  }\n"])));
-  var SellToUsLink = styled.a(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n   {\n    color: ", ";\n    font-weight: ", ";\n    font-size: ", ";\n    padding-top: 10px;\n    text-transform: uppercase;\n    letter-spacing: 1px;\n    cursor: pointer;\n\n    &:hover,\n    &:active {\n      color: ", ";\n      text-decoration: none;\n    }\n  }\n"])), function (props) {
+  var LogoFigure = styled__default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n"])));
+  var LogoImage = styled__default.img(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n   {\n    width: 200px;\n    height: 70px;\n  }\n"])));
+  var CurrencyFlagIcon = styled__default.img(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n   {\n    width: 25px;\n    height: 15px;\n    margin-top: 9px;\n    margin-right: 10px;\n  }\n"])));
+  var SellToUsLink = styled__default.a(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n   {\n    color: ", ";\n    font-weight: ", ";\n    font-size: ", ";\n    padding-top: 10px;\n    text-transform: uppercase;\n    letter-spacing: 1px;\n    cursor: pointer;\n\n    &:hover,\n    &:active {\n      color: ", ";\n      text-decoration: none;\n    }\n  }\n"])), function (props) {
     return props.theme.rareStepColors.secondary;
   }, function (props) {
     return props.theme.rareStepFontWeights.bold;
@@ -97,16 +183,16 @@
   }, function (props) {
     return props.theme.rareStepColors.secondary;
   });
-  var HeaderIconsContainer = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    align-items: center;\n  }\n"])));
-  var HeaderIcon = styled.img(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n   {\n    width: 30px;\n    height: 30px;\n    margin-left: ", ";\n    cursor: pointer;\n  }\n"])), function (props) {
+  var HeaderIconsContainer = styled__default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    align-items: center;\n  }\n"])));
+  var HeaderIcon = styled__default.img(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n   {\n    width: 30px;\n    height: 30px;\n    margin-left: ", ";\n    cursor: pointer;\n  }\n"])), function (props) {
     return props.theme.marginPaddings[3];
   });
-  var NavigationContainer = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    justify-content: space-between;\n    background-color: ", ";\n    padding: ", ";\n    padding-bottom: 0;\n  }\n"])), function (props) {
-    return props.theme.rareStepColors.secondary;
+  var NavigationContainer = styled__default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    justify-content: space-between;\n    background-color: ", ";\n    padding-top: ", ";\n  }\n"])), function (props) {
+    return props.theme.rareStepColors.primary;
   }, function (props) {
-    return props.theme.marginPaddings[3];
+    return props.theme.marginPaddings[1];
   });
-  var NavigationLink = styled.a(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n   {\n    color: ", ";\n    font-size: ", ";\n    margin-right: ", ";\n    padding-top: 2px;\n    padding-bottom: ", ";\n    cursor: pointer;\n    border-bottom: 2px solid ", ";\n\n    &:last-child {\n      margin-right: 0;\n    }\n\n    &:hover,\n    &:active {\n      color: ", ";\n      text-decoration: none;\n      border-bottom: 2px solid ", ";\n    }\n  }\n"])), function (props) {
+  var NavigationLink = styled__default.a(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    flex-wrap: no-wrap;\n    align-items: center;\n    color: ", ";\n    font-size: ", ";\n    margin-right: ", ";\n    padding-top: 2px;\n    padding-bottom: ", ";\n    cursor: pointer;\n    border-bottom: 2px solid ", ";\n\n    &:last-child {\n      margin-right: 0;\n    }\n\n    &:hover,\n    &:active {\n      color: ", ";\n      text-decoration: none;\n      border-bottom: 2px solid ", ";\n    }\n  }\n"])), function (props) {
     return props.theme.rareStepColors.ntrlMin;
   }, function (props) {
     return props.theme.rareStepFontSize.h5;
@@ -115,75 +201,80 @@
   }, function (props) {
     return props.theme.marginPaddings[1];
   }, function (props) {
-    return props.theme.rareStepColors.secondary;
+    return props.theme.rareStepColors.primary;
   }, function (props) {
     return props.theme.rareStepColors.ntrlMin;
   }, function (props) {
     return props.theme.rareStepColors.secondary;
   });
-  var NavigationLinks = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n  }\n"])));
-  var Dropdown = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    background-color: ", ";\n    padding: ", "\n      ", ";\n    border-top: 1px solid ", ";\n    font-size: ", ";\n  }\n"])), function (props) {
-    return props.theme.rareStepColors.secondary;
-  }, function (props) {
-    return props.theme.marginPaddings[7];
+  var NavigationLinks = styled__default.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n  }\n"])));
+  var Dropdown = styled__default.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    background-color: ", ";\n    padding: ", " 0;\n    border-top: 1px solid ", ";\n    font-size: ", ";\n    position: absolute;\n    width: 100%;\n  }\n"])), function (props) {
+    return props.theme.rareStepColors.primary;
   }, function (props) {
-    return props.theme.marginPaddings[1];
+    return props.theme.marginPaddings[4];
   }, function (props) {
     return props.theme.rareStepColors.ntrl40;
   }, function (props) {
     return props.theme.rareStepFontSize.h5;
   });
-  var DropdownBrands = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    flex-direction: column;\n    flex-basis: 20%;\n  }\n"])));
-  var DropdownModels = styled.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    flex-direction: column;\n    padding: 0 ", ";\n    border-left: 1px solid ", ";\n    border-right: 1px solid ", ";\n    flex-basis: 50%;\n  }\n"])), function (props) {
+  var DropdownBrands = styled__default.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    flex-direction: column;\n    width: 20%;\n  }\n"])));
+  var DropdownModels = styled__default.ul(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n   {\n    padding: 0 ", ";\n    border-left: 1px solid ", ";\n    border-right: 1px solid ", ";\n    width: 50%;\n    column-count: 3;\n  }\n"])), function (props) {
     return props.theme.marginPaddings[3];
   }, function (props) {
     return props.theme.rareStepColors.ntrl40;
   }, function (props) {
     return props.theme.rareStepColors.ntrl40;
   });
-  var DropdownFigure = styled.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    flex-basis: 30%;\n    padding-left: ", ";\n  }\n"])), function (props) {
+  var DropdownModelsList = styled__default.li(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n   {\n    list-style: none;\n  }\n"])));
+  var DropdownFigure = styled__default.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    width: 30%;\n    padding-left: ", ";\n  }\n"])), function (props) {
     return props.theme.marginPaddings[5];
   });
-  var DropdownImage = styled.img(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n   {\n    width: 90%;\n    height: 100%;\n    object-fit: cover;\n    margin-left: auto;\n  }\n"])));
-  var DropdownLink = styled.a(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n   {\n    color: ", ";\n    padding-bottom: ", ";\n\n    &:hover,\n    &:active {\n      color: ", ";\n      text-decoration: underline;\n    }\n  }\n"])), function (props) {
+  var DropdownImage = styled__default.img(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n   {\n    width: 90%;\n    height: 100%;\n    object-fit: cover;\n    margin-left: auto;\n  }\n"])));
+  var DropdownLink = styled__default.a(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n   {\n    color: ", ";\n    padding-bottom: ", ";\n    cursor: pointer;\n\n    &:hover,\n    &:active {\n      color: ", ";\n      text-decoration: underline;\n    }\n  }\n"])), function (props) {
     return props.theme.rareStepColors.ntrlMin;
   }, function (props) {
     return props.theme.marginPaddings[0];
   }, function (props) {
     return props.theme.rareStepColors.ntrlMin;
   });
-  var DropdownBrandLinkContainer = styled.div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n\n    &:hover {\n      cursor: pointer;\n\n      hr {\n        display: block;\n      }\n    }\n  }\n"])));
-  var DropdownBrandLinkHR = styled.hr(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n   {\n    display: none;\n    width: 20px;\n    margin-top: 10px;\n    color: ", ";\n    margin-right: 10px;\n  }\n"])), function (props) {
+  var DropdownBrandLinkContainer = styled__default.div(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n\n    &:hover {\n      cursor: pointer;\n\n      hr {\n        display: block;\n      }\n\n      a {\n        font-weight: ", ";\n      }\n    }\n  }\n"])), function (props) {
+    return props.theme.rareStepFontWeights.bold;
+  });
+  var DropdownBrandLinkHR = styled__default.hr(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n   {\n    display: none;\n    width: 20px;\n    margin: 10px 10px 0 0;\n    color: ", ";\n    height: 1px;\n    border: 1px solid ", ";\n  }\n"])), function (props) {
+    return props.theme.rareStepColors.secondary;
+  }, function (props) {
     return props.theme.rareStepColors.secondary;
   });
-  var DropdownBrandLink = styled.a(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n   {\n    color: ", ";\n    padding-bottom: 0.5rem;\n\n    &:hover,\n    &:active {\n      color: ", ";\n      text-decoration: none;\n    }\n  }\n"])), function (props) {
+  var DropdownBrandLink = styled__default.a(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n   {\n    color: ", ";\n    padding-bottom: 0.5rem;\n\n    &:hover,\n    &:active {\n      color: ", ";\n      text-decoration: none;\n      font-weight: ", ";\n    }\n  }\n"])), function (props) {
     return props.theme.rareStepColors.ntrlMin;
   }, function (props) {
     return props.theme.rareStepColors.ntrlMin;
+  }, function (props) {
+    return props.theme.rareStepFontWeights.bold;
   });
-  var DropdownNavigatorIcon = styled.img(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n   {\n    width: 15px;\n    height: 12px;\n    margin-left: ", ";\n  }\n"])), function (props) {
+  var DropdownNavigatorIcon = styled__default.img(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n   {\n    width: 15px;\n    height: 12px;\n    margin-left: ", ";\n  }\n"])), function (props) {
     return props.theme.marginPaddings[0];
   });
-  var SellToUsHR = styled.hr(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n   {\n    width: 80px;\n    margin-top: 20px;\n    color: ", ";\n    border: 1px solid ", ";\n    margin-right: 10px;\n  }\n"])), function (props) {
+  var SellToUsHR = styled__default.hr(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n   {\n    width: 80px;\n    margin-top: 20px;\n    color: ", ";\n    border: 1px solid ", ";\n    margin-right: 10px;\n  }\n"])), function (props) {
     return props.theme.rareStepColors.secondary;
   }, function (props) {
     return props.theme.rareStepColors.secondary;
   });
-  var SearchContainer = styled.div(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    padding: ", "\n      ", ";\n    background-color: ", ";\n    align-items: center;\n    border-top: 1px solid ", ";\n  }\n"])), function (props) {
+  var SearchContainer = styled__default.div(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    padding: ", "\n      ", ";\n    background-color: ", ";\n    align-items: center;\n    border-top: 1px solid ", ";\n  }\n"])), function (props) {
     return props.theme.marginPaddings[1];
   }, function (props) {
     return props.theme.marginPaddings[3];
   }, function (props) {
-    return props.theme.rareStepColors.secondary;
+    return props.theme.rareStepColors.primary;
   }, function (props) {
     return props.theme.rareStepColors.ntrl40;
   });
-  var SearchInput = styled.input(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n   {\n    width: 50%;\n    font-size: ", ";\n    padding-bottom: ", ";\n    background-color: ", ";\n    color: ", ";\n    border: none;\n    margin-left: ", ";\n\n    &::placeholder {\n      color: ", ";\n    }\n  }\n"])), function (props) {
+  var SearchInput = styled__default.input(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n   {\n    width: 50%;\n    font-size: ", ";\n    padding-bottom: ", ";\n    background-color: ", ";\n    color: ", ";\n    border: none;\n    margin-left: ", ";\n\n    &:active,\n    &:focus,\n    &:focus-visible {\n      outline: none;\n      border: none;\n    }\n\n    &::placeholder {\n      color: ", ";\n    }\n  }\n"])), function (props) {
     return props.theme.rareStepFontSize.footerTitle;
   }, function (props) {
     return props.theme.marginPaddings[0];
   }, function (props) {
-    return props.theme.rareStepColors.secondary;
+    return props.theme.rareStepColors.primary;
   }, function (props) {
     return props.theme.rareStepColors.ntrl40;
   }, function (props) {
@@ -191,12 +282,81 @@
   }, function (props) {
     return props.theme.rareStepColors.ntrl40;
   });
-  var SearchIcon = styled.img(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n   {\n    width: 20px;\n    height: 20px;\n    cursor: pointer;\n  }\n"])));
-  var CloseIcon = styled.img(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n   {\n    width: 20px;\n    height: 20px;\n    margin-left: auto;\n    cursor: pointer;\n  }\n"])));
+  var SearchIcon = styled__default.img(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["\n   {\n    width: 20px;\n    height: 20px;\n    cursor: pointer;\n    margin-bottom: 7px;\n  }\n"])));
+  var CloseIcon = styled__default.img(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["\n   {\n    width: 20px;\n    height: 20px;\n    margin-left: auto;\n    cursor: pointer;\n  }\n"])));
 
-  var RareStepHeader = function RareStepHeader(_ref) {
+  var DropdownSearch = function DropdownSearch(_ref) {
+    var close_icon_url = _ref.close_icon_url,
+        navigation_search_icon_url = _ref.navigation_search_icon_url,
+        wordpress_site_url = _ref.wordpress_site_url,
+        toggleSearch = _ref.toggleSearch;
+    var searchInputRef = React.useRef(null);
+
+    var handleOnSearch = function handleOnSearch() {
+      window.location.replace("".concat(wordpress_site_url, "?post_type=product&s=").concat(searchInputRef.current.value));
+    };
+
+    var handleKeyDown = function handleKeyDown(e) {
+      if (e.key === 'Enter') {
+        handleOnSearch();
+      }
+    };
+
+    return /*#__PURE__*/React__default.createElement(SearchContainer, null, /*#__PURE__*/React__default.createElement(SearchIcon, {
+      src: navigation_search_icon_url,
+      onClick: handleOnSearch
+    }), /*#__PURE__*/React__default.createElement(SearchInput, {
+      ref: searchInputRef,
+      placeholder: "Search...",
+      onKeyDown: handleKeyDown
+    }), /*#__PURE__*/React__default.createElement(CloseIcon, {
+      src: close_icon_url,
+      onClick: toggleSearch
+    }));
+  };
+
+  var HeaderDropdown = function HeaderDropdown(_ref) {
     var _header_dropdown_prod;
 
+    var header_dropdown_product_object = _ref.header_dropdown_product_object,
+        handleShowDropdown = _ref.handleShowDropdown,
+        handleHideDropdown = _ref.handleHideDropdown;
+
+    var _useState = React.useState([]),
+        _useState2 = _slicedToArray(_useState, 2),
+        currentModels = _useState2[0],
+        setCurrentModels = _useState2[1];
+
+    var _useState3 = React.useState(null),
+        _useState4 = _slicedToArray(_useState3, 2),
+        currentBrand = _useState4[0],
+        setCurrentBrand = _useState4[1];
+
+    var handleBrandHover = function handleBrandHover(brand) {
+      setCurrentBrand(brand);
+      setCurrentModels(brand.models);
+    };
+
+    return /*#__PURE__*/React__default.createElement(Dropdown, {
+      onMouseOver: handleShowDropdown,
+      onMouseOut: handleHideDropdown
+    }, /*#__PURE__*/React__default.createElement(PageContainer, null, /*#__PURE__*/React__default.createElement(DropdownBrands, null, header_dropdown_product_object === null || header_dropdown_product_object === void 0 ? void 0 : (_header_dropdown_prod = header_dropdown_product_object.brands) === null || _header_dropdown_prod === void 0 ? void 0 : _header_dropdown_prod.map(function (brand, index) {
+      return /*#__PURE__*/React__default.createElement(DropdownBrandLinkContainer, {
+        key: index,
+        onMouseOver: function onMouseOver() {
+          return handleBrandHover(brand);
+        }
+      }, /*#__PURE__*/React__default.createElement(DropdownBrandLinkHR, null), /*#__PURE__*/React__default.createElement(DropdownBrandLink, null, brand.brand_name));
+    })), /*#__PURE__*/React__default.createElement(DropdownModels, null, currentModels === null || currentModels === void 0 ? void 0 : currentModels.map(function (model, index) {
+      return /*#__PURE__*/React__default.createElement(DropdownModelsList, null, /*#__PURE__*/React__default.createElement(DropdownLink, {
+        key: index
+      }, model.model_name));
+    })), /*#__PURE__*/React__default.createElement(DropdownFigure, null, (currentBrand === null || currentBrand === void 0 ? void 0 : currentBrand.brand_image_url) && /*#__PURE__*/React__default.createElement(DropdownImage, {
+      src: currentBrand === null || currentBrand === void 0 ? void 0 : currentBrand.brand_image_url
+    }))));
+  };
+
+  var RareStepHeader = function RareStepHeader(_ref) {
     var header_logo_img_url = _ref.header_logo_img_url,
         search_icon_url = _ref.search_icon_url,
         cart_icon_url = _ref.cart_icon_url,
@@ -216,22 +376,15 @@
         setShowDropdown = _useState2[1];
 
     var timeoutIdRef = React.useRef(null);
-    var searchInputRef = React.useRef(null);
 
     var _useState3 = React.useState(false),
         _useState4 = _slicedToArray(_useState3, 2),
         showSearch = _useState4[0],
         setShowSearch = _useState4[1];
 
-    var _useState5 = React.useState([]),
-        _useState6 = _slicedToArray(_useState5, 2),
-        currentModels = _useState6[0],
-        setCurrentModels = _useState6[1];
-
-    var _useState7 = React.useState(null),
-        _useState8 = _slicedToArray(_useState7, 2),
-        currentBrand = _useState8[0],
-        setCurrentBrand = _useState8[1];
+    var toggleSearch = function toggleSearch() {
+      setShowSearch(!showSearch);
+    };
 
     var handleShowDropdown = function handleShowDropdown() {
       clearTimeout(timeoutIdRef.current);
@@ -244,25 +397,6 @@
       }, 500);
     };
 
-    var toggleSearch = function toggleSearch() {
-      setShowSearch(!showSearch);
-    };
-
-    var handleOnSearch = function handleOnSearch() {
-      window.location.replace("".concat(wordpress_site_url, "/?s=").concat(searchInputRef.current.value));
-    };
-
-    var handleKeyDown = function handleKeyDown(e) {
-      if (e.key === 'Enter') {
-        handleOnSearch();
-      }
-    };
-
-    var handleBrandHover = function handleBrandHover(brand) {
-      setCurrentBrand(brand);
-      setCurrentModels(brand.models);
-    };
-
     return /*#__PURE__*/React__default.createElement(HeaderWrapper, null, /*#__PURE__*/React__default.createElement(HeaderContainer, null, /*#__PURE__*/React__default.createElement(LogoFigure, null, /*#__PURE__*/React__default.createElement(LogoImage, {
       src: header_logo_img_url
     })), /*#__PURE__*/React__default.createElement(HeaderIconsContainer, null, /*#__PURE__*/React__default.createElement(SellToUsHR, null), /*#__PURE__*/React__default.createElement(SellToUsLink, null, "Sell to us"), /*#__PURE__*/React__default.createElement(HeaderIcon, {
@@ -274,7 +408,7 @@
       src: user_icon_url
     }), /*#__PURE__*/React__default.createElement(HeaderIcon, {
       src: cart_icon_url
-    }))), /*#__PURE__*/React__default.createElement(NavigationContainer, null, /*#__PURE__*/React__default.createElement(NavigationLinks, null, /*#__PURE__*/React__default.createElement(NavigationLink, null, "New Arrivals"), /*#__PURE__*/React__default.createElement(NavigationLink, {
+    }))), /*#__PURE__*/React__default.createElement(NavigationContainer, null, /*#__PURE__*/React__default.createElement(PageContainer, null, /*#__PURE__*/React__default.createElement(NavigationLinks, null, /*#__PURE__*/React__default.createElement(NavigationLink, null, "New Arrivals"), /*#__PURE__*/React__default.createElement(NavigationLink, {
       onMouseOver: handleShowDropdown,
       onMouseOut: handleHideDropdown
     }, header_dropdown_product_object.product_type, showDropdown ? /*#__PURE__*/React__default.createElement(DropdownNavigatorIcon, {
@@ -283,35 +417,20 @@
       src: dropdown_open_icon_url
     })), /*#__PURE__*/React__default.createElement(NavigationLink, null, "Create Your Interests"), /*#__PURE__*/React__default.createElement(NavigationLink, null, "Rare Step Finder")), /*#__PURE__*/React__default.createElement(NavigationLinks, null, /*#__PURE__*/React__default.createElement(NavigationLink, null, "Our Story"), /*#__PURE__*/React__default.createElement(NavigationLink, null, "Blog"), /*#__PURE__*/React__default.createElement(NavigationLink, null, "Contact Us"), /*#__PURE__*/React__default.createElement(CurrencyFlagIcon, {
       src: currency_flag_icon_url
-    }), /*#__PURE__*/React__default.createElement(NavigationLink, null, "South African (ZAR, R)"))), showSearch && /*#__PURE__*/React__default.createElement(SearchContainer, null, /*#__PURE__*/React__default.createElement(SearchIcon, {
-      src: navigation_search_icon_url,
-      onClick: handleOnSearch
-    }), /*#__PURE__*/React__default.createElement(SearchInput, {
-      ref: searchInputRef,
-      placeholder: "Search...",
-      onKeyDown: handleKeyDown
-    }), /*#__PURE__*/React__default.createElement(CloseIcon, {
-      src: close_icon_url,
-      onClick: toggleSearch
-    })), showDropdown && /*#__PURE__*/React__default.createElement(Dropdown, {
-      onMouseOver: handleShowDropdown,
-      onMouseOut: handleHideDropdown
-    }, /*#__PURE__*/React__default.createElement(DropdownBrands, null, header_dropdown_product_object === null || header_dropdown_product_object === void 0 ? void 0 : (_header_dropdown_prod = header_dropdown_product_object.brands) === null || _header_dropdown_prod === void 0 ? void 0 : _header_dropdown_prod.map(function (brand, index) {
-      return /*#__PURE__*/React__default.createElement(DropdownBrandLinkContainer, {
-        key: index,
-        onMouseOver: function onMouseOver() {
-          return handleBrandHover(brand);
-        }
-      }, /*#__PURE__*/React__default.createElement(DropdownBrandLinkHR, null), /*#__PURE__*/React__default.createElement(DropdownBrandLink, null, brand.brand_name));
-    })), /*#__PURE__*/React__default.createElement(DropdownModels, null, currentModels === null || currentModels === void 0 ? void 0 : currentModels.map(function (model, index) {
-      return /*#__PURE__*/React__default.createElement(DropdownLink, {
-        key: index
-      }, model.model_name);
-    })), (currentBrand === null || currentBrand === void 0 ? void 0 : currentBrand.brand_image_url) && /*#__PURE__*/React__default.createElement(DropdownFigure, null, /*#__PURE__*/React__default.createElement(DropdownImage, {
-      src: currentBrand === null || currentBrand === void 0 ? void 0 : currentBrand.brand_image_url
-    }))));
+    }), /*#__PURE__*/React__default.createElement(NavigationLink, null, "South African (ZAR, R)")))), showSearch && /*#__PURE__*/React__default.createElement(DropdownSearch, {
+      close_icon_url: close_icon_url,
+      navigation_search_icon_url: navigation_search_icon_url,
+      wordpress_site_url: wordpress_site_url,
+      toggleSearch: toggleSearch
+    }), showDropdown && /*#__PURE__*/React__default.createElement(HeaderDropdown, {
+      header_dropdown_product_object: header_dropdown_product_object,
+      handleShowDropdown: handleShowDropdown,
+      handleHideDropdown: handleHideDropdown
+    }));
   };
 
-  return RareStepHeader;
+  var index = themed(RareStepHeader);
+
+  return index;
 
 })));

package/SecondaryButton.js

@@ -93,6 +93,40 @@
       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: '18px'
+    },
+    rareStepPageSizes: {
+      mobile: '500px',
+      tablet: '768px',
+      desktop: '992px',
+      screenl: '1280px',
+      screenxl: '1680px',
+      screenxxl: '1920px',
+      container: '1600px'
     }
   };
 

package/ShoeSizeSelector.js

@@ -148,6 +148,40 @@
       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: '18px'
+    },
+    rareStepPageSizes: {
+      mobile: '500px',
+      tablet: '768px',
+      desktop: '992px',
+      screenl: '1280px',
+      screenxl: '1680px',
+      screenxxl: '1920px',
+      container: '1600px'
     }
   };
 

package/StyleSelector.js

@@ -412,6 +412,40 @@
       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: '18px'
+    },
+    rareStepPageSizes: {
+      mobile: '500px',
+      tablet: '768px',
+      desktop: '992px',
+      screenl: '1280px',
+      screenxl: '1680px',
+      screenxxl: '1920px',
+      container: '1600px'
     }
   };
 

package/TextButton.js

@@ -93,6 +93,40 @@
       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: '18px'
+    },
+    rareStepPageSizes: {
+      mobile: '500px',
+      tablet: '768px',
+      desktop: '992px',
+      screenl: '1280px',
+      screenxl: '1680px',
+      screenxxl: '1920px',
+      container: '1600px'
     }
   };
 

package/Tooltip.js

@@ -116,6 +116,40 @@
       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: '18px'
+    },
+    rareStepPageSizes: {
+      mobile: '500px',
+      tablet: '768px',
+      desktop: '992px',
+      screenl: '1280px',
+      screenxl: '1680px',
+      screenxxl: '1920px',
+      container: '1600px'
     }
   };