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

package/dist/web/TradeMainIcon.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 TradeMainIcon = ({ 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 TradeMainIcon = ({ size = 16, width = size, height = size, color = 'curren
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M20.1943 13.2549C20.5958 13.2552 20.9496 13.622 20.9482 14.0713V20.2852C20.9482 20.7318 20.6235 21.0996 20.1924 21.0996H13.7002C13.2681 21.0994 12.9434 20.7319 12.9434 20.2852V14.0713C12.9434 13.6248 13.2679 13.255 13.7002 13.2549H20.1943ZM4.49316 12.584L6.46289 15.5166H5.14648C5.20603 16.6762 5.63581 17.6044 6.3125 18.2705C7.00995 18.957 7.97373 19.3712 9.07129 19.4697H9.07715C9.26392 19.4989 9.43468 19.5948 9.55664 19.7393C9.67835 19.8835 9.74352 20.0672 9.74121 20.2559L9.7373 20.3398C9.69316 20.7559 9.32583 21.0738 8.92383 21.043H8.92188C6.03944 20.7547 3.77919 18.6957 3.68262 15.5166H2.35645L4.32715 12.584L4.41016 12.4609L4.49316 12.584ZM14.4316 19.4971H19.4619V14.8574H14.4316V19.4971ZM15.0752 2.92969H15.0771C17.7472 3.18825 19.8735 4.99051 20.2549 7.76855H21.6436L19.6719 10.7012L19.5889 10.8242L19.5059 10.7012L17.6396 7.92383L17.5342 7.76855H18.7578C18.3846 5.83073 16.8499 4.69609 14.9258 4.50293C14.5463 4.46704 14.2858 4.09952 14.2588 3.72363V3.71582C14.2589 3.25981 14.646 2.89534 15.0752 2.92969ZM10.3242 2.90039C10.7551 2.90044 11.081 3.26791 11.0811 3.71582V9.90039C11.0811 10.3484 10.7552 10.7167 10.3242 10.7168H3.83203C3.40105 10.7168 3.0752 10.3484 3.0752 9.90039V3.71582C3.0753 3.26788 3.40111 2.90041 3.83203 2.90039H10.3242ZM4.56348 9.14258H9.59473V4.47461H4.56348V9.14258Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/TrainIcon.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 TrainIcon_TrainIcon = ({ 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 TrainIcon_TrainIcon = ({ size = 16, width = size, height = size, color = '
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M17.6147 2C18.6058 2.00365 19.555 2.39935 20.2554 3.10059C20.9557 3.80175 21.3505 4.75122 21.353 5.74219V15.4717C21.3498 16.3505 21.042 17.2008 20.4829 17.8789C19.9238 18.5569 19.1477 19.0208 18.2856 19.1914L20.6411 20.5781C20.7387 20.6185 20.8268 20.6797 20.8989 20.7568C20.9711 20.8341 21.0265 20.9261 21.0601 21.0264C21.0936 21.1267 21.1053 21.2337 21.0942 21.3389C21.0831 21.4439 21.0493 21.5457 20.9956 21.6367C20.942 21.7276 20.8692 21.8057 20.7827 21.8662C20.696 21.9268 20.5967 21.9682 20.4927 21.9873C20.3887 22.0064 20.2817 22.0033 20.1792 21.9775C20.0767 21.9518 19.9806 21.9039 19.8979 21.8379L15.3667 19.2188H8.6333L4.14307 21.7705C4.0607 21.8241 3.96758 21.8593 3.87061 21.875C3.77368 21.8907 3.67462 21.886 3.57959 21.8613C3.48456 21.8366 3.39583 21.7924 3.31885 21.7314C3.261 21.6856 3.21026 21.6314 3.16943 21.5703L3.09521 21.4434C3.06193 21.3781 3.03864 21.3079 3.02686 21.2354C3.01113 21.1385 3.01587 21.0393 3.04053 20.9443C3.06521 20.8495 3.10961 20.7605 3.17041 20.6836C3.23137 20.6066 3.30819 20.5429 3.39502 20.4971L5.75146 19.1377C4.88555 18.9895 4.09947 18.5405 3.53174 17.8701C2.96403 17.1996 2.65041 16.3502 2.64697 15.4717V5.74219C2.64949 4.75129 3.04443 3.80174 3.74463 3.10059C4.44507 2.3993 5.39507 2.00359 6.38623 2H17.6147ZM4.14307 12.875V15.4717C4.14308 16.0686 4.37843 16.6412 4.79834 17.0654C5.21835 17.4897 5.78927 17.7313 6.38623 17.7373H17.5923C18.193 17.7372 18.769 17.498 19.1938 17.0732C19.6186 16.6484 19.8579 16.0725 19.8579 15.4717V12.875H4.14307ZM7.354 13.8154C7.60887 13.7099 7.88911 13.6816 8.15967 13.7354C8.43031 13.7892 8.67935 13.9221 8.87451 14.1172C9.06967 14.3123 9.20248 14.5613 9.25635 14.832C9.3102 15.1028 9.28288 15.3836 9.17725 15.6387C9.07161 15.8937 8.89209 16.1113 8.6626 16.2646C8.43313 16.4179 8.16316 16.5 7.88721 16.5C7.51722 16.4999 7.16251 16.3525 6.90088 16.0908C6.63928 15.8291 6.49172 15.4745 6.4917 15.1045C6.4917 14.8285 6.57375 14.5586 6.72705 14.3291C6.88041 14.0996 7.09898 13.9211 7.354 13.8154ZM15.5884 13.8125C15.8434 13.7083 16.124 13.6816 16.394 13.7363C16.6642 13.7912 16.9127 13.9256 17.1069 14.1211C17.301 14.3166 17.4327 14.5656 17.4858 14.8359C17.5388 15.1063 17.5106 15.3863 17.4048 15.6406C17.2989 15.895 17.1204 16.1127 16.8911 16.2656C16.6618 16.4186 16.3923 16.5 16.1167 16.5C15.9327 16.5 15.7505 16.4633 15.5806 16.3926C15.4107 16.3219 15.2562 16.2184 15.1265 16.0879C14.9968 15.9574 14.8943 15.8022 14.8247 15.6318C14.7552 15.4617 14.72 15.2795 14.7212 15.0957C14.723 14.8201 14.806 14.5506 14.9604 14.3223C15.1148 14.0941 15.3334 13.9168 15.5884 13.8125ZM6.38623 3.47656C5.7893 3.48253 5.21835 3.72422 4.79834 4.14844C4.37844 4.57258 4.14316 5.14537 4.14307 5.74219V10.9805H19.8579L19.8804 5.74219C19.8802 5.14146 19.6411 4.56541 19.2163 4.14062C18.7915 3.71586 18.2155 3.47662 17.6147 3.47656H6.38623Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/TrashAllIcon.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 TrashAllIcon_TrashAllIcon = ({ 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 TrashAllIcon_TrashAllIcon = ({ size = 16, width = size, height = size, col
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M20.25 4.49951C20.4488 4.49951 20.6396 4.57874 20.7803 4.71924C20.9208 4.85977 20.9999 5.0508 21 5.24951C21 5.44839 20.9209 5.64013 20.7803 5.78076C20.6396 5.92123 20.4488 5.99951 20.25 5.99951H6.25V19.2495C6.25001 19.4135 6.28204 19.5765 6.34473 19.728C6.38039 19.8141 6.42691 19.8955 6.48047 19.9712V21.8022C5.46696 21.397 4.75004 20.4077 4.75 19.2495V5.99951H3.75C3.55123 5.99951 3.36035 5.92123 3.21973 5.78076C3.0791 5.64013 3.00003 5.44839 3 5.24951C3.00013 5.0508 3.07922 4.85977 3.21973 4.71924C3.36036 4.57874 3.5512 4.49951 3.75 4.49951H20.25ZM13.4434 21.5991H11.707L11.3096 19.9448H9.27832L8.88086 21.5991H7.2002L9.33398 14.3999H11.3096L13.4434 21.5991ZM15.8164 20.1479H17.2861V21.5991H14.1631V14.3999H15.8164V20.1479ZM20.1309 20.1479H21.5996V21.5991H18.4775V14.3999H20.1309V20.1479ZM10.2656 15.687C10.0995 16.4419 9.91459 17.2835 9.73926 17.9995L9.5918 18.6089H10.9961L10.8477 17.9995C10.6631 17.2835 10.4873 16.4223 10.3027 15.687H10.2656ZM18.5 7.49951C18.6988 7.49951 18.8896 7.57874 19.0303 7.71924C19.1708 7.85977 19.2499 8.0508 19.25 8.24951V13.1997H17.75V8.24951C17.7501 8.0508 17.8292 7.85977 17.9697 7.71924C18.1104 7.57874 18.3012 7.49951 18.5 7.49951ZM12.7998 9.49951C12.9986 9.49951 13.1895 9.5788 13.3301 9.71924C13.4706 9.85977 13.5497 10.0508 13.5498 10.2495V12.0005H12.0498V10.2495C12.0499 10.0508 12.129 9.85977 12.2695 9.71924C12.4101 9.57872 12.601 9.49956 12.7998 9.49951ZM14 1.99951C14.1988 1.99951 14.3896 2.07874 14.5303 2.21924C14.6708 2.35977 14.7499 2.5508 14.75 2.74951C14.75 2.94839 14.6709 3.14013 14.5303 3.28076C14.3896 3.42123 14.1988 3.49951 14 3.49951H10C9.80123 3.49951 9.61035 3.42123 9.46973 3.28076C9.3291 3.14013 9.25003 2.94839 9.25 2.74951C9.25013 2.5508 9.32922 2.35977 9.46973 2.21924C9.61036 2.07874 9.8012 1.99951 10 1.99951H14Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/TrashIcon.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 TrashIcon_TrashIcon = ({ 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 TrashIcon_TrashIcon = ({ size = 16, width = size, height = size, color = '
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M4.75 6.00012H3.75C3.55109 6.00012 3.36032 5.9211 3.21967 5.78045C3.07902 5.6398 3 5.44903 3 5.25012C3 5.05121 3.07902 4.86044 3.21967 4.71979C3.36032 4.57914 3.55109 4.50012 3.75 4.50012H20.25C20.4489 4.50012 20.6397 4.57914 20.7803 4.71979C20.921 4.86044 21 5.05121 21 5.25012C21 5.44903 20.921 5.6398 20.7803 5.78045C20.6397 5.9211 20.4489 6.00012 20.25 6.00012H6.25V19.2501C6.25 19.4143 6.28233 19.5768 6.34515 19.7285C6.40797 19.8801 6.50004 20.0179 6.61612 20.134C6.73219 20.2501 6.86999 20.3422 7.02165 20.405C7.1733 20.4678 7.33585 20.5001 7.5 20.5001H16.5C16.6642 20.5001 16.8267 20.4678 16.9784 20.405C17.13 20.3422 17.2678 20.2501 17.3839 20.134C17.5 20.0179 17.592 19.8801 17.6548 19.7285C17.7177 19.5768 17.75 19.4143 17.75 19.2501V8.25012C17.75 8.05121 17.829 7.86044 17.9697 7.71979C18.1103 7.57914 18.3011 7.50012 18.5 7.50012C18.6989 7.50012 18.8897 7.57914 19.0303 7.71979C19.171 7.86044 19.25 8.05121 19.25 8.25012V19.2501C19.25 20.7689 18.0188 22.0001 16.5 22.0001H7.5C5.98125 22.0001 4.75 20.7689 4.75 19.2501V6.00012ZM10 3.50012C9.80109 3.50012 9.61032 3.4211 9.46967 3.28045C9.32902 3.1398 9.25 2.94903 9.25 2.75012C9.25 2.55121 9.32902 2.36044 9.46967 2.21979C9.61032 2.07914 9.80109 2.00012 10 2.00012H14C14.1989 2.00012 14.3897 2.07914 14.5303 2.21979C14.671 2.36044 14.75 2.55121 14.75 2.75012C14.75 2.94903 14.671 3.1398 14.5303 3.28045C14.3897 3.4211 14.1989 3.50012 14 3.50012H10ZM9.25 10.2501C9.25 10.0512 9.32902 9.86044 9.46967 9.71979C9.61032 9.57914 9.80109 9.50012 10 9.50012C10.1989 9.50012 10.3897 9.57914 10.5303 9.71979C10.671 9.86044 10.75 10.0512 10.75 10.2501V16.2501C10.75 16.449 10.671 16.6398 10.5303 16.7805C10.3897 16.9211 10.1989 17.0001 10 17.0001C9.80109 17.0001 9.61032 16.9211 9.46967 16.7805C9.32902 16.6398 9.25 16.449 9.25 16.2501V10.2501ZM13.25 10.2501C13.25 10.0512 13.329 9.86044 13.4697 9.71979C13.6103 9.57914 13.8011 9.50012 14 9.50012C14.1989 9.50012 14.3897 9.57914 14.5303 9.71979C14.671 9.86044 14.75 10.0512 14.75 10.2501V16.2501C14.75 16.449 14.671 16.6398 14.5303 16.7805C14.3897 16.9211 14.1989 17.0001 14 17.0001C13.8011 17.0001 13.6103 16.9211 13.4697 16.7805C13.329 16.6398 13.25 16.449 13.25 16.2501V10.2501Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/TreeIcon.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 TreeIcon_TreeIcon = ({ 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 TreeIcon_TreeIcon = ({ size = 16, width = size, height = size, color = 'cu
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M15.8512 2.00488C15.8452 2.02411 14.9273 4.95904 12.7477 6.62793C11.6251 7.48466 10.332 7.61908 9.48105 7.5918C9.98904 8.88634 10.6781 11.269 11.1852 13.5039C11.3549 14.2517 11.5318 15.0366 11.7008 15.8242C13.2282 14.6489 13.7464 14.2581 14.8346 13.042C15.2875 12.5357 15.6827 11.9812 16.0152 11.3896C15.7423 11.2555 15.3316 10.9702 15.1861 10.4199C14.9466 9.51432 15.274 8.63769 15.274 8.63769C15.274 8.63769 16.1096 9.21689 16.4185 10.0752C16.542 10.4182 16.5148 10.7513 16.4537 11.0088C16.8345 10.635 17.5539 10.1125 18.5533 10.1914C20.1719 10.3192 21.4066 11.3533 21.4254 11.3691C21.4084 11.3813 19.9664 12.4143 18.3824 12.4258C17.4337 12.4344 16.7182 11.9113 16.3727 11.5967C16.1038 12.2462 15.4697 13.4643 14.7008 14.3936C14.5961 14.5203 14.4859 14.6456 14.3746 14.7705C14.7935 14.5965 15.4976 14.422 16.2291 14.7617C17.4587 15.3333 18.0973 16.5039 18.0973 16.5039C18.0973 16.5039 16.6407 16.8921 15.3961 16.4395C14.5835 16.1467 14.1874 15.4405 14.0465 15.127C13.3385 15.8743 12.5622 16.5574 11.9557 17.0576C12.2835 18.7036 12.537 20.2826 12.5592 21.4746C12.5612 21.6434 11.982 21.7554 11.3473 21.9268C10.7118 22.0983 9.61322 22.005 9.71835 21.2393C9.73755 18.7896 9.6857 16.8582 9.59628 15.2139C9.00686 14.8167 8.26767 14.2735 7.6666 13.6904C7.03975 13.0837 6.48727 12.2543 6.25449 11.8242C6.07232 12.1896 5.69036 12.7294 4.96249 12.9219C3.74831 13.2428 2.57708 12.8046 2.5748 12.8037C2.5901 12.7817 3.36055 11.6814 4.49765 11.2715C5.00218 11.0899 5.49136 11.1479 5.84726 11.2461C5.71677 11.0381 5.61252 10.7641 5.63242 10.4297C5.68273 9.54975 6.23691 8.87012 6.23691 8.87012C6.25031 8.88807 6.81507 9.64993 6.84042 10.498C6.85294 10.9902 6.59831 11.3706 6.43124 11.5674C6.72891 12.0004 7.07488 12.3981 7.4664 12.749C8.23418 13.4372 8.63252 13.6983 9.53671 14.249C9.44921 12.955 9.34099 11.8311 9.22519 10.7402C9.06624 9.24288 8.7726 8.22648 8.55038 7.625C8.02104 7.75204 6.97262 7.86935 6.04648 7.13867C4.65789 6.04541 4.16074 4.35449 4.16074 4.35449C4.17951 4.35378 6.07912 4.28463 7.50937 5.22266C8.08181 5.59824 8.42072 6.12667 8.6207 6.58203C8.77419 5.66602 9.24453 4.26001 10.6607 3.36133C13.0363 1.85122 15.8263 2.00349 15.8512 2.00488Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/TrenchIcon.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 TrenchIcon_TrenchIcon = ({ 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 TrenchIcon_TrenchIcon = ({ size = 16, width = size, height = size, color =
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M8.52515 3.72021C8.73832 3.69422 8.91235 3.68677 9.073 3.73877C9.23642 3.79179 9.37335 3.90203 9.52612 4.08154C9.92142 4.54623 10.3765 5.04988 10.7859 5.479H10.7869C10.884 5.58237 10.952 5.68773 10.947 5.80811C10.9419 5.92576 10.8673 6.02647 10.7732 6.12354C10.6392 6.26195 10.5308 6.37218 10.4382 6.44873C10.3464 6.52463 10.2549 6.58028 10.1531 6.58838C10.0487 6.59643 9.95522 6.55359 9.86304 6.48779C9.77143 6.42233 9.66605 6.32393 9.53784 6.19971V6.19873C9.50009 6.16204 9.46505 6.12275 9.43335 6.0874C9.40114 6.05149 9.37153 6.01902 9.34058 5.98975L9.00073 5.68115C8.90129 5.59246 8.81382 5.51716 8.73413 5.45361C8.57551 5.32715 8.45241 5.25047 8.32983 5.20557C8.14468 5.13783 7.95011 5.13613 7.61694 5.1665L7.23218 5.20654C6.74696 5.25803 6.24196 5.32198 5.74292 5.35205H5.74194C5.61327 5.35949 5.54744 5.38897 5.50952 5.42822C5.47055 5.46883 5.44172 5.54007 5.4314 5.67334C5.36351 6.50762 5.27553 7.34013 5.16772 8.17041C5.15278 8.28673 5.1673 8.37177 5.19995 8.44287C5.23342 8.51574 5.29006 8.58336 5.37573 8.65869C6.2421 9.42526 7.11258 10.1918 7.95679 10.9858H7.95776C8.08539 11.1056 8.14865 11.1244 8.18726 11.1196C8.20753 11.117 8.23411 11.1064 8.27026 11.0786C8.30725 11.05 8.3501 11.007 8.4021 10.9478C10.3831 8.68215 12.3791 6.43899 14.3552 4.17236C14.5182 3.98547 14.6891 3.85466 14.8845 3.77979C15.0799 3.70506 15.2928 3.68912 15.5349 3.71826C16.713 3.8615 17.8963 3.97304 19.0818 4.07861C19.2937 4.09749 19.4721 4.15357 19.6023 4.27295C19.7338 4.39378 19.8016 4.56651 19.822 4.78662C19.9337 5.98651 20.044 7.18532 20.1853 8.38135L20.198 8.55029C20.2029 8.71414 20.1835 8.86526 20.1316 9.00732C20.0795 9.14977 19.9959 9.27886 19.8796 9.40088L19.7517 9.521C19.2746 9.92542 18.8074 10.3429 18.3406 10.7612C17.8742 11.1792 17.4073 11.5993 16.9324 12.0093C16.8134 12.1125 16.779 12.1754 16.7761 12.2192C16.7735 12.2605 16.7966 12.3227 16.905 12.4312C17.2037 12.7297 17.4774 13.0541 17.741 13.3774H17.7419C17.8073 13.4582 17.8397 13.4677 17.8503 13.4683C17.861 13.4684 17.8934 13.4611 17.9636 13.3862L18.3835 12.9497C18.5256 12.8064 18.6696 12.6645 18.8142 12.5239L18.9275 12.4272C19.044 12.3408 19.1704 12.2865 19.3025 12.2788C19.4818 12.2686 19.6534 12.3445 19.8054 12.4976C19.9589 12.6522 20.0308 12.8249 20.0173 13.0044C20.0039 13.1805 19.9098 13.3461 19.7683 13.4907C19.231 14.0418 18.6935 14.5992 18.1384 15.1382H18.1375C18.0408 15.2311 18.023 15.2834 18.0242 15.3149C18.0257 15.3493 18.0504 15.4015 18.1443 15.4917C18.6358 15.9571 19.1086 16.4434 19.5837 16.9224H19.5847C20.0268 17.3664 20.2688 17.8716 20.2966 18.3706C20.321 18.8084 20.1795 19.2337 19.8757 19.5991L19.7351 19.7524C19.3357 20.1473 18.8533 20.3304 18.3542 20.2964C17.8569 20.2624 17.3534 20.0141 16.906 19.5688C16.4287 19.0936 15.9428 18.6196 15.4753 18.1323H15.4744C15.3968 18.0509 15.3582 18.0354 15.3376 18.0347C15.3196 18.0344 15.2804 18.0452 15.2019 18.1294C14.7844 18.5767 14.3419 19.006 13.9158 19.4399L13.9167 19.4409C13.7718 19.5889 13.6064 19.6989 13.4265 19.7251C13.2407 19.7519 13.0573 19.6861 12.8884 19.5239C12.7197 19.3617 12.6494 19.1841 12.6697 18.9985C12.6894 18.8198 12.7916 18.6502 12.9265 18.4956L13.0291 18.394C13.0651 18.3619 13.1026 18.3306 13.1394 18.3013C13.2161 18.2403 13.2891 18.1858 13.3542 18.1284C13.488 18.0105 13.5454 17.9169 13.5251 17.814V17.813C13.5066 17.7186 13.422 17.6216 13.2839 17.5093C13.2171 17.4549 13.1439 17.4022 13.0691 17.3462C12.9959 17.2913 12.9212 17.2334 12.8552 17.1733L12.5525 16.9038C12.4649 16.8281 12.3888 16.7657 12.3201 16.7163C12.1826 16.6175 12.0888 16.5812 12.0056 16.5815C11.9225 16.5821 11.8282 16.6193 11.6902 16.7192C11.5517 16.8195 11.3828 16.9716 11.1511 17.1812C11.0823 17.2436 11.0026 17.3056 10.9246 17.3647C10.8452 17.4248 10.767 17.4824 10.697 17.5405C10.6269 17.5988 10.5685 17.6548 10.5281 17.7075C10.4876 17.7604 10.4702 17.8041 10.4685 17.8394V17.8403C10.467 17.8706 10.4792 17.9123 10.5154 17.9673C10.5513 18.0218 10.6048 18.0809 10.6707 18.144C10.7365 18.2071 10.8111 18.2704 10.8865 18.3354C10.9608 18.3996 11.0366 18.466 11.1013 18.5308C11.2481 18.6765 11.3703 18.8386 11.4099 19.02C11.4511 19.2094 11.3984 19.4012 11.2361 19.5923C11.0938 19.7606 10.9125 19.8402 10.7117 19.8169C10.5175 19.7942 10.32 19.678 10.1326 19.4917C9.68871 19.05 9.24035 18.6079 8.81226 18.1479V18.147C8.72747 18.0556 8.68386 18.0418 8.66089 18.0425C8.63468 18.0434 8.5902 18.0634 8.50562 18.1509C8.00255 18.6738 7.48903 19.1845 6.97046 19.689C6.15547 20.4826 5.00352 20.5058 4.2439 19.7358C3.49947 18.9809 3.52173 17.8425 4.2937 17.0454C4.79822 16.5251 5.30811 16.0097 5.83569 15.5103C5.94066 15.4113 5.96948 15.3544 5.97144 15.3159C5.97302 15.2811 5.95288 15.2252 5.84546 15.1235C5.34106 14.6473 4.86202 14.1422 4.38257 13.645V13.644C4.20969 13.4656 4.10286 13.2757 4.08472 13.0874C4.06619 12.8939 4.14301 12.7177 4.30151 12.5786C4.48951 12.4138 4.6813 12.3542 4.87183 12.3911C5.00981 12.4179 5.13667 12.4935 5.25269 12.5942L5.36499 12.7026C5.61013 12.9659 5.8665 13.2228 6.13354 13.4976C6.48402 13.0974 6.80797 12.7149 7.15112 12.355L7.20776 12.2896C7.2496 12.2331 7.25463 12.1989 7.25171 12.1772C7.24647 12.1406 7.21397 12.0894 7.11597 12.0034H7.11499C6.13469 11.1394 5.18514 10.2571 4.19995 9.40576C4.03829 9.2663 3.92614 9.11812 3.86206 8.94873C3.79809 8.77956 3.78515 8.59627 3.80933 8.39111C3.94473 7.22654 4.05878 6.06032 4.18042 4.89404C4.20875 4.62094 4.26682 4.41899 4.40991 4.28467C4.55184 4.1517 4.75826 4.10271 5.02808 4.07861C6.19565 3.97304 7.36292 3.86146 8.52515 3.72021ZM17.0164 16.4106C16.9695 16.4134 16.9081 16.4428 16.8093 16.5396C16.7117 16.6353 16.5937 16.7791 16.4294 16.979C16.3775 17.0425 16.3647 17.0697 16.363 17.0845C16.3628 17.0863 16.3626 17.0921 16.3679 17.103L16.4128 17.1587V17.1597C16.9755 17.7142 17.522 18.2722 18.0867 18.8228C18.1673 18.9007 18.2556 18.9409 18.3455 18.9507C18.4364 18.9604 18.5372 18.9394 18.6404 18.8853L18.7117 18.8433C18.7788 18.7983 18.8315 18.745 18.8689 18.686C18.9179 18.6083 18.9442 18.5134 18.9392 18.397V18.3882L18.9373 18.3286C18.9257 18.2316 18.8765 18.1519 18.8044 18.0698L18.7078 17.9692C18.3549 17.6185 18.0036 17.265 17.6511 16.9126C17.469 16.7305 17.338 16.6006 17.2322 16.5161C17.125 16.4306 17.0629 16.4081 17.0164 16.4106ZM6.90796 16.3677C6.90074 16.3679 6.87865 16.3718 6.82886 16.4233L6.82788 16.4243C6.27314 16.9869 5.71489 17.5343 5.16382 18.0972C5.02443 18.24 5.00476 18.4273 5.09155 18.6147L5.13062 18.687C5.17208 18.7545 5.22258 18.8093 5.28491 18.8501C5.36826 18.9045 5.48163 18.9401 5.6394 18.9438H5.64917V18.9448C5.68972 18.9499 5.74117 18.9369 5.80444 18.8989C5.86729 18.8611 5.93331 18.8032 6.00073 18.7358C6.36334 18.3713 6.72835 18.0081 7.09058 17.646C7.26807 17.4685 7.39575 17.3382 7.47729 17.2319C7.5589 17.1255 7.58109 17.0598 7.57788 17.0093C7.5744 16.9581 7.54315 16.8938 7.44702 16.7954C7.35177 16.698 7.20822 16.5823 7.00952 16.4243V16.4233C6.94607 16.3735 6.91896 16.3676 6.90796 16.3677ZM15.7117 13.1304C15.7085 13.1298 15.6859 13.1278 15.6296 13.1782C14.7658 13.9568 13.8952 14.7291 13.0095 15.5161C13.4815 15.9408 13.9337 16.3453 14.3806 16.7544H14.3816C14.4499 16.8175 14.487 16.8404 14.5134 16.8442C14.5281 16.8463 14.5632 16.8448 14.6335 16.771C15.3437 16.0312 16.0684 15.3009 16.7917 14.5737L16.8542 14.5024C16.8662 14.4849 16.8704 14.4718 16.8718 14.4624C16.8733 14.452 16.8743 14.4233 16.8152 14.3589C16.4651 13.9809 16.1292 13.5908 15.7947 13.2026H15.7937C15.7448 13.1458 15.7221 13.1326 15.7117 13.1304ZM15.4109 5.09619C15.3559 5.11588 15.3011 5.15241 15.2429 5.21826L15.2439 5.21924C12.5771 8.24794 9.90708 11.2746 7.23022 14.2954C7.15079 14.3854 7.13605 14.4332 7.13745 14.4624C7.13901 14.4925 7.15974 14.5384 7.2439 14.6206L8.28394 15.6636C8.62828 16.0133 8.97009 16.366 9.30737 16.7231V16.7241C9.40043 16.8236 9.45184 16.8344 9.48218 16.8315C9.52359 16.8273 9.57744 16.7952 9.67261 16.7114L18.6716 8.68311C18.7367 8.62538 18.7843 8.58235 18.8132 8.53271C18.8379 8.49022 18.8511 8.43787 18.8289 8.35498L18.8269 8.34717L18.8259 8.33936C18.7343 7.42341 18.6364 6.48015 18.5447 5.53564C18.5398 5.48592 18.5284 5.45492 18.5164 5.43506C18.5048 5.41611 18.4901 5.40261 18.4705 5.39209C18.4244 5.36754 18.3595 5.35968 18.2605 5.3501C17.3818 5.26445 16.4995 5.17925 15.6199 5.08154V5.08057C15.533 5.07076 15.4666 5.07638 15.4109 5.09619Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/TriangleAlertIcon.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 TriangleAlertIcon_TriangleAlertIcon = ({ 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 TriangleAlertIcon_TriangleAlertIcon = ({ size = 16, width = size, height =
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M12.6872 3.18241C12.9027 3.30541 13.0812 3.48395 13.2042 3.69942L21.905 18.9258C22.0253 19.1367 22.0882 19.3755 22.0872 19.6183C22.0863 19.8611 22.0216 20.0995 21.8997 20.3094C21.7778 20.5194 21.6029 20.6937 21.3925 20.815C21.1821 20.9362 20.9436 21 20.7008 21.0001H3.29921C3.05639 21 2.81786 20.9362 2.60746 20.815C2.39706 20.6937 2.22216 20.5194 2.10025 20.3094C1.97834 20.0995 1.91369 19.8611 1.91276 19.6183C1.91183 19.3755 1.97466 19.1367 2.09497 18.9258L10.7958 3.69816C10.9783 3.3791 11.2801 3.14556 11.6348 3.04886C11.9894 2.95215 12.368 3.00019 12.6872 3.18241ZM12 4.38665L3.29921 19.6143H20.7008L12 4.38665ZM12 17.5488C12.0935 17.5448 12.1868 17.5598 12.2743 17.5928C12.3619 17.6258 12.4418 17.6762 12.5094 17.741C12.577 17.8057 12.6307 17.8834 12.6674 17.9695C12.7042 18.0555 12.7231 18.1481 12.7231 18.2417C12.7231 18.3353 12.7042 18.4279 12.6674 18.5139C12.6307 18.6 12.577 18.6777 12.5094 18.7425C12.4418 18.8072 12.3619 18.8576 12.2743 18.8906C12.1868 18.9236 12.0935 18.9386 12 18.9346C11.8161 18.9346 11.6397 18.8616 11.5096 18.7315C11.3795 18.6014 11.3065 18.425 11.3065 18.2411C11.3065 18.0571 11.3795 17.8807 11.5096 17.7507C11.6397 17.6206 11.8161 17.5488 12 17.5488ZM12 7.84427C12.1619 7.84451 12.3186 7.90138 12.4429 8.00502C12.5673 8.10865 12.6515 8.25253 12.6809 8.41171L12.6935 8.53781V15.4694C12.6932 15.6424 12.6282 15.809 12.5114 15.9365C12.3946 16.0641 12.2343 16.1434 12.062 16.1588C11.8898 16.1743 11.7179 16.1249 11.5803 16.0202C11.4426 15.9155 11.349 15.7631 11.3178 15.593L11.3065 15.4694V8.53781C11.3065 8.35387 11.3795 8.17747 11.5096 8.0474C11.6397 7.91734 11.8161 7.84427 12 7.84427Z",
-            fill: fill,
-            stroke: stroke,
+            fill: _color,
+            stroke: _color,
             strokeWidth: 0.214367
         })
     });

package/dist/web/TriangleDownIcon.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 TriangleDownIcon_TriangleDownIcon = ({ 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 TriangleDownIcon_TriangleDownIcon = ({ size = 16, width = size, height = s
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M18.8793 6H17.4342H15.0927H12.3121H9.45834H6.93388H5.14115C4.84846 6 4.61064 6.08738 4.42771 6.26215C4.24478 6.43692 4.11978 6.65935 4.0527 6.92944C3.98563 7.19954 3.98258 7.49744 4.04356 7.82314C4.10453 8.14884 4.23868 8.47058 4.44601 8.78833C4.89724 9.42385 5.37286 10.0911 5.87288 10.7902C6.37289 11.4893 6.8851 12.1963 7.4095 12.9113L8.94613 15.0561C9.47054 15.7711 9.97055 16.4622 10.4462 17.1295C10.6657 17.4314 10.9279 17.6538 11.2328 17.7968C11.5377 17.9398 11.8517 18.0073 12.1749 17.9994C12.4981 17.9914 12.8151 17.9001 13.1261 17.7253C13.4371 17.5505 13.7085 17.3043 13.9402 16.9865C14.7817 15.8426 15.6597 14.6033 16.5744 13.2687C17.4891 11.9341 18.4464 10.5042 19.4464 8.97899C19.6781 8.61357 19.8367 8.25212 19.9221 7.89464C20.0074 7.53716 20.0227 7.2194 19.9678 6.94136C19.9129 6.66332 19.791 6.43692 19.6019 6.26215C19.4129 6.08738 19.172 6 18.8793 6Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/TriangleUpIcon.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 TriangleUpIcon = ({ 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 TriangleUpIcon = ({ size = 16, width = size, height = size, color = 'curre
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M20.4278 19.2006H18.91038H16.4518H13.53224H10.53586H7.88522H6.00288C5.69556 19.2006 5.44586 19.09572 5.25378 18.886C5.0617 18.67628 4.93046 18.40936 4.86002 18.08526C4.7896 17.76114 4.7864 17.40368 4.85042 17.01284C4.91444 16.622 5.0553 16.23592 5.27298 15.85462C5.74678 15.09202 6.24618 14.29126 6.77118 13.4524C7.29618 12.61352 7.834 11.76512 8.38462 10.90718L9.99806 8.33338C10.54868 7.47544 11.07368 6.6461 11.57308 5.84536C11.80356 5.48312 12.07888 5.2162 12.399 5.04462C12.71912 4.87302 13.04886 4.792 13.3882 4.80154C13.72752 4.81106 14.06046 4.9207 14.38698 5.1304C14.71352 5.34012 14.99842 5.63564 15.24172 6.01694C16.12528 7.38964 17.04724 8.87674 18.00762 10.47822C18.968 12.0797 19.9732 13.79558 21.0232 15.62584C21.2666 16.06434 21.433 16.49808 21.5226 16.92704C21.6122 17.356 21.6282 17.73732 21.5706 18.07096C21.513 18.4046 21.385 18.67628 21.1864 18.886C20.988 19.09572 20.735 19.2006 20.4278 19.2006Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/TrophyIcon.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 TrophyIcon_TrophyIcon = ({ 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 TrophyIcon_TrophyIcon = ({ size = 16, width = size, height = size, color =
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M18.9647 4.64097H18.5767V2.95406C18.5767 2.84329 18.5566 2.73361 18.5176 2.63128C18.4786 2.52895 18.4215 2.43597 18.3494 2.35764C18.2773 2.27932 18.1918 2.21719 18.0976 2.1748C18.0035 2.13242 17.9026 2.1106 17.8007 2.1106H7.40213C7.02274 2.10608 6.64413 2.07225 6.26915 2.00939C6.15892 1.99136 6.04642 1.99936 5.93929 2.03284C5.83216 2.06631 5.73293 2.12448 5.64834 2.20338C5.56458 2.28336 5.49765 2.38201 5.45212 2.49263C5.40659 2.60325 5.38353 2.72323 5.3845 2.84441V4.63254H4.99649C4.37906 4.63254 3.78691 4.89913 3.35032 5.37367C2.91373 5.8482 2.66846 6.49181 2.66846 7.16291V8.84982C2.66846 9.52092 2.91373 10.1645 3.35032 10.6391C3.78691 11.1136 4.37906 11.3802 4.99649 11.3802H5.99755C6.4728 12.4935 7.20216 13.4561 8.11628 14.1765C9.03039 14.897 10.0989 15.3513 11.2201 15.4963V18.9713H7.34004C7.13423 18.9713 6.93685 19.0602 6.79132 19.2184C6.64579 19.3765 6.56403 19.5911 6.56403 19.8148C6.56403 20.0385 6.64579 20.253 6.79132 20.4112C6.93685 20.5694 7.13423 20.6582 7.34004 20.6582H16.6522C16.858 20.6582 17.0554 20.5694 17.2009 20.4112C17.3464 20.253 17.4282 20.0385 17.4282 19.8148C17.4282 19.5911 17.3464 19.3765 17.2009 19.2184C17.0554 19.0602 16.858 18.9713 16.6522 18.9713H12.7721V15.5975C12.7756 15.5639 12.7756 15.5299 12.7721 15.4963C13.8938 15.3529 14.9629 14.8992 15.8773 14.1785C16.7916 13.4579 17.5206 12.4944 17.9947 11.3802H19.0035C19.6209 11.3802 20.2131 11.1136 20.6497 10.6391C21.0863 10.1645 21.3315 9.52092 21.3315 8.84982V7.16291C21.3305 6.82775 21.2683 6.49614 21.1484 6.18734C21.0286 5.87854 20.8534 5.5987 20.6332 5.36407C20.413 5.12944 20.1521 4.94469 19.8657 4.82056C19.5793 4.69643 19.273 4.63539 18.9647 4.64097ZM4.99649 9.70172C4.89458 9.70172 4.79367 9.6799 4.69952 9.63751C4.60537 9.59513 4.51983 9.533 4.44777 9.45467C4.37571 9.37635 4.31855 9.28337 4.27955 9.18104C4.24055 9.0787 4.22048 8.96902 4.22048 8.85826V7.17134C4.22048 6.94765 4.30224 6.73311 4.44777 6.57493C4.5933 6.41675 4.79068 6.32789 4.99649 6.32789H5.3845V8.38592C5.38403 8.82758 5.42301 9.26825 5.5009 9.70172H4.99649ZM17.0247 8.38592C17.0247 9.83997 16.4932 11.2345 15.5473 12.2626C14.6013 13.2908 13.3184 13.8684 11.9806 13.8684C10.6428 13.8684 9.35984 13.2908 8.41389 12.2626C7.46795 11.2345 6.93652 9.83997 6.93652 8.38592V3.78908H17.0247V8.38592ZM19.7407 8.85826C19.7407 8.96902 19.7206 9.0787 19.6816 9.18104C19.6426 9.28337 19.5855 9.37635 19.5134 9.45467C19.4414 9.533 19.3558 9.59513 19.2617 9.63751C19.1675 9.6799 19.0666 9.70172 18.9647 9.70172H18.4603C18.5342 9.26763 18.5732 8.82737 18.5767 8.38592V6.32789H18.9647C19.0666 6.32789 19.1675 6.3497 19.2617 6.39209C19.3558 6.43448 19.4414 6.49661 19.5134 6.57493C19.5855 6.65325 19.6426 6.74623 19.6816 6.84857C19.7206 6.9509 19.7407 7.06058 19.7407 7.17134V8.85826Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/TruthSocialIcon.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 TruthSocialIcon = ({ 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 TruthSocialIcon = ({ size = 16, width = size, height = size, color = 'curr
         children: [
             /*#__PURE__*/ jsx("path", {
                 d: "M20.958 8.46332V4.33789H9.52627V19.5813H14.4368V8.46332H20.958ZM2.96484 4.33875H7.67913V8.46332H2.96484V4.33789V4.33875Z",
-                fill: fill
+                fill: _color
             }),
             /*#__PURE__*/ jsx("path", {
                 d: "M16.2422 15.457H20.9565V19.5825H16.2422V15.457Z",
-                fill: fill
+                fill: _color
             })
         ]
     });

package/dist/web/TweetIcon.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 TweetIcon_TweetIcon = ({ 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 TweetIcon_TweetIcon = ({ size = 16, width = size, height = size, color = '
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M7.78333 13.6941C7.5994 14.1836 7.43098 14.6789 7.27833 15.1791C8.07833 14.5991 9.02917 14.2307 10.1267 14.0932C12.2208 13.8316 14.0817 12.4482 15.0233 10.7116L13.81 9.49906L14.9875 8.3199L15.8208 7.4849C16.1792 7.1274 16.5833 6.4649 17.0108 5.5124C12.35 6.2349 9.49583 9.08823 7.7825 13.6941H7.78333ZM16.1667 9.4974L17 10.3307C16.1667 12.8307 13.6667 15.3307 10.3333 15.7474C8.10917 16.0249 6.72 17.5532 6.165 20.3307H4.5C5.33333 15.3307 7 3.66406 19.5 3.66406C18.6667 6.16156 17.835 7.8274 17.0025 8.66156L16.1667 9.4974Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/TweetQuoteIcon.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 TweetQuoteIcon = ({ 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 TweetQuoteIcon = ({ size = 16, width = size, height = size, color = 'curre
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M21.6868 17.7282C21.0516 15.1665 18.7782 9.13838 11.5782 8.16807L11.5524 5.49619C11.5524 5.19854 11.379 4.92432 11.1048 4.81182C10.8446 4.69932 10.5329 4.73682 10.3079 4.92432L2.67898 10.8915C2.43054 11.1024 2.29461 11.4142 2.28054 11.7376C2.26883 12.0728 2.39304 12.3845 2.64148 12.6329L9.69148 18.9728C9.86492 19.1462 10.0899 19.2329 10.3266 19.2329C10.4391 19.2329 10.5634 19.2071 10.6618 19.1579C10.997 19.022 11.2079 18.6985 11.2079 18.3376V15.4548C12.961 15.5532 18.1712 16.0384 20.222 18.4642C20.4704 18.7618 20.9063 18.8485 21.2673 18.6751C21.6118 18.4876 21.7876 18.1009 21.6868 17.7282ZM10.9712 14.236C10.7227 14.2103 10.486 14.311 10.3009 14.4845C10.1134 14.6579 10.0149 14.9063 10.0149 15.1548V17.6298L3.47586 11.7751L10.3501 6.3915L10.3618 8.43057C10.3618 8.88994 10.711 9.27666 11.1704 9.32588C16.8141 9.98447 19.1766 14.0978 20.1095 16.7345C17.311 14.6462 12.4384 14.297 10.9712 14.236Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/TwinklingStarsIcon.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 TwinklingStarsIcon_TwinklingStarsIcon = ({ 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 TwinklingStarsIcon_TwinklingStarsIcon = ({ size = 16, width = size, height
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M14.043 9.95703L20 12L14.043 14.043L12 20L9.95703 14.043L4 12L9.95703 9.95703L12 4L14.043 9.95703ZM18.0146 16.6523L20 17.333L18.0146 18.0146L17.333 20L16.6523 18.0146L14.667 17.333L16.6523 16.6523L17.333 14.667L18.0146 16.6523Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/TwitchAppIcon.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 TwitchAppIcon_TwitchAppIcon = ({ 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 TwitchAppIcon_TwitchAppIcon = ({ size = 16, width = size, height = size, c
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M5.3291 3.35742C7.73714 3.37323 10.1465 3.36621 12.5566 3.36621H19.8193C20.2439 3.36621 20.2461 3.36636 20.2461 3.80176C20.2461 7.03988 20.2478 10.279 20.251 13.5176C20.2552 13.6289 20.2351 13.7399 20.1924 13.8428C20.1497 13.9457 20.0857 14.0386 20.0039 14.1143C18.6825 15.4246 17.366 16.7407 16.0557 18.0625C15.9762 18.148 15.8788 18.2151 15.7705 18.2588C15.662 18.3025 15.5445 18.322 15.4277 18.3154C14.5994 18.3038 13.771 18.325 12.9434 18.3037C12.8004 18.2958 12.6572 18.321 12.5254 18.377C12.3938 18.433 12.2771 18.5187 12.1836 18.627C11.6034 19.2326 10.9972 19.8146 10.4102 20.4141C10.3422 20.489 10.2584 20.548 10.165 20.5869C10.0715 20.6258 9.97027 20.6433 9.86914 20.6387C9.37418 20.6263 8.87904 20.6229 8.38477 20.6387C8.10984 20.6476 7.99826 20.5594 8.00781 20.2715C8.02569 19.7345 8.00177 19.1949 8.01758 18.6572C8.02502 18.391 7.93157 18.303 7.66602 18.3057C6.50429 18.3167 5.34141 18.3109 4.17969 18.3096C3.75562 18.3096 3.75195 18.3098 3.75195 17.875V6.5459C3.75039 6.35229 3.78753 6.15987 3.86035 5.98047C4.15868 5.24291 4.46557 4.50753 4.74121 3.76172C4.77131 3.63327 4.84833 3.52105 4.95703 3.44629C5.06573 3.37155 5.1984 3.33957 5.3291 3.35742ZM18.3242 4.94727C14.4286 4.9546 10.5344 4.9546 6.6416 4.94727C6.39969 4.94727 6.29792 5.00939 6.29785 5.27246C6.30427 8.66127 6.30427 12.0501 6.29785 15.4385C6.29785 15.6984 6.3941 15.7703 6.6416 15.7676C7.55583 15.758 8.47053 15.7739 9.38477 15.7588C9.68692 15.7534 9.80718 15.8401 9.79688 16.1582C9.77284 16.7456 9.78807 17.3364 9.78809 17.9561C9.90713 17.9234 10.0113 17.8514 10.083 17.751C10.6625 17.1749 11.2469 16.6017 11.8154 16.0146C11.8947 15.9286 11.9922 15.8605 12.1006 15.8164C12.2089 15.7724 12.3257 15.7525 12.4424 15.7588C13.5712 15.7698 14.7015 15.759 15.8311 15.7666C15.9267 15.7718 16.0224 15.7562 16.1113 15.7207C16.2004 15.6851 16.2809 15.6304 16.3467 15.5605C17.0478 14.847 17.7547 14.1391 18.4678 13.4375C18.5337 13.3763 18.5866 13.3018 18.6211 13.2188C18.6556 13.1357 18.6711 13.0459 18.668 12.9561C18.6638 10.4064 18.6638 7.85629 18.668 5.30664C18.6679 5.04987 18.599 4.94727 18.3242 4.94727ZM15.6855 7.82617C15.9102 7.81793 15.989 7.91608 15.9863 8.13379C15.976 8.77385 15.9844 9.41987 15.9844 10.0654C15.9844 10.6999 15.9773 11.3343 15.9883 11.9688C15.9924 12.2155 15.9113 12.3255 15.6543 12.3125C15.3972 12.2994 15.1377 12.3049 14.8799 12.3125C14.6992 12.3159 14.597 12.2549 14.5977 12.0557C14.6004 10.732 14.6004 9.40817 14.5977 8.08496C14.5978 7.88585 14.6975 7.82342 14.8789 7.82617C15.1476 7.83167 15.4169 7.8351 15.6855 7.82617ZM10.8594 7.81836C11.1158 7.83142 11.3763 7.82592 11.6348 7.81836C11.8161 7.81496 11.9159 7.87633 11.916 8.07617C11.9133 9.3998 11.9133 10.7232 11.916 12.0459C11.916 12.2459 11.8162 12.3081 11.6348 12.3047C11.366 12.2978 11.0969 12.2978 10.8281 12.3047C10.6027 12.3136 10.5253 12.214 10.5273 11.9961C10.5349 11.346 10.5303 10.6898 10.5303 10.0342C10.5303 9.41009 10.5374 8.78551 10.5264 8.16211C10.5216 7.91543 10.6033 7.80543 10.8594 7.81836Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/TwitterIcon.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 TwitterIcon_TwitterIcon = ({ 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 TwitterIcon_TwitterIcon = ({ size = 16, width = size, height = size, color
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M10.522 13.3476L3.96357 20.8069H5.51716L11.2142 14.3314L15.7611 20.8069H21.0066L14.1294 11.0139L21.0066 3.19263H19.453L13.4407 10.0324L8.63782 3.19263H3.39228M18.8923 19.6606H16.5055L5.51833 4.28263H7.90566",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/TwitterSearchIcon.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 TwitterSearchIcon_TwitterSearchIcon = ({ 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,11 +15,11 @@ const TwitterSearchIcon_TwitterSearchIcon = ({ size = 16, width = size, height =
                 fillRule: "evenodd",
                 clipRule: "evenodd",
                 d: "M13.8693 13.5851C15.5873 12.0901 18.2361 12.1407 19.8923 13.7352L20.1548 14.0111C21.3472 15.381 21.493 17.3082 20.5979 18.8195L22.0139 20.2124L22.197 20.3918L22.0127 20.57L20.8591 21.6809L20.6846 21.8493L20.51 21.6784L19.1147 20.3051C17.5356 21.2581 15.4663 21.154 14.0011 19.9768L13.7057 19.718C11.9921 18.0678 11.9927 15.3862 13.7057 13.7352L13.8693 13.5851ZM18.757 14.8534C17.7447 13.8783 16.138 13.817 15.0509 14.6703L14.841 14.8534C13.766 15.8891 13.7658 17.5645 14.841 18.5998L15.0509 18.7817C16.1378 19.6352 17.7444 19.5746 18.757 18.5998L18.9462 18.3984C19.7699 17.4268 19.7698 16.0266 18.9462 15.0548L18.757 14.8534Z",
-                fill: fill
+                fill: _color
             }),
             /*#__PURE__*/ jsx("path", {
                 d: "M12.3983 9.35163L17.0444 4.10376H20.0974L14.3063 10.6468C13.56 10.9142 12.8792 11.3089 12.2909 11.8016L7.33844 5.55886H5.48539L11.2801 12.8649C10.7425 13.5813 10.3606 14.4108 10.1791 15.3087L5.70268 20.3662H2.64966L9.25863 12.9003L2.198 4H8.15266L12.3983 9.35163Z",
-                fill: fill
+                fill: _color
             })
         ]
     });

package/dist/web/UniversalXTwitterIcon.js

@@ -1,11 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
-import { isThemeColor, useIconsContext } from "../core/index.js";
-const UniversalXTwitterIcon_UniversalXTwitterIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const { getColor } = useIconsContext();
-    const _color = isThemeColor(color) ? getColor(color) : color;
-    const fill = props.fill || _color;
-    props.stroke;
+import { isThemeColor } from "../core/index.js";
+import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
+const UniversalXTwitterIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
+    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
     return /*#__PURE__*/ jsxs("svg", {
         width: width,
         height: height,
@@ -15,21 +13,21 @@ const UniversalXTwitterIcon_UniversalXTwitterIcon = ({ size = 16, width = size,
         children: [
             /*#__PURE__*/ jsx("path", {
                 d: "M16.709 10.8652C19.4703 10.8654 21.709 13.1039 21.709 15.8652C21.7089 18.6265 19.4702 20.8651 16.709 20.8652C14.4898 20.8652 12.6084 19.419 11.9551 17.418L10.9551 17.9961L9.84863 14.5156L11.7656 16.6191C11.7284 16.3732 11.709 16.1215 11.709 15.8652C11.709 15.6026 11.7286 15.3444 11.7676 15.0928L10.8252 13.7354L11.9307 14.3867C12.0413 14.0288 12.1921 13.6887 12.376 13.3701L11.5273 12.7061L12.6338 12.9688C12.8619 12.6484 13.1263 12.3558 13.4219 12.0977L11.8926 11.5137L14.5898 11.335C15.2332 11.0335 15.9515 10.8652 16.709 10.8652ZM7.95703 18.6807L6.39941 18.5635L7.44531 15.0645L7.95703 18.6807ZM10.2441 18.2744L8.7207 18.6221L8.68848 14.9697L10.2441 18.2744ZM5.65332 18.3926L4.19824 17.8223L6.22949 14.7861L5.65332 18.3926ZM3.53613 17.4385L2.31445 16.4639L5.15039 14.1611L3.53613 17.4385ZM7.50879 11.9932L7.51074 11.9951L6.16504 13.3408H5.39648V12.5723L6.74023 11.2285V11.2266H7.50879V11.9932ZM10.2012 12.5723V13.3408H9.43262L8.08789 11.9951H8.08691V11.2266H8.85645L10.2012 12.5723ZM7.51074 9.88281L7.50879 9.88477V10.6494H6.74414L6.74219 10.6514L5.39648 9.30566V8.53711H6.16504L7.51074 9.88281ZM10.2012 9.30566L8.85645 10.6514L8.85449 10.6494H8.08691V9.88086H8.08984L9.43262 8.53711H10.2012V9.30566ZM15.5381 10.5078L11.8936 10.2676L15.3057 8.96289L15.5381 10.5078ZM15.0811 8.23145L11.5264 9.0752L14.4023 6.82324L15.0811 8.23145ZM13.9707 6.19336L10.8242 8.04688L12.9082 5.04688L13.9707 6.19336ZM5.14844 7.62207L2.3125 5.31934L3.53418 4.34473L5.14844 7.62207ZM12.3076 4.56836L9.84766 7.26758L10.9541 3.78711L12.3076 4.56836ZM6.22852 6.99707L4.19824 3.96094L5.65234 3.39062L6.22852 6.99707ZM10.2441 3.50684L8.68848 6.81152L8.7207 3.15918L10.2441 3.50684ZM7.44336 6.71875L6.39844 3.21875L7.95605 3.10156L7.44336 6.71875Z",
-                fill: fill
+                fill: _color
             }),
             /*#__PURE__*/ jsx("path", {
                 d: "M16.2491 16.2035L14.1802 18.5565H14.6703L16.4674 16.5138L17.9017 18.5565H19.5565L17.387 15.4673L19.5565 13.0001H19.0664L17.1698 15.1577L15.6547 13.0001H14M18.8895 18.1949H18.1366L14.6706 13.3439H15.4237",
-                fill: getColor('bg-default')
+                fill: getHexColorFromCSSVariable('bg-default')
             }),
             /*#__PURE__*/ jsx("path", {
                 d: "M16.2491 16.2035L14.1802 18.5565H14.6703L16.4674 16.5138L17.9017 18.5565H19.5565L17.387 15.4673L19.5565 13.0001H19.0664L17.1698 15.1577L15.6547 13.0001H14M18.8895 18.1949H18.1366L14.6706 13.3439H15.4237",
-                stroke: getColor('bg-default'),
+                stroke: getHexColorFromCSSVariable('bg-default'),
                 strokeWidth: 0.1,
                 strokeMiterlimit: 11.4737
             })
         ]
     });
 };
-UniversalXTwitterIcon_UniversalXTwitterIcon.displayName = 'UniversalXTwitterIcon|universal-x-twitter';
-const UniversalXTwitterIcon = UniversalXTwitterIcon_UniversalXTwitterIcon;
-export { UniversalXTwitterIcon as default };
+UniversalXTwitterIcon.displayName = 'UniversalXTwitterIcon|universal-x-twitter';
+const web_UniversalXTwitterIcon = UniversalXTwitterIcon;
+export { web_UniversalXTwitterIcon as default };

package/dist/web/UnlinkIcon.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 UnlinkIcon_UnlinkIcon = ({ 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 UnlinkIcon_UnlinkIcon = ({ size = 16, width = size, height = size, color =
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M20.3395 3.65799C19.2774 2.59636 17.8372 2 16.3356 2C14.8339 2 13.3937 2.59636 12.3316 3.65799L9.79493 6.19499L11.1296 7.52982L13.6662 5.01293C14.3849 4.37407 15.3203 4.03358 16.2814 4.06094C17.2425 4.0883 18.157 4.48145 18.8382 5.16015C19.5193 5.83886 19.9159 6.75196 19.9469 7.71311C19.9778 8.67426 19.6409 9.61101 19.0049 10.3322L16.4682 12.8692L17.8069 14.208L20.3436 11.671C21.4043 10.6075 22 9.16669 22 7.66451C22 6.16234 21.4043 4.72149 20.3436 3.65799H20.3395ZM10.2371 19.1091C9.5173 19.7531 8.57804 20.0967 7.61264 20.0691C6.64725 20.0415 5.72914 19.6448 5.04726 18.9608C4.36537 18.2768 3.97157 17.3573 3.94689 16.3917C3.92221 15.4261 4.26853 14.4878 4.91458 13.7698L7.45124 11.2328L6.11256 9.89394L3.55982 12.4309C2.5415 13.5018 1.98191 14.9283 2.00045 16.406C2.01898 17.8838 2.61417 19.2958 3.65902 20.3408C4.70388 21.3858 6.11568 21.981 7.59322 21.9996C9.07075 22.0181 10.497 21.4584 11.5678 20.44L14.1044 17.903L12.7698 16.5681L10.2371 19.1091ZM5.36483 4.13242C5.34567 4.11222 5.3226 4.09614 5.29703 4.08515C5.27146 4.07416 5.24392 4.06849 5.21608 4.06849C5.18825 4.06849 5.16071 4.07416 5.13514 4.08515C5.10957 4.09614 5.0865 4.11222 5.06734 4.13242L4.03017 5.16571C3.99137 5.20551 3.96966 5.25889 3.96966 5.31447C3.96966 5.37006 3.99137 5.42344 4.03017 5.46324L18.5385 19.9736C18.5783 20.0124 18.6317 20.0341 18.6873 20.0341C18.7429 20.0341 18.7962 20.0124 18.836 19.9736L19.8732 18.9363C19.9117 18.8971 19.9334 18.8444 19.9334 18.7895C19.9334 18.7346 19.9117 18.6819 19.8732 18.6428L5.36483 4.13242Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/UpdateIcon.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 UpdateIcon_UpdateIcon = ({ 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 UpdateIcon_UpdateIcon = ({ size = 16, width = size, height = size, color =
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M6.6 3H17.4C18.3548 3 19.2705 3.37928 19.9456 4.05442C20.6207 4.72955 21 5.64522 21 6.6V17.4C21 18.3548 20.6207 19.2705 19.9456 19.9456C19.2705 20.6207 18.3548 21 17.4 21H6.6C5.64522 21 4.72955 20.6207 4.05442 19.9456C3.37928 19.2705 3 18.3548 3 17.4V6.6C3 5.64522 3.37928 4.72955 4.05442 4.05442C4.72955 3.37928 5.64522 3 6.6 3ZM6.6 4.35C6.00326 4.35 5.43097 4.58705 5.00901 5.00901C4.58705 5.43097 4.35 6.00326 4.35 6.6V17.4C4.35 17.9967 4.58705 18.569 5.00901 18.991C5.43097 19.4129 6.00326 19.65 6.6 19.65H17.4C17.9967 19.65 18.569 19.4129 18.991 18.991C19.4129 18.569 19.65 17.9967 19.65 17.4V6.6C19.65 6.00326 19.4129 5.43097 18.991 5.00901C18.569 4.58705 17.9967 4.35 17.4 4.35H6.6ZM13.5777 9.0975L15.2058 8.5278C14.5309 7.90453 13.689 7.49149 12.7831 7.33924C11.8772 7.18699 10.9465 7.30212 10.105 7.67054C9.26348 8.03897 8.54761 8.64471 8.04498 9.41365C7.54236 10.1826 7.27478 11.0814 7.275 12C7.275 12.179 7.20388 12.3507 7.0773 12.4773C6.95071 12.6039 6.77902 12.675 6.6 12.675C6.42098 12.675 6.24929 12.6039 6.1227 12.4773C5.99612 12.3507 5.925 12.179 5.925 12C5.92487 10.716 6.3316 9.46492 7.08679 8.42645C7.84198 7.38797 8.90679 6.61549 10.1284 6.2199C11.3499 5.8243 12.6654 5.82594 13.886 6.22458C15.1066 6.62322 16.1695 7.39835 16.9221 8.4387C16.9838 8.52389 17.0248 8.62231 17.0417 8.72613C17.0586 8.82995 17.051 8.93629 17.0195 9.03665C16.9881 9.13702 16.9336 9.22864 16.8604 9.30421C16.7872 9.37978 16.6974 9.4372 16.5981 9.4719L14.0223 10.3719C13.8544 10.4267 13.6716 10.4135 13.5133 10.3351C13.3549 10.2567 13.2337 10.1194 13.1755 9.95258C13.1173 9.78577 13.1268 9.60279 13.202 9.44292C13.2772 9.28305 13.4121 9.15904 13.5777 9.0975ZM10.4142 14.9061L8.6826 15.483C9.35858 16.1028 10.2003 16.5125 11.1052 16.662C12.01 16.8116 12.9388 16.6946 13.7783 16.3254C14.6178 15.9561 15.3316 15.3505 15.8328 14.5825C16.334 13.8144 16.6009 12.9171 16.6008 12C16.6008 11.821 16.6719 11.6493 16.7985 11.5227C16.9251 11.3961 17.0968 11.325 17.2758 11.325C17.4548 11.325 17.6265 11.3961 17.7531 11.5227C17.8797 11.6493 17.9508 11.821 17.9508 12C17.9509 13.284 17.5442 14.5351 16.789 15.5736C16.0338 16.612 14.969 17.3845 13.7474 17.7801C12.5259 18.1757 11.2104 18.1741 9.98977 17.7754C8.76919 17.3768 7.7063 16.6017 6.9537 15.5613C6.8916 15.4755 6.85057 15.3762 6.83394 15.2716C6.81731 15.167 6.82553 15.0599 6.85795 14.959C6.89038 14.8582 6.94608 14.7664 7.02057 14.691C7.09505 14.6157 7.18622 14.559 7.2867 14.5254L9.9867 13.6254C10.0708 13.5973 10.1596 13.5861 10.248 13.5923C10.3365 13.5986 10.4228 13.6222 10.5021 13.6618C10.5814 13.7014 10.6521 13.7563 10.7103 13.8232C10.7684 13.8902 10.8127 13.9679 10.8408 14.052C10.8689 14.1361 10.8801 14.2249 10.8739 14.3133C10.8676 14.4018 10.844 14.4881 10.8044 14.5674C10.7648 14.6467 10.7099 14.7174 10.643 14.7756C10.576 14.8337 10.4983 14.878 10.4142 14.9061Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/UploadIcon.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 UploadIcon_UploadIcon = ({ 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,15 +13,15 @@ const UploadIcon_UploadIcon = ({ size = 16, width = size, height = size, color =
         children: [
             /*#__PURE__*/ jsx("path", {
                 d: "M2.72827 14.7885C2.87447 14.6423 3.07276 14.5602 3.27952 14.5602C3.48627 14.5602 3.68456 14.6423 3.83076 14.7885C3.97696 14.9347 4.05909 15.133 4.05909 15.3398V17.8422C4.05948 18.2022 4.20263 18.5472 4.45715 18.8018C4.71167 19.0563 5.05676 19.1994 5.4167 19.1998H18.581C18.9409 19.1994 19.286 19.0563 19.5405 18.8018C19.7951 18.5472 19.9382 18.2022 19.9386 17.8422V15.3398C19.9386 15.133 20.0207 14.9347 20.1669 14.7885C20.3131 14.6423 20.5114 14.5602 20.7182 14.5602C20.9249 14.5602 21.1232 14.6423 21.2694 14.7885C21.4156 14.9347 21.4977 15.133 21.4977 15.3398V17.8424C21.4969 18.6156 21.1893 19.357 20.6426 19.9038C20.0958 20.4505 19.3545 20.7581 18.5813 20.759H5.41655C4.64333 20.7581 3.90188 20.4505 3.35513 19.9038C2.80838 19.357 2.50083 18.6157 2.49994 17.8425V15.3398C2.49994 15.133 2.58207 14.9347 2.72827 14.7885Z",
-                fill: fill
+                fill: _color
             }),
             /*#__PURE__*/ jsx("path", {
                 d: "M11.927 16.5192C12.1338 16.5192 12.3321 16.437 12.4783 16.2908C12.6245 16.1446 12.7066 15.9463 12.7066 15.7396L12.7066 5.6779L17.0985 9.31018C17.2582 9.43915 17.4622 9.49996 17.6664 9.47943C17.8706 9.45891 18.0585 9.35869 18.1892 9.20053C18.32 9.04237 18.3831 8.83903 18.3649 8.63462C18.3467 8.4302 18.2487 8.24121 18.092 8.10865L18.0908 8.10765L12.442 3.43521C12.3001 3.31036 12.1172 3.24092 11.927 3.24092L11.927 16.5192Z",
-                fill: fill
+                fill: _color
             }),
             /*#__PURE__*/ jsx("path", {
                 d: "M11.927 16.5192C11.7203 16.5192 11.522 16.437 11.3758 16.2908C11.2296 16.1446 11.1475 15.9463 11.1475 15.7396L11.1475 5.6779L6.75558 9.31018C6.59594 9.43915 6.39189 9.49996 6.1877 9.47943C5.98351 9.45891 5.79564 9.35869 5.66487 9.20053C5.53409 9.04237 5.47096 8.83903 5.48916 8.63462C5.50737 8.4302 5.60544 8.24121 5.7621 8.10865L5.7633 8.10765L11.4121 3.43521C11.554 3.31036 11.7369 3.24092 11.927 3.24092L11.927 16.5192Z",
-                fill: fill
+                fill: _color
             })
         ]
     });