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

package/dist/web/CashRewardsIcon.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 CashRewardsIcon_CashRewardsIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const CashRewardsIcon_CashRewardsIcon = ({ 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.0928 3C18.1758 3.00004 21.5165 6.25238 21.5166 10.2881C21.5165 13.079 19.9151 15.4961 17.582 16.7197C16.2387 19.2632 13.5689 20.9999 10.4951 21C6.07376 21 2.48355 17.4096 2.4834 12.9883C2.48353 9.13788 5.20665 5.91884 8.83008 5.15137C10.1754 3.8227 12.0385 3.00015 14.0928 3ZM10.4951 6.37793C10.1668 6.37793 9.84393 6.40187 9.52832 6.44824L9.38867 6.60547L9.26465 6.49414C6.2042 7.07181 3.8849 9.7614 3.88477 12.9883C3.88491 16.6357 6.84769 19.5976 10.4951 19.5977C13.161 19.5975 15.4583 18.0141 16.5029 15.7383L16.4844 15.6982L16.5322 15.6748C16.8987 14.8535 17.1045 13.9449 17.1045 12.9883C17.1043 9.34095 14.1424 6.37808 10.4951 6.37793ZM10.4248 7.98438C10.8974 7.98438 11.2754 8.36242 11.2754 8.83496V9.20996C12.2911 9.42814 13.0205 10.0658 13.2285 10.9785L13.2295 10.9834C13.2974 11.3075 13.1069 11.6347 12.7715 11.7158L12.7666 11.7168C12.7068 11.73 12.6543 11.7295 12.6299 11.7295H12.3125C11.9566 11.7294 11.6297 11.5201 11.4766 11.2012L11.4756 11.1992C11.3364 10.9018 10.9816 10.6846 10.4131 10.6846C10.0585 10.6846 9.78889 10.7711 9.61621 10.8975C9.45028 11.019 9.36432 11.1823 9.36426 11.3799C9.36429 11.5269 9.41283 11.6318 9.54297 11.7324C9.69171 11.8473 9.94838 11.9553 10.3672 12.0557H10.3662L11.1699 12.2422C11.898 12.4083 12.4599 12.6504 12.8389 13.0176C13.2288 13.3954 13.3984 13.8782 13.3984 14.457C13.3984 15.1013 13.171 15.655 12.75 16.0713C12.3795 16.4375 11.8725 16.6833 11.2725 16.8037V17.2715C11.2722 17.7438 10.8943 18.1211 10.4219 18.1211C9.94978 18.1207 9.57248 17.7436 9.57227 17.2715V16.8145C8.44458 16.6096 7.62578 15.9513 7.43262 14.9268L7.43457 14.9258C7.37401 14.6247 7.57244 14.3276 7.87891 14.2744V14.2764C7.93043 14.2655 7.97456 14.2647 7.98242 14.2646H8.45996C8.77006 14.2648 9.06936 14.4444 9.2041 14.7363H9.20508C9.36418 15.072 9.79949 15.328 10.4434 15.3281C10.8224 15.3281 11.1224 15.2329 11.3193 15.0947C11.5119 14.9594 11.6045 14.7864 11.6045 14.5986C11.6044 14.4276 11.5492 14.3081 11.415 14.1992C11.2632 14.0762 11.0019 13.9608 10.5752 13.8564L9.66602 13.6455V13.6445C8.99539 13.4904 8.4657 13.2456 8.10254 12.8789C7.73172 12.5045 7.55767 12.0279 7.55762 11.4678C7.55762 10.3053 8.39781 9.47989 9.5752 9.21777V8.83496C9.5752 8.36267 9.95261 7.98478 10.4248 7.98438ZM14.0928 4.40137C13.1213 4.40146 12.2046 4.62783 11.3926 5.02734C15.3921 5.4743 18.5067 8.87042 18.5068 12.9883C18.5068 13.4774 18.4601 13.9559 18.376 14.4209C19.4518 13.3555 20.1142 11.8949 20.1143 10.2881C20.1142 7.0529 17.4288 4.4014 14.0928 4.40137Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/CatIcon.d.ts

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

package/dist/web/CatIcon.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 CatIcon_CatIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const CatIcon = ({ 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.0302 15.6534C17.1837 15.4218 17.4841 15.3243 17.75 15.4337L21.5635 16.9884H21.5625C21.8318 17.0961 21.9765 17.3768 21.9287 17.6486L21.8955 17.7648C21.8014 17.9983 21.5773 18.1378 21.3418 18.1378C21.2629 18.1377 21.1886 18.1208 21.1172 18.0929H21.1162L18.2021 16.9054C18.2679 16.9321 18.3311 16.9695 18.3867 17.0206L18.3877 17.0216C18.6299 17.2478 18.6427 17.623 18.4199 17.8654V17.8663C16.8047 19.6042 14.433 20.5997 11.915 20.5997C9.54672 20.5997 7.26849 19.6994 5.6699 18.131C5.43344 17.9008 5.43094 17.522 5.66013 17.2863L5.75291 17.2081C5.95035 17.0729 6.21024 17.0727 6.41013 17.2013L6.50486 17.2765L6.76951 17.5226C8.12694 18.7197 9.97995 19.4033 11.9121 19.4034C14.1037 19.4034 16.154 18.543 17.54 17.0509C17.7075 16.8715 17.9566 16.8183 18.1738 16.8937L17.3008 16.5382C16.9973 16.4153 16.8481 16.0665 16.9736 15.7618L17.0302 15.6534ZM6.25095 15.4366C6.55604 15.3101 6.90624 15.4596 7.02927 15.7638C7.15189 16.0671 7.00703 16.4164 6.70505 16.5402H6.70408L2.88962 18.0949L2.88865 18.0939C2.81298 18.1263 2.73571 18.1407 2.66306 18.1407C2.42759 18.1406 2.20339 18.0012 2.10935 17.7677V17.7667C1.98443 17.4623 2.13342 17.1143 2.4365 16.9913L6.25095 15.4366ZM11.9961 14.5773C12.2007 14.5774 12.3681 14.7446 12.3681 14.9493C12.3682 15.4478 12.799 16.1593 13.2031 16.1593C13.6637 16.1592 14.0381 15.8003 14.0381 15.3585C14.0382 15.1539 14.2054 14.9865 14.4101 14.9865C14.6147 14.9866 14.7811 15.1539 14.7812 15.3585C14.7812 16.2126 14.0704 16.9054 13.2002 16.9054C12.6856 16.9054 12.2706 16.5545 11.9931 16.1154C11.7129 16.5572 11.2978 16.9054 10.7832 16.9054C9.91039 16.9052 9.20186 16.2125 9.20994 15.3585C9.21005 15.1539 9.37731 14.9865 9.58201 14.9865C9.78664 14.9865 9.95397 15.1539 9.95408 15.3585C9.95408 15.8004 10.3283 16.1593 10.789 16.1593C11.1931 16.1591 11.6239 15.4504 11.624 14.9493C11.624 14.7446 11.7913 14.5773 11.9961 14.5773ZM5.95994 13.7765C6.20019 13.7992 6.39692 13.9707 6.4658 14.1974L6.48923 14.3156V14.3165C6.51804 14.6426 6.2789 14.9335 5.95212 14.9659H5.95115L2.03709 15.338L2.03611 15.337C2.01332 15.3401 1.99184 15.3409 1.97849 15.3409C1.67459 15.3407 1.41605 15.111 1.3867 14.8009C1.35428 14.4731 1.59695 14.1821 1.92283 14.1495H1.9238L5.83591 13.7784L5.95994 13.7765ZM18.167 13.7784H18.166L22.0791 14.1495C22.3671 14.1778 22.5873 14.4044 22.6162 14.6798V14.8009C22.5869 15.1081 22.328 15.3409 22.0234 15.3409C22.0099 15.3409 21.9886 15.3402 21.9658 15.337L18.0508 14.9659V14.965C17.7237 14.9351 17.4816 14.6421 17.5136 14.3156C17.5429 13.9905 17.8311 13.7394 18.167 13.7784ZM18.4004 3.40833C18.6211 3.37167 18.8461 3.46137 18.9795 3.64563L19.0703 3.7843C19.4067 4.33868 20.5021 6.51684 19.9033 10.545C20.203 11.319 20.373 12.1467 20.373 13.0099C20.373 13.3399 20.1043 13.6084 19.7744 13.6085C19.4444 13.6084 19.1758 13.3399 19.1758 13.0099C19.1755 9.49611 15.9291 6.61731 11.9121 6.61731C8.85321 6.6175 6.2424 8.29051 5.17185 10.6388C5.15614 10.7187 5.12521 10.794 5.07908 10.8615C4.8044 11.5363 4.64944 12.2577 4.64939 13.0099C4.64939 13.3399 4.38076 13.6085 4.05076 13.6085C3.72045 13.6084 3.45505 13.3398 3.45505 13.0128C3.45507 12.0977 3.6454 11.2233 3.97752 10.4113C3.34196 5.89927 4.84065 3.75231 4.91892 3.64466C5.07359 3.4355 5.34258 3.34771 5.59177 3.43176L5.5908 3.43274C5.85555 3.52079 6.18338 3.70876 6.52439 3.93958C6.86736 4.17175 7.23105 4.45179 7.56931 4.72669C8.23399 5.26686 8.80562 5.79258 8.93748 5.91516C9.86346 5.60262 10.8643 5.42303 11.9121 5.42298C12.9824 5.42298 14.001 5.60797 14.9424 5.93274C14.9467 5.92814 14.9508 5.92263 14.956 5.91809C15.079 5.805 15.6561 5.27411 16.3281 4.72766C16.6664 4.45258 17.03 4.17199 17.373 3.93958C17.714 3.70854 18.0418 3.51983 18.3066 3.43176L18.4004 3.40833ZM9.36912 10.2316C9.92947 10.2316 10.3818 10.655 10.3818 11.1749C10.3816 11.6947 9.92935 12.1173 9.36912 12.1173C8.80884 12.1173 8.35661 11.6948 8.35642 11.1749C8.35642 10.6523 8.81141 10.2316 9.36912 10.2316ZM14.7256 10.2316C15.2858 10.2318 15.7383 10.6551 15.7383 11.1749C15.7381 11.6946 15.2856 12.1171 14.7256 12.1173C14.1653 12.1173 13.7121 11.6948 13.7119 11.1749C13.7119 10.6523 14.1679 10.2316 14.7256 10.2316ZM18.2441 4.79407C17.6509 5.16867 16.8022 5.86998 16.1513 6.44934C17.2314 7.01481 18.1558 7.78843 18.8652 8.70813C18.9311 6.71133 18.5213 5.41967 18.2441 4.79407ZM5.65232 4.79407C5.38013 5.40712 4.97722 6.67151 5.0283 8.61731C5.73865 7.72376 6.6563 6.97414 7.7197 6.42591C7.07047 5.84992 6.23922 5.16284 5.65232 4.79407ZM8.97752 5.96594L8.97849 5.96692L8.97752 5.96497L8.97654 5.96399L8.97752 5.96594Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };
-CatIcon_CatIcon.displayName = 'CatIcon|cat';
-const CatIcon = CatIcon_CatIcon;
-export { CatIcon as default };
+CatIcon.displayName = 'CatIcon|cat';
+const web_CatIcon = CatIcon;
+export { web_CatIcon as default };

package/dist/web/CexWalletIcon.d.ts

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

package/dist/web/CexWalletIcon.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 CexWalletIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const CexWalletIcon = ({ 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.0891 18.829C21.0891 20.0256 20.1191 20.9957 18.9226 20.9957L5.05581 20.9958C3.85933 20.9958 2.88916 20.0257 2.88916 18.8291L2.88916 5.82908C2.88916 4.87181 3.66523 4.09571 4.62254 4.09571L11.6297 4.09577L13.1637 3.33259C13.3863 3.25179 13.7282 3.22304 13.907 3.37015L14.3249 4.09574H17.6225C18.5798 4.09574 19.3558 4.87178 19.3558 5.82911V7.12904C20.3131 7.12904 21.0892 7.90502 21.0892 8.86238L21.0891 18.829ZM4.62254 4.96244C4.14393 4.96244 3.75586 5.78372 3.75586 6.26242C3.75586 6.74109 4.14387 7.1291 4.6226 7.1291H5.24883H4.81549H4.89758C4.90312 7.12688 4.90678 7.12214 4.91251 7.12001L10.1046 4.96247L4.62254 4.96244ZM13.7561 5.0406L13.2955 4.20714L11.752 4.96247H11.7481L6.96434 7.1291H14.7913L13.7561 5.0406ZM18.4892 5.82914C18.4892 5.35048 18.1012 4.96247 17.6225 4.96247H14.64L15.7035 7.12907H18.4891L18.4892 5.82914ZM19.3559 7.99583H4.62254C4.30526 7.99577 4.01157 7.90412 3.75583 7.75533V18.829C3.75583 19.547 4.33787 20.129 5.05578 20.129H18.9224C19.6404 20.129 20.2224 19.547 20.2224 18.829V15.7957H18.489C17.5317 15.7957 16.7558 15.0197 16.7558 14.0624C16.7558 13.1052 17.5317 12.3291 18.489 12.3291H20.2224V8.86244C20.2224 8.38378 19.8344 7.99583 19.3559 7.99583ZM20.2224 14.9291L20.2224 13.1957H18.4891C18.0105 13.1957 17.6225 13.5837 17.6225 14.0624C17.6225 14.5411 18.0105 14.9291 18.4891 14.9291H20.2224ZM18.7595 13.7706H19.3558V14.3416H18.7595V13.7706Z",
-            fill: _color,
-            stroke: _color,
+            fill: "currentColor",
+            stroke: "currentColor",
             strokeWidth: 0.419918
         })
     });

package/dist/web/ChartColorSwitchIcon.d.ts

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

package/dist/web/ChartColorSwitchIcon.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 ChartColorSwitchIcon_ChartColorSwitchIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const ChartColorSwitchIcon_ChartColorSwitchIcon = ({ 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.6851 13.0454C18.6798 12.8824 18.7379 12.7181 18.8608 12.5933C19.0391 12.4124 19.2998 12.3689 19.5181 12.4614C19.5331 12.4678 19.5467 12.4774 19.561 12.4849C19.5813 12.4955 19.6024 12.5049 19.6216 12.5181C19.6493 12.5369 19.6745 12.5593 19.6987 12.5825C19.7028 12.5864 19.7084 12.5892 19.7124 12.5933L21.9712 14.8862C22.0889 15.0059 22.147 15.1614 22.147 15.3179C22.147 15.4745 22.0871 15.6311 21.9692 15.7495C21.7334 15.9888 21.3523 15.9888 21.1177 15.7495L19.8901 14.5024L19.8901 21.1382C19.8901 21.4757 19.62 21.7493 19.2876 21.7495C18.9551 21.7495 18.6851 21.4758 18.6851 21.1382L18.6851 13.0454ZM1.85303 10.3813C1.85303 5.89098 5.43809 2.25051 9.86084 2.25049C14.2832 2.25055 17.8684 5.48428 17.8677 9.47803C17.8674 10.6033 17.4609 11.6315 16.7905 12.4224C17.0918 12.4559 17.3275 12.7112 17.3276 13.0259L17.3276 21.1382L17.3169 21.2554C17.3021 21.3326 17.2723 21.4075 17.228 21.4751L17.1509 21.5708C17.042 21.6814 16.8912 21.7494 16.7251 21.7495C16.5765 21.7495 16.4415 21.6936 16.3364 21.603C16.324 21.5923 16.3101 21.5827 16.2983 21.5708L14.0415 19.2788C13.8056 19.0393 13.8056 18.6531 14.0415 18.4136C14.2773 18.1743 14.6572 18.1744 14.8931 18.4136L16.1226 19.6616L16.1226 13.064C15.3733 13.6474 14.4366 13.9951 13.4194 13.9956L11.8442 13.9956C11.5873 13.9946 11.3347 14.0692 11.1187 14.2104C10.9027 14.3517 10.7318 14.5537 10.6265 14.7915C10.5211 15.0294 10.4857 15.2935 10.5249 15.5513C10.5642 15.8091 10.6768 16.0501 10.8481 16.2446C11.0705 16.495 11.1942 16.8206 11.1948 17.1577C11.1946 17.9057 10.582 18.5112 9.86084 18.5112C5.43823 18.5112 1.85326 14.8715 1.85303 10.3813ZM3.46143 10.106C3.31715 13.5872 5.90044 16.5664 9.31982 16.8618C9.05502 16.4099 8.91344 15.8944 8.90869 15.3687C8.90397 14.8429 9.03685 14.3254 9.29346 13.8687C9.55009 13.4119 9.92142 13.0325 10.3696 12.769C10.8177 12.5057 11.3265 12.3673 11.8442 12.3687L13.4204 12.3687C14.1754 12.368 14.8993 12.0632 15.4331 11.521C15.9669 10.9786 16.267 10.2428 16.2671 9.47607C16.2668 6.42788 13.4383 3.87555 9.86084 3.87549C6.42885 3.87773 3.60579 6.62463 3.46143 10.106ZM12.2866 9.39893C12.2404 9.16246 12.2641 8.91756 12.355 8.69482C12.4459 8.472 12.5998 8.28097 12.7974 8.14697C12.9948 8.01318 13.227 7.9419 13.4644 7.94189C13.622 7.94188 13.7786 7.97342 13.9243 8.03467C14.0699 8.09593 14.2025 8.18618 14.314 8.29932C14.4253 8.41247 14.5134 8.54704 14.5737 8.69482C14.6341 8.84273 14.6655 9.00154 14.6655 9.16162C14.6655 9.40253 14.5951 9.638 14.4634 9.83838C14.3315 10.0389 14.1437 10.1952 13.9243 10.2876C13.7049 10.3799 13.463 10.4049 13.23 10.3579C12.997 10.3109 12.7827 10.1944 12.6147 10.0239C12.4468 9.8534 12.333 9.63544 12.2866 9.39893ZM8.68408 6.96045C8.63771 6.72403 8.66171 6.47911 8.75244 6.25635C8.84322 6.03357 8.9965 5.84258 9.19385 5.7085C9.39117 5.57446 9.62342 5.50268 9.86084 5.50244C10.0186 5.50231 10.175 5.53404 10.3208 5.59521C10.4667 5.65651 10.5998 5.74651 10.7114 5.85986C10.8231 5.97323 10.9118 6.10821 10.9722 6.25635C11.0324 6.40435 11.0631 6.563 11.063 6.72314C11.0628 6.96424 10.9929 7.2005 10.8608 7.40088C10.7288 7.60121 10.5402 7.75695 10.3208 7.84912C10.1015 7.94115 9.86018 7.96548 9.62744 7.91846C9.39456 7.87137 9.18013 7.75493 9.01221 7.58447C8.84445 7.41404 8.73045 7.19676 8.68408 6.96045ZM5.07959 9.39893C5.03332 9.16243 5.05706 8.91759 5.14795 8.69482C5.2389 8.47198 5.39277 8.28096 5.59033 8.14697C5.78777 8.01319 6.01995 7.94188 6.25732 7.94189C6.5756 7.94228 6.88085 8.07088 7.10596 8.29932C7.33107 8.52791 7.45815 8.83836 7.4585 9.16162C7.45845 9.40251 7.38805 9.63801 7.25635 9.83838C7.1244 10.0389 6.93673 10.1962 6.71728 10.2886C6.49783 10.3809 6.25593 10.4049 6.02295 10.3579C5.78994 10.3109 5.57571 10.1945 5.40771 10.0239C5.23972 9.85336 5.12593 9.63551 5.07959 9.39893Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/ChartLine2Icon.d.ts

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

package/dist/web/ChartLine2Icon.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 ChartLine2Icon_ChartLine2Icon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const ChartLine2Icon_ChartLine2Icon = ({ 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.0611 3C20.2466 3.00024 22.0248 4.86141 22.025 7.14844V12.2725C22.025 12.6775 21.6956 13.0067 21.2906 13.0068C20.8855 13.0068 20.5562 12.6775 20.5562 12.2725V7.14844C20.5561 5.67158 19.4364 4.469 18.0611 4.46875H5.93903C4.56356 4.46875 3.4431 5.67021 3.44294 7.14844V16.8525C3.44298 18.3297 4.56348 19.5322 5.93903 19.5322H18.0611C19.4365 19.532 20.5562 18.3307 20.5562 16.8525C20.5562 16.4475 20.8855 16.1182 21.2906 16.1182C21.6956 16.1183 22.025 16.4475 22.025 16.8525C22.0249 19.1397 20.2466 20.9998 18.0611 21H5.93903C3.75339 21 1.97534 19.1387 1.97517 16.8516V7.14844C1.97533 4.86126 3.75339 3 5.93903 3H18.0611ZM17.1715 8.33301C17.2055 8.33303 17.2384 8.33498 17.2701 8.33984C17.2787 8.34107 17.2862 8.34253 17.2935 8.34375C17.3595 8.35475 17.4204 8.37452 17.4791 8.40137C17.4852 8.40381 17.4915 8.40771 17.4976 8.41016C17.527 8.42483 17.5537 8.44089 17.5806 8.45801L17.5826 8.45898C17.6082 8.47727 17.6337 8.49687 17.6568 8.51758C17.6629 8.52247 17.6683 8.52831 17.6744 8.5332C17.6963 8.55513 17.7193 8.57722 17.7388 8.60156L17.7418 8.60449C17.7625 8.62889 17.7794 8.65482 17.7965 8.68164C17.8 8.68641 17.8036 8.6923 17.8072 8.69824C17.8247 8.72673 17.8405 8.75712 17.8531 8.78809V8.78906C17.8531 8.79029 17.8541 8.79174 17.8541 8.79297C17.8651 8.8223 17.8748 8.853 17.8834 8.88477C17.8858 8.89084 17.887 8.89724 17.8883 8.90332C17.8956 8.93504 17.9002 8.96706 17.9039 9C17.905 9.00462 17.9049 9.00811 17.9049 9.0127L17.9088 9.06934V12.3135C17.9088 12.7186 17.5795 13.0479 17.1744 13.0479C16.7694 13.0477 16.44 12.7185 16.44 12.3135V10.8252L12.441 14.7715C12.3015 14.9097 12.1126 14.9895 11.9156 14.9834C11.8185 14.9823 11.7225 14.9614 11.6334 14.9229C11.5441 14.8842 11.4634 14.828 11.3961 14.7578L9.65876 12.9492L6.86189 15.6875C6.7187 15.827 6.53203 15.8975 6.34724 15.8975C6.15646 15.8974 5.96715 15.8235 5.82282 15.6768C5.75531 15.6078 5.70158 15.5261 5.6656 15.4365C5.62972 15.3471 5.61187 15.2516 5.61286 15.1553C5.61388 15.0588 5.63358 14.9628 5.67146 14.874C5.70932 14.7854 5.76469 14.7051 5.83356 14.6377L9.16071 11.3799C9.30023 11.2428 9.49274 11.1623 9.6861 11.1709C9.78318 11.1719 9.87926 11.1918 9.96833 11.2305C10.0573 11.2691 10.1376 11.3255 10.2047 11.3955L11.9371 13.2012L15.3814 9.80176H13.7027C13.2977 9.80176 12.9685 9.47229 12.9683 9.06738C12.9683 8.6623 13.2976 8.33301 13.7027 8.33301H17.1715Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/ChartLineCheckedIcon.d.ts

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

package/dist/web/ChartLineCheckedIcon.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 ChartLineCheckedIcon_ChartLineCheckedIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const ChartLineCheckedIcon_ChartLineCheckedIcon = ({ 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.7734 2.70068C18.7805 2.70068 20.413 4.40994 20.4131 6.51025V11.2163C20.4129 11.5881 20.1111 11.8901 19.7393 11.8901C19.3674 11.8901 19.0656 11.5881 19.0654 11.2163V6.51025C19.0653 5.15391 18.0365 4.04932 16.7734 4.04932H5.6416C4.37869 4.04956 3.35071 5.15293 3.35059 6.51025V15.4214C3.35065 16.7776 4.37865 17.8821 5.6416 17.8823H13.543C13.487 17.6065 13.457 17.3211 13.457 17.0288C13.457 14.6704 15.3692 12.7585 17.7275 12.7583C20.0861 12.7583 21.998 14.6703 21.998 17.0288C21.998 19.3873 20.086 21.2993 17.7275 21.2993C16.1746 21.2992 14.8157 20.4697 14.0684 19.23H5.6416C3.63473 19.2297 2.00209 17.5206 2.00195 15.4204V6.51025C2.00208 4.41008 3.63472 2.70092 5.6416 2.70068H16.7734ZM20.4365 16.0142C20.1953 15.773 19.8039 15.7732 19.5625 16.0142L17.751 17.8247L15.9414 16.0142L15.8438 15.9351C15.6039 15.7769 15.2775 15.8031 15.0664 16.0142C14.8553 16.2253 14.8291 16.5516 14.9873 16.7915L15.0664 16.8892L17.3145 19.1362C17.5559 19.3771 17.9472 19.3775 18.1885 19.1362L20.4365 16.8892C20.6777 16.6479 20.6774 16.2556 20.4365 16.0142ZM16.0469 7.604C16.0547 7.60513 16.0616 7.60679 16.0684 7.60791C16.129 7.61803 16.1854 7.63595 16.2393 7.66064C16.2448 7.66289 16.2503 7.66624 16.2559 7.66846C16.2828 7.68192 16.3074 7.6967 16.332 7.7124L16.333 7.71338C16.3566 7.73023 16.381 7.74799 16.4023 7.76709C16.4079 7.77157 16.4124 7.77727 16.418 7.78174C16.4382 7.80196 16.4596 7.82275 16.4775 7.84521L16.4795 7.84717C16.4986 7.86964 16.5145 7.89374 16.5303 7.91846C16.5335 7.92288 16.5368 7.92863 16.54 7.93408C16.5561 7.96018 16.5705 7.98775 16.582 8.01611V8.01709L16.583 8.02002C16.5931 8.04698 16.6015 8.07577 16.6094 8.10498C16.6116 8.11053 16.6131 8.11604 16.6143 8.12158C16.621 8.15075 16.6255 8.18016 16.6289 8.21045C16.6299 8.21469 16.6299 8.21796 16.6299 8.22217L16.6338 8.27393V11.2534C16.6338 11.6254 16.331 11.9282 15.959 11.9282C15.5871 11.9282 15.2852 11.6254 15.2852 11.2534V9.88721L11.6123 13.5103C11.4842 13.6372 11.3108 13.7102 11.1299 13.7046C11.0406 13.7036 10.9521 13.6844 10.8701 13.6489C10.7883 13.6134 10.7141 13.562 10.6523 13.4976L9.05762 11.8364L6.48828 14.3521C6.35683 14.48 6.18619 14.5444 6.0166 14.5444C5.84133 14.5444 5.66677 14.4771 5.53418 14.3423C5.47224 14.279 5.42366 14.2037 5.39062 14.1216C5.35761 14.0394 5.34088 13.9513 5.3418 13.8628C5.34274 13.7742 5.36171 13.6865 5.39648 13.605C5.43126 13.5236 5.48165 13.4491 5.54492 13.3872L8.60059 10.396C8.72858 10.2703 8.90469 10.1959 9.08203 10.2036C9.17123 10.2046 9.25997 10.2238 9.3418 10.2593C9.42345 10.2947 9.49706 10.3463 9.55859 10.4106L11.1494 12.0679L14.3125 8.94678H12.7705C12.3987 8.9466 12.0967 8.64385 12.0967 8.27197C12.0967 7.90014 12.3987 7.59832 12.7705 7.59814H15.9561C15.9874 7.59816 16.0178 7.59952 16.0469 7.604Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/ChartLineIcon.d.ts

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

package/dist/web/ChartLineIcon.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 ChartLineIcon_ChartLineIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const ChartLineIcon_ChartLineIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M4.12402 3.41602C4.53519 3.41602 4.85057 3.75048 4.85059 4.15625V19.1582H19.877C20.2812 19.1582 20.6172 19.4642 20.6172 19.877C20.6171 20.0729 20.539 20.2618 20.4004 20.4004C20.2617 20.5388 20.0729 20.6162 19.877 20.6162H4.12402C3.92799 20.6162 3.73925 20.539 3.60059 20.4004C3.46199 20.2618 3.3849 20.0729 3.38477 19.877V4.15625C3.38477 3.96023 3.46207 3.77149 3.60059 3.63281C3.73927 3.49413 3.9279 3.41605 4.12402 3.41602ZM19.8145 6.35352C19.912 6.3486 20.0096 6.36253 20.1016 6.39551C20.1935 6.4285 20.2784 6.47911 20.3506 6.54492C20.4227 6.61072 20.4812 6.69084 20.5225 6.7793C20.5636 6.86767 20.5868 6.96413 20.5908 7.06152C20.5947 7.15876 20.5796 7.25634 20.5459 7.34766C20.5121 7.43909 20.4599 7.52328 20.3936 7.59473L20.3916 7.59766L15.0752 12.9131C14.9458 13.0548 14.7667 13.1414 14.5752 13.1533C14.3837 13.1652 14.1947 13.1021 14.0488 12.9775L14.042 12.9717L11.3408 10.2129L7.23242 14.292L7.23145 14.291C7.10145 14.4337 6.92139 14.5209 6.72852 14.5322C6.53369 14.5435 6.34159 14.4778 6.19531 14.3486C6.04911 14.2193 5.95998 14.0365 5.94727 13.8418C5.93472 13.6471 5.99972 13.4547 6.12793 13.3076L6.13281 13.3027L10.7305 8.68164C10.8587 8.53891 11.0379 8.45188 11.2295 8.43848C11.3747 8.42838 11.5185 8.46092 11.6436 8.53125L11.7617 8.61426L11.7686 8.62012L14.4746 11.3838L19.3047 6.59375C19.369 6.52308 19.4469 6.46505 19.5332 6.42383C19.6212 6.38185 19.717 6.35846 19.8145 6.35352Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/ChartPieIcon.d.ts

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

package/dist/web/ChartPieIcon.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 ChartPieIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const ChartPieIcon = ({ 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.2308 11.2308C21.1985 11.2308 21.1715 11.2454 21.1408 11.2492C21.11 11.2454 21.0823 11.2308 21.0508 11.2308H12.7692V2.86538C12.7692 2.84846 12.7608 2.83385 12.7592 2.81692C12.7608 2.80077 12.7692 2.78615 12.7692 2.76923C12.7692 2.56522 12.6882 2.36956 12.5439 2.2253C12.3997 2.08104 12.204 2 12 2C6.48615 2 2 6.48615 2 12C2 17.5138 6.48615 22 12 22C17.5138 22 22 17.5138 22 12C22 11.796 21.919 11.6003 21.7747 11.4561C21.6304 11.3118 21.4348 11.2308 21.2308 11.2308ZM12 20.4615C7.33462 20.4615 3.53846 16.6654 3.53846 12C3.53846 7.59385 6.92462 3.96769 11.2308 3.57769V12C11.2308 12.204 11.3118 12.3997 11.4561 12.5439C11.6003 12.6882 11.796 12.7692 12 12.7692H20.4223C20.0323 17.0754 16.4062 20.4615 12 20.4615ZM14.7323 3.98846C15.9229 4.4004 17.0076 5.07057 17.9087 5.95095C18.8098 6.83133 19.5051 7.90013 19.9446 9.08077C19.9777 9.1778 20.0299 9.26724 20.098 9.34383C20.1661 9.42042 20.2489 9.48262 20.3414 9.52677C20.434 9.57091 20.5344 9.59612 20.6368 9.6009C20.7392 9.60569 20.8415 9.58995 20.9378 9.55463C21.034 9.5193 21.1222 9.46509 21.1972 9.39519C21.2722 9.32529 21.3324 9.2411 21.3744 9.14758C21.4164 9.05405 21.4393 8.95308 21.4417 8.85059C21.4441 8.7481 21.426 8.64616 21.3885 8.55077C20.8776 7.15074 20.059 5.88323 18.993 4.84173C17.927 3.80022 16.6408 3.01128 15.2292 2.53308C15.0362 2.46718 14.825 2.48065 14.6419 2.57052C14.4588 2.6604 14.319 2.81931 14.2531 3.01231C14.1872 3.2053 14.2007 3.41657 14.2905 3.59964C14.3804 3.7827 14.5393 3.92257 14.7323 3.98846Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/ChartUpIcon.d.ts

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

package/dist/web/ChartUpIcon.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 ChartUpIcon_ChartUpIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const ChartUpIcon_ChartUpIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M5.14954 15.6321C5.56395 15.6322 5.90025 15.9687 5.90051 16.3831V20.3323C5.90027 20.7467 5.56396 21.0831 5.14954 21.0833C4.73506 21.0832 4.39782 20.7467 4.39758 20.3323V16.3831C4.39785 15.9686 4.73507 15.6322 5.14954 15.6321ZM9.83118 12.0042C10.2458 12.0042 10.5822 12.3415 10.5822 12.7561V20.3323C10.5819 20.7467 10.2456 21.0832 9.83118 21.0833C9.4167 21.0832 9.08044 20.7467 9.0802 20.3323V12.7561C9.0802 12.3415 9.41655 12.0042 9.83118 12.0042ZM14.5118 13.3586C14.9265 13.3586 15.2638 13.6949 15.2638 14.1096V20.3323C15.2634 20.7467 14.9264 21.0833 14.5118 21.0833C14.0976 21.0829 13.7611 20.7466 13.7609 20.3323V14.1096C13.7609 13.6951 14.0974 13.359 14.5118 13.3586ZM19.1945 9.12817C19.6089 9.1284 19.9454 9.46463 19.9454 9.87915V20.3323C19.945 20.7466 19.6089 21.083 19.1945 21.0833C18.78 21.0832 18.4427 20.7467 18.4425 20.3323V9.87915C18.4425 9.46453 18.7799 9.12825 19.1945 9.12817ZM14.0577 2.92505L19.0128 3.27856C19.4159 3.30726 19.7583 3.58859 19.8644 3.97778C19.9703 4.36751 19.8175 4.78396 19.4845 5.01294L13.5636 9.08032C13.2912 9.26852 12.9457 9.30228 12.6407 9.16821L10.09 8.03345L5.25305 11.5579C5.12482 11.6512 4.97026 11.7014 4.81165 11.7014C4.5801 11.7014 4.35055 11.5949 4.20325 11.3928C3.95925 11.0578 4.03405 10.5876 4.36926 10.343L9.46399 6.63208L9.57141 6.5647C9.83006 6.42522 10.1413 6.41138 10.4122 6.53345L12.9659 7.66821L17.338 4.66528L13.9513 4.42407C13.5373 4.39459 13.2256 4.03489 13.255 3.62134C13.2847 3.20696 13.6531 2.89682 14.0577 2.92505Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/CheckIcon.d.ts

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

package/dist/web/CheckIcon.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 CheckIcon_CheckIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const CheckIcon_CheckIcon = ({ 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.3281 6.28711C19.7108 5.90439 20.3302 5.9044 20.7129 6.28711C21.0956 6.66983 21.0956 7.28916 20.7129 7.67188L10.042 18.3389C10.0336 18.3479 10.0264 18.3584 10.0176 18.3672C9.82525 18.5574 9.57459 18.6514 9.32422 18.6514C9.07383 18.6513 8.82312 18.5555 8.63281 18.3652L3.28711 13.0186C2.90448 12.6358 2.90442 12.0165 3.28711 11.6338C3.66982 11.2513 4.28923 11.2512 4.67188 11.6338L9.32422 16.2891L19.3281 6.28711Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/ChefIcon.d.ts

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

package/dist/web/ChefIcon.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 ChefIcon_ChefIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const ChefIcon_ChefIcon = ({ 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: "M6.66818 15.8746H14.1762H17.2926M11.9216 3.42871C14.3239 3.42871 16.3416 5.07597 16.9067 7.30262L17.1423 7.30322C19.0358 7.30322 20.5708 8.83824 20.5708 10.7318C20.5708 12.534 19.1804 14.0114 17.4138 14.1498L17.4145 17.5889C17.4145 18.5357 16.647 19.3032 15.7002 19.3032H8.25663C7.30985 19.3032 6.54234 18.5357 6.54234 17.5889L6.54179 14.1461C4.79578 13.9872 3.42798 12.5192 3.42798 10.7318C3.42798 8.83824 4.963 7.30322 6.85655 7.30322L6.93643 7.30262C7.5015 5.07597 9.51916 3.42871 11.9216 3.42871Z",
-            stroke: _color,
+            stroke: "currentColor",
             strokeWidth: 1.37143
         })
     });

package/dist/web/ChefOffIcon.d.ts

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

package/dist/web/ChefOffIcon.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 ChefOffIcon_ChefOffIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const ChefOffIcon_ChefOffIcon = ({ 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: "M20.0605 18.1416L18.9424 19.2607L17.9863 18.3047C17.6817 19.2794 16.7763 19.988 15.7012 19.9883H8.25781C6.93244 19.9881 5.85742 18.9133 5.85742 17.5879L5.85645 14.7217C4.06788 14.2743 2.74316 12.6575 2.74316 10.7305C2.74352 8.63705 4.30689 6.90808 6.33008 6.64941L4.7998 5.11914L5.91895 4L20.0605 18.1416ZM7.22852 16.5596V17.5879L7.23438 17.6934C7.28718 18.2118 7.72547 18.6161 8.25781 18.6162H15.7012C16.2689 18.6158 16.7295 18.1557 16.7295 17.5879V17.0479L16.2412 16.5596H7.22852ZM7.47168 7.9834L6.94238 7.9873L6.8623 7.98828H6.85742C5.34293 7.98841 4.11464 9.21604 4.11426 10.7305C4.11426 12.1599 5.20864 13.3346 6.60449 13.4619L7.22852 13.5186V15.1875H14.8691L7.50977 7.8291L7.47168 7.9834ZM11.9219 2.74219C14.4592 2.7424 16.6162 4.36397 17.417 6.62598C19.561 6.76722 21.2565 8.55078 21.2568 10.7305C21.2568 12.3173 20.3578 13.6918 19.042 14.3779L17.998 13.334C19.0933 12.9744 19.8857 11.9461 19.8857 10.7305C19.8854 9.21612 18.657 7.98854 17.1426 7.98828H17.1416L16.9053 7.9873L16.374 7.98633L16.2432 7.4707C15.7533 5.54118 14.0027 4.1135 11.9219 4.11328C11.0275 4.11341 10.1943 4.37799 9.49609 4.83203L8.50879 3.8457C9.46801 3.15174 10.6472 2.74233 11.9219 2.74219Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/ChevronDownIcon.d.ts

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

package/dist/web/ChevronDownIcon.js

@@ -1,12 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { isThemeColor } from "../core/index.js";
-import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
-const ChevronDownIcon_ChevronDownIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const ChevronDownIcon_ChevronDownIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,
@@ -14,7 +14,7 @@ const ChevronDownIcon_ChevronDownIcon = ({ size = 16, width = size, height = siz
             fillRule: "evenodd",
             clipRule: "evenodd",
             d: "M12.9007 16.4336C12.6661 16.6681 12.3478 16.7999 12.016 16.7999C11.6842 16.7999 11.366 16.6681 11.1314 16.4336L4.05267 9.35487C3.93315 9.23944 3.83782 9.10137 3.77224 8.9487C3.70666 8.79604 3.67214 8.63184 3.6707 8.46569C3.66926 8.29954 3.70092 8.13477 3.76384 7.98099C3.82675 7.82721 3.91967 7.68749 4.03716 7.57001C4.15464 7.45252 4.29436 7.3596 4.44814 7.29668C4.60192 7.23377 4.76669 7.20211 4.93284 7.20355C5.09899 7.205 5.26319 7.23951 5.41585 7.30509C5.56852 7.37067 5.70659 7.466 5.82202 7.58551L12.016 13.7795L18.21 7.58551C18.446 7.35758 18.7621 7.23145 19.0902 7.2343C19.4183 7.23715 19.7321 7.36875 19.9642 7.60076C20.1962 7.83276 20.3278 8.14661 20.3306 8.4747C20.3335 8.80279 20.2073 9.11887 19.9794 9.35487L12.9007 16.4336Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/ChevronDownSmallIcon.d.ts

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

package/dist/web/ChevronDownSmallIcon.js

@@ -1,12 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { isThemeColor } from "../core/index.js";
-import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
-const ChevronDownSmallIcon_ChevronDownSmallIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const ChevronDownSmallIcon_ChevronDownSmallIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,
@@ -14,7 +14,7 @@ const ChevronDownSmallIcon_ChevronDownSmallIcon = ({ size = 16, width = size, he
             fillRule: "evenodd",
             clipRule: "evenodd",
             d: "M12.7071 15.702C12.5196 15.8894 12.2653 15.9948 12.0001 15.9948C11.7349 15.9948 11.4806 15.8894 11.2931 15.702L5.6361 10.045C5.54059 9.95272 5.46441 9.84237 5.412 9.72037C5.35959 9.59837 5.332 9.46714 5.33085 9.33437C5.32969 9.20159 5.355 9.06991 5.40528 8.94701C5.45556 8.82411 5.52981 8.71246 5.6237 8.61857C5.7176 8.52468 5.82925 8.45042 5.95214 8.40014C6.07504 8.34986 6.20672 8.32456 6.3395 8.32571C6.47228 8.32687 6.6035 8.35445 6.7255 8.40686C6.84751 8.45927 6.95785 8.53545 7.0501 8.63096L12.0001 13.581L16.9501 8.63096C17.1387 8.44881 17.3913 8.34801 17.6535 8.35029C17.9157 8.35257 18.1665 8.45774 18.3519 8.64315C18.5373 8.82855 18.6425 9.07937 18.6448 9.34156C18.6471 9.60376 18.5463 9.85636 18.3641 10.045L12.7071 15.702Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/ChevronLeftIcon.d.ts

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

package/dist/web/ChevronLeftIcon.js

@@ -1,12 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { isThemeColor } from "../core/index.js";
-import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
-const ChevronLeftIcon_ChevronLeftIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const ChevronLeftIcon_ChevronLeftIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,
@@ -14,7 +14,7 @@ const ChevronLeftIcon_ChevronLeftIcon = ({ size = 16, width = size, height = siz
             fillRule: "evenodd",
             clipRule: "evenodd",
             d: "M7.56656 12.9008C7.33198 12.6662 7.2002 12.348 7.2002 12.0162C7.2002 11.6843 7.33198 11.3661 7.56656 11.1315L14.6452 4.05279C14.7607 3.93327 14.8988 3.83795 15.0514 3.77237C15.2041 3.70679 15.3683 3.67227 15.5344 3.67082C15.7006 3.66938 15.8654 3.70104 16.0191 3.76396C16.1729 3.82687 16.3126 3.91979 16.4301 4.03728C16.5476 4.15477 16.6405 4.29448 16.7034 4.44826C16.7664 4.60204 16.798 4.76682 16.7966 4.93296C16.7951 5.09911 16.7606 5.26331 16.695 5.41597C16.6294 5.56864 16.5341 5.70672 16.4146 5.82215L10.2206 12.0162L16.4146 18.2102C16.6425 18.4462 16.7687 18.7622 16.7658 19.0903C16.763 19.4184 16.6314 19.7323 16.3994 19.9643C16.1674 20.1963 15.8535 20.3279 15.5254 20.3307C15.1973 20.3336 14.8812 20.2075 14.6452 19.9795L7.56656 12.9008Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/ChevronLeftSmallIcon.d.ts

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