@thecb/components 7.7.4 → 7.7.5-beta.2

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

@@ -0,0 +1,40 @@
+import React from "react";
+
+const XCircleIconMedium = ({ color = "#D11053" }) => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle cx="12" cy="12" r="12" fill={color} />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M7.35355 8.07502C7.15829 8.27028 7.15829 8.58686 7.35355 8.78212L10.5714 12L7.35355 15.2179C7.15829 15.4131 7.15829 15.7297 7.35355 15.925L8.07502 16.6464C8.27028 16.8417 8.58686 16.8417 8.78212 16.6464L12 13.4286L15.2179 16.6464C15.4131 16.8417 15.7297 16.8417 15.925 16.6464L16.6464 15.925C16.8417 15.7297 16.8417 15.4131 16.6464 15.2179L13.4286 12L16.6464 8.78212C16.8417 8.58686 16.8417 8.27028 16.6464 8.07502L15.925 7.35355C15.7297 7.15829 15.4131 7.15829 15.2179 7.35355L12 10.5714L8.78212 7.35355C8.58686 7.15829 8.27028 7.15829 8.07502 7.35355L7.35355 8.07502Z"
+      fill="white"
+    />
+    <mask
+      id="mask0_0_637"
+      style={{ maskType: "luminance" }}
+      maskUnits="userSpaceOnUse"
+      x="7"
+      y="7"
+      width="10"
+      height="10"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.35355 8.07502C7.15829 8.27028 7.15829 8.58686 7.35355 8.78212L10.5714 12L7.35355 15.2179C7.15829 15.4131 7.15829 15.7297 7.35355 15.925L8.07502 16.6464C8.27028 16.8417 8.58686 16.8417 8.78212 16.6464L12 13.4286L15.2179 16.6464C15.4131 16.8417 15.7297 16.8417 15.925 16.6464L16.6464 15.925C16.8417 15.7297 16.8417 15.4131 16.6464 15.2179L13.4286 12L16.6464 8.78212C16.8417 8.58686 16.8417 8.27028 16.6464 8.07502L15.925 7.35355C15.7297 7.15829 15.4131 7.15829 15.2179 7.35355L12 10.5714L8.78212 7.35355C8.58686 7.15829 8.27028 7.15829 8.07502 7.35355L7.35355 8.07502Z"
+        fill="white"
+      />
+    </mask>
+    <g mask="url(#mask0_0_637)">
+      <path d="M0 0H24V24H0V0Z" fill="white" />
+    </g>
+  </svg>
+);
+
+export default XCircleIconMedium;

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

@@ -0,0 +1,40 @@
+import React from "react";
+
+const XCircleIconSmall = ({ color = "#D11053" }) => (
+  <svg
+    width="21"
+    height="20"
+    viewBox="0 0 21 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle cx="10.5" cy="10" r="10" fill={color} />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M13.8298 6.18691C13.6345 5.99165 13.3179 5.99165 13.1227 6.18691L10.5 8.80955L7.87739 6.18691C7.68213 5.99165 7.36554 5.99165 7.17028 6.18691L6.68691 6.67028C6.49165 6.86554 6.49165 7.18213 6.68691 7.37739L9.30955 10L6.68691 12.6227C6.49165 12.8179 6.49165 13.1345 6.68691 13.3298L7.17028 13.8131C7.36554 14.0084 7.68213 14.0084 7.87739 13.8131L10.5 11.1905L13.1227 13.8131C13.3179 14.0084 13.6345 14.0084 13.8298 13.8131L14.3131 13.3298C14.5084 13.1345 14.5084 12.8179 14.3131 12.6227L11.6905 10L14.3131 7.37739C14.5084 7.18213 14.5084 6.86554 14.3131 6.67028L13.8298 6.18691Z"
+      fill="white"
+    />
+    <mask
+      id="mask0_1409_671"
+      style={{ maskType: "luminance" }}
+      maskUnits="userSpaceOnUse"
+      x="6"
+      y="6"
+      width="9"
+      height="8"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M13.8298 6.18691C13.6345 5.99165 13.3179 5.99165 13.1227 6.18691L10.5 8.80955L7.87739 6.18691C7.68213 5.99165 7.36554 5.99165 7.17028 6.18691L6.68691 6.67028C6.49165 6.86554 6.49165 7.18213 6.68691 7.37739L9.30955 10L6.68691 12.6227C6.49165 12.8179 6.49165 13.1345 6.68691 13.3298L7.17028 13.8131C7.36554 14.0084 7.68213 14.0084 7.87739 13.8131L10.5 11.1905L13.1227 13.8131C13.3179 14.0084 13.6345 14.0084 13.8298 13.8131L14.3131 13.3298C14.5084 13.1345 14.5084 12.8179 14.3131 12.6227L11.6905 10L14.3131 7.37739C14.5084 7.18213 14.5084 6.86554 14.3131 6.67028L13.8298 6.18691Z"
+        fill="white"
+      />
+    </mask>
+    <g mask="url(#mask0_1409_671)">
+      <path d="M0.5 0H20.5V20H0.5V0Z" fill="white" />
+    </g>
+  </svg>
+);
+
+export default XCircleIconSmall;

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

@@ -17,6 +17,7 @@ import AccountNumberImage from "./AccountNumberImage";
 import RoutingNumberImage from "./RoutingNumberImage";
 import CheckmarkIcon from "./CheckmarkIcon";
 import BankIcon from "./BankIcon";
+import BankIconLarge from "./BankIconLarge";
 import GenericCard from "./GenericCard";
 import IconAdd from "./IconAdd";
 import IconQuitLarge from "./IconQuitLarge";
@@ -63,6 +64,21 @@ import ProfileImage from "./ProfileImage";
 import RevenueManagementImage from "./RevenueManagementImage";
 import FindIconSmall from "./FindIconSmall";
 import HistoryIconSmall from "./HistoryIconSmall";
+import ChargebackIconSmall from "./ChargebackIconSmall";
+import ChargebackReversalIconSmall from "./ChargebackReversalIconSmall";
+import RefundIconSmall from "./RefundIconSmall";
+import XCircleIconSmall from "./XCircleIconSmall";
+import SuccessfulIconSmall from "./SuccessfulIconSmall";
+import ArrowLeftCircleIconSmall from "./ArrowLeftCircleIconSmall";
+import ArrowRightCircleIconSmall from "./ArrowRightCircleIconSmall";
+import ArrowUpCircleIconSmall from "./ArrowUpCircleIconSmall";
+import ArrowDownCircleIconSmall from "./ArrowDownCircleIconSmall";
+import SuccessfulIconMedium from "./SuccessfulIconMedium";
+import XCircleIconMedium from "./XCircleIconMedium";
+import RefundIconMedium from "./RefundIconMedium";
+import ArrowLeftCircleIconMedium from "./ArrowLeftCircleIconMedium";
+import ChargebackIconMedium from "./ChargebackIconMedium";
+import ChargebackReversalIconMedium from "./ChargebackReversalIconMedium";
 
 export {
   AccountsIcon,
@@ -84,6 +100,7 @@ export {
   RoutingNumberImage,
   CheckmarkIcon,
   BankIcon,
+  BankIconLarge,
   GenericCard,
   IconAdd,
   IconQuitLarge,
@@ -129,5 +146,20 @@ export {
   ProfileImage,
   RevenueManagementImage,
   FindIconSmall,
-  HistoryIconSmall
+  HistoryIconSmall,
+  ChargebackIconSmall,
+  ChargebackReversalIconSmall,
+  RefundIconSmall,
+  XCircleIconSmall,
+  SuccessfulIconSmall,
+  ArrowLeftCircleIconSmall,
+  ArrowRightCircleIconSmall,
+  ArrowUpCircleIconSmall,
+  ArrowDownCircleIconSmall,
+  SuccessfulIconMedium,
+  XCircleIconMedium,
+  RefundIconMedium,
+  ArrowLeftCircleIconMedium,
+  ChargebackIconMedium,
+  ChargebackReversalIconMedium
 };