@quintype/arrow 3.15.1-perf.5 → 3.15.1-perf.7

package/esm/components/Svgs/SocialIcons/whatsapp.js

@@ -0,0 +1,19 @@
+import React from "react";
+import PropTypes from "prop-types";
+export var WhatsApp = function WhatsApp(_ref) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? "#4AC959" : _ref$color;
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: color,
+    fillRule: "evenodd",
+    d: "M18.404 5.505a9.457 9.457 0 012.02 2.96 8.587 8.587 0 01.715 3.449 8.665 8.665 0 01-1.245 4.53 9.282 9.282 0 01-3.347 3.307 8.894 8.894 0 01-4.552 1.225 8.835 8.835 0 01-4.327-1.102l-4.817 1.265 1.307-4.694a8.775 8.775 0 01-1.225-4.531 8.77 8.77 0 011.225-4.531 9.17 9.17 0 013.306-3.307 8.781 8.781 0 014.531-1.224c1.198 0 2.347.23 3.45.693a9.515 9.515 0 012.959 1.96zm-6.409 13.96c1.36 0 2.626-.34 3.797-1.02a7.75 7.75 0 002.796-2.756 7.202 7.202 0 001.04-3.775c0-.98-.203-1.933-.612-2.858a8.088 8.088 0 00-1.694-2.47 7.565 7.565 0 00-2.449-1.653 7.405 7.405 0 00-2.878-.571c-1.36 0-2.62.34-3.776 1.02a7.646 7.646 0 00-2.755 2.756 7.316 7.316 0 00-1.02 3.776c0 1.442.394 2.775 1.183 4l.164.286-.776 2.775 2.857-.734.286.163a7.275 7.275 0 003.837 1.061zm4.123-5.674l.123.082c.19.082.299.15.326.204.027.054.034.19.02.408a2.11 2.11 0 01-.163.674c-.095.231-.313.462-.653.694-.34.231-.633.36-.878.388-.38.054-.748.054-1.102 0-.408-.082-.952-.273-1.632-.572-1.388-.599-2.654-1.714-3.797-3.347l-.081-.082c-.6-.843-.898-1.62-.898-2.327 0-.707.244-1.32.734-1.837l.041-.04c.19-.19.395-.286.612-.286h.49c.11 0 .198.02.266.061.068.041.129.143.183.306l.694 1.674c.082.163.095.3.041.408a2.832 2.832 0 01-.53.735.917.917 0 00-.205.265c-.027.068 0 .143.082.225.38.707.83 1.265 1.347 1.673.381.3.952.64 1.714 1.02.218.11.381.096.49-.04.354-.408.599-.707.735-.898.054-.109.123-.163.204-.163.082 0 .177.013.286.04.218.082.735.327 1.551.735z"
+  }));
+};
+WhatsApp.propTypes = {
+  color: PropTypes.string
+};

package/esm/components/Svgs/SocialIcons/youtube.js

@@ -0,0 +1,19 @@
+import React from "react";
+import PropTypes from "prop-types";
+export var Youtube = function Youtube(_ref) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? "#F61C0D" : _ref$color;
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: color,
+    fillRule: "evenodd",
+    d: "M22.077 6.844c.18.703.308 1.77.385 3.203L22.5 12l-.038 1.953c-.077 1.458-.206 2.54-.385 3.242a2.733 2.733 0 01-.692 1.172 2.654 2.654 0 01-1.193.703c-.666.183-2.23.313-4.692.39l-3.5.04-3.5-.04c-2.462-.077-4.026-.207-4.692-.39a2.657 2.657 0 01-1.193-.703 2.733 2.733 0 01-.692-1.172c-.18-.703-.308-1.784-.385-3.242L1.5 12c0-.573.013-1.224.038-1.953.077-1.432.206-2.5.385-3.203A2.718 2.718 0 013.808 4.93c.666-.183 2.23-.313 4.692-.39L12 4.5l3.5.04c2.462.077 4.026.207 4.692.39a2.718 2.718 0 011.885 1.914zm-12.23 8.36l5.5-3.204-5.5-3.164v6.367z"
+  }));
+};
+Youtube.propTypes = {
+  color: PropTypes.string
+};

