droplinked-editor-configs 1.8.0

package/src/assets/icon/System/SettingGear/SettinggearSm.tsx

@@ -0,0 +1,17 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const SettinggearSm = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <g clip-path="url(#clip0_8234_4618)">
+            <path d="M8.00016 9.99999C9.10473 9.99999 10.0002 9.10456 10.0002 7.99999C10.0002 6.89543 9.10473 5.99999 8.00016 5.99999C6.89559 5.99999 6.00016 6.89543 6.00016 7.99999C6.00016 9.10456 6.89559 9.99999 8.00016 9.99999Z" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M12.485 9.81818C12.4043 10.001 12.3803 10.2037 12.4159 10.4004C12.4516 10.597 12.5453 10.7784 12.685 10.9212L12.7214 10.9576C12.8341 11.0701 12.9235 11.2038 12.9845 11.351C13.0455 11.4981 13.0769 11.6559 13.0769 11.8151C13.0769 11.9744 13.0455 12.1322 12.9845 12.2793C12.9235 12.4265 12.8341 12.5601 12.7214 12.6727C12.6088 12.7854 12.4751 12.8748 12.328 12.9358C12.1808 12.9968 12.0231 13.0282 11.8638 13.0282C11.7045 13.0282 11.5468 12.9968 11.3996 12.9358C11.2525 12.8748 11.1188 12.7854 11.0062 12.6727L10.9699 12.6364C10.827 12.4966 10.6456 12.4029 10.449 12.3673C10.2524 12.3316 10.0496 12.3557 9.86683 12.4364C9.68757 12.5132 9.5347 12.6407 9.42702 12.8033C9.31933 12.9659 9.26155 13.1565 9.26077 13.3515V13.4545C9.26077 13.776 9.13306 14.0843 8.90575 14.3116C8.67843 14.539 8.37012 14.6667 8.04865 14.6667C7.72717 14.6667 7.41887 14.539 7.19155 14.3116C6.96423 14.0843 6.83653 13.776 6.83653 13.4545V13.4C6.83183 13.1994 6.7669 13.0048 6.65017 12.8416C6.53344 12.6784 6.37031 12.5541 6.18198 12.4848C5.99918 12.4042 5.79641 12.3801 5.59981 12.4157C5.4032 12.4514 5.22179 12.5451 5.07895 12.6848L5.04259 12.7212C4.93001 12.8339 4.79633 12.9233 4.64918 12.9843C4.50203 13.0453 4.3443 13.0767 4.18501 13.0767C4.02572 13.0767 3.86799 13.0453 3.72084 12.9843C3.57369 12.9233 3.44001 12.8339 3.32744 12.7212C3.21474 12.6086 3.12533 12.475 3.06433 12.3278C3.00333 12.1807 2.97194 12.0229 2.97194 11.8636C2.97194 11.7043 3.00333 11.5466 3.06433 11.3995C3.12533 11.2523 3.21474 11.1186 3.32744 11.0061L3.3638 10.9697C3.50352 10.8269 3.59724 10.6454 3.63289 10.4488C3.66854 10.2522 3.64447 10.0495 3.5638 9.86666C3.48697 9.68741 3.35941 9.53453 3.19681 9.42685C3.03421 9.31917 2.84367 9.26138 2.64865 9.2606H2.54562C2.22414 9.2606 1.91583 9.13289 1.68852 8.90558C1.4612 8.67826 1.3335 8.36995 1.3335 8.04848C1.3335 7.727 1.4612 7.4187 1.68852 7.19138C1.91583 6.96406 2.22414 6.83636 2.54562 6.83636H2.60016C2.80077 6.83167 2.99532 6.76673 3.15853 6.65C3.32173 6.53327 3.44605 6.37014 3.51531 6.18181C3.59599 5.99902 3.62006 5.79624 3.58441 5.59964C3.54876 5.40303 3.45503 5.22162 3.31531 5.07878L3.27895 5.04242C3.16625 4.92985 3.07685 4.79616 3.01585 4.64901C2.95485 4.50186 2.92345 4.34413 2.92345 4.18484C2.92345 4.02555 2.95485 3.86782 3.01585 3.72067C3.07685 3.57352 3.16625 3.43984 3.27895 3.32727C3.39152 3.21457 3.52521 3.12516 3.67236 3.06416C3.81951 3.00317 3.97723 2.97177 4.13653 2.97177C4.29582 2.97177 4.45355 3.00317 4.6007 3.06416C4.74785 3.12516 4.88153 3.21457 4.9941 3.32727L5.03047 3.36363C5.1733 3.50335 5.35472 3.59708 5.55132 3.63272C5.74792 3.66837 5.9507 3.64431 6.1335 3.56363H6.18198C6.36123 3.48681 6.51411 3.35924 6.62179 3.19664C6.72948 3.03404 6.78726 2.8435 6.78804 2.64848V2.54545C6.78804 2.22397 6.91575 1.91567 7.14306 1.68835C7.37038 1.46103 7.67869 1.33333 8.00016 1.33333C8.32164 1.33333 8.62994 1.46103 8.85726 1.68835C9.08458 1.91567 9.21228 2.22397 9.21228 2.54545V2.59999C9.21306 2.79502 9.27085 2.98556 9.37853 3.14816C9.48621 3.31076 9.63909 3.43832 9.81834 3.51515C10.0011 3.59582 10.2039 3.61989 10.4005 3.58424C10.5971 3.54859 10.7785 3.45487 10.9214 3.31515L10.9577 3.27878C11.0703 3.16608 11.204 3.07668 11.3511 3.01568C11.4983 2.95468 11.656 2.92328 11.8153 2.92328C11.9746 2.92328 12.1323 2.95468 12.2795 3.01568C12.4266 3.07668 12.5603 3.16608 12.6729 3.27878C12.7856 3.39136 12.875 3.52504 12.936 3.67219C12.997 3.81934 13.0284 3.97707 13.0284 4.13636C13.0284 4.29565 12.997 4.45338 12.936 4.60053C12.875 4.74768 12.7856 4.88136 12.6729 4.99393L12.6365 5.0303C12.4968 5.17313 12.4031 5.35455 12.3674 5.55115C12.3318 5.74776 12.3558 5.95053 12.4365 6.13333V6.18181C12.5134 6.36107 12.6409 6.51394 12.8035 6.62163C12.9661 6.72931 13.1567 6.7871 13.3517 6.78787H13.4547C13.7762 6.78787 14.0845 6.91558 14.3118 7.1429C14.5391 7.37021 14.6668 7.67852 14.6668 7.99999C14.6668 8.32147 14.5391 8.62978 14.3118 8.85709C14.0845 9.08441 13.7762 9.21212 13.4547 9.21212H13.4002C13.2051 9.21289 13.0146 9.27068 12.852 9.37836C12.6894 9.48605 12.5618 9.63892 12.485 9.81818Z" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+        </g>
+        <defs>
+            <clipPath id="clip0_8234_4618">
+                <rect width="16" height="16" fill="white" />
+            </clipPath>
+        </defs>
+    </svg>
+
+);

package/src/assets/icon/System/Shield/ShieldLg.tsx

@@ -0,0 +1,10 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const ShieldLg = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M12.1128 21.9809C12.0371 22.0067 11.963 22.0064 11.8875 21.9799C10.9176 21.6391 4 18.9393 4 11.2524V4.30385C4 4.12 4.12492 3.95974 4.30299 3.91515L11.903 2.01196C11.9667 1.99601 12.0333 1.99601 12.097 2.01196L19.697 3.91515C19.8751 3.95974 20 4.12 20 4.30385V11.2524C20 19.0169 13.084 21.6495 12.1128 21.9809Z" stroke={color} strokeWidth="2" stroke-miterlimit="10" strokeLinejoin="round" />
+        <path d="M14 9.90836C14.0002 10.3034 13.8721 10.6887 13.6333 11.0113C13.3945 11.3339 13.0568 11.5779 12.6667 11.7095L13.18 14.2426C13.1987 14.3348 13.1958 14.4297 13.1715 14.5206C13.1473 14.6116 13.1022 14.6963 13.0397 14.7686C12.9771 14.841 12.8986 14.8993 12.8096 14.9393C12.7207 14.9793 12.6236 15 12.5253 15H11.4747C11.3765 14.9998 11.2795 14.979 11.1908 14.9389C11.102 14.8988 11.0237 14.8405 10.9612 14.7681C10.8988 14.6958 10.8539 14.6112 10.8297 14.5203C10.8055 14.4295 10.8027 14.3346 10.8213 14.2426L11.3333 11.7095C10.9877 11.5929 10.6823 11.3877 10.4505 11.1166C10.2187 10.8454 10.0694 10.5186 10.019 10.1719C9.96859 9.82525 10.019 9.47201 10.1646 9.15081C10.3103 8.82961 10.5456 8.55281 10.8449 8.35066C11.1442 8.14851 11.4959 8.02879 11.8616 8.00458C12.2274 7.98036 12.5931 8.05259 12.9187 8.21336C13.2444 8.37414 13.5175 8.61728 13.7081 8.91621C13.8988 9.21514 13.9998 9.55836 14 9.90836Z" fill={color} />
+    </svg>
+
+);

package/src/assets/icon/System/Shield/ShieldMd.tsx

@@ -0,0 +1,10 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const ShieldMd = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M10.0942 18.3174C10.0311 18.3389 9.96933 18.3387 9.90641 18.3166C9.09816 18.0326 3.3335 15.7828 3.3335 9.377V3.58654C3.3335 3.43333 3.4376 3.29978 3.58599 3.26262L9.91933 1.67663C9.97241 1.66334 10.0279 1.66334 10.081 1.67663L16.4143 3.26262C16.5627 3.29978 16.6668 3.43333 16.6668 3.58654V9.377C16.6668 15.8474 10.9035 18.0412 10.0942 18.3174Z" stroke={color} strokeWidth="1.5" stroke-miterlimit="10" strokeLinejoin="round" />
+        <path d="M11.6668 8.25697C11.667 8.58615 11.5602 8.90728 11.3612 9.17611C11.1622 9.44493 10.8808 9.64821 10.5557 9.75794L10.9835 11.8688C10.9991 11.9456 10.9966 12.0247 10.9764 12.1005C10.9562 12.1763 10.9187 12.2469 10.8666 12.3072C10.8144 12.3675 10.749 12.4161 10.6749 12.4494C10.6008 12.4827 10.5199 12.5 10.4379 12.5H9.56239C9.48057 12.4999 9.39979 12.4825 9.32582 12.4491C9.25186 12.4157 9.18654 12.3671 9.13453 12.3068C9.08251 12.2465 9.04509 12.176 9.02494 12.1003C9.00478 12.0246 9.0024 11.9455 9.01794 11.8688L9.44461 9.75794C9.15656 9.66072 8.90205 9.48978 8.70889 9.2638C8.51573 9.03783 8.39134 8.76551 8.34933 8.47661C8.30732 8.18771 8.34929 7.89334 8.47067 7.62568C8.59204 7.35801 8.78815 7.12734 9.03756 6.95889C9.28696 6.79043 9.58007 6.69066 9.88486 6.67048C10.1896 6.6503 10.4944 6.71049 10.7657 6.84447C11.0371 6.97845 11.2647 7.18106 11.4236 7.43017C11.5825 7.67928 11.6667 7.9653 11.6668 8.25697Z" fill={color} />
+    </svg>
+
+);

package/src/assets/icon/System/Shield/ShieldSm.tsx

@@ -0,0 +1,10 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const ShieldSm = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M8.07504 14.6539C8.02457 14.6711 7.97517 14.6709 7.92484 14.6533C7.27824 14.4261 2.6665 12.6262 2.6665 7.5016V2.86923C2.6665 2.74667 2.74978 2.63983 2.8685 2.6101L7.93517 1.34131C7.97764 1.33067 8.02204 1.33067 8.0645 1.34131L13.1312 2.6101C13.2499 2.63983 13.3332 2.74667 13.3332 2.86923V7.5016C13.3332 12.6779 8.7225 14.433 8.07504 14.6539Z" stroke={color} stroke-miterlimit="10" strokeLinejoin="round" />
+        <path d="M9.33317 6.60558C9.33332 6.86892 9.2479 7.12583 9.0887 7.34089C8.9295 7.55595 8.70435 7.71857 8.44428 7.80635L8.7865 9.49508C8.79895 9.5565 8.79702 9.61979 8.78085 9.68042C8.76468 9.74104 8.73466 9.7975 8.69295 9.84576C8.65124 9.89401 8.59887 9.93286 8.53959 9.95953C8.48031 9.98619 8.41559 10 8.35006 10H7.64962C7.58416 9.99989 7.51954 9.98598 7.46037 9.95926C7.4012 9.93254 7.34894 9.89367 7.30733 9.84543C7.26572 9.79719 7.23578 9.74078 7.21966 9.68021C7.20353 9.61965 7.20162 9.55643 7.21406 9.49508L7.55539 7.80635C7.32496 7.72857 7.12135 7.59182 6.96682 7.41104C6.81229 7.23026 6.71278 7.01241 6.67917 6.78129C6.64556 6.55017 6.67914 6.31467 6.77624 6.10054C6.87334 5.88641 7.03023 5.70188 7.22975 5.56711C7.42928 5.43234 7.66377 5.35253 7.90759 5.33638C8.15142 5.32024 8.39521 5.36839 8.61231 5.47558C8.82941 5.58276 9.01147 5.74485 9.1386 5.94414C9.26573 6.14343 9.33304 6.37224 9.33317 6.60558Z" fill={color} />
+    </svg>
+
+);

package/src/assets/icon/System/Shop/ShopLg.tsx

@@ -0,0 +1,20 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const ShopLg = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <g clip-path="url(#clip0_8234_4646)">
+            <path d="M3.81836 13.1853V20.1818C3.81836 20.3988 3.90456 20.6069 4.058 20.7604C4.21144 20.9138 4.41955 21 4.63654 21H19.3638C19.5808 21 19.7889 20.9138 19.9424 20.7604C20.0958 20.6069 20.182 20.3988 20.182 20.1818V13.1853" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M4.43164 3H19.568C19.7457 3.00003 19.9186 3.05794 20.0605 3.16496C20.2024 3.27199 20.3056 3.4223 20.3545 3.59318L21.818 8.72727H2.18164L3.64823 3.59318C3.69696 3.42281 3.79969 3.27286 3.94097 3.16588C4.08225 3.05891 4.25443 3.0007 4.43164 3Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M8.7271 8.72727V10.3636C8.7271 11.2316 8.38229 12.064 7.76854 12.6778C7.15478 13.2916 6.32235 13.6364 5.45437 13.6364C4.58639 13.6364 3.75396 13.2916 3.1402 12.6778C2.52644 12.064 2.18164 11.2316 2.18164 10.3636V8.72727" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M15.2725 8.72727V10.3636C15.2725 11.2316 14.9277 12.064 14.3139 12.6778C13.7002 13.2916 12.8678 13.6364 11.9998 13.6364C11.1318 13.6364 10.2994 13.2916 9.68561 12.6778C9.07185 12.064 8.72705 11.2316 8.72705 10.3636V8.72727" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M21.8184 8.72727V10.3636C21.8184 11.2316 21.4736 12.064 20.8598 12.6778C20.2461 13.2916 19.4137 13.6364 18.5457 13.6364C17.6777 13.6364 16.8453 13.2916 16.2315 12.6778C15.6178 12.064 15.2729 11.2316 15.2729 10.3636V8.72727" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        </g>
+        <defs>
+            <clipPath id="clip0_8234_4646">
+                <rect width="24" height="24" fill="white" />
+            </clipPath>
+        </defs>
+    </svg>
+
+);

