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

package/dist/web/UploadIcon.js

@@ -1,27 +1,27 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
-import { isThemeColor } from "../core/index.js";
-import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
-const UploadIcon_UploadIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const UploadIcon_UploadIcon = ({ 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: "M2.72827 14.7885C2.87447 14.6423 3.07276 14.5602 3.27952 14.5602C3.48627 14.5602 3.68456 14.6423 3.83076 14.7885C3.97696 14.9347 4.05909 15.133 4.05909 15.3398V17.8422C4.05948 18.2022 4.20263 18.5472 4.45715 18.8018C4.71167 19.0563 5.05676 19.1994 5.4167 19.1998H18.581C18.9409 19.1994 19.286 19.0563 19.5405 18.8018C19.7951 18.5472 19.9382 18.2022 19.9386 17.8422V15.3398C19.9386 15.133 20.0207 14.9347 20.1669 14.7885C20.3131 14.6423 20.5114 14.5602 20.7182 14.5602C20.9249 14.5602 21.1232 14.6423 21.2694 14.7885C21.4156 14.9347 21.4977 15.133 21.4977 15.3398V17.8424C21.4969 18.6156 21.1893 19.357 20.6426 19.9038C20.0958 20.4505 19.3545 20.7581 18.5813 20.759H5.41655C4.64333 20.7581 3.90188 20.4505 3.35513 19.9038C2.80838 19.357 2.50083 18.6157 2.49994 17.8425V15.3398C2.49994 15.133 2.58207 14.9347 2.72827 14.7885Z",
-                fill: _color
+                fill: "currentColor"
             }),
             /*#__PURE__*/ jsx("path", {
                 d: "M11.927 16.5192C12.1338 16.5192 12.3321 16.437 12.4783 16.2908C12.6245 16.1446 12.7066 15.9463 12.7066 15.7396L12.7066 5.6779L17.0985 9.31018C17.2582 9.43915 17.4622 9.49996 17.6664 9.47943C17.8706 9.45891 18.0585 9.35869 18.1892 9.20053C18.32 9.04237 18.3831 8.83903 18.3649 8.63462C18.3467 8.4302 18.2487 8.24121 18.092 8.10865L18.0908 8.10765L12.442 3.43521C12.3001 3.31036 12.1172 3.24092 11.927 3.24092L11.927 16.5192Z",
-                fill: _color
+                fill: "currentColor"
             }),
             /*#__PURE__*/ jsx("path", {
                 d: "M11.927 16.5192C11.7203 16.5192 11.522 16.437 11.3758 16.2908C11.2296 16.1446 11.1475 15.9463 11.1475 15.7396L11.1475 5.6779L6.75558 9.31018C6.59594 9.43915 6.39189 9.49996 6.1877 9.47943C5.98351 9.45891 5.79564 9.35869 5.66487 9.20053C5.53409 9.04237 5.47096 8.83903 5.48916 8.63462C5.50737 8.4302 5.60544 8.24121 5.7621 8.10865L5.7633 8.10765L11.4121 3.43521C11.554 3.31036 11.7369 3.24092 11.927 3.24092L11.927 16.5192Z",
-                fill: _color
+                fill: "currentColor"
             })
         ]
     });

package/dist/web/UserBanIcon.d.ts

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

package/dist/web/UserBanIcon.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 UserBanIcon_UserBanIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const UserBanIcon_UserBanIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M17.0898 12.8887C18.2833 12.8887 19.4276 13.3631 20.2715 14.207C21.1154 15.0509 21.5898 16.1952 21.5898 17.3887C21.5898 18.5821 21.1154 19.7264 20.2715 20.5703C19.4276 21.4142 18.2833 21.8887 17.0898 21.8887C16.499 21.8887 15.9141 21.772 15.3682 21.5459C14.8222 21.3198 14.3261 20.9882 13.9082 20.5703C13.4903 20.1524 13.1588 19.6563 12.9326 19.1104C12.7065 18.5645 12.5898 17.9795 12.5898 17.3887C12.5898 16.7978 12.7065 16.2129 12.9326 15.667C13.1588 15.121 13.4903 14.6249 13.9082 14.207C14.3261 13.7892 14.8222 13.4576 15.3682 13.2314C15.9141 13.0054 16.499 12.8887 17.0898 12.8887ZM10.6016 2.11133C12.058 2.11133 13.4565 2.68405 14.4941 3.70605C15.5317 4.7282 16.1256 6.11788 16.1475 7.57422C16.1475 9.64047 15.0051 11.4222 13.3301 12.376C13.4781 12.4215 13.6253 12.4708 13.7705 12.5244L13.7812 12.5264C13.8012 12.5351 13.8226 12.5404 13.8438 12.5479L13.8359 12.5645C13.9261 12.5662 14.0153 12.588 14.0957 12.6289C14.1761 12.6698 14.2463 12.7288 14.3008 12.8008C14.3551 12.8727 14.3926 12.9565 14.4102 13.0449C14.4276 13.1332 14.4251 13.2245 14.4023 13.3115C14.3795 13.3986 14.3368 13.4794 14.2783 13.5479C14.2197 13.6163 14.146 13.671 14.0635 13.707C13.9809 13.743 13.8908 13.7595 13.8008 13.7559C13.7107 13.7521 13.6224 13.7282 13.543 13.6855C13.483 13.6855 13.4288 13.6683 13.375 13.6533V13.6514L13.3711 13.6602C12.5776 13.3591 11.719 13.3193 10.8193 13.3193C6.93561 13.3193 3.90183 16.268 3.74805 20.1143H3.73535C3.7366 20.1305 3.7441 20.143 3.74414 20.1592C3.74414 20.4928 3.43164 20.7625 3.01562 20.7627C2.68188 20.7627 2.41113 20.4917 2.41113 20.1592C2.41117 20.143 2.41868 20.1305 2.41992 20.1143H2.41016C2.4688 18.421 3.03744 16.785 4.04102 15.4199C5.0446 14.0548 6.43645 13.024 8.03516 12.4629C6.27145 11.5341 5.05664 9.70544 5.05664 7.57422C5.07853 6.11788 5.67236 4.7282 6.70996 3.70605C7.74745 2.68418 9.14533 2.11145 10.6016 2.11133ZM15.0527 20.0371C15.6346 20.4923 16.3511 20.7416 17.0898 20.7441C17.9796 20.7441 18.8327 20.3899 19.4619 19.7607C20.0911 19.1316 20.4453 18.2785 20.4453 17.3887C20.4453 16.7299 20.2487 16.1196 19.9199 15.5996L15.0527 20.0371ZM17.0898 14.0332C16.6493 14.0332 16.2127 14.1205 15.8057 14.2891C15.3987 14.4577 15.0293 14.7051 14.7178 15.0166C14.4063 15.3281 14.1588 15.6975 13.9902 16.1045C13.8216 16.5115 13.7344 16.9481 13.7344 17.3887H13.7363C13.7376 18.0222 13.9194 18.6422 14.2607 19.1758L19.127 14.7383C18.545 14.2837 17.8283 14.0354 17.0898 14.0332ZM10.6025 3.25977C9.45866 3.2598 8.36166 3.71372 7.55273 4.52246C6.74375 5.33145 6.28906 6.42916 6.28906 7.57324C6.28911 8.71726 6.74379 9.8141 7.55273 10.623C8.36169 11.432 9.45852 11.8867 10.6025 11.8867C11.7466 11.8867 12.8443 11.432 13.6533 10.623C14.4621 9.81414 14.916 8.7171 14.916 7.57324C14.916 6.42918 14.4623 5.33144 13.6533 4.52246C12.8443 3.71348 11.7466 3.25977 10.6025 3.25977Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/UserFollowIcon.d.ts

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

package/dist/web/UserFollowIcon.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 UserFollowIcon_UserFollowIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const UserFollowIcon_UserFollowIcon = ({ 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.9344 14.083C17.3605 14.083 17.7057 14.4284 17.7058 14.8545V17.1699H20.0213C20.4473 17.17 20.7927 17.5153 20.7928 17.9414C20.7928 18.3675 20.4474 18.7128 20.0213 18.7129H17.7058V21.0283C17.7057 21.4544 17.3605 21.7998 16.9344 21.7998C16.5084 21.7996 16.163 21.4543 16.1629 21.0283V18.7129H13.8474C13.4214 18.7127 13.076 18.3675 13.076 17.9414C13.076 17.5154 13.4215 17.1701 13.8474 17.1699H16.1629V14.8545C16.163 14.4285 16.5084 14.0832 16.9344 14.083ZM11.1951 2.2002C14.1833 2.20041 16.6052 4.62308 16.6053 7.61133C16.6051 9.82266 15.2784 11.7224 13.3777 12.5615C13.7204 12.7122 13.9111 13.094 13.8113 13.4668C13.7009 13.8785 13.2777 14.1231 12.866 14.0127C12.3335 13.87 11.7727 13.793 11.1931 13.793C7.63508 13.7931 4.75001 16.6782 4.74979 20.2363C4.74967 20.6624 4.40443 21.0078 3.9783 21.0078C3.55228 21.0077 3.20693 20.6624 3.20682 20.2363C3.207 16.5859 5.65696 13.5093 9.00174 12.5566C7.10681 11.715 5.78412 9.81835 5.78397 7.61133C5.78398 4.6231 8.20692 2.20043 11.1951 2.2002ZM11.1951 3.74316C9.05932 3.7434 7.32695 5.4755 7.32693 7.61133C7.32715 9.74699 9.05944 11.4783 11.1951 11.4785C13.3308 11.4783 15.0621 9.747 15.0623 7.61133C15.0623 5.47548 13.3309 3.74338 11.1951 3.74316Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/UserIcon.d.ts

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

package/dist/web/UserIcon.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 UserIcon_UserIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const UserIcon_UserIcon = ({ 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.1429 12.5C16.7143 11.5 17.7143 9.71429 17.7143 7.71429C17.7143 4.57143 15.1429 2 12 2C8.85714 2 6.28571 4.57143 6.28571 7.71429C6.28571 9.71429 7.28571 11.5 8.85714 12.5C4.85714 13.7857 2 17.5714 2 22H3.42857C3.42857 17.2857 7.28571 13.4286 12 13.4286C16.7143 13.4286 20.5714 17.2857 20.5714 22H22C22 17.5714 19.1429 13.7857 15.1429 12.5ZM12 12C9.64286 12 7.71429 10.0714 7.71429 7.71429C7.71429 5.35714 9.64286 3.42857 12 3.42857C14.3571 3.42857 16.2857 5.35714 16.2857 7.71429C16.2857 10.0714 14.3571 12 12 12Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/UserStarIcon.d.ts

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

package/dist/web/UserStarIcon.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 UserStarIcon_UserStarIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const UserStarIcon_UserStarIcon = ({ 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.3164 14.7363C16.4962 14.1839 17.2782 14.1839 17.458 14.7363L17.9072 16.1191C17.9875 16.3663 18.2177 16.5341 18.4775 16.5342H19.9316C20.5129 16.5342 20.7544 17.2775 20.2842 17.6191L19.1084 18.4746C18.8982 18.6274 18.8105 18.8974 18.8906 19.1445L19.3398 20.5273C19.5195 21.0801 18.8862 21.5399 18.416 21.1982L17.2402 20.3438C17.0299 20.191 16.7445 20.191 16.5342 20.3438L15.3584 21.1982C14.8882 21.5399 14.255 21.0801 14.4346 20.5273L14.8848 19.1445C14.9648 18.8975 14.8761 18.6273 14.666 18.4746L13.4902 17.6191C13.0201 17.2775 13.2616 16.5342 13.8428 16.5342H15.2969C15.5567 16.5341 15.7869 16.3663 15.8672 16.1191L16.3164 14.7363ZM11.998 3.42969C14.8383 3.42969 17.1415 5.73207 17.1416 8.57227L17.1348 8.83691C17.0332 10.8424 15.7818 12.5433 14.0273 13.2979C14.3584 13.4242 14.5479 13.7801 14.4541 14.1299C14.3538 14.5031 13.97 14.7241 13.5967 14.624C13.0877 14.4876 12.5519 14.4151 11.998 14.415C8.59755 14.415 5.84082 17.1718 5.84082 20.5723C5.84067 20.9587 5.52713 21.2725 5.14062 21.2725C4.75412 21.2725 4.44058 20.9587 4.44043 20.5723C4.44043 17.1045 6.77683 14.1834 9.96094 13.2939C8.13448 12.5045 6.85547 10.6885 6.85547 8.57227C6.85562 5.73217 9.15795 3.42984 11.998 3.42969ZM11.998 4.83008C9.93115 4.83023 8.25601 6.50536 8.25586 8.57227C8.25586 10.6393 9.93105 12.3153 11.998 12.3154C14.0652 12.3154 15.7412 10.6394 15.7412 8.57227C15.7411 6.50527 14.0651 4.83008 11.998 4.83008Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/UserTieIcon.d.ts

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

package/dist/web/UserTieIcon.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 UserTieIcon_UserTieIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const UserTieIcon_UserTieIcon = ({ 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: "M14.1392 19.5273L11.9966 22L9.85596 19.5273L11.2642 15.8447H12.6157L14.1392 19.5273ZM12.2476 2.00684C15.1635 2.15496 17.4829 4.56677 17.4829 7.51953L17.4751 7.80371C17.3661 9.95041 16.0299 11.7713 14.1548 12.584C17.5974 13.5158 20.1313 16.6613 20.1313 20.3984C20.131 20.8043 19.8009 21.1334 19.395 21.1338C18.9888 21.1338 18.6591 20.8046 18.6587 20.3984C18.6587 17.3633 16.6163 14.8055 13.8315 14.0225C13.7828 14.0196 13.7331 14.0131 13.6841 14C13.5594 13.9666 13.4328 13.9372 13.3052 13.9111L12.6675 15.0352H11.2397L10.5278 13.9502C10.457 13.9666 10.3859 13.9813 10.3159 14C10.2667 14.0132 10.2165 14.0195 10.1675 14.0225C7.38265 14.8055 5.34134 17.3633 5.34131 20.3984C5.34094 20.8043 5.01084 21.1334 4.60498 21.1338C4.19878 21.1338 3.86902 20.8046 3.86865 20.3984C3.86868 16.6772 6.38011 13.5433 9.80029 12.5967C7.90999 11.7904 6.56018 9.96134 6.45068 7.80371L6.44385 7.51953C6.44389 4.47146 8.91535 2.00024 11.9634 2L12.2476 2.00684ZM11.9634 3.47168C9.72822 3.47192 7.91557 5.28433 7.91553 7.51953C7.91563 9.75469 9.72826 11.5662 11.9634 11.5664C14.1985 11.5662 16.0102 9.75468 16.0103 7.51953C16.0102 5.28433 14.1985 3.47193 11.9634 3.47168Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/Users1Icon.d.ts

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

package/dist/web/Users1Icon.js

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { useWebColor } from "../core/index.js";
+const Users1Icon_Users1Icon = ({ 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: "M9.74316 3.31152C11.1377 3.31156 12.4528 3.85511 13.4395 4.8418C14.4261 5.82851 14.9697 7.14358 14.9697 8.53809C14.9697 9.93259 14.4261 11.2477 13.4395 12.2344C13.1941 12.4797 12.9276 12.6967 12.6455 12.8857C12.748 12.9245 12.85 12.9648 12.9512 13.0078C13.9332 13.4227 14.8152 14.0174 15.5723 14.7744C16.3293 15.5314 16.924 16.4135 17.3389 17.3955C17.77 18.4102 17.9883 19.4904 17.9883 20.6035H16.582C16.582 18.7778 15.8695 17.0599 14.5781 15.7686C13.2868 14.4772 11.5689 13.7647 9.74316 13.7646C7.91747 13.7646 6.19959 14.4773 4.9082 15.7686C3.61684 17.0599 2.90435 18.7778 2.9043 20.6035H1.49805C1.49807 19.4905 1.71539 18.4102 2.14648 17.3955C2.56133 16.4135 3.15703 15.5314 3.91406 14.7744C4.67099 14.0175 5.55233 13.4226 6.53418 13.0078C6.63532 12.9649 6.73748 12.9244 6.83984 12.8857C6.55804 12.6968 6.29213 12.4796 6.04688 12.2344C5.06016 11.2477 4.5166 9.93262 4.5166 8.53809C4.5166 7.14355 5.06016 5.82852 6.04688 4.8418C7.03359 3.85512 8.34866 3.31152 9.74316 3.31152ZM14.2686 3.30762C15.649 3.30762 16.9525 3.78789 17.9346 4.66211C18.9422 5.55503 19.4951 6.7525 19.4951 8.02734C19.4951 9.36012 18.8748 10.6049 17.8223 11.4863C18.8933 11.9971 19.8541 12.7524 20.625 13.7041C21.8413 15.2088 22.5117 17.1237 22.5117 19.0947H21.1055C21.1055 17.4448 20.545 15.8441 19.5303 14.5879C18.5318 13.3551 17.1535 12.5207 15.6465 12.2441L15.9023 10.8613C15.9842 10.8765 16.0653 10.8943 16.1465 10.9121C17.3449 10.322 18.0918 9.2178 18.0918 8.02734C18.0917 6.19926 16.3755 4.71387 14.2686 4.71387V3.30762ZM9.74316 4.71289C7.63613 4.71289 5.91992 6.4291 5.91992 8.53613C5.92013 10.643 7.63626 12.3584 9.74316 12.3584C11.85 12.3583 13.5652 10.6429 13.5654 8.53613C13.5631 6.42914 11.8501 4.71296 9.74316 4.71289Z",
+            fill: "currentColor"
+        })
+    });
+};
+Users1Icon_Users1Icon.displayName = 'Users1Icon|users-1';
+const Users1Icon = Users1Icon_Users1Icon;
+export { Users1Icon as default };

package/dist/web/UsersIcon.d.ts

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

package/dist/web/UsersIcon.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 UsersIcon_UsersIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const UsersIcon_UsersIcon = ({ 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.2857 4.91667C15.1027 4.91667 14.1429 5.86849 14.1429 7.04167C14.1429 8.21484 15.1027 9.16667 16.2857 9.16667C17.4688 9.16667 18.4286 8.21484 18.4286 7.04167C18.4286 5.86849 17.4688 4.91667 16.2857 4.91667ZM7.71429 4.91667C6.53125 4.91667 5.57143 5.86849 5.57143 7.04167C5.57143 8.21484 6.53125 9.16667 7.71429 9.16667C8.89732 9.16667 9.85714 8.21484 9.85714 7.04167C9.85714 5.86849 8.89732 4.91667 7.71429 4.91667ZM16.2857 3.5C18.2589 3.5 19.8571 5.0849 19.8571 7.04167C19.8571 8.99844 18.2589 10.5833 16.2857 10.5833C14.3125 10.5833 12.7143 8.99844 12.7143 7.04167C12.7143 5.0849 14.3125 3.5 16.2857 3.5ZM7.71429 3.5C9.6875 3.5 11.2857 5.0849 11.2857 7.04167C11.2857 8.99844 9.6875 10.5833 7.71429 10.5833C5.74107 10.5833 4.14286 8.99844 4.14286 7.04167C4.14286 5.0849 5.74107 3.5 7.71429 3.5ZM17 12C19.7612 12 22 14.2202 22 16.9583V19.7917H20.5714V16.9583C20.5714 15.0547 19.0558 13.5008 17.154 13.4189L17 13.4167H15.5714C13.6518 13.4167 12.0848 14.9197 12.0022 16.8056L12 16.9583V19.7917H10.5714V16.9583C10.5714 15.5704 11.1473 14.3154 12.0737 13.4167H7C5.08036 13.4167 3.51339 14.9197 3.4308 16.8056L3.42857 16.9583V19.7917H2V16.9583C2 14.2202 4.23884 12 7 12H17ZM21.2857 19.0833C21.6808 19.0833 22 19.3999 22 19.7917C22 20.1835 21.6808 20.5 21.2857 20.5C20.8906 20.5 20.5714 20.1835 20.5714 19.7917C20.5714 19.3999 20.8906 19.0833 21.2857 19.0833ZM11.2857 19.0833C11.6808 19.0833 12 19.3999 12 19.7917C12 20.1835 11.6808 20.5 11.2857 20.5C10.8906 20.5 10.5714 20.1835 10.5714 19.7917C10.5714 19.3999 10.8906 19.0833 11.2857 19.0833ZM2.71429 19.0833C3.10938 19.0833 3.42857 19.3999 3.42857 19.7917C3.42857 20.1835 3.10938 20.5 2.71429 20.5C2.3192 20.5 2 20.1835 2 19.7917C2 19.3999 2.3192 19.0833 2.71429 19.0833Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/VideoIcon.d.ts

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

package/dist/web/VideoIcon.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 VideoIcon_VideoIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const VideoIcon_VideoIcon = ({ 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.093 6.48815C20.6047 6.27884 20.0465 6.41838 19.6977 6.76721L17.1163 8.86024V7.81373C17.1163 6.62768 16.2093 5.7207 15.0233 5.7207H4.09302C2.90698 5.7207 2 6.62768 2 7.81373V16.1858C2 17.3719 2.90698 18.2788 4.09302 18.2788H15.0233C16.2093 18.2788 17.1163 17.3719 17.1163 16.1858V15.0695L19.6977 17.1626C20.1163 17.5114 20.6047 17.6509 21.093 17.4416C21.6512 17.2323 22 16.6742 22 15.9765V7.95326C22 7.32535 21.6512 6.76722 21.093 6.48815ZM15.7209 16.1858C15.7209 16.6044 15.4419 16.8835 15.0233 16.8835H4.09302C3.67442 16.8835 3.39535 16.6044 3.39535 16.1858V7.81373C3.39535 7.39512 3.67442 7.11605 4.09302 7.11605H15.0233C15.4419 7.11605 15.7209 7.39512 15.7209 7.81373V16.1858ZM20.6047 16.0463V16.1161L17.1163 13.2556V10.6742L20.6047 7.81373V16.0463Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/Volume1Icon.d.ts

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

package/dist/web/Volume1Icon.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 Volume1Icon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const Volume1Icon = ({ 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: "M14.5482 3.94128C14.1555 3.69742 13.676 3.65815 13.1955 3.88238L7.02135 7.47942H3.98335C3.27862 7.47942 2.69995 8.05498 2.69995 8.75662V15.2387C2.69995 15.9404 3.27862 16.5149 3.98335 16.5149H7.02135L13.2441 20.1419C13.4208 20.2287 13.6161 20.268 13.8124 20.268C14.0677 20.268 14.3229 20.1998 14.5378 20.053C14.9305 19.8102 15.1651 19.3814 15.1651 18.9226V5.08208C15.1651 4.61398 14.9305 4.18515 14.5482 3.94128ZM6.55118 15.2191L4.00298 15.2387L3.98335 8.78555H6.55118V15.2191ZM13.8517 18.9804L7.85422 15.4816V8.50345L13.8321 5.02318L13.862 18.9226L13.8517 18.9815V18.9804ZM21.3 11.7988C21.2994 11.9723 21.23 12.1386 21.107 12.261C20.9839 12.3835 20.8174 12.4521 20.6438 12.4518H17.6647C17.5787 12.4521 17.4934 12.4354 17.4138 12.4027C17.3342 12.3701 17.2619 12.322 17.2008 12.2614C17.1398 12.2008 17.0913 12.1287 17.0581 12.0493C17.025 11.9699 17.0078 11.8848 17.0075 11.7988C17.0075 11.4371 17.302 11.1457 17.6647 11.1457H20.6438C21.0055 11.1457 21.3 11.4381 21.3 11.7988ZM17.115 8.48485C17.0201 8.34228 16.9855 8.168 17.0186 7.99999C17.0517 7.83198 17.1498 7.68386 17.2917 7.58792L19.8791 5.87258C19.9493 5.81952 20.0295 5.78129 20.1149 5.76023C20.2003 5.73917 20.289 5.73571 20.3758 5.75008C20.4626 5.76444 20.5455 5.79631 20.6196 5.84376C20.6936 5.89122 20.7572 5.95325 20.8065 6.02608C20.8558 6.09891 20.8898 6.18102 20.9063 6.2674C20.9229 6.35378 20.9217 6.44262 20.9028 6.52852C20.8839 6.61441 20.8477 6.69556 20.7964 6.76702C20.7451 6.83847 20.6798 6.89874 20.6045 6.94415L18.0171 8.65948C17.9109 8.73271 17.7843 8.77034 17.6554 8.76695C17.5484 8.77171 17.4421 8.74812 17.3472 8.69858C17.2523 8.64905 17.1722 8.57531 17.115 8.48485ZM20.6045 16.643C20.9083 16.8383 20.9869 17.2475 20.7802 17.54C20.6822 17.6833 20.5322 17.7827 20.362 17.8173C20.1918 17.8518 20.0149 17.8187 19.8688 17.7249L17.2824 16.0096C17.2105 15.9635 17.1486 15.9033 17.1006 15.8327C17.0526 15.7622 17.0193 15.6826 17.0028 15.5988C16.9863 15.515 16.9869 15.4288 17.0046 15.3452C17.0222 15.2617 17.0566 15.1826 17.1057 15.1127C17.1525 15.0411 17.2132 14.9796 17.2843 14.9318C17.3553 14.8841 17.4351 14.851 17.5191 14.8347C17.6031 14.8183 17.6895 14.8189 17.7733 14.8365C17.857 14.8541 17.9364 14.8882 18.0067 14.937L20.6045 16.643Z",
-            fill: _color,
-            stroke: _color,
+            fill: "currentColor",
+            stroke: "currentColor",
             strokeWidth: 0.206667
         })
     });

package/dist/web/VolumeIcon.d.ts

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

package/dist/web/VolumeIcon.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 VolumeIcon_VolumeIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const VolumeIcon_VolumeIcon = ({ 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.3359 4.69601C10.9943 4.19001 11.7763 3.77889 12.6115 4.13251C13.4395 4.48182 13.704 5.32564 13.819 6.15364C13.9369 7.0032 13.9369 8.17332 13.9369 9.62807V15.1466C13.9369 16.6014 13.9369 17.7715 13.8204 18.6211C13.7054 19.4505 13.4395 20.2929 12.6129 20.6422C11.7763 20.9958 10.9943 20.5847 10.3359 20.0801C9.66175 19.5626 8.851 18.7346 7.84475 17.7083L7.80163 17.6623C7.28413 17.1347 6.94056 16.8788 6.59413 16.7351C6.24338 16.5913 5.81931 16.5295 5.079 16.5295H5.04163C4.4005 16.5295 3.86431 16.5295 3.43163 16.485C2.97594 16.4375 2.55331 16.334 2.17238 16.0753C1.44931 15.5808 1.17188 14.8577 1.0655 14.1921C0.989313 13.6948 0.997938 13.1485 1.00513 12.7115C1.00858 12.4949 1.00858 12.2783 1.00513 12.0618C0.9965 11.6248 0.989313 11.0785 1.06694 10.5826C1.17188 9.91845 1.44931 9.19395 2.17381 8.69945C2.55331 8.4407 2.97594 8.3372 3.43019 8.2912C3.96582 8.25023 4.50309 8.23488 5.04019 8.2452H5.079C5.81931 8.2452 6.24338 8.18482 6.59269 8.03964C6.94056 7.89589 7.28269 7.64145 7.80019 7.11389L7.84475 7.06789C8.851 6.04008 9.66175 5.21351 10.3359 4.69601ZM11.2114 5.83595C10.6292 6.28157 9.88888 7.03626 8.828 8.1187C8.26306 8.6937 7.7585 9.11345 7.14181 9.36933C6.528 9.62232 5.87681 9.6827 5.079 9.6827C4.39044 9.6827 3.929 9.6827 3.57969 9.72008C3.24188 9.75601 3.08663 9.81783 2.98313 9.88826C2.70425 10.078 2.55619 10.3641 2.48575 10.8083C2.42825 11.1676 2.43544 11.5385 2.44263 11.9568L2.4455 12.3881C2.4455 12.5361 2.44406 12.6799 2.44119 12.8179C2.43544 13.2348 2.42969 13.6056 2.48575 13.9665C2.55619 14.4092 2.70425 14.6967 2.98313 14.8865C3.08663 14.9569 3.24188 15.0187 3.57969 15.0532C3.93044 15.0891 4.39044 15.0906 5.079 15.0906C5.87538 15.0906 6.528 15.151 7.14181 15.4054C7.7585 15.6598 8.26306 16.0781 8.828 16.6546C9.88888 17.737 10.6292 18.4903 11.2114 18.9388C11.818 19.4045 12.0006 19.3398 12.0523 19.3168C12.1113 19.2924 12.2895 19.1946 12.3959 18.4227C12.4979 17.6838 12.4994 16.6143 12.4994 15.0834V9.68989C12.4994 8.16039 12.4994 7.09089 12.3959 6.35201C12.2895 5.58007 12.1112 5.48089 12.0509 5.45645C12.0006 5.43489 11.818 5.3702 11.2114 5.83595ZM15.6576 8.94095C15.7326 8.88364 15.8182 8.84166 15.9094 8.81744C16.0007 8.79321 16.0958 8.78719 16.1894 8.79974C16.283 8.81229 16.3732 8.84315 16.4548 8.89057C16.5365 8.93798 16.608 9.00102 16.6652 9.07608C17.3596 9.98458 17.7721 11.1375 17.7721 12.3866C17.7721 13.6358 17.3596 14.7873 16.6652 15.6972C16.6091 15.7751 16.538 15.841 16.456 15.891C16.3739 15.9409 16.2828 15.974 16.1878 15.9881C16.0928 16.0022 15.9959 15.9972 15.9029 15.9733C15.8099 15.9493 15.7226 15.907 15.6463 15.8488C15.5699 15.7906 15.506 15.7176 15.4583 15.6343C15.4105 15.551 15.38 15.4589 15.3685 15.3636C15.3569 15.2682 15.3646 15.1716 15.391 15.0792C15.4175 14.9869 15.4622 14.9008 15.5224 14.8261C16.053 14.1239 16.3379 13.2667 16.3332 12.3866C16.3379 11.5066 16.053 10.6494 15.5224 9.9472C15.4071 9.79576 15.3566 9.60478 15.3819 9.41614C15.4073 9.22749 15.5064 9.0566 15.6576 8.94095ZM19.4986 7.10957C19.368 6.97664 19.191 6.89958 19.0048 6.89464C18.8185 6.8897 18.6376 6.95727 18.5003 7.0831C18.3629 7.20893 18.2797 7.38319 18.2683 7.56914C18.2569 7.7551 18.3181 7.93821 18.4391 8.07989C19.5273 9.27014 20.167 10.768 20.167 12.3866C20.167 14.0053 19.5273 15.5031 18.4391 16.6919C18.3103 16.8324 18.2425 17.0184 18.2507 17.2088C18.2589 17.3993 18.3425 17.5787 18.483 17.7075C18.6235 17.8364 18.8094 17.9042 18.9998 17.896C19.1903 17.8877 19.3697 17.8042 19.4986 17.6637C20.8067 16.2348 21.6045 14.3977 21.6045 12.3866C21.6045 10.3741 20.8067 8.53845 19.4986 7.10957Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/WalletBackupIcon.d.ts

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

package/dist/web/WalletBackupIcon.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 WalletBackupIcon_WalletBackupIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const WalletBackupIcon_WalletBackupIcon = ({ 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.6055 6.62598C21.0517 6.60616 22.2443 7.76662 22.2646 9.21582L22.3906 18.2812C22.4105 19.7273 21.2507 20.92 19.8047 20.9404L7.82129 21.1064C6.37507 21.1265 5.18246 19.9667 5.16211 18.5205L5.03613 9.45215C5.01609 8.00577 6.17667 6.81306 7.62305 6.79297L19.6055 6.62598ZM7.6416 8.15625C6.9469 8.16591 6.38723 8.74092 6.39648 9.43555L6.52246 18.501C6.53224 19.1958 7.10789 19.7557 7.80273 19.7461L19.7852 19.5801C20.4798 19.5702 21.0398 18.9945 21.0303 18.2998L21.0039 16.3896L17.6367 16.4365C16.1905 16.4566 14.9978 15.2968 14.9775 13.8506C14.9577 12.4044 16.1172 11.2125 17.5635 11.1924L20.9316 11.1455L20.9053 9.23438C20.8953 8.53993 20.3194 7.98098 19.625 7.99023L7.6416 8.15625ZM6.20117 9.43848L6.32715 18.5039C6.32775 18.5473 6.3316 18.5904 6.33594 18.6328L6.32812 18.5039L6.20215 9.43848C6.20147 9.38851 6.20274 9.33881 6.20703 9.29004C6.20273 9.33889 6.20048 9.38841 6.20117 9.43848ZM15.6074 3C17.0539 3.00017 18.2302 4.17659 18.2305 5.62598V6.11914H16.8701V5.62598C16.8699 4.93124 16.3022 4.36443 15.6074 4.36426H3.62305C2.92823 4.36434 2.36057 4.93119 2.36035 5.62598V14.6924C2.36055 15.3872 2.92821 15.955 3.62305 15.9551H4.60742V17.3154H3.62305C2.17668 17.3154 1.0002 16.1387 1 14.6924V5.62305C1.00003 4.17656 2.17657 3.00008 3.62305 3H15.6074ZM17.4004 16.2334L17.6338 16.2412C17.5543 16.2423 17.4751 16.2389 17.3975 16.2324L17.4004 16.2334ZM17.582 12.5527C16.8874 12.5626 16.3275 13.1374 16.3369 13.832C16.3469 14.5266 16.9226 15.0857 17.6172 15.0762L20.9854 15.0303L20.9502 12.5059L17.582 12.5527ZM18.2324 13.124C18.6095 13.1192 18.9176 13.4197 18.9229 13.7969C18.9276 14.1737 18.6279 14.4819 18.251 14.4873L17.6035 14.4971C17.2264 14.5023 16.9167 14.2013 16.9111 13.8242C16.9061 13.447 17.2077 13.138 17.585 13.1328L18.2324 13.124ZM18.7275 13.7988C18.7284 13.8645 18.716 13.927 18.6934 13.9844C18.7044 13.9564 18.715 13.9277 18.7207 13.8975L18.7285 13.7998C18.7283 13.7848 18.7252 13.7697 18.7236 13.7549C18.7251 13.7693 18.7273 13.7841 18.7275 13.7988ZM16.1416 13.834C16.1422 13.8773 16.1461 13.9205 16.1504 13.9629L16.1426 13.834C16.1419 13.7841 16.1432 13.7342 16.1475 13.6855C16.1432 13.7343 16.1409 13.784 16.1416 13.834ZM18.7188 13.7188C18.7177 13.7131 18.7189 13.7067 18.7178 13.7012C18.7157 13.6918 18.7106 13.683 18.708 13.6738C18.712 13.6885 18.7161 13.7035 18.7188 13.7188ZM20.0029 7.8418C19.9741 7.83438 19.9446 7.82596 19.915 7.82031L19.9053 7.81934C19.9381 7.82538 19.9709 7.83358 20.0029 7.8418ZM15.9951 4.22266C15.9639 4.214 15.9324 4.20483 15.9004 4.19824L15.8916 4.19727C15.9265 4.20423 15.9611 4.21323 15.9951 4.22266Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/WalletCreateIcon.d.ts

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

package/dist/web/WalletCreateIcon.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 WalletCreateIcon_WalletCreateIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const WalletCreateIcon_WalletCreateIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M18.7676 4.47705C19.9263 4.47705 20.8711 5.42182 20.8711 6.58057V17.4194C20.8708 18.578 19.9262 19.5229 18.7676 19.5229H5.23242C4.07393 19.5228 3.12917 18.5779 3.12891 17.4194V6.58057C3.12891 5.42189 4.07377 4.47716 5.23242 4.47705H18.7676ZM4.62793 17.4194C4.62819 17.7513 4.89638 18.0199 5.23242 18.02H18.7676C19.1007 18.02 19.3718 17.751 19.3721 17.4194V9.72412H4.62793V17.4194ZM8.45117 14.395C8.86547 14.3953 9.19987 14.7297 9.2002 15.144C9.2002 15.5586 8.86567 15.8937 8.45117 15.894H6.57715C6.16251 15.8939 5.82812 15.5587 5.82812 15.144C5.82845 14.7292 6.1665 14.3952 6.57715 14.395H8.45117ZM5.23242 5.979C4.89919 5.97911 4.62793 6.24882 4.62793 6.58057V8.2251H19.3721V6.58057C19.3721 6.24838 19.1039 5.979 18.7676 5.979H5.23242Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/WalletIcon.d.ts

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

package/dist/web/WalletIcon.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 WalletIcon_WalletIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const WalletIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M18.3047 3.40039C19.5816 3.40057 20.5995 4.55491 20.5996 5.95312V18.0469C20.5995 19.4451 19.5816 20.5994 18.3047 20.5996H5.69531C4.4185 20.5994 3.40047 19.445 3.40039 18.0469V5.95312C3.40047 4.55496 4.4185 3.40064 5.69531 3.40039H18.3047ZM5.69531 4.9541C5.2143 4.95435 4.8116 5.3871 4.81152 5.95312V18.0469C4.81161 18.6123 5.22283 19.0456 5.69531 19.0459H18.3047C18.7852 19.0457 19.1884 18.6034 19.1885 18.0469V15.4492H14.3867C12.6725 15.449 11.29 13.8869 11.29 12C11.29 10.1131 12.6725 8.55098 14.3867 8.55078H19.1885V5.95312C19.1884 5.38768 18.7772 4.95428 18.3047 4.9541H5.69531ZM14.3867 10.0947C13.4683 10.0949 12.7012 10.9355 12.7012 11.9902C12.7014 13.0448 13.4684 13.8846 14.3867 13.8848H19.1885V10.0947H14.3867ZM15.6074 11.0146C16.1101 11.0146 16.5 11.4669 16.5 12C16.5 12.5331 16.1101 12.9854 15.6074 12.9854H15.6055C15.1067 12.9737 14.7148 12.5353 14.7148 12C14.7148 11.467 15.1049 11.0149 15.6074 11.0146Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };
-WalletIcon_WalletIcon.displayName = 'WalletIcon|wallet';
-const WalletIcon = WalletIcon_WalletIcon;
-export { WalletIcon as default };
+WalletIcon.displayName = 'WalletIcon|wallet';
+const web_WalletIcon = WalletIcon;
+export { web_WalletIcon as default };

package/dist/web/WalletPasswordIcon.d.ts

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

package/dist/web/WalletPasswordIcon.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 WalletPasswordIcon_WalletPasswordIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const WalletPasswordIcon_WalletPasswordIcon = ({ 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: "M14.209 15.9219C14.4435 15.922 14.63 16.1194 14.6162 16.3535L14.5635 17.25L15.4492 16.7158C15.6299 16.6068 15.8645 16.663 15.9766 16.8418C16.0999 17.0394 16.0221 17.3009 15.8105 17.3984L14.9121 17.8115L15.8105 18.2256C16.0221 18.323 16.1007 18.5837 15.9775 18.7812C15.8655 18.9604 15.6301 19.0164 15.4492 18.9072L14.5635 18.373L14.6162 19.2695C14.63 19.5036 14.4434 19.7019 14.209 19.7021C13.9743 19.702 13.7877 19.5037 13.8018 19.2695L13.8574 18.373L12.9707 18.9082C12.7898 19.0168 12.5553 18.9602 12.4434 18.7812C12.3198 18.5836 12.3978 18.3223 12.6094 18.2246L13.5039 17.8115L12.6094 17.3984C12.3979 17.3008 12.3201 17.0394 12.4434 16.8418C12.5554 16.6631 12.79 16.6071 12.9707 16.7158L13.8574 17.251L13.8018 16.3545C13.7873 16.12 13.974 15.922 14.209 15.9219ZM19.6592 15.9219C19.8937 15.9221 20.0802 16.1194 20.0664 16.3535L20.0127 17.25L20.8994 16.7158C21.0801 16.6069 21.3147 16.663 21.4268 16.8418C21.5502 17.0395 21.4725 17.301 21.2607 17.3984L20.3623 17.8115L21.2607 18.2256C21.4723 18.3231 21.5503 18.5836 21.4268 18.7812C21.3148 18.9602 21.0802 19.017 20.8994 18.9082L20.0127 18.373L20.0664 19.2695C20.0802 19.5037 19.8937 19.7021 19.6592 19.7021C19.4243 19.702 19.2376 19.503 19.252 19.2686L19.3076 18.3721L18.4219 18.9082C18.241 19.0172 18.0066 18.9602 17.8945 18.7812C17.771 18.5837 17.8481 18.3224 18.0596 18.2246L18.9551 17.8115L18.0596 17.3984C17.8483 17.3008 17.7706 17.0403 17.8936 16.8428C18.0056 16.6635 18.2409 16.6066 18.4219 16.7158L19.3076 17.251L19.252 16.3545C19.2376 16.1201 19.4244 15.9221 19.6592 15.9219ZM17.6973 4.07422C19.2554 4.07438 20.5219 5.34232 20.5225 6.90332V14.627L20.3096 14.623L14.8213 14.5391L14.7979 14.54L14.7764 14.5342C13.5335 14.2382 12.6046 13.1208 12.6045 11.7871C12.605 10.2293 13.8717 8.96204 15.4297 8.96191L19.0566 8.96094L19.0576 6.90332C19.057 6.15517 18.4456 5.54404 17.6973 5.54395H4.78711C4.03893 5.54414 3.42734 6.15516 3.42676 6.90332V16.6709C3.42686 17.4192 4.03802 18.0306 4.78613 18.0312H11.5723L11.5693 18.2441L11.5566 19.2881L11.5547 19.4951L4.78711 19.4961C3.22906 19.4958 1.96196 18.2291 1.96191 16.6709V6.90039C1.96223 5.34252 3.22911 4.07544 4.78711 4.0752L17.6973 4.07422ZM4.04004 18.0518C4.12863 18.1 4.22256 18.1393 4.32031 18.1699C4.22257 18.1393 4.12863 18.1 4.04004 18.0518ZM2.22461 17.1973H2.22559H2.22461ZM3.24902 16.9873C3.25948 17.0381 3.27284 17.0878 3.28809 17.1367C3.27273 17.0875 3.25952 17.0374 3.24902 16.9863V16.9873ZM14.0244 13.9902C14.1045 14.0413 14.1888 14.0856 14.2744 14.1279C14.1888 14.0856 14.1045 14.0413 14.0244 13.9902ZM13.5283 13.5801C13.5525 13.6057 13.5793 13.6287 13.6045 13.6533C13.5281 13.5788 13.4546 13.5013 13.3877 13.418L13.5283 13.5801ZM15.4297 13.3574V13.3564V13.3574ZM15.4297 10.4277C14.6813 10.428 14.0696 11.0398 14.0693 11.7881C14.0697 12.5362 14.6811 13.1463 15.4297 13.1465H19.0566V10.4277H15.4297ZM12.9668 12.667L12.9658 12.666L12.9668 12.667ZM16.1045 10.9863C16.5108 10.9808 16.8438 11.3047 16.8496 11.7109C16.855 12.1171 16.5312 12.4492 16.125 12.4551L15.4277 12.4648C15.0215 12.4703 14.6875 12.1474 14.6816 11.7412C14.6761 11.3349 15.0009 11.0019 15.4072 10.9961L16.1045 10.9863ZM14.9043 11.8438C14.9109 11.8742 14.921 11.9035 14.9326 11.9316C14.9204 11.902 14.9112 11.8709 14.9043 11.8389V11.8438ZM12.8672 11.2607C12.8323 11.4308 12.8145 11.6069 12.8145 11.7871C12.8145 11.6069 12.8323 11.4308 12.8672 11.2607ZM16.6396 11.7139L16.6299 11.6211L16.6279 11.6162C16.6343 11.6478 16.6392 11.6805 16.6396 11.7139ZM13.2617 10.3262C13.1205 10.535 13.0082 10.7651 12.9316 11.0107L13.0205 10.7705C13.0868 10.6141 13.1676 10.4653 13.2617 10.3262ZM20.2988 6.63574C20.3078 6.72394 20.3125 6.81374 20.3125 6.9043V6.90332C20.3125 6.81299 20.3078 6.72373 20.2988 6.63574ZM19.2598 6.74414C19.2649 6.79395 19.2663 6.84446 19.2666 6.89551C19.2663 6.84447 19.2649 6.79394 19.2598 6.74414ZM18.998 6.02734C19.0156 6.05322 19.0309 6.08048 19.0469 6.10742C19.0051 6.03708 18.9601 5.969 18.9082 5.90625L18.998 6.02734ZM17.8574 5.34277C17.9103 5.34815 17.9625 5.35568 18.0137 5.36621C18.2177 5.4082 18.4072 5.49048 18.5742 5.60352L18.4453 5.52441C18.2675 5.42759 18.0689 5.36434 17.8584 5.34277H17.8574ZM19.3604 4.88281C19.5888 5.07164 19.7818 5.30044 19.9355 5.55566C19.7818 5.30043 19.5887 5.07167 19.3604 4.88281ZM18.7148 4.49121C18.8412 4.54481 18.9609 4.6106 19.0762 4.68262C18.8894 4.56594 18.6888 4.46919 18.4746 4.40234L18.7148 4.49121ZM17.6973 4.28418L17.6982 4.28516L17.6973 4.28418Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/WishlistIcon.d.ts

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