@bonlineza/luxity-lib 2.15.0 → 2.16.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/AddInterest.js +20 -17
  2. package/BrandSelector.js +20 -17
  3. package/GraphQLDropdownSelector.js +20 -17
  4. package/Interests.js +20 -17
  5. package/LuxityGraphQLDropdownSelector.js +20 -17
  6. package/MaterialSelector.js +20 -17
  7. package/ModelSelector.js +20 -17
  8. package/RareStepFooter.js +13 -6
  9. package/RareStepHeader.js +52 -50
  10. package/build/bundle.js +65 -56
  11. package/package.json +1 -1
package/MaterialSelector.js CHANGED
@@ -11337,7 +11337,7 @@
11337
11337
  defaultShoeSizeType: shoeSizeTypes.eu.value
11338
11338
  };
11339
11339
 
11340
- var _templateObject$N, _templateObject2$a, _templateObject3$5, _templateObject4$4, _templateObject5$2, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29;
11340
+ var _templateObject$N, _templateObject2$a, _templateObject3$5, _templateObject4$4, _templateObject5$2, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30;
11341
11341
  var HeaderWrapper = styled__default.div(_templateObject$N || (_templateObject$N = _taggedTemplateLiteral(["\n {\n display: inline-block;\n background-color: ", ";\n position: relative;\n width: 100%;\n\n .header__search-container,\n .header__search-input {\n background-color: ", ";\n }\n\n .header__search-container {\n max-width: ", ";\n margin: 0 auto;\n padding: ", " 5%;\n }\n }\n"])), function (props) {
11342
11342
  return props.theme.rareStepColors.ntrlMin;
11343
11343
  }, function (props) {
@@ -11356,9 +11356,9 @@
11356
11356
  return props.theme.rareStepPageSizes.container;
11357
11357
  });
11358
11358
  var LogoFigure = styled__default.div(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteral(["\n {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n"])));
11359
- var LogoImage = styled__default.img(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteral(["\n {\n width: 200px;\n height: 70px;\n }\n"])));
11359
+ var LogoImage = styled__default.img(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteral(["\n {\n width: 200px;\n height: 70px;\n cursor: pointer;\n }\n"])));
11360
11360
  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"])));
11361
- 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) {
11361
+ 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 text-decoration: none;\n\n &:hover,\n &:active {\n color: ", ";\n text-decoration: none;\n }\n }\n"])), function (props) {
11362
11362
  return props.theme.rareStepColors.secondary;
11363
11363
  }, function (props) {
11364
11364
  return props.theme.rareStepFontWeights.bold;
@@ -11444,12 +11444,10 @@
11444
11444
  }, function (props) {
11445
11445
  return props.theme.rareStepColors.secondary;
11446
11446
  });
11447
- var SearchContainer = styled__default.div(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n {\n display: flex;\n padding: ", " 0;\n align-items: center;\n border-top: 1px solid ", ";\n }\n"])), function (props) {
11447
+ var SearchContainer = styled__default.div(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n {\n display: flex;\n padding: ", " 0;\n align-items: center;\n }\n"])), function (props) {
11448
11448
  return props.theme.marginPaddings[1];
11449
- }, function (props) {
11450
- return props.theme.rareStepColors.ntrl40;
11451
11449
  });
11452
- var SearchInput = styled__default.input(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n {\n width: 50%;\n font-size: ", ";\n padding-bottom: ", ";\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) {
11450
+ var SearchInput = styled__default.input(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n {\n width: 100%;\n font-size: ", ";\n padding-bottom: ", ";\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) {
11453
11451
  return props.theme.rareStepFontSize.footerTitle;
11454
11452
  }, function (props) {
11455
11453
  return props.theme.marginPaddings[0];
@@ -11461,18 +11459,23 @@
11461
11459
  return props.theme.rareStepColors.ntrl40;
11462
11460
  });
11463
11461
  var SearchIcon = styled__default.img(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["\n {\n width: 20px;\n height: 20px;\n cursor: pointer;\n margin-bottom: 7px;\n }\n"])));
11464
- var CloseIcon = styled__default.img(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["\n {\n width: 20px;\n height: 20px;\n margin-left: auto;\n cursor: pointer;\n }\n"])));
11462
+ var CloseIcon = styled__default.img(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["\n {\n width: 20px;\n height: 20px;\n cursor: pointer;\n }\n"])));
11465
11463
  var CurrencyContainer = styled__default.div(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["\n {\n display: flex;\n }\n"])));
11464
+ var DropdownSearchContainer = styled__default.div(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["\n {\n background-color: ", ";\n border-top: 1px solid ", ";\n }\n"])), function (props) {
11465
+ return props.theme.rareStepColors.primary;
11466
+ }, function (props) {
11467
+ return props.theme.rareStepColors.ntrl40;
11468
+ });
11466
11469
 
11467
11470
  var _templateObject$O, _templateObject2$b, _templateObject3$6, _templateObject4$5, _templateObject5$3, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20$1;
11468
- var HeaderWrapper$1 = styled__default.div(_templateObject$O || (_templateObject$O = _taggedTemplateLiteral(["\n {\n display: flex;\n background-color: ", ";\n position: relative;\n width: 100%;\n justify-content: space-between;\n align-items: center;\n padding: ", " 0;\n }\n"])), function (props) {
11471
+ var HeaderWrapper$1 = styled__default.div(_templateObject$O || (_templateObject$O = _taggedTemplateLiteral(["\n {\n display: flex;\n background-color: ", ";\n position: relative;\n width: 100%;\n justify-content: space-between;\n align-items: center;\n padding: ", " 5%;\n }\n"])), function (props) {
11469
11472
  return props.theme.rareStepColors.ntrlMin;
11470
11473
  }, function (props) {
11471
11474
  return props.theme.marginPaddings[3];
11472
11475
  });
11473
11476
  var Icon = styled__default.img(_templateObject2$b || (_templateObject2$b = _taggedTemplateLiteral(["\n {\n width: 30px;\n height: 30px;\n cursor: pointer;\n }\n"])));
11474
- var Logo = styled__default.img(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteral(["\n {\n width: 200px;\n height: 70px;\n margin-left: 20px;\n }\n"])));
11475
- var IconWrapper$1 = styled__default.div(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteral(["\n {\n display: flex;\n\n & > img {\n margin-left: 10px;\n }\n }\n"])));
11477
+ var Logo = styled__default.img(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteral(["\n {\n width: 140px;\n height: auto;\n margin-left: 30px;\n cursor: pointer;\n }\n"])));
11478
+ var IconWrapper$1 = styled__default.div(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteral(["\n {\n display: flex;\n width: auto;\n height: 25px;\n\n .search-icon,\n .cart-icon {\n width: 100%;\n height: 100%;\n }\n\n .cart-icon {\n margin-left: 10px;\n }\n }\n"])));
11476
11479
  var SideNavWrapper = styled__default.div(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteral(["\n {\n position: relative;\n overflow: hidden;\n\n .side-nav-link--bottom {\n font-size: ", ";\n }\n }\n"])), function (props) {
11477
11480
  return props.theme.rareStepFontSize.h6;
11478
11481
  });
@@ -11511,16 +11514,16 @@
11511
11514
  var Hr = styled__default.hr(_templateObject14$1 || (_templateObject14$1 = _taggedTemplateLiteral(["\n {\n width: 100%;\n color: ", ";\n margin: 0;\n }\n"])), function (props) {
11512
11515
  return props.theme.rareStepColors.ntrlMax;
11513
11516
  });
11514
- var MobileSearchContainer = styled__default.div(_templateObject15$1 || (_templateObject15$1 = _taggedTemplateLiteral(["\n {\n .header {\n &__icon {\n width: 30px;\n height: 30px;\n }\n\n &__search-container {\n background-color: ", ";\n border-top: 1px solid ", ";\n }\n\n &__search-input {\n width: 100%;\n color: ", ";\n background-color: ", ";\n\n &::placeholder {\n color: ", ";\n }\n }\n }\n }\n"])), function (props) {
11515
- return props.theme.rareStepColors.ntrlMin;
11517
+ var MobileSearchContainer = styled__default.div(_templateObject15$1 || (_templateObject15$1 = _taggedTemplateLiteral(["\n {\n background-color: ", ";\n\n .header {\n &__icon {\n width: 20px;\n height: 20px;\n }\n\n &__search-container {\n border-top: 1px solid ", ";\n padding-left: 5%;\n padding-right: 5%;\n }\n\n &__search-input {\n width: 100%;\n color: ", ";\n background-color: ", ";\n\n &::placeholder {\n color: ", ";\n }\n }\n }\n }\n"])), function (props) {
11518
+ return props.theme.rareStepColors.primary;
11516
11519
  }, function (props) {
11517
11520
  return props.theme.rareStepColors.ntrl50;
11518
- }, function (props) {
11519
- return props.theme.rareStepColors.ntrlMax;
11520
11521
  }, function (props) {
11521
11522
  return props.theme.rareStepColors.ntrlMin;
11522
11523
  }, function (props) {
11523
- return props.theme.rareStepColors.ntrlMax;
11524
+ return props.theme.rareStepColors.primary;
11525
+ }, function (props) {
11526
+ return props.theme.rareStepColors.ntrlMin;
11524
11527
  });
11525
11528
  var BackButton = styled__default.button(_templateObject16$1 || (_templateObject16$1 = _taggedTemplateLiteral(["\n {\n background-color: transparent;\n border: none;\n color: ", ";\n margin: 30px 0;\n position: relative;\n\n &:hover {\n cursor: pointer;\n background-color: transparent;\n color: ", ";\n text-decoration: underline;\n }\n }\n"])), function (props) {
11526
11529
  return props.theme.rareStepColors.ntrlMin;
@@ -11583,7 +11586,7 @@
11583
11586
  var FooterImageWrapper = styled__default.div(_templateObject8$2 || (_templateObject8$2 = _taggedTemplateLiteral(["\n {\n flex-basis: 30%;\n padding-bottom: ", ";\n }\n"])), function (props) {
11584
11587
  return props.theme.marginPaddings[4];
11585
11588
  });
11586
- var FooterLogo = styled__default.img(_templateObject9$2 || (_templateObject9$2 = _taggedTemplateLiteral(["\n {\n width: 120px;\n height: 50px;\n margin-top: ", ";\n }\n"])), function (props) {
11589
+ var FooterLogo = styled__default.img(_templateObject9$2 || (_templateObject9$2 = _taggedTemplateLiteral(["\n {\n width: 120px;\n height: 50px;\n margin-top: ", ";\n cursor: pointer;\n }\n"])), function (props) {
11587
11590
  return props.theme.marginPaddings[5];
11588
11591
  });
11589
11592
  var SocialIconWrapper = styled__default.div(_templateObject10$2 || (_templateObject10$2 = _taggedTemplateLiteral(["\n {\n display: flex;\n }\n"])));
package/ModelSelector.js CHANGED
@@ -11337,7 +11337,7 @@
11337
11337
  defaultShoeSizeType: shoeSizeTypes.eu.value
11338
11338
  };
11339
11339
 
11340
- var _templateObject$N, _templateObject2$a, _templateObject3$5, _templateObject4$4, _templateObject5$2, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29;
11340
+ var _templateObject$N, _templateObject2$a, _templateObject3$5, _templateObject4$4, _templateObject5$2, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30;
11341
11341
  var HeaderWrapper = styled__default.div(_templateObject$N || (_templateObject$N = _taggedTemplateLiteral(["\n {\n display: inline-block;\n background-color: ", ";\n position: relative;\n width: 100%;\n\n .header__search-container,\n .header__search-input {\n background-color: ", ";\n }\n\n .header__search-container {\n max-width: ", ";\n margin: 0 auto;\n padding: ", " 5%;\n }\n }\n"])), function (props) {
11342
11342
  return props.theme.rareStepColors.ntrlMin;
11343
11343
  }, function (props) {
@@ -11356,9 +11356,9 @@
11356
11356
  return props.theme.rareStepPageSizes.container;
11357
11357
  });
11358
11358
  var LogoFigure = styled__default.div(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteral(["\n {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n"])));
11359
- var LogoImage = styled__default.img(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteral(["\n {\n width: 200px;\n height: 70px;\n }\n"])));
11359
+ var LogoImage = styled__default.img(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteral(["\n {\n width: 200px;\n height: 70px;\n cursor: pointer;\n }\n"])));
11360
11360
  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"])));
11361
- 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) {
11361
+ 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 text-decoration: none;\n\n &:hover,\n &:active {\n color: ", ";\n text-decoration: none;\n }\n }\n"])), function (props) {
11362
11362
  return props.theme.rareStepColors.secondary;
11363
11363
  }, function (props) {
11364
11364
  return props.theme.rareStepFontWeights.bold;
@@ -11444,12 +11444,10 @@
11444
11444
  }, function (props) {
11445
11445
  return props.theme.rareStepColors.secondary;
11446
11446
  });
11447
- var SearchContainer = styled__default.div(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n {\n display: flex;\n padding: ", " 0;\n align-items: center;\n border-top: 1px solid ", ";\n }\n"])), function (props) {
11447
+ var SearchContainer = styled__default.div(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n {\n display: flex;\n padding: ", " 0;\n align-items: center;\n }\n"])), function (props) {
11448
11448
  return props.theme.marginPaddings[1];
11449
- }, function (props) {
11450
- return props.theme.rareStepColors.ntrl40;
11451
11449
  });
11452
- var SearchInput = styled__default.input(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n {\n width: 50%;\n font-size: ", ";\n padding-bottom: ", ";\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) {
11450
+ var SearchInput = styled__default.input(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n {\n width: 100%;\n font-size: ", ";\n padding-bottom: ", ";\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) {
11453
11451
  return props.theme.rareStepFontSize.footerTitle;
11454
11452
  }, function (props) {
11455
11453
  return props.theme.marginPaddings[0];
@@ -11461,18 +11459,23 @@
11461
11459
  return props.theme.rareStepColors.ntrl40;
11462
11460
  });
11463
11461
  var SearchIcon = styled__default.img(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["\n {\n width: 20px;\n height: 20px;\n cursor: pointer;\n margin-bottom: 7px;\n }\n"])));
11464
- var CloseIcon = styled__default.img(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["\n {\n width: 20px;\n height: 20px;\n margin-left: auto;\n cursor: pointer;\n }\n"])));
11462
+ var CloseIcon = styled__default.img(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["\n {\n width: 20px;\n height: 20px;\n cursor: pointer;\n }\n"])));
11465
11463
  var CurrencyContainer = styled__default.div(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["\n {\n display: flex;\n }\n"])));
11464
+ var DropdownSearchContainer = styled__default.div(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["\n {\n background-color: ", ";\n border-top: 1px solid ", ";\n }\n"])), function (props) {
11465
+ return props.theme.rareStepColors.primary;
11466
+ }, function (props) {
11467
+ return props.theme.rareStepColors.ntrl40;
11468
+ });
11466
11469
 
11467
11470
  var _templateObject$O, _templateObject2$b, _templateObject3$6, _templateObject4$5, _templateObject5$3, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20$1;
11468
- var HeaderWrapper$1 = styled__default.div(_templateObject$O || (_templateObject$O = _taggedTemplateLiteral(["\n {\n display: flex;\n background-color: ", ";\n position: relative;\n width: 100%;\n justify-content: space-between;\n align-items: center;\n padding: ", " 0;\n }\n"])), function (props) {
11471
+ var HeaderWrapper$1 = styled__default.div(_templateObject$O || (_templateObject$O = _taggedTemplateLiteral(["\n {\n display: flex;\n background-color: ", ";\n position: relative;\n width: 100%;\n justify-content: space-between;\n align-items: center;\n padding: ", " 5%;\n }\n"])), function (props) {
11469
11472
  return props.theme.rareStepColors.ntrlMin;
11470
11473
  }, function (props) {
11471
11474
  return props.theme.marginPaddings[3];
11472
11475
  });
11473
11476
  var Icon = styled__default.img(_templateObject2$b || (_templateObject2$b = _taggedTemplateLiteral(["\n {\n width: 30px;\n height: 30px;\n cursor: pointer;\n }\n"])));
11474
- var Logo = styled__default.img(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteral(["\n {\n width: 200px;\n height: 70px;\n margin-left: 20px;\n }\n"])));
11475
- var IconWrapper$1 = styled__default.div(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteral(["\n {\n display: flex;\n\n & > img {\n margin-left: 10px;\n }\n }\n"])));
11477
+ var Logo = styled__default.img(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteral(["\n {\n width: 140px;\n height: auto;\n margin-left: 30px;\n cursor: pointer;\n }\n"])));
11478
+ var IconWrapper$1 = styled__default.div(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteral(["\n {\n display: flex;\n width: auto;\n height: 25px;\n\n .search-icon,\n .cart-icon {\n width: 100%;\n height: 100%;\n }\n\n .cart-icon {\n margin-left: 10px;\n }\n }\n"])));
11476
11479
  var SideNavWrapper = styled__default.div(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteral(["\n {\n position: relative;\n overflow: hidden;\n\n .side-nav-link--bottom {\n font-size: ", ";\n }\n }\n"])), function (props) {
11477
11480
  return props.theme.rareStepFontSize.h6;
11478
11481
  });
