@sentio/ui-core 0.1.3 → 0.1.5

package/dist/index.js

@@ -36,13 +36,15 @@ __export(index_exports, {
   BaseZIndexContext: () => BaseZIndexContext,
   Button: () => NewButton,
   COLOR_MAP: () => COLOR_MAP,
+  Checkbox: () => Checkbox,
   CloseSquareO: () => import_lu2.LuSquareX,
   Collapse: () => Collapse,
+  ConfirmDialog: () => ConfirmDialog,
   CopyButton: () => CopyButton,
   CopyIcon: () => CopyIcon,
   CopySuccessIcon: () => CopySuccessIcon,
-  DarkModeContext: () => DarkModeContext,
   DeleteIcon: () => DeleteIcon,
+  Descriptions: () => Descriptions,
   DisclosurePanel: () => DisclosurePanel,
   Empty: () => Empty,
   EyeO: () => import_lu2.LuEye,
@@ -57,25 +59,34 @@ __export(index_exports, {
   MoveLeftIcon: () => MoveLeftIcon,
   MoveRightIcon: () => MoveRightIcon,
   NavSizeContext: () => NavSizeContext,
+  Notification: () => Notification,
   PlusSquareO: () => import_lu2.LuSquarePlus,
   PopoverTooltip: () => PopoverTooltip,
   PopupMenuButton: () => PopupMenuButton,
   Proccessing: () => Proccessing,
+  ProgressBar: () => ProgressBar,
   ROOT_KEY: () => ROOT_KEY,
   RadioSelect: () => RadioSelect,
   RenameIcon: () => RenameIcon,
   ResizeTable: () => ResizeTable,
   SUFFIX_NODE_KEY: () => SUFFIX_NODE_KEY,
+  SearchInput: () => SearchInput,
   Select: () => Select,
+  SlideOver: () => SlideOver,
   SpinLoading: () => SpinLoading,
   StatusBadge: () => StatusBadge,
   StatusRole: () => StatusRole,
   SubMenuButton: () => SubMenuButton,
   SvgFolderContext: () => SvgFolderContext,
   Switch: () => Switch,
+  TabGroup: () => Group,
+  TabList: () => List,
+  TabPanel: () => Panel,
+  TabPanels: () => Panels,
   buttonClass: () => buttonClass,
   classNames: () => import_class_variance_authority10.cx,
   getNumberWithDecimal: () => getNumberWithDecimal,
+  getTabClassName: () => getTabClassName,
   parseHex: () => parseHex,
   useBoolean: () => useBoolean,
   useDarkMode: () => useDarkMode,
@@ -132,39 +143,41 @@ var import_react2 = __toESM(require("react"));
 var import_react_spinners2 = require("react-spinners");
 var import_class_variance_authority2 = require("class-variance-authority");
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var SpinLoading = import_react2.default.forwardRef(function Spinner(args, ref) {
-  const {
-    loading = false,
-    children,
-    className,
-    size = 48,
-    showMask,
-    maskOpacity = 80
-  } = args;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { ref, className: (0, import_class_variance_authority2.cx)("relative", className), children: [
-    showMask && loading && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      "div",
-      {
-        className: (0, import_class_variance_authority2.cx)(
-          "absolute bottom-0 left-0 right-0 top-0 z-[1]",
-          maskOpacity ? `bg-white dark:bg-sentio-gray-100/${maskOpacity}` : "dark:bg-sentio-gray-100 bg-white"
-        )
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "absolute left-[50%] top-[50%] z-[1] -translate-y-6", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      import_react_spinners2.ClipLoader,
-      {
-        loading,
-        color: "#3B82F6",
-        size,
-        cssOverride: {
-          borderWidth: 3
+var SpinLoading = import_react2.default.forwardRef(
+  function Spinner(args, ref) {
+    const {
+      loading = false,
+      children,
+      className,
+      size = 48,
+      showMask,
+      maskOpacity = 80
+    } = args;
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { ref, className: (0, import_class_variance_authority2.cx)("relative", className), children: [
+      showMask && loading && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "div",
+        {
+          className: (0, import_class_variance_authority2.cx)(
+            "absolute bottom-0 left-0 right-0 top-0 z-[1]",
+            maskOpacity ? `bg-white dark:bg-sentio-gray-100/${maskOpacity}` : "dark:bg-sentio-gray-100 bg-white"
+          )
         }
-      }
-    ) }),
-    children
-  ] });
-});
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "absolute left-[50%] top-[50%] z-[1] -translate-y-6", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        import_react_spinners2.ClipLoader,
+        {
+          loading,
+          color: "#3B82F6",
+          size,
+          cssOverride: {
+            borderWidth: 3
+          }
+        }
+      ) }),
+      children
+    ] });
+  }
+);
 
 // src/common/CopyButton.tsx
 var import_react3 = require("react");
@@ -475,7 +488,7 @@ var PopoverTooltip = ({
           !hideArrow && placement === "bottom" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             "div",
             {
-              className: "arrow dark:before:bg-sentio-gray-200 -translate-y-[5px] before:absolute before:h-2 before:w-2 before:rotate-45 before:border-l before:border-t before:border-black/5 before:bg-white dark:before:border-gray-100",
+              className: "arrow dark:bg-sentio-gray-100 before:border-border-color -translate-y-[7px] bg-white before:visible before:border before:border-b-0 before:border-r-0",
               ref: arrowRef,
               style: {
                 left: arrowX ?? 0,
@@ -609,23 +622,30 @@ var buttonClass = (0, import_class_variance_authority5.cva)(["inline-flex", "ite
     disabled: false
   }
 });
-function Proccessing({ className, light }) {
+function Proccessing({
+  className,
+  light
+}) {
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { className: `h-5 w-5 animate-spin ${className}`, viewBox: "0 0 24 24", children: [
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "circle",
       {
-        className: light ? "opacity-5" : "opacity-10",
         cx: "12",
         cy: "12",
         r: "10",
         stroke: "currentColor",
-        strokeWidth: "4"
+        strokeWidth: "4",
+        style: {
+          opacity: light ? 0.05 : 0.1
+        }
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "path",
       {
-        className: light ? "opacity-50" : "opacity-75",
+        style: {
+          opacity: light ? 0.5 : 0.75
+        },
         fill: "currentColor",
         d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
       }
@@ -688,12 +708,17 @@ function Button({
       iconEl2 = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         Proccessing,
         {
-          className: (0, import_class_variance_authority5.cx)(pIconClass({ size }), role == "primary" ? "text-white" : ""),
+          className: (0, import_class_variance_authority5.cx)(
+            pIconClass({ size }),
+            role == "primary" ? "text-white" : ""
+          ),
           light: role !== "primary"
         }
       );
     } else if (icon) {
-      iconEl2 = (0, import_react6.cloneElement)(icon, { className: (0, import_class_variance_authority5.cx)(icon.props.className, iconClasses) });
+      iconEl2 = (0, import_react6.cloneElement)(icon, {
+        className: (0, import_class_variance_authority5.cx)(icon.props.className, iconClasses)
+      });
     }
     return iconEl2;
   }, [icon, iconClasses, processing, role]);
@@ -2079,7 +2104,7 @@ var FlatTree = (props) => {
 var FlatTree_default = (0, import_react20.memo)(FlatTree);
 
 // src/common/text/LinkifyText.tsx
-var import_linkify_urls = require("linkify-urls");
+var import_linkify_html = __toESM(require("linkify-html"));
 var import_dompurify = __toESM(require("dompurify"));
 var import_react21 = require("react");
 var import_lodash5 = require("lodash");
@@ -2095,7 +2120,7 @@ if (import_dompurify.default?.addHook) {
   });
 }
 var renderTextWithColoredNumbers = (text) => {
-  const numberRegex = /\b(\d+(?:\.\d+)?)\b/g;
+  const numberRegex = /\b(\d+(?:\.\d+)?(?:[eE][+-]?\d+)?)\b/g;
   return text.replace(numberRegex, (match, number, offset2) => {
     const before = text.charAt(offset2 - 1);
     const after = text.charAt(offset2 + match.length);
@@ -2119,7 +2144,7 @@ var LinkifyText = (0, import_react21.memo)(function LinkifyText2({
     }
     return null;
   }
-  const linkStr = (0, import_linkify_urls.linkifyUrlsToHtml)(
+  const linkStr = (0, import_linkify_html.default)(
     isHighlightNumbers ? renderTextWithColoredNumbers(text) : text,
     {
       attributes: {
@@ -2139,24 +2164,105 @@ var LinkifyText = (0, import_react21.memo)(function LinkifyText2({
 });
 
 // src/common/Empty.tsx
-var import_react23 = require("react");
+var import_react24 = require("react");
 
 // src/utils/extension-context.ts
+var import_react23 = require("react");
+
+// src/utils/use-dark-mode.ts
 var import_react22 = require("react");
-var SvgFolderContext = (0, import_react22.createContext)("");
-var useDetectExtenstion = () => {
-  const folderPath = (0, import_react22.useContext)(SvgFolderContext);
-  return Boolean(folderPath);
+var DarkModeListener = class _DarkModeListener {
+  constructor() {
+    this.isDarkMode = false;
+    this.listeners = [];
+    this.init();
+  }
+  static get instance() {
+    if (!this._instance) {
+      this._instance = new _DarkModeListener();
+    }
+    return this._instance;
+  }
+  addListener(listener) {
+    this.listeners.push(listener);
+  }
+  removeListener(listener) {
+    this.listeners = this.listeners.filter((l) => l !== listener);
+  }
+  get darkMode() {
+    return this.isDarkMode;
+  }
+  _sync(theme = "system") {
+    let isDarkMode = false;
+    if (theme === "system") {
+      const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+      isDarkMode = mediaQuery.matches;
+      localStorage.setItem("theme", "system");
+    } else if (theme === "light") {
+      isDarkMode = false;
+      localStorage.removeItem("theme");
+    } else {
+      isDarkMode = theme === "dark";
+      localStorage.setItem("theme", "dark");
+    }
+    this.isDarkMode = isDarkMode;
+    document.body.classList.remove("light", "dark");
+    document.body.classList.add(isDarkMode ? "dark" : "light");
+    this.listeners.forEach((listener) => listener(isDarkMode));
+  }
+  toggleDarkMode() {
+    this.isDarkMode = document.body.classList.contains("dark");
+    this._sync(this.isDarkMode ? "light" : "dark");
+  }
+  setDarkMode(value) {
+    this._sync(value);
+  }
+  init() {
+    this.isDarkMode = document.body.classList.contains("dark");
+    const observer = new MutationObserver((mutationsList) => {
+      for (const mutation of mutationsList) {
+        if (mutation.type === "attributes" && mutation.attributeName === "class") {
+          const isDarkMode = document.body.classList.contains("dark");
+          if (this.isDarkMode !== isDarkMode) {
+            this.isDarkMode = isDarkMode;
+            this.listeners.forEach((listener) => listener(isDarkMode));
+          }
+        }
+      }
+    });
+    const config = {
+      attributes: true,
+      // Observe attribute changes
+      attributeFilter: ["class"]
+      // Only observe changes to the 'class' attribute
+    };
+    observer.observe(document.body, config);
+  }
 };
-var DarkModeContext = (0, import_react22.createContext)(false);
 var useDarkMode = () => {
-  return (0, import_react22.useContext)(DarkModeContext);
+  const [isDarkMode, setIsDarkMode] = (0, import_react22.useState)(false);
+  (0, import_react22.useEffect)(() => {
+    const instance = DarkModeListener.instance;
+    setIsDarkMode(instance.darkMode);
+    instance.addListener(setIsDarkMode);
+    return () => {
+      instance.removeListener(setIsDarkMode);
+    };
+  }, []);
+  return isDarkMode;
+};
+
+// src/utils/extension-context.ts
+var SvgFolderContext = (0, import_react23.createContext)("");
+var useDetectExtenstion = () => {
+  const folderPath = (0, import_react23.useContext)(SvgFolderContext);
+  return Boolean(folderPath);
 };
 
 // src/common/Empty.tsx
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var Empty = (props) => {
-  const parentFolder = (0, import_react23.useContext)(SvgFolderContext);
+  const parentFolder = (0, import_react24.useContext)(SvgFolderContext);
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "mx-auto w-fit", children: [
     /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       "img",
@@ -2252,25 +2358,738 @@ var HeaderToolsContent = ({
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: (0, import_class_variance_authority16.cx)("w-full overflow-hidden", className), children });
 };
 
-// src/common/table/ResizeTable.tsx
+// src/common/SlideOver.tsx
+var import_react25 = require("react");
+var import_react26 = require("@headlessui/react");
+var import_outline = require("@heroicons/react/24/outline");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+function SlideOver({
+  title,
+  open,
+  onClose,
+  children,
+  size,
+  headAddon,
+  triggerClose = "all",
+  noAnimation
+}) {
+  const onDialogClose = (0, import_react25.useCallback)(() => {
+    if (triggerClose === "all") {
+      onClose();
+    }
+  }, [triggerClose, onClose]);
+  const openRef = (0, import_react25.useRef)(open);
+  openRef.current = open;
+  (0, import_react25.useEffect)(() => {
+    function handleKeyDown(event) {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        event.stopPropagation();
+        if (openRef.current) {
+          onClose();
+        }
+      }
+    }
+    if (triggerClose === "button") {
+      window.addEventListener("keydown", handleKeyDown);
+      return () => {
+        window.removeEventListener("keydown", handleKeyDown);
+      };
+    }
+  }, [triggerClose, onClose]);
+  const contentNode = /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "fixed inset-0 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "absolute inset-y-0 right-0 flex max-w-full pl-10 sm:pl-16", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "max-w-2xl max-w-3xl max-w-4xl max-w-5xl max-w-6xl max-w-7xl" }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+      import_react26.Dialog.Panel,
+      {
+        className: `dark:bg-sentio-gray-100 pointer-events-auto flex h-full w-screen flex-col overflow-x-hidden border-l bg-white shadow-md max-w-${size || "2xl"}`,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "dark:bg-sentio-gray-100 relative border-b bg-white px-4 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex h-auto items-start justify-between space-x-3 sm:h-5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "flex-1 space-y-1", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react26.Dialog.Title, { className: "text-text-foreground text-[15px] font-semibold", children: title }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex-0 flex h-auto items-center sm:h-5", children: [
+              headAddon,
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+                "button",
+                {
+                  type: "button",
+                  className: "hover:text-text-foreground ml-2 text-gray-800 dark:text-gray-500",
+                  onClick: () => onClose(),
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "sr-only", children: "Close panel" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_outline.XMarkIcon, { className: "h-5 w-5", "aria-hidden": "true" })
+                  ]
+                }
+              )
+            ] })
+          ] }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "flex flex-1 overflow-y-auto overflow-x-hidden", children })
+        ]
+      }
+    )
+  ] }) });
+  if (noAnimation) {
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      import_react26.Dialog,
+      {
+        open,
+        as: "div",
+        className: "relative z-10",
+        id: "test",
+        onClose: onDialogClose,
+        children: contentNode
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react26.Transition.Root, { show: open, as: "div", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    import_react26.Dialog,
+    {
+      static: true,
+      as: "div",
+      className: "relative z-10",
+      id: "test",
+      onClose: onDialogClose,
+      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        import_react26.Transition.Child,
+        {
+          as: import_react25.Fragment,
+          enter: "transform transition ease-in-out duration-100 sm:duration-300",
+          enterFrom: "translate-x-full",
+          enterTo: "translate-x-0",
+          leave: "transform transition ease-in-out duration-100 sm:duration-300",
+          leaveFrom: "translate-x-0",
+          leaveTo: "translate-x-full",
+          children: contentNode
+        }
+      )
+    }
+  ) });
+}
+
+// src/common/ConfirmDialog.tsx
+var import_react27 = require("react");
+var import_react28 = require("@headlessui/react");
+var import_outline2 = require("@heroicons/react/24/outline");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+function ConfirmDialog({
+  message,
+  title,
+  open,
+  onClose,
+  onConfirm,
+  buttonLabel = "Delete",
+  type,
+  buttons,
+  children,
+  disabled
+}) {
+  const cancelButtonRef = (0, import_react27.useRef)(null);
+  const [processing, setProcessing] = (0, import_react27.useState)(false);
+  async function confirm() {
+    setProcessing(true);
+    try {
+      await onConfirm();
+    } finally {
+      setProcessing(false);
+      onClose(false);
+    }
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react28.Transition.Root, { show: open, as: import_react27.Fragment, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+    import_react28.Dialog,
+    {
+      as: "div",
+      className: "relative z-10",
+      "aria-label": "confirm",
+      initialFocus: cancelButtonRef,
+      onClose,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          import_react28.Transition.Child,
+          {
+            as: import_react27.Fragment,
+            enter: "ease-out duration-300",
+            enterFrom: "opacity-0",
+            enterTo: "opacity-100",
+            leave: "ease-in duration-200",
+            leaveFrom: "opacity-100",
+            leaveTo: "opacity-0",
+            children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "fixed inset-0 bg-gray-500/75 transition-opacity dark:bg-gray-200/50" })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "fixed inset-0 z-10 overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          import_react28.Transition.Child,
+          {
+            as: import_react27.Fragment,
+            enter: "ease-out duration-300",
+            enterFrom: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
+            enterTo: "opacity-100 translate-y-0 sm:scale-100",
+            leave: "ease-in duration-200",
+            leaveFrom: "opacity-100 translate-y-0 sm:scale-100",
+            leaveTo: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
+            children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react28.Dialog.Panel, { className: "dark:bg-sentio-gray-100 relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "dark:bg-sentio-gray-100 bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "sm:flex sm:items-start", children: [
+                type == "danger" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 dark:bg-red-300 sm:mx-0 sm:h-10 sm:w-10", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                  import_outline2.ExclamationCircleIcon,
+                  {
+                    className: "h-6 w-6 text-red-600 dark:text-red-800",
+                    "aria-hidden": "true"
+                  }
+                ) }),
+                type == "question" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "bg-primary-100 dark:bg-primary-500 mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full sm:mx-0 sm:h-10 sm:w-10", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                  import_outline2.QuestionMarkCircleIcon,
+                  {
+                    className: "text-primary-600 dark:text-primary-800 h-6 w-6",
+                    "aria-hidden": "true"
+                  }
+                ) }),
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                    import_react28.Dialog.Title,
+                    {
+                      as: "h3",
+                      className: "text-text-foreground text-lg font-medium leading-6",
+                      children: title
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "mt-2", children: [
+                    message && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-sm text-gray-500", children: message }),
+                    children
+                  ] })
+                ] })
+              ] }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex gap-2 bg-gray-50 px-4 py-3 sm:flex-row-reverse sm:px-6", children: buttons ? buttons : /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                  NewButton,
+                  {
+                    type: "button",
+                    processing,
+                    status: type == "danger" ? "danger" : void 0,
+                    role: "primary",
+                    onClick: () => confirm(),
+                    disabled,
+                    size: "lg",
+                    children: buttonLabel
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                  NewButton,
+                  {
+                    type: "button",
+                    role: "secondary",
+                    onClick: () => onClose(false),
+                    ref: cancelButtonRef,
+                    size: "lg",
+                    children: "Cancel"
+                  }
+                )
+              ] }) })
+            ] })
+          }
+        ) }) })
+      ]
+    }
+  ) });
+}
+
+// src/common/StyledTabs.tsx
+var import_react29 = __toESM(require("react"));
+var import_react30 = require("@headlessui/react");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var getTabClassName = ({ selected }) => (0, import_class_variance_authority10.cx)(
+  "font-ilabel py-1 text-sm leading-5 border-b-2 outline-0",
+  selected ? "text-primary border-primary-500" : "text-gray hover:text-primary border-transparent hover:border-primary-500"
+);
+var Group = ({
+  children,
+  className,
+  onChange,
+  defaultIndex,
+  selectedIndex
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    import_react30.Tab.Group,
+    {
+      onChange,
+      defaultIndex,
+      selectedIndex,
+      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: (0, import_class_variance_authority10.cx)("flex flex-col", className), children })
+    }
+  );
+};
+var List = ({
+  tabs,
+  disabledTabs,
+  className,
+  noBorder,
+  children
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+    import_react30.Tab.List,
+    {
+      className: (0, import_class_variance_authority10.cx)(
+        "flex-0 border-border-color flex justify-start space-x-6 overflow-x-auto px-4",
+        noBorder ? "border-b-0" : "border-b"
+      ),
+      children: [
+        tabs.map((tab, index) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          import_react30.Tab,
+          {
+            className: ({ selected }) => (0, import_class_variance_authority10.cx)(
+              "font-ilabel outline-primary/50 whitespace-nowrap border-b-2 py-1 text-sm leading-5 outline-offset-2",
+              selected ? "border-primary text-primary" : "text-gray hover:text-primary border-transparent",
+              className
+            ),
+            disabled: disabledTabs?.includes(index),
+            children: tab
+          },
+          index
+        )),
+        children
+      ]
+    }
+  );
+};
+var Panels = import_react29.default.forwardRef(function Panels2({ children, className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    import_react30.Tab.Panels,
+    {
+      className: (0, import_class_variance_authority10.cx)("flex-1", className || "w-full overflow-auto"),
+      ...props,
+      ref,
+      children
+    }
+  );
+});
+var Panel = (props) => {
+  const { className, ...otherProps } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    import_react30.Tab.Panel,
+    {
+      className: (0, import_class_variance_authority10.cx)("space-y-2 outline-0", className),
+      ...otherProps
+    }
+  );
+};
+
+// src/common/SearchInput.tsx
+var import_solid4 = require("@heroicons/react/20/solid");
 var import_react31 = require("react");
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var SearchInput = (0, import_react31.forwardRef)((props, ref) => {
+  const {
+    onChange,
+    value,
+    onBlur,
+    onKeydown,
+    addonButton,
+    placeholder = "Search",
+    ...args
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "min-w-0 flex-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("label", { htmlFor: "search", className: "sr-only", children: "Search" }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "focus-within:ring-primary-500 focus-within:border-primary-500 relative flex  rounded-md  border border-gray-300", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-1 sm:pl-3", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        import_solid4.MagnifyingGlassIcon,
+        {
+          className: "sm:h-4.5 sm:w-4.5 h-4 w-4 text-gray-400",
+          "aria-hidden": "true"
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        "input",
+        {
+          onChange: (e) => onChange(e.target.value),
+          onBlur,
+          onKeyDown: onKeydown,
+          type: "search",
+          className: (0, import_class_variance_authority10.cx)(
+            "md:text-ilabel block w-full rounded-md border-0 pl-6 text-xs focus:ring-0 sm:pl-10 sm:text-sm",
+            "h-[30px] py-1"
+          ),
+          placeholder,
+          value,
+          ref,
+          ...args
+        }
+      ),
+      addonButton
+    ] })
+  ] });
+});
+SearchInput.displayName = "SearchInput";
+
+// src/common/Checkbox.tsx
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var Checkbox = ({
+  checked,
+  onChange,
+  label,
+  labelNode,
+  id,
+  name,
+  inputProps,
+  disabled,
+  labelClassName,
+  className
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+    "div",
+    {
+      className: (0, import_class_variance_authority10.cx)("inline-flex items-center gap-2", className),
+      onClick: (e) => {
+        e.stopPropagation();
+        onChange?.(!checked);
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          "input",
+          {
+            id,
+            name,
+            type: "checkbox",
+            className: "text-primary-600 focus:ring-primary-500 h-4 w-4 rounded border-gray-300 ",
+            disabled,
+            checked,
+            readOnly: true,
+            ...inputProps
+          }
+        ),
+        label && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          "span",
+          {
+            className: (0, import_class_variance_authority10.cx)(
+              "text-ilabel text-gray font-medium",
+              labelClassName
+            ),
+            children: label
+          }
+        ),
+        labelNode
+      ]
+    }
+  );
+};
+
+// src/common/ProgressBar.tsx
+var import_react32 = require("react");
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var defaultSegments = {
+  0.25: "from-cyan-600 to-cyan-500",
+  0.5: "from-cyan-500 to-orange-600",
+  0.75: "from-orange-600 to-red-600",
+  1: "from-red-600 to-red-700"
+};
+var ProgressBar = ({
+  progress,
+  segments = defaultSegments,
+  gradient,
+  upperTicks,
+  lowerTicks,
+  roundedFull
+}) => {
+  const elements = (0, import_react32.useMemo)(() => {
+    const result = [];
+    const colors = Object.entries(segments).sort(
+      (a, b) => parseFloat(a[0]) - parseFloat(b[0])
+    );
+    if (gradient) {
+      let pos = 0;
+      colors.forEach(([stop, color], idx) => {
+        const width = (parseFloat(stop) - pos) * 100;
+        result.push(
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            "div",
+            {
+              className: (0, import_class_variance_authority10.cx)(
+                `absolute top-0 h-4 bg-gradient-to-r ${color}`,
+                idx === 0 && "rounded-l-full",
+                idx === colors.length - 1 && "rounded-r-full"
+              ),
+              style: { left: `${pos * 100}%`, width: `${width}%` }
+            },
+            stop
+          )
+        );
+        pos = parseFloat(stop);
+      });
+    } else {
+      let pos = 0;
+      for (const [stop, color] of colors) {
+        const width = (parseFloat(stop) - pos) * 100;
+        result.push(
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            "div",
+            {
+              className: `absolute h-4 bg-${color} top-0 left-[${pos}] w-[${width}]`
+            }
+          )
+        );
+        pos = parseFloat(stop) * 100;
+      }
+    }
+    return result;
+  }, [segments, gradient]);
+  const upperTicksElements = (0, import_react32.useMemo)(() => {
+    if (!upperTicks) return null;
+    return Object.entries(upperTicks).map(([p, label]) => {
+      const pos = parseFloat(p);
+      return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+        "div",
+        {
+          className: "absolute top-0 border-l border-gray-500 text-xs text-gray-500 hover:z-[1]",
+          style: { left: `${pos * 100}%` },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+              "div",
+              {
+                className: (0, import_class_variance_authority10.cx)(
+                  "absolute w-fit -translate-y-full whitespace-nowrap text-gray-500",
+                  pos < 0.05 ? "-translate-x-1/4" : pos > 0.95 ? "-translate-x-3/4" : "-translate-x-1/2"
+                ),
+                children: label
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "absolute h-3 w-2 translate-y-1 border-l border-gray-400 border-opacity-50" })
+          ]
+        },
+        pos
+      );
+    });
+  }, [upperTicks]);
+  const lowerTicksElements = (0, import_react32.useMemo)(() => {
+    if (!lowerTicks) return null;
+    return Object.entries(lowerTicks).map(([p, label]) => {
+      const pos = parseFloat(p);
+      return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+        "div",
+        {
+          className: "relative bottom-0 text-xs hover:z-[1]",
+          style: { left: `${pos * 100}%` },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "absolute top-0 h-3 w-2 border-l border-gray-400 border-opacity-50" }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+              "div",
+              {
+                className: (0, import_class_variance_authority10.cx)(
+                  "absolute translate-y-full text-gray-500",
+                  pos < 0.05 ? "-translate-x-1/4" : pos > 0.95 ? "-translate-x-3/4" : "-translate-x-1/2"
+                ),
+                children: label
+              }
+            )
+          ]
+        },
+        pos
+      );
+    });
+  }, [lowerTicks]);
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "w-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "relative h-4 w-full", children: upperTicksElements }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "relative h-4 w-full", children: [
+      elements,
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        "div",
+        {
+          className: (0, import_class_variance_authority10.cx)(
+            progress === 0 ? "rounded-l-full" : "",
+            `dark:bg-sentio-gray-400 absolute right-0 top-0 h-4 rounded-r-full bg-gray-300`
+          ),
+          style: { left: `${progress * 100}%` }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "relative h-4 w-full", children: lowerTicksElements })
+  ] });
+};
+
+// src/common/Descriptions.tsx
+var import_react33 = __toESM(require("react"));
+var import_lodash6 = require("lodash");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+function safeToString(value) {
+  if ((0, import_lodash6.isString)(value) || (0, import_lodash6.isNumber)(value)) {
+    return value;
+  }
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return "";
+  }
+}
+var Descriptions = (props) => {
+  const {
+    data,
+    labelStyle,
+    valueStyle,
+    className,
+    labelClassName,
+    valueClassName,
+    trClassName,
+    colon,
+    renderLabel,
+    renderValue
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("table", { className: (0, import_class_variance_authority10.cx)("w-full border-collapse", className), children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("tbody", { children: data.map((item, index) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("tr", { className: trClassName, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        "td",
+        {
+          className: (0, import_class_variance_authority10.cx)(
+            "text-gray text-ilabel font-ilabel w-px whitespace-nowrap pr-8 align-text-bottom",
+            labelClassName
+          ),
+          style: labelStyle,
+          children: (0, import_lodash6.isFunction)(renderLabel) ? renderLabel?.(item) : item.label
+        }
+      ),
+      colon,
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        "td",
+        {
+          className: (0, import_class_variance_authority10.cx)(
+            "text-ilabel font-ilabel",
+            valueClassName
+          ),
+          style: valueStyle,
+          children: import_react33.default.isValidElement(item.value) ? item.value : (0, import_lodash6.isObjectLike)(item.value) ? (0, import_lodash6.isEmpty)(item.value) ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "text-gray-400", children: "{ }" }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "text-gray-400", children: "{" }),
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+              Descriptions,
+              {
+                ...props,
+                data: (0, import_lodash6.map)(item.value, (value, label) => ({
+                  key: `${item.key}.${label}`,
+                  label,
+                  value
+                }))
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "text-gray-400", children: "}" })
+          ] }) : (0, import_lodash6.isFunction)(renderValue) ? renderValue?.(item) : safeToString(item.value)
+        }
+      )
+    ] }, item.key ?? index);
+  }) }) });
+};
+
+// src/common/Notification.tsx
+var import_react34 = require("react");
+var import_react35 = require("@headlessui/react");
+var import_solid5 = require("@heroicons/react/20/solid");
+var import_outline3 = require("@heroicons/react/24/outline");
+var import_jsx_runtime26 = require("react/jsx-runtime");
+function Notification({
+  show,
+  setShow,
+  title,
+  message,
+  buttons,
+  type
+}) {
+  let icon;
+  switch (type) {
+    case "success":
+      icon = /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        import_outline3.CheckCircleIcon,
+        {
+          className: "h-6 w-6 text-green-400",
+          "aria-hidden": "true"
+        }
+      );
+      break;
+    case "error":
+      icon = /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        import_outline3.ExclamationCircleIcon,
+        {
+          className: "h-6 w-6 text-red-400",
+          "aria-hidden": "true"
+        }
+      );
+      break;
+    case "warning":
+      icon = /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        import_outline3.ExclamationCircleIcon,
+        {
+          className: "h-6 w-6 text-yellow-400",
+          "aria-hidden": "true"
+        }
+      );
+      break;
+    case "info":
+      icon = /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        import_outline3.InformationCircleIcon,
+        {
+          className: "h-6 w-6 text-blue-400",
+          "aria-hidden": "true"
+        }
+      );
+      break;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_jsx_runtime26.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    "div",
+    {
+      "aria-live": "assertive",
+      className: "pointer-events-none fixed inset-0 z-40 flex items-end px-4 py-6 sm:items-start sm:p-6",
+      onClick: (evt) => {
+        evt.stopPropagation();
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "flex w-full flex-col items-center space-y-4 sm:items-end", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        import_react35.Transition,
+        {
+          show,
+          as: import_react34.Fragment,
+          enter: "transform ease-out duration-300 transition",
+          enterFrom: "translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2",
+          enterTo: "translate-y-0 opacity-100 sm:translate-x-0",
+          leave: "transition ease-in duration-100",
+          leaveFrom: "opacity-100",
+          leaveTo: "opacity-0",
+          children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "dark:bg-sentio-gray-100 pointer-events-auto w-full max-w-sm rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5 dark:ring-gray-100", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "p-4", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-start", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "flex-shrink-0", children: icon }),
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "ml-3 w-0 flex-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-text-foreground text-sm font-medium", children: title }),
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "mt-1 text-sm text-gray-500", children: message }),
+              buttons && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "mt-4 flex", children: buttons() })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "ml-4 flex flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+              "button",
+              {
+                type: "button",
+                className: "focus:ring-primary-500 dark:bg-sentio-gray-100 inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2",
+                onClick: () => {
+                  setShow(false);
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "sr-only", children: "Close" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_solid5.XMarkIcon, { className: "h-5 w-5", "aria-hidden": "true" })
+                ]
+              }
+            ) })
+          ] }) }) })
+        }
+      ) })
+    }
+  ) });
+}
+
+// src/common/table/ResizeTable.tsx
+var import_react43 = require("react");
 var import_react_table = require("@tanstack/react-table");
 var import_react_virtual2 = require("@tanstack/react-virtual");
 var import_hi2 = require("react-icons/hi");
-var import_lodash6 = require("lodash");
+var import_lodash7 = require("lodash");
 
 // src/common/menu/PopupMenuButton.tsx
-var import_react28 = require("react");
-var import_react29 = require("@headlessui/react");
-var import_react30 = require("@floating-ui/react");
+var import_react40 = require("react");
+var import_react41 = require("@headlessui/react");
+var import_react42 = require("@floating-ui/react");
 
 // src/common/menu/SubMenu.tsx
-var import_react24 = require("react");
-var import_react25 = require("@floating-ui/react");
-var import_react26 = require("@headlessui/react");
+var import_react36 = require("react");
+var import_react37 = require("@floating-ui/react");
+var import_react38 = require("@headlessui/react");
 var import_hi = require("react-icons/hi");
-var import_solid4 = require("@heroicons/react/20/solid");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_solid6 = require("@heroicons/react/20/solid");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var COLOR_MAP = {
   default: {
     active: "bg-gray-100 text-text-foreground dark:bg-primary-600 dark:text-white",
@@ -2283,12 +3102,12 @@ var COLOR_MAP = {
     disabled: "text-red-200 dark:text-red-600/40 cursor-not-allowed"
   }
 };
-var MenuContext = (0, import_react24.createContext)({});
+var MenuContext = (0, import_react36.createContext)({});
 var MenuItem = ({ item, onSelect, labelClassName }) => {
-  const { selectedKey } = (0, import_react24.useContext)(MenuContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react26.Menu.Item, { disabled: item.disabled, children: ({ active }) => {
+  const { selectedKey } = (0, import_react36.useContext)(MenuContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react38.Menu.Item, { disabled: item.disabled, children: ({ active }) => {
     if (item.items) {
-      return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
         SubMenuButton,
         {
           items: item.items,
@@ -2301,7 +3120,7 @@ var MenuItem = ({ item, onSelect, labelClassName }) => {
         item.key
       );
     }
-    const buttonNode = /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+    const buttonNode = /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
       "button",
       {
         onClick: (e) => onSelect?.(item.key, e, item),
@@ -2312,7 +3131,7 @@ var MenuItem = ({ item, onSelect, labelClassName }) => {
         disabled: item.disabled,
         children: [
           item.icon,
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
             "span",
             {
               className: (0, import_class_variance_authority10.cx)(
@@ -2322,15 +3141,15 @@ var MenuItem = ({ item, onSelect, labelClassName }) => {
               children: item.label
             }
           ),
-          item.key === selectedKey ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_hi.HiCheck, { className: "icon-lg ml-2" }) : null
+          item.key === selectedKey ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_hi.HiCheck, { className: "icon-lg ml-2" }) : null
         ]
       }
     );
     if (item.disabled && item.disabledHint) {
-      return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
         PopoverTooltip,
         {
-          text: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-icontent font-icontent text-gray cursor-auto", children: item.disabledHint }),
+          text: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "text-icontent font-icontent text-gray cursor-auto", children: item.disabledHint }),
           strategy: "fixed",
           children: buttonNode
         }
@@ -2350,21 +3169,21 @@ var SubMenuButton = (props) => {
     placement = "right-start",
     buttonClass: buttonClass3
   } = props;
-  const [open, setOpen] = (0, import_react24.useState)(false);
-  const { refs, floatingStyles, context } = (0, import_react25.useFloating)({
+  const [open, setOpen] = (0, import_react36.useState)(false);
+  const { refs, floatingStyles, context } = (0, import_react37.useFloating)({
     open,
     onOpenChange: setOpen,
     placement,
-    whileElementsMounted: import_react25.autoUpdate,
-    middleware: [(0, import_react25.flip)(), (0, import_react25.shift)()]
+    whileElementsMounted: import_react37.autoUpdate,
+    middleware: [(0, import_react37.flip)(), (0, import_react37.shift)()]
   });
-  const { getReferenceProps, getFloatingProps } = (0, import_react25.useInteractions)([
-    (0, import_react25.useHover)(context, {
-      handleClose: (0, import_react25.safePolygon)()
+  const { getReferenceProps, getFloatingProps } = (0, import_react37.useInteractions)([
+    (0, import_react37.useHover)(context, {
+      handleClose: (0, import_react37.safePolygon)()
     })
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
-    import_react26.Menu,
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+    import_react38.Menu,
     {
       as: "div",
       className: (0, import_class_variance_authority10.cx)(
@@ -2373,8 +3192,8 @@ var SubMenuButton = (props) => {
         disabled ? "pointer-events-none cursor-not-allowed text-gray-400" : "cursor-pointer"
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
-          import_react26.Menu.Button,
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+          import_react38.Menu.Button,
           {
             className: (0, import_class_variance_authority10.cx)(
               active || open ? COLOR_MAP[status || "default"].active : COLOR_MAP[status || "default"].default,
@@ -2389,9 +3208,9 @@ var SubMenuButton = (props) => {
             ...getReferenceProps,
             children: [
               props.icon,
-              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "flex-shrink flex-grow text-left", children: label }),
-              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-                import_solid4.ChevronRightIcon,
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "flex-shrink flex-grow text-left", children: label }),
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                import_solid6.ChevronRightIcon,
                 {
                   className: (0, import_class_variance_authority10.cx)(
                     open ? "text-gray-500" : "text-gray-400",
@@ -2404,8 +3223,8 @@ var SubMenuButton = (props) => {
             ]
           }
         ),
-        open && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-          import_react26.Menu.Items,
+        open && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          import_react38.Menu.Items,
           {
             static: true,
             ref: refs.setFloating,
@@ -2413,12 +3232,12 @@ var SubMenuButton = (props) => {
             className: "dark:bg-sentio-gray-100 dark:divide-sentio-gray-400/50 w-48 origin-top cursor-pointer divide-y divide-gray-200 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:ring-gray-100",
             ...getFloatingProps,
             children: items.map(
-              (items2, i) => items2 && items2.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+              (items2, i) => items2 && items2.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                 "div",
                 {
                   className: "overflow-auto py-1",
                   style: { maxHeight: "60vh" },
-                  children: items2.map((item) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(MenuItem, { item, onSelect }, item.key))
+                  children: items2.map((item) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MenuItem, { item, onSelect }, item.key))
                 },
                 i
               ) : null
@@ -2431,8 +3250,8 @@ var SubMenuButton = (props) => {
 };
 
 // src/utils/nav-size-context.ts
-var import_react27 = require("react");
-var NavSizeContext = (0, import_react27.createContext)({
+var import_react39 = require("react");
+var NavSizeContext = (0, import_react39.createContext)({
   small: true,
   showLabel: true,
   setSmall: (small) => {
@@ -2442,7 +3261,7 @@ var NavSizeContext = (0, import_react27.createContext)({
 });
 
 // src/common/menu/PopupMenuButton.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function PopupMenuButton({
   buttonIcon,
   items,
@@ -2462,74 +3281,82 @@ function PopupMenuButton({
   selectedKey,
   onOpenCallback
 }) {
-  const [menuOpen, setMenuOpen] = (0, import_react28.useState)(false);
-  const { small } = (0, import_react28.useContext)(NavSizeContext);
-  const { refs, floatingStyles, context } = (0, import_react30.useFloating)({
+  const [menuOpen, setMenuOpen] = (0, import_react40.useState)(false);
+  const { small } = (0, import_react40.useContext)(NavSizeContext);
+  const { refs, floatingStyles, context } = (0, import_react42.useFloating)({
     open: menuOpen,
     onOpenChange: setMenuOpen,
-    middleware: [(0, import_react30.offset)(offset2), (0, import_react30.flip)(), (0, import_react30.shift)()],
+    middleware: [(0, import_react42.offset)(offset2), (0, import_react42.flip)(), (0, import_react42.shift)()],
     placement,
-    whileElementsMounted: import_react30.autoUpdate
+    whileElementsMounted: import_react42.autoUpdate
   });
-  const itemStyle = (0, import_react28.useMemo)(() => {
+  const itemStyle = (0, import_react40.useMemo)(() => {
     return {
       width
     };
   }, [width]);
-  const onOpenCallbackRef = (0, import_react28.useRef)(onOpenCallback);
+  const onOpenCallbackRef = (0, import_react40.useRef)(onOpenCallback);
   onOpenCallbackRef.current = onOpenCallback;
-  (0, import_react28.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     if (menuOpen) {
       onOpenCallbackRef.current?.();
     }
   }, [menuOpen]);
   let menuItems = null;
   if (menuOpen && items.length > 0) {
-    menuItems = /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(MenuContext.Provider, { value: { selectedKey }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { ref: refs.setFloating, style: floatingStyles, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-      import_react29.Transition,
+    menuItems = /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(MenuContext.Provider, { value: { selectedKey }, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      "div",
       {
-        as: import_react28.Fragment,
-        enter: "transition ease-out duration-100",
-        enterFrom: "transform opacity-0 scale-95",
-        enterTo: "transform opacity-100 scale-100",
-        leave: "transition ease-in duration-75",
-        leaveFrom: "transform opacity-100 scale-100",
-        leaveTo: "transform opacity-0 scale-95",
-        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-          import_react29.Menu.Items,
+        ref: refs.setFloating,
+        style: floatingStyles,
+        className: small ? "z-10" : "z-[100]",
+        children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          import_react41.Transition,
           {
-            className: "dark:bg-sentio-gray-200 dark:divide-sentio-gray-400/50 z-10 mt-1 w-[80vw] origin-top cursor-pointer divide-y divide-gray-200 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:ring-gray-100 sm:w-64",
-            style: itemStyle,
-            children: [
-              header,
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: `${itemsClassName} divide-y`, children: items.map((items2, i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "py-1", children: [
-                groupLabels?.[i] ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "px-4 py-0.5 text-[10px] font-medium leading-[12px] text-gray-500", children: groupLabels[i] }) : null,
-                items2.map(
-                  (item) => renderItem ? renderItem(item) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                    MenuItem,
-                    {
-                      item,
-                      onSelect,
-                      labelClassName: itemLabelClassName
-                    },
-                    item.key
-                  )
-                )
-              ] }, i)) }),
-              footer
-            ]
+            as: import_react40.Fragment,
+            enter: "transition ease-out duration-100",
+            enterFrom: "transform opacity-0 scale-95",
+            enterTo: "transform opacity-100 scale-100",
+            leave: "transition ease-in duration-75",
+            leaveFrom: "transform opacity-100 scale-100",
+            leaveTo: "transform opacity-0 scale-95",
+            children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+              import_react41.Menu.Items,
+              {
+                className: "dark:bg-sentio-gray-200 dark:divide-sentio-gray-400/50 z-10 mt-1 w-[80vw] origin-top cursor-pointer divide-y divide-gray-200 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:ring-gray-100 sm:w-64",
+                style: itemStyle,
+                children: [
+                  header,
+                  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: `${itemsClassName} divide-y`, children: items.map((items2, i) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "py-1", children: [
+                    groupLabels?.[i] ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "px-4 py-0.5 text-[10px] font-medium leading-[12px] text-gray-500", children: groupLabels[i] }) : null,
+                    items2.map(
+                      (item) => renderItem ? renderItem(item) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                        MenuItem,
+                        {
+                          item,
+                          onSelect,
+                          labelClassName: itemLabelClassName
+                        },
+                        item.key
+                      )
+                    )
+                  ] }, i)) }),
+                  footer
+                ]
+              }
+            )
           }
         )
       }
-    ) }) });
+    ) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react29.Menu, { children: ({ open }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react41.Menu, { children: ({ open }) => {
     setTimeout(() => {
       setMenuOpen(open);
     }, 0);
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-        import_react29.Menu.Button,
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        import_react41.Menu.Button,
         {
           className: (0, import_class_variance_authority10.cx)(
             "text-gray w-fit px-1 hover:text-gray-500 active:text-gray-700",
@@ -2541,14 +3368,14 @@ function PopupMenuButton({
           children: typeof buttonIcon === "function" ? buttonIcon(menuOpen) : buttonIcon
         }
       ),
-      portal ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react30.FloatingPortal, { children: menuItems }) : menuItems
+      portal ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react42.FloatingPortal, { children: menuItems }) : menuItems
     ] });
   } });
 }
 
 // src/common/table/Icons.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var MoveLeftIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var MoveLeftIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
   "svg",
   {
     width: "16",
@@ -2558,8 +3385,8 @@ var MoveLeftIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
     xmlns: "http://www.w3.org/2000/svg",
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("g", { clipPath: "url(#clip0_6869_7300)", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("g", { clipPath: "url(#clip0_6869_7300)", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           "path",
           {
             d: "M2.66666 8H9.33332",
@@ -2569,7 +3396,7 @@ var MoveLeftIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
             strokeLinejoin: "round"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           "path",
           {
             d: "M2.66666 8L5.33332 10.6667",
@@ -2579,7 +3406,7 @@ var MoveLeftIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
             strokeLinejoin: "round"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           "path",
           {
             d: "M2.66669 7.9987L5.33335 5.33203",
@@ -2589,7 +3416,7 @@ var MoveLeftIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
             strokeLinejoin: "round"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           "path",
           {
             d: "M13.3333 2.66797V13.3346",
@@ -2600,11 +3427,11 @@ var MoveLeftIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("clipPath", { id: "clip0_6869_7300", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("rect", { width: "16", height: "16", fill: "white" }) }) })
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("clipPath", { id: "clip0_6869_7300", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("rect", { width: "16", height: "16", fill: "white" }) }) })
     ]
   }
 );
-var MoveRightIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+var MoveRightIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
   "svg",
   {
     width: "16",
@@ -2614,8 +3441,8 @@ var MoveRightIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
     xmlns: "http://www.w3.org/2000/svg",
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("g", { clipPath: "url(#clip0_6869_7309)", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("g", { clipPath: "url(#clip0_6869_7309)", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           "path",
           {
             d: "M13.3333 8H6.66666",
@@ -2625,7 +3452,7 @@ var MoveRightIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
             strokeLinejoin: "round"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           "path",
           {
             d: "M13.3333 8L10.6667 10.6667",
@@ -2635,7 +3462,7 @@ var MoveRightIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
             strokeLinejoin: "round"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           "path",
           {
             d: "M13.3334 7.9987L10.6667 5.33203",
@@ -2645,7 +3472,7 @@ var MoveRightIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
             strokeLinejoin: "round"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           "path",
           {
             d: "M2.66669 2.66797V13.3346",
@@ -2656,11 +3483,11 @@ var MoveRightIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("clipPath", { id: "clip0_6869_7309", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("rect", { width: "16", height: "16", fill: "white" }) }) })
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("clipPath", { id: "clip0_6869_7309", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("rect", { width: "16", height: "16", fill: "white" }) }) })
     ]
   }
 );
-var RenameIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+var RenameIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
   "svg",
   {
     width: "16",
@@ -2670,7 +3497,7 @@ var RenameIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
     xmlns: "http://www.w3.org/2000/svg",
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         "path",
         {
           d: "M8 13.3281H14",
@@ -2680,7 +3507,7 @@ var RenameIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
           strokeLinejoin: "round"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         "path",
         {
           d: "M11 2.33609C11.2652 2.07087 11.6249 1.92188 12 1.92188C12.1857 1.92188 12.3696 1.95845 12.5412 2.02953C12.7128 2.1006 12.8687 2.20477 13 2.33609C13.1313 2.46741 13.2355 2.62331 13.3066 2.79489C13.3776 2.96647 13.4142 3.15037 13.4142 3.33609C13.4142 3.52181 13.3776 3.7057 13.3066 3.87728C13.2355 4.04886 13.1313 4.20477 13 4.33609L4.66667 12.6694L2 13.3361L2.66667 10.6694L11 2.33609Z",
@@ -2693,7 +3520,7 @@ var RenameIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
     ]
   }
 );
-var DeleteIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+var DeleteIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
   "svg",
   {
     width: "16",
@@ -2703,8 +3530,8 @@ var DeleteIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
     xmlns: "http://www.w3.org/2000/svg",
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("g", { clipPath: "url(#clip0_6869_7344)", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("g", { clipPath: "url(#clip0_6869_7344)", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           "path",
           {
             d: "M2.66669 4.66797H13.3334",
@@ -2714,7 +3541,7 @@ var DeleteIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
             strokeLinejoin: "round"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           "path",
           {
             d: "M6.66669 7.33203V11.332",
@@ -2724,7 +3551,7 @@ var DeleteIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
             strokeLinejoin: "round"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           "path",
           {
             d: "M9.33331 7.33203V11.332",
@@ -2734,7 +3561,7 @@ var DeleteIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
             strokeLinejoin: "round"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           "path",
           {
             d: "M3.33331 4.66797L3.99998 12.668C3.99998 13.0216 4.14046 13.3607 4.3905 13.6108C4.64055 13.8608 4.97969 14.0013 5.33331 14.0013H10.6666C11.0203 14.0013 11.3594 13.8608 11.6095 13.6108C11.8595 13.3607 12 13.0216 12 12.668L12.6666 4.66797",
@@ -2744,7 +3571,7 @@ var DeleteIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
             strokeLinejoin: "round"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           "path",
           {
             d: "M6 4.66667V2.66667C6 2.48986 6.07024 2.32029 6.19526 2.19526C6.32029 2.07024 6.48986 2 6.66667 2H9.33333C9.51014 2 9.67971 2.07024 9.80474 2.19526C9.92976 2.32029 10 2.48986 10 2.66667V4.66667",
@@ -2755,14 +3582,14 @@ var DeleteIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("clipPath", { id: "clip0_6869_7344", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("rect", { width: "16", height: "16", fill: "white" }) }) })
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("clipPath", { id: "clip0_6869_7344", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("rect", { width: "16", height: "16", fill: "white" }) }) })
     ]
   }
 );
 
 // src/common/table/ResizeTable.tsx
 var import_io5 = require("react-icons/io5");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var reorder = (list, startIndex, endIndex) => {
   const result = Array.from(list);
   const [removed] = result.splice(startIndex, 1);
@@ -2772,7 +3599,7 @@ var reorder = (list, startIndex, endIndex) => {
 function onPreventClick(e) {
   e.stopPropagation();
 }
-var _ResizeTable = (0, import_react31.forwardRef)(function _ResizeTable2({
+var _ResizeTable = (0, import_react43.forwardRef)(function _ResizeTable2({
   data,
   columns,
   columnResizeMode,
@@ -2796,7 +3623,7 @@ var _ResizeTable = (0, import_react31.forwardRef)(function _ResizeTable2({
   estimatedRowHeight = 35,
   overscan = 5
 }, tableContainerRef) {
-  const adjustedColumns = (0, import_react31.useMemo)(() => {
+  const adjustedColumns = (0, import_react43.useMemo)(() => {
     let totalWidth = 0;
     const newColumns = columns.map((c) => {
       const item = Object.assign({ minSize }, c);
@@ -2815,7 +3642,7 @@ var _ResizeTable = (0, import_react31.forwardRef)(function _ResizeTable2({
     }
     return newColumns;
   }, [columns, minSize, minWidth]);
-  const [tableState, setTableState] = (0, import_react31.useState)(() => {
+  const [tableState, setTableState] = (0, import_react43.useState)(() => {
     const initialState = {
       pagination: {
         pageIndex: 0,
@@ -2835,7 +3662,7 @@ var _ResizeTable = (0, import_react31.forwardRef)(function _ResizeTable2({
     onStateChange: setTableState,
     manualSorting
   });
-  (0, import_react31.useEffect)(() => {
+  (0, import_react43.useEffect)(() => {
     if (state && Object.keys(state).length > 0) {
       setTableState((prev) => {
         const newState = {
@@ -2843,19 +3670,19 @@ var _ResizeTable = (0, import_react31.forwardRef)(function _ResizeTable2({
           ...state,
           pagination: prev.pagination || state.pagination || { pageIndex: 0, pageSize: 10 }
         };
-        return (0, import_lodash6.isEqual)(prev, newState) ? prev : newState;
+        return (0, import_lodash7.isEqual)(prev, newState) ? prev : newState;
       });
     }
   }, [state]);
-  const debounceStateChange = (0, import_react31.useMemo)(() => {
+  const debounceStateChange = (0, import_react43.useMemo)(() => {
     if (!onStateChange) return void 0;
-    return (0, import_lodash6.debounce)(onStateChange, 500, {});
+    return (0, import_lodash7.debounce)(onStateChange, 500, {});
   }, [onStateChange]);
-  (0, import_react31.useEffect)(() => {
+  (0, import_react43.useEffect)(() => {
     debounceStateChange?.(tableState);
   }, [debounceStateChange, tableState]);
-  const fetchMoreOnBottomReached = (0, import_react31.useMemo)(() => {
-    return (0, import_lodash6.debounce)((containerRefElement) => {
+  const fetchMoreOnBottomReached = (0, import_react43.useMemo)(() => {
+    return (0, import_lodash7.debounce)((containerRefElement) => {
       if (containerRefElement) {
         const { scrollHeight, scrollTop, clientHeight } = containerRefElement;
         if (scrollHeight - scrollTop - clientHeight < 300 && !isFetching && hasMore) {
@@ -2864,8 +3691,8 @@ var _ResizeTable = (0, import_react31.forwardRef)(function _ResizeTable2({
       }
     }, 500);
   }, [onFetchMore, isFetching, hasMore]);
-  const tableContainerElementRef = (0, import_react31.useRef)(null);
-  (0, import_react31.useEffect)(() => {
+  const tableContainerElementRef = (0, import_react43.useRef)(null);
+  (0, import_react43.useEffect)(() => {
     if (tableContainerRef) {
       if (typeof tableContainerRef === "function") {
         tableContainerRef(tableContainerElementRef.current);
@@ -2877,21 +3704,21 @@ var _ResizeTable = (0, import_react31.forwardRef)(function _ResizeTable2({
   const rowVirtualizer = (0, import_react_virtual2.useVirtualizer)({
     count: enableVirtualization ? table.getRowModel().rows.length : 0,
     getScrollElement: () => tableContainerElementRef.current,
-    estimateSize: (0, import_react31.useCallback)(() => estimatedRowHeight, [estimatedRowHeight]),
+    estimateSize: (0, import_react43.useCallback)(() => estimatedRowHeight, [estimatedRowHeight]),
     overscan,
     enabled: enableVirtualization
   });
   const virtualRows = enableVirtualization ? rowVirtualizer.getVirtualItems() : [];
   const paddingTop = enableVirtualization && virtualRows.length > 0 ? virtualRows[0].start : 0;
   const paddingBottom = enableVirtualization && virtualRows.length > 0 ? rowVirtualizer.getTotalSize() - (virtualRows[virtualRows.length - 1].start + virtualRows[virtualRows.length - 1].size) : 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     "div",
     {
       className: "overflow-auto",
       style: height ? { height } : void 0,
       ref: tableContainerElementRef,
       onScroll: (e) => fetchMoreOnBottomReached(e.target),
-      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
         "table",
         {
           className: "w-fit",
@@ -2901,11 +3728,11 @@ var _ResizeTable = (0, import_react31.forwardRef)(function _ResizeTable2({
             }
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("thead", { className: "dark:bg-sentio-gray-100 sticky top-0 z-[1] bg-white", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("thead", { className: "dark:bg-sentio-gray-100 sticky top-0 z-[1] bg-white", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
               "tr",
               {
                 className: "relative flex w-fit cursor-pointer items-center border-b",
-                children: headerGroup.headers.map((header, i) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+                children: headerGroup.headers.map((header, i) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
                   "th",
                   {
                     colSpan: header.colSpan,
@@ -2915,12 +3742,12 @@ var _ResizeTable = (0, import_react31.forwardRef)(function _ResizeTable2({
                     className: "text-ilabel group/th blinked dark:hover:!bg-sentio-gray-300 dark:bg-sentio-gray-100 text-text-foreground hover:!bg-primary-50 relative flex items-center whitespace-nowrap bg-white px-2 py-2 text-left font-semibold",
                     onClick: header.column.getToggleSortingHandler(),
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("span", { className: "flex w-full flex-1 overflow-hidden", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "flex-1 truncate", children: header.isPlaceholder ? null : (0, import_react_table.flexRender)(
+                      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { className: "flex w-full flex-1 overflow-hidden", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "flex-1 truncate", children: header.isPlaceholder ? null : (0, import_react_table.flexRender)(
                           header.column.columnDef.header,
                           header.getContext()
                         ) }),
-                        header.column.getCanSort() && allowSort ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                        header.column.getCanSort() && allowSort ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                           "span",
                           {
                             className: (0, import_class_variance_authority10.cx)(
@@ -2929,16 +3756,16 @@ var _ResizeTable = (0, import_react31.forwardRef)(function _ResizeTable2({
                               "inline-block cursor-pointer",
                               "shrink-0"
                             ),
-                            children: header.column.getIsSorted() ? header.column.getIsSorted() == "desc" ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_hi2.HiOutlineSortDescending, { className: "h-4 w-4" }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_hi2.HiOutlineSortAscending, { className: "h-4 w-4" }) : ""
+                            children: header.column.getIsSorted() ? header.column.getIsSorted() == "desc" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_hi2.HiOutlineSortDescending, { className: "h-4 w-4" }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_hi2.HiOutlineSortAscending, { className: "h-4 w-4" }) : ""
                           }
                         ) : null
                       ] }),
-                      allowEditColumn !== false && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                      allowEditColumn !== false && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                         "span",
                         {
                           className: "invisible inline-block group-hover/th:visible",
                           onClick: onPreventClick,
-                          children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                          children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                             PopupMenuButton,
                             {
                               buttonClassName: "align-text-bottom",
@@ -2964,19 +3791,19 @@ var _ResizeTable = (0, import_react31.forwardRef)(function _ResizeTable2({
                                     console.log(commandKey, "is not applied");
                                 }
                               },
-                              buttonIcon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_hi2.HiChevronDown, { className: "icon mr-2" }),
+                              buttonIcon: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_hi2.HiChevronDown, { className: "icon mr-2" }),
                               items: [
                                 [
                                   {
                                     key: "reorder.left",
                                     label: "Move column left",
-                                    icon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(MoveLeftIcon, { className: "mr-2" }),
+                                    icon: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(MoveLeftIcon, { className: "mr-2" }),
                                     disabled: i === 0
                                   },
                                   {
                                     key: "reorder.right",
                                     label: "Move column right",
-                                    icon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(MoveRightIcon, { className: "mr-2" }),
+                                    icon: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(MoveRightIcon, { className: "mr-2" }),
                                     disabled: i === headerGroup.headers.length - 1
                                   }
                                 ],
@@ -2985,7 +3812,7 @@ var _ResizeTable = (0, import_react31.forwardRef)(function _ResizeTable2({
                                     {
                                       key: "rename",
                                       label: "Rename column",
-                                      icon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(RenameIcon, { className: "mr-2" })
+                                      icon: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(RenameIcon, { className: "mr-2" })
                                     }
                                   ]
                                 ] : [],
@@ -2994,7 +3821,7 @@ var _ResizeTable = (0, import_react31.forwardRef)(function _ResizeTable2({
                                     {
                                       key: "delete",
                                       label: "Remove column",
-                                      icon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DeleteIcon, { className: "mr-2" }),
+                                      icon: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(DeleteIcon, { className: "mr-2" }),
                                       status: "danger"
                                     }
                                   ]
@@ -3004,7 +3831,7 @@ var _ResizeTable = (0, import_react31.forwardRef)(function _ResizeTable2({
                           )
                         }
                       ),
-                      header.column.getCanResize() ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                      header.column.getCanResize() ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                         "div",
                         {
                           onMouseDown: header.getResizeHandler(),
@@ -3027,11 +3854,11 @@ var _ResizeTable = (0, import_react31.forwardRef)(function _ResizeTable2({
               },
               headerGroup.id
             )) }),
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("tbody", { children: [
-              enableVirtualization && paddingTop > 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { style: { height: `${paddingTop}px` } }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("tbody", { children: [
+              enableVirtualization && paddingTop > 0 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("td", { style: { height: `${paddingTop}px` } }) }),
               enableVirtualization ? virtualRows.map((virtualRow) => {
                 const row = table.getRowModel().rows[virtualRow.index];
-                return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                   "tr",
                   {
                     "data-index": virtualRow.index,
@@ -3040,7 +3867,7 @@ var _ResizeTable = (0, import_react31.forwardRef)(function _ResizeTable2({
                       onClick ? "cursor-pointer" : "",
                       rowClassNameFn ? rowClassNameFn(row) : ""
                     ),
-                    children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                    children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                       "td",
                       {
                         ...{
@@ -3060,7 +3887,7 @@ var _ResizeTable = (0, import_react31.forwardRef)(function _ResizeTable2({
                   },
                   row.id
                 );
-              }) : table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              }) : table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                 "tr",
                 {
                   className: (0, import_class_variance_authority10.cx)(
@@ -3068,7 +3895,7 @@ var _ResizeTable = (0, import_react31.forwardRef)(function _ResizeTable2({
                     onClick ? "cursor-pointer" : "",
                     rowClassNameFn ? rowClassNameFn(row) : ""
                   ),
-                  children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                  children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                     "td",
                     {
                       ...{
@@ -3088,8 +3915,8 @@ var _ResizeTable = (0, import_react31.forwardRef)(function _ResizeTable2({
                 },
                 row.id
               )),
-              enableVirtualization && paddingBottom > 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { style: { height: `${paddingBottom}px` } }) }),
-              onFetchMore && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              enableVirtualization && paddingBottom > 0 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("td", { style: { height: `${paddingBottom}px` } }) }),
+              onFetchMore && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                 "td",
                 {
                   colSpan: table.getHeaderGroups()[0].headers.length,
@@ -3098,8 +3925,8 @@ var _ResizeTable = (0, import_react31.forwardRef)(function _ResizeTable2({
                     if (isFetching) return;
                     onFetchMore?.();
                   },
-                  children: isFetching || hasMore ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("span", { className: "inline-flex items-center gap-2", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                  children: isFetching || hasMore ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { className: "inline-flex items-center gap-2", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                       import_io5.IoReload,
                       {
                         className: (0, import_class_variance_authority10.cx)(
@@ -3108,7 +3935,7 @@ var _ResizeTable = (0, import_react31.forwardRef)(function _ResizeTable2({
                         )
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: "Loading..." })
+                    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { children: "Loading..." })
                   ] }) : "No more data"
                 }
               ) })
@@ -3119,7 +3946,7 @@ var _ResizeTable = (0, import_react31.forwardRef)(function _ResizeTable2({
     }
   );
 });
-var ResizeTable = (0, import_react31.memo)(_ResizeTable);
+var ResizeTable = (0, import_react43.memo)(_ResizeTable);
 
 // src/utils/number-format.ts
 var import_bigdecimal = __toESM(require("@sentio/bigdecimal"));
@@ -3146,10 +3973,10 @@ function getNumberWithDecimal(hex, decimal, asNumber) {
 }
 
 // src/utils/use-mobile.ts
-var import_react32 = require("react");
+var import_react44 = require("react");
 function useMobile(breakpoint = 768, defaultValue = false) {
-  const [isMobile, setIsMobile] = (0, import_react32.useState)(defaultValue);
-  (0, import_react32.useEffect)(() => {
+  const [isMobile, setIsMobile] = (0, import_react44.useState)(defaultValue);
+  (0, import_react44.useEffect)(() => {
     const checkUserAgent = () => {
       if (typeof window === "undefined") return false;
       const userAgent = window.navigator.userAgent.toLowerCase();
@@ -3201,13 +4028,15 @@ function useMobile(breakpoint = 768, defaultValue = false) {
   BaseZIndexContext,
   Button,
   COLOR_MAP,
+  Checkbox,
   CloseSquareO,
   Collapse,
+  ConfirmDialog,
   CopyButton,
   CopyIcon,
   CopySuccessIcon,
-  DarkModeContext,
   DeleteIcon,
+  Descriptions,
   DisclosurePanel,
   Empty,
   EyeO,
@@ -3222,25 +4051,34 @@ function useMobile(breakpoint = 768, defaultValue = false) {
   MoveLeftIcon,
   MoveRightIcon,
   NavSizeContext,
+  Notification,
   PlusSquareO,
   PopoverTooltip,
   PopupMenuButton,
   Proccessing,
+  ProgressBar,
   ROOT_KEY,
   RadioSelect,
   RenameIcon,
   ResizeTable,
   SUFFIX_NODE_KEY,
+  SearchInput,
   Select,
+  SlideOver,
   SpinLoading,
   StatusBadge,
   StatusRole,
   SubMenuButton,
   SvgFolderContext,
   Switch,
+  TabGroup,
+  TabList,
+  TabPanel,
+  TabPanels,
   buttonClass,
   classNames,
   getNumberWithDecimal,
+  getTabClassName,
   parseHex,
   useBoolean,
   useDarkMode,