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

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
             })
         ]
     });

package/dist/web/UserBanIcon.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 UserBanIcon_UserBanIcon = ({ 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 UserBanIcon_UserBanIcon = ({ size = 16, width = size, height = size, color
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M17.0898 12.8887C18.2833 12.8887 19.4276 13.3631 20.2715 14.207C21.1154 15.0509 21.5898 16.1952 21.5898 17.3887C21.5898 18.5821 21.1154 19.7264 20.2715 20.5703C19.4276 21.4142 18.2833 21.8887 17.0898 21.8887C16.499 21.8887 15.9141 21.772 15.3682 21.5459C14.8222 21.3198 14.3261 20.9882 13.9082 20.5703C13.4903 20.1524 13.1588 19.6563 12.9326 19.1104C12.7065 18.5645 12.5898 17.9795 12.5898 17.3887C12.5898 16.7978 12.7065 16.2129 12.9326 15.667C13.1588 15.121 13.4903 14.6249 13.9082 14.207C14.3261 13.7892 14.8222 13.4576 15.3682 13.2314C15.9141 13.0054 16.499 12.8887 17.0898 12.8887ZM10.6016 2.11133C12.058 2.11133 13.4565 2.68405 14.4941 3.70605C15.5317 4.7282 16.1256 6.11788 16.1475 7.57422C16.1475 9.64047 15.0051 11.4222 13.3301 12.376C13.4781 12.4215 13.6253 12.4708 13.7705 12.5244L13.7812 12.5264C13.8012 12.5351 13.8226 12.5404 13.8438 12.5479L13.8359 12.5645C13.9261 12.5662 14.0153 12.588 14.0957 12.6289C14.1761 12.6698 14.2463 12.7288 14.3008 12.8008C14.3551 12.8727 14.3926 12.9565 14.4102 13.0449C14.4276 13.1332 14.4251 13.2245 14.4023 13.3115C14.3795 13.3986 14.3368 13.4794 14.2783 13.5479C14.2197 13.6163 14.146 13.671 14.0635 13.707C13.9809 13.743 13.8908 13.7595 13.8008 13.7559C13.7107 13.7521 13.6224 13.7282 13.543 13.6855C13.483 13.6855 13.4288 13.6683 13.375 13.6533V13.6514L13.3711 13.6602C12.5776 13.3591 11.719 13.3193 10.8193 13.3193C6.93561 13.3193 3.90183 16.268 3.74805 20.1143H3.73535C3.7366 20.1305 3.7441 20.143 3.74414 20.1592C3.74414 20.4928 3.43164 20.7625 3.01562 20.7627C2.68188 20.7627 2.41113 20.4917 2.41113 20.1592C2.41117 20.143 2.41868 20.1305 2.41992 20.1143H2.41016C2.4688 18.421 3.03744 16.785 4.04102 15.4199C5.0446 14.0548 6.43645 13.024 8.03516 12.4629C6.27145 11.5341 5.05664 9.70544 5.05664 7.57422C5.07853 6.11788 5.67236 4.7282 6.70996 3.70605C7.74745 2.68418 9.14533 2.11145 10.6016 2.11133ZM15.0527 20.0371C15.6346 20.4923 16.3511 20.7416 17.0898 20.7441C17.9796 20.7441 18.8327 20.3899 19.4619 19.7607C20.0911 19.1316 20.4453 18.2785 20.4453 17.3887C20.4453 16.7299 20.2487 16.1196 19.9199 15.5996L15.0527 20.0371ZM17.0898 14.0332C16.6493 14.0332 16.2127 14.1205 15.8057 14.2891C15.3987 14.4577 15.0293 14.7051 14.7178 15.0166C14.4063 15.3281 14.1588 15.6975 13.9902 16.1045C13.8216 16.5115 13.7344 16.9481 13.7344 17.3887H13.7363C13.7376 18.0222 13.9194 18.6422 14.2607 19.1758L19.127 14.7383C18.545 14.2837 17.8283 14.0354 17.0898 14.0332ZM10.6025 3.25977C9.45866 3.2598 8.36166 3.71372 7.55273 4.52246C6.74375 5.33145 6.28906 6.42916 6.28906 7.57324C6.28911 8.71726 6.74379 9.8141 7.55273 10.623C8.36169 11.432 9.45852 11.8867 10.6025 11.8867C11.7466 11.8867 12.8443 11.432 13.6533 10.623C14.4621 9.81414 14.916 8.7171 14.916 7.57324C14.916 6.42918 14.4623 5.33144 13.6533 4.52246C12.8443 3.71348 11.7466 3.25977 10.6025 3.25977Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/UserFollowIcon.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 UserFollowIcon_UserFollowIcon = ({ 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 UserFollowIcon_UserFollowIcon = ({ size = 16, width = size, height = size,
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M16.9344 14.083C17.3605 14.083 17.7057 14.4284 17.7058 14.8545V17.1699H20.0213C20.4473 17.17 20.7927 17.5153 20.7928 17.9414C20.7928 18.3675 20.4474 18.7128 20.0213 18.7129H17.7058V21.0283C17.7057 21.4544 17.3605 21.7998 16.9344 21.7998C16.5084 21.7996 16.163 21.4543 16.1629 21.0283V18.7129H13.8474C13.4214 18.7127 13.076 18.3675 13.076 17.9414C13.076 17.5154 13.4215 17.1701 13.8474 17.1699H16.1629V14.8545C16.163 14.4285 16.5084 14.0832 16.9344 14.083ZM11.1951 2.2002C14.1833 2.20041 16.6052 4.62308 16.6053 7.61133C16.6051 9.82266 15.2784 11.7224 13.3777 12.5615C13.7204 12.7122 13.9111 13.094 13.8113 13.4668C13.7009 13.8785 13.2777 14.1231 12.866 14.0127C12.3335 13.87 11.7727 13.793 11.1931 13.793C7.63508 13.7931 4.75001 16.6782 4.74979 20.2363C4.74967 20.6624 4.40443 21.0078 3.9783 21.0078C3.55228 21.0077 3.20693 20.6624 3.20682 20.2363C3.207 16.5859 5.65696 13.5093 9.00174 12.5566C7.10681 11.715 5.78412 9.81835 5.78397 7.61133C5.78398 4.6231 8.20692 2.20043 11.1951 2.2002ZM11.1951 3.74316C9.05932 3.7434 7.32695 5.4755 7.32693 7.61133C7.32715 9.74699 9.05944 11.4783 11.1951 11.4785C13.3308 11.4783 15.0621 9.747 15.0623 7.61133C15.0623 5.47548 13.3309 3.74338 11.1951 3.74316Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/UserIcon.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 UserIcon_UserIcon = ({ 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 UserIcon_UserIcon = ({ size = 16, width = size, height = size, color = 'cu
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M15.1429 12.5C16.7143 11.5 17.7143 9.71429 17.7143 7.71429C17.7143 4.57143 15.1429 2 12 2C8.85714 2 6.28571 4.57143 6.28571 7.71429C6.28571 9.71429 7.28571 11.5 8.85714 12.5C4.85714 13.7857 2 17.5714 2 22H3.42857C3.42857 17.2857 7.28571 13.4286 12 13.4286C16.7143 13.4286 20.5714 17.2857 20.5714 22H22C22 17.5714 19.1429 13.7857 15.1429 12.5ZM12 12C9.64286 12 7.71429 10.0714 7.71429 7.71429C7.71429 5.35714 9.64286 3.42857 12 3.42857C14.3571 3.42857 16.2857 5.35714 16.2857 7.71429C16.2857 10.0714 14.3571 12 12 12Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/UserStarIcon.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 UserStarIcon_UserStarIcon = ({ 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 UserStarIcon_UserStarIcon = ({ size = 16, width = size, height = size, col
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M16.3164 14.7363C16.4962 14.1839 17.2782 14.1839 17.458 14.7363L17.9072 16.1191C17.9875 16.3663 18.2177 16.5341 18.4775 16.5342H19.9316C20.5129 16.5342 20.7544 17.2775 20.2842 17.6191L19.1084 18.4746C18.8982 18.6274 18.8105 18.8974 18.8906 19.1445L19.3398 20.5273C19.5195 21.0801 18.8862 21.5399 18.416 21.1982L17.2402 20.3438C17.0299 20.191 16.7445 20.191 16.5342 20.3438L15.3584 21.1982C14.8882 21.5399 14.255 21.0801 14.4346 20.5273L14.8848 19.1445C14.9648 18.8975 14.8761 18.6273 14.666 18.4746L13.4902 17.6191C13.0201 17.2775 13.2616 16.5342 13.8428 16.5342H15.2969C15.5567 16.5341 15.7869 16.3663 15.8672 16.1191L16.3164 14.7363ZM11.998 3.42969C14.8383 3.42969 17.1415 5.73207 17.1416 8.57227L17.1348 8.83691C17.0332 10.8424 15.7818 12.5433 14.0273 13.2979C14.3584 13.4242 14.5479 13.7801 14.4541 14.1299C14.3538 14.5031 13.97 14.7241 13.5967 14.624C13.0877 14.4876 12.5519 14.4151 11.998 14.415C8.59755 14.415 5.84082 17.1718 5.84082 20.5723C5.84067 20.9587 5.52713 21.2725 5.14062 21.2725C4.75412 21.2725 4.44058 20.9587 4.44043 20.5723C4.44043 17.1045 6.77683 14.1834 9.96094 13.2939C8.13448 12.5045 6.85547 10.6885 6.85547 8.57227C6.85562 5.73217 9.15795 3.42984 11.998 3.42969ZM11.998 4.83008C9.93115 4.83023 8.25601 6.50536 8.25586 8.57227C8.25586 10.6393 9.93105 12.3153 11.998 12.3154C14.0652 12.3154 15.7412 10.6394 15.7412 8.57227C15.7411 6.50527 14.0651 4.83008 11.998 4.83008Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/UserTieIcon.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 UserTieIcon_UserTieIcon = ({ 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 UserTieIcon_UserTieIcon = ({ size = 16, width = size, height = size, color
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M14.1392 19.5273L11.9966 22L9.85596 19.5273L11.2642 15.8447H12.6157L14.1392 19.5273ZM12.2476 2.00684C15.1635 2.15496 17.4829 4.56677 17.4829 7.51953L17.4751 7.80371C17.3661 9.95041 16.0299 11.7713 14.1548 12.584C17.5974 13.5158 20.1313 16.6613 20.1313 20.3984C20.131 20.8043 19.8009 21.1334 19.395 21.1338C18.9888 21.1338 18.6591 20.8046 18.6587 20.3984C18.6587 17.3633 16.6163 14.8055 13.8315 14.0225C13.7828 14.0196 13.7331 14.0131 13.6841 14C13.5594 13.9666 13.4328 13.9372 13.3052 13.9111L12.6675 15.0352H11.2397L10.5278 13.9502C10.457 13.9666 10.3859 13.9813 10.3159 14C10.2667 14.0132 10.2165 14.0195 10.1675 14.0225C7.38265 14.8055 5.34134 17.3633 5.34131 20.3984C5.34094 20.8043 5.01084 21.1334 4.60498 21.1338C4.19878 21.1338 3.86902 20.8046 3.86865 20.3984C3.86868 16.6772 6.38011 13.5433 9.80029 12.5967C7.90999 11.7904 6.56018 9.96134 6.45068 7.80371L6.44385 7.51953C6.44389 4.47146 8.91535 2.00024 11.9634 2L12.2476 2.00684ZM11.9634 3.47168C9.72822 3.47192 7.91557 5.28433 7.91553 7.51953C7.91563 9.75469 9.72826 11.5662 11.9634 11.5664C14.1985 11.5662 16.0102 9.75468 16.0103 7.51953C16.0102 5.28433 14.1985 3.47193 11.9634 3.47168Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/UsersIcon.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 UsersIcon_UsersIcon = ({ 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 UsersIcon_UsersIcon = ({ size = 16, width = size, height = size, color = '
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M16.2857 4.91667C15.1027 4.91667 14.1429 5.86849 14.1429 7.04167C14.1429 8.21484 15.1027 9.16667 16.2857 9.16667C17.4688 9.16667 18.4286 8.21484 18.4286 7.04167C18.4286 5.86849 17.4688 4.91667 16.2857 4.91667ZM7.71429 4.91667C6.53125 4.91667 5.57143 5.86849 5.57143 7.04167C5.57143 8.21484 6.53125 9.16667 7.71429 9.16667C8.89732 9.16667 9.85714 8.21484 9.85714 7.04167C9.85714 5.86849 8.89732 4.91667 7.71429 4.91667ZM16.2857 3.5C18.2589 3.5 19.8571 5.0849 19.8571 7.04167C19.8571 8.99844 18.2589 10.5833 16.2857 10.5833C14.3125 10.5833 12.7143 8.99844 12.7143 7.04167C12.7143 5.0849 14.3125 3.5 16.2857 3.5ZM7.71429 3.5C9.6875 3.5 11.2857 5.0849 11.2857 7.04167C11.2857 8.99844 9.6875 10.5833 7.71429 10.5833C5.74107 10.5833 4.14286 8.99844 4.14286 7.04167C4.14286 5.0849 5.74107 3.5 7.71429 3.5ZM17 12C19.7612 12 22 14.2202 22 16.9583V19.7917H20.5714V16.9583C20.5714 15.0547 19.0558 13.5008 17.154 13.4189L17 13.4167H15.5714C13.6518 13.4167 12.0848 14.9197 12.0022 16.8056L12 16.9583V19.7917H10.5714V16.9583C10.5714 15.5704 11.1473 14.3154 12.0737 13.4167H7C5.08036 13.4167 3.51339 14.9197 3.4308 16.8056L3.42857 16.9583V19.7917H2V16.9583C2 14.2202 4.23884 12 7 12H17ZM21.2857 19.0833C21.6808 19.0833 22 19.3999 22 19.7917C22 20.1835 21.6808 20.5 21.2857 20.5C20.8906 20.5 20.5714 20.1835 20.5714 19.7917C20.5714 19.3999 20.8906 19.0833 21.2857 19.0833ZM11.2857 19.0833C11.6808 19.0833 12 19.3999 12 19.7917C12 20.1835 11.6808 20.5 11.2857 20.5C10.8906 20.5 10.5714 20.1835 10.5714 19.7917C10.5714 19.3999 10.8906 19.0833 11.2857 19.0833ZM2.71429 19.0833C3.10938 19.0833 3.42857 19.3999 3.42857 19.7917C3.42857 20.1835 3.10938 20.5 2.71429 20.5C2.3192 20.5 2 20.1835 2 19.7917C2 19.3999 2.3192 19.0833 2.71429 19.0833Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/VideoIcon.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 VideoIcon_VideoIcon = ({ 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 VideoIcon_VideoIcon = ({ size = 16, width = size, height = size, color = '
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M21.093 6.48815C20.6047 6.27884 20.0465 6.41838 19.6977 6.76721L17.1163 8.86024V7.81373C17.1163 6.62768 16.2093 5.7207 15.0233 5.7207H4.09302C2.90698 5.7207 2 6.62768 2 7.81373V16.1858C2 17.3719 2.90698 18.2788 4.09302 18.2788H15.0233C16.2093 18.2788 17.1163 17.3719 17.1163 16.1858V15.0695L19.6977 17.1626C20.1163 17.5114 20.6047 17.6509 21.093 17.4416C21.6512 17.2323 22 16.6742 22 15.9765V7.95326C22 7.32535 21.6512 6.76722 21.093 6.48815ZM15.7209 16.1858C15.7209 16.6044 15.4419 16.8835 15.0233 16.8835H4.09302C3.67442 16.8835 3.39535 16.6044 3.39535 16.1858V7.81373C3.39535 7.39512 3.67442 7.11605 4.09302 7.11605H15.0233C15.4419 7.11605 15.7209 7.39512 15.7209 7.81373V16.1858ZM20.6047 16.0463V16.1161L17.1163 13.2556V10.6742L20.6047 7.81373V16.0463Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/Volume1Icon.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 Volume1Icon = ({ 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 Volume1Icon = ({ size = 16, width = size, height = size, color = 'currentC
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M14.5482 3.94128C14.1555 3.69742 13.676 3.65815 13.1955 3.88238L7.02135 7.47942H3.98335C3.27862 7.47942 2.69995 8.05498 2.69995 8.75662V15.2387C2.69995 15.9404 3.27862 16.5149 3.98335 16.5149H7.02135L13.2441 20.1419C13.4208 20.2287 13.6161 20.268 13.8124 20.268C14.0677 20.268 14.3229 20.1998 14.5378 20.053C14.9305 19.8102 15.1651 19.3814 15.1651 18.9226V5.08208C15.1651 4.61398 14.9305 4.18515 14.5482 3.94128ZM6.55118 15.2191L4.00298 15.2387L3.98335 8.78555H6.55118V15.2191ZM13.8517 18.9804L7.85422 15.4816V8.50345L13.8321 5.02318L13.862 18.9226L13.8517 18.9815V18.9804ZM21.3 11.7988C21.2994 11.9723 21.23 12.1386 21.107 12.261C20.9839 12.3835 20.8174 12.4521 20.6438 12.4518H17.6647C17.5787 12.4521 17.4934 12.4354 17.4138 12.4027C17.3342 12.3701 17.2619 12.322 17.2008 12.2614C17.1398 12.2008 17.0913 12.1287 17.0581 12.0493C17.025 11.9699 17.0078 11.8848 17.0075 11.7988C17.0075 11.4371 17.302 11.1457 17.6647 11.1457H20.6438C21.0055 11.1457 21.3 11.4381 21.3 11.7988ZM17.115 8.48485C17.0201 8.34228 16.9855 8.168 17.0186 7.99999C17.0517 7.83198 17.1498 7.68386 17.2917 7.58792L19.8791 5.87258C19.9493 5.81952 20.0295 5.78129 20.1149 5.76023C20.2003 5.73917 20.289 5.73571 20.3758 5.75008C20.4626 5.76444 20.5455 5.79631 20.6196 5.84376C20.6936 5.89122 20.7572 5.95325 20.8065 6.02608C20.8558 6.09891 20.8898 6.18102 20.9063 6.2674C20.9229 6.35378 20.9217 6.44262 20.9028 6.52852C20.8839 6.61441 20.8477 6.69556 20.7964 6.76702C20.7451 6.83847 20.6798 6.89874 20.6045 6.94415L18.0171 8.65948C17.9109 8.73271 17.7843 8.77034 17.6554 8.76695C17.5484 8.77171 17.4421 8.74812 17.3472 8.69858C17.2523 8.64905 17.1722 8.57531 17.115 8.48485ZM20.6045 16.643C20.9083 16.8383 20.9869 17.2475 20.7802 17.54C20.6822 17.6833 20.5322 17.7827 20.362 17.8173C20.1918 17.8518 20.0149 17.8187 19.8688 17.7249L17.2824 16.0096C17.2105 15.9635 17.1486 15.9033 17.1006 15.8327C17.0526 15.7622 17.0193 15.6826 17.0028 15.5988C16.9863 15.515 16.9869 15.4288 17.0046 15.3452C17.0222 15.2617 17.0566 15.1826 17.1057 15.1127C17.1525 15.0411 17.2132 14.9796 17.2843 14.9318C17.3553 14.8841 17.4351 14.851 17.5191 14.8347C17.6031 14.8183 17.6895 14.8189 17.7733 14.8365C17.857 14.8541 17.9364 14.8882 18.0067 14.937L20.6045 16.643Z",
-            fill: fill,
-            stroke: stroke,
+            fill: _color,
+            stroke: _color,
             strokeWidth: 0.206667
         })
     });

package/dist/web/VolumeIcon.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 VolumeIcon_VolumeIcon = ({ 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 VolumeIcon_VolumeIcon = ({ size = 16, width = size, height = size, color =
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M10.3359 4.69601C10.9943 4.19001 11.7763 3.77889 12.6115 4.13251C13.4395 4.48182 13.704 5.32564 13.819 6.15364C13.9369 7.0032 13.9369 8.17332 13.9369 9.62807V15.1466C13.9369 16.6014 13.9369 17.7715 13.8204 18.6211C13.7054 19.4505 13.4395 20.2929 12.6129 20.6422C11.7763 20.9958 10.9943 20.5847 10.3359 20.0801C9.66175 19.5626 8.851 18.7346 7.84475 17.7083L7.80163 17.6623C7.28413 17.1347 6.94056 16.8788 6.59413 16.7351C6.24338 16.5913 5.81931 16.5295 5.079 16.5295H5.04163C4.4005 16.5295 3.86431 16.5295 3.43163 16.485C2.97594 16.4375 2.55331 16.334 2.17238 16.0753C1.44931 15.5808 1.17188 14.8577 1.0655 14.1921C0.989313 13.6948 0.997938 13.1485 1.00513 12.7115C1.00858 12.4949 1.00858 12.2783 1.00513 12.0618C0.9965 11.6248 0.989313 11.0785 1.06694 10.5826C1.17188 9.91845 1.44931 9.19395 2.17381 8.69945C2.55331 8.4407 2.97594 8.3372 3.43019 8.2912C3.96582 8.25023 4.50309 8.23488 5.04019 8.2452H5.079C5.81931 8.2452 6.24338 8.18482 6.59269 8.03964C6.94056 7.89589 7.28269 7.64145 7.80019 7.11389L7.84475 7.06789C8.851 6.04008 9.66175 5.21351 10.3359 4.69601ZM11.2114 5.83595C10.6292 6.28157 9.88888 7.03626 8.828 8.1187C8.26306 8.6937 7.7585 9.11345 7.14181 9.36933C6.528 9.62232 5.87681 9.6827 5.079 9.6827C4.39044 9.6827 3.929 9.6827 3.57969 9.72008C3.24188 9.75601 3.08663 9.81783 2.98313 9.88826C2.70425 10.078 2.55619 10.3641 2.48575 10.8083C2.42825 11.1676 2.43544 11.5385 2.44263 11.9568L2.4455 12.3881C2.4455 12.5361 2.44406 12.6799 2.44119 12.8179C2.43544 13.2348 2.42969 13.6056 2.48575 13.9665C2.55619 14.4092 2.70425 14.6967 2.98313 14.8865C3.08663 14.9569 3.24188 15.0187 3.57969 15.0532C3.93044 15.0891 4.39044 15.0906 5.079 15.0906C5.87538 15.0906 6.528 15.151 7.14181 15.4054C7.7585 15.6598 8.26306 16.0781 8.828 16.6546C9.88888 17.737 10.6292 18.4903 11.2114 18.9388C11.818 19.4045 12.0006 19.3398 12.0523 19.3168C12.1113 19.2924 12.2895 19.1946 12.3959 18.4227C12.4979 17.6838 12.4994 16.6143 12.4994 15.0834V9.68989C12.4994 8.16039 12.4994 7.09089 12.3959 6.35201C12.2895 5.58007 12.1112 5.48089 12.0509 5.45645C12.0006 5.43489 11.818 5.3702 11.2114 5.83595ZM15.6576 8.94095C15.7326 8.88364 15.8182 8.84166 15.9094 8.81744C16.0007 8.79321 16.0958 8.78719 16.1894 8.79974C16.283 8.81229 16.3732 8.84315 16.4548 8.89057C16.5365 8.93798 16.608 9.00102 16.6652 9.07608C17.3596 9.98458 17.7721 11.1375 17.7721 12.3866C17.7721 13.6358 17.3596 14.7873 16.6652 15.6972C16.6091 15.7751 16.538 15.841 16.456 15.891C16.3739 15.9409 16.2828 15.974 16.1878 15.9881C16.0928 16.0022 15.9959 15.9972 15.9029 15.9733C15.8099 15.9493 15.7226 15.907 15.6463 15.8488C15.5699 15.7906 15.506 15.7176 15.4583 15.6343C15.4105 15.551 15.38 15.4589 15.3685 15.3636C15.3569 15.2682 15.3646 15.1716 15.391 15.0792C15.4175 14.9869 15.4622 14.9008 15.5224 14.8261C16.053 14.1239 16.3379 13.2667 16.3332 12.3866C16.3379 11.5066 16.053 10.6494 15.5224 9.9472C15.4071 9.79576 15.3566 9.60478 15.3819 9.41614C15.4073 9.22749 15.5064 9.0566 15.6576 8.94095ZM19.4986 7.10957C19.368 6.97664 19.191 6.89958 19.0048 6.89464C18.8185 6.8897 18.6376 6.95727 18.5003 7.0831C18.3629 7.20893 18.2797 7.38319 18.2683 7.56914C18.2569 7.7551 18.3181 7.93821 18.4391 8.07989C19.5273 9.27014 20.167 10.768 20.167 12.3866C20.167 14.0053 19.5273 15.5031 18.4391 16.6919C18.3103 16.8324 18.2425 17.0184 18.2507 17.2088C18.2589 17.3993 18.3425 17.5787 18.483 17.7075C18.6235 17.8364 18.8094 17.9042 18.9998 17.896C19.1903 17.8877 19.3697 17.8042 19.4986 17.6637C20.8067 16.2348 21.6045 14.3977 21.6045 12.3866C21.6045 10.3741 20.8067 8.53845 19.4986 7.10957Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/WalletBackupIcon.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 WalletBackupIcon_WalletBackupIcon = ({ 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 WalletBackupIcon_WalletBackupIcon = ({ size = 16, width = size, height = s
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M19.6055 6.62598C21.0517 6.60616 22.2443 7.76662 22.2646 9.21582L22.3906 18.2812C22.4105 19.7273 21.2507 20.92 19.8047 20.9404L7.82129 21.1064C6.37507 21.1265 5.18246 19.9667 5.16211 18.5205L5.03613 9.45215C5.01609 8.00577 6.17667 6.81306 7.62305 6.79297L19.6055 6.62598ZM7.6416 8.15625C6.9469 8.16591 6.38723 8.74092 6.39648 9.43555L6.52246 18.501C6.53224 19.1958 7.10789 19.7557 7.80273 19.7461L19.7852 19.5801C20.4798 19.5702 21.0398 18.9945 21.0303 18.2998L21.0039 16.3896L17.6367 16.4365C16.1905 16.4566 14.9978 15.2968 14.9775 13.8506C14.9577 12.4044 16.1172 11.2125 17.5635 11.1924L20.9316 11.1455L20.9053 9.23438C20.8953 8.53993 20.3194 7.98098 19.625 7.99023L7.6416 8.15625ZM6.20117 9.43848L6.32715 18.5039C6.32775 18.5473 6.3316 18.5904 6.33594 18.6328L6.32812 18.5039L6.20215 9.43848C6.20147 9.38851 6.20274 9.33881 6.20703 9.29004C6.20273 9.33889 6.20048 9.38841 6.20117 9.43848ZM15.6074 3C17.0539 3.00017 18.2302 4.17659 18.2305 5.62598V6.11914H16.8701V5.62598C16.8699 4.93124 16.3022 4.36443 15.6074 4.36426H3.62305C2.92823 4.36434 2.36057 4.93119 2.36035 5.62598V14.6924C2.36055 15.3872 2.92821 15.955 3.62305 15.9551H4.60742V17.3154H3.62305C2.17668 17.3154 1.0002 16.1387 1 14.6924V5.62305C1.00003 4.17656 2.17657 3.00008 3.62305 3H15.6074ZM17.4004 16.2334L17.6338 16.2412C17.5543 16.2423 17.4751 16.2389 17.3975 16.2324L17.4004 16.2334ZM17.582 12.5527C16.8874 12.5626 16.3275 13.1374 16.3369 13.832C16.3469 14.5266 16.9226 15.0857 17.6172 15.0762L20.9854 15.0303L20.9502 12.5059L17.582 12.5527ZM18.2324 13.124C18.6095 13.1192 18.9176 13.4197 18.9229 13.7969C18.9276 14.1737 18.6279 14.4819 18.251 14.4873L17.6035 14.4971C17.2264 14.5023 16.9167 14.2013 16.9111 13.8242C16.9061 13.447 17.2077 13.138 17.585 13.1328L18.2324 13.124ZM18.7275 13.7988C18.7284 13.8645 18.716 13.927 18.6934 13.9844C18.7044 13.9564 18.715 13.9277 18.7207 13.8975L18.7285 13.7998C18.7283 13.7848 18.7252 13.7697 18.7236 13.7549C18.7251 13.7693 18.7273 13.7841 18.7275 13.7988ZM16.1416 13.834C16.1422 13.8773 16.1461 13.9205 16.1504 13.9629L16.1426 13.834C16.1419 13.7841 16.1432 13.7342 16.1475 13.6855C16.1432 13.7343 16.1409 13.784 16.1416 13.834ZM18.7188 13.7188C18.7177 13.7131 18.7189 13.7067 18.7178 13.7012C18.7157 13.6918 18.7106 13.683 18.708 13.6738C18.712 13.6885 18.7161 13.7035 18.7188 13.7188ZM20.0029 7.8418C19.9741 7.83438 19.9446 7.82596 19.915 7.82031L19.9053 7.81934C19.9381 7.82538 19.9709 7.83358 20.0029 7.8418ZM15.9951 4.22266C15.9639 4.214 15.9324 4.20483 15.9004 4.19824L15.8916 4.19727C15.9265 4.20423 15.9611 4.21323 15.9951 4.22266Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/WalletCreateIcon.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 WalletCreateIcon_WalletCreateIcon = ({ 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 WalletCreateIcon_WalletCreateIcon = ({ size = 16, width = size, height = s
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M18.7676 4.47705C19.9263 4.47705 20.8711 5.42182 20.8711 6.58057V17.4194C20.8708 18.578 19.9262 19.5229 18.7676 19.5229H5.23242C4.07393 19.5228 3.12917 18.5779 3.12891 17.4194V6.58057C3.12891 5.42189 4.07377 4.47716 5.23242 4.47705H18.7676ZM4.62793 17.4194C4.62819 17.7513 4.89638 18.0199 5.23242 18.02H18.7676C19.1007 18.02 19.3718 17.751 19.3721 17.4194V9.72412H4.62793V17.4194ZM8.45117 14.395C8.86547 14.3953 9.19987 14.7297 9.2002 15.144C9.2002 15.5586 8.86567 15.8937 8.45117 15.894H6.57715C6.16251 15.8939 5.82812 15.5587 5.82812 15.144C5.82845 14.7292 6.1665 14.3952 6.57715 14.395H8.45117ZM5.23242 5.979C4.89919 5.97911 4.62793 6.24882 4.62793 6.58057V8.2251H19.3721V6.58057C19.3721 6.24838 19.1039 5.979 18.7676 5.979H5.23242Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/WalletIcon.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 WalletIcon_WalletIcon = ({ 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 WalletIcon_WalletIcon = ({ size = 16, width = size, height = size, color =
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M18.3047 3.40039C19.5816 3.40057 20.5995 4.55491 20.5996 5.95312V18.0469C20.5995 19.4451 19.5816 20.5994 18.3047 20.5996H5.69531C4.4185 20.5994 3.40047 19.445 3.40039 18.0469V5.95312C3.40047 4.55496 4.4185 3.40064 5.69531 3.40039H18.3047ZM5.69531 4.9541C5.2143 4.95435 4.8116 5.3871 4.81152 5.95312V18.0469C4.81161 18.6123 5.22283 19.0456 5.69531 19.0459H18.3047C18.7852 19.0457 19.1884 18.6034 19.1885 18.0469V15.4492H14.3867C12.6725 15.449 11.29 13.8869 11.29 12C11.29 10.1131 12.6725 8.55098 14.3867 8.55078H19.1885V5.95312C19.1884 5.38768 18.7772 4.95428 18.3047 4.9541H5.69531ZM14.3867 10.0947C13.4683 10.0949 12.7012 10.9355 12.7012 11.9902C12.7014 13.0448 13.4684 13.8846 14.3867 13.8848H19.1885V10.0947H14.3867ZM15.6074 11.0146C16.1101 11.0146 16.5 11.4669 16.5 12C16.5 12.5331 16.1101 12.9854 15.6074 12.9854H15.6055C15.1067 12.9737 14.7148 12.5353 14.7148 12C14.7148 11.467 15.1049 11.0149 15.6074 11.0146Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/WalletPasswordIcon.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 WalletPasswordIcon_WalletPasswordIcon = ({ 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 WalletPasswordIcon_WalletPasswordIcon = ({ size = 16, width = size, height
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M14.209 15.9219C14.4435 15.922 14.63 16.1194 14.6162 16.3535L14.5635 17.25L15.4492 16.7158C15.6299 16.6068 15.8645 16.663 15.9766 16.8418C16.0999 17.0394 16.0221 17.3009 15.8105 17.3984L14.9121 17.8115L15.8105 18.2256C16.0221 18.323 16.1007 18.5837 15.9775 18.7812C15.8655 18.9604 15.6301 19.0164 15.4492 18.9072L14.5635 18.373L14.6162 19.2695C14.63 19.5036 14.4434 19.7019 14.209 19.7021C13.9743 19.702 13.7877 19.5037 13.8018 19.2695L13.8574 18.373L12.9707 18.9082C12.7898 19.0168 12.5553 18.9602 12.4434 18.7812C12.3198 18.5836 12.3978 18.3223 12.6094 18.2246L13.5039 17.8115L12.6094 17.3984C12.3979 17.3008 12.3201 17.0394 12.4434 16.8418C12.5554 16.6631 12.79 16.6071 12.9707 16.7158L13.8574 17.251L13.8018 16.3545C13.7873 16.12 13.974 15.922 14.209 15.9219ZM19.6592 15.9219C19.8937 15.9221 20.0802 16.1194 20.0664 16.3535L20.0127 17.25L20.8994 16.7158C21.0801 16.6069 21.3147 16.663 21.4268 16.8418C21.5502 17.0395 21.4725 17.301 21.2607 17.3984L20.3623 17.8115L21.2607 18.2256C21.4723 18.3231 21.5503 18.5836 21.4268 18.7812C21.3148 18.9602 21.0802 19.017 20.8994 18.9082L20.0127 18.373L20.0664 19.2695C20.0802 19.5037 19.8937 19.7021 19.6592 19.7021C19.4243 19.702 19.2376 19.503 19.252 19.2686L19.3076 18.3721L18.4219 18.9082C18.241 19.0172 18.0066 18.9602 17.8945 18.7812C17.771 18.5837 17.8481 18.3224 18.0596 18.2246L18.9551 17.8115L18.0596 17.3984C17.8483 17.3008 17.7706 17.0403 17.8936 16.8428C18.0056 16.6635 18.2409 16.6066 18.4219 16.7158L19.3076 17.251L19.252 16.3545C19.2376 16.1201 19.4244 15.9221 19.6592 15.9219ZM17.6973 4.07422C19.2554 4.07438 20.5219 5.34232 20.5225 6.90332V14.627L20.3096 14.623L14.8213 14.5391L14.7979 14.54L14.7764 14.5342C13.5335 14.2382 12.6046 13.1208 12.6045 11.7871C12.605 10.2293 13.8717 8.96204 15.4297 8.96191L19.0566 8.96094L19.0576 6.90332C19.057 6.15517 18.4456 5.54404 17.6973 5.54395H4.78711C4.03893 5.54414 3.42734 6.15516 3.42676 6.90332V16.6709C3.42686 17.4192 4.03802 18.0306 4.78613 18.0312H11.5723L11.5693 18.2441L11.5566 19.2881L11.5547 19.4951L4.78711 19.4961C3.22906 19.4958 1.96196 18.2291 1.96191 16.6709V6.90039C1.96223 5.34252 3.22911 4.07544 4.78711 4.0752L17.6973 4.07422ZM4.04004 18.0518C4.12863 18.1 4.22256 18.1393 4.32031 18.1699C4.22257 18.1393 4.12863 18.1 4.04004 18.0518ZM2.22461 17.1973H2.22559H2.22461ZM3.24902 16.9873C3.25948 17.0381 3.27284 17.0878 3.28809 17.1367C3.27273 17.0875 3.25952 17.0374 3.24902 16.9863V16.9873ZM14.0244 13.9902C14.1045 14.0413 14.1888 14.0856 14.2744 14.1279C14.1888 14.0856 14.1045 14.0413 14.0244 13.9902ZM13.5283 13.5801C13.5525 13.6057 13.5793 13.6287 13.6045 13.6533C13.5281 13.5788 13.4546 13.5013 13.3877 13.418L13.5283 13.5801ZM15.4297 13.3574V13.3564V13.3574ZM15.4297 10.4277C14.6813 10.428 14.0696 11.0398 14.0693 11.7881C14.0697 12.5362 14.6811 13.1463 15.4297 13.1465H19.0566V10.4277H15.4297ZM12.9668 12.667L12.9658 12.666L12.9668 12.667ZM16.1045 10.9863C16.5108 10.9808 16.8438 11.3047 16.8496 11.7109C16.855 12.1171 16.5312 12.4492 16.125 12.4551L15.4277 12.4648C15.0215 12.4703 14.6875 12.1474 14.6816 11.7412C14.6761 11.3349 15.0009 11.0019 15.4072 10.9961L16.1045 10.9863ZM14.9043 11.8438C14.9109 11.8742 14.921 11.9035 14.9326 11.9316C14.9204 11.902 14.9112 11.8709 14.9043 11.8389V11.8438ZM12.8672 11.2607C12.8323 11.4308 12.8145 11.6069 12.8145 11.7871C12.8145 11.6069 12.8323 11.4308 12.8672 11.2607ZM16.6396 11.7139L16.6299 11.6211L16.6279 11.6162C16.6343 11.6478 16.6392 11.6805 16.6396 11.7139ZM13.2617 10.3262C13.1205 10.535 13.0082 10.7651 12.9316 11.0107L13.0205 10.7705C13.0868 10.6141 13.1676 10.4653 13.2617 10.3262ZM20.2988 6.63574C20.3078 6.72394 20.3125 6.81374 20.3125 6.9043V6.90332C20.3125 6.81299 20.3078 6.72373 20.2988 6.63574ZM19.2598 6.74414C19.2649 6.79395 19.2663 6.84446 19.2666 6.89551C19.2663 6.84447 19.2649 6.79394 19.2598 6.74414ZM18.998 6.02734C19.0156 6.05322 19.0309 6.08048 19.0469 6.10742C19.0051 6.03708 18.9601 5.969 18.9082 5.90625L18.998 6.02734ZM17.8574 5.34277C17.9103 5.34815 17.9625 5.35568 18.0137 5.36621C18.2177 5.4082 18.4072 5.49048 18.5742 5.60352L18.4453 5.52441C18.2675 5.42759 18.0689 5.36434 17.8584 5.34277H17.8574ZM19.3604 4.88281C19.5888 5.07164 19.7818 5.30044 19.9355 5.55566C19.7818 5.30043 19.5887 5.07167 19.3604 4.88281ZM18.7148 4.49121C18.8412 4.54481 18.9609 4.6106 19.0762 4.68262C18.8894 4.56594 18.6888 4.46919 18.4746 4.40234L18.7148 4.49121ZM17.6973 4.28418L17.6982 4.28516L17.6973 4.28418Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/WishlistIcon.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 WishlistIcon_WishlistIcon = ({ 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 WishlistIcon_WishlistIcon = ({ size = 16, width = size, height = size, col
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M12 4.34689C13.3076 3.23781 14.2552 2.74927 15.6515 2.74927C18.6103 2.74927 20.6374 4.54791 21.4725 7.50389C21.5242 7.69457 21.4985 7.89793 21.4011 8.06981C21.3037 8.24169 21.1424 8.3682 20.9523 8.42187C20.7622 8.47554 20.5586 8.45204 20.3857 8.35647C20.2128 8.26089 20.0846 8.10097 20.0289 7.91142C19.3648 5.56149 17.8862 4.24938 15.6515 4.24938C14.6785 4.24938 14.0024 4.60691 12.9073 5.54449C12.8566 5.58799 12.5698 5.83551 12.4865 5.90627C12.3508 6.02194 12.1783 6.08547 12 6.08547C11.8217 6.08547 11.6492 6.02194 11.5135 5.90627C11.4302 5.83551 11.1434 5.58799 11.0927 5.54449C9.9976 4.60691 9.32155 4.24939 8.34847 4.24938C5.39274 4.24938 3.49934 6.61757 3.49934 10.0333C3.49934 12.6343 6.1543 15.867 11.5525 19.6153C11.6808 19.704 11.8332 19.7512 11.9891 19.7505C12.145 19.7498 12.297 19.7013 12.4245 19.6116C13.5366 18.8255 14.2762 18.289 14.6345 18.009C14.7121 17.9483 14.8009 17.9035 14.8958 17.8772C14.9907 17.8509 15.0899 17.8435 15.1877 17.8555C15.2855 17.8674 15.3799 17.8986 15.4657 17.9471C15.5514 17.9956 15.6268 18.0605 15.6874 18.1381C15.7481 18.2157 15.7929 18.3045 15.8192 18.3994C15.8455 18.4944 15.8529 18.5935 15.8409 18.6913C15.8289 18.7891 15.7978 18.8836 15.7493 18.9693C15.7008 19.055 15.6359 19.1304 15.5583 19.1911C15.1748 19.4906 14.4219 20.0369 13.2906 20.8367C12.9115 21.1043 12.4593 21.2488 11.9953 21.2507C11.5313 21.2527 11.0779 21.1119 10.6967 20.8474C4.9277 16.8416 1.99922 13.2758 1.99922 10.0333C1.99922 5.85351 4.48117 2.74927 8.34847 2.74927C9.74483 2.74927 10.6924 3.23781 12 4.34689ZM19.2506 13.0001H21.2507C21.4497 13.0001 21.6404 13.0791 21.7811 13.2198C21.9218 13.3604 22.0008 13.5512 22.0008 13.7501C22.0008 13.9491 21.9218 14.1398 21.7811 14.2805C21.6404 14.4212 21.4497 14.5002 21.2507 14.5002H19.2506V16.5003C19.2506 16.6993 19.1716 16.8901 19.0309 17.0307C18.8902 17.1714 18.6994 17.2504 18.5005 17.2504C18.3016 17.2504 18.1108 17.1714 17.9701 17.0307C17.8295 16.8901 17.7505 16.6993 17.7505 16.5003V14.5002H15.7503C15.5514 14.5002 15.3606 14.4212 15.2199 14.2805C15.0793 14.1398 15.0002 13.9491 15.0002 13.7501C15.0002 13.5512 15.0793 13.3604 15.2199 13.2198C15.3606 13.0791 15.5514 13.0001 15.7503 13.0001H17.7505V10.9999C17.7505 10.801 17.8295 10.6102 17.9701 10.4695C18.1108 10.3289 18.3016 10.2499 18.5005 10.2499C18.6994 10.2499 18.8902 10.3289 19.0309 10.4695C19.1716 10.6102 19.2506 10.801 19.2506 10.9999V13.0001Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/WrenchIcon.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 WrenchIcon_WrenchIcon = ({ 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 WrenchIcon_WrenchIcon = ({ size = 16, width = size, height = size, color =
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M6.7862 16.3594H6.7777C6.66339 16.3594 6.55021 16.382 6.44466 16.4258C6.33911 16.4697 6.24325 16.5339 6.1626 16.6149C6.08195 16.6959 6.0181 16.7921 5.9747 16.8978C5.9313 17.0036 5.90922 17.1168 5.90972 17.2311C5.90972 17.7128 6.30546 18.1029 6.7862 18.1029C7.0174 18.1029 7.23913 18.0111 7.40262 17.8476C7.5661 17.6841 7.65795 17.4623 7.65795 17.2311C7.65795 16.9999 7.5661 16.7782 7.40262 16.6147C7.23913 16.4512 7.0174 16.3594 6.7862 16.3594ZM18.528 11.4764C18.1896 12.042 17.7165 12.5151 17.1509 12.8535C16.2759 13.3926 15.2394 13.6075 14.2221 13.4608C13.9244 13.4194 13.6212 13.4479 13.3365 13.5439C13.0517 13.64 12.7933 13.801 12.5815 14.0142L7.94129 18.6545C7.2471 19.3487 6.03817 19.3477 5.34492 18.6545C5.17383 18.4847 5.03814 18.2827 4.94573 18.0601C4.85332 17.8375 4.80601 17.5987 4.80657 17.3577C4.80657 16.8666 4.9983 16.4047 5.34492 16.059L9.98609 11.4169C10.1988 11.2054 10.3595 10.9474 10.4555 10.6632C10.5516 10.379 10.5803 10.0764 10.5396 9.7792C10.3922 8.76577 10.6057 7.74951 11.1591 6.83525L11.2177 6.73892C11.5508 6.21652 12.0017 5.77949 12.5343 5.46293C13.645 4.79801 14.6877 4.7319 15.4877 4.85468L14.3826 5.9635C13.6271 6.72475 13.628 7.96107 14.3864 8.72044L15.2799 9.61391C15.6458 9.97892 16.1413 10.1842 16.6581 10.1849C17.1749 10.1856 17.6709 9.9817 18.0378 9.61769L19.1457 8.51454C19.2915 9.54426 19.073 10.5926 18.528 11.4783V11.4764ZM20.0835 7.01565C20.0436 6.91524 19.9793 6.82633 19.8965 6.75693C19.8137 6.68753 19.7149 6.63982 19.609 6.61809C19.5032 6.59636 19.3936 6.60129 19.2901 6.63244C19.1866 6.66358 19.0925 6.71997 19.0163 6.79653L17.115 8.69021C16.9939 8.8101 16.8303 8.87719 16.6599 8.87684C16.4895 8.87649 16.3261 8.80871 16.2055 8.68832L15.312 7.7939C15.192 7.6732 15.1246 7.50998 15.1244 7.3398C15.1243 7.16962 15.1913 7.00626 15.3111 6.88531L17.2038 4.98407C17.2795 4.90739 17.335 4.81324 17.3656 4.70996C17.3962 4.60668 17.4009 4.49745 17.3793 4.39193C17.3576 4.28641 17.3103 4.18786 17.2414 4.10499C17.1726 4.02212 17.0844 3.95749 16.9847 3.91681C15.3082 3.23868 13.4419 3.39357 11.8618 4.34088C11.1516 4.76421 10.5509 5.34849 10.1079 6.04661V6.04756L10.0361 6.16467C9.32779 7.33583 9.05389 8.6496 9.24562 9.96715C9.25785 10.0631 9.24757 10.1606 9.21561 10.2519C9.18364 10.3432 9.13086 10.4258 9.06145 10.4932L4.42027 15.1335C4.12723 15.4248 3.89494 15.7715 3.73687 16.1533C3.57879 16.5351 3.49808 16.9445 3.49941 17.3577C3.49941 18.1964 3.8262 18.986 4.42027 19.5801C4.71167 19.8727 5.0582 20.1047 5.43982 20.2626C5.82144 20.4205 6.23058 20.5012 6.64358 20.5C7.48322 20.5 8.27186 20.1732 8.86594 19.5801L13.5071 14.9389C13.6488 14.7972 13.8471 14.7283 14.0332 14.7547C15.3479 14.9455 16.6588 14.6754 17.8253 13.9746C18.5742 13.5255 19.2009 12.8988 19.65 12.1498C20.6049 10.5688 20.7645 8.69777 20.0845 7.01565H20.0835Z",
-            fill: fill
+            fill: _color
         })
     });
 };