@thecb/components 2.2.0

package/src/deprecated/colors.js

@@ -0,0 +1,154 @@
+/*
+Need to add a new color? Visit http://chir.ag/projects/name-that-color to generate a color name.
+
+Name already taken? If you can't use the existing color, then use thesaurus.com to pick a similar name
+to the one generated by name-that-color.
+*/
+
+const TRANSPARENT = "transparent";
+// WHITE
+const WHITE = "#FFFFFF";
+const SOLITUDE_WHITE = "#EBEDF1";
+const SEASHELL_WHITE = "#F1F1F1";
+const ALABASTER_WHITE = "#F7F7F7";
+const AQUA_HAZE_WHITE = "#F7F9FA";
+const BLEACH_WHITE = "#FEF4d7";
+// GREY
+const ALTO_GREY = "#d1d1d1";
+const SILVER_GREY = "#cdcdcd";
+const PEWTER_GREY = "#DFE1E4";
+const ASH_GREY = "#979797";
+const IRON_GREY = "#d5d8dc";
+const GHOST_GREY = "#CACED8";
+const DUSTY_GREY = "#9B9B9B";
+const REGENT_GREY = "#959EA7";
+const STORM_GREY = "#6E727E";
+const TROUT_GREY = "#515660";
+const MINESHAFT_GREY = "#333333";
+const SOOT_GREY = "#999999";
+const FIREFLY_GREY = "#091325";
+const BRIGHT_GREY = "#3B414D";
+// BLUE
+const CLOUDBURST_BLUE = "#26395c";
+const ZODIAC_BLUE = "#14284b";
+const CONGRESS_BLUE = "#005095";
+const SCIENCE_BLUE = "#0074D9";
+const MARINER_BLUE = "#2E75D2";
+const CURIOUS_BLUE = "#27A9E1";
+const SELAGO_BLUE = "#F2F8FD";
+const ONAHAU_BLUE = "#D1ECFF";
+const PICKLED_BLUE = "#2C3E50";
+const CERULEAN_BLUE = "#0D8DC4";
+const FOAM_BLUE = "#EFF4FD";
+// GREEN
+const FOREST_GREEN = "#19b03F";
+const MEADOW_GREEN = "#16C98D";
+const POLAR_GREEN = "#DCF7EE";
+const ICE_GREEN = "#A4F6DF";
+const HAZE_GREEN = "#05A670";
+const EMERALD_GREEN = "#47B872";
+const HINT_GREEN = "#E8FFEF";
+// YELLOW
+const SELECTIVE_YELLOW = "#F8B700";
+const MUSTARD_YELLOW = "#FFD459";
+// ORANGE
+const CARROT_ORANGE = "#ED9620";
+const ZEST_ORANGE = "#F47820";
+const APRICOT_ORANGE = "#FFE8D8";
+// RED
+const RED = "#FF0000";
+const CRIMSON_RED = "#ED1C24";
+const THUNDERBIRD_RED = "#C3191F";
+const RAZZMATAZZ_RED = "#ED125F";
+const FANTASY_RED = "#FCF4F4";
+const COSMOS_RED = "#FFD0D3";
+const BLUSH_RED = "#FFF0F5";
+
+// Second level color constants
+const ERROR_COLOR = RAZZMATAZZ_RED;
+
+// These colors are sequestered so that the alert component can reference them // by type of alert
+const ALERT_COLORS = {
+  warn: {
+    background: BLEACH_WHITE,
+    shadow: SELECTIVE_YELLOW,
+    iconBackground: MUSTARD_YELLOW,
+    iconFill: CARROT_ORANGE
+  },
+  info: {
+    background: SELAGO_BLUE,
+    shadow: SCIENCE_BLUE,
+    iconBackground: ONAHAU_BLUE,
+    iconFill: CONGRESS_BLUE
+  },
+  error: {
+    background: FANTASY_RED,
+    shadow: CRIMSON_RED,
+    iconBackground: COSMOS_RED,
+    iconFill: THUNDERBIRD_RED
+  },
+  success: {
+    background: POLAR_GREEN,
+    shadow: MEADOW_GREEN,
+    iconBackground: ICE_GREEN,
+    iconFill: HAZE_GREEN
+  },
+  text: ZODIAC_BLUE,
+  link: SCIENCE_BLUE
+};
+
+export {
+  TRANSPARENT,
+  WHITE,
+  SOLITUDE_WHITE,
+  SEASHELL_WHITE,
+  ALABASTER_WHITE,
+  AQUA_HAZE_WHITE,
+  BLEACH_WHITE,
+  ALTO_GREY,
+  SILVER_GREY,
+  PEWTER_GREY,
+  ASH_GREY,
+  IRON_GREY,
+  GHOST_GREY,
+  DUSTY_GREY,
+  REGENT_GREY,
+  STORM_GREY,
+  TROUT_GREY,
+  MINESHAFT_GREY,
+  FIREFLY_GREY,
+  SOOT_GREY,
+  BRIGHT_GREY,
+  CLOUDBURST_BLUE,
+  ZODIAC_BLUE,
+  CONGRESS_BLUE,
+  SCIENCE_BLUE,
+  MARINER_BLUE,
+  CURIOUS_BLUE,
+  SELAGO_BLUE,
+  ONAHAU_BLUE,
+  PICKLED_BLUE,
+  CERULEAN_BLUE,
+  FOAM_BLUE,
+  FOREST_GREEN,
+  MEADOW_GREEN,
+  POLAR_GREEN,
+  ICE_GREEN,
+  HAZE_GREEN,
+  EMERALD_GREEN,
+  HINT_GREEN,
+  SELECTIVE_YELLOW,
+  MUSTARD_YELLOW,
+  CARROT_ORANGE,
+  ZEST_ORANGE,
+  APRICOT_ORANGE,
+  RED,
+  CRIMSON_RED,
+  THUNDERBIRD_RED,
+  RAZZMATAZZ_RED,
+  FANTASY_RED,
+  COSMOS_RED,
+  BLUSH_RED,
+  ALERT_COLORS,
+  ERROR_COLOR
+};

package/src/deprecated/components/radio-button/index.js

@@ -0,0 +1,3 @@
+import RadioButton from "./radio-button";
+
+export default RadioButton;

package/src/deprecated/components/radio-button/radio-button.js

@@ -0,0 +1,44 @@
+import React from "react";
+import styled from "styled-components";
+import { MARINER_BLUE, PEWTER_GREY } from "../../colors";
+
+const defaultTheme = {
+  theme: {
+    accentColor: MARINER_BLUE,
+    inactiveColor: PEWTER_GREY
+  }
+};
+
+const RadioButtonBorder = styled.div`
+  height: 24px;
+  width: 24px;
+  border: 1px solid
+    ${({ isSelected, theme }) =>
+      isSelected ? theme.accentColor : theme.inactiveColor};
+  border-radius: 12px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 10px;
+  min-width: 24px;
+  min-height: 24px;
+`;
+
+RadioButtonBorder.defaultProps = defaultTheme;
+
+const RadioButtonCenter = styled.div`
+  height: 16px;
+  width: 16px;
+  background-color: ${({ theme }) => theme.accentColor};
+  border-radius: 8px;
+`;
+
+RadioButtonCenter.defaultProps = defaultTheme;
+
+const RadioButton = ({ isSelected, name }) => (
+  <RadioButtonBorder isSelected={isSelected} name={name}>
+    {isSelected && <RadioButtonCenter />}
+  </RadioButtonBorder>
+);
+
+export default RadioButton;

package/src/deprecated/icons/AlertErrorIcon.js

@@ -0,0 +1,42 @@
+import React from "react";
+export const AlertErrorIcon = () => (
+  <svg
+    width="24px"
+    height="24px"
+    viewBox="0 0 24 24"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+  >
+    <defs>
+      <path
+        d="M12,0 C18.627417,0 24,5.372583 24,12 C24,18.627417 18.627417,24 12,24 C5.372583,24 0,18.627417 0,12 C0,5.372583 5.372583,0 12,0 Z M15.5714286,7 L12,10.572 L8.42857143,7 L7,8.42857143 L10.571,12 L7,15.5714286 L8.42857143,17 L11.999,13.428 L15.5714286,17 L17,15.5714286 L13.428,12 L17,8.42857143 L15.5714286,7 Z"
+        id="path-1"
+      ></path>
+    </defs>
+    <g
+      id="Symbols"
+      stroke="none"
+      strokeWidth="1"
+      fill="none"
+      fillRule="evenodd"
+    >
+      <g id="Alert/Error" transform="translate(-24.000000, -32.000000)">
+        <g
+          id="Icon/Error-Container"
+          transform="translate(24.000000, 32.000000)"
+        >
+          <mask id="mask-2" fill="white">
+            <use xlinkHref="#path-1"></use>
+          </mask>
+          <use
+            id="icon---error"
+            fill="#ED125F"
+            fillRule="nonzero"
+            xlinkHref="#path-1"
+          ></use>
+        </g>
+      </g>
+    </g>
+  </svg>
+);