package/esm/components/Svgs/caret-right.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path fill="#FD7C1B" fill-rule="nonzero" d="M14.5 12.5l-5 5v-10z"/>
+</svg>

package/esm/components/Svgs/clock-icon.js

@@ -0,0 +1,19 @@
+import React from "react";
+import PropTypes from "prop-types";
+export var ClockIcon = function ClockIcon(_ref) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? "#333" : _ref$color;
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: color,
+    fillRule: "evenodd",
+    d: "M12 19.75a7.513 7.513 0 003.875-1.047 7.832 7.832 0 002.828-2.828A7.513 7.513 0 0019.75 12a7.513 7.513 0 00-1.047-3.875c-.698-1.187-1.64-2.13-2.828-2.828S13.395 4.25 12 4.25a7.51 7.51 0 00-3.875 1.047c-1.188.698-2.13 1.64-2.828 2.828S4.25 10.605 4.25 12a7.51 7.51 0 001.047 3.875 7.824 7.824 0 002.828 2.828A7.513 7.513 0 0012 19.75zm.016-1a6.64 6.64 0 01-3.391-.906 6.716 6.716 0 01-2.469-2.453 6.563 6.563 0 01-.906-3.375c0-1.22.302-2.35.906-3.391A6.711 6.711 0 018.61 6.156a6.563 6.563 0 013.375-.906c1.22 0 2.35.302 3.391.906a6.716 6.716 0 012.469 2.453A6.592 6.592 0 0118.751 12a6.616 6.616 0 01-.906 3.375 6.716 6.716 0 01-2.453 2.469 6.563 6.563 0 01-3.375.906zm2.283-3.92l.076-.002a.343.343 0 00.25-.14l.25-.375a.365.365 0 00.078-.266.328.328 0 00-.14-.234l-2.22-1.625V7.625a.362.362 0 00-.109-.266.36.36 0 00-.265-.109h-.438a.357.357 0 00-.265.11.358.358 0 00-.11.265v5c0 .125.052.219.156.281l2.532 1.844a.383.383 0 00.281.078l-.076.001z"
+  }));
+};
+ClockIcon.propTypes = {
+  color: PropTypes.string
+};

package/esm/components/Svgs/close-icon.js

@@ -0,0 +1,22 @@
+import React from "react";
+import PropTypes from "prop-types";
+export var CloseIcon = function CloseIcon(_ref) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? "#333" : _ref$color;
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24"
+  }, /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    stroke: color,
+    strokeLinecap: "square",
+    strokeWidth: "2"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M16.95 6.914l-9.9 9.9M16.95 17.107l-9.9-9.9"
+  })));
+};
+CloseIcon.propTypes = {
+  color: PropTypes.string
+};

package/esm/components/Svgs/crown.js

@@ -0,0 +1,40 @@
+import React from "react";
+import PropTypes from "prop-types";
+export var CrownIcon = function CrownIcon(_ref) {
+  var height = _ref.height,
+      width = _ref.width,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? "#D8D8D8" : _ref$color,
+      positionTop = _ref.positionTop;
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: width,
+    height: height,
+    viewBox: "0 0 40 40",
+    style: {
+      position: "relative",
+      top: positionTop
+    }
+  }, /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd",
+    stroke: "none",
+    strokeWidth: "1"
+  }, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("g", {
+    transform: "translate(8 8)"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M0 0H24V24H0z"
+  }), /*#__PURE__*/React.createElement("g", {
+    fill: color,
+    fillRule: "nonzero",
+    transform: "translate(0 2)"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M21.043 19.553c0-.743-.601-1.344-1.344-1.344h-15.4a1.343 1.343 0 100 2.688h15.4c.743 0 1.344-.603 1.344-1.344zM1.598 8.673c.022 0 .042 0 .064-.003l2.131 7.713h16.411l2.132-7.713c.022 0 .041.003.063.003a1.599 1.599 0 10-1.52-1.108L17.025 9.82 12.882 2.95a1.599 1.599 0 10-1.765 0L6.976 9.82 3.121 7.565a1.599 1.599 0 10-1.523 1.107z"
+  }))))));
+};
+CrownIcon.propTypes = {
+  height: PropTypes.string,
+  width: PropTypes.string,
+  color: PropTypes.string,
+  positionTop: PropTypes.string
+};

