@thecb/components 2.2.0

package/src/components/atoms/icons/ChevronIcon.js

@@ -0,0 +1,51 @@
+import React from "react";
+import { fallbackValues } from "./Icons.theme";
+import { themeComponent } from "../../../util/themeUtils";
+
+const ChevronIcon = ({ themeValues }) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      style={{ display: "inline-block", verticalAlign: "text-bottom" }}
+    >
+      <defs>
+        <polygon
+          id={`icon-chevron-path-1`}
+          points="10.4099998 6 9 7.40999976 13.5799996 11.9999996 9 16.5899995 10.4099998 17.9999993 16.4099994 11.9999996"
+        />
+      </defs>
+      <g id={`icon-chevron-Icon/Chevron-Down`} fill="none" fillRule="evenodd">
+        <mask id={`icon-chevron-mask-2`}>
+          <use
+            fill={themeValues.singleIconColor}
+            xlinkHref={`#icon-chevron-path-1`}
+          />
+        </mask>
+
+        <use
+          fill={themeValues.singleIconColor}
+          id={`icon-chevron-Fill-2`}
+          xlinkHref={`#icon-chevron-path-1`}
+        />
+        <g
+          id="Colors/Blue-Dark"
+          mask={`url(#icon-chevron-mask-2)`}
+          fill={themeValues.singleIconColor}
+        >
+          <rect id={`icon-chevron-rect`} width="24" height="24" />
+        </g>
+      </g>
+    </svg>
+  );
+};
+
+export default themeComponent(
+  ChevronIcon,
+  "Icons",
+  fallbackValues,
+  "secondary"
+);

package/src/components/atoms/icons/ForgotPasswordIcon.js

@@ -0,0 +1,46 @@
+import React from "react";
+import { fallbackValues } from "./Icons.theme";
+import { themeComponent } from "../../../util/themeUtils";
+
+const ForgotPasswordIcon = ({ themeValues }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      width="100"
+      height="100"
+      viewBox="0 0 100 100"
+    >
+      <defs>
+        <path id="prefix__a" d="M0 0h100v100H0z" />
+        <path
+          d="M72.432 59.997l.305.004c6.587.162 11.878 5.552 11.878 12.178l-.004.305c-.162 6.587-5.553 11.878-12.179 11.878l-.304-.003c-6.588-.162-11.878-5.554-11.878-12.18 0-6.728 5.454-12.182 12.182-12.182zm-.092 16.098c-.85 0-1.482.578-1.482 1.36 0 .765.632 1.343 1.482 1.343s1.502-.578 1.502-1.343c0-.782-.652-1.36-1.502-1.36zM72.597 67c-1.502 0-2.708.612-3.597 1.479l1.304 1.02c.573-.51 1.206-.867 1.996-.867 1.008 0 1.601.544 1.601 1.326 0 1.513-3.004 2.482-2.589 4.947h2.036c-.257-2.176 2.806-2.924 2.806-5.083 0-1.853-1.482-2.822-3.557-2.822z"
+          id="prefix__c"
+        />
+      </defs>
+      <g fill="none" fillRule="evenodd">
+        <mask id="prefix__b" fill={themeValues.primaryColor}>
+          <use xlinkHref="#prefix__a" />
+        </mask>
+        <path
+          d="M63 46a7 7 0 017 7v7.24c.786-.16 1.6-.243 2.432-.243l.305.004c6.587.162 11.878 5.552 11.878 12.178l-.004.305c-.162 6.587-5.553 11.878-12.179 11.878l-.304-.003a12.136 12.136 0 01-7.944-3.215L60.229 84H37.62L24 74.764V53a7 7 0 017-7h32z"
+          fill={themeValues.primaryColor}
+          mask="url(#prefix__b)"
+        />
+        <path
+          d="M50 13c20.435 0 37 16.565 37 37 0 5.896-1.38 11.47-3.833 16.418A12.178 12.178 0 0072.737 60l-.305-.004c-1.708 0-3.334.352-4.81.987v-8.33a5.276 5.276 0 00-5.058-5.272l-.217-.004H31.653a5.276 5.276 0 00-5.271 5.058l-.004.217V59h24.14a1.5 1.5 0 01.145 2.993l-.144.007H26.377v8H46.52a1.5 1.5 0 01.145 2.993l-.145.007H26.377v1.453C32.494 80.363 40.822 84 50 84c4.997 0 9.742-1.078 14.015-3.014.823.787 1.757 1.46 2.775 1.993A36.835 36.835 0 0150 87c-20.435 0-37-16.565-37-37s16.565-37 37-37zm0 3c-18.778 0-34 15.222-34 34 0 1.699.125 3.368.365 5H23.5l.001-2.347a8.153 8.153 0 017.904-8.15l.25-.003 1.345-.001L33 34c0-7.732 6.268-14 14-14 7.628 0 13.83 6.1 13.997 13.687L61 34v10.499l1.347.001a8.153 8.153 0 018.15 7.904l.003.25V55H83c.216 0 .425.034.62.098.25-1.662.38-3.365.38-5.098 0-18.778-15.222-34-34-34zm-3 8c-5.43 0-9.848 4.327-9.996 9.72L37 34v10.499h20V34c0-5.523-4.477-10-10-10z"
+          fill={themeValues.accentColor}
+          mask="url(#prefix__b)"
+        />
+        <use fill={themeValues.subIconColor} xlinkHref="#prefix__c" />
+      </g>
+    </svg>
+  );
+};
+
+export default themeComponent(
+  ForgotPasswordIcon,
+  "Icons",
+  fallbackValues,
+  "info"
+);

package/src/components/atoms/icons/GoToEmailIcon.js

