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

package/dist/web/ChevronLeftSmallIcon.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 ChevronLeftSmallIcon_ChevronLeftSmallIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const ChevronLeftSmallIcon_ChevronLeftSmallIcon = ({ 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 ChevronLeftSmallIcon_ChevronLeftSmallIcon = ({ size = 16, width = size, he
             fillRule: "evenodd",
             clipRule: "evenodd",
             d: "M8.29791 12.707C8.11044 12.5194 8.00513 12.2651 8.00513 12C8.00513 11.7348 8.11044 11.4805 8.29791 11.293L13.9549 5.63598C14.0472 5.54047 14.1575 5.46428 14.2795 5.41188C14.4015 5.35947 14.5327 5.33188 14.6655 5.33073C14.7983 5.32957 14.93 5.35487 15.0529 5.40516C15.1758 5.45544 15.2874 5.52969 15.3813 5.62358C15.4752 5.71747 15.5495 5.82913 15.5997 5.95202C15.65 6.07492 15.6753 6.2066 15.6742 6.33938C15.673 6.47216 15.6454 6.60338 15.593 6.72538C15.5406 6.84739 15.4644 6.95773 15.3689 7.04998L10.4189 12L15.3689 16.95C15.5511 17.1386 15.6519 17.3912 15.6496 17.6534C15.6473 17.9156 15.5421 18.1664 15.3567 18.3518C15.1713 18.5372 14.9205 18.6424 14.6583 18.6447C14.3961 18.6469 14.1435 18.5461 13.9549 18.364L8.29791 12.707Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/ChevronRightIcon.d.ts

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

package/dist/web/ChevronRightIcon.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 ChevronRightIcon_ChevronRightIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const ChevronRightIcon_ChevronRightIcon = ({ 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 ChevronRightIcon_ChevronRightIcon = ({ size = 16, width = size, height = s
             fillRule: "evenodd",
             clipRule: "evenodd",
             d: "M16.4334 11.0992C16.668 11.3338 16.7998 11.652 16.7998 11.9838C16.7998 12.3157 16.668 12.6339 16.4334 12.8685L9.35475 19.9472C9.23932 20.0667 9.10125 20.1621 8.94858 20.2276C8.79592 20.2932 8.63172 20.3277 8.46557 20.3292C8.29942 20.3306 8.13465 20.299 7.98087 20.236C7.82708 20.1731 7.68737 20.0802 7.56988 19.9627C7.45239 19.8452 7.35948 19.7055 7.29656 19.5517C7.23365 19.398 7.20199 19.2332 7.20343 19.067C7.20487 18.9009 7.23939 18.7367 7.30497 18.584C7.37055 18.4314 7.46588 18.2933 7.58539 18.1779L13.7794 11.9838L7.58539 5.78984C7.35745 5.55384 7.23133 5.23776 7.23418 4.90967C7.23703 4.58158 7.36863 4.26773 7.60063 4.03573C7.83264 3.80372 8.14648 3.67212 8.47457 3.66927C8.80266 3.66642 9.11875 3.79255 9.35475 4.02048L16.4334 11.0992Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/ChevronRightSmallIcon.d.ts

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

package/dist/web/ChevronRightSmallIcon.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 ChevronRightSmallIcon_ChevronRightSmallIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const ChevronRightSmallIcon_ChevronRightSmallIcon = ({ 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 ChevronRightSmallIcon_ChevronRightSmallIcon = ({ size = 16, width = size,
             fillRule: "evenodd",
             clipRule: "evenodd",
             d: "M15.7021 11.293C15.8896 11.4806 15.9949 11.7349 15.9949 12C15.9949 12.2652 15.8896 12.5195 15.7021 12.707L10.0451 18.364C9.95284 18.4595 9.8425 18.5357 9.72049 18.5881C9.59849 18.6405 9.46727 18.6681 9.33449 18.6693C9.20171 18.6704 9.07003 18.6451 8.94713 18.5948C8.82424 18.5446 8.71258 18.4703 8.61869 18.3764C8.5248 18.2825 8.45055 18.1709 8.40026 18.048C8.34998 17.9251 8.32468 17.7934 8.32584 17.6606C8.32699 17.5278 8.35458 17.3966 8.40699 17.2746C8.45939 17.1526 8.53558 17.0423 8.63109 16.95L13.5811 12L8.63109 7.05002C8.44893 6.86142 8.34814 6.60882 8.35041 6.34662C8.35269 6.08443 8.45786 5.83361 8.64327 5.6482C8.82868 5.4628 9.07949 5.35763 9.34169 5.35535C9.60388 5.35307 9.85649 5.45386 10.0451 5.63602L15.7021 11.293Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/ChevronUpIcon.d.ts

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

package/dist/web/ChevronUpIcon.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 ChevronUpIcon_ChevronUpIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const ChevronUpIcon_ChevronUpIcon = ({ 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 ChevronUpIcon_ChevronUpIcon = ({ size = 16, width = size, height = size, c
             fillRule: "evenodd",
             clipRule: "evenodd",
             d: "M11.099 7.56644C11.3337 7.33186 11.6519 7.20007 11.9837 7.20007C12.3155 7.20007 12.6337 7.33186 12.8684 7.56644L19.9471 14.6451C20.0666 14.7606 20.1619 14.8986 20.2275 15.0513C20.2931 15.204 20.3276 15.3682 20.3291 15.5343C20.3305 15.7005 20.2988 15.8652 20.2359 16.019C20.173 16.1728 20.0801 16.3125 19.9626 16.43C19.8451 16.5475 19.7054 16.6404 19.5516 16.7033C19.3978 16.7662 19.2331 16.7979 19.0669 16.7964C18.9008 16.795 18.7366 16.7605 18.5839 16.6949C18.4312 16.6293 18.2932 16.534 18.1777 16.4145L11.9837 10.2205L5.78972 16.4145C5.55372 16.6424 5.23764 16.7685 4.90954 16.7657C4.58146 16.7628 4.26761 16.6312 4.03561 16.3992C3.8036 16.1672 3.672 15.8534 3.66915 15.5253C3.6663 15.1972 3.79242 14.8811 4.02036 14.6451L11.099 7.56644Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/ChevronUpSmallIcon.d.ts

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

package/dist/web/ChevronUpSmallIcon.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 ChevronUpSmallIcon_ChevronUpSmallIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const ChevronUpSmallIcon_ChevronUpSmallIcon = ({ 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 ChevronUpSmallIcon_ChevronUpSmallIcon = ({ size = 16, width = size, height
             fillRule: "evenodd",
             clipRule: "evenodd",
             d: "M11.2929 8.29804C11.4804 8.11056 11.7347 8.00525 11.9999 8.00525C12.2651 8.00525 12.5194 8.11056 12.7069 8.29804L18.3639 13.955C18.4594 14.0473 18.5356 14.1576 18.588 14.2796C18.6404 14.4016 18.668 14.5329 18.6692 14.6656C18.6703 14.7984 18.645 14.9301 18.5947 15.053C18.5444 15.1759 18.4702 15.2875 18.3763 15.3814C18.2824 15.4753 18.1708 15.5496 18.0479 15.5999C17.925 15.6501 17.7933 15.6754 17.6605 15.6743C17.5277 15.6731 17.3965 15.6455 17.2745 15.5931C17.1525 15.5407 17.0421 15.4645 16.9499 15.369L11.9999 10.419L7.0499 15.369C6.8613 15.5512 6.6087 15.652 6.3465 15.6497C6.0843 15.6474 5.83349 15.5423 5.64808 15.3569C5.46267 15.1714 5.3575 14.9206 5.35523 14.6584C5.35295 14.3962 5.45374 14.1436 5.6359 13.955L11.2929 8.29804Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/ChevronsLeftIcon.d.ts

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

package/dist/web/ChevronsLeftIcon.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 ChevronsLeftIcon_ChevronsLeftIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const ChevronsLeftIcon_ChevronsLeftIcon = ({ 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.1782 12.0005C11.1782 11.3667 11.4069 10.7544 11.8237 10.2779L17.8403 3.32672C18.2074 2.90257 18.8516 2.85627 19.2759 3.2232C19.5091 3.42475 19.6274 3.70911 19.6274 3.99274C19.6274 4.22754 19.5471 4.4656 19.3794 4.65875L13.3599 11.6148L13.3589 11.6158C13.1678 11.8343 13.1678 12.1658 13.3589 12.3843L13.3628 12.3882L13.3628 12.3892L19.3794 19.3423C19.723 19.7396 19.7061 20.3305 19.3511 20.7056L19.2759 20.7779C18.8523 21.1442 18.2079 21.1006 17.8403 20.6744L11.8237 13.7232C11.4071 13.2453 11.1783 12.6347 11.1782 12.0005ZM4.36865 12.0005C4.36865 11.3667 4.59738 10.7544 5.01416 10.2779L11.0308 3.32672C11.3978 2.90257 12.0421 2.85627 12.4663 3.22321C12.6995 3.42475 12.8179 3.70911 12.8179 3.99274C12.8178 4.22754 12.7375 4.4656 12.5698 4.65875L6.55029 11.6148L6.54932 11.6158C6.3582 11.8343 6.35826 12.1658 6.54932 12.3843L6.55322 12.3882L6.55322 12.3892L12.5698 19.3423C12.9134 19.7396 12.8965 20.3305 12.5415 20.7056L12.4663 20.7779C12.0427 21.1442 11.3983 21.1006 11.0308 20.6744L5.01416 13.7232C4.59729 13.2468 4.36871 12.6345 4.36865 12.0005Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/ChevronsUpIcon.d.ts

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

package/dist/web/ChevronsUpIcon.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 ChevronsUpIcon_ChevronsUpIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const ChevronsUpIcon_ChevronsUpIcon = ({ 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.9969 11.1824C12.6308 11.1824 13.2431 11.4111 13.7196 11.8279L20.6707 17.8445C21.0948 18.2115 21.1412 18.8558 20.7743 19.28C20.5727 19.5131 20.2883 19.6316 20.0047 19.6316C19.77 19.6316 19.5318 19.5512 19.3387 19.3835L12.3827 13.364L12.3817 13.363C12.1632 13.1718 11.8317 13.172 11.6131 13.363L11.6092 13.3669H11.6082L4.65512 19.3835C4.25796 19.7269 3.66691 19.7101 3.29183 19.3552L3.21957 19.28C2.85327 18.8565 2.89699 18.2121 3.32308 17.8445L10.2743 11.8279C10.7522 11.4113 11.3627 11.1824 11.9969 11.1824ZM11.9969 4.3689C12.6307 4.3689 13.2431 4.59769 13.7196 5.0144L20.6707 11.031C21.0948 11.398 21.1411 12.0423 20.7743 12.4666C20.5727 12.6998 20.2884 12.8181 20.0047 12.8181C19.7699 12.8181 19.5319 12.7378 19.3387 12.5701L12.3827 6.55054L12.3817 6.54956C12.1632 6.35858 11.8316 6.35864 11.6131 6.54956L11.6092 6.55347H11.6082L4.65512 12.5701C4.25791 12.9137 3.66697 12.8968 3.29183 12.5417L3.21957 12.4666C2.85341 12.0429 2.89687 11.3985 3.32308 11.031L10.2743 5.0144C10.7507 4.59759 11.363 4.36895 11.9969 4.3689Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/CircleAlertIcon.d.ts

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

package/dist/web/CircleAlertIcon.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 CircleAlertIcon_CircleAlertIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const CircleAlertIcon_CircleAlertIcon = ({ 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 2C17.5229 2 22 6.47715 22 12C22 17.5229 17.5229 22 12 22C6.47715 22 2 17.5229 2 12C2 6.47715 6.47715 2 12 2ZM12 3.71875C7.42639 3.71875 3.71875 7.42639 3.71875 12C3.71875 16.5736 7.42639 20.2812 12 20.2812C16.5736 20.2812 20.2812 16.5736 20.2812 12C20.2812 7.42639 16.5736 3.71875 12 3.71875ZM12 15.3594C12.6904 15.3594 13.25 15.919 13.25 16.6094C13.25 17.2997 12.6904 17.8594 12 17.8594C11.3096 17.8594 10.75 17.2997 10.75 16.6094C10.75 15.919 11.3096 15.3594 12 15.3594ZM12 6.14062C12.4746 6.14062 12.8594 6.52539 12.8594 7V13.6309C12.8593 14.1054 12.4746 14.4902 12 14.4902C11.5254 14.4902 11.1407 14.1054 11.1406 13.6309V7C11.1406 6.52539 11.5254 6.14062 12 6.14062Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/CircleCheckFadedIcon.d.ts

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

package/dist/web/CircleCheckFadedIcon.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 CircleCheckFadedIcon_CircleCheckFadedIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const CircleCheckFadedIcon_CircleCheckFadedIcon = ({ 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,
@@ -18,11 +18,11 @@ const CircleCheckFadedIcon_CircleCheckFadedIcon = ({ size = 16, width = size, he
                 width: 19.9922,
                 height: 19.9922,
                 rx: 9.99609,
-                fill: _color
+                fill: "currentColor"
             }),
             /*#__PURE__*/ jsx("path", {
                 d: "M17.8098 7.63428C18.1134 7.33103 18.6039 7.33105 18.9075 7.63428C19.2111 7.9379 19.2111 8.42928 18.9075 8.73291L10.4612 17.1772C10.4497 17.1905 10.4387 17.2047 10.4261 17.2173C10.2735 17.3681 10.0748 17.4428 9.87625 17.4429L9.8743 17.4419V17.4429C9.67559 17.4429 9.47649 17.3664 9.32547 17.2153C9.31794 17.2078 9.31114 17.1997 9.30399 17.1919L5.08621 12.9741C4.7827 12.6705 4.78264 12.1791 5.08621 11.8755C5.3898 11.5719 5.88121 11.572 6.18484 11.8755L9.8743 15.5669L17.8098 7.63428Z",
-                fill: _color
+                fill: "currentColor"
             })
         ]
     });

package/dist/web/CircleCheckFilledIcon.d.ts

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

package/dist/web/CircleCheckFilledIcon.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 CircleCheckFilledIcon_CircleCheckFilledIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const CircleCheckFilledIcon_CircleCheckFilledIcon = ({ 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,
@@ -15,7 +15,7 @@ const CircleCheckFilledIcon_CircleCheckFilledIcon = ({ size = 16, width = size,
                 fillRule: "evenodd",
                 clipRule: "evenodd",
                 d: "M12 22C13.3132 22 14.6136 21.7413 15.8268 21.2388C17.0401 20.7362 18.1425 19.9997 19.0711 19.0711C19.9997 18.1425 20.7362 17.0401 21.2388 15.8268C21.7413 14.6136 22 13.3132 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17316C20.7362 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2C9.34784 2 6.8043 3.05357 4.92893 4.92893C3.05357 6.8043 2 9.34783 2 12C2 14.6522 3.05357 17.1957 4.92893 19.0711C6.8043 20.9464 9.34784 22 12 22ZM17.2978 9.37778C17.3953 9.26627 17.4696 9.13638 17.5162 8.99574C17.5628 8.85511 17.5808 8.70657 17.5692 8.55887C17.5576 8.41117 17.5165 8.26729 17.4484 8.1357C17.3804 8.0041 17.2866 7.88745 17.1728 7.7926C17.059 7.69775 16.9274 7.62663 16.7857 7.5834C16.644 7.54018 16.495 7.52574 16.3476 7.54092C16.2003 7.5561 16.0574 7.60061 15.9275 7.67181C15.7976 7.74302 15.6832 7.83949 15.5911 7.95555L11.5933 12.7522C11.2078 13.2144 10.9911 13.4711 10.8189 13.6278L10.8122 13.6344L10.8044 13.6289C10.6178 13.4878 10.3789 13.2522 9.95445 12.8267L8.34111 11.2144C8.13155 11.012 7.85088 10.9001 7.55956 10.9026C7.26823 10.9051 6.98954 11.022 6.78354 11.228C6.57753 11.434 6.46067 11.7127 6.45814 12.004C6.45561 12.2953 6.5676 12.576 6.77 12.7856L8.38222 14.3978L8.42778 14.4433C8.79111 14.8067 9.13889 15.1556 9.46445 15.4011C9.82778 15.6767 10.3044 15.9344 10.9144 15.9078C11.5256 15.88 11.9767 15.5789 12.3144 15.2722C12.6144 14.9978 12.9311 14.6189 13.2589 14.2244L13.3 14.1756L17.2978 9.37778Z",
-                fill: _color
+                fill: "currentColor"
             }),
             /*#__PURE__*/ jsx("path", {
                 fillRule: "evenodd",

package/dist/web/CircleCheckIcon.d.ts

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

package/dist/web/CircleCheckIcon.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 CircleCheckIcon_CircleCheckIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const CircleCheckIcon = ({ 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: "M8.11523 2.78809C10.5572 1.75605 13.3086 1.73732 15.7646 2.73535C18.2207 3.73341 20.1802 5.66673 21.2119 8.11035C22.2435 10.5539 22.2635 13.3077 21.2666 15.7656C20.2697 18.2236 18.3371 20.1849 15.8955 21.2178C14.6648 21.7377 13.3418 22.0037 12.0059 22C9.69812 22.0037 7.45957 21.2076 5.67188 19.7471C3.88435 18.2866 2.65754 16.2516 2.19922 13.9883C1.7409 11.7249 2.07981 9.37274 3.1582 7.33105C4.2367 5.28932 5.98815 3.68381 8.11523 2.78809ZM12.0059 3.57031C7.35309 3.57031 3.58008 7.34669 3.58008 12.0029C3.58018 16.6591 7.35316 20.4346 12.0059 20.4346C16.6584 20.4344 20.4315 16.659 20.4316 12.0029C20.4316 7.34677 16.6585 3.57045 12.0059 3.57031ZM17.5283 7.82812C17.7373 7.82812 17.9382 7.91072 18.0859 8.05859C18.2336 8.20645 18.3164 8.40719 18.3164 8.61621C18.3164 8.82524 18.2336 9.02598 18.0859 9.17383L10.8916 16.3535C10.7472 16.501 10.55 16.5859 10.3438 16.5889C10.1376 16.5859 9.94121 16.5009 9.79688 16.3535L6.04297 12.5977C5.89524 12.4498 5.81254 12.2491 5.8125 12.04C5.8125 11.831 5.89526 11.6303 6.04297 11.4824C6.19074 11.3345 6.39161 11.251 6.60059 11.251C6.80942 11.2511 7.00955 11.3346 7.15723 11.4824L10.3438 14.6904L16.9707 8.05859C17.1185 7.91072 17.3193 7.82813 17.5283 7.82812Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };
-CircleCheckIcon_CircleCheckIcon.displayName = 'CircleCheckIcon|circle-check';
-const CircleCheckIcon = CircleCheckIcon_CircleCheckIcon;
-export { CircleCheckIcon as default };
+CircleCheckIcon.displayName = 'CircleCheckIcon|circle-check';
+const web_CircleCheckIcon = CircleCheckIcon;
+export { web_CircleCheckIcon as default };

package/dist/web/CircleChevronDownIcon.d.ts

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

package/dist/web/CircleChevronDownIcon.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 CircleChevronDownIcon_CircleChevronDownIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const CircleChevronDownIcon = ({ 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.43262ZM7.74512 9.28027C7.84476 9.28114 7.94359 9.30153 8.03516 9.34082C8.12679 9.38018 8.21001 9.43803 8.2793 9.50977L11.9971 13.2275L15.7148 9.50977C15.8565 9.37296 16.0463 9.29713 16.2432 9.29883C16.44 9.30054 16.6283 9.37937 16.7676 9.51855C16.9068 9.65777 16.9855 9.8461 16.9873 10.043C16.989 10.2398 16.914 10.4297 16.7773 10.5713L12.5283 14.8203C12.3875 14.9611 12.1962 15.04 11.9971 15.04C11.7979 15.04 11.6067 14.9611 11.4658 14.8203L7.2168 10.5713C7.14528 10.5022 7.08814 10.4195 7.04883 10.3281C7.00951 10.2366 6.98919 10.1377 6.98828 10.0381C6.98742 9.93841 7.00622 9.83933 7.04395 9.74707C7.08171 9.65476 7.13749 9.57052 7.20801 9.5C7.27842 9.42963 7.36198 9.37367 7.4541 9.33594C7.54632 9.29821 7.64549 9.27945 7.74512 9.28027Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };
-CircleChevronDownIcon_CircleChevronDownIcon.displayName = 'CircleChevronDownIcon|circle-chevron-down';
-const CircleChevronDownIcon = CircleChevronDownIcon_CircleChevronDownIcon;
-export { CircleChevronDownIcon as default };
+CircleChevronDownIcon.displayName = 'CircleChevronDownIcon|circle-chevron-down';
+const web_CircleChevronDownIcon = CircleChevronDownIcon;
+export { web_CircleChevronDownIcon as default };

package/dist/web/CircleChevronUpIcon.d.ts

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

package/dist/web/CircleChevronUpIcon.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 CircleChevronUpIcon_CircleChevronUpIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const CircleChevronUpIcon_CircleChevronUpIcon = ({ 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 22.0996C13.3629 22.0996 14.686 21.8326 15.9316 21.3057C17.1343 20.7969 18.2144 20.0688 19.1416 19.1416C20.0688 18.2144 20.797 17.1343 21.3057 15.9316C21.8326 14.686 22.0996 13.363 22.0996 12C22.0996 10.6371 21.8325 9.31403 21.3057 8.06836C20.7969 6.86567 20.0688 5.78556 19.1416 4.8584C18.2144 3.93118 17.1343 3.20302 15.9316 2.69434C14.6859 2.16745 13.3629 1.90039 12 1.90039C10.637 1.90039 9.31404 2.16748 8.06836 2.69434C6.86566 3.20304 5.78559 3.93121 4.8584 4.8584C3.93121 5.78559 3.20307 6.86567 2.69434 8.06836C2.16749 9.31403 1.90039 10.637 1.90039 12C1.90039 13.3629 2.16746 14.6859 2.69434 15.9316C3.20307 17.1343 3.93121 18.2144 4.8584 19.1416C5.78558 20.0688 6.8657 20.797 8.06836 21.3057C9.31404 21.8326 10.6371 22.0996 12 22.0996ZM12 20.5674C7.2764 20.5674 3.43262 16.7236 3.43262 12C3.43262 7.27643 7.2764 3.43262 12 3.43262C16.7236 3.43263 20.5674 7.27644 20.5674 12C20.5674 16.7236 16.7236 20.5674 12 20.5674ZM7.74512 14.7197C7.84476 14.7189 7.94359 14.6985 8.03516 14.6592C8.12679 14.6198 8.21001 14.562 8.2793 14.4902L11.9971 10.7725L15.7148 14.4902C15.8565 14.627 16.0463 14.7029 16.2432 14.7012C16.44 14.6995 16.6283 14.6206 16.7676 14.4814C16.9068 14.3422 16.9855 14.1539 16.9873 13.957C16.989 13.7602 16.914 13.5703 16.7773 13.4287L12.5283 9.17969C12.3875 9.03889 12.1962 8.95997 11.9971 8.95996C11.7979 8.95996 11.6067 9.03888 11.4658 9.17969L7.2168 13.4287C7.14528 13.4978 7.08814 13.5805 7.04883 13.6719C7.00951 13.7634 6.98919 13.8623 6.98828 13.9619C6.98742 14.0616 7.00622 14.1607 7.04395 14.2529C7.08171 14.3452 7.13749 14.4295 7.20801 14.5C7.27842 14.5704 7.36198 14.6263 7.4541 14.6641C7.54632 14.7018 7.64549 14.7206 7.74512 14.7197Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/CircleCloseFadedIcon.d.ts

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

package/dist/web/CircleCloseFadedIcon.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 CircleCloseFadedIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const CircleCloseFadedIcon = ({ 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 CircleCloseFadedIcon = ({ size = 16, width = size, height = size, color =
                 cx: 12,
                 cy: 12,
                 r: 10,
-                fill: _color
+                fill: "currentColor"
             }),
             /*#__PURE__*/ jsx("path", {
                 d: "M13.3196 12.2757L16.8263 15.7423C17.093 16.009 17.093 16.4357 16.8263 16.689C16.5596 16.9557 16.133 16.9557 15.8663 16.689L12.3596 13.249L8.91963 16.7023C8.65296 16.969 8.2263 16.969 7.97296 16.7023C7.7063 16.4357 7.7063 16.009 7.97296 15.7557L11.3996 12.3023L7.75963 8.70234C7.49296 8.43568 7.49296 8.00901 7.75963 7.75568C8.0263 7.48901 8.45296 7.48901 8.71963 7.75568L12.3463 11.3423L15.9196 7.75568C16.1863 7.48901 16.613 7.48901 16.8663 7.75568C17.133 8.02234 17.133 8.44901 16.8663 8.70234L13.3196 12.2757Z",
-                fill: _color
+                fill: "currentColor"
             })
         ]
     });

package/dist/web/CircleCloseFilledIcon.d.ts

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

package/dist/web/CircleCloseFilledIcon.js

@@ -1,19 +1,19 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
-import { isThemeColor } from "../core/index.js";
-import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
-const CircleCloseFilledIcon_CircleCloseFilledIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const CircleCloseFilledIcon_CircleCloseFilledIcon = ({ 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: "M13.414 12L16.243 9.172C16.4306 8.98436 16.5361 8.72986 16.5361 8.4645C16.5361 8.19914 16.4306 7.94464 16.243 7.757C16.0554 7.56936 15.8009 7.46394 15.5355 7.46394C15.2701 7.46394 15.0156 7.56936 14.828 7.757L12 10.586L9.172 7.757C8.98436 7.56936 8.72986 7.46394 8.4645 7.46394C8.19914 7.46394 7.94464 7.56936 7.757 7.757C7.56936 7.94464 7.46394 8.19914 7.46394 8.4645C7.46394 8.72986 7.56936 8.98436 7.757 9.172L10.586 12L7.757 14.828C7.56936 15.0156 7.46394 15.2701 7.46394 15.5355C7.46394 15.8009 7.56936 16.0554 7.757 16.243C7.94464 16.4306 8.19914 16.5361 8.4645 16.5361C8.72986 16.5361 8.98436 16.4306 9.172 16.243L12 13.414L14.828 16.243C15.0156 16.4306 15.2701 16.5361 15.5355 16.5361C15.8009 16.5361 16.0554 16.4306 16.243 16.243C16.4306 16.0554 16.5361 15.8009 16.5361 15.5355C16.5361 15.2701 16.4306 15.0156 16.243 14.828L13.414 12ZM12 22C6.477 22 2 17.523 2 12C2 6.477 6.477 2 12 2C17.523 2 22 6.477 22 12C22 17.523 17.523 22 12 22Z",
-                fill: _color
+                fill: "currentColor"
             }),
             /*#__PURE__*/ jsx("path", {
                 d: "M13.4145 11.9999L16.2435 9.17192C16.4311 8.98428 16.5365 8.72979 16.5365 8.46442C16.5365 8.19906 16.4311 7.94456 16.2435 7.75692C16.0558 7.56928 15.8013 7.46387 15.536 7.46387C15.2706 7.46387 15.0161 7.56928 14.8285 7.75692L12.0005 10.5859L9.17247 7.75692C8.98483 7.56928 8.73034 7.46387 8.46497 7.46387C8.19961 7.46387 7.94511 7.56928 7.75747 7.75692C7.56983 7.94456 7.46442 8.19906 7.46442 8.46442C7.46442 8.72979 7.56983 8.98428 7.75747 9.17192L10.5865 11.9999L7.75747 14.8279C7.56983 15.0156 7.46442 15.2701 7.46442 15.5354C7.46442 15.8008 7.56983 16.0553 7.75747 16.2429C7.94511 16.4306 8.19961 16.536 8.46497 16.536C8.73034 16.536 8.98483 16.4306 9.17247 16.2429L12.0005 13.4139L14.8285 16.2429C15.0161 16.4306 15.2706 16.536 15.536 16.536C15.8013 16.536 16.0558 16.4306 16.2435 16.2429C16.4311 16.0553 16.5365 15.8008 16.5365 15.5354C16.5365 15.2701 16.4311 15.0156 16.2435 14.8279L13.4145 11.9999Z",

package/dist/web/CircleCloseIcon.d.ts

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