package/esm/components/Svgs/fallbackImage.js

@@ -0,0 +1,45 @@
+import React from "react";
+import PropTypes from "prop-types";
+export var ImageFallbackIcon = function ImageFallbackIcon(_ref) {
+  var _ref$width = _ref.width,
+      width = _ref$width === void 0 ? 40 : _ref$width,
+      _ref$height = _ref.height,
+      height = _ref$height === void 0 ? 30 : _ref$height,
+      _ref$iconColor = _ref.iconColor,
+      iconColor = _ref$iconColor === void 0 ? "#99B0CB" : _ref$iconColor;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 102 76",
+    version: "1.1"
+  }, /*#__PURE__*/React.createElement("g", {
+    id: "demo-home-copy",
+    stroke: "none",
+    strokeWidth: "1",
+    fill: "none",
+    fillRule: "evenodd",
+    transform: "translate(-377.000000, -314.000000)"
+  }, /*#__PURE__*/React.createElement("g", {
+    id: "Group-13",
+    transform: "translate(377.000000, 314.000000)"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M43.2,49.7 L62.2,19.2 L87.2,59.4 L17,59.4 L32.8,39.4 L43.2,49.7 Z M29.9,28.6 C25.8683213,28.6 22.6,25.3316787 22.6,21.3 C22.6,17.2683213 25.8683213,14 29.9,14 C33.9316787,14 37.2,17.2683213 37.2,21.3 C37.2,25.3316787 33.9316787,28.6 29.9,28.6 Z",
+    id: "Combined-Shape",
+    fill: iconColor,
+    fillRule: "nonzero"
+  }), /*#__PURE__*/React.createElement("rect", {
+    id: "Rectangle-19",
+    stroke: iconColor,
+    strokeWidth: "3",
+    x: "1.5",
+    y: "1.5",
+    width: "99",
+    height: "73",
+    rx: "3"
+  }))));
+};
+ImageFallbackIcon.propTypes = {
+  width: PropTypes.object,
+  height: PropTypes.object,
+  iconColor: PropTypes.object
+};

package/esm/components/Svgs/hyperlink.js

@@ -0,0 +1,22 @@
+import React from "react";
+export var HyperLinkIcon = function HyperLinkIcon() {
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "36",
+    height: "28"
+  }, /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("rect", {
+    width: "36",
+    height: "28",
+    fill: "#3D6FCF",
+    rx: "4"
+  }), /*#__PURE__*/React.createElement("path", {
+    stroke: "#FFF",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "2",
+    d: "M22 14.667v4c0 .736-.597 1.333-1.333 1.333h-7.334A1.333 1.333 0 0112 18.667v-7.334c0-.736.597-1.333 1.333-1.333h4M20 8h4v4m-7.333 3.333L24 8"
+  })));
+};

package/esm/components/Svgs/key.js

@@ -0,0 +1,39 @@
+import React from "react";
+import PropTypes from "prop-types";
+export var KeyIcon = function KeyIcon(_ref) {
+  var height = _ref.height,
+      width = _ref.width,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? "#D5D5D5" : _ref$color,
+      positionTop = _ref.positionTop;
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: width,
+    height: height,
+    viewBox: "0 0 40 40",
+    style: {
+      position: "relative",
+      top: positionTop
+    }
+  }, /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd",
+    stroke: "none",
+    strokeWidth: "1"
+  }, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("g", {
+    transform: "translate(8 8)"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M0 0H24V24H0z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: color,
+    fillRule: "nonzero",
+    d: "M12.71 4.364A6.54 6.54 0 000 6.545a6.54 6.54 0 0012.71 2.182h4.745v4.364h4.363V8.727H24V4.364H12.71zM6.544 8.727a2.181 2.181 0 110-4.362 2.181 2.181 0 010 4.362z",
+    transform: "translate(0 5)"
+  })))));
+};
+KeyIcon.propTypes = {
+  height: PropTypes.string,
+  width: PropTypes.string,
+  color: PropTypes.string,
+  positionTop: PropTypes.string
+};

package/esm/components/Svgs/left-arrow.js

@@ -0,0 +1,24 @@
+import React from "react";
+import PropTypes from "prop-types";
+export var LeftArrow = function LeftArrow(_ref) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? "#333" : _ref$color;
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 10 16"
+  }, /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    fillRule: "nonzero"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M17 20H-7V-4h24z",
+    opacity: ".384"
+  }), /*#__PURE__*/React.createElement("path", {
+    stroke: color,
+    d: "M9 16L1 8l8-8"
+  })));
+};
+LeftArrow.propTypes = {
+  color: PropTypes.string
+};

package/esm/components/Svgs/liveicon.js

@@ -0,0 +1,16 @@
+import React from "react";
+
+function LiveIcon() {
+  return /*#__PURE__*/React.createElement("svg", {
+    className: "live-icon",
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "25",
+    height: "24",
+    viewBox: "0 0 25 24"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "#ff5858",
+    d: "M12 18a6 6 0 110-12 6 6 0 010 12zm0 2.5a8.5 8.5 0 110-17 8.5 8.5 0 010 17zm0-1a7.5 7.5 0 100-15 7.5 7.5 0 000 15z"
+  }));
+}
+
+export default LiveIcon;

package/esm/components/Svgs/lock.js

@@ -0,0 +1,40 @@
+import React from "react";
+import PropTypes from "prop-types";
+export var LockIcon = function LockIcon(_ref) {
+  var height = _ref.height,
+      width = _ref.width,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? "#D5D5D5" : _ref$color,
+      positionTop = _ref.positionTop;
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: width,
+    height: height,
+    viewBox: "0 0 40 40",
+    style: {
+      position: "relative",
+      top: positionTop
+    }
+  }, /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd",
+    stroke: "none",
+    strokeWidth: "1"
+  }, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("g", {
+    transform: "translate(8 8)"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M0 0H24V24H0z"
+  }), /*#__PURE__*/React.createElement("g", {
+    fill: color,
+    fillRule: "nonzero",
+    transform: "translate(3)"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M15.692 9h-.747V6c0-3.31-2.681-6-5.978-6C5.67 0 2.989 2.69 2.989 6v3h-.747A2.249 2.249 0 000 11.25v10.5A2.249 2.249 0 002.242 24h13.45a2.249 2.249 0 002.242-2.25v-10.5A2.249 2.249 0 0015.692 9zM4.982 6c0-2.206 1.787-4 3.985-4s3.985 1.794 3.985 4v3h-7.97V6z"
+  }))))));
+};
+LockIcon.propTypes = {
+  height: PropTypes.string,
+  width: PropTypes.string,
+  color: PropTypes.string,
+  positionTop: PropTypes.string
+};

package/esm/components/Svgs/right-arrow.js

@@ -0,0 +1,24 @@
+import React from "react";
+import PropTypes from "prop-types";
+export var RightArrow = function RightArrow(_ref) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? "#333" : _ref$color;
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 10 16"
+  }, /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    fillRule: "nonzero"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M-7-4h24v24H-7z",
+    opacity: ".384"
+  }), /*#__PURE__*/React.createElement("path", {
+    stroke: color,
+    d: "M1 0l8 8-8 8"
+  })));
+};
+RightArrow.propTypes = {
+  color: PropTypes.string
+};

