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

package/dist/web/ShoppingCartInIcon.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 ShoppingCartInIcon_ShoppingCartInIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const ShoppingCartInIcon_ShoppingCartInIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M11.0702 19.3945C11.7898 19.3946 12.3729 19.9777 12.373 20.6973C12.3729 21.4169 11.7899 21.9999 11.0702 22C10.3507 21.9999 9.76755 21.4168 9.76751 20.6973C9.76762 19.9778 10.3507 19.3946 11.0702 19.3945ZM17.8251 19.3945C18.5447 19.3945 19.1287 19.9777 19.1288 20.6973C19.1288 21.4169 18.5448 22 17.8251 22C17.1056 21.9998 16.5224 21.4168 16.5224 20.6973C16.5225 19.9778 17.1057 19.3947 17.8251 19.3945ZM2.20404 4.5752C2.41813 4.23092 2.8715 4.12472 3.21576 4.33887L6.71771 5.75781C6.88926 5.8644 7.00951 6.03745 7.04974 6.23535L9.76751 14.6611C9.76973 14.6713 9.93431 15.4262 10.2382 15.7119C10.5388 15.9941 11.176 16.0083 11.1992 16.0088H17.1806C17.1806 16.0088 17.9071 16.0812 18.2167 15.7773C18.5263 15.4735 18.7197 14.8818 18.7197 14.8818L20.4872 11.0566C20.634 10.6792 21.0596 10.4917 21.4374 10.6377C21.8154 10.7844 22.0039 11.2107 21.8574 11.5889L19.7187 16.377C19.4298 17.101 18.7269 17.4842 17.9443 17.4785H10.8613C9.36759 17.4784 8.78758 16.8156 8.46771 15.6221L5.67376 6.83887L2.43939 5.58691C2.09516 5.3727 1.98994 4.91963 2.20404 4.5752ZM14.3691 1.99902C14.7824 1.99902 15.1179 2.33473 15.1181 2.74805V7.89551H17.5234C17.8478 7.89551 18.0189 8.2798 17.8017 8.52051L14.6454 12.0098C14.4969 12.1739 14.2384 12.1738 14.0898 12.0098L10.9335 8.52051C10.7161 8.27989 10.8866 7.89574 11.2109 7.89551H13.6201V2.74805C13.6203 2.33489 13.9559 1.99928 14.3691 1.99902Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/ShoppingCartOutIcon.d.ts

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

package/dist/web/ShoppingCartOutIcon.js

@@ -1,31 +1,31 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
-import { isThemeColor } from "../core/index.js";
-import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
-const ShoppingCartOutIcon_ShoppingCartOutIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const ShoppingCartOutIcon_ShoppingCartOutIcon = ({ 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.0615 18.9924C11.7878 18.9925 12.3772 19.5819 12.3773 20.3081C12.3771 21.0343 11.7877 21.6225 11.0615 21.6227C10.3804 21.6227 9.81992 21.1053 9.75273 20.4419L9.74581 20.3081C9.74588 19.5818 10.3352 18.9924 11.0615 18.9924Z",
-                fill: _color
+                fill: "currentColor"
             }),
             /*#__PURE__*/ jsx("path", {
                 d: "M17.8801 18.9924C18.6063 18.9926 19.1957 19.5819 19.1958 20.3081C19.1956 21.0343 18.6062 21.6225 17.8801 21.6227C17.1989 21.6227 16.6384 21.1053 16.5713 20.4419L16.5643 20.3081C16.5644 19.5818 17.1537 18.9924 17.8801 18.9924Z",
-                fill: _color
+                fill: "currentColor"
             }),
             /*#__PURE__*/ jsx("path", {
                 d: "M2.11201 4.03498C2.32812 3.68764 2.78512 3.58027 3.13254 3.79628L6.66807 5.22848C6.84123 5.33612 6.96309 5.51069 7.00364 5.7105L9.74581 14.2149C9.74581 14.2149 9.91301 14.9857 10.2221 15.2758C10.5271 15.562 11.1748 15.5753 11.1918 15.5756H17.2297C17.2479 15.5774 17.9658 15.6441 18.2744 15.3415C18.5868 15.0347 18.7818 14.4375 18.7818 14.4375L20.5669 10.5768C20.7152 10.1956 21.1448 10.0068 21.5263 10.1547C21.9076 10.3029 22.0974 10.7325 21.9495 11.1141L19.792 15.9469C19.5005 16.6779 18.79 17.0643 18 17.0586H10.8505C9.3427 17.0585 8.75754 16.3896 8.43469 15.1847L5.6141 6.31935L2.34956 5.05551C2.00232 4.83934 1.89625 4.38256 2.11201 4.03498Z",
-                fill: _color
+                fill: "currentColor"
             }),
             /*#__PURE__*/ jsx("path", {
                 d: "M14.1105 2.5013C14.2605 2.3355 14.5209 2.3355 14.6709 2.5013L17.857 6.02184C18.0766 6.2647 17.9042 6.6535 17.5768 6.65377H15.1448V11.8487C15.1448 12.266 14.8068 12.6039 14.3895 12.604C13.9721 12.604 13.6342 12.266 13.6342 11.8487V6.65377H11.2045C10.8771 6.65354 10.7047 6.26471 10.9243 6.02184L14.1105 2.5013Z",
-                fill: _color
+                fill: "currentColor"
             })
         ]
     });

package/dist/web/SlackIcon.d.ts

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

package/dist/web/SlackIcon.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 SlackIcon_SlackIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const SlackIcon_SlackIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M9.66309 12.4985C10.6953 12.4986 11.5332 13.39 11.5332 14.4888V19.4663C11.5332 20.5659 10.6953 21.4574 9.66309 21.4575C8.62996 21.4575 7.792 20.5659 7.79199 19.4663V14.4888L7.80176 14.2856C7.89744 13.281 8.69445 12.4985 9.66309 12.4985ZM14.3379 17.4751C15.3702 17.4751 16.208 18.3667 16.208 19.4663C16.2079 20.5658 15.3702 21.4575 14.3379 21.4575C13.3049 21.4575 12.4679 20.5658 12.4678 19.4663V17.4751H14.3379ZM6.85742 14.4888C6.85742 15.5876 6.02043 16.479 4.9873 16.479C3.95499 16.479 3.11719 15.5876 3.11719 14.4888C3.11735 13.3901 3.95509 12.4986 4.9873 12.4985H6.85742V14.4888ZM19.0117 12.4976C20.0447 12.4976 20.8817 13.3891 20.8818 14.4878C20.8818 15.5882 20.0448 16.479 19.0117 16.479H14.3379C13.3048 16.4789 12.4678 15.5874 12.4678 14.4878C12.4679 13.3891 13.3049 12.4976 14.3379 12.4976H19.0117ZM9.66211 7.52002C10.6951 7.52002 11.533 8.41164 11.5332 9.51025C11.5332 10.6107 10.6952 11.5015 9.66211 11.5015H4.9873C3.95499 11.5014 3.11719 10.6099 3.11719 9.51025C3.11743 8.41165 3.95514 7.52004 4.9873 7.52002H9.66211ZM14.3369 2.54248C15.37 2.54248 16.208 3.43407 16.208 4.53369V9.51025C16.208 10.6107 15.37 11.5015 14.3369 11.5015C13.3047 11.5013 12.4678 10.6098 12.4678 9.51025V4.53369C12.4678 3.43417 13.3047 2.54265 14.3369 2.54248ZM19.0127 7.52002C20.0449 7.52002 20.8826 8.41164 20.8828 9.51025C20.8828 10.6107 20.045 11.5015 19.0127 11.5015H17.1426V9.51025C17.1428 8.41167 17.9798 7.52007 19.0127 7.52002ZM9.66211 2.54248C10.6952 2.54248 11.5332 3.43407 11.5332 4.53369V6.5249H9.66211C8.62984 6.52488 7.79208 5.63323 7.79199 4.53369C7.79199 3.43408 8.62979 2.5425 9.66211 2.54248Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/SlidersHorizontalIcon.d.ts

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

package/dist/web/SlidersHorizontalIcon.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 SlidersHorizontalIcon_SlidersHorizontalIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const SlidersHorizontalIcon_SlidersHorizontalIcon = ({ 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: "M3.71543 8.00866H12.1481C12.3085 8.67357 12.6892 9.26462 13.2283 9.68551C13.7674 10.1064 14.4332 10.3324 15.1171 10.3266C15.8011 10.3208 16.4629 10.0836 16.9948 9.6536C17.5268 9.22362 17.8974 8.62621 18.0464 7.95868C18.1163 7.98961 18.1915 8.00659 18.2678 8.00866H20.2815C20.3755 8.00906 20.4687 7.99089 20.5557 7.95518C20.6427 7.91948 20.7218 7.86694 20.7884 7.8006C20.8551 7.73425 20.9079 7.65539 20.944 7.56855C20.9801 7.48172 20.9987 7.38861 20.9987 7.29458C20.9987 7.20054 20.9801 7.10744 20.944 7.0206C20.9079 6.93376 20.8551 6.85491 20.7884 6.78856C20.7218 6.72221 20.6427 6.66968 20.5557 6.63397C20.4687 6.59827 20.3755 6.58009 20.2815 6.5805H18.2393C18.1637 6.58375 18.0891 6.59819 18.0179 6.62334C17.868 5.95601 17.4966 5.35908 16.9642 4.92978C16.4318 4.50047 15.7697 4.26408 15.0857 4.25911C14.4018 4.25415 13.7364 4.48089 13.1977 4.90242C12.6591 5.32394 12.2791 5.91542 12.1196 6.5805H3.71543C3.52604 6.5805 3.34441 6.65573 3.21049 6.78965C3.07658 6.92357 3.00134 7.1052 3.00134 7.29458C3.00134 7.48397 3.07658 7.6656 3.21049 7.79952C3.34441 7.93344 3.52604 8.00866 3.71543 8.00866ZM15.0902 5.6879C15.4079 5.6879 15.7186 5.78212 15.9828 5.95867C16.247 6.13521 16.4529 6.38614 16.5745 6.67972C16.6962 6.9733 16.728 7.29635 16.666 7.60802C16.604 7.91969 16.451 8.20597 16.2263 8.43067C16.0016 8.65537 15.7153 8.8084 15.4036 8.8704C15.092 8.93239 14.7689 8.90058 14.4753 8.77897C14.1817 8.65737 13.9308 8.45144 13.7543 8.18722C13.5777 7.92301 13.4835 7.61237 13.4835 7.2946C13.4835 6.86848 13.6528 6.45981 13.9541 6.1585C14.2554 5.85719 14.664 5.6879 15.0902 5.6879ZM20.2815 15.9855H12.4915C12.3339 15.3228 11.9574 14.7325 11.4229 14.3102C10.8884 13.8879 10.2271 13.6582 9.5459 13.6582C8.86468 13.6582 8.20337 13.8879 7.66886 14.3102C7.13435 14.7325 6.75788 15.3228 6.60031 15.9855C6.57422 15.9823 6.54784 15.9823 6.52176 15.9855H3.71543C3.52604 15.9855 3.34441 16.0608 3.21049 16.1947C3.07658 16.3286 3.00134 16.5102 3.00134 16.6996C3.00134 16.889 3.07658 17.0706 3.21049 17.2045C3.34441 17.3385 3.52604 17.4137 3.71543 17.4137H6.57175C6.72933 18.0764 7.10579 18.6667 7.6403 19.089C8.17481 19.5113 8.83612 19.741 9.51734 19.741C10.1986 19.741 10.8599 19.5113 11.3944 19.089C11.9289 18.6667 12.3053 18.0764 12.4629 17.4137H20.2815C20.3753 17.4137 20.4682 17.3952 20.5548 17.3593C20.6414 17.3234 20.7202 17.2708 20.7865 17.2045C20.8528 17.1382 20.9054 17.0595 20.9413 16.9729C20.9771 16.8862 20.9956 16.7934 20.9956 16.6996C20.9956 16.6058 20.9771 16.513 20.9413 16.4263C20.9054 16.3397 20.8528 16.261 20.7865 16.1947C20.7202 16.1284 20.6414 16.0758 20.5548 16.0399C20.4682 16.004 20.3753 15.9855 20.2815 15.9855ZM9.54947 18.3063C9.2317 18.3063 8.92106 18.2121 8.65684 18.0355C8.39262 17.859 8.18669 17.6081 8.06508 17.3145C7.94347 17.0209 7.91165 16.6979 7.97364 16.3862C8.03563 16.0745 8.18865 15.7882 8.41334 15.5635C8.63804 15.3388 8.92432 15.1858 9.23599 15.1238C9.54765 15.0618 9.8707 15.0936 10.1643 15.2152C10.4579 15.3368 10.7088 15.5428 10.8854 15.807C11.0619 16.0712 11.1561 16.3818 11.1561 16.6996C11.1561 17.1257 10.9869 17.5344 10.6856 17.8357C10.3843 18.137 9.97559 18.3063 9.54947 18.3063Z",
-            fill: _color,
-            stroke: _color,
+            fill: "currentColor",
+            stroke: "currentColor",
             strokeWidth: 0.1
         })
     });

package/dist/web/SlidersVerticalIcon.d.ts

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

package/dist/web/SlidersVerticalIcon.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 SlidersVerticalIcon_SlidersVerticalIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const SlidersVerticalIcon_SlidersVerticalIcon = ({ 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: "M5.71191 3.75391C6.02982 3.75391 6.28787 4.01142 6.28809 4.3291V5.86621C7.51213 6.129 8.42963 7.21636 8.42969 8.51855C8.42969 9.82057 7.51204 10.907 6.28809 11.1699L6.28809 20.1777C6.28809 20.4956 6.02996 20.7539 5.71191 20.7539C5.39425 20.7537 5.13672 20.4955 5.13672 20.1777L5.13672 11.168C3.91552 10.903 3 9.81861 3 8.51855C3.00006 7.21831 3.91544 6.13303 5.13672 5.86816V4.3291C5.13693 4.01157 5.39438 3.75415 5.71191 3.75391ZM17.8887 3.75391C18.2064 3.75391 18.4637 4.01142 18.4639 4.3291V8.03711C19.6823 8.30413 20.5946 9.38847 20.5947 10.6865C20.5947 11.9845 19.6822 13.0678 18.4639 13.335V20.1777C18.4639 20.4956 18.2065 20.7539 17.8887 20.7539C17.5708 20.7539 17.3135 20.4956 17.3135 20.1777V13.3389C16.0863 13.0784 15.165 11.991 15.165 10.6865C15.1651 9.38199 16.0861 8.29347 17.3135 8.0332V4.3291C17.3137 4.01144 17.571 3.75394 17.8887 3.75391ZM11.7197 3.75391C12.0375 3.75391 12.2957 4.01142 12.2959 4.3291L12.2959 13.293C13.5188 13.5569 14.4353 14.6436 14.4355 15.9453C14.4355 17.2473 13.5188 18.3336 12.2959 18.5977V20.1777C12.2959 20.4956 12.0376 20.7529 11.7197 20.7529C11.402 20.7527 11.1445 20.4955 11.1445 20.1777V18.5977C9.92202 18.3332 9.00586 17.2469 9.00586 15.9453C9.00606 14.644 9.92205 13.5573 11.1445 13.293L11.1445 4.3291C11.1447 4.01155 11.4022 3.75413 11.7197 3.75391ZM11.7178 14.3838C11.5297 14.3838 11.3496 14.4176 11.1826 14.4785C10.5844 14.698 10.1574 15.2712 10.1572 15.9453C10.1572 16.809 10.857 17.5097 11.7207 17.5098C11.7741 17.5098 11.8269 17.5072 11.8789 17.502C11.8819 17.5016 11.8847 17.5003 11.8877 17.5C11.9872 17.4894 12.0837 17.4697 12.1768 17.4414C12.1919 17.4368 12.2067 17.4309 12.2217 17.4258C12.8393 17.2168 13.2842 16.6336 13.2842 15.9453C13.284 15.2851 12.8746 14.7214 12.2959 14.4922V14.4932C12.1172 14.422 11.9217 14.3838 11.7178 14.3838ZM17.877 9.12598C17.7035 9.12599 17.5368 9.15497 17.3809 9.20703C16.7621 9.41506 16.3166 9.99846 16.3164 10.6865C16.3164 11.5491 17.0163 12.249 17.8799 12.249C18.7436 12.249 19.4434 11.549 19.4434 10.6865C19.4432 10.0304 19.038 9.46941 18.4639 9.23828V9.24023C18.2827 9.16696 18.0846 9.12598 17.877 9.12598ZM5.71191 6.95801C5.52558 6.95806 5.34736 6.99203 5.18164 7.05176C4.581 7.26972 4.15142 7.84338 4.15137 8.51855C4.15137 9.38101 4.85137 10.08 5.71484 10.0801C5.87279 10.0801 6.02522 10.0562 6.16895 10.0127C6.18643 10.0074 6.20349 10.001 6.2207 9.99512C6.83588 9.78499 7.2793 9.20414 7.2793 8.51855C7.27924 7.85815 6.86813 7.29378 6.28809 7.06543V7.06738C6.10991 6.99694 5.91518 6.95801 5.71191 6.95801Z",
-                fill: _color
+                fill: "currentColor"
             }),
             /*#__PURE__*/ jsx("path", {
                 d: "M5.71191 3.75391V3.55391L5.71176 3.55391L5.71191 3.75391ZM6.28809 4.3291H6.48809V4.32897L6.28809 4.3291ZM6.28809 5.86621H6.08809V6.02783L6.24611 6.06176L6.28809 5.86621ZM8.42969 8.51855H8.62969V8.51855L8.42969 8.51855ZM6.28809 11.1699L6.24608 10.9744L6.08809 11.0083V11.1699H6.28809ZM5.71191 20.7539L5.71176 20.9539H5.71191V20.7539ZM5.13672 11.168H5.33672V11.0067L5.17913 10.9725L5.13672 11.168ZM3 8.51855L2.8 8.51855V8.51855H3ZM5.13672 5.86816L5.17911 6.06362L5.33672 6.02944V5.86816H5.13672ZM5.13672 4.3291L4.93672 4.32897V4.3291H5.13672ZM17.8887 3.75391V3.55391H17.8887L17.8887 3.75391ZM18.4639 4.3291H18.6639V4.32897L18.4639 4.3291ZM18.4639 8.03711H18.2639V8.19803L18.4211 8.23247L18.4639 8.03711ZM20.5947 10.6865H20.7947V10.6865L20.5947 10.6865ZM18.4639 13.335L18.421 13.1396L18.2639 13.1741V13.335H18.4639ZM17.8887 20.7539L17.8887 20.9539H17.8887V20.7539ZM17.3135 13.3389H17.5135V13.1769L17.355 13.1432L17.3135 13.3389ZM15.165 10.6865L14.965 10.6865V10.6865H15.165ZM17.3135 8.0332L17.355 8.22885L17.5135 8.19524V8.0332H17.3135ZM17.3135 4.3291L17.1135 4.32897V4.3291L17.3135 4.3291ZM11.7197 3.75391V3.55391L11.7196 3.55391L11.7197 3.75391ZM12.2959 4.3291H12.4959V4.32897L12.2959 4.3291ZM12.2959 13.293H12.0959V13.4544L12.2537 13.4885L12.2959 13.293ZM14.4355 15.9453H14.6355V15.9453L14.4355 15.9453ZM12.2959 18.5977L12.2537 18.4022L12.0959 18.4362V18.5977H12.2959ZM11.7197 20.7529L11.7196 20.9529H11.7197V20.7529ZM11.1445 18.5977H11.3445V18.4363L11.1868 18.4022L11.1445 18.5977ZM9.00586 15.9453L8.80586 15.9453V15.9453H9.00586ZM11.1445 13.293L11.1868 13.4885L11.3445 13.4544V13.293H11.1445ZM11.1445 4.3291L10.9445 4.32897V4.3291H11.1445ZM11.7178 14.3838V14.1838H11.7177L11.7178 14.3838ZM11.1826 14.4785L11.114 14.2906L11.1137 14.2907L11.1826 14.4785ZM10.1572 15.9453L9.95723 15.9453V15.9453H10.1572ZM11.7207 17.5098L11.7207 17.7098H11.7207V17.5098ZM11.8789 17.502L11.8989 17.701L11.8992 17.7009L11.8789 17.502ZM11.8877 17.5L11.8666 17.3011L11.8662 17.3012L11.8877 17.5ZM12.1768 17.4414L12.235 17.6327L12.2354 17.6326L12.1768 17.4414ZM12.2217 17.4258L12.1576 17.2363L12.1572 17.2365L12.2217 17.4258ZM13.2842 15.9453H13.4842V15.9453L13.2842 15.9453ZM12.2959 14.4922L12.3695 14.3062L12.0959 14.1979V14.4922H12.2959ZM12.2959 14.4932L12.2219 14.679L12.4959 14.788V14.4932H12.2959ZM17.877 9.12598V8.92598H17.8769L17.877 9.12598ZM17.3809 9.20703L17.3175 9.01733L17.3171 9.01746L17.3809 9.20703ZM16.3164 10.6865L16.1164 10.6865V10.6865H16.3164ZM17.8799 12.249V12.449H17.8799L17.8799 12.249ZM19.4434 10.6865H19.6434V10.6865L19.4434 10.6865ZM18.4639 9.23828L18.5386 9.05275L18.2639 8.94218V9.23828H18.4639ZM18.4639 9.24023L18.3889 9.42564L18.6639 9.53686V9.24023H18.4639ZM5.71191 6.95801V6.75801H5.71186L5.71191 6.95801ZM5.18164 7.05176L5.11383 6.86361L5.11342 6.86375L5.18164 7.05176ZM4.15137 8.51855L3.95137 8.51854V8.51855H4.15137ZM5.71484 10.0801L5.71481 10.2801H5.71484V10.0801ZM6.16895 10.0127L6.22689 10.2041L6.22721 10.204L6.16895 10.0127ZM6.2207 9.99512L6.15606 9.80585L6.15571 9.80597L6.2207 9.99512ZM7.2793 8.51855H7.4793V8.51854L7.2793 8.51855ZM6.28809 7.06543L6.36135 6.87933L6.08809 6.77175V7.06543H6.28809ZM6.28809 7.06738L6.21455 7.25337L6.48809 7.36152V7.06738H6.28809ZM5.71191 3.75391V3.95391C5.91963 3.95391 6.08795 4.12217 6.08809 4.32924L6.28809 4.3291L6.48809 4.32897C6.48779 3.90067 6.14001 3.55391 5.71191 3.55391V3.75391ZM6.28809 4.3291L6.08809 4.3291V5.86621H6.28809H6.48809V4.3291H6.28809ZM6.28809 5.86621L6.24611 6.06176C7.37997 6.30518 8.22963 7.31267 8.22969 8.51856L8.42969 8.51855L8.62969 8.51855C8.62962 7.12004 7.64429 5.95281 6.33007 5.67067L6.28809 5.86621ZM8.42969 8.51855H8.22969C8.22969 9.72415 7.37999 10.7308 6.24608 10.9744L6.28809 11.1699L6.33009 11.3655C7.64409 11.0832 8.62969 9.91699 8.62969 8.51855H8.42969ZM6.28809 11.1699H6.08809L6.08809 20.1777H6.28809H6.48809L6.48809 11.1699H6.28809ZM6.28809 20.1777H6.08809C6.08809 20.3852 5.91946 20.5539 5.71191 20.5539V20.7539V20.9539C6.14045 20.9539 6.48809 20.606 6.48809 20.1777H6.28809ZM5.71191 20.7539L5.71207 20.5539C5.50503 20.5537 5.33672 20.3853 5.33672 20.1777H5.13672H4.93672C4.93672 20.6056 5.28347 20.9536 5.71176 20.9539L5.71191 20.7539ZM5.13672 20.1777H5.33672L5.33672 11.168H5.13672H4.93672L4.93672 20.1777H5.13672ZM5.13672 11.168L5.17913 10.9725C4.04764 10.727 3.2 9.7222 3.2 8.51855H3H2.8C2.8 9.91503 3.78341 11.079 5.09431 11.3634L5.13672 11.168ZM3 8.51855L3.2 8.51856C3.20005 7.31462 4.04766 6.309 5.17911 6.06362L5.13672 5.86816L5.09433 5.67271C3.78322 5.95705 2.80006 7.12201 2.8 8.51855L3 8.51855ZM5.13672 5.86816H5.33672V4.3291H5.13672H4.93672V5.86816H5.13672ZM5.13672 4.3291L5.33672 4.32924C5.33686 4.12207 5.50486 3.95406 5.71207 3.95391L5.71191 3.75391L5.71176 3.55391C5.28391 3.55423 4.93701 3.90107 4.93672 4.32897L5.13672 4.3291ZM17.8887 3.75391V3.95391C18.0958 3.95391 18.2637 4.12177 18.2639 4.32924L18.4639 4.3291L18.6639 4.32897C18.6636 3.90107 18.317 3.55391 17.8887 3.55391V3.75391ZM18.4639 4.3291H18.2639V8.03711H18.4639H18.6639V4.3291H18.4639ZM18.4639 8.03711L18.4211 8.23247C19.5498 8.47984 20.3946 9.48458 20.3947 10.6865L20.5947 10.6865L20.7947 10.6865C20.7946 9.29236 19.8148 8.12841 18.5067 7.84175L18.4639 8.03711ZM20.5947 10.6865H20.3947C20.3947 11.8883 19.5499 12.8921 18.421 13.1396L18.4639 13.335L18.5067 13.5303C19.8146 13.2435 20.7947 12.0808 20.7947 10.6865H20.5947ZM18.4639 13.335H18.2639V20.1777H18.4639H18.6639V13.335H18.4639ZM18.4639 20.1777H18.2639C18.2639 20.3856 18.0956 20.5539 17.8887 20.5539V20.7539V20.9539C18.3174 20.9539 18.6639 20.6056 18.6639 20.1777H18.4639ZM17.8887 20.7539L17.8887 20.5539C17.6817 20.5539 17.5135 20.3855 17.5135 20.1777H17.3135H17.1135C17.1135 20.6056 17.4599 20.9539 17.8887 20.9539L17.8887 20.7539ZM17.3135 20.1777H17.5135V13.3389H17.3135H17.1135V20.1777H17.3135ZM17.3135 13.3389L17.355 13.1432C16.2181 12.9019 15.365 11.8943 15.365 10.6865H15.165H14.965C14.965 12.0877 15.9546 13.2549 17.272 13.5345L17.3135 13.3389ZM15.165 10.6865L15.365 10.6865C15.3651 9.47854 16.218 8.46996 17.355 8.22885L17.3135 8.0332L17.272 7.83755C15.9543 8.11699 14.9651 9.28545 14.965 10.6865L15.165 10.6865ZM17.3135 8.0332H17.5135V4.3291H17.3135L17.1135 4.3291V8.0332H17.3135ZM17.3135 4.3291L17.5135 4.32924C17.5136 4.12181 17.6815 3.95393 17.8887 3.95391L17.8887 3.75391L17.8887 3.55391C17.4604 3.55395 17.1138 3.90107 17.1135 4.32897L17.3135 4.3291ZM11.7197 3.75391V3.95391C11.9273 3.95391 12.0958 4.12221 12.0959 4.32924L12.2959 4.3291L12.4959 4.32897C12.4956 3.90063 12.1476 3.55391 11.7197 3.55391V3.75391ZM12.2959 4.3291H12.0959L12.0959 13.293H12.2959H12.4959L12.4959 4.3291H12.2959ZM12.2959 13.293L12.2537 13.4885C13.3866 13.7329 14.2354 14.7399 14.2355 15.9453L14.4355 15.9453L14.6355 15.9453C14.6353 14.5473 13.651 13.3808 12.3381 13.0975L12.2959 13.293ZM14.4355 15.9453H14.2355C14.2355 17.151 13.3866 18.1576 12.2537 18.4022L12.2959 18.5977L12.3381 18.7932C13.651 18.5097 14.6355 17.3436 14.6355 15.9453H14.4355ZM12.2959 18.5977H12.0959V20.1777H12.2959H12.4959V18.5977H12.2959ZM12.2959 20.1777H12.0959C12.0959 20.3847 11.9276 20.5529 11.7197 20.5529V20.7529V20.9529C12.1476 20.9529 12.4959 20.6065 12.4959 20.1777H12.2959ZM11.7197 20.7529L11.7199 20.5529C11.5124 20.5528 11.3445 20.3849 11.3445 20.1777H11.1445H10.9445C10.9445 20.6061 11.2917 20.9526 11.7196 20.9529L11.7197 20.7529ZM11.1445 20.1777H11.3445V18.5977H11.1445H10.9445V20.1777H11.1445ZM11.1445 18.5977L11.1868 18.4022C10.0543 18.1572 9.20586 17.1506 9.20586 15.9453H9.00586H8.80586C8.80586 17.3432 9.78978 18.5093 11.1023 18.7931L11.1445 18.5977ZM9.00586 15.9453L9.20586 15.9453C9.20605 14.7402 10.0543 13.7333 11.1868 13.4885L11.1445 13.293L11.1023 13.0975C9.78977 13.3812 8.80608 14.5477 8.80586 15.9453L9.00586 15.9453ZM11.1445 13.293H11.3445L11.3445 4.3291H11.1445H10.9445L10.9445 13.293H11.1445ZM11.1445 4.3291L11.3445 4.32924C11.3447 4.12204 11.5127 3.95405 11.7199 3.95391L11.7197 3.75391L11.7196 3.55391C11.2917 3.5542 10.9448 3.90107 10.9445 4.32897L11.1445 4.3291ZM11.7178 14.3838L11.7177 14.1838C11.5056 14.1838 11.3023 14.2219 11.114 14.2906L11.1826 14.4785L11.2512 14.6664C11.3969 14.6132 11.5538 14.5838 11.7178 14.5838L11.7178 14.3838ZM11.1826 14.4785L11.1137 14.2907C10.4395 14.5381 9.95744 15.1844 9.95723 15.9453L10.1572 15.9453L10.3572 15.9454C10.3574 15.358 10.7293 14.8579 11.2515 14.6663L11.1826 14.4785ZM10.1572 15.9453H9.95723C9.95723 16.9193 10.7464 17.7097 11.7207 17.7098L11.7207 17.5098L11.7207 17.3098C10.9676 17.3097 10.3572 16.6987 10.3572 15.9453H10.1572ZM11.7207 17.5098V17.7098C11.7805 17.7098 11.8401 17.7069 11.8989 17.701L11.8789 17.502L11.8589 17.303C11.8138 17.3075 11.7676 17.3098 11.7207 17.3098V17.5098ZM11.8789 17.502L11.8992 17.7009C11.9112 17.6997 11.9209 17.6977 11.927 17.6962C11.9326 17.6949 11.9374 17.6935 11.9376 17.6935C11.9391 17.693 11.9358 17.694 11.9319 17.6949C11.9275 17.696 11.9195 17.6977 11.9092 17.6988L11.8877 17.5L11.8662 17.3012C11.8544 17.3024 11.8449 17.3045 11.8391 17.3059C11.8361 17.3066 11.8336 17.3072 11.832 17.3077C11.8305 17.3081 11.8292 17.3084 11.829 17.3085C11.8277 17.3089 11.8311 17.3079 11.8353 17.3069C11.8399 17.3058 11.8481 17.3041 11.8586 17.303L11.8789 17.502ZM11.8877 17.5L11.9088 17.6989C12.0208 17.687 12.1298 17.6648 12.235 17.6327L12.1768 17.4414L12.1185 17.2501C12.0377 17.2747 11.9536 17.2919 11.8666 17.3011L11.8877 17.5ZM12.1768 17.4414L12.2354 17.6326C12.2478 17.6288 12.259 17.6248 12.267 17.6219C12.2764 17.6186 12.2808 17.6169 12.2862 17.6151L12.2217 17.4258L12.1572 17.2365C12.127 17.2467 12.1319 17.246 12.1181 17.2502L12.1768 17.4414ZM12.2217 17.4258L12.2858 17.6152C12.982 17.3796 13.4842 16.7222 13.4842 15.9453H13.2842H13.0842C13.0842 16.5451 12.6967 17.0539 12.1576 17.2363L12.2217 17.4258ZM13.2842 15.9453L13.4842 15.9453C13.484 15.2002 13.0218 14.5645 12.3695 14.3062L12.2959 14.4922L12.2223 14.6781C12.7275 14.8782 13.084 15.3701 13.0842 15.9454L13.2842 15.9453ZM12.2959 14.4922H12.0959V14.4932H12.2959H12.4959V14.4922H12.2959ZM12.2959 14.4932L12.3699 14.3073C12.1674 14.2268 11.9468 14.1838 11.7178 14.1838V14.3838V14.5838C11.8966 14.5838 12.067 14.6173 12.2219 14.679L12.2959 14.4932ZM17.877 9.12598L17.8769 8.92598C17.6811 8.92599 17.493 8.95874 17.3175 9.01733L17.3809 9.20703L17.4442 9.39674C17.5806 9.3512 17.7259 9.32598 17.877 9.32598L17.877 9.12598ZM17.3809 9.20703L17.3171 9.01746C16.6196 9.25196 16.1166 9.90975 16.1164 10.6865L16.3164 10.6865L16.5164 10.6866C16.5165 10.0872 16.9046 9.57817 17.4446 9.3966L17.3809 9.20703ZM16.3164 10.6865H16.1164C16.1164 11.6596 16.9059 12.449 17.8799 12.449V12.249V12.049C17.1267 12.049 16.5164 11.4385 16.5164 10.6865H16.3164ZM17.8799 12.249L17.8799 12.449C18.854 12.4489 19.6434 11.6596 19.6434 10.6865H19.4434H19.2434C19.2434 11.4385 18.6332 12.049 17.8799 12.049L17.8799 12.249ZM19.4434 10.6865L19.6434 10.6865C19.6432 9.94583 19.1857 9.31323 18.5386 9.05275L18.4639 9.23828L18.3892 9.42381C18.8904 9.62559 19.2432 10.115 19.2434 10.6866L19.4434 10.6865ZM18.4639 9.23828H18.2639V9.24023H18.4639H18.6639V9.23828H18.4639ZM18.4639 9.24023L18.5389 9.05482C18.3346 8.97223 18.1111 8.92598 17.877 8.92598V9.12598V9.32598C18.058 9.32598 18.2308 9.36169 18.3889 9.42564L18.4639 9.24023ZM5.71191 6.95801L5.71186 6.75801C5.50103 6.75807 5.29992 6.79653 5.11383 6.86361L5.18164 7.05176L5.24946 7.23991C5.3948 7.18752 5.55014 7.15805 5.71197 7.15801L5.71191 6.95801ZM5.18164 7.05176L5.11342 6.86375C4.43665 7.10934 3.95143 7.7561 3.95137 8.51854L4.15137 8.51855L4.35137 8.51857C4.35141 7.93065 4.72535 7.43009 5.24986 7.23976L5.18164 7.05176ZM4.15137 8.51855H3.95137C3.95137 9.49173 4.74118 10.2799 5.71481 10.2801L5.71484 10.0801L5.71487 9.88008C4.96157 9.87997 4.35137 9.27029 4.35137 8.51855H4.15137ZM5.71484 10.0801V10.2801C5.89305 10.2801 6.06499 10.2531 6.22689 10.2041L6.16895 10.0127L6.111 9.82127C5.98544 9.85928 5.85252 9.88008 5.71484 9.88008V10.0801ZM6.16895 10.0127L6.22721 10.204C6.24912 10.1973 6.27479 10.188 6.2857 10.1843L6.2207 9.99512L6.15571 9.80597C6.13218 9.81406 6.12374 9.81739 6.11068 9.82137L6.16895 10.0127ZM6.2207 9.99512L6.28535 10.1844C6.97842 9.94765 7.4793 9.29287 7.4793 8.51855H7.2793H7.0793C7.0793 9.11541 6.69334 9.62233 6.15606 9.80585L6.2207 9.99512ZM7.2793 8.51855L7.4793 8.51854C7.47924 7.77291 7.01498 7.13666 6.36135 6.87933L6.28809 7.06543L6.21482 7.25153C6.72128 7.45091 7.07925 7.94338 7.0793 8.51857L7.2793 8.51855ZM6.28809 7.06543H6.08809V7.06738H6.28809H6.48809V7.06543H6.28809ZM6.28809 7.06738L6.36162 6.88139C6.16049 6.80187 5.94084 6.75801 5.71191 6.75801V6.95801V7.15801C5.88952 7.15801 6.05933 7.192 6.21455 7.25337L6.28809 7.06738Z",
-                fill: _color
+                fill: "currentColor"
             })
         ]
     });

package/dist/web/SlippageIcon.d.ts

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

package/dist/web/SlippageIcon.js

@@ -1,55 +1,55 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
-import { isThemeColor } from "../core/index.js";
-import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
-const SlippageIcon_SlippageIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const SlippageIcon_SlippageIcon = ({ 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: "M5.5 18.225C7.13825 19.9351 9.44477 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 12.2707 3.01195 12.5386 3.03535 12.8032",
-                stroke: _color,
+                stroke: "currentColor",
                 strokeWidth: 1.4,
                 strokeLinecap: "round"
             }),
             /*#__PURE__*/ jsx("path", {
                 d: "M3.09998 13H7.09998",
-                stroke: _color,
+                stroke: "currentColor",
                 strokeWidth: 1.4,
                 strokeLinecap: "round"
             }),
             /*#__PURE__*/ jsx("path", {
                 d: "M10 7L7.10156 13",
-                stroke: _color,
+                stroke: "currentColor",
                 strokeWidth: 1.4,
                 strokeLinecap: "round"
             }),
             /*#__PURE__*/ jsx("path", {
                 d: "M10 7L12 17",
-                stroke: _color,
+                stroke: "currentColor",
                 strokeWidth: 1.4,
                 strokeLinecap: "round"
             }),
             /*#__PURE__*/ jsx("path", {
                 d: "M15 10L12 17",
-                stroke: _color,
+                stroke: "currentColor",
                 strokeWidth: 1.4,
                 strokeLinecap: "round"
             }),
             /*#__PURE__*/ jsx("path", {
                 d: "M15 10L16 12",
-                stroke: _color,
+                stroke: "currentColor",
                 strokeWidth: 1.4,
                 strokeLinecap: "round"
             }),
             /*#__PURE__*/ jsx("path", {
                 d: "M18 12L16 12",
-                stroke: _color,
+                stroke: "currentColor",
                 strokeWidth: 1.4,
                 strokeLinecap: "round"
             })

package/dist/web/SmartphoneIcon.d.ts

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

package/dist/web/SmartphoneIcon.js

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { useWebColor } from "../core/index.js";
+const SmartphoneIcon_SmartphoneIcon = ({ 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.5 1.5C18.1569 1.5 19.5 2.84315 19.5 4.5V19.5C19.5 21.1051 18.2394 22.4158 16.6543 22.4961L16.5 22.5H7.5L7.3457 22.4961C5.81166 22.4184 4.58163 21.1883 4.50391 19.6543L4.5 19.5V4.5C4.5 2.84315 5.84315 1.5 7.5 1.5H16.5ZM6 19.5C6 20.3284 6.67157 21 7.5 21H16.5C17.3284 21 18 20.3284 18 19.5V18H6V19.5ZM12.75 18.75C13.1642 18.75 13.5 19.0858 13.5 19.5C13.5 19.9142 13.1642 20.25 12.75 20.25H11.25C10.8358 20.25 10.5 19.9142 10.5 19.5C10.5 19.0858 10.8358 18.75 11.25 18.75H12.75ZM7.5 3C6.67157 3 6 3.67157 6 4.5V16.5H18V4.5C18 3.67157 17.3284 3 16.5 3H7.5ZM13.5 4.5C13.9142 4.5 14.25 4.83579 14.25 5.25C14.25 5.66421 13.9142 6 13.5 6H10.5C10.0858 6 9.75 5.66421 9.75 5.25C9.75 4.83579 10.0858 4.5 10.5 4.5H13.5Z",
+            fill: "currentColor"
+        })
+    });
+};
+SmartphoneIcon_SmartphoneIcon.displayName = 'SmartphoneIcon|smartphone';
+const SmartphoneIcon = SmartphoneIcon_SmartphoneIcon;
+export { SmartphoneIcon as default };

package/dist/web/SnowflakeIcon.d.ts

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

package/dist/web/SnowflakeIcon.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 SnowflakeIcon_SnowflakeIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const SnowflakeIcon_SnowflakeIcon = ({ 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.0358 2.41895C12.2245 2.41911 12.3776 2.57196 12.3776 2.76074V5.1582L13.5016 4.03418L13.5553 3.99023C13.6689 3.9155 13.8177 3.91547 13.9313 3.99023L13.985 4.03418L14.5367 4.58594C14.6698 4.71942 14.6699 4.93587 14.5367 5.06934L12.3776 7.22852V10.957L15.3424 9.24512L16.2047 6.02734L16.2291 5.96191C16.2903 5.84046 16.4191 5.7666 16.5543 5.77441L16.6217 5.78516L16.6237 5.78613L17.3756 5.9873L17.3766 5.98828C17.5585 6.03771 17.6654 6.22421 17.6178 6.40527V6.40625L17.1334 8.20996L19.9957 6.55859L19.9977 6.55762C20.1401 6.47671 20.3171 6.50837 20.4225 6.62695L20.4625 6.68262L20.4635 6.68359L20.8531 7.3584L20.8541 7.36035C20.9464 7.52295 20.8908 7.73049 20.7281 7.8252L20.7272 7.82617L18.1998 9.28418L19.4742 9.62598H19.4752C19.636 9.66798 19.74 9.81783 19.7301 9.97754L19.7194 10.0459L19.5172 10.7949L19.5182 10.7959C19.4763 10.9567 19.3263 11.0614 19.1666 11.0518L19.0983 11.04L16.4088 10.3184L13.3063 12.1104L16.1442 13.749L19.0983 12.958L19.1666 12.9463C19.3254 12.9367 19.4744 13.0399 19.5172 13.1992L19.7194 13.9521L19.7301 14.0205C19.7399 14.1802 19.6359 14.3301 19.4752 14.3721L19.4742 14.3711L17.9352 14.7832L20.0143 15.9844H20.0153C20.182 16.0796 20.2348 16.2902 20.1432 16.4512L20.1422 16.4521L19.7526 17.127L19.7516 17.126C19.6563 17.2922 19.4476 17.345 19.2867 17.2539L19.2848 17.2529L17.2037 16.0508L17.6178 17.5947V17.5967C17.6652 17.7777 17.5584 17.9643 17.3766 18.0137H17.3756L16.6237 18.2158H16.6217C16.4407 18.2634 16.2541 18.1565 16.2047 17.9746V17.9736L15.4117 15.0166L12.3776 13.2646V16.7686L14.5416 18.9326C14.6749 19.0661 14.6747 19.2825 14.5416 19.416L13.9899 19.9678C13.8563 20.101 13.64 20.1011 13.5065 19.9678L12.3776 18.8389V21.2393C12.3776 21.428 12.2245 21.5809 12.0358 21.5811H11.2565C11.0676 21.5811 10.9147 21.4282 10.9147 21.2393V18.8408L9.78772 19.9678C9.65421 20.1013 9.4379 20.1012 9.30432 19.9678L8.75256 19.417C8.619 19.2834 8.619 19.0662 8.75256 18.9326L10.9147 16.7705V13.2627L7.88245 15.0137L7.08948 17.9736V17.9746C7.04016 18.1564 6.85343 18.2631 6.67249 18.2158H6.67053L5.9176 18.0137C5.8304 17.9902 5.7559 17.9326 5.71057 17.8545C5.66547 17.7765 5.65259 17.6839 5.67542 17.5967L5.67639 17.5947L6.09045 16.0479L4.00452 17.2529L4.00354 17.2539C3.84083 17.3466 3.63251 17.2908 3.53772 17.1279V17.127L3.14807 16.4521L3.14709 16.4512C3.05437 16.2884 3.10915 16.0801 3.27209 15.9854H3.27307L5.35413 14.7822L3.81995 14.3711L3.81897 14.3721C3.63524 14.3242 3.52537 14.1356 3.57483 13.9521L3.776 13.1992L3.77795 13.2002C3.82669 13.0175 4.01301 12.9085 4.19592 12.958L4.19495 12.959L7.14514 13.748L10.1735 12L7.14026 10.249L4.19495 11.0391L4.19592 11.04C4.01266 11.0896 3.82527 10.9801 3.77698 10.7969L3.776 10.7979L3.57483 10.0459C3.52529 9.86238 3.63521 9.67383 3.81897 9.62598H3.81995L5.35022 9.21582L3.27307 8.0166C3.19471 7.97136 3.13749 7.89691 3.11389 7.80957C3.09032 7.72208 3.10198 7.62838 3.14709 7.5498H3.14807L3.53772 6.87402C3.62147 6.72929 3.7922 6.67162 3.94104 6.7207L4.00354 6.74805L4.00452 6.74902L6.09045 7.95312L5.67639 6.40625L5.67542 6.40527C5.62774 6.2241 5.73548 6.03761 5.9176 5.98828V5.9873L6.67053 5.78613L6.67249 5.78516C6.73793 5.76809 6.80667 5.77139 6.86975 5.79297L6.9303 5.82031L6.98499 5.85938C7.01852 5.88889 7.04627 5.92478 7.06604 5.96484L7.08948 6.02734L7.88245 8.98633L10.9147 10.7373V7.22754L8.75256 5.06543C8.61928 4.93194 8.61932 4.71555 8.75256 4.58203L9.30432 4.03027L9.35803 3.98633C9.47163 3.91164 9.62047 3.91151 9.73401 3.98633L9.78772 4.03027L10.9147 5.15723V2.76074C10.9147 2.57185 11.0676 2.41895 11.2565 2.41895H12.0358Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/SortAscIcon.d.ts

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

package/dist/web/SortAscIcon.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 SortAscIcon_SortAscIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const SortAscIcon_SortAscIcon = ({ 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 6 5",
         fill: "none",
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M2.40164 0.757802C2.79558 0.345103 3.45442 0.345102 3.84836 0.757801L5.63636 2.63095C6.2438 3.26731 5.79275 4.32143 4.91301 4.32143H1.33699C0.457254 4.32143 0.00619864 3.26732 0.613636 2.63095L2.40164 0.757802Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/SortDescIcon.d.ts

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

package/dist/web/SortDescIcon.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 SortDescIcon_SortDescIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const SortDescIcon_SortDescIcon = ({ 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 6 5",
         fill: "none",
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M3.84836 4.2422C3.45442 4.6549 2.79558 4.6549 2.40164 4.2422L0.613637 2.36905C0.00619985 1.73268 0.457254 0.678571 1.33699 0.678571L4.91301 0.678571C5.79275 0.678571 6.2438 1.73268 5.63636 2.36905L3.84836 4.2422Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/SortDown1Icon.d.ts

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

package/dist/web/SortDown1Icon.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 SortDown1Icon_SortDown1Icon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const SortDown1Icon_SortDown1Icon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M13.5153 17.792C13.9084 17.8724 14.2047 18.2208 14.2047 18.6377C14.2045 19.0545 13.9083 19.402 13.5153 19.4824L13.3414 19.501H4.04944C3.57319 19.5008 3.18636 19.1139 3.18616 18.6377C3.18616 18.1613 3.57307 17.7746 4.04944 17.7744H13.3414L13.5153 17.792ZM17.778 7.81836C18.2542 7.81859 18.6411 8.20535 18.6412 8.68164V17.1123L19.9889 16.3037C20.3974 16.0591 20.9274 16.1923 21.1725 16.6006C21.3865 16.9577 21.312 17.4074 21.0172 17.6787L20.8756 17.7842L18.6237 19.1357C17.8717 19.5869 16.9147 19.0449 16.9147 18.168V8.68164C16.9148 8.20521 17.3015 7.81836 17.778 7.81836ZM13.5153 11.1543C13.9084 11.2347 14.2047 11.583 14.2047 12C14.2046 12.4168 13.9083 12.7643 13.5153 12.8447L13.3414 12.8633H4.04944C3.57315 12.8631 3.18628 12.4763 3.18616 12C3.18616 11.5236 3.57307 11.1369 4.04944 11.1367H13.3414L13.5153 11.1543ZM20.1803 4.51855C20.5735 4.59894 20.8697 4.9463 20.8698 5.36328C20.8698 5.78028 20.5735 6.12762 20.1803 6.20801L20.0065 6.22656H4.03674C3.56025 6.22655 3.17346 5.83978 3.17346 5.36328C3.17348 4.8868 3.56026 4.50002 4.03674 4.5H20.0065L20.1803 4.51855Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/SortDownIcon.d.ts

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

package/dist/web/SortDownIcon.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 SortDownIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const SortDownIcon = ({ 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: "M7.65514 2.40649C7.12013 2.40649 6.76345 2.76317 6.76345 3.29818V18.8134L4.53425 17.0301C4.17758 16.6734 3.5534 16.7626 3.2859 17.1192C2.92922 17.4759 3.01839 18.1001 3.37506 18.3676L7.03096 21.3993C7.65514 21.8452 8.45765 21.4885 8.45765 20.686V3.29818C8.54682 2.85233 8.19014 2.40649 7.65514 2.40649ZM11.1327 5.25988H20.9412V7.04324H11.1327V5.25988ZM11.1327 11.68H20.9412V13.4633H11.1327V11.68ZM11.1327 18.1001H20.9412V19.8835H11.1327V18.1001Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/SortIcon.d.ts

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

package/dist/web/SortIcon.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 SortIcon_SortIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const SortIcon_SortIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M15.5261 14.3236C17.2606 14.3236 18.1502 16.4018 16.9529 17.6566L13.4275 21.35C12.6507 22.1637 11.3517 22.1637 10.5749 21.35L7.04955 17.6566C5.85187 16.4019 6.7408 14.3237 8.47533 14.3236H15.5261ZM10.574 2.64978C11.3507 1.83619 12.6498 1.83609 13.4265 2.64978L16.9519 6.34314C18.1492 7.5979 17.2596 9.67614 15.5251 9.67614H8.47435C6.73988 9.67614 5.85032 7.59791 7.04759 6.34314L10.574 2.64978Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/SortUp1Icon.d.ts

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

package/dist/web/SortUp1Icon.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 SortUp1Icon_SortUp1Icon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const SortUp1Icon_SortUp1Icon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M13.5153 17.792C13.9084 17.8724 14.2047 18.2207 14.2047 18.6377C14.2045 19.0545 13.9083 19.402 13.5153 19.4824L13.3414 19.501H4.04944C3.5732 19.5008 3.18636 19.1139 3.18616 18.6377C3.18616 18.1613 3.57307 17.7746 4.04944 17.7744H13.3414L13.5153 17.792ZM16.9137 8.94922C16.914 8.07248 17.8718 7.53042 18.6237 7.98145L20.8756 9.33301L21.0172 9.43848C21.3121 9.70969 21.3864 10.1595 21.1725 10.5166C20.9275 10.925 20.3974 11.0581 19.9889 10.8135L18.6412 10.0049V18.4355C18.6412 18.9119 18.2542 19.2986 17.778 19.2988C17.3014 19.2988 16.9137 18.9121 16.9137 18.4355V8.94922ZM13.5153 11.1543C13.9084 11.2347 14.2047 11.583 14.2047 12C14.2046 12.4168 13.9083 12.7643 13.5153 12.8447L13.3414 12.8633H4.04944C3.57315 12.8631 3.18628 12.4763 3.18616 12C3.18616 11.5236 3.57307 11.1369 4.04944 11.1367H13.3414L13.5153 11.1543ZM20.1803 4.51855C20.5735 4.59894 20.8697 4.9463 20.8698 5.36328C20.8698 5.78028 20.5735 6.12762 20.1803 6.20801L20.0065 6.22656H4.03674C3.56025 6.22655 3.17346 5.83978 3.17346 5.36328C3.17348 4.8868 3.56026 4.50002 4.03674 4.5H20.0065L20.1803 4.51855Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/SortUpIcon.d.ts

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