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

package/dist/web/SearchPlusIcon.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 SearchPlusIcon_SearchPlusIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const SearchPlusIcon_SearchPlusIcon = ({ 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: "M11.7617 3C16.6223 3 20.5771 6.95482 20.5771 11.8154C20.5771 14.1745 19.6401 16.3144 18.126 17.8984L21.0703 20.8418C21.1973 20.969 21.2686 21.1416 21.2686 21.3213C21.2684 21.5011 21.1965 21.6737 21.0693 21.8008C21.0065 21.8639 20.9318 21.914 20.8496 21.9482C20.7673 21.9825 20.679 22 20.5898 22C20.5008 22 20.4123 21.9825 20.3301 21.9482C20.2479 21.914 20.1731 21.8639 20.1104 21.8008L17.1133 18.8037C15.6276 19.9443 13.775 20.6309 11.7617 20.6309C6.90118 20.6308 2.94637 16.676 2.94629 11.8154C2.94629 6.95483 6.90113 3.00002 11.7617 3ZM11.7617 4.35645C7.64907 4.35647 4.30273 7.70278 4.30273 11.8154C4.30282 15.928 7.64912 19.2744 11.7617 19.2744C15.8743 19.2744 19.2206 15.928 19.2207 11.8154C19.2207 7.70276 15.8744 4.35645 11.7617 4.35645ZM11.7617 8.08594C11.9415 8.08594 12.1141 8.15709 12.2412 8.28418C12.3683 8.4113 12.4394 8.5839 12.4395 8.76367V11.1377H14.8516C15.0313 11.1378 15.204 11.2089 15.3311 11.3359C15.4581 11.4631 15.5293 11.6357 15.5293 11.8154C15.5293 11.9952 15.4581 12.1678 15.3311 12.2949C15.204 12.422 15.0313 12.4931 14.8516 12.4932H12.4395V14.8672C12.4393 15.0469 12.3683 15.2196 12.2412 15.3467C12.1141 15.4737 11.9415 15.5449 11.7617 15.5449C11.582 15.5449 11.4094 15.4737 11.2822 15.3467C11.1552 15.2196 11.0841 15.0469 11.084 14.8672V12.4932H8.70996C8.53025 12.4931 8.35755 12.422 8.23047 12.2949C8.1034 12.1678 8.03226 11.9952 8.03223 11.8154C8.03223 11.6357 8.10345 11.4631 8.23047 11.3359C8.35755 11.2089 8.53025 11.1378 8.70996 11.1377H11.084V8.76367C11.084 8.5839 11.1551 8.4113 11.2822 8.28418C11.4094 8.15707 11.5819 8.08595 11.7617 8.08594Z",
-                fill: _color
+                fill: "currentColor"
             }),
             /*#__PURE__*/ jsx("path", {
                 d: "M20.5771 11.8154C20.5771 6.95482 16.6223 3 11.7617 3C6.90113 3.00002 2.94629 6.95483 2.94629 11.8154C2.94637 16.676 6.90118 20.6308 11.7617 20.6309C13.775 20.6309 15.6276 19.9443 17.1133 18.8037L20.1104 21.8008C20.1731 21.8639 20.2479 21.914 20.3301 21.9482C20.4123 21.9825 20.5008 22 20.5898 22C20.679 22 20.7673 21.9825 20.8496 21.9482C20.9318 21.914 21.0065 21.8639 21.0693 21.8008C21.1965 21.6737 21.2684 21.5011 21.2686 21.3213C21.2686 21.1416 21.1973 20.969 21.0703 20.8418L18.126 17.8984C19.6401 16.3144 20.5771 14.1745 20.5771 11.8154ZM19.1211 11.8154C19.1211 7.75799 15.8192 4.45605 11.7617 4.45605C7.83104 4.45608 4.60951 7.55497 4.41211 11.4375L4.40234 11.8154C4.40243 15.8728 7.70435 19.1748 11.7617 19.1748V19.2744C7.64912 19.2744 4.30282 15.928 4.30273 11.8154C4.30273 7.70278 7.64907 4.35647 11.7617 4.35645C15.8744 4.35645 19.2207 7.70276 19.2207 11.8154C19.2206 15.928 15.8743 19.2744 11.7617 19.2744V19.1748C15.6924 19.1748 18.9139 16.0758 19.1113 12.1934L19.1211 11.8154ZM10.9844 14.8672V12.5928H8.70996C8.50394 12.5927 8.30612 12.5112 8.16016 12.3652C8.01426 12.2193 7.93265 12.0215 7.93262 11.8154C7.93262 11.6093 8.01434 11.4116 8.16016 11.2656C8.30612 11.1197 8.50394 11.0382 8.70996 11.0381V11.1377C8.53025 11.1378 8.35755 11.2089 8.23047 11.3359C8.10345 11.4631 8.03223 11.6357 8.03223 11.8154C8.03226 11.9952 8.1034 12.1678 8.23047 12.2949C8.35755 12.422 8.53025 12.4931 8.70996 12.4932H11.084V14.8672C11.0841 15.0469 11.1552 15.2196 11.2822 15.3467C11.4094 15.4737 11.582 15.5449 11.7617 15.5449C11.9415 15.5449 12.1141 15.4737 12.2412 15.3467C12.3683 15.2196 12.4393 15.0469 12.4395 14.8672V12.4932H14.8516C15.0313 12.4931 15.204 12.422 15.3311 12.2949C15.4581 12.1678 15.5293 11.9952 15.5293 11.8154C15.5293 11.6357 15.4581 11.4631 15.3311 11.3359C15.204 11.2089 15.0313 11.1378 14.8516 11.1377V11.0381C15.0576 11.0382 15.2554 11.1197 15.4014 11.2656C15.5472 11.4116 15.6289 11.6093 15.6289 11.8154C15.6289 12.0215 15.5473 12.2193 15.4014 12.3652C15.2554 12.5112 15.0576 12.5927 14.8516 12.5928H12.5391V14.8672C12.5389 15.0732 12.4575 15.271 12.3115 15.417C12.1839 15.5445 12.0168 15.6239 11.8389 15.6416L11.7617 15.6445C11.5556 15.6445 11.3579 15.5628 11.2119 15.417C11.066 15.271 10.9845 15.0732 10.9844 14.8672ZM12.4395 8.76367C12.4394 8.5839 12.3683 8.4113 12.2412 8.28418C12.1141 8.15709 11.9415 8.08594 11.7617 8.08594C11.5819 8.08595 11.4094 8.15707 11.2822 8.28418C11.1551 8.4113 11.084 8.5839 11.084 8.76367V11.1377H8.70996V11.0381H10.9844V8.76367C10.9844 8.55756 11.0659 8.35986 11.2119 8.21387C11.3579 8.06792 11.5555 7.98634 11.7617 7.98633L11.8389 7.98926C12.0168 8.00692 12.1838 8.08625 12.3115 8.21387C12.4392 8.34155 12.5185 8.50863 12.5361 8.68652L12.5391 8.76367V11.0381H14.8516V11.1377H12.4395V8.76367ZM20.6768 11.8154C20.6767 14.1666 19.7554 16.3012 18.2637 17.8955L21.1406 20.7715C21.2863 20.9174 21.3682 21.1152 21.3682 21.3213C21.368 21.5274 21.2861 21.7254 21.1406 21.8711C21.0685 21.9436 20.982 22.0018 20.8877 22.041C20.8168 22.0704 20.742 22.0892 20.666 22.0967L20.5898 22.0996C20.4878 22.0996 20.3864 22.0802 20.292 22.041C20.1977 22.0018 20.1111 21.9436 20.0391 21.8711V21.8701L17.1035 18.9346C15.7078 19.9849 13.9999 20.6434 12.1416 20.7227L11.7617 20.7305C6.84595 20.7304 2.84676 16.7312 2.84668 11.8154C2.84668 6.89961 6.8459 2.90041 11.7617 2.90039L12.2197 2.91211C16.9236 3.15133 20.6768 7.0532 20.6768 11.8154Z",
-                fill: _color
+                fill: "currentColor"
             })
         ]
     });

