@bonlineza/luxity-lib 2.10.0 → 2.11.0

package/README.md

@@ -27,6 +27,10 @@
 - CheckBoxButton
 - GenderSelector
 - LuxityLoader
+- GraphQLDropdownSelector
+- LuxityGraphQLDropdownSelector
+- MaterialSelector
+- ModelSelector
 
 ## Elements (simple Styled Components)
 - Buttons

package/RareStepFooter.js

@@ -0,0 +1,194 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('styled-components')) :
+  typeof define === 'function' && define.amd ? define(['react', 'styled-components'], factory) :
+  (global = global || self, global.RareStepFooter = factory(global.React, global.styled));
+}(this, (function (React, styled) { 'use strict';
+
+  var React__default = 'default' in React ? React['default'] : React;
+  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) {
+      raw = strings.slice(0);
+    }
+
+    return Object.freeze(Object.defineProperties(strings, {
+      raw: {
+        value: Object.freeze(raw)
+      }
+    }));
+  }
+
+  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'
+    }
+  };
+
+  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;
+  var FooterWrapper = styled__default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    background-color: ", ";\n    font-weight: ", ";\n    padding: ", ";\n    font-size: ", ";\n  }\n"])), function (props) {
+    return props.theme.rareStepColors.ntrlMax;
+  }, function (props) {
+    return props.theme.rareStepFontWeights.bold;
+  }, function (props) {
+    return props.theme.marginPaddings[4];
+  }, function (props) {
+    return props.theme.rareStepFontSize.h5;
+  });
+  var FooterLinksWrapper = styled__default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    flex-basis: 70%;\n  }\n"])));
+  var FooterLinksContainer = styled__default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    padding-right: ", ";\n  }\n"])), function (props) {
+    return props.theme.marginPaddings[4];
+  });
+  var FooterTitleLink = styled__default.a(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n   {\n    text-transform: uppercase;\n    color: ", ";\n    margin-bottom: ", ";\n    cursor: pointer;\n    font-weight: ", ";\n    font-size: ", ";\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[1];
+  }, function (props) {
+    return props.theme.rareStepFontWeights.bold;
+  }, function (props) {
+    return props.theme.rareStepFontSize.footerTitle;
+  }, function (props) {
+    return props.theme.rareStepColors.ntrlMin;
+  });
+  var FooterLink = styled__default.a(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n   {\n    color: ", ";\n    cursor: pointer;\n    margin-bottom: ", ";\n    font-weight: ", ";\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.space[2];
+  }, function (props) {
+    return props.theme.rareStepFontWeights.normal;
+  }, function (props) {
+    return props.theme.rareStepColors.ntrlMin;
+  });
+  var FooterImage = styled__default.img(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n   {\n    width: 100%;\n    height: 100%;\n    max-height: 300px;\n    object-fit: cover;\n  }\n"])));
+  var FooterImageWrapper = styled__default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n   {\n    flex-basis: 30%;\n  }\n"])));
+  var FooterLogo = styled__default.img(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n   {\n    width: 120px;\n    height: 50px;\n    margin-top: ", ";\n  }\n"])), function (props) {
+    return props.theme.marginPaddings[5];
+  });
+  var SocialIconWrapper = styled__default.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n  }\n"])));
+  var SocialIcon = styled__default.img(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n   {\n    width: 30px;\n    height: 30px;\n    margin-right: ", ";\n  }\n"])), function (props) {
+    return props.theme.marginPaddings[0];
+  });
+
+  function RareStepFooter(_ref) {
+    var footer_image_url = _ref.footer_image_url,
+        footer_logo_image_url = _ref.footer_logo_image_url,
+        facebook_url = _ref.facebook_url,
+        facebook_icon_url = _ref.facebook_icon_url,
+        instagram_url = _ref.instagram_url,
+        instagram_image_url = _ref.instagram_image_url;
+    return /*#__PURE__*/React__default.createElement(FooterWrapper, null, /*#__PURE__*/React__default.createElement(FooterLinksWrapper, null, /*#__PURE__*/React__default.createElement(FooterLinksContainer, null, /*#__PURE__*/React__default.createElement(FooterTitleLink, {
+      href: "/contact-us"
+    }, "Contact"), /*#__PURE__*/React__default.createElement(FooterLink, {
+      href: "/contact-us"
+    }, "Contact Us"), /*#__PURE__*/React__default.createElement(FooterLink, null), /*#__PURE__*/React__default.createElement(FooterLink, null, "000 000 0000"), /*#__PURE__*/React__default.createElement(FooterLink, {
+      href: "mailto:myorder@rarestep.co.za"
+    }, "myorder@rarestep.co.za"), /*#__PURE__*/React__default.createElement(FooterLogo, {
+      src: footer_logo_image_url
+    }), /*#__PURE__*/React__default.createElement(FooterTitleLink, null, "Connect"), /*#__PURE__*/React__default.createElement(SocialIconWrapper, null, /*#__PURE__*/React__default.createElement(FooterLink, {
+      href: facebook_url
+    }, /*#__PURE__*/React__default.createElement(SocialIcon, {
+      src: facebook_icon_url
+    })), /*#__PURE__*/React__default.createElement(FooterLink, {
+      href: instagram_url
+    }, /*#__PURE__*/React__default.createElement(SocialIcon, {
+      src: instagram_image_url
+    })))), /*#__PURE__*/React__default.createElement(FooterLinksContainer, null, /*#__PURE__*/React__default.createElement(FooterTitleLink, {
+      href: "/buy-sell"
+    }, "Buy & Sell"), /*#__PURE__*/React__default.createElement(FooterLink, {
+      href: "/product-category/brands"
+    }, "New Arrival"), /*#__PURE__*/React__default.createElement(FooterLink, {
+      href: "/product-category/sneakers/brands/"
+    }, "Sneakers"), /*#__PURE__*/React__default.createElement(FooterLink, null, "Create Your Interest"), /*#__PURE__*/React__default.createElement(FooterLink, {
+      href: "/sell-to-us"
+    }, "Sell To Us")), /*#__PURE__*/React__default.createElement(FooterLinksContainer, null, /*#__PURE__*/React__default.createElement(FooterTitleLink, {
+      href: "/about"
+    }, "Company"), /*#__PURE__*/React__default.createElement(FooterLink, {
+      href: "/about"
+    }, "Our Story"), /*#__PURE__*/React__default.createElement(FooterLink, {
+      href: "/blog"
+    }, "Sneakers")), /*#__PURE__*/React__default.createElement(FooterLinksContainer, null, /*#__PURE__*/React__default.createElement(FooterTitleLink, {
+      href: "/faq"
+    }, "Help"), /*#__PURE__*/React__default.createElement(FooterLink, {
+      href: "/faq"
+    }, "FAQs"), /*#__PURE__*/React__default.createElement(FooterLink, {
+      href: "/shipping"
+    }, "Shipping & Returns"), /*#__PURE__*/React__default.createElement(FooterLink, {
+      href: "/terms-conditions"
+    }, "Terms & Conditions"), /*#__PURE__*/React__default.createElement(FooterLink, {
+      href: "/privacy"
+    }, "Privacy Policy"))), /*#__PURE__*/React__default.createElement(FooterImageWrapper, null, /*#__PURE__*/React__default.createElement(FooterImage, {
+      src: footer_image_url
+    })));
+  }
+
+  var index = themed(RareStepFooter);
+
+  return index;
+
+})));