package/src/assets/icon/System/Shop/ShopMd.tsx

@@ -0,0 +1,20 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const ShopMd = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <g clip-path="url(#clip0_8234_4639)">
+            <path d="M3.18164 10.9878V16.8182C3.18164 16.999 3.25347 17.1724 3.38134 17.3003C3.50921 17.4282 3.68263 17.5 3.86346 17.5H16.1362C16.317 17.5 16.4904 17.4282 16.6183 17.3003C16.7462 17.1724 16.818 16.999 16.818 16.8182V10.9878" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M3.69336 2.5H16.307C16.4551 2.50003 16.5992 2.54828 16.7174 2.63747C16.8357 2.72666 16.9217 2.85192 16.9624 2.99432L18.182 7.27273H1.81836L3.04052 2.99432C3.08113 2.85234 3.16673 2.72738 3.28447 2.63824C3.4022 2.54909 3.54569 2.50058 3.69336 2.5Z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M7.2729 7.27272V8.63636C7.2729 9.35967 6.98557 10.0534 6.47411 10.5648C5.96264 11.0763 5.26895 11.3636 4.54563 11.3636C3.82231 11.3636 3.12862 11.0763 2.61716 10.5648C2.1057 10.0534 1.81836 9.35967 1.81836 8.63636V7.27272" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M12.7275 7.27272V8.63636C12.7275 9.35967 12.4402 10.0534 11.9287 10.5648C11.4172 11.0763 10.7235 11.3636 10.0002 11.3636C9.2769 11.3636 8.58321 11.0763 8.07175 10.5648C7.56029 10.0534 7.27295 9.35967 7.27295 8.63636V7.27272" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M18.1816 7.27272V8.63636C18.1816 9.35967 17.8943 10.0534 17.3828 10.5648C16.8713 11.0763 16.1776 11.3636 15.4543 11.3636C14.731 11.3636 14.0373 11.0763 13.5259 10.5648C13.0144 10.0534 12.7271 9.35967 12.7271 8.63636V7.27272" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        </g>
+        <defs>
+            <clipPath id="clip0_8234_4639">
+                <rect width="20" height="20" fill="white" />
+            </clipPath>
+        </defs>
+    </svg>
+
+);

package/src/assets/icon/System/Shop/ShopSm.tsx

@@ -0,0 +1,20 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const ShopSm = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <g clip-path="url(#clip0_8234_4637)">
+            <path d="M2.54541 8.79022V13.4545C2.54541 13.5992 2.60288 13.7379 2.70517 13.8402C2.80746 13.9425 2.9462 14 3.09086 14H12.909C13.0537 14 13.1924 13.9425 13.2947 13.8402C13.397 13.7379 13.4545 13.5992 13.4545 13.4545V8.79022" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M2.95459 2H13.0455C13.164 2.00002 13.2792 2.03863 13.3738 2.10998C13.4684 2.18132 13.5372 2.28154 13.5698 2.39545L14.5455 5.81818H1.45459L2.43232 2.39545C2.4648 2.28187 2.53329 2.1819 2.62747 2.11059C2.72166 2.03927 2.83645 2.00047 2.95459 2Z" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M5.81823 5.81818V6.90909C5.81823 7.48774 5.58836 8.04269 5.17919 8.45186C4.77002 8.86103 4.21506 9.0909 3.63641 9.0909C3.05775 9.0909 2.5028 8.86103 2.09363 8.45186C1.68446 8.04269 1.45459 7.48774 1.45459 6.90909V5.81818" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M10.182 5.81818V6.90909C10.182 7.48774 9.95213 8.04269 9.54296 8.45186C9.13379 8.86103 8.57883 9.0909 8.00018 9.0909C7.42152 9.0909 6.86657 8.86103 6.4574 8.45186C6.04823 8.04269 5.81836 7.48774 5.81836 6.90909V5.81818" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M14.5453 5.81818V6.90909C14.5453 7.48774 14.3154 8.04269 13.9062 8.45186C13.4971 8.86103 12.9421 9.0909 12.3635 9.0909C11.7848 9.0909 11.2299 8.86103 10.8207 8.45186C10.4115 8.04269 10.1816 7.48774 10.1816 6.90909V5.81818" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+        </g>
+        <defs>
+            <clipPath id="clip0_8234_4637">
+                <rect width="16" height="16" fill="white" />
+            </clipPath>
+        </defs>
+    </svg>
+
+);

package/src/assets/icon/System/SocialMedia/SocialmediaLg.tsx

@@ -0,0 +1,22 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const SocialmediaLg = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <g clip-path="url(#clip0_9490_172)">
+            <path d="M10 5C10 5.53043 10.2107 6.03914 10.5858 6.41421C10.9609 6.78929 11.4696 7 12 7C12.5304 7 13.0391 6.78929 13.4142 6.41421C13.7893 6.03914 14 5.53043 14 5C14 4.46957 13.7893 3.96086 13.4142 3.58579C13.0391 3.21071 12.5304 3 12 3C11.4696 3 10.9609 3.21071 10.5858 3.58579C10.2107 3.96086 10 4.46957 10 5Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M3 19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21C5.53043 21 6.03914 20.7893 6.41421 20.4142C6.78929 20.0391 7 19.5304 7 19C7 18.4696 6.78929 17.9609 6.41421 17.5858C6.03914 17.2107 5.53043 17 5 17C4.46957 17 3.96086 17.2107 3.58579 17.5858C3.21071 17.9609 3 18.4696 3 19Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M17 19C17 19.5304 17.2107 20.0391 17.5858 20.4142C17.9609 20.7893 18.4696 21 19 21C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19C21 18.4696 20.7893 17.9609 20.4142 17.5858C20.0391 17.2107 19.5304 17 19 17C18.4696 17 17.9609 17.2107 17.5858 17.5858C17.2107 17.9609 17 18.4696 17 19Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M9 14C9 14.7956 9.31607 15.5587 9.87868 16.1213C10.4413 16.6839 11.2044 17 12 17C12.7956 17 13.5587 16.6839 14.1213 16.1213C14.6839 15.5587 15 14.7956 15 14C15 13.2044 14.6839 12.4413 14.1213 11.8787C13.5587 11.3161 12.7956 11 12 11C11.2044 11 10.4413 11.3161 9.87868 11.8787C9.31607 12.4413 9 13.2044 9 14Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M12 7V11" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M6.7002 17.8L9.5002 15.8" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M17.3 17.8L14.5 15.8" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        </g>
+        <defs>
+            <clipPath id="clip0_9490_172">
+                <rect width="24" height="24" fill="white" />
+            </clipPath>
+        </defs>
+    </svg>
+
+);

package/src/assets/icon/System/SocialMedia/SocialmediaMd.tsx