@@ -11511,16 +11514,16 @@
11511
11514
  var Hr = styled__default.hr(_templateObject14$1 || (_templateObject14$1 = _taggedTemplateLiteral(["\n {\n width: 100%;\n color: ", ";\n margin: 0;\n }\n"])), function (props) {
11512
11515
  return props.theme.rareStepColors.ntrlMax;
11513
11516
  });
11514
- var MobileSearchContainer = styled__default.div(_templateObject15$1 || (_templateObject15$1 = _taggedTemplateLiteral(["\n {\n .header {\n &__icon {\n width: 30px;\n height: 30px;\n }\n\n &__search-container {\n background-color: ", ";\n border-top: 1px solid ", ";\n }\n\n &__search-input {\n width: 100%;\n color: ", ";\n background-color: ", ";\n\n &::placeholder {\n color: ", ";\n }\n }\n }\n }\n"])), function (props) {
11515
- return props.theme.rareStepColors.ntrlMin;
11517
+ var MobileSearchContainer = styled__default.div(_templateObject15$1 || (_templateObject15$1 = _taggedTemplateLiteral(["\n {\n background-color: ", ";\n\n .header {\n &__icon {\n width: 20px;\n height: 20px;\n }\n\n &__search-container {\n border-top: 1px solid ", ";\n padding-left: 5%;\n padding-right: 5%;\n }\n\n &__search-input {\n width: 100%;\n color: ", ";\n background-color: ", ";\n\n &::placeholder {\n color: ", ";\n }\n }\n }\n }\n"])), function (props) {
11518
+ return props.theme.rareStepColors.primary;
11516
11519
  }, function (props) {
11517
11520
  return props.theme.rareStepColors.ntrl50;
11518
- }, function (props) {
11519
- return props.theme.rareStepColors.ntrlMax;
11520
11521
  }, function (props) {
11521
11522
  return props.theme.rareStepColors.ntrlMin;
11522
11523
  }, function (props) {
11523
- return props.theme.rareStepColors.ntrlMax;
11524
+ return props.theme.rareStepColors.primary;
11525
+ }, function (props) {
11526
+ return props.theme.rareStepColors.ntrlMin;
11524
11527
  });
11525
11528
  var BackButton = styled__default.button(_templateObject16$1 || (_templateObject16$1 = _taggedTemplateLiteral(["\n {\n background-color: transparent;\n border: none;\n color: ", ";\n margin: 30px 0;\n position: relative;\n\n &:hover {\n cursor: pointer;\n background-color: transparent;\n color: ", ";\n text-decoration: underline;\n }\n }\n"])), function (props) {
11526
11529
  return props.theme.rareStepColors.ntrlMin;
@@ -11583,7 +11586,7 @@
11583
11586
  var FooterImageWrapper = styled__default.div(_templateObject8$2 || (_templateObject8$2 = _taggedTemplateLiteral(["\n {\n flex-basis: 30%;\n padding-bottom: ", ";\n }\n"])), function (props) {
11584
11587
  return props.theme.marginPaddings[4];
11585
11588
  });
11586
- var FooterLogo = styled__default.img(_templateObject9$2 || (_templateObject9$2 = _taggedTemplateLiteral(["\n {\n width: 120px;\n height: 50px;\n margin-top: ", ";\n }\n"])), function (props) {
11589
+ var FooterLogo = styled__default.img(_templateObject9$2 || (_templateObject9$2 = _taggedTemplateLiteral(["\n {\n width: 120px;\n height: 50px;\n margin-top: ", ";\n cursor: pointer;\n }\n"])), function (props) {
11587
11590
  return props.theme.marginPaddings[5];
11588
11591
  });
11589
11592
  var SocialIconWrapper = styled__default.div(_templateObject10$2 || (_templateObject10$2 = _taggedTemplateLiteral(["\n {\n display: flex;\n }\n"])));
package/RareStepFooter.js CHANGED
@@ -143,7 +143,7 @@
143
143
  var FooterImageWrapper = styled__default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n {\n flex-basis: 30%;\n padding-bottom: ", ";\n }\n"])), function (props) {
144
144
  return props.theme.marginPaddings[4];
145
145
  });
146
- var FooterLogo = styled__default.img(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n {\n width: 120px;\n height: 50px;\n margin-top: ", ";\n }\n"])), function (props) {
146
+ var FooterLogo = styled__default.img(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n {\n width: 120px;\n height: 50px;\n margin-top: ", ";\n cursor: pointer;\n }\n"])), function (props) {
147
147
  return props.theme.marginPaddings[5];
148
148
  });
149
149
  var SocialIconWrapper = styled__default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n {\n display: flex;\n }\n"])));
@@ -190,12 +190,16 @@
190
190
  facebookIconUrl = _ref.facebookIconUrl,
191
191
  instagramUrl = _ref.instagramUrl,
192
192
  instagramImageUrl = _ref.instagramImageUrl,
193
- className = _ref.className;
193
+ className = _ref.className,
194
+ wordpressSiteUrl = _ref.wordpressSiteUrl;
194
195
  return /*#__PURE__*/React__default.createElement(FooterConnectContainer, {
195
196
  className: className
196
197
  }, /*#__PURE__*/React__default.createElement(FooterLogo, {
197
198
  className: "footer__logo",
198
- src: footerLogoImageUrl
199
+ src: footerLogoImageUrl,
200
+ onClick: function onClick() {
201
+ window.location.href = wordpressSiteUrl;
202
+ }
199
203
  }), /*#__PURE__*/React__default.createElement(FooterTitleLink, {
200
204
  className: "footer__link"
201
205
  }, "Connect"), /*#__PURE__*/React__default.createElement(SocialIconWrapper, null, /*#__PURE__*/React__default.createElement(FooterLink, {
@@ -217,7 +221,8 @@
217
221
  instagramUrl = _ref.instagramUrl,
218
222
  instagramImageUrl = _ref.instagramImageUrl,
219
223
  paymentImage = _ref.paymentImage,
220
- footerLinks = _ref.footerLinks;
224
+ footerLinks = _ref.footerLinks,
225
+ wordpressSiteUrl = _ref.wordpressSiteUrl;
221
226
  return /*#__PURE__*/React__default.createElement(FooterWrapper, null, /*#__PURE__*/React__default.createElement(PageContainer, {
222
227
  className: "footer__page-container"
223
228
  }, /*#__PURE__*/React__default.createElement(FooterLinksWrapper, {
@@ -241,7 +246,8 @@
241
246
  facebookUrl: facebookUrl,
242
247
  facebookIconUrl: facebookIconUrl,
243
248
  instagramUrl: instagramUrl,
244
- instagramImageUrl: instagramImageUrl
249
+ instagramImageUrl: instagramImageUrl,
250
+ wordpressSiteUrl: wordpressSiteUrl
245
251
  }));
246
252
  })), /*#__PURE__*/React__default.createElement(FooterConnect, {
247
253
  className: "footer__connect-mobile",
@@ -249,7 +255,8 @@
249
255
  facebookUrl: facebookUrl,
250
256
  facebookIconUrl: facebookIconUrl,
251
257
  instagramUrl: instagramUrl,
252
- instagramImageUrl: instagramImageUrl
258
+ instagramImageUrl: instagramImageUrl,
259
+ wordpressSiteUrl: wordpressSiteUrl
253
260
  }), /*#__PURE__*/React__default.createElement(FooterImageWrapper, {
254
261
  className: "footer__figure"
255
262
  }, /*#__PURE__*/React__default.createElement(FooterImage, {
package/RareStepHeader.js CHANGED
@@ -159,7 +159,7 @@
159
159
  });
160
160
  });
161
161
 
162
- 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, _templateObject29;
162
+ 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, _templateObject29, _templateObject30;
163
163
  var HeaderWrapper = styled__default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n {\n display: inline-block;\n background-color: ", ";\n position: relative;\n width: 100%;\n\n .header__search-container,\n .header__search-input {\n background-color: ", ";\n }\n\n .header__search-container {\n max-width: ", ";\n margin: 0 auto;\n padding: ", " 5%;\n }\n }\n"])), function (props) {
164
164
  return props.theme.rareStepColors.ntrlMin;
165
165
  }, function (props) {
@@ -178,9 +178,9 @@
178
178
  return props.theme.rareStepPageSizes.container;
179
179
  });
180
180
  var LogoFigure = styled__default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n"])));
181
- var LogoImage = styled__default.img(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n {\n width: 200px;\n height: 70px;\n }\n"])));
181
+ var LogoImage = styled__default.img(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n {\n width: 200px;\n height: 70px;\n cursor: pointer;\n }\n"])));
182
182
  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"])));
183
- 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) {
183
+ 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 text-decoration: none;\n\n &:hover,\n &:active {\n color: ", ";\n text-decoration: none;\n }\n }\n"])), function (props) {
184
184
  return props.theme.rareStepColors.secondary;
185
185
  }, function (props) {
186
186
  return props.theme.rareStepFontWeights.bold;
@@ -266,12 +266,10 @@
266
266
  }, function (props) {
267
267
  return props.theme.rareStepColors.secondary;
268
268
  });
269
- var SearchContainer = styled__default.div(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n {\n display: flex;\n padding: ", " 0;\n align-items: center;\n border-top: 1px solid ", ";\n }\n"])), function (props) {
269
+ var SearchContainer = styled__default.div(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n {\n display: flex;\n padding: ", " 0;\n align-items: center;\n }\n"])), function (props) {
270
270
  return props.theme.marginPaddings[1];
271
- }, function (props) {
272
- return props.theme.rareStepColors.ntrl40;
273
271
  });
274
- var SearchInput = styled__default.input(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n {\n width: 50%;\n font-size: ", ";\n padding-bottom: ", ";\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) {
272
+ var SearchInput = styled__default.input(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n {\n width: 100%;\n font-size: ", ";\n padding-bottom: ", ";\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) {
275
273
  return props.theme.rareStepFontSize.footerTitle;
276
274
  }, function (props) {
277
275
  return props.theme.marginPaddings[0];
@@ -283,8 +281,13 @@
283
281
  return props.theme.rareStepColors.ntrl40;
284
282
  });
285
283
  var SearchIcon = styled__default.img(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["\n {\n width: 20px;\n height: 20px;\n cursor: pointer;\n margin-bottom: 7px;\n }\n"])));
286
- var CloseIcon = styled__default.img(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["\n {\n width: 20px;\n height: 20px;\n margin-left: auto;\n cursor: pointer;\n }\n"])));
284
+ var CloseIcon = styled__default.img(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["\n {\n width: 20px;\n height: 20px;\n cursor: pointer;\n }\n"])));
287
285
  var CurrencyContainer = styled__default.div(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["\n {\n display: flex;\n }\n"])));
286
+ var DropdownSearchContainer = styled__default.div(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["\n {\n background-color: ", ";\n border-top: 1px solid ", ";\n }\n"])), function (props) {
287
+ return props.theme.rareStepColors.primary;
288
+ }, function (props) {
289
+ return props.theme.rareStepColors.ntrl40;
290
+ });
288
291
 
289
292
  var Search = function Search(_ref) {
290
293
  var closeIconUrl = _ref.closeIconUrl,
@@ -362,20 +365,9 @@
362
365
  }))));
363
366
  };
364
367
 
365
- function Currency(_ref) {
366
- var currencyFlagIconUrl = _ref.currencyFlagIconUrl,
367
- className = _ref.className;
368
- return /*#__PURE__*/React__default.createElement(CurrencyContainer, {
369
- className: className
370
- }, /*#__PURE__*/React__default.createElement(CurrencyFlagIcon, {
371
- src: currencyFlagIconUrl
372
- }), /*#__PURE__*/React__default.createElement(NavigationLink, null, "South African (ZAR, R)"));
373
- }
374
-
375
368
  function Navigation(_ref) {
376
369
  var dropdownClosedIconUrl = _ref.dropdownClosedIconUrl,
377
370
  dropdownOpenIconUrl = _ref.dropdownOpenIconUrl,
378
- currencyFlagIconUrl = _ref.currencyFlagIconUrl,
379
371
  handleShowDropdown = _ref.handleShowDropdown,
380
372
  handleHideDropdown = _ref.handleHideDropdown,
381
373
  showDropdown = _ref.showDropdown,
@@ -398,8 +390,6 @@
398
390
  href: link.url,
399
391
  key: index
400
392
  }, link.name);