package/RareStepHeader.js

@@ -0,0 +1,317 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('styled-components')) :
+  typeof define === 'function' && define.amd ? define(['react', 'styled-components'], factory) :
+  (global = global || self, global.RareStepHeader = factory(global.React, global.styled));
+}(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;
+
+  function _taggedTemplateLiteral(strings, raw) {
+    if (!raw) {
+      raw = strings.slice(0);
+    }
+
+    return Object.freeze(Object.defineProperties(strings, {
+      raw: {
+        value: Object.freeze(raw)
+      }
+    }));
+  }
+
+  function _slicedToArray(arr, i) {
+    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+  }
+
+  function _arrayWithHoles(arr) {
+    if (Array.isArray(arr)) return arr;
+  }
+
+  function _iterableToArrayLimit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+
+    var _s, _e;
+
+    try {
+      for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
+        _arr.push(_s.value);
+
+        if (i && _arr.length === i) break;
+      }
+    } catch (err) {
+      _d = true;
+      _e = err;
+    } finally {
+      try {
+        if (!_n && _i["return"] != null) _i["return"]();
+      } finally {
+        if (_d) throw _e;
+      }
+    }
+
+    return _arr;
+  }
+
+  function _unsupportedIterableToArray(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(o);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+  }
+
+  function _arrayLikeToArray(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+
+    for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+
+    return arr2;
+  }
+
+  function _nonIterableRest() {
+    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) {
+    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) {
+    return props.theme.marginPaddings[3];
+  });
+  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) {
+    return props.theme.rareStepColors.secondary;
+  }, function (props) {
+    return props.theme.rareStepFontWeights.bold;
+  }, function (props) {
+    return props.theme.rareStepFontSize.h5;
+  }, 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) {
+    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;
+  }, function (props) {
+    return props.theme.marginPaddings[3];
+  });
+  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) {
+    return props.theme.rareStepColors.ntrlMin;
+  }, function (props) {
+    return props.theme.rareStepFontSize.h5;
+  }, function (props) {
+    return props.theme.marginPaddings[5];
+  }, function (props) {
+    return props.theme.marginPaddings[1];
+  }, function (props) {
+    return props.theme.rareStepColors.secondary;
+  }, 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];
+  }, function (props) {
+    return props.theme.marginPaddings[1];
+  }, 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) {
+    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) {
+    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) {
+    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) {
+    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) {
+    return props.theme.rareStepColors.ntrlMin;
+  }, function (props) {
+    return props.theme.rareStepColors.ntrlMin;
+  });
+  var DropdownNavigatorIcon = styled.img(_templateObject21 || (_templateObject21 = _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) {
+    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) {
+    return props.theme.marginPaddings[1];
+  }, function (props) {
+    return props.theme.marginPaddings[3];
+  }, function (props) {
+    return props.theme.rareStepColors.secondary;
+  }, 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) {
+    return props.theme.rareStepFontSize.footerTitle;
+  }, function (props) {
+    return props.theme.marginPaddings[0];
+  }, function (props) {
+    return props.theme.rareStepColors.secondary;
+  }, function (props) {
+    return props.theme.rareStepColors.ntrl40;
+  }, function (props) {
+    return props.theme.marginPaddings[3];
+  }, 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 RareStepHeader = function RareStepHeader(_ref) {
+    var _header_dropdown_prod;
+
+    var header_logo_img_url = _ref.header_logo_img_url,
+        search_icon_url = _ref.search_icon_url,
+        cart_icon_url = _ref.cart_icon_url,
+        user_icon_url = _ref.user_icon_url,
+        interest_icon_url = _ref.interest_icon_url,
+        dropdown_closed_icon_url = _ref.dropdown_closed_icon_url,
+        dropdown_open_icon_url = _ref.dropdown_open_icon_url,
+        currency_flag_icon_url = _ref.currency_flag_icon_url,
+        close_icon_url = _ref.close_icon_url,
+        navigation_search_icon_url = _ref.navigation_search_icon_url,
+        wordpress_site_url = _ref.wordpress_site_url,
+        header_dropdown_product_object = _ref.header_dropdown_product_object;
+
+    var _useState = React.useState(false),
+        _useState2 = _slicedToArray(_useState, 2),
+        showDropdown = _useState2[0],
+        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 handleShowDropdown = function handleShowDropdown() {
+      clearTimeout(timeoutIdRef.current);
+      setShowDropdown(true);
+    };
+
+    var handleHideDropdown = function handleHideDropdown() {
+      timeoutIdRef.current = setTimeout(function () {
+        setShowDropdown(false);
+      }, 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, {
+      src: search_icon_url,
+      onClick: toggleSearch
+    }), /*#__PURE__*/React__default.createElement(HeaderIcon, {
+      src: interest_icon_url
+    }), /*#__PURE__*/React__default.createElement(HeaderIcon, {
+      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, {
+      onMouseOver: handleShowDropdown,
+      onMouseOut: handleHideDropdown
+    }, header_dropdown_product_object.product_type, showDropdown ? /*#__PURE__*/React__default.createElement(DropdownNavigatorIcon, {
+      src: dropdown_closed_icon_url
+    }) : /*#__PURE__*/React__default.createElement(DropdownNavigatorIcon, {
+      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
+    }))));
+  };
+
+  return RareStepHeader;
+
+})));

package/RareStepLoginModal.js

@@ -0,0 +1,15 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react')) :
+  typeof define === 'function' && define.amd ? define(['react'], factory) :
+  (global = global || self, global.RareStepLoginModal = factory(global.React));
+}(this, (function (React) { 'use strict';
+
+  React = React && Object.prototype.hasOwnProperty.call(React, 'default') ? React['default'] : React;
+
+  function RareStepLoginModal() {
+    return /*#__PURE__*/React.createElement("div", null, "RareStepLoginModal");
+  }
+
+  return RareStepLoginModal;
+
+})));