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

package/dist/web/AllTokensIcon.js

@@ -1,24 +1,24 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
-import { isThemeColor } from "../core/index.js";
-import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
-const AllTokensIcon_AllTokensIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const AllTokensIcon_AllTokensIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsxs("svg", {
         width: width,
         height: height,
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,
         children: [
             /*#__PURE__*/ jsx("path", {
                 d: "M6.44519 11.4605C6.44515 12.263 6.60319 13.0576 6.91029 13.7991C7.21738 14.5405 7.66752 15.2142 8.23499 15.7817C8.80246 16.3491 9.47616 16.7993 10.2176 17.1064C10.9591 17.4135 11.7538 17.5716 12.5563 17.5716C13.3588 17.5716 14.1535 17.4135 14.895 17.1064C15.6364 16.7993 16.3101 16.3491 16.8776 15.7817C17.4451 15.2142 17.8952 14.5405 18.2023 13.7991C18.5094 13.0576 18.6675 12.263 18.6674 11.4605C18.6675 10.658 18.5094 9.86331 18.2023 9.12188C17.8952 8.38044 17.4451 7.70676 16.8776 7.13929C16.3101 6.57181 15.6364 6.12167 14.895 5.81455C14.1535 5.50744 13.3588 5.34937 12.5563 5.34937C11.7538 5.34937 10.9591 5.50744 10.2176 5.81455C9.47616 6.12167 8.80246 6.57181 8.23499 7.13929C7.66752 7.70676 7.21738 8.38044 6.91029 9.12188C6.60319 9.86331 6.44515 10.658 6.44519 11.4605Z",
-                fill: _color,
+                fill: "currentColor",
                 fillOpacity: 0.2
             }),
             /*#__PURE__*/ jsx("path", {
                 d: "M12.001 1.91602C14.1127 1.91606 16.1321 2.49268 17.7695 3.64746H17.7705C17.928 3.75259 18.0427 3.89085 18.0859 4.06348C18.1289 4.23579 18.0975 4.42798 17.9951 4.63281L17.9883 4.64746L17.9766 4.65918C17.8688 4.76687 17.7304 4.84943 17.5518 4.87695C17.3745 4.9042 17.1652 4.87598 16.916 4.77637L16.9004 4.76953L16.8887 4.75879C15.5785 3.63581 13.8893 3.1641 12.001 3.16406C7.19906 3.16406 3.33887 7.02426 3.33887 11.8262C3.33916 16.6271 7.29377 20.4883 12.001 20.4883C12.9194 20.4883 13.9176 20.3954 14.8301 20.0488C14.8003 19.9502 14.7806 19.8712 14.7705 19.791C14.7577 19.6885 14.7578 19.5861 14.7578 19.4453C14.7578 18.0569 15.9456 16.8693 17.334 16.8691C18.8128 16.8693 20.1004 18.0518 20.1006 19.54C20.1003 20.9283 18.9127 22.1161 17.5244 22.1162C16.7616 22.1161 16.0894 21.8369 15.5977 21.3691C14.4612 21.8348 13.2325 22.1162 12.001 22.1162C6.4221 22.1162 1.90163 17.5954 1.90137 12.0166C1.90137 6.43756 6.42194 1.91602 12.001 1.91602ZM17.334 18.4023C16.9743 18.4024 16.692 18.5141 16.5 18.7061C16.3081 18.898 16.1964 19.1804 16.1963 19.54C16.1964 19.8995 16.3083 20.1821 16.5 20.374C16.6919 20.5658 16.9745 20.6786 17.334 20.6787C17.6948 20.6787 18.0022 20.5659 18.2061 20.373C18.4076 20.1821 18.5174 19.9039 18.4736 19.5527L18.4717 19.54H18.4727C18.4726 19.1806 18.3597 18.898 18.168 18.7061C17.976 18.5143 17.6935 18.4024 17.334 18.4023ZM13.626 8.29785H13.625C14.587 8.29863 15.3303 8.51506 15.8203 8.99219C16.3124 9.47195 16.5298 10.1961 16.4814 11.1641V14.0166C16.4815 14.3941 16.5052 14.7197 16.5625 14.9834C16.6201 15.2479 16.7104 15.4409 16.834 15.5645L17.0039 15.7354H15.6738L15.6445 15.7061C15.4116 15.473 15.2975 15.1837 15.2549 14.8867C14.7006 15.6113 13.7012 15.9257 12.5723 15.9258H12.5596C11.7935 15.83 11.2004 15.6602 10.7861 15.3467C10.3657 15.0282 10.1412 14.5693 10.0918 13.9287L10.0908 13.9209H10.0918C10.0919 13.1827 10.339 12.6052 10.8174 12.2021C11.2924 11.8022 11.9831 11.5845 12.8516 11.5361L13.3584 11.4961C13.8373 11.4534 14.2349 11.4028 14.5459 11.3584C14.7536 11.3287 14.9223 11.3017 15.0527 11.2822C15.127 11.2711 15.1921 11.2626 15.2441 11.2568C15.3149 10.6968 15.1979 10.2804 14.9395 10.001C14.6676 9.70745 14.2229 9.54498 13.6201 9.54492H13.6133L13.6055 9.54395C12.9537 9.45091 12.4823 9.54685 12.165 9.76562C11.8499 9.98301 11.6696 10.3335 11.624 10.7881L11.6123 10.9033L11.501 10.876L10.3574 10.5898L10.2588 10.5654L10.2852 10.4668C10.4812 9.7318 10.8756 9.16225 11.4463 8.79004C12.016 8.41852 12.7532 8.24936 13.626 8.29785ZM19.3389 15.5449H18.0918V5.63086H19.3389V15.5449ZM22.1006 15.5449H20.8535V5.63086H22.1006V15.5449ZM15.1045 12.1523C15.0008 12.2026 14.8623 12.2495 14.6924 12.292C14.3516 12.3772 13.8688 12.4492 13.2471 12.4971C12.6372 12.544 12.1808 12.6847 11.8799 12.8965C11.584 13.1049 11.4347 13.3841 11.4346 13.7305C11.4347 14.0769 11.5835 14.3326 11.8418 14.5049C12.1051 14.6803 12.4885 14.7734 12.9531 14.7734C13.6478 14.726 14.1689 14.5175 14.5273 14.1816C14.8847 13.8466 15.0913 13.3744 15.1387 12.7783V12.1338C15.1273 12.1398 15.1163 12.1466 15.1045 12.1523Z",
-                fill: _color
+                fill: "currentColor"
             })
         ]
     });

