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

package/dist/web/ChevronLeftIcon.js

@@ -1,10 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { isThemeColor, useIconsContext } from "../core/index.js";
+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 { getColor } = useIconsContext();
-    const _color = isThemeColor(color) ? getColor(color) : color;
-    const fill = props.fill || _color;
+    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
@@ -15,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: fill
+            fill: _color
         })
     });
 };

package/dist/web/ChevronLeftSmallIcon.js

@@ -1,10 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { isThemeColor, useIconsContext } from "../core/index.js";
+import { isThemeColor } from "../core/index.js";
+import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
 const ChevronLeftSmallIcon_ChevronLeftSmallIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const { getColor } = useIconsContext();
-    const _color = isThemeColor(color) ? getColor(color) : color;
-    const fill = props.fill || _color;
+    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
@@ -15,7 +14,7 @@ const ChevronLeftSmallIcon_ChevronLeftSmallIcon = ({ size = 16, width = size, he
             fillRule: "evenodd",
             clipRule: "evenodd",
             d: "M8.29791 12.707C8.11044 12.5194 8.00513 12.2651 8.00513 12C8.00513 11.7348 8.11044 11.4805 8.29791 11.293L13.9549 5.63598C14.0472 5.54047 14.1575 5.46428 14.2795 5.41188C14.4015 5.35947 14.5327 5.33188 14.6655 5.33073C14.7983 5.32957 14.93 5.35487 15.0529 5.40516C15.1758 5.45544 15.2874 5.52969 15.3813 5.62358C15.4752 5.71747 15.5495 5.82913 15.5997 5.95202C15.65 6.07492 15.6753 6.2066 15.6742 6.33938C15.673 6.47216 15.6454 6.60338 15.593 6.72538C15.5406 6.84739 15.4644 6.95773 15.3689 7.04998L10.4189 12L15.3689 16.95C15.5511 17.1386 15.6519 17.3912 15.6496 17.6534C15.6473 17.9156 15.5421 18.1664 15.3567 18.3518C15.1713 18.5372 14.9205 18.6424 14.6583 18.6447C14.3961 18.6469 14.1435 18.5461 13.9549 18.364L8.29791 12.707Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/ChevronRightIcon.js

@@ -1,10 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { isThemeColor, useIconsContext } from "../core/index.js";
+import { isThemeColor } from "../core/index.js";
+import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
 const ChevronRightIcon_ChevronRightIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const { getColor } = useIconsContext();
-    const _color = isThemeColor(color) ? getColor(color) : color;
-    const fill = props.fill || _color;
+    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
@@ -15,7 +14,7 @@ const ChevronRightIcon_ChevronRightIcon = ({ size = 16, width = size, height = s
             fillRule: "evenodd",
             clipRule: "evenodd",
             d: "M16.4334 11.0992C16.668 11.3338 16.7998 11.652 16.7998 11.9838C16.7998 12.3157 16.668 12.6339 16.4334 12.8685L9.35475 19.9472C9.23932 20.0667 9.10125 20.1621 8.94858 20.2276C8.79592 20.2932 8.63172 20.3277 8.46557 20.3292C8.29942 20.3306 8.13465 20.299 7.98087 20.236C7.82708 20.1731 7.68737 20.0802 7.56988 19.9627C7.45239 19.8452 7.35948 19.7055 7.29656 19.5517C7.23365 19.398 7.20199 19.2332 7.20343 19.067C7.20487 18.9009 7.23939 18.7367 7.30497 18.584C7.37055 18.4314 7.46588 18.2933 7.58539 18.1779L13.7794 11.9838L7.58539 5.78984C7.35745 5.55384 7.23133 5.23776 7.23418 4.90967C7.23703 4.58158 7.36863 4.26773 7.60063 4.03573C7.83264 3.80372 8.14648 3.67212 8.47457 3.66927C8.80266 3.66642 9.11875 3.79255 9.35475 4.02048L16.4334 11.0992Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/ChevronRightSmallIcon.js

@@ -1,10 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { isThemeColor, useIconsContext } from "../core/index.js";
+import { isThemeColor } from "../core/index.js";
+import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
 const ChevronRightSmallIcon_ChevronRightSmallIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const { getColor } = useIconsContext();
-    const _color = isThemeColor(color) ? getColor(color) : color;
-    const fill = props.fill || _color;
+    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
@@ -15,7 +14,7 @@ const ChevronRightSmallIcon_ChevronRightSmallIcon = ({ size = 16, width = size,
             fillRule: "evenodd",
             clipRule: "evenodd",
             d: "M15.7021 11.293C15.8896 11.4806 15.9949 11.7349 15.9949 12C15.9949 12.2652 15.8896 12.5195 15.7021 12.707L10.0451 18.364C9.95284 18.4595 9.8425 18.5357 9.72049 18.5881C9.59849 18.6405 9.46727 18.6681 9.33449 18.6693C9.20171 18.6704 9.07003 18.6451 8.94713 18.5948C8.82424 18.5446 8.71258 18.4703 8.61869 18.3764C8.5248 18.2825 8.45055 18.1709 8.40026 18.048C8.34998 17.9251 8.32468 17.7934 8.32584 17.6606C8.32699 17.5278 8.35458 17.3966 8.40699 17.2746C8.45939 17.1526 8.53558 17.0423 8.63109 16.95L13.5811 12L8.63109 7.05002C8.44893 6.86142 8.34814 6.60882 8.35041 6.34662C8.35269 6.08443 8.45786 5.83361 8.64327 5.6482C8.82868 5.4628 9.07949 5.35763 9.34169 5.35535C9.60388 5.35307 9.85649 5.45386 10.0451 5.63602L15.7021 11.293Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/ChevronUpIcon.js

@@ -1,10 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { isThemeColor, useIconsContext } from "../core/index.js";
+import { isThemeColor } from "../core/index.js";
+import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
 const ChevronUpIcon_ChevronUpIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const { getColor } = useIconsContext();
-    const _color = isThemeColor(color) ? getColor(color) : color;
-    const fill = props.fill || _color;
+    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
@@ -15,7 +14,7 @@ const ChevronUpIcon_ChevronUpIcon = ({ size = 16, width = size, height = size, c
             fillRule: "evenodd",
             clipRule: "evenodd",
             d: "M11.099 7.56644C11.3337 7.33186 11.6519 7.20007 11.9837 7.20007C12.3155 7.20007 12.6337 7.33186 12.8684 7.56644L19.9471 14.6451C20.0666 14.7606 20.1619 14.8986 20.2275 15.0513C20.2931 15.204 20.3276 15.3682 20.3291 15.5343C20.3305 15.7005 20.2988 15.8652 20.2359 16.019C20.173 16.1728 20.0801 16.3125 19.9626 16.43C19.8451 16.5475 19.7054 16.6404 19.5516 16.7033C19.3978 16.7662 19.2331 16.7979 19.0669 16.7964C18.9008 16.795 18.7366 16.7605 18.5839 16.6949C18.4312 16.6293 18.2932 16.534 18.1777 16.4145L11.9837 10.2205L5.78972 16.4145C5.55372 16.6424 5.23764 16.7685 4.90954 16.7657C4.58146 16.7628 4.26761 16.6312 4.03561 16.3992C3.8036 16.1672 3.672 15.8534 3.66915 15.5253C3.6663 15.1972 3.79242 14.8811 4.02036 14.6451L11.099 7.56644Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/ChevronUpSmallIcon.js

@@ -1,10 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { isThemeColor, useIconsContext } from "../core/index.js";
+import { isThemeColor } from "../core/index.js";
+import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
 const ChevronUpSmallIcon_ChevronUpSmallIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const { getColor } = useIconsContext();
-    const _color = isThemeColor(color) ? getColor(color) : color;
-    const fill = props.fill || _color;
+    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
@@ -15,7 +14,7 @@ const ChevronUpSmallIcon_ChevronUpSmallIcon = ({ size = 16, width = size, height
             fillRule: "evenodd",
             clipRule: "evenodd",
             d: "M11.2929 8.29804C11.4804 8.11056 11.7347 8.00525 11.9999 8.00525C12.2651 8.00525 12.5194 8.11056 12.7069 8.29804L18.3639 13.955C18.4594 14.0473 18.5356 14.1576 18.588 14.2796C18.6404 14.4016 18.668 14.5329 18.6692 14.6656C18.6703 14.7984 18.645 14.9301 18.5947 15.053C18.5444 15.1759 18.4702 15.2875 18.3763 15.3814C18.2824 15.4753 18.1708 15.5496 18.0479 15.5999C17.925 15.6501 17.7933 15.6754 17.6605 15.6743C17.5277 15.6731 17.3965 15.6455 17.2745 15.5931C17.1525 15.5407 17.0421 15.4645 16.9499 15.369L11.9999 10.419L7.0499 15.369C6.8613 15.5512 6.6087 15.652 6.3465 15.6497C6.0843 15.6474 5.83349 15.5423 5.64808 15.3569C5.46267 15.1714 5.3575 14.9206 5.35523 14.6584C5.35295 14.3962 5.45374 14.1436 5.6359 13.955L11.2929 8.29804Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/ChevronsLeftIcon.js

@@ -1,10 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { isThemeColor, useIconsContext } from "../core/index.js";
+import { isThemeColor } from "../core/index.js";
+import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
 const ChevronsLeftIcon_ChevronsLeftIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const { getColor } = useIconsContext();
-    const _color = isThemeColor(color) ? getColor(color) : color;
-    const fill = props.fill || _color;
+    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
@@ -13,7 +12,7 @@ const ChevronsLeftIcon_ChevronsLeftIcon = ({ size = 16, width = size, height = s
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M11.1782 12.0005C11.1782 11.3667 11.4069 10.7544 11.8237 10.2779L17.8403 3.32672C18.2074 2.90257 18.8516 2.85627 19.2759 3.2232C19.5091 3.42475 19.6274 3.70911 19.6274 3.99274C19.6274 4.22754 19.5471 4.4656 19.3794 4.65875L13.3599 11.6148L13.3589 11.6158C13.1678 11.8343 13.1678 12.1658 13.3589 12.3843L13.3628 12.3882L13.3628 12.3892L19.3794 19.3423C19.723 19.7396 19.7061 20.3305 19.3511 20.7056L19.2759 20.7779C18.8523 21.1442 18.2079 21.1006 17.8403 20.6744L11.8237 13.7232C11.4071 13.2453 11.1783 12.6347 11.1782 12.0005ZM4.36865 12.0005C4.36865 11.3667 4.59738 10.7544 5.01416 10.2779L11.0308 3.32672C11.3978 2.90257 12.0421 2.85627 12.4663 3.22321C12.6995 3.42475 12.8179 3.70911 12.8179 3.99274C12.8178 4.22754 12.7375 4.4656 12.5698 4.65875L6.55029 11.6148L6.54932 11.6158C6.3582 11.8343 6.35826 12.1658 6.54932 12.3843L6.55322 12.3882L6.55322 12.3892L12.5698 19.3423C12.9134 19.7396 12.8965 20.3305 12.5415 20.7056L12.4663 20.7779C12.0427 21.1442 11.3983 21.1006 11.0308 20.6744L5.01416 13.7232C4.59729 13.2468 4.36871 12.6345 4.36865 12.0005Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/ChevronsUpIcon.js

@@ -1,10 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { isThemeColor, useIconsContext } from "../core/index.js";
+import { isThemeColor } from "../core/index.js";
+import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
 const ChevronsUpIcon_ChevronsUpIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const { getColor } = useIconsContext();
-    const _color = isThemeColor(color) ? getColor(color) : color;
-    const fill = props.fill || _color;
+    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
@@ -13,7 +12,7 @@ const ChevronsUpIcon_ChevronsUpIcon = ({ size = 16, width = size, height = size,
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M11.9969 11.1824C12.6308 11.1824 13.2431 11.4111 13.7196 11.8279L20.6707 17.8445C21.0948 18.2115 21.1412 18.8558 20.7743 19.28C20.5727 19.5131 20.2883 19.6316 20.0047 19.6316C19.77 19.6316 19.5318 19.5512 19.3387 19.3835L12.3827 13.364L12.3817 13.363C12.1632 13.1718 11.8317 13.172 11.6131 13.363L11.6092 13.3669H11.6082L4.65512 19.3835C4.25796 19.7269 3.66691 19.7101 3.29183 19.3552L3.21957 19.28C2.85327 18.8565 2.89699 18.2121 3.32308 17.8445L10.2743 11.8279C10.7522 11.4113 11.3627 11.1824 11.9969 11.1824ZM11.9969 4.3689C12.6307 4.3689 13.2431 4.59769 13.7196 5.0144L20.6707 11.031C21.0948 11.398 21.1411 12.0423 20.7743 12.4666C20.5727 12.6998 20.2884 12.8181 20.0047 12.8181C19.7699 12.8181 19.5319 12.7378 19.3387 12.5701L12.3827 6.55054L12.3817 6.54956C12.1632 6.35858 11.8316 6.35864 11.6131 6.54956L11.6092 6.55347H11.6082L4.65512 12.5701C4.25791 12.9137 3.66697 12.8968 3.29183 12.5417L3.21957 12.4666C2.85341 12.0429 2.89687 11.3985 3.32308 11.031L10.2743 5.0144C10.7507 4.59759 11.363 4.36895 11.9969 4.3689Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/CircleAlertIcon.js

@@ -1,10 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { isThemeColor, useIconsContext } from "../core/index.js";
+import { isThemeColor } from "../core/index.js";
+import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
 const CircleAlertIcon_CircleAlertIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const { getColor } = useIconsContext();
-    const _color = isThemeColor(color) ? getColor(color) : color;
-    const fill = props.fill || _color;
+    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
@@ -13,7 +12,7 @@ const CircleAlertIcon_CircleAlertIcon = ({ size = 16, width = size, height = siz
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M12 2C17.5229 2 22 6.47715 22 12C22 17.5229 17.5229 22 12 22C6.47715 22 2 17.5229 2 12C2 6.47715 6.47715 2 12 2ZM12 3.71875C7.42639 3.71875 3.71875 7.42639 3.71875 12C3.71875 16.5736 7.42639 20.2812 12 20.2812C16.5736 20.2812 20.2812 16.5736 20.2812 12C20.2812 7.42639 16.5736 3.71875 12 3.71875ZM12 15.3594C12.6904 15.3594 13.25 15.919 13.25 16.6094C13.25 17.2997 12.6904 17.8594 12 17.8594C11.3096 17.8594 10.75 17.2997 10.75 16.6094C10.75 15.919 11.3096 15.3594 12 15.3594ZM12 6.14062C12.4746 6.14062 12.8594 6.52539 12.8594 7V13.6309C12.8593 14.1054 12.4746 14.4902 12 14.4902C11.5254 14.4902 11.1407 14.1054 11.1406 13.6309V7C11.1406 6.52539 11.5254 6.14062 12 6.14062Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/CircleCheckFadedIcon.js

@@ -1,10 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
-import { isThemeColor, useIconsContext } from "../core/index.js";
+import { isThemeColor } from "../core/index.js";
+import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
 const CircleCheckFadedIcon_CircleCheckFadedIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const { getColor } = useIconsContext();
-    const _color = isThemeColor(color) ? getColor(color) : color;
-    const fill = props.fill || _color;
+    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
     return /*#__PURE__*/ jsxs("svg", {
         width: width,
         height: height,
@@ -19,11 +18,11 @@ const CircleCheckFadedIcon_CircleCheckFadedIcon = ({ size = 16, width = size, he
                 width: 19.9922,
                 height: 19.9922,
                 rx: 9.99609,
-                fill: fill
+                fill: _color
             }),
             /*#__PURE__*/ jsx("path", {
                 d: "M17.8098 7.63428C18.1134 7.33103 18.6039 7.33105 18.9075 7.63428C19.2111 7.9379 19.2111 8.42928 18.9075 8.73291L10.4612 17.1772C10.4497 17.1905 10.4387 17.2047 10.4261 17.2173C10.2735 17.3681 10.0748 17.4428 9.87625 17.4429L9.8743 17.4419V17.4429C9.67559 17.4429 9.47649 17.3664 9.32547 17.2153C9.31794 17.2078 9.31114 17.1997 9.30399 17.1919L5.08621 12.9741C4.7827 12.6705 4.78264 12.1791 5.08621 11.8755C5.3898 11.5719 5.88121 11.572 6.18484 11.8755L9.8743 15.5669L17.8098 7.63428Z",
-                fill: fill
+                fill: _color
             })
         ]
     });

package/dist/web/CircleCheckFilledIcon.js

@@ -1,10 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
-import { isThemeColor, useIconsContext } from "../core/index.js";
+import { isThemeColor } from "../core/index.js";
+import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
 const CircleCheckFilledIcon_CircleCheckFilledIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const { getColor } = useIconsContext();
-    const _color = isThemeColor(color) ? getColor(color) : color;
-    const fill = props.fill || _color;
+    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
     return /*#__PURE__*/ jsxs("svg", {
         width: width,
         height: height,
@@ -16,7 +15,7 @@ const CircleCheckFilledIcon_CircleCheckFilledIcon = ({ size = 16, width = size,
                 fillRule: "evenodd",
                 clipRule: "evenodd",
                 d: "M12 22C13.3132 22 14.6136 21.7413 15.8268 21.2388C17.0401 20.7362 18.1425 19.9997 19.0711 19.0711C19.9997 18.1425 20.7362 17.0401 21.2388 15.8268C21.7413 14.6136 22 13.3132 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17316C20.7362 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2C9.34784 2 6.8043 3.05357 4.92893 4.92893C3.05357 6.8043 2 9.34783 2 12C2 14.6522 3.05357 17.1957 4.92893 19.0711C6.8043 20.9464 9.34784 22 12 22ZM17.2978 9.37778C17.3953 9.26627 17.4696 9.13638 17.5162 8.99574C17.5628 8.85511 17.5808 8.70657 17.5692 8.55887C17.5576 8.41117 17.5165 8.26729 17.4484 8.1357C17.3804 8.0041 17.2866 7.88745 17.1728 7.7926C17.059 7.69775 16.9274 7.62663 16.7857 7.5834C16.644 7.54018 16.495 7.52574 16.3476 7.54092C16.2003 7.5561 16.0574 7.60061 15.9275 7.67181C15.7976 7.74302 15.6832 7.83949 15.5911 7.95555L11.5933 12.7522C11.2078 13.2144 10.9911 13.4711 10.8189 13.6278L10.8122 13.6344L10.8044 13.6289C10.6178 13.4878 10.3789 13.2522 9.95445 12.8267L8.34111 11.2144C8.13155 11.012 7.85088 10.9001 7.55956 10.9026C7.26823 10.9051 6.98954 11.022 6.78354 11.228C6.57753 11.434 6.46067 11.7127 6.45814 12.004C6.45561 12.2953 6.5676 12.576 6.77 12.7856L8.38222 14.3978L8.42778 14.4433C8.79111 14.8067 9.13889 15.1556 9.46445 15.4011C9.82778 15.6767 10.3044 15.9344 10.9144 15.9078C11.5256 15.88 11.9767 15.5789 12.3144 15.2722C12.6144 14.9978 12.9311 14.6189 13.2589 14.2244L13.3 14.1756L17.2978 9.37778Z",
-                fill: fill
+                fill: _color
             }),
             /*#__PURE__*/ jsx("path", {
                 fillRule: "evenodd",

package/dist/web/CircleCheckIcon.js

@@ -1,10 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { isThemeColor, useIconsContext } from "../core/index.js";
+import { isThemeColor } from "../core/index.js";
+import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
 const CircleCheckIcon_CircleCheckIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const { getColor } = useIconsContext();
-    const _color = isThemeColor(color) ? getColor(color) : color;
-    const fill = props.fill || _color;
+    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
@@ -13,7 +12,7 @@ const CircleCheckIcon_CircleCheckIcon = ({ size = 16, width = size, height = siz
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M8.11523 2.78809C10.5572 1.75605 13.3086 1.73732 15.7646 2.73535C18.2207 3.73341 20.1802 5.66673 21.2119 8.11035C22.2435 10.5539 22.2635 13.3077 21.2666 15.7656C20.2697 18.2236 18.3371 20.1849 15.8955 21.2178C14.6648 21.7377 13.3418 22.0037 12.0059 22C9.69812 22.0037 7.45957 21.2076 5.67188 19.7471C3.88435 18.2866 2.65754 16.2516 2.19922 13.9883C1.7409 11.7249 2.07981 9.37274 3.1582 7.33105C4.2367 5.28932 5.98815 3.68381 8.11523 2.78809ZM12.0059 3.57031C7.35309 3.57031 3.58008 7.34669 3.58008 12.0029C3.58018 16.6591 7.35316 20.4346 12.0059 20.4346C16.6584 20.4344 20.4315 16.659 20.4316 12.0029C20.4316 7.34677 16.6585 3.57045 12.0059 3.57031ZM17.5283 7.82812C17.7373 7.82812 17.9382 7.91072 18.0859 8.05859C18.2336 8.20645 18.3164 8.40719 18.3164 8.61621C18.3164 8.82524 18.2336 9.02598 18.0859 9.17383L10.8916 16.3535C10.7472 16.501 10.55 16.5859 10.3438 16.5889C10.1376 16.5859 9.94121 16.5009 9.79688 16.3535L6.04297 12.5977C5.89524 12.4498 5.81254 12.2491 5.8125 12.04C5.8125 11.831 5.89526 11.6303 6.04297 11.4824C6.19074 11.3345 6.39161 11.251 6.60059 11.251C6.80942 11.2511 7.00955 11.3346 7.15723 11.4824L10.3438 14.6904L16.9707 8.05859C17.1185 7.91072 17.3193 7.82813 17.5283 7.82812Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/CircleChevronDownIcon.js

@@ -1,10 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { isThemeColor, useIconsContext } from "../core/index.js";
+import { isThemeColor } from "../core/index.js";
+import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
 const CircleChevronDownIcon_CircleChevronDownIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const { getColor } = useIconsContext();
-    const _color = isThemeColor(color) ? getColor(color) : color;
-    const fill = props.fill || _color;
+    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
@@ -13,7 +12,7 @@ const CircleChevronDownIcon_CircleChevronDownIcon = ({ size = 16, width = size,
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M12 1.90039C13.3629 1.90039 14.686 2.16744 15.9316 2.69434C17.1343 3.20307 18.2144 3.93121 19.1416 4.8584C20.0688 5.78561 20.797 6.86567 21.3057 8.06836C21.8326 9.31405 22.0996 10.637 22.0996 12C22.0996 13.3629 21.8325 14.686 21.3057 15.9316C20.7969 17.1343 20.0688 18.2144 19.1416 19.1416C18.2144 20.0688 17.1343 20.797 15.9316 21.3057C14.6859 21.8326 13.3629 22.0996 12 22.0996C10.637 22.0996 9.31404 21.8325 8.06836 21.3057C6.86566 20.797 5.78559 20.0688 4.8584 19.1416C3.93121 18.2144 3.20307 17.1343 2.69434 15.9316C2.16749 14.686 1.90039 13.363 1.90039 12C1.90039 10.6371 2.16746 9.31405 2.69434 8.06836C3.20307 6.86566 3.93121 5.78562 4.8584 4.8584C5.78558 3.93122 6.8657 3.20304 8.06836 2.69434C9.31404 2.16743 10.6371 1.90039 12 1.90039ZM12 3.43262C7.2764 3.43262 3.43262 7.2764 3.43262 12C3.43262 16.7236 7.2764 20.5674 12 20.5674C16.7236 20.5674 20.5674 16.7236 20.5674 12C20.5674 7.27641 16.7236 3.43263 12 3.43262ZM7.74512 9.28027C7.84476 9.28114 7.94359 9.30153 8.03516 9.34082C8.12679 9.38018 8.21001 9.43803 8.2793 9.50977L11.9971 13.2275L15.7148 9.50977C15.8565 9.37296 16.0463 9.29713 16.2432 9.29883C16.44 9.30054 16.6283 9.37937 16.7676 9.51855C16.9068 9.65777 16.9855 9.8461 16.9873 10.043C16.989 10.2398 16.914 10.4297 16.7773 10.5713L12.5283 14.8203C12.3875 14.9611 12.1962 15.04 11.9971 15.04C11.7979 15.04 11.6067 14.9611 11.4658 14.8203L7.2168 10.5713C7.14528 10.5022 7.08814 10.4195 7.04883 10.3281C7.00951 10.2366 6.98919 10.1377 6.98828 10.0381C6.98742 9.93841 7.00622 9.83933 7.04395 9.74707C7.08171 9.65476 7.13749 9.57052 7.20801 9.5C7.27842 9.42963 7.36198 9.37367 7.4541 9.33594C7.54632 9.29821 7.64549 9.27945 7.74512 9.28027Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/CircleChevronUpIcon.js

@@ -1,10 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { isThemeColor, useIconsContext } from "../core/index.js";
+import { isThemeColor } from "../core/index.js";
+import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
 const CircleChevronUpIcon_CircleChevronUpIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const { getColor } = useIconsContext();
-    const _color = isThemeColor(color) ? getColor(color) : color;
-    const fill = props.fill || _color;
+    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
@@ -13,7 +12,7 @@ const CircleChevronUpIcon_CircleChevronUpIcon = ({ size = 16, width = size, heig
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M12 22.0996C13.3629 22.0996 14.686 21.8326 15.9316 21.3057C17.1343 20.7969 18.2144 20.0688 19.1416 19.1416C20.0688 18.2144 20.797 17.1343 21.3057 15.9316C21.8326 14.686 22.0996 13.363 22.0996 12C22.0996 10.6371 21.8325 9.31403 21.3057 8.06836C20.7969 6.86567 20.0688 5.78556 19.1416 4.8584C18.2144 3.93118 17.1343 3.20302 15.9316 2.69434C14.6859 2.16745 13.3629 1.90039 12 1.90039C10.637 1.90039 9.31404 2.16748 8.06836 2.69434C6.86566 3.20304 5.78559 3.93121 4.8584 4.8584C3.93121 5.78559 3.20307 6.86567 2.69434 8.06836C2.16749 9.31403 1.90039 10.637 1.90039 12C1.90039 13.3629 2.16746 14.6859 2.69434 15.9316C3.20307 17.1343 3.93121 18.2144 4.8584 19.1416C5.78558 20.0688 6.8657 20.797 8.06836 21.3057C9.31404 21.8326 10.6371 22.0996 12 22.0996ZM12 20.5674C7.2764 20.5674 3.43262 16.7236 3.43262 12C3.43262 7.27643 7.2764 3.43262 12 3.43262C16.7236 3.43263 20.5674 7.27644 20.5674 12C20.5674 16.7236 16.7236 20.5674 12 20.5674ZM7.74512 14.7197C7.84476 14.7189 7.94359 14.6985 8.03516 14.6592C8.12679 14.6198 8.21001 14.562 8.2793 14.4902L11.9971 10.7725L15.7148 14.4902C15.8565 14.627 16.0463 14.7029 16.2432 14.7012C16.44 14.6995 16.6283 14.6206 16.7676 14.4814C16.9068 14.3422 16.9855 14.1539 16.9873 13.957C16.989 13.7602 16.914 13.5703 16.7773 13.4287L12.5283 9.17969C12.3875 9.03889 12.1962 8.95997 11.9971 8.95996C11.7979 8.95996 11.6067 9.03888 11.4658 9.17969L7.2168 13.4287C7.14528 13.4978 7.08814 13.5805 7.04883 13.6719C7.00951 13.7634 6.98919 13.8623 6.98828 13.9619C6.98742 14.0616 7.00622 14.1607 7.04395 14.2529C7.08171 14.3452 7.13749 14.4295 7.20801 14.5C7.27842 14.5704 7.36198 14.6263 7.4541 14.6641C7.54632 14.7018 7.64549 14.7206 7.74512 14.7197Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/CircleCloseFadedIcon.js

@@ -1,10 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
-import { isThemeColor, useIconsContext } from "../core/index.js";
+import { isThemeColor } from "../core/index.js";
+import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
 const CircleCloseFadedIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const { getColor } = useIconsContext();
-    const _color = isThemeColor(color) ? getColor(color) : color;
-    const fill = props.fill || _color;
+    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
     return /*#__PURE__*/ jsxs("svg", {
         width: width,
         height: height,
@@ -17,11 +16,11 @@ const CircleCloseFadedIcon = ({ size = 16, width = size, height = size, color =
                 cx: 12,
                 cy: 12,
                 r: 10,
-                fill: fill
+                fill: _color
             }),
             /*#__PURE__*/ jsx("path", {
                 d: "M13.3196 12.2757L16.8263 15.7423C17.093 16.009 17.093 16.4357 16.8263 16.689C16.5596 16.9557 16.133 16.9557 15.8663 16.689L12.3596 13.249L8.91963 16.7023C8.65296 16.969 8.2263 16.969 7.97296 16.7023C7.7063 16.4357 7.7063 16.009 7.97296 15.7557L11.3996 12.3023L7.75963 8.70234C7.49296 8.43568 7.49296 8.00901 7.75963 7.75568C8.0263 7.48901 8.45296 7.48901 8.71963 7.75568L12.3463 11.3423L15.9196 7.75568C16.1863 7.48901 16.613 7.48901 16.8663 7.75568C17.133 8.02234 17.133 8.44901 16.8663 8.70234L13.3196 12.2757Z",
-                fill: fill
+                fill: _color
             })
         ]
     });

package/dist/web/CircleCloseFilledIcon.js

@@ -1,10 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
-import { isThemeColor, useIconsContext } from "../core/index.js";
+import { isThemeColor } from "../core/index.js";
+import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
 const CircleCloseFilledIcon_CircleCloseFilledIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const { getColor } = useIconsContext();
-    const _color = isThemeColor(color) ? getColor(color) : color;
-    const fill = props.fill || _color;
+    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
     return /*#__PURE__*/ jsxs("svg", {
         width: width,
         height: height,
@@ -14,7 +13,7 @@ const CircleCloseFilledIcon_CircleCloseFilledIcon = ({ size = 16, width = size,
         children: [
             /*#__PURE__*/ jsx("path", {
                 d: "M13.414 12L16.243 9.172C16.4306 8.98436 16.5361 8.72986 16.5361 8.4645C16.5361 8.19914 16.4306 7.94464 16.243 7.757C16.0554 7.56936 15.8009 7.46394 15.5355 7.46394C15.2701 7.46394 15.0156 7.56936 14.828 7.757L12 10.586L9.172 7.757C8.98436 7.56936 8.72986 7.46394 8.4645 7.46394C8.19914 7.46394 7.94464 7.56936 7.757 7.757C7.56936 7.94464 7.46394 8.19914 7.46394 8.4645C7.46394 8.72986 7.56936 8.98436 7.757 9.172L10.586 12L7.757 14.828C7.56936 15.0156 7.46394 15.2701 7.46394 15.5355C7.46394 15.8009 7.56936 16.0554 7.757 16.243C7.94464 16.4306 8.19914 16.5361 8.4645 16.5361C8.72986 16.5361 8.98436 16.4306 9.172 16.243L12 13.414L14.828 16.243C15.0156 16.4306 15.2701 16.5361 15.5355 16.5361C15.8009 16.5361 16.0554 16.4306 16.243 16.243C16.4306 16.0554 16.5361 15.8009 16.5361 15.5355C16.5361 15.2701 16.4306 15.0156 16.243 14.828L13.414 12ZM12 22C6.477 22 2 17.523 2 12C2 6.477 6.477 2 12 2C17.523 2 22 6.477 22 12C22 17.523 17.523 22 12 22Z",
-                fill: fill
+                fill: _color
             }),
             /*#__PURE__*/ jsx("path", {
                 d: "M13.4145 11.9999L16.2435 9.17192C16.4311 8.98428 16.5365 8.72979 16.5365 8.46442C16.5365 8.19906 16.4311 7.94456 16.2435 7.75692C16.0558 7.56928 15.8013 7.46387 15.536 7.46387C15.2706 7.46387 15.0161 7.56928 14.8285 7.75692L12.0005 10.5859L9.17247 7.75692C8.98483 7.56928 8.73034 7.46387 8.46497 7.46387C8.19961 7.46387 7.94511 7.56928 7.75747 7.75692C7.56983 7.94456 7.46442 8.19906 7.46442 8.46442C7.46442 8.72979 7.56983 8.98428 7.75747 9.17192L10.5865 11.9999L7.75747 14.8279C7.56983 15.0156 7.46442 15.2701 7.46442 15.5354C7.46442 15.8008 7.56983 16.0553 7.75747 16.2429C7.94511 16.4306 8.19961 16.536 8.46497 16.536C8.73034 16.536 8.98483 16.4306 9.17247 16.2429L12.0005 13.4139L14.8285 16.2429C15.0161 16.4306 15.2706 16.536 15.536 16.536C15.8013 16.536 16.0558 16.4306 16.2435 16.2429C16.4311 16.0553 16.5365 15.8008 16.5365 15.5354C16.5365 15.2701 16.4311 15.0156 16.2435 14.8279L13.4145 11.9999Z",

package/dist/web/CircleCloseIcon.js

@@ -1,10 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { isThemeColor, useIconsContext } from "../core/index.js";
+import { isThemeColor } from "../core/index.js";
+import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
 const CircleCloseIcon_CircleCloseIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const { getColor } = useIconsContext();
-    const _color = isThemeColor(color) ? getColor(color) : color;
-    const fill = props.fill || _color;
+    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
@@ -13,7 +12,7 @@ const CircleCloseIcon_CircleCloseIcon = ({ size = 16, width = size, height = siz
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M11.9961 2C13.3104 1.99552 14.6127 2.25229 15.8271 2.75488C17.0417 3.25755 18.1445 3.99662 19.0713 4.92871C20.945 6.80517 21.998 9.34824 21.998 12C21.998 14.6519 20.9451 17.1957 19.0713 19.0723C17.6723 20.4706 15.8902 21.4231 13.9502 21.8086C12.0101 22.1941 9.99917 21.9956 8.17188 21.2383C6.34451 20.4809 4.78223 19.1986 3.68359 17.5537C2.58506 15.9089 1.99967 13.975 2 11.9971C1.99906 10.684 2.25674 9.38319 2.75879 8.16992C3.26083 6.95672 3.99737 5.85419 4.92578 4.92578C5.85419 3.99744 6.95676 3.26079 8.16992 2.75879C9.38303 2.25687 10.6833 1.99908 11.9961 2ZM13.6377 3.74512C12.0059 3.42069 10.3144 3.58787 8.77734 4.22461C7.24024 4.86139 5.92628 5.93984 5.00195 7.32324C4.07772 8.70662 3.58398 10.3334 3.58398 11.9971C3.58406 13.6608 4.07768 15.2876 5.00195 16.6709C5.92625 18.0542 7.24037 19.1318 8.77734 19.7686C10.3144 20.4053 12.0059 20.5725 13.6377 20.248C15.2694 19.9236 16.7688 19.1226 17.9453 17.9463C19.5214 16.3677 20.4071 14.2278 20.4072 11.9971C20.4072 9.7663 19.5215 7.62649 17.9453 6.04785C16.7687 4.87144 15.2696 4.06962 13.6377 3.74512ZM8.41602 7.62109C8.62657 7.62113 8.82857 7.70473 8.97754 7.85352L11.9961 10.875L15.0127 7.85352C15.1618 7.70593 15.3634 7.62305 15.5732 7.62305C15.7831 7.62309 15.9847 7.70586 16.1338 7.85352C16.2087 7.9267 16.2679 8.01483 16.3086 8.11133C16.3493 8.20779 16.3709 8.31133 16.3711 8.41602C16.3719 8.52042 16.3514 8.62422 16.3115 8.7207C16.2716 8.81702 16.2129 8.90432 16.1387 8.97754L13.1201 11.9961L16.1387 15.0166C16.2124 15.0902 16.2706 15.1782 16.3105 15.2744C16.3505 15.3706 16.3711 15.474 16.3711 15.5781C16.3711 15.6822 16.3504 15.7857 16.3105 15.8818C16.2706 15.9779 16.2123 16.0652 16.1387 16.1387C16.0652 16.2123 15.9779 16.2706 15.8818 16.3105C15.7857 16.3504 15.6822 16.3711 15.5781 16.3711C15.474 16.3711 15.3706 16.3505 15.2744 16.3105C15.1782 16.2706 15.0902 16.2124 15.0166 16.1387L11.9961 13.1201L8.97754 16.1387C8.8283 16.2871 8.62649 16.3701 8.41602 16.3701C8.2054 16.3701 8.00281 16.2872 7.85352 16.1387C7.70585 15.9896 7.62313 15.788 7.62305 15.5781C7.62305 15.3681 7.70568 15.1658 7.85352 15.0166L10.875 11.9961L7.85352 8.97754C7.70473 8.82857 7.62113 8.62657 7.62109 8.41602C7.62109 8.20524 7.70448 8.00255 7.85352 7.85352C8.00255 7.70448 8.20524 7.62109 8.41602 7.62109Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/CircleDollarIcon.js

@@ -1,10 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { isThemeColor, useIconsContext } from "../core/index.js";
+import { isThemeColor } from "../core/index.js";
+import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
 const CircleDollarIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const { getColor } = useIconsContext();
-    const _color = isThemeColor(color) ? getColor(color) : color;
-    const fill = props.fill || _color;
+    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
@@ -13,7 +12,7 @@ const CircleDollarIcon = ({ size = 16, width = size, height = size, color = 'cur
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M12 3.24999C16.8242 3.24999 20.75 7.17577 20.75 12C20.75 16.8242 16.8242 20.75 12 20.75C7.17578 20.75 3.24999 16.8242 3.24999 12C3.24999 7.17575 7.17578 3.24999 12 3.24999ZM12 2C6.47754 2 2 6.47754 2 12.0001C2 17.5225 6.47754 22 12 22C17.5225 22 22 17.5225 22 12.0001C22 6.47754 17.5224 2 12 2ZM12 4.5C7.85693 4.5 4.50001 7.85695 4.50001 12.0001C4.50001 16.1419 7.85693 19.5 12 19.5C16.1418 19.5 19.5 16.1419 19.5 12.0001C19.5 7.85695 16.1418 4.5 12 4.5ZM14.727 15.8611C14.2351 16.4128 13.5247 16.7376 12.5957 16.8352V18.25H11.4116V16.8426C9.8625 16.6838 8.90425 15.7829 8.53436 14.1423L10.3654 13.6651C10.5351 14.6966 11.0967 15.2117 12.05 15.2117C12.4956 15.2117 12.8252 15.1018 13.0352 14.8809C13.2452 14.66 13.3501 14.3938 13.3501 14.0813C13.3501 13.7578 13.2452 13.5124 13.0352 13.3464C12.8252 13.1792 12.3576 12.968 11.6338 12.7116C10.9831 12.4858 10.4741 12.2636 10.1078 12.0415C9.74164 11.8218 9.44378 11.5129 9.21551 11.1162C8.98725 10.7182 8.8725 10.2543 8.8725 9.72699C8.8725 9.03482 9.07757 8.41106 9.48531 7.85686C9.89304 7.30389 10.5351 6.96574 11.4116 6.84243V5.74998H12.5958V6.8425C13.919 7.00122 14.7758 7.7495 15.1652 9.08858L13.5344 9.75753C13.2158 8.83956 12.7251 8.38058 12.0586 8.38058C11.7241 8.38058 11.4555 8.48313 11.2541 8.6882C11.0515 8.89327 10.9502 9.14229 10.9502 9.43406C10.9502 9.73191 11.0478 9.9602 11.2432 10.1201C11.4373 10.2789 11.8559 10.4754 12.4956 10.7109C13.1987 10.9673 13.7505 11.2102 14.1497 11.4385C14.55 11.6667 14.8687 11.983 15.1078 12.3845C15.346 12.7874 15.4655 13.2574 15.4655 13.7957C15.4655 14.6221 15.2189 15.3105 14.727 15.8611Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/CircleFilledIcon.js

@@ -1,10 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { isThemeColor, useIconsContext } from "../core/index.js";
+import { isThemeColor } from "../core/index.js";
+import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
 const CircleFilledIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const { getColor } = useIconsContext();
-    const _color = isThemeColor(color) ? getColor(color) : color;
-    const fill = props.fill || _color;
+    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
@@ -15,7 +14,7 @@ const CircleFilledIcon = ({ size = 16, width = size, height = size, color = 'cur
             cx: 12,
             cy: 12,
             r: 10,
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/CircleFlameIcon.js

@@ -1,10 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { isThemeColor, useIconsContext } from "../core/index.js";
+import { isThemeColor } from "../core/index.js";
+import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
 const CircleFlameIcon_CircleFlameIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const { getColor } = useIconsContext();
-    const _color = isThemeColor(color) ? getColor(color) : color;
-    const fill = props.fill || _color;
+    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
@@ -13,7 +12,7 @@ const CircleFlameIcon_CircleFlameIcon = ({ size = 16, width = size, height = siz
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M12 2C13.3497 2 14.6593 2.2645 15.8926 2.78613C17.0835 3.28984 18.1531 4.01055 19.0713 4.92871C19.9895 5.84689 20.7102 6.91655 21.2139 8.10742C21.7355 9.34068 22 10.6503 22 12C22 13.3497 21.7355 14.6593 21.2139 15.8926C20.7102 17.0834 19.9894 18.1532 19.0713 19.0713C18.1531 19.9895 17.0834 20.7102 15.8926 21.2139C14.6593 21.7355 13.3497 22 12 22C10.6503 22 9.34068 21.7355 8.10742 21.2139C6.91654 20.7102 5.84687 19.9894 4.92871 19.0713C4.01056 18.1531 3.28984 17.0835 2.78613 15.8926C2.26454 14.6593 2 13.3497 2 12C2 10.6503 2.26452 9.34069 2.78613 8.10742C3.28984 6.91654 4.01055 5.8469 4.92871 4.92871C5.84686 4.01056 6.91658 3.28981 8.10742 2.78613C9.34067 2.26448 10.6503 2 12 2ZM12 3.33301C7.22117 3.33301 3.33301 7.22117 3.33301 12C3.33301 16.7788 7.22117 20.667 12 20.667C16.7788 20.667 20.667 16.7788 20.667 12C20.667 7.22118 16.7788 3.33302 12 3.33301ZM11.2109 5.00098C11.2109 5.00098 12.336 5.50111 13.2109 6.62598C14.2066 7.87052 14.9544 9.98256 14.9609 10.001L15.2109 7.37598C15.2109 7.37598 17.7109 10.751 17.5859 13.376C17.4609 16.251 14.5859 18.126 14.5859 18.126C14.5859 18.126 15.4609 16.001 14.9609 14.126C14.4609 12.376 12.5859 10.751 12.5859 10.751C12.5835 10.7619 12.3353 11.8784 12.2109 12.376C11.961 13.1259 11.8359 13.751 11.8359 13.751L10.8359 12.126C10.827 12.1451 9.95837 14.0068 9.46094 15.126C8.71575 16.7407 9.45168 18.1089 9.46094 18.126C9.4305 18.1076 6.9594 16.6121 6.71094 14.376C6.46205 12.1357 8.44379 9.02782 8.46094 9.00098L8.83594 10.626C8.83594 10.626 10.0859 9.25091 10.8359 7.62598C11.3359 6.50098 11.2109 5.00098 11.2109 5.00098Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/CircleMinusFadedIcon.js

@@ -1,10 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
-import { isThemeColor, useIconsContext } from "../core/index.js";
+import { isThemeColor } from "../core/index.js";
+import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
 const CircleMinusFadedIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const { getColor } = useIconsContext();
-    const _color = isThemeColor(color) ? getColor(color) : color;
-    const fill = props.fill || _color;
+    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
     return /*#__PURE__*/ jsxs("svg", {
         width: width,
         height: height,
@@ -17,11 +16,11 @@ const CircleMinusFadedIcon = ({ size = 16, width = size, height = size, color =
                 cx: 12,
                 cy: 12.0234,
                 r: 10.0234,
-                fill: fill
+                fill: _color
             }),
             /*#__PURE__*/ jsx("path", {
                 d: "M16.4364 11.3916H7.56606C7.39802 11.3916 7.23686 11.4584 7.11804 11.5772C6.99922 11.696 6.93246 11.8572 6.93246 12.0252C6.93246 12.1932 6.99922 12.3544 7.11804 12.4732C7.23686 12.592 7.39802 12.6588 7.56606 12.6588H16.4364C16.6044 12.6588 16.7656 12.592 16.8844 12.4732C17.0032 12.3544 17.0699 12.1932 17.0699 12.0252C17.0699 11.8572 17.0032 11.696 16.8844 11.5772C16.7656 11.4584 16.6044 11.3916 16.4364 11.3916Z",
-                fill: fill
+                fill: _color
             })
         ]
     });

package/dist/web/CircleMinusIcon.js

@@ -1,10 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { isThemeColor, useIconsContext } from "../core/index.js";
+import { isThemeColor } from "../core/index.js";
+import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
 const CircleMinusIcon_CircleMinusIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const { getColor } = useIconsContext();
-    const _color = isThemeColor(color) ? getColor(color) : color;
-    const fill = props.fill || _color;
+    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
@@ -13,7 +12,7 @@ const CircleMinusIcon_CircleMinusIcon = ({ size = 16, width = size, height = siz
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M12 1.90039C13.3629 1.90039 14.686 2.16744 15.9316 2.69434C17.1343 3.20307 18.2144 3.93121 19.1416 4.8584C20.0688 5.78561 20.797 6.86567 21.3057 8.06836C21.8326 9.31405 22.0996 10.637 22.0996 12C22.0996 13.3629 21.8325 14.686 21.3057 15.9316C20.7969 17.1343 20.0688 18.2144 19.1416 19.1416C18.2144 20.0688 17.1343 20.797 15.9316 21.3057C14.6859 21.8326 13.3629 22.0996 12 22.0996C10.637 22.0996 9.31404 21.8325 8.06836 21.3057C6.86566 20.797 5.78559 20.0688 4.8584 19.1416C3.93121 18.2144 3.20307 17.1343 2.69434 15.9316C2.23329 14.8416 1.97041 13.6923 1.91211 12.5088L1.90039 12C1.90039 10.6371 2.16746 9.31405 2.69434 8.06836C3.20307 6.86566 3.93121 5.78562 4.8584 4.8584C5.78558 3.93122 6.8657 3.20304 8.06836 2.69434C9.31404 2.16743 10.6371 1.90039 12 1.90039ZM12 3.43262C7.2764 3.43262 3.43262 7.2764 3.43262 12C3.43262 16.7236 7.2764 20.5674 12 20.5674L12.4404 20.5557C16.9602 20.3256 20.5674 16.5759 20.5674 12C20.5674 7.42412 16.9602 3.67439 12.4404 3.44434L12 3.43262ZM16.2002 11.1006C16.6971 11.1007 17.0996 11.503 17.0996 12C17.0996 12.497 16.6971 12.8993 16.2002 12.8994H7.7998C7.30289 12.8993 6.90042 12.497 6.90039 12C6.90039 11.503 7.30288 11.1007 7.7998 11.1006H16.2002Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/CirclePendingIcon.js

@@ -1,10 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
-import { isThemeColor, useIconsContext } from "../core/index.js";
+import { isThemeColor } from "../core/index.js";
+import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
 const CirclePendingIcon_CirclePendingIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const { getColor } = useIconsContext();
-    const _color = isThemeColor(color) ? getColor(color) : color;
-    const fill = props.fill || _color;
+    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
     return /*#__PURE__*/ jsxs("svg", {
         width: width,
         height: height,
@@ -17,11 +16,11 @@ const CirclePendingIcon_CirclePendingIcon = ({ size = 16, width = size, height =
                 cx: 12.0051,
                 cy: 11.9985,
                 r: 9.99854,
-                fill: fill
+                fill: _color
             }),
             /*#__PURE__*/ jsx("path", {
                 d: "M6.01636 10.9268C6.608 10.9268 7.08757 11.4064 7.08765 11.998C7.08765 12.5897 6.60805 13.0693 6.01636 13.0693C5.42462 13.0693 4.94507 12.5898 4.94507 11.998C4.94514 11.4064 5.42467 10.9268 6.01636 10.9268ZM12.0369 10.9268C12.6286 10.9268 13.1091 11.4064 13.1091 11.998C13.1091 12.5898 12.6286 13.0693 12.0369 13.0693C11.4453 13.0691 10.9656 12.5897 10.9656 11.998C10.9657 11.4065 11.4454 10.927 12.0369 10.9268ZM18.074 10.9268C18.6656 10.9268 19.1452 11.4064 19.1453 11.998C19.1453 12.5897 18.6657 13.0693 18.074 13.0693C17.4822 13.0693 17.0027 12.5898 17.0027 11.998C17.0028 11.4064 17.4823 10.9268 18.074 10.9268Z",
-                fill: fill
+                fill: _color
             })
         ]
     });