@thecb/components 2.2.0

package/src/deprecated/icons/IconEmailVerified.js

@@ -0,0 +1,62 @@
+import React from "react";
+import { BOSTON_BLUE } from "../../constants/colors";
+
+export const IconEmailVerified = ({ fill = BOSTON_BLUE, iconID }) => (
+  <svg
+    width="80px"
+    height="81px"
+    viewBox="0 0 80 81"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <defs>
+      <path
+        d="M63.1271667,0.622619753 C70.0058333,0.622619753 75.5812037,6.19894074 75.5812037,13.0766568 C75.5812037,19.9543728 70.0058333,25.5306938 63.1271667,25.5306938 C61.8898377,25.5306938 60.6946597,25.3502136 59.5665133,25.0141446 L59.5667247,48.3356222 C59.5667247,50.3328691 57.9487741,51.9508198 55.9515272,51.9508198 L7.41775537,51.9514087 C2.88612543,45.8161019 0.207234568,38.2290264 0.207234568,30.0160864 C0.207234568,23.5341676 1.8758832,17.4419964 4.80704149,12.1456508 L50.7083348,12.1459307 C51.1843595,5.70282798 56.5625236,0.622619753 63.1271667,0.622619753 Z"
+        id="path-1"
+      ></path>
+      <path
+        d="M0.269975309,13.1508395 C0.269975309,20.4154568 6.15904938,26.3064321 13.4246173,26.3064321 L13.4246173,26.3064321 C20.6892346,26.3064321 26.5792593,20.4154568 26.5792593,13.1508395 L26.5792593,13.1508395 C26.5792593,5.88622222 20.6892346,-0.00285185185 13.4246173,-0.00285185185 L13.4246173,-0.00285185185 C6.15904938,-0.00285185185 0.269975309,5.88622222 0.269975309,13.1508395 L0.269975309,13.1508395 Z M18.8497901,8.17911111 L20.4002469,9.7295679 L12.6489136,17.4809012 L11.0984568,19.031358 L6.44803704,14.3799877 L7.99849383,12.8304815 L11.0984568,15.9304444 L18.8497901,8.17911111 Z"
+        id="path-3"
+      ></path>
+    </defs>
+    <g
+      id="Onboarding"
+      stroke="none"
+      strokeWidth="1"
+      fill="none"
+      fillRule="evenodd"
+    >
+      <g transform="translate(-679.000000, -366.000000)">
+        <g
+          id={`icon-email-verified-${iconID}`}
+          transform="translate(679.000000, 366.000000)"
+        >
+          <g id="WHITE" transform="translate(2.901235, 9.990068)">
+            <mask id="mask-2" fill="white">
+              <use xlinkHref="#path-1"></use>
+            </mask>
+            <use fill="#FFFFFF" xlinkHref="#path-1"></use>
+          </g>
+          <path
+            d="M40.0700852,0.851253086 C49.2497613,0.851253086 57.953029,3.98062447 64.9529726,9.62508476 C65.3532083,9.94783419 65.7464188,10.2775926 66.1324659,10.6141299 L66.0284012,10.6126877 C64.6694603,10.6126877 63.3613633,10.8303887 62.1370715,11.2328147 C55.8343298,6.47433294 48.1554,3.85125309 40.0700852,3.85125309 C27.1471351,3.85125309 15.7858603,10.5355617 9.25507248,20.6353405 L53.8124273,20.635882 C53.6568723,21.4220836 53.5753148,22.2348856 53.5753148,23.0667247 C53.5753148,23.2575573 53.5796071,23.4473881 53.5881005,23.6361256 L7.5104423,23.6360171 C6.83288049,24.9399979 6.23135767,26.289824 5.71174806,27.6796213 L5.4579,28.3762531 L5.58659667,28.456599 C11.1685389,31.9251185 19.4275352,37.0571116 30.3635853,43.8525783 C30.7042691,44.064153 31.0536125,44.0876613 31.395993,43.9232446 L31.5240287,43.8527797 L55.1657203,29.1610024 C55.660726,30.0415369 56.2596815,30.8558056 56.945949,31.5871633 L33.1070668,46.4011106 C31.8221368,47.1990901 30.294866,47.2389891 28.985424,46.5206349 L28.7805473,46.4009092 C18.1577521,39.8000936 10.0837316,34.7830411 4.55848557,31.3497517 C3.80226069,34.2801999 3.4009,37.3529638 3.4009,40.5194877 C3.4009,47.8647705 5.56056475,54.7055438 9.27958717,60.4414954 L58.8527617,60.4408877 C59.9707633,60.4408877 60.885245,59.5750146 60.9626518,58.4768239 L60.9679593,58.3256901 L60.9678165,34.4494163 C61.9117678,34.8697957 62.9176683,35.1761831 63.9680366,35.3510892 L63.9679593,58.3256901 C63.9679593,61.078911 61.794342,63.3231237 59.0690342,63.4364014 L58.8527617,63.4408877 L11.4462939,63.4409532 C18.1664629,71.8217467 28.4914395,77.1877222 40.0700852,77.1877222 C60.3209798,77.1877222 76.7383198,60.7706647 76.7383198,40.5194877 C76.7383198,37.2985843 76.3205824,34.1465681 75.5225025,31.1255834 C76.3944571,30.1009094 77.1023443,28.9329618 77.6071093,27.6622696 C78.9993381,31.7322572 79.7383198,36.0653768 79.7383198,40.5194877 C79.7383198,62.4275305 61.9778225,80.1877222 40.0700852,80.1877222 C18.1609219,80.1877222 0.4009,62.4280058 0.4009,40.5194877 C0.4009,18.6109695 18.1609219,0.851253086 40.0700852,0.851253086 Z"
+            id="Primary"
+            fill={fill}
+            fillRule="nonzero"
+          ></path>
+          <g id="Green" transform="translate(52.333333, 9.644389)">
+            <mask id="mask-4" fill="white">
+              <use xlinkHref="#path-3"></use>
+            </mask>
+            <g id="Clip-16"></g>
+            <polygon
+              id="Fill-18"
+              fill="#317D4F"
+              mask="url(#mask-4)"
+              points="-0.114074074 26.6895309 26.9633086 26.6895309 26.9633086 -0.387851852 -0.114074074 -0.387851852"
+            ></polygon>
+          </g>
+        </g>
+      </g>
+    </g>
+  </svg>
+);

package/src/deprecated/icons/IconEye.js

@@ -0,0 +1,32 @@
+import React from "react";
+import { REGENT_GREY, WHITE } from "../../constants/colors";
+
+export const IconEye = ({ fill = REGENT_GREY }) => (
+  <svg
+    width="28"
+    height="24"
+    viewBox="0 0 32 26"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    id="icon-eye"
+  >
+    <defs>
+      <path
+        d="M11.9999993,5 C6.99999964,5 2.72999991,8.10999994 1,12.4999996 C2.72999991,16.8899986 6.99999964,19.9999991 11.9999993,19.9999991 C16.999999,19.9999991 21.2699992,16.8899986 22.9999987,12.4999996 C21.2699992,8.10999994 16.999999,5 11.9999993,5 Z M11.9999993,17.4999993 C9.23999928,17.4999993 6.99999964,15.2599996 6.99999964,12.4999996 C6.99999964,9.73999949 9.23999928,7.49999985 11.9999993,7.49999985 C14.7599994,7.49999985 16.999999,9.73999949 16.999999,12.4999996 C16.999999,15.2599996 14.7599994,17.4999993 11.9999993,17.4999993 Z M11.9999993,9.49999973 C10.3399995,9.49999973 8.99999952,10.8399997 8.99999952,12.4999996 C8.99999952,14.1599993 10.3399995,15.4999994 11.9999993,15.4999994 C13.659999,15.4999994 14.9999992,14.1599993 14.9999992,12.4999996 C14.9999992,10.8399997 13.659999,9.49999973 11.9999993,9.49999973 Z"
+        id="icon-eye-path-1"
+      />
+    </defs>
+    <g id="icon-eye-People-Cards" fill="none" fillRule="evenodd">
+      <g id="icon-eye-Input/Text-Field">
+        <g id="icon-eye-Icon/Eye">
+          <mask id="icon-eye-mask-2" fill={WHITE}>
+            <use xlinkHref="#icon-eye-path-1" />
+          </mask>
+          <g id="Colors/Grey" mask="url(#icon-eye-mask-2)" fill={fill}>
+            <rect id="➝✏️" width="28" height="24" />
+          </g>
+        </g>
+      </g>
+    </g>
+  </svg>
+);

package/src/deprecated/icons/IconEyeSlash.js

@@ -0,0 +1,48 @@
+import React from "react";
+import { REGENT_GREY, WHITE } from "../../constants/colors";
+
+export const IconEyeSlash = ({ fill = REGENT_GREY }) => (
+  <svg
+    width="26"
+    height="24"
+    viewBox="0 0 29 20"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    id="icon-eye-slash"
+  >
+    <defs>
+      <path
+        d="M12.7612833,4.4052065 C12.2133995,4.19875291 11.6198116,4.08578629 10.9999993,4.08578629 C8.23999928,4.08578629 5.99999964,6.32578592 5.99999964,9.08578599 C5.99999964,9.70559829 6.11296627,10.2991862 6.31941985,10.84707 L3.37491002,13.7915798 C1.89338624,12.5367441 0.724164462,10.9234053 0,9.08578599 C1.72999991,4.69578638 5.99999964,1.58578644 10.9999993,1.58578644 C12.3726352,1.58578644 13.6902544,1.82017212 14.9154086,2.25108117 L12.7612833,4.4052065 Z M2.41421356,17.5807034 L19.9949169,-4.4408921e-15 L20.9949169,1 L18.0627397,3.93217729 C19.8113388,5.24015798 21.1864924,7.02145463 21.9999987,9.08578599 C20.2699992,13.475785 15.999999,16.5857855 10.9999993,16.5857855 C9.35158328,16.5857855 7.78251167,16.2477564 6.35764334,15.6372736 L3.41421356,18.5807034 L2.41421356,17.5807034 Z M8.55010155,13.4448154 C9.2742367,13.8529104 10.1100878,14.0857857 10.9999993,14.0857857 C13.7599994,14.0857857 15.999999,11.845786 15.999999,9.08578599 C15.999999,8.19587447 15.7671237,7.36002334 15.3590287,6.6358882 L8.55010155,13.4448154 Z"
+        id="icon-eye-slash-path-1"
+      />
+      <path
+        d="M11.0796729,6.00103123 L8.00103123,9.0796729 C8.00034515,9.05320044 8,9.02664134 8,8.99999982 C8,7.34000002 9.34000002,6 10.9999998,6 C11.0266413,6 11.0532004,6.00034515 11.0796729,6.00103123 Z M13.0765803,6.83255101 C13.6460333,7.37818495 13.9999996,8.14682778 13.9999996,8.99999982 C13.9999996,10.6599995 12.6599995,11.9999996 10.9999998,11.9999996 C10.1468278,11.9999996 9.37818495,11.6460333 8.83255101,11.0765803 L13.0765803,6.83255101 Z"
+        id="icon-eye-slash-path-3"
+      />
+    </defs>
+    <g id="icon-eye-slash-Icon/Eye-Slash" fill="none" fillRule="evenodd">
+      <g id="icon-eye-slash-Combined-Shape">
+        <mask id="icon-eye-slash-mask-2" fill={WHITE}>
+          <use xlinkHref="#icon-eye-slash-path-1" />
+        </mask>
+        <g
+          id="icon-eye-slash-Colors/Grey"
+          mask="url(#icon-eye-slash-mask-2)"
+          fill={fill}
+        >
+          <rect width="26" height="24" id="➝✏️" />
+        </g>
+        <mask id="icon-eye-slash-mask-4" fill={WHITE}>
+          <use xlinkHref="#icon-eye-slash-path-3" />
+        </mask>
+        <g
+          id="icon-eye-slash-Colors/Grey-two"
+          mask="url(#icon-eye-slash-mask-4)"
+          fill={fill}
+        >
+          <rect width="26" height="24" id="➝✏️" />
+        </g>
+      </g>
+    </g>
+  </svg>
+);

