@matchain/matchid-sdk-react 0.1.53-alpha.7 → 0.1.53-alpha.9

package/dist/index.mjs

@@ -1,3 +1,9 @@
+import {
+  chains_exports
+} from "./chunk-3CR66BEX.mjs";
+import {
+  types_exports
+} from "./chunk-HBOS3RBL.mjs";
 import {
   MatchProvider,
   ModalProvider,
@@ -6,26 +12,23 @@ import {
   components_exports,
   hooks_exports,
   useMatch
-} from "./chunk-W7CCPGOT.mjs";
-import {
-  types_exports
-} from "./chunk-HBOS3RBL.mjs";
+} from "./chunk-NCVBLRAJ.mjs";
+import "./chunk-JX73EY6V.mjs";
 import "./chunk-UA6XHZHX.mjs";
+import "./chunk-IZOOVZAD.mjs";
 import {
   ui_exports
-} from "./chunk-AYMVU44P.mjs";
-import "./chunk-OCQ2AIM3.mjs";
+} from "./chunk-X5HGL3ZX.mjs";
 import {
-  chains_exports
-} from "./chunk-3CR66BEX.mjs";
-import "./chunk-JX73EY6V.mjs";
-import "./chunk-3USZ4ZZY.mjs";
+  icon_exports
+} from "./chunk-FKXS2XRG.mjs";
 import "./chunk-J5LGTIGS.mjs";
 export {
   api_exports as Api,
   chains_exports as Chains,
   components_exports as Components,
   hooks_exports as Hooks,
+  icon_exports as Icon,
   MatchProvider,
   ModalProvider,
   ToastProvider,

package/dist/ui/index.js

@@ -272,8 +272,11 @@ var import_jsx_runtime48 = require("react/jsx-runtime");
 // src/assets/icon/PhantomIcon.tsx
 var import_jsx_runtime49 = require("react/jsx-runtime");
 
-// src/ui/Button/index.tsx
+// src/assets/icon/MoreIcon.tsx
 var import_jsx_runtime50 = require("react/jsx-runtime");
+
+// src/ui/Button/index.tsx
+var import_jsx_runtime51 = require("react/jsx-runtime");
 function Button({
   size = "df",
   disabled = false,
@@ -292,7 +295,7 @@ function Button({
       onClick && onClick();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
     "button",
     {
       type,
@@ -302,14 +305,14 @@ function Button({
         ...style
       },
       onClick: onAction,
-      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(LoadingIcon_default, { className: "matchid-btn-loading-icon", color: "var(--matchid-btn-loading-color)" }) : children
+      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(LoadingIcon_default, { className: "matchid-btn-loading-icon", color: "var(--matchid-btn-loading-color)" }) : children
     }
   );
 }
 
 // src/ui/Overlay/index.tsx
 var import_react = require("react");
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 function Overlay({
   isOpen = false,
   children,
@@ -325,7 +328,7 @@ function Overlay({
       document.body.style.overflow = "";
     };
   }, [isOpen]);
-  return isOpen ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+  return isOpen ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
     "div",
     {
       className: "matchid-overlay",
@@ -334,11 +337,11 @@ function Overlay({
       },
       children
     }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx_runtime51.Fragment, {});
+  ) : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_jsx_runtime52.Fragment, {});
 }
 
 // src/ui/Drawer/index.tsx
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 function Drawer({
   children,
   showClose = true,
@@ -349,22 +352,22 @@ function Drawer({
   onBack
 }) {
   if (!isOpen) {
-    return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_jsx_runtime52.Fragment, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_jsx_runtime53.Fragment, {});
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Overlay, { isOpen, zIndex, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "matchid-drawer", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: `matchid-drawer-header matchid-flex`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: `matchid-drawer-header-content matchid-flex`, children: [
-        onBack && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(ArrowLeftIcon, { height: 25, width: 24, className: "matchid-drawer-header-back", onClick: onBack }),
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Overlay, { isOpen, zIndex, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "matchid-drawer", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: `matchid-drawer-header matchid-flex`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: `matchid-drawer-header-content matchid-flex`, children: [
+        onBack && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ArrowLeftIcon, { height: 25, width: 24, className: "matchid-drawer-header-back", onClick: onBack }),
         title
       ] }),
-      showClose && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(CloseRoundIcon, { className: "matchid-drawer-header-close", onClick: onClose })
+      showClose && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(CloseRoundIcon, { className: "matchid-drawer-header-close", onClick: onClose })
     ] }),
     children
   ] }) });
 }
 
 // src/ui/Field/index.tsx
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 function Field({
   label,
   children,
@@ -372,13 +375,13 @@ function Field({
   required,
   className = ""
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: `matchid-field-box ${className}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "matchid-field-label", children: [
-      required && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "matchid-field-required", children: "*" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: `matchid-field-box ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "matchid-field-label", children: [
+      required && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "matchid-field-required", children: "*" }),
       label
     ] }),
     children,
-    error && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "matchid-field-error", children: error })
+    error && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "matchid-field-error", children: error })
   ] });
 }
 
@@ -402,7 +405,7 @@ function useDownMd() {
 }
 
 // src/ui/Modal/index.tsx
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 function Modal({
   children,
   isOpen,
@@ -410,10 +413,10 @@ function Modal({
   zIndex = 100,
   className = ""
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Overlay, { isOpen, zIndex, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: `matchid-modal ${className}`, style: {
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Overlay, { isOpen, zIndex, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: `matchid-modal ${className}`, style: {
     width
   }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "matchid-modal-mobile-header" }),
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "matchid-modal-mobile-header" }),
     children
   ] }) });
 }
@@ -427,20 +430,20 @@ function ModalWithHeader({
   ...props
 }) {
   const isDownMd = useDownMd();
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Modal, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: `matchid-modal-header ${showBorder ? "matchid-modal-header-border" : ""}`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "matchid-modal-header-content", children: [
-        onBack && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ArrowLeftIcon, { height: isDownMd ? 20 : 25, width: isDownMd ? 20 : 24, className: "matchid-modal-header-back", onClick: onBack }),
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "matchid-modal-header-title", children: title })
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(Modal, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: `matchid-modal-header ${showBorder ? "matchid-modal-header-border" : ""}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "matchid-modal-header-content", children: [
+        onBack && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(ArrowLeftIcon, { height: isDownMd ? 20 : 25, width: isDownMd ? 20 : 24, className: "matchid-modal-header-back", onClick: onBack }),
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "matchid-modal-header-title", children: title })
       ] }),
-      onClose && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(CloseRoundIcon, { size: isDownMd ? 24 : 30, className: "matchid-modal-header-close", onClick: onClose })
+      onClose && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(CloseRoundIcon, { size: isDownMd ? 24 : 30, className: "matchid-modal-header-close", onClick: onClose })
     ] }),
     children
   ] });
 }
 
 // src/ui/ModalDrawer/index.tsx
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 function ModalDrawer({
   title,
   drawerTitleVisible = true,
@@ -448,9 +451,9 @@ function ModalDrawer({
 }) {
   const isDownMd = useDownMd();
   if (isDownMd) {
-    return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(ModalWithHeader, { ...props, title });
+    return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ModalWithHeader, { ...props, title });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Drawer, { ...props, title: drawerTitleVisible ? title : null });
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Drawer, { ...props, title: drawerTitleVisible ? title : null });
 }
 
 // src/assets/img/confirm.gif
@@ -522,7 +525,7 @@ function useHash({
 }
 
 // src/ui/HashPanel/index.tsx
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 function HashPanel({
   hash,
   chain,
@@ -581,14 +584,14 @@ function HashPanel({
     }
   }, [hashQuery.data]);
   const link = chain ? `${chain?.blockExplorers?.default.url}/tx/${hash}` : "";
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
     ModalDrawer,
     {
       isOpen,
       showClose: true,
       onClose,
       zIndex,
-      title: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+      title: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
         "div",
         {
           className: "matchid-hashpanel-header",
@@ -598,29 +601,29 @@ function HashPanel({
           children: statusValue.text
         }
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "matchid-hashpanel-box", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "matchid-hashpanel-content", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: `matchid-hashpanel-status`, style: {
+      children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "matchid-hashpanel-box", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "matchid-hashpanel-content", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: `matchid-hashpanel-status`, style: {
             color: statusValue.color
           }, children: statusValue.text }),
-          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("img", { src: statusValue.icon, alt: statusValue.text, className: `matchid-hashpanel-img` }),
-          hash && /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "matchid-hashpanel-hash", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("img", { src: statusValue.icon, alt: statusValue.text, className: `matchid-hashpanel-img` }),
+          hash && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "matchid-hashpanel-hash", children: [
             "Hash:",
-            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("a", { href: link, target: "_blank", children: hash })
+            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("a", { href: link, target: "_blank", children: hash })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Button, { onClick: onClose, size: "lg", block: true, children: "Back" })
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Button, { onClick: onClose, size: "lg", block: true, children: "Back" })
       ] })
     }
   );
 }
 function HashPanel_default(props) {
-  return props.isOpen && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(HashPanel, { ...props });
+  return props.isOpen && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(HashPanel, { ...props });
 }
 
 // src/ui/Input/index.tsx
 var import_react4 = require("react");
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 function Input({
   onChange,
   type,
@@ -630,17 +633,17 @@ function Input({
 }) {
   const [inputType, setInputType] = (0, import_react4.useState)(type);
   const isDownMd = useDownMd();
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
     "div",
     {
       className: `matchid-input-box ${props.value && props.value.length > 0 ? "matchid-input-has-content" : ""} ${className}`,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("input", { type: inputType, onChange, ...props, className: "matchid-input-field" }),
-        props.value && props.value.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "matchid-input-delete-icon", onClick: (e) => {
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("input", { type: inputType, onChange, ...props, className: "matchid-input-field" }),
+        props.value && props.value.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "matchid-input-delete-icon", onClick: (e) => {
           if (onChange) {
             onChange({ target: { value: "" } });
           }
-        }, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+        }, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
           DeleteRoundIcon,
           {
             height: isDownMd ? 16 : 21,
@@ -648,9 +651,9 @@ function Input({
             color: "var(--matchid-input-delete-icon-color)"
           }
         ) }),
-        type === "password" && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "matchid-input-eye-icon", onClick: () => {
+        type === "password" && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "matchid-input-eye-icon", onClick: () => {
           setInputType(inputType === "password" ? "text" : "password");
-        }, children: inputType === "password" ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(CloseEyeIcon, { size: isDownMd ? 16 : 20 }) : /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(OpenEyeIcon, { size: isDownMd ? 16 : 20 }) }),
+        }, children: inputType === "password" ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(CloseEyeIcon, { size: isDownMd ? 16 : 20 }) : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(OpenEyeIcon, { size: isDownMd ? 16 : 20 }) }),
         after
       ]
     }
@@ -659,7 +662,7 @@ function Input({
 
 // src/ui/Popover/index.tsx
 var import_react5 = require("react");
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 function Popover({
   children,
   content,
@@ -669,7 +672,7 @@ function Popover({
   gap = "20px"
 }) {
   const [active, setActive] = (0, import_react5.useState)(false);
-  return children && /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+  return children && /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
     "div",
     {
       onClick: () => {
@@ -680,16 +683,16 @@ function Popover({
       className: `matchid-popover-box matchid-popover-${position} matchid-popover-${type} ${className} ${type == "click" && active ? "matchid-popover-click-active" : ""}`,
       children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { style: {
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { style: {
           paddingTop: gap
-        }, className: `matchid-popover-area`, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: `matchid-popover-content`, children: content }) })
+        }, className: `matchid-popover-area`, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: `matchid-popover-content`, children: content }) })
       ]
     }
   );
 }
 
 // src/ui/Switch/index.tsx
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 function Switch({
   size = "default",
   checked = false,
@@ -704,12 +707,12 @@ function Switch({
       onChange && onChange(!checked);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { onClick, className: `matchid-switch matchid-switch-${size} ${checked ? "matchid-switch-checked" : ""} ${disabled ? "matchid-switch-disabled" : ""} ${loading ? "matchid-switch-loading" : ""}`, ...props, children: loading ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(LoadingIcon_default, { className: "matchid-switch-loading-icon", size: size == "default" ? 24 : 18, color: "var(--matchid-swicth-loading-color)" }) : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "matchid-switch-ball" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { onClick, className: `matchid-switch matchid-switch-${size} ${checked ? "matchid-switch-checked" : ""} ${disabled ? "matchid-switch-disabled" : ""} ${loading ? "matchid-switch-loading" : ""}`, ...props, children: loading ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(LoadingIcon_default, { className: "matchid-switch-loading-icon", size: size == "default" ? 24 : 18, color: "var(--matchid-swicth-loading-color)" }) : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "matchid-switch-ball" }) });
 }
 
 // src/ui/AlphaAvatar/index.tsx
 var import_react6 = require("react");
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 function AlphaAvatar({
   name,
   size = "default",
@@ -726,7 +729,7 @@ function AlphaAvatar({
     return "";
   }, [name]);
   const numberSize = typeof size === "number" ? size : size === "sm" ? 24 : size === "default" ? 40 : 64;
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: `matchid-alpha-avatar ${className}`, style: {
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: `matchid-alpha-avatar ${className}`, style: {
     width: numberSize,
     height: numberSize,
     fontSize: Math.ceil(numberSize / 2),
@@ -735,7 +738,7 @@ function AlphaAvatar({
 }
 
 // src/ui/Radio/index.tsx
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 function Radio({
   checked = false,
   onChange,
@@ -744,20 +747,20 @@ function Radio({
   className = "",
   style = {}
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { onClick: onChange, className: `matchid-radio ${className} ${checked ? "matchid-radio-checked" : ""}`, style: {
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { onClick: onChange, className: `matchid-radio ${className} ${checked ? "matchid-radio-checked" : ""}`, style: {
     width: size,
     height: size,
     ...style,
     // @ts-ignore
     "--matchid-radio-checked": color
-  }, children: checked && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: `matchid-radio-content`, style: {
+  }, children: checked && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: `matchid-radio-content`, style: {
     width: Math.floor(size * 0.7),
     height: Math.floor(size * 0.7)
   } }) });
 }
 
 // src/ui/Skeleton/index.tsx
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 var Skeleton = ({
   style = {},
   className = "",
@@ -768,7 +771,7 @@ var Skeleton = ({
   children
 }) => {
   if (!loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_jsx_runtime62.Fragment, { children });
+    return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_jsx_runtime63.Fragment, { children });
   }
   const skeletonStyle = {
     width,
@@ -776,7 +779,7 @@ var Skeleton = ({
     borderRadius: radius,
     ...style
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
     "div",
     {
       className: "matchid-skeleton " + className,
@@ -787,10 +790,10 @@ var Skeleton = ({
 var Skeleton_default = Skeleton;
 
 // src/ui/Tabs/index.tsx
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_jsx_runtime64 = require("react/jsx-runtime");
 function Tabs(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: `matchid-tabs`, children: props.tabs.map((tab, index) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { onClick: () => props.setActiveTab(index), className: `matchid-tab ${props.activeTab === index ? "matchid-tab-active" : ""}`, children: tab }, index);
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: `matchid-tabs`, children: props.tabs.map((tab, index) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { onClick: () => props.setActiveTab(index), className: `matchid-tab ${props.activeTab === index ? "matchid-tab-active" : ""}`, children: tab }, index);
   }) });
 }
 // Annotate the CommonJS export names for ESM import in node: