@thecb/components 7.8.0-beta.0 → 7.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "7.8.0-beta.0",
+  "version": "7.8.0",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",

package/src/components/atoms/button-with-action/ButtonWithAction.js

@@ -36,10 +36,10 @@ const SpinnerContainer = styled.div`
 
 const SpinnerIconWrapper = styled(rotate)``;
 
-const Spinner = ({ isMobile }) => (
+const Spinner = ({ color, isMobile }) => (
   <SpinnerContainer>
     <SpinnerIconWrapper initialPose="fixed" pose="rotate">
-      <SpinnerIcon isMobile={isMobile} />
+      <SpinnerIcon color={color} isMobile={isMobile} />
     </SpinnerIconWrapper>
   </SpinnerContainer>
 );
@@ -66,6 +66,7 @@ const ButtonWithAction = ({
   text,
   textWrap = false,
   isLoading = false,
+  loadingColor = "white",
   dataQa = null,
   textExtraStyles,
   contentOverride = false,
@@ -140,7 +141,7 @@ const ButtonWithAction = ({
       ) : (
         <Center intrinsic>
           {isLoading ? (
-            <Spinner isMobile={isMobile} />
+            <Spinner color={loadingColor} isMobile={isMobile} />
           ) : (
             <Text
               weight={themeValues.fontWeight}

package/src/components/atoms/button-with-action/ButtonWithAction.theme.js

@@ -13,6 +13,7 @@ const padding = {
   tertiary: "0.75rem 1.5rem",
   ghost: "0.65rem 0",
   danger: "0.75rem 1.5rem",
+  dangerSecondary: "0.75rem 1.5rem",
   whiteSecondary: "0.75rem 2rem",
   whitePrimary: "1.125rem 0.75rem"
 };
@@ -27,6 +28,7 @@ const color = {
   ghost: "#15749D",
   tertiary: "#15749D",
   danger: "#FFFFFF",
+  dangerSecondary: "#D11053",
   whiteSecondary: "#FFFFFF",
   whitePrimary: "#FFFFFF"
 };
@@ -41,6 +43,7 @@ const fontSizeVariant = {
   ghost: "pL",
   tertiary: "pS",
   danger: "pS",
+  dangerSecondary: "pS",
   whiteSecondary: "pS",
   whitePrimary: "pS"
 };
@@ -55,6 +58,7 @@ const fontWeight = {
   ghost: "600",
   tertiary: "600",
   danger: "600",
+  dangerSecondary: "600",
   whiteSecondary: "600",
   whitePrimary: "600"
 };
@@ -69,6 +73,7 @@ const height = {
   ghost: "3rem",
   tertiary: "3rem",
   danger: "3rem",
+  dangerSecondary: "3rem",
   whiteSecondary: "3rem",
   whitePrimary: "auto"
 };
@@ -83,6 +88,7 @@ const minWidth = {
   ghost: "130px",
   tertiary: "130px",
   danger: "130px",
+  dangerSecondary: "157px",
   whiteSecondary: "160px",
   whitePrimary: "130px"
 };
@@ -97,6 +103,7 @@ const backgroundColor = {
   ghost: "transparent",
   tertiary: "transparent",
   danger: "#ED125F",
+  dangerSecondary: "transparent",
   whiteSecondary: "transparent",
   whitePrimary: "transparent"
 };
@@ -111,6 +118,7 @@ const border = {
   ghost: "none",
   tertiary: "none",
   danger: "2px solid #ED125F",
+  dangerSecondary: "2px solid #D11053",
   whiteSecondary: "2px solid white",
   whitePrimary: "2px solid transparent"
 };
@@ -125,6 +133,7 @@ const hoverBackgroundColor = {
   ghost: "transparent",
   tertiary: "transparent",
   danger: "#BA002C",
+  dangerSecondary: "transparent",
   whiteSecondary: "transparent",
   whitePrimary: "transparent"
 };
@@ -139,6 +148,7 @@ const hoverBorderColor = {
   ghost: "transparent",
   tertiary: "transparent",
   danger: "#BA002C",
+  dangerSecondary: "#B10541",
   whiteSecondary: "2px solid transparent",
   whitePrimary: "2px solid transparent"
 };
@@ -153,6 +163,7 @@ const hoverColor = {
   ghost: "#116285",
   tertiary: "#116285",
   danger: "#FFFFFF",
+  dangerSecondary: "#B10541",
   whiteSecondary: "#FFFFFF",
   whitePrimary: "#FFFFFF"
 };
@@ -167,6 +178,7 @@ const activeBackgroundColor = {
   ghost: "transparent",
   tertiary: "transparent",
   danger: "#870000",
+  dangerSecondary: "transparent",
   whiteSecondary: "transparent",
   whitePrimary: "transparent"
 };
@@ -181,6 +193,7 @@ const activeBorderColor = {
   ghost: "transparent",
   tertiary: "transparent",
   danger: "#870000",
+  dangerSecondary: "#910029",
   whiteSecondary: "2px solid transparent",
   whitePrimary: "2px solid transparent"
 };
@@ -195,6 +208,7 @@ const activeColor = {
   ghost: "#0E506D",
   tertiary: "#0E506D",
   danger: "#FFFFFF",
+  dangerSecondary: "#910029",
   whiteSecondary: "#FFFFFF",
   whitePrimary: "#FFFFFF"
 };

package/src/components/atoms/icons/ArrowDownCircleIconSmall.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import Expand from "../../../util/expand";
+
+export interface ArrowDownCircleIconSmallProps {
+  color?: string;
+  iconIndex?: number;
+}
+
+export const ArrowDownCircleIconSmall: React.FC<Expand<
+  ArrowDownCircleIconSmallProps
+> &
+  React.HTMLAttributes<HTMLElement>>;

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

@@ -0,0 +1,50 @@
+import React from "react";
+
+const ArrowDownCircleIconSmall = ({ color = "#15749D", iconIndex = 0 }) => {
+  const id = `ArrowDownCircleIconSmall-${iconIndex}`;
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle cx="10" cy="10" r="10" fill={color} />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M14.6696 9.47199C14.4745 9.27685 14.1581 9.27671 13.9628 9.47167L10.8226 12.6062V5.5C10.8226 5.22386 10.5988 5 10.3226 5H10.0726C9.79649 5 9.57263 5.22386 9.57263 5.5V12.6062L6.43244 9.47167C6.23712 9.27671 5.92078 9.27685 5.72564 9.47199L5.55119 9.64645C5.35592 9.84171 5.35592 10.1583 5.55119 10.3536L9.84408 14.6464C10.0393 14.8417 10.3559 14.8417 10.5512 14.6464L14.8441 10.3536C15.0393 10.1583 15.0393 9.84171 14.8441 9.64645L14.6696 9.47199Z"
+        fill="white"
+      />
+      <mask
+        id={id}
+        style={{ maskType: "luminance" }}
+        maskUnits="userSpaceOnUse"
+        x="5"
+        y="5"
+        width="10"
+        height="10"
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M14.6696 9.47199C14.4745 9.27685 14.1581 9.27671 13.9628 9.47167L10.8226 12.6062V5.5C10.8226 5.22386 10.5988 5 10.3226 5H10.0726C9.79649 5 9.57263 5.22386 9.57263 5.5V12.6062L6.43244 9.47167C6.23712 9.27671 5.92078 9.27685 5.72564 9.47199L5.55119 9.64645C5.35592 9.84171 5.35592 10.1583 5.55119 10.3536L9.84408 14.6464C10.0393 14.8417 10.3559 14.8417 10.5512 14.6464L14.8441 10.3536C15.0393 10.1583 15.0393 9.84171 14.8441 9.64645L14.6696 9.47199Z"
+          fill="white"
+        />
+      </mask>
+      <g mask={`url(#${id})`}>
+        <rect
+          x="17.6976"
+          y="2.5"
+          width="15"
+          height="15"
+          transform="rotate(90 17.6976 2.5)"
+          fill="white"
+        />
+      </g>
+    </svg>
+  );
+};
+
+export default ArrowDownCircleIconSmall;

package/src/components/atoms/icons/ArrowLeftCircleIconMedium.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import Expand from "../../../util/expand";
+
+export interface ArrowLeftCircleIconMediumProps {
+  color?: string;
+  iconIndex?: number;
+}
+
+export const ArrowLeftCircleIconMedium: React.FC<Expand<
+  ArrowLeftCircleIconMediumProps
+> &
+  React.HTMLAttributes<HTMLElement>>;

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

@@ -0,0 +1,50 @@
+import React from "react";
+
+const ArrowLeftCircleIconMedium = ({ color = "#15749D", iconIndex = 0 }) => {
+  const id = `ArrowLeftCircleIconMedium-${iconIndex}`;
+  return (
+    <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="M12.7043 17.2957C12.8994 17.1006 12.8995 16.7843 12.7046 16.5889L8.8725 12.75H17.5C17.7761 12.75 18 12.5261 18 12.25V11.75C18 11.4739 17.7761 11.25 17.5 11.25H8.8725L12.7046 7.41105C12.8995 7.21574 12.8994 6.8994 12.7043 6.70426L12.3536 6.35355C12.1583 6.15829 11.8417 6.15829 11.6464 6.35355L6.35355 11.6464C6.15829 11.8417 6.15829 12.1583 6.35355 12.3536L11.6464 17.6464C11.8417 17.8417 12.1583 17.8417 12.3536 17.6464L12.7043 17.2957Z"
+        fill="white"
+      />
+      <mask
+        id={id}
+        style={{ maskType: "luminance" }}
+        maskUnits="userSpaceOnUse"
+        x="6"
+        y="6"
+        width="12"
+        height="12"
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M12.7043 17.2957C12.8994 17.1006 12.8995 16.7843 12.7046 16.5889L8.8725 12.75H17.5C17.7761 12.75 18 12.5261 18 12.25V11.75C18 11.4739 17.7761 11.25 17.5 11.25H8.8725L12.7046 7.41105C12.8995 7.21574 12.8994 6.8994 12.7043 6.70426L12.3536 6.35355C12.1583 6.15829 11.8417 6.15829 11.6464 6.35355L6.35355 11.6464C6.15829 11.8417 6.15829 12.1583 6.35355 12.3536L11.6464 17.6464C11.8417 17.8417 12.1583 17.8417 12.3536 17.6464L12.7043 17.2957Z"
+          fill="white"
+        />
+      </mask>
+      <g mask={`url(#${id})`}>
+        <rect
+          x="21"
+          y="21"
+          width="18"
+          height="18"
+          transform="rotate(180 21 21)"
+          fill="white"
+        />
+      </g>
+    </svg>
+  );
+};
+
+export default ArrowLeftCircleIconMedium;