package/src/deprecated/icons/IconInvalid.js

@@ -0,0 +1,69 @@
+import React from "react";
+import { WHITE, RAZZMATAZZ_RED } from "../../constants/colors";
+
+export const IconInvalid = ({
+  bgFill = RAZZMATAZZ_RED,
+  iconFill = WHITE,
+  width = "18",
+  height = "18",
+  margin = "0"
+}) => (
+  <svg
+    width={width}
+    height={height}
+    viewBox="0 0 18 18"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    style={{ margin }}
+  >
+    <g
+      id="icon-invalid-Authentication"
+      stroke="none"
+      strokeWidth="1"
+      fill="none"
+      fillRule="evenodd"
+    >
+      <g
+        id="icon-invalid-00.1.0.1---HSS---Register---Already-Exists-Error"
+        transform="translate(-538.000000, -1064.000000)"
+        fillRule="nonzero"
+      >
+        <g
+          id="icon-invalid-Password-Requirements"
+          transform="translate(457.000000, 938.000000)"
+        >
+          <g
+            id="icon-invalid-Group-2"
+            transform="translate(81.000000, 20.000000)"
+          >
+            <g
+              id="icon-invalid-PasswordVerification-Error"
+              transform="translate(0.000000, 106.000000)"
+            >
+              <circle
+                id="icon-invalid-Oval"
+                stroke={bgFill}
+                fill={bgFill}
+                cx="9"
+                cy="9"
+                r="8.5"
+              ></circle>
+              <g
+                id="icon-invalid-Icon/Close"
+                transform="translate(2.000000, 2.000000)"
+                fill={iconFill}
+              >
+                <path
+                  d="M7.58333333,7.58333333 L7.58333333,11.6666667 L6.41666667,11.6666667 L6.41666667,7.58333333 L2.33333333,7.58333333 L2.33333333,6.41666667 L6.41666667,6.41666667 L6.41666667,2.33333333 L7.58333333,2.33333333 L7.58333333,6.41666667 L11.6666667,6.41666667 L11.6666667,7.58333333 L7.58333333,7.58333333 Z"
+                  id="icon-invalid-x"
+                  transform="translate(7.000000, 7.000000) rotate(45.000000) translate(-7.000000, -7.000000) "
+                ></path>
+              </g>
+            </g>
+          </g>
+        </g>
+      </g>
+    </g>
+  </svg>
+);

package/src/deprecated/icons/IconNeutral.js

@@ -0,0 +1,27 @@
+import React from "react";
+import { ALTO_GREY } from "../../constants/colors";
+
+export const IconNeutral = ({
+  fill = ALTO_GREY,
+  width = "18",
+  height = "18",
+  margin = "0"
+}) => (
+  <svg
+    width={width}
+    height={height}
+    viewBox="0 0 18 18"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    style={{ margin }}
+  >
+    <g id="icon-neutral-group" fill={fill} fillRule="nonzero" stroke={fill}>
+      <g id="icon-neutral-Group-2">
+        <g id="icon-neutral-PasswordVerification-Empty">
+          <circle id="icon-neutral-Oval" cx="9" cy="9" r="8.5"></circle>
+        </g>
+      </g>
+    </g>
+  </svg>
+);

package/src/deprecated/icons/IconQuit.js

@@ -0,0 +1,32 @@
+import React from "react";
+import { MINESHAFT_GREY } from "../../constants/colors";
+
+export const IconQuit = ({
+  fill = MINESHAFT_GREY,
+  width = "24px",
+  height = "24px"
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    width={width}
+    height={height}
+    viewBox="0 0 24 24"
+  >
+    <defs>
+      <path
+        id="a"
+        d="M18.9999989 6.40999946L17.589999 4.9999997 11.9999993 10.5899995 6.40999946 4.9999997 4.9999997 6.40999946 10.5899995 11.9999993 4.9999997 17.589999 6.40999946 18.9999989 11.9999993 13.409999 17.589999 18.9999989 18.9999989 17.589999 13.409999 11.9999993z"
+      ></path>
+    </defs>
+    <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
+      <mask id="b" fill="#fff">
+        <use xlinkHref="#a"></use>
+      </mask>
+      <use fill={fill} xlinkHref="#a"></use>
+      <g fill={fill} mask="url(#b)">
+        <path d="M0 0H24V24H0z"></path>
+      </g>
+    </g>
+  </svg>
+);

package/src/deprecated/icons/IconValid.js

@@ -0,0 +1,72 @@
+import React from "react";
+import { WHITE, FOREST_GREEN } from "../../constants/colors";
+
+export const IconValid = ({
+  bgFill = FOREST_GREEN,
+  iconFill = WHITE,
+  width = "18",
+  height = "18",
+  margin = "0"
+}) => (
+  <svg
+    width={width}
+    height={height}
+    viewBox="0 0 18 18"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    style={{ margin }}
+  >
+    <g
+      id="icon-valid-Authentication"
+      stroke="none"
+      strokeWidth="1"
+      fill="none"
+      fillRule="evenodd"
+    >
+      <g
+        id="icon-valid-00.1.0.1---HSS---Register---Already-Exists-Error"
+        transform="translate(-538.000000, -996.000000)"
+      >
+        <g
+          id="icon-valid-Password-Requirements"
+          transform="translate(457.000000, 938.000000)"
+        >
+          <g
+            id="icon-valid-Group-2"
+            transform="translate(81.000000, 20.000000)"
+          >
+            <g
+              id="icon-valid-PasswordVerification-Sucess"
+              transform="translate(0.000000, 38.000000)"
+            >
+              <circle
+                id="icon-valid-Oval"
+                stroke={bgFill}
+                fill={bgFill}
+                fillRule="nonzero"
+                cx="9"
+                cy="9"
+                r="8.5"
+              ></circle>
+              <g
+                id="icon-valid-baseline-check-24px"
+                transform="translate(2.000000, 2.000000)"
+              >
+                <polygon
+                  id="icon-valid-Path"
+                  points="0 0 14 0 14 14 0 14"
+                ></polygon>
+                <polygon
+                  id="icon-valid-Path-2"
+                  fill={iconFill}
+                  points="5.25 9.4325 2.8175 7 1.98916667 7.8225 5.25 11.0833333 12.25 4.08333333 11.4275 3.26083333"
+                ></polygon>
+              </g>
+            </g>
+          </g>
+        </g>
+      </g>
+    </g>
+  </svg>
+);

package/src/deprecated/icons/IconWarn.js

@@ -0,0 +1,28 @@
+import React from "react";
+import { CARROT_ORANGE, WHITE } from "../../constants/colors";
+
+export const IconWarn = ({ fill = CARROT_ORANGE }) => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    id="icon-alert"
+  >
+    <defs>
+      <path
+        d="M10.9999993,14.9999991 L12.9999992,14.9999991 L12.9999992,16.999999 L10.9999993,16.999999 L10.9999993,14.9999991 Z M10.9999993,6.99999958 L12.9999992,6.99999958 L12.9999992,12.9999992 L10.9999993,12.9999992 L10.9999993,6.99999958 Z M11.989999,1.99999988 C6.46999987,1.99999988 1.99999988,6.47999962 1.99999988,11.9999993 C1.99999988,17.5199993 6.46999987,21.9999987 11.989999,21.9999987 C17.5199993,21.9999987 21.9999987,17.5199993 21.9999987,11.9999993 C21.9999987,6.47999915 17.5199993,1.99999988 11.989999,1.99999988 Z M11.9999993,19.9999988 C7.57999947,19.9999988 3.99999976,16.419999 3.99999976,11.9999993 C3.99999976,7.57999947 7.57999947,3.99999976 11.9999993,3.99999976 C16.419999,3.99999976 19.9999988,7.57999947 19.9999988,11.9999993 C19.9999988,16.419999 16.419999,19.9999988 11.9999993,19.9999988 Z"
+        id="icon-alert-path-1"
+      />
+    </defs>
+    <g id="icon-alert-stroke" fill="none" fillRule="evenodd">
+      <mask id="icon-alert-mask-2" fill={WHITE}>
+        <use xlinkHref="#icon-alert-path-1" />
+      </mask>
+      <g id="Colors/Blue-Dark" mask="url(#icon-alert-mask-2)" fill={fill}>
+        <rect id="➝✏️" width="24" height="24" />
+      </g>
+    </g>
+  </svg>
+);

package/src/deprecated/icons/index.js

@@ -0,0 +1,40 @@
+import { IconAdd } from "./IconAdd";
+import { IconWarn } from "./IconWarn";
+import { IconCheck } from "./IconCheck";
+import { IconCheckEmail } from "./IconCheckEmail";
+import { IconEmailVerified } from "./IconEmailVerified";
+import { IconEye } from "./IconEye";
+import { IconEyeSlash } from "./IconEyeSlash";
+import { IconChevron } from "./IconChevron";
+import { IconNeutral } from "./IconNeutral";
+import { IconValid } from "./IconValid";
+import { IconInvalid } from "./IconInvalid";
+
+import { AlertInfoIcon } from "./AlertInfoIcon";
+import { AlertErrorIcon } from "./AlertErrorIcon";
+import { AlertSuccessIcon } from "./AlertSuccessIcon";
+import { AlertWarningIcon } from "./AlertWarningIcon";
+import { IconQuit } from "./IconQuit";
+
+const AlertIcons = {
+  error: AlertErrorIcon,
+  info: AlertInfoIcon,
+  success: AlertSuccessIcon,
+  warn: AlertWarningIcon
+};
+
+export {
+  IconAdd,
+  IconWarn,
+  IconCheck,
+  IconCheckEmail,
+  IconEmailVerified,
+  IconEye,
+  IconEyeSlash,
+  IconChevron,
+  IconNeutral,
+  IconValid,
+  IconInvalid,
+  AlertIcons,
+  IconQuit
+};

package/src/deprecated/index.js

@@ -0,0 +1 @@
+export { default as RadioButton } from "./components/radio-button";

package/src/deprecated/spinner/Spinner.js