@@ -0,0 +1,31 @@
+import React from "react";
+import { fallbackValues } from "./Icons.theme";
+import { themeComponent } from "../../../util/themeUtils";
+
+const GoToEmailIcon = ({ themeValues }) => {
+  return (
+    <svg width="100" height="100" viewBox="0 0 100 100">
+      <title>{"Large Icons/Email - Go to"}</title>
+      <defs>
+        <path id="prefix__a" d="M0 0h100v100H0z" />
+      </defs>
+      <g fill="none" fillRule="evenodd">
+        <mask id="prefix__b" fill={themeValues.primaryColor}>
+          <use xlinkHref="#prefix__a" />
+        </mask>
+        <path
+          d="M75.21 27c1.474 0 4.14 3.11 7.994 9.332 0 0 1.162 4.471 1.618 10.353H60.557a1.94 1.94 0 00-1.073.322l-.114.08a1.99 1.99 0 00-.207.184l-.093.101a2.005 2.005 0 00-.484 1.313v.376c0 .251.045.492.129.713l.054.13c.06.129.13.25.214.361l.086.108a2 2 0 00.094.102l.101.096a1.977 1.977 0 00.38.263l.082.041.128.055c.13.05.268.088.411.11l.145.016.147.005H85a45.807 45.807 0 01-.256 5.057H60.557a1.95 1.95 0 00-1.394.586l-.093.101c-.03.036-.06.072-.087.109l-.08.115c-.2.313-.317.687-.317 1.089v.376c0 .251.045.491.129.712l.054.13a1.97 1.97 0 001.788 1.158h23.44c-.433 1.77-1.03 3.475-1.825 5.055H60.557c-.095 0-.187.007-.278.02l-.036.006-.118.023-.138.037a1.945 1.945 0 00-.43.19l-.073.047-.114.08a1.99 1.99 0 00-.207.184l-.093.101a2.006 2.006 0 00-.484 1.312v.378c0 .25.045.49.129.712l.054.13c.06.129.13.25.214.361l.086.108c.304.355.73.6 1.21.669l.13.014.148.006h18.938a37.834 37.834 0 01-4.285 5.056H60.556a1.95 1.95 0 00-1.393.586l-.093.101c-.03.036-.06.072-.087.109l-.08.115c-.2.313-.317.687-.317 1.088v.377a2.008 2.008 0 00.785 1.597l.112.08c.039.026.078.05.119.072l.124.065c.252.12.534.186.83.186h9.322c-9.313 6.286-18.815 6.622-19.679 6.64l-.064.001.108-16.602H14.497c-1.379 0-2.497-1.133-2.497-2.531V44.049c0-.105.006-.208.018-.31l.001-.417a.42.42 0 01.23-.38 2.506 2.506 0 011.8-1.385V38.22a.41.41 0 00-.401-.42h-.988a.411.411 0 01-.402-.418v-.895a.42.42 0 01.32-.407c.4-.096.752-.202 1.053-.317a5.652 5.652 0 001.01-.515.383.383 0 01.204-.06h1.37a.41.41 0 01.401.418v5.91h33.809L50.52 27z"
+          fill={themeValues.primaryColor}
+          mask="url(#prefix__b)"
+        />
+        <path
+          d="M50.295 13a36.365 36.365 0 0123.033 8.19C81.912 28.173 87 38.667 87 50c0 20.43-16.429 37-36.705 37-12.763 0-24.002-6.566-30.579-16.527h-5.043a3.704 3.704 0 01-3.695-3.513l-.005-.196V49.787A10.34 10.34 0 015 40.392C5 34.685 9.586 30.06 15.245 30.06c1.303 0 2.55.246 3.697.693C25.386 20.108 37.015 13 50.295 13zm31.459 23.331H51.423v4.044h1.776a3.704 3.704 0 013.694 3.514l.005.196v22.679a3.704 3.704 0 01-3.502 3.704l-.197.005-1.776-.001v14.069c18.196-.595 32.812-15.522 33.109-33.97l.004-.571c0-4.795-.973-9.429-2.782-13.669zM49.166 70.472l-26.46.001c6.027 8.259 15.607 13.713 26.46 14.068V70.472zm5.323-23.776L35.526 58.583a2.942 2.942 0 01-3.004.103l-.177-.103-13.552-8.494a10.22 10.22 0 01-5.413.466l.001 16.209c0 .69.513 1.25 1.16 1.317l.132.006h38.526c.664 0 1.218-.516 1.284-1.187l.007-.136V46.696zm-1.29-3.935H25.22a10.346 10.346 0 01-4 6.026l12.413 7.78c.177.11.345.126.52.047l.087-.047 20.236-12.682A1.303 1.303 0 0053.2 42.76zm-36.81-7.483h-1.368a.384.384 0 00-.204.06c-.328.209-.665.38-1.01.512-.3.115-.652.22-1.052.315a.417.417 0 00-.32.404v.89c0 .23.18.417.402.417h.987c.222 0 .402.185.402.416v4.238c0 .23-.18.416-.402.416h-1.226a.41.41 0 00-.402.416v1.302c0 .23.18.417.402.417h5.493a.41.41 0 00.402-.417v-1.302a.41.41 0 00-.402-.416h-.898a.41.41 0 01-.402-.416v-6.836c0-.229-.18-.416-.401-.416zm33.906-19.837c-12.34 0-23.16 6.59-29.186 16.477a10.346 10.346 0 014.38 8.457h23.677V26.169c0-.579.445-1.055 1.014-1.112l.115-.006h23.694a34.712 34.712 0 00-2.225-1.974 33.882 33.882 0 00-20.391-7.62l-.538-.012-.54-.004zm6.39 13.599a2.024 2.024 0 00-1.97 2.073 2.021 2.021 0 002.056 1.988 2.023 2.023 0 001.97-2.073 2.02 2.02 0 00-2.055-1.988zm7.023 0a2.023 2.023 0 00-1.971 2.073 2.021 2.021 0 002.056 1.988 2.023 2.023 0 001.97-2.073 2.02 2.02 0 00-2.055-1.988zm7.022 0a2.024 2.024 0 00-1.972 2.073 2.023 2.023 0 002.057 1.988 2.023 2.023 0 001.97-2.073 2.02 2.02 0 00-2.055-1.988z"
+          fill={themeValues.accentColor}
+          mask="url(#prefix__b)"
+        />
+      </g>
+    </svg>
+  );
+};
+
+export default themeComponent(GoToEmailIcon, "Icons", fallbackValues, "info");

package/src/components/atoms/icons/Icons.theme.js

@@ -0,0 +1,38 @@
+import {
+  WHITE,
+  BRIGHT_GREY,
+  MATISSE_BLUE,
+  SEA_GREEN,
+  BLUSH_RED
+} from "../../../constants/colors";
+
+const primaryColor = {
+  info: `${WHITE}`,
+  success: `${WHITE}`,
+  error: `${WHITE}`
+};
+
+const accentColor = {
+  info: `${BRIGHT_GREY}`,
+  success: `${BRIGHT_GREY}`,
+  error: `${BRIGHT_GREY}`
+};
+
+const subIconColor = {
+  info: `${MATISSE_BLUE}`,
+  success: `${SEA_GREEN}`,
+  error: `${BLUSH_RED}`
+};
+
+const singleIconColor = {
+  primary: `${MATISSE_BLUE}`,
+  secondary: `${BRIGHT_GREY}`,
+  darkMode: `${WHITE}`
+};
+
+export const fallbackValues = {
+  primaryColor,
+  accentColor,
+  subIconColor,
+  singleIconColor
+};

package/src/components/atoms/icons/PaymentMethodIcon.js

@@ -0,0 +1,42 @@
+import React from "react";
+import { fallbackValues } from "./Icons.theme";
+import { themeComponent } from "../../../util/themeUtils";
+
+const PaymentMethodIcon = ({ themeValues }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      width="100"
+      height="100"
+      viewBox="0 0 100 100"
+    >
+      <defs>
+        <path id="a" d="M0 0H100V100H0z"></path>
+      </defs>
+      <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
+        <mask id="b" fill={themeValues.primaryColor}>
+          <use xlinkHref="#a"></use>
+        </mask>
+        <path
+          fill={themeValues.primaryColor}
+          d="M91.744 23.436v36.051H50v13.52c0 .869-.665 1.581-1.513 1.654l-.142.006H23.098c-12.52-18.823-8.552-28.462-8.552-28.462h12.685v-22.77h64.513z"
+          mask="url(#b)"
+        ></path>
+        <path
+          fill={themeValues.accentColor}
+          fillRule="nonzero"
+          d="M50 12.725l-.001.275.377.004a36.649 36.649 0 0122.522 8.137c.517.417 1.022.846 1.513 1.288h17.333c.519 0 .946.393 1 .897l.006.11v36.051c0 .52-.392.946-.897 1.001l-.11.006h-6.7C80.464 75.612 66.42 86.617 49.809 86.617c-12.773 0-24.027-6.506-30.628-16.384a36.74 36.74 0 01-1.671-2.656h-.266l-.001-.475a36.268 36.268 0 01-4.518-17.576c0-20.125 16.36-36.471 36.659-36.796l.616-.005zm32.496 47.769l-32.438-.001v12.515a2.66 2.66 0 01-2.482 2.66l-.167.006H27.41c5.945 5.002 13.617 8.066 22.013 8.2l.576.005-.001.308.278-.001c15.053-.201 27.771-10.077 32.22-23.692zm-34.452-1.956H16.546c.38 1.455.854 2.872 1.414 4.245h24.95v4.794H20.37c.065.108.13.216.197.323a34.607 34.607 0 004.647 5.76H47.41c.317 0 .583-.24.628-.556l.007-.096v-14.47zm-6.134 5.244H18.386c.426.955.893 1.887 1.4 2.794H41.91v-2.794zm48.826-39.34H28.237l-.001 20.756h19.173a2.657 2.657 0 012.644 2.499l.005.168V58.48l40.678.001V24.442zM67.18 48.726l.227.144c.832.548 3.055 2.145 2.967 2.087l-.017-.012.327.227c.429.294.821.55 1.197.782 1.432.882 2.54 1.326 3.24 1.278.647-.044 1.111-.13 1.577-.288l.2-.072c.22-.083 2.384-1.103 3.538-1.559 1.708-.675 3.21.02 4.406 1.48.492.6.832 1.194 1.018 1.612a.83.83 0 11-1.515.677l-.092-.185a6.632 6.632 0 00-.694-1.053c-.79-.963-1.612-1.343-2.513-.987l-.306.124c-1.143.475-2.982 1.34-3.252 1.442-.694.264-1.356.404-2.254.465-1.15.079-2.513-.467-4.224-1.52-.4-.247-.813-.518-1.262-.826l-.502-.353c-.543-.391-2.195-1.572-2.768-1.945l-.137-.086c-1.814-1.063-4.339 1.324-6.108 4.95a.83.83 0 11-1.492-.728c2.172-4.451 5.356-7.46 8.44-5.654zM15.53 47.161l-.036.523a34.912 34.912 0 00-.003 4.214l32.554-.001v-4.032c0-.33-.237-.6-.542-.646l-.093-.007H15.846c-.11 0-.217-.018-.317-.051zm.205-1.957h.002l.11-.006h10.377V24.793c-5.594 5.277-9.418 12.408-10.49 20.411zM84.248 28.18v1.61c1.291.235 2.394.705 3.347 1.404l-1.808 2.331c-1.193-.783-2.497-1.174-3.652-1.174-.876 0-1.305.323-1.305.766v.034c0 .544.448.782 2.274 1.157 2.981.595 4.845 1.48 4.845 3.709v.034c0 2.002-1.43 3.335-3.701 3.744v1.565h-3.442v-1.586c-1.598-.263-3.068-.868-4.242-1.817l2.012-2.195c1.304.935 2.72 1.43 4.229 1.43.988 0 1.51-.308 1.51-.818v-.034c0-.51-.429-.766-2.217-1.157-2.777-.578-4.92-1.293-4.92-3.727v-.033c0-1.852 1.35-3.272 3.628-3.686V28.18h3.442zm-25.71 11.978a.83.83 0 01.105 1.654l-.105.006H31.026a.83.83 0 01-.104-1.653l.104-.007h27.512zm-11.384-5.692a.83.83 0 01.104 1.653l-.104.007H31.026a.83.83 0 01-.104-1.654l.104-.006h16.128zm10.436-5.692a.83.83 0 01.104 1.653l-.104.006H45.256a.83.83 0 01-.104-1.653l.104-.006H57.59zm-16.128 0a.83.83 0 01.104 1.653l-.104.006H31.026a.83.83 0 01-.104-1.653l.104-.006h10.436zm8.347-13.345a34.23 34.23 0 00-20.796 7l41.593.001a34.223 34.223 0 00-20.797-7z"
+          mask="url(#b)"
+        ></path>
+      </g>
+    </svg>
+  );
+};
+
+export default themeComponent(
+  PaymentMethodIcon,
+  "Icons",
+  fallbackValues,
+  "info"
+);

package/src/components/atoms/icons/PaymentsIconSmall.js

@@ -0,0 +1,63 @@
+import React from "react";
+import { fallbackValues } from "./Icons.theme";
+import { themeComponent } from "../../../util/themeUtils";
+
+const PaymentsIconSmall = ({ themeValues }) => {
+  return (
+    <svg
+      width="20px"
+      height="22px"
+      viewBox="0 0 20 22"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      style={{ display: "inline-block", verticalAlign: "text-bottom" }}
+    >
+      <defs>
+        <rect
+          id="path-1-paymentssmall"
+          x="0"
+          y="0"
+          width="29"
+          height="27"
+        ></rect>
+      </defs>
+      <g
+        id="Random-Icon-Work"
+        stroke="none"
+        strokeWidth="1"
+        fill="none"
+        fillRule="evenodd"
+      >
+        <g id="Header/Desktop/Menu">
+          <g id="Header/Desktop/Menu/Payments-Tab">
+            <g>
+              <g id="Payments">
+                <g id="file-invoice">
+                  <mask id="mask-2-paymentssmall" fill="white">
+                    <use xlinkHref="#path-1-paymentssmall"></use>
+                  </mask>
+                  <g id="Mask-paymentssmall"></g>
+                  <path
+                    d="M18.7499678,8.75002682 L18.7499678,8.53908983 C18.7499678,8.3047152 18.6679369,8.10549729 18.5038747,7.941435 L18.5038747,7.941435 L15.0585704,4.49613071 C14.8945081,4.33206843 14.6952902,4.25003755 14.4609155,4.25003755 L14.4609155,4.25003755 L14.2499785,4.25003755 L14.2499785,8.75002682 L18.7499678,8.75002682 Z M17.9062198,22.2499946 C18.1405944,22.2499946 18.3398124,22.1679638 18.5038747,22.0039015 C18.6679369,21.8398392 18.7499678,21.6406213 18.7499678,21.4062466 L18.7499678,21.4062466 L18.7499678,9.87502414 L13.9687292,9.87502414 C13.7343546,9.87502414 13.5351367,9.79299326 13.3710744,9.62893098 C13.2070121,9.46486869 13.1249812,9.26565077 13.1249812,9.03127615 L13.1249812,9.03127615 L13.1249812,4.25003755 L6.09374799,4.25003755 C5.85937337,4.25003755 5.66015545,4.33206843 5.49609316,4.49613071 C5.33203088,4.660193 5.25,4.85941092 5.25,5.09378554 L5.25,5.09378554 L5.25,21.4062466 C5.25,21.6406213 5.33203088,21.8398392 5.49609316,22.0039015 C5.66015545,22.1679638 5.85937337,22.2499946 6.09374799,22.2499946 L6.09374799,22.2499946 L17.9062198,22.2499946 Z M10.5937373,7.6250295 L7.78124397,7.6250295 C7.71093163,7.6250295 7.64647884,7.59573288 7.58788505,7.53713909 C7.52929126,7.4785453 7.49999464,7.41409251 7.49999464,7.34378017 L7.49999464,7.34378017 L7.49999464,6.78128152 C7.49999464,6.71096918 7.52929126,6.64651639 7.58788505,6.5879226 C7.64647884,6.52932881 7.71093163,6.50003219 7.78124397,6.50003219 L7.78124397,6.50003219 L10.5937373,6.50003219 C10.6640496,6.50003219 10.7285024,6.52932881 10.7870962,6.5879226 C10.84569,6.64651639 10.8749866,6.71096918 10.8749866,6.78128152 L10.8749866,6.78128152 L10.8749866,7.34378017 C10.8749866,7.41409251 10.84569,7.4785453 10.7870962,7.53713909 C10.7285024,7.59573288 10.6640496,7.6250295 10.5937373,7.6250295 L10.5937373,7.6250295 Z M10.5937373,9.87502414 L7.78124397,9.87502414 C7.71093163,9.87502414 7.64647884,9.84572751 7.58788505,9.78713372 C7.52929126,9.72853994 7.49999464,9.66408714 7.49999464,9.59377481 L7.49999464,9.59377481 L7.49999464,9.03127615 C7.49999464,8.96096382 7.52929126,8.89651103 7.58788505,8.83791724 C7.64647884,8.77932345 7.71093163,8.75002682 7.78124397,8.75002682 L7.78124397,8.75002682 L10.5937373,8.75002682 C10.6640496,8.75002682 10.7285024,8.77932345 10.7870962,8.83791724 C10.84569,8.89651103 10.8749866,8.96096382 10.8749866,9.03127615 L10.8749866,9.03127615 L10.8749866,9.59377481 C10.8749866,9.66408714 10.84569,9.72853994 10.7870962,9.78713372 C10.7285024,9.84572751 10.6640496,9.87502414 10.5937373,9.87502414 L10.5937373,9.87502414 Z M15.9374745,16.625008 L8.06249329,16.625008 C7.89843101,16.625008 7.76366588,16.5722738 7.65819738,16.4668053 C7.55272888,16.3613368 7.49999464,16.2265717 7.49999464,16.0625094 L7.49999464,16.0625094 L7.49999464,12.6875174 C7.49999464,12.5234551 7.55272888,12.38869 7.65819738,12.2832215 C7.76366588,12.177753 7.89843101,12.1250188 8.06249329,12.1250188 L8.06249329,12.1250188 L15.9374745,12.1250188 C16.1015368,12.1250188 16.2363019,12.177753 16.3417704,12.2832215 C16.4472389,12.38869 16.4999732,12.5234551 16.4999732,12.6875174 L16.4999732,12.6875174 L16.4999732,16.0625094 C16.4999732,16.2265717 16.4472389,16.3613368 16.3417704,16.4668053 C16.2363019,16.5722738 16.1015368,16.625008 15.9374745,16.625008 L15.9374745,16.625008 Z M15.3749759,15.5000107 L15.3749759,13.2500161 L8.62499195,13.2500161 L8.62499195,15.5000107 L15.3749759,15.5000107 Z M16.2187238,20 L13.4062306,20 C13.3359182,20 13.2714654,19.9707034 13.2128716,19.9121096 C13.1542779,19.8535158 13.1249812,19.789063 13.1249812,19.7187507 L13.1249812,19.7187507 L13.1249812,19.156252 C13.1249812,19.0859397 13.1542779,19.0214869 13.2128716,18.9628931 C13.2714654,18.9042993 13.3359182,18.8750027 13.4062306,18.8750027 L13.4062306,18.8750027 L16.2187238,18.8750027 C16.2890362,18.8750027 16.353489,18.9042993 16.4120828,18.9628931 C16.4706766,19.0214869 16.4999732,19.0859397 16.4999732,19.156252 L16.4999732,19.156252 L16.4999732,19.7187507 C16.4999732,19.789063 16.4706766,19.8535158 16.4120828,19.9121096 C16.353489,19.9707034 16.2890362,20 16.2187238,20 L16.2187238,20 Z"
+                    id="f"
+                    fill={themeValues.singleIconColor}
+                    fillRule="nonzero"
+                    mask="url(#mask-2-paymentssmall)"
+                  ></path>
+                </g>
+              </g>
+            </g>
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+};
+
+export default themeComponent(
+  PaymentsIconSmall,
+  "Icons",
+  fallbackValues,
+  "primary"
+);

package/src/components/atoms/icons/ProfileIconSmall.js

@@ -0,0 +1,44 @@
+import React from "react";
+import { fallbackValues } from "./Icons.theme";
+import { themeComponent } from "../../../util/themeUtils";
+
+const ProfileIconSmall = ({ themeValues }) => {
+  return (
+    <svg
+      width="31px"
+      height="31px"
+      viewBox="0 0 31 31"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+    >
+      <g
+        id="Random-Icon-Work"
+        stroke="none"
+        strokeWidth="1"
+        fill="none"
+        fillRule="evenodd"
+      >
+        <g
+          id="Header/Desktop/Menu"
+          fill={themeValues.singleIconColor}
+          fillRule="nonzero"
+        >
+          <g id="My-profile">
+            <path
+              d="M15.0155892,30.3906169 C17.7200101,30.3906169 20.222608,29.7145114 22.5233838,28.3623014 C24.8241596,27.0100914 26.6506529,25.1835981 28.0028629,22.8828223 C29.3550729,20.5820466 30.0311784,18.0794487 30.0311784,15.3750277 C30.0311784,12.6706068 29.3550729,10.1680089 28.0028629,7.86723312 C26.6506529,5.56645735 24.8241596,3.739964 22.5233838,2.38775399 C20.222608,1.03554398 17.7200101,0.359438516 15.0155892,0.359438516 C12.3111683,0.359438516 9.80857036,1.03554398 7.5077946,2.38775399 C5.20701884,3.739964 3.38052549,5.56645735 2.02831548,7.86723312 C0.676105467,10.1680089 0,12.6706068 0,15.3750277 C0,18.0794487 0.676105467,20.5820466 2.02831548,22.8828223 C3.38052549,25.1835981 5.20701884,27.0100914 7.5077946,28.3623014 C9.80857036,29.7145114 12.3111683,30.3906169 15.0155892,30.3906169 Z M15.0155892,16.8281493 C13.5624677,16.8281493 12.3111683,16.3034106 11.2616919,15.2539343 C10.2122155,14.2044579 9.6874769,12.9531585 9.6874769,11.500037 C9.6874769,10.0469154 10.2122155,8.79561601 11.2616919,7.74613965 C12.3111683,6.6966633 13.5624677,6.17192466 15.0155892,6.17192466 C16.4687107,6.17192466 17.7200101,6.6966633 18.7694865,7.74613965 C19.8189629,8.79561601 20.3437015,10.0469154 20.3437015,11.500037 C20.3437015,12.9531585 19.8189629,14.2044579 18.7694865,15.2539343 C17.7200101,16.3034106 16.4687107,16.8281493 15.0155892,16.8281493 Z M15.0155892,27 C13.2799159,27 11.6350637,26.6367196 10.0810307,25.9101588 C8.52699759,25.1835981 7.20506095,24.1744856 6.1152198,22.8828223 C6.7206871,21.7929812 7.5481594,20.9150536 8.59763575,20.2490395 C9.64711211,19.5830255 10.8176828,19.2500185 12.1093461,19.2500185 C12.2304396,19.2500185 12.371715,19.2702004 12.5331732,19.3105652 C13.3808275,19.5931169 14.2082998,19.7343923 15.0155892,19.7343923 C15.8228786,19.7343923 16.6503509,19.5931169 17.4980052,19.3105652 C17.6594634,19.2702004 17.8007388,19.2500185 17.9218323,19.2500185 C19.2134956,19.2500185 20.3840663,19.5830255 21.4335426,20.2490395 C22.483019,20.9150536 23.3104913,21.7929812 23.9159586,22.8828223 C22.8261175,24.1744856 21.5041808,25.1835981 19.9501477,25.9101588 C18.3961147,26.6367196 16.7512625,27 15.0155892,27 Z"
+              id="user-circle"
+            ></path>
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+};
+
+export default themeComponent(
+  ProfileIconSmall,
+  "Icons",
+  fallbackValues,
+  "primary"
+);

package/src/components/atoms/icons/PropertiesAddIcon.js

@@ -0,0 +1,70 @@
+import React from "react";
+import { fallbackValues } from "./Icons.theme";
+import { themeComponent } from "../../../util/themeUtils";
+const PropertiesAddIcon = ({ themeValues }) => {
+  return (
+    <svg
+      width={100}
+      height={100}
+      viewBox="0 0 100 100"
+      style={{ paddingLeft: "16px" }}
+    >
+      <title>{"8330C897-662E-49C5-B716-3661563AA1FB@1.00x"}</title>
+      <defs>
+        <path id="prefix__a" d="M0 0h100v100H0z" />
+        <path id="prefix__c" d="M.926.555h81v83h-81z" />
+        <path
+          id="prefix__e"
+          d="M16.625 11.375h-5.25v5.25h-1.75v-5.25h-5.25v-1.75h5.25v-5.25h1.75v5.25h5.25z"
+        />
+      </defs>
+      <g transform="translate(-10 -5)" fill="none" fillRule="evenodd">
+        <mask id="prefix__b" fill={themeValues.primaryColor}>
+          <use xlinkHref="#prefix__a" />
+        </mask>
+        <g mask="url(#prefix__b)">
+          <path
+            d="M81.262 37.752a.51.51 0 01-.51.511h-19.62a.51.51 0 01-.51-.51v-1.078a.51.51 0 01.51-.51h19.62a.51.51 0 01.51.51v1.077zM72.078 49.1v-9.016c0-.54.437-.976.976-.976h6.234c.54 0 .976.436.976.976v8.126c0 .54-.437.977-.976.977h-7.124a.086.086 0 01-.086-.087zm7.35 1.954c.461 0 .836.375.836.837v8.405a.836.836 0 01-.836.836h-6.514a.836.836 0 01-.836-.836v-9.242h7.35zM61.652 48.29v-8.287c0-.495.4-.896.896-.896h6.393c.496 0 .896.4.896.896v9.176c0 .004-.003.007-.005.007h-7.284a.896.896 0 01-.896-.896zm.992 2.763h7.091c.056 0 .102.046.102.103v8.983a.992.992 0 01-.991.992h-6.202a.992.992 0 01-.992-.992v-8.093c0-.549.444-.993.992-.993zm18.618 12.792a.512.512 0 01-.51.512h-19.62a.51.51 0 01-.51-.512v-1.077a.51.51 0 01.51-.51h19.62a.51.51 0 01.51.51v1.077zm-17.345-46.17l-1.864-1.252-21.399 14.39v42.63h3.388V36.798c0-.351.285-.635.635-.635h12.69c.35 0 .635.284.635.635v36.643H78.22a34.494 34.494 0 005.243-8.285V30.81L63.917 17.676zm-17.755-4.948v5.888l4.626-3.141V8.283h-4.626v4.444zm42.13 15.646l-25.076-16.85a2.098 2.098 0 00-2.328 0L40.8 25.02l-4.96 3.333a.439.439 0 00-.12.61l.839 1.262a.443.443 0 00.614.122l1.079-.725 23.8-15.99 24.91 16.735a.406.406 0 00.565-.113l.878-1.32a.405.405 0 00-.112-.561zm-50.04 31.33v13.739h-9.527c-.094-.06-.18-.132-.269-.198a5.425 5.425 0 01-.398-.33c-.082-.075-.166-.149-.244-.23a5.18 5.18 0 01-.478-.58c-.054-.075-.1-.154-.15-.231a4.874 4.874 0 01-.319-.589c-.027-.058-.058-.113-.082-.17a4.912 4.912 0 01-.253-.812c-.015-.07-.028-.14-.041-.21a5.032 5.032 0 01-.092-.909c.001-3.173 2.94-5.695 6.217-4.953a.957.957 0 001.055-.465c.186-.33.398-.641.619-.943.048-.064.096-.13.145-.193.223-.287.458-.562.711-.82.042-.042.085-.08.128-.121.234-.23.48-.45.736-.653l.15-.12c.283-.217.58-.416.887-.6.066-.04.134-.076.201-.115.307-.173.621-.334.946-.473.015-.006.028-.014.044-.02a.08.08 0 00.014-.004zm9.815-4.466a1.377 1.377 0 010 2.752 1.376 1.376 0 010-2.752z"
+            fill="#FFF"
+          />
+          <g transform="translate(8.862 5.41)">
+            <mask id="prefix__d" fill={themeValues.primaryColor}>
+              <use xlinkHref="#prefix__c" />
+            </mask>
+            <path
+              d="M34.984 4.96v2.655C17.308 10.446 3.759 25.799 3.759 44.259a36.997 36.997 0 008.639 23.773 37.648 37.648 0 002.19 2.402c6.724 6.755 16.027 10.943 26.29 10.943 10.263 0 19.565-4.188 26.29-10.943a37.226 37.226 0 007.433-10.697 36.887 36.887 0 002.403-6.984c.642-2.73.992-5.571.992-8.494a37.36 37.36 0 00-.983-8.532l-.008-5-.001-.512v-2.398c.034.074.573 1.154.59 1.196a39.725 39.725 0 013.023 15.246c0 5.895-1.3 11.489-3.613 16.525a39.357 39.357 0 01-2.402 4.461 40.194 40.194 0 01-1.898 2.787 40.05 40.05 0 01-1.962 2.402c-7.29 8.306-17.971 13.564-29.864 13.564-21.913 0-39.74-17.827-39.74-39.739 0-19.91 14.718-36.443 33.846-39.3zm36.905 51.887a.51.51 0 01.51.51v1.079a.51.51 0 01-.51.51H52.271a.51.51 0 01-.51-.51v-1.079a.51.51 0 01.51-.51zM44.243 4.676c1.59.137 3.17.356 4.726.68l-1.127.791L45.86 7.48l-.23-.031c-.46-.06-.924-.093-1.387-.136zm27.646 26.079H52.271a.51.51 0 00-.51.51v1.077c0 .282.228.51.51.51H71.89a.51.51 0 00.51-.51v-1.077a.51.51 0 00-.51-.51zM52.791 54.729c0 .548.444.992.991.992h6.201a.992.992 0 00.992-.992v-8.983a.102.102 0 00-.102-.102h-7.09a.991.991 0 00-.992.991v8.094zm10.426.156c0 .461.374.836.836.836h6.512a.836.836 0 00.836-.836V46.48a.836.836 0 00-.836-.836h-7.348v9.24zm-2.248-11.11c.003 0 .006-.002.006-.006v-9.176c0-.495-.4-.896-.895-.896h-6.394a.896.896 0 00-.895.896v8.287c0 .494.4.896.895.896h7.283zm9.456 0c.54 0 .976-.437.976-.976v-8.126a.976.976 0 00-.976-.976h-6.233a.976.976 0 00-.975.976v9.016c0 .047.038.087.085.087h7.123zm9.007-20.813L54.354 6.112a2.093 2.093 0 00-2.327.001l-20.09 13.498-4.96 3.332a.44.44 0 00-.12.61l.84 1.262a.44.44 0 00.613.122l1.08-.725 23.8-15.99L78.1 24.956a.405.405 0 00.565-.112l.879-1.322a.405.405 0 00-.112-.56zM37.3 2.873v4.443l.001 5.889 4.625-3.142V2.873H37.3zm.53 48.33a1.375 1.375 0 102.75.002 1.375 1.375 0 00-2.75-.002zm-8.44-15.71l-19.902-.034.055 23.686 7.837-.018a7.09 7.09 0 01.593-.6V54.94c0-.143.116-.26.26-.26h6.418c.144 0 .26.117.26.26v.105a11.378 11.378 0 012.762-2.048v-2.73c0-.142.116-.258.26-.258h1.457v-.831h-1.457a.26.26 0 01-.26-.26v-3.16c0-.143.116-.259.26-.259h1.457v-.831h-1.457a.26.26 0 01-.26-.26v-3.16a.26.26 0 01.26-.26h1.457v-.83h-1.457a.26.26 0 01-.26-.26v-3.16a.26.26 0 01.26-.26h1.457v-.984zm0 32.539V54.29a9.455 9.455 0 00-4.582 4.064.957.957 0 01-1.054.465c-3.277-.743-6.216 1.78-6.217 4.953 0 1.784.93 3.352 2.325 4.259h9.528zm52.083-43.226l-.879 1.323a2.721 2.721 0 01-2.268 1.214c-.468 0-.92-.125-1.326-.353l.004 3.225v22.538a36.91 36.91 0 01-2.402 6.984V25.398L53.19 11.012 32.615 24.837l-.822.567v42.628h3.387V31.389c0-.35.285-.634.636-.634h12.689c.351 0 .635.284.635.634v36.643h20.218a37.648 37.648 0 01-2.19 2.402H14.587a37.633 37.633 0 01-2.19-2.402h4.67a6.959 6.959 0 01-1.46-4.259 6.96 6.96 0 01.805-3.235H9.487a1.394 1.394 0 01-1.392-1.393v-1.734h-1.92c-.3-.788-.576-1.589-.822-2.402h2.742V35.46h-.49v-2.51h2.301l-.001-2.433c0-.2.082-.39.226-.526l3.062-2.896a.723.723 0 011.222.526v5.33h1.125l-.001-2.434c0-.2.082-.39.226-.526l3.061-2.896a.723.723 0 011.223.526v5.33h1.123v-2.434c0-.2.081-.39.225-.526l3.062-2.896a.718.718 0 01.363-.185c.133-.025.276-.033.521.137.239.165.299.371.313.412.016.04.025.106.025.162l.001 5.33h1.124v-2.434c0-.2.081-.39.225-.526l2.359-2.232v-.776a2.735 2.735 0 01-1.326.347c-.926 0-1.784-.46-2.297-1.23l-.84-1.263a2.764 2.764 0 01.76-3.816l9.297-6.248-.001-7.157V4.96l-.001-2.484c0-1.059.862-1.92 1.921-1.92h5.42c1.059 0 1.92.861 1.92 1.92V8.552l6.497-4.365a4.4 4.4 0 014.906.003l25.077 16.848a2.728 2.728 0 01.75 3.768zm-70.585 15.35h4.063a.26.26 0 00.26-.259v-3.16a.26.26 0 00-.26-.26h-4.063a.26.26 0 00-.259.26v3.16c0 .144.117.26.259.26zm5.682 0h4.063a.26.26 0 00.26-.259v-3.16a.26.26 0 00-.26-.26H16.57a.259.259 0 00-.259.26v3.16c0 .144.116.26.259.26zm5.68 0h4.064a.259.259 0 00.258-.259v-3.16a.259.259 0 00-.258-.26H22.25a.26.26 0 00-.26.26v3.16c0 .144.116.26.26.26zm-11.362 13.53h4.063a.26.26 0 00.26-.26v-3.16a.259.259 0 00-.26-.258h-4.063a.26.26 0 00-.259.259v3.16c0 .143.117.26.259.26zm5.682 0h4.063a.26.26 0 00.26-.26v-3.16a.259.259 0 00-.26-.258H16.57a.259.259 0 00-.259.259v3.16c0 .143.116.26.259.26zm5.68 0h4.064a.26.26 0 00.258-.26v-3.16a.259.259 0 00-.258-.258H22.25a.259.259 0 00-.26.259v3.16c0 .143.116.26.26.26zm-11.362-4.51h4.063a.26.26 0 00.26-.26v-3.16a.259.259 0 00-.26-.258h-4.063a.26.26 0 00-.259.259v3.16c0 .144.117.26.259.26zm5.682 0h4.063a.26.26 0 00.26-.26v-3.16a.259.259 0 00-.26-.258H16.57a.259.259 0 00-.259.259v3.16c0 .144.116.26.259.26zm5.68 0h4.064a.259.259 0 00.258-.26v-3.16a.259.259 0 00-.258-.258H22.25a.259.259 0 00-.26.259v3.16c0 .144.116.26.26.26zm-11.362-4.51h4.063a.26.26 0 00.26-.259v-3.16a.26.26 0 00-.26-.26h-4.063a.26.26 0 00-.259.26v3.16c0 .144.117.26.259.26zm5.682 0h4.063a.26.26 0 00.26-.259v-3.16a.26.26 0 00-.26-.26H16.57a.259.259 0 00-.259.26v3.16c0 .144.116.26.259.26zm5.421-.259v-3.16a.26.26 0 01.26-.26h4.063c.143 0 .258.116.258.26v3.16c0 .144-.115.26-.258.26H22.25a.26.26 0 01-.26-.26z"
+              fill={themeValues.accentColor}
+              mask="url(#prefix__d)"
+            />
+          </g>
+        </g>
+        <g mask="url(#prefix__b)">
+          <g transform="translate(59 61)">
+            <circle
+              fill={themeValues.subIconColor}
+              cx={13.3}
+              cy={13.3}
+              r={13.3}
+            />
+            <g transform="translate(3 3)">
+              <mask id="prefix__f" fill={themeValues.primaryColor}>
+                <use xlinkHref="#prefix__e" />
+              </mask>
+              <use fill="#000" xlinkHref="#prefix__e" />
+              <g mask="url(#prefix__f)" fill={themeValues.primaryColor}>
+                <path d="M0 0h21v21H0z" />
+              </g>
+            </g>
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+};
+
+export default themeComponent(
+  PropertiesAddIcon,
+  "Icons",
+  fallbackValues,
+  "info"
+);

package/src/components/atoms/icons/PropertiesIconSmall.js

@@ -0,0 +1,32 @@
+import React from "react";
+import { fallbackValues } from "./Icons.theme";
+import { themeComponent } from "../../../util/themeUtils";
+
+const PropertiesIconSmall = ({ themeValues }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="22px"
+      height="22px"
+      viewBox="-1 0 22 15"
+      version="1.1"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      style={{ display: "inline-block", verticalAlign: "text-bottom" }}
+    >
+      <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
+        <path
+          fill={themeValues.singleIconColor}
+          fillRule="nonzero"
+          d="M16.875 8.5a.297.297 0 00.25-.125l.781-.969a.389.389 0 00.078-.281.397.397 0 00-.109-.25L15.25 4.719V.375a.362.362 0 00-.11-.266.362.362 0 00-.265-.109h-1.75a.362.362 0 00-.266.11.362.362 0 00-.109.265v2.281L9.969.344A1.531 1.531 0 009 0c-.354 0-.667.115-.938.344L.125 6.875a.397.397 0 00-.11.25.389.389 0 00.079.281l.781.969a.297.297 0 00.25.125.457.457 0 00.281-.094L8.75 2.375A.416.416 0 019 2.281c.083 0 .167.032.25.094l7.344 6.031a.457.457 0 00.281.094zM7.125 14a.362.362 0 00.266-.11.362.362 0 00.109-.265v-3.5c0-.104.036-.193.11-.266a.362.362 0 01.265-.109h2.25c.104 0 .193.036.266.11.073.072.109.16.109.265v3.5c0 .104.036.193.11.266.072.073.16.109.265.109H14.5a.723.723 0 00.531-.219.723.723 0 00.219-.531V8.781a.424.424 0 00-.125-.312L9.25 3.656A.416.416 0 009 3.563a.416.416 0 00-.25.093L2.875 8.47a.424.424 0 00-.125.312v4.469c0 .208.073.385.219.531A.723.723 0 003.5 14h3.625z"
+        ></path>
+      </g>
+    </svg>
+  );
+};
+
+export default themeComponent(
+  PropertiesIconSmall,
+  "Icons",
+  fallbackValues,
+  "primary"
+);

package/src/components/atoms/icons/SettingsIconSmall.js

@@ -0,0 +1,63 @@
+import React from "react";
+import { fallbackValues } from "./Icons.theme";
+import { themeComponent } from "../../../util/themeUtils";
+
+const SettingsIconSmall = ({ themeValues }) => {
+  return (
+    <svg
+      width="22px"
+      height="22px"
+      viewBox="0 2 24 24"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      style={{ display: "inline-block", verticalAlign: "text-bottom" }}
+    >
+      <defs>
+        <rect
+          id="path-1-paymentssmall"
+          x="0"
+          y="0"
+          width="29"
+          height="27"
+        ></rect>
+      </defs>
+      <g
+        id="Random-Icon-Work"
+        stroke="none"
+        strokeWidth="1"
+        fill="none"
+        fillRule="evenodd"
+      >
+        <g id="Header/Desktop/Menu">
+          <g id="Header/Desktop/Menu/Settings-Tab">
+            <g>
+              <g id="Payments">
+                <g id="cog">
+                  <mask id="mask-2-paymentssmall" fill="white">
+                    <use xlinkHref="#path-1-paymentssmall"></use>
+                  </mask>
+                  <g id="Mask"></g>
+                  <path
+                    d="M13.9335677,21.7578083 C14.0273176,21.7343707 14.103489,21.6816364 14.1620828,21.5996056 C14.2206766,21.5175747 14.2499732,21.4296843 14.2499732,21.3359343 L14.2499732,19.6132822 C15.0468465,19.3320328 15.7616883,18.9218774 16.3944993,18.3828164 L17.8710583,19.2617205 C17.9648082,19.3085952 18.0585577,19.3203143 18.1523076,19.2968767 C18.2460576,19.2734391 18.3280885,19.2265643 18.3984008,19.156252 C19.2890235,18.195317 19.9335536,17.0937568 20.3319899,15.8515724 C20.3554276,15.7578224 20.349568,15.664073 20.3144118,15.5703231 C20.2792557,15.4765731 20.2148029,15.4062608 20.1210529,15.3593861 L18.644494,14.4804819 C18.7851186,13.6601715 18.7851186,12.8398606 18.644494,12.0195503 L20.1210529,11.1406461 C20.2148029,11.0937714 20.2792557,11.0234591 20.3144118,10.9297091 C20.349568,10.8359592 20.3554276,10.7422098 20.3319899,10.6484598 C19.9335536,9.40627544 19.2890235,8.3047152 18.3984008,7.34378017 C18.3280885,7.27346784 18.2460576,7.22659313 18.1523076,7.20315551 C18.0585577,7.17971789 17.9648082,7.19143697 17.8710583,7.23831168 L16.3944993,8.11721583 C15.7616883,7.57815479 15.0468465,7.16799934 14.2499732,6.88675001 L14.2499732,5.16409787 C14.2499732,5.07034792 14.2206766,4.9824575 14.1620828,4.90042663 C14.103489,4.81839575 14.0273176,4.7656615 13.9335677,4.74222388 C12.6445081,4.46097455 11.355449,4.46097455 10.0663894,4.74222388 C9.97263945,4.7656615 9.89646811,4.81839575 9.83787432,4.90042663 C9.77928053,4.9824575 9.74998391,5.07034792 9.74998391,5.16409787 L9.74998391,6.88675001 C8.95311063,7.16799934 8.23826876,7.57815479 7.60545777,8.11721583 L6.12889879,7.23831168 C6.03514883,7.19143697 5.94139942,7.17971789 5.84764946,7.20315551 C5.75389951,7.22659313 5.67186863,7.27346784 5.6015563,7.34378017 C4.7109336,8.3047152 4.06640353,9.40627544 3.66796716,10.6484598 C3.64452953,10.7422098 3.65038907,10.8359592 3.68554524,10.9297091 C3.72070141,11.0234591 3.7851542,11.0937714 3.87890415,11.1406461 L5.35546313,12.0195503 C5.21483847,12.8398606 5.21483847,13.6601715 5.35546313,14.4804819 L3.87890415,15.3593861 C3.7851542,15.4062608 3.72070141,15.4765731 3.68554524,15.5703231 C3.65038907,15.664073 3.64452953,15.7578224 3.66796716,15.8515724 C4.06640353,17.0937568 4.7109336,18.195317 5.6015563,19.156252 C5.67186863,19.2265643 5.75389951,19.2734391 5.84764946,19.2968767 C5.94139942,19.3203143 6.03514883,19.3085952 6.12889879,19.2617205 L7.60545777,18.3828164 C8.23826876,18.9218774 8.95311063,19.3320328 9.74998391,19.6132822 L9.74998391,21.3359343 C9.74998391,21.4296843 9.77928053,21.5175747 9.83787432,21.5996056 C9.89646811,21.6816364 9.97263945,21.7343707 10.0663894,21.7578083 C11.355449,22.0390576 12.6445081,22.0390576 13.9335677,21.7578083 Z M11.9999785,16.0625094 C11.2265429,16.0625094 10.5644353,15.7871196 10.0136552,15.2363395 C9.46287504,14.6855594 9.18748525,14.0234517 9.18748525,13.2500161 C9.18748525,12.4765804 9.46287504,11.8144728 10.0136552,11.2636927 C10.5644353,10.7129126 11.2265429,10.4375228 11.9999785,10.4375228 C12.7734142,10.4375228 13.4355218,10.7129126 13.9863019,11.2636927 C14.537082,11.8144728 14.8124718,12.4765804 14.8124718,13.2500161 C14.8124718,14.0234517 14.537082,14.6855594 13.9863019,15.2363395 C13.4355218,15.7871196 12.7734142,16.0625094 11.9999785,16.0625094 Z"
+                    id="c"
+                    fill={themeValues.singleIconColor}
+                    fillRule="nonzero"
+                    mask="url(#mask-2-paymentssmall)"
+                  ></path>
+                </g>
+              </g>
+            </g>
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+};
+
+export default themeComponent(
+  SettingsIconSmall,
+  "Icons",
+  fallbackValues,
+  "primary"
+);

package/src/components/atoms/icons/VerifiedEmailIcon.js

@@ -0,0 +1,53 @@
+import React from "react";
+import { fallbackValues } from "./Icons.theme";
+import { themeComponent } from "../../../util/themeUtils";
+
+const VerifiedEmailIcon = ({ themeValues }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      width="100"
+      height="100"
+      viewBox="0 0 100 100"
+    >
+      <defs>
+        <path id="prefix__a" d="M0 0h100v100H0z" />
+        <path
+          d="M58.462.577c6.37 0 11.533 5.164 11.533 11.533 0 6.37-5.163 11.534-11.533 11.534-1.146 0-2.253-.167-3.298-.479v21.598a3.347 3.347 0 01-3.348 3.348H6.87A34.073 34.073 0 01.192 27.799a34.073 34.073 0 014.26-16.55H46.96C47.4 5.281 52.382.577 58.46.577z"
+          id="prefix__c"
+        />
+        <path
+          d="M61.716 33.11c0 6.728 5.454 12.184 12.182 12.184 6.728 0 12.183-5.456 12.183-12.183 0-6.728-5.455-12.182-12.183-12.182s-12.182 5.454-12.182 12.182zm17.206-4.604l1.436 1.436-7.178 7.179-1.436 1.435-4.307-4.307 1.436-1.435 2.87 2.87 7.18-7.178z"
+          id="prefix__d"
+        />
+      </defs>
+      <g fill="none" fillRule="evenodd">
+        <mask id="prefix__b" fill={themeValues.primaryColor}>
+          <use xlinkHref="#prefix__a" />
+        </mask>
+        <g mask="url(#prefix__b)">
+          <use
+            fill={themeValues.primaryColor}
+            xlinkHref="#prefix__c"
+            transform="translate(15.687 21.252)"
+          />
+        </g>
+        <path
+          d="M50.109 12.788a36.58 36.58 0 0124.135 9.041h-.095c-1.259 0-2.47.2-3.604.574a33.797 33.797 0 00-20.436-6.836c-11.968 0-22.49 6.19-28.538 15.544h41.265a11.59 11.59 0 00-.208 2.778H19.956a33.771 33.771 0 00-1.667 3.745l-.235.645.134.083 22.932 14.25c.315.196.639.217.956.065l.118-.065L64.09 39.007c.459.815 1.013 1.57 1.649 2.246L43.66 54.972c-1.19.739-2.604.776-3.817.11l-.19-.11-22.432-13.94a34 34 0 00-1.071 8.493 33.8 33.8 0 005.444 18.45l45.91-.001a1.958 1.958 0 001.953-1.813l.005-.146V43.903c.874.39 1.805.673 2.778.835v21.277a4.737 4.737 0 01-4.52 4.732l-.217.005H23.6c6.224 7.762 15.786 12.731 26.509 12.731 18.754 0 33.958-15.204 33.958-33.958 0-2.982-.387-5.901-1.126-8.698a11.537 11.537 0 001.93-3.208 36.737 36.737 0 011.974 11.906c0 20.289-16.448 36.736-36.736 36.736-20.29 0-36.738-16.447-36.738-36.736 0-20.29 16.448-36.737 36.738-36.737z"
+          fill={themeValues.accentColor}
+          fillRule="nonzero"
+          mask="url(#prefix__b)"
+        />
+        <use fill={themeValues.subIconColor} xlinkHref="#prefix__d" />
+      </g>
+    </svg>
+  );
+};
+
+export default themeComponent(
+  VerifiedEmailIcon,
+  "Icons",
+  fallbackValues,
+  "info"
+);

package/src/components/atoms/icons/index.js

@@ -0,0 +1,28 @@
+import AccountsIcon from "./AccountsIcon";
+import AccountsAddIcon from "./AccountsAddIcon";
+import ForgotPasswordIcon from "./ForgotPasswordIcon";
+import GoToEmailIcon from "./GoToEmailIcon";
+import VerifiedEmailIcon from "./VerifiedEmailIcon";
+import PaymentMethodIcon from "./PaymentMethodIcon";
+import AccountsIconSmall from "./AccountsIconSmall";
+import PaymentsIconSmall from "./PaymentsIconSmall";
+import ProfileIconSmall from "./ProfileIconSmall";
+import SettingsIconSmall from "./SettingsIconSmall";
+import ChevronIcon from "./ChevronIcon";
+import PropertiesAddIcon from "./PropertiesAddIcon";
+import PropertiesIconSmall from "./PropertiesIconSmall";
+export {
+  AccountsIcon,
+  AccountsAddIcon,
+  ForgotPasswordIcon,
+  GoToEmailIcon,
+  VerifiedEmailIcon,
+  PaymentMethodIcon,
+  AccountsIconSmall,
+  PaymentsIconSmall,
+  ProfileIconSmall,
+  SettingsIconSmall,
+  ChevronIcon,
+  PropertiesAddIcon,
+  PropertiesIconSmall
+};

package/src/components/atoms/index.js

@@ -0,0 +1,33 @@
+export { default as Alert } from "./alert";
+export { default as AmountCallout } from "./amount-callout";
+export { default as Breadcrumb } from "./breadcrumb";
+export { default as ButtonWithAction } from "./button-with-action";
+export { default as ButtonWithLink } from "./button-with-link";
+export { default as Checkbox } from "./checkbox";
+export { default as CheckboxList } from "./checkbox-list";
+export { default as CountryDropdown } from "./country-dropdown";
+export { default as DisplayBox } from "./display-box";
+export { default as DisplayCard } from "./display-card";
+export { default as Dropdown } from "./dropdown";
+export * from "./form-layouts";
+export { default as FormSelect } from "./form-select";
+export { default as FormattedAddress } from "./formatted-address";
+export { default as HamburgerButton } from "./hamburger-button";
+export { default as Heading } from "./heading";
+export * from "./icons";
+export { default as LabeledAmount } from "./labeled-amount";
+export * from "./layouts";
+export { default as LineItem } from "./line-item";
+export * from "./link";
+export { default as NavFooter } from "./nav-footer";
+export { default as NavHeader } from "./nav-header";
+export { default as Paragraph } from "./paragraph";
+export { default as PasswordRequirements } from "./password-requirements";
+export { default as Placeholder } from "./placeholder";
+export { default as ProcessingFee } from "./processing-fee";
+export { default as RadioButton } from "./radio-button";
+export { default as SolidDivider } from "./solid-divider";
+export { default as Spinner } from "./spinner";
+export { default as StateProvinceDropdown } from "./state-province-dropdown";
+export { default as Text } from "./text";
+export { default as ToggleSwitch } from "./toggle-switch";