package/src/components/atoms/icons/ArrowLeftCircleIconSmall.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import Expand from "../../../util/expand";
+
+export interface ArrowLeftCircleIconSmallProps {
+  color?: string;
+  iconIndex?: number;
+}
+
+export const ArrowLeftCircleIconSmall: React.FC<Expand<
+  ArrowLeftCircleIconSmallProps
+> &
+  React.HTMLAttributes<HTMLElement>>;

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

@@ -0,0 +1,49 @@
+import React from "react";
+
+const ArrowLeftCircleIconSmall = ({ color = "#15749D", iconIndex = 0 }) => {
+  const id = `ArrowLeftCircleIconSmall-${iconIndex}`;
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle cx="10" cy="10" r="10" fill={color} />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10.528 14.472C10.7232 14.2768 10.7233 13.9605 10.5283 13.7652L7.39375 10.625H14.5C14.7761 10.625 15 10.4011 15 10.125V9.875C15 9.59886 14.7761 9.375 14.5 9.375H7.39375L10.5283 6.2348C10.7233 6.03949 10.7232 5.72315 10.528 5.52801L10.3536 5.35355C10.1583 5.15829 9.84171 5.15829 9.64645 5.35355L5.35355 9.64645C5.15829 9.84171 5.15829 10.1583 5.35355 10.3536L9.64645 14.6464C9.84171 14.8417 10.1583 14.8417 10.3536 14.6464L10.528 14.472Z"
+        fill="white"
+      />
+      <mask
+        id={id}
+        style={{ maskType: "luminance" }}
+        maskUnits="userSpaceOnUse"
+        x="5"
+        y="5"
+        width="10"
+        height="10"
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M10.528 14.472C10.7232 14.2768 10.7233 13.9605 10.5283 13.7652L7.39375 10.625H14.5C14.7761 10.625 15 10.4011 15 10.125V9.875C15 9.59886 14.7761 9.375 14.5 9.375H7.39375L10.5283 6.2348C10.7233 6.03949 10.7232 5.72315 10.528 5.52801L10.3536 5.35355C10.1583 5.15829 9.84171 5.15829 9.64645 5.35355L5.35355 9.64645C5.15829 9.84171 5.15829 10.1583 5.35355 10.3536L9.64645 14.6464C9.84171 14.8417 10.1583 14.8417 10.3536 14.6464L10.528 14.472Z"
+          fill="white"
+        />
+      </mask>
+      <g mask={`url(#${id})`}>
+        <rect
+          x="17.5"
+          y="17.5"
+          width="15"
+          height="15"
+          transform="rotate(180 17.5 17.5)"
+          fill="white"
+        />
+      </g>
+    </svg>
+  );
+};
+export default ArrowLeftCircleIconSmall;

package/src/components/atoms/icons/ArrowRightCircleIconSmall.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import Expand from "../../../util/expand";
+
+export interface ArrowRightCircleIconSmallProps {
+  color?: string;
+  iconIndex?: number;
+}
+
+export const ArrowRightCircleIconSmall: React.FC<Expand<
+  ArrowRightCircleIconSmallProps
+> &
+  React.HTMLAttributes<HTMLElement>>;

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

@@ -0,0 +1,42 @@
+import React from "react";
+
+const ArrowRightCircleIconSmall = ({ color = "#15749D", iconIndex = 0 }) => {
+  const id = `ArrowRightCircleIconSmall-${iconIndex}`;
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle cx="10" cy="10" r="10" fill={color} />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9.47199 5.52801C9.27685 5.72315 9.27671 6.03949 9.47167 6.2348L12.6062 9.375H5.5C5.22386 9.375 5 9.59886 5 9.875V10.125C5 10.4011 5.22386 10.625 5.5 10.625H12.6062L9.47167 13.7652C9.27671 13.9605 9.27685 14.2768 9.47199 14.472L9.64645 14.6464C9.84171 14.8417 10.1583 14.8417 10.3536 14.6464L14.6464 10.3536C14.8417 10.1583 14.8417 9.84171 14.6464 9.64645L10.3536 5.35355C10.1583 5.15829 9.84171 5.15829 9.64645 5.35355L9.47199 5.52801Z"
+        fill="white"
+      />
+      <mask
+        id={id}
+        style={{ maskType: "luminance" }}
+        maskUnits="userSpaceOnUse"
+        x="5"
+        y="5"
+        width="10"
+        height="10"
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M9.47199 5.52801C9.27685 5.72315 9.27671 6.03949 9.47167 6.2348L12.6062 9.375H5.5C5.22386 9.375 5 9.59886 5 9.875V10.125C5 10.4011 5.22386 10.625 5.5 10.625H12.6062L9.47167 13.7652C9.27671 13.9605 9.27685 14.2768 9.47199 14.472L9.64645 14.6464C9.84171 14.8417 10.1583 14.8417 10.3536 14.6464L14.6464 10.3536C14.8417 10.1583 14.8417 9.84171 14.6464 9.64645L10.3536 5.35355C10.1583 5.15829 9.84171 5.15829 9.64645 5.35355L9.47199 5.52801Z"
+          fill="white"
+        />
+      </mask>
+      <g mask={`url(#${id})`}>
+        <rect x="2.5" y="2.5" width="15" height="15" fill="white" />
+      </g>
+    </svg>
+  );
+};
+export default ArrowRightCircleIconSmall;