package/esm/components/Svgs/share-icon.js

@@ -0,0 +1,19 @@
+import React from "react";
+import PropTypes from "prop-types";
+export var ShareIcon = function ShareIcon(_ref) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? "#0D0D0D" : _ref$color;
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: color,
+    fillRule: "evenodd",
+    d: "M15.843 3.189c-1.478 0-2.689 1.239-2.689 2.75 0 .293.046.58.13.846L8.844 9.31a2.638 2.638 0 00-1.687-.621c-1.477 0-2.688 1.238-2.688 2.75 0 1.51 1.21 2.75 2.688 2.75.638 0 1.224-.231 1.687-.615l4.446 2.525a2.778 2.778 0 00-.136.84c0 1.51 1.211 2.75 2.689 2.75 1.477 0 2.688-1.24 2.688-2.75 0-1.512-1.21-2.75-2.688-2.75-.742 0-1.419.317-1.907.82l-4.323-2.46a2.763 2.763 0 000-2.221l4.317-2.459c.488.506 1.168.82 1.913.82 1.477 0 2.688-1.239 2.688-2.75s-1.21-2.75-2.688-2.75z"
+  }));
+};
+ShareIcon.propTypes = {
+  color: PropTypes.string
+};

package/esm/components/Svgs/star.js

@@ -0,0 +1,34 @@
+import React from "react";
+import PropTypes from "prop-types";
+export var StarIcon = function StarIcon(_ref) {
+  var width = _ref.width,
+      height = _ref.height,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? "#D5D5D5" : _ref$color,
+      _ref$positionTop = _ref.positionTop,
+      positionTop = _ref$positionTop === void 0 ? "" : _ref$positionTop;
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: width,
+    height: height,
+    viewBox: "0 0 40 40",
+    style: {
+      position: "relative",
+      top: positionTop
+    }
+  }, /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd",
+    stroke: "none",
+    strokeWidth: "1"
+  }, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
+    fill: color,
+    d: "M20 26L12.946577 29.7082039 14.2936609 21.854102 8.5873218 16.2917961 16.4732885 15.145898 20 8 23.5267115 15.145898 31.4126782 16.2917961 25.7063391 21.854102 27.053423 29.7082039z"
+  }))));
+};
+StarIcon.propTypes = {
+  height: PropTypes.string,
+  width: PropTypes.string,
+  color: PropTypes.string,
+  positionTop: PropTypes.string
+};

package/esm/components/Svgs/user-fallback-icon.js

@@ -0,0 +1,22 @@
+import React from "react";
+import PropTypes from "prop-types";
+export var UserFallbackIcon = function UserFallbackIcon(_ref) {
+  var _ref$width = _ref.width,
+      width = _ref$width === void 0 ? 120 : _ref$width,
+      _ref$height = _ref.height,
+      height = _ref$height === void 0 ? 120 : _ref$height;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 120 120",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M93.28 108.98c-1.055-17.675-15.47-31.678-33.098-31.678-17.708 0-32.173 14.129-33.11 31.916 9.415 6.311 20.741 9.993 32.927 9.993 12.338 0 23.795-3.774 33.28-10.23l.001-.001zM58.584 73.283c9.928 0 17.977-8.275 17.977-18.483 0-10.209-8.049-18.484-17.977-18.484-9.929 0-17.977 8.275-17.977 18.484 0 10.208 8.048 18.483 17.977 18.483zM60 120C26.863 120 0 93.137 0 60S26.863 0 60 0s60 26.863 60 60-26.863 60-60 60z",
+    fill: "#DADADA",
+    fillRule: "nonzero"
+  }));
+};
+UserFallbackIcon.propTypes = {
+  width: PropTypes.object,
+  height: PropTypes.object
+};

package/esm/components/Typography/README.md

@@ -0,0 +1,7 @@
+# Typography for Arrow
+
+A modular typescale is maintained by the library as a set of standard defaults for any type related styling.
+
+The following are the default implementations by Arrow. This can be bypassed by overriding the values in the project that imports `@quintype/arrow`.
+
+

package/esm/components/Typography/index.js

@@ -0,0 +1,33 @@
+import React from "react";
+import "./style.m.css";
+export var Typography = function Typography() {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "arrow-component"
+  }, /*#__PURE__*/React.createElement("h2", null, "Typscale"), /*#__PURE__*/React.createElement("hr", null), /*#__PURE__*/React.createElement("span", {
+    className: "style-m_wrapper__2U-ye"
+  }, /*#__PURE__*/React.createElement("span", null, "title-h1"), /*#__PURE__*/React.createElement("h1", null, "These violent delights have violent ends.")), /*#__PURE__*/React.createElement("span", {
+    className: "style-m_wrapper__2U-ye"
+  }, /*#__PURE__*/React.createElement("span", null, "title-h2"), /*#__PURE__*/React.createElement("h2", null, "These violent delights have violent ends.")), /*#__PURE__*/React.createElement("span", {
+    className: "style-m_wrapper__2U-ye"
+  }, /*#__PURE__*/React.createElement("span", null, "title-h3"), /*#__PURE__*/React.createElement("h2", null, "These violent delights have violent ends.")), /*#__PURE__*/React.createElement("span", {
+    className: "style-m_wrapper__2U-ye"
+  }, /*#__PURE__*/React.createElement("span", null, "title-h4"), /*#__PURE__*/React.createElement("h4", null, "These violent delights have violent ends.")), /*#__PURE__*/React.createElement("span", {
+    className: "style-m_wrapper__2U-ye"
+  }, /*#__PURE__*/React.createElement("span", null, "paragraph"), /*#__PURE__*/React.createElement("p", null, "These violent delights have violent ends.")), /*#__PURE__*/React.createElement("span", {
+    className: "style-m_wrapper__2U-ye"
+  }, /*#__PURE__*/React.createElement("span", null, "paragraph-alt"), /*#__PURE__*/React.createElement("p", {
+    className: "p-alt"
+  }, "These violent delights have violent ends.")), /*#__PURE__*/React.createElement("span", {
+    className: "style-m_wrapper__2U-ye"
+  }, /*#__PURE__*/React.createElement("span", null, "author name"), /*#__PURE__*/React.createElement("div", {
+    className: "author-name"
+  }, "These violent delights have violent ends.")), /*#__PURE__*/React.createElement("span", {
+    className: "style-m_wrapper__2U-ye"
+  }, /*#__PURE__*/React.createElement("span", null, "section-tag"), /*#__PURE__*/React.createElement("div", {
+    className: "section-tag"
+  }, "These violent delights have violent ends.")), /*#__PURE__*/React.createElement("span", {
+    className: "style-m_wrapper__2U-ye"
+  }, /*#__PURE__*/React.createElement("span", null, "timestamp"), /*#__PURE__*/React.createElement("div", {
+    className: "time"
+  }, "These violent delights have violent ends.")));
+};

package/esm/components/Typography/stories.js

@@ -0,0 +1,15 @@
+import React from "react";
+import { withStore } from "../../../storybook";
+import { Typography } from "./index";
+import Readme from "./README.md";
+withStore("Introduction", {}, Readme).addDecorator(function (story) {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      maxWidth: "900px",
+      margin: "auto",
+      padding: "10px"
+    }
+  }, story());
+}).add("Typography", function () {
+  return /*#__PURE__*/React.createElement(Typography, null);
+});

package/esm/components/Typography/style.m.css

@@ -0,0 +1,11 @@
+@custom-media --viewport-medium (width >= 768px);
+
+.wrapper {
+  display: grid;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 25px;
+  @media (--viewport-medium) {
+    display: flex;
+  }
+}