@hellobetterdigitalnz/betterui 0.0.1 → 0.0.2-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 +10 -5
- package/src/Components/DataDisplay/Cards/BannerCard/BannerCard.stories.tsx +1 -1
- package/src/Components/DataDisplay/Cards/BannerCard/BannerCard.tsx +3 -1
- package/src/Components/DataDisplay/Media/Media.tsx +47 -47
- package/src/Components/DataDisplay/Media/MediaProps.tsx +9 -9
- package/src/Components/DataDisplay/NotificationsBell/NotificationsBellProps.tsx +9 -9
- package/src/Components/DataDisplay/export.ts +14 -0
- package/src/Components/Form/Button/Button.stories.tsx +3 -0
- package/src/Components/Form/Button/Button.tsx +2 -2
- package/src/Components/Form/FormFieldHolder/FormFieldHolder.stories.tsx +30 -0
- package/src/Components/Form/FormFieldHolder/FormFieldHolder.tsx +37 -2
- package/src/Components/Form/FormFieldHolder/FormFieldHolderProps.tsx +12 -0
- package/src/Components/Form/FormFieldHolder/formHolder.module.scss +56 -0
- package/src/Components/Form/export.ts +8 -0
- package/src/Components/Icons/Brand/WindowLogo/WindowLogo.tsx +105 -0
- package/src/Components/Icons/MathAndFinance/XIcon/XIcon.tsx +107 -107
- package/src/Components/Icons/SecurityAndWarnings/WarningCircle/WarningCircle.tsx +105 -0
- package/src/Components/Layout/Sidebar/Sidebar.tsx +10 -1
- package/src/Components/Layout/Sidebar/SidebarChevron.tsx +15 -1
- package/src/Components/Layout/Sidebar/SidebarChevronProps.tsx +7 -0
- package/src/Components/Layout/Sidebar/SidebarNavigation.tsx +10 -1
- package/src/Components/Layout/Sidebar/SidebarNavigationItem.tsx +40 -1
- package/src/Components/Layout/Sidebar/SidebarNavigationItemProps.tsx +12 -0
- package/src/Components/Layout/Sidebar/SidebarNavigationProps.tsx +9 -0
- package/src/Components/Layout/Sidebar/SidebarProps.tsx +8 -0
- package/src/Components/Layout/Sidebar/SidebarSubNavigation.tsx +20 -5
- package/src/Components/Layout/Sidebar/SidebarSubNavigationItem.tsx +20 -0
- package/src/Components/Layout/Sidebar/SidebarSubNavigationItemProps.tsx +12 -0
- package/src/Components/Layout/Sidebar/SidebarSubNavigationProps.tsx +10 -0
- package/src/Components/Layout/Sidebar/sidebar.module.scss +133 -0
- package/src/Components/Layout/Sidebar/sidebar.stories.tsx +70 -0
- package/src/export.ts +2 -0
- package/src/global.scss +1 -1
- package/src/vite-env.d.ts +1 -1
- package/src/Notification/Notification.tsx +0 -83
- package/src/Notification/NotificationInterface.tsx +0 -9
- package/src/Notification/NotificationList.tsx +0 -54
- package/src/Notification/NotificationListHolder.tsx +0 -14
- package/src/Notification/NotificationListHolderInterface.tsx +0 -8
- package/src/Notification/NotificationListInterface.tsx +0 -11
- package/src/Notification/notification.scss +0 -225
|
@@ -1,107 +1,107 @@
|
|
|
1
|
-
import IconProps from "../../IconProps";
|
|
2
|
-
|
|
3
|
-
const XIcon = ({ type = "light" }: IconProps) => {
|
|
4
|
-
if (type === "thin") {
|
|
5
|
-
return (
|
|
6
|
-
<svg
|
|
7
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
8
|
-
width="32"
|
|
9
|
-
height="32"
|
|
10
|
-
viewBox="0 0 32 32"
|
|
11
|
-
fill="none"
|
|
12
|
-
>
|
|
13
|
-
<path
|
|
14
|
-
d="M25.354 24.6463C25.4478 24.7401 25.5006 24.8673 25.5006 25C25.5006 25.1327 25.4478 25.2599 25.354 25.3538C25.2602 25.4476 25.133 25.5003 25.0003 25.5003C24.8676 25.5003 24.7403 25.4476 24.6465 25.3538L16.0003 16.7075L7.35403 25.3538C7.26021 25.4476 7.13296 25.5003 7.00028 25.5003C6.8676 25.5003 6.74035 25.4476 6.64653 25.3538C6.55271 25.2599 6.5 25.1327 6.5 25C6.5 24.8673 6.55271 24.7401 6.64653 24.6463L15.2928 16L6.64653 7.35375C6.55271 7.25993 6.5 7.13269 6.5 7C6.5 6.86732 6.55271 6.74007 6.64653 6.64625C6.74035 6.55243 6.8676 6.49973 7.00028 6.49973C7.13296 6.49973 7.26021 6.55243 7.35403 6.64625L16.0003 15.2925L24.6465 6.64625C24.693 6.5998 24.7481 6.56295 24.8088 6.53781C24.8695 6.51267 24.9346 6.49973 25.0003 6.49973C25.066 6.49973 25.131 6.51267 25.1917 6.53781C25.2524 6.56295 25.3076 6.5998 25.354 6.64625C25.4005 6.69271 25.4373 6.74786 25.4625 6.80856C25.4876 6.86925 25.5006 6.93431 25.5006 7C25.5006 7.0657 25.4876 7.13076 25.4625 7.19145C25.4373 7.25215 25.4005 7.3073 25.354 7.35375L16.7078 16L25.354 24.6463Z"
|
|
15
|
-
fill="currentColor"
|
|
16
|
-
/>
|
|
17
|
-
</svg>
|
|
18
|
-
);
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
if (type === "regular") {
|
|
22
|
-
return (
|
|
23
|
-
<svg
|
|
24
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
25
|
-
width="32"
|
|
26
|
-
height="32"
|
|
27
|
-
viewBox="0 0 32 32"
|
|
28
|
-
fill="none"
|
|
29
|
-
>
|
|
30
|
-
<path
|
|
31
|
-
d="M25.7081 24.2925C25.801 24.3854 25.8747 24.4957 25.9249 24.6171C25.9752 24.7385 26.0011 24.8686 26.0011 25C26.0011 25.1314 25.9752 25.2615 25.9249 25.3829C25.8747 25.5043 25.801 25.6146 25.7081 25.7075C25.6151 25.8004 25.5048 25.8741 25.3835 25.9244C25.2621 25.9747 25.132 26.0006 25.0006 26.0006C24.8692 26.0006 24.7391 25.9747 24.6177 25.9244C24.4963 25.8741 24.386 25.8004 24.2931 25.7075L16.0006 17.4138L7.70806 25.7075C7.52042 25.8951 7.26592 26.0006 7.00056 26.0006C6.73519 26.0006 6.4807 25.8951 6.29306 25.7075C6.10542 25.5199 6 25.2654 6 25C6 24.7346 6.10542 24.4801 6.29306 24.2925L14.5868 16L6.29306 7.70751C6.10542 7.51987 6 7.26537 6 7.00001C6 6.73464 6.10542 6.48015 6.29306 6.29251C6.4807 6.10487 6.73519 5.99945 7.00056 5.99945C7.26592 5.99945 7.52042 6.10487 7.70806 6.29251L16.0006 14.5863L24.2931 6.29251C24.4807 6.10487 24.7352 5.99945 25.0006 5.99945C25.2659 5.99945 25.5204 6.10487 25.7081 6.29251C25.8957 6.48015 26.0011 6.73464 26.0011 7.00001C26.0011 7.26537 25.8957 7.51987 25.7081 7.70751L17.4143 16L25.7081 24.2925Z"
|
|
32
|
-
fill="currentColor"
|
|
33
|
-
/>
|
|
34
|
-
</svg>
|
|
35
|
-
);
|
|
36
|
-
}
|
|
37
|
-
if (type === "bold") {
|
|
38
|
-
return (
|
|
39
|
-
<svg
|
|
40
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
41
|
-
width="32"
|
|
42
|
-
height="32"
|
|
43
|
-
viewBox="0 0 32 32"
|
|
44
|
-
fill="none"
|
|
45
|
-
>
|
|
46
|
-
<path
|
|
47
|
-
d="M26.0612 23.9388C26.343 24.2205 26.5013 24.6027 26.5013 25.0013C26.5013 25.3998 26.343 25.782 26.0612 26.0638C25.7794 26.3455 25.3972 26.5039 24.9987 26.5039C24.6002 26.5039 24.218 26.3455 23.9362 26.0638L15.9999 18.125L8.0612 26.0613C7.7794 26.343 7.39721 26.5014 6.9987 26.5014C6.60018 26.5014 6.21799 26.343 5.9362 26.0613C5.6544 25.7795 5.49609 25.3973 5.49609 24.9988C5.49609 24.6002 5.6544 24.218 5.9362 23.9363L13.8749 16L5.9387 8.06125C5.6569 7.77946 5.49859 7.39727 5.49859 6.99876C5.49859 6.60024 5.6569 6.21805 5.9387 5.93626C6.22049 5.65446 6.60268 5.49615 7.0012 5.49615C7.39971 5.49615 7.7819 5.65446 8.0637 5.93626L15.9999 13.875L23.9387 5.93501C24.2205 5.65321 24.6027 5.4949 25.0012 5.4949C25.3997 5.4949 25.7819 5.65321 26.0637 5.93501C26.3455 6.2168 26.5038 6.59899 26.5038 6.99751C26.5038 7.39602 26.3455 7.77821 26.0637 8.06001L18.1249 16L26.0612 23.9388Z"
|
|
48
|
-
fill="currentColor"
|
|
49
|
-
/>
|
|
50
|
-
</svg>
|
|
51
|
-
);
|
|
52
|
-
}
|
|
53
|
-
if (type === "fill") {
|
|
54
|
-
return (
|
|
55
|
-
<svg
|
|
56
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
57
|
-
width="32"
|
|
58
|
-
height="32"
|
|
59
|
-
viewBox="0 0 32 32"
|
|
60
|
-
fill="none"
|
|
61
|
-
>
|
|
62
|
-
<path
|
|
63
|
-
d="M26 4H6C5.46957 4 4.96086 4.21071 4.58579 4.58579C4.21071 4.96086 4 5.46957 4 6V26C4 26.5304 4.21071 27.0391 4.58579 27.4142C4.96086 27.7893 5.46957 28 6 28H26C26.5304 28 27.0391 27.7893 27.4142 27.4142C27.7893 27.0391 28 26.5304 28 26V6C28 5.46957 27.7893 4.96086 27.4142 4.58579C27.0391 4.21071 26.5304 4 26 4ZM22.7075 21.2925C22.8004 21.3854 22.8741 21.4957 22.9244 21.6171C22.9747 21.7385 23.0006 21.8686 23.0006 22C23.0006 22.1314 22.9747 22.2615 22.9244 22.3829C22.8741 22.5043 22.8004 22.6146 22.7075 22.7075C22.6146 22.8004 22.5043 22.8741 22.3829 22.9244C22.2615 22.9747 22.1314 23.0006 22 23.0006C21.8686 23.0006 21.7385 22.9747 21.6171 22.9244C21.4957 22.8741 21.3854 22.8004 21.2925 22.7075L16 17.4137L10.7075 22.7075C10.5199 22.8951 10.2654 23.0006 10 23.0006C9.73464 23.0006 9.48014 22.8951 9.2925 22.7075C9.10486 22.5199 8.99944 22.2654 8.99944 22C8.99944 21.7346 9.10486 21.4801 9.2925 21.2925L14.5863 16L9.2925 10.7075C9.10486 10.5199 8.99944 10.2654 8.99944 10C8.99944 9.73464 9.10486 9.48014 9.2925 9.2925C9.48014 9.10486 9.73464 8.99944 10 8.99944C10.2654 8.99944 10.5199 9.10486 10.7075 9.2925L16 14.5863L21.2925 9.2925C21.4801 9.10486 21.7346 8.99944 22 8.99944C22.2654 8.99944 22.5199 9.10486 22.7075 9.2925C22.8951 9.48014 23.0006 9.73464 23.0006 10C23.0006 10.2654 22.8951 10.5199 22.7075 10.7075L17.4137 16L22.7075 21.2925Z"
|
|
64
|
-
fill="currentColor"
|
|
65
|
-
/>
|
|
66
|
-
</svg>
|
|
67
|
-
);
|
|
68
|
-
}
|
|
69
|
-
if (type === "duotone") {
|
|
70
|
-
return (
|
|
71
|
-
<svg
|
|
72
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
73
|
-
width="32"
|
|
74
|
-
height="32"
|
|
75
|
-
viewBox="0 0 32 32"
|
|
76
|
-
fill="none"
|
|
77
|
-
>
|
|
78
|
-
<path
|
|
79
|
-
opacity="0.2"
|
|
80
|
-
d="M27 6V26C27 26.2652 26.8946 26.5196 26.7071 26.7071C26.5196 26.8946 26.2652 27 26 27H6C5.73478 27 5.48043 26.8946 5.29289 26.7071C5.10536 26.5196 5 26.2652 5 26V6C5 5.73478 5.10536 5.48043 5.29289 5.29289C5.48043 5.10536 5.73478 5 6 5H26C26.2652 5 26.5196 5.10536 26.7071 5.29289C26.8946 5.48043 27 5.73478 27 6Z"
|
|
81
|
-
fill="currentColor"
|
|
82
|
-
/>
|
|
83
|
-
<path
|
|
84
|
-
d="M25.7081 24.2925C25.801 24.3854 25.8747 24.4957 25.9249 24.6171C25.9752 24.7385 26.0011 24.8686 26.0011 25C26.0011 25.1314 25.9752 25.2615 25.9249 25.3829C25.8747 25.5043 25.801 25.6146 25.7081 25.7075C25.6151 25.8004 25.5048 25.8741 25.3835 25.9244C25.2621 25.9747 25.132 26.0006 25.0006 26.0006C24.8692 26.0006 24.7391 25.9747 24.6177 25.9244C24.4963 25.8741 24.386 25.8004 24.2931 25.7075L16.0006 17.4138L7.70806 25.7075C7.52042 25.8951 7.26592 26.0006 7.00056 26.0006C6.73519 26.0006 6.4807 25.8951 6.29306 25.7075C6.10542 25.5199 6 25.2654 6 25C6 24.7346 6.10542 24.4801 6.29306 24.2925L14.5868 16L6.29306 7.70751C6.10542 7.51987 6 7.26537 6 7.00001C6 6.73464 6.10542 6.48015 6.29306 6.29251C6.4807 6.10487 6.73519 5.99945 7.00056 5.99945C7.26592 5.99945 7.52042 6.10487 7.70806 6.29251L16.0006 14.5863L24.2931 6.29251C24.4807 6.10487 24.7352 5.99945 25.0006 5.99945C25.2659 5.99945 25.5204 6.10487 25.7081 6.29251C25.8957 6.48015 26.0011 6.73464 26.0011 7.00001C26.0011 7.26537 25.8957 7.51987 25.7081 7.70751L17.4143 16L25.7081 24.2925Z"
|
|
85
|
-
fill="currentColor"
|
|
86
|
-
/>
|
|
87
|
-
</svg>
|
|
88
|
-
);
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
return (
|
|
92
|
-
<svg
|
|
93
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
94
|
-
width="32"
|
|
95
|
-
height="32"
|
|
96
|
-
viewBox="0 0 32 32"
|
|
97
|
-
fill="none"
|
|
98
|
-
>
|
|
99
|
-
<path
|
|
100
|
-
d="M25.5308 24.47C25.6045 24.5387 25.6636 24.6215 25.7046 24.7135C25.7456 24.8055 25.7676 24.9048 25.7694 25.0055C25.7712 25.1062 25.7527 25.2062 25.7149 25.2996C25.6772 25.393 25.6211 25.4778 25.5499 25.549C25.4786 25.6203 25.3938 25.6764 25.3004 25.7141C25.207 25.7518 25.107 25.7704 25.0063 25.7686C24.9056 25.7668 24.8063 25.7448 24.7143 25.7038C24.6223 25.6628 24.5395 25.6037 24.4708 25.53L16.0008 17.0612L7.53082 25.53C7.38865 25.6625 7.2006 25.7346 7.0063 25.7312C6.812 25.7277 6.62661 25.649 6.4892 25.5116C6.35179 25.3742 6.27308 25.1888 6.26965 24.9945C6.26622 24.8002 6.33834 24.6122 6.47082 24.47L14.9396 16L6.47082 7.53C6.33834 7.38782 6.26622 7.19978 6.26965 7.00548C6.27308 6.81118 6.35179 6.62579 6.4892 6.48838C6.62661 6.35096 6.812 6.27225 7.0063 6.26882C7.2006 6.2654 7.38865 6.33752 7.53082 6.47L16.0008 14.9387L24.4708 6.47C24.613 6.33752 24.801 6.2654 24.9953 6.26882C25.1896 6.27225 25.375 6.35096 25.5124 6.48838C25.6499 6.62579 25.7286 6.81118 25.732 7.00548C25.7354 7.19978 25.6633 7.38782 25.5308 7.53L17.0621 16L25.5308 24.47Z"
|
|
101
|
-
fill="currentColor"
|
|
102
|
-
/>
|
|
103
|
-
</svg>
|
|
104
|
-
);
|
|
105
|
-
};
|
|
106
|
-
|
|
107
|
-
export default XIcon;
|
|
1
|
+
import IconProps from "../../IconProps";
|
|
2
|
+
|
|
3
|
+
const XIcon = ({ type = "light" }: IconProps) => {
|
|
4
|
+
if (type === "thin") {
|
|
5
|
+
return (
|
|
6
|
+
<svg
|
|
7
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
8
|
+
width="32"
|
|
9
|
+
height="32"
|
|
10
|
+
viewBox="0 0 32 32"
|
|
11
|
+
fill="none"
|
|
12
|
+
>
|
|
13
|
+
<path
|
|
14
|
+
d="M25.354 24.6463C25.4478 24.7401 25.5006 24.8673 25.5006 25C25.5006 25.1327 25.4478 25.2599 25.354 25.3538C25.2602 25.4476 25.133 25.5003 25.0003 25.5003C24.8676 25.5003 24.7403 25.4476 24.6465 25.3538L16.0003 16.7075L7.35403 25.3538C7.26021 25.4476 7.13296 25.5003 7.00028 25.5003C6.8676 25.5003 6.74035 25.4476 6.64653 25.3538C6.55271 25.2599 6.5 25.1327 6.5 25C6.5 24.8673 6.55271 24.7401 6.64653 24.6463L15.2928 16L6.64653 7.35375C6.55271 7.25993 6.5 7.13269 6.5 7C6.5 6.86732 6.55271 6.74007 6.64653 6.64625C6.74035 6.55243 6.8676 6.49973 7.00028 6.49973C7.13296 6.49973 7.26021 6.55243 7.35403 6.64625L16.0003 15.2925L24.6465 6.64625C24.693 6.5998 24.7481 6.56295 24.8088 6.53781C24.8695 6.51267 24.9346 6.49973 25.0003 6.49973C25.066 6.49973 25.131 6.51267 25.1917 6.53781C25.2524 6.56295 25.3076 6.5998 25.354 6.64625C25.4005 6.69271 25.4373 6.74786 25.4625 6.80856C25.4876 6.86925 25.5006 6.93431 25.5006 7C25.5006 7.0657 25.4876 7.13076 25.4625 7.19145C25.4373 7.25215 25.4005 7.3073 25.354 7.35375L16.7078 16L25.354 24.6463Z"
|
|
15
|
+
fill="currentColor"
|
|
16
|
+
/>
|
|
17
|
+
</svg>
|
|
18
|
+
);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
if (type === "regular") {
|
|
22
|
+
return (
|
|
23
|
+
<svg
|
|
24
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
25
|
+
width="32"
|
|
26
|
+
height="32"
|
|
27
|
+
viewBox="0 0 32 32"
|
|
28
|
+
fill="none"
|
|
29
|
+
>
|
|
30
|
+
<path
|
|
31
|
+
d="M25.7081 24.2925C25.801 24.3854 25.8747 24.4957 25.9249 24.6171C25.9752 24.7385 26.0011 24.8686 26.0011 25C26.0011 25.1314 25.9752 25.2615 25.9249 25.3829C25.8747 25.5043 25.801 25.6146 25.7081 25.7075C25.6151 25.8004 25.5048 25.8741 25.3835 25.9244C25.2621 25.9747 25.132 26.0006 25.0006 26.0006C24.8692 26.0006 24.7391 25.9747 24.6177 25.9244C24.4963 25.8741 24.386 25.8004 24.2931 25.7075L16.0006 17.4138L7.70806 25.7075C7.52042 25.8951 7.26592 26.0006 7.00056 26.0006C6.73519 26.0006 6.4807 25.8951 6.29306 25.7075C6.10542 25.5199 6 25.2654 6 25C6 24.7346 6.10542 24.4801 6.29306 24.2925L14.5868 16L6.29306 7.70751C6.10542 7.51987 6 7.26537 6 7.00001C6 6.73464 6.10542 6.48015 6.29306 6.29251C6.4807 6.10487 6.73519 5.99945 7.00056 5.99945C7.26592 5.99945 7.52042 6.10487 7.70806 6.29251L16.0006 14.5863L24.2931 6.29251C24.4807 6.10487 24.7352 5.99945 25.0006 5.99945C25.2659 5.99945 25.5204 6.10487 25.7081 6.29251C25.8957 6.48015 26.0011 6.73464 26.0011 7.00001C26.0011 7.26537 25.8957 7.51987 25.7081 7.70751L17.4143 16L25.7081 24.2925Z"
|
|
32
|
+
fill="currentColor"
|
|
33
|
+
/>
|
|
34
|
+
</svg>
|
|
35
|
+
);
|
|
36
|
+
}
|
|
37
|
+
if (type === "bold") {
|
|
38
|
+
return (
|
|
39
|
+
<svg
|
|
40
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
41
|
+
width="32"
|
|
42
|
+
height="32"
|
|
43
|
+
viewBox="0 0 32 32"
|
|
44
|
+
fill="none"
|
|
45
|
+
>
|
|
46
|
+
<path
|
|
47
|
+
d="M26.0612 23.9388C26.343 24.2205 26.5013 24.6027 26.5013 25.0013C26.5013 25.3998 26.343 25.782 26.0612 26.0638C25.7794 26.3455 25.3972 26.5039 24.9987 26.5039C24.6002 26.5039 24.218 26.3455 23.9362 26.0638L15.9999 18.125L8.0612 26.0613C7.7794 26.343 7.39721 26.5014 6.9987 26.5014C6.60018 26.5014 6.21799 26.343 5.9362 26.0613C5.6544 25.7795 5.49609 25.3973 5.49609 24.9988C5.49609 24.6002 5.6544 24.218 5.9362 23.9363L13.8749 16L5.9387 8.06125C5.6569 7.77946 5.49859 7.39727 5.49859 6.99876C5.49859 6.60024 5.6569 6.21805 5.9387 5.93626C6.22049 5.65446 6.60268 5.49615 7.0012 5.49615C7.39971 5.49615 7.7819 5.65446 8.0637 5.93626L15.9999 13.875L23.9387 5.93501C24.2205 5.65321 24.6027 5.4949 25.0012 5.4949C25.3997 5.4949 25.7819 5.65321 26.0637 5.93501C26.3455 6.2168 26.5038 6.59899 26.5038 6.99751C26.5038 7.39602 26.3455 7.77821 26.0637 8.06001L18.1249 16L26.0612 23.9388Z"
|
|
48
|
+
fill="currentColor"
|
|
49
|
+
/>
|
|
50
|
+
</svg>
|
|
51
|
+
);
|
|
52
|
+
}
|
|
53
|
+
if (type === "fill") {
|
|
54
|
+
return (
|
|
55
|
+
<svg
|
|
56
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
57
|
+
width="32"
|
|
58
|
+
height="32"
|
|
59
|
+
viewBox="0 0 32 32"
|
|
60
|
+
fill="none"
|
|
61
|
+
>
|
|
62
|
+
<path
|
|
63
|
+
d="M26 4H6C5.46957 4 4.96086 4.21071 4.58579 4.58579C4.21071 4.96086 4 5.46957 4 6V26C4 26.5304 4.21071 27.0391 4.58579 27.4142C4.96086 27.7893 5.46957 28 6 28H26C26.5304 28 27.0391 27.7893 27.4142 27.4142C27.7893 27.0391 28 26.5304 28 26V6C28 5.46957 27.7893 4.96086 27.4142 4.58579C27.0391 4.21071 26.5304 4 26 4ZM22.7075 21.2925C22.8004 21.3854 22.8741 21.4957 22.9244 21.6171C22.9747 21.7385 23.0006 21.8686 23.0006 22C23.0006 22.1314 22.9747 22.2615 22.9244 22.3829C22.8741 22.5043 22.8004 22.6146 22.7075 22.7075C22.6146 22.8004 22.5043 22.8741 22.3829 22.9244C22.2615 22.9747 22.1314 23.0006 22 23.0006C21.8686 23.0006 21.7385 22.9747 21.6171 22.9244C21.4957 22.8741 21.3854 22.8004 21.2925 22.7075L16 17.4137L10.7075 22.7075C10.5199 22.8951 10.2654 23.0006 10 23.0006C9.73464 23.0006 9.48014 22.8951 9.2925 22.7075C9.10486 22.5199 8.99944 22.2654 8.99944 22C8.99944 21.7346 9.10486 21.4801 9.2925 21.2925L14.5863 16L9.2925 10.7075C9.10486 10.5199 8.99944 10.2654 8.99944 10C8.99944 9.73464 9.10486 9.48014 9.2925 9.2925C9.48014 9.10486 9.73464 8.99944 10 8.99944C10.2654 8.99944 10.5199 9.10486 10.7075 9.2925L16 14.5863L21.2925 9.2925C21.4801 9.10486 21.7346 8.99944 22 8.99944C22.2654 8.99944 22.5199 9.10486 22.7075 9.2925C22.8951 9.48014 23.0006 9.73464 23.0006 10C23.0006 10.2654 22.8951 10.5199 22.7075 10.7075L17.4137 16L22.7075 21.2925Z"
|
|
64
|
+
fill="currentColor"
|
|
65
|
+
/>
|
|
66
|
+
</svg>
|
|
67
|
+
);
|
|
68
|
+
}
|
|
69
|
+
if (type === "duotone") {
|
|
70
|
+
return (
|
|
71
|
+
<svg
|
|
72
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
73
|
+
width="32"
|
|
74
|
+
height="32"
|
|
75
|
+
viewBox="0 0 32 32"
|
|
76
|
+
fill="none"
|
|
77
|
+
>
|
|
78
|
+
<path
|
|
79
|
+
opacity="0.2"
|
|
80
|
+
d="M27 6V26C27 26.2652 26.8946 26.5196 26.7071 26.7071C26.5196 26.8946 26.2652 27 26 27H6C5.73478 27 5.48043 26.8946 5.29289 26.7071C5.10536 26.5196 5 26.2652 5 26V6C5 5.73478 5.10536 5.48043 5.29289 5.29289C5.48043 5.10536 5.73478 5 6 5H26C26.2652 5 26.5196 5.10536 26.7071 5.29289C26.8946 5.48043 27 5.73478 27 6Z"
|
|
81
|
+
fill="currentColor"
|
|
82
|
+
/>
|
|
83
|
+
<path
|
|
84
|
+
d="M25.7081 24.2925C25.801 24.3854 25.8747 24.4957 25.9249 24.6171C25.9752 24.7385 26.0011 24.8686 26.0011 25C26.0011 25.1314 25.9752 25.2615 25.9249 25.3829C25.8747 25.5043 25.801 25.6146 25.7081 25.7075C25.6151 25.8004 25.5048 25.8741 25.3835 25.9244C25.2621 25.9747 25.132 26.0006 25.0006 26.0006C24.8692 26.0006 24.7391 25.9747 24.6177 25.9244C24.4963 25.8741 24.386 25.8004 24.2931 25.7075L16.0006 17.4138L7.70806 25.7075C7.52042 25.8951 7.26592 26.0006 7.00056 26.0006C6.73519 26.0006 6.4807 25.8951 6.29306 25.7075C6.10542 25.5199 6 25.2654 6 25C6 24.7346 6.10542 24.4801 6.29306 24.2925L14.5868 16L6.29306 7.70751C6.10542 7.51987 6 7.26537 6 7.00001C6 6.73464 6.10542 6.48015 6.29306 6.29251C6.4807 6.10487 6.73519 5.99945 7.00056 5.99945C7.26592 5.99945 7.52042 6.10487 7.70806 6.29251L16.0006 14.5863L24.2931 6.29251C24.4807 6.10487 24.7352 5.99945 25.0006 5.99945C25.2659 5.99945 25.5204 6.10487 25.7081 6.29251C25.8957 6.48015 26.0011 6.73464 26.0011 7.00001C26.0011 7.26537 25.8957 7.51987 25.7081 7.70751L17.4143 16L25.7081 24.2925Z"
|
|
85
|
+
fill="currentColor"
|
|
86
|
+
/>
|
|
87
|
+
</svg>
|
|
88
|
+
);
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
return (
|
|
92
|
+
<svg
|
|
93
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
94
|
+
width="32"
|
|
95
|
+
height="32"
|
|
96
|
+
viewBox="0 0 32 32"
|
|
97
|
+
fill="none"
|
|
98
|
+
>
|
|
99
|
+
<path
|
|
100
|
+
d="M25.5308 24.47C25.6045 24.5387 25.6636 24.6215 25.7046 24.7135C25.7456 24.8055 25.7676 24.9048 25.7694 25.0055C25.7712 25.1062 25.7527 25.2062 25.7149 25.2996C25.6772 25.393 25.6211 25.4778 25.5499 25.549C25.4786 25.6203 25.3938 25.6764 25.3004 25.7141C25.207 25.7518 25.107 25.7704 25.0063 25.7686C24.9056 25.7668 24.8063 25.7448 24.7143 25.7038C24.6223 25.6628 24.5395 25.6037 24.4708 25.53L16.0008 17.0612L7.53082 25.53C7.38865 25.6625 7.2006 25.7346 7.0063 25.7312C6.812 25.7277 6.62661 25.649 6.4892 25.5116C6.35179 25.3742 6.27308 25.1888 6.26965 24.9945C6.26622 24.8002 6.33834 24.6122 6.47082 24.47L14.9396 16L6.47082 7.53C6.33834 7.38782 6.26622 7.19978 6.26965 7.00548C6.27308 6.81118 6.35179 6.62579 6.4892 6.48838C6.62661 6.35096 6.812 6.27225 7.0063 6.26882C7.2006 6.2654 7.38865 6.33752 7.53082 6.47L16.0008 14.9387L24.4708 6.47C24.613 6.33752 24.801 6.2654 24.9953 6.26882C25.1896 6.27225 25.375 6.35096 25.5124 6.48838C25.6499 6.62579 25.7286 6.81118 25.732 7.00548C25.7354 7.19978 25.6633 7.38782 25.5308 7.53L17.0621 16L25.5308 24.47Z"
|
|
101
|
+
fill="currentColor"
|
|
102
|
+
/>
|
|
103
|
+
</svg>
|
|
104
|
+
);
|
|
105
|
+
};
|
|
106
|
+
|
|
107
|
+
export default XIcon;
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
import IconProps from "../../IconProps";
|
|
2
|
+
|
|
3
|
+
const WarningCircle = ({ type }: IconProps) => {
|
|
4
|
+
if (type === "thin") {
|
|
5
|
+
return (
|
|
6
|
+
<svg
|
|
7
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
8
|
+
width="32"
|
|
9
|
+
height="32"
|
|
10
|
+
viewBox="0 0 32 32"
|
|
11
|
+
fill="none"
|
|
12
|
+
>
|
|
13
|
+
<path
|
|
14
|
+
d="M16 3.5C13.5277 3.5 11.111 4.23311 9.05538 5.60663C6.99976 6.98015 5.39761 8.93238 4.45151 11.2165C3.50542 13.5005 3.25787 16.0139 3.74019 18.4386C4.2225 20.8634 5.41301 23.0907 7.16117 24.8388C8.90933 26.587 11.1366 27.7775 13.5614 28.2598C15.9861 28.7421 18.4995 28.4946 20.7835 27.5485C23.0676 26.6024 25.0199 25.0002 26.3934 22.9446C27.7669 20.889 28.5 18.4723 28.5 16C28.4964 12.6859 27.1782 9.5086 24.8348 7.16518C22.4914 4.82177 19.3141 3.50364 16 3.5ZM16 27.5C13.7255 27.5 11.5021 26.8255 9.61095 25.5619C7.71978 24.2983 6.2458 22.5022 5.37539 20.4009C4.50498 18.2995 4.27724 15.9872 4.72097 13.7565C5.1647 11.5257 6.25997 9.47658 7.86828 7.86827C9.47658 6.25997 11.5257 5.1647 13.7565 4.72097C15.9872 4.27724 18.2995 4.50498 20.4009 5.37539C22.5022 6.24579 24.2983 7.71978 25.5619 9.61094C26.8255 11.5021 27.5 13.7255 27.5 16C27.4967 19.049 26.284 21.9721 24.1281 24.1281C21.9721 26.284 19.049 27.4967 16 27.5ZM15.5 17V10C15.5 9.86739 15.5527 9.74021 15.6465 9.64645C15.7402 9.55268 15.8674 9.5 16 9.5C16.1326 9.5 16.2598 9.55268 16.3536 9.64645C16.4473 9.74021 16.5 9.86739 16.5 10V17C16.5 17.1326 16.4473 17.2598 16.3536 17.3536C16.2598 17.4473 16.1326 17.5 16 17.5C15.8674 17.5 15.7402 17.4473 15.6465 17.3536C15.5527 17.2598 15.5 17.1326 15.5 17ZM17 21.5C17 21.6978 16.9414 21.8911 16.8315 22.0556C16.7216 22.22 16.5654 22.3482 16.3827 22.4239C16.2 22.4996 15.9989 22.5194 15.8049 22.4808C15.6109 22.4422 15.4328 22.347 15.2929 22.2071C15.153 22.0673 15.0578 21.8891 15.0192 21.6951C14.9806 21.5011 15.0004 21.3 15.0761 21.1173C15.1518 20.9346 15.28 20.7784 15.4444 20.6685C15.6089 20.5586 15.8022 20.5 16 20.5C16.2652 20.5 16.5196 20.6054 16.7071 20.7929C16.8946 20.9804 17 21.2348 17 21.5Z"
|
|
15
|
+
fill="currentColor"
|
|
16
|
+
/>
|
|
17
|
+
</svg>
|
|
18
|
+
);
|
|
19
|
+
}
|
|
20
|
+
if (type === "regular") {
|
|
21
|
+
return (
|
|
22
|
+
<svg
|
|
23
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
24
|
+
width="32"
|
|
25
|
+
height="32"
|
|
26
|
+
viewBox="0 0 32 32"
|
|
27
|
+
fill="none"
|
|
28
|
+
>
|
|
29
|
+
<path
|
|
30
|
+
d="M16 3C13.4288 3 10.9154 3.76244 8.77759 5.1909C6.63975 6.61935 4.97351 8.64968 3.98957 11.0251C3.00563 13.4006 2.74819 16.0144 3.2498 18.5362C3.75141 21.0579 4.98953 23.3743 6.80762 25.1924C8.6257 27.0105 10.9421 28.2486 13.4638 28.7502C15.9856 29.2518 18.5995 28.9944 20.9749 28.0104C23.3503 27.0265 25.3807 25.3603 26.8091 23.2224C28.2376 21.0846 29 18.5712 29 16C28.9964 12.5533 27.6256 9.24882 25.1884 6.81163C22.7512 4.37445 19.4467 3.00364 16 3ZM16 27C13.8244 27 11.6977 26.3549 9.88873 25.1462C8.07979 23.9375 6.66989 22.2195 5.83733 20.2095C5.00477 18.1995 4.78693 15.9878 5.21137 13.854C5.63581 11.7202 6.68345 9.7602 8.22183 8.22183C9.76021 6.68345 11.7202 5.6358 13.854 5.21136C15.9878 4.78692 18.1995 5.00476 20.2095 5.83733C22.2195 6.66989 23.9375 8.07979 25.1462 9.88873C26.3549 11.6977 27 13.8244 27 16C26.9967 18.9164 25.8367 21.7123 23.7745 23.7745C21.7123 25.8367 18.9164 26.9967 16 27ZM15 17V10C15 9.73478 15.1054 9.48043 15.2929 9.29289C15.4804 9.10536 15.7348 9 16 9C16.2652 9 16.5196 9.10536 16.7071 9.29289C16.8946 9.48043 17 9.73478 17 10V17C17 17.2652 16.8946 17.5196 16.7071 17.7071C16.5196 17.8946 16.2652 18 16 18C15.7348 18 15.4804 17.8946 15.2929 17.7071C15.1054 17.5196 15 17.2652 15 17ZM17.5 21.5C17.5 21.7967 17.412 22.0867 17.2472 22.3334C17.0824 22.58 16.8481 22.7723 16.574 22.8858C16.2999 22.9993 15.9983 23.0291 15.7074 22.9712C15.4164 22.9133 15.1491 22.7704 14.9393 22.5607C14.7296 22.3509 14.5867 22.0836 14.5288 21.7926C14.471 21.5017 14.5007 21.2001 14.6142 20.926C14.7277 20.6519 14.92 20.4176 15.1667 20.2528C15.4133 20.088 15.7033 20 16 20C16.3978 20 16.7794 20.158 17.0607 20.4393C17.342 20.7206 17.5 21.1022 17.5 21.5Z"
|
|
31
|
+
fill="currentColor"
|
|
32
|
+
/>
|
|
33
|
+
</svg>
|
|
34
|
+
);
|
|
35
|
+
}
|
|
36
|
+
if (type === "bold") {
|
|
37
|
+
return (
|
|
38
|
+
<svg
|
|
39
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
40
|
+
width="32"
|
|
41
|
+
height="32"
|
|
42
|
+
viewBox="0 0 32 32"
|
|
43
|
+
fill="none"
|
|
44
|
+
>
|
|
45
|
+
<path
|
|
46
|
+
d="M16 2.5C13.33 2.5 10.7199 3.29176 8.49981 4.77516C6.27974 6.25856 4.54942 8.36697 3.52763 10.8338C2.50585 13.3006 2.2385 16.015 2.7594 18.6337C3.28031 21.2525 4.56606 23.6579 6.45406 25.5459C8.34207 27.434 10.7475 28.7197 13.3663 29.2406C15.985 29.7615 18.6994 29.4942 21.1662 28.4724C23.633 27.4506 25.7414 25.7203 27.2248 23.5002C28.7082 21.2801 29.5 18.67 29.5 16C29.496 12.4208 28.0724 8.98932 25.5416 6.45844C23.0107 3.92756 19.5792 2.50397 16 2.5ZM16 26.5C13.9233 26.5 11.8932 25.8842 10.1665 24.7304C8.4398 23.5767 7.09399 21.9368 6.29927 20.0182C5.50455 18.0996 5.29662 15.9884 5.70176 13.9516C6.10691 11.9148 7.10693 10.0438 8.57538 8.57538C10.0438 7.10693 11.9148 6.1069 13.9516 5.70175C15.9884 5.29661 18.0996 5.50454 20.0182 6.29926C21.9368 7.09399 23.5767 8.4398 24.7304 10.1665C25.8842 11.8932 26.5 13.9233 26.5 16C26.497 18.7839 25.3898 21.4528 23.4213 23.4213C21.4529 25.3898 18.7839 26.497 16 26.5ZM14.5 16.5V10C14.5 9.60218 14.658 9.22064 14.9393 8.93934C15.2206 8.65804 15.6022 8.5 16 8.5C16.3978 8.5 16.7794 8.65804 17.0607 8.93934C17.342 9.22064 17.5 9.60218 17.5 10V16.5C17.5 16.8978 17.342 17.2794 17.0607 17.5607C16.7794 17.842 16.3978 18 16 18C15.6022 18 15.2206 17.842 14.9393 17.5607C14.658 17.2794 14.5 16.8978 14.5 16.5ZM18 21.5C18 21.8956 17.8827 22.2822 17.6629 22.6111C17.4432 22.94 17.1308 23.1964 16.7654 23.3478C16.3999 23.4991 15.9978 23.5387 15.6098 23.4616C15.2219 23.3844 14.8655 23.1939 14.5858 22.9142C14.3061 22.6345 14.1156 22.2781 14.0384 21.8902C13.9613 21.5022 14.0009 21.1001 14.1522 20.7346C14.3036 20.3692 14.56 20.0568 14.8889 19.8371C15.2178 19.6173 15.6044 19.5 16 19.5C16.5304 19.5 17.0391 19.7107 17.4142 20.0858C17.7893 20.4609 18 20.9696 18 21.5Z"
|
|
47
|
+
fill="currentColor"
|
|
48
|
+
/>
|
|
49
|
+
</svg>
|
|
50
|
+
);
|
|
51
|
+
}
|
|
52
|
+
if (type === "fill") {
|
|
53
|
+
return (
|
|
54
|
+
<svg
|
|
55
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
56
|
+
width="32"
|
|
57
|
+
height="32"
|
|
58
|
+
viewBox="0 0 32 32"
|
|
59
|
+
fill="none"
|
|
60
|
+
>
|
|
61
|
+
<path
|
|
62
|
+
d="M16 3C13.4288 3 10.9154 3.76244 8.77759 5.1909C6.63975 6.61935 4.97351 8.64968 3.98957 11.0251C3.00563 13.4006 2.74819 16.0144 3.2498 18.5362C3.75141 21.0579 4.98953 23.3743 6.80762 25.1924C8.6257 27.0105 10.9421 28.2486 13.4638 28.7502C15.9856 29.2518 18.5995 28.9944 20.9749 28.0104C23.3503 27.0265 25.3807 25.3603 26.8091 23.2224C28.2376 21.0846 29 18.5712 29 16C28.9964 12.5533 27.6256 9.24882 25.1884 6.81163C22.7512 4.37445 19.4467 3.00364 16 3ZM15 10C15 9.73478 15.1054 9.48043 15.2929 9.29289C15.4804 9.10536 15.7348 9 16 9C16.2652 9 16.5196 9.10536 16.7071 9.29289C16.8946 9.48043 17 9.73478 17 10V17C17 17.2652 16.8946 17.5196 16.7071 17.7071C16.5196 17.8946 16.2652 18 16 18C15.7348 18 15.4804 17.8946 15.2929 17.7071C15.1054 17.5196 15 17.2652 15 17V10ZM16 23C15.7033 23 15.4133 22.912 15.1667 22.7472C14.92 22.5824 14.7277 22.3481 14.6142 22.074C14.5007 21.7999 14.471 21.4983 14.5288 21.2074C14.5867 20.9164 14.7296 20.6491 14.9393 20.4393C15.1491 20.2296 15.4164 20.0867 15.7074 20.0288C15.9983 19.9709 16.2999 20.0007 16.574 20.1142C16.8481 20.2277 17.0824 20.42 17.2472 20.6666C17.412 20.9133 17.5 21.2033 17.5 21.5C17.5 21.8978 17.342 22.2794 17.0607 22.5607C16.7794 22.842 16.3978 23 16 23Z"
|
|
63
|
+
fill="currentColor"
|
|
64
|
+
/>
|
|
65
|
+
</svg>
|
|
66
|
+
);
|
|
67
|
+
}
|
|
68
|
+
if (type === "duotone") {
|
|
69
|
+
return (
|
|
70
|
+
<svg
|
|
71
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
72
|
+
width="32"
|
|
73
|
+
height="32"
|
|
74
|
+
viewBox="0 0 32 32"
|
|
75
|
+
fill="none"
|
|
76
|
+
>
|
|
77
|
+
<path
|
|
78
|
+
opacity="0.2"
|
|
79
|
+
d="M28 16C28 18.3734 27.2962 20.6935 25.9776 22.6668C24.6591 24.6402 22.7849 26.1783 20.5922 27.0866C18.3995 27.9948 15.9867 28.2324 13.6589 27.7694C11.3312 27.3064 9.19295 26.1635 7.51472 24.4853C5.83649 22.8071 4.6936 20.6689 4.23058 18.3411C3.76756 16.0133 4.0052 13.6005 4.91345 11.4078C5.8217 9.21509 7.35977 7.34094 9.33316 6.02236C11.3066 4.70379 13.6266 4 16 4C19.1826 4 22.2348 5.26428 24.4853 7.51472C26.7357 9.76516 28 12.8174 28 16Z"
|
|
80
|
+
fill="currentColor"
|
|
81
|
+
/>
|
|
82
|
+
<path
|
|
83
|
+
d="M16 3C13.4288 3 10.9154 3.76244 8.77759 5.1909C6.63975 6.61935 4.97351 8.64968 3.98957 11.0251C3.00563 13.4006 2.74819 16.0144 3.2498 18.5362C3.75141 21.0579 4.98953 23.3743 6.80762 25.1924C8.6257 27.0105 10.9421 28.2486 13.4638 28.7502C15.9856 29.2518 18.5995 28.9944 20.9749 28.0104C23.3503 27.0265 25.3807 25.3603 26.8091 23.2224C28.2376 21.0846 29 18.5712 29 16C28.9964 12.5533 27.6256 9.24882 25.1884 6.81163C22.7512 4.37445 19.4467 3.00364 16 3ZM16 27C13.8244 27 11.6977 26.3549 9.88873 25.1462C8.07979 23.9375 6.66989 22.2195 5.83733 20.2095C5.00477 18.1995 4.78693 15.9878 5.21137 13.854C5.63581 11.7202 6.68345 9.7602 8.22183 8.22183C9.76021 6.68345 11.7202 5.6358 13.854 5.21136C15.9878 4.78692 18.1995 5.00476 20.2095 5.83733C22.2195 6.66989 23.9375 8.07979 25.1462 9.88873C26.3549 11.6977 27 13.8244 27 16C26.9967 18.9164 25.8367 21.7123 23.7745 23.7745C21.7123 25.8367 18.9164 26.9967 16 27ZM15 17V10C15 9.73478 15.1054 9.48043 15.2929 9.29289C15.4804 9.10536 15.7348 9 16 9C16.2652 9 16.5196 9.10536 16.7071 9.29289C16.8946 9.48043 17 9.73478 17 10V17C17 17.2652 16.8946 17.5196 16.7071 17.7071C16.5196 17.8946 16.2652 18 16 18C15.7348 18 15.4804 17.8946 15.2929 17.7071C15.1054 17.5196 15 17.2652 15 17ZM17.5 21.5C17.5 21.7967 17.412 22.0867 17.2472 22.3334C17.0824 22.58 16.8481 22.7723 16.574 22.8858C16.2999 22.9993 15.9983 23.0291 15.7074 22.9712C15.4164 22.9133 15.1491 22.7704 14.9393 22.5607C14.7296 22.3509 14.5867 22.0836 14.5288 21.7926C14.471 21.5017 14.5007 21.2001 14.6142 20.926C14.7277 20.6519 14.92 20.4176 15.1667 20.2528C15.4133 20.088 15.7033 20 16 20C16.3978 20 16.7794 20.158 17.0607 20.4393C17.342 20.7206 17.5 21.1022 17.5 21.5Z"
|
|
84
|
+
fill="currentColor"
|
|
85
|
+
/>
|
|
86
|
+
</svg>
|
|
87
|
+
);
|
|
88
|
+
}
|
|
89
|
+
return (
|
|
90
|
+
<svg
|
|
91
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
92
|
+
width="32"
|
|
93
|
+
height="32"
|
|
94
|
+
viewBox="0 0 32 32"
|
|
95
|
+
fill="none"
|
|
96
|
+
>
|
|
97
|
+
<path
|
|
98
|
+
d="M16 3.25C13.4783 3.25 11.0132 3.99777 8.91648 5.39876C6.81976 6.79975 5.18556 8.79103 4.22054 11.1208C3.25552 13.4505 3.00303 16.0141 3.49499 18.4874C3.98696 20.9607 5.20127 23.2325 6.98439 25.0156C8.76751 26.7987 11.0393 28.0131 13.5126 28.505C15.9859 28.997 18.5495 28.7445 20.8792 27.7795C23.209 26.8144 25.2003 25.1802 26.6012 23.0835C28.0022 20.9868 28.75 18.5217 28.75 16C28.746 12.6197 27.4015 9.379 25.0112 6.98877C22.621 4.59854 19.3803 3.25397 16 3.25ZM16 27.25C13.775 27.25 11.5999 26.5902 9.74984 25.354C7.89979 24.1179 6.45785 22.3609 5.60636 20.3052C4.75488 18.2495 4.53209 15.9875 4.96617 13.8052C5.40025 11.6229 6.47171 9.61839 8.04505 8.04505C9.6184 6.47171 11.623 5.40025 13.8052 4.96617C15.9875 4.53208 18.2495 4.75487 20.3052 5.60636C22.3609 6.45784 24.1179 7.89978 25.354 9.74984C26.5902 11.5999 27.25 13.775 27.25 16C27.2467 18.9827 26.0604 21.8422 23.9513 23.9513C21.8422 26.0604 18.9827 27.2467 16 27.25ZM15.25 17V10C15.25 9.80109 15.329 9.61032 15.4697 9.46967C15.6103 9.32902 15.8011 9.25 16 9.25C16.1989 9.25 16.3897 9.32902 16.5303 9.46967C16.671 9.61032 16.75 9.80109 16.75 10V17C16.75 17.1989 16.671 17.3897 16.5303 17.5303C16.3897 17.671 16.1989 17.75 16 17.75C15.8011 17.75 15.6103 17.671 15.4697 17.5303C15.329 17.3897 15.25 17.1989 15.25 17ZM17.25 21.5C17.25 21.7472 17.1767 21.9889 17.0393 22.1945C16.902 22.4 16.7068 22.5602 16.4784 22.6549C16.25 22.7495 15.9986 22.7742 15.7561 22.726C15.5137 22.6777 15.2909 22.5587 15.1161 22.3839C14.9413 22.2091 14.8223 21.9863 14.774 21.7439C14.7258 21.5014 14.7505 21.2501 14.8452 21.0216C14.9398 20.7932 15.1 20.598 15.3055 20.4607C15.5111 20.3233 15.7528 20.25 16 20.25C16.3315 20.25 16.6495 20.3817 16.8839 20.6161C17.1183 20.8505 17.25 21.1685 17.25 21.5Z"
|
|
99
|
+
fill="currentColor"
|
|
100
|
+
/>
|
|
101
|
+
</svg>
|
|
102
|
+
);
|
|
103
|
+
};
|
|
104
|
+
|
|
105
|
+
export default WarningCircle;
|
|
@@ -1,4 +1,13 @@
|
|
|
1
|
-
|
|
1
|
+
import sidebarProps from "./SidebarProps.tsx";
|
|
2
|
+
import styles from "./sidebar.module.scss";
|
|
3
|
+
|
|
4
|
+
const Sidebar = (props:sidebarProps) => {
|
|
5
|
+
|
|
6
|
+
const {children,extraClass} =props
|
|
7
|
+
|
|
8
|
+
return <div className={`${styles.sidebar} ${extraClass}`}>
|
|
9
|
+
{children}
|
|
10
|
+
</div>
|
|
2
11
|
|
|
3
12
|
}
|
|
4
13
|
|
|
@@ -1,5 +1,19 @@
|
|
|
1
|
-
|
|
1
|
+
import styles from "./sidebar.module.scss";
|
|
2
|
+
import CaretLeft from "../../Icons/Arrows/CaretLeft/CaretLeft.tsx";
|
|
3
|
+
import SidebarChevronProps from "./SidebarChevronProps.tsx";
|
|
2
4
|
|
|
5
|
+
const SidebarChevron = (props: SidebarChevronProps) => {
|
|
6
|
+
|
|
7
|
+
const {onClick} = props
|
|
8
|
+
|
|
9
|
+
return <div className={styles.sidebarChevronBtn}
|
|
10
|
+
onClick={(e) => {
|
|
11
|
+
if (onClick) {
|
|
12
|
+
onClick(e);
|
|
13
|
+
}
|
|
14
|
+
}}>
|
|
15
|
+
<button><CaretLeft type={"bold"}/></button>
|
|
16
|
+
</div>
|
|
3
17
|
}
|
|
4
18
|
|
|
5
19
|
export default SidebarChevron;
|
|
@@ -1,4 +1,13 @@
|
|
|
1
|
-
|
|
1
|
+
import SidebarNavigationProps from "./SidebarNavigationProps.tsx";
|
|
2
|
+
import styles from "./sidebar.module.scss";
|
|
3
|
+
|
|
4
|
+
const SidebarNavigation = (props:SidebarNavigationProps) => {
|
|
5
|
+
|
|
6
|
+
const {children, extraClass,subNavActive}=props
|
|
7
|
+
|
|
8
|
+
return<div className={`${styles.sidebarNavigation} ${extraClass} ${subNavActive ? styles.navigationItemSmall : styles.navigationItemLarge}`}>
|
|
9
|
+
{children}
|
|
10
|
+
</div>
|
|
2
11
|
|
|
3
12
|
}
|
|
4
13
|
|
|
@@ -1,4 +1,43 @@
|
|
|
1
|
-
|
|
1
|
+
import SidebarNavigationItemProps from "./SidebarNavigationItemProps.tsx";
|
|
2
|
+
import styles from './sidebar.module.scss'
|
|
3
|
+
|
|
4
|
+
const SidebarNavigationItem = (props: SidebarNavigationItemProps) => {
|
|
5
|
+
|
|
6
|
+
const {icon, contents, children, extraClass, onClick, activeState} = props
|
|
7
|
+
|
|
8
|
+
if (children) {
|
|
9
|
+
return <div
|
|
10
|
+
className={`${styles.navigationItemHolder} navigationItemHolder`}>
|
|
11
|
+
<div
|
|
12
|
+
className={`navigationItem ${styles.navigationItem} ${extraClass} ${activeState ? styles.active : ''}`}
|
|
13
|
+
onClick={(e) => {
|
|
14
|
+
if (onClick) {
|
|
15
|
+
onClick(e);
|
|
16
|
+
}
|
|
17
|
+
}}>
|
|
18
|
+
{!!icon && <div className={`${styles.navigationIcon} navigationIcon`}>
|
|
19
|
+
{icon}
|
|
20
|
+
</div>}
|
|
21
|
+
<div className={`${styles.navigationItemBody} navigationItemBody`}>
|
|
22
|
+
{contents}
|
|
23
|
+
</div>
|
|
24
|
+
</div>
|
|
25
|
+
{!!children && <div className={`${styles.subNavigation} subNavigation`}>
|
|
26
|
+
{children}
|
|
27
|
+
</div>}
|
|
28
|
+
</div>
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
return <div className={`${styles.navigationItemHolder} navigationItemHolder`}>
|
|
32
|
+
<div className={`${styles.navigationItem} ${extraClass} navigationItem ${activeState ? styles.active : ''}`}>
|
|
33
|
+
{!!icon && <div className={`${styles.navigationIcon} navigationIcon`}>
|
|
34
|
+
{icon}
|
|
35
|
+
</div>}
|
|
36
|
+
<div className={`${styles.navigationItemBody} navigationItemBody`}>
|
|
37
|
+
{contents}
|
|
38
|
+
</div>
|
|
39
|
+
</div>
|
|
40
|
+
</div>
|
|
2
41
|
|
|
3
42
|
}
|
|
4
43
|
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import {ReactNode, MouseEvent} from "react";
|
|
2
|
+
|
|
3
|
+
interface SidebarNavigationItemProps{
|
|
4
|
+
icon?: ReactNode;
|
|
5
|
+
contents: ReactNode;
|
|
6
|
+
children?: ReactNode;
|
|
7
|
+
onClick?: (e: MouseEvent) => void;
|
|
8
|
+
extraClass?:string;
|
|
9
|
+
activeState?:boolean;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
export default SidebarNavigationItemProps;
|
|
@@ -1,5 +1,20 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
import styles from "./sidebar.module.scss";
|
|
2
|
+
import sidebarSubNavigationProps from "./SidebarSubNavigationProps.tsx";
|
|
3
|
+
import SidebarChevron from "./SidebarChevron.tsx";
|
|
4
|
+
|
|
5
|
+
const SidebarSubNavigationItem = (props: sidebarSubNavigationProps) => {
|
|
6
|
+
|
|
7
|
+
const {extraClass, children, title, onClick} = props
|
|
8
|
+
|
|
9
|
+
return <div className={`${styles.subNavigationHolder} ${extraClass} subNavigationHolder`}>
|
|
10
|
+
<div className={styles.sidebarChevron}>
|
|
11
|
+
<SidebarChevron onClick={onClick}/>
|
|
12
|
+
</div>
|
|
13
|
+
<div className={styles.sidebarTitle}>
|
|
14
|
+
<h5>{title}</h5>
|
|
15
|
+
</div>
|
|
16
|
+
{children}
|
|
17
|
+
</div>
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
export default SidebarSubNavigationItem;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import SidebarSubNavigationItemProps from "./SidebarSubNavigationItemProps.tsx";
|
|
2
|
+
import styles from "./sidebar.module.scss";
|
|
3
|
+
|
|
4
|
+
const SidebarSubNavigationItem = (props:SidebarSubNavigationItemProps) => {
|
|
5
|
+
|
|
6
|
+
const {icon, contents, extraClass, activeState} = props
|
|
7
|
+
|
|
8
|
+
return <div className={`${styles.subNavigationItemHolder} subNavigationItemHolder`}>
|
|
9
|
+
<div className={`${styles.subNavigationItem} ${extraClass} subNavigationItem ${activeState ? styles.active : ''}`}>
|
|
10
|
+
{!!icon && <div className={`${styles.subNavigationIcon} subNavigationIcon`}>
|
|
11
|
+
{icon}
|
|
12
|
+
</div>}
|
|
13
|
+
<div className={`${styles.subNavigationItemBody} subNavigationItemBody`}>
|
|
14
|
+
{contents}
|
|
15
|
+
</div>
|
|
16
|
+
</div>
|
|
17
|
+
</div>
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
export default SidebarSubNavigationItem;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import {ReactNode, MouseEvent} from "react";
|
|
2
|
+
|
|
3
|
+
interface SidebarSubNavigationItemProps{
|
|
4
|
+
icon?: ReactNode;
|
|
5
|
+
contents: ReactNode;
|
|
6
|
+
children?: ReactNode;
|
|
7
|
+
onClick?: (e: MouseEvent) => void;
|
|
8
|
+
extraClass?:string;
|
|
9
|
+
activeState?:boolean;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
export default SidebarSubNavigationItemProps;
|