package/src/components/atoms/icons/ArrowUpCircleIconSmall.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import Expand from "../../../util/expand";
+
+export interface ArrowUpCircleIconSmallProps {
+  color?: string;
+  iconIndex?: number;
+}
+
+export const ArrowUpCircleIconSmall: React.FC<Expand<
+  ArrowUpCircleIconSmallProps
+> &
+  React.HTMLAttributes<HTMLElement>>;

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

@@ -0,0 +1,50 @@
+import React from "react";
+
+const ArrowUpCircleIconSmall = ({ color = "#15749D", iconIndex = 0 }) => {
+  const id = `ArrowUpCircleIconSmall-${iconIndex}`;
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle cx="10" cy="10" r="10" fill={color} />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M5.52801 10.528C5.72315 10.7232 6.03949 10.7233 6.2348 10.5283L9.375 7.39375L9.375 14.5C9.375 14.7761 9.59886 15 9.875 15H10.125C10.4011 15 10.625 14.7761 10.625 14.5L10.625 7.39375L13.7652 10.5283C13.9605 10.7233 14.2768 10.7232 14.472 10.528L14.6464 10.3536C14.8417 10.1583 14.8417 9.84171 14.6464 9.64645L10.3536 5.35355C10.1583 5.15829 9.84171 5.15829 9.64645 5.35355L5.35355 9.64645C5.15829 9.84171 5.15829 10.1583 5.35355 10.3536L5.52801 10.528Z"
+        fill="white"
+      />
+      <mask
+        id={id}
+        style={{ maskType: "luminance" }}
+        maskUnits="userSpaceOnUse"
+        x="5"
+        y="5"
+        width="10"
+        height="10"
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M5.52801 10.528C5.72315 10.7232 6.03949 10.7233 6.2348 10.5283L9.375 7.39375L9.375 14.5C9.375 14.7761 9.59886 15 9.875 15H10.125C10.4011 15 10.625 14.7761 10.625 14.5L10.625 7.39375L13.7652 10.5283C13.9605 10.7233 14.2768 10.7232 14.472 10.528L14.6464 10.3536C14.8417 10.1583 14.8417 9.84171 14.6464 9.64645L10.3536 5.35355C10.1583 5.15829 9.84171 5.15829 9.64645 5.35355L5.35355 9.64645C5.15829 9.84171 5.15829 10.1583 5.35355 10.3536L5.52801 10.528Z"
+          fill="white"
+        />
+      </mask>
+      <g mask={`url(#${id})`}>
+        <rect
+          x="2.5"
+          y="17.5"
+          width="15"
+          height="15"
+          transform="rotate(-90 2.5 17.5)"
+          fill="white"
+        />
+      </g>
+    </svg>
+  );
+};
+
+export default ArrowUpCircleIconSmall;

package/src/components/atoms/icons/BankIconLarge.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import Expand from "../../../util/expand";
+
+export interface BankIconLargeProps {
+  iconIndex?: number;
+}
+
+export const BankIconLarge: React.FC<Expand<BankIconLargeProps> &
+  React.HTMLAttributes<HTMLElement>>;

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

@@ -0,0 +1,34 @@
+import React from "react";
+
+export const BankIconLarge = ({ iconIndex = 0 }) => {
+  const id = `BankIconLarge-${iconIndex}`;
+  return (
+    <svg
+      width="36"
+      height="24"
+      viewBox="0 0 36 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clipPath={`url(#${id})`}>
+        <path
+          d="M0 3C0 1.34315 1.34315 0 3 0H33C34.6569 0 36 1.34315 36 3V21C36 22.6569 34.6569 24 33 24H3C1.34315 24 0 22.6569 0 21V3Z"
+          fill="#E4F4FD"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M33 1.5H3C2.17157 1.5 1.5 2.17157 1.5 3V21C1.5 21.8284 2.17157 22.5 3 22.5H33C33.8284 22.5 34.5 21.8284 34.5 21V3C34.5 2.17157 33.8284 1.5 33 1.5ZM3 0C1.34315 0 0 1.34315 0 3V21C0 22.6569 1.34315 24 3 24H33C34.6569 24 36 22.6569 36 21V3C36 1.34315 34.6569 0 33 0H3ZM23.7544 14.8335C23.6706 14.9563 23.6209 15.1293 23.6209 15.3332C23.6209 15.5465 23.5436 15.7411 23.4165 15.8885C23.349 15.9671 23.2696 16.0296 23.1834 16.0752C23.0922 16.1237 22.9909 16.1546 22.8836 16.1637C22.6961 16.1799 22.5022 16.1282 22.3391 16.0029C21.4102 15.2896 20.6945 14.8834 20.1572 14.6767C19.6165 14.4687 19.3143 14.4844 19.17 14.5249C18.988 14.576 18.7994 14.7857 18.7994 15.3332C18.7994 15.7935 18.4397 16.1665 17.9959 16.1665C17.5521 16.1665 17.1923 15.7935 17.1923 15.3332C17.1923 14.5422 17.4859 13.2709 18.7503 12.9161C19.3292 12.7536 19.9913 12.8352 20.7162 13.1141C21.2068 13.3028 21.7532 13.592 22.3632 13.9954C22.3882 13.9532 22.4147 13.9115 22.4428 13.8703C22.7715 13.3891 23.2775 13.0439 23.9432 12.9038C25.2058 12.6381 27.0336 13.1058 29.636 14.6047C30.024 14.8281 30.1638 15.3354 29.9483 15.7378C29.7329 16.1401 29.2437 16.2852 28.8557 16.0617C26.3153 14.5986 24.9289 14.397 24.2629 14.5371C23.9643 14.5999 23.8275 14.7265 23.7544 14.8335ZM26.8351 8.66659C26.8351 9.12683 26.4754 9.49992 26.0316 9.49992H17.996C17.5522 9.49992 17.1924 9.12683 17.1924 8.66659C17.1924 8.20636 17.5522 7.83327 17.996 7.83327H26.0316C26.4754 7.83327 26.8351 8.20636 26.8351 8.66659ZM8.81666 5.33333H10.8382C10.9311 5.33333 11.0201 5.37159 11.0858 5.43968C11.1514 5.50777 11.1883 5.60012 11.1883 5.69642V6.76975C11.9563 6.96326 12.6887 7.3019 13.3469 7.77398C13.4195 7.83002 13.4679 7.91348 13.4816 8.00627C13.4953 8.09906 13.4731 8.1937 13.42 8.26967L12.4001 9.76307C12.3498 9.84051 12.2725 9.89466 12.1844 9.9141C12.0964 9.93354 12.0045 9.91674 11.9282 9.86726C11.166 9.34181 10.2765 9.04965 9.36164 9.02426C8.67662 9.02426 8.34171 9.31157 8.34171 9.70308V9.73465C8.34171 10.2177 8.69184 10.4293 10.1167 10.7608C12.4427 11.288 13.898 12.071 13.898 14.0475V14.0759C13.898 15.789 12.8604 16.9502 11.1944 17.3552V18.3508C11.1944 18.3931 11.1862 18.4349 11.1704 18.4739C11.1545 18.5128 11.1312 18.548 11.102 18.5775C11.0728 18.6069 11.0381 18.63 11.0001 18.6453C10.9621 18.6606 10.9215 18.6678 10.8808 18.6665H8.77705C8.6963 18.6665 8.61885 18.6333 8.56175 18.5741C8.50466 18.5148 8.4726 18.4345 8.4726 18.3508V17.4163C7.31992 17.2199 6.22353 16.7352 5.28198 15.9955C5.24358 15.966 5.21155 15.9285 5.18791 15.8854C5.16427 15.8423 5.14954 15.7946 5.14467 15.7453C5.1398 15.696 5.1449 15.6462 5.15963 15.599C5.17436 15.5519 5.1984 15.5084 5.23023 15.4714L6.36278 14.0728C6.41845 14.0015 6.49805 13.9548 6.58558 13.9419C6.67311 13.929 6.76211 13.9509 6.83469 14.0033C7.71463 14.685 8.78089 15.0588 9.87921 15.0704C10.6495 15.0704 11.0544 14.7989 11.0544 14.3474V14.3159C11.0544 13.8644 10.7225 13.637 9.32511 13.2929C7.16045 12.7783 5.489 12.1468 5.489 9.99039V9.95881C5.489 8.27314 6.59751 6.98782 8.46654 6.66335V5.69642C8.46654 5.60012 8.50342 5.50777 8.56908 5.43968C8.63474 5.37159 8.7238 5.33333 8.81666 5.33333Z"
+          fill="#15749D"
+        />
+      </g>
+      <defs>
+        <clipPath id={id}>
+          <rect width="36" height="24" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export default BankIconLarge;

package/src/components/atoms/icons/ChargebackIconMedium.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import Expand from "../../../util/expand";
+
+export interface ChargebackIconMediumProps {
+  color?: string;
+  iconIndex?: number;
+}
+
+export const ChargebackIconMedium: React.FC<Expand<ChargebackIconMediumProps> &
+  React.HTMLAttributes<HTMLElement>>;

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

@@ -0,0 +1,37 @@
+import React from "react";
+
+const ChargebackIconMedium = ({ color = "#15749D", iconIndex = 0 }) => {
+  const id = `ChargebackIconMedium-${iconIndex}`;
+  return (
+    <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} />
+      <mask
+        id={id}
+        style={{ maskType: "luminance" }}
+        maskUnits="userSpaceOnUse"
+        x="3"
+        y="7"
+        width="17"
+        height="10"
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M7.99999 8C7.99999 7.44772 8.4477 7 8.99999 7H19C19.5523 7 20 7.44772 20 8V10V12V16C20 16.5523 19.5523 17 19 17H8.99999C8.4477 17 7.99999 16.5523 7.99999 16V12V10V8ZM19.25 7.83333V10H8.74999V9.91667V7.83333H19.25ZM8.74999 16.1667V12H19.25V16.1667H8.74999ZM5.79295 10.2071C5.79295 9.76165 5.25438 9.53857 4.9394 9.85355L3.14651 11.6464C2.95125 11.8417 2.95125 12.1583 3.14651 12.3536L4.9394 14.1464C5.25438 14.4614 5.79295 14.2383 5.79295 13.7929V10.2071ZM16.1875 14C15.9113 14 15.6875 14.2239 15.6875 14.5C15.6875 14.7761 15.9113 15 16.1875 15H17.4375C17.7136 15 17.9375 14.7761 17.9375 14.5C17.9375 14.2239 17.7136 14 17.4375 14H16.1875Z"
+          fill="white"
+        />
+      </mask>
+      <g mask={`url(#${id})`}>
+        <rect x="3" y="3" width="18" height="18" fill="white" />
+      </g>
+    </svg>
+  );
+};
+
+export default ChargebackIconMedium;

package/src/components/atoms/icons/ChargebackIconSmall.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import Expand from "../../../util/expand";
+
+export interface ChargebackIconSmallProps {
+  color?: string;
+  iconIndex?: number;
+}
+
+export const ChargebackIconSmall: React.FC<Expand<ChargebackIconSmallProps> &
+  React.HTMLAttributes<HTMLElement>>;

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

@@ -0,0 +1,37 @@
+import React from "react";
+
+const ChargebackIconSmall = ({ color = "#15749D", iconIndex = 0 }) => {
+  const id = `ChargebackIconSmall-${iconIndex}`;
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle cx="10" cy="10" r="10" fill={color} />
+      <mask
+        id={id}
+        style={{ maskType: "luminance" }}
+        maskUnits="userSpaceOnUse"
+        x="2"
+        y="5"
+        width="15"
+        height="10"
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M6.6667 6.83325C6.6667 6.28097 7.11441 5.83325 7.6667 5.83325H15.6667C16.219 5.83325 16.6667 6.28097 16.6667 6.83325V8.33325V9.99992V13.1666C16.6667 13.7189 16.219 14.1666 15.6667 14.1666H7.6667C7.11441 14.1666 6.6667 13.7189 6.6667 13.1666V9.99992V8.33325V6.83325ZM16.0417 6.5277V8.33325H7.2917V8.26381V6.5277H16.0417ZM7.2917 13.4721V9.99992H16.0417V13.4721H7.2917ZM4.8275 8.70703C4.8275 8.26157 4.28893 8.03849 3.97395 8.35347L2.68105 9.64636C2.48579 9.84163 2.48579 10.1582 2.68105 10.3535L3.97395 11.6464C4.28893 11.9613 4.8275 11.7383 4.8275 11.2928V8.70703ZM13.4896 11.6666C13.2595 11.6666 13.0729 11.8531 13.0729 12.0833C13.0729 12.3134 13.2595 12.4999 13.4896 12.4999H14.5313C14.7614 12.4999 14.9479 12.3134 14.9479 12.0833C14.9479 11.8531 14.7614 11.6666 14.5313 11.6666H13.4896Z"
+          fill="white"
+        />
+      </mask>
+      <g mask={`url(#${id})`}>
+        <rect x="2.5" y="2.5" width="15" height="15" fill="white" />
+      </g>
+    </svg>
+  );
+};
+
+export default ChargebackIconSmall;