@@ -0,0 +1,22 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const SocialmediaMd = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <g clip-path="url(#clip0_9490_163)">
+            <path d="M8.33301 4.16667C8.33301 4.60869 8.5086 5.03262 8.82116 5.34518C9.13372 5.65774 9.55765 5.83333 9.99967 5.83333C10.4417 5.83333 10.8656 5.65774 11.1782 5.34518C11.4907 5.03262 11.6663 4.60869 11.6663 4.16667C11.6663 3.72464 11.4907 3.30072 11.1782 2.98816C10.8656 2.67559 10.4417 2.5 9.99967 2.5C9.55765 2.5 9.13372 2.67559 8.82116 2.98816C8.5086 3.30072 8.33301 3.72464 8.33301 4.16667Z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M2.5 15.8333C2.5 16.2754 2.67559 16.6993 2.98816 17.0118C3.30072 17.3244 3.72464 17.5 4.16667 17.5C4.60869 17.5 5.03262 17.3244 5.34518 17.0118C5.65774 16.6993 5.83333 16.2754 5.83333 15.8333C5.83333 15.3913 5.65774 14.9674 5.34518 14.6548C5.03262 14.3423 4.60869 14.1667 4.16667 14.1667C3.72464 14.1667 3.30072 14.3423 2.98816 14.6548C2.67559 14.9674 2.5 15.3913 2.5 15.8333Z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M14.167 15.8333C14.167 16.2754 14.3426 16.6993 14.6551 17.0118C14.9677 17.3244 15.3916 17.5 15.8337 17.5C16.2757 17.5 16.6996 17.3244 17.0122 17.0118C17.3247 16.6993 17.5003 16.2754 17.5003 15.8333C17.5003 15.3913 17.3247 14.9674 17.0122 14.6548C16.6996 14.3423 16.2757 14.1667 15.8337 14.1667C15.3916 14.1667 14.9677 14.3423 14.6551 14.6548C14.3426 14.9674 14.167 15.3913 14.167 15.8333Z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M7.5 11.6667C7.5 12.3297 7.76339 12.9656 8.23223 13.4344C8.70107 13.9033 9.33696 14.1667 10 14.1667C10.663 14.1667 11.2989 13.9033 11.7678 13.4344C12.2366 12.9656 12.5 12.3297 12.5 11.6667C12.5 11.0036 12.2366 10.3677 11.7678 9.8989C11.2989 9.43006 10.663 9.16667 10 9.16667C9.33696 9.16667 8.70107 9.43006 8.23223 9.8989C7.76339 10.3677 7.5 11.0036 7.5 11.6667Z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M10 5.83333V9.16666" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M5.58301 14.8333L7.91634 13.1667" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M14.4163 14.8333L12.083 13.1667" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        </g>
+        <defs>
+            <clipPath id="clip0_9490_163">
+                <rect width="20" height="20" fill="white" />
+            </clipPath>
+        </defs>
+    </svg>
+
+);

package/src/assets/icon/System/SocialMedia/SocialmediaSm.tsx

@@ -0,0 +1,22 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const SocialmediaSm = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <g clip-path="url(#clip0_9490_93)">
+            <path d="M6.66699 3.33333C6.66699 3.68696 6.80747 4.02609 7.05752 4.27614C7.30757 4.52619 7.6467 4.66667 8.00033 4.66667C8.35395 4.66667 8.69309 4.52619 8.94313 4.27614C9.19318 4.02609 9.33366 3.68696 9.33366 3.33333C9.33366 2.97971 9.19318 2.64057 8.94313 2.39052C8.69309 2.14048 8.35395 2 8.00033 2C7.6467 2 7.30757 2.14048 7.05752 2.39052C6.80747 2.64057 6.66699 2.97971 6.66699 3.33333Z" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M2 12.6667C2 13.0203 2.14048 13.3594 2.39052 13.6095C2.64057 13.8595 2.97971 14 3.33333 14C3.68696 14 4.02609 13.8595 4.27614 13.6095C4.52619 13.3594 4.66667 13.0203 4.66667 12.6667C4.66667 12.313 4.52619 11.9739 4.27614 11.7239C4.02609 11.4738 3.68696 11.3333 3.33333 11.3333C2.97971 11.3333 2.64057 11.4738 2.39052 11.7239C2.14048 11.9739 2 12.313 2 12.6667Z" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M11.333 12.6667C11.333 13.0203 11.4735 13.3594 11.7235 13.6095C11.9736 13.8595 12.3127 14 12.6663 14C13.02 14 13.3591 13.8595 13.6091 13.6095C13.8592 13.3594 13.9997 13.0203 13.9997 12.6667C13.9997 12.313 13.8592 11.9739 13.6091 11.7239C13.3591 11.4738 13.02 11.3333 12.6663 11.3333C12.3127 11.3333 11.9736 11.4738 11.7235 11.7239C11.4735 11.9739 11.333 12.313 11.333 12.6667Z" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M6 9.33333C6 9.86376 6.21071 10.3725 6.58579 10.7475C6.96086 11.1226 7.46957 11.3333 8 11.3333C8.53043 11.3333 9.03914 11.1226 9.41421 10.7475C9.78929 10.3725 10 9.86376 10 9.33333C10 8.8029 9.78929 8.29419 9.41421 7.91911C9.03914 7.54404 8.53043 7.33333 8 7.33333C7.46957 7.33333 6.96086 7.54404 6.58579 7.91911C6.21071 8.29419 6 8.8029 6 9.33333Z" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M8 4.66667V7.33334" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M4.4668 11.8667L6.33346 10.5333" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M11.5337 11.8667L9.66699 10.5333" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+        </g>
+        <defs>
+            <clipPath id="clip0_9490_93">
+                <rect width="16" height="16" fill="white" />
+            </clipPath>
+        </defs>
+    </svg>
+
+);

package/src/assets/icon/System/Soon/SoonLg.tsx

@@ -0,0 +1,17 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const SoonLg = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M5.8 11.3L2 22L12.7 18.21" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M4 3H4.01" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M22 8H22.01" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M15 2H15.01" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M22 20H22.01" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M22 2L19.76 2.75C19.1224 2.96239 18.5783 3.38964 18.2208 3.95872C17.8633 4.52781 17.7146 5.20339 17.8 5.87C17.9 6.73 17.23 7.5 16.35 7.5H15.97C15.11 7.5 14.37 8.1 14.21 8.94L14 10" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M22 13L21.18 12.67C20.32 12.33 19.36 12.87 19.2 13.78C19.09 14.48 18.48 15 17.77 15H17" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M11 2L11.33 2.82C11.67 3.68 11.13 4.64 10.22 4.8C9.52 4.9 9 5.52 9 6.23V7" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M10.9995 13C12.9295 14.93 13.8295 17.17 12.9995 18C12.1695 18.83 9.92953 17.93 7.99953 16C6.06953 14.07 5.16953 11.83 5.99953 11C6.82953 10.17 9.06953 11.07 10.9995 13Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/System/Soon/SoonMd.tsx

@@ -0,0 +1,24 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const SoonMd = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <g clip-path="url(#clip0_11325_198)">
+            <path d="M4.83366 9.41666L1.66699 18.3333L10.5837 15.175" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M3.33301 2.5H3.34134" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M18.333 6.66666H18.3413" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M12.5 1.66666H12.5083" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M18.333 16.6667H18.3413" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M18.3337 1.66666L16.467 2.29166C15.9356 2.46865 15.4823 2.82469 15.1843 3.29893C14.8864 3.77316 14.7625 4.33615 14.8337 4.89166C14.917 5.60832 14.3587 6.24999 13.6253 6.24999H13.3087C12.592 6.24999 11.9753 6.74999 11.842 7.44999L11.667 8.33332" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M18.3337 10.8333L17.6503 10.5583C16.9337 10.275 16.1337 10.725 16.0003 11.4833C15.9087 12.0667 15.4003 12.5 14.8087 12.5H14.167" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M9.16667 1.66666L9.44167 2.34999C9.725 3.06666 9.275 3.86666 8.51667 3.99999C7.93333 4.08332 7.5 4.59999 7.5 5.19166V5.83332" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M9.16644 10.8333C10.7748 12.4417 11.5248 14.3083 10.8331 15C10.1414 15.6917 8.27477 14.9417 6.66644 13.3333C5.0581 11.725 4.3081 9.85834 4.99977 9.16667C5.69144 8.475 7.5581 9.225 9.16644 10.8333Z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        </g>
+        <defs>
+            <clipPath id="clip0_11325_198">
+                <rect width="20" height="20" fill="white" />
+            </clipPath>
+        </defs>
+    </svg>
+
+);

package/src/assets/icon/System/Soon/SoonSm.tsx

@@ -0,0 +1,24 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const SoonSm = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <g clip-path="url(#clip0_11325_188)">
+            <path d="M3.86634 7.53333L1.33301 14.6667L8.46634 12.14" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M2.66699 2H2.67366" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M14.667 5.33334H14.6737" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M10 1.33334H10.0067" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M14.667 13.3333H14.6737" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M14.6663 1.33334L13.173 1.83334C12.7479 1.97494 12.3852 2.25977 12.1469 2.63916C11.9086 3.01855 11.8094 3.46894 11.8663 3.91334C11.933 4.48668 11.4863 5.00001 10.8997 5.00001H10.6463C10.073 5.00001 9.57967 5.40001 9.47301 5.96001L9.33301 6.66668" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M14.6663 8.66666L14.1197 8.44666C13.5463 8.21999 12.9063 8.57999 12.7997 9.18666C12.7263 9.65333 12.3197 9.99999 11.8463 9.99999H11.333" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M7.33333 1.33334L7.55333 1.88001C7.78 2.45334 7.42 3.09334 6.81333 3.20001C6.34667 3.26668 6 3.68001 6 4.15334V4.66668" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M7.33334 8.66666C8.62001 9.95332 9.22001 11.4467 8.66668 12C8.11334 12.5533 6.62001 11.9533 5.33334 10.6667C4.04668 9.37999 3.44668 7.88666 4.00001 7.33332C4.55334 6.77999 6.04668 7.37999 7.33334 8.66666Z" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+        </g>
+        <defs>
+            <clipPath id="clip0_11325_188">
+                <rect width="16" height="16" fill="white" />
+            </clipPath>
+        </defs>
+    </svg>
+
+);

package/src/assets/icon/System/Star1/Star1Lg.tsx

@@ -0,0 +1,9 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const Star1Lg = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M11.2691 4.41115C11.5006 3.89177 11.6164 3.63208 11.7776 3.55211C11.9176 3.48263 12.082 3.48263 12.222 3.55211C12.3832 3.63208 12.499 3.89177 12.7305 4.41115L14.5745 8.54808C14.643 8.70162 14.6772 8.77839 14.7302 8.83718C14.777 8.8892 14.8343 8.93081 14.8982 8.95929C14.9705 8.99149 15.0541 9.00031 15.2213 9.01795L19.7256 9.49336C20.2911 9.55304 20.5738 9.58288 20.6997 9.71147C20.809 9.82316 20.8598 9.97956 20.837 10.1342C20.8108 10.3122 20.5996 10.5025 20.1772 10.8832L16.8125 13.9154C16.6877 14.0279 16.6252 14.0842 16.5857 14.1527C16.5507 14.2134 16.5288 14.2807 16.5215 14.3503C16.5132 14.429 16.5306 14.5112 16.5655 14.6757L17.5053 19.1064C17.6233 19.6627 17.6823 19.9408 17.5989 20.1002C17.5264 20.2388 17.3934 20.3354 17.2393 20.3615C17.0619 20.3915 16.8156 20.2495 16.323 19.9654L12.3995 17.7024C12.2539 17.6184 12.1811 17.5765 12.1037 17.56C12.0352 17.5455 11.9644 17.5455 11.8959 17.56C11.8185 17.5765 11.7457 17.6184 11.6001 17.7024L7.67662 19.9654C7.18404 20.2495 6.93775 20.3915 6.76034 20.3615C6.60623 20.3354 6.47319 20.2388 6.40075 20.1002C6.31736 19.9408 6.37635 19.6627 6.49434 19.1064L7.4341 14.6757C7.46898 14.5112 7.48642 14.429 7.47814 14.3503C7.47081 14.2807 7.44894 14.2134 7.41394 14.1527C7.37439 14.0842 7.31195 14.0279 7.18708 13.9154L3.82246 10.8832C3.40005 10.5025 3.18884 10.3122 3.16258 10.1342C3.13978 9.97956 3.19059 9.82316 3.29993 9.71147C3.42581 9.58288 3.70856 9.55304 4.27406 9.49336L8.77835 9.01795C8.94553 9.00031 9.02911 8.99149 9.10139 8.95929C9.16534 8.93081 9.2226 8.8892 9.26946 8.83718C9.32241 8.77839 9.35663 8.70162 9.42508 8.54808L11.2691 4.41115Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/System/Star1/Star1Md.tsx

@@ -0,0 +1,9 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const Star1Md = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M9.39076 3.67596C9.58367 3.24315 9.68017 3.02674 9.81451 2.9601C9.93117 2.9022 10.0682 2.9022 10.1848 2.9601C10.3192 3.02674 10.4157 3.24315 10.6086 3.67596L12.1453 7.12341C12.2023 7.25136 12.2308 7.31533 12.275 7.36432C12.314 7.40767 12.3618 7.44235 12.415 7.46608C12.4753 7.49291 12.5449 7.50026 12.6843 7.51496L16.4378 7.91114C16.9091 7.96087 17.1447 7.98574 17.2496 8.0929C17.3407 8.18597 17.383 8.31631 17.364 8.44517C17.3422 8.59351 17.1662 8.75209 16.8142 9.06934L14.0103 11.5962C13.9063 11.6899 13.8542 11.7368 13.8213 11.7939C13.7921 11.8445 13.7738 11.9006 13.7678 11.9586C13.7608 12.0242 13.7753 12.0927 13.8044 12.2298L14.5876 15.922C14.6859 16.3856 14.7351 16.6173 14.6656 16.7502C14.6052 16.8657 14.4943 16.9462 14.3659 16.9679C14.2181 16.9929 14.0128 16.8746 13.6023 16.6378L10.3328 14.752C10.2114 14.682 10.1508 14.6471 10.0863 14.6333C10.0292 14.6213 9.97017 14.6213 9.91309 14.6333C9.84859 14.6471 9.78792 14.682 9.66659 14.752L6.39702 16.6378C5.98654 16.8746 5.7813 16.9929 5.63345 16.9679C5.50503 16.9462 5.39416 16.8657 5.3338 16.7502C5.2643 16.6173 5.31346 16.3856 5.41179 15.922L6.19492 12.2298C6.22399 12.0927 6.23852 12.0242 6.23162 11.9586C6.22551 11.9006 6.20729 11.8445 6.17812 11.7939C6.14516 11.7368 6.09313 11.6899 5.98907 11.5962L3.18522 9.06934C2.83321 8.75209 2.6572 8.59351 2.63532 8.44517C2.61632 8.31631 2.65866 8.18597 2.74978 8.0929C2.85468 7.98574 3.0903 7.96087 3.56155 7.91114L7.31513 7.51496C7.45445 7.50026 7.5241 7.49291 7.58433 7.46608C7.63762 7.44235 7.68534 7.40767 7.72439 7.36432C7.76851 7.31533 7.79703 7.25136 7.85407 7.12341L9.39076 3.67596Z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/System/Star1/Star1Sm.tsx