package/dist/web/SecureTips1Icon.d.ts

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

package/dist/web/SecureTips1Icon.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 SecureTips1Icon_SecureTips1Icon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const SecureTips1Icon_SecureTips1Icon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M12.4815 4.92658C12.6854 4.92938 12.8808 5.00809 13.0297 5.14732C13.1785 5.28654 13.2701 5.47628 13.2866 5.67945C13.303 5.88261 13.243 6.0846 13.1185 6.24593C12.9939 6.40726 12.8136 6.51634 12.6129 6.55185L12.4797 6.56265H4.63598V19.3614H17.4366V11.5177C17.4366 11.1127 17.7335 10.7743 18.1223 10.7113L18.2555 10.7005C18.6623 10.7005 18.9988 10.9975 19.0636 11.3845L19.0744 11.5195V20.1804C19.0746 20.3744 19.006 20.5623 18.8808 20.7106C18.7555 20.8588 18.5818 20.9579 18.3905 20.9903L18.2537 20.9993H3.81884C3.62467 20.9998 3.43663 20.9313 3.28828 20.806C3.13993 20.6808 3.04091 20.5069 3.00891 20.3153L2.99991 20.1804V5.74371C2.99991 5.33695 3.29688 5.00037 3.68385 4.93558L3.81884 4.92478H12.4815V4.92658ZM18.2555 3.00073C18.983 3.00073 19.6807 3.28972 20.1951 3.80413C20.7095 4.31854 20.9985 5.01623 20.9985 5.74371C20.9985 6.4712 20.7095 7.16888 20.1951 7.68329C19.6807 8.1977 18.983 8.48669 18.2555 8.48669C17.528 8.48669 16.8303 8.1977 16.3159 7.68329C15.8015 7.16888 15.5125 6.4712 15.5125 5.74371C15.5125 5.01623 15.8015 4.31854 16.3159 3.80413C16.8303 3.28972 17.528 3.00073 18.2555 3.00073ZM18.2555 4.6386C18.1065 4.63259 17.9578 4.65674 17.8184 4.70962C17.679 4.76249 17.5516 4.84299 17.4441 4.94629C17.3365 5.04958 17.251 5.17354 17.1925 5.31073C17.1341 5.44791 17.1039 5.59549 17.1039 5.74461C17.1039 5.89373 17.1341 6.04131 17.1925 6.1785C17.251 6.31568 17.3365 6.43964 17.4441 6.54294C17.5516 6.64623 17.679 6.72673 17.8184 6.77961C17.9578 6.83248 18.1065 6.85664 18.2555 6.85062C18.5491 6.85062 18.8306 6.734 19.0382 6.52642C19.2458 6.31883 19.3624 6.03728 19.3624 5.74371C19.3624 5.45014 19.2458 5.16859 19.0382 4.96101C18.8306 4.75342 18.5491 4.6368 18.2555 4.6368V4.6386Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/SecureTips2Icon.d.ts

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

package/dist/web/SecureTips2Icon.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 SecureTips2Icon_SecureTips2Icon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const SecureTips2Icon_SecureTips2Icon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M12 18.1714C15.4714 18.1714 18.1714 15.3429 18.1714 12C18.1714 8.65714 15.4714 5.82857 12 5.82857C8.52857 5.82857 5.82857 8.65714 5.82857 12C5.82857 15.3429 8.52857 18.1714 12 18.1714ZM12 6.98571C14.7 6.98571 17.0143 9.17143 17.0143 12C17.0143 13.1571 16.6286 14.1857 15.9857 14.9571L9.04286 8.01429C9.81429 7.37143 10.8429 6.98571 12 6.98571ZM8.01429 9.04286L14.9571 15.9857C14.1857 16.6286 13.0286 17.0143 12 17.0143C9.3 17.0143 6.98571 14.8286 6.98571 12C6.98571 10.8429 7.37143 9.81429 8.01429 9.04286ZM19.5857 3H4.41429C3.64286 3 3 3.64286 3 4.41429V19.5857C3 20.3571 3.64286 21 4.41429 21H19.5857C20.3571 21 21 20.3571 21 19.5857V4.41429C21 3.64286 20.3571 3 19.5857 3ZM19.5857 19.5857H4.41429V4.41429H19.5857V19.5857Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/SendIcon.d.ts

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

package/dist/web/SendIcon.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 SendIcon_SendIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const SendIcon_SendIcon = ({ 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.1895 7.37109C21.7803 8.63216 22.1104 10.0359 22.1104 11.5127C22.1101 17.0098 17.5659 21.4343 12 21.4346C6.43384 21.4346 1.88889 17.01 1.88867 11.5127C1.88867 10.0359 2.21872 8.63217 2.80957 7.37109L3.62402 7.75293L4.43945 8.13477C3.9579 9.16258 3.68945 10.3061 3.68945 11.5127C3.68967 15.9811 7.3928 19.6348 12 19.6348C16.6069 19.6345 20.3094 15.9809 20.3096 11.5127C20.3096 10.3062 20.0411 9.16256 19.5596 8.13477L20.375 7.75293L21.1895 7.37109ZM12.002 2.2627C12.0347 2.26271 12.0671 2.26943 12.0967 2.2832C12.1262 2.29698 12.1523 2.31697 12.1729 2.3418L15.2256 6.04883C15.2512 6.08004 15.2678 6.11757 15.2725 6.15723C15.2771 6.1969 15.2697 6.23741 15.252 6.27344C15.2341 6.30957 15.2058 6.34094 15.1709 6.3623C15.1361 6.38352 15.0958 6.39443 15.0547 6.39453H12.8789V12.3594H11.125V6.39453H8.94922C8.90813 6.39447 8.86782 6.3835 8.83301 6.3623C8.79809 6.34094 8.76982 6.30957 8.75195 6.27344C8.73421 6.23739 8.7268 6.19693 8.73145 6.15723C8.73616 6.11754 8.75265 6.08005 8.77832 6.04883L11.8311 2.3418C11.8516 2.31703 11.8777 2.29696 11.9072 2.2832C11.9368 2.26947 11.9692 2.2627 12.002 2.2627Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/SettingsIcon.d.ts

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

package/dist/web/SettingsIcon.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 SettingsIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const SettingsIcon = ({ 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.7908 10.049C21.6739 9.4314 21.2968 9.03239 20.8301 9.03239C20.8241 9.03239 20.8181 9.03244 20.8148 9.03256H20.7288C19.379 9.03256 18.2809 7.93441 18.2809 6.58459C18.2809 6.14654 18.4922 5.65545 18.494 5.65121C18.7359 5.1067 18.5498 4.43898 18.0615 4.09833L18.032 4.07752L15.5511 2.69936L15.5197 2.6856C15.3581 2.61535 15.1813 2.57973 14.994 2.57973C14.6103 2.57973 14.2329 2.73376 13.9846 2.99148C13.7125 3.27235 12.7733 4.07408 12.0516 4.07408C11.3234 4.07408 10.3786 3.2566 10.1054 2.97053C9.85581 2.70755 9.47539 2.55054 9.08777 2.55054C8.90419 2.55054 8.73052 2.58491 8.57169 2.65265L8.53945 2.66632L5.97107 4.07715L5.94073 4.09819C5.45089 4.43853 5.26375 5.10565 5.50539 5.64988C5.50752 5.65477 5.71914 6.14319 5.71914 6.58453C5.71914 7.93435 4.62099 9.0325 3.27117 9.0325H3.1866C3.18071 9.03239 3.17486 9.0323 3.16903 9.0323C2.70275 9.0323 2.32597 9.43135 2.20913 10.049C2.2006 10.0943 2.00029 11.168 2.00029 12.0078C2.00029 12.8476 2.2006 13.9213 2.20915 13.9667C2.32608 14.5843 2.70309 14.9833 3.16968 14.9833C3.17559 14.9833 3.18171 14.9832 3.18523 14.9831H3.27117C4.62099 14.9831 5.71914 16.0812 5.71914 17.431C5.71914 17.8696 5.50789 18.3601 5.50601 18.3644C5.26432 18.9085 5.44987 19.5761 5.93786 19.9177L5.96683 19.9379L8.40041 21.2988L8.43134 21.3124C8.59287 21.3834 8.76924 21.4193 8.95553 21.4193C9.34468 21.4193 9.72482 21.2586 9.9724 20.9894C10.318 20.6138 11.2558 19.8383 11.9484 19.8383C12.6983 19.8383 13.66 20.7077 13.9375 21.012C14.1856 21.2857 14.5683 21.4492 14.9614 21.4494C15.1441 21.4494 15.3174 21.4146 15.4764 21.346L15.508 21.3324L18.0306 19.9382L18.0604 19.9173C18.5494 19.5766 18.736 18.9095 18.4949 18.3665C18.4928 18.3615 18.2809 17.8666 18.2809 17.4311C18.2809 16.0813 19.379 14.9831 20.7288 14.9831L20.8122 14.9831C20.8178 14.9832 20.8233 14.9833 20.8288 14.9833C21.2964 14.9832 21.6739 14.5842 21.7906 13.967C21.7927 13.9561 21.9997 12.8686 21.9997 12.0078C21.9997 11.1641 21.7993 10.0941 21.7908 10.049ZM8.96823 20.0062L6.83943 18.8158C6.93324 18.5749 7.12439 18.0125 7.12439 17.4311C7.12439 15.412 5.5706 13.7427 3.56946 13.5892C3.5206 13.3044 3.40566 12.5745 3.40566 12.0079C3.40566 11.442 3.52054 10.7115 3.56938 10.4265C5.5706 10.273 7.12439 8.60375 7.12439 6.58456C7.12439 6.00466 6.93426 5.44386 6.84065 5.20284L9.10594 3.95866C9.10588 3.95866 9.106 3.95866 9.10594 3.95866C9.18758 4.04207 9.51442 4.36626 9.96549 4.6877C10.7025 5.21308 11.4044 5.47948 12.0516 5.47948C12.6924 5.47948 13.3887 5.21825 14.1211 4.70302C14.5693 4.38776 14.8945 4.06985 14.9759 3.98783C14.9758 3.98786 14.9761 3.9878 14.9759 3.98783L17.1601 5.20094C17.0664 5.44192 16.8755 6.00389 16.8755 6.58459C16.8755 8.60378 18.4293 10.2731 20.4305 10.4265C20.4793 10.7119 20.5943 11.4437 20.5943 12.0079C20.5943 12.5743 20.4794 13.3045 20.4306 13.5893C18.4294 13.7427 16.8756 15.412 16.8756 17.4312C16.8756 18.0118 17.066 18.5729 17.1597 18.8139L14.9486 20.0358C14.8532 19.9345 14.5314 19.6045 14.0859 19.2737C13.3346 18.7158 12.6154 18.4329 11.9483 18.4329C11.2877 18.4329 10.5739 18.7105 9.82693 19.2579C9.38786 19.5798 9.06384 19.9065 8.96823 20.0062ZM15.4987 11.9949C15.4987 10.0419 13.9097 8.45302 11.9566 8.45302C10.0036 8.45302 8.41477 10.0419 8.41477 11.9949C8.41477 13.9479 10.0036 15.5368 11.9566 15.5368C13.9097 15.5368 15.4987 13.9479 15.4987 11.9949ZM11.9566 9.85842C13.1348 9.85842 14.0933 10.8168 14.0933 11.9949C14.0933 13.173 13.1348 14.1315 11.9566 14.1315C10.7786 14.1315 9.82017 13.173 9.82017 11.9949C9.82017 10.8168 10.7786 9.85842 11.9566 9.85842Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/ShareIcon.d.ts

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

package/dist/web/ShareIcon.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 ShareIcon_ShareIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const ShareIcon_ShareIcon = ({ 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.6638 2.14331C18.8093 2.14331 20.5554 3.88849 20.5554 6.03394C20.5554 8.17943 18.8093 9.92456 16.6638 9.92456C15.7593 9.92448 14.9268 9.61323 14.2654 9.09351L11.0105 10.9636C11.1542 11.3692 11.2332 11.8053 11.2332 12.2595C11.2331 12.7204 11.1514 13.1624 11.0037 13.573L13.8054 15.3289C14.5167 14.5583 15.5349 14.0751 16.6638 14.075C18.8093 14.075 20.5553 15.8201 20.5554 17.9656C20.5554 20.1111 18.8093 21.8562 16.6638 21.8562C14.5185 21.856 12.7732 20.1109 12.7732 17.9656C12.7732 17.5078 12.8529 17.0682 12.9988 16.6599L10.1931 14.9021C9.48206 15.6685 8.46804 16.1501 7.34253 16.1501C5.19714 16.1501 3.45204 14.4049 3.4519 12.2595C3.4519 10.114 5.19706 8.3689 7.34253 8.3689C8.47508 8.3689 9.4961 8.85486 10.2078 9.62964L13.2429 7.88647C12.9434 7.33543 12.7732 6.70405 12.7732 6.03394C12.7733 3.88864 14.5185 2.1435 16.6638 2.14331ZM16.6638 15.6316C15.3767 15.6318 14.3299 16.6785 14.3298 17.9656C14.3298 19.2527 15.3767 20.3003 16.6638 20.3005C17.9511 20.3005 18.9988 19.2528 18.9988 17.9656C18.9987 16.6784 17.9511 15.6316 16.6638 15.6316ZM7.34253 9.92456C6.05524 9.92456 5.00854 10.9722 5.00854 12.2595C5.00868 13.5467 6.05534 14.5935 7.34253 14.5935C8.62974 14.5935 9.67736 13.5467 9.67749 12.2595C9.67749 10.9722 8.62982 9.92456 7.34253 9.92456ZM16.6638 3.69995C15.3767 3.70014 14.3299 4.74681 14.3298 6.03394C14.3298 7.32111 15.3767 8.3687 16.6638 8.3689C17.9511 8.3689 18.9988 7.32123 18.9988 6.03394C18.9987 4.74669 17.9511 3.69995 16.6638 3.69995Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/ShieldAlertFilledIcon.d.ts

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

package/dist/web/ShieldAlertFilledIcon.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 ShieldAlertFilledIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const ShieldAlertFilledIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M12.9287 2.14844C12.9383 2.15645 14.0936 2.99048 15.8984 3.72168C16.9795 4.14471 18.1211 4.39268 19.2803 4.45605H19.2852L20.8242 4.47852V5.21777L20.8281 13.3564C20.8281 14.4508 20.5063 15.5933 19.8711 16.7549C19.2702 17.8238 18.5096 18.7948 17.6162 19.6348C16.7763 20.4441 15.8302 21.1356 14.8037 21.6895C13.7767 22.2285 12.8073 22.5136 12.001 22.5137C11.1898 22.5137 10.2292 22.235 9.21484 21.7021C8.24049 21.1902 7.26276 20.4747 6.38281 19.6348C4.33984 17.6861 3.17196 15.3983 3.17188 13.3584V4.47852L4.71582 4.45605C5.8778 4.40082 7.023 4.15267 8.10352 3.72168C9.90698 2.98939 11.0278 2.17972 11.0771 2.14355L11.9961 1.47656L12.9287 2.14844ZM12.0039 14.3906C11.2465 14.3906 10.6318 14.9942 10.6318 15.7383C10.6319 16.4823 11.2466 17.0859 12.0039 17.0859C12.7611 17.0858 13.3749 16.4822 13.375 15.7383C13.375 14.9942 12.7612 14.3908 12.0039 14.3906ZM11.9971 7.99414C11.5113 7.99424 11.1172 8.38099 11.1172 8.85742V12.5244C11.1173 13.0016 11.5114 13.3876 11.9971 13.3877C12.4828 13.3877 12.8768 13.0016 12.877 12.5244V8.85742C12.877 8.38091 12.4829 7.99414 11.9971 7.99414Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/ShieldAlertIcon.d.ts

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

package/dist/web/ShieldAlertIcon.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 ShieldAlertIcon_ShieldAlertIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const ShieldAlertIcon_ShieldAlertIcon = ({ 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.8246 5.21933V4.48011L19.2855 4.45773H19.2807C18.1213 4.39438 16.9795 4.14647 15.8983 3.72334C14.0935 2.99213 12.9383 2.15853 12.9287 2.15052L11.9959 1.47852L11.0775 2.14573C11.0295 2.18091 9.90786 2.99052 8.10306 3.72331C7.02254 4.1543 5.87785 4.40249 4.71587 4.45773L3.17188 4.48013V13.3601C3.17188 15.4001 4.33986 17.6881 6.38305 19.6369C7.26305 20.4769 8.24066 21.1921 9.21507 21.7041C10.2294 22.2369 11.1894 22.5153 12.0007 22.5153C12.8071 22.5153 13.7767 22.2305 14.8039 21.6913C15.8304 21.1374 16.7767 20.4463 17.6167 19.6369C18.51 18.797 19.2702 17.8258 19.8711 16.7569C20.5063 15.5953 20.8279 14.4529 20.8279 13.3585L20.8247 5.22092L20.8246 5.21933ZM11.9559 3.36172L11.9959 3.32973L12.0375 3.36172C12.1735 3.45934 13.4327 4.34253 15.3271 5.11372C17.1831 5.86573 18.9271 5.94891 19.2567 5.95852L19.3175 5.96012L19.3223 13.3601C19.3255 14.9889 18.3239 16.8801 16.5783 18.5505C15.0375 20.0225 13.199 21.0113 12.0007 21.0113C11.4455 21.0113 10.6982 20.7793 9.89827 20.3601C8.9942 19.8725 8.16136 19.2631 7.42306 18.5489C5.67746 16.8801 4.67586 14.9889 4.67586 13.3569V5.95852L4.73984 5.95534C4.81667 5.95534 6.67587 5.92013 8.66947 5.11213C9.82451 4.6488 10.9263 4.06249 11.9559 3.36334V3.36172H11.9559Z",
-                fill: _color
+                fill: "currentColor"
             }),
             /*#__PURE__*/ jsx("path", {
                 d: "M11.9973 13.3864C12.4831 13.3864 12.8774 13.0005 12.8774 12.5232V8.85638C12.8774 8.37986 12.4831 7.99316 11.9973 7.99316C11.5114 7.99316 11.1171 8.37988 11.1171 8.85638V12.5232C11.1171 13.0005 11.5114 13.3864 11.9973 13.3864ZM12.0036 17.0845C11.2462 17.0845 10.6321 16.4813 10.6321 15.7371C10.6321 14.993 11.2462 14.3898 12.0036 14.3898C12.761 14.3898 13.375 14.993 13.375 15.7371C13.375 16.4813 12.761 17.0845 12.0036 17.0845Z",
-                fill: _color
+                fill: "currentColor"
             })
         ]
     });

package/dist/web/ShieldBanIcon.d.ts

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

package/dist/web/ShieldBanIcon.js

@@ -1,19 +1,19 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
-import { isThemeColor } from "../core/index.js";
-import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
-const ShieldBanIcon_ShieldBanIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const ShieldBanIcon_ShieldBanIcon = ({ 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.03027 5.8291C5.28445 5.94501 4.78227 5.95502 4.74023 5.95508L4.67578 5.95898V13.3564C4.67578 14.9884 5.67734 16.8801 7.42285 18.5488C8.16114 19.263 8.99437 19.8727 9.89844 20.3604C10.6983 20.7795 11.4458 21.0117 12.001 21.0117C13.1993 21.0115 15.0375 20.0225 16.5781 18.5508C17.0507 18.0986 17.4668 17.6283 17.8252 17.1533L18.915 18.1992C18.5213 18.7112 18.0881 19.193 17.6162 19.6367C16.7763 20.446 15.8302 21.1375 14.8037 21.6914C13.7767 22.2305 12.8073 22.5156 12.001 22.5156C11.1898 22.5156 10.2292 22.2369 9.21484 21.7041C8.24049 21.1921 7.26276 20.4767 6.38281 19.6367C4.33984 17.688 3.17196 15.4002 3.17188 13.3604V4.48047L4.60352 4.45898L6.03027 5.8291ZM12.9287 2.15039C12.9383 2.15841 14.0936 2.99243 15.8984 3.72363C16.9795 4.14666 18.1211 4.39464 19.2803 4.45801H19.2852L20.8242 4.48047V5.2207L20.8281 13.3584C20.8281 14.0078 20.7121 14.6734 20.4873 15.3506L19.2529 14.1162C19.2976 13.8592 19.3227 13.607 19.3223 13.3604L19.3174 5.95996L19.2568 5.95898C18.9272 5.94938 17.1832 5.8653 15.3271 5.11328C13.4328 4.3421 12.1731 3.45894 12.0371 3.36133L11.9961 3.33008L11.9561 3.36133V3.36328C11.2568 3.83816 10.5227 4.2584 9.7627 4.62598L8.63184 3.49512C10.123 2.83135 11.0328 2.17799 11.0771 2.14551L11.9961 1.47852L12.9287 2.15039Z",
-                fill: _color
+                fill: "currentColor"
             }),
             /*#__PURE__*/ jsx("rect", {
                 x: 2.92969,
@@ -22,7 +22,7 @@ const ShieldBanIcon_ShieldBanIcon = ({ size = 16, width = size, height = size, c
                 height: 1.7747,
                 rx: 0.887349,
                 transform: "rotate(45 2.92969 0.817383)",
-                fill: _color
+                fill: "currentColor"
             })
         ]
     });

package/dist/web/ShieldCheckFilledIcon.d.ts

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

package/dist/web/ShieldCheckFilledIcon.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 ShieldCheckFilledIcon_ShieldCheckFilledIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const ShieldCheckFilledIcon_ShieldCheckFilledIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M12.9287 2.14844C12.9383 2.15645 14.0936 2.99048 15.8984 3.72168C16.9795 4.14471 18.1211 4.39268 19.2803 4.45605H19.2852L20.8242 4.47852V5.21777L20.8281 13.3564C20.8281 14.4508 20.5063 15.5933 19.8711 16.7549C19.2702 17.8238 18.5096 18.7948 17.6162 19.6348C16.7763 20.4441 15.8302 21.1356 14.8037 21.6895C13.7767 22.2285 12.8073 22.5136 12.001 22.5137C11.1898 22.5137 10.2292 22.235 9.21484 21.7021C8.24049 21.1902 7.26276 20.4747 6.38281 19.6348C4.33984 17.6861 3.17196 15.3983 3.17188 13.3584V4.47852L4.71582 4.45605C5.8778 4.40082 7.023 4.15267 8.10352 3.72168C9.90698 2.98939 11.0278 2.17972 11.0771 2.14355L11.9961 1.47656L12.9287 2.14844ZM15.5068 8.67285C15.2834 8.6958 15.0784 8.8063 14.9365 8.98047L11.2422 13.5176L9.03711 11.0215C8.9635 10.9382 8.87425 10.8701 8.77441 10.8213C8.67441 10.7725 8.56518 10.7441 8.4541 10.7373C8.34319 10.7305 8.23205 10.7452 8.12695 10.7812C8.02171 10.8174 7.9242 10.8745 7.84082 10.9482C7.75755 11.0219 7.68941 11.111 7.64062 11.2109C7.59186 11.3108 7.56353 11.4193 7.55664 11.5303C7.5498 11.6413 7.5644 11.7532 7.60059 11.8584C7.63676 11.9636 7.69392 12.0602 7.76758 12.1436L10.1465 14.8359C10.4364 15.1633 10.8407 15.332 11.248 15.332C11.4665 15.3318 11.6824 15.2829 11.8799 15.1895C12.0772 15.096 12.252 14.9597 12.3906 14.791L16.25 10.0498C16.3918 9.87557 16.4594 9.65222 16.4365 9.42871C16.4136 9.20526 16.3021 9.00024 16.1279 8.8584C15.9537 8.71661 15.7303 8.64998 15.5068 8.67285Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/ShieldCheckIcon.d.ts

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

package/dist/web/ShieldCheckIcon.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 ShieldCheckIcon_ShieldCheckIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const ShieldCheckIcon_ShieldCheckIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M12.7568 1.67188C12.7664 1.67989 13.9219 2.51393 15.7266 3.24512C16.8078 3.66825 17.95 3.91615 19.1094 3.97949H19.1143L20.6533 4.00195V4.74219L20.6562 12.8799C20.6562 13.9743 20.3344 15.1167 19.6992 16.2783C19.0984 17.3471 18.3386 18.3183 17.4453 19.1582C16.6054 19.9675 15.6592 20.659 14.6328 21.2129C13.6056 21.7521 12.6355 22.0371 11.8291 22.0371C11.018 22.0371 10.0582 21.7583 9.04395 21.2256C8.06953 20.7136 7.09192 19.9982 6.21191 19.1582C4.16877 17.2094 3.00004 14.9218 3 12.8818V4.00195L4.54492 3.97949C5.70672 3.92422 6.85129 3.67603 7.93164 3.24512C9.73645 2.51232 10.8583 1.70217 10.9062 1.66699L11.8242 1L12.7568 1.67188ZM11.7842 2.88379V2.88477C10.7547 3.58389 9.65304 4.17048 8.49805 4.63379C6.50447 5.44178 4.64519 5.47656 4.56836 5.47656L4.50488 5.48047V12.8789C4.50504 14.5108 5.50649 16.4016 7.25195 18.0703C7.99018 18.7844 8.82258 19.3943 9.72656 19.8818C10.5265 20.301 11.2739 20.5332 11.8291 20.5332C13.0275 20.5332 14.8664 19.5443 16.4072 18.0723C18.1527 16.4019 19.1545 14.5106 19.1514 12.8818L19.1465 5.48145L19.085 5.48047C18.7546 5.47082 17.0107 5.38752 15.1553 4.63574C13.2624 3.86515 12.0038 2.98251 11.8662 2.88379L11.8242 2.85156L11.7842 2.88379ZM15.791 8.11816C15.9946 8.09743 16.1986 8.15801 16.3574 8.28711C16.5161 8.41644 16.6177 8.60401 16.6387 8.80762C16.6594 9.01132 16.598 9.21619 16.4688 9.375L12.3145 14.4785C12.1783 14.6441 12.0063 14.7784 11.8125 14.8701C11.6189 14.9617 11.4066 15.0095 11.1924 15.0098C10.8424 15.0097 10.4938 14.8827 10.2217 14.6357L10.1094 14.5225L7.54883 11.625C7.48181 11.5492 7.43048 11.4599 7.39746 11.3643C7.36455 11.2685 7.35034 11.1665 7.35645 11.0654C7.36268 10.9643 7.38918 10.8645 7.43359 10.7734C7.47807 10.6824 7.54033 10.6004 7.61621 10.5332C7.69212 10.4662 7.78121 10.4148 7.87695 10.3818C7.97276 10.3489 8.07468 10.3346 8.17578 10.3408C8.2769 10.3471 8.37673 10.3735 8.46777 10.418C8.55863 10.4625 8.64001 10.5248 8.70703 10.6006L11.1904 13.4102L15.2705 8.39844C15.3998 8.23979 15.5874 8.13914 15.791 8.11816ZM11.0527 14.9023L11.1924 14.9102C11.2422 14.9101 11.2925 14.907 11.3418 14.9014C11.2924 14.9069 11.2423 14.9091 11.1924 14.9092C11.1043 14.9092 11.016 14.8999 10.9297 14.8828C10.9703 14.8909 11.0116 14.8981 11.0527 14.9023ZM7.45605 11.0713C7.45072 11.1592 7.46259 11.2477 7.49121 11.3311C7.51996 11.4145 7.56559 11.4925 7.62402 11.5586L10.1846 14.4561L7.62402 11.5576C7.56567 11.4915 7.5209 11.4144 7.49219 11.3311C7.46346 11.2475 7.45161 11.1585 7.45703 11.0703L7.45605 11.0713Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/ShieldPlusIcon.d.ts

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

package/dist/web/ShieldPlusIcon.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 ShieldPlusIcon_ShieldPlusIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const ShieldPlusIcon_ShieldPlusIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M12 2C12.2158 2 12.4294 2.04497 12.627 2.13184L19.6348 5.21094C19.9114 5.33257 20.1473 5.53214 20.3125 5.78516C20.4777 6.03829 20.5654 6.33445 20.5654 6.63672V11.4629C20.5654 14.4187 19.2438 17.0608 16.8838 18.9043L12.8984 21.7148C12.6357 21.9002 12.3215 22 12 22C11.6786 21.9999 11.3652 21.9001 11.1025 21.7148L7.08691 18.8818C4.75711 17.0613 3.43457 14.4191 3.43457 11.4629V6.63672C3.4347 6.33453 3.52325 6.03818 3.68848 5.78516C3.85363 5.53243 4.08888 5.33349 4.36523 5.21191L11.373 2.13184C11.5705 2.04501 11.7843 2.00004 12 2ZM4.99219 6.63672V11.4619C4.99219 13.9326 6.0886 16.1247 8.01465 17.6318L12 20.4424L15.9551 17.6543C17.9118 16.1254 19.0088 13.9335 19.0088 11.4629V6.63672L12 3.55762L4.99219 6.63672ZM11.998 5.92578C12.2337 5.92575 12.461 6.01553 12.6338 6.17578C12.8063 6.33596 12.9119 6.55528 12.9297 6.79004L12.9326 6.86035V10.1309H16.2012C16.717 10.131 17.1356 10.5496 17.1357 11.0654C17.1357 11.3133 17.0366 11.5513 16.8613 11.7266C16.6862 11.9016 16.4488 11.9999 16.2012 12H12.9326V15.2705C12.9336 15.5129 12.8396 15.7459 12.6719 15.9209C12.5041 16.0958 12.2754 16.1988 12.0332 16.208C11.7909 16.2171 11.5545 16.1316 11.374 15.9697C11.1936 15.8078 11.0825 15.5817 11.0654 15.3398L11.0635 15.2705V12H7.79102C7.54337 12 7.30603 11.9016 7.13086 11.7266C6.95562 11.5513 6.85645 11.3133 6.85645 11.0654C6.85662 10.5496 7.27514 10.1309 7.79102 10.1309H11.0635V6.86035C11.0635 6.73769 11.0878 6.61625 11.1348 6.50293C11.1817 6.38972 11.2503 6.28688 11.3369 6.2002C11.4237 6.11343 11.5273 6.04403 11.6406 5.99707C11.7539 5.95021 11.8755 5.92578 11.998 5.92578Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/ShieldXFilledIcon.d.ts

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

package/dist/web/ShieldXFilledIcon.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 ShieldXFilledIcon_ShieldXFilledIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const ShieldXFilledIcon_ShieldXFilledIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M12.9287 2.14844C12.9383 2.15645 14.0936 2.99048 15.8984 3.72168C16.9795 4.14471 18.1211 4.39268 19.2803 4.45605H19.2852L20.8242 4.47852V5.21777L20.8281 13.3564C20.8281 14.4508 20.5063 15.5933 19.8711 16.7549C19.2702 17.8238 18.5096 18.7948 17.6162 19.6348C16.7763 20.4441 15.8302 21.1356 14.8037 21.6895C13.7767 22.2285 12.8073 22.5136 12.001 22.5137C11.1898 22.5137 10.2292 22.235 9.21484 21.7021C8.24049 21.1902 7.26276 20.4747 6.38281 19.6348C4.33984 17.6861 3.17196 15.3983 3.17188 13.3584V4.47852L4.71582 4.45605C5.8778 4.40082 7.023 4.15267 8.10352 3.72168C9.90698 2.98939 11.0278 2.17972 11.0771 2.14355L11.9961 1.47656L12.9287 2.14844ZM15.7793 8.21973C15.4559 7.89664 14.8887 7.93411 14.5195 8.30371L12 10.8242L9.47949 8.30371C9.10978 7.93424 8.54304 7.89697 8.21973 8.2207C7.89664 8.54455 7.93411 9.11129 8.30371 9.48047L10.8242 12L8.30371 14.5205C7.93424 14.8902 7.89697 15.457 8.2207 15.7803C8.54455 16.1034 9.11129 16.0659 9.48047 15.6963L12 13.1758L14.5205 15.6963C14.8902 16.0658 15.457 16.1036 15.7803 15.7803C16.1036 15.457 16.0658 14.8898 15.6963 14.5205L13.1758 12L15.6953 9.47949C16.065 9.10979 16.1027 8.54311 15.7793 8.21973Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/ShieldXIcon.d.ts

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

package/dist/web/ShieldXIcon.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 ShieldXIcon_ShieldXIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const ShieldXIcon_ShieldXIcon = ({ 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.8246 5.21933V4.48011L19.2855 4.45773H19.2807C18.1213 4.39438 16.9795 4.14647 15.8983 3.72334C14.0935 2.99213 12.9383 2.15853 12.9287 2.15052L11.9959 1.47852L11.0775 2.14573C11.0295 2.18091 9.90786 2.99052 8.10306 3.72331C7.02254 4.1543 5.87785 4.40249 4.71587 4.45773L3.17188 4.48013V13.3601C3.17188 15.4001 4.33986 17.6881 6.38305 19.6369C7.26305 20.4769 8.24066 21.1921 9.21507 21.7041C10.2294 22.2369 11.1894 22.5153 12.0007 22.5153C12.8071 22.5153 13.7767 22.2305 14.8039 21.6913C15.8304 21.1374 16.7767 20.4463 17.6167 19.6369C18.51 18.797 19.2702 17.8258 19.8711 16.7569C20.5063 15.5953 20.8279 14.4529 20.8279 13.3585L20.8247 5.22092L20.8246 5.21933ZM11.9559 3.36172L11.9959 3.32973L12.0375 3.36172C12.1735 3.45934 13.4327 4.34253 15.3271 5.11372C17.1831 5.86573 18.9271 5.94891 19.2567 5.95852L19.3175 5.96012L19.3223 13.3601C19.3255 14.9889 18.3239 16.8801 16.5783 18.5505C15.0375 20.0225 13.199 21.0113 12.0007 21.0113C11.4455 21.0113 10.6982 20.7793 9.89827 20.3601C8.9942 19.8725 8.16136 19.2631 7.42306 18.5489C5.67746 16.8801 4.67586 14.9889 4.67586 13.3569V5.95852L4.73984 5.95534C4.81667 5.95534 6.67587 5.92013 8.66947 5.11213C9.82451 4.6488 10.9263 4.06249 11.9559 3.36334V3.36172H11.9559Z",
-                fill: _color
+                fill: "currentColor"
             }),
             /*#__PURE__*/ jsx("path", {
                 d: "M13.1754 11.9998L15.6955 9.47967C16.0653 9.10996 16.1031 8.5432 15.7798 8.21981C15.4564 7.89643 14.8892 7.93433 14.5199 8.30403L11.9998 10.8242L9.47967 8.30403C9.10996 7.93433 8.5432 7.89643 8.21981 8.22024C7.89643 8.54404 7.93433 9.11081 8.30403 9.48009L10.8242 12.0002L8.30403 14.5203C7.93433 14.89 7.89643 15.4568 8.22024 15.7802C8.54404 16.1036 9.11081 16.0657 9.48009 15.696L12.0002 13.1758L14.5203 15.696C14.89 16.0657 15.4568 16.1036 15.7802 15.7802C16.1036 15.4568 16.0657 14.8896 15.696 14.5203L13.1758 12.0002L13.1754 11.9998Z",
-                fill: _color
+                fill: "currentColor"
             })
         ]
     });

package/dist/web/ShipIcon.d.ts

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

package/dist/web/ShipIcon.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 ShipIcon_ShipIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const ShipIcon_ShipIcon = ({ 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.9291 19.3531C21.786 18.9953 21.3566 18.8164 20.9988 18.9953L19.7822 19.532C19.4244 19.6752 19.0308 19.8183 18.6372 19.9256L20.963 13.6638C21.2135 12.9124 20.8199 12.0894 20.0685 11.839L18.4225 11.2664V7.47357C18.4225 6.68637 17.7784 6.0423 16.9912 6.0423H15.2021V4.61102C15.2021 3.43022 14.236 2.46411 13.0552 2.46411H10.9083C9.7275 2.46411 8.76139 3.43022 8.76139 4.61102V6.0423H6.9723C6.1851 6.0423 5.54103 6.68637 5.54103 7.47357V11.3738L4.18132 11.839C3.8235 11.9821 3.53724 12.2326 3.39411 12.5904C3.25099 12.9482 3.21521 13.3418 3.35833 13.6996L5.71993 20.033C5.25477 19.9256 4.78961 19.8183 4.36022 19.6036L3.00051 18.9953C2.6427 18.8164 2.21331 18.9953 2.07019 19.3531C1.89128 19.711 2.07019 20.1403 2.42801 20.2835L3.75193 20.8918C4.57492 21.2496 5.3979 21.4643 6.29244 21.5358H6.90073C7.72372 21.5358 8.5467 21.3927 9.3339 21.1422C10.1211 20.8918 10.9083 20.7486 11.6955 20.7486H12.3038C12.9121 20.7844 13.4846 20.8918 14.0929 21.0707L14.3434 21.1422C14.9516 21.3211 15.5242 21.4285 16.1324 21.5001H16.3471C16.4903 21.5001 16.6334 21.5 16.7765 21.5358H17.1343C17.3133 21.5358 17.4564 21.5358 17.6353 21.5001H17.6711L17.8858 21.4643C18.7445 21.3569 19.6033 21.1422 20.3905 20.7844L21.6071 20.2477C21.9291 20.1403 22.108 19.711 21.9291 19.3531ZM10.1927 4.61102C10.1927 4.21742 10.5147 3.89538 10.9083 3.89538H13.0552C13.4488 3.89538 13.7708 4.21742 13.7708 4.61102V6.0423H10.1927V4.61102ZM17.027 20.1403H16.5618C16.4903 20.1403 16.3829 20.1403 16.3114 20.1046C15.9178 20.0688 15.4884 19.9972 15.0948 19.8899L14.8443 19.8183C14.1287 19.6036 13.413 19.4605 12.6616 19.3889V10.8013L19.6033 13.1987L17.027 20.1403ZM6.9723 7.47357H16.9912V10.6939L13.5919 9.51313C13.1268 9.37001 12.6616 9.26266 12.1964 9.26266C11.7313 9.26266 11.2661 9.33422 10.801 9.51313L6.9723 10.8013V7.47357ZM11.2661 10.9444V19.3889C10.3 19.4247 9.3339 19.6036 8.40357 19.9256C8.04575 20.033 7.65215 20.1403 7.29434 20.1403L4.68226 13.1987L11.2661 10.9444Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/ShoppingCartInIcon.d.ts

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