package/src/components/atoms/icons/ChargebackReversalIconMedium.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import Expand from "../../../util/expand";
+
+export interface ChargebackReversalIconMediumProps {
+  color?: string;
+  iconIndex?: number;
+}
+
+export const ChargebackReversalIconMedium: React.FC<Expand<
+  ChargebackReversalIconMediumProps
+> &
+  React.HTMLAttributes<HTMLElement>>;

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

@@ -0,0 +1,37 @@
+import React from "react";
+
+const ChargebackReversalIconMedium = ({ color = "#15749D", iconIndex = 0 }) => {
+  const id = `ChargebackReversalIconMedium-${iconIndex}`;
+  return (
+    <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} />
+      <mask
+        id={id}
+        style={{ maskType: "luminance" }}
+        maskUnits="userSpaceOnUse"
+        x="5"
+        y="7"
+        width="16"
+        height="10"
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M5 8C5 7.44772 5.44772 7 6 7H16C16.5523 7 17 7.44772 17 8V10V12V16C17 16.5523 16.5523 17 16 17H6C5.44772 17 5 16.5523 5 16V12V10V8ZM16.25 7.83333V10H5.75V9.91667V7.83333H16.25ZM5.75 16.1667V12H16.25V16.1667H5.75ZM18 13.7929C18 14.2383 18.5386 14.4614 18.8536 14.1464L20.6464 12.3536C20.8417 12.1583 20.8417 11.8417 20.6464 11.6464L18.8536 9.85355C18.5386 9.53857 18 9.76165 18 10.2071V13.7929ZM13.1875 14C12.9114 14 12.6875 14.2239 12.6875 14.5C12.6875 14.7761 12.9114 15 13.1875 15H14.4375C14.7136 15 14.9375 14.7761 14.9375 14.5C14.9375 14.2239 14.7136 14 14.4375 14H13.1875Z"
+          fill="white"
+        />
+      </mask>
+      <g mask={`url(#${id})`}>
+        <rect x="3" y="3" width="18" height="18" fill="white" />
+      </g>
+    </svg>
+  );
+};
+
+export default ChargebackReversalIconMedium;