@@ -0,0 +1,68 @@
+import React from "react";
+import styled from "styled-components";
+import posed from "react-pose";
+import { linear } from "@popmotion/easing";
+
+const rotate = posed.div({
+  fixed: {
+    rotate: "0deg"
+  },
+  rotate: {
+    rotate: "360deg",
+    transition: {
+      rotate: {
+        ease: linear,
+        duration: 1000,
+        loop: Infinity
+      }
+    }
+  }
+});
+
+export const SpinnerContainer = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+`;
+
+export const SpinnerIconWrapper = styled(rotate)`
+  width: ${({ size }) => size}px;
+  height: ${({ size }) => size}px;
+`;
+
+const SpinnerIcon = ({ color, size = 24 }) => (
+  <SpinnerContainer>
+    <SpinnerIconWrapper initialPose="fixed" pose="rotate" size={size}>
+      <svg
+        viewBox={`0 0 24 24`}
+        height="100%"
+        width="100%"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlnsXlink="http://www.w3.org/1999/xlink"
+      >
+        <defs>
+          <path
+            d="M72.1558149,36 C72.0733136,36 72.0151877,35.9981252 71.9829372,35.9970003 C66.1928468,35.9876262 60,31.1685779 60,23.9985001 C60,16.821298 66.204847,12 71.9998125,12 C78.2804106,12 84,17.7189638 84,23.9985001 C84,24.4124613 83.6639947,24.7484298 83.2499883,24.7484298 C82.8356068,24.7484298 82.4999766,24.4124613 82.4999766,23.9985001 C82.4999766,18.5041402 77.4951484,13.4998594 71.9998125,13.4998594 C66.9289833,13.4998594 61.5000234,17.7185889 61.5000234,23.9985001 C61.5000234,30.2784114 66.9289833,34.4971409 71.9998125,34.4971409 C72.0129377,34.4971409 72.0260629,34.4975159 72.0391881,34.4982658 C72.0789387,34.4990157 76.2268785,34.6471268 79.907186,30.9675968 C80.2000656,30.6747492 80.675198,30.6747492 80.9677026,30.9675968 C81.2605822,31.2604443 81.2605822,31.7351498 80.9677026,32.0279974 C77.2236441,35.7716464 73.1034547,36 72.1558149,36 L72.1558149,36 Z"
+            id="path-1"
+          />
+        </defs>
+        <g id="Symbols" fill="none" fillRule="evenodd">
+          <g
+            id="Button/Primary/Standard/Loading"
+            transform="translate(-60 -12)"
+          >
+            <mask id="mask-2" fill={color || "white"}>
+              <use xlinkHref="#path-1" />
+            </mask>
+            <use id="loader" fill={color || "white"} xlinkHref="#path-1" />
+          </g>
+        </g>
+      </svg>
+    </SpinnerIconWrapper>
+  </SpinnerContainer>
+);
+
+export default SpinnerIcon;

package/src/deprecated/spinner/index.js

@@ -0,0 +1 @@
+export { default } from "./Spinner";

package/src/deprecated/utility/__tests__/safeConcat.spec.js

@@ -0,0 +1,59 @@
+//      
+
+import safeConcat from '../safeConcat';
+
+describe('safeConcat', () => {
+  beforeEach(() => {
+    console.error = jest.fn();
+  });
+
+  describe('arg validation', () => {
+    describe('when values not an array', () => {
+      it('throws console error', () => {
+        const result = safeConcat('a', '-');
+
+        const errors = console.error.mock.calls;
+        expect(errors.length).toEqual(1);
+
+        const firstError = errors[0][0];
+        expect(firstError).toEqual('\'values\' needs to be an array. Recieved string');
+
+        expect(result).toEqual(undefined);
+      });
+    });
+  });
+
+  describe('with valid values', () => {
+    it('concatinates strings with concatinator', () => {
+      const result = safeConcat(['a', 'b', 'c'], '-');
+      expect(result).toEqual('a-b-c');
+    });
+
+    it('stringifies the concatinator', () => {
+      const result = safeConcat(['a', 'b', 'c'], 1);
+      expect(result).toEqual('a1b1c');
+    });
+
+    it('removes falsey string values from values array', () => {
+      const result = safeConcat(['a', undefined, 'b', ''], '-');
+      expect(result).toEqual('a-b');
+    });
+
+    it('does not append concatinator single values arrays', () => {
+      const result = safeConcat(['a'], '-');
+      expect(result).toEqual('a');
+    });
+
+    it('does not append concatinator to single truthy values', () => {
+      const result = safeConcat(['a', undefined], '-');
+      expect(result).toEqual('a');
+    });
+  });
+
+  describe('with no valid values', () => {
+    it('returns empty string when no valid values', () => {
+      const result = safeConcat([undefined], '-');
+      expect(result).toEqual('');
+    });
+  });
+});

package/src/deprecated/utility/__tests__/validateKeyType.spec.js

@@ -0,0 +1,116 @@
+//      
+
+import validateKeyType from '../validateKeyType';
+
+describe('validateKeyType', () => {
+  const objParam = {
+    aArray: [1],
+    aBoolean: true,
+    aFunction: jest.fn(),
+    aNumber: 1,
+    aObject: { foo: 'bar' },
+    aString: 'bar'
+  };
+
+  describe('when obj param does not contain key param', () => {
+    it('returns false', () => {
+      const result = validateKeyType(objParam, 'wrong-key', 'string');
+      expect(result).toEqual(false);
+    });
+  });
+
+  describe('when obj param contains key param', () => {
+    describe('when obj[key] type', () => {
+      describe('matches type param', () => {
+        describe('of Array', () => {
+          it('returns true', () => {
+            const arrayResult = validateKeyType(objParam, 'aArray', 'array');
+            expect(arrayResult).toEqual(true);
+          });
+        });
+
+        describe('of Boolean', () => {
+          it('returns true', () => {
+            const arrayResult = validateKeyType(objParam, 'aBoolean', 'boolean');
+            expect(arrayResult).toEqual(true);
+          });
+        });
+
+        describe('of Function', () => {
+          it('returns true', () => {
+            const arrayResult = validateKeyType(objParam, 'aFunction', 'function');
+            expect(arrayResult).toEqual(true);
+          });
+        });
+
+        describe('of Number', () => {
+          it('returns true', () => {
+            const arrayResult = validateKeyType(objParam, 'aNumber', 'number');
+            expect(arrayResult).toEqual(true);
+          });
+        });
+
+        describe('of Object', () => {
+          it('returns true', () => {
+            const arrayResult = validateKeyType(objParam, 'aObject', 'object');
+            expect(arrayResult).toEqual(true);
+          });
+        });
+
+        describe('of String', () => {
+          it('returns true', () => {
+            const arrayResult = validateKeyType(objParam, 'aString', 'string');
+            expect(arrayResult).toEqual(true);
+          });
+        });
+      });
+
+      describe('does not match type param', () => {
+        describe('of Array', () => {
+          it('returns false', () => {
+            const arrayResult = validateKeyType(objParam, 'aArray', 'string');
+            expect(arrayResult).toEqual(false);
+
+            const arrayObjResult = validateKeyType(objParam, 'aArray', 'object');
+            expect(arrayObjResult).toEqual(false);
+          });
+        });
+
+        describe('of Boolean', () => {
+          it('returns false', () => {
+            const arrayResult = validateKeyType(objParam, 'aBoolean', 'string');
+            expect(arrayResult).toEqual(false);
+          });
+        });
+
+        describe('of Function', () => {
+          it('returns false', () => {
+            const arrayResult = validateKeyType(objParam, 'aFunction', 'string');
+            expect(arrayResult).toEqual(false);
+          });
+        });
+
+        describe('of Number', () => {
+          it('returns false', () => {
+            const arrayResult = validateKeyType(objParam, 'aNumber', 'string');
+            expect(arrayResult).toEqual(false);
+          });
+        });
+
+        describe('of Object', () => {
+          it('returns false', () => {
+            const arrayResult = validateKeyType(objParam, 'aObject', 'string');
+            expect(arrayResult).toEqual(false);
+          });
+        });
+
+        describe('of String', () => {
+          it('returns false', () => {
+            const arrayResult = validateKeyType(objParam, 'aString', 'number');
+            expect(arrayResult).toEqual(false);
+          });
+        });
+      });
+    });
+  });
+});