401
- }), /*#__PURE__*/React__default.createElement(Currency, {
402
- currencyFlagIconUrl: currencyFlagIconUrl
403
393
  })))));
404
394
  }
405
395
 
@@ -416,7 +406,8 @@
416
406
  navigationSearchIconUrl = _ref.navigationSearchIconUrl,
417
407
  wordpressSiteUrl = _ref.wordpressSiteUrl,
418
408
  desktopHeaderLinks = _ref.desktopHeaderLinks,
419
- handleOnAccountClick = _ref.handleOnAccountClick;
409
+ handleOnAccountClick = _ref.handleOnAccountClick,
410
+ handleOnCartClick = _ref.handleOnCartClick;
420
411
 
421
412
  var _useState = React.useState(false),
422
413
  _useState2 = _slicedToArray(_useState, 2),
@@ -446,17 +437,23 @@
446
437
  };
447
438
 
448
439
  return /*#__PURE__*/React__default.createElement(HeaderWrapper, null, /*#__PURE__*/React__default.createElement(HeaderContainer, null, /*#__PURE__*/React__default.createElement(LogoFigure, null, /*#__PURE__*/React__default.createElement(LogoImage, {
449
- src: headerLogoImgUrl
450
- })), /*#__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, {
440
+ src: headerLogoImgUrl,
441
+ onClick: function onClick() {
442
+ window.location.href = wordpressSiteUrl;
443
+ }
444
+ })), /*#__PURE__*/React__default.createElement(HeaderIconsContainer, null, /*#__PURE__*/React__default.createElement(SellToUsHR, null), /*#__PURE__*/React__default.createElement(SellToUsLink, {
445
+ href: desktopHeaderLinks.button.url
446
+ }, desktopHeaderLinks.button.name), /*#__PURE__*/React__default.createElement(HeaderIcon, {
451
447
  src: searchIconUrl,
452
448
  onClick: toggleSearch
453
- }), /*#__PURE__*/React__default.createElement(HeaderIcon, {
449
+ }), interestIconUrl && /*#__PURE__*/React__default.createElement(HeaderIcon, {
454
450
  src: interestIconUrl
455
451
  }), /*#__PURE__*/React__default.createElement(HeaderIcon, {
456
452
  src: userIconUrl,
457
453
  onClick: handleOnAccountClick
458
454
  }), /*#__PURE__*/React__default.createElement(HeaderIcon, {
459
- src: cartIconUrl
455
+ src: cartIconUrl,
456
+ onClick: handleOnCartClick
460
457
  }))), /*#__PURE__*/React__default.createElement(Navigation, {
461
458
  dropdownClosedIconUrl: dropdownClosedIconUrl,
462
459
  dropdownOpenIconUrl: dropdownOpenIconUrl,
@@ -465,12 +462,12 @@
465
462
  handleHideDropdown: handleHideDropdown,
466
463
  showDropdown: showDropdown,
467
464
  desktopHeaderLinks: desktopHeaderLinks
468
- }), showSearch && /*#__PURE__*/React__default.createElement(Search, {
465
+ }), showSearch && /*#__PURE__*/React__default.createElement(DropdownSearchContainer, null, /*#__PURE__*/React__default.createElement(Search, {
469
466
  closeIconUrl: closeIconUrl,
470
467
  navigationSearchIconUrl: navigationSearchIconUrl,
471
468
  wordpressSiteUrl: wordpressSiteUrl,
472
469
  toggleSearch: toggleSearch
473
- }), showDropdown && /*#__PURE__*/React__default.createElement(HeaderDropdown, {
470
+ })), showDropdown && /*#__PURE__*/React__default.createElement(HeaderDropdown, {
474
471
  headerDropdownProductObject: desktopHeaderLinks.headerDropdownProductObject,
475
472
  handleShowDropdown: handleShowDropdown,
476
473
  handleHideDropdown: handleHideDropdown
@@ -480,14 +477,14 @@
480
477
  var RareStepDesktopHeader$1 = themed(RareStepDesktopHeader);
481
478
 
482
479
  var _templateObject$1, _templateObject2$1, _templateObject3$1, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20$1;
483
- var HeaderWrapper$1 = styled__default.div(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n {\n display: flex;\n background-color: ", ";\n position: relative;\n width: 100%;\n justify-content: space-between;\n align-items: center;\n padding: ", " 0;\n }\n"])), function (props) {
480
+ var HeaderWrapper$1 = styled__default.div(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n {\n display: flex;\n background-color: ", ";\n position: relative;\n width: 100%;\n justify-content: space-between;\n align-items: center;\n padding: ", " 5%;\n }\n"])), function (props) {
484
481
  return props.theme.rareStepColors.ntrlMin;
485
482
  }, function (props) {
486
483
  return props.theme.marginPaddings[3];
487
484
  });
488
485
  var Icon = styled__default.img(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n {\n width: 30px;\n height: 30px;\n cursor: pointer;\n }\n"])));
489
- var Logo = styled__default.img(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteral(["\n {\n width: 200px;\n height: 70px;\n margin-left: 20px;\n }\n"])));
490
- var IconWrapper = styled__default.div(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteral(["\n {\n display: flex;\n\n & > img {\n margin-left: 10px;\n }\n }\n"])));
486
+ var Logo = styled__default.img(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteral(["\n {\n width: 140px;\n height: auto;\n margin-left: 30px;\n cursor: pointer;\n }\n"])));
487
+ var IconWrapper = styled__default.div(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteral(["\n {\n display: flex;\n width: auto;\n height: 25px;\n\n .search-icon,\n .cart-icon {\n width: 100%;\n height: 100%;\n }\n\n .cart-icon {\n margin-left: 10px;\n }\n }\n"])));
491
488
  var SideNavWrapper = styled__default.div(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteral(["\n {\n position: relative;\n overflow: hidden;\n\n .side-nav-link--bottom {\n font-size: ", ";\n }\n }\n"])), function (props) {
492
489
  return props.theme.rareStepFontSize.h6;
493
490
  });