package/src/deprecated/icons/AlertInfoIcon.js

@@ -0,0 +1,42 @@
+import React from "react";
+export const AlertInfoIcon = () => (
+  <svg
+    width="24px"
+    height="24px"
+    viewBox="0 0 24 24"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+  >
+    <defs>
+      <path
+        d="M12,24 C18.627417,24 24,18.627417 24,12 C24,5.372583 18.627417,0 12,0 C5.372583,0 0,5.372583 0,12 C0,18.627417 5.372583,24 12,24 Z M13,10 L13,16 L14,16 L14,18 L10,18 L10,16 L11,16 L11,12 L10,12 L10,10 L13,10 Z M13,6 L13,8 L11,8 L11,6 L13,6 Z"
+        id="path-1"
+      ></path>
+    </defs>
+    <g
+      id="Symbols"
+      stroke="none"
+      strokeWidth="1"
+      fill="none"
+      fillRule="evenodd"
+    >
+      <g id="Alert/Informational" transform="translate(-24.000000, -34.000000)">
+        <g
+          id="Icon/Information-Container"
+          transform="translate(24.000000, 34.000000)"
+        >
+          <mask id="mask-2" fill="white">
+            <use xlinkHref="#path-1"></use>
+          </mask>
+          <use
+            id="background-2"
+            fill="#15749d"
+            fillRule="nonzero"
+            xlinkHref="#path-1"
+          ></use>
+        </g>
+      </g>
+    </g>
+  </svg>
+);

package/src/deprecated/icons/AlertSuccessIcon.js

@@ -0,0 +1,42 @@
+import React from "react";
+export const AlertSuccessIcon = () => (
+  <svg
+    width="24px"
+    height="24px"
+    viewBox="0 0 24 24"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+  >
+    <defs>
+      <path
+        d="M12,24 C18.627417,24 24,18.627417 24,12 C24,5.372583 18.627417,0 12,0 C5.372583,0 0,5.372583 0,12 C0,18.627417 5.372583,24 12,24 Z M16.9497475,7.46446609 L18.363961,8.87867966 L9.87867966,17.363961 L5.63603897,13.1213203 L7.05025253,11.7071068 L9.87803897,14.5354661 L16.9497475,7.46446609 Z"
+        id="path-1"
+      ></path>
+    </defs>
+    <g
+      id="Symbols"
+      stroke="none"
+      strokeWidth="1"
+      fill="none"
+      fillRule="evenodd"
+    >
+      <g id="Alert/Success" transform="translate(-24.000000, -34.000000)">
+        <g
+          id="Icon/Success-Container"
+          transform="translate(24.000000, 34.000000)"
+        >
+          <mask id="mask-2" fill="white">
+            <use xlinkHref="#path-1"></use>
+          </mask>
+          <use
+            id="background-2"
+            fill="#47B872"
+            fillRule="nonzero"
+            xlinkHref="#path-1"
+          ></use>
+        </g>
+      </g>
+    </g>
+  </svg>
+);

package/src/deprecated/icons/AlertWarningIcon.js

@@ -0,0 +1,36 @@
+import React from "react";
+export const AlertWarningIcon = () => (
+  <svg
+    width="24px"
+    height="21px"
+    viewBox="0 0 24 21"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+  >
+    <g
+      id="Symbols"
+      stroke="none"
+      strokeWidth="1"
+      fill="none"
+      fillRule="evenodd"
+    >
+      <g
+        id="Alert/Warning"
+        transform="translate(-24.000000, -36.000000)"
+        fill="#F47820"
+        fillRule="nonzero"
+      >
+        <g
+          id="Icon/Warning-Container"
+          transform="translate(24.000000, 34.000000)"
+        >
+          <path
+            d="M13.0106463,2.58294345 C13.3063934,2.75612993 13.5526739,3.00241046 13.7258604,3.29815753 L23.0814452,19.2745017 C23.6396097,20.2276681 23.3193975,21.4528439 22.3662311,22.0110084 C22.0596748,22.1905246 21.7108352,22.285148 21.3555848,22.285148 L2.64441521,22.285148 C1.53984571,22.285148 0.64441521,21.3897175 0.64441521,20.285148 C0.64441521,19.9298976 0.739038571,19.581058 0.918554829,19.2745017 L10.2741396,3.29815753 C10.8323042,2.34499116 12.0574799,2.02477891 13.0106463,2.58294345 Z M13,17 L11,17 L11,19 L13,19 L13,17 Z M13,7 L11,7 L11,15 L13,15 L13,7 Z"
+            id="icon---warning"
+          ></path>
+        </g>
+      </g>
+    </g>
+  </svg>
+);

package/src/deprecated/icons/BankIcon.js

@@ -0,0 +1,82 @@
+import React from "react";
+
+export const BankIcon = () => {
+  return (
+    <svg
+      width="28px"
+      height="18px"
+      viewBox="0 0 28 18"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+    >
+      <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+        <g transform="translate(-196.000000, -311.000000)">
+          <g transform="translate(132.000000, 204.000000)">
+            <g transform="translate(0.000000, 48.000000)">
+              <g transform="translate(0.000000, 32.000000)">
+                <g transform="translate(24.000000, 24.000000)">
+                  <g transform="translate(40.000000, 3.000000)">
+                    <rect
+                      id="bg"
+                      fill="#CACED8"
+                      x="0"
+                      y="0"
+                      width="28"
+                      height="18"
+                      rx="1"
+                    ></rect>
+                    <g
+                      id="bank"
+                      transform="translate(8.000000, 4.000000)"
+                      fill="#6E727E"
+                    >
+                      <rect
+                        id="Rectangle"
+                        x="1"
+                        y="4"
+                        width="2"
+                        height="3"
+                        rx="0.5"
+                      ></rect>
+                      <rect
+                        id="Rectangle-Copy-4"
+                        x="5"
+                        y="4"
+                        width="2"
+                        height="3"
+                        rx="0.5"
+                      ></rect>
+                      <rect
+                        id="Rectangle-Copy-5"
+                        x="9"
+                        y="4"
+                        width="2"
+                        height="3"
+                        rx="0.5"
+                      ></rect>
+                      <rect
+                        id="Rectangle-Copy-7"
+                        x="0"
+                        y="8"
+                        width="12"
+                        height="2"
+                        rx="0.5"
+                      ></rect>
+                      <path
+                        d="M0.378167287,1.40499005 L5.00055528,0.243670994 C5.63734349,0.0836856623 6.30372324,0.0829130839 6.9408807,0.241421446 L11.620708,1.40564191 C11.8435643,1.46108283 12,1.66120383 12,1.89085278 L12,2.5 C12,2.77614237 11.7761424,3 11.5,3 L0.5,3 C0.223857625,3 3.38176876e-17,2.77614237 0,2.5 L0,1.88991972 C-2.80709531e-17,1.66070299 0.155859301,1.46084224 0.378167287,1.40499005 Z"
+                        id="Rectangle-Copy-2"
+                      ></path>
+                    </g>
+                  </g>
+                </g>
+              </g>
+            </g>
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+};
+
+export default BankIcon;

package/src/deprecated/icons/GenericCard.js

@@ -0,0 +1,39 @@
+import React from "react";
+
+const GenericCard = () => (
+  <svg
+    width="28px"
+    height="18px"
+    viewBox="0 0 28 18"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+  >
+    <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+      <g>
+        <rect
+          id="bg"
+          fill="#CACED8"
+          x="0"
+          y="0"
+          width="28"
+          height="18"
+          rx="1"
+        ></rect>
+        <g transform="translate(0.000000, 4.000000)" fill="#6E727E">
+          <rect id="Rectangle-Copy-7" x="0" y="0" width="28" height="4"></rect>
+          <rect
+            id="Rectangle-Copy-8"
+            x="17"
+            y="8"
+            width="7"
+            height="2"
+            rx="1"
+          ></rect>
+        </g>
+      </g>
+    </g>
+  </svg>
+);
+
+export default GenericCard;

package/src/deprecated/icons/IconAdd.js

@@ -0,0 +1,44 @@
+import React from "react";
+import { WHITE, CHARADE_GREY } from "../../constants/colors";
+
+export const IconAdd = ({ fill = CHARADE_GREY, iconID, isMobile }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    width="18"
+    height="18"
+    viewBox={isMobile ? "0 -0.25 20 20" : "-0.5 -0.5 18 18"}
+    id={`icon-add-${iconID}`}
+  >
+    <defs>
+      <path
+        id="path-1"
+        d="M9.91666623 6.78508747L6.78508747 6.78508747 6.78508747 9.91666623 5.74122788 9.91666623 5.74122788 6.78508747 2.60964912 6.78508747 2.60964912 5.74122788 5.74122788 5.74122788 5.74122788 2.60964912 6.78508747 2.60964912 6.78508747 5.74122788 9.91666623 5.74122788z"
+      ></path>
+    </defs>
+    <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
+      <g transform="translate(-383 -15)">
+        <g transform="translate(384 16)">
+          <g>
+            <g transform="translate(1.94 1.858)">
+              <mask id="mask-2" fill={WHITE}>
+                <use xlinkHref="#path-1"></use>
+              </mask>
+              <use fill="#000" fillRule="evenodd" xlinkHref="#path-1"></use>
+              <g fill={fill} fillRule="evenodd" mask="url(#mask-2)">
+                <path d="M0 0H12.526V12.526H0z"></path>
+              </g>
+            </g>
+            <circle
+              cx="8.155"
+              cy="8.072"
+              r="8"
+              stroke={fill}
+              strokeWidth="0.644"
+            ></circle>
+          </g>
+        </g>
+      </g>
+    </g>
+  </svg>
+);

package/src/deprecated/icons/IconCheck.js

@@ -0,0 +1,23 @@
+import React from "react";
+import { WHITE } from "../../constants/colors";
+
+export const IconCheck = ({ fill = WHITE, width = "24", height = "24" }) => (
+  <svg
+    width={width}
+    height={height}
+    viewBox="0 0 25 25"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    id="icon-check"
+  >
+    <defs>
+      <polygon
+        id="icon-check-path-1"
+        points="8.99999946 16.169999 4.82999963 11.9999993 3.40999964 13.409999 8.99999946 18.9999989 20.9999987 6.99999958 19.5899989 5.58999981"
+      />
+    </defs>
+    <g id="icon-check-mark" fill="none" fillRule="evenodd">
+      <use id="icon-check-Fill-2" fill={fill} xlinkHref="#icon-check-path-1" />
+    </g>
+  </svg>
+);

package/src/deprecated/icons/IconCheckEmail.js

@@ -0,0 +1,46 @@
+import React from "react";
+import { BOSTON_BLUE } from "../../constants/colors";
+
+export const IconCheckEmail = ({ fill = BOSTON_BLUE, iconID }) => (
+  <svg
+    width="87px"
+    height="80px"
+    viewBox="0 0 87 80"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g
+      id="Authentication"
+      stroke="none"
+      strokeWidth="1"
+      fill="none"
+      fillRule="evenodd"
+    >
+      <g
+        id="00.1.1---HSS---Register---Verify"
+        transform="translate(-672.000000, -379.000000)"
+      >
+        <g
+          id="Large-Icons/Check-Email"
+          transform="translate(670.000000, 369.000000)"
+        >
+          <g id="Large-Icon-Mask"></g>
+          <g id={`icon-check-email-${iconID}`}>
+            <g transform="translate(2.000000, 10.000000)">
+              <path
+                d="M74.4941678,15.1125372 C76.0546548,15.1125372 78.8749733,18.4166121 82.9551232,25.0247619 C82.9551232,25.0247619 84.184277,29.7742857 84.6669583,36.0219048 L84.6669583,36.0219048 L58.9866256,36.0219048 C58.6524563,36.0219048 58.3366423,36.1019502 58.0566727,36.2442816 C58.0189269,36.263761 57.9816383,36.2841754 57.9450512,36.3056892 L57.8942665,36.3363002 L57.8942665,36.3363002 C57.6952517,36.461434 57.518768,36.6189945 57.3716995,36.8020376 L57.2875148,36.914505 C57.2768503,36.9297514 57.2663785,36.9451478 57.256103,36.9606902 C57.0319171,37.2990305 56.9010866,37.7070423 56.9010866,38.1462857 L56.9010866,38.5462857 C56.9010866,38.6919409 56.9154729,38.8341618 56.9428766,38.9715565 L56.9476148,38.9928079 L56.9476148,38.9928079 L56.9820309,39.1344108 C57.1346469,39.6751429 57.4924331,40.1272754 57.9640126,40.3978973 L58.0159835,40.4268675 L58.0159835,40.4268675 L58.1421751,40.4889645 C58.1851794,40.5083725 58.2289486,40.5263426 58.2734239,40.542815 L58.4093769,40.58806 C58.5926915,40.6417283 58.7863624,40.6704762 58.9866256,40.6704762 L58.9866256,40.6704762 L84.8551738,40.6704762 C84.8596567,42.4314286 84.7801453,44.2380952 84.5846406,46.0419048 L84.5846406,46.0419048 L58.9861578,46.0420952 C58.7358289,46.0420952 58.4958003,46.0870138 58.2734239,46.1693755 L58.1426429,46.2230355 C58.0813089,46.2507157 58.0215308,46.2813209 57.9634793,46.3146775 C57.3295663,46.6783783 56.9010866,47.3709986 56.9010866,48.1659048 L56.9010866,48.5659048 C56.9010866,49.2232148 57.1945435,49.8110702 57.6553396,50.2007317 C57.7452274,50.2768687 57.842125,50.3458573 57.9445244,50.4062277 C57.9816383,50.4278198 58.0189269,50.4482467 58.0568735,50.4675298 C58.3366423,50.6102704 58.6524563,50.6904762 58.9866256,50.6904762 L58.9866256,50.6904762 L83.7932676,50.6904762 C83.3358429,52.5704762 82.7034928,54.3809524 81.8625422,56.06 L81.8625422,56.06 L58.9866256,56.06 C58.6524563,56.06 58.3366423,56.1401256 58.0566727,56.2825476 C57.9728344,56.3255569 57.8920224,56.3738726 57.8149103,56.4273158 C57.7934421,56.4419247 57.7727749,56.4568374 57.7523903,56.4721189 C57.2363781,56.8586283 56.9010866,57.4818742 56.9010866,58.1844762 L56.9010866,58.5854286 C56.9010866,59.0243155 57.0319171,59.4322377 57.2560356,59.7708724 L57.2875148,59.8167242 L57.2875148,59.8167242 L57.3716995,59.9292798 C57.5358858,60.1336677 57.7367333,60.3063347 57.9640126,60.4368388 L58.0159835,60.465731 L58.0159835,60.465731 L58.1421751,60.5279637 C58.1851794,60.5473848 58.2289486,60.5653677 58.2734239,60.5818522 L58.4093769,60.6270362 C58.5926915,60.6807471 58.7863624,60.7095238 58.9866256,60.7095238 L58.9866256,60.7095238 L79.0291277,60.7095238 C77.6035338,62.7314286 76.0769137,64.5085714 74.4941678,66.08 L74.4941678,66.08 L58.9866256,66.08 C58.7362966,66.08 58.496268,66.1249635 58.2738916,66.2073859 L58.1421751,66.2614649 C57.8411451,66.3974129 57.5775954,66.6038385 57.3716995,66.8601488 L57.2875148,66.9727996 C57.2335115,67.0499833 57.1844499,67.130999 57.1408005,67.2153665 C56.9875598,67.5108431 56.9010866,67.8471884 56.9010866,68.204 L56.9010866,68.604 C56.9010866,69.0432434 57.0319171,69.4512553 57.2560356,69.7898625 L57.2875148,69.835557 L57.2875148,69.835557 L57.3716995,69.9482481 C57.5093861,70.1196143 57.6728546,70.2686454 57.8560723,70.3892074 C58.1813438,70.6038449 58.5696984,70.7285714 58.9866256,70.7285714 L58.9866256,70.7285714 L68.85166,70.7285714 C58.74745,77.574061 48.4322892,77.7770354 47.973789,77.7827009 L47.9579175,77.7828571 L48.0728325,60.1485372 L10.2414195,60.1487619 C8.78215025,60.1487619 7.59883254,58.9449524 7.59883254,57.4592381 L7.59883254,33.2220952 C7.59883254,33.1078095 7.60583442,32.9951862 7.61942518,32.8846459 L7.61904762,32.4494503 C7.61904762,32.2717564 7.71924057,32.1180319 7.86362173,32.0468606 C8.22490883,31.2893478 8.92751469,30.729366 9.7684372,30.5746082 L9.7679847,27.0301448 C9.7679847,26.7840568 9.57721521,26.5853966 9.34281681,26.5853966 L8.29743421,26.5853966 C8.06303581,26.5853966 7.87226632,26.3858416 7.87226632,26.1406485 L7.87226632,25.1894064 C7.87226632,24.9817976 8.01684051,24.8028245 8.21103188,24.7571864 C8.63448883,24.6551717 9.00661766,24.5433135 9.32485197,24.4207169 C9.69013706,24.2793282 10.0468675,24.0967756 10.3941877,23.8739541 C10.4592033,23.8327903 10.5336291,23.8095238 10.6097658,23.8095238 L12.0589296,23.8095238 C12.2941834,23.8095238 12.4840975,24.0090788 12.4840975,24.254272 L12.4838325,30.5315372 L48.2648325,30.5315372 L48.3650619,15.1125372 L48.3650619,15.1125372 Z"
+                id="Combined-Shape---White"
+                fill="#FFFFFF"
+              ></path>
+              <path
+                d="M47.9581981,-9.52380985e-05 C56.9565603,-9.52380985e-05 65.4871514,3.12268167 72.3446088,8.7532717 C81.4337394,16.2155591 86.8208942,27.4313505 86.8208942,39.5432381 C86.8208942,61.3771077 69.4263514,79.0865714 47.9581981,79.0865714 C34.4442148,79.0865714 22.5445637,72.0696395 15.5815317,61.4239462 L10.2414195,61.4235238 C8.14067307,61.4235238 6.43378275,59.7533562 6.32915362,57.6628185 L6.32407064,57.4592381 L6.32385133,39.3158583 C2.5913556,37.5703697 -0.000289047552,33.7310733 -0.000289047552,29.275054 C-0.000289047552,23.1754922 4.85570993,18.2314924 10.8467023,18.2314924 C12.2269075,18.2314924 13.546873,18.493895 14.7611005,18.9723776 C21.5837148,7.59648641 33.8971126,-9.52380985e-05 47.9581981,-9.52380985e-05 Z M81.2659457,24.9341955 L49.152062,24.9343333 L49.151711,29.2559048 L51.0326726,29.2568571 C53.1333491,29.2568571 54.8394271,30.9278343 54.9440056,33.0185042 L54.9490861,33.2220952 L54.9490861,57.4592381 C54.9490861,59.5756393 53.308688,61.3119024 51.2346947,61.418352 L51.0326726,61.4235238 L49.151711,61.4229048 L49.1525807,76.4583297 C68.4184149,75.822867 83.8936595,59.8699605 84.2074641,40.1541708 L84.2123228,39.5432381 C84.2123228,34.4178918 83.1815127,29.4659967 81.2659457,24.9341955 Z M46.762711,61.4229048 L18.7470538,61.4241545 C25.1282949,70.2503773 35.271242,76.0790468 46.7630395,76.4583058 L46.762711,61.4229048 Z M52.3990706,36.0128571 L32.320205,48.7167114 C31.331052,49.3411297 30.1513357,49.3778602 29.1401502,48.8263314 L28.9526155,48.716026 L14.6028663,39.6386342 C13.4325124,40.0784334 12.1671766,40.3186156 10.8467023,40.3186156 C10.1725836,40.3186156 9.51283526,40.2560185 8.87275851,40.1362218 L8.87359445,57.4592381 C8.87359445,58.199415 9.42053271,58.7995324 10.1104776,58.8675733 L10.2414195,58.874 L51.0326726,58.874 C51.7386136,58.874 52.3265333,58.3177044 52.3932576,57.596334 L52.3995623,57.4592381 L52.3990706,36.0128571 Z M51.0326726,31.806381 L21.4074656,31.8063616 C20.8002759,34.4427739 19.2653942,36.7152551 17.1725128,38.247413 L30.3153624,46.5612655 C30.5024748,46.6795574 30.6807447,46.6964562 30.8653024,46.6121083 L30.9581754,46.5614978 L52.3839176,33.0068456 C52.2835452,32.3234575 51.7126402,31.806381 51.0326726,31.806381 Z M12.0589296,23.8095238 L10.6097658,23.8095238 C10.5336291,23.8095238 10.4592033,23.8327903 10.3941877,23.8739541 C10.0468675,24.0967756 9.69013706,24.2793282 9.32485197,24.4207169 C9.00661766,24.5433135 8.63448883,24.6551717 8.21103188,24.7571864 C8.01684051,24.8028245 7.87226632,24.9817976 7.87226632,25.1894064 L7.87226632,25.1894064 L7.87226632,26.1406485 C7.87226632,26.3858416 8.06303581,26.5853966 8.29743421,26.5853966 L8.29743421,26.5853966 L9.34281681,26.5853966 C9.57721521,26.5853966 9.7679847,26.7840568 9.7679847,27.0301448 L9.7679847,27.0301448 L9.7679847,31.559954 C9.7679847,31.806042 9.57721521,32.0047021 9.34281681,32.0047021 L9.34281681,32.0047021 L8.0442155,32.0047021 C7.80981711,32.0047021 7.61904762,32.2042571 7.61904762,32.4494503 L7.61904762,32.4494503 L7.61904762,33.8409661 C7.61904762,34.0861593 7.80981711,34.2857143 8.0442155,34.2857143 L8.0442155,34.2857143 L13.8605464,34.2857143 C14.0949448,34.2857143 14.2857143,34.0861593 14.2857143,33.8409661 L14.2857143,33.8409661 L14.2857143,32.4494503 C14.2857143,32.2042571 14.0949448,32.0047021 13.8605464,32.0047021 L13.8605464,32.0047021 L12.9101208,32.0047021 C12.6748669,32.0047021 12.4840975,31.806042 12.4840975,31.559954 L12.4840975,31.559954 L12.4840975,24.254272 C12.4840975,24.0090788 12.2941834,23.8095238 12.0589296,23.8095238 L12.0589296,23.8095238 Z M47.9581981,2.60847619 C34.8918219,2.60847619 23.4361353,9.6518814 17.0556177,20.2182119 C19.8551989,22.2115316 21.6874843,25.5155914 21.6936779,29.2560279 L46.762711,29.2559048 L46.763062,14.0740952 C46.763062,13.455487 47.2332005,12.9466855 47.8356664,12.8855018 L47.9578239,12.8793333 L73.0447529,12.8785871 C72.2926086,12.1445579 71.5069884,11.4406886 70.6893001,10.7693565 C64.5776396,5.75113293 57.0494428,2.8717032 49.0738741,2.62566643 L48.5167254,2.61277997 L47.9581981,2.60847619 Z M54.7243432,17.1422857 C53.5466381,17.168 52.61308,18.1594286 52.6374011,19.3584762 C52.6626577,20.5565714 53.6364393,21.508 54.8141444,21.4822857 C55.9909141,21.4575238 56.9244723,20.4651429 56.9001511,19.2670476 C56.87583,18.068 55.9011129,17.1165714 54.7243432,17.1422857 Z M62.1593202,17.1422857 C60.981615,17.168 60.0471214,18.1594286 60.072378,19.3584762 C60.0976346,20.5565714 61.0714162,21.508 62.2491213,21.4822857 C63.4249556,21.4575238 64.3594492,20.4651429 64.335128,19.2670476 C64.3108069,18.068 63.3360899,17.1165714 62.1593202,17.1422857 Z M69.5943906,17.1422857 C68.4166855,17.168 67.4821919,18.1594286 67.506513,19.3584762 C67.5327051,20.5565714 68.5064867,21.508 69.6841918,21.4822857 C70.8600261,21.4575238 71.7945197,20.4651429 71.7701985,19.2670476 C71.7458773,18.068 70.7711603,17.1165714 69.5943906,17.1422857 Z"
+                id="Combined-Shape---PRIMARY-Color"
+                fill={fill}
+              ></path>
+            </g>
+          </g>
+        </g>
+      </g>
+    </g>
+  </svg>
+);

package/src/deprecated/icons/IconChevron.js

@@ -0,0 +1,35 @@
+import React from "react";
+import { STORM_GREY, WHITE, PICKLED_BLUE } from "../../constants/colors";
+
+export const IconChevron = ({ fill = STORM_GREY }) => {
+  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"
+      id={`icon-chevron`}
+    >
+      <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`} fill={WHITE}>
+          <use xlinkHref={`#icon-chevron-path-1`} />
+        </mask>
+        <use
+          id={`icon-chevron-Fill-2`}
+          fill={PICKLED_BLUE}
+          xlinkHref={`#icon-chevron-path-1`}
+        />
+        <g id="Colors/Blue-Dark" mask={`url(#icon-chevron-mask-2)`} fill={fill}>
+          <rect id={`icon-chevron-rect`} width="24" height="24" />
+        </g>
+      </g>
+    </svg>
+  );
+};