@@ -0,0 +1,9 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const Star1Sm = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M7.51241 2.94076C7.66674 2.59451 7.74394 2.42138 7.85141 2.36807C7.94474 2.32175 8.05434 2.32175 8.14767 2.36807C8.25514 2.42138 8.33234 2.59451 8.48667 2.94076L9.71601 5.69872C9.76167 5.80108 9.78447 5.85226 9.81981 5.89145C9.85101 5.92613 9.88921 5.95387 9.93181 5.97285C9.98001 5.99432 10.0357 6.0002 10.1472 6.01196L13.1501 6.3289C13.5271 6.36869 13.7155 6.38858 13.7995 6.47431C13.8723 6.54877 13.9062 6.65304 13.891 6.75613C13.8735 6.8748 13.7327 7.00166 13.4511 7.25546L11.208 9.27693C11.1248 9.35193 11.0831 9.38946 11.0568 9.43513C11.0335 9.4756 11.0189 9.52046 11.014 9.56686C11.0085 9.61933 11.0201 9.67413 11.0433 9.7838L11.6699 12.7376C11.7485 13.1085 11.7879 13.2939 11.7323 13.4001C11.6839 13.4925 11.5953 13.5569 11.4925 13.5743C11.3743 13.5943 11.2101 13.4997 10.8817 13.3103L8.26601 11.8016C8.16894 11.7456 8.12041 11.7177 8.06881 11.7067C8.02314 11.697 7.97594 11.697 7.93027 11.7067C7.87867 11.7177 7.83014 11.7456 7.73307 11.8016L5.11742 13.3103C4.78903 13.4997 4.62484 13.5943 4.50657 13.5743C4.40383 13.5569 4.31513 13.4925 4.26684 13.4001C4.21125 13.2939 4.25057 13.1085 4.32923 12.7376L4.95574 9.7838C4.97899 9.67413 4.99062 9.61933 4.9851 9.56686C4.98021 9.52046 4.96563 9.4756 4.9423 9.43513C4.91593 9.38946 4.87431 9.35193 4.79106 9.27693L2.54798 7.25546C2.26637 7.00166 2.12557 6.8748 2.10806 6.75613C2.09286 6.65304 2.12673 6.54877 2.19963 6.47431C2.28355 6.38858 2.47205 6.36869 2.84905 6.3289L5.85191 6.01196C5.96336 6.0002 6.01908 5.99432 6.06727 5.97285C6.1099 5.95387 6.14807 5.92613 6.17931 5.89145C6.21461 5.85226 6.23743 5.80108 6.28306 5.69872L7.51241 2.94076Z" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/System/Star2/Star2Lg.tsx

@@ -0,0 +1,9 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const Star2Lg = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M12 3L13.4302 8.31181C13.6047 8.96 13.692 9.28409 13.8642 9.54905C14.0166 9.78349 14.2165 9.98336 14.451 10.1358C14.7159 10.308 15.04 10.3953 15.6882 10.5698L21 12L15.6882 13.4302C15.04 13.6047 14.7159 13.692 14.451 13.8642C14.2165 14.0166 14.0166 14.2165 13.8642 14.451C13.692 14.7159 13.6047 15.04 13.4302 15.6882L12 21L10.5698 15.6882C10.3953 15.04 10.308 14.7159 10.1358 14.451C9.98336 14.2165 9.78349 14.0166 9.54905 13.8642C9.28409 13.692 8.96 13.6047 8.31181 13.4302L3 12L8.31181 10.5698C8.96 10.3953 9.28409 10.308 9.54905 10.1358C9.78349 9.98336 9.98336 9.78349 10.1358 9.54905C10.308 9.28409 10.3953 8.96 10.5698 8.31181L12 3Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/System/Star2/Star2Md.tsx

@@ -0,0 +1,9 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const Star2Md = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M10 2.5L11.1918 6.92651C11.3372 7.46667 11.41 7.73674 11.5535 7.95754C11.6805 8.15291 11.8471 8.31947 12.0425 8.4465C12.2632 8.59 12.5333 8.66275 13.0735 8.80817L17.5 10L13.0735 11.1918C12.5333 11.3372 12.2632 11.41 12.0425 11.5535C11.8471 11.6805 11.6805 11.8471 11.5535 12.0425C11.41 12.2632 11.3372 12.5333 11.1918 13.0735L10 17.5L8.80817 13.0735C8.66275 12.5333 8.59 12.2632 8.4465 12.0425C8.31947 11.8471 8.15291 11.6805 7.95754 11.5535C7.73674 11.41 7.46667 11.3372 6.92651 11.1918L2.5 10L6.92651 8.80817C7.46667 8.66275 7.73674 8.59 7.95754 8.4465C8.15291 8.31947 8.31947 8.15291 8.4465 7.95754C8.59 7.73674 8.66275 7.46667 8.80817 6.92651L10 2.5Z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/System/Star2/Star2Sm.tsx

@@ -0,0 +1,9 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const Star2Sm = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M8 2L8.95347 5.54121C9.0698 5.97333 9.128 6.18939 9.2428 6.36603C9.3444 6.52233 9.47767 6.65557 9.634 6.7572C9.8106 6.872 10.0267 6.9302 10.4588 7.04653L14 8L10.4588 8.95347C10.0267 9.0698 9.8106 9.128 9.634 9.2428C9.47767 9.3444 9.3444 9.47767 9.2428 9.634C9.128 9.8106 9.0698 10.0267 8.95347 10.4588L8 14L7.04653 10.4588C6.9302 10.0267 6.872 9.8106 6.7572 9.634C6.65557 9.47767 6.52233 9.3444 6.36603 9.2428C6.18939 9.128 5.97333 9.0698 5.54121 8.95347L2 8L5.54121 7.04653C5.97333 6.9302 6.18939 6.872 6.36603 6.7572C6.52233 6.65557 6.65557 6.52233 6.7572 6.36603C6.872 6.18939 6.9302 5.97333 7.04653 5.54121L8 2Z" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/System/Subscription/SubscriptionLg.tsx

@@ -0,0 +1,9 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const SubscriptionLg = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M14.0786 9.39632C13.9543 9.04685 13.725 8.74432 13.422 8.53014C13.119 8.31596 12.7573 8.2006 12.3862 8.19984H10.9968C10.6005 8.19777 10.2174 8.34268 9.92173 8.60654C9.62605 8.87041 9.43877 9.23449 9.39609 9.62838C9.35341 10.0223 9.45836 10.418 9.69067 10.739C9.92297 11.06 10.2661 11.2836 10.6537 11.3664L12.7693 11.8277C13.2019 11.9224 13.5842 12.1735 13.8428 12.5328C14.1014 12.8921 14.2181 13.3342 14.1704 13.7743C14.1227 14.2143 13.914 14.6212 13.5844 14.9168C13.2547 15.2124 12.8275 15.3758 12.3846 15.3756H11.1892C10.4076 15.3756 9.74288 14.8774 9.49671 14.1807M11.7877 8.19984V6.40513M11.7877 17.1704V15.3772M4.30395 21.9932V18.1485H8.15044M21.8285 10.1607C22.237 12.3371 21.9109 14.5875 20.9014 16.5586C19.8919 18.5298 18.2562 20.1101 16.251 21.0516C14.2457 21.993 11.9845 22.2423 9.82222 21.7603C7.65992 21.2783 5.71895 20.0922 4.30395 18.3884M2.17146 13.8393C1.763 11.6628 2.08911 9.41244 3.0986 7.44129C4.10809 5.47014 5.74382 3.88982 7.74904 2.94838C9.75427 2.00693 12.0155 1.75766 14.1778 2.23967C16.3401 2.72168 18.281 3.9077 19.696 5.61158M19.696 2.00676V5.85149H15.8496" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/System/Subscription/SubscriptionMd.tsx

@@ -0,0 +1,16 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const SubscriptionMd = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <g clip-path="url(#clip0_10429_1231)">
+            <path d="M11.7325 7.83027C11.6289 7.53904 11.4378 7.28693 11.1853 7.10845C10.9329 6.92997 10.6314 6.83383 10.3221 6.8332H9.16436C8.83405 6.83147 8.51483 6.95223 8.26843 7.17212C8.02204 7.39201 7.86596 7.69541 7.8304 8.02365C7.79483 8.35189 7.8823 8.68166 8.07588 8.94918C8.26946 9.2167 8.55541 9.40297 8.87843 9.47196L10.6414 9.85644C11.0019 9.93532 11.3205 10.1446 11.536 10.444C11.7515 10.7434 11.8487 11.1119 11.809 11.4786C11.7692 11.8453 11.5953 12.1844 11.3206 12.4307C11.0459 12.677 10.6899 12.8132 10.3209 12.813H9.32463C8.67329 12.813 8.11939 12.3978 7.91425 11.8172M9.82339 6.8332V5.33761M9.82339 14.3086V12.8143M3.58695 18.3276V15.1237H6.79236M18.1908 8.46721C18.5312 10.2809 18.2594 12.1562 17.4182 13.7989C16.5769 15.4415 15.2138 16.7584 13.5428 17.543C11.8718 18.3275 9.98742 18.5352 8.18551 18.1336C6.38359 17.7319 4.76612 16.7435 3.58695 15.3236M1.80988 11.5327C1.46949 9.71904 1.74125 7.8437 2.58249 6.20108C3.42373 4.55845 4.78684 3.24152 6.45786 2.45698C8.12889 1.67245 10.0132 1.46471 11.8151 1.86639C13.6171 2.26807 15.2345 3.25642 16.4137 4.67631M16.4137 1.6723V4.87624H13.2083" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        </g>
+        <defs>
+            <clipPath id="clip0_10429_1231">
+                <rect width="20" height="20" fill="white" />
+            </clipPath>
+        </defs>
+    </svg>
+
+);

package/src/assets/icon/System/Subscription/SubscriptionSm.tsx

@@ -0,0 +1,16 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const SubscriptionSm = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <g clip-path="url(#clip0_10429_1229)">
+            <path d="M9.38543 6.26421C9.30255 6.03123 9.14966 5.82954 8.94768 5.68676C8.74571 5.54397 8.50452 5.46706 8.25713 5.46656H7.3309C7.06665 5.46518 6.81128 5.56178 6.61416 5.7377C6.41704 5.91361 6.29219 6.15633 6.26373 6.41892C6.23528 6.68152 6.30525 6.94533 6.46012 7.15934C6.61499 7.37336 6.84375 7.52237 7.10216 7.57757L8.51254 7.88515C8.80093 7.94826 9.05581 8.11566 9.22822 8.35519C9.40063 8.59472 9.4784 8.88948 9.4466 9.18285C9.41479 9.47621 9.27565 9.74748 9.05591 9.94454C8.83617 10.1416 8.55132 10.2505 8.25611 10.2504H7.45912C6.93804 10.2504 6.49493 9.91824 6.33081 9.4538M7.85812 5.46656V4.27008M7.85812 11.4469V10.2514M2.86898 14.6621V12.099H5.4333M14.552 6.77377C14.8243 8.22473 14.6069 9.725 13.9339 11.0391C13.2609 12.3532 12.1705 13.4067 10.8336 14.0344C9.49682 14.662 7.98935 14.8282 6.54782 14.5068C5.10629 14.1855 3.81231 13.3948 2.86898 12.2589M1.44731 9.22619C1.17501 7.77523 1.39241 6.27496 2.06541 4.96086C2.7384 3.64676 3.82889 2.59322 5.1657 1.96559C6.50252 1.33796 8.01 1.17177 9.45153 1.49311C10.8931 1.81446 12.187 2.60514 13.1304 3.74105M13.1304 1.33784V3.90099H10.566" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+        </g>
+        <defs>
+            <clipPath id="clip0_10429_1229">
+                <rect width="16" height="16" fill="white" />
+            </clipPath>
+        </defs>
+    </svg>
+
+);

package/src/assets/icon/System/SuitCase/SuitcaseLg.tsx

@@ -0,0 +1,12 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const SuitcaseLg = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M3 11L3.15288 14.2269C3.31714 17.6686 3.39927 19.3894 4.55885 20.4447C5.71843 21.5 7.52716 21.5 11.1446 21.5H12.8554C16.4728 21.5 18.2816 21.5 19.4412 20.4447C20.6007 19.3894 20.6829 17.6686 20.8471 14.2269L21 11" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M2.84718 10.4431C4.54648 13.6744 8.3792 15 12 15C15.6208 15 19.4535 13.6744 21.1528 10.4431C21.964 8.90056 21.3498 6 19.352 6H4.648C2.65023 6 2.03603 8.90056 2.84718 10.4431Z" stroke={color} strokeWidth="2" />
+        <path d="M12 11H12.009" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M16 6L15.9117 5.69094C15.4717 4.15089 15.2517 3.38087 14.7279 2.94043C14.2041 2.5 13.5084 2.5 12.117 2.5H11.883C10.4916 2.5 9.79587 2.5 9.2721 2.94043C8.74832 3.38087 8.52832 4.15089 8.0883 5.69094L8 6" stroke={color} strokeWidth="2" />
+    </svg>
+
+);

package/src/assets/icon/System/SuitCase/SuitcaseMd.tsx

@@ -0,0 +1,12 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const SuitcaseMd = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M2.5 9.16667L2.6274 11.8558C2.76428 14.7238 2.83272 16.1578 3.79904 17.0373C4.76536 17.9167 6.27263 17.9167 9.28717 17.9167H10.7128C13.7273 17.9167 15.2347 17.9167 16.201 17.0373C17.1672 16.1578 17.2357 14.7238 17.3726 11.8558L17.5 9.16667" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M2.37232 8.70258C3.78841 11.3953 6.98234 12.5 9.99968 12.5C13.017 12.5 16.2109 11.3953 17.627 8.70258C18.303 7.41713 17.7912 5 16.1263 5H3.87301C2.2082 5 1.69637 7.41713 2.37232 8.70258Z" stroke={color} strokeWidth="1.5" />
+        <path d="M10 9.16667H10.0079" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M13.3337 5L13.2601 4.74244C12.8934 3.45907 12.7101 2.81739 12.2736 2.45035C11.8371 2.08333 11.2573 2.08333 10.0978 2.08333H9.90283C8.74333 2.08333 8.16355 2.08333 7.72708 2.45035C7.29059 2.81739 7.10726 3.45907 6.74058 4.74244L6.66699 5" stroke={color} strokeWidth="1.5" />
+    </svg>
+
+);

package/src/assets/icon/System/SuitCase/SuitcaseSm.tsx

@@ -0,0 +1,12 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const SuitcaseSm = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M2 7.33333L2.10192 9.4846C2.21143 11.7791 2.26618 12.9263 3.03923 13.6298C3.81229 14.3333 5.01811 14.3333 7.42973 14.3333H8.57027C10.9819 14.3333 12.1877 14.3333 12.9608 13.6298C13.7338 12.9263 13.7886 11.7791 13.8981 9.4846L14 7.33333" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M1.89845 6.96207C3.03131 9.11627 5.58646 10 8.00033 10C10.4142 10 12.9693 9.11627 14.1022 6.96207C14.643 5.93371 14.2335 4 12.9017 4H3.09899C1.76715 4 1.35768 5.93371 1.89845 6.96207Z" stroke={color} />
+        <path d="M8 7.33333H8.00675" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M10.6663 4L10.6075 3.79396C10.3141 2.76726 10.1675 2.25392 9.81827 1.96029C9.46907 1.66667 9.00527 1.66667 8.07767 1.66667H7.92167C6.99407 1.66667 6.53025 1.66667 6.18107 1.96029C5.83189 2.25392 5.68522 2.76726 5.39187 3.79396L5.33301 4" stroke={color} />
+    </svg>
+
+);

package/src/assets/icon/System/Sun/SunLg.tsx

@@ -0,0 +1,24 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const SunLg = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <g clip-path="url(#clip0_8778_4767)">
+            <path d="M12 3.75V1.5" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M12 17.25C14.8995 17.25 17.25 14.8995 17.25 12C17.25 9.10051 14.8995 6.75 12 6.75C9.10051 6.75 6.75 9.10051 6.75 12C6.75 14.8995 9.10051 17.25 12 17.25Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M6 6L4.5 4.5" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M6 18L4.5 19.5" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M18 6L19.5 4.5" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M18 18L19.5 19.5" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M3.75 12H1.5" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M12 20.25V22.5" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M20.25 12H22.5" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        </g>
+        <defs>
+            <clipPath id="clip0_8778_4767">
+                <rect width="24" height="24" fill="white" />
+            </clipPath>
+        </defs>
+    </svg>
+
+);

package/src/assets/icon/System/Sun/SunMd.tsx

@@ -0,0 +1,24 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const SunMd = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <g clip-path="url(#clip0_8778_4756)">
+            <path d="M10 3.125V1.25" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M10 14.375C12.4162 14.375 14.375 12.4162 14.375 10C14.375 7.58375 12.4162 5.625 10 5.625C7.58375 5.625 5.625 7.58375 5.625 10C5.625 12.4162 7.58375 14.375 10 14.375Z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M5 5L3.75 3.75" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M5 15L3.75 16.25" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M15 5L16.25 3.75" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M15 15L16.25 16.25" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M3.125 10H1.25" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M10 16.875V18.75" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M16.875 10H18.75" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        </g>
+        <defs>
+            <clipPath id="clip0_8778_4756">
+                <rect width="20" height="20" fill="white" />
+            </clipPath>
+        </defs>
+    </svg>
+
+);

package/src/assets/icon/System/Sun/SunSm.tsx

@@ -0,0 +1,24 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const SunSm = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <g clip-path="url(#clip0_8778_4754)">
+            <path d="M8 2.5V1" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M8 11.5C9.933 11.5 11.5 9.933 11.5 8C11.5 6.067 9.933 4.5 8 4.5C6.067 4.5 4.5 6.067 4.5 8C4.5 9.933 6.067 11.5 8 11.5Z" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M4 4L3 3" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M4 12L3 13" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M12 4L13 3" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M12 12L13 13" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M2.5 8H1" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M8 13.5V15" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M13.5 8H15" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+        </g>
+        <defs>
+            <clipPath id="clip0_8778_4754">
+                <rect width="16" height="16" fill="white" />
+            </clipPath>
+        </defs>
+    </svg>
+
+);

package/src/assets/icon/System/Technology/TechnologyLg.tsx

@@ -0,0 +1,9 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const TechnologyLg = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M14.1644 13.4933C13.5682 14.1701 12.8422 14.7239 12.0251 15.1254V17.4328C12.0251 17.6368 11.9438 17.8325 11.7989 17.9767C11.6541 18.121 11.4576 18.202 11.2528 18.202H6.61889C6.41406 18.202 6.21762 18.121 6.07278 17.9767C5.92794 17.8325 5.84658 17.6368 5.84658 17.4328V15.1254C4.21906 14.3164 2.97485 12.9042 2.38094 11.1919C1.78703 9.47968 1.89075 7.6038 2.66985 5.96684C3.44894 4.32988 4.84133 3.0623 6.54819 2.43612C8.25506 1.80994 10.1404 1.87505 11.7996 2.61749M5.84658 22H12.0251M12.6028 7.28468C12.0606 7.19085 12.0606 6.41554 12.6028 6.32171C13.5625 6.15454 14.4505 5.70696 15.1541 5.03587C15.8576 4.36478 16.3449 3.50048 16.554 2.55288L16.5864 2.40212C16.7038 1.86833 17.4669 1.86526 17.5889 2.39751L17.6291 2.57134C17.8448 3.51528 18.3361 4.37458 19.0411 5.04109C19.7461 5.70761 20.6333 6.15157 21.5911 6.31709C22.1363 6.41247 22.1363 7.19085 21.5911 7.28622C20.6336 7.45202 19.7467 7.8961 19.042 8.5626C18.3373 9.2291 17.8463 10.0882 17.6306 11.032L17.5904 11.2058C17.4684 11.7381 16.7054 11.735 16.588 11.2012L16.5571 11.052C16.3478 10.1039 15.8601 9.23936 15.1559 8.56822C14.4517 7.89709 13.563 7.45129 12.6028 7.28468Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/System/Technology/TechnologyMd.tsx

@@ -0,0 +1,16 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const TechnologyMd = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <g clip-path="url(#clip0_10436_1179)">
+            <path d="M11.804 11.2444C11.3072 11.8084 10.7022 12.2699 10.0213 12.6045V14.5274C10.0213 14.6974 9.95345 14.8604 9.83275 14.9806C9.71206 15.1008 9.54835 15.1683 9.37766 15.1683H5.51607C5.34538 15.1683 5.18168 15.1008 5.06098 14.9806C4.94028 14.8604 4.87247 14.6974 4.87247 14.5274V12.6045C3.51621 11.9303 2.47937 10.7535 1.98444 9.32661C1.48952 7.89973 1.57595 6.33649 2.2252 4.97236C2.87445 3.60823 4.03476 2.55192 5.45715 2.0301C6.87954 1.50828 8.45065 1.56254 9.83333 2.18124M4.87247 18.3334H10.0213M10.5027 6.07057C10.0509 5.99237 10.0509 5.34628 10.5027 5.26809C11.3024 5.12878 12.0424 4.7558 12.6287 4.19655C13.215 3.63731 13.6211 2.91707 13.7953 2.12739L13.8224 2.00177C13.9202 1.55694 14.5561 1.55438 14.6577 1.99792L14.6912 2.14278C14.871 2.9294 15.2804 3.64548 15.8679 4.20091C16.4554 4.75634 17.1947 5.1263 17.9929 5.26424C18.4473 5.34372 18.4473 5.99237 17.9929 6.07185C17.195 6.21002 16.4559 6.58008 15.8687 7.1355C15.2814 7.69091 14.8722 8.40687 14.6925 9.19331L14.659 9.33817C14.5573 9.78171 13.9215 9.77915 13.8236 9.33432L13.7979 9.20998C13.6235 8.41995 13.217 7.69946 12.6302 7.14018C12.0434 6.5809 11.3028 6.20941 10.5027 6.07057Z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        </g>
+        <defs>
+            <clipPath id="clip0_10436_1179">
+                <rect width="20" height="20" fill="white" />
+            </clipPath>
+        </defs>
+    </svg>
+
+);