@@ -526,16 +523,16 @@
526
523
  var Hr = styled__default.hr(_templateObject14$1 || (_templateObject14$1 = _taggedTemplateLiteral(["\n {\n width: 100%;\n color: ", ";\n margin: 0;\n }\n"])), function (props) {
527
524
  return props.theme.rareStepColors.ntrlMax;
528
525
  });
529
- var MobileSearchContainer = styled__default.div(_templateObject15$1 || (_templateObject15$1 = _taggedTemplateLiteral(["\n {\n .header {\n &__icon {\n width: 30px;\n height: 30px;\n }\n\n &__search-container {\n background-color: ", ";\n border-top: 1px solid ", ";\n }\n\n &__search-input {\n width: 100%;\n color: ", ";\n background-color: ", ";\n\n &::placeholder {\n color: ", ";\n }\n }\n }\n }\n"])), function (props) {
530
- return props.theme.rareStepColors.ntrlMin;
526
+ var MobileSearchContainer = styled__default.div(_templateObject15$1 || (_templateObject15$1 = _taggedTemplateLiteral(["\n {\n background-color: ", ";\n\n .header {\n &__icon {\n width: 20px;\n height: 20px;\n }\n\n &__search-container {\n border-top: 1px solid ", ";\n padding-left: 5%;\n padding-right: 5%;\n }\n\n &__search-input {\n width: 100%;\n color: ", ";\n background-color: ", ";\n\n &::placeholder {\n color: ", ";\n }\n }\n }\n }\n"])), function (props) {
527
+ return props.theme.rareStepColors.primary;
531
528
  }, function (props) {
532
529
  return props.theme.rareStepColors.ntrl50;
533
- }, function (props) {
534
- return props.theme.rareStepColors.ntrlMax;
535
530
  }, function (props) {
536
531
  return props.theme.rareStepColors.ntrlMin;
537
532
  }, function (props) {
538
- return props.theme.rareStepColors.ntrlMax;
533
+ return props.theme.rareStepColors.primary;
534
+ }, function (props) {
535
+ return props.theme.rareStepColors.ntrlMin;
539
536
  });
540
537
  var BackButton = styled__default.button(_templateObject16$1 || (_templateObject16$1 = _taggedTemplateLiteral(["\n {\n background-color: transparent;\n border: none;\n color: ", ";\n margin: 30px 0;\n position: relative;\n\n &:hover {\n cursor: pointer;\n background-color: transparent;\n color: ", ";\n text-decoration: underline;\n }\n }\n"])), function (props) {
541
538
  return props.theme.rareStepColors.ntrlMin;
@@ -600,8 +597,7 @@
600
597
  function SideNavLinks(_ref) {
601
598
  var rightArrowIconUrl = _ref.rightArrowIconUrl,
602
599
  links = _ref.links,
603
- setShowSideNavSubMenu = _ref.setShowSideNavSubMenu,
604
- currencyFlagIconUrl = _ref.currencyFlagIconUrl;
600
+ setShowSideNavSubMenu = _ref.setShowSideNavSubMenu;
605
601
  return /*#__PURE__*/React__default.createElement(React.Fragment, null, links.top.map(function (link, index) {
606
602
  return link !== null && link !== void 0 && link.isSubMenu ? /*#__PURE__*/React__default.createElement(SubMenuLinkContainer, {
607
603
  key: index
@@ -625,9 +621,6 @@
625
621
  className: "side-nav-link--bottom",
626
622
  onClick: link !== null && link !== void 0 && link.isButton ? link.onClick : null
627
623
  }, link.name);
628
- }), /*#__PURE__*/React__default.createElement(Currency, {
629
- className: "side-nav__currency",
630
- currencyFlagIconUrl: currencyFlagIconUrl
631
624
  }));
632
625
  }
633
626
 
@@ -651,9 +644,9 @@
651
644
  rightArrowIconUrl = _ref.rightArrowIconUrl,
652
645
  navigationSearchIconUrl = _ref.navigationSearchIconUrl,
653
646
  wordpressSiteUrl = _ref.wordpressSiteUrl,
654
- mobileCloseIconUrl = _ref.mobileCloseIconUrl,
655
647
  backIconUrl = _ref.backIconUrl,
656
- currencyFlagIconUrl = _ref.currencyFlagIconUrl;
648
+ currencyFlagIconUrl = _ref.currencyFlagIconUrl,
649
+ handleOnCartClick = _ref.handleOnCartClick;
657
650
 
658
651
  var _useState = React.useState(false),
659
652
  _useState2 = _slicedToArray(_useState, 2),
@@ -681,14 +674,20 @@
681
674
  },
682
675
  src: menuIconUrl
683
676
  }), /*#__PURE__*/React__default.createElement(Logo, {
684
- src: headerLogoImgUrl
677
+ src: headerLogoImgUrl,
678
+ onClick: function onClick() {
679
+ window.location.href = wordpressSiteUrl;
680
+ }
685
681
  }), /*#__PURE__*/React__default.createElement(IconWrapper, null, /*#__PURE__*/React__default.createElement(Icon, {
682
+ className: "search-icon",
686
683
  src: searchIconUrl,
687
684
  onClick: toggleSearch
688
685
  }), /*#__PURE__*/React__default.createElement(Icon, {
689
- src: cartIconUrl
686
+ className: "cart-icon",
687
+ src: cartIconUrl,
688
+ onClick: handleOnCartClick
690
689
  }))), showSearch && /*#__PURE__*/React__default.createElement(MobileSearchContainer, null, /*#__PURE__*/React__default.createElement(Search, {
691
- closeIconUrl: mobileCloseIconUrl,
690
+ closeIconUrl: closeIconUrl,
692
691
  navigationSearchIconUrl: navigationSearchIconUrl,
693
692
  wordpressSiteUrl: wordpressSiteUrl,
694
693
  toggleSearch: toggleSearch
@@ -736,7 +735,8 @@
736
735
  mobileHeaderLinks = _ref.mobileHeaderLinks,
737
736
  mobileCloseIconUrl = _ref.mobileCloseIconUrl,
738
737
  handleOnAccountClick = _ref.handleOnAccountClick,
739
- backIconUrl = _ref.backIconUrl;
738
+ backIconUrl = _ref.backIconUrl,
739
+ handleOnCartClick = _ref.handleOnCartClick;
740
740
  return /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
741
741
  className: desktopHeaderWrapperClass
742
742
  }, /*#__PURE__*/React__default.createElement(RareStepDesktopHeader$1, {
@@ -752,7 +752,8 @@
752
752
  navigationSearchIconUrl: navigationSearchIconUrl,
753
753
  wordpressSiteUrl: wordpressSiteUrl,
754
754
  desktopHeaderLinks: desktopHeaderLinks,
755
- handleOnAccountClick: handleOnAccountClick
755
+ handleOnAccountClick: handleOnAccountClick,
756
+ handleOnCartClick: handleOnCartClick
756
757
  })), /*#__PURE__*/React__default.createElement("div", {
757
758
  className: mobileHeaderWrapperClass
758
759
  }, /*#__PURE__*/React__default.createElement(RareStepMobileHeader, {
@@ -763,11 +764,12 @@
763
764
  closeIconUrl: closeIconUrl,
764
765
  rightArrowIconUrl: rightArrowIconUrl,
765
766
  mobileHeaderLinks: mobileHeaderLinks,
766
- navigationSearchIconUrl: searchIconUrl,
767
+ navigationSearchIconUrl: navigationSearchIconUrl,
767
768
  mobileCloseIconUrl: mobileCloseIconUrl,
768
769
  wordpressSiteUrl: wordpressSiteUrl,
769
770
  backIconUrl: backIconUrl,
770
- currencyFlagIconUrl: currencyFlagIconUrl
771
+ currencyFlagIconUrl: currencyFlagIconUrl,
772
+ handleOnCartClick: handleOnCartClick
771
773
  })));
772
774
  };
773
775