@bonlineza/luxity-lib 2.9.2 → 2.11.0

package/NotificationDropDown.js

@@ -1,15 +1,14 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('stylis-rule-sheet'), require('react-dom'), require('prop-types'), require('raf'), require('react-input-autosize'), require('react-transition-group'), require('@bonlineza/b-lib/EllipsisLoader'), require('styled-components'), require('@bonlineza/b-lib/PageReady'), require('react-notify-toast')) :
-  typeof define === 'function' && define.amd ? define(['react', 'stylis-rule-sheet', 'react-dom', 'prop-types', 'raf', 'react-input-autosize', 'react-transition-group', '@bonlineza/b-lib/EllipsisLoader', 'styled-components', '@bonlineza/b-lib/PageReady', 'react-notify-toast'], factory) :
-  (global = global || self, global.NotificationDropDown = factory(global.React, global['stylis-rule-sheet'], global.reactDom, global.PropTypes, global.raf, global['react-input-autosize'], global['react-transition-group'], global.EllipsisLoader, global.styled, global.PageReady, global['react-notify-toast']));
-}(this, (function (React, stylisRuleSheet, reactDom, PropTypes, raf, AutosizeInput, reactTransitionGroup, EllipsisLoader, styled, PageReady, Notifications) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('stylis-rule-sheet'), require('react-dom'), require('prop-types'), require('raf'), require('react-input-autosize'), require('react-transition-group'), require('styled-components'), require('@bonlineza/b-lib/PageReady'), require('react-notify-toast')) :
+  typeof define === 'function' && define.amd ? define(['react', 'stylis-rule-sheet', 'react-dom', 'prop-types', 'raf', 'react-input-autosize', 'react-transition-group', 'styled-components', '@bonlineza/b-lib/PageReady', 'react-notify-toast'], factory) :
+  (global = global || self, global.NotificationDropDown = factory(global.React, global['stylis-rule-sheet'], global.reactDom, global.PropTypes, global.raf, global['react-input-autosize'], global['react-transition-group'], global.styled, global.PageReady, global['react-notify-toast']));
+}(this, (function (React, stylisRuleSheet, reactDom, PropTypes, raf, AutosizeInput, reactTransitionGroup, styled, PageReady, Notifications) { 'use strict';
 
   var React__default = 'default' in React ? React['default'] : React;
   stylisRuleSheet = stylisRuleSheet && Object.prototype.hasOwnProperty.call(stylisRuleSheet, 'default') ? stylisRuleSheet['default'] : stylisRuleSheet;
   PropTypes = PropTypes && Object.prototype.hasOwnProperty.call(PropTypes, 'default') ? PropTypes['default'] : PropTypes;
   raf = raf && Object.prototype.hasOwnProperty.call(raf, 'default') ? raf['default'] : raf;
   AutosizeInput = AutosizeInput && Object.prototype.hasOwnProperty.call(AutosizeInput, 'default') ? AutosizeInput['default'] : AutosizeInput;
-  EllipsisLoader = EllipsisLoader && Object.prototype.hasOwnProperty.call(EllipsisLoader, 'default') ? EllipsisLoader['default'] : EllipsisLoader;
   var styled__default = 'default' in styled ? styled['default'] : styled;
   PageReady = PageReady && Object.prototype.hasOwnProperty.call(PageReady, 'default') ? PageReady['default'] : PageReady;
   var Notifications__default = 'default' in Notifications ? Notifications['default'] : Notifications;
@@ -6752,8 +6751,59 @@
 
   var index$1 = manageState(Select);
 
-  var _templateObject;
-  var NotifyContainer = styled__default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .page-ready {\n    display: flex;\n    align-items: center;\n  }\n\n  .loader {\n    min-width: 150px;\n  }\n\n  .notification-dropdown-select-container {\n    min-width: 150px;\n\n    .notification-dropdown-select__control {\n      min-height: auto;\n      background-color: ", ";\n      border: none;\n      border-radius: 0;\n\n      &--is-focused {\n        border: none;\n        border-radius: 0;\n        box-shadow: none;\n      }\n\n      .notification-dropdown-select__value-container {\n        & > div {\n          padding: 0;\n          margin: 0;\n          color: ", ";\n        }\n        & .notification-dropdown-select__single-value,\n        & .notification-dropdown-select__placeholder {\n          overflow: visible;\n          font-weight: lighter;\n        }\n      }\n    }\n  }\n\n  .notification-dropdown-select__indicators {\n    padding: 0 !important;\n    .notification-dropdown-select__dropdown-indicator {\n      color: ", ";\n    }\n  }\n\n  .notification-dropdown-select__menu {\n    border-radius: 0;\n\n    & > .notification-dropdown-select__menu-list {\n      border-radius: 0;\n\n      & > .notification-dropdown-select__option {\n        font-weight: bold;\n        &:last-child {\n          border-bottom: none;\n        }\n\n        &.notification-dropdown-select__option--is-focused {\n          background-color: ", ";\n          border-style: hidden;\n        }\n        &.notification-dropdown-select__option--is-selected {\n          color: ", ";\n          background-color: ", ";\n          border-style: hidden;\n        }\n        &.notification-dropdown-select__option--is-selected.notification-dropdown-select__option--is-focused {\n          border-style: hidden;\n        }\n      }\n    }\n  }\n"])), function (props) {
+  var LuxityArrowLeft = (function (props) {
+    return /*#__PURE__*/React__default.createElement("svg", {
+      version: "1.0",
+      xmlns: "http://www.w3.org/2000/svg",
+      width: props.width || '100%',
+      height: props.height || '100%',
+      viewBox: "0 0 177.000000 300.000000",
+      preserveAspectRatio: "xMidYMid meet"
+    }, /*#__PURE__*/React__default.createElement("g", {
+      transform: "translate(0.000000,300.000000) scale(0.100000,-0.100000)",
+      fill: "#000000",
+      stroke: "none"
+    }, /*#__PURE__*/React__default.createElement("path", {
+      d: "M808 2628 c-139 -205 -377 -557 -530 -781 l-277 -409 48 -71 c363\n-539 905 -1335 915 -1345 9 -9 90 -12 362 -10 l351 3 -350 515 c-192 283 -409\n603 -482 711 l-134 197 386 568 c212 313 450 665 529 782 l145 212 -355 0\n-355 0 -253 -372z"
+    })));
+  });
+
+  var LuxityArrowRight = (function (props) {
+    return /*#__PURE__*/React__default.createElement("svg", {
+      version: "1.0",
+      xmlns: "http://www.w3.org/2000/svg",
+      width: props.width || '100%',
+      height: props.height || '100%',
+      viewBox: "0 0 177.000000 300.000000",
+      preserveAspectRatio: "xMidYMid meet"
+    }, /*#__PURE__*/React__default.createElement("g", {
+      transform: "translate(0.000000,300.000000) scale(0.100000,-0.100000)",
+      fill: "#000000",
+      stroke: "none"
+    }, /*#__PURE__*/React__default.createElement("path", {
+      d: "M106 2973 c9 -16 226 -336 481 -711 255 -376 465 -687 466 -691 1 -4\n-233 -355 -520 -779 -288 -424 -523 -773 -523 -776 0 -3 159 -6 353 -5 l352 0\n525 776 c289 427 524 780 522 785 -1 5 -219 328 -484 719 l-481 709 -355 0\n-354 0 18 -27z"
+    })));
+  });
+
+  var _templateObject, _templateObject2, _templateObject3;
+  var LoaderContainer = styled__default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  margin: 20px auto;\n"])));
+  var LeftImageContainer = styled__default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-start;\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n  animation: slide-left infinite 3s;\n  background-color: white;\n\n  @keyframes slide-left {\n    0% {\n      transform: translateX(0);\n    }\n    40% {\n      transform: translateX(50%);\n    }\n    100% {\n      transform: translateX(150%);\n    }\n  }\n"])));
+  var RightImageContainer = styled__default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-end;\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n  animation: slide-right infinite 3s;\n\n  @keyframes slide-right {\n    0% {\n      transform: translateX(0);\n    }\n    40% {\n      transform: translateX(-50%);\n      opacity: 1;\n    }\n    100% {\n      transform: translateX(-150%);\n      opacity: 0;\n    }\n  }\n"])));
+
+  function LuxityLoader(_ref) {
+    var width = _ref.width,
+        height = _ref.height;
+    return /*#__PURE__*/React__default.createElement(LoaderContainer, null, /*#__PURE__*/React__default.createElement(LeftImageContainer, null, /*#__PURE__*/React__default.createElement(LuxityArrowRight, {
+      width: width,
+      height: height
+    })), /*#__PURE__*/React__default.createElement(RightImageContainer, null, /*#__PURE__*/React__default.createElement(LuxityArrowLeft, {
+      width: width,
+      height: height
+    })));
+  }
+
+  var _templateObject$1;
+  var NotifyContainer = styled__default.div(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n  .page-ready {\n    display: flex;\n    align-items: center;\n  }\n\n  .loader {\n    min-width: 150px;\n  }\n\n  .notification-dropdown-select-container {\n    min-width: 150px;\n\n    .notification-dropdown-select__control {\n      min-height: auto;\n      background-color: ", ";\n      border: none;\n      border-radius: 0;\n\n      &--is-focused {\n        border: none;\n        border-radius: 0;\n        box-shadow: none;\n      }\n\n      .notification-dropdown-select__value-container {\n        & > div {\n          padding: 0;\n          margin: 0;\n          color: ", ";\n        }\n        & .notification-dropdown-select__single-value,\n        & .notification-dropdown-select__placeholder {\n          overflow: visible;\n          font-weight: lighter;\n        }\n      }\n    }\n  }\n\n  .notification-dropdown-select__indicators {\n    padding: 0 !important;\n    .notification-dropdown-select__dropdown-indicator {\n      color: ", ";\n    }\n  }\n\n  .notification-dropdown-select__menu {\n    border-radius: 0;\n\n    & > .notification-dropdown-select__menu-list {\n      border-radius: 0;\n\n      & > .notification-dropdown-select__option {\n        font-weight: bold;\n        &:last-child {\n          border-bottom: none;\n        }\n\n        &.notification-dropdown-select__option--is-focused {\n          background-color: ", ";\n          border-style: hidden;\n        }\n        &.notification-dropdown-select__option--is-selected {\n          color: ", ";\n          background-color: ", ";\n          border-style: hidden;\n        }\n        &.notification-dropdown-select__option--is-selected.notification-dropdown-select__option--is-focused {\n          border-style: hidden;\n        }\n      }\n    }\n  }\n"])), function (props) {
     return props.theme.colors.ntrlMin;
   }, function (props) {
     return props.theme.colors.base;
@@ -6848,7 +6898,10 @@
           customErrorMessage: customErrorMessage,
           customErrorHandler: customErrorHandler,
           renderCustomLoader: function renderCustomLoader() {
-            return /*#__PURE__*/React__default.createElement(EllipsisLoader, null);
+            return /*#__PURE__*/React__default.createElement(LuxityLoader, {
+              height: "40px",
+              width: "95%"
+            });
           },
           errorMessageInterpreter: interpretErrorMessage
         }, /*#__PURE__*/React__default.createElement(LuxityPageReadyContext.Provider, {
@@ -7008,7 +7061,10 @@
           }
         }, /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
           className: "notification-dropdown-label"
-        }, "Notification:\xA0"), updating ? /*#__PURE__*/React__default.createElement(EllipsisLoader, null) : /*#__PURE__*/React__default.createElement(index$1, {
+        }, "Notification:\xA0"), updating ? /*#__PURE__*/React__default.createElement(LuxityLoader, {
+          height: "20px",
+          width: "95%"
+        }) : /*#__PURE__*/React__default.createElement(index$1, {
           isMulti: false,
           isSearchable: false,
           components: {

package/README.md

@@ -26,6 +26,11 @@
 - Tooltip
 - CheckBoxButton
 - GenderSelector
+- LuxityLoader
+- GraphQLDropdownSelector
+- LuxityGraphQLDropdownSelector
+- MaterialSelector
+- ModelSelector
 
 ## Elements (simple Styled Components)
 - Buttons
@@ -73,6 +78,8 @@
 - PointerDown
 - Search
 - Shoes
+- LuxityArrowLeft
+- LuxityArrowRight
 
 ## Commands
 - `yarn` - install npm dependencies

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;
+
+})));