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

package/dist/web/CircleCloseIcon.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 CircleCloseIcon_CircleCloseIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const CircleCloseIcon_CircleCloseIcon = ({ 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.9961 2C13.3104 1.99552 14.6127 2.25229 15.8271 2.75488C17.0417 3.25755 18.1445 3.99662 19.0713 4.92871C20.945 6.80517 21.998 9.34824 21.998 12C21.998 14.6519 20.9451 17.1957 19.0713 19.0723C17.6723 20.4706 15.8902 21.4231 13.9502 21.8086C12.0101 22.1941 9.99917 21.9956 8.17188 21.2383C6.34451 20.4809 4.78223 19.1986 3.68359 17.5537C2.58506 15.9089 1.99967 13.975 2 11.9971C1.99906 10.684 2.25674 9.38319 2.75879 8.16992C3.26083 6.95672 3.99737 5.85419 4.92578 4.92578C5.85419 3.99744 6.95676 3.26079 8.16992 2.75879C9.38303 2.25687 10.6833 1.99908 11.9961 2ZM13.6377 3.74512C12.0059 3.42069 10.3144 3.58787 8.77734 4.22461C7.24024 4.86139 5.92628 5.93984 5.00195 7.32324C4.07772 8.70662 3.58398 10.3334 3.58398 11.9971C3.58406 13.6608 4.07768 15.2876 5.00195 16.6709C5.92625 18.0542 7.24037 19.1318 8.77734 19.7686C10.3144 20.4053 12.0059 20.5725 13.6377 20.248C15.2694 19.9236 16.7688 19.1226 17.9453 17.9463C19.5214 16.3677 20.4071 14.2278 20.4072 11.9971C20.4072 9.7663 19.5215 7.62649 17.9453 6.04785C16.7687 4.87144 15.2696 4.06962 13.6377 3.74512ZM8.41602 7.62109C8.62657 7.62113 8.82857 7.70473 8.97754 7.85352L11.9961 10.875L15.0127 7.85352C15.1618 7.70593 15.3634 7.62305 15.5732 7.62305C15.7831 7.62309 15.9847 7.70586 16.1338 7.85352C16.2087 7.9267 16.2679 8.01483 16.3086 8.11133C16.3493 8.20779 16.3709 8.31133 16.3711 8.41602C16.3719 8.52042 16.3514 8.62422 16.3115 8.7207C16.2716 8.81702 16.2129 8.90432 16.1387 8.97754L13.1201 11.9961L16.1387 15.0166C16.2124 15.0902 16.2706 15.1782 16.3105 15.2744C16.3505 15.3706 16.3711 15.474 16.3711 15.5781C16.3711 15.6822 16.3504 15.7857 16.3105 15.8818C16.2706 15.9779 16.2123 16.0652 16.1387 16.1387C16.0652 16.2123 15.9779 16.2706 15.8818 16.3105C15.7857 16.3504 15.6822 16.3711 15.5781 16.3711C15.474 16.3711 15.3706 16.3505 15.2744 16.3105C15.1782 16.2706 15.0902 16.2124 15.0166 16.1387L11.9961 13.1201L8.97754 16.1387C8.8283 16.2871 8.62649 16.3701 8.41602 16.3701C8.2054 16.3701 8.00281 16.2872 7.85352 16.1387C7.70585 15.9896 7.62313 15.788 7.62305 15.5781C7.62305 15.3681 7.70568 15.1658 7.85352 15.0166L10.875 11.9961L7.85352 8.97754C7.70473 8.82857 7.62113 8.62657 7.62109 8.41602C7.62109 8.20524 7.70448 8.00255 7.85352 7.85352C8.00255 7.70448 8.20524 7.62109 8.41602 7.62109Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/CircleDollarIcon.d.ts

@@ -1,7 +1,7 @@
 import { type IconColor } from '../core';
 import { type IconProps } from './types';
 declare const CircleDollarIcon: {
-    <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 CircleDollarIcon;

package/dist/web/CircleDollarIcon.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 CircleDollarIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const CircleDollarIcon = ({ 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 3.24999C16.8242 3.24999 20.75 7.17577 20.75 12C20.75 16.8242 16.8242 20.75 12 20.75C7.17578 20.75 3.24999 16.8242 3.24999 12C3.24999 7.17575 7.17578 3.24999 12 3.24999ZM12 2C6.47754 2 2 6.47754 2 12.0001C2 17.5225 6.47754 22 12 22C17.5225 22 22 17.5225 22 12.0001C22 6.47754 17.5224 2 12 2ZM12 4.5C7.85693 4.5 4.50001 7.85695 4.50001 12.0001C4.50001 16.1419 7.85693 19.5 12 19.5C16.1418 19.5 19.5 16.1419 19.5 12.0001C19.5 7.85695 16.1418 4.5 12 4.5ZM14.727 15.8611C14.2351 16.4128 13.5247 16.7376 12.5957 16.8352V18.25H11.4116V16.8426C9.8625 16.6838 8.90425 15.7829 8.53436 14.1423L10.3654 13.6651C10.5351 14.6966 11.0967 15.2117 12.05 15.2117C12.4956 15.2117 12.8252 15.1018 13.0352 14.8809C13.2452 14.66 13.3501 14.3938 13.3501 14.0813C13.3501 13.7578 13.2452 13.5124 13.0352 13.3464C12.8252 13.1792 12.3576 12.968 11.6338 12.7116C10.9831 12.4858 10.4741 12.2636 10.1078 12.0415C9.74164 11.8218 9.44378 11.5129 9.21551 11.1162C8.98725 10.7182 8.8725 10.2543 8.8725 9.72699C8.8725 9.03482 9.07757 8.41106 9.48531 7.85686C9.89304 7.30389 10.5351 6.96574 11.4116 6.84243V5.74998H12.5958V6.8425C13.919 7.00122 14.7758 7.7495 15.1652 9.08858L13.5344 9.75753C13.2158 8.83956 12.7251 8.38058 12.0586 8.38058C11.7241 8.38058 11.4555 8.48313 11.2541 8.6882C11.0515 8.89327 10.9502 9.14229 10.9502 9.43406C10.9502 9.73191 11.0478 9.9602 11.2432 10.1201C11.4373 10.2789 11.8559 10.4754 12.4956 10.7109C13.1987 10.9673 13.7505 11.2102 14.1497 11.4385C14.55 11.6667 14.8687 11.983 15.1078 12.3845C15.346 12.7874 15.4655 13.2574 15.4655 13.7957C15.4655 14.6221 15.2189 15.3105 14.727 15.8611Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/CircleFilledIcon.d.ts

@@ -1,7 +1,7 @@
 import { type IconColor } from '../core';
 import { type IconProps } from './types';
 declare const CircleFilledIcon: {
-    <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 CircleFilledIcon;

package/dist/web/CircleFilledIcon.js

@@ -1,12 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { isThemeColor } from "../core/index.js";
-import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
-const CircleFilledIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const CircleFilledIcon = ({ 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,
@@ -14,7 +14,7 @@ const CircleFilledIcon = ({ size = 16, width = size, height = size, color = 'cur
             cx: 12,
             cy: 12,
             r: 10,
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/CircleFlameIcon.d.ts

@@ -1,7 +1,7 @@
 import { type IconColor } from '../core';
 import { type IconProps } from './types';
 declare const CircleFlameIcon: {
-    <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 CircleFlameIcon;

package/dist/web/CircleFlameIcon.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 CircleFlameIcon_CircleFlameIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const CircleFlameIcon_CircleFlameIcon = ({ 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 2C13.3497 2 14.6593 2.2645 15.8926 2.78613C17.0835 3.28984 18.1531 4.01055 19.0713 4.92871C19.9895 5.84689 20.7102 6.91655 21.2139 8.10742C21.7355 9.34068 22 10.6503 22 12C22 13.3497 21.7355 14.6593 21.2139 15.8926C20.7102 17.0834 19.9894 18.1532 19.0713 19.0713C18.1531 19.9895 17.0834 20.7102 15.8926 21.2139C14.6593 21.7355 13.3497 22 12 22C10.6503 22 9.34068 21.7355 8.10742 21.2139C6.91654 20.7102 5.84687 19.9894 4.92871 19.0713C4.01056 18.1531 3.28984 17.0835 2.78613 15.8926C2.26454 14.6593 2 13.3497 2 12C2 10.6503 2.26452 9.34069 2.78613 8.10742C3.28984 6.91654 4.01055 5.8469 4.92871 4.92871C5.84686 4.01056 6.91658 3.28981 8.10742 2.78613C9.34067 2.26448 10.6503 2 12 2ZM12 3.33301C7.22117 3.33301 3.33301 7.22117 3.33301 12C3.33301 16.7788 7.22117 20.667 12 20.667C16.7788 20.667 20.667 16.7788 20.667 12C20.667 7.22118 16.7788 3.33302 12 3.33301ZM11.2109 5.00098C11.2109 5.00098 12.336 5.50111 13.2109 6.62598C14.2066 7.87052 14.9544 9.98256 14.9609 10.001L15.2109 7.37598C15.2109 7.37598 17.7109 10.751 17.5859 13.376C17.4609 16.251 14.5859 18.126 14.5859 18.126C14.5859 18.126 15.4609 16.001 14.9609 14.126C14.4609 12.376 12.5859 10.751 12.5859 10.751C12.5835 10.7619 12.3353 11.8784 12.2109 12.376C11.961 13.1259 11.8359 13.751 11.8359 13.751L10.8359 12.126C10.827 12.1451 9.95837 14.0068 9.46094 15.126C8.71575 16.7407 9.45168 18.1089 9.46094 18.126C9.4305 18.1076 6.9594 16.6121 6.71094 14.376C6.46205 12.1357 8.44379 9.02782 8.46094 9.00098L8.83594 10.626C8.83594 10.626 10.0859 9.25091 10.8359 7.62598C11.3359 6.50098 11.2109 5.00098 11.2109 5.00098Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/CircleMinusFadedIcon.d.ts

@@ -1,7 +1,7 @@
 import { type IconColor } from '../core';
 import { type IconProps } from './types';
 declare const CircleMinusFadedIcon: {
-    <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 CircleMinusFadedIcon;

package/dist/web/CircleMinusFadedIcon.js

@@ -1,12 +1,12 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
-import { isThemeColor } from "../core/index.js";
-import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
-const CircleMinusFadedIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const CircleMinusFadedIcon = ({ 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,
@@ -16,11 +16,11 @@ const CircleMinusFadedIcon = ({ size = 16, width = size, height = size, color =
                 cx: 12,
                 cy: 12.0234,
                 r: 10.0234,
-                fill: _color
+                fill: "currentColor"
             }),
             /*#__PURE__*/ jsx("path", {
                 d: "M16.4364 11.3916H7.56606C7.39802 11.3916 7.23686 11.4584 7.11804 11.5772C6.99922 11.696 6.93246 11.8572 6.93246 12.0252C6.93246 12.1932 6.99922 12.3544 7.11804 12.4732C7.23686 12.592 7.39802 12.6588 7.56606 12.6588H16.4364C16.6044 12.6588 16.7656 12.592 16.8844 12.4732C17.0032 12.3544 17.0699 12.1932 17.0699 12.0252C17.0699 11.8572 17.0032 11.696 16.8844 11.5772C16.7656 11.4584 16.6044 11.3916 16.4364 11.3916Z",
-                fill: _color
+                fill: "currentColor"
             })
         ]
     });

package/dist/web/CircleMinusIcon.d.ts

@@ -1,7 +1,7 @@
 import { type IconColor } from '../core';
 import { type IconProps } from './types';
 declare const CircleMinusIcon: {
-    <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 CircleMinusIcon;

package/dist/web/CircleMinusIcon.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 CircleMinusIcon_CircleMinusIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const CircleMinusIcon_CircleMinusIcon = ({ 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 1.90039C13.3629 1.90039 14.686 2.16744 15.9316 2.69434C17.1343 3.20307 18.2144 3.93121 19.1416 4.8584C20.0688 5.78561 20.797 6.86567 21.3057 8.06836C21.8326 9.31405 22.0996 10.637 22.0996 12C22.0996 13.3629 21.8325 14.686 21.3057 15.9316C20.7969 17.1343 20.0688 18.2144 19.1416 19.1416C18.2144 20.0688 17.1343 20.797 15.9316 21.3057C14.6859 21.8326 13.3629 22.0996 12 22.0996C10.637 22.0996 9.31404 21.8325 8.06836 21.3057C6.86566 20.797 5.78559 20.0688 4.8584 19.1416C3.93121 18.2144 3.20307 17.1343 2.69434 15.9316C2.23329 14.8416 1.97041 13.6923 1.91211 12.5088L1.90039 12C1.90039 10.6371 2.16746 9.31405 2.69434 8.06836C3.20307 6.86566 3.93121 5.78562 4.8584 4.8584C5.78558 3.93122 6.8657 3.20304 8.06836 2.69434C9.31404 2.16743 10.6371 1.90039 12 1.90039ZM12 3.43262C7.2764 3.43262 3.43262 7.2764 3.43262 12C3.43262 16.7236 7.2764 20.5674 12 20.5674L12.4404 20.5557C16.9602 20.3256 20.5674 16.5759 20.5674 12C20.5674 7.42412 16.9602 3.67439 12.4404 3.44434L12 3.43262ZM16.2002 11.1006C16.6971 11.1007 17.0996 11.503 17.0996 12C17.0996 12.497 16.6971 12.8993 16.2002 12.8994H7.7998C7.30289 12.8993 6.90042 12.497 6.90039 12C6.90039 11.503 7.30288 11.1007 7.7998 11.1006H16.2002Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/CirclePendingIcon.d.ts

@@ -1,7 +1,7 @@
 import { type IconColor } from '../core';
 import { type IconProps } from './types';
 declare const CirclePendingIcon: {
-    <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 CirclePendingIcon;

package/dist/web/CirclePendingIcon.js

@@ -1,12 +1,12 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
-import { isThemeColor } from "../core/index.js";
-import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
-const CirclePendingIcon_CirclePendingIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const CirclePendingIcon_CirclePendingIcon = ({ 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,
@@ -16,11 +16,11 @@ const CirclePendingIcon_CirclePendingIcon = ({ size = 16, width = size, height =
                 cx: 12.0051,
                 cy: 11.9985,
                 r: 9.99854,
-                fill: _color
+                fill: "currentColor"
             }),
             /*#__PURE__*/ jsx("path", {
                 d: "M6.01636 10.9268C6.608 10.9268 7.08757 11.4064 7.08765 11.998C7.08765 12.5897 6.60805 13.0693 6.01636 13.0693C5.42462 13.0693 4.94507 12.5898 4.94507 11.998C4.94514 11.4064 5.42467 10.9268 6.01636 10.9268ZM12.0369 10.9268C12.6286 10.9268 13.1091 11.4064 13.1091 11.998C13.1091 12.5898 12.6286 13.0693 12.0369 13.0693C11.4453 13.0691 10.9656 12.5897 10.9656 11.998C10.9657 11.4065 11.4454 10.927 12.0369 10.9268ZM18.074 10.9268C18.6656 10.9268 19.1452 11.4064 19.1453 11.998C19.1453 12.5897 18.6657 13.0693 18.074 13.0693C17.4822 13.0693 17.0027 12.5898 17.0027 11.998C17.0028 11.4064 17.4823 10.9268 18.074 10.9268Z",
-                fill: _color
+                fill: "currentColor"
             })
         ]
     });

package/dist/web/CirclePlusIcon.d.ts

@@ -1,7 +1,7 @@
 import { type IconColor } from '../core';
 import { type IconProps } from './types';
 declare const CirclePlusIcon: {
-    <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 CirclePlusIcon;

package/dist/web/CirclePlusIcon.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 CirclePlusIcon_CirclePlusIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const CirclePlusIcon_CirclePlusIcon = ({ 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 1.90039C13.3629 1.90039 14.686 2.16744 15.9316 2.69434C17.1343 3.20307 18.2144 3.93121 19.1416 4.8584C20.0688 5.78561 20.797 6.86567 21.3057 8.06836C21.8326 9.31405 22.0996 10.637 22.0996 12C22.0996 13.3629 21.8325 14.686 21.3057 15.9316C20.7969 17.1343 20.0688 18.2144 19.1416 19.1416C18.2144 20.0688 17.1343 20.797 15.9316 21.3057C14.6859 21.8326 13.3629 22.0996 12 22.0996C10.637 22.0996 9.31404 21.8325 8.06836 21.3057C6.86566 20.797 5.78559 20.0688 4.8584 19.1416C3.93121 18.2144 3.20307 17.1343 2.69434 15.9316C2.16749 14.686 1.90039 13.363 1.90039 12C1.90039 10.6371 2.16746 9.31405 2.69434 8.06836C3.20307 6.86566 3.93121 5.78562 4.8584 4.8584C5.78558 3.93122 6.8657 3.20304 8.06836 2.69434C9.31404 2.16743 10.6371 1.90039 12 1.90039ZM12 3.43262C7.2764 3.43262 3.43262 7.2764 3.43262 12C3.43262 16.7236 7.2764 20.5674 12 20.5674C16.7236 20.5674 20.5674 16.7236 20.5674 12C20.5674 7.27641 16.7236 3.43263 12 3.43262ZM12.0967 6.91309C12.5505 6.95906 12.905 7.34267 12.9053 7.80859V11.1025H16.1982C16.6952 11.1025 17.0975 11.5051 17.0977 12.002L17.0938 12.0938C17.0478 12.5477 16.6643 12.9014 16.1982 12.9014H12.9053V16.1953C12.9053 16.6615 12.5506 17.0449 12.0967 17.0908L12.0049 17.0947C11.5081 17.0945 11.1055 16.6923 11.1055 16.1953V12.9014H7.81152C7.34575 12.9011 6.962 12.5476 6.91602 12.0938L6.91211 12.002C6.91228 11.5052 7.31484 11.1028 7.81152 11.1025H11.1055V7.80859C11.1057 7.31193 11.5082 6.9094 12.0049 6.90918L12.0967 6.91309Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/CircleQuestionIcon.d.ts

@@ -1,7 +1,7 @@
 import { type IconColor } from '../core';
 import { type IconProps } from './types';
 declare const CircleQuestionIcon: {
-    <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 CircleQuestionIcon;

package/dist/web/CircleQuestionIcon.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 CircleQuestionIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const CircleQuestionIcon = ({ 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 1.90039C17.5781 1.90039 22.0996 6.42192 22.0996 12C22.0996 17.5781 17.5781 22.0996 12 22.0996C6.42192 22.0996 1.90039 17.5781 1.90039 12C1.90039 6.42192 6.42192 1.90039 12 1.90039ZM12 3.39551C7.24831 3.39551 3.39551 7.24831 3.39551 12C3.39551 16.7517 7.24831 20.6045 12 20.6045C16.7517 20.6045 20.6045 16.7517 20.6045 12C20.6045 7.24831 16.7517 3.39551 12 3.39551ZM11.5664 15.5703C11.8333 15.4158 12.1618 15.4158 12.4287 15.5703C12.5596 15.6462 12.6687 15.7559 12.7441 15.8867C12.8196 16.0177 12.8593 16.1669 12.8594 16.3184L12.8555 16.4062C12.8141 16.8119 12.4906 17.1347 12.085 17.1758L11.9971 17.1797C11.5216 17.1794 11.1359 16.7939 11.1357 16.3184C11.1357 16.0089 11.2997 15.7251 11.5664 15.5703ZM11.9893 6.82129C12.9078 6.81929 13.7973 7.18095 14.4258 7.81152C15.0097 8.3997 15.3109 9.15936 15.2676 9.94922C15.2451 10.3506 15.1678 10.7145 14.9336 11.1309C14.7012 11.544 14.317 12.0048 13.6875 12.6045C13.3697 12.9064 13.1143 13.1681 12.9346 13.4014C12.754 13.6358 12.6577 13.8315 12.6406 14.0029C12.6077 14.3258 12.3546 14.5717 12.0439 14.6279L11.9082 14.6396C11.8811 14.6396 11.8565 14.6376 11.8359 14.6357C11.4356 14.5993 11.1343 14.2558 11.1738 13.8633C11.2657 12.9821 11.9428 12.2786 12.6504 11.6045C13.218 11.0645 13.4993 10.7151 13.6416 10.4609C13.7801 10.2133 13.7892 10.0531 13.7988 9.87598C13.8208 9.48028 13.6678 9.09478 13.3613 8.79004L13.3604 8.78906C13.0109 8.4381 12.5131 8.23535 11.9971 8.23535H11.9932C11.0002 8.23755 10.1963 9.00926 10.1963 9.94531C10.1961 10.3405 9.86325 10.6493 9.45996 10.6494C9.05615 10.6494 8.72381 10.3381 8.72363 9.94336C8.72363 9.10996 9.06369 8.32601 9.67969 7.73633C10.296 7.14663 11.1173 6.82341 11.9893 6.82129Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/ClipboardListIcon.d.ts

@@ -1,7 +1,7 @@
 import { type IconColor } from '../core';
 import { type IconProps } from './types';
 declare const ClipboardListIcon: {
-    <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 ClipboardListIcon;

package/dist/web/ClipboardListIcon.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 ClipboardListIcon_ClipboardListIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const ClipboardListIcon_ClipboardListIcon = ({ 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.8291 1.70996C16.1147 1.70997 16.3466 1.94144 16.3467 2.22656V3.27344H17.8975C19.6077 3.27366 20.9988 4.6646 20.999 6.375V19.1875C20.999 20.8986 19.6078 22.2898 17.8975 22.29H6.10352C4.39298 22.29 3.00098 20.8988 3.00098 19.1875V6.375C3.00122 4.66447 4.39313 3.27344 6.10352 3.27344H7.6543V2.22656C7.65435 1.94143 7.88642 1.70996 8.17188 1.70996C8.45736 1.71002 8.68842 1.94147 8.68848 2.22656V3.27344H15.3125V2.22656C15.3126 1.94143 15.5436 1.70996 15.8291 1.70996ZM4.37793 9.48633V18.8447C4.37793 19.9854 5.30573 20.9131 6.44629 20.9131H17.5537C18.6939 20.9131 19.6221 19.9854 19.6221 18.8447V9.48633H4.37793ZM15.6045 16.7441C15.8971 16.7441 16.1348 16.9872 16.1348 17.2871C16.1346 17.5869 15.897 17.8301 15.6045 17.8301H8.39355C8.10107 17.8301 7.86341 17.5869 7.86328 17.2871C7.86328 16.9872 8.10089 16.7441 8.39355 16.7441H15.6045ZM15.6045 12.5703C15.8971 12.5703 16.1348 12.8143 16.1348 13.1143C16.1345 13.414 15.8969 13.6572 15.6045 13.6572H8.39355C8.10115 13.6572 7.86354 13.414 7.86328 13.1143C7.86328 12.8143 8.10089 12.5703 8.39355 12.5703H15.6045ZM6.44629 4.65039C5.30573 4.65042 4.37793 5.57846 4.37793 6.71875V8.11133H19.6221V6.71875C19.6221 5.57845 18.694 4.65039 17.5537 4.65039H16.3467V5.15527C16.3467 5.4409 16.1148 5.67279 15.8291 5.67285C15.5437 5.67285 15.3125 5.44095 15.3125 5.15527V4.65039H8.68848V5.15527C8.68848 5.44088 8.45745 5.67274 8.17188 5.67285C7.88649 5.67285 7.6543 5.44095 7.6543 5.15527V4.65039H6.44629Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/Clock1Icon.d.ts

@@ -1,7 +1,7 @@
 import { type IconColor } from '../core';
 import { type IconProps } from './types';
 declare const Clock1Icon: {
-    <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 Clock1Icon;

package/dist/web/Clock1Icon.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 Clock1Icon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const Clock1Icon = ({ 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.5335 3.58447C17.1813 3.58447 20.9483 7.35179 20.9485 11.9995C20.9485 16.6474 17.1814 20.4155 12.5335 20.4155C7.88583 20.4152 4.11841 16.6472 4.11841 11.9995C4.11847 10.8363 4.35732 9.70682 4.80786 8.66455L4.04907 9.00342C3.8759 9.0764 3.67893 9.07931 3.50415 9.01025C3.32958 8.94109 3.18895 8.80582 3.11255 8.63428C3.03615 8.46256 3.03033 8.26743 3.09594 8.09131C3.1616 7.91527 3.29404 7.77172 3.46411 7.69189L3.46509 7.69092L5.80689 6.64795L5.82154 6.64209H5.82545C5.9948 6.57178 6.18503 6.56856 6.3567 6.63428C6.53393 6.70231 6.67675 6.83789 6.75416 7.01123L7.80104 9.36182C7.8426 9.44825 7.86674 9.54239 7.87135 9.63818C7.87595 9.73385 7.86136 9.82952 7.82838 9.91943C7.79532 10.0094 7.74445 10.0926 7.67897 10.1626C7.6135 10.2325 7.53406 10.2887 7.44655 10.3276C7.35906 10.3665 7.26393 10.3874 7.16822 10.3892C7.07259 10.3908 6.97673 10.374 6.88795 10.3384C6.79916 10.3027 6.71859 10.2486 6.65064 10.1812C6.58294 10.1139 6.5288 10.034 6.49244 9.9458L6.14869 9.17529C5.7551 10.0644 5.54952 11.026 5.55103 11.9995C5.55103 15.8551 8.67793 18.9816 12.5335 18.9819C16.3893 18.9819 19.5159 15.8547 19.5159 11.9995C19.5157 8.14455 16.3885 5.01807 12.5335 5.01807H12.5315C12.3457 5.01196 12.1687 4.93378 12.0393 4.80029C11.91 4.66662 11.8372 4.48727 11.8372 4.30127C11.8372 4.11524 11.91 3.93594 12.0393 3.80225C12.1687 3.66872 12.3457 3.59058 12.5315 3.58447H12.5335ZM11.5315 7.58838C11.7283 7.5884 11.9177 7.66697 12.0569 7.80615C12.1957 7.94524 12.2736 8.13405 12.2737 8.33057V12.9263H15.5354C15.7321 12.9264 15.9208 13.0049 16.0599 13.144C16.1988 13.2832 16.2776 13.4718 16.2776 13.6685C16.2775 13.8651 16.1989 14.0548 16.0599 14.1938C15.9208 14.3327 15.7319 14.4105 15.5354 14.4106H11.5315C11.335 14.4106 11.1462 14.3326 11.0071 14.1938C10.868 14.0548 10.7895 13.8651 10.7893 13.6685V8.33057C10.7894 8.1339 10.8681 7.94527 11.0071 7.80615C11.1462 7.66701 11.3348 7.58844 11.5315 7.58838Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/ClockIcon.d.ts

@@ -1,7 +1,7 @@
 import { type IconColor } from '../core';
 import { type IconProps } from './types';
 declare const ClockIcon: {
-    <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 ClockIcon;

package/dist/web/ClockIcon.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 ClockIcon_ClockIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const ClockIcon_ClockIcon = ({ 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.377 12.6396C21.3672 17.8193 17.1602 22.0107 11.9805 22.001C6.80078 21.9912 2.61133 17.7822 2.62109 12.6025C2.63105 7.42301 6.83801 3.23144 12.0176 3.24121C13.3632 3.24512 14.6914 3.53617 15.9121 4.09668L15.4453 3.04395C15.2697 2.68462 15.4181 2.25093 15.7754 2.0752C16.1327 1.89957 16.5683 2.0481 16.7441 2.40527C16.7519 2.4208 16.7598 2.43855 16.7656 2.4541L17.9395 5.09277C18.1015 5.45796 17.9374 5.88375 17.5742 6.04785L14.9297 7.23145C14.5703 7.40527 14.1387 7.25293 13.9648 6.89355C13.7912 6.53424 13.9435 6.10249 14.3027 5.92871L14.3437 5.91113L15.3848 5.44629C11.4122 3.56557 6.66999 5.26294 4.79102 9.2334C2.91213 13.2041 4.60752 17.9462 8.57812 19.8271C12.5488 21.7061 17.291 20.0107 19.1719 16.04C19.6757 14.9776 19.9355 13.8153 19.9355 12.6396C19.9357 12.2414 20.2579 11.9189 20.6562 11.9189C21.0546 11.9189 21.3768 12.2414 21.377 12.6396ZM16.5039 14.752C16.5039 15.166 16.1699 15.5039 15.7559 15.5039L11.25 15.5039C10.8359 15.5039 10.5 15.168 10.5 14.7539L10.5 8.75C10.5001 8.33599 10.836 8 11.25 8C11.664 8 11.9999 8.33599 12 8.75L12 14.0039L15.752 14.0039C16.166 14.0039 16.5038 14.3379 16.5039 14.752Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/CloseIcon.d.ts

@@ -1,7 +1,7 @@
 import { type IconColor } from '../core';
 import { type IconProps } from './types';
 declare const CloseIcon: {
-    <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 CloseIcon;

package/dist/web/CloseIcon.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 CloseIcon_CloseIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const CloseIcon_CloseIcon = ({ 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: "M5.29102 5.29102C5.47727 5.105 5.72974 5.00052 5.99298 5.00052C6.25621 5.00052 6.50868 5.105 6.69494 5.29102L11.9993 10.5941L17.3051 5.29102C17.4733 5.1228 17.6962 5.02051 17.9335 5.00277C18.1707 4.98503 18.4064 5.053 18.5977 5.19434L18.709 5.29102C18.895 5.47727 18.9995 5.72974 18.9995 5.99298C18.9995 6.25621 18.895 6.50868 18.709 6.69494L13.4046 11.9993L18.709 17.3051C18.8772 17.4733 18.9795 17.6962 18.9972 17.9335C19.015 18.1707 18.947 18.4064 18.8057 18.5977L18.709 18.709C18.5227 18.895 18.2703 18.9995 18.007 18.9995C17.7438 18.9995 17.4913 18.895 17.3051 18.709L11.9993 13.4046L6.69494 18.709C6.52675 18.8772 6.30377 18.9795 6.06655 18.9972C5.82933 19.015 5.59362 18.947 5.40228 18.8057L5.29102 18.709C5.105 18.5227 5.00052 18.2703 5.00052 18.007C5.00052 17.7438 5.105 17.4913 5.29102 17.3051L10.5941 11.9993L5.29102 6.69494C5.1228 6.52675 5.02051 6.30377 5.00277 6.06655C4.98503 5.82933 5.053 5.59362 5.19434 5.40228L5.29102 5.29102Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/ClothesIcon.d.ts

@@ -1,7 +1,7 @@
 import { type IconColor } from '../core';
 import { type IconProps } from './types';
 declare const ClothesIcon: {
-    <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 ClothesIcon;

package/dist/web/ClothesIcon.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 ClothesIcon_ClothesIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const ClothesIcon_ClothesIcon = ({ 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: "M15.2742 3.75C15.9386 3.75 16.5879 3.87743 17.2029 4.12891C17.8179 4.38063 18.3696 4.745 18.8435 5.21094L20.1833 6.52832C20.4278 6.76855 20.5647 7.10363 20.5583 7.44629C20.5521 7.78879 20.4039 8.11838 20.1511 8.34961L18.1882 10.1455V18.5166C18.1881 19.4002 17.4693 20.119 16.5857 20.1191H7.29272C6.40899 20.1191 5.68936 19.4003 5.68921 18.5166V10.1455L3.72729 8.34961C3.47451 8.11838 3.32553 7.78879 3.31909 7.44629C3.313 7.10363 3.44987 6.76855 3.69409 6.52832L5.03394 5.21094C5.50784 4.745 6.06054 4.38063 6.67554 4.12891C7.29038 3.87732 7.93901 3.75001 8.60327 3.75H15.2742ZM15.5691 4.69824C15.5885 4.74975 15.6013 4.80495 15.6013 4.86328C15.6013 6.88242 13.9581 8.52539 11.9392 8.52539C9.92008 8.52537 8.27808 6.88218 8.27808 4.86328C8.27808 4.80508 8.28898 4.74965 8.30835 4.69824C7.3229 4.76719 6.40295 5.17996 5.69214 5.87891L4.35132 7.19727C4.28868 7.25888 4.25519 7.34193 4.25659 7.42969C4.25835 7.5174 4.2953 7.59878 4.36011 7.6582L6.47534 9.59277C6.57227 9.6815 6.62757 9.80715 6.62769 9.93848V18.5166C6.62771 18.8836 6.92594 19.1816 7.29272 19.1816H16.5857C16.9527 19.1816 17.2517 18.8834 17.2517 18.5166V9.93848C17.2518 9.80706 17.3071 9.68132 17.4041 9.59277L19.5183 7.65723C19.5832 7.59793 19.6202 7.5166 19.6218 7.42871C19.6227 7.38568 19.6147 7.34257 19.5984 7.30273C19.5821 7.26307 19.5578 7.22721 19.5271 7.19727L18.1863 5.87891C17.475 5.17969 16.5548 4.76695 15.5691 4.69824ZM9.18042 4.6875C9.20243 4.74184 9.21558 4.80103 9.21558 4.86328C9.21558 6.36538 10.4371 7.58787 11.9392 7.58789C13.4413 7.58789 14.6638 6.36539 14.6638 4.86328C14.6638 4.80103 14.676 4.74183 14.698 4.6875H9.18042Z",
-                fill: _color
+                fill: "currentColor"
             }),
             /*#__PURE__*/ jsx("path", {
                 d: "M17.2029 4.12891L17.2597 3.99008L17.2597 3.99007L17.2029 4.12891ZM18.8435 5.21094L18.9487 5.10398L18.9487 5.10398L18.8435 5.21094ZM20.1833 6.52832L20.0782 6.63528L20.0782 6.63531L20.1833 6.52832ZM20.5583 7.44629L20.4084 7.44352V7.44357L20.5583 7.44629ZM20.1511 8.34961L20.0499 8.23893L20.0499 8.23894L20.1511 8.34961ZM18.1882 10.1455L18.087 10.0348L18.0382 10.0794V10.1455H18.1882ZM18.1882 18.5166L18.3382 18.5166V18.5166H18.1882ZM16.5857 20.1191V20.2691H16.5857L16.5857 20.1191ZM5.68921 18.5166H5.53921V18.5166L5.68921 18.5166ZM5.68921 10.1455H5.83921V10.0795L5.79049 10.0349L5.68921 10.1455ZM3.72729 8.34961L3.82858 8.23897L3.82854 8.23893L3.72729 8.34961ZM3.31909 7.44629L3.16912 7.44896L3.16912 7.44911L3.31909 7.44629ZM3.69409 6.52832L3.58893 6.42136L3.5889 6.42139L3.69409 6.52832ZM5.03394 5.21094L4.92877 5.10398L4.92877 5.10398L5.03394 5.21094ZM6.67554 4.12891L6.61873 3.99008L6.61872 3.99008L6.67554 4.12891ZM8.60327 3.75V3.6H8.60327L8.60327 3.75ZM15.5691 4.69824L15.5795 4.54861L15.3461 4.53233L15.4288 4.75123L15.5691 4.69824ZM15.6013 4.86328H15.7513H15.6013ZM11.9392 8.52539L11.9392 8.67539H11.9392V8.52539ZM8.27808 4.86328H8.12808H8.27808ZM8.30835 4.69824L8.44872 4.75112L8.53116 4.53229L8.29788 4.54861L8.30835 4.69824ZM5.69214 5.87891L5.79731 5.98586L5.79731 5.98586L5.69214 5.87891ZM4.35132 7.19727L4.24615 7.09031L4.24613 7.09033L4.35132 7.19727ZM4.25659 7.42969L4.10661 7.43209L4.10662 7.4327L4.25659 7.42969ZM4.36011 7.6582L4.25873 7.76876L4.25887 7.76889L4.36011 7.6582ZM6.47534 9.59277L6.57663 9.48213L6.57658 9.48209L6.47534 9.59277ZM6.62769 9.93848H6.77769L6.77769 9.93834L6.62769 9.93848ZM6.62769 18.5166H6.47769V18.5166L6.62769 18.5166ZM17.2517 18.5166L17.4017 18.5166V18.5166H17.2517ZM17.2517 9.93848L17.1017 9.93841V9.93848H17.2517ZM17.4041 9.59277L17.5052 9.70355L17.5053 9.70341L17.4041 9.59277ZM19.5183 7.65723L19.4172 7.54647L19.417 7.54659L19.5183 7.65723ZM19.6218 7.42871L19.4719 7.42551L19.4719 7.42591L19.6218 7.42871ZM19.5984 7.30273L19.7372 7.24594L19.7372 7.24578L19.5984 7.30273ZM19.5271 7.19727L19.4219 7.30422L19.4223 7.30462L19.5271 7.19727ZM18.1863 5.87891L18.2914 5.77195L18.2914 5.77194L18.1863 5.87891ZM9.18042 4.6875V4.5375H8.95781L9.04139 4.74382L9.18042 4.6875ZM9.21558 4.86328H9.36558H9.21558ZM11.9392 7.58789L11.9392 7.73789H11.9392V7.58789ZM14.6638 4.86328H14.5138H14.6638ZM14.698 4.6875L14.837 4.74381L14.9206 4.5375H14.698V4.6875ZM15.2742 3.75V3.9C15.9192 3.9 16.5492 4.02365 17.1461 4.26775L17.2029 4.12891L17.2597 3.99007C16.6266 3.73121 15.958 3.6 15.2742 3.6V3.75ZM17.2029 4.12891L17.1461 4.26773C17.7429 4.51203 18.2783 4.86555 18.7383 5.3179L18.8435 5.21094L18.9487 5.10398C18.4609 4.62445 17.8928 4.24922 17.2597 3.99008L17.2029 4.12891ZM18.8435 5.21094L18.7383 5.3179L20.0782 6.63528L20.1833 6.52832L20.2885 6.42136L18.9487 5.10398L18.8435 5.21094ZM20.1833 6.52832L20.0782 6.63531C20.2933 6.84666 20.4139 7.14205 20.4084 7.44352L20.5583 7.44629L20.7083 7.44906C20.7154 7.06521 20.5623 6.69045 20.2885 6.42134L20.1833 6.52832ZM20.5583 7.44629L20.4084 7.44357C20.4029 7.74508 20.2722 8.03558 20.0499 8.23893L20.1511 8.34961L20.2524 8.46029C20.5356 8.20117 20.7014 7.8325 20.7083 7.44901L20.5583 7.44629ZM20.1511 8.34961L20.0499 8.23894L18.087 10.0348L18.1882 10.1455L18.2895 10.2562L20.2524 8.46028L20.1511 8.34961ZM18.1882 10.1455H18.0382V18.5166H18.1882H18.3382V10.1455H18.1882ZM18.1882 18.5166L18.0382 18.5166C18.0381 19.3174 17.3865 19.969 16.5857 19.9691L16.5857 20.1191L16.5857 20.2691C17.5522 20.269 18.3381 19.4831 18.3382 18.5166L18.1882 18.5166ZM16.5857 20.1191V19.9691H7.29272V20.1191V20.2691H16.5857V20.1191ZM7.29272 20.1191V19.9691C6.49174 19.9691 5.83934 19.3174 5.83921 18.5166L5.68921 18.5166L5.53921 18.5166C5.53937 19.4832 6.32624 20.2691 7.29272 20.2691V20.1191ZM5.68921 18.5166H5.83921V10.1455H5.68921H5.53921V18.5166H5.68921ZM5.68921 10.1455L5.79049 10.0349L3.82858 8.23897L3.72729 8.34961L3.62601 8.46025L5.58793 10.2562L5.68921 10.1455ZM3.72729 8.34961L3.82854 8.23893C3.60608 8.03544 3.47473 7.74484 3.46907 7.44347L3.31909 7.44629L3.16912 7.44911C3.17633 7.83275 3.34294 8.20132 3.62605 8.46029L3.72729 8.34961ZM3.31909 7.44629L3.46907 7.44362C3.46371 7.14207 3.58441 6.84663 3.79928 6.63526L3.69409 6.52832L3.5889 6.42139C3.31534 6.69048 3.16229 7.06519 3.16912 7.44896L3.31909 7.44629ZM3.69409 6.52832L3.79926 6.63528L5.1391 5.3179L5.03394 5.21094L4.92877 5.10398L3.58893 6.42136L3.69409 6.52832ZM5.03394 5.21094L5.1391 5.3179C5.59912 4.86561 6.1354 4.51206 6.73236 4.26773L6.67554 4.12891L6.61872 3.99008C5.98567 4.24919 5.41656 4.62439 4.92877 5.10398L5.03394 5.21094ZM6.67554 4.12891L6.73234 4.26773C7.32912 4.02354 7.95845 3.90001 8.60327 3.9L8.60327 3.75L8.60327 3.6C7.91956 3.60001 7.25164 3.7311 6.61873 3.99008L6.67554 4.12891ZM8.60327 3.75V3.9H15.2742V3.75V3.6H8.60327V3.75ZM15.5691 4.69824L15.4288 4.75123C15.4434 4.79003 15.4513 4.82708 15.4513 4.86328H15.6013H15.7513C15.7513 4.78282 15.7337 4.70946 15.7094 4.64525L15.5691 4.69824ZM15.6013 4.86328H15.4513C15.4513 6.79957 13.8753 8.37539 11.9392 8.37539V8.52539V8.67539C14.041 8.67539 15.7513 6.96527 15.7513 4.86328H15.6013ZM11.9392 8.52539L11.9392 8.37539C10.003 8.37537 8.42808 6.79939 8.42808 4.86328H8.27808H8.12808C8.12808 6.96496 9.83718 8.67537 11.9392 8.67539L11.9392 8.52539ZM8.27808 4.86328H8.42808C8.42808 4.82405 8.43539 4.7865 8.44872 4.75112L8.30835 4.69824L8.16798 4.64536C8.14257 4.71281 8.12808 4.78611 8.12808 4.86328H8.27808ZM8.30835 4.69824L8.29788 4.54861C7.2768 4.62005 6.32327 5.04794 5.58697 5.77195L5.69214 5.87891L5.79731 5.98586C6.48264 5.31197 7.369 4.91433 8.31882 4.84788L8.30835 4.69824ZM5.69214 5.87891L5.58697 5.77195L4.24615 7.09031L4.35132 7.19727L4.45648 7.30422L5.79731 5.98586L5.69214 5.87891ZM4.35132 7.19727L4.24613 7.09033C4.15381 7.18114 4.10456 7.30389 4.10661 7.43209L4.25659 7.42969L4.40657 7.42729C4.40582 7.37996 4.42356 7.33661 4.45651 7.3042L4.35132 7.19727ZM4.25659 7.42969L4.10662 7.4327C4.10921 7.56165 4.1639 7.6818 4.25873 7.76876L4.36011 7.6582L4.46148 7.54765C4.4267 7.51575 4.40749 7.47315 4.40656 7.42668L4.25659 7.42969ZM4.36011 7.6582L4.25887 7.76889L6.37411 9.70346L6.47534 9.59277L6.57658 9.48209L4.46134 7.54752L4.36011 7.6582ZM6.47534 9.59277L6.37406 9.70341C6.43994 9.76372 6.4776 9.84926 6.47769 9.93861L6.62769 9.93848L6.77769 9.93834C6.77753 9.76504 6.7046 9.59929 6.57663 9.48213L6.47534 9.59277ZM6.62769 9.93848H6.47769V18.5166H6.62769H6.77769V9.93848H6.62769ZM6.62769 18.5166L6.47769 18.5166C6.47771 18.9665 6.84312 19.3316 7.29272 19.3316V19.1816V19.0316C7.00876 19.0316 6.7777 18.8007 6.77769 18.5166L6.62769 18.5166ZM7.29272 19.1816V19.3316H16.5857V19.1816V19.0316H7.29272V19.1816ZM16.5857 19.1816V19.3316C17.0353 19.3316 17.4017 18.9665 17.4017 18.5166L17.2517 18.5166L17.1017 18.5166C17.1017 18.8003 16.8701 19.0316 16.5857 19.0316V19.1816ZM17.2517 18.5166H17.4017V9.93848H17.2517H17.1017V18.5166H17.2517ZM17.2517 9.93848L17.4017 9.93854C17.4017 9.84909 17.4394 9.76358 17.5052 9.70355L17.4041 9.59277L17.3029 9.482C17.1747 9.59906 17.1018 9.76503 17.1017 9.93841L17.2517 9.93848ZM17.4041 9.59277L17.5053 9.70341L19.6196 7.76787L19.5183 7.65723L19.417 7.54659L17.3028 9.48213L17.4041 9.59277ZM19.5183 7.65723L19.6195 7.76798C19.7146 7.68107 19.7694 7.56077 19.7718 7.43151L19.6218 7.42871L19.4719 7.42591C19.471 7.47243 19.4518 7.51479 19.4172 7.54647L19.5183 7.65723ZM19.6218 7.42871L19.7718 7.43192C19.7732 7.36819 19.7612 7.30467 19.7372 7.24594L19.5984 7.30273L19.4596 7.35953C19.4681 7.38047 19.4723 7.40317 19.4719 7.42551L19.6218 7.42871ZM19.5984 7.30273L19.7372 7.24578C19.713 7.18693 19.677 7.13398 19.6319 7.08991L19.5271 7.19727L19.4223 7.30462C19.4386 7.32044 19.4512 7.3392 19.4596 7.35969L19.5984 7.30273ZM19.5271 7.19727L19.6323 7.09031L18.2914 5.77195L18.1863 5.87891L18.0811 5.98586L19.4219 7.30422L19.5271 7.19727ZM18.1863 5.87891L18.2914 5.77194C17.5547 5.04767 16.6009 4.6198 15.5795 4.54861L15.5691 4.69824L15.5587 4.84788C16.5087 4.91411 17.3953 5.31171 18.0811 5.98588L18.1863 5.87891ZM9.18042 4.6875L9.04139 4.74382C9.05697 4.78226 9.06558 4.82237 9.06558 4.86328H9.21558H9.36558C9.36558 4.77968 9.3479 4.70142 9.31945 4.63118L9.18042 4.6875ZM9.21558 4.86328H9.06558C9.06558 6.44815 10.3542 7.73787 11.9392 7.73789L11.9392 7.58789L11.9392 7.43789C10.52 7.43787 9.36558 6.28261 9.36558 4.86328H9.21558ZM11.9392 7.58789V7.73789C13.5242 7.73789 14.8138 6.44823 14.8138 4.86328H14.6638H14.5138C14.5138 6.28255 13.3585 7.43789 11.9392 7.43789V7.58789ZM14.6638 4.86328H14.8138C14.8138 4.82081 14.8221 4.7807 14.837 4.74381L14.698 4.6875L14.559 4.63119C14.5299 4.70296 14.5138 4.78126 14.5138 4.86328H14.6638ZM14.698 4.6875V4.5375H9.18042V4.6875V4.8375H14.698V4.6875Z",
-                fill: _color
+                fill: "currentColor"
             })
         ]
     });

package/dist/web/ConceptIcon.d.ts

@@ -1,7 +1,7 @@
 import { type IconColor } from '../core';
 import { type IconProps } from './types';
 declare const ConceptIcon: {
-    <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 ConceptIcon;

package/dist/web/ConceptIcon.js

@@ -1,12 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { isThemeColor } from "../core/index.js";
-import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
-const ConceptIcon_ConceptIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const ConceptIcon_ConceptIcon = ({ 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,
@@ -14,7 +14,7 @@ const ConceptIcon_ConceptIcon = ({ size = 16, width = size, height = size, color
             fillRule: "evenodd",
             clipRule: "evenodd",
             d: "M15.2373 3.5276C17.6084 2.54717 19.5304 2.56497 20.5977 3.66627C21.6645 4.76761 21.6232 6.68894 20.5693 9.02858C20.1376 9.9863 19.5525 10.9846 18.8438 11.9856C19.5568 12.9841 20.1458 13.9802 20.5811 14.9368C21.644 17.2723 21.6928 19.1949 20.6299 20.2991C20.075 20.8761 19.2823 21.1594 18.3174 21.1594C17.4374 21.1594 16.4087 20.9245 15.2705 20.4592C14.221 20.0304 13.1194 19.4249 12.0127 18.678C10.9098 19.4286 9.81172 20.0401 8.76465 20.4729C7.62016 20.9459 6.58459 21.1848 5.7002 21.1848C4.74368 21.1848 3.95739 20.9044 3.40332 20.3333C2.33613 19.232 2.37679 17.3107 3.43066 14.971C3.86249 14.013 4.44734 13.0142 5.15625 12.013C4.44411 11.0148 3.85417 10.0192 3.41895 9.06276C2.35589 6.72777 2.30732 4.80544 3.37012 3.70045C4.43304 2.59556 6.35515 2.56882 8.73047 3.5403C9.77889 3.96901 10.881 4.57401 11.9873 5.32057C13.0904 4.56977 14.1901 3.96047 15.2373 3.5276ZM6.08301 13.2258C5.54426 14.024 5.09446 14.8119 4.75391 15.5676C4.35595 16.4515 4.13251 17.247 4.08398 17.8958C4.03536 18.5471 4.16415 19.0336 4.44531 19.3235C4.65088 19.5352 4.9583 19.6702 5.36133 19.7171C5.76484 19.7639 6.25818 19.7218 6.82324 19.5881C7.92331 19.3279 9.28068 18.7205 10.7559 17.7708C9.95972 17.1573 9.16759 16.4776 8.40234 15.7415C7.55626 14.928 6.77875 14.0803 6.08301 13.2258ZM17.9199 13.2024C17.2275 14.0595 16.4533 14.9101 15.6113 15.7268C14.8483 16.4661 14.0593 17.1494 13.2646 17.7659C14.1387 18.3243 14.9996 18.7814 15.8193 19.1165C16.7165 19.4832 17.5189 19.6787 18.1689 19.7044C18.8214 19.7301 19.303 19.5843 19.583 19.2932H19.584C19.8637 19.0023 19.9896 18.5153 19.9385 17.8645C19.8875 17.2161 19.6615 16.4215 19.2598 15.5393C18.9165 14.7846 18.4623 13.9989 17.9199 13.2024ZM11.9902 7.09987C11.3394 7.58576 10.6895 8.12243 10.0518 8.70241L9.39844 9.31569C8.49801 10.1892 7.67902 11.0974 6.9668 12.009C7.66004 12.89 8.47478 13.7959 9.40918 14.6946C10.2559 15.5096 11.1333 16.2492 12.0098 16.8987C12.858 16.265 13.7317 15.5284 14.6016 14.6848C15.5323 13.7823 16.3428 12.8736 17.0332 11.9895C16.3176 11.0812 15.4961 10.1743 14.5918 9.30494C13.7175 8.46503 12.842 7.73034 11.9902 7.09987ZM11.9961 10.8674C12.3667 10.8675 12.7223 11.0147 12.9844 11.2766C13.2466 11.5388 13.3936 11.8951 13.3936 12.2659C13.3935 12.6366 13.2465 12.992 12.9844 13.2542C12.7222 13.5163 12.3668 13.6633 11.9961 13.6633C11.6254 13.6633 11.27 13.5162 11.0078 13.2542C10.7457 12.992 10.5977 12.6366 10.5977 12.2659C10.5977 11.8951 10.7456 11.5388 11.0078 11.2766C11.27 11.0147 11.6255 10.8674 11.9961 10.8674ZM5.68164 4.2903C5.10412 4.29031 4.67659 4.43607 4.41602 4.70729C4.01286 5.12694 3.9281 5.93279 4.21777 7.03053C4.49778 8.09116 5.12082 9.39116 6.07812 10.7981C6.7707 9.94018 7.54616 9.09025 8.3877 8.27467C9.15061 7.53493 9.93899 6.85192 10.7334 6.23561C8.70009 4.9369 6.89505 4.29035 5.68164 4.2903ZM18.2979 4.26881C17.7061 4.26883 16.9737 4.42067 16.1494 4.7278L15.791 4.8694C14.9727 5.20709 14.1142 5.66738 13.2422 6.22975C14.0395 6.84295 14.831 7.52343 15.5967 8.26002C16.4426 9.07337 17.2194 9.92132 17.915 10.7756C18.8674 9.36463 19.4859 8.06233 19.7617 7.00026C20.047 5.90143 19.9593 5.09611 19.5547 4.67799C19.297 4.4122 18.8709 4.26884 18.2979 4.26881Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/ConvertFlashIcon.d.ts

@@ -1,7 +1,7 @@
 import { type IconColor } from '../core';
 import { type IconProps } from './types';
 declare const ConvertFlashIcon: {
-    <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 ConvertFlashIcon;