@particle-network/icons 0.4.0-beta.0 → 0.4.0-beta.10

package/dist/web/GrassIcon.js

@@ -1,18 +1,18 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { isThemeColor } from "../core/index.js";
-import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
-const GrassIcon_GrassIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const GrassIcon_GrassIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M17.5665 3.23137C18.3274 3.15373 18.9913 3.21584 19.5581 3.41773C20.125 3.61962 20.5986 3.90304 20.9791 4.26799C21.3596 4.63294 21.6353 5.05612 21.8061 5.53755C21.9769 6.01897 22.0351 6.49651 21.9808 6.97017C21.9264 7.44383 21.7634 7.89419 21.4916 8.32126C21.2198 8.74833 20.8277 9.0861 20.3152 9.33458C19.6319 9.67624 18.9641 9.98295 18.3119 10.2547C17.6596 10.5265 17.0346 10.7517 16.4367 10.9303C15.8388 11.1089 15.2836 11.2292 14.7711 11.2913C14.2586 11.3535 13.8005 11.3379 13.3967 11.2447C13.1948 12.1765 13.024 13.1976 12.8842 14.308C12.7445 15.4184 12.6746 16.5559 12.6746 17.7207C12.6746 18.2642 12.6862 18.8078 12.7095 19.3513C12.7328 19.8948 12.76 20.3918 12.791 20.8422C12.8221 21.3546 12.8609 21.8516 12.9075 22.333H9.50649C9.52202 22.0379 9.54532 21.6497 9.57638 21.1683C9.59191 20.7645 9.60744 20.2365 9.62296 19.5842C9.63849 18.932 9.64626 18.1322 9.64626 17.1849C9.64626 15.9736 9.72391 14.8166 9.87921 13.714C10.0345 12.6114 10.2131 11.6175 10.415 10.7323C9.80932 10.872 9.16484 10.8643 8.48153 10.709C7.79821 10.5537 7.1149 10.2935 6.43159 9.9286C5.74828 9.56365 5.08827 9.11328 4.45155 8.5775C3.81482 8.04173 3.24799 7.46324 2.75103 6.84205C2.42491 6.43828 2.20749 6.0345 2.09878 5.63073C1.99007 5.22695 1.97066 4.83094 2.04055 4.4427C2.11043 4.05445 2.2502 3.6895 2.45985 3.34785C2.6695 3.00619 2.9141 2.6956 3.19363 2.41606C3.44211 2.18311 3.73718 2.00452 4.07883 1.88028C4.42049 1.75604 4.78932 1.68616 5.18533 1.67063C5.58134 1.6551 5.98511 1.68616 6.39665 1.76381C6.80819 1.84146 7.20808 1.9657 7.59633 2.13652C7.98457 2.32288 8.39999 2.57524 8.84259 2.8936C9.28519 3.21196 9.71226 3.57691 10.1238 3.98845C10.5353 4.39999 10.9158 4.83871 11.2652 5.3046C11.6147 5.77049 11.9058 6.23639 12.1388 6.70228C12.3873 6.26745 12.7134 5.85203 13.1172 5.45602C13.5209 5.06001 13.9674 4.7067 14.4566 4.39611C14.9458 4.08551 15.4583 3.82539 15.9941 3.61574C16.5298 3.40608 17.054 3.27796 17.5665 3.23137Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/HeadsetIcon.d.ts

@@ -1,7 +1,7 @@
 import { type IconColor } from '../core';
 import { type IconProps } from './types';
 declare const HeadsetIcon: {
-    <T extends string = IconColor>({ size, width, height, color, ...props }: IconProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends string = IconColor>({ size, width, height, className, color, ...props }: IconProps<T>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default HeadsetIcon;

package/dist/web/HeadsetIcon.js

@@ -1,21 +1,21 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { isThemeColor } from "../core/index.js";
-import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
-const HeadsetIcon_HeadsetIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const HeadsetIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M12.8125 2.5C16.4172 2.50007 19.3478 5.30587 19.4141 8.79199V8.79395L19.415 8.91309V10.1064C20.6207 10.4567 21.5 11.5418 21.5 12.8271V14.2383C21.5 15.7735 20.2451 17.0239 18.6777 17.0762C18.3039 18.9664 16.8589 20.479 14.9902 20.9668C14.9097 21.1283 14.7889 21.258 14.6279 21.3486C14.44 21.4544 14.2106 21.5 13.9531 21.5H11.5029C11.1519 21.5 10.852 21.4146 10.6416 21.21C10.4311 21.0053 10.3438 20.7136 10.3438 20.3721V20.1172C10.3438 19.7757 10.4312 19.484 10.6416 19.2793C10.852 19.0747 11.1518 18.9893 11.5029 18.9893H13.9531C14.2118 18.9893 14.4424 19.0348 14.6309 19.1416C14.766 19.2182 14.8721 19.3229 14.9502 19.4502C16.1169 19.0182 16.999 18.0026 17.2314 16.7607C16.2934 16.2883 15.6514 15.3362 15.6514 14.2383V12.8271C15.6514 11.477 16.6219 10.3471 17.9219 10.0586V8.91309C17.9219 6.20932 15.6949 4.00928 12.9248 3.95117H12.9238L12.8125 3.9502H11.3486C8.56387 3.9502 6.29974 6.1139 6.24023 8.80371L6.23828 8.91406V10.0996C7.45661 10.4421 8.34863 11.5331 8.34863 12.8271V14.2383C8.34863 15.8067 7.03851 17.0781 5.42383 17.0781C3.80928 17.078 2.5 15.8068 2.5 14.2383V12.8271C2.5 11.4855 3.45847 10.3616 4.74609 10.0645V8.91309C4.74609 5.41147 7.6354 2.56512 11.2246 2.50098H11.2266L11.3486 2.5H12.8125ZM5.42383 11.3076C4.65422 11.3078 4.01758 11.94 4.01758 12.7354V14.1748C4.01766 14.9699 4.65428 15.6024 5.42383 15.6025C6.19352 15.6025 6.83 14.9702 6.83008 14.1748V12.7354C6.83008 11.9401 6.19355 11.3076 5.42383 11.3076ZM18.5762 11.3076C17.8064 11.3076 17.1699 11.9399 17.1699 12.7354V14.1748C17.17 14.97 17.8065 15.6025 18.5762 15.6025C19.3457 15.6023 19.9823 14.97 19.9824 14.1748V12.7354C19.9824 11.9402 19.3457 11.3078 18.5762 11.3076Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };
-HeadsetIcon_HeadsetIcon.displayName = 'HeadsetIcon|headset';
-const HeadsetIcon = HeadsetIcon_HeadsetIcon;
-export { HeadsetIcon as default };
+HeadsetIcon.displayName = 'HeadsetIcon|headset';
+const web_HeadsetIcon = HeadsetIcon;
+export { web_HeadsetIcon as default };

package/dist/web/HeartIcon.d.ts

@@ -1,7 +1,7 @@
 import { type IconColor } from '../core';
 import { type IconProps } from './types';
 declare const HeartIcon: {
-    <T extends string = IconColor>({ size, width, height, color, ...props }: IconProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends string = IconColor>({ size, width, height, className, color, ...props }: IconProps<T>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default HeartIcon;

package/dist/web/HeartIcon.js

@@ -1,18 +1,18 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { isThemeColor } from "../core/index.js";
-import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
-const HeartIcon_HeartIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const HeartIcon_HeartIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M21.5156 7.6715C21.2054 6.95156 20.7609 6.308 20.1984 5.75473C19.6359 5.20377 18.9831 4.77319 18.2538 4.46993C17.5015 4.15742 16.7051 4 15.8833 4C14.7421 4 13.6286 4.31252 12.6609 4.90283C12.4294 5.04404 12.2095 5.19914 12.0012 5.36813C11.7928 5.19914 11.5729 5.04404 11.3414 4.90283C10.3738 4.31252 9.26028 4 8.11901 4C7.29721 4 6.50086 4.15742 5.74851 4.46993C5.02161 4.77088 4.36648 5.20377 3.80395 5.75473C3.23911 6.308 2.79695 6.95156 2.48675 7.6715C2.16497 8.41923 2.00061 9.21326 2.00061 10.0304C2.00061 10.8013 2.15803 11.6046 2.47054 12.4218C2.73213 13.1047 3.10715 13.8131 3.58635 14.5284C4.34565 15.6604 5.38969 16.841 6.68606 18.0378C8.83433 20.0217 10.9618 21.3922 11.052 21.4477L11.6007 21.7996C11.8438 21.9547 12.1563 21.9547 12.3993 21.7996L12.948 21.4477C13.0383 21.3899 15.1634 20.0217 17.314 18.0378C18.6103 16.841 19.6544 15.6604 20.4137 14.5284C20.8929 13.8131 21.2702 13.1047 21.5295 12.4218C21.842 11.6046 21.9994 10.8013 21.9994 10.0304C22.0017 9.21326 21.8374 8.41923 21.5156 7.6715ZM12.0012 19.9685C12.0012 19.9685 3.75997 14.6881 3.75997 10.0304C3.75997 7.6715 5.71147 5.75936 8.11901 5.75936C9.81124 5.75936 11.2789 6.70386 12.0012 8.08356C12.7234 6.70386 14.1911 5.75936 15.8833 5.75936C18.2909 5.75936 20.2424 7.6715 20.2424 10.0304C20.2424 14.6881 12.0012 19.9685 12.0012 19.9685Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/HexagonDollarIcon.d.ts

@@ -1,7 +1,7 @@
 import { type IconColor } from '../core';
 import { type IconProps } from './types';
 declare const HexagonDollarIcon: {
-    <T extends string = IconColor>({ size, width, height, color, ...props }: IconProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends string = IconColor>({ size, width, height, className, color, ...props }: IconProps<T>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default HexagonDollarIcon;

package/dist/web/HexagonDollarIcon.js

@@ -1,23 +1,23 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
-import { isThemeColor } from "../core/index.js";
-import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
-const HexagonDollarIcon_HexagonDollarIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const HexagonDollarIcon_HexagonDollarIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsxs("svg", {
         width: width,
         height: height,
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,
         children: [
             /*#__PURE__*/ jsx("path", {
                 d: "M18.5245 6.42927L13.4656 3.43579C12.5585 2.89917 11.4316 2.89917 10.5245 3.43579L5.46543 6.42927C4.55833 6.96609 3.99487 7.96636 3.99487 9.0398V15.0267C3.99487 16.1002 4.55833 17.1005 5.46543 17.6373L10.5243 20.6308C10.9779 20.8991 11.4864 21.0333 11.9949 21.0333C12.5034 21.0333 13.0119 20.8991 13.4654 20.6308L18.5243 17.6373C19.4314 17.1005 19.9949 16.1004 19.9949 15.0267V9.0396C19.9951 7.96616 19.4316 6.96589 18.5245 6.42927ZM18.7567 15.0265C18.7567 15.648 18.4305 16.2271 17.9053 16.5379L12.8464 19.5313C12.3213 19.8421 11.6688 19.8421 11.1437 19.5313L6.08461 16.5379C5.55946 16.2271 5.23323 15.648 5.23323 15.0265V9.0396C5.23323 8.41811 5.55946 7.83904 6.08461 7.52829L11.1435 4.53482C11.4061 4.37954 11.7006 4.30181 11.9949 4.30181C12.2892 4.30181 12.5837 4.37954 12.8462 4.53482L17.9051 7.52829C18.4303 7.83904 18.7565 8.41811 18.7565 9.0396V15.0265H18.7567Z",
-                fill: _color
+                fill: "currentColor"
             }),
             /*#__PURE__*/ jsx("path", {
                 d: "M12.5731 11.4398V8.73898C13.1293 8.82671 13.6203 9.08761 13.8942 9.45166C14.1078 9.73548 14.49 9.77507 14.7478 9.54022C15.0059 9.30537 15.0419 8.88506 14.8284 8.60145C14.3298 7.939 13.4984 7.49806 12.5731 7.39574V6.70015C12.5731 6.33194 12.3015 6.03333 11.9667 6.03333C11.6319 6.03333 11.3604 6.33194 11.3604 6.70015V7.4568C10.918 7.55224 10.5034 7.72728 10.1449 7.97463C9.46815 8.44162 9.0623 9.10991 9.00223 9.85634C8.9543 10.4521 9.14169 11.0491 9.53011 11.5374C9.96627 12.0856 10.6141 12.4663 11.3604 12.626V15.3291C10.8265 15.2329 10.3591 14.977 10.0945 14.6244C9.88139 14.3403 9.49922 14.2999 9.24097 14.5344C8.98272 14.7688 8.94596 15.1891 9.15912 15.4731C9.6472 16.1239 10.4559 16.5617 11.3604 16.6755V17.3665C11.3604 17.7347 11.6319 18.0333 11.9667 18.0333C12.3015 18.0333 12.5731 17.7347 12.5731 17.3665V16.6326C13.0365 16.54 13.4713 16.3606 13.8448 16.1029C14.5216 15.6359 14.9274 14.9676 14.9875 14.2211C15.0354 13.6254 14.8481 13.0284 14.4596 12.5401C14.0125 11.9781 13.3431 11.592 12.5731 11.4398ZM10.4426 10.6594C10.2692 10.4415 10.191 10.211 10.2101 9.97428C10.2359 9.65337 10.4417 9.34455 10.7895 9.10449C10.958 8.98821 11.1518 8.8959 11.3604 8.82921V11.2552C10.9796 11.1341 10.6561 10.9278 10.4426 10.6594ZM13.7796 14.1034C13.7539 14.4243 13.5481 14.7331 13.2002 14.9732C13.0168 15.0999 12.8031 15.1983 12.5731 15.2658V12.8054C12.9783 12.9235 13.3232 13.1367 13.5471 13.4182C13.7203 13.6362 13.7986 13.8669 13.7796 14.1034Z",
-                fill: _color
+                fill: "currentColor"
             })
         ]
     });

package/dist/web/HoneyPotIcon.d.ts

@@ -1,7 +1,7 @@
 import { type IconColor } from '../core';
 import { type IconProps } from './types';
 declare const HoneyPotIcon: {
-    <T extends string = IconColor>({ size, width, height, color, ...props }: IconProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends string = IconColor>({ size, width, height, className, color, ...props }: IconProps<T>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default HoneyPotIcon;

package/dist/web/HoneyPotIcon.js

@@ -1,18 +1,18 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { isThemeColor } from "../core/index.js";
-import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
-const HoneyPotIcon_HoneyPotIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const HoneyPotIcon_HoneyPotIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M17.9551 3.53711C18.4765 3.53735 18.8984 3.95892 18.8984 4.48047V5.85156C18.8984 6.37329 18.4739 6.79468 17.9551 6.79492H17.6016V7.00488C19.2485 7.51104 20.4492 9.04666 20.4492 10.8613V15.4453C20.4492 16.9058 19.7086 18.5927 18.4805 19.9629C17.1979 21.3921 15.6261 22.2246 14.1641 22.2246H9.79297C8.33088 22.2246 6.75948 21.3915 5.47461 19.96C4.24655 18.5922 3.50599 16.9061 3.50586 15.4434V10.8613C3.50586 9.05937 4.68922 7.53157 6.31836 7.01465V6.79492H5.96875C5.44712 6.79492 5.02539 6.3732 5.02539 5.85156V4.48047C5.02539 3.95883 5.44712 3.53711 5.96875 3.53711H17.9551ZM7.49512 8.15039C6.79119 8.16027 6.13027 8.43921 5.62598 8.94336C5.11263 9.45671 4.83013 10.1375 4.83008 10.8584V15.4434L4.83789 15.6543C4.87067 16.1552 5.01706 16.7081 5.27148 17.2695C5.55764 17.9018 5.96906 18.5264 6.46191 19.0771C7.49432 20.2278 8.74211 20.9004 9.79297 20.9004H14.1641C15.2149 20.9004 16.4627 20.2278 17.4951 19.0771C17.988 18.5264 18.3994 17.9018 18.6855 17.2695L18.7871 17.0293C18.9779 16.5508 19.0907 16.0835 19.1191 15.6543L19.127 15.4434V10.8613C19.127 10.1404 18.8445 9.45969 18.3311 8.94629C17.8817 8.49689 17.308 8.2251 16.6904 8.16406L16.4238 8.15039H7.49512ZM9.90039 11.6758C10.1379 11.6758 10.3561 11.8031 10.4746 12.0068L11.3096 13.457H12.6104L13.4453 12.0068C13.5639 11.8028 13.7831 11.6758 14.0205 11.6758H16.0801C16.3176 11.6758 16.5358 11.8031 16.6543 12.0068L17.6855 13.7979C17.8039 14.002 17.804 14.2528 17.6855 14.457L16.6543 16.248V16.249C16.5358 16.4526 16.3175 16.5791 16.0801 16.5791H14.4072L13.5723 18.0293V18.0303C13.4537 18.2338 13.2355 18.3604 12.998 18.3604H10.9385C10.7011 18.3604 10.4819 18.2334 10.3633 18.0293L9.52832 16.5791H7.84082C7.60345 16.5791 7.38421 16.4521 7.26562 16.248L6.23438 14.457C6.1162 14.253 6.11629 14.0019 6.23438 13.7979L7.26562 12.0068C7.38421 11.8028 7.60345 11.6758 7.84082 11.6758H9.90039ZM10.6689 15.9072L11.3203 17.0361H12.6143L13.2559 15.9199L12.5996 14.7793H11.3203L10.6689 15.9072ZM7.57129 14.126L8.22266 15.2549H9.5166L10.166 14.126L9.5166 12.998H8.22266L7.57129 14.126ZM13.7588 14.1133L14.417 15.2549H15.6982L16.3486 14.126L15.6982 12.998H14.4043L13.7588 14.1133ZM7.64258 6.79688H16.2773V6.79492H7.64258V6.79688ZM6.34961 5.4707H17.5742V4.86133H6.34961V5.4707Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/ImageFallbackIcon.d.ts

@@ -1,7 +1,7 @@
 import { type IconColor } from '../core';
 import { type IconProps } from './types';
 declare const ImageFallbackIcon: {
-    <T extends string = IconColor>({ size, width, height, color, ...props }: IconProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends string = IconColor>({ size, width, height, className, color, ...props }: IconProps<T>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default ImageFallbackIcon;

package/dist/web/ImageFallbackIcon.js

@@ -1,19 +1,19 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { isThemeColor } from "../core/index.js";
-import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
-const ImageFallbackIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const ImageFallbackIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M13.1187 15.032C13.171 14.9797 13.2128 14.917 13.2337 14.8438C13.3696 14.5929 13.3278 14.2792 13.1187 14.0701L8.39301 9.3444L13.0769 4.66052C13.3487 4.38868 13.3487 3.97048 13.0769 3.69865C12.941 3.56273 12.7737 3.5 12.6064 3.5H5.46558C4.02278 3.5 2.85181 4.68143 2.85181 6.11378V17.8758C2.85181 19.3186 4.03323 20.4895 5.46558 20.4895H7.4416C7.62979 20.4895 7.79707 20.4268 7.92253 20.2909L9.02032 19.1827L13.0769 15.1052C13.0978 15.0843 13.0978 15.0633 13.1187 15.032ZM7.09658 19.1931H5.46558C4.74418 19.1931 4.15869 18.6076 4.15869 17.8862V6.12423C4.15869 5.40283 4.74418 4.81734 5.46558 4.81734H11.0068L6.96066 8.85301C6.75156 9.06212 6.70974 9.37577 6.84566 9.62669C6.87702 9.68942 6.90839 9.76261 6.96066 9.81488C6.99203 9.84625 6.99203 9.86716 7.01294 9.89852L11.7073 14.5929L7.09658 19.1931ZM18.5345 3.51045H16.5166C16.3284 3.51045 16.1612 3.57319 16.0357 3.7091L14.9275 4.81734L10.8813 8.85301C10.5468 9.21894 10.6095 9.53259 10.9336 9.88807L15.6279 14.5824L10.8813 19.3395C10.6199 19.6009 10.6199 20.0295 10.8813 20.3014C11.0172 20.4373 11.195 20.5 11.3623 20.5H18.5345C19.9773 20.5 21.1482 19.3186 21.1482 17.8862V6.12423C21.1482 4.68143 19.9773 3.51045 18.5345 3.51045ZM19.8414 17.8862C19.8414 18.6076 19.2559 19.1931 18.5345 19.1931H12.941L16.9976 15.1156C17.3112 14.8124 17.3008 14.3524 17.0498 14.0806L12.3137 9.3444L16.8512 4.80689H18.5345C19.2559 4.80689 19.8414 5.39237 19.8414 6.11378V17.8862Z",
-            fill: _color,
-            stroke: _color,
+            fill: "currentColor",
+            stroke: "currentColor",
             strokeWidth: 0.203295
         })
     });

package/dist/web/ImportExportIcon.d.ts

@@ -1,7 +1,7 @@
 import { type IconColor } from '../core';
 import { type IconProps } from './types';
 declare const ImportExportIcon: {
-    <T extends string = IconColor>({ size, width, height, color, ...props }: IconProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends string = IconColor>({ size, width, height, className, color, ...props }: IconProps<T>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default ImportExportIcon;

package/dist/web/ImportExportIcon.js

@@ -1,23 +1,23 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
-import { isThemeColor } from "../core/index.js";
-import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
-const ImportExportIcon_ImportExportIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const ImportExportIcon_ImportExportIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsxs("svg", {
         width: width,
         height: height,
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,
         children: [
             /*#__PURE__*/ jsx("path", {
                 d: "M6.56201 7.10596V4.93018C6.56214 3.8039 7.41816 2.8783 8.51514 2.76709L8.73682 2.75537H18.5259L18.7476 2.76709C19.7716 2.87091 20.5851 3.68444 20.689 4.7085L20.7007 4.93018V14.7192C20.7006 15.9204 19.7271 16.8939 18.5259 16.894H17.438V19.0698C17.4379 20.1961 16.5818 21.1216 15.4849 21.2329L15.2632 21.2446H5.47412L5.25244 21.2329C4.22839 21.1291 3.41486 20.3156 3.31104 19.2915L3.29932 19.0698V9.28076C3.29951 8.07957 4.27289 7.10596 5.47412 7.10596H6.56201ZM16.2271 10.4644C16.3955 10.4644 16.5571 10.5309 16.6763 10.6499C16.7955 10.7692 16.8628 10.9314 16.8628 11.1001C16.8628 11.2687 16.7955 11.4301 16.6763 11.5493L10.8726 17.353L13.8813 17.146C14.0477 17.1637 14.2003 17.246 14.3062 17.3755C14.4121 17.5051 14.4626 17.6717 14.4468 17.8384C14.4309 18.0049 14.3505 18.1588 14.2222 18.2661C14.0938 18.3735 13.928 18.4255 13.7612 18.4116H13.7603L9.42725 18.4937C9.27345 18.4838 9.12771 18.4187 9.01807 18.3091C8.9084 18.1994 8.84235 18.0538 8.83252 17.8999L8.94287 13.7896V13.7886C8.92902 13.6218 8.98104 13.456 9.08838 13.3276C9.19568 13.1994 9.34965 13.1189 9.51611 13.103C9.68277 13.0872 9.84939 13.1377 9.979 13.2437C10.1085 13.3495 10.1907 13.5021 10.2085 13.6685L9.97412 16.4536L15.7769 10.6499C15.8961 10.5306 16.0584 10.4644 16.2271 10.4644ZM14.2925 5.18408C14.4462 5.19611 14.5907 5.26429 14.6987 5.37549C14.8067 5.48662 14.8707 5.63279 14.8784 5.78662L14.7095 9.896C14.721 10.0629 14.6662 10.2281 14.5571 10.355C14.4479 10.4818 14.2924 10.5603 14.1255 10.5737C13.9587 10.5871 13.7936 10.534 13.6655 10.4263C13.5376 10.3186 13.4573 10.1651 13.4419 9.99854L13.7163 7.21631L7.83057 12.937C7.70963 13.0545 7.54701 13.1191 7.37842 13.1167C7.2098 13.1143 7.04868 13.0452 6.93115 12.9243C6.81373 12.8034 6.74914 12.6407 6.75146 12.4722C6.75387 12.3036 6.82305 12.1424 6.94385 12.0249L12.8296 6.30518L9.81885 6.46924C9.65283 6.44908 9.50096 6.36391 9.39697 6.23291C9.29319 6.10191 9.24508 5.93521 9.26318 5.76904C9.28135 5.60263 9.36471 5.4498 9.49463 5.34424C9.62453 5.23876 9.79098 5.18832 9.95752 5.20459L14.2925 5.18408ZM7.64893 8.19385H5.47412C4.87356 8.19385 4.38642 8.68025 4.38623 9.28076V19.0698C4.38628 19.6705 4.87348 20.1577 5.47412 20.1577H15.2632C15.8636 20.1575 16.35 19.6703 16.3501 19.0698V15.8071H18.5259C19.1264 15.807 19.6127 15.3197 19.6128 14.7192V4.93018C19.6126 4.3297 19.1264 3.84339 18.5259 3.84326H8.73682C8.13633 3.84338 7.65004 4.32969 7.6499 4.93018V7.10596H7.64893V8.19385Z",
-                fill: _color
+                fill: "currentColor"
             }),
             /*#__PURE__*/ jsx("path", {
                 d: "M6.56201 7.10596V7.20596H6.66201V7.10596H6.56201ZM6.56201 4.93018L6.46201 4.93016V4.93018H6.56201ZM8.51514 2.76709L8.50985 2.66711L8.50505 2.6676L8.51514 2.76709ZM8.73682 2.75537V2.65523L8.73154 2.65551L8.73682 2.75537ZM18.5259 2.75537L18.5312 2.65537H18.5259V2.75537ZM18.7476 2.76709L18.7577 2.66748L18.7528 2.66723L18.7476 2.76709ZM20.689 4.7085L20.7889 4.70321L20.7885 4.69841L20.689 4.7085ZM20.7007 4.93018H20.8008L20.8005 4.9249L20.7007 4.93018ZM20.7007 14.7192L20.8007 14.7192V14.7192H20.7007ZM18.5259 16.894V16.994H18.5259L18.5259 16.894ZM17.438 16.894V16.794H17.338V16.894H17.438ZM17.438 19.0698L17.538 19.0698V19.0698H17.438ZM15.4849 21.2329L15.4901 21.3329L15.495 21.3324L15.4849 21.2329ZM15.2632 21.2446V21.3448L15.2685 21.3445L15.2632 21.2446ZM5.47412 21.2446L5.46883 21.3446H5.47412V21.2446ZM5.25244 21.2329L5.24234 21.3325L5.24716 21.3328L5.25244 21.2329ZM3.31104 19.2915L3.21106 19.2968L3.21155 19.3016L3.31104 19.2915ZM3.29932 19.0698H3.19918L3.19946 19.0751L3.29932 19.0698ZM3.29932 9.28076L3.19932 9.28075V9.28076H3.29932ZM5.47412 7.10596V7.00596V7.10596ZM16.2271 10.4644L16.2271 10.3644H16.2271V10.4644ZM16.6763 10.6499L16.747 10.5792L16.7469 10.5791L16.6763 10.6499ZM16.8628 11.1001L16.9628 11.1001V11.1001H16.8628ZM10.8726 17.353L10.8018 17.2823L10.613 17.4711L10.8794 17.4528L10.8726 17.353ZM13.8813 17.146L13.892 17.0466L13.8832 17.0456L13.8745 17.0462L13.8813 17.146ZM14.3062 17.3755L14.3836 17.3122L14.3836 17.3122L14.3062 17.3755ZM14.4468 17.8384L14.5463 17.8479L14.5463 17.8478L14.4468 17.8384ZM14.2222 18.2661L14.2863 18.3428L14.2863 18.3428L14.2222 18.2661ZM13.7612 18.4116L13.7696 18.3116H13.7612V18.4116ZM13.7603 18.4116V18.3116L13.7584 18.3116L13.7603 18.4116ZM9.42725 18.4937L9.42085 18.5938L9.42914 18.5936L9.42725 18.4937ZM9.01807 18.3091L8.94736 18.3798L8.94738 18.3798L9.01807 18.3091ZM8.83252 17.8999L8.73214 17.8972L8.73272 17.9063L8.83252 17.8999ZM8.94287 13.7896L9.04287 13.7922V13.7896H8.94287ZM8.94287 13.7886H9.04322L9.04253 13.7803L8.94287 13.7886ZM9.08838 13.3276L9.01168 13.2635L9.01167 13.2635L9.08838 13.3276ZM9.51611 13.103L9.50668 13.0035L9.5066 13.0035L9.51611 13.103ZM9.979 13.2437L10.0423 13.1662L10.0423 13.1662L9.979 13.2437ZM10.2085 13.6685L10.3081 13.6768L10.3089 13.6673L10.3079 13.6578L10.2085 13.6685ZM9.97412 16.4536L9.87447 16.4452L9.85155 16.7176L10.0448 16.5243L9.97412 16.4536ZM15.7769 10.6499L15.7061 10.5792L15.7061 10.5792L15.7769 10.6499ZM14.2925 5.18408L14.3003 5.08404L14.292 5.08408L14.2925 5.18408ZM14.6987 5.37549L14.7705 5.3058L14.7704 5.30579L14.6987 5.37549ZM14.8784 5.78662L14.9787 5.79075L14.9783 5.78162L14.8784 5.78662ZM14.7095 9.896L14.6089 9.89186L14.6097 9.90288L14.7095 9.896ZM14.5571 10.355L14.6329 10.4202L14.6329 10.4202L14.5571 10.355ZM14.1255 10.5737L14.1335 10.6734L14.1335 10.6734L14.1255 10.5737ZM13.6655 10.4263L13.6011 10.5028L13.6011 10.5028L13.6655 10.4263ZM13.4419 9.99854L13.3424 9.98872L13.3414 9.99823L13.3423 10.0077L13.4419 9.99854ZM13.7163 7.21631L13.8158 7.22612L13.8427 6.95405L13.6466 7.1446L13.7163 7.21631ZM7.83057 12.937L7.90025 13.0087L7.90026 13.0087L7.83057 12.937ZM7.37842 13.1167L7.37698 13.2167H7.37699L7.37842 13.1167ZM6.93115 12.9243L6.85943 12.994L6.85944 12.994L6.93115 12.9243ZM6.75146 12.4722L6.65147 12.4707L6.65147 12.4708L6.75146 12.4722ZM6.94385 12.0249L6.87416 11.9532L6.87411 11.9532L6.94385 12.0249ZM12.8296 6.30518L12.8993 6.37689L13.0908 6.19079L12.8241 6.20532L12.8296 6.30518ZM9.81885 6.46924L9.80679 6.56851L9.81552 6.56957L9.82429 6.56909L9.81885 6.46924ZM9.39697 6.23291L9.31859 6.29501L9.31865 6.29508L9.39697 6.23291ZM9.26318 5.76904L9.16377 5.75819L9.16377 5.75821L9.26318 5.76904ZM9.49463 5.34424L9.43159 5.26661L9.43157 5.26663L9.49463 5.34424ZM9.95752 5.20459L9.94774 5.30464L9.95799 5.30459L9.95752 5.20459ZM7.64893 8.19385V8.29385H7.74893V8.19385H7.64893ZM5.47412 8.19385V8.09385V8.19385ZM4.38623 9.28076L4.28623 9.28073V9.28076H4.38623ZM4.38623 19.0698H4.28623V19.0698L4.38623 19.0698ZM15.2632 20.1577V20.2577H15.2632L15.2632 20.1577ZM16.3501 19.0698L16.4501 19.0698V19.0698H16.3501ZM16.3501 15.8071V15.7071H16.2501V15.8071H16.3501ZM18.5259 15.8071V15.9071H18.5259L18.5259 15.8071ZM19.6128 14.7192L19.7128 14.7193V14.7192H19.6128ZM19.6128 4.93018H19.7128V4.93015L19.6128 4.93018ZM18.5259 3.84326L18.5259 3.74326H18.5259V3.84326ZM8.73682 3.84326V3.74326H8.7368L8.73682 3.84326ZM7.6499 4.93018L7.5499 4.93015V4.93018H7.6499ZM7.6499 7.10596V7.20596H7.7499V7.10596H7.6499ZM7.64893 7.10596V7.00596H7.54893V7.10596H7.64893ZM6.56201 7.10596H6.66201V4.93018H6.56201H6.46201V7.10596H6.56201ZM6.56201 4.93018L6.66201 4.93019C6.66214 3.85578 7.47875 2.97267 8.52522 2.86658L8.51514 2.76709L8.50505 2.6676C7.35758 2.78393 6.46215 3.75201 6.46201 4.93016L6.56201 4.93018ZM8.51514 2.76709L8.52042 2.86695L8.7421 2.85523L8.73682 2.75537L8.73154 2.65551L8.50986 2.66723L8.51514 2.76709ZM8.73682 2.75537V2.85537H18.5259V2.75537V2.65537H8.73682V2.75537ZM18.5259 2.75537L18.5206 2.85523L18.7423 2.86695L18.7476 2.76709L18.7528 2.66723L18.5312 2.65551L18.5259 2.75537ZM18.7476 2.76709L18.7375 2.86658C19.7143 2.96561 20.4904 3.74178 20.5895 4.71858L20.689 4.7085L20.7885 4.69841C20.6798 3.62711 19.8289 2.77621 18.7576 2.6676L18.7476 2.76709ZM20.689 4.7085L20.5891 4.71378L20.6008 4.93545L20.7007 4.93018L20.8005 4.9249L20.7888 4.70322L20.689 4.7085ZM20.7007 4.93018H20.6007V14.7192H20.7007H20.8007V4.93018H20.7007ZM20.7007 14.7192L20.6007 14.7192C20.6006 15.8652 19.6718 16.7939 18.5259 16.794L18.5259 16.894L18.5259 16.994C19.7823 16.9939 20.8006 15.9757 20.8007 14.7192L20.7007 14.7192ZM18.5259 16.894V16.794H17.438V16.894V16.994H18.5259V16.894ZM17.438 16.894H17.338V19.0698H17.438H17.538V16.894H17.438ZM17.438 19.0698L17.338 19.0698C17.3379 20.1442 16.5212 21.0272 15.4748 21.1334L15.4849 21.2329L15.495 21.3324C16.6424 21.216 17.5379 20.248 17.538 19.0698L17.438 19.0698ZM15.4849 21.2329L15.4796 21.133L15.2579 21.1448L15.2632 21.2446L15.2685 21.3445L15.4901 21.3328L15.4849 21.2329ZM15.2632 21.2446V21.1446H5.47412V21.2446V21.3446H15.2632V21.2446ZM5.47412 21.2446L5.4794 21.1448L5.25772 21.133L5.25244 21.2329L5.24716 21.3328L5.46884 21.3445L5.47412 21.2446ZM5.25244 21.2329L5.26253 21.1334C4.28572 21.0344 3.50956 20.2582 3.41053 19.2814L3.31104 19.2915L3.21155 19.3016C3.32016 20.3729 4.17105 21.2238 5.24235 21.3324L5.25244 21.2329ZM3.31104 19.2915L3.4109 19.2862L3.39918 19.0645L3.29932 19.0698L3.19946 19.0751L3.21117 19.2968L3.31104 19.2915ZM3.29932 19.0698H3.39932V9.28076H3.29932H3.19932V19.0698H3.29932ZM3.29932 9.28076L3.39932 9.28078C3.3995 8.13479 4.32813 7.20596 5.47412 7.20596V7.10596V7.00596C4.21764 7.00596 3.19952 8.02436 3.19932 9.28075L3.29932 9.28076ZM5.47412 7.10596V7.20596H6.56201V7.10596V7.00596H5.47412V7.10596ZM16.2271 10.4644L16.227 10.5644C16.3691 10.5644 16.5053 10.6205 16.6056 10.7207L16.6763 10.6499L16.7469 10.5791C16.6089 10.4413 16.4219 10.3644 16.2271 10.3644L16.2271 10.4644ZM16.6763 10.6499L16.6056 10.7206C16.7061 10.8211 16.7628 10.958 16.7628 11.1001H16.8628H16.9628C16.9628 10.9049 16.885 10.7172 16.747 10.5792L16.6763 10.6499ZM16.8628 11.1001L16.7628 11.1001C16.7628 11.242 16.7061 11.378 16.6056 11.4786L16.6763 11.5493L16.747 11.62C16.8848 11.4822 16.9627 11.2954 16.9628 11.1001L16.8628 11.1001ZM16.6763 11.5493L16.6056 11.4786L10.8018 17.2823L10.8726 17.353L10.9433 17.4237L16.747 11.62L16.6763 11.5493ZM10.8726 17.353L10.8794 17.4528L13.8882 17.2458L13.8813 17.146L13.8745 17.0462L10.8657 17.2533L10.8726 17.353ZM13.8813 17.146L13.8707 17.2454C14.011 17.2604 14.1396 17.3298 14.2287 17.4388L14.3062 17.3755L14.3836 17.3122C14.261 17.1623 14.0843 17.0671 13.892 17.0466L13.8813 17.146ZM14.3062 17.3755L14.2287 17.4388C14.3179 17.5479 14.3605 17.6884 14.3472 17.8289L14.4468 17.8384L14.5463 17.8478C14.5646 17.655 14.5062 17.4623 14.3836 17.3122L14.3062 17.3755ZM14.4468 17.8384L14.3472 17.8289C14.3338 17.9694 14.266 18.0991 14.158 18.1894L14.2222 18.2661L14.2863 18.3428C14.435 18.2185 14.528 18.0403 14.5463 17.8479L14.4468 17.8384ZM14.2222 18.2661L14.158 18.1894C14.05 18.2798 13.9103 18.3237 13.7695 18.312L13.7612 18.4116L13.7529 18.5113C13.9457 18.5273 14.1376 18.4672 14.2863 18.3428L14.2222 18.2661ZM13.7612 18.4116V18.3116H13.7603V18.4116V18.5116H13.7612V18.4116ZM13.7603 18.4116L13.7584 18.3116L9.42535 18.3937L9.42725 18.4937L9.42914 18.5936L13.7621 18.5116L13.7603 18.4116ZM9.42725 18.4937L9.43362 18.3939C9.30386 18.3856 9.18105 18.3306 9.08876 18.2384L9.01807 18.3091L8.94738 18.3798C9.07437 18.5067 9.24304 18.5821 9.42087 18.5934L9.42725 18.4937ZM9.01807 18.3091L9.08878 18.2384C8.99619 18.1458 8.94058 18.023 8.93232 17.8935L8.83252 17.8999L8.73272 17.9063C8.74411 18.0846 8.82061 18.253 8.94736 18.3798L9.01807 18.3091ZM8.83252 17.8999L8.93248 17.9026L9.04284 13.7922L8.94287 13.7896L8.84291 13.7869L8.73256 17.8972L8.83252 17.8999ZM8.94287 13.7896H9.04287V13.7886H8.94287H8.84287V13.7896H8.94287ZM8.94287 13.7886L9.04253 13.7803C9.03084 13.6396 9.07476 13.4998 9.16509 13.3918L9.08838 13.3276L9.01167 13.2635C8.88731 13.4122 8.8272 13.6041 8.84321 13.7969L8.94287 13.7886ZM9.08838 13.3276L9.16508 13.3918C9.25535 13.2839 9.38508 13.216 9.52563 13.2026L9.51611 13.103L9.5066 13.0035C9.31421 13.0219 9.13601 13.1148 9.01168 13.2635L9.08838 13.3276ZM9.51611 13.103L9.52555 13.2026C9.66609 13.1893 9.80656 13.2319 9.91572 13.3211L9.979 13.2437L10.0423 13.1662C9.89222 13.0436 9.69945 12.9852 9.50668 13.0035L9.51611 13.103ZM9.979 13.2437L9.91571 13.3211C10.0248 13.4102 10.0941 13.5388 10.1091 13.6791L10.2085 13.6685L10.3079 13.6578C10.2874 13.4655 10.1923 13.2888 10.0423 13.1662L9.979 13.2437ZM10.2085 13.6685L10.1088 13.6601L9.87447 16.4452L9.97412 16.4536L10.0738 16.462L10.3081 13.6768L10.2085 13.6685ZM9.97412 16.4536L10.0448 16.5243L15.8476 10.7206L15.7769 10.6499L15.7061 10.5792L9.9034 16.3829L9.97412 16.4536ZM15.7769 10.6499L15.8476 10.7206C15.9478 10.6204 16.0845 10.5644 16.2271 10.5644V10.4644V10.3644C16.0323 10.3644 15.8444 10.4409 15.7061 10.5792L15.7769 10.6499ZM14.2925 5.18408L14.2847 5.28378C14.4139 5.29389 14.5357 5.35126 14.627 5.44518L14.6987 5.37549L14.7704 5.30579C14.6456 5.17731 14.4784 5.09833 14.3003 5.08439L14.2925 5.18408ZM14.6987 5.37549L14.627 5.44517C14.7182 5.53906 14.7721 5.6623 14.7785 5.79162L14.8784 5.78662L14.9783 5.78162C14.9694 5.60328 14.8952 5.43418 14.7705 5.3058L14.6987 5.37549ZM14.8784 5.78662L14.7785 5.78251L14.6096 9.89189L14.7095 9.896L14.8094 9.9001L14.9783 5.79073L14.8784 5.78662ZM14.7095 9.896L14.6097 9.90288C14.6194 10.0436 14.5732 10.1829 14.4813 10.2898L14.5571 10.355L14.6329 10.4202C14.7592 10.2734 14.8226 10.0822 14.8092 9.88911L14.7095 9.896ZM14.5571 10.355L14.4813 10.2897C14.3894 10.3965 14.2583 10.4627 14.1175 10.4741L14.1255 10.5737L14.1335 10.6734C14.3264 10.6579 14.5064 10.5672 14.6329 10.4202L14.5571 10.355ZM14.1255 10.5737L14.1175 10.474C13.9771 10.4853 13.8379 10.4406 13.7299 10.3498L13.6655 10.4263L13.6011 10.5028C13.7492 10.6274 13.9404 10.6889 14.1335 10.6734L14.1255 10.5737ZM13.6655 10.4263L13.7299 10.3498C13.6221 10.259 13.5544 10.1297 13.5415 9.98933L13.4419 9.99854L13.3423 10.0077C13.3601 10.2005 13.4531 10.3782 13.6011 10.5028L13.6655 10.4263ZM13.4419 9.99854L13.5414 10.0084L13.8158 7.22612L13.7163 7.21631L13.6168 7.20649L13.3424 9.98872L13.4419 9.99854ZM13.7163 7.21631L13.6466 7.1446L7.76087 12.8653L7.83057 12.937L7.90026 13.0087L13.786 7.28802L13.7163 7.21631ZM7.83057 12.937L7.76089 12.8653C7.65898 12.9643 7.52193 13.0187 7.37984 13.0167L7.37842 13.1167L7.37699 13.2167C7.57208 13.2195 7.76029 13.1447 7.90025 13.0087L7.83057 12.937ZM7.37842 13.1167L7.37985 13.0167C7.23758 13.0147 7.1018 12.9564 7.00286 12.8546L6.93115 12.9243L6.85944 12.994C6.99557 13.1341 7.18202 13.2139 7.37698 13.2167L7.37842 13.1167ZM6.93115 12.9243L7.00288 12.8546C6.90397 12.7528 6.84949 12.6156 6.85146 12.4735L6.75146 12.4722L6.65147 12.4708C6.64878 12.6657 6.7235 12.8541 6.85943 12.994L6.93115 12.9243ZM6.75146 12.4722L6.85145 12.4736C6.85348 12.3315 6.91185 12.1955 7.01358 12.0966L6.94385 12.0249L6.87411 11.9532C6.73425 12.0893 6.65425 12.2758 6.65147 12.4707L6.75146 12.4722ZM6.94385 12.0249L7.01354 12.0966L12.8993 6.37689L12.8296 6.30518L12.7599 6.23346L6.87416 11.9532L6.94385 12.0249ZM12.8296 6.30518L12.8241 6.20532L9.81341 6.36939L9.81885 6.46924L9.82429 6.56909L12.835 6.40503L12.8296 6.30518ZM9.81885 6.46924L9.8309 6.36997C9.69105 6.35298 9.56297 6.28118 9.4753 6.17074L9.39697 6.23291L9.31865 6.29508C9.43895 6.44663 9.61461 6.54517 9.80679 6.56851L9.81885 6.46924ZM9.39697 6.23291L9.47536 6.17081C9.38788 6.0604 9.34734 5.9199 9.3626 5.77988L9.26318 5.76904L9.16377 5.75821C9.14282 5.95052 9.19849 6.14342 9.31859 6.29501L9.39697 6.23291ZM9.26318 5.76904L9.36259 5.7799C9.3779 5.63971 9.44816 5.51085 9.55769 5.42185L9.49463 5.34424L9.43157 5.26663C9.28126 5.38876 9.18481 5.56555 9.16377 5.75819L9.26318 5.76904ZM9.49463 5.34424L9.55766 5.42187C9.66725 5.33289 9.80759 5.29042 9.9478 5.30412L9.95752 5.20459L9.96724 5.10506C9.77436 5.08622 9.58181 5.14464 9.43159 5.26661L9.49463 5.34424ZM9.95752 5.20459L9.95799 5.30459L14.293 5.28408L14.2925 5.18408L14.292 5.08408L9.95705 5.10459L9.95752 5.20459ZM7.64893 8.19385V8.09385H5.47412V8.19385V8.29385H7.64893V8.19385ZM5.47412 8.19385V8.09385C4.81842 8.09385 4.28644 8.62493 4.28623 9.28073L4.38623 9.28076L4.48623 9.28079C4.48641 8.73557 4.92871 8.29385 5.47412 8.29385V8.19385ZM4.38623 9.28076H4.28623V19.0698H4.38623H4.48623V9.28076H4.38623ZM4.38623 19.0698L4.28623 19.0698C4.28629 19.7257 4.81824 20.2577 5.47412 20.2577V20.1577V20.0577C4.92871 20.0577 4.48628 19.6152 4.48623 19.0698L4.38623 19.0698ZM5.47412 20.1577V20.2577H15.2632V20.1577V20.0577H5.47412V20.1577ZM15.2632 20.1577L15.2632 20.2577C15.9189 20.2574 16.45 19.7254 16.4501 19.0698L16.3501 19.0698L16.2501 19.0698C16.25 19.6152 15.8083 20.0575 15.2631 20.0577L15.2632 20.1577ZM16.3501 19.0698H16.4501V15.8071H16.3501H16.2501V19.0698H16.3501ZM16.3501 15.8071V15.9071H18.5259V15.8071V15.7071H16.3501V15.8071ZM18.5259 15.8071L18.5259 15.9071C19.1817 15.907 19.7127 15.3749 19.7128 14.7193L19.6128 14.7192L19.5128 14.7192C19.5127 15.2646 19.071 15.707 18.5259 15.7071L18.5259 15.8071ZM19.6128 14.7192H19.7128V4.93018H19.6128H19.5128V14.7192H19.6128ZM19.6128 4.93018L19.7128 4.93015C19.7126 4.27447 19.1816 3.7434 18.5259 3.74326L18.5259 3.84326L18.5259 3.94326C19.0711 3.94338 19.5127 4.38493 19.5128 4.9302L19.6128 4.93018ZM18.5259 3.84326V3.74326H8.73682V3.84326V3.94326H18.5259V3.84326ZM8.73682 3.84326L8.7368 3.74326C8.08109 3.74339 7.55006 4.27446 7.5499 4.93015L7.6499 4.93018L7.7499 4.9302C7.75003 4.38492 8.19157 3.94337 8.73684 3.94326L8.73682 3.84326ZM7.6499 4.93018H7.5499V7.10596H7.6499H7.7499V4.93018H7.6499ZM7.6499 7.10596V7.00596H7.64893V7.10596V7.20596H7.6499V7.10596ZM7.64893 7.10596H7.54893V8.19385H7.64893H7.74893V7.10596H7.64893Z",
-                fill: _color
+                fill: "currentColor"
             })
         ]
     });

package/dist/web/InstagramIcon.d.ts

@@ -1,7 +1,7 @@
 import { type IconColor } from '../core';
 import { type IconProps } from './types';
 declare const InstagramIcon: {
-    <T extends string = IconColor>({ size, width, height, color, ...props }: IconProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends string = IconColor>({ size, width, height, className, color, ...props }: IconProps<T>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default InstagramIcon;

package/dist/web/InstagramIcon.js

@@ -1,18 +1,18 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { isThemeColor } from "../core/index.js";
-import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
-const InstagramIcon_InstagramIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const InstagramIcon_InstagramIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M15.2812 3.19995C18.3268 3.19996 20.8378 5.65485 20.8379 8.68628V15.2751C20.8379 18.3069 18.3269 20.7996 15.2812 20.7996H8.66211C5.61665 20.7994 3.16211 18.3068 3.16211 15.2751V8.68628C3.16225 5.65494 5.61673 3.2001 8.66211 3.19995H15.2812ZM8.66211 4.82788C6.53333 4.82804 4.79018 6.56749 4.79004 8.68628V15.2751C4.79004 17.3942 6.53324 19.1344 8.66211 19.1345H15.2812C17.4101 19.1345 19.1729 17.3943 19.1729 15.2751V8.68628C19.1727 6.56739 17.41 4.82789 15.2812 4.82788H8.66211ZM11.9717 7.58862C14.4085 7.58862 16.3847 9.5553 16.3848 11.9812C16.3848 14.4068 14.4085 16.3738 11.9717 16.3738C9.53493 16.3737 7.55957 14.4067 7.55957 11.9812C7.55959 9.55535 9.53494 7.58871 11.9717 7.58862ZM11.9717 9.23608C10.4516 9.23617 9.21389 10.4667 9.21387 11.9812C9.21387 13.4943 10.4516 14.7262 11.9717 14.7263C13.4918 14.7263 14.7295 13.4943 14.7295 11.9812C14.7295 10.4667 13.4918 9.23608 11.9717 9.23608ZM16.7158 6.67358C17.0401 6.67382 17.3037 6.93647 17.3037 7.25952C17.3034 7.58239 17.0399 7.84425 16.7158 7.84448C16.3912 7.84448 16.1272 7.58253 16.127 7.25952C16.127 6.93632 16.391 6.67358 16.7158 6.67358Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/InternetIcon.d.ts

@@ -1,7 +1,7 @@
 import { type IconColor } from '../core';
 import { type IconProps } from './types';
 declare const InternetIcon: {
-    <T extends string = IconColor>({ size, width, height, color, ...props }: IconProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends string = IconColor>({ size, width, height, className, color, ...props }: IconProps<T>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default InternetIcon;

package/dist/web/InternetIcon.js

@@ -1,18 +1,18 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { isThemeColor } from "../core/index.js";
-import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
-const InternetIcon_InternetIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const InternetIcon_InternetIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
+        className: clsx,
         viewBox: "0 0 25 24",
         fill: "none",
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M12.1975 2C17.7205 2 22.1983 6.477 22.1985 12C22.1984 17.523 17.7206 22.001 12.1975 22.001C6.67458 22.0008 2.19762 17.5229 2.19751 12C2.19765 6.47709 6.6746 2.00014 12.1975 2ZM9.44263 12.6709C9.50792 14.9255 9.89944 16.9228 10.4329 18.3623C10.7071 19.1022 11.0149 19.6873 11.3293 20.083C11.6486 20.4847 11.9472 20.6591 12.1975 20.6592C12.4481 20.6592 12.7473 20.4848 13.0667 20.083C13.3811 19.6873 13.6889 19.1022 13.9631 18.3623C14.4966 16.9228 14.8876 14.9255 14.9534 12.6709H9.44263ZM16.2961 12.6709C16.2092 15.8735 15.5117 18.6805 14.4729 20.3555C16.1478 19.8985 17.6508 18.9489 18.7825 17.623C19.9722 16.229 20.6874 14.4948 20.8293 12.6709H16.2961ZM3.56665 12.6709C3.70862 14.4947 4.42289 16.2291 5.61255 17.623C6.74383 18.9485 8.24689 19.8974 9.92114 20.3545C8.88214 18.6792 8.18685 15.8718 8.10083 12.6709H3.56665ZM9.92114 3.64453C8.24678 4.10162 6.7439 5.05144 5.61255 6.37695C4.42273 7.77108 3.7085 9.506 3.56665 11.3301H8.09985C8.18669 8.12746 8.88244 5.3197 9.92114 3.64453ZM12.1975 3.3418C11.9469 3.34192 11.6487 3.51617 11.3293 3.91797C11.0148 4.31375 10.7061 4.89863 10.4319 5.63867C9.89851 7.07827 9.50733 9.0755 9.44165 11.3301H14.9534C14.8886 9.07553 14.4975 7.07827 13.9641 5.63867C13.6899 4.89873 13.3812 4.31375 13.0667 3.91797C12.7472 3.51603 12.4482 3.3418 12.1975 3.3418ZM14.4739 3.64453C15.5134 5.31983 16.2092 8.12817 16.2952 11.3301H20.8293C20.6875 9.50599 19.9723 7.77109 18.7825 6.37695C17.651 5.05144 16.1483 4.10154 14.4739 3.64453Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/InviteIcon.d.ts

@@ -1,7 +1,7 @@
 import { type IconColor } from '../core';
 import { type IconProps } from './types';
 declare const InviteIcon: {
-    <T extends string = IconColor>({ size, width, height, color, ...props }: IconProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends string = IconColor>({ size, width, height, className, color, ...props }: IconProps<T>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default InviteIcon;

package/dist/web/InviteIcon.js

@@ -1,19 +1,19 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { isThemeColor } from "../core/index.js";
-import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
-const InviteIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const InviteIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M20.3997 19.204H18.5987V21.005C18.5987 21.3652 18.3585 21.6053 17.9984 21.6053C17.6382 21.6053 17.3981 21.3651 17.3981 21.005V19.204H15.5971C15.2369 19.204 14.9968 18.9638 14.9968 18.6037C14.9968 18.2435 15.2369 18.0033 15.5971 18.0033H17.3981V16.2024C17.3981 15.8422 17.6382 15.602 17.9984 15.602C18.3586 15.602 18.5987 15.8422 18.5987 16.2024V18.0033H20.3997C20.7599 18.0033 21 18.2435 21 18.6037C21 18.9639 20.7598 19.204 20.3997 19.204ZM14.8865 13.2007H13.926C13.0855 13.9211 11.8849 14.4014 10.6842 14.4014C9.48355 14.4014 8.40296 13.9211 7.44243 13.2007H6.60198C5.28125 13.2007 4.20066 14.2813 4.20066 15.602V18.0033C4.20066 19.3241 5.28125 20.4046 6.60198 20.4046H14.8865V21.6053H6.60198C4.56086 21.6053 3 20.0444 3 18.0033V15.602C3 13.681 4.56086 12 6.48193 12C5.88161 11.0395 5.40134 9.71878 5.40134 8.39805C5.40134 5.03621 7.80266 2.39478 10.8043 2.39478C13.806 2.39478 16.2073 5.03623 16.2073 8.39805C16.2073 9.71878 15.727 11.0395 15.1267 12C16.5675 12.1201 17.8882 13.0806 18.3685 14.4014H17.0477C16.5675 13.681 15.847 13.2007 14.8865 13.2007ZM10.8043 3.59543C8.52303 3.59543 6.60198 5.75662 6.60198 8.39807C6.60198 11.0395 8.52303 13.2007 10.8043 13.2007C13.0855 13.2007 15.0066 11.0395 15.0066 8.39807C15.0066 5.75662 13.0855 3.59543 10.8043 3.59543Z",
-            fill: _color,
-            stroke: _color,
+            fill: "currentColor",
+            stroke: "currentColor",
             strokeWidth: 0.218088
         })
     });

package/dist/web/JackpotIcon.d.ts

@@ -1,7 +1,7 @@
 import { type IconColor } from '../core';
 import { type IconProps } from './types';
 declare const JackpotIcon: {
-    <T extends string = IconColor>({ size, width, height, color, ...props }: IconProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends string = IconColor>({ size, width, height, className, color, ...props }: IconProps<T>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default JackpotIcon;

package/dist/web/JackpotIcon.js

@@ -1,18 +1,18 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { isThemeColor } from "../core/index.js";
-import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
-const JackpotIcon_JackpotIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const JackpotIcon_JackpotIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M11.7078 2.56421C11.9197 2.45181 12.1816 2.47082 12.3767 2.62085L19.4177 8.03589C19.691 8.24612 19.8691 8.55806 19.9119 8.90015L20.9939 17.5603C21.0272 17.8274 20.8842 18.086 20.6404 18.2L12.5437 21.9783C12.1979 22.1394 11.7986 22.1395 11.4529 21.9783L3.3562 18.2C3.11234 18.086 2.97036 17.8274 3.00366 17.5603L4.08569 8.90015C4.12845 8.55806 4.30563 8.24612 4.57886 8.03589L11.6199 2.62085L11.7078 2.56421ZM4.88062 17.5417L11.9773 20.8533C11.9905 20.8594 12.006 20.8594 12.0193 20.8533L19.115 17.5417L14.9724 14.7791L12.0017 17.157L9.0271 14.7771L4.88062 17.5417ZM5.33667 9.02026C5.32622 9.0283 5.31884 9.0404 5.31714 9.05347L4.4021 16.3679L8.71167 13.4949V9.57788L11.3777 7.44507V4.3728L5.33667 9.02026ZM12.6199 7.44116L15.2917 9.57788V13.4988L19.5935 16.3679L18.6794 9.05347C18.6778 9.04055 18.6711 9.0283 18.6609 9.02026L12.6199 4.3728V7.44116ZM9.89429 14.198L12.0017 15.8845L14.1052 14.2009L11.9988 12.7966L9.89429 14.198ZM12.6199 11.7175L14.2986 12.8367V10.0544L12.6199 8.71069V11.7175ZM9.70483 10.0544V12.8328L11.3777 11.7175V8.71558L9.70483 10.0544Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/JoinCommunityIcon.d.ts

@@ -1,7 +1,7 @@
 import { type IconColor } from '../core';
 import { type IconProps } from './types';
 declare const JoinCommunityIcon: {
-    <T extends string = IconColor>({ size, width, height, color, ...props }: IconProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends string = IconColor>({ size, width, height, className, color, ...props }: IconProps<T>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default JoinCommunityIcon;

package/dist/web/JoinCommunityIcon.js

@@ -1,18 +1,18 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { isThemeColor } from "../core/index.js";
-import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
-const JoinCommunityIcon_JoinCommunityIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const JoinCommunityIcon_JoinCommunityIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M18.5 2.5C20.1569 2.5 21.5 3.84315 21.5 5.5V18.5C21.5 20.1569 20.1569 21.5 18.5 21.5H5.5L5.3457 21.4961C3.76055 21.4158 2.5 20.1051 2.5 18.5V5.5C2.5 3.89489 3.76055 2.58421 5.3457 2.50391L5.5 2.5H18.5ZM5.5 3.90039C4.61634 3.90039 3.90039 4.61634 3.90039 5.5V18.5C3.90039 19.3837 4.61634 20.0996 5.5 20.0996H18.5C19.3837 20.0996 20.0996 19.3837 20.0996 18.5V5.5C20.0996 4.61634 19.3837 3.90039 18.5 3.90039H5.5ZM12 13.7998C12.3866 13.7998 12.7002 14.1134 12.7002 14.5V17.5C12.7002 17.8866 12.3866 18.2002 12 18.2002C11.6134 18.2002 11.2998 17.8866 11.2998 17.5V14.5C11.2998 14.1134 11.6134 13.7998 12 13.7998ZM12.0059 5.9209C12.3925 5.9209 12.7061 6.23449 12.7061 6.62109V9.43457L14.6904 7.4502C14.9638 7.17683 15.4073 7.17683 15.6807 7.4502C15.954 7.72356 15.954 8.16706 15.6807 8.44043L13.6924 10.4287H16.5C16.8866 10.4287 17.2002 10.7423 17.2002 11.1289C17.2002 11.5155 16.8866 11.8291 16.5 11.8291H13.7041L15.6816 13.8066C15.9547 14.08 15.9549 14.5236 15.6816 14.7969C15.4084 15.0701 14.9648 15.0699 14.6914 14.7969L12.0078 12.1133L9.31641 14.8047C9.04302 15.0778 8.59944 15.078 8.32617 14.8047C8.0529 14.5314 8.0531 14.0878 8.32617 13.8145L10.3115 11.8291H7.5C7.1134 11.8291 6.79981 11.5155 6.7998 11.1289C6.7998 10.7423 7.1134 10.4287 7.5 10.4287H10.3232L8.32715 8.43262C8.05378 8.15925 8.05378 7.71575 8.32715 7.44238C8.60052 7.16902 9.04402 7.16902 9.31738 7.44238L11.3057 9.43066V6.62109C11.3057 6.23449 11.6193 5.9209 12.0059 5.9209Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/KeyboardIcon.d.ts

@@ -1,7 +1,7 @@
 import { type IconColor } from '../core';
 import { type IconProps } from './types';
 declare const KeyboardIcon: {
-    <T extends string = IconColor>({ size, width, height, color, ...props }: IconProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends string = IconColor>({ size, width, height, className, color, ...props }: IconProps<T>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default KeyboardIcon;

package/dist/web/KeyboardIcon.js

@@ -1,18 +1,18 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { isThemeColor } from "../core/index.js";
-import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
-const KeyboardIcon_KeyboardIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const KeyboardIcon_KeyboardIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M18.898 13.0816H16.6939C16.499 13.0816 16.3122 13.0042 16.1744 12.8664C16.0366 12.7287 15.9592 12.5418 15.9592 12.3469C15.9592 12.1521 16.0366 11.9652 16.1744 11.8274C16.3122 11.6897 16.499 11.6122 16.6939 11.6122H18.1633V8.67347C18.1633 8.47862 18.2407 8.29174 18.3785 8.15396C18.5162 8.01618 18.7031 7.93878 18.898 7.93878C19.0928 7.93878 19.2797 8.01618 19.4175 8.15396C19.5552 8.29174 19.6327 8.47862 19.6327 8.67347V12.3469C19.6327 12.5418 19.5552 12.7287 19.4175 12.8664C19.2797 13.0042 19.0928 13.0816 18.898 13.0816ZM3.46939 5H21.102C21.4917 5 21.8655 5.15481 22.1411 5.43037C22.4166 5.70594 22.5714 6.07968 22.5714 6.46939V18.2245C22.5714 18.6142 22.4166 18.9879 22.1411 19.2635C21.8655 19.5391 21.4917 19.6939 21.102 19.6939H3.46939C3.07968 19.6939 2.70594 19.5391 2.43037 19.2635C2.15481 18.9879 2 18.6142 2 18.2245V6.46939C2 6.07968 2.15481 5.70594 2.43037 5.43037C2.70594 5.15481 3.07968 5 3.46939 5ZM4.20408 6.46939C4.00923 6.46939 3.82236 6.54679 3.68457 6.68457C3.54679 6.82236 3.46939 7.00923 3.46939 7.20408V17.4898C3.46939 17.6846 3.54679 17.8715 3.68457 18.0093C3.82236 18.1471 4.00923 18.2245 4.20408 18.2245H20.3673C20.5622 18.2245 20.7491 18.1471 20.8869 18.0093C21.0246 17.8715 21.102 17.6846 21.102 17.4898V7.20408C21.102 7.00923 21.0246 6.82236 20.8869 6.68457C20.7491 6.54679 20.5622 6.46939 20.3673 6.46939H4.20408ZM5.67347 7.93878H7.14286C7.33771 7.93878 7.52458 8.01618 7.66236 8.15396C7.80015 8.29174 7.87755 8.47862 7.87755 8.67347C7.87755 8.86832 7.80015 9.05519 7.66236 9.19298C7.52458 9.33076 7.33771 9.40816 7.14286 9.40816H5.67347C5.47862 9.40816 5.29174 9.33076 5.15396 9.19298C5.01618 9.05519 4.93878 8.86832 4.93878 8.67347C4.93878 8.47862 5.01618 8.29174 5.15396 8.15396C5.29174 8.01618 5.47862 7.93878 5.67347 7.93878ZM10.0816 7.93878H11.551C11.7459 7.93878 11.9327 8.01618 12.0705 8.15396C12.2083 8.29174 12.2857 8.47862 12.2857 8.67347C12.2857 8.86832 12.2083 9.05519 12.0705 9.19298C11.9327 9.33076 11.7459 9.40816 11.551 9.40816H10.0816C9.88678 9.40816 9.69991 9.33076 9.56213 9.19298C9.42434 9.05519 9.34694 8.86832 9.34694 8.67347C9.34694 8.47862 9.42434 8.29174 9.56213 8.15396C9.69991 8.01618 9.88678 7.93878 10.0816 7.93878ZM14.4898 7.93878H15.9592C16.154 7.93878 16.3409 8.01618 16.4787 8.15396C16.6165 8.29174 16.6939 8.47862 16.6939 8.67347C16.6939 8.86832 16.6165 9.05519 16.4787 9.19298C16.3409 9.33076 16.154 9.40816 15.9592 9.40816H14.4898C14.2949 9.40816 14.1081 9.33076 13.9703 9.19298C13.8325 9.05519 13.7551 8.86832 13.7551 8.67347C13.7551 8.47862 13.8325 8.29174 13.9703 8.15396C14.1081 8.01618 14.2949 7.93878 14.4898 7.93878ZM5.67347 11.6122H6.40816C6.60302 11.6122 6.78989 11.6897 6.92767 11.8274C7.06545 11.9652 7.14286 12.1521 7.14286 12.3469C7.14286 12.5418 7.06545 12.7287 6.92767 12.8664C6.78989 13.0042 6.60302 13.0816 6.40816 13.0816H5.67347C5.47862 13.0816 5.29174 13.0042 5.15396 12.8664C5.01618 12.7287 4.93878 12.5418 4.93878 12.3469C4.93878 12.1521 5.01618 11.9652 5.15396 11.8274C5.29174 11.6897 5.47862 11.6122 5.67347 11.6122ZM9.34694 11.6122H10.0816C10.2765 11.6122 10.4634 11.6897 10.6011 11.8274C10.7389 11.9652 10.8163 12.1521 10.8163 12.3469C10.8163 12.5418 10.7389 12.7287 10.6011 12.8664C10.4634 13.0042 10.2765 13.0816 10.0816 13.0816H9.34694C9.15209 13.0816 8.96521 13.0042 8.82743 12.8664C8.68965 12.7287 8.61225 12.5418 8.61225 12.3469C8.61225 12.1521 8.68965 11.9652 8.82743 11.8274C8.96521 11.6897 9.15209 11.6122 9.34694 11.6122ZM13.0204 11.6122H13.7551C13.95 11.6122 14.1368 11.6897 14.2746 11.8274C14.4124 11.9652 14.4898 12.1521 14.4898 12.3469C14.4898 12.5418 14.4124 12.7287 14.2746 12.8664C14.1368 13.0042 13.95 13.0816 13.7551 13.0816H13.0204C12.8256 13.0816 12.6387 13.0042 12.5009 12.8664C12.3631 12.7287 12.2857 12.5418 12.2857 12.3469C12.2857 12.1521 12.3631 11.9652 12.5009 11.8274C12.6387 11.6897 12.8256 11.6122 13.0204 11.6122ZM5.67347 15.2857H6.40816C6.60302 15.2857 6.78989 15.3631 6.92767 15.5009C7.06545 15.6387 7.14286 15.8256 7.14286 16.0204C7.14286 16.2153 7.06545 16.4021 6.92767 16.5399C6.78989 16.6777 6.60302 16.7551 6.40816 16.7551H5.67347C5.47862 16.7551 5.29174 16.6777 5.15396 16.5399C5.01618 16.4021 4.93878 16.2153 4.93878 16.0204C4.93878 15.8256 5.01618 15.6387 5.15396 15.5009C5.29174 15.3631 5.47862 15.2857 5.67347 15.2857ZM9.34694 15.2857H15.2245C15.4193 15.2857 15.6062 15.3631 15.744 15.5009C15.8818 15.6387 15.9592 15.8256 15.9592 16.0204C15.9592 16.2153 15.8818 16.4021 15.744 16.5399C15.6062 16.6777 15.4193 16.7551 15.2245 16.7551H9.34694C9.15209 16.7551 8.96521 16.6777 8.82743 16.5399C8.68965 16.4021 8.61225 16.2153 8.61225 16.0204C8.61225 15.8256 8.68965 15.6387 8.82743 15.5009C8.96521 15.3631 9.15209 15.2857 9.34694 15.2857ZM18.1633 15.2857H18.898C19.0928 15.2857 19.2797 15.3631 19.4175 15.5009C19.5552 15.6387 19.6327 15.8256 19.6327 16.0204C19.6327 16.2153 19.5552 16.4021 19.4175 16.5399C19.2797 16.6777 19.0928 16.7551 18.898 16.7551H18.1633C17.9684 16.7551 17.7815 16.6777 17.6438 16.5399C17.506 16.4021 17.4286 16.2153 17.4286 16.0204C17.4286 15.8256 17.506 15.6387 17.6438 15.5009C17.7815 15.3631 17.9684 15.2857 18.1633 15.2857Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/KolInfluencersIcon.d.ts

@@ -1,7 +1,7 @@
 import { type IconColor } from '../core';
 import { type IconProps } from './types';
 declare const KolInfluencersIcon: {
-    <T extends string = IconColor>({ size, width, height, color, ...props }: IconProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends string = IconColor>({ size, width, height, className, color, ...props }: IconProps<T>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default KolInfluencersIcon;

package/dist/web/KolInfluencersIcon.js

@@ -1,18 +1,18 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { isThemeColor } from "../core/index.js";
-import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
-const KolInfluencersIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const KolInfluencersIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M11.3645 2.1311C11.6847 1.71252 12.3158 1.71239 12.636 2.1311L14.593 4.69165C14.7454 4.89102 14.9808 5.00594 15.2278 5.0061L15.3342 4.99927L18.5286 4.57251C19.051 4.50275 19.4974 4.94854 19.428 5.47095L19.0012 8.66626C18.9634 8.95041 19.0801 9.23334 19.3079 9.40747L21.8684 11.3645C22.2873 11.6847 22.2873 12.3158 21.8684 12.636L19.3079 14.593C19.0802 14.7672 18.9633 15.05 19.0012 15.3342L19.428 18.5286C19.4934 19.0187 19.1048 19.4417 18.6252 19.4348L18.5286 19.428L15.3342 19.0012C15.05 18.9633 14.7672 19.0802 14.593 19.3079L12.636 21.8684L12.5725 21.9426C12.2606 22.2633 11.74 22.2631 11.428 21.9426L11.3645 21.8684L9.40747 19.3079C9.23334 19.0801 8.95041 18.9634 8.66626 19.0012L5.47095 19.428L5.37427 19.4348C4.89496 19.4413 4.5071 19.0185 4.57251 18.5286L4.99927 15.3342C5.03245 15.0854 4.94633 14.8381 4.77173 14.6633L4.69165 14.593L2.1311 12.636C1.71239 12.3158 1.71252 11.6847 2.1311 11.3645L4.69165 9.40747C4.89118 9.25495 5.00612 9.0189 5.0061 8.77173L4.99927 8.66626L4.57251 5.47095C4.50303 4.94865 4.94865 4.50303 5.47095 4.57251L8.66626 4.99927C8.91501 5.03233 9.16251 4.94637 9.33716 4.77173L9.40747 4.69165L11.3645 2.1311ZM10.3987 5.45044C9.9526 6.03369 9.22809 6.33375 8.50024 6.23657L5.88696 5.88696L6.23657 8.50024C6.33375 9.2281 6.03369 9.9526 5.45044 10.3987L3.35571 11.9993L5.45044 13.6008C6.03381 14.0468 6.33366 14.7714 6.23657 15.4993L5.88696 18.1125L8.50024 17.7639L8.63696 17.7502C9.31799 17.7052 9.98049 18.0031 10.3987 18.55L11.9993 20.6438L13.6008 18.55C14.0191 18.0029 14.6823 17.7051 15.3635 17.7502L15.4993 17.7639L18.1125 18.1125L17.7639 15.4993C17.6668 14.7713 17.9666 14.0468 18.55 13.6008L20.6438 11.9993L18.55 10.3987C17.9666 9.95261 17.6667 9.2282 17.7639 8.50024L18.1125 5.88696L15.4993 6.23657C14.7714 6.33366 14.0468 6.03381 13.6008 5.45044L11.9993 3.35571L10.3987 5.45044ZM14.6497 9.69556C14.9246 9.42143 15.359 9.40497 15.6536 9.64478L15.7102 9.69556V9.69653C16.0035 9.98979 16.0034 10.4648 15.7102 10.7581L11.7141 14.7512C11.7084 14.7579 11.703 14.7662 11.6956 14.7737L11.6946 14.7756C11.6496 14.8201 11.599 14.8553 11.5471 14.886V14.9924H11.0071L10.9807 14.9661C10.8541 14.934 10.733 14.8717 10.634 14.7727C10.6225 14.7612 10.6131 14.751 10.6077 14.7444C10.605 14.7412 10.6023 14.7385 10.6008 14.7366C10.5994 14.7348 10.5982 14.733 10.5979 14.7327L10.5989 14.7336C10.5996 14.7346 10.6011 14.7365 10.6028 14.7385C10.6051 14.7414 10.6089 14.746 10.6135 14.7512L8.6272 12.7659C8.33412 12.4726 8.33409 11.9975 8.6272 11.7043L8.68384 11.6526C8.9591 11.428 9.35675 11.4281 9.63208 11.6526L9.68872 11.7043L11.1643 13.1799L14.6497 9.69653V9.69556Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/LanguagesIcon.d.ts

@@ -1,7 +1,7 @@
 import { type IconColor } from '../core';
 import { type IconProps } from './types';
 declare const LanguagesIcon: {
-    <T extends string = IconColor>({ size, width, height, color, ...props }: IconProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends string = IconColor>({ size, width, height, className, color, ...props }: IconProps<T>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default LanguagesIcon;