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

package/dist/web/DraggableIcon.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 DraggableIcon_DraggableIcon = ({ 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 DraggableIcon_DraggableIcon = ({ size = 16, width = size, height = size, c
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M2.79102 15.9111V13.5212H5.06721V15.9111H2.79102ZM2.79102 10.4791V8.08911H5.06721V10.4791H2.79102ZM8.17196 15.9111V13.5212H10.4482V15.9111H8.17196ZM8.17196 10.4791V8.08911H10.4482V10.4791H8.17196ZM13.5511 15.9111V13.5212H15.8272V15.9111H13.5511ZM13.5511 10.4791V8.08911H15.8272V10.4791H13.5511ZM18.9329 15.9111V13.5212H21.2091V15.9111H18.9329ZM18.9329 10.4791V8.08911H21.2091V10.4791H18.9329Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/DraggableVerticalIcon.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 DraggableVerticalIcon_DraggableVerticalIcon = ({ 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 DraggableVerticalIcon_DraggableVerticalIcon = ({ size = 16, width = size,
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M8.08905 2.79077L10.479 2.79077L10.479 5.06697L8.08905 5.06697L8.08905 2.79077ZM13.521 2.79077L15.911 2.79077L15.911 5.06697L13.521 5.06697L13.521 2.79077ZM8.08905 8.17172L10.479 8.17172L10.479 10.4479L8.08905 10.4479L8.08905 8.17172ZM13.521 8.17172L15.911 8.17172L15.911 10.4479L13.521 10.4479L13.521 8.17172ZM8.08905 13.5508L10.479 13.5508L10.479 15.8269L8.08905 15.8269L8.08905 13.5508ZM13.521 13.5508L15.911 13.5508L15.911 15.8269L13.521 15.8269L13.521 13.5508ZM8.08905 18.9326L10.479 18.9326L10.479 21.2089L8.08905 21.2089L8.08905 18.9326ZM13.521 18.9326L15.911 18.9326L15.911 21.2089L13.521 21.2089L13.521 18.9326Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/EagleIcon.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 EagleIcon = ({ 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 EagleIcon = ({ size = 16, width = size, height = size, color = 'currentCol
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M18.2499 5.77881C18.7611 6.80169 19.0272 7.82077 19.0272 8.96729L19.0262 10.7866L19.036 11.73C19.0731 14.0453 19.574 16.388 20.7089 18.5317L18.3339 16.6167L16.6542 19.3433L14.8895 17.6821L12.0682 22.2583L9.24792 17.6821L7.48328 19.3433L5.80261 16.6167L3.42859 18.5317C4.56341 16.388 5.06432 14.0453 5.10144 11.73L5.11121 10.7866L5.11023 8.96729C5.11024 7.82072 5.3752 6.80161 5.8866 5.77881L6.04578 5.47998C6.35846 5.91987 6.74696 6.41345 7.18835 6.85889L7.05066 7.14502C6.78301 7.70095 6.69471 8.32242 6.9032 8.91357C7.03767 9.29442 7.2831 9.62128 7.59949 9.87061C7.90657 10.1126 8.26981 10.2761 8.65027 10.3618C8.89822 10.4176 9.15125 10.4409 9.40222 10.4331C9.34373 10.7649 9.31794 11.1089 9.31628 11.4595L7.07703 12.7534L8.80457 13.7222C8.94271 13.7996 9.07459 13.8887 9.19812 13.9878C10.623 15.2673 11.4795 19.0522 12.0682 20.9009C12.6571 19.0522 13.5143 15.2673 14.9393 13.9878C15.0628 13.8887 15.1939 13.7996 15.3319 13.7222L17.0604 12.7534L14.8212 11.4595C14.8195 11.1089 14.7937 10.7648 14.7352 10.4331C14.986 10.4409 15.2384 10.4175 15.4862 10.3618C15.8668 10.2761 16.2308 10.1127 16.538 9.87061C16.8543 9.62128 17.0999 9.29442 17.2343 8.91357C17.4428 8.32247 17.3543 7.70098 17.0868 7.14502L16.9491 6.85889C17.3904 6.41352 17.779 5.91986 18.0917 5.47998L18.2499 5.77881ZM11.8251 8.83838C12.0522 8.83841 12.2821 8.91911 12.493 9.07959C13.0811 9.52791 13.5176 10.2423 13.4413 11.8569C13.4373 11.9428 13.4605 12.0282 13.5077 12.1001C13.5549 12.1718 13.6237 12.2269 13.704 12.2573L14.537 12.7388C12.8365 13.6921 12.3743 15.4621 11.8251 17.186C11.2759 15.4619 10.813 13.692 9.11218 12.7388L9.94519 12.2573C10.0257 12.2269 10.0952 12.172 10.1425 12.1001C10.1897 12.0282 10.2128 11.9428 10.2089 11.8569C10.1326 10.2426 10.5682 9.52793 11.1561 9.07959C11.3671 8.919 11.5979 8.83838 11.8251 8.83838ZM7.82312 7.6333C8.62472 8.26615 9.42535 8.7287 10.0546 9.04248C9.59468 9.30232 9.08793 9.35894 8.65417 9.26123C8.42574 9.20993 8.21916 9.11511 8.05359 8.98486C7.9008 8.86429 7.78434 8.7128 7.72253 8.53857C7.63552 8.29124 7.65409 7.98432 7.82312 7.6333ZM15.827 7.6333C15.9961 7.98432 16.0147 8.29124 15.9276 8.53857C15.8659 8.71281 15.7494 8.86428 15.5966 8.98486C15.431 9.11522 15.2236 9.20994 14.995 9.26123C14.5614 9.3588 14.0553 9.30214 13.5956 9.04248C14.2248 8.7287 15.0254 8.26611 15.827 7.6333ZM11.8251 1.71436C12.7878 1.74022 13.753 1.92696 14.5907 2.29053C15.1707 2.54261 15.712 2.87578 16.202 3.27393C16.4233 3.45369 16.6058 3.62773 16.8065 3.82764C17.3479 3.84635 18.1392 3.24492 18.5067 2.68213C17.8742 4.75489 14.9895 7.20245 12.9921 8.13916L12.9901 8.13818C12.6317 7.86448 12.2283 7.72708 11.8251 7.72705C11.4218 7.72705 11.0185 7.86445 10.66 8.13818L10.6581 8.13916C8.66051 7.20248 5.77485 4.75499 5.14246 2.68213C5.5097 3.24487 6.30116 3.84602 6.84265 3.82764C7.04347 3.62778 7.2259 3.45369 7.44714 3.27393C7.93729 2.87566 8.47933 2.54266 9.05945 2.29053C9.89716 1.92701 10.8624 1.7402 11.8251 1.71436Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/EarthIcon.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 EarthIcon = ({ 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 EarthIcon = ({ size = 16, width = size, height = size, color = 'currentCol
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M21.5 12C21.5 6.75175 17.2483 2.5 12 2.5C6.75175 2.5 2.5 6.75175 2.5 12C2.5 17.2483 6.75175 21.5 12 21.5C14.5134 21.5 16.7943 20.5256 18.4883 18.9312C18.5991 18.898 18.6987 18.8427 18.7762 18.743C18.8427 18.6766 18.8869 18.5991 18.9202 18.5105C20.5146 16.8054 21.5 14.5245 21.5 12ZM11.2582 20.2045C11.2471 20.1824 11.2249 20.1713 11.2028 20.1492C10.1841 19.2634 9.35373 18.2115 8.73368 17.049C9.5641 16.7057 10.4499 16.4953 11.3689 16.4289V20.2045C11.3357 20.2045 11.2914 20.2045 11.2582 20.2045ZM3.78438 12.609H6.23135C6.29779 13.9376 6.58566 15.2331 7.07284 16.451C6.60781 16.7168 6.17599 17.0157 5.75524 17.359C4.63695 16.0635 3.91725 14.4138 3.78438 12.609ZM5.82168 6.55245C6.23135 6.88462 6.66317 7.17249 7.10606 7.43823C6.59674 8.66725 6.29779 9.99592 6.23135 11.3467H3.79545C3.93939 9.51981 4.68124 7.85897 5.82168 6.55245ZM12.7197 3.79545C12.7418 3.8176 12.7529 3.83974 12.7861 3.86189C13.7716 4.71445 14.5909 5.7331 15.1999 6.8514C14.3805 7.18357 13.5169 7.38287 12.6311 7.4493V3.79545C12.6643 3.79545 12.6976 3.79545 12.7197 3.79545ZM20.2045 11.3467H17.7576C17.6801 9.99592 17.3811 8.67832 16.8718 7.43823C17.3258 7.18357 17.7576 6.88462 18.1672 6.55245C19.3188 7.85897 20.0606 9.51981 20.2045 11.3467ZM11.3689 11.3467H7.50466C7.5711 10.1841 7.83683 9.05478 8.25758 7.99184C9.24301 8.40152 10.2949 8.6451 11.3689 8.71154V11.3467ZM11.3689 12.609V15.1556C10.2727 15.222 9.20979 15.4767 8.21329 15.8864C7.81469 14.8456 7.5711 13.7383 7.50466 12.609H11.3689ZM12.6311 12.609H16.4843C16.4178 13.7494 16.1742 14.8566 15.7756 15.8974C14.7791 15.4767 13.7162 15.2331 12.6311 15.1556V12.609ZM12.6311 11.3467V8.71154C13.7051 8.6451 14.757 8.40152 15.7314 8.00291C16.1521 9.06585 16.4068 10.1952 16.4843 11.3467H12.6311ZM16.3403 6.28671C15.9639 5.60023 15.5321 4.94697 15.0227 4.338C15.8421 4.65909 16.595 5.11305 17.2593 5.66667C16.9604 5.89918 16.6503 6.10956 16.3403 6.28671ZM11.3689 3.78438V7.43823C10.4831 7.37179 9.60839 7.17249 8.80012 6.84033C9.40909 5.72203 10.2174 4.71445 11.2028 3.86189C11.2249 3.83974 11.2582 3.80653 11.2803 3.78438C11.3024 3.79545 11.3357 3.79545 11.3689 3.78438ZM7.65967 6.28671C7.33858 6.09848 7.03963 5.88811 6.74068 5.66667C7.40501 5.11305 8.15793 4.67016 8.9662 4.34907C8.46795 4.94697 8.02506 5.60023 7.65967 6.28671ZM7.60431 17.6136C7.98077 18.3333 8.43473 19.0198 8.95513 19.6509C8.11364 19.3188 7.33858 18.8427 6.6521 18.2669C6.96212 18.0233 7.28322 17.8129 7.60431 17.6136ZM12.6311 20.2156V16.44C13.539 16.5064 14.4248 16.7168 15.2552 17.06C14.6352 18.2226 13.8048 19.2745 12.7861 20.1603C12.764 20.1824 12.7529 20.1935 12.7308 20.2156C12.6976 20.2045 12.6643 20.2045 12.6311 20.2156ZM16.3846 17.6247C16.7057 17.824 17.0268 18.0344 17.3258 18.278C16.6503 18.8537 15.8753 19.3188 15.0338 19.6509C15.5542 19.0309 16.0082 18.3444 16.3846 17.6247ZM16.9272 16.4621C17.4143 15.2442 17.7022 13.9376 17.7686 12.609H20.2156C20.0828 14.4248 19.352 16.0746 18.2337 17.3811C17.8129 17.0379 17.3811 16.7279 16.9272 16.4621Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/Edit1Icon.js

@@ -1,11 +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 Edit1Icon_Edit1Icon = ({ 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 stroke = props.stroke || _color;
+    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
@@ -14,8 +12,8 @@ const Edit1Icon_Edit1Icon = ({ size = 16, width = size, height = size, color = '
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M20.7116 4.42872L13.0236 12.6618C12.9639 12.7256 12.8813 12.763 12.794 12.7661C12.7067 12.7691 12.6218 12.7375 12.5577 12.6781C12.5261 12.6488 12.5006 12.6135 12.4826 12.5743C12.4647 12.5351 12.4546 12.4928 12.453 12.4497C12.4515 12.4066 12.4584 12.3636 12.4735 12.3232C12.4885 12.2828 12.5114 12.2458 12.5408 12.2142L20.2295 3.98115C20.2893 3.91757 20.3719 3.8802 20.4591 3.87715C20.5463 3.87411 20.6313 3.90565 20.6954 3.9649C20.727 3.99425 20.7524 4.02955 20.7703 4.06877C20.7882 4.10798 20.7982 4.15035 20.7998 4.19344C20.8013 4.23652 20.7943 4.27949 20.7791 4.31986C20.764 4.36023 20.7411 4.39723 20.7116 4.42872ZM5.86306 11.6448H10.9699C11.0525 11.6513 11.1295 11.6887 11.1857 11.7495C11.2419 11.8103 11.2731 11.89 11.2731 11.9729C11.2731 12.0557 11.2419 12.1354 11.1857 12.1962C11.1295 12.257 11.0525 12.2944 10.9699 12.3009H5.86306C5.81781 12.3045 5.77231 12.2986 5.72942 12.2838C5.68654 12.2689 5.64719 12.2453 5.61385 12.2145C5.58052 12.1837 5.55392 12.1463 5.53573 12.1047C5.51754 12.0631 5.50815 12.0182 5.50815 11.9729C5.50815 11.9275 5.51754 11.8826 5.53573 11.841C5.55392 11.7994 5.58052 11.762 5.61385 11.7312C5.64719 11.7004 5.68654 11.6768 5.72942 11.6619C5.77231 11.6471 5.81781 11.6412 5.86306 11.6448ZM5.86306 8.85506H13.0297C13.074 8.85304 13.1183 8.86003 13.1599 8.87561C13.2014 8.89119 13.2394 8.91503 13.2715 8.94569C13.3036 8.97635 13.3291 9.0132 13.3466 9.05401C13.364 9.09482 13.373 9.13874 13.373 9.18312C13.373 9.2275 13.364 9.27142 13.3466 9.31223C13.3291 9.35304 13.3036 9.38989 13.2715 9.42055C13.2394 9.45121 13.2014 9.47505 13.1599 9.49063C13.1183 9.50621 13.074 9.5132 13.0297 9.51119H5.86306C5.78051 9.50468 5.70345 9.4673 5.64724 9.40649C5.59104 9.34569 5.55982 9.26593 5.55982 9.18312C5.55982 9.10032 5.59104 9.02055 5.64724 8.95975C5.70345 8.89894 5.78051 8.86156 5.86306 8.85506ZM15.0888 5.764L4.10255 5.76333C4.02671 5.76333 3.92176 5.76197 3.85879 5.7701V17.1694C3.85879 17.3509 4.0064 17.4978 4.18787 17.4978H9.48769C9.56623 17.4978 9.64207 17.5263 9.70166 17.577L11.8143 19.3809L14.4334 17.5574C14.4888 17.5187 14.5547 17.4979 14.6223 17.4978H19.5368C19.58 17.4979 19.6228 17.4895 19.6628 17.473C19.7028 17.4566 19.7391 17.4324 19.7697 17.4019C19.8003 17.3714 19.8247 17.3352 19.8413 17.2953C19.8579 17.2554 19.8665 17.2126 19.8666 17.1694V8.99183C19.8666 8.90447 19.9013 8.82068 19.9631 8.7589C20.0248 8.69712 20.1086 8.66242 20.196 8.66242C20.2834 8.66242 20.3672 8.69712 20.4289 8.7589C20.4907 8.82068 20.5254 8.90447 20.5254 8.99183V17.1694C20.5245 17.431 20.42 17.6816 20.2347 17.8663C20.0494 18.0509 19.7984 18.1546 19.5368 18.1546H14.7259L11.9829 20.0648C11.9227 20.1061 11.8506 20.1265 11.7777 20.1228C11.7047 20.1191 11.6351 20.0916 11.5793 20.0445L9.36581 18.1546H4.18787C3.92633 18.1546 3.67545 18.0509 3.49026 17.8662C3.30507 17.6815 3.20067 17.431 3.19995 17.1694V5.764C3.19995 5.56899 3.25886 5.4119 3.37465 5.29747C3.57101 5.10313 3.84389 5.10381 4.10729 5.1072L4.18787 5.10787H15.0888C15.1341 5.10431 15.1796 5.11015 15.2225 5.12502C15.2654 5.13989 15.3047 5.16347 15.338 5.19428C15.3714 5.22509 15.398 5.26247 15.4162 5.30406C15.4343 5.34564 15.4437 5.39055 15.4437 5.43594C15.4437 5.48133 15.4343 5.52623 15.4162 5.56782C15.398 5.60941 15.3714 5.64678 15.338 5.6776C15.3047 5.70841 15.2654 5.73199 15.2225 5.74686C15.1796 5.76173 15.1341 5.76757 15.0888 5.764Z",
-            fill: fill,
-            stroke: stroke,
+            fill: _color,
+            stroke: _color,
             strokeWidth: 0.741053
         })
     });

package/dist/web/EditIcon.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 EditIcon = ({ 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,11 +13,11 @@ const EditIcon = ({ size = 16, width = size, height = size, color = 'currentColo
         children: [
             /*#__PURE__*/ jsx("path", {
                 d: "M7.34565 17.5919H3.76058C3.55892 17.5919 3.36553 17.5094 3.22294 17.3624C3.08035 17.2154 3.00024 17.016 3.00024 16.8082V13.3579C3.00024 13.2543 3.02018 13.1517 3.05891 13.056C3.09764 12.9604 3.15438 12.8736 3.22585 12.8007L12.6054 3.22797C12.7478 3.08196 12.9406 3 13.1415 3C13.3423 3 13.5351 3.08196 13.6775 3.22797L17.1373 6.7755C17.2083 6.84841 17.2647 6.93505 17.3031 7.03046C17.3415 7.12587 17.3613 7.22816 17.3613 7.33147C17.3613 7.43478 17.3415 7.53707 17.3031 7.63248C17.2647 7.72789 17.2083 7.81453 17.1373 7.88744L7.88168 17.3643C7.73918 17.5101 7.54649 17.592 7.34565 17.5919ZM4.52127 16.0244H7.03216L15.5222 7.33233L13.1395 4.8899L4.52127 13.6851V16.0244ZM20.1966 21.002H3.80558C3.36075 21.002 3.00012 20.6511 3.00012 20.2182C3.00012 19.7853 3.36075 19.4344 3.80558 19.4344H20.1967C20.6415 19.4344 21.0021 19.7853 21.0021 20.2182C21.0021 20.6511 20.6414 21.002 20.1966 21.002Z",
-                fill: fill
+                fill: _color
             }),
             /*#__PURE__*/ jsx("path", {
                 d: "M10 17.1866L11.2225 16L14.5548 19.4339L13.3323 20.6202L10 17.1866Z",
-                fill: fill
+                fill: _color
             })
         ]
     });

package/dist/web/EllipsisIcon.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 EllipsisIcon = ({ 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 EllipsisIcon = ({ size = 16, width = size, height = size, color = 'current
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M4.85742 12.0002C4.85729 12.7891 4.21754 13.4289 3.42871 13.429C2.63981 13.429 2.00013 12.7891 2 12.0002C2 11.2113 2.63973 10.5715 3.42871 10.5715C4.21763 10.5716 4.85742 11.2113 4.85742 12.0002ZM13.4287 12.0002C13.4286 12.7891 12.7889 13.429 12 13.429C11.2111 13.429 10.5714 12.7891 10.5713 12.0002C10.5713 11.2113 11.211 10.5715 12 10.5715C12.789 10.5715 13.4287 11.2113 13.4287 12.0002ZM22 12.0002C21.9999 12.7891 21.3602 13.429 20.5713 13.429C19.7825 13.4289 19.1427 12.7891 19.1426 12.0002C19.1426 11.2113 19.7824 10.5716 20.5713 10.5715C21.3603 10.5715 22 11.2113 22 12.0002Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/EllipsisVerticalIcon.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 EllipsisVerticalIcon_EllipsisVerticalIcon = ({ 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 EllipsisVerticalIcon_EllipsisVerticalIcon = ({ size = 16, width = size, he
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M10 18.1494C10.0001 17.2935 10.6938 16.5996 11.5498 16.5996C12.4058 16.5996 13.0995 17.2935 13.0996 18.1494C13.0996 19.0055 12.4058 19.6992 11.5498 19.6992C10.6938 19.6992 10 19.0055 10 18.1494ZM10 11.8496C10.0002 10.9938 10.6939 10.2998 11.5498 10.2998C12.4057 10.2998 13.0994 10.9938 13.0996 11.8496C13.0996 12.7057 12.4058 13.4004 11.5498 13.4004C10.6938 13.4004 10 12.7057 10 11.8496ZM10 5.5498C10.0003 4.69398 10.6939 4 11.5498 4C12.4057 4 13.0994 4.69398 13.0996 5.5498C13.0996 6.40585 12.4058 7.10059 11.5498 7.10059C10.6938 7.10059 10 6.40585 10 5.5498Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/EmptyIcon.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 EmptyIcon_EmptyIcon = ({ 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,
@@ -15,27 +14,27 @@ const EmptyIcon_EmptyIcon = ({ size = 16, width = size, height = size, color = '
             /*#__PURE__*/ jsx("path", {
                 opacity: 0.1,
                 d: "M1.93335 20.9998C1.93335 21.3535 3.05716 21.6926 5.05754 21.9426C7.05793 22.1927 9.77104 22.3332 12.6 22.3332C15.429 22.3332 18.1421 22.1927 20.1425 21.9426C22.1429 21.6926 23.2667 21.3535 23.2667 20.9998C23.2667 20.6462 22.1429 20.3071 20.1425 20.057C18.1421 19.807 15.429 19.6665 12.6 19.6665C9.77104 19.6665 7.05793 19.807 5.05754 20.057C3.05716 20.3071 1.93335 20.6462 1.93335 20.9998Z",
-                fill: fill
+                fill: _color
             }),
             /*#__PURE__*/ jsx("path", {
                 opacity: 0.5,
                 d: "M23.2663 18.5465C22.8663 18.6532 22.773 18.7332 22.6663 19.1465C22.5597 18.7465 22.4797 18.6532 22.0663 18.5465C22.4663 18.4398 22.5597 18.3465 22.6663 17.9465C22.773 18.3465 22.853 18.4398 23.2663 18.5465ZM20.4663 3.19984C19.4263 3.4665 19.213 3.69317 18.933 4.73317C18.6663 3.69317 18.4397 3.47984 17.3997 3.19984C18.4397 2.93317 18.653 2.7065 18.933 1.6665C19.1997 2.69317 19.4263 2.91984 20.4663 3.19984Z",
-                fill: fill
+                fill: _color
             }),
             /*#__PURE__*/ jsx("path", {
                 opacity: 0.2,
                 d: "M0.733398 4.02687V4.14687L1.70673 5.0802L5.50673 3.22687L2.08007 5.42687V6.50687L2.62673 5.97353V5.9602L2.64007 5.97353L3.18673 6.50687L6.1334 2.9202V2.78687L0.733398 4.02687Z",
-                fill: fill
+                fill: _color
             }),
             /*#__PURE__*/ jsx("path", {
                 opacity: 0.5,
                 d: "M22.8797 9.21319C22.573 8.06652 21.0663 7.38652 18.6397 7.29319C16.8663 4.86652 13.733 3.63985 10.653 4.46652C7.57299 5.29319 5.49299 7.93319 5.18632 10.9199C3.13299 12.2132 2.17299 13.5599 2.49299 14.7065C2.81299 15.9199 4.43965 16.5999 7.06632 16.6399C8.89299 18.6532 11.7463 19.6132 14.5463 18.8532C17.3463 18.0932 19.3463 15.8399 19.9063 13.1732C22.1463 11.8265 23.1997 10.4265 22.8797 9.21319ZM10.9063 5.37319C14.373 4.43985 17.9597 6.50652 18.9063 9.97319C19.1463 10.8532 19.1863 11.7465 19.0663 12.5999C17.533 13.4665 15.5463 14.2532 13.4663 14.8132C11.373 15.3732 9.26632 15.6932 7.50632 15.7199C6.97299 15.0399 6.55965 14.2532 6.31965 13.3732C5.35965 9.89319 7.42632 6.30652 10.9063 5.37319ZM3.38632 14.4665C3.22632 13.8532 3.89299 12.9599 5.15965 12.0532C5.18632 12.5599 5.26632 13.0799 5.39965 13.5999C5.59965 14.3599 5.91965 15.0532 6.31965 15.6799C4.65299 15.5599 3.55965 15.1199 3.38632 14.4665ZM14.293 17.9599C12.133 18.5465 9.93299 17.9599 8.35965 16.6132C10.013 16.5199 11.8263 16.2132 13.693 15.7065C15.5597 15.1999 17.2797 14.5599 18.7597 13.8132C18.0663 15.7732 16.453 17.3865 14.293 17.9599ZM20.053 11.9865C20.0797 11.2399 19.9997 10.4799 19.7997 9.73319C19.6663 9.21319 19.4663 8.73319 19.2397 8.27985C20.7863 8.42652 21.813 8.85319 21.9863 9.46652C22.1463 10.1065 21.4263 11.0399 20.053 11.9865Z",
-                fill: fill
+                fill: _color
             }),
             /*#__PURE__*/ jsx("path", {
                 opacity: 0.2,
                 d: "M11.1865 6.41338C8.29319 7.20005 6.57319 10.1867 7.35985 13.08C8.14652 15.9734 11.1332 17.6934 14.0265 16.9067C16.9199 16.12 18.6399 13.1334 17.8532 10.24C17.0665 7.34672 14.0799 5.64005 11.1865 6.41338ZM14.6932 8.78672C14.7599 9.04005 14.6132 9.29338 14.3599 9.36005C14.1065 9.42672 13.8532 9.28005 13.7865 9.02672C13.7199 8.77338 13.8665 8.52005 14.1199 8.45338C14.3732 8.40005 14.6265 8.54672 14.6932 8.78672Z",
-                fill: fill
+                fill: _color
             })
         ]
     });

package/dist/web/ExpandIcon.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 ExpandIcon_ExpandIcon = ({ 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 ExpandIcon_ExpandIcon = ({ size = 16, width = size, height = size, color =
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M20.1514 13.9697C20.5711 13.97 20.9111 14.3111 20.9111 14.7314V20.1855C20.9108 20.6056 20.5708 20.9469 20.1514 20.9473H14.71C14.2904 20.9471 13.9506 20.6056 13.9502 20.1855C13.9502 19.7651 14.2902 19.424 14.71 19.4238H19.3916V14.7314C19.3916 14.3109 19.7314 13.9697 20.1514 13.9697ZM20.1865 3.05273C20.6062 3.05298 20.9472 3.39511 20.9473 3.81543V9.26953C20.9471 9.47133 20.867 9.66584 20.7246 9.80859C20.6543 9.87912 20.5705 9.93536 20.4785 9.97363C20.3866 10.0118 20.2871 10.0311 20.1875 10.0312C20.088 10.0312 19.9875 10.0117 19.8955 9.97363C19.8036 9.93544 19.7197 9.87896 19.6494 9.80859C19.507 9.66567 19.4268 9.47124 19.4268 9.26953V5.66309L5.68359 19.3945H9.25488C9.67462 19.3948 10.0146 19.7359 10.0146 20.1562C10.0143 20.5763 9.67443 20.9177 9.25488 20.918H3.81348C3.39389 20.9177 3.05402 20.5764 3.05371 20.1562V14.7021C3.05371 14.5002 3.13386 14.306 3.27637 14.1631C3.34676 14.0925 3.43039 14.0363 3.52246 13.998C3.61452 13.9599 3.7138 13.9405 3.81348 13.9404C4.01492 13.9406 4.20915 14.0204 4.35156 14.1631C4.49383 14.3061 4.57427 14.5005 4.57422 14.7021V18.2637L18.2734 4.57715H14.7461C14.3263 4.57714 13.9866 4.23574 13.9863 3.81543C13.9864 3.39496 14.3262 3.05274 14.7461 3.05273H20.1865ZM9.26953 3.06055C9.68927 3.06083 10.0293 3.40288 10.0293 3.82324C10.0288 4.24316 9.68895 4.58468 9.26953 4.58496H4.58887V9.27734C4.58864 9.47895 4.50846 9.67277 4.36621 9.81543C4.29577 9.8861 4.2113 9.94217 4.11914 9.98047C4.02713 10.0186 3.92775 10.039 3.82812 10.0391C3.72858 10.039 3.62907 10.0186 3.53711 9.98047C3.44523 9.94226 3.36131 9.88583 3.29102 9.81543C3.14868 9.67261 3.06854 9.47889 3.06836 9.27734V3.82324C3.06836 3.40285 3.40835 3.06079 3.82812 3.06055H9.26953Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/ExternalLinkIcon.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 ExternalLinkIcon_ExternalLinkIcon = ({ 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 ExternalLinkIcon_ExternalLinkIcon = ({ size = 16, width = size, height = s
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M10.6254 3.10303C11.0999 3.10321 11.4846 3.48703 11.4848 3.96143C11.4848 4.436 11.1 4.82062 10.6254 4.8208H4.81978V19.1851H19.186V13.4136C19.1862 12.939 19.5708 12.5552 20.0454 12.5552C20.5196 12.5556 20.9036 12.9393 20.9038 13.4136V20.0444C20.9036 20.5187 20.5196 20.9024 20.0454 20.9028H3.9604C3.48591 20.9027 3.1022 20.5189 3.10201 20.0444V3.96143C3.10222 3.48699 3.48592 3.10315 3.9604 3.10303H10.6254ZM20.1196 3.104V3.10303H20.1372L20.1254 3.1958L20.1372 3.104L20.1879 3.10986L20.2202 3.11377L20.2251 3.11963C20.2588 3.12605 20.291 3.13304 20.3168 3.14111L20.3159 3.14209L20.435 3.18896L20.4487 3.1958L20.4545 3.20166L20.5415 3.25439L20.5444 3.25635C20.5433 3.25554 20.5423 3.25464 20.5434 3.25537C20.5441 3.25589 20.5461 3.25769 20.5483 3.25928C20.5496 3.26024 20.5519 3.26226 20.5542 3.26416L20.5961 3.29443L20.603 3.30029H20.602L20.604 3.30225C20.6073 3.30555 20.6118 3.30963 20.6176 3.31494C20.6231 3.31992 20.631 3.32737 20.6381 3.33447L20.6469 3.34326H20.646L20.687 3.3833L20.6938 3.39209L20.6948 3.39404C20.6981 3.39812 20.7015 3.40203 20.7045 3.40576C20.7093 3.41153 20.7133 3.41747 20.7182 3.42334L20.7192 3.42529L20.728 3.43408H20.727L20.728 3.43604L20.727 3.43506L20.7915 3.53271L20.7944 3.5376L20.7954 3.53955L20.8471 3.64795L20.853 3.66455V3.66943C20.8624 3.69606 20.8702 3.72321 20.8774 3.75146C20.8818 3.76142 20.8845 3.76935 20.8852 3.77295C20.8855 3.77422 20.885 3.77567 20.8852 3.77686L20.9018 3.89209V3.90869C20.9035 3.92863 20.9038 3.94832 20.9038 3.96143V9.25928C20.9038 9.7337 20.5197 10.1182 20.0454 10.1187C19.5706 10.1187 19.186 9.73397 19.186 9.25928V6.03467L12.6127 12.6089V12.6099C12.444 12.7761 12.2244 12.8597 12.0053 12.8599C11.7842 12.8599 11.5641 12.776 11.3969 12.6089C11.0603 12.2746 11.0608 11.7311 11.3969 11.395L17.9711 4.81885H14.6997C14.225 4.8188 13.8413 4.43414 13.8413 3.95947C13.8414 3.48492 14.2251 3.10112 14.6997 3.10107H20.0766C20.088 3.1011 20.1028 3.10239 20.1196 3.104Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/EyeIcon.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 EyeIcon_EyeIcon = ({ 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 EyeIcon_EyeIcon = ({ size = 16, width = size, height = size, color = 'curr
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M12 4.33435C16.5926 4.33435 20.4135 7.63911 21.215 12C20.4144 16.361 16.5926 19.6657 12 19.6657C7.40741 19.6657 3.58649 16.361 2.785 12C3.58564 7.63911 7.40741 4.33435 12 4.33435ZM12 17.9622C13.7371 17.9619 15.4226 17.3718 16.7807 16.2887C18.1388 15.2056 19.089 13.6935 19.4757 12C19.0876 10.3079 18.1368 8.79748 16.7788 7.71579C15.4209 6.6341 13.7361 6.0451 12 6.0451C10.2639 6.0451 8.57914 6.6341 7.2212 7.71579C5.86325 8.79748 4.91246 10.3079 4.52426 12C4.91103 13.6935 5.86122 15.2056 7.2193 16.2887C8.57738 17.3718 10.2629 17.9619 12 17.9622ZM12 15.8329C10.9835 15.8329 10.0086 15.4291 9.28978 14.7103C8.57098 13.9915 8.16716 13.0166 8.16716 12C8.16716 10.9835 8.57098 10.0086 9.28978 9.2898C10.0086 8.57101 10.9835 8.16719 12 8.16719C13.0165 8.16719 13.9914 8.57101 14.7102 9.2898C15.429 10.0086 15.8328 10.9835 15.8328 12C15.8328 13.0166 15.429 13.9915 14.7102 14.7103C13.9914 15.4291 13.0165 15.8329 12 15.8329ZM12 14.1294C12.2796 14.1294 12.5565 14.0743 12.8149 13.9673C13.0732 13.8603 13.308 13.7034 13.5057 13.5057C13.7034 13.308 13.8603 13.0732 13.9673 12.8149C14.0743 12.5566 14.1294 12.2797 14.1294 12C14.1294 11.7204 14.0743 11.4435 13.9673 11.1852C13.8603 10.9268 13.7034 10.6921 13.5057 10.4943C13.308 10.2966 13.0732 10.1398 12.8149 10.0328C12.5565 9.92575 12.2796 9.87068 12 9.87068C11.4353 9.87068 10.8937 10.095 10.4943 10.4943C10.095 10.8937 9.87065 11.4353 9.87065 12C9.87065 12.5648 10.095 13.1064 10.4943 13.5057C10.8937 13.905 11.4353 14.1294 12 14.1294Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/EyeOffIcon.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 EyeOffIcon = ({ 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 EyeOffIcon = ({ size = 16, width = size, height = size, color = 'currentCo
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M12.0008 19.7182C7.40817 19.7182 3.58726 16.3905 2.78577 11.9994C3.15204 10.0016 4.14994 8.17672 5.63059 6.79684L3.56852 4.72218C3.4087 4.56137 3.31886 4.34321 3.31878 4.1157C3.3187 3.88819 3.40838 3.66996 3.56809 3.50903C3.7278 3.3481 3.94446 3.25765 4.1704 3.25757C4.39634 3.25749 4.61306 3.34779 4.77288 3.50861L20.433 19.2783C20.5927 19.4392 20.6824 19.6574 20.6823 19.8849C20.6822 20.1124 20.5924 20.3306 20.4326 20.4914C20.2728 20.6522 20.056 20.7425 19.8301 20.7424C19.6042 20.7424 19.3875 20.6519 19.2278 20.491L17.0107 18.2585C15.5127 19.2152 13.7747 19.7216 12.0008 19.7182ZM6.83495 8.01128C5.67744 9.07099 4.8711 10.4631 4.52502 11.9994C4.79102 13.1713 5.32503 14.2645 6.08457 15.1921C6.8441 16.1196 7.80817 16.8557 8.90004 17.3419C9.99191 17.8282 11.1814 18.051 12.3739 17.9927C13.5664 17.9345 14.7289 17.5967 15.7689 17.0063L14.0415 15.267C13.3062 15.7334 12.4353 15.9344 11.5717 15.8369C10.7081 15.7394 9.90296 15.3493 9.28845 14.7305C8.67395 14.1117 8.28651 13.301 8.1897 12.4314C8.09288 11.5618 8.29244 10.6848 8.75563 9.94443L6.83495 8.01128ZM12.7793 13.996L10.0179 11.2155C9.86636 11.6039 9.83069 12.0285 9.91528 12.4371C9.99987 12.8456 10.201 13.2205 10.4941 13.5156C10.7872 13.8107 11.1595 14.0133 11.5652 14.0985C11.971 14.1836 12.3926 14.1477 12.7784 13.9951L12.7793 13.996ZM18.4749 14.4454L18.6793 14.0792C19.0443 13.4287 19.3129 12.7281 19.4765 11.9994C19.0389 10.0697 17.8822 8.38294 16.2453 7.28715C14.6084 6.19137 12.6161 5.77025 10.6797 6.11072C10.6209 6.12101 10.4966 6.14846 10.3058 6.19306C10.1949 6.22236 10.0793 6.22895 9.96588 6.21242C9.85243 6.19589 9.74343 6.15659 9.64535 6.09684C9.54728 6.03709 9.46211 5.95812 9.39492 5.8646C9.32773 5.77108 9.27987 5.66492 9.2542 5.55243C9.22852 5.43993 9.22555 5.32339 9.24545 5.20972C9.26535 5.09604 9.30772 4.98755 9.37006 4.89068C9.43239 4.79381 9.51341 4.71053 9.60831 4.64579C9.70321 4.58104 9.81006 4.53615 9.92252 4.51377C10.6045 4.35843 11.3016 4.28019 12.0008 4.28049C16.5934 4.28049 20.4143 7.60818 21.2158 11.9994C21.0164 13.0907 20.6265 14.1378 20.0642 15.0921C20.0163 15.1708 19.9628 15.2459 19.9041 15.3168C19.7657 15.4882 19.569 15.6018 19.3521 15.6355C19.1353 15.6692 18.9137 15.6208 18.7304 15.4994C18.5631 15.389 18.4437 15.2188 18.3963 15.0231C18.3489 14.8275 18.377 14.621 18.4749 14.4454Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/FaceIcon.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 FaceIcon_FaceIcon = ({ 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,11 +13,11 @@ const FaceIcon_FaceIcon = ({ size = 16, width = size, height = size, color = 'cu
         children: [
             /*#__PURE__*/ jsx("path", {
                 d: "M12.0001 20.4917C7.31005 20.4917 3.50842 16.6901 3.50842 12C3.50842 7.30993 7.31005 3.5083 12.0001 3.5083C16.6899 3.5083 20.4916 7.30993 20.4916 12C20.4916 16.6901 16.6899 20.4917 12.0001 20.4917ZM12.0001 4.56976C7.90288 4.56976 4.56989 7.90276 4.56989 12C4.56989 16.097 7.90288 19.4303 12.0001 19.4303C16.0971 19.4303 19.4301 16.097 19.4301 12C19.4301 7.90276 16.0971 4.56976 12.0001 4.56976ZM11.9723 17.3315C11.951 17.3315 11.9293 17.332 11.9078 17.332C8.66607 17.332 7.3066 14.4069 7.25008 14.2814C7.12934 14.0139 7.24796 13.6999 7.51492 13.5792C7.7824 13.459 8.09527 13.5771 8.21654 13.8424C8.26219 13.9425 9.3616 16.2705 11.9099 16.2705C11.9266 16.2705 11.9431 16.27 11.9598 16.27C14.6684 16.2384 15.7543 13.8703 15.7651 13.8467C15.8838 13.5792 16.1964 13.4574 16.4657 13.5781C16.7332 13.6973 16.8539 14.011 16.7343 14.279C16.6799 14.4016 15.3536 17.2917 11.9723 17.3315ZM14.6453 11.4666C14.0602 11.4666 13.5865 10.9921 13.5865 10.4075C13.5865 9.82348 14.0602 9.34927 14.6453 9.34927C15.2302 9.34927 15.7041 9.82348 15.7041 10.4075C15.7041 10.9921 15.2302 11.4666 14.6453 11.4666ZM9.33798 11.4666C8.75285 11.4666 8.27917 10.9921 8.27917 10.4075C8.27917 9.82348 8.75285 9.34927 9.33798 9.34927C9.92285 9.34927 10.3968 9.82348 10.3968 10.4075C10.3968 10.9921 9.92285 11.4666 9.33798 11.4666Z",
-                fill: fill
+                fill: _color
             }),
             /*#__PURE__*/ jsx("path", {
                 d: "M20.4166 12.0005C20.4166 7.35199 16.6488 3.58376 12.0006 3.5835C7.35196 3.5835 3.58362 7.35183 3.58362 12.0005C3.58388 16.6489 7.35212 20.4165 12.0006 20.4165C16.6486 20.4162 20.4164 16.6488 20.4166 12.0005ZM19.3551 12.0005C19.3551 7.94482 16.056 4.64528 12.0006 4.64502C7.94478 4.64502 4.64514 7.94466 4.64514 12.0005C4.6454 16.0558 7.94495 19.355 12.0006 19.355C16.0558 19.3547 19.3548 16.0557 19.3551 12.0005ZM15.6969 13.8149C15.8327 13.5106 16.1896 13.3716 16.4967 13.5093C16.8017 13.6453 16.9387 14.0033 16.8024 14.3091C16.7466 14.4348 15.403 17.3663 11.9733 17.4067H11.9078C10.262 17.4067 9.09374 16.6636 8.33167 15.9067C7.57059 15.1509 7.21152 14.3792 7.18127 14.312C7.04378 14.0069 7.17952 13.649 7.48401 13.5112C7.78901 13.3742 8.1463 13.5082 8.28479 13.811C8.30559 13.8566 8.58727 14.4549 9.17737 15.0405C9.76674 15.6254 10.6609 16.1958 11.9098 16.1958C11.9173 16.1958 11.925 16.195 11.9332 16.1948C11.9411 16.1947 11.95 16.1948 11.9586 16.1948C14.6185 16.1638 15.6868 13.837 15.6969 13.8149ZM16.4352 13.647C16.204 13.5433 15.9355 13.6477 15.8336 13.8774V13.8784C15.8183 13.9118 14.7131 16.3131 11.9606 16.3452H11.9098C10.6105 16.3452 9.68068 15.7511 9.0719 15.147C8.46404 14.5437 8.17291 13.928 8.14807 13.8735C8.04391 13.6458 7.7754 13.5446 7.54553 13.6479C7.31665 13.7517 7.21447 14.0209 7.31799 14.2505C7.34426 14.3088 7.69413 15.0623 8.43713 15.8003C9.17935 16.5374 10.3119 17.2573 11.9078 17.2573C11.918 17.2573 11.9283 17.2565 11.9391 17.2563C11.9495 17.2562 11.9605 17.2564 11.9713 17.2563C15.304 17.2171 16.6126 14.3681 16.6656 14.2485L16.6949 14.1606C16.7342 13.9832 16.6628 13.7985 16.5153 13.6929L16.4352 13.647ZM10.3219 10.4077C10.3219 9.86508 9.88098 9.42432 9.33752 9.42432C8.79402 9.42456 8.35413 9.86522 8.35413 10.4077C8.35422 10.9507 8.79413 11.3918 9.33752 11.3921C9.88088 11.3921 10.3218 10.9509 10.3219 10.4077ZM15.6295 10.4077C15.6295 9.86508 15.1886 9.42432 14.6451 9.42432C14.1015 9.4244 13.6617 9.86512 13.6617 10.4077C13.6618 10.9508 14.1016 11.392 14.6451 11.3921C15.1885 11.3921 15.6294 10.9509 15.6295 10.4077ZM19.5055 12.0005C19.5052 16.1385 16.1386 19.5051 12.0006 19.5054C7.8621 19.5054 4.49501 16.1387 4.49475 12.0005C4.49475 7.86182 7.86194 4.49463 12.0006 4.49463C16.1388 4.49489 19.5055 7.86198 19.5055 12.0005ZM20.567 12.0005C20.5668 16.7316 16.7315 20.5666 12.0006 20.5669C7.26927 20.5669 3.43349 16.7318 3.43323 12.0005C3.43323 7.26899 7.26911 3.43311 12.0006 3.43311C16.7316 3.43337 20.567 7.26915 20.567 12.0005ZM10.4713 10.4077C10.4712 11.0336 9.96379 11.5415 9.33752 11.5415C8.71119 11.5413 8.20383 11.0335 8.20374 10.4077C8.20374 9.78237 8.71118 9.27417 9.33752 9.27393C9.9638 9.27393 10.4713 9.78221 10.4713 10.4077ZM15.7789 10.4077C15.7788 11.0336 15.2714 11.5415 14.6451 11.5415C14.0187 11.5414 13.5114 11.0336 13.5114 10.4077C13.5114 9.78228 14.0187 9.27401 14.6451 9.27393C15.2714 9.27393 15.7789 9.78221 15.7789 10.4077Z",
-                fill: fill
+                fill: _color
             })
         ]
     });

package/dist/web/FaceSadIcon.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 FaceSadIcon_FaceSadIcon = ({ 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 FaceSadIcon_FaceSadIcon = ({ size = 16, width = size, height = size, color
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M12 1.25293C17.9353 1.25293 22.7471 6.06467 22.7471 12C22.7471 17.9353 17.9353 22.7471 12 22.7471C6.06467 22.7471 1.25293 17.9353 1.25293 12C1.25293 6.06467 6.06467 1.25293 12 1.25293ZM12 2.80176C6.9198 2.80176 2.80176 6.9198 2.80176 12C2.80176 17.0802 6.9198 21.1982 12 21.1982C17.0802 21.1982 21.1982 17.0802 21.1982 12C21.1982 6.9198 17.0802 2.80176 12 2.80176ZM9.16113 15.1162C10.8682 14.4212 12.8323 14.392 14.5615 15.0312L14.5645 15.0303L14.6279 15.0547L14.9707 15.1914C15.7716 15.5285 16.5731 15.9863 17.1973 16.6045C17.4626 16.8657 17.4614 17.3079 17.1982 17.5713C16.9339 17.8356 16.4998 17.8346 16.2334 17.5723L16.2324 17.5713C16.2005 17.5394 16.1721 17.5169 16.1279 17.4766L15.9863 17.3564L15.9004 17.2891L15.8965 17.2861C15.8902 17.281 15.8843 17.2763 15.8799 17.2725C15.4899 16.9866 15.0765 16.7346 14.6426 16.5332H14.6416C14.5834 16.5058 14.5389 16.4824 14.4893 16.4619C14.4816 16.4588 14.4585 16.4494 14.4395 16.4414V16.4424C14.3564 16.4085 14.2755 16.3754 14.1953 16.3457C14.0142 16.279 13.8324 16.2166 13.6494 16.167H13.6484C13.4348 16.1073 13.2187 16.057 13 16.0195L12.9971 16.0186C12.9747 16.0144 12.9508 16.0108 12.9238 16.0068C12.8989 16.0031 12.871 15.9981 12.8428 15.9932C12.8381 15.9925 12.8335 15.9919 12.8291 15.9912C12.819 15.9901 12.8004 15.9891 12.7695 15.9854V15.9844C12.6575 15.9716 12.5464 15.9602 12.4395 15.9541L12.4375 15.9531C11.5175 15.8903 10.7709 15.9877 9.90234 16.2949L9.90039 16.2959C9.79897 16.3297 9.70269 16.3672 9.60156 16.4082H9.60059C9.59104 16.4121 9.58261 16.4144 9.57617 16.417L9.57715 16.418C9.57469 16.419 9.57147 16.4186 9.56836 16.4199L9.56934 16.4209C9.54724 16.4311 9.52563 16.4405 9.50586 16.4492C9.48574 16.4581 9.4666 16.4667 9.44727 16.4756H9.44629C9.2955 16.5447 9.15122 16.6178 9.00684 16.6963L9.00586 16.6953C8.75446 16.8336 8.51303 16.9854 8.28125 17.1514H8.28027C8.23848 17.1809 8.19588 17.2121 8.15332 17.2441L8.15234 17.2461C8.14223 17.2552 8.13332 17.2638 8.12598 17.2695C8.11364 17.2792 8.10785 17.283 8.10059 17.2891C8.07047 17.3144 8.03989 17.3399 8.00977 17.3652C7.97945 17.3908 7.94929 17.4168 7.91895 17.4424L7.91797 17.4434L7.82227 17.3271L7.91699 17.4434C7.86496 17.4862 7.8161 17.5298 7.77441 17.5742L7.77246 17.5762C7.50887 17.8482 7.06294 17.8362 6.80176 17.5752V17.5742C6.53248 17.3076 6.54435 16.874 6.7998 16.6104H6.80078C7.45278 15.9419 8.32045 15.4641 9.16016 15.1172L9.16113 15.1162ZM15.9326 17.2979C15.9363 17.2989 15.9401 17.3009 15.9443 17.3018C15.9512 17.3032 15.9842 17.3104 16.0234 17.2969C16.0273 17.2955 16.0311 17.2919 16.0352 17.29L16.0781 17.2373C16.0585 17.2221 16.0391 17.2066 16.0195 17.1914L15.9326 17.2979ZM16.0381 17.2891C16.056 17.2805 16.0748 17.2679 16.0908 17.248C16.0869 17.2448 16.0831 17.2415 16.0791 17.2383L16.0781 17.2373L16.0381 17.2891ZM15.9424 17.2344L15.9893 17.168C15.9875 17.1665 15.9858 17.1653 15.9844 17.1641L15.9424 17.2344ZM7.3291 8.33398C7.63524 8.33398 7.93702 8.45951 8.1543 8.67676C8.37138 8.89397 8.49604 9.19502 8.49609 9.50098C8.49609 9.80714 8.3716 10.1089 8.1543 10.3262C7.93705 10.5434 7.63527 10.668 7.3291 10.668C7.02314 10.6679 6.7221 10.5433 6.50488 10.3262C6.28761 10.1089 6.16211 9.80714 6.16211 9.50098C6.16218 9.19563 6.28726 8.8907 6.50586 8.67578C6.72299 8.45916 7.0235 8.33405 7.3291 8.33398ZM16.6729 8.33398C16.979 8.33398 17.2808 8.45947 17.498 8.67676C17.7151 8.89396 17.8398 9.19502 17.8398 9.50098C17.8398 9.80713 17.7153 10.1089 17.498 10.3262C17.2808 10.5434 16.979 10.668 16.6729 10.668C16.3669 10.6679 16.0658 10.5433 15.8486 10.3262C15.6314 10.1089 15.5059 9.80714 15.5059 9.50098C15.5059 9.19563 15.631 8.8907 15.8496 8.67578C16.0667 8.45916 16.3672 8.33405 16.6729 8.33398Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/FaqIcon.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 FaqIcon_FaqIcon = ({ 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 FaqIcon_FaqIcon = ({ size = 16, width = size, height = size, color = 'curr
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M18.6699 1.73608C20.0923 1.73608 21.2498 2.89299 21.25 4.31519V16.115C21.2498 17.5373 20.0922 18.6941 18.6699 18.6941H13.6748L6.86914 22.1892C6.77268 22.2388 6.66769 22.2634 6.5625 22.2634C6.44093 22.2634 6.31911 22.231 6.21191 22.1658C6.01189 22.0436 5.88978 21.8258 5.88965 21.5916V18.6941H5.33008C3.90776 18.6941 2.75019 17.5373 2.75 16.115V4.31519C2.75014 2.89296 3.90773 1.73608 5.33008 1.73608H18.6699ZM5.33008 3.08179C4.64961 3.08179 4.09584 3.63487 4.0957 4.31519V16.115C4.09589 16.7954 4.64964 17.3484 5.33008 17.3484H6.5625C6.93382 17.3486 7.23421 17.65 7.23438 18.0212V20.49L13.2051 17.4236C13.3001 17.3747 13.4058 17.3484 13.5127 17.3484H18.6699C19.3504 17.3484 19.9041 16.7954 19.9043 16.115V4.31519C19.9042 3.63484 19.3504 3.08179 18.6699 3.08179H5.33008ZM11.9355 13.5193C12.4569 13.5193 12.8809 13.9432 12.8809 14.4646C12.8809 14.986 12.4569 15.4099 11.9355 15.4099C11.4142 15.4099 10.9902 14.986 10.9902 14.4646C10.9902 13.9432 11.4142 13.5193 11.9355 13.5193ZM12 5.48901C13.6849 5.48901 15.0555 6.85977 15.0557 8.54468C15.0557 9.76936 14.3287 10.8696 13.2021 11.3523L13.1885 11.3601C12.867 11.4905 12.6621 11.7938 12.6621 12.1355C12.6621 12.1814 12.6579 12.2225 12.6494 12.2605C12.5915 12.5708 12.3181 12.7976 12 12.7976C11.635 12.7976 11.3379 12.5005 11.3379 12.1355C11.3379 11.2646 11.8566 10.4833 12.6592 10.1453C13.3115 9.87484 13.7314 9.24724 13.7314 8.54468C13.7314 7.58981 12.9549 6.81323 12 6.81323C11.0451 6.81324 10.2686 7.58984 10.2686 8.54468C10.2686 8.90962 9.97139 9.20668 9.60645 9.20679C9.24143 9.20679 8.94434 8.90969 8.94434 8.54468C8.94442 6.85979 10.3151 5.48902 12 5.48901Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/FileTextIcon.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 FileTextIcon_FileTextIcon = ({ 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 FileTextIcon_FileTextIcon = ({ size = 16, width = size, height = size, col
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M13.4404 2C13.6381 2.00002 13.8262 2.08155 13.9639 2.22461L19.9521 8.41211L20.0439 8.52734C20.1241 8.65101 20.1699 8.79745 20.1699 8.94824V19.4717C20.1699 20.8646 19.0755 21.9998 17.7188 22H7.4502C6.09335 21.9998 5 20.8645 5 19.4717V4.52832C5.00015 3.13558 6.09348 2.00019 7.4502 2H13.4404ZM7.4502 3.52051C6.91148 3.52066 6.47876 3.94762 6.47852 4.46973V19.54L6.48242 19.6367C6.5323 20.1138 6.94517 20.4891 7.4502 20.4893H17.7188C18.2237 20.4891 18.6366 20.1138 18.6865 19.6367L18.6904 19.54V9.38086H15.1514C13.7995 9.38074 12.7012 8.3084 12.7012 6.98145V3.52051H7.4502ZM15.3008 16.0762C15.6365 16.1475 15.8904 16.4561 15.8906 16.8203L15.875 16.9727C15.8158 17.2679 15.5885 17.5032 15.3008 17.5645L15.1523 17.5801H10.0176C9.66173 17.58 9.36398 17.3171 9.29492 16.9727L9.2793 16.8203C9.2796 16.404 9.61102 16.0607 10.0176 16.0605H15.1523L15.3008 16.0762ZM12.7334 12.541C13.0691 12.6122 13.3229 12.9199 13.3232 13.2842L13.3076 13.4375C13.2483 13.7327 13.0212 13.9682 12.7334 14.0293L12.585 14.0449H10.0176C9.66182 14.0448 9.36408 13.7819 9.29492 13.4375L9.2793 13.2842C9.27969 12.8679 9.61111 12.5255 10.0176 12.5254H12.585L12.7334 12.541ZM14.1768 7.17969C14.1768 7.73922 14.6153 8.1875 15.1494 8.1875H17.6504L14.1768 4.59863V7.17969Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/FilterIcon.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 FilterIcon_FilterIcon = ({ 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 FilterIcon_FilterIcon = ({ size = 16, width = size, height = size, color =
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M18.16 3.16455C19.1969 3.32251 19.6838 4.61382 18.9237 5.41846L13.2616 11.4106C13.2671 11.4594 13.2714 11.5088 13.2714 11.5591V18.8013C13.2713 19.8016 12.2178 20.4526 11.3231 20.0054L8.63171 18.6597C8.17606 18.4316 7.88856 17.9651 7.88855 17.4556V11.5591C7.88856 11.5092 7.89298 11.4601 7.89832 11.4116L2.23621 5.41846C1.47606 4.61381 1.96295 3.32249 2.99988 3.16455L3.21375 3.14893H17.9462L18.16 3.16455ZM21.3768 17.9526C21.7484 17.9526 22.0495 18.254 22.0497 18.6255C22.0497 18.9971 21.7484 19.2983 21.3768 19.2983H15.994C15.6225 19.2982 15.3212 18.997 15.3212 18.6255C15.3213 18.2541 15.6226 17.9528 15.994 17.9526H21.3768ZM9.23621 12.8276L9.23425 12.8247V17.4556L11.9257 18.8013V11.5591H9.23621V12.8276ZM21.3768 15.2603C21.7484 15.2603 22.0496 15.5616 22.0497 15.9331C22.0497 16.3047 21.7484 16.606 21.3768 16.606H15.994C15.6225 16.6058 15.3212 16.3046 15.3212 15.9331C15.3212 15.5616 15.6225 15.2604 15.994 15.2603H21.3768ZM21.3768 12.5679C21.7484 12.5679 22.0497 12.8691 22.0497 13.2407C22.0497 13.6123 21.7484 13.9136 21.3768 13.9136H15.994C15.6225 13.9135 15.3212 13.6123 15.3212 13.2407C15.3212 12.8692 15.6225 12.568 15.994 12.5679H21.3768ZM9.23621 10.4771V11.5571H11.9266L11.9276 11.5562V10.4731L17.3202 4.76416H3.83972L9.23621 10.4771Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/FingerprintIcon.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 FingerprintIcon = ({ 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 FingerprintIcon = ({ size = 16, width = size, height = size, color = 'curr
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M2.94511 15.5671C3.35672 15.5671 3.69023 15.9007 3.69023 16.3123V18.448C3.69023 19.477 4.52353 20.3103 5.55254 20.3103H7.68925C8.10065 20.3105 8.4334 20.644 8.4334 21.0554H8.44316C8.4431 21.4668 8.11039 21.8003 7.69902 21.8005H5.55254C3.70033 21.8005 2.20097 20.3002 2.20097 18.448V16.3123C2.20097 15.9008 2.53373 15.5674 2.94511 15.5671ZM21.0564 15.5671C21.4679 15.5673 21.8006 15.9008 21.8006 16.3123V18.448C21.8006 20.3002 20.3012 21.8005 18.449 21.8005H16.3133C15.9017 21.8005 15.5682 21.467 15.5682 21.0554C15.5682 20.6438 15.9017 20.3103 16.3133 20.3103H18.449C19.478 20.3103 20.3113 19.477 20.3113 18.448V16.3123C20.3113 15.9007 20.6448 15.5671 21.0564 15.5671ZM13.3982 14.5623C13.5542 14.2803 13.9101 14.178 14.1922 14.3337C14.4744 14.4897 14.5776 14.8464 14.4217 15.1287L12.8328 18.0037C12.7553 18.1438 12.6278 18.2415 12.4842 18.283C12.3404 18.3242 12.1815 18.3089 12.0398 18.2332H12.0379C11.7559 18.0772 11.6537 17.7203 11.8094 17.4382L13.3982 14.5623ZM12.5428 10.8093C12.8581 10.877 13.0573 11.1915 12.9871 11.5066C12.605 13.2397 11.538 15.4638 10.1365 17.4578V17.4587C10.0566 17.5733 9.94317 17.6489 9.82011 17.6843C9.65563 17.7316 9.47241 17.7043 9.325 17.5974L9.32402 17.5994C9.05813 17.4141 8.99607 17.049 9.18144 16.7859C10.5046 14.9057 11.4992 12.8347 11.8475 11.2537C11.9158 10.9384 12.2304 10.7427 12.5428 10.8093ZM10.2391 6.40112C11.8227 5.78131 13.6121 5.87745 15.0281 6.65991C16.314 7.37062 17.2451 8.53981 17.6521 9.9519C18.059 11.3642 17.8931 12.8504 17.1824 14.1365L15.4754 17.2214C15.3979 17.3615 15.2713 17.4602 15.1277 17.5017C15.0168 17.5331 14.8976 17.532 14.7879 17.4968C14.6781 17.4615 14.5805 17.3937 14.5086 17.3035C14.4368 17.2132 14.3934 17.1029 14.3836 16.988C14.374 16.8734 14.3986 16.7578 14.4539 16.657V16.656L16.157 13.571C16.681 12.6226 16.8303 11.5339 16.5828 10.4851L16.5271 10.2761C16.3711 9.72905 16.1083 9.21707 15.7537 8.77222C15.3991 8.32758 14.9591 7.9583 14.4607 7.68433L14.2518 7.57593C13.1861 7.07131 11.8341 7.03486 10.6648 7.49194C9.54241 7.93109 8.73548 8.75741 8.38554 9.81616V9.81714C8.28222 10.1225 7.95267 10.2884 7.64726 10.1882C7.34115 10.0874 7.17623 9.75401 7.27617 9.44897C7.73901 8.04804 8.79313 6.96642 10.2391 6.40112ZM10.5691 8.74292C11.4975 8.25595 12.7625 8.31727 13.7928 8.88647C15.5146 9.84012 16.1415 12.0156 15.1902 13.7371C15.1126 13.8772 14.9853 13.975 14.8416 14.0164C14.6975 14.0577 14.54 14.0415 14.3953 13.9685L14.3943 13.9695L14.3914 13.9675C14.1093 13.8116 14.0071 13.4548 14.1629 13.1726C14.8019 12.0159 14.3797 10.5514 13.2234 9.91187H13.2225C12.5299 9.52733 11.678 9.47977 11.1092 9.77808L11.1102 9.77905C10.7051 9.99336 10.4698 10.3558 10.4178 10.8777L10.4168 10.8816L10.4119 10.9226L10.4109 10.9285C9.97115 13.2491 9.06096 14.5763 8.36797 15.282C8.14217 15.5111 7.7723 15.5145 7.54277 15.2888C7.31363 15.063 7.30914 14.6922 7.53496 14.4626C7.97084 14.0184 8.74585 13.0087 9.17851 11.1199L9.26054 10.7302C9.35785 9.84397 9.82094 9.1367 10.5691 8.74292ZM6.82988 11.0007C6.93996 10.6965 7.27232 10.5397 7.57695 10.6492C7.8814 10.7589 8.0391 11.0942 7.92851 11.3972V11.3962C7.82277 11.6912 7.70279 11.9746 7.58086 12.238C7.43144 12.5584 7.26618 12.8587 7.09062 13.1335C7.01113 13.26 6.89162 13.3437 6.76054 13.3816C6.60604 13.4261 6.43273 13.4065 6.28593 13.3162L6.28496 13.3142C6.04704 13.1621 5.95616 12.8676 6.05351 12.614L6.10722 12.5076C6.18134 12.3925 6.2526 12.2703 6.32207 12.1433L6.52422 11.7458C6.63124 11.5138 6.7333 11.2646 6.8289 11.0007H6.82988ZM7.68925 2.19995C8.10065 2.20019 8.4334 2.53362 8.4334 2.94507C8.43325 3.3564 8.10056 3.68897 7.68925 3.68921H5.55254C4.52357 3.68921 3.69029 4.52256 3.69023 5.55151V7.68823H3.43535V7.698H3.7C3.69991 8.10936 3.36718 8.44286 2.95586 8.44312C2.54431 8.44312 2.20107 8.10952 2.20097 7.698V5.55151C2.20103 3.69935 3.70036 2.19995 5.55254 2.19995H7.68925ZM18.449 2.19995C20.3012 2.19995 21.8005 3.69935 21.8006 5.55151V7.68823L21.5359 7.698H21.8006C21.8005 8.1094 21.4678 8.44292 21.0564 8.44312C20.6449 8.44312 20.3114 8.10952 20.3113 7.698V5.55151C20.3113 4.52256 19.478 3.68921 18.449 3.68921H16.3133C15.9018 3.68921 15.5683 3.35655 15.5682 2.94507C15.5682 2.53347 15.9017 2.19995 16.3133 2.19995H18.449Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/FlagIcon.js

@@ -1,11 +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 FlagIcon = ({ 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 stroke = props.stroke || _color;
+    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
@@ -14,8 +12,8 @@ const FlagIcon = ({ size = 16, width = size, height = size, color = 'currentColo
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M18.1543 4.48047C18.1094 4.48047 18.0625 4.48633 18.0156 4.49805C17.2734 4.67773 16.5312 4.74805 15.7891 4.74805C13.2637 4.74805 10.7383 3.93945 8.21094 3.93945C7.65039 3.93945 7.0918 3.98633 6.53125 4.08398V3.79688C6.53125 3.49414 6.28711 3.25 5.98438 3.25C5.68164 3.25 5.4375 3.49414 5.4375 3.79688V20.2031C5.4375 20.5059 5.68164 20.75 5.98438 20.75C6.28711 20.75 6.53125 20.5059 6.53125 20.2031V12.834C7.0918 12.7363 7.65039 12.6895 8.21094 12.6895C10.7363 12.6895 13.2617 13.498 15.7891 13.498C16.5312 13.498 17.2734 13.4277 18.0156 13.248C18.3164 13.1758 18.5625 12.8496 18.5625 12.5469V4.89062C18.5625 4.63672 18.3887 4.48047 18.1543 4.48047ZM17.4688 12.248C16.9473 12.3535 16.3945 12.4043 15.7891 12.4043C14.6133 12.4043 13.4277 12.2148 12.1738 12.0137C10.8906 11.8086 9.5625 11.5957 8.21289 11.5957C7.625 11.5957 7.06641 11.6367 6.5332 11.7188V5.18945C7.05664 5.08594 7.61133 5.0332 8.21289 5.0332C9.38867 5.0332 10.5742 5.22266 11.8281 5.42383C13.1113 5.62891 14.4395 5.8418 15.7891 5.8418C16.3809 5.8418 16.9355 5.80078 17.4688 5.71875V12.248Z",
-            fill: fill,
-            stroke: stroke,
+            fill: _color,
+            stroke: _color,
             strokeWidth: 0.2
         })
     });

package/dist/web/FlameFilledIcon.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 FlameFilledIcon_FlameFilledIcon = ({ 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 FlameFilledIcon_FlameFilledIcon = ({ size = 16, width = size, height = siz
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M17.2712 8.43005L15.68 9.96005C15.68 9.96005 15.68 3.84005 10.3762 1.80005C10.3762 1.80005 9.84586 7.41005 7.19397 9.45005C4.54208 11.49 -0.761707 17.61 9.84586 22.2C9.84586 22.2 4.54208 16.59 11.437 12.51C11.437 12.51 10.9066 14.55 13.5585 16.59C16.2104 18.63 13.5585 22.2 13.5585 22.2C13.5585 22.2 26.2876 19.14 17.2712 8.43005Z",
-            fill: fill
+            fill: _color
         })
     });
 };