@thecb/components 7.7.5-beta.1 → 7.7.5-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@thecb/components",
3
- "version": "7.7.5-beta.1",
3
+ "version": "7.7.5-beta.2",
4
4
  "description": "Common lib for CityBase react components",
5
5
  "main": "dist/index.cjs.js",
6
6
  "typings": "dist/index.d.ts",
@@ -0,0 +1,47 @@
1
+ import React from "react";
2
+
3
+ const ArrowDownCircleIconSmall = ({ color = "#15749D" }) => (
4
+ <svg
5
+ width="20"
6
+ height="20"
7
+ viewBox="0 0 20 20"
8
+ fill="none"
9
+ xmlns="http://www.w3.org/2000/svg"
10
+ >
11
+ <circle cx="10" cy="10" r="10" fill={color} />
12
+ <path
13
+ fillRule="evenodd"
14
+ clipRule="evenodd"
15
+ 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"
16
+ fill="white"
17
+ />
18
+ <mask
19
+ id="mask0_1409_672"
20
+ style={{ maskType: "luminance" }}
21
+ maskUnits="userSpaceOnUse"
22
+ x="5"
23
+ y="5"
24
+ width="10"
25
+ height="10"
26
+ >
27
+ <path
28
+ fillRule="evenodd"
29
+ clipRule="evenodd"
30
+ 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"
31
+ fill="white"
32
+ />
33
+ </mask>
34
+ <g mask="url(#mask0_1409_672)">
35
+ <rect
36
+ x="17.6976"
37
+ y="2.5"
38
+ width="15"
39
+ height="15"
40
+ transform="rotate(90 17.6976 2.5)"
41
+ fill="white"
42
+ />
43
+ </g>
44
+ </svg>
45
+ );
46
+
47
+ export default ArrowDownCircleIconSmall;
@@ -0,0 +1,47 @@
1
+ import React from "react";
2
+
3
+ const ArrowLeftCircleIconMedium = ({ color = "#15749D" }) => (
4
+ <svg
5
+ width="24"
6
+ height="24"
7
+ viewBox="0 0 24 24"
8
+ fill="none"
9
+ xmlns="http://www.w3.org/2000/svg"
10
+ >
11
+ <circle cx="12" cy="12" r="12" fill={color} />
12
+ <path
13
+ fillRule="evenodd"
14
+ clipRule="evenodd"
15
+ 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"
16
+ fill="white"
17
+ />
18
+ <mask
19
+ id="mask0_0_143"
20
+ style={{ maskType: "luminance" }}
21
+ maskUnits="userSpaceOnUse"
22
+ x="6"
23
+ y="6"
24
+ width="12"
25
+ height="12"
26
+ >
27
+ <path
28
+ fillRule="evenodd"
29
+ clipRule="evenodd"
30
+ 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"
31
+ fill="white"
32
+ />
33
+ </mask>
34
+ <g mask="url(#mask0_0_143)">
35
+ <rect
36
+ x="21"
37
+ y="21"
38
+ width="18"
39
+ height="18"
40
+ transform="rotate(180 21 21)"
41
+ fill="white"
42
+ />
43
+ </g>
44
+ </svg>
45
+ );
46
+
47
+ export default ArrowLeftCircleIconMedium;
@@ -0,0 +1,47 @@
1
+ import React from "react";
2
+
3
+ const ArrowLeftCircleIconSmall = ({ color = "#15749D" }) => (
4
+ <svg
5
+ width="20"
6
+ height="20"
7
+ viewBox="0 0 20 20"
8
+ fill="none"
9
+ xmlns="http://www.w3.org/2000/svg"
10
+ >
11
+ <circle cx="10" cy="10" r="10" fill={color} />
12
+ <path
13
+ fillRule="evenodd"
14
+ clipRule="evenodd"
15
+ 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"
16
+ fill="white"
17
+ />
18
+ <mask
19
+ id="mask0_1409_676"
20
+ style={{ maskType: "luminance" }}
21
+ maskUnits="userSpaceOnUse"
22
+ x="5"
23
+ y="5"
24
+ width="10"
25
+ height="10"
26
+ >
27
+ <path
28
+ fillRule="evenodd"
29
+ clipRule="evenodd"
30
+ 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"
31
+ fill="white"
32
+ />
33
+ </mask>
34
+ <g mask="url(#mask0_1409_676)">
35
+ <rect
36
+ x="17.5"
37
+ y="17.5"
38
+ width="15"
39
+ height="15"
40
+ transform="rotate(180 17.5 17.5)"
41
+ fill="white"
42
+ />
43
+ </g>
44
+ </svg>
45
+ );
46
+
47
+ export default ArrowLeftCircleIconSmall;
@@ -0,0 +1,40 @@
1
+ import React from "react";
2
+
3
+ const ArrowRightCircleIconSmall = ({ color = "#15749D" }) => (
4
+ <svg
5
+ width="20"
6
+ height="20"
7
+ viewBox="0 0 20 20"
8
+ fill="none"
9
+ xmlns="http://www.w3.org/2000/svg"
10
+ >
11
+ <circle cx="10" cy="10" r="10" fill={color} />
12
+ <path
13
+ fillRule="evenodd"
14
+ clipRule="evenodd"
15
+ 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"
16
+ fill="white"
17
+ />
18
+ <mask
19
+ id="mask0_1409_677"
20
+ style={{ maskType: "luminance" }}
21
+ maskUnits="userSpaceOnUse"
22
+ x="5"
23
+ y="5"
24
+ width="10"
25
+ height="10"
26
+ >
27
+ <path
28
+ fillRule="evenodd"
29
+ clipRule="evenodd"
30
+ 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"
31
+ fill="white"
32
+ />
33
+ </mask>
34
+ <g mask="url(#mask0_1409_677)">
35
+ <rect x="2.5" y="2.5" width="15" height="15" fill="white" />
36
+ </g>
37
+ </svg>
38
+ );
39
+
40
+ export default ArrowRightCircleIconSmall;
@@ -0,0 +1,47 @@
1
+ import React from "react";
2
+
3
+ const ArrowUpCircleIconSmall = ({ color = "#15749D" }) => (
4
+ <svg
5
+ width="20"
6
+ height="20"
7
+ viewBox="0 0 20 20"
8
+ fill="none"
9
+ xmlns="http://www.w3.org/2000/svg"
10
+ >
11
+ <circle cx="10" cy="10" r="10" fill={color} />
12
+ <path
13
+ fillRule="evenodd"
14
+ clipRule="evenodd"
15
+ 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"
16
+ fill="white"
17
+ />
18
+ <mask
19
+ id="mask0_1409_675"
20
+ style={{ maskType: "luminance" }}
21
+ maskUnits="userSpaceOnUse"
22
+ x="5"
23
+ y="5"
24
+ width="10"
25
+ height="10"
26
+ >
27
+ <path
28
+ fillRule="evenodd"
29
+ clipRule="evenodd"
30
+ 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"
31
+ fill="white"
32
+ />
33
+ </mask>
34
+ <g mask="url(#mask0_1409_675)">
35
+ <rect
36
+ x="2.5"
37
+ y="17.5"
38
+ width="15"
39
+ height="15"
40
+ transform="rotate(-90 2.5 17.5)"
41
+ fill="white"
42
+ />
43
+ </g>
44
+ </svg>
45
+ );
46
+
47
+ export default ArrowUpCircleIconSmall;
@@ -0,0 +1,34 @@
1
+ import React from "react";
2
+
3
+ const ChargebackIconMedium = ({ color = "#15749D" }) => (
4
+ <svg
5
+ width="24"
6
+ height="24"
7
+ viewBox="0 0 24 24"
8
+ fill="none"
9
+ xmlns="http://www.w3.org/2000/svg"
10
+ >
11
+ <circle cx="12" cy="12" r="12" fill={color} />
12
+ <mask
13
+ id="mask0_0_1844"
14
+ style={{ maskType: "luminance" }}
15
+ maskUnits="userSpaceOnUse"
16
+ x="3"
17
+ y="7"
18
+ width="17"
19
+ height="10"
20
+ >
21
+ <path
22
+ fillRule="evenodd"
23
+ clipRule="evenodd"
24
+ 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"
25
+ fill="white"
26
+ />
27
+ </mask>
28
+ <g mask="url(#mask0_0_1844)">
29
+ <rect x="3" y="3" width="18" height="18" fill="white" />
30
+ </g>
31
+ </svg>
32
+ );
33
+
34
+ export default ChargebackIconMedium;
@@ -0,0 +1,34 @@
1
+ import React from "react";
2
+
3
+ const ChargebackIconSmall = ({ color = "#15749D" }) => (
4
+ <svg
5
+ width="20"
6
+ height="20"
7
+ viewBox="0 0 20 20"
8
+ fill="none"
9
+ xmlns="http://www.w3.org/2000/svg"
10
+ >
11
+ <circle cx="10" cy="10" r="10" fill={color} />
12
+ <mask
13
+ id="mask0_1409_668"
14
+ style={{ maskType: "luminance" }}
15
+ maskUnits="userSpaceOnUse"
16
+ x="2"
17
+ y="5"
18
+ width="15"
19
+ height="10"
20
+ >
21
+ <path
22
+ fillRule="evenodd"
23
+ clipRule="evenodd"
24
+ 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"
25
+ fill="white"
26
+ />
27
+ </mask>
28
+ <g mask="url(#mask0_1409_668)">
29
+ <rect x="2.5" y="2.5" width="15" height="15" fill="white" />
30
+ </g>
31
+ </svg>
32
+ );
33
+
34
+ export default ChargebackIconSmall;
@@ -0,0 +1,34 @@
1
+ import React from "react";
2
+
3
+ const ChargebackReversalIconMedium = ({ color = "#15749D" }) => (
4
+ <svg
5
+ width="24"
6
+ height="24"
7
+ viewBox="0 0 24 24"
8
+ fill="none"
9
+ xmlns="http://www.w3.org/2000/svg"
10
+ >
11
+ <circle cx="12" cy="12" r="12" fill={color} />
12
+ <mask
13
+ id="mask0_0_1926"
14
+ style={{ maskType: "luminance" }}
15
+ maskUnits="userSpaceOnUse"
16
+ x="5"
17
+ y="7"
18
+ width="16"
19
+ height="10"
20
+ >
21
+ <path
22
+ fillRule="evenodd"
23
+ clipRule="evenodd"
24
+ 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"
25
+ fill="white"
26
+ />
27
+ </mask>
28
+ <g mask="url(#mask0_0_1926)">
29
+ <rect x="3" y="3" width="18" height="18" fill="white" />
30
+ </g>
31
+ </svg>
32
+ );
33
+
34
+ export default ChargebackReversalIconMedium;
@@ -0,0 +1,34 @@
1
+ import React from "react";
2
+
3
+ const ChargebackReversalIconSmall = ({ color = "#15749D" }) => (
4
+ <svg
5
+ width="20"
6
+ height="20"
7
+ viewBox="0 0 20 20"
8
+ fill="none"
9
+ xmlns="http://www.w3.org/2000/svg"
10
+ >
11
+ <circle cx="10" cy="10" r="10" fill={color} />
12
+ <mask
13
+ id="mask0_1409_674"
14
+ style={{ maskType: "luminance" }}
15
+ maskUnits="userSpaceOnUse"
16
+ x="4"
17
+ y="5"
18
+ width="14"
19
+ height="10"
20
+ >
21
+ <path
22
+ fillRule="evenodd"
23
+ clipRule="evenodd"
24
+ d="M4.16669 6.83325C4.16669 6.28097 4.6144 5.83325 5.16669 5.83325H13.1667C13.719 5.83325 14.1667 6.28097 14.1667 6.83325V8.33325V9.99992V13.1666C14.1667 13.7189 13.719 14.1666 13.1667 14.1666H5.16669C4.6144 14.1666 4.16669 13.7189 4.16669 13.1666V9.99992V8.33325V6.83325ZM13.5417 6.5277V8.33325H4.79169V8.26381V6.5277H13.5417ZM4.79169 13.4721V9.99992H13.5417V13.4721H4.79169ZM15 11.2928C15 11.7383 15.5386 11.9613 15.8536 11.6464L17.1465 10.3535C17.3417 10.1582 17.3417 9.84163 17.1465 9.64636L15.8536 8.35347C15.5386 8.03849 15 8.26157 15 8.70703V11.2928ZM10.9896 11.6666C10.7595 11.6666 10.5729 11.8531 10.5729 12.0833C10.5729 12.3134 10.7595 12.4999 10.9896 12.4999H12.0313C12.2614 12.4999 12.4479 12.3134 12.4479 12.0833C12.4479 11.8531 12.2614 11.6666 12.0313 11.6666H10.9896Z"
25
+ fill="white"
26
+ />
27
+ </mask>
28
+ <g mask="url(#mask0_1409_674)">
29
+ <rect x="2.5" y="2.5" width="15" height="15" fill="white" />
30
+ </g>
31
+ </svg>
32
+ );
33
+
34
+ export default ChargebackReversalIconSmall;
@@ -0,0 +1,40 @@
1
+ import React from "react";
2
+
3
+ const RefundIconMedium = ({ color = "#15749D" }) => (
4
+ <svg
5
+ width="24"
6
+ height="24"
7
+ viewBox="0 0 24 24"
8
+ fill="none"
9
+ xmlns="http://www.w3.org/2000/svg"
10
+ >
11
+ <circle cx="12" cy="12" r="12" fill={color} />
12
+ <path
13
+ fillRule="evenodd"
14
+ clipRule="evenodd"
15
+ d="M15.0975 16.8351V18H13.4122V16.8416C11.5797 16.6399 10.396 15.7549 10.2154 14.1085L12.2485 14.0694C12.4558 14.9284 13.2049 15.3839 14.2749 15.3839C15.2379 15.3839 15.9268 14.8829 15.9268 14.2126C15.9268 13.5163 15.4787 13.2299 14.5357 13.0217L12.9507 12.6898C11.4727 12.397 10.523 11.5575 10.503 10.1128C10.4896 8.57701 11.7202 7.5423 13.4456 7.2885V6H15.1376V7.29501C16.823 7.58134 17.8462 8.70065 17.8261 10.0477L15.8532 10.0803C15.7328 9.24729 15.345 8.7397 14.315 8.7397C13.2517 8.7397 12.5963 9.20824 12.5963 9.89154C12.5963 10.4382 12.9039 10.7115 13.9539 10.9783L15.5121 11.3492C17.271 11.7592 18 12.7874 18 14.1996C18 15.6182 16.8831 16.6074 15.0975 16.8351ZM9.00001 13.8125C9.00001 14.2245 8.52963 14.4597 8.20001 14.2125L5.53334 12.2125C5.26668 12.0125 5.26668 11.6125 5.53334 11.4125L8.20001 9.4125C8.52963 9.16529 9.00001 9.40048 9.00001 9.8125V13.8125Z"
16
+ fill="white"
17
+ />
18
+ <mask
19
+ id="mask0_0_2179"
20
+ style={{ maskType: "luminance" }}
21
+ maskUnits="userSpaceOnUse"
22
+ x="5"
23
+ y="6"
24
+ width="13"
25
+ height="12"
26
+ >
27
+ <path
28
+ fillRule="evenodd"
29
+ clipRule="evenodd"
30
+ d="M15.0975 16.8351V18H13.4122V16.8416C11.5797 16.6399 10.396 15.7549 10.2154 14.1085L12.2485 14.0694C12.4558 14.9284 13.2049 15.3839 14.2749 15.3839C15.2379 15.3839 15.9268 14.8829 15.9268 14.2126C15.9268 13.5163 15.4787 13.2299 14.5357 13.0217L12.9507 12.6898C11.4727 12.397 10.523 11.5575 10.503 10.1128C10.4896 8.57701 11.7202 7.5423 13.4456 7.2885V6H15.1376V7.29501C16.823 7.58134 17.8462 8.70065 17.8261 10.0477L15.8532 10.0803C15.7328 9.24729 15.345 8.7397 14.315 8.7397C13.2517 8.7397 12.5963 9.20824 12.5963 9.89154C12.5963 10.4382 12.9039 10.7115 13.9539 10.9783L15.5121 11.3492C17.271 11.7592 18 12.7874 18 14.1996C18 15.6182 16.8831 16.6074 15.0975 16.8351ZM9.00001 13.8125C9.00001 14.2245 8.52963 14.4597 8.20001 14.2125L5.53334 12.2125C5.26668 12.0125 5.26668 11.6125 5.53334 11.4125L8.20001 9.4125C8.52963 9.16529 9.00001 9.40048 9.00001 9.8125V13.8125Z"
31
+ fill="white"
32
+ />
33
+ </mask>
34
+ <g mask="url(#mask0_0_2179)">
35
+ <rect x="3" y="3" width="18" height="18" fill="white" />
36
+ </g>
37
+ </svg>
38
+ );
39
+
40
+ export default RefundIconMedium;
@@ -0,0 +1,40 @@
1
+ import React from "react";
2
+
3
+ const RefundIconSmall = ({ color = "#15749D" }) => (
4
+ <svg
5
+ width="20"
6
+ height="20"
7
+ viewBox="0 0 20 20"
8
+ fill="none"
9
+ xmlns="http://www.w3.org/2000/svg"
10
+ >
11
+ <circle cx="10" cy="10" r="10" fill={color} />
12
+ <path
13
+ fillRule="evenodd"
14
+ clipRule="evenodd"
15
+ d="M12.5812 14.0293V15H11.1768V14.0347C9.64976 13.8666 8.66331 13.1291 8.51283 11.757L10.2071 11.7245C10.3798 12.4403 11.004 12.82 11.8957 12.82C12.6983 12.82 13.2723 12.4024 13.2723 11.8438C13.2723 11.2636 12.8989 11.0249 12.1131 10.8514L10.7923 10.5748C9.56059 10.3308 8.7692 9.63124 8.75248 8.42733C8.74133 7.14751 9.76679 6.28525 11.2047 6.07375V5H12.6147V6.07918C14.0191 6.31779 14.8718 7.25054 14.8551 8.3731L13.211 8.40022C13.1107 7.70607 12.7875 7.28308 11.9292 7.28308C11.043 7.28308 10.4969 7.67354 10.4969 8.24295C10.4969 8.69848 10.7532 8.92625 11.6282 9.14859L12.9268 9.4577C14.3925 9.79935 15 10.6562 15 11.833C15 13.0152 14.0693 13.8395 12.5812 14.0293ZM7.5 11.3438C7.5 11.7558 7.02962 11.991 6.7 11.7438L4.7 10.2438C4.43333 10.0438 4.43333 9.64375 4.7 9.44375L6.7 7.94375C7.02962 7.69654 7.5 7.93173 7.5 8.34375V11.3438Z"
16
+ fill="white"
17
+ />
18
+ <mask
19
+ id="mask0_1409_673"
20
+ style={{ maskType: "luminance" }}
21
+ maskUnits="userSpaceOnUse"
22
+ x="4"
23
+ y="5"
24
+ width="11"
25
+ height="10"
26
+ >
27
+ <path
28
+ fillRule="evenodd"
29
+ clipRule="evenodd"
30
+ d="M12.5812 14.0293V15H11.1768V14.0347C9.64976 13.8666 8.66331 13.1291 8.51283 11.757L10.2071 11.7245C10.3798 12.4403 11.004 12.82 11.8957 12.82C12.6983 12.82 13.2723 12.4024 13.2723 11.8438C13.2723 11.2636 12.8989 11.0249 12.1131 10.8514L10.7923 10.5748C9.56059 10.3308 8.7692 9.63124 8.75248 8.42733C8.74133 7.14751 9.76679 6.28525 11.2047 6.07375V5H12.6147V6.07918C14.0191 6.31779 14.8718 7.25054 14.8551 8.3731L13.211 8.40022C13.1107 7.70607 12.7875 7.28308 11.9292 7.28308C11.043 7.28308 10.4969 7.67354 10.4969 8.24295C10.4969 8.69848 10.7532 8.92625 11.6282 9.14859L12.9268 9.4577C14.3925 9.79935 15 10.6562 15 11.833C15 13.0152 14.0693 13.8395 12.5812 14.0293ZM7.5 11.3438C7.5 11.7558 7.02962 11.991 6.7 11.7438L4.7 10.2438C4.43333 10.0438 4.43333 9.64375 4.7 9.44375L6.7 7.94375C7.02962 7.69654 7.5 7.93173 7.5 8.34375V11.3438Z"
31
+ fill="white"
32
+ />
33
+ </mask>
34
+ <g mask="url(#mask0_1409_673)">
35
+ <rect x="2.5" y="2.5" width="15" height="15" fill="white" />
36
+ </g>
37
+ </svg>
38
+ );
39
+
40
+ export default RefundIconSmall;
@@ -0,0 +1,53 @@
1
+ import React from "react";
2
+
3
+ const SuccessfulIconMedium = ({ color = "#317D4F" }) => (
4
+ <svg
5
+ width="24"
6
+ height="24"
7
+ viewBox="0 0 24 24"
8
+ fill="none"
9
+ xmlns="http://www.w3.org/2000/svg"
10
+ >
11
+ <circle cx="12" cy="12" r="12" fill={color} />
12
+ <mask
13
+ id="mask0_0_680"
14
+ style={{ maskType: "luminance" }}
15
+ maskUnits="userSpaceOnUse"
16
+ x="0"
17
+ y="0"
18
+ width="24"
19
+ height="24"
20
+ >
21
+ <circle cx="12" cy="12" r="12" fill="white" />
22
+ </mask>
23
+ <g mask="url(#mask0_0_680)">
24
+ <path
25
+ fillRule="evenodd"
26
+ clipRule="evenodd"
27
+ d="M17.6672 7.35354C17.472 7.15828 17.1554 7.15828 16.9601 7.35354L10.2426 14.0711L7.76775 11.5962C7.57249 11.4009 7.25591 11.4009 7.06065 11.5962L6.35354 12.3033C6.15828 12.4985 6.15828 12.8151 6.35354 13.0104L9.18167 15.8385C9.18177 15.8386 9.18187 15.8387 9.18197 15.8388L9.88907 16.5459C10.0843 16.7412 10.4009 16.7412 10.5962 16.5459L11.3033 15.8388C11.3034 15.8387 11.3036 15.8386 11.3037 15.8384L18.3744 8.76775C18.5696 8.57249 18.5696 8.25591 18.3744 8.06065L17.6672 7.35354Z"
28
+ fill="white"
29
+ />
30
+ <mask
31
+ id="mask1_0_680"
32
+ style={{ maskType: "luminance" }}
33
+ maskUnits="userSpaceOnUse"
34
+ x="6"
35
+ y="7"
36
+ width="13"
37
+ height="10"
38
+ >
39
+ <path
40
+ fillRule="evenodd"
41
+ clipRule="evenodd"
42
+ d="M17.6672 7.35354C17.472 7.15828 17.1554 7.15828 16.9601 7.35354L10.2426 14.0711L7.76775 11.5962C7.57249 11.4009 7.25591 11.4009 7.06065 11.5962L6.35354 12.3033C6.15828 12.4985 6.15828 12.8151 6.35354 13.0104L9.18167 15.8385C9.18177 15.8386 9.18187 15.8387 9.18197 15.8388L9.88907 16.5459C10.0843 16.7412 10.4009 16.7412 10.5962 16.5459L11.3033 15.8388C11.3034 15.8387 11.3036 15.8386 11.3037 15.8384L18.3744 8.76775C18.5696 8.57249 18.5696 8.25591 18.3744 8.06065L17.6672 7.35354Z"
43
+ fill="white"
44
+ />
45
+ </mask>
46
+ <g mask="url(#mask1_0_680)">
47
+ <rect x="2" y="2" width="20" height="20" fill="white" />
48
+ </g>
49
+ </g>
50
+ </svg>
51
+ );
52
+
53
+ export default SuccessfulIconMedium;
@@ -0,0 +1,59 @@
1
+ import React from "react";
2
+
3
+ const SuccessfulIconSmall = () => (
4
+ <svg
5
+ width="20"
6
+ height="20"
7
+ viewBox="0 0 20 20"
8
+ fill="none"
9
+ xmlns="http://www.w3.org/2000/svg"
10
+ >
11
+ <circle cx="10" cy="10" r="10" fill="#317D4F" />
12
+ <mask
13
+ id="mask0_1409_494"
14
+ style={{ maskType: "luminance" }}
15
+ maskUnits="userSpaceOnUse"
16
+ x="0"
17
+ y="0"
18
+ width="20"
19
+ height="20"
20
+ >
21
+ <circle cx="10" cy="10" r="10" fill="white" />
22
+ </mask>
23
+ <g mask="url(#mask0_1409_494)">
24
+ <path
25
+ fillRule="evenodd"
26
+ clipRule="evenodd"
27
+ d="M14.7817 6.18688C14.5864 5.99162 14.2698 5.99162 14.0746 6.18688L8.53558 11.7259L6.53211 9.72242C6.33685 9.52715 6.02027 9.52715 5.825 9.72242L5.3536 10.1938C5.15834 10.3891 5.15834 10.7057 5.3536 10.9009L7.71062 13.2579L8.18203 13.7294C8.37729 13.9246 8.69387 13.9246 8.88913 13.7294L9.36054 13.258C9.36068 13.2578 9.36082 13.2577 9.36096 13.2575L15.2531 7.36539C15.4484 7.17013 15.4484 6.85355 15.2531 6.65829L14.7817 6.18688Z"
28
+ fill="white"
29
+ />
30
+ <mask
31
+ id="mask1_1409_494"
32
+ style={{ maskType: "luminance" }}
33
+ maskUnits="userSpaceOnUse"
34
+ x="5"
35
+ y="6"
36
+ width="11"
37
+ height="8"
38
+ >
39
+ <path
40
+ fillRule="evenodd"
41
+ clipRule="evenodd"
42
+ d="M14.7817 6.18688C14.5864 5.99162 14.2698 5.99162 14.0746 6.18688L8.53558 11.7259L6.53211 9.72242C6.33685 9.52715 6.02027 9.52715 5.825 9.72242L5.3536 10.1938C5.15834 10.3891 5.15834 10.7057 5.3536 10.9009L7.71062 13.2579L8.18203 13.7294C8.37729 13.9246 8.69387 13.9246 8.88913 13.7294L9.36054 13.258C9.36068 13.2578 9.36082 13.2577 9.36096 13.2575L15.2531 7.36539C15.4484 7.17013 15.4484 6.85355 15.2531 6.65829L14.7817 6.18688Z"
43
+ fill="white"
44
+ />
45
+ </mask>
46
+ <g mask="url(#mask1_1409_494)">
47
+ <rect
48
+ x="1.66669"
49
+ y="1.66666"
50
+ width="16.6667"
51
+ height="16.6667"
52
+ fill="white"
53
+ />
54
+ </g>
55
+ </g>
56
+ </svg>
57
+ );
58
+
59
+ export default SuccessfulIconSmall;
@@ -0,0 +1,40 @@
1
+ import React from "react";
2
+
3
+ const XCircleIconMedium = ({ color = "#D11053" }) => (
4
+ <svg
5
+ width="24"
6
+ height="24"
7
+ viewBox="0 0 24 24"
8
+ fill="none"
9
+ xmlns="http://www.w3.org/2000/svg"
10
+ >
11
+ <circle cx="12" cy="12" r="12" fill={color} />
12
+ <path
13
+ fillRule="evenodd"
14
+ clipRule="evenodd"
15
+ 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"
16
+ fill="white"
17
+ />
18
+ <mask
19
+ id="mask0_0_637"
20
+ style={{ maskType: "luminance" }}
21
+ maskUnits="userSpaceOnUse"
22
+ x="7"
23
+ y="7"
24
+ width="10"
25
+ height="10"
26
+ >
27
+ <path
28
+ fillRule="evenodd"
29
+ clipRule="evenodd"
30
+ 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"
31
+ fill="white"
32
+ />
33
+ </mask>
34
+ <g mask="url(#mask0_0_637)">
35
+ <path d="M0 0H24V24H0V0Z" fill="white" />
36
+ </g>
37
+ </svg>
38
+ );
39
+
40
+ export default XCircleIconMedium;