package/dist/web/AppLockIcon.d.ts

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

package/dist/web/AppLockIcon.js

@@ -1,35 +1,35 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
-import { isThemeColor } from "../core/index.js";
-import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
-const AppLockIcon_AppLockIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const AppLockIcon_AppLockIcon = ({ 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: "M4.50977 4.70911C4.50977 4.29986 4.84272 3.96692 5.25196 3.96692H14.9004C15.3096 3.96692 15.6426 4.29986 15.6426 4.70911V9.74036C15.6426 10.1503 15.9749 10.4825 16.3848 10.4825C16.7947 10.4825 17.127 10.1503 17.127 9.74036V4.70911C17.127 3.47941 16.1301 2.48254 14.9004 2.48254H5.25196C4.02227 2.48254 3.0254 3.47941 3.0254 4.70911V19.256C3.0254 20.4857 4.02227 21.4825 5.25196 21.4825H10.834C11.2439 21.4825 11.5762 21.1503 11.5762 20.7404C11.5762 20.3305 11.2439 19.9982 10.834 19.9982H5.25196C4.84272 19.9982 4.50977 19.6652 4.50977 19.256V4.70911Z",
-                fill: _color
+                fill: "currentColor"
             }),
             /*#__PURE__*/ jsx("path", {
                 d: "M10.062 16.7345C10.2343 16.7354 10.4025 16.7872 10.5453 16.8836C10.6881 16.9799 10.7992 17.1164 10.8646 17.2759C10.9299 17.4353 10.9465 17.6105 10.9124 17.7794C10.8783 17.9482 10.7949 18.1032 10.6727 18.2247C10.5506 18.3463 10.3952 18.4289 10.2262 18.4622C10.0571 18.4955 9.88199 18.478 9.72289 18.4118C9.5638 18.3457 9.42786 18.2339 9.33223 18.0906C9.23659 17.9473 9.18556 17.7789 9.18555 17.6066C9.18584 17.4918 9.20874 17.3781 9.25294 17.2722C9.29714 17.1662 9.36178 17.07 9.44317 16.989C9.52455 16.908 9.62109 16.8439 9.72727 16.8002C9.83345 16.7565 9.94719 16.7342 10.062 16.7345Z",
-                fill: _color
+                fill: "currentColor"
             }),
             /*#__PURE__*/ jsx("path", {
                 d: "M11.3731 6.04504H8.7754C8.57856 6.04504 8.38978 5.96685 8.25059 5.82766C8.11141 5.68848 8.03321 5.4997 8.03321 5.30286C8.03321 5.10602 8.11141 4.91724 8.25059 4.77805C8.38978 4.63886 8.57856 4.56067 8.7754 4.56067H11.3731C11.5699 4.56067 11.7587 4.63886 11.8979 4.77805C12.037 4.91724 12.1152 5.10602 12.1152 5.30286C12.1152 5.4997 12.037 5.68848 11.8979 5.82766C11.7587 5.96685 11.5699 6.04504 11.3731 6.04504Z",
-                fill: _color
+                fill: "currentColor"
             }),
             /*#__PURE__*/ jsx("path", {
                 d: "M19.3732 15.2159H19.1605V13.8597C19.1605 12.5481 18.092 11.4825 16.7767 11.4825C15.4614 11.4825 14.3929 12.5481 14.3929 13.8597V15.2133H14.1803C13.2955 15.2133 12.5762 15.9306 12.5762 16.8129V19.9179C12.5762 20.8002 13.2981 21.5175 14.1803 21.5175H19.3705C20.2553 21.5149 20.9746 20.7976 20.9746 19.9179V16.8155C20.9746 15.9332 20.2553 15.2159 19.3732 15.2159ZM18.0264 15.2159H15.527V13.8597C15.527 13.1712 16.0889 12.6135 16.7767 12.6135C17.4672 12.6135 18.0264 13.1738 18.0264 13.8597V15.2159ZM13.7103 16.8155C13.7103 16.5563 13.923 16.3443 14.1829 16.3443H19.3732C19.6331 16.3443 19.8457 16.5563 19.8457 16.8155V19.9205C19.8457 20.1797 19.6331 20.3918 19.3732 20.3918H14.1803C13.9203 20.3918 13.7077 20.1797 13.7077 19.9205V16.8155H13.7103Z",
-                fill: _color
+                fill: "currentColor"
             }),
             /*#__PURE__*/ jsx("path", {
                 d: "M16.7767 19.4519C17.0891 19.4519 17.3438 19.1979 17.3438 18.8864V17.8522C17.3438 17.5407 17.0891 17.2868 16.7767 17.2868C16.4643 17.2868 16.2096 17.5407 16.2096 17.8522V18.8864C16.2096 19.1979 16.4643 19.4519 16.7767 19.4519Z",
-                fill: _color
+                fill: "currentColor"
             })
         ]
     });

package/dist/web/AppleIcon.d.ts

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

package/dist/web/AppleIcon.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 AppleIcon_AppleIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const AppleIcon_AppleIcon = ({ 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.5564 7.34863C16.1563 7.42364 17.8063 7.57368 18.8562 9.14844C18.7812 9.22343 16.9062 10.3482 16.906 12.5977C16.906 15.2958 19.2283 16.1966 19.3806 16.2725C19.3054 16.349 19.0054 17.5484 18.1062 18.8223C17.3564 19.872 16.5314 20.9969 15.3318 20.9971C14.132 20.9971 13.6816 20.2471 12.3318 20.2471C10.9821 20.2471 10.5318 20.9221 9.40698 20.9971C8.2073 21.0718 7.3072 19.8718 6.55737 18.7471C4.98268 16.4974 3.7836 12.3734 5.35815 9.67383C6.18302 8.32406 7.60744 7.42389 9.10718 7.42383C10.307 7.34882 11.4323 8.17383 12.1072 8.17383C12.8571 8.17361 14.1318 7.19871 15.5564 7.34863ZM15.4812 2.99902C15.6312 4.04878 15.1816 5.09875 14.5818 5.84863C13.9819 6.59852 12.9315 7.19902 11.8816 7.12402C11.7316 6.07418 12.2573 5.02355 12.8572 4.34863C13.4571 3.59901 14.5816 2.99913 15.4812 2.99902Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/ArrowDownIcon.d.ts

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

package/dist/web/ArrowDownIcon.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 ArrowDownIcon_ArrowDownIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const ArrowDownIcon_ArrowDownIcon = ({ 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: "M4.24414 13.0312L5.76172 11.4971L10.8838 16.6191L10.8838 3.22168L13.0996 3.22168L13.0996 16.6191L18.2051 11.4971L19.7559 13.0312L11.9912 20.7783L4.24414 13.0312Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/ArrowDownToLineIcon.d.ts

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

package/dist/web/ArrowDownToLineIcon.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 ArrowDownToLineIcon_ArrowDownToLineIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const ArrowDownToLineIcon_ArrowDownToLineIcon = ({ 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: "M16.2783 20.1821C16.7804 20.1821 17.1875 20.5892 17.1875 21.0913C17.1873 21.5933 16.7803 22.0005 16.2783 22.0005H7.72164C7.21977 22.0003 6.81262 21.5932 6.81246 21.0913C6.81246 20.5893 7.21968 20.1823 7.72164 20.1821H16.2783ZM12 1.99951C12.5019 1.99959 12.909 2.40677 12.9091 2.90869V10.9292H16.2783C17.1596 10.9292 17.6626 11.936 17.1338 12.6411L12.8554 18.3452C12.4276 18.9154 11.5723 18.9156 11.1445 18.3452L6.86618 12.6411C6.33745 11.9361 6.84054 10.9295 7.72164 10.9292H11.0908V2.90869C11.0909 2.40672 11.498 1.99951 12 1.99951Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/ArrowLeftIcon.d.ts

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

package/dist/web/ArrowLeftIcon.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 ArrowLeftIcon_ArrowLeftIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const ArrowLeftIcon_ArrowLeftIcon = ({ 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: "M10.9688 4.24414L12.5029 5.76172L7.38086 10.8838L20.7783 10.8838L20.7783 13.0996L7.38086 13.0996L12.5029 18.2051L10.9688 19.7559L3.22168 11.9912L10.9688 4.24414Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/ArrowRightIcon.d.ts

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

package/dist/web/ArrowRightIcon.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 ArrowRightIcon_ArrowRightIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const ArrowRightIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M13.0312 19.7559L11.4971 18.2383L16.6191 13.1162H3.22168V10.9004H16.6191L11.4971 5.79492L13.0312 4.24414L20.7783 12.0088L13.0312 19.7559Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };
-ArrowRightIcon_ArrowRightIcon.displayName = 'ArrowRightIcon|arrow-right';
-const ArrowRightIcon = ArrowRightIcon_ArrowRightIcon;
-export { ArrowRightIcon as default };
+ArrowRightIcon.displayName = 'ArrowRightIcon|arrow-right';
+const web_ArrowRightIcon = ArrowRightIcon;
+export { web_ArrowRightIcon as default };

package/dist/web/ArrowRightLeftIcon.d.ts

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

package/dist/web/ArrowRightLeftIcon.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 ArrowRightLeftIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const ArrowRightLeftIcon = ({ 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: "M20.2611 14.0712C20.7546 14.0712 21.1543 14.4708 21.1543 14.9643C21.1543 15.4578 20.7546 15.8575 20.2611 15.8575H10.4016V19.0619C10.4016 19.9157 9.42671 20.4032 8.74361 19.8909L3.21777 15.7459C2.66518 15.3314 2.66515 14.5023 3.21777 14.0879C3.26933 14.0823 7.89957 14.0824 9.69837 14.0866C9.74968 14.0774 9.80226 14.0712 9.85621 14.0712H20.2611Z",
-                fill: _color
+                fill: "currentColor"
             }),
             /*#__PURE__*/ jsx("path", {
                 d: "M13.6021 4.93802C13.6021 4.08414 14.577 3.59669 15.2601 4.10902L20.786 8.25403C21.3386 8.66851 21.3386 9.49756 20.786 9.91204C20.7318 9.91757 16.0992 9.91621 14.3028 9.91204C14.2522 9.92092 14.2006 9.93 14.1475 9.93H3.74264C3.24945 9.92988 2.84982 9.52997 2.84947 9.03684C2.84947 8.5434 3.24923 8.14379 3.74264 8.14367H13.6021V4.93802Z",
-                fill: _color
+                fill: "currentColor"
             })
         ]
     });

package/dist/web/ArrowUpIcon.d.ts

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

package/dist/web/ArrowUpIcon.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 ArrowUpIcon_ArrowUpIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const ArrowUpIcon = ({ 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: "M19.7559 10.9688L18.2383 12.5029L13.1162 7.38086V20.7783H10.9004V7.38086L5.79492 12.5029L4.24414 10.9688L12.0088 3.22168L19.7559 10.9688Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };
-ArrowUpIcon_ArrowUpIcon.displayName = 'ArrowUpIcon|arrow-up';
-const ArrowUpIcon = ArrowUpIcon_ArrowUpIcon;
-export { ArrowUpIcon as default };
+ArrowUpIcon.displayName = 'ArrowUpIcon|arrow-up';
+const web_ArrowUpIcon = ArrowUpIcon;
+export { web_ArrowUpIcon as default };

package/dist/web/Assets2Icon.d.ts

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

package/dist/web/Assets2Icon.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 Assets2Icon_Assets2Icon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const Assets2Icon_Assets2Icon = ({ 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.4874 9.75C16.9598 9.75001 18.3546 10.0501 19.4396 10.6504C20.447 11.1748 21.2999 12.0755 21.2999 13.2002C21.2998 13.725 21.0675 14.25 20.8351 14.625C21.0675 15 21.2999 15.4501 21.2999 16.0498C21.2999 17.175 20.447 18.0747 19.4396 18.5996C18.3546 19.1994 17.0373 19.5 15.4874 19.5C14.1187 19.505 12.767 19.1967 11.5353 18.5996C10.5278 18.0747 9.67496 17.175 9.67493 16.0498C9.67493 15.45 9.90791 15.0001 10.2179 14.625C9.90796 14.25 9.67501 13.725 9.67493 13.2002C9.67493 12.0755 10.5278 11.1753 11.5353 10.6504C12.6202 10.0501 14.0151 9.75 15.4874 9.75ZM9.51965 4.5C11.2246 4.5 12.6977 4.87478 13.9376 5.47461C15.1 6.07493 16.1068 6.97525 16.2618 8.1748C16.3393 8.5498 16.0301 9.00011 15.6427 9.0752C15.2552 9.15011 14.7895 8.8497 14.712 8.47461C14.6343 7.94982 14.1694 7.34973 13.1622 6.90039C12.2323 6.45043 10.9149 6.15039 9.4425 6.15039C7.89259 6.1504 6.49746 6.5249 5.5675 7.0498C4.63769 7.42485 4.25022 8.02495 4.25012 8.5498C4.25012 8.99971 4.48267 9.52467 5.17981 9.97461C5.79979 10.4246 6.73024 10.7997 7.8927 11.0244C8.28018 11.0998 8.59031 11.4748 8.51282 11.9248C8.43531 12.2999 8.04713 12.6003 7.58215 12.5254C6.41985 12.3001 5.33491 11.9243 4.48254 11.3994C4.48254 11.3994 4.48275 11.4745 4.4054 11.4746C4.3279 11.6999 4.25012 11.8499 4.25012 12.0752C4.25016 12.5246 4.4826 12.9752 5.17981 13.5C5.79979 13.9495 6.73024 14.3245 7.8927 14.5498C8.28016 14.6247 8.59031 14.9997 8.51282 15.4502C8.43517 15.8251 8.04701 16.1247 7.58215 16.0498C6.34238 15.8251 5.25776 15.4494 4.4054 14.8496C4.32791 14.9994 4.25014 15.2245 4.25012 15.4492C4.25012 15.9746 4.63789 16.5 5.49036 17.0254C6.34282 17.5497 7.58284 17.9241 8.97766 17.999C9.36511 17.9991 9.67493 18.3749 9.67493 18.75C9.67473 19.1998 9.28725 19.5002 8.82239 19.4248C7.19502 19.3499 5.72274 18.8993 4.63782 18.2246C3.55297 17.6248 2.70049 16.6497 2.70032 15.4502C2.70032 14.9254 2.8556 14.4753 3.08801 14.0254L3.32043 13.7998C2.93297 13.2749 2.70034 12.7504 2.70032 12.0752C2.70032 11.5503 2.85555 11.1004 3.08801 10.6504C3.16551 10.5006 3.2426 10.4245 3.39758 10.3496C2.9328 9.89964 2.70032 9.29981 2.70032 8.5498C2.70041 7.27487 3.63044 6.22549 4.87024 5.55078C6.1101 4.87558 7.73738 4.50006 9.51965 4.5ZM19.5948 15.6748C18.5099 16.2751 17.0373 16.6494 15.4874 16.6494C13.9375 16.6494 12.465 16.2751 11.38 15.6748C11.2251 15.8251 11.2247 15.9 11.2247 16.0498C11.2248 16.4249 11.5348 16.8752 12.3097 17.3252C13.0847 17.7003 14.2475 18 15.4874 18C16.7274 18 17.8902 17.7747 18.6652 17.3252C19.44 16.8753 19.7501 16.4249 19.7501 16.0498C19.7501 15.9 19.6723 15.8245 19.5948 15.6748ZM15.4874 11.25C14.2475 11.25 13.0847 11.4753 12.3097 11.9248C11.5349 12.3748 11.2247 12.8251 11.2247 13.2002C11.2249 13.4254 11.3797 13.7259 11.6896 14.0254L11.7677 14.0996L11.8448 14.1748C12.5423 14.7002 13.86 15.1494 15.4874 15.1494C17.192 15.1494 18.5867 14.6251 19.2843 14.0254C19.5942 13.7253 19.75 13.4254 19.7501 13.2002C19.7501 12.8252 19.4399 12.3747 18.6652 11.9248C17.8902 11.5497 16.7274 11.25 15.4874 11.25Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/AssetsIcon.d.ts

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

package/dist/web/AssetsIcon.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 AssetsIcon_AssetsIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const AssetsIcon_AssetsIcon = ({ 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: "M16.7 9.59518C19.2652 9.59518 21.4252 10.4299 21.5899 11.7655L21.6 11.7656V18.2295H21.5899C21.4252 19.5652 19.2652 20.3999 16.7 20.3999C14.1348 20.3999 11.9747 19.5652 11.8101 18.2295H11.8V11.7655H11.8101C11.9747 10.4299 14.1348 9.59518 16.7 9.59518ZM13.0999 16.6784L13.1 18.0644C13.1 18.1289 13.1448 18.2101 13.2366 18.2995L13.2571 18.3188C13.3945 18.4449 13.6237 18.5858 13.9512 18.7185C14.6569 19.0045 15.6412 19.1732 16.7 19.1732C17.7588 19.1732 18.743 19.0045 19.4487 18.7185C19.7762 18.5858 20.0055 18.4449 20.1429 18.3188L20.1633 18.2995C20.2519 18.2133 20.2967 18.1347 20.2998 18.0714L20.3 18.0644L20.3 16.6784C19.3989 17.1278 18.1107 17.3802 16.7 17.3802C15.2892 17.3802 14.0011 17.1278 13.0999 16.6784ZM10.875 2.3999C14.8575 2.3999 18.15 3.71302 18.15 5.65548L18.149 5.5983C18.1494 5.60464 18.1496 5.61102 18.1498 5.61739L18.15 5.63188V8.60436C18.15 8.94312 17.859 9.21774 17.5 9.21774C17.1461 9.21774 16.8583 8.95092 16.8501 8.61883L16.85 8.60436L16.8501 7.57017C15.5299 8.41045 13.334 8.91104 10.875 8.91104C8.41602 8.91104 6.22011 8.41045 4.89985 7.57017L4.89998 10.4445C4.89998 10.6259 5.00591 10.8255 5.21541 11.0274L5.24395 11.0543C5.28462 11.0917 5.32679 11.1277 5.37039 11.1621L5.40506 11.189C5.44035 11.2159 5.47745 11.2428 5.51637 11.2696L5.55593 11.2964C5.63361 11.3479 5.71338 11.3966 5.79506 11.4423L5.84248 11.4686C5.8585 11.4773 5.87469 11.486 5.89111 11.4947L5.94093 11.5207C5.96615 11.5337 5.9918 11.5466 6.01793 11.5594L6.07076 11.5851C6.08858 11.5936 6.10661 11.6021 6.1248 11.6106L6.18004 11.636C6.18935 11.6402 6.19871 11.6444 6.20811 11.6486L6.26515 11.6737C6.29398 11.6862 6.32324 11.6986 6.35295 11.711L6.41298 11.7356C6.42308 11.7396 6.43324 11.7437 6.44343 11.7478C6.92117 11.9383 7.47406 12.0958 8.07908 12.2148L8.17763 12.2338C9.00274 12.389 9.92076 12.4733 10.875 12.4733C11.234 12.4733 11.525 12.7479 11.525 13.0867C11.525 13.4254 11.234 13.7 10.875 13.7C8.41602 13.7 6.22011 13.1994 4.89985 12.3592L4.89998 15.2099C4.89998 15.3913 5.00591 15.5909 5.21541 15.7928L5.24395 15.8197C5.28462 15.8571 5.32679 15.8931 5.37039 15.9275L5.40506 15.9544C5.44035 15.9813 5.47745 16.0082 5.51637 16.035L5.55593 16.0618C5.63361 16.1133 5.71338 16.162 5.79506 16.2077L5.84248 16.234C5.8585 16.2427 5.87469 16.2514 5.89111 16.2601L5.94093 16.2861C5.96615 16.2991 5.9918 16.312 6.01793 16.3248L6.07076 16.3505C6.08858 16.359 6.10661 16.3675 6.1248 16.376L6.18004 16.4014C6.18935 16.4056 6.19871 16.4098 6.20811 16.414L6.26515 16.4391C6.29398 16.4516 6.32324 16.464 6.35295 16.4764L6.41298 16.501C6.42308 16.505 6.43324 16.5091 6.44343 16.5132C6.92117 16.7037 7.47406 16.8612 8.07908 16.9803L8.17763 16.9992C9.00274 17.1544 9.92076 17.2387 10.875 17.2387C11.234 17.2387 11.525 17.5133 11.525 17.8521C11.525 18.1908 11.234 18.4654 10.875 18.4654C6.99002 18.4654 3.76169 17.2159 3.60585 15.3514L3.59998 15.3514V5.6319C3.62671 3.70239 6.90865 2.3999 10.875 2.3999ZM20.3 13.5644C19.3989 14.0138 18.1107 14.2662 16.7 14.2662C15.2893 14.2662 14.0011 14.0138 13.0999 13.5644L13.1 15.0447C13.1 15.1092 13.1448 15.1904 13.2366 15.2798L13.2571 15.2991C13.3945 15.4253 13.6237 15.5662 13.9512 15.6989C14.6569 15.9848 15.6412 16.1535 16.7 16.1535C17.7588 16.1535 18.743 15.9848 19.4487 15.6989C19.7762 15.5662 20.0055 15.4253 20.1429 15.2991L20.1633 15.2798C20.2519 15.1936 20.2967 15.115 20.2998 15.0517L20.3 15.0447L20.3 13.5644ZM16.7 10.8219C15.6412 10.8219 14.6569 10.9906 13.9512 11.2766C13.6237 11.4093 13.3945 11.5502 13.2571 11.6763L13.2366 11.6956C13.1447 11.785 13.1 11.8662 13.1 11.9307C13.1 11.9952 13.1448 12.0764 13.2366 12.1658L13.2571 12.1851C13.3945 12.3113 13.6237 12.4522 13.9512 12.5849C14.6569 12.8708 15.6412 13.0395 16.7 13.0395C17.7588 13.0395 18.743 12.8708 19.4487 12.5849C19.7762 12.4522 20.0055 12.3113 20.1429 12.1851L20.1633 12.1658C20.2552 12.0764 20.3 11.9952 20.3 11.9307C20.3 11.8662 20.2552 11.785 20.1633 11.6956L20.1429 11.6763C20.0055 11.5502 19.7762 11.4093 19.4487 11.2766C18.743 10.9906 17.7588 10.8219 16.7 10.8219ZM10.875 3.62665C9.92076 3.62665 9.00274 3.71099 8.17763 3.86617L8.07906 3.88512C7.47406 4.00412 6.92117 4.16162 6.44343 4.35215C6.43321 4.35622 6.42308 4.3603 6.413 4.36439L6.35295 4.38902C6.32358 4.40122 6.29431 4.41365 6.26515 4.42629L6.20811 4.45139C6.19871 4.45558 6.18935 4.4598 6.18006 4.46399L6.1248 4.48934C6.10661 4.49782 6.08858 4.50631 6.07078 4.51485L6.01795 4.54051C5.99216 4.55321 5.96648 4.56612 5.94093 4.57926L5.89111 4.60526C5.87469 4.61394 5.8585 4.62267 5.84248 4.63139L5.79508 4.65762C5.71339 4.70333 5.6336 4.75203 5.55591 4.80359L5.51639 4.83037C5.47859 4.85636 5.44147 4.88323 5.40508 4.91095L5.37039 4.93788C5.32679 4.97226 5.28462 5.00821 5.24395 5.04566L5.21541 5.07258C5.00591 5.27442 4.89998 5.47408 4.89998 5.65548C4.89998 5.83692 5.00591 6.03656 5.21541 6.2384L5.24395 6.26533C5.28462 6.30277 5.32679 6.33872 5.37039 6.3731L5.40506 6.40003C5.44035 6.42694 5.47745 6.4538 5.51637 6.48061L5.55593 6.50739C5.63361 6.55895 5.71338 6.60765 5.79506 6.65336L5.84248 6.67959C5.8585 6.68834 5.87469 6.69704 5.89111 6.70572L5.94093 6.73172C5.96615 6.7447 5.9918 6.75761 6.01793 6.77047L6.07076 6.79613C6.08858 6.80467 6.10661 6.81317 6.1248 6.82164L6.18004 6.84699C6.18935 6.8512 6.19871 6.85541 6.20811 6.85959L6.26515 6.88469C6.29398 6.89719 6.32324 6.90961 6.35295 6.92199L6.41298 6.94662L6.44343 6.95883C6.92117 7.14936 7.47406 7.30686 8.07908 7.42586L8.17763 7.44483C9.00274 7.59999 9.92076 7.68433 10.875 7.68433C11.8292 7.68433 12.7472 7.59999 13.5723 7.44483L13.6709 7.42586C14.2759 7.30686 14.8288 7.14936 15.3065 6.95883C15.3167 6.95476 15.3269 6.95068 15.337 6.9466L15.397 6.92197C15.4264 6.90976 15.4556 6.89733 15.4848 6.88469L15.5418 6.85959C15.5512 6.85541 15.5606 6.8512 15.5699 6.84699L15.6252 6.82164C15.6433 6.81317 15.6614 6.80467 15.6792 6.79613L15.732 6.77047C15.7578 6.75778 15.7835 6.74486 15.809 6.73172L15.8588 6.70572C15.8753 6.69704 15.8915 6.68834 15.9075 6.67959L15.9549 6.65336C16.0366 6.60765 16.1163 6.55895 16.194 6.50739L16.2336 6.48061C16.2714 6.45462 16.3085 6.42775 16.3449 6.40003L16.3796 6.3731C16.4232 6.33872 16.4653 6.30277 16.506 6.26533L16.5345 6.2384C16.744 6.03656 16.85 5.8369 16.85 5.6555C16.85 5.47406 16.744 5.27442 16.5345 5.07258L16.506 5.04566C16.4653 5.00821 16.4232 4.97226 16.3796 4.93788L16.3449 4.91095C16.3085 4.88323 16.2714 4.85636 16.2336 4.83037L16.194 4.80359C16.1163 4.75203 16.0366 4.70333 15.9549 4.65762L15.9075 4.63139C15.8915 4.62267 15.8753 4.61394 15.8588 4.60526L15.809 4.57926C15.7838 4.56629 15.7581 4.55338 15.732 4.54051L15.6792 4.51485C15.6614 4.50631 15.6433 4.49782 15.6252 4.48934L15.5699 4.46399C15.5606 4.45978 15.5512 4.45558 15.5418 4.45139L15.4848 4.42629C15.4556 4.41365 15.4264 4.40122 15.397 4.38902L15.337 4.36439L15.3065 4.35215C14.8288 4.16162 14.2759 4.00412 13.6709 3.88512L13.5723 3.86615C12.7472 3.71099 11.8292 3.62665 10.875 3.62665Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/AxiomIcon.d.ts

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

package/dist/web/AxiomIcon.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 AxiomIcon_AxiomIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const AxiomIcon_AxiomIcon = ({ 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: "M16.1344 14.3193C16.4713 14.3179 16.7931 14.3246 17.1149 14.3262C17.5506 14.3283 17.9868 14.3246 18.4225 14.3281C18.4786 14.3286 18.5353 14.356 18.6031 14.3896C18.633 14.4306 18.6513 14.4532 18.6696 14.4756C19.0366 15.1034 19.4015 15.7331 19.7711 16.3594C20.7045 17.941 21.6406 19.5214 22.5748 21.1025C22.5882 21.1252 22.5963 21.1515 22.6149 21.1943C19.2842 21.1943 15.9713 21.1937 12.6432 21.1973C12.1481 21.1983 11.6686 21.1963 11.1735 21.1973C10.8149 21.1983 10.4715 21.1953 10.1129 21.1963C9.73172 21.1973 9.3662 21.1953 8.98499 21.1963C8.18199 21.1972 7.39442 21.1944 6.59143 21.1953C5.85678 21.1963 5.13763 21.1944 4.40295 21.1953C4.04453 21.1962 3.70183 21.1936 3.34338 21.1943C3.23487 21.1952 3.1417 21.193 3.01819 21.1904C2.4538 21.1891 1.91989 21.1885 1.38635 21.1875C1.38635 21.1875 1.38457 21.1713 1.38538 21.1611C1.38618 21.151 1.38348 21.1422 1.39417 21.1348C1.40291 21.1059 1.40097 21.0846 1.39807 21.0645L1.40002 21.0625C1.49633 20.9204 1.60028 20.7829 1.68811 20.6357C2.28535 19.6351 2.87895 18.6322 3.4762 17.6182C3.85302 16.9609 4.2265 16.3149 4.60315 15.6709C4.80266 15.3298 5.00936 14.9925 5.21057 14.6523C5.25134 14.5834 5.28202 14.5082 5.33362 14.4209C5.36138 14.3807 5.37277 14.3552 5.3844 14.3301C5.39866 14.3298 5.41314 14.3298 5.43713 14.3252C6.07738 14.3227 6.70802 14.325 7.36877 14.3262C7.8567 14.3221 8.31465 14.3188 8.78674 14.3203H11.8561C12.3968 14.3219 12.9228 14.3176 13.4635 14.3193C13.9016 14.321 14.3248 14.3173 14.7477 14.3135C15.2048 14.3172 15.6622 14.3214 16.1344 14.3193ZM12.2809 3.28125C12.3303 3.36333 12.3707 3.4385 12.4205 3.5293C12.4443 3.56422 12.4589 3.58339 12.4733 3.60254C12.6167 3.84896 12.7603 4.09574 12.9137 4.34766C13.1031 4.65355 13.2852 4.95272 13.4615 5.25488C13.5702 5.44105 13.6708 5.63192 13.7838 5.82715C14.0551 6.28211 14.318 6.73037 14.5905 7.18457C14.8541 7.62732 15.1068 8.06519 15.361 8.50195C15.4438 8.64439 15.5292 8.78542 15.6227 8.93457C15.7486 9.14409 15.8644 9.34682 15.9811 9.54883C16.0405 9.65174 16.1014 9.75443 16.1705 9.8623C16.4529 10.3387 16.7266 10.81 17.0143 11.3057C16.5148 11.3057 16.0399 11.3058 15.5358 11.3057C15.4361 11.3091 15.3655 11.3126 15.2799 11.3105C15.0039 11.3044 14.7429 11.3022 14.4821 11.3037C14.0121 11.3065 13.5421 11.312 13.0592 11.3105C12.4623 11.3085 11.878 11.3116 11.2789 11.3096C10.8411 11.3075 10.418 11.3115 9.9801 11.3096C9.462 11.3074 8.95864 11.3102 8.45569 11.3135C8.02945 11.3094 7.60263 11.3056 7.17639 11.3018C7.11672 11.3012 7.05646 11.3018 6.95959 11.3018C8.6458 8.45032 10.3119 5.63369 11.986 2.80273C12.0906 2.97526 12.1812 3.12471 12.2809 3.28125Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/BallIcon.d.ts

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

package/dist/web/BallIcon.js

@@ -1,19 +1,19 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { isThemeColor } from "../core/index.js";
-import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
-const BallIcon_BallIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const BallIcon_BallIcon = ({ 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: "M19.5447 8.93667C19.1351 7.92651 18.5333 7.02046 17.7564 6.24351C16.9794 5.46655 16.0732 4.86479 15.0632 4.45522C14.0876 4.05972 13.0572 3.85913 12 3.85913C10.9427 3.85913 9.91226 4.05972 8.93667 4.45522C7.92651 4.86479 7.02046 5.46655 6.24351 6.24351C5.46655 7.02046 4.86479 7.92671 4.45522 8.93667C4.05972 9.91226 3.85913 10.9427 3.85913 12C3.85913 13.0572 4.05972 14.0876 4.45522 15.0632C4.86479 16.0734 5.46655 16.9794 6.24351 17.7564C7.02046 18.5333 7.92671 19.1351 8.93667 19.5447C9.91206 19.9402 10.9427 20.1408 12 20.1408C13.0572 20.1408 14.0876 19.9402 15.0632 19.5447C16.0734 19.1351 16.9794 18.5333 17.7564 17.7564C18.5333 16.9794 19.1351 16.0732 19.5447 15.0632C19.9402 14.0878 20.1408 13.0572 20.1408 12C20.1408 10.9427 19.9402 9.91226 19.5447 8.93667ZM6.79585 6.79585C8.23062 5.36128 10.1154 4.6439 12 4.6439C12.0156 4.6439 12.0314 4.64429 12.047 4.64448C12.0597 6.47847 11.3992 8.22671 10.1662 9.60132C8.85366 11.0648 7.04976 11.9294 5.08687 12.0361C4.93999 12.0441 4.79214 12.0474 4.64429 12.0466C4.63237 10.1464 5.34937 8.24253 6.79585 6.79585ZM6.79585 17.2041C5.57163 15.9798 4.87007 14.4281 4.69058 12.8283C4.83706 12.8283 4.98374 12.8242 5.12925 12.8164C6.22651 12.7568 7.27944 12.4839 8.25874 12.0054C9.20444 11.5433 10.0419 10.9101 10.7478 10.123C11.4537 9.33608 11.9925 8.43491 12.3494 7.44468C12.6687 6.55835 12.8292 5.63394 12.8285 4.69077C14.4283 4.87046 15.9798 5.57202 17.2041 6.79604C18.4283 8.02026 19.1296 9.57183 19.3093 11.1716C18.3664 11.1708 17.4419 11.3314 16.5554 11.6507C15.5652 12.0076 14.664 12.5464 13.8771 13.2523C13.0902 13.9582 12.4568 14.7957 11.9947 15.7414C11.5162 16.7207 11.2433 17.7736 11.1837 18.8708C11.1759 19.0164 11.1718 19.1628 11.1718 19.3095C9.57202 19.1296 8.02007 18.4281 6.79585 17.2041ZM17.2041 17.2041C15.7574 18.6507 13.8535 19.3675 11.9533 19.3556C11.9525 19.2078 11.9558 19.0599 11.9638 18.913C12.1775 14.9802 15.458 11.9277 19.3556 11.9531C19.3675 13.8533 18.6505 15.7574 17.2041 17.2041Z",
-            fill: _color,
-            stroke: _color,
+            fill: "currentColor",
+            stroke: "currentColor",
             strokeWidth: 0.5
         })
     });

package/dist/web/BanIcon.d.ts

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

package/dist/web/BanIcon.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 BanIcon_BanIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const BanIcon_BanIcon = ({ 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.999 3.74902C16.5553 3.74902 20.2488 7.44284 20.249 11.999C20.249 14.1969 19.3875 16.1922 17.9863 17.6709C17.9519 17.7368 17.9118 17.8011 17.8564 17.8564C17.8011 17.9118 17.7368 17.9519 17.6709 17.9863C16.1922 19.3875 14.1969 20.249 11.999 20.249C7.44284 20.2488 3.74902 16.5553 3.74902 11.999C3.74912 9.79751 4.61318 7.79865 6.01855 6.31934C6.05222 6.25732 6.09306 6.19795 6.14551 6.14551C6.19795 6.09306 6.25732 6.05222 6.31934 6.01855C7.79865 4.61318 9.79751 3.74912 11.999 3.74902ZM6.72656 7.78711C5.80294 8.94176 5.24911 10.4054 5.24902 11.999C5.24902 15.7268 8.27127 18.7488 11.999 18.749C13.5927 18.749 15.0562 18.1951 16.2109 17.2715L6.72656 7.78711ZM11.999 5.24902C10.4054 5.24911 8.94176 5.80294 7.78711 6.72656L17.2715 16.2109C18.1951 15.0562 18.749 13.5927 18.749 11.999C18.7488 8.27127 15.7268 5.24902 11.999 5.24902Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/BookmarkIcon.d.ts

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

package/dist/web/BookmarkIcon.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 BookmarkIcon_BookmarkIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const BookmarkIcon_BookmarkIcon = ({ 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: "M19.6825 14.1993C19.8149 14.1979 19.9462 14.2228 20.0689 14.2725C20.1916 14.3222 20.3032 14.3957 20.3973 14.4888C20.4914 14.5819 20.5661 14.6928 20.6171 14.8149C20.6681 14.9371 20.6943 15.0682 20.6943 15.2005V20.2321C20.6943 20.4039 20.65 20.5728 20.5658 20.7226C20.4815 20.8723 20.3601 20.9979 20.2133 21.0872C20.0665 21.1764 19.8992 21.2264 19.7275 21.2323C19.5558 21.2382 19.3854 21.1998 19.2328 21.1208L16.9971 19.9648L14.7549 21.1208C14.6023 21.2003 14.4317 21.2391 14.2597 21.2335C14.0876 21.2278 13.92 21.1779 13.7728 21.0886C13.6257 20.9993 13.5041 20.8735 13.4198 20.7235C13.3354 20.5734 13.2912 20.4042 13.2913 20.2321V15.2005C13.2913 14.935 13.3968 14.6803 13.5845 14.4926C13.7723 14.3048 14.027 14.1993 14.2925 14.1993H19.6868H19.6825ZM17.4637 2.76599C17.9284 2.76543 18.3764 2.93961 18.7186 3.25397C19.0609 3.56833 19.2724 3.99988 19.3113 4.46296V4.61357L19.3368 11.6942C19.3349 11.8945 19.2575 12.0867 19.1201 12.2324C18.9827 12.3781 18.7954 12.4667 18.5956 12.4803C18.3958 12.494 18.1981 12.4318 18.0422 12.3061C17.8862 12.1804 17.7834 12.0005 17.7543 11.8024V11.6942L17.7246 4.61993C17.7243 4.55925 17.703 4.50054 17.6644 4.45376C17.6257 4.40698 17.572 4.37501 17.5125 4.36327H4.72584C4.66511 4.36427 4.6065 4.38577 4.55952 4.42428C4.51254 4.46278 4.47996 4.51603 4.46705 4.57539V19.1969C4.46768 19.2577 4.48904 19.3165 4.52761 19.3636C4.56617 19.4107 4.61964 19.4431 4.67917 19.4557H4.74069L10.6101 19.4345C10.8104 19.4364 11.0026 19.5137 11.1483 19.6511C11.294 19.7885 11.3826 19.9758 11.3962 20.1756C11.4099 20.3755 11.3477 20.5731 11.222 20.729C11.0963 20.885 10.9164 20.9878 10.7183 21.0169H10.6101L4.74069 21.0381C4.27589 21.0382 3.82797 20.864 3.48547 20.5497C3.14297 20.2355 2.93083 19.8042 2.89099 19.3411V4.61993C2.89043 4.15522 3.06461 3.70728 3.37897 3.36502C3.69333 3.02277 4.12488 2.81122 4.58796 2.77236H4.74069L17.4637 2.76599ZM19.1819 15.7054H14.791V19.4111L16.2949 18.6348C16.4841 18.5366 16.6921 18.4798 16.9049 18.4681C17.1177 18.4564 17.3306 18.4901 17.5295 18.5669L17.6758 18.6348L19.1819 19.4133V15.7011V15.7054ZM11.8361 9.9866C12.0471 9.979 12.2525 10.0555 12.407 10.1993C12.5616 10.3431 12.6526 10.5424 12.6602 10.7534C12.6678 10.9644 12.5913 11.1697 12.4475 11.3243C12.3037 11.4788 12.1044 11.5699 11.8934 11.5775H7.01463C6.80366 11.5775 6.60133 11.4937 6.45216 11.3445C6.30298 11.1953 6.21917 10.993 6.21917 10.7821C6.21917 10.5711 6.30298 10.3688 6.45216 10.2196C6.60133 10.0704 6.80366 9.9866 7.01463 9.9866H11.8361ZM14.9671 6.27236C15.178 6.26476 15.3834 6.34128 15.5379 6.48509C15.6925 6.6289 15.7835 6.82821 15.7911 7.03917C15.7987 7.25014 15.7222 7.45549 15.5784 7.61003C15.4346 7.76458 15.2353 7.85567 15.0243 7.86327H7.01887C6.8079 7.87086 6.60256 7.79434 6.44801 7.65053C6.29347 7.50672 6.20238 7.30741 6.19478 7.09645C6.18719 6.88548 6.26371 6.68014 6.40751 6.52559C6.55132 6.37104 6.75063 6.27995 6.9616 6.27236H14.9671Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };