@arcteryx/components-typography - npm Package Compare versions

Comparing version 1.29.0 to 1.29.1

CHANGELOG.md

@@ -6,2 +6,10 @@ # Change Log
 
+## [1.29.1](http://bitbucket.org/arcteryx/arcteryx-js-helpers/compare/@arcteryx/components-typography@1.29.0...@arcteryx/components-typography@1.29.1) (2020-09-21)
+
+**Note:** Version bump only for package @arcteryx/components-typography
+
+
+
+
+
 # [1.29.0](http://bitbucket.org/arcteryx/arcteryx-js-helpers/compare/@arcteryx/components-typography@1.28.2...@arcteryx/components-typography@1.29.0) (2020-07-29)
@@ -8,0 +16,0 @@

dist/cjs/index.js

@@ -10,25 +10,3 @@ 'use strict';
 
-function _taggedTemplateLiteral(strings, raw) {
-  if (!raw) {
-    raw = strings.slice(0);
-  }
-
-  return Object.freeze(Object.defineProperties(strings, {
-    raw: {
-      value: Object.freeze(raw)
-    }
-  }));
-}
-
-function _templateObject() {
-  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"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-var fontSize = function fontSize(large, loud) {
+const fontSize = (large, loud) => {
   if (large) {
@@ -45,11 +23,11 @@ return "2rem";
 
-var H1 = styled.h1(_templateObject(), function (props) {
-  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 fontSize(props.large, props.loud);
-}, function (props) {
-  return props.textColor;
-});
+const H1 = styled.h1`
+  margin-bottom: 1.5rem;
+  font-family: ${props => ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : '"urw-din-condensed", arial, sans-serif'};
+  font-size: ${props => fontSize(props.large, props.loud)};
+  font-weight: 700;
+  line-height: ${props => fontSize(props.large, props.loud)};
+  color: ${props => props.textColor};
+  text-transform: uppercase;
+`;
 H1.defaultProps = {
@@ -62,20 +40,11 @@ large: false,
 
-function _templateObject$1() {
-  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"]);
-
-  _templateObject$1 = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-var H2 = styled.h2(_templateObject$1(), function (props) {
-  return props.large ? "1.5rem" : "1rem";
-}, function (props) {
-  return ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : '"urw-din-condensed", arial, sans-serif';
-}, function (props) {
-  return props.large ? "1.5rem" : "1.25rem";
-}, function (props) {
-  return props.textColor;
-});
+const H2 = styled.h2`
+  margin-bottom: ${props => props.large ? "1.5rem" : "1rem"};
+  font-family: ${props => ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : '"urw-din-condensed", arial, sans-serif'};
+  font-size: ${props => props.large ? "1.5rem" : "1.25rem"};
+  font-weight: 700;
+  line-height: 1.5rem;
+  color: ${props => props.textColor};
+  text-transform: uppercase;
+`;
 H2.defaultProps = {
@@ -87,20 +56,11 @@ large: false,
 
-function _templateObject$2() {
-  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"]);
-
-  _templateObject$2 = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-var H3 = styled.h3(_templateObject$2(), function (props) {
-  return props.large ? "1rem" : "0.5rem";
-}, function (props) {
-  return ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : '"urw-din-condensed", arial, sans-serif';
-}, function (props) {
-  return props.large ? "1.25rem" : "1.1rem";
-}, function (props) {
-  return props.textColor;
-});
+const H3 = styled.h3`
+  margin-bottom: ${props => props.large ? "1rem" : "0.5rem"};
+  font-family: ${props => ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : '"urw-din-condensed", arial, sans-serif'};
+  font-size: ${props => props.large ? "1.25rem" : "1.1rem"};
+  font-weight: 700;
+  line-height: 1.5rem;
+  color: ${props => props.textColor};
+  text-transform: uppercase;
+`;
 H3.defaultProps = {
@@ -112,18 +72,11 @@ large: false,
 
-function _templateObject$3() {
-  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"]);
-
-  _templateObject$3 = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-var H4 = styled.h4(_templateObject$3(), function (props) {
-  return ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : '"urw-din-condensed", arial, sans-serif';
-}, function (props) {
-  return props.large ? "1.1rem" : "1rem";
-}, function (props) {
-  return props.textColor;
-});
+const H4 = styled.h4`
+  margin-bottom: 0.5rem;
+  font-family: ${props => ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : '"urw-din-condensed", arial, sans-serif'};
+  font-size: ${props => props.large ? "1.1rem" : "1rem"};
+  font-weight: 700;
+  line-height: 1.5rem;
+  color: ${props => props.textColor};
+  text-transform: uppercase;
+`;
 H4.defaultProps = {
@@ -135,13 +88,3 @@ large: false,
 
-function _templateObject$4() {
-  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"]);
-
-  _templateObject$4 = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-var fontSize$1 = function fontSize(size) {
+const fontSize$1 = size => {
   if (size === "s") {
@@ -162,15 +105,27 @@ return "0.75rem";
 
-var P = styled.p(_templateObject$4(), function (props) {
-  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 ? "600" : "400";
-}, function (props) {
-  return props.italic ? "italic" : "normal";
-}, function (props) {
-  return props.size === "s" ? "1rem" : "1.5rem";
-}, function (props) {
-  return props.textColor;
-});
+const P = styled.p`
+  margin: 0 0 1.5rem 0;
+  font-family: ${props => ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : '"urw-din", arial, sans-serif'};
+  font-size: ${props => fontSize$1(props.size)};
+  font-weight: ${props => props.bold ? `600` : `400`};
+  font-style: ${props => props.italic ? `italic` : `normal`};
+  line-height: ${props => props.size === "s" ? `1rem` : `1.5rem`};
+  max-width: 78ch;
+  color: ${props => props.textColor};
+
+  strong,
+  b {
+    font-weight: 500;
+  }
+
+  em,
+  i {
+    font-weight: 400;
+    font-style: italic;
+  }
+
+  &:last-of-type {
+    margin-bottom: 0;
+  }
+`;
 P.defaultProps = {
@@ -182,16 +137,26 @@ large: false,
 
-function _templateObject$5() {
-  var data = _taggedTemplateLiteral(["\n  position: relative;\n  font-family: ", ";\n  color: ", ";\n  font-size: 1.1rem;\n  font-weight: 400;\n  font-style: italic;\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"]);
+const Blockquote = styled.blockquote`
+  position: relative;
+  font-family: ${props => ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : '"urw-din", arial, sans-serif'};
+  color: ${props => props.textColor};
+  font-size: 1.1rem;
+  font-weight: 400;
+  font-style: italic;
+  line-height: 1.5rem;
+  padding: 1rem 1rem 1rem 5rem;
+  margin: 0 0 1rem 0;
+  max-width: calc(31rem + 8.4rem);
+  align-self: center;
 
-  _templateObject$5 = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-var Blockquote = styled.blockquote(_templateObject$5(), function (props) {
-  return ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : '"urw-din", arial, sans-serif';
-}, function (props) {
-  return props.textColor;
-});
+  &:before {
+    content: "“";
+    position: absolute;
+    top: 0;
+    left: 0;
+    font-family: "urw-din", arial, sans-serif;
+    font-size: 8.4rem;
+    font-weight: 700;
+    line-height: 8.4rem;
+  }
+`;
 Blockquote.defaultProps = {
@@ -203,117 +168,76 @@ large: false,
 
-function _templateObject9() {
-  var data = _taggedTemplateLiteral(["\n  width: var(--space-red);\n  height: var(--space-red);\n  background-color: #eb9595;\n"]);
+const CubeWrap = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+`;
+const Cubes = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+`;
+const Cube = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  margin: 0 1rem;
+  font-size: 1rem;
 
-  _templateObject9 = function _templateObject9() {
-    return data;
-  };
+  &:after {
+    content: attr(title);
+    display: block;
+    position: absolute;
+    bottom: -3rem;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+`;
+const CubeOrange = styled(Cube)`
+  width: var(--space-orange);
+  height: var(--space-orange);
+  background-color: #ebcc83;
+`;
+const CubeBlue = styled(Cube)`
+  width: var(--space-blue);
+  height: var(--space-blue);
+  background-color: #a0e6eb;
+`;
+const CubeGreen = styled(Cube)`
+  width: var(--space-green);
+  height: var(--space-green);
+  background-color: #c8eba0;
+`;
+const CubePurple = styled(Cube)`
+  width: var(--space-purple);
+  height: var(--space-purple);
+  background-color: #a0afeb;
+`;
+const CubePink = styled(Cube)`
+  width: var(--space-pink);
+  height: var(--space-pink);
+  background-color: #dbabe9;
+`;
+const CubeRed = styled(Cube)`
+  width: var(--space-red);
+  height: var(--space-red);
+  background-color: #eb9595;
+`;
 
-  return data;
-}
+const Spacing = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CubeWrap, null, /*#__PURE__*/React.createElement(Cubes, null, /*#__PURE__*/React.createElement(CubeOrange, {
+  title: "XS"
+}), /*#__PURE__*/React.createElement(CubeBlue, {
+  title: "S"
+}), /*#__PURE__*/React.createElement(CubeGreen, {
+  title: "M"
+}), /*#__PURE__*/React.createElement(CubePurple, {
+  title: "L"
+}), /*#__PURE__*/React.createElement(CubePink, {
+  title: "XL"
+}), /*#__PURE__*/React.createElement(CubeRed, {
+  title: "XXL"
+}))));
 
-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() {
-  var data = _taggedTemplateLiteral(["\n  width: var(--space-blue);\n  height: var(--space-blue);\n  background-color: #a0e6eb;\n"]);
-
-  _templateObject5 = function _templateObject5() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject4() {
-  var data = _taggedTemplateLiteral(["\n  width: var(--space-orange);\n  height: var(--space-orange);\n  background-color: #ebcc83;\n"]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  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 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: flex-end;\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject$6() {
-  var data = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100vh;\n"]);
-
-  _templateObject$6 = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-var CubeWrap = styled.div(_templateObject$6());
-var Cubes = styled.div(_templateObject2());
-var Cube = styled.div(_templateObject3());
-var CubeOrange = styled(Cube)(_templateObject4());
-var CubeBlue = styled(Cube)(_templateObject5());
-var CubeGreen = styled(Cube)(_templateObject6());
-var CubePurple = styled(Cube)(_templateObject7());
-var CubePink = styled(Cube)(_templateObject8());
-var CubeRed = styled(Cube)(_templateObject9());
-
-var Spacing = function Spacing() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CubeWrap, null, /*#__PURE__*/React.createElement(Cubes, null, /*#__PURE__*/React.createElement(CubeOrange, {
-    title: "XS"
-  }), /*#__PURE__*/React.createElement(CubeBlue, {
-    title: "S"
-  }), /*#__PURE__*/React.createElement(CubeGreen, {
-    title: "M"
-  }), /*#__PURE__*/React.createElement(CubePurple, {
-    title: "L"
-  }), /*#__PURE__*/React.createElement(CubePink, {
-    title: "XL"
-  }), /*#__PURE__*/React.createElement(CubeRed, {
-    title: "XXL"
-  }))));
-};
-
+exports.Blockquote = Blockquote;
 exports.H1 = H1;
@@ -324,4 +248,3 @@ exports.H2 = H2;
 exports.P = P;
-exports.Blockquote = Blockquote;
 exports.Spacing = Spacing;
 //# sourceMappingURL=index.js.map

dist/es/index.js

 import styled from 'styled-components';
 import React from 'react';
 
-function _taggedTemplateLiteral(strings, raw) {
-  if (!raw) {
-    raw = strings.slice(0);
-  }
-
-  return Object.freeze(Object.defineProperties(strings, {
-    raw: {
-      value: Object.freeze(raw)
-    }
-  }));
-}
-
-function _templateObject() {
-  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"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-var fontSize = function fontSize(large, loud) {
+const fontSize = (large, loud) => {
   if (large) {
@@ -38,11 +16,11 @@ return "2rem";
 
-var H1 = styled.h1(_templateObject(), function (props) {
-  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 fontSize(props.large, props.loud);
-}, function (props) {
-  return props.textColor;
-});
+const H1 = styled.h1`
+  margin-bottom: 1.5rem;
+  font-family: ${props => ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : '"urw-din-condensed", arial, sans-serif'};
+  font-size: ${props => fontSize(props.large, props.loud)};
+  font-weight: 700;
+  line-height: ${props => fontSize(props.large, props.loud)};
+  color: ${props => props.textColor};
+  text-transform: uppercase;
+`;
 H1.defaultProps = {
@@ -55,20 +33,11 @@ large: false,
 
-function _templateObject$1() {
-  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"]);
-
-  _templateObject$1 = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-var H2 = styled.h2(_templateObject$1(), function (props) {
-  return props.large ? "1.5rem" : "1rem";
-}, function (props) {
-  return ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : '"urw-din-condensed", arial, sans-serif';
-}, function (props) {
-  return props.large ? "1.5rem" : "1.25rem";
-}, function (props) {
-  return props.textColor;
-});
+const H2 = styled.h2`
+  margin-bottom: ${props => props.large ? "1.5rem" : "1rem"};
+  font-family: ${props => ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : '"urw-din-condensed", arial, sans-serif'};
+  font-size: ${props => props.large ? "1.5rem" : "1.25rem"};
+  font-weight: 700;
+  line-height: 1.5rem;
+  color: ${props => props.textColor};
+  text-transform: uppercase;
+`;
 H2.defaultProps = {
@@ -80,20 +49,11 @@ large: false,
 
-function _templateObject$2() {
-  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"]);
-
-  _templateObject$2 = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-var H3 = styled.h3(_templateObject$2(), function (props) {
-  return props.large ? "1rem" : "0.5rem";
-}, function (props) {
-  return ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : '"urw-din-condensed", arial, sans-serif';
-}, function (props) {
-  return props.large ? "1.25rem" : "1.1rem";
-}, function (props) {
-  return props.textColor;
-});
+const H3 = styled.h3`
+  margin-bottom: ${props => props.large ? "1rem" : "0.5rem"};
+  font-family: ${props => ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : '"urw-din-condensed", arial, sans-serif'};
+  font-size: ${props => props.large ? "1.25rem" : "1.1rem"};
+  font-weight: 700;
+  line-height: 1.5rem;
+  color: ${props => props.textColor};
+  text-transform: uppercase;
+`;
 H3.defaultProps = {
@@ -105,18 +65,11 @@ large: false,
 
-function _templateObject$3() {
-  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"]);
-
-  _templateObject$3 = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-var H4 = styled.h4(_templateObject$3(), function (props) {
-  return ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : '"urw-din-condensed", arial, sans-serif';
-}, function (props) {
-  return props.large ? "1.1rem" : "1rem";
-}, function (props) {
-  return props.textColor;
-});
+const H4 = styled.h4`
+  margin-bottom: 0.5rem;
+  font-family: ${props => ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : '"urw-din-condensed", arial, sans-serif'};
+  font-size: ${props => props.large ? "1.1rem" : "1rem"};
+  font-weight: 700;
+  line-height: 1.5rem;
+  color: ${props => props.textColor};
+  text-transform: uppercase;
+`;
 H4.defaultProps = {
@@ -128,13 +81,3 @@ large: false,
 
-function _templateObject$4() {
-  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"]);
-
-  _templateObject$4 = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-var fontSize$1 = function fontSize(size) {
+const fontSize$1 = size => {
   if (size === "s") {
@@ -155,15 +98,27 @@ return "0.75rem";
 
-var P = styled.p(_templateObject$4(), function (props) {
-  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 ? "600" : "400";
-}, function (props) {
-  return props.italic ? "italic" : "normal";
-}, function (props) {
-  return props.size === "s" ? "1rem" : "1.5rem";
-}, function (props) {
-  return props.textColor;
-});
+const P = styled.p`
+  margin: 0 0 1.5rem 0;
+  font-family: ${props => ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : '"urw-din", arial, sans-serif'};
+  font-size: ${props => fontSize$1(props.size)};
+  font-weight: ${props => props.bold ? `600` : `400`};
+  font-style: ${props => props.italic ? `italic` : `normal`};
+  line-height: ${props => props.size === "s" ? `1rem` : `1.5rem`};
+  max-width: 78ch;
+  color: ${props => props.textColor};
+
+  strong,
+  b {
+    font-weight: 500;
+  }
+
+  em,
+  i {
+    font-weight: 400;
+    font-style: italic;
+  }
+
+  &:last-of-type {
+    margin-bottom: 0;
+  }
+`;
 P.defaultProps = {
@@ -175,16 +130,26 @@ large: false,
 
-function _templateObject$5() {
-  var data = _taggedTemplateLiteral(["\n  position: relative;\n  font-family: ", ";\n  color: ", ";\n  font-size: 1.1rem;\n  font-weight: 400;\n  font-style: italic;\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"]);
+const Blockquote = styled.blockquote`
+  position: relative;
+  font-family: ${props => ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : '"urw-din", arial, sans-serif'};
+  color: ${props => props.textColor};
+  font-size: 1.1rem;
+  font-weight: 400;
+  font-style: italic;
+  line-height: 1.5rem;
+  padding: 1rem 1rem 1rem 5rem;
+  margin: 0 0 1rem 0;
+  max-width: calc(31rem + 8.4rem);
+  align-self: center;
 
-  _templateObject$5 = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-var Blockquote = styled.blockquote(_templateObject$5(), function (props) {
-  return ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : '"urw-din", arial, sans-serif';
-}, function (props) {
-  return props.textColor;
-});
+  &:before {
+    content: "“";
+    position: absolute;
+    top: 0;
+    left: 0;
+    font-family: "urw-din", arial, sans-serif;
+    font-size: 8.4rem;
+    font-weight: 700;
+    line-height: 8.4rem;
+  }
+`;
 Blockquote.defaultProps = {
@@ -196,118 +161,76 @@ large: false,
 
-function _templateObject9() {
-  var data = _taggedTemplateLiteral(["\n  width: var(--space-red);\n  height: var(--space-red);\n  background-color: #eb9595;\n"]);
+const CubeWrap = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+`;
+const Cubes = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+`;
+const Cube = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  margin: 0 1rem;
+  font-size: 1rem;
 
-  _templateObject9 = function _templateObject9() {
-    return data;
-  };
+  &:after {
+    content: attr(title);
+    display: block;
+    position: absolute;
+    bottom: -3rem;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+`;
+const CubeOrange = styled(Cube)`
+  width: var(--space-orange);
+  height: var(--space-orange);
+  background-color: #ebcc83;
+`;
+const CubeBlue = styled(Cube)`
+  width: var(--space-blue);
+  height: var(--space-blue);
+  background-color: #a0e6eb;
+`;
+const CubeGreen = styled(Cube)`
+  width: var(--space-green);
+  height: var(--space-green);
+  background-color: #c8eba0;
+`;
+const CubePurple = styled(Cube)`
+  width: var(--space-purple);
+  height: var(--space-purple);
+  background-color: #a0afeb;
+`;
+const CubePink = styled(Cube)`
+  width: var(--space-pink);
+  height: var(--space-pink);
+  background-color: #dbabe9;
+`;
+const CubeRed = styled(Cube)`
+  width: var(--space-red);
+  height: var(--space-red);
+  background-color: #eb9595;
+`;
 
-  return data;
-}
+const Spacing = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CubeWrap, null, /*#__PURE__*/React.createElement(Cubes, null, /*#__PURE__*/React.createElement(CubeOrange, {
+  title: "XS"
+}), /*#__PURE__*/React.createElement(CubeBlue, {
+  title: "S"
+}), /*#__PURE__*/React.createElement(CubeGreen, {
+  title: "M"
+}), /*#__PURE__*/React.createElement(CubePurple, {
+  title: "L"
+}), /*#__PURE__*/React.createElement(CubePink, {
+  title: "XL"
+}), /*#__PURE__*/React.createElement(CubeRed, {
+  title: "XXL"
+}))));
 
-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() {
-  var data = _taggedTemplateLiteral(["\n  width: var(--space-blue);\n  height: var(--space-blue);\n  background-color: #a0e6eb;\n"]);
-
-  _templateObject5 = function _templateObject5() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject4() {
-  var data = _taggedTemplateLiteral(["\n  width: var(--space-orange);\n  height: var(--space-orange);\n  background-color: #ebcc83;\n"]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  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 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: flex-end;\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject$6() {
-  var data = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100vh;\n"]);
-
-  _templateObject$6 = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-var CubeWrap = styled.div(_templateObject$6());
-var Cubes = styled.div(_templateObject2());
-var Cube = styled.div(_templateObject3());
-var CubeOrange = styled(Cube)(_templateObject4());
-var CubeBlue = styled(Cube)(_templateObject5());
-var CubeGreen = styled(Cube)(_templateObject6());
-var CubePurple = styled(Cube)(_templateObject7());
-var CubePink = styled(Cube)(_templateObject8());
-var CubeRed = styled(Cube)(_templateObject9());
-
-var Spacing = function Spacing() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CubeWrap, null, /*#__PURE__*/React.createElement(Cubes, null, /*#__PURE__*/React.createElement(CubeOrange, {
-    title: "XS"
-  }), /*#__PURE__*/React.createElement(CubeBlue, {
-    title: "S"
-  }), /*#__PURE__*/React.createElement(CubeGreen, {
-    title: "M"
-  }), /*#__PURE__*/React.createElement(CubePurple, {
-    title: "L"
-  }), /*#__PURE__*/React.createElement(CubePink, {
-    title: "XL"
-  }), /*#__PURE__*/React.createElement(CubeRed, {
-    title: "XXL"
-  }))));
-};
-
-export { H1, H2, H3, H4, P, Blockquote, Spacing };
+export { Blockquote, H1, H2, H3, H4, P, Spacing };
 //# sourceMappingURL=index.js.map

dist/umd/index.js

 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('styled-components'), require('react')) :
   typeof define === 'function' && define.amd ? define(['exports', 'styled-components', 'react'], factory) :
-  (function() {
+  (global = global || self, (function () {
     var current = global.ARCTERYX && global.ARCTERYX.componentstypography;
     var exports = (global.ARCTERYX = global.ARCTERYX || {}, global.ARCTERYX.componentstypography = {});
-    factory(exports,global.styled,global.React);
-    global.ARCTERYX.componentstypography = exports;
-    exports.noConflict = function() { global.ARCTERYX.componentstypography = current; return exports; };
-  })();
-}(this, (function (exports,styled,React) { 'use strict';
+    factory(exports, global.styled, global.React);
+    exports.noConflict = function () { global.ARCTERYX.componentstypography = current; return exports; };
+  }()));
+}(this, (function (exports, styled, React) { 'use strict';
 
-  styled = styled && styled.hasOwnProperty('default') ? styled['default'] : styled;
-  React = React && React.hasOwnProperty('default') ? React['default'] : React;
+  styled = styled && Object.prototype.hasOwnProperty.call(styled, 'default') ? styled['default'] : styled;
+  React = React && Object.prototype.hasOwnProperty.call(React, 'default') ? React['default'] : React;
 
-  function _taggedTemplateLiteral(strings, raw) {
-    if (!raw) {
-      raw = strings.slice(0);
-    }
-
-    return Object.freeze(Object.defineProperties(strings, {
-      raw: {
-        value: Object.freeze(raw)
-      }
-    }));
-  }
-
-  function _templateObject() {
-    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"]);
-
-    _templateObject = function _templateObject() {
-      return data;
-    };
-
-    return data;
-  }
-
-  var fontSize = function fontSize(large, loud) {
+  const fontSize = (large, loud) => {
     if (large) {
@@ -50,11 +27,11 @@ return "2rem";
 
-  var H1 = styled.h1(_templateObject(), function (props) {
-    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 fontSize(props.large, props.loud);
-  }, function (props) {
-    return props.textColor;
-  });
+  const H1 = styled.h1`
+  margin-bottom: 1.5rem;
+  font-family: ${props => ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : '"urw-din-condensed", arial, sans-serif'};
+  font-size: ${props => fontSize(props.large, props.loud)};
+  font-weight: 700;
+  line-height: ${props => fontSize(props.large, props.loud)};
+  color: ${props => props.textColor};
+  text-transform: uppercase;
+`;
   H1.defaultProps = {
@@ -67,20 +44,11 @@ large: false,
 
-  function _templateObject$1() {
-    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"]);
-
-    _templateObject$1 = function _templateObject() {
-      return data;
-    };
-
-    return data;
-  }
-  var H2 = styled.h2(_templateObject$1(), function (props) {
-    return props.large ? "1.5rem" : "1rem";
-  }, function (props) {
-    return ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : '"urw-din-condensed", arial, sans-serif';
-  }, function (props) {
-    return props.large ? "1.5rem" : "1.25rem";
-  }, function (props) {
-    return props.textColor;
-  });
+  const H2 = styled.h2`
+  margin-bottom: ${props => props.large ? "1.5rem" : "1rem"};
+  font-family: ${props => ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : '"urw-din-condensed", arial, sans-serif'};
+  font-size: ${props => props.large ? "1.5rem" : "1.25rem"};
+  font-weight: 700;
+  line-height: 1.5rem;
+  color: ${props => props.textColor};
+  text-transform: uppercase;
+`;
   H2.defaultProps = {
@@ -92,20 +60,11 @@ large: false,
 
-  function _templateObject$2() {
-    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"]);
-
-    _templateObject$2 = function _templateObject() {
-      return data;
-    };
-
-    return data;
-  }
-  var H3 = styled.h3(_templateObject$2(), function (props) {
-    return props.large ? "1rem" : "0.5rem";
-  }, function (props) {
-    return ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : '"urw-din-condensed", arial, sans-serif';
-  }, function (props) {
-    return props.large ? "1.25rem" : "1.1rem";
-  }, function (props) {
-    return props.textColor;
-  });
+  const H3 = styled.h3`
+  margin-bottom: ${props => props.large ? "1rem" : "0.5rem"};
+  font-family: ${props => ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : '"urw-din-condensed", arial, sans-serif'};
+  font-size: ${props => props.large ? "1.25rem" : "1.1rem"};
+  font-weight: 700;
+  line-height: 1.5rem;
+  color: ${props => props.textColor};
+  text-transform: uppercase;
+`;
   H3.defaultProps = {
@@ -117,18 +76,11 @@ large: false,
 
-  function _templateObject$3() {
-    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"]);
-
-    _templateObject$3 = function _templateObject() {
-      return data;
-    };
-
-    return data;
-  }
-  var H4 = styled.h4(_templateObject$3(), function (props) {
-    return ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : '"urw-din-condensed", arial, sans-serif';
-  }, function (props) {
-    return props.large ? "1.1rem" : "1rem";
-  }, function (props) {
-    return props.textColor;
-  });
+  const H4 = styled.h4`
+  margin-bottom: 0.5rem;
+  font-family: ${props => ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : '"urw-din-condensed", arial, sans-serif'};
+  font-size: ${props => props.large ? "1.1rem" : "1rem"};
+  font-weight: 700;
+  line-height: 1.5rem;
+  color: ${props => props.textColor};
+  text-transform: uppercase;
+`;
   H4.defaultProps = {
@@ -140,13 +92,3 @@ large: false,
 
-  function _templateObject$4() {
-    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"]);
-
-    _templateObject$4 = function _templateObject() {
-      return data;
-    };
-
-    return data;
-  }
-
-  var fontSize$1 = function fontSize(size) {
+  const fontSize$1 = size => {
     if (size === "s") {
@@ -167,15 +109,27 @@ return "0.75rem";
 
-  var P = styled.p(_templateObject$4(), function (props) {
-    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 ? "600" : "400";
-  }, function (props) {
-    return props.italic ? "italic" : "normal";
-  }, function (props) {
-    return props.size === "s" ? "1rem" : "1.5rem";
-  }, function (props) {
-    return props.textColor;
-  });
+  const P = styled.p`
+  margin: 0 0 1.5rem 0;
+  font-family: ${props => ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : '"urw-din", arial, sans-serif'};
+  font-size: ${props => fontSize$1(props.size)};
+  font-weight: ${props => props.bold ? `600` : `400`};
+  font-style: ${props => props.italic ? `italic` : `normal`};
+  line-height: ${props => props.size === "s" ? `1rem` : `1.5rem`};
+  max-width: 78ch;
+  color: ${props => props.textColor};
+
+  strong,
+  b {
+    font-weight: 500;
+  }
+
+  em,
+  i {
+    font-weight: 400;
+    font-style: italic;
+  }
+
+  &:last-of-type {
+    margin-bottom: 0;
+  }
+`;
   P.defaultProps = {
@@ -187,16 +141,26 @@ large: false,
 
-  function _templateObject$5() {
-    var data = _taggedTemplateLiteral(["\n  position: relative;\n  font-family: ", ";\n  color: ", ";\n  font-size: 1.1rem;\n  font-weight: 400;\n  font-style: italic;\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"]);
+  const Blockquote = styled.blockquote`
+  position: relative;
+  font-family: ${props => ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : '"urw-din", arial, sans-serif'};
+  color: ${props => props.textColor};
+  font-size: 1.1rem;
+  font-weight: 400;
+  font-style: italic;
+  line-height: 1.5rem;
+  padding: 1rem 1rem 1rem 5rem;
+  margin: 0 0 1rem 0;
+  max-width: calc(31rem + 8.4rem);
+  align-self: center;
 
-    _templateObject$5 = function _templateObject() {
-      return data;
-    };
-
-    return data;
+  &:before {
+    content: "“";
+    position: absolute;
+    top: 0;
+    left: 0;
+    font-family: "urw-din", arial, sans-serif;
+    font-size: 8.4rem;
+    font-weight: 700;
+    line-height: 8.4rem;
   }
-  var Blockquote = styled.blockquote(_templateObject$5(), function (props) {
-    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 = {
@@ -208,117 +172,76 @@ large: false,
 
-  function _templateObject9() {
-    var data = _taggedTemplateLiteral(["\n  width: var(--space-red);\n  height: var(--space-red);\n  background-color: #eb9595;\n"]);
+  const CubeWrap = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+`;
+  const Cubes = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+`;
+  const Cube = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  margin: 0 1rem;
+  font-size: 1rem;
 
-    _templateObject9 = function _templateObject9() {
-      return data;
-    };
-
-    return data;
+  &:after {
+    content: attr(title);
+    display: block;
+    position: absolute;
+    bottom: -3rem;
+    left: 50%;
+    transform: translateX(-50%);
   }
+`;
+  const CubeOrange = styled(Cube)`
+  width: var(--space-orange);
+  height: var(--space-orange);
+  background-color: #ebcc83;
+`;
+  const CubeBlue = styled(Cube)`
+  width: var(--space-blue);
+  height: var(--space-blue);
+  background-color: #a0e6eb;
+`;
+  const CubeGreen = styled(Cube)`
+  width: var(--space-green);
+  height: var(--space-green);
+  background-color: #c8eba0;
+`;
+  const CubePurple = styled(Cube)`
+  width: var(--space-purple);
+  height: var(--space-purple);
+  background-color: #a0afeb;
+`;
+  const CubePink = styled(Cube)`
+  width: var(--space-pink);
+  height: var(--space-pink);
+  background-color: #dbabe9;
+`;
+  const CubeRed = styled(Cube)`
+  width: var(--space-red);
+  height: var(--space-red);
+  background-color: #eb9595;
+`;
 
-  function _templateObject8() {
-    var data = _taggedTemplateLiteral(["\n  width: var(--space-pink);\n  height: var(--space-pink);\n  background-color: #dbabe9;\n"]);
+  const Spacing = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CubeWrap, null, /*#__PURE__*/React.createElement(Cubes, null, /*#__PURE__*/React.createElement(CubeOrange, {
+    title: "XS"
+  }), /*#__PURE__*/React.createElement(CubeBlue, {
+    title: "S"
+  }), /*#__PURE__*/React.createElement(CubeGreen, {
+    title: "M"
+  }), /*#__PURE__*/React.createElement(CubePurple, {
+    title: "L"
+  }), /*#__PURE__*/React.createElement(CubePink, {
+    title: "XL"
+  }), /*#__PURE__*/React.createElement(CubeRed, {
+    title: "XXL"
+  }))));
 
-    _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() {
-    var data = _taggedTemplateLiteral(["\n  width: var(--space-blue);\n  height: var(--space-blue);\n  background-color: #a0e6eb;\n"]);
-
-    _templateObject5 = function _templateObject5() {
-      return data;
-    };
-
-    return data;
-  }
-
-  function _templateObject4() {
-    var data = _taggedTemplateLiteral(["\n  width: var(--space-orange);\n  height: var(--space-orange);\n  background-color: #ebcc83;\n"]);
-
-    _templateObject4 = function _templateObject4() {
-      return data;
-    };
-
-    return data;
-  }
-
-  function _templateObject3() {
-    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 = function _templateObject3() {
-      return data;
-    };
-
-    return data;
-  }
-
-  function _templateObject2() {
-    var data = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: flex-end;\n"]);
-
-    _templateObject2 = function _templateObject2() {
-      return data;
-    };
-
-    return data;
-  }
-
-  function _templateObject$6() {
-    var data = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100vh;\n"]);
-
-    _templateObject$6 = function _templateObject() {
-      return data;
-    };
-
-    return data;
-  }
-  var CubeWrap = styled.div(_templateObject$6());
-  var Cubes = styled.div(_templateObject2());
-  var Cube = styled.div(_templateObject3());
-  var CubeOrange = styled(Cube)(_templateObject4());
-  var CubeBlue = styled(Cube)(_templateObject5());
-  var CubeGreen = styled(Cube)(_templateObject6());
-  var CubePurple = styled(Cube)(_templateObject7());
-  var CubePink = styled(Cube)(_templateObject8());
-  var CubeRed = styled(Cube)(_templateObject9());
-
-  var Spacing = function Spacing() {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CubeWrap, null, /*#__PURE__*/React.createElement(Cubes, null, /*#__PURE__*/React.createElement(CubeOrange, {
-      title: "XS"
-    }), /*#__PURE__*/React.createElement(CubeBlue, {
-      title: "S"
-    }), /*#__PURE__*/React.createElement(CubeGreen, {
-      title: "M"
-    }), /*#__PURE__*/React.createElement(CubePurple, {
-      title: "L"
-    }), /*#__PURE__*/React.createElement(CubePink, {
-      title: "XL"
-    }), /*#__PURE__*/React.createElement(CubeRed, {
-      title: "XXL"
-    }))));
-  };
-
+  exports.Blockquote = Blockquote;
   exports.H1 = H1;
@@ -329,3 +252,2 @@ exports.H2 = H2;
   exports.P = P;
-  exports.Blockquote = Blockquote;
   exports.Spacing = Spacing;
@@ -332,0 +254,0 @@

package.json

 {
   "name": "@arcteryx/components-typography",
-  "version": "1.29.0",
+  "version": "1.29.1",
   "description": "Arcteryx Typography",
@@ -14,3 +14,3 @@ "main": "dist/es/index.js",
   "license": "ISC",
-  "gitHead": "516c65444e5f0be3f429e0bb93f767bb2d5f26e7",
+  "gitHead": "fe083e0cf7f4e5d2162a33cc3b89219b387d3fb1",
   "files": [
@@ -17,0 +17,0 @@ "dist",

README.md

@@ -22,1 +22,12 @@ # `components-typography`
 `textColor` avoids this.
+
+### How-to import/reference fonts 
+
+Each consuming app is responsible to host and load its own fonts:
+- Ensure global variable is defined as JSX references `font-family: var(--font-urw-din);`
+
+For example URW is available on a AWS S3
+
+```
+https://images.arcteryx.com/fonts/urw-family-typekit.css
+```

No alert changes

Improved metrics

Number of lines in readme file

32

increased by45.45%

Worsened metrics

Total package byte prevSize

69879

decreased by-14.01%

Lines of code

1030

decreased by-11.21%

No dependency changes