@arcteryx/components-cart - npm Package Compare versions

Comparing version 1.1.20 to 1.1.21

CHANGELOG.md

@@ -6,2 +6,10 @@ # Change Log
 
+## [1.1.21](http://bitbucket.org/arcteryx/arcteryx-js-helpers/compare/@arcteryx/components-cart@1.1.20...@arcteryx/components-cart@1.1.21) (2020-07-28)
+
+**Note:** Version bump only for package @arcteryx/components-cart
+
+
+
+
+
 ## [1.1.20](http://bitbucket.org/arcteryx/arcteryx-js-helpers/compare/@arcteryx/components-cart@1.1.19...@arcteryx/components-cart@1.1.20) (2020-07-27)
@@ -8,0 +16,0 @@

dist/cjs/index.js

@@ -594,3 +594,3 @@ 'use strict';
 function _templateObject$4() {
-  var data = _taggedTemplateLiteral(["\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  margin-bottom: 0.5em;\n  color: ", ";\n  line-height: ", ";\n  text-transform: uppercase;\n"]);
+  var data = _taggedTemplateLiteral(["\n  margin-bottom: 1.5rem;\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 700;\n  line-height: ", ";\n  color: ", ";\n  text-transform: uppercase;\n"]);
 
@@ -606,22 +606,20 @@ _templateObject$4 = function _templateObject() {
   if (large) {
-    return "29px";
+    return "2rem";
   }
 
   if (loud) {
-    return "36px";
+    return "2.5rem";
   }
 
-  return "20px";
+  return "1.5rem";
 };
 
 var H1 = styled__default.h1(_templateObject$4(), function (props) {
-  return props.large ? "\"Avenir LT W01 95 Black\", arial, sans-serif" : "\"Avenir LT W01 85 Heavy\", arial, sans-serif";
+  return ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : '"urw-din-condensed", arial, sans-serif';
 }, function (props) {
   return fontSize(props.large, props.loud);
 }, function (props) {
-  return props.large ? "700" : "normal";
+  return fontSize(props.large, props.loud);
 }, function (props) {
-  return props.color;
-}, function (props) {
-  return props.large ? "1.0em" : "1.1em";
+  return props.textColor;
 });
@@ -631,7 +629,8 @@ H1.defaultProps = {
   loud: false,
-  color: "#000"
+  textColor: "#000",
+  market: "outdoor"
 };
 
 function _templateObject$5() {
-  var data = _taggedTemplateLiteral(["\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  color: ", ";\n  text-transform: uppercase;\n"]);
+  var data = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 700;\n  line-height: 1.5rem;\n  color: ", ";\n  text-transform: uppercase;\n"]);
 
@@ -645,19 +644,18 @@ _templateObject$5 = function _templateObject() {
 var H2 = styled__default.h2(_templateObject$5(), function (props) {
-  return props.large ? "\"Avenir LT W01 95 Black\", arial, sans-serif" : "\"Avenir LT W01 85 Heavy\", arial, sans-serif";
+  return props.large ? "1.5rem" : "1rem";
 }, function (props) {
-  return props.large ? "22px" : "18px";
+  return ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : '"urw-din-condensed", arial, sans-serif';
 }, function (props) {
-  return props.large ? "700" : "normal";
+  return props.large ? "1.5rem" : "1.25rem";
 }, function (props) {
-  return props.large ? "1em" : "1.1em";
-}, function (props) {
-  return props.color;
+  return props.textColor;
 });
 H2.defaultProps = {
   large: false,
-  color: "#000"
+  textColor: "#000",
+  market: "outdoor"
 };
 
 function _templateObject$6() {
-  var data = _taggedTemplateLiteral(["\n  font-family: ", ";\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  text-transform: uppercase;\n"]);
+  var data = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 700;\n  line-height: 1.5rem;\n  color: ", ";\n  text-transform: uppercase;\n"]);
 
@@ -671,19 +669,18 @@ _templateObject$6 = function _templateObject() {
 var H3 = styled__default.h3(_templateObject$6(), function (props) {
-  return props.large ? "\"Avenir LT W01 95 Black\", arial, sans-serif" : "\"Avenir LT W01 85 Heavy\", arial, sans-serif";
+  return props.large ? "1rem" : "0.5rem";
 }, function (props) {
-  return props.color;
+  return ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : '"urw-din-condensed", arial, sans-serif';
 }, function (props) {
-  return props.large ? "18px" : "16px";
+  return props.large ? "1.25rem" : "1.1rem";
 }, function (props) {
-  return props.large ? "700" : "normal";
-}, function (props) {
-  return props.large ? "1em" : "1.1em";
+  return props.textColor;
 });
 H3.defaultProps = {
   large: false,
-  color: "#000"
+  textColor: "#000",
+  market: "outdoor"
 };
 
 function _templateObject$7() {
-  var data = _taggedTemplateLiteral(["\n  font-family: ", ";\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  text-transform: uppercase;\n"]);
+  var data = _taggedTemplateLiteral(["\n  margin-bottom: 0.5rem;\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 700;\n  line-height: 1.5rem;\n  color: ", ";\n  text-transform: uppercase;\n"]);
 
@@ -697,19 +694,16 @@ _templateObject$7 = function _templateObject() {
 var H4 = styled__default.h4(_templateObject$7(), function (props) {
-  return props.large ? "\"Avenir LT W01 95 Black\", arial, sans-serif" : "\"Avenir LT W01 85 Heavy\", arial, sans-serif";
+  return ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : '"urw-din-condensed", arial, sans-serif';
 }, function (props) {
-  return props.color;
+  return props.large ? "1.1rem" : "1rem";
 }, function (props) {
-  return props.large ? "16px" : "15px";
-}, function (props) {
-  return props.large ? "700" : "normal";
-}, function (props) {
-  return props.large ? "1em" : "1.1em";
+  return props.textColor;
 });
 H4.defaultProps = {
   large: false,
-  color: "#000"
+  textColor: "#000",
+  market: "outdoor"
 };
 
 function _templateObject$8() {
-  var data = _taggedTemplateLiteral(["\n  font-family: \"Avenir LT W01 55 Roman\", arial, sans-serif;\n  font-size: 15px;\n  line-height: 1.5em;\n  margin: 0 0 1em 0;\n  max-width: 650px;\n  color: ", ";\n"]);
+  var data = _taggedTemplateLiteral(["\n  margin: 0 0 1.5rem 0;\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  font-style: ", ";\n  line-height: ", ";\n  max-width: 78ch;\n  color: ", ";\n\n  strong,\n  b {\n    font-weight: 500;\n  }\n\n  em,\n  i {\n    font-weight: 400;\n    font-style: italic;\n  }\n\n  &:last-of-type {\n    margin-bottom: 0;\n  }\n"]);
 
@@ -722,12 +716,40 @@ _templateObject$8 = function _templateObject() {
 }
+
+var fontSize$1 = function fontSize(size) {
+  if (size === "s") {
+    return "0.75rem";
+  }
+
+  if (size === "m") {
+    return "1.1rem";
+  }
+
+  if (size === "l") {
+    return "1.25rem";
+  }
+
+  return "1rem";
+};
+
 var P = styled__default.p(_templateObject$8(), function (props) {
-  return props.color;
+  return ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : '"urw-din", arial, sans-serif';
+}, function (props) {
+  return fontSize$1(props.size);
+}, function (props) {
+  return props.bold ? "500" : "400";
+}, function (props) {
+  return props.italic ? "italic" : "normal";
+}, function (props) {
+  return props.size === "s" ? "1rem" : "1.5rem";
+}, function (props) {
+  return props.textColor;
 });
 P.defaultProps = {
   large: false,
-  color: "#000"
+  textColor: "#000",
+  market: "outdoor"
 };
 
 function _templateObject$9() {
-  var data = _taggedTemplateLiteral(["\n  font-family: \"AvenirLTW01-55Oblique\", arial, sans-serif;\n  color: ", ";\n  font-size: 16px;\n  font-style: italic;\n  line-height: 1.4em;\n  padding: 15px;\n  margin: 0;\n  max-width: 650px;\n  align-self: center;\n  background: url(\"https://images.arcteryx.com/misc/quotation-marks-left.png\") no-repeat;\n  background-size: 46px;\n  margin-bottom: 1em;\n"]);
+  var data = _taggedTemplateLiteral(["\n  position: relative;\n  font-family: ", ";\n  color: ", ";\n  font-size: 1.1rem;\n  font-weight: 400;\n  line-height: 1.5rem;\n  padding: 1rem 1rem 1rem 5rem;\n  margin: 0 0 1rem 0;\n  max-width: calc(31rem + 8.4rem);\n  align-self: center;\n\n  &:before {\n    content: \"\u201C\";\n    position: absolute;\n    top: 0;\n    left: 0;\n    font-family: \"urw-din\", arial, sans-serif;\n    font-size: 8.4rem;\n    font-weight: 700;\n    line-height: 8.4rem;\n  }\n"]);
 
@@ -741,11 +763,94 @@ _templateObject$9 = function _templateObject() {
 var Blockquote = styled__default.blockquote(_templateObject$9(), function (props) {
-  return props.color;
+  return ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : '"urw-din", arial, sans-serif';
+}, function (props) {
+  return props.textColor;
 });
 Blockquote.defaultProps = {
   large: false,
-  color: "#000"
+  textColor: "#000",
+  market: "outdoor"
 };
 
+function _templateObject9() {
+  var data = _taggedTemplateLiteral(["\n  width: var(--space-red);\n  height: var(--space-red);\n  background-color: #eb9595;\n"]);
+
+  _templateObject9 = function _templateObject9() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject8() {
+  var data = _taggedTemplateLiteral(["\n  width: var(--space-pink);\n  height: var(--space-pink);\n  background-color: #dbabe9;\n"]);
+
+  _templateObject8 = function _templateObject8() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject7() {
+  var data = _taggedTemplateLiteral(["\n  width: var(--space-purple);\n  height: var(--space-purple);\n  background-color: #a0afeb;\n"]);
+
+  _templateObject7 = function _templateObject7() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject6() {
+  var data = _taggedTemplateLiteral(["\n  width: var(--space-green);\n  height: var(--space-green);\n  background-color: #c8eba0;\n"]);
+
+  _templateObject6 = function _templateObject6() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject5$2() {
+  var data = _taggedTemplateLiteral(["\n  width: var(--space-blue);\n  height: var(--space-blue);\n  background-color: #a0e6eb;\n"]);
+
+  _templateObject5$2 = function _templateObject5() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject4$2() {
+  var data = _taggedTemplateLiteral(["\n  width: var(--space-orange);\n  height: var(--space-orange);\n  background-color: #ebcc83;\n"]);
+
+  _templateObject4$2 = function _templateObject4() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject3$3() {
+  var data = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  margin: 0 1rem;\n  font-size: 1rem;\n\n  &:after {\n    content: attr(title);\n    display: block;\n    position: absolute;\n    bottom: -3rem;\n    left: 50%;\n    transform: translateX(-50%);\n  }\n"]);
+
+  _templateObject3$3 = function _templateObject3() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject2$3() {
+  var data = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: flex-end;\n"]);
+
+  _templateObject2$3 = function _templateObject2() {
+    return data;
+  };
+
+  return data;
+}
+
 function _templateObject$a() {
-  var data = _taggedTemplateLiteral(["\n  display: flex;\n  text-transform: uppercase;\n  justify-content: space-between;\n  width: 100%;\n  padding: 10px 0px;\n  margin-bottom: 2em;\n  border-bottom: 1px solid #ccc;\n  ", "\n  border: none;\n  ", "\n  h1, h2 {\n    width: 35%;\n    ", "\n    width: 100%;\n    ", "\n  }\n  h4 {\n    width: 21%;\n    text-align: center;\n    ", "\n    display: none;\n    ", "\n  }\n"]);
+  var data = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100vh;\n"]);
 
@@ -758,3 +863,22 @@ _templateObject$a = function _templateObject() {
 }
-var Header = styled__default.div(_templateObject$a(), function (props) {
+var CubeWrap = styled__default.div(_templateObject$a());
+var Cubes = styled__default.div(_templateObject2$3());
+var Cube = styled__default.div(_templateObject3$3());
+var CubeOrange = styled__default(Cube)(_templateObject4$2());
+var CubeBlue = styled__default(Cube)(_templateObject5$2());
+var CubeGreen = styled__default(Cube)(_templateObject6());
+var CubePurple = styled__default(Cube)(_templateObject7());
+var CubePink = styled__default(Cube)(_templateObject8());
+var CubeRed = styled__default(Cube)(_templateObject9());
+
+function _templateObject$b() {
+  var data = _taggedTemplateLiteral(["\n  display: flex;\n  text-transform: uppercase;\n  justify-content: space-between;\n  width: 100%;\n  padding: 10px 0px;\n  margin-bottom: 2em;\n  border-bottom: 1px solid #ccc;\n  ", "\n  border: none;\n  ", "\n  h1, h2 {\n    width: 35%;\n    ", "\n    width: 100%;\n    ", "\n  }\n  h4 {\n    width: 21%;\n    text-align: center;\n    ", "\n    display: none;\n    ", "\n  }\n"]);
+
+  _templateObject$b = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+var Header = styled__default.div(_templateObject$b(), function (props) {
   return !props.isNarrow && "@media screen and (max-width: 700px) {";
@@ -804,6 +928,6 @@ }, function (props) {
 
-function _templateObject5$2() {
+function _templateObject5$3() {
   var data = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  &:last-of-type {\n    margin-bottom: 2em;\n  }\n"]);
 
-  _templateObject5$2 = function _templateObject5() {
+  _templateObject5$3 = function _templateObject5() {
     return data;
@@ -815,6 +939,6 @@ };
 
-function _templateObject4$2() {
+function _templateObject4$3() {
   var data = _taggedTemplateLiteral(["\n  font-size: 15px;\n  color: #990000;\n"]);
 
-  _templateObject4$2 = function _templateObject4() {
+  _templateObject4$3 = function _templateObject4() {
     return data;
@@ -826,6 +950,6 @@ };
 
-function _templateObject3$3() {
+function _templateObject3$4() {
   var data = _taggedTemplateLiteral(["\n  font-size: 15px;\n"]);
 
-  _templateObject3$3 = function _templateObject3() {
+  _templateObject3$4 = function _templateObject3() {
     return data;
@@ -837,6 +961,6 @@ };
 
-function _templateObject2$3() {
+function _templateObject2$4() {
   var data = _taggedTemplateLiteral(["\n  font-size: 15px;\n"]);
 
-  _templateObject2$3 = function _templateObject2() {
+  _templateObject2$4 = function _templateObject2() {
     return data;
@@ -848,6 +972,6 @@ };
 
-function _templateObject$b() {
+function _templateObject$c() {
   var data = _taggedTemplateLiteral(["\n  max-width: 340px;\n  width: 100%;\n  ", "\n  width: 100%;\n  max-width: 100%;\n  text-align: center;\n  max-width: 100%;\n  ", "\n"]);
 
-  _templateObject$b = function _templateObject() {
+  _templateObject$c = function _templateObject() {
     return data;
@@ -858,3 +982,3 @@ };
 }
-var Totals = styled__default.div(_templateObject$b(), function (props) {
+var Totals = styled__default.div(_templateObject$c(), function (props) {
   return !props.isNarrow && "@media screen and (max-width: 700px) {";
@@ -864,6 +988,6 @@ }, function (props) {
 });
-var P$1 = styled__default.p(_templateObject2$3());
-var StyledPrice$1 = styled__default(Price)(_templateObject3$3());
-var Red = styled__default.span(_templateObject4$2());
-var CartLine = styled__default.div(_templateObject5$2());
+var P$1 = styled__default.p(_templateObject2$4());
+var StyledPrice$1 = styled__default(Price)(_templateObject3$4());
+var Red = styled__default.span(_templateObject4$3());
+var CartLine = styled__default.div(_templateObject5$3());
 
@@ -893,6 +1017,6 @@ var CartDetails = function CartDetails(_ref) {
 
-function _templateObject$c() {
+function _templateObject$d() {
   var data = _taggedTemplateLiteral(["\n  width: 100%;\n  padding: 0px;\n  border-top: 1px solid #ccc;\n  padding-top: 2em;\n  display: flex;\n  justify-content: flex-end;\n  ", "\n  border-top: 2px solid #000;\n  padding-top: 1em;\n  margin-top: ", ";\n  ", "\n"]);
 
-  _templateObject$c = function _templateObject() {
+  _templateObject$d = function _templateObject() {
     return data;
@@ -903,3 +1027,3 @@ };
 }
-var Footer = styled__default.div(_templateObject$c(), function (props) {
+var Footer = styled__default.div(_templateObject$d(), function (props) {
   return !props.isNarrow && "@media screen and (max-width: 700px) {";
@@ -927,6 +1051,6 @@ }, function (props) {
 
-function _templateObject4$3() {
+function _templateObject4$4() {
   var data = _taggedTemplateLiteral(["\n      padding-bottom: 150px;\n      overflow-y: auto;\n      overflow-x: hidden;\n    "]);
 
-  _templateObject4$3 = function _templateObject4() {
+  _templateObject4$4 = function _templateObject4() {
     return data;
@@ -938,6 +1062,6 @@ };
 
-function _templateObject3$4() {
+function _templateObject3$5() {
   var data = _taggedTemplateLiteral(["\n  ", ";\n"]);
 
-  _templateObject3$4 = function _templateObject3() {
+  _templateObject3$5 = function _templateObject3() {
     return data;
@@ -949,6 +1073,6 @@ };
 
-function _templateObject2$4() {
+function _templateObject2$5() {
   var data = _taggedTemplateLiteral(["\n      display: flex;\n      flex-direction: column;\n    "]);
 
-  _templateObject2$4 = function _templateObject2() {
+  _templateObject2$5 = function _templateObject2() {
     return data;
@@ -960,6 +1084,6 @@ };
 
-function _templateObject$d() {
+function _templateObject$e() {
   var data = _taggedTemplateLiteral(["\n  position: relative;\n  height: ", ";\n  overflow: hidden;\n  ", ";\n"]);
 
-  _templateObject$d = function _templateObject() {
+  _templateObject$e = function _templateObject() {
     return data;
@@ -970,9 +1094,9 @@ };
 }
-var Wrap$3 = styled__default.div(_templateObject$d(), function (props) {
+var Wrap$3 = styled__default.div(_templateObject$e(), function (props) {
   return props.isFlyIn ? "100%" : "inherit";
 }, function (props) {
-  return props.isNarrow && styled.css(_templateObject2$4());
+  return props.isNarrow && styled.css(_templateObject2$5());
 });
-var ItemWrap$1 = styled__default.div(_templateObject3$4(), function (props) {
-  return props.isFlyIn && styled.css(_templateObject4$3());
+var ItemWrap$1 = styled__default.div(_templateObject3$5(), function (props) {
+  return props.isFlyIn && styled.css(_templateObject4$4());
 });
@@ -979,0 +1103,0 @@

dist/es/index.js

@@ -586,3 +586,3 @@ import React, { useContext } from 'react';
 function _templateObject$4() {
-  var data = _taggedTemplateLiteral(["\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  margin-bottom: 0.5em;\n  color: ", ";\n  line-height: ", ";\n  text-transform: uppercase;\n"]);
+  var data = _taggedTemplateLiteral(["\n  margin-bottom: 1.5rem;\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 700;\n  line-height: ", ";\n  color: ", ";\n  text-transform: uppercase;\n"]);
 
@@ -598,22 +598,20 @@ _templateObject$4 = function _templateObject() {
   if (large) {
-    return "29px";
+    return "2rem";
   }
 
   if (loud) {
-    return "36px";
+    return "2.5rem";
   }
 
-  return "20px";
+  return "1.5rem";
 };
 
 var H1 = styled.h1(_templateObject$4(), function (props) {
-  return props.large ? "\"Avenir LT W01 95 Black\", arial, sans-serif" : "\"Avenir LT W01 85 Heavy\", arial, sans-serif";
+  return ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : '"urw-din-condensed", arial, sans-serif';
 }, function (props) {
   return fontSize(props.large, props.loud);
 }, function (props) {
-  return props.large ? "700" : "normal";
+  return fontSize(props.large, props.loud);
 }, function (props) {
-  return props.color;
-}, function (props) {
-  return props.large ? "1.0em" : "1.1em";
+  return props.textColor;
 });
@@ -623,7 +621,8 @@ H1.defaultProps = {
   loud: false,
-  color: "#000"
+  textColor: "#000",
+  market: "outdoor"
 };
 
 function _templateObject$5() {
-  var data = _taggedTemplateLiteral(["\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  color: ", ";\n  text-transform: uppercase;\n"]);
+  var data = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 700;\n  line-height: 1.5rem;\n  color: ", ";\n  text-transform: uppercase;\n"]);
 
@@ -637,19 +636,18 @@ _templateObject$5 = function _templateObject() {
 var H2 = styled.h2(_templateObject$5(), function (props) {
-  return props.large ? "\"Avenir LT W01 95 Black\", arial, sans-serif" : "\"Avenir LT W01 85 Heavy\", arial, sans-serif";
+  return props.large ? "1.5rem" : "1rem";
 }, function (props) {
-  return props.large ? "22px" : "18px";
+  return ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : '"urw-din-condensed", arial, sans-serif';
 }, function (props) {
-  return props.large ? "700" : "normal";
+  return props.large ? "1.5rem" : "1.25rem";
 }, function (props) {
-  return props.large ? "1em" : "1.1em";
-}, function (props) {
-  return props.color;
+  return props.textColor;
 });
 H2.defaultProps = {
   large: false,
-  color: "#000"
+  textColor: "#000",
+  market: "outdoor"
 };
 
 function _templateObject$6() {
-  var data = _taggedTemplateLiteral(["\n  font-family: ", ";\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  text-transform: uppercase;\n"]);
+  var data = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 700;\n  line-height: 1.5rem;\n  color: ", ";\n  text-transform: uppercase;\n"]);
 
@@ -663,19 +661,18 @@ _templateObject$6 = function _templateObject() {
 var H3 = styled.h3(_templateObject$6(), function (props) {
-  return props.large ? "\"Avenir LT W01 95 Black\", arial, sans-serif" : "\"Avenir LT W01 85 Heavy\", arial, sans-serif";
+  return props.large ? "1rem" : "0.5rem";
 }, function (props) {
-  return props.color;
+  return ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : '"urw-din-condensed", arial, sans-serif';
 }, function (props) {
-  return props.large ? "18px" : "16px";
+  return props.large ? "1.25rem" : "1.1rem";
 }, function (props) {
-  return props.large ? "700" : "normal";
-}, function (props) {
-  return props.large ? "1em" : "1.1em";
+  return props.textColor;
 });
 H3.defaultProps = {
   large: false,
-  color: "#000"
+  textColor: "#000",
+  market: "outdoor"
 };
 
 function _templateObject$7() {
-  var data = _taggedTemplateLiteral(["\n  font-family: ", ";\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  text-transform: uppercase;\n"]);
+  var data = _taggedTemplateLiteral(["\n  margin-bottom: 0.5rem;\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 700;\n  line-height: 1.5rem;\n  color: ", ";\n  text-transform: uppercase;\n"]);
 
@@ -689,19 +686,16 @@ _templateObject$7 = function _templateObject() {
 var H4 = styled.h4(_templateObject$7(), function (props) {
-  return props.large ? "\"Avenir LT W01 95 Black\", arial, sans-serif" : "\"Avenir LT W01 85 Heavy\", arial, sans-serif";
+  return ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : '"urw-din-condensed", arial, sans-serif';
 }, function (props) {
-  return props.color;
+  return props.large ? "1.1rem" : "1rem";
 }, function (props) {
-  return props.large ? "16px" : "15px";
-}, function (props) {
-  return props.large ? "700" : "normal";
-}, function (props) {
-  return props.large ? "1em" : "1.1em";
+  return props.textColor;
 });
 H4.defaultProps = {
   large: false,
-  color: "#000"
+  textColor: "#000",
+  market: "outdoor"
 };
 
 function _templateObject$8() {
-  var data = _taggedTemplateLiteral(["\n  font-family: \"Avenir LT W01 55 Roman\", arial, sans-serif;\n  font-size: 15px;\n  line-height: 1.5em;\n  margin: 0 0 1em 0;\n  max-width: 650px;\n  color: ", ";\n"]);
+  var data = _taggedTemplateLiteral(["\n  margin: 0 0 1.5rem 0;\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  font-style: ", ";\n  line-height: ", ";\n  max-width: 78ch;\n  color: ", ";\n\n  strong,\n  b {\n    font-weight: 500;\n  }\n\n  em,\n  i {\n    font-weight: 400;\n    font-style: italic;\n  }\n\n  &:last-of-type {\n    margin-bottom: 0;\n  }\n"]);
 
@@ -714,12 +708,40 @@ _templateObject$8 = function _templateObject() {
 }
+
+var fontSize$1 = function fontSize(size) {
+  if (size === "s") {
+    return "0.75rem";
+  }
+
+  if (size === "m") {
+    return "1.1rem";
+  }
+
+  if (size === "l") {
+    return "1.25rem";
+  }
+
+  return "1rem";
+};
+
 var P = styled.p(_templateObject$8(), function (props) {
-  return props.color;
+  return ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : '"urw-din", arial, sans-serif';
+}, function (props) {
+  return fontSize$1(props.size);
+}, function (props) {
+  return props.bold ? "500" : "400";
+}, function (props) {
+  return props.italic ? "italic" : "normal";
+}, function (props) {
+  return props.size === "s" ? "1rem" : "1.5rem";
+}, function (props) {
+  return props.textColor;
 });
 P.defaultProps = {
   large: false,
-  color: "#000"
+  textColor: "#000",
+  market: "outdoor"
 };
 
 function _templateObject$9() {
-  var data = _taggedTemplateLiteral(["\n  font-family: \"AvenirLTW01-55Oblique\", arial, sans-serif;\n  color: ", ";\n  font-size: 16px;\n  font-style: italic;\n  line-height: 1.4em;\n  padding: 15px;\n  margin: 0;\n  max-width: 650px;\n  align-self: center;\n  background: url(\"https://images.arcteryx.com/misc/quotation-marks-left.png\") no-repeat;\n  background-size: 46px;\n  margin-bottom: 1em;\n"]);
+  var data = _taggedTemplateLiteral(["\n  position: relative;\n  font-family: ", ";\n  color: ", ";\n  font-size: 1.1rem;\n  font-weight: 400;\n  line-height: 1.5rem;\n  padding: 1rem 1rem 1rem 5rem;\n  margin: 0 0 1rem 0;\n  max-width: calc(31rem + 8.4rem);\n  align-self: center;\n\n  &:before {\n    content: \"\u201C\";\n    position: absolute;\n    top: 0;\n    left: 0;\n    font-family: \"urw-din\", arial, sans-serif;\n    font-size: 8.4rem;\n    font-weight: 700;\n    line-height: 8.4rem;\n  }\n"]);
 
@@ -733,11 +755,94 @@ _templateObject$9 = function _templateObject() {
 var Blockquote = styled.blockquote(_templateObject$9(), function (props) {
-  return props.color;
+  return ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : '"urw-din", arial, sans-serif';
+}, function (props) {
+  return props.textColor;
 });
 Blockquote.defaultProps = {
   large: false,
-  color: "#000"
+  textColor: "#000",
+  market: "outdoor"
 };
 
+function _templateObject9() {
+  var data = _taggedTemplateLiteral(["\n  width: var(--space-red);\n  height: var(--space-red);\n  background-color: #eb9595;\n"]);
+
+  _templateObject9 = function _templateObject9() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject8() {
+  var data = _taggedTemplateLiteral(["\n  width: var(--space-pink);\n  height: var(--space-pink);\n  background-color: #dbabe9;\n"]);
+
+  _templateObject8 = function _templateObject8() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject7() {
+  var data = _taggedTemplateLiteral(["\n  width: var(--space-purple);\n  height: var(--space-purple);\n  background-color: #a0afeb;\n"]);
+
+  _templateObject7 = function _templateObject7() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject6() {
+  var data = _taggedTemplateLiteral(["\n  width: var(--space-green);\n  height: var(--space-green);\n  background-color: #c8eba0;\n"]);
+
+  _templateObject6 = function _templateObject6() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject5$2() {
+  var data = _taggedTemplateLiteral(["\n  width: var(--space-blue);\n  height: var(--space-blue);\n  background-color: #a0e6eb;\n"]);
+
+  _templateObject5$2 = function _templateObject5() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject4$2() {
+  var data = _taggedTemplateLiteral(["\n  width: var(--space-orange);\n  height: var(--space-orange);\n  background-color: #ebcc83;\n"]);
+
+  _templateObject4$2 = function _templateObject4() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject3$3() {
+  var data = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  margin: 0 1rem;\n  font-size: 1rem;\n\n  &:after {\n    content: attr(title);\n    display: block;\n    position: absolute;\n    bottom: -3rem;\n    left: 50%;\n    transform: translateX(-50%);\n  }\n"]);
+
+  _templateObject3$3 = function _templateObject3() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject2$3() {
+  var data = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: flex-end;\n"]);
+
+  _templateObject2$3 = function _templateObject2() {
+    return data;
+  };
+
+  return data;
+}
+
 function _templateObject$a() {
-  var data = _taggedTemplateLiteral(["\n  display: flex;\n  text-transform: uppercase;\n  justify-content: space-between;\n  width: 100%;\n  padding: 10px 0px;\n  margin-bottom: 2em;\n  border-bottom: 1px solid #ccc;\n  ", "\n  border: none;\n  ", "\n  h1, h2 {\n    width: 35%;\n    ", "\n    width: 100%;\n    ", "\n  }\n  h4 {\n    width: 21%;\n    text-align: center;\n    ", "\n    display: none;\n    ", "\n  }\n"]);
+  var data = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100vh;\n"]);
 
@@ -750,3 +855,22 @@ _templateObject$a = function _templateObject() {
 }
-var Header = styled.div(_templateObject$a(), function (props) {
+var CubeWrap = styled.div(_templateObject$a());
+var Cubes = styled.div(_templateObject2$3());
+var Cube = styled.div(_templateObject3$3());
+var CubeOrange = styled(Cube)(_templateObject4$2());
+var CubeBlue = styled(Cube)(_templateObject5$2());
+var CubeGreen = styled(Cube)(_templateObject6());
+var CubePurple = styled(Cube)(_templateObject7());
+var CubePink = styled(Cube)(_templateObject8());
+var CubeRed = styled(Cube)(_templateObject9());
+
+function _templateObject$b() {
+  var data = _taggedTemplateLiteral(["\n  display: flex;\n  text-transform: uppercase;\n  justify-content: space-between;\n  width: 100%;\n  padding: 10px 0px;\n  margin-bottom: 2em;\n  border-bottom: 1px solid #ccc;\n  ", "\n  border: none;\n  ", "\n  h1, h2 {\n    width: 35%;\n    ", "\n    width: 100%;\n    ", "\n  }\n  h4 {\n    width: 21%;\n    text-align: center;\n    ", "\n    display: none;\n    ", "\n  }\n"]);
+
+  _templateObject$b = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+var Header = styled.div(_templateObject$b(), function (props) {
   return !props.isNarrow && "@media screen and (max-width: 700px) {";
@@ -796,6 +920,6 @@ }, function (props) {
 
-function _templateObject5$2() {
+function _templateObject5$3() {
   var data = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  &:last-of-type {\n    margin-bottom: 2em;\n  }\n"]);
 
-  _templateObject5$2 = function _templateObject5() {
+  _templateObject5$3 = function _templateObject5() {
     return data;
@@ -807,6 +931,6 @@ };
 
-function _templateObject4$2() {
+function _templateObject4$3() {
   var data = _taggedTemplateLiteral(["\n  font-size: 15px;\n  color: #990000;\n"]);
 
-  _templateObject4$2 = function _templateObject4() {
+  _templateObject4$3 = function _templateObject4() {
     return data;
@@ -818,6 +942,6 @@ };
 
-function _templateObject3$3() {
+function _templateObject3$4() {
   var data = _taggedTemplateLiteral(["\n  font-size: 15px;\n"]);
 
-  _templateObject3$3 = function _templateObject3() {
+  _templateObject3$4 = function _templateObject3() {
     return data;
@@ -829,6 +953,6 @@ };
 
-function _templateObject2$3() {
+function _templateObject2$4() {
   var data = _taggedTemplateLiteral(["\n  font-size: 15px;\n"]);
 
-  _templateObject2$3 = function _templateObject2() {
+  _templateObject2$4 = function _templateObject2() {
     return data;
@@ -840,6 +964,6 @@ };
 
-function _templateObject$b() {
+function _templateObject$c() {
   var data = _taggedTemplateLiteral(["\n  max-width: 340px;\n  width: 100%;\n  ", "\n  width: 100%;\n  max-width: 100%;\n  text-align: center;\n  max-width: 100%;\n  ", "\n"]);
 
-  _templateObject$b = function _templateObject() {
+  _templateObject$c = function _templateObject() {
     return data;
@@ -850,3 +974,3 @@ };
 }
-var Totals = styled.div(_templateObject$b(), function (props) {
+var Totals = styled.div(_templateObject$c(), function (props) {
   return !props.isNarrow && "@media screen and (max-width: 700px) {";
@@ -856,6 +980,6 @@ }, function (props) {
 });
-var P$1 = styled.p(_templateObject2$3());
-var StyledPrice$1 = styled(Price)(_templateObject3$3());
-var Red = styled.span(_templateObject4$2());
-var CartLine = styled.div(_templateObject5$2());
+var P$1 = styled.p(_templateObject2$4());
+var StyledPrice$1 = styled(Price)(_templateObject3$4());
+var Red = styled.span(_templateObject4$3());
+var CartLine = styled.div(_templateObject5$3());
 
@@ -885,6 +1009,6 @@ var CartDetails = function CartDetails(_ref) {
 
-function _templateObject$c() {
+function _templateObject$d() {
   var data = _taggedTemplateLiteral(["\n  width: 100%;\n  padding: 0px;\n  border-top: 1px solid #ccc;\n  padding-top: 2em;\n  display: flex;\n  justify-content: flex-end;\n  ", "\n  border-top: 2px solid #000;\n  padding-top: 1em;\n  margin-top: ", ";\n  ", "\n"]);
 
-  _templateObject$c = function _templateObject() {
+  _templateObject$d = function _templateObject() {
     return data;
@@ -895,3 +1019,3 @@ };
 }
-var Footer = styled.div(_templateObject$c(), function (props) {
+var Footer = styled.div(_templateObject$d(), function (props) {
   return !props.isNarrow && "@media screen and (max-width: 700px) {";
@@ -919,6 +1043,6 @@ }, function (props) {
 
-function _templateObject4$3() {
+function _templateObject4$4() {
   var data = _taggedTemplateLiteral(["\n      padding-bottom: 150px;\n      overflow-y: auto;\n      overflow-x: hidden;\n    "]);
 
-  _templateObject4$3 = function _templateObject4() {
+  _templateObject4$4 = function _templateObject4() {
     return data;
@@ -930,6 +1054,6 @@ };
 
-function _templateObject3$4() {
+function _templateObject3$5() {
   var data = _taggedTemplateLiteral(["\n  ", ";\n"]);
 
-  _templateObject3$4 = function _templateObject3() {
+  _templateObject3$5 = function _templateObject3() {
     return data;
@@ -941,6 +1065,6 @@ };
 
-function _templateObject2$4() {
+function _templateObject2$5() {
   var data = _taggedTemplateLiteral(["\n      display: flex;\n      flex-direction: column;\n    "]);
 
-  _templateObject2$4 = function _templateObject2() {
+  _templateObject2$5 = function _templateObject2() {
     return data;
@@ -952,6 +1076,6 @@ };
 
-function _templateObject$d() {
+function _templateObject$e() {
   var data = _taggedTemplateLiteral(["\n  position: relative;\n  height: ", ";\n  overflow: hidden;\n  ", ";\n"]);
 
-  _templateObject$d = function _templateObject() {
+  _templateObject$e = function _templateObject() {
     return data;
@@ -962,9 +1086,9 @@ };
 }
-var Wrap$3 = styled.div(_templateObject$d(), function (props) {
+var Wrap$3 = styled.div(_templateObject$e(), function (props) {
   return props.isFlyIn ? "100%" : "inherit";
 }, function (props) {
-  return props.isNarrow && css(_templateObject2$4());
+  return props.isNarrow && css(_templateObject2$5());
 });
-var ItemWrap$1 = styled.div(_templateObject3$4(), function (props) {
-  return props.isFlyIn && css(_templateObject4$3());
+var ItemWrap$1 = styled.div(_templateObject3$5(), function (props) {
+  return props.isFlyIn && css(_templateObject4$4());
 });
@@ -971,0 +1095,0 @@

dist/umd/index.js

@@ -595,3 +595,3 @@ (function (global, factory) {
   function _templateObject$4() {
-    var data = _taggedTemplateLiteral(["\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  margin-bottom: 0.5em;\n  color: ", ";\n  line-height: ", ";\n  text-transform: uppercase;\n"]);
+    var data = _taggedTemplateLiteral(["\n  margin-bottom: 1.5rem;\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 700;\n  line-height: ", ";\n  color: ", ";\n  text-transform: uppercase;\n"]);
 
@@ -607,22 +607,20 @@ _templateObject$4 = function _templateObject() {
     if (large) {
-      return "29px";
+      return "2rem";
     }
 
     if (loud) {
-      return "36px";
+      return "2.5rem";
     }
 
-    return "20px";
+    return "1.5rem";
   };
 
   var H1 = styled__default.h1(_templateObject$4(), function (props) {
-    return props.large ? "\"Avenir LT W01 95 Black\", arial, sans-serif" : "\"Avenir LT W01 85 Heavy\", arial, sans-serif";
+    return ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : '"urw-din-condensed", arial, sans-serif';
   }, function (props) {
     return fontSize(props.large, props.loud);
   }, function (props) {
-    return props.large ? "700" : "normal";
+    return fontSize(props.large, props.loud);
   }, function (props) {
-    return props.color;
-  }, function (props) {
-    return props.large ? "1.0em" : "1.1em";
+    return props.textColor;
   });
@@ -632,7 +630,8 @@ H1.defaultProps = {
     loud: false,
-    color: "#000"
+    textColor: "#000",
+    market: "outdoor"
   };
 
   function _templateObject$5() {
-    var data = _taggedTemplateLiteral(["\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  color: ", ";\n  text-transform: uppercase;\n"]);
+    var data = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 700;\n  line-height: 1.5rem;\n  color: ", ";\n  text-transform: uppercase;\n"]);
 
@@ -646,19 +645,18 @@ _templateObject$5 = function _templateObject() {
   var H2 = styled__default.h2(_templateObject$5(), function (props) {
-    return props.large ? "\"Avenir LT W01 95 Black\", arial, sans-serif" : "\"Avenir LT W01 85 Heavy\", arial, sans-serif";
+    return props.large ? "1.5rem" : "1rem";
   }, function (props) {
-    return props.large ? "22px" : "18px";
+    return ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : '"urw-din-condensed", arial, sans-serif';
   }, function (props) {
-    return props.large ? "700" : "normal";
+    return props.large ? "1.5rem" : "1.25rem";
   }, function (props) {
-    return props.large ? "1em" : "1.1em";
-  }, function (props) {
-    return props.color;
+    return props.textColor;
   });
   H2.defaultProps = {
     large: false,
-    color: "#000"
+    textColor: "#000",
+    market: "outdoor"
   };
 
   function _templateObject$6() {
-    var data = _taggedTemplateLiteral(["\n  font-family: ", ";\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  text-transform: uppercase;\n"]);
+    var data = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 700;\n  line-height: 1.5rem;\n  color: ", ";\n  text-transform: uppercase;\n"]);
 
@@ -672,19 +670,18 @@ _templateObject$6 = function _templateObject() {
   var H3 = styled__default.h3(_templateObject$6(), function (props) {
-    return props.large ? "\"Avenir LT W01 95 Black\", arial, sans-serif" : "\"Avenir LT W01 85 Heavy\", arial, sans-serif";
+    return props.large ? "1rem" : "0.5rem";
   }, function (props) {
-    return props.color;
+    return ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : '"urw-din-condensed", arial, sans-serif';
   }, function (props) {
-    return props.large ? "18px" : "16px";
+    return props.large ? "1.25rem" : "1.1rem";
   }, function (props) {
-    return props.large ? "700" : "normal";
-  }, function (props) {
-    return props.large ? "1em" : "1.1em";
+    return props.textColor;
   });
   H3.defaultProps = {
     large: false,
-    color: "#000"
+    textColor: "#000",
+    market: "outdoor"
   };
 
   function _templateObject$7() {
-    var data = _taggedTemplateLiteral(["\n  font-family: ", ";\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  text-transform: uppercase;\n"]);
+    var data = _taggedTemplateLiteral(["\n  margin-bottom: 0.5rem;\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 700;\n  line-height: 1.5rem;\n  color: ", ";\n  text-transform: uppercase;\n"]);
 
@@ -698,19 +695,16 @@ _templateObject$7 = function _templateObject() {
   var H4 = styled__default.h4(_templateObject$7(), function (props) {
-    return props.large ? "\"Avenir LT W01 95 Black\", arial, sans-serif" : "\"Avenir LT W01 85 Heavy\", arial, sans-serif";
+    return ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : '"urw-din-condensed", arial, sans-serif';
   }, function (props) {
-    return props.color;
+    return props.large ? "1.1rem" : "1rem";
   }, function (props) {
-    return props.large ? "16px" : "15px";
-  }, function (props) {
-    return props.large ? "700" : "normal";
-  }, function (props) {
-    return props.large ? "1em" : "1.1em";
+    return props.textColor;
   });
   H4.defaultProps = {
     large: false,
-    color: "#000"
+    textColor: "#000",
+    market: "outdoor"
   };
 
   function _templateObject$8() {
-    var data = _taggedTemplateLiteral(["\n  font-family: \"Avenir LT W01 55 Roman\", arial, sans-serif;\n  font-size: 15px;\n  line-height: 1.5em;\n  margin: 0 0 1em 0;\n  max-width: 650px;\n  color: ", ";\n"]);
+    var data = _taggedTemplateLiteral(["\n  margin: 0 0 1.5rem 0;\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  font-style: ", ";\n  line-height: ", ";\n  max-width: 78ch;\n  color: ", ";\n\n  strong,\n  b {\n    font-weight: 500;\n  }\n\n  em,\n  i {\n    font-weight: 400;\n    font-style: italic;\n  }\n\n  &:last-of-type {\n    margin-bottom: 0;\n  }\n"]);
 
@@ -723,12 +717,40 @@ _templateObject$8 = function _templateObject() {
   }
+
+  var fontSize$1 = function fontSize(size) {
+    if (size === "s") {
+      return "0.75rem";
+    }
+
+    if (size === "m") {
+      return "1.1rem";
+    }
+
+    if (size === "l") {
+      return "1.25rem";
+    }
+
+    return "1rem";
+  };
+
   var P = styled__default.p(_templateObject$8(), function (props) {
-    return props.color;
+    return ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : '"urw-din", arial, sans-serif';
+  }, function (props) {
+    return fontSize$1(props.size);
+  }, function (props) {
+    return props.bold ? "500" : "400";
+  }, function (props) {
+    return props.italic ? "italic" : "normal";
+  }, function (props) {
+    return props.size === "s" ? "1rem" : "1.5rem";
+  }, function (props) {
+    return props.textColor;
   });
   P.defaultProps = {
     large: false,
-    color: "#000"
+    textColor: "#000",
+    market: "outdoor"
   };
 
   function _templateObject$9() {
-    var data = _taggedTemplateLiteral(["\n  font-family: \"AvenirLTW01-55Oblique\", arial, sans-serif;\n  color: ", ";\n  font-size: 16px;\n  font-style: italic;\n  line-height: 1.4em;\n  padding: 15px;\n  margin: 0;\n  max-width: 650px;\n  align-self: center;\n  background: url(\"https://images.arcteryx.com/misc/quotation-marks-left.png\") no-repeat;\n  background-size: 46px;\n  margin-bottom: 1em;\n"]);
+    var data = _taggedTemplateLiteral(["\n  position: relative;\n  font-family: ", ";\n  color: ", ";\n  font-size: 1.1rem;\n  font-weight: 400;\n  line-height: 1.5rem;\n  padding: 1rem 1rem 1rem 5rem;\n  margin: 0 0 1rem 0;\n  max-width: calc(31rem + 8.4rem);\n  align-self: center;\n\n  &:before {\n    content: \"\u201C\";\n    position: absolute;\n    top: 0;\n    left: 0;\n    font-family: \"urw-din\", arial, sans-serif;\n    font-size: 8.4rem;\n    font-weight: 700;\n    line-height: 8.4rem;\n  }\n"]);
 
@@ -742,11 +764,94 @@ _templateObject$9 = function _templateObject() {
   var Blockquote = styled__default.blockquote(_templateObject$9(), function (props) {
-    return props.color;
+    return ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : '"urw-din", arial, sans-serif';
+  }, function (props) {
+    return props.textColor;
   });
   Blockquote.defaultProps = {
     large: false,
-    color: "#000"
+    textColor: "#000",
+    market: "outdoor"
   };
 
+  function _templateObject9() {
+    var data = _taggedTemplateLiteral(["\n  width: var(--space-red);\n  height: var(--space-red);\n  background-color: #eb9595;\n"]);
+
+    _templateObject9 = function _templateObject9() {
+      return data;
+    };
+
+    return data;
+  }
+
+  function _templateObject8() {
+    var data = _taggedTemplateLiteral(["\n  width: var(--space-pink);\n  height: var(--space-pink);\n  background-color: #dbabe9;\n"]);
+
+    _templateObject8 = function _templateObject8() {
+      return data;
+    };
+
+    return data;
+  }
+
+  function _templateObject7() {
+    var data = _taggedTemplateLiteral(["\n  width: var(--space-purple);\n  height: var(--space-purple);\n  background-color: #a0afeb;\n"]);
+
+    _templateObject7 = function _templateObject7() {
+      return data;
+    };
+
+    return data;
+  }
+
+  function _templateObject6() {
+    var data = _taggedTemplateLiteral(["\n  width: var(--space-green);\n  height: var(--space-green);\n  background-color: #c8eba0;\n"]);
+
+    _templateObject6 = function _templateObject6() {
+      return data;
+    };
+
+    return data;
+  }
+
+  function _templateObject5$2() {
+    var data = _taggedTemplateLiteral(["\n  width: var(--space-blue);\n  height: var(--space-blue);\n  background-color: #a0e6eb;\n"]);
+
+    _templateObject5$2 = function _templateObject5() {
+      return data;
+    };
+
+    return data;
+  }
+
+  function _templateObject4$2() {
+    var data = _taggedTemplateLiteral(["\n  width: var(--space-orange);\n  height: var(--space-orange);\n  background-color: #ebcc83;\n"]);
+
+    _templateObject4$2 = function _templateObject4() {
+      return data;
+    };
+
+    return data;
+  }
+
+  function _templateObject3$3() {
+    var data = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  margin: 0 1rem;\n  font-size: 1rem;\n\n  &:after {\n    content: attr(title);\n    display: block;\n    position: absolute;\n    bottom: -3rem;\n    left: 50%;\n    transform: translateX(-50%);\n  }\n"]);
+
+    _templateObject3$3 = function _templateObject3() {
+      return data;
+    };
+
+    return data;
+  }
+
+  function _templateObject2$3() {
+    var data = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: flex-end;\n"]);
+
+    _templateObject2$3 = function _templateObject2() {
+      return data;
+    };
+
+    return data;
+  }
+
   function _templateObject$a() {
-    var data = _taggedTemplateLiteral(["\n  display: flex;\n  text-transform: uppercase;\n  justify-content: space-between;\n  width: 100%;\n  padding: 10px 0px;\n  margin-bottom: 2em;\n  border-bottom: 1px solid #ccc;\n  ", "\n  border: none;\n  ", "\n  h1, h2 {\n    width: 35%;\n    ", "\n    width: 100%;\n    ", "\n  }\n  h4 {\n    width: 21%;\n    text-align: center;\n    ", "\n    display: none;\n    ", "\n  }\n"]);
+    var data = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100vh;\n"]);
 
@@ -759,3 +864,22 @@ _templateObject$a = function _templateObject() {
   }
-  var Header = styled__default.div(_templateObject$a(), function (props) {
+  var CubeWrap = styled__default.div(_templateObject$a());
+  var Cubes = styled__default.div(_templateObject2$3());
+  var Cube = styled__default.div(_templateObject3$3());
+  var CubeOrange = styled__default(Cube)(_templateObject4$2());
+  var CubeBlue = styled__default(Cube)(_templateObject5$2());
+  var CubeGreen = styled__default(Cube)(_templateObject6());
+  var CubePurple = styled__default(Cube)(_templateObject7());
+  var CubePink = styled__default(Cube)(_templateObject8());
+  var CubeRed = styled__default(Cube)(_templateObject9());
+
+  function _templateObject$b() {
+    var data = _taggedTemplateLiteral(["\n  display: flex;\n  text-transform: uppercase;\n  justify-content: space-between;\n  width: 100%;\n  padding: 10px 0px;\n  margin-bottom: 2em;\n  border-bottom: 1px solid #ccc;\n  ", "\n  border: none;\n  ", "\n  h1, h2 {\n    width: 35%;\n    ", "\n    width: 100%;\n    ", "\n  }\n  h4 {\n    width: 21%;\n    text-align: center;\n    ", "\n    display: none;\n    ", "\n  }\n"]);
+
+    _templateObject$b = function _templateObject() {
+      return data;
+    };
+
+    return data;
+  }
+  var Header = styled__default.div(_templateObject$b(), function (props) {
     return !props.isNarrow && "@media screen and (max-width: 700px) {";
@@ -805,6 +929,6 @@ }, function (props) {
 
-  function _templateObject5$2() {
+  function _templateObject5$3() {
     var data = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  &:last-of-type {\n    margin-bottom: 2em;\n  }\n"]);
 
-    _templateObject5$2 = function _templateObject5() {
+    _templateObject5$3 = function _templateObject5() {
       return data;
@@ -816,6 +940,6 @@ };
 
-  function _templateObject4$2() {
+  function _templateObject4$3() {
     var data = _taggedTemplateLiteral(["\n  font-size: 15px;\n  color: #990000;\n"]);
 
-    _templateObject4$2 = function _templateObject4() {
+    _templateObject4$3 = function _templateObject4() {
       return data;
@@ -827,6 +951,6 @@ };
 
-  function _templateObject3$3() {
+  function _templateObject3$4() {
     var data = _taggedTemplateLiteral(["\n  font-size: 15px;\n"]);
 
-    _templateObject3$3 = function _templateObject3() {
+    _templateObject3$4 = function _templateObject3() {
       return data;
@@ -838,6 +962,6 @@ };
 
-  function _templateObject2$3() {
+  function _templateObject2$4() {
     var data = _taggedTemplateLiteral(["\n  font-size: 15px;\n"]);
 
-    _templateObject2$3 = function _templateObject2() {
+    _templateObject2$4 = function _templateObject2() {
       return data;
@@ -849,6 +973,6 @@ };
 
-  function _templateObject$b() {
+  function _templateObject$c() {
     var data = _taggedTemplateLiteral(["\n  max-width: 340px;\n  width: 100%;\n  ", "\n  width: 100%;\n  max-width: 100%;\n  text-align: center;\n  max-width: 100%;\n  ", "\n"]);
 
-    _templateObject$b = function _templateObject() {
+    _templateObject$c = function _templateObject() {
       return data;
@@ -859,3 +983,3 @@ };
   }
-  var Totals = styled__default.div(_templateObject$b(), function (props) {
+  var Totals = styled__default.div(_templateObject$c(), function (props) {
     return !props.isNarrow && "@media screen and (max-width: 700px) {";
@@ -865,6 +989,6 @@ }, function (props) {
   });
-  var P$1 = styled__default.p(_templateObject2$3());
-  var StyledPrice$1 = styled__default(Price)(_templateObject3$3());
-  var Red = styled__default.span(_templateObject4$2());
-  var CartLine = styled__default.div(_templateObject5$2());
+  var P$1 = styled__default.p(_templateObject2$4());
+  var StyledPrice$1 = styled__default(Price)(_templateObject3$4());
+  var Red = styled__default.span(_templateObject4$3());
+  var CartLine = styled__default.div(_templateObject5$3());
 
@@ -894,6 +1018,6 @@ var CartDetails = function CartDetails(_ref) {
 
-  function _templateObject$c() {
+  function _templateObject$d() {
     var data = _taggedTemplateLiteral(["\n  width: 100%;\n  padding: 0px;\n  border-top: 1px solid #ccc;\n  padding-top: 2em;\n  display: flex;\n  justify-content: flex-end;\n  ", "\n  border-top: 2px solid #000;\n  padding-top: 1em;\n  margin-top: ", ";\n  ", "\n"]);
 
-    _templateObject$c = function _templateObject() {
+    _templateObject$d = function _templateObject() {
       return data;
@@ -904,3 +1028,3 @@ };
   }
-  var Footer = styled__default.div(_templateObject$c(), function (props) {
+  var Footer = styled__default.div(_templateObject$d(), function (props) {
     return !props.isNarrow && "@media screen and (max-width: 700px) {";
@@ -928,6 +1052,6 @@ }, function (props) {
 
-  function _templateObject4$3() {
+  function _templateObject4$4() {
     var data = _taggedTemplateLiteral(["\n      padding-bottom: 150px;\n      overflow-y: auto;\n      overflow-x: hidden;\n    "]);
 
-    _templateObject4$3 = function _templateObject4() {
+    _templateObject4$4 = function _templateObject4() {
       return data;
@@ -939,6 +1063,6 @@ };
 
-  function _templateObject3$4() {
+  function _templateObject3$5() {
     var data = _taggedTemplateLiteral(["\n  ", ";\n"]);
 
-    _templateObject3$4 = function _templateObject3() {
+    _templateObject3$5 = function _templateObject3() {
       return data;
@@ -950,6 +1074,6 @@ };
 
-  function _templateObject2$4() {
+  function _templateObject2$5() {
     var data = _taggedTemplateLiteral(["\n      display: flex;\n      flex-direction: column;\n    "]);
 
-    _templateObject2$4 = function _templateObject2() {
+    _templateObject2$5 = function _templateObject2() {
       return data;
@@ -961,6 +1085,6 @@ };
 
-  function _templateObject$d() {
+  function _templateObject$e() {
     var data = _taggedTemplateLiteral(["\n  position: relative;\n  height: ", ";\n  overflow: hidden;\n  ", ";\n"]);
 
-    _templateObject$d = function _templateObject() {
+    _templateObject$e = function _templateObject() {
       return data;
@@ -971,9 +1095,9 @@ };
   }
-  var Wrap$3 = styled__default.div(_templateObject$d(), function (props) {
+  var Wrap$3 = styled__default.div(_templateObject$e(), function (props) {
     return props.isFlyIn ? "100%" : "inherit";
   }, function (props) {
-    return props.isNarrow && styled.css(_templateObject2$4());
+    return props.isNarrow && styled.css(_templateObject2$5());
   });
-  var ItemWrap$1 = styled__default.div(_templateObject3$4(), function (props) {
-    return props.isFlyIn && styled.css(_templateObject4$3());
+  var ItemWrap$1 = styled__default.div(_templateObject3$5(), function (props) {
+    return props.isFlyIn && styled.css(_templateObject4$4());
   });
@@ -980,0 +1104,0 @@

package.json

 {
   "name": "@arcteryx/components-cart",
-  "version": "1.1.20",
+  "version": "1.1.21",
   "description": "Arcteryx Cart",
@@ -18,3 +18,3 @@ "source": "src/index.js",
   "license": "ISC",
-  "gitHead": "7ba512c491e9e5b00de9cf576f7474d291b45b81",
+  "gitHead": "8dd376202767eb8d09b5c7ae696713f3e4f80be1",
   "peerDependencies": {
@@ -21,0 +21,0 @@ "@arcteryx/components-contexts": "^1.1.0"

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

345719

increased by1.32%

Lines of code

3884

increased by7.83%

No dependency changes