@quintype/arrow 3.0.0-spike-skeleton-layout.21 → 3.0.0

package/src/components/Svgs/Loading/loading.m.css

@@ -0,0 +1,5 @@
+.loading-indicator {
+  position: absolute;
+  top: 50%;
+  left: calc(50% - 20px);
+}

package/src/components/Svgs/SocialIcons/facebook.js

@@ -0,0 +1,15 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+export const Facebook = ({ color = "#3B5998" }) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+      <path
+        fill={color}
+        d="M9.906 20v-7.156H7.5V10h2.406V7.75c0-1.187.334-2.11 1-2.766.667-.656 1.552-.984 2.656-.984.896 0 1.625.042 2.188.125v2.531h-1.5c-.563 0-.948.125-1.156.375-.167.209-.25.542-.25 1V10H15.5l-.375 2.844h-2.281V20H9.906z"></path>
+    </svg>
+  );
+};
+Facebook.propTypes = {
+  color: PropTypes.string
+};

package/src/components/Svgs/SocialIcons/instagram.js

@@ -0,0 +1,24 @@
+import React from "react";
+
+export const Instagram = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24">
+      <defs>
+        <linearGradient id="prefix__b" x1="0%" x2="110.694%" y1="0%" y2="109.202%">
+          <stop offset="0%" stopColor="#724AC6"></stop>
+          <stop offset="53.59%" stopColor="#E5375E"></stop>
+          <stop offset="100%" stopColor="#FC9949"></stop>
+        </linearGradient>
+        <path
+          id="prefix__a"
+          d="M9 4.636c.784 0 1.512.196 2.182.588.67.392 1.202.924 1.594 1.594.392.67.588 1.398.588 2.182s-.196 1.512-.588 2.182a4.382 4.382 0 01-1.594 1.594c-.67.392-1.398.588-2.182.588s-1.512-.196-2.182-.588a4.382 4.382 0 01-1.594-1.594c-.392-.67-.588-1.398-.588-2.182s.196-1.512.588-2.182a4.382 4.382 0 011.594-1.594A4.247 4.247 0 019 4.636zm0 7.21c.784 0 1.455-.278 2.011-.835.557-.556.835-1.227.835-2.011s-.278-1.455-.835-2.011c-.556-.557-1.227-.835-2.011-.835s-1.455.278-2.011.835c-.557.556-.835 1.227-.835 2.011s.278 1.455.835 2.011A2.739 2.739 0 009 11.846zm5.578-7.4a1.181 1.181 0 01-.322.721.923.923 0 01-.702.304.981.981 0 01-.721-.304.98.98 0 01-.304-.72c0-.279.101-.52.304-.722a.984.984 0 01.72-.303c.279 0 .52.101.722.303a.987.987 0 01.303.721zm2.884 1.025c.025.708.038 1.885.038 3.529s-.019 2.827-.057 3.548c-.038.721-.145 1.347-.322 1.878a4.425 4.425 0 01-1.044 1.651 4.429 4.429 0 01-1.65 1.044c-.532.177-1.158.284-1.879.322-.721.038-1.904.057-3.548.057-1.644 0-2.827-.019-3.548-.057-.721-.038-1.347-.158-1.878-.36a4.05 4.05 0 01-1.651-1.006 4.429 4.429 0 01-1.044-1.65c-.177-.532-.284-1.158-.322-1.879C.519 11.827.5 10.644.5 9c0-1.644.019-2.827.057-3.548.038-.721.145-1.347.322-1.878a4.425 4.425 0 011.044-1.651A4.429 4.429 0 013.573.879C4.106.702 4.732.595 5.453.557 6.173.519 7.356.5 9 .5c1.644 0 2.827.019 3.548.057.721.038 1.347.145 1.878.322a4.425 4.425 0 011.651 1.044 4.429 4.429 0 011.044 1.65c.177.532.29 1.164.341 1.898zm-1.821 8.538c.151-.43.253-1.113.303-2.05.025-.556.038-1.34.038-2.352V8.393a54.22 54.22 0 00-.038-2.353c-.05-.961-.152-1.644-.303-2.049a2.743 2.743 0 00-1.632-1.632c-.405-.151-1.088-.253-2.05-.303a55.796 55.796 0 00-2.352-.038H8.393c-1.012 0-1.796.013-2.353.038-.936.05-1.619.152-2.049.303a2.743 2.743 0 00-1.632 1.632c-.151.405-.253 1.088-.303 2.05-.025.556-.038 1.34-.038 2.352v1.214c0 1.012.013 1.796.038 2.353.05.936.152 1.619.303 2.049.33.784.873 1.328 1.632 1.632.43.151 1.113.253 2.05.303.556.025 1.34.038 2.352.038h1.214a54.22 54.22 0 002.353-.038c.961-.05 1.644-.152 2.049-.303.784-.33 1.328-.873 1.632-1.632z"></path>
+      </defs>
+      <use fill="url(#prefix__b)" fillRule="nonzero" transform="translate(3 3)" xlinkHref="#prefix__a"></use>
+    </svg>
+  );
+};

package/src/components/Svgs/SocialIcons/linkedin.js

@@ -0,0 +1,15 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+export const LinkedIn = ({ color = "#0077B5" }) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+      <path
+        fill={color}
+        d="M6.71 19H3.26V7.904h3.45V19zM5.005 6.383a1.926 1.926 0 01-1.41-.594A1.923 1.923 0 013 4.38c0-.544.198-1.014.594-1.41a1.926 1.926 0 011.41-.594c.544 0 1.014.198 1.41.594.396.396.594.866.594 1.41 0 .544-.198 1.014-.594 1.41a1.926 1.926 0 01-1.41.594zM19.625 19h-3.451v-5.418c0-.89-.074-1.534-.223-1.93-.272-.668-.804-1.002-1.596-1.002-.791 0-1.348.297-1.67.891-.247.445-.37 1.1-.37 1.967V19H8.9V7.904h3.303v1.522h.037c.248-.495.643-.903 1.188-1.225.593-.396 1.286-.594 2.078-.594 1.608 0 2.734.508 3.377 1.522.495.816.742 2.078.742 3.785V19z"></path>
+    </svg>
+  );
+};
+LinkedIn.propTypes = {
+  color: PropTypes.string
+};

package/src/components/Svgs/SocialIcons/pinterest.js

@@ -0,0 +1,12 @@
+import React from "react";
+
+export const Pinterest = () => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+      <path
+        fill="#E60023"
+        d="M21.5 12a9.209 9.209 0 01-1.283 4.75 9.6 9.6 0 01-3.467 3.467A9.209 9.209 0 0112 21.5c-.97 0-1.903-.14-2.796-.421.613-1.022.996-1.852 1.149-2.49l.613-2.26c.153.306.434.561.842.766.41.204.856.306 1.341.306.92 0 1.756-.262 2.51-.785.753-.524 1.34-1.232 1.761-2.126.422-.894.632-1.87.632-2.93s-.255-2.012-.766-2.854a5.318 5.318 0 00-2.107-1.973c-.893-.473-1.89-.709-2.987-.709-1.303 0-2.452.268-3.448.805a5.465 5.465 0 00-2.088 2.087 5.704 5.704 0 00-.747 2.854c0 .74.185 1.475.556 2.203.37.728.836 1.22 1.398 1.475.179.076.28.038.306-.115l.268-1.073a.266.266 0 00-.076-.268 3.048 3.048 0 01-.498-.977 3.908 3.908 0 01-.192-1.207c0-.715.173-1.385.518-2.01a3.99 3.99 0 011.474-1.514c.664-.408 1.43-.613 2.299-.613 1.174 0 2.132.364 2.873 1.092.74.728 1.11 1.654 1.11 2.777 0 1.277-.287 2.324-.861 3.141-.575.818-1.284 1.226-2.126 1.226-.486 0-.869-.172-1.15-.517-.28-.345-.37-.747-.268-1.207.051-.28.166-.689.345-1.225.281-.945.421-1.603.421-1.973 0-.37-.102-.677-.306-.92-.204-.242-.498-.363-.881-.363-.485 0-.894.217-1.226.65-.332.435-.498.984-.498 1.648 0 .562.09 1.034.268 1.417L8.591 18.13c-.154.638-.166 1.545-.039 2.72-1.813-.69-3.275-1.839-4.386-3.448C3.056 15.792 2.5 13.991 2.5 12c0-1.711.428-3.294 1.283-4.75A9.6 9.6 0 017.25 3.783 9.209 9.209 0 0112 2.5c1.711 0 3.294.428 4.75 1.283a9.6 9.6 0 013.467 3.467A9.209 9.209 0 0121.5 12z"
+      />
+    </svg>
+  );
+};

package/src/components/Svgs/SocialIcons/twitter.js

@@ -0,0 +1,15 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+export const Twitter = ({ color = "#1CB7EB" }) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+      <path
+        fill={color}
+        d="M19.137 8.594c.023.094.035.246.035.457 0 1.687-.41 3.316-1.23 4.887-.844 1.664-2.028 2.988-3.551 3.972-1.664 1.102-3.575 1.652-5.73 1.652-2.063 0-3.95-.55-5.661-1.652.258.024.55.035.879.035 1.71 0 3.246-.527 4.605-1.582-.82 0-1.54-.24-2.162-.72a3.673 3.673 0 01-1.283-1.811c.234.023.457.035.668.035.328 0 .656-.035.984-.105a3.724 3.724 0 01-2.109-1.301 3.542 3.542 0 01-.844-2.32v-.07a3.493 3.493 0 001.653.492 4.097 4.097 0 01-1.196-1.336 3.557 3.557 0 01-.457-1.776c0-.644.176-1.26.528-1.845a10.188 10.188 0 003.357 2.742 10.222 10.222 0 004.236 1.125 5.122 5.122 0 01-.07-.844c0-.656.164-1.272.492-1.846a3.615 3.615 0 011.336-1.353 3.568 3.568 0 011.828-.492c.54 0 1.037.105 1.494.316.457.21.862.492 1.213.844a7.479 7.479 0 002.356-.88c-.281.868-.82 1.548-1.617 2.04A7.926 7.926 0 0021 6.66a8.132 8.132 0 01-1.863 1.934z"></path>
+    </svg>
+  );
+};
+Twitter.propTypes = {
+  color: PropTypes.string
+};

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

@@ -0,0 +1,17 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+export const WhatsApp = ({ color = "#4AC959" }) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+      <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"></path>
+    </svg>
+  );
+};
+
+WhatsApp.propTypes = {
+  color: PropTypes.string
+};

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

@@ -0,0 +1,17 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+export const Youtube = ({ color = "#F61C0D" }) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+      <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"
+      />
+    </svg>
+  );
+};
+Youtube.propTypes = {
+  color: PropTypes.string
+};

package/src/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/src/components/Svgs/clock-icon.js

@@ -0,0 +1,17 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+export const ClockIcon = ({ color = "#333" }) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+      <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"></path>
+    </svg>
+  );
+};
+
+ClockIcon.propTypes = {
+  color: PropTypes.string
+};

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

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

package/src/components/Svgs/crown.js

@@ -0,0 +1,31 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+export const CrownIcon = ({ height, width, color = "#D8D8D8", positionTop }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      viewBox="0 0 40 40"
+      style={{ position: "relative", top: positionTop }}>
+      <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
+        <g>
+          <g transform="translate(8 8)">
+            <path d="M0 0H24V24H0z"></path>
+            <g fill={color} fillRule="nonzero" transform="translate(0 2)">
+              <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"></path>
+            </g>
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+};
+
+CrownIcon.propTypes = {
+  height: PropTypes.string,
+  width: PropTypes.string,
+  color: PropTypes.string,
+  positionTop: PropTypes.string
+};

package/src/components/Svgs/fallbackImage.js

@@ -0,0 +1,42 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+export const ImageFallbackIcon = ({ width = 40, height = 30, iconColor = "#99B0CB" }) => {
+  return (
+    <svg width={width} height={height} viewBox="0 0 102 76" version="1.1">
+      <g
+        id="demo-home-copy"
+        stroke="none"
+        strokeWidth="1"
+        fill="none"
+        fillRule="evenodd"
+        transform="translate(-377.000000, -314.000000)"
+      >
+        <g id="Group-13" transform="translate(377.000000, 314.000000)">
+          <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"
+          ></path>
+          <rect
+            id="Rectangle-19"
+            stroke={iconColor}
+            strokeWidth="3"
+            x="1.5"
+            y="1.5"
+            width="99"
+            height="73"
+            rx="3"
+          ></rect>
+        </g>
+      </g>
+    </svg>
+  );
+};
+
+ImageFallbackIcon.propTypes = {
+  width: PropTypes.object,
+  height: PropTypes.object,
+  iconColor: PropTypes.object
+};

package/src/components/Svgs/key.js

@@ -0,0 +1,33 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+export const KeyIcon = ({ height, width, color = "#D5D5D5", positionTop }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      viewBox="0 0 40 40"
+      style={{ position: "relative", top: positionTop }}>
+      <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
+        <g>
+          <g transform="translate(8 8)">
+            <path d="M0 0H24V24H0z"></path>
+            <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)"></path>
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+};
+
+KeyIcon.propTypes = {
+  height: PropTypes.string,
+  width: PropTypes.string,
+  color: PropTypes.string,
+  positionTop: PropTypes.string
+};

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

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

package/src/components/Svgs/liveicon.js

@@ -0,0 +1,13 @@
+import React from "react";
+
+function LiveIcon() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24">
+      <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"></path>
+    </svg>
+  );
+}
+
+export default LiveIcon;

package/src/components/Svgs/lock.js

@@ -0,0 +1,31 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+export const LockIcon = ({ height, width, color = "#D5D5D5", positionTop }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      viewBox="0 0 40 40"
+      style={{ position: "relative", top: positionTop }}>
+      <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
+        <g>
+          <g transform="translate(8 8)">
+            <path d="M0 0H24V24H0z"></path>
+            <g fill={color} fillRule="nonzero" transform="translate(3)">
+              <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"></path>
+            </g>
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+};
+
+LockIcon.propTypes = {
+  height: PropTypes.string,
+  width: PropTypes.string,
+  color: PropTypes.string,
+  positionTop: PropTypes.string
+};

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

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

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

@@ -0,0 +1,17 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+export const ShareIcon = ({ color = "#0D0D0D" }) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+      <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"></path>
+    </svg>
+  );
+};
+
+ShareIcon.propTypes = {
+  color: PropTypes.string
+};

package/src/components/Svgs/star.js

@@ -0,0 +1,28 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+export const StarIcon = ({ width, height, color = "#D5D5D5", positionTop = "" }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      viewBox="0 0 40 40"
+      style={{ position: "relative", top: positionTop }}>
+      <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
+        <g>
+          <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"></path>
+        </g>
+      </g>
+    </svg>
+  );
+};
+
+StarIcon.propTypes = {
+  height: PropTypes.string,
+  width: PropTypes.string,
+  color: PropTypes.string,
+  positionTop: PropTypes.string
+};

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

@@ -0,0 +1,19 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+export const UserFallbackIcon = ({ width = 120, height = 120 }) => {
+  return (
+    <svg width={width} height={height} viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
+      <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"
+      />
+    </svg>
+  );
+};
+
+UserFallbackIcon.propTypes = {
+  width: PropTypes.object,
+  height: PropTypes.object
+};

package/src/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/src/components/Typography/index.js

@@ -0,0 +1,47 @@
+import React from "react";
+import "./style.m.css";
+
+export const Typography = () => {
+  return (
+    <div className="arrow-component">
+      <h2>Typscale</h2>
+      <hr />
+      <span styleName="wrapper">
+        <span>title-h1</span>
+        <h1>These violent delights have violent ends.</h1>
+      </span>
+      <span styleName="wrapper">
+        <span>title-h2</span>
+        <h2>These violent delights have violent ends.</h2>
+      </span>
+      <span styleName="wrapper">
+        <span>title-h3</span>
+        <h2>These violent delights have violent ends.</h2>
+      </span>
+      <span styleName="wrapper">
+        <span>title-h4</span>
+        <h4>These violent delights have violent ends.</h4>
+      </span>
+      <span styleName="wrapper">
+        <span>paragraph</span>
+        <p>These violent delights have violent ends.</p>
+      </span>
+      <span styleName="wrapper">
+        <span>paragraph-alt</span>
+        <p className="p-alt">These violent delights have violent ends.</p>
+      </span>
+      <span styleName="wrapper">
+        <span>author name</span>
+        <div className="author-name">These violent delights have violent ends.</div>
+      </span>
+      <span styleName="wrapper">
+        <span>section-tag</span>
+        <div className="section-tag">These violent delights have violent ends.</div>
+      </span>
+      <span styleName="wrapper">
+        <span>timestamp</span>
+        <div className="time">These violent delights have violent ends.</div>
+      </span>
+    </div>
+  );
+};

package/src/components/Typography/stories.js

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

package/src/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;
+  }
+}