@sentio/ui-core 0.1.4 → 0.1.5

package/dist/index.mjs

@@ -272,7 +272,11 @@ var CopyButton = ({
 };
 
 // src/common/NewButton.tsx
-import { cloneElement, forwardRef, useMemo } from "react";
+import {
+  cloneElement,
+  forwardRef,
+  useMemo
+} from "react";
 
 // src/common/DivTooltip.tsx
 import React2, { useRef as useRef2, useState as useState2, useEffect as useEffect2 } from "react";
@@ -542,7 +546,10 @@ var buttonClass = cva(["inline-flex", "items-center", "font-medium"], {
     disabled: false
   }
 });
-function Proccessing({ className, light }) {
+function Proccessing({
+  className,
+  light
+}) {
   return /* @__PURE__ */ jsxs5("svg", { className: `h-5 w-5 animate-spin ${className}`, viewBox: "0 0 24 24", children: [
     /* @__PURE__ */ jsx5(
       "circle",
@@ -625,12 +632,17 @@ function Button({
       iconEl2 = /* @__PURE__ */ jsx5(
         Proccessing,
         {
-          className: cx(pIconClass({ size }), role == "primary" ? "text-white" : ""),
+          className: cx(
+            pIconClass({ size }),
+            role == "primary" ? "text-white" : ""
+          ),
           light: role !== "primary"
         }
       );
     } else if (icon) {
-      iconEl2 = cloneElement(icon, { className: cx(icon.props.className, iconClasses) });
+      iconEl2 = cloneElement(icon, {
+        className: cx(icon.props.className, iconClasses)
+      });
     }
     return iconEl2;
   }, [icon, iconClasses, processing, role]);
@@ -2036,7 +2048,7 @@ var FlatTree = (props) => {
 var FlatTree_default = memo3(FlatTree);
 
 // src/common/text/LinkifyText.tsx
-import { linkifyUrlsToHtml } from "linkify-urls";
+import linkifyHtml from "linkify-html";
 import DOMPurify from "dompurify";
 import { memo as memo4 } from "react";
 import { isString as isString2, isUndefined, isNull } from "lodash";
@@ -2076,7 +2088,7 @@ var LinkifyText = memo4(function LinkifyText2({
     }
     return null;
   }
-  const linkStr = linkifyUrlsToHtml(
+  const linkStr = linkifyHtml(
     isHighlightNumbers ? renderTextWithColoredNumbers(text) : text,
     {
       attributes: {
@@ -2100,15 +2112,96 @@ import { useContext as useContext4 } from "react";
 
 // src/utils/extension-context.ts
 import { createContext as createContext3, useContext as useContext3 } from "react";
+
+// src/utils/use-dark-mode.ts
+import { useEffect as useEffect7, useState as useState9 } from "react";
+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 useDarkMode = () => {
+  const [isDarkMode, setIsDarkMode] = useState9(false);
+  useEffect7(() => {
+    const instance = DarkModeListener.instance;
+    setIsDarkMode(instance.darkMode);
+    instance.addListener(setIsDarkMode);
+    return () => {
+      instance.removeListener(setIsDarkMode);
+    };
+  }, []);
+  return isDarkMode;
+};
+
+// src/utils/extension-context.ts
 var SvgFolderContext = createContext3("");
 var useDetectExtenstion = () => {
   const folderPath = useContext3(SvgFolderContext);
   return Boolean(folderPath);
 };
-var DarkModeContext = createContext3(false);
-var useDarkMode = () => {
-  return useContext3(DarkModeContext);
-};
 
 // src/common/Empty.tsx
 import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
@@ -2209,15 +2302,742 @@ var HeaderToolsContent = ({
   return /* @__PURE__ */ jsx18("div", { className: classNames11("w-full overflow-hidden", className), children });
 };
 
+// src/common/SlideOver.tsx
+import { Fragment as Fragment5, useCallback as useCallback7, useEffect as useEffect8, useRef as useRef5 } from "react";
+import { Dialog as Dialog2, Transition as Transition2 } from "@headlessui/react";
+import { XMarkIcon as XIcon } from "@heroicons/react/24/outline";
+import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
+function SlideOver({
+  title,
+  open,
+  onClose,
+  children,
+  size,
+  headAddon,
+  triggerClose = "all",
+  noAnimation
+}) {
+  const onDialogClose = useCallback7(() => {
+    if (triggerClose === "all") {
+      onClose();
+    }
+  }, [triggerClose, onClose]);
+  const openRef = useRef5(open);
+  openRef.current = open;
+  useEffect8(() => {
+    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__ */ jsx19("div", { className: "fixed inset-0 overflow-hidden", children: /* @__PURE__ */ jsxs16("div", { className: "absolute inset-y-0 right-0 flex max-w-full pl-10 sm:pl-16", children: [
+    /* @__PURE__ */ jsx19("div", { className: "max-w-2xl max-w-3xl max-w-4xl max-w-5xl max-w-6xl max-w-7xl" }),
+    /* @__PURE__ */ jsxs16(
+      Dialog2.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__ */ jsx19("div", { className: "dark:bg-sentio-gray-100 relative border-b bg-white px-4 py-3", children: /* @__PURE__ */ jsxs16("div", { className: "flex h-auto items-start justify-between space-x-3 sm:h-5", children: [
+            /* @__PURE__ */ jsx19("div", { className: "flex-1 space-y-1", children: /* @__PURE__ */ jsx19(Dialog2.Title, { className: "text-text-foreground text-[15px] font-semibold", children: title }) }),
+            /* @__PURE__ */ jsxs16("div", { className: "flex-0 flex h-auto items-center sm:h-5", children: [
+              headAddon,
+              /* @__PURE__ */ jsxs16(
+                "button",
+                {
+                  type: "button",
+                  className: "hover:text-text-foreground ml-2 text-gray-800 dark:text-gray-500",
+                  onClick: () => onClose(),
+                  children: [
+                    /* @__PURE__ */ jsx19("span", { className: "sr-only", children: "Close panel" }),
+                    /* @__PURE__ */ jsx19(XIcon, { className: "h-5 w-5", "aria-hidden": "true" })
+                  ]
+                }
+              )
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsx19("div", { className: "flex flex-1 overflow-y-auto overflow-x-hidden", children })
+        ]
+      }
+    )
+  ] }) });
+  if (noAnimation) {
+    return /* @__PURE__ */ jsx19(
+      Dialog2,
+      {
+        open,
+        as: "div",
+        className: "relative z-10",
+        id: "test",
+        onClose: onDialogClose,
+        children: contentNode
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx19(Transition2.Root, { show: open, as: "div", children: /* @__PURE__ */ jsx19(
+    Dialog2,
+    {
+      static: true,
+      as: "div",
+      className: "relative z-10",
+      id: "test",
+      onClose: onDialogClose,
+      children: /* @__PURE__ */ jsx19(
+        Transition2.Child,
+        {
+          as: Fragment5,
+          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
+import { Fragment as Fragment6, useRef as useRef6, useState as useState10 } from "react";
+import { Dialog as Dialog3, Transition as Transition3 } from "@headlessui/react";
+import {
+  ExclamationCircleIcon as ExclamationIcon,
+  QuestionMarkCircleIcon
+} from "@heroicons/react/24/outline";
+import { Fragment as Fragment7, jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
+function ConfirmDialog({
+  message,
+  title,
+  open,
+  onClose,
+  onConfirm,
+  buttonLabel = "Delete",
+  type,
+  buttons,
+  children,
+  disabled
+}) {
+  const cancelButtonRef = useRef6(null);
+  const [processing, setProcessing] = useState10(false);
+  async function confirm() {
+    setProcessing(true);
+    try {
+      await onConfirm();
+    } finally {
+      setProcessing(false);
+      onClose(false);
+    }
+  }
+  return /* @__PURE__ */ jsx20(Transition3.Root, { show: open, as: Fragment6, children: /* @__PURE__ */ jsxs17(
+    Dialog3,
+    {
+      as: "div",
+      className: "relative z-10",
+      "aria-label": "confirm",
+      initialFocus: cancelButtonRef,
+      onClose,
+      children: [
+        /* @__PURE__ */ jsx20(
+          Transition3.Child,
+          {
+            as: Fragment6,
+            enter: "ease-out duration-300",
+            enterFrom: "opacity-0",
+            enterTo: "opacity-100",
+            leave: "ease-in duration-200",
+            leaveFrom: "opacity-100",
+            leaveTo: "opacity-0",
+            children: /* @__PURE__ */ jsx20("div", { className: "fixed inset-0 bg-gray-500/75 transition-opacity dark:bg-gray-200/50" })
+          }
+        ),
+        /* @__PURE__ */ jsx20("div", { className: "fixed inset-0 z-10 overflow-y-auto", children: /* @__PURE__ */ jsx20("div", { className: "flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0", children: /* @__PURE__ */ jsx20(
+          Transition3.Child,
+          {
+            as: Fragment6,
+            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__ */ jsxs17(Dialog3.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__ */ jsx20("div", { className: "dark:bg-sentio-gray-100 bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4", children: /* @__PURE__ */ jsxs17("div", { className: "sm:flex sm:items-start", children: [
+                type == "danger" && /* @__PURE__ */ jsx20("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__ */ jsx20(
+                  ExclamationIcon,
+                  {
+                    className: "h-6 w-6 text-red-600 dark:text-red-800",
+                    "aria-hidden": "true"
+                  }
+                ) }),
+                type == "question" && /* @__PURE__ */ jsx20("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__ */ jsx20(
+                  QuestionMarkCircleIcon,
+                  {
+                    className: "text-primary-600 dark:text-primary-800 h-6 w-6",
+                    "aria-hidden": "true"
+                  }
+                ) }),
+                /* @__PURE__ */ jsxs17("div", { className: "mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left", children: [
+                  /* @__PURE__ */ jsx20(
+                    Dialog3.Title,
+                    {
+                      as: "h3",
+                      className: "text-text-foreground text-lg font-medium leading-6",
+                      children: title
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs17("div", { className: "mt-2", children: [
+                    message && /* @__PURE__ */ jsx20("p", { className: "text-sm text-gray-500", children: message }),
+                    children
+                  ] })
+                ] })
+              ] }) }),
+              /* @__PURE__ */ jsx20("div", { className: "flex gap-2 bg-gray-50 px-4 py-3 sm:flex-row-reverse sm:px-6", children: buttons ? buttons : /* @__PURE__ */ jsxs17(Fragment7, { children: [
+                /* @__PURE__ */ jsx20(
+                  NewButton,
+                  {
+                    type: "button",
+                    processing,
+                    status: type == "danger" ? "danger" : void 0,
+                    role: "primary",
+                    onClick: () => confirm(),
+                    disabled,
+                    size: "lg",
+                    children: buttonLabel
+                  }
+                ),
+                /* @__PURE__ */ jsx20(
+                  NewButton,
+                  {
+                    type: "button",
+                    role: "secondary",
+                    onClick: () => onClose(false),
+                    ref: cancelButtonRef,
+                    size: "lg",
+                    children: "Cancel"
+                  }
+                )
+              ] }) })
+            ] })
+          }
+        ) }) })
+      ]
+    }
+  ) });
+}
+
+// src/common/StyledTabs.tsx
+import React5 from "react";
+import { Tab as HeadlessTab } from "@headlessui/react";
+import { jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
+var getTabClassName = ({ selected }) => cx3(
+  "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__ */ jsx21(
+    HeadlessTab.Group,
+    {
+      onChange,
+      defaultIndex,
+      selectedIndex,
+      children: /* @__PURE__ */ jsx21("div", { className: cx3("flex flex-col", className), children })
+    }
+  );
+};
+var List = ({
+  tabs,
+  disabledTabs,
+  className,
+  noBorder,
+  children
+}) => {
+  return /* @__PURE__ */ jsxs18(
+    HeadlessTab.List,
+    {
+      className: cx3(
+        "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__ */ jsx21(
+          HeadlessTab,
+          {
+            className: ({ selected }) => cx3(
+              "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 = React5.forwardRef(function Panels2({ children, className, ...props }, ref) {
+  return /* @__PURE__ */ jsx21(
+    HeadlessTab.Panels,
+    {
+      className: cx3("flex-1", className || "w-full overflow-auto"),
+      ...props,
+      ref,
+      children
+    }
+  );
+});
+var Panel = (props) => {
+  const { className, ...otherProps } = props;
+  return /* @__PURE__ */ jsx21(
+    HeadlessTab.Panel,
+    {
+      className: cx3("space-y-2 outline-0", className),
+      ...otherProps
+    }
+  );
+};
+
+// src/common/SearchInput.tsx
+import { MagnifyingGlassIcon as SearchIcon } from "@heroicons/react/20/solid";
+import { forwardRef as forwardRef4 } from "react";
+import { jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
+var SearchInput = forwardRef4((props, ref) => {
+  const {
+    onChange,
+    value,
+    onBlur,
+    onKeydown,
+    addonButton,
+    placeholder = "Search",
+    ...args
+  } = props;
+  return /* @__PURE__ */ jsxs19("div", { className: "min-w-0 flex-1", children: [
+    /* @__PURE__ */ jsx22("label", { htmlFor: "search", className: "sr-only", children: "Search" }),
+    /* @__PURE__ */ jsxs19("div", { className: "focus-within:ring-primary-500 focus-within:border-primary-500 relative flex  rounded-md  border border-gray-300", children: [
+      /* @__PURE__ */ jsx22("div", { className: "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-1 sm:pl-3", children: /* @__PURE__ */ jsx22(
+        SearchIcon,
+        {
+          className: "sm:h-4.5 sm:w-4.5 h-4 w-4 text-gray-400",
+          "aria-hidden": "true"
+        }
+      ) }),
+      /* @__PURE__ */ jsx22(
+        "input",
+        {
+          onChange: (e) => onChange(e.target.value),
+          onBlur,
+          onKeyDown: onKeydown,
+          type: "search",
+          className: cx3(
+            "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
+import { jsx as jsx23, jsxs as jsxs20 } from "react/jsx-runtime";
+var Checkbox = ({
+  checked,
+  onChange,
+  label,
+  labelNode,
+  id,
+  name,
+  inputProps,
+  disabled,
+  labelClassName,
+  className
+}) => {
+  return /* @__PURE__ */ jsxs20(
+    "div",
+    {
+      className: cx3("inline-flex items-center gap-2", className),
+      onClick: (e) => {
+        e.stopPropagation();
+        onChange?.(!checked);
+      },
+      children: [
+        /* @__PURE__ */ jsx23(
+          "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__ */ jsx23(
+          "span",
+          {
+            className: cx3(
+              "text-ilabel text-gray font-medium",
+              labelClassName
+            ),
+            children: label
+          }
+        ),
+        labelNode
+      ]
+    }
+  );
+};
+
+// src/common/ProgressBar.tsx
+import { useMemo as useMemo5 } from "react";
+import { jsx as jsx24, jsxs as jsxs21 } from "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 = useMemo5(() => {
+    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__ */ jsx24(
+            "div",
+            {
+              className: cx3(
+                `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__ */ jsx24(
+            "div",
+            {
+              className: `absolute h-4 bg-${color} top-0 left-[${pos}] w-[${width}]`
+            }
+          )
+        );
+        pos = parseFloat(stop) * 100;
+      }
+    }
+    return result;
+  }, [segments, gradient]);
+  const upperTicksElements = useMemo5(() => {
+    if (!upperTicks) return null;
+    return Object.entries(upperTicks).map(([p, label]) => {
+      const pos = parseFloat(p);
+      return /* @__PURE__ */ jsxs21(
+        "div",
+        {
+          className: "absolute top-0 border-l border-gray-500 text-xs text-gray-500 hover:z-[1]",
+          style: { left: `${pos * 100}%` },
+          children: [
+            /* @__PURE__ */ jsx24(
+              "div",
+              {
+                className: cx3(
+                  "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__ */ jsx24("div", { className: "absolute h-3 w-2 translate-y-1 border-l border-gray-400 border-opacity-50" })
+          ]
+        },
+        pos
+      );
+    });
+  }, [upperTicks]);
+  const lowerTicksElements = useMemo5(() => {
+    if (!lowerTicks) return null;
+    return Object.entries(lowerTicks).map(([p, label]) => {
+      const pos = parseFloat(p);
+      return /* @__PURE__ */ jsxs21(
+        "div",
+        {
+          className: "relative bottom-0 text-xs hover:z-[1]",
+          style: { left: `${pos * 100}%` },
+          children: [
+            /* @__PURE__ */ jsx24("div", { className: "absolute top-0 h-3 w-2 border-l border-gray-400 border-opacity-50" }),
+            /* @__PURE__ */ jsx24(
+              "div",
+              {
+                className: cx3(
+                  "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__ */ jsxs21("div", { className: "w-full", children: [
+    /* @__PURE__ */ jsx24("div", { className: "relative h-4 w-full", children: upperTicksElements }),
+    /* @__PURE__ */ jsxs21("div", { className: "relative h-4 w-full", children: [
+      elements,
+      /* @__PURE__ */ jsx24(
+        "div",
+        {
+          className: cx3(
+            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__ */ jsx24("div", { className: "relative h-4 w-full", children: lowerTicksElements })
+  ] });
+};
+
+// src/common/Descriptions.tsx
+import React6 from "react";
+import {
+  isObjectLike,
+  map,
+  isFunction as isFunction4,
+  isEmpty,
+  isString as isString3,
+  isNumber as isNumber2
+} from "lodash";
+import { jsx as jsx25, jsxs as jsxs22 } from "react/jsx-runtime";
+function safeToString(value) {
+  if (isString3(value) || isNumber2(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__ */ jsx25("table", { className: cx3("w-full border-collapse", className), children: /* @__PURE__ */ jsx25("tbody", { children: data.map((item, index) => {
+    return /* @__PURE__ */ jsxs22("tr", { className: trClassName, children: [
+      /* @__PURE__ */ jsx25(
+        "td",
+        {
+          className: cx3(
+            "text-gray text-ilabel font-ilabel w-px whitespace-nowrap pr-8 align-text-bottom",
+            labelClassName
+          ),
+          style: labelStyle,
+          children: isFunction4(renderLabel) ? renderLabel?.(item) : item.label
+        }
+      ),
+      colon,
+      /* @__PURE__ */ jsx25(
+        "td",
+        {
+          className: cx3(
+            "text-ilabel font-ilabel",
+            valueClassName
+          ),
+          style: valueStyle,
+          children: React6.isValidElement(item.value) ? item.value : isObjectLike(item.value) ? isEmpty(item.value) ? /* @__PURE__ */ jsx25("div", { className: "text-gray-400", children: "{ }" }) : /* @__PURE__ */ jsxs22("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx25("div", { className: "text-gray-400", children: "{" }),
+            /* @__PURE__ */ jsx25(
+              Descriptions,
+              {
+                ...props,
+                data: map(item.value, (value, label) => ({
+                  key: `${item.key}.${label}`,
+                  label,
+                  value
+                }))
+              }
+            ),
+            /* @__PURE__ */ jsx25("div", { className: "text-gray-400", children: "}" })
+          ] }) : isFunction4(renderValue) ? renderValue?.(item) : safeToString(item.value)
+        }
+      )
+    ] }, item.key ?? index);
+  }) }) });
+};
+
+// src/common/Notification.tsx
+import { Fragment as Fragment8 } from "react";
+import { Transition as Transition4 } from "@headlessui/react";
+import { XMarkIcon as XIcon2 } from "@heroicons/react/20/solid";
+import {
+  CheckCircleIcon,
+  ExclamationCircleIcon as ExclamationCircleIcon2,
+  InformationCircleIcon
+} from "@heroicons/react/24/outline";
+import { Fragment as Fragment9, jsx as jsx26, jsxs as jsxs23 } from "react/jsx-runtime";
+function Notification({
+  show,
+  setShow,
+  title,
+  message,
+  buttons,
+  type
+}) {
+  let icon;
+  switch (type) {
+    case "success":
+      icon = /* @__PURE__ */ jsx26(
+        CheckCircleIcon,
+        {
+          className: "h-6 w-6 text-green-400",
+          "aria-hidden": "true"
+        }
+      );
+      break;
+    case "error":
+      icon = /* @__PURE__ */ jsx26(
+        ExclamationCircleIcon2,
+        {
+          className: "h-6 w-6 text-red-400",
+          "aria-hidden": "true"
+        }
+      );
+      break;
+    case "warning":
+      icon = /* @__PURE__ */ jsx26(
+        ExclamationCircleIcon2,
+        {
+          className: "h-6 w-6 text-yellow-400",
+          "aria-hidden": "true"
+        }
+      );
+      break;
+    case "info":
+      icon = /* @__PURE__ */ jsx26(
+        InformationCircleIcon,
+        {
+          className: "h-6 w-6 text-blue-400",
+          "aria-hidden": "true"
+        }
+      );
+      break;
+  }
+  return /* @__PURE__ */ jsx26(Fragment9, { children: /* @__PURE__ */ jsx26(
+    "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__ */ jsx26("div", { className: "flex w-full flex-col items-center space-y-4 sm:items-end", children: /* @__PURE__ */ jsx26(
+        Transition4,
+        {
+          show,
+          as: Fragment8,
+          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__ */ jsx26("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__ */ jsx26("div", { className: "p-4", children: /* @__PURE__ */ jsxs23("div", { className: "flex items-start", children: [
+            /* @__PURE__ */ jsx26("div", { className: "flex-shrink-0", children: icon }),
+            /* @__PURE__ */ jsxs23("div", { className: "ml-3 w-0 flex-1", children: [
+              /* @__PURE__ */ jsx26("p", { className: "text-text-foreground text-sm font-medium", children: title }),
+              /* @__PURE__ */ jsx26("p", { className: "mt-1 text-sm text-gray-500", children: message }),
+              buttons && /* @__PURE__ */ jsx26("div", { className: "mt-4 flex", children: buttons() })
+            ] }),
+            /* @__PURE__ */ jsx26("div", { className: "ml-4 flex flex-shrink-0", children: /* @__PURE__ */ jsxs23(
+              "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__ */ jsx26("span", { className: "sr-only", children: "Close" }),
+                  /* @__PURE__ */ jsx26(XIcon2, { className: "h-5 w-5", "aria-hidden": "true" })
+                ]
+              }
+            ) })
+          ] }) }) })
+        }
+      ) })
+    }
+  ) });
+}
+
 // src/common/table/ResizeTable.tsx
 import {
-  forwardRef as forwardRef4,
+  forwardRef as forwardRef5,
   memo as memo5,
-  useCallback as useCallback7,
-  useEffect as useEffect8,
-  useMemo as useMemo6,
-  useRef as useRef6,
-  useState as useState11
+  useCallback as useCallback8,
+  useEffect as useEffect10,
+  useMemo as useMemo7,
+  useRef as useRef8,
+  useState as useState13
 } from "react";
 import {
   useReactTable,
@@ -2235,14 +3055,14 @@ import { debounce, isEqual as isEqual2 } from "lodash";
 
 // src/common/menu/PopupMenuButton.tsx
 import {
-  Fragment as Fragment5,
-  useState as useState10,
+  Fragment as Fragment10,
+  useState as useState12,
   useContext as useContext6,
-  useMemo as useMemo5,
-  useEffect as useEffect7,
-  useRef as useRef5
+  useMemo as useMemo6,
+  useEffect as useEffect9,
+  useRef as useRef7
 } from "react";
-import { Menu as Menu2, Transition as Transition2 } from "@headlessui/react";
+import { Menu as Menu2, Transition as Transition5 } from "@headlessui/react";
 import {
   FloatingPortal as FloatingPortal2,
   useFloating as useFloating3,
@@ -2253,7 +3073,7 @@ import {
 } from "@floating-ui/react";
 
 // src/common/menu/SubMenu.tsx
-import { useState as useState9, createContext as createContext4, useContext as useContext5 } from "react";
+import { useState as useState11, createContext as createContext4, useContext as useContext5 } from "react";
 import {
   useFloating as useFloating2,
   useHover as useHover2,
@@ -2266,7 +3086,7 @@ import {
 import { Menu } from "@headlessui/react";
 import { HiCheck } from "react-icons/hi";
 import { ChevronRightIcon } from "@heroicons/react/20/solid";
-import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs24 } from "react/jsx-runtime";
 var COLOR_MAP = {
   default: {
     active: "bg-gray-100 text-text-foreground dark:bg-primary-600 dark:text-white",
@@ -2282,9 +3102,9 @@ var COLOR_MAP = {
 var MenuContext = createContext4({});
 var MenuItem = ({ item, onSelect, labelClassName }) => {
   const { selectedKey } = useContext5(MenuContext);
-  return /* @__PURE__ */ jsx19(Menu.Item, { disabled: item.disabled, children: ({ active }) => {
+  return /* @__PURE__ */ jsx27(Menu.Item, { disabled: item.disabled, children: ({ active }) => {
     if (item.items) {
-      return /* @__PURE__ */ jsx19(
+      return /* @__PURE__ */ jsx27(
         SubMenuButton,
         {
           items: item.items,
@@ -2297,7 +3117,7 @@ var MenuItem = ({ item, onSelect, labelClassName }) => {
         item.key
       );
     }
-    const buttonNode = /* @__PURE__ */ jsxs16(
+    const buttonNode = /* @__PURE__ */ jsxs24(
       "button",
       {
         onClick: (e) => onSelect?.(item.key, e, item),
@@ -2308,7 +3128,7 @@ var MenuItem = ({ item, onSelect, labelClassName }) => {
         disabled: item.disabled,
         children: [
           item.icon,
-          /* @__PURE__ */ jsx19(
+          /* @__PURE__ */ jsx27(
             "span",
             {
               className: cx3(
@@ -2318,15 +3138,15 @@ var MenuItem = ({ item, onSelect, labelClassName }) => {
               children: item.label
             }
           ),
-          item.key === selectedKey ? /* @__PURE__ */ jsx19(HiCheck, { className: "icon-lg ml-2" }) : null
+          item.key === selectedKey ? /* @__PURE__ */ jsx27(HiCheck, { className: "icon-lg ml-2" }) : null
         ]
       }
     );
     if (item.disabled && item.disabledHint) {
-      return /* @__PURE__ */ jsx19(
+      return /* @__PURE__ */ jsx27(
         PopoverTooltip,
         {
-          text: /* @__PURE__ */ jsx19("span", { className: "text-icontent font-icontent text-gray cursor-auto", children: item.disabledHint }),
+          text: /* @__PURE__ */ jsx27("span", { className: "text-icontent font-icontent text-gray cursor-auto", children: item.disabledHint }),
           strategy: "fixed",
           children: buttonNode
         }
@@ -2346,7 +3166,7 @@ var SubMenuButton = (props) => {
     placement = "right-start",
     buttonClass: buttonClass3
   } = props;
-  const [open, setOpen] = useState9(false);
+  const [open, setOpen] = useState11(false);
   const { refs, floatingStyles, context } = useFloating2({
     open,
     onOpenChange: setOpen,
@@ -2359,7 +3179,7 @@ var SubMenuButton = (props) => {
       handleClose: safePolygon2()
     })
   ]);
-  return /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs24(
     Menu,
     {
       as: "div",
@@ -2369,7 +3189,7 @@ var SubMenuButton = (props) => {
         disabled ? "pointer-events-none cursor-not-allowed text-gray-400" : "cursor-pointer"
       ),
       children: [
-        /* @__PURE__ */ jsxs16(
+        /* @__PURE__ */ jsxs24(
           Menu.Button,
           {
             className: cx3(
@@ -2385,8 +3205,8 @@ var SubMenuButton = (props) => {
             ...getReferenceProps,
             children: [
               props.icon,
-              /* @__PURE__ */ jsx19("span", { className: "flex-shrink flex-grow text-left", children: label }),
-              /* @__PURE__ */ jsx19(
+              /* @__PURE__ */ jsx27("span", { className: "flex-shrink flex-grow text-left", children: label }),
+              /* @__PURE__ */ jsx27(
                 ChevronRightIcon,
                 {
                   className: cx3(
@@ -2400,7 +3220,7 @@ var SubMenuButton = (props) => {
             ]
           }
         ),
-        open && /* @__PURE__ */ jsx19(
+        open && /* @__PURE__ */ jsx27(
           Menu.Items,
           {
             static: true,
@@ -2409,12 +3229,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__ */ jsx19(
+              (items2, i) => items2 && items2.length > 0 ? /* @__PURE__ */ jsx27(
                 "div",
                 {
                   className: "overflow-auto py-1",
                   style: { maxHeight: "60vh" },
-                  children: items2.map((item) => /* @__PURE__ */ jsx19(MenuItem, { item, onSelect }, item.key))
+                  children: items2.map((item) => /* @__PURE__ */ jsx27(MenuItem, { item, onSelect }, item.key))
                 },
                 i
               ) : null
@@ -2438,7 +3258,7 @@ var NavSizeContext = createContext5({
 });
 
 // src/common/menu/PopupMenuButton.tsx
-import { Fragment as Fragment6, jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx28, jsxs as jsxs25 } from "react/jsx-runtime";
 function PopupMenuButton({
   buttonIcon,
   items,
@@ -2458,7 +3278,7 @@ function PopupMenuButton({
   selectedKey,
   onOpenCallback
 }) {
-  const [menuOpen, setMenuOpen] = useState10(false);
+  const [menuOpen, setMenuOpen] = useState12(false);
   const { small } = useContext6(NavSizeContext);
   const { refs, floatingStyles, context } = useFloating3({
     open: menuOpen,
@@ -2467,64 +3287,72 @@ function PopupMenuButton({
     placement,
     whileElementsMounted: autoUpdate3
   });
-  const itemStyle = useMemo5(() => {
+  const itemStyle = useMemo6(() => {
     return {
       width
     };
   }, [width]);
-  const onOpenCallbackRef = useRef5(onOpenCallback);
+  const onOpenCallbackRef = useRef7(onOpenCallback);
   onOpenCallbackRef.current = onOpenCallback;
-  useEffect7(() => {
+  useEffect9(() => {
     if (menuOpen) {
       onOpenCallbackRef.current?.();
     }
   }, [menuOpen]);
   let menuItems = null;
   if (menuOpen && items.length > 0) {
-    menuItems = /* @__PURE__ */ jsx20(MenuContext.Provider, { value: { selectedKey }, children: /* @__PURE__ */ jsx20("div", { ref: refs.setFloating, style: floatingStyles, className: small ? "z-10" : "z-[100]", children: /* @__PURE__ */ jsx20(
-      Transition2,
+    menuItems = /* @__PURE__ */ jsx28(MenuContext.Provider, { value: { selectedKey }, children: /* @__PURE__ */ jsx28(
+      "div",
       {
-        as: Fragment5,
-        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__ */ jsxs17(
-          Menu2.Items,
+        ref: refs.setFloating,
+        style: floatingStyles,
+        className: small ? "z-10" : "z-[100]",
+        children: /* @__PURE__ */ jsx28(
+          Transition5,
           {
-            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__ */ jsx20("div", { className: `${itemsClassName} divide-y`, children: items.map((items2, i) => /* @__PURE__ */ jsxs17("div", { className: "py-1", children: [
-                groupLabels?.[i] ? /* @__PURE__ */ jsx20("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__ */ jsx20(
-                    MenuItem,
-                    {
-                      item,
-                      onSelect,
-                      labelClassName: itemLabelClassName
-                    },
-                    item.key
-                  )
-                )
-              ] }, i)) }),
-              footer
-            ]
+            as: Fragment10,
+            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__ */ jsxs25(
+              Menu2.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__ */ jsx28("div", { className: `${itemsClassName} divide-y`, children: items.map((items2, i) => /* @__PURE__ */ jsxs25("div", { className: "py-1", children: [
+                    groupLabels?.[i] ? /* @__PURE__ */ jsx28("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__ */ jsx28(
+                        MenuItem,
+                        {
+                          item,
+                          onSelect,
+                          labelClassName: itemLabelClassName
+                        },
+                        item.key
+                      )
+                    )
+                  ] }, i)) }),
+                  footer
+                ]
+              }
+            )
           }
         )
       }
-    ) }) });
+    ) });
   }
-  return /* @__PURE__ */ jsx20(Menu2, { children: ({ open }) => {
+  return /* @__PURE__ */ jsx28(Menu2, { children: ({ open }) => {
     setTimeout(() => {
       setMenuOpen(open);
     }, 0);
-    return /* @__PURE__ */ jsxs17(Fragment6, { children: [
-      /* @__PURE__ */ jsx20(
+    return /* @__PURE__ */ jsxs25(Fragment11, { children: [
+      /* @__PURE__ */ jsx28(
         Menu2.Button,
         {
           className: cx3(
@@ -2537,14 +3365,14 @@ function PopupMenuButton({
           children: typeof buttonIcon === "function" ? buttonIcon(menuOpen) : buttonIcon
         }
       ),
-      portal ? /* @__PURE__ */ jsx20(FloatingPortal2, { children: menuItems }) : menuItems
+      portal ? /* @__PURE__ */ jsx28(FloatingPortal2, { children: menuItems }) : menuItems
     ] });
   } });
 }
 
 // src/common/table/Icons.tsx
-import { jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
-var MoveLeftIcon = (props) => /* @__PURE__ */ jsxs18(
+import { jsx as jsx29, jsxs as jsxs26 } from "react/jsx-runtime";
+var MoveLeftIcon = (props) => /* @__PURE__ */ jsxs26(
   "svg",
   {
     width: "16",
@@ -2554,8 +3382,8 @@ var MoveLeftIcon = (props) => /* @__PURE__ */ jsxs18(
     xmlns: "http://www.w3.org/2000/svg",
     ...props,
     children: [
-      /* @__PURE__ */ jsxs18("g", { clipPath: "url(#clip0_6869_7300)", children: [
-        /* @__PURE__ */ jsx21(
+      /* @__PURE__ */ jsxs26("g", { clipPath: "url(#clip0_6869_7300)", children: [
+        /* @__PURE__ */ jsx29(
           "path",
           {
             d: "M2.66666 8H9.33332",
@@ -2565,7 +3393,7 @@ var MoveLeftIcon = (props) => /* @__PURE__ */ jsxs18(
             strokeLinejoin: "round"
           }
         ),
-        /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsx29(
           "path",
           {
             d: "M2.66666 8L5.33332 10.6667",
@@ -2575,7 +3403,7 @@ var MoveLeftIcon = (props) => /* @__PURE__ */ jsxs18(
             strokeLinejoin: "round"
           }
         ),
-        /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsx29(
           "path",
           {
             d: "M2.66669 7.9987L5.33335 5.33203",
@@ -2585,7 +3413,7 @@ var MoveLeftIcon = (props) => /* @__PURE__ */ jsxs18(
             strokeLinejoin: "round"
           }
         ),
-        /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsx29(
           "path",
           {
             d: "M13.3333 2.66797V13.3346",
@@ -2596,11 +3424,11 @@ var MoveLeftIcon = (props) => /* @__PURE__ */ jsxs18(
           }
         )
       ] }),
-      /* @__PURE__ */ jsx21("defs", { children: /* @__PURE__ */ jsx21("clipPath", { id: "clip0_6869_7300", children: /* @__PURE__ */ jsx21("rect", { width: "16", height: "16", fill: "white" }) }) })
+      /* @__PURE__ */ jsx29("defs", { children: /* @__PURE__ */ jsx29("clipPath", { id: "clip0_6869_7300", children: /* @__PURE__ */ jsx29("rect", { width: "16", height: "16", fill: "white" }) }) })
     ]
   }
 );
-var MoveRightIcon = (props) => /* @__PURE__ */ jsxs18(
+var MoveRightIcon = (props) => /* @__PURE__ */ jsxs26(
   "svg",
   {
     width: "16",
@@ -2610,8 +3438,8 @@ var MoveRightIcon = (props) => /* @__PURE__ */ jsxs18(
     xmlns: "http://www.w3.org/2000/svg",
     ...props,
     children: [
-      /* @__PURE__ */ jsxs18("g", { clipPath: "url(#clip0_6869_7309)", children: [
-        /* @__PURE__ */ jsx21(
+      /* @__PURE__ */ jsxs26("g", { clipPath: "url(#clip0_6869_7309)", children: [
+        /* @__PURE__ */ jsx29(
           "path",
           {
             d: "M13.3333 8H6.66666",
@@ -2621,7 +3449,7 @@ var MoveRightIcon = (props) => /* @__PURE__ */ jsxs18(
             strokeLinejoin: "round"
           }
         ),
-        /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsx29(
           "path",
           {
             d: "M13.3333 8L10.6667 10.6667",
@@ -2631,7 +3459,7 @@ var MoveRightIcon = (props) => /* @__PURE__ */ jsxs18(
             strokeLinejoin: "round"
           }
         ),
-        /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsx29(
           "path",
           {
             d: "M13.3334 7.9987L10.6667 5.33203",
@@ -2641,7 +3469,7 @@ var MoveRightIcon = (props) => /* @__PURE__ */ jsxs18(
             strokeLinejoin: "round"
           }
         ),
-        /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsx29(
           "path",
           {
             d: "M2.66669 2.66797V13.3346",
@@ -2652,11 +3480,11 @@ var MoveRightIcon = (props) => /* @__PURE__ */ jsxs18(
           }
         )
       ] }),
-      /* @__PURE__ */ jsx21("defs", { children: /* @__PURE__ */ jsx21("clipPath", { id: "clip0_6869_7309", children: /* @__PURE__ */ jsx21("rect", { width: "16", height: "16", fill: "white" }) }) })
+      /* @__PURE__ */ jsx29("defs", { children: /* @__PURE__ */ jsx29("clipPath", { id: "clip0_6869_7309", children: /* @__PURE__ */ jsx29("rect", { width: "16", height: "16", fill: "white" }) }) })
     ]
   }
 );
-var RenameIcon = (props) => /* @__PURE__ */ jsxs18(
+var RenameIcon = (props) => /* @__PURE__ */ jsxs26(
   "svg",
   {
     width: "16",
@@ -2666,7 +3494,7 @@ var RenameIcon = (props) => /* @__PURE__ */ jsxs18(
     xmlns: "http://www.w3.org/2000/svg",
     ...props,
     children: [
-      /* @__PURE__ */ jsx21(
+      /* @__PURE__ */ jsx29(
         "path",
         {
           d: "M8 13.3281H14",
@@ -2676,7 +3504,7 @@ var RenameIcon = (props) => /* @__PURE__ */ jsxs18(
           strokeLinejoin: "round"
         }
       ),
-      /* @__PURE__ */ jsx21(
+      /* @__PURE__ */ jsx29(
         "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",
@@ -2689,7 +3517,7 @@ var RenameIcon = (props) => /* @__PURE__ */ jsxs18(
     ]
   }
 );
-var DeleteIcon = (props) => /* @__PURE__ */ jsxs18(
+var DeleteIcon = (props) => /* @__PURE__ */ jsxs26(
   "svg",
   {
     width: "16",
@@ -2699,8 +3527,8 @@ var DeleteIcon = (props) => /* @__PURE__ */ jsxs18(
     xmlns: "http://www.w3.org/2000/svg",
     ...props,
     children: [
-      /* @__PURE__ */ jsxs18("g", { clipPath: "url(#clip0_6869_7344)", children: [
-        /* @__PURE__ */ jsx21(
+      /* @__PURE__ */ jsxs26("g", { clipPath: "url(#clip0_6869_7344)", children: [
+        /* @__PURE__ */ jsx29(
           "path",
           {
             d: "M2.66669 4.66797H13.3334",
@@ -2710,7 +3538,7 @@ var DeleteIcon = (props) => /* @__PURE__ */ jsxs18(
             strokeLinejoin: "round"
           }
         ),
-        /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsx29(
           "path",
           {
             d: "M6.66669 7.33203V11.332",
@@ -2720,7 +3548,7 @@ var DeleteIcon = (props) => /* @__PURE__ */ jsxs18(
             strokeLinejoin: "round"
           }
         ),
-        /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsx29(
           "path",
           {
             d: "M9.33331 7.33203V11.332",
@@ -2730,7 +3558,7 @@ var DeleteIcon = (props) => /* @__PURE__ */ jsxs18(
             strokeLinejoin: "round"
           }
         ),
-        /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsx29(
           "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",
@@ -2740,7 +3568,7 @@ var DeleteIcon = (props) => /* @__PURE__ */ jsxs18(
             strokeLinejoin: "round"
           }
         ),
-        /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsx29(
           "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",
@@ -2751,14 +3579,14 @@ var DeleteIcon = (props) => /* @__PURE__ */ jsxs18(
           }
         )
       ] }),
-      /* @__PURE__ */ jsx21("defs", { children: /* @__PURE__ */ jsx21("clipPath", { id: "clip0_6869_7344", children: /* @__PURE__ */ jsx21("rect", { width: "16", height: "16", fill: "white" }) }) })
+      /* @__PURE__ */ jsx29("defs", { children: /* @__PURE__ */ jsx29("clipPath", { id: "clip0_6869_7344", children: /* @__PURE__ */ jsx29("rect", { width: "16", height: "16", fill: "white" }) }) })
     ]
   }
 );
 
 // src/common/table/ResizeTable.tsx
 import { IoReload } from "react-icons/io5";
-import { jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs27 } from "react/jsx-runtime";
 var reorder = (list, startIndex, endIndex) => {
   const result = Array.from(list);
   const [removed] = result.splice(startIndex, 1);
@@ -2768,7 +3596,7 @@ var reorder = (list, startIndex, endIndex) => {
 function onPreventClick(e) {
   e.stopPropagation();
 }
-var _ResizeTable = forwardRef4(function _ResizeTable2({
+var _ResizeTable = forwardRef5(function _ResizeTable2({
   data,
   columns,
   columnResizeMode,
@@ -2792,7 +3620,7 @@ var _ResizeTable = forwardRef4(function _ResizeTable2({
   estimatedRowHeight = 35,
   overscan = 5
 }, tableContainerRef) {
-  const adjustedColumns = useMemo6(() => {
+  const adjustedColumns = useMemo7(() => {
     let totalWidth = 0;
     const newColumns = columns.map((c) => {
       const item = Object.assign({ minSize }, c);
@@ -2811,7 +3639,7 @@ var _ResizeTable = forwardRef4(function _ResizeTable2({
     }
     return newColumns;
   }, [columns, minSize, minWidth]);
-  const [tableState, setTableState] = useState11(() => {
+  const [tableState, setTableState] = useState13(() => {
     const initialState = {
       pagination: {
         pageIndex: 0,
@@ -2831,7 +3659,7 @@ var _ResizeTable = forwardRef4(function _ResizeTable2({
     onStateChange: setTableState,
     manualSorting
   });
-  useEffect8(() => {
+  useEffect10(() => {
     if (state && Object.keys(state).length > 0) {
       setTableState((prev) => {
         const newState = {
@@ -2843,14 +3671,14 @@ var _ResizeTable = forwardRef4(function _ResizeTable2({
       });
     }
   }, [state]);
-  const debounceStateChange = useMemo6(() => {
+  const debounceStateChange = useMemo7(() => {
     if (!onStateChange) return void 0;
     return debounce(onStateChange, 500, {});
   }, [onStateChange]);
-  useEffect8(() => {
+  useEffect10(() => {
     debounceStateChange?.(tableState);
   }, [debounceStateChange, tableState]);
-  const fetchMoreOnBottomReached = useMemo6(() => {
+  const fetchMoreOnBottomReached = useMemo7(() => {
     return debounce((containerRefElement) => {
       if (containerRefElement) {
         const { scrollHeight, scrollTop, clientHeight } = containerRefElement;
@@ -2860,8 +3688,8 @@ var _ResizeTable = forwardRef4(function _ResizeTable2({
       }
     }, 500);
   }, [onFetchMore, isFetching, hasMore]);
-  const tableContainerElementRef = useRef6(null);
-  useEffect8(() => {
+  const tableContainerElementRef = useRef8(null);
+  useEffect10(() => {
     if (tableContainerRef) {
       if (typeof tableContainerRef === "function") {
         tableContainerRef(tableContainerElementRef.current);
@@ -2873,21 +3701,21 @@ var _ResizeTable = forwardRef4(function _ResizeTable2({
   const rowVirtualizer = useVirtualizer2({
     count: enableVirtualization ? table.getRowModel().rows.length : 0,
     getScrollElement: () => tableContainerElementRef.current,
-    estimateSize: useCallback7(() => estimatedRowHeight, [estimatedRowHeight]),
+    estimateSize: useCallback8(() => 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__ */ jsx22(
+  return /* @__PURE__ */ jsx30(
     "div",
     {
       className: "overflow-auto",
       style: height ? { height } : void 0,
       ref: tableContainerElementRef,
       onScroll: (e) => fetchMoreOnBottomReached(e.target),
-      children: /* @__PURE__ */ jsxs19(
+      children: /* @__PURE__ */ jsxs27(
         "table",
         {
           className: "w-fit",
@@ -2897,11 +3725,11 @@ var _ResizeTable = forwardRef4(function _ResizeTable2({
             }
           },
           children: [
-            /* @__PURE__ */ jsx22("thead", { className: "dark:bg-sentio-gray-100 sticky top-0 z-[1] bg-white", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx22(
+            /* @__PURE__ */ jsx30("thead", { className: "dark:bg-sentio-gray-100 sticky top-0 z-[1] bg-white", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx30(
               "tr",
               {
                 className: "relative flex w-fit cursor-pointer items-center border-b",
-                children: headerGroup.headers.map((header, i) => /* @__PURE__ */ jsxs19(
+                children: headerGroup.headers.map((header, i) => /* @__PURE__ */ jsxs27(
                   "th",
                   {
                     colSpan: header.colSpan,
@@ -2911,12 +3739,12 @@ var _ResizeTable = forwardRef4(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__ */ jsxs19("span", { className: "flex w-full flex-1 overflow-hidden", children: [
-                        /* @__PURE__ */ jsx22("span", { className: "flex-1 truncate", children: header.isPlaceholder ? null : flexRender(
+                      /* @__PURE__ */ jsxs27("span", { className: "flex w-full flex-1 overflow-hidden", children: [
+                        /* @__PURE__ */ jsx30("span", { className: "flex-1 truncate", children: header.isPlaceholder ? null : flexRender(
                           header.column.columnDef.header,
                           header.getContext()
                         ) }),
-                        header.column.getCanSort() && allowSort ? /* @__PURE__ */ jsx22(
+                        header.column.getCanSort() && allowSort ? /* @__PURE__ */ jsx30(
                           "span",
                           {
                             className: cx3(
@@ -2925,16 +3753,16 @@ var _ResizeTable = forwardRef4(function _ResizeTable2({
                               "inline-block cursor-pointer",
                               "shrink-0"
                             ),
-                            children: header.column.getIsSorted() ? header.column.getIsSorted() == "desc" ? /* @__PURE__ */ jsx22(HiOutlineSortDescending, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx22(HiOutlineSortAscending, { className: "h-4 w-4" }) : ""
+                            children: header.column.getIsSorted() ? header.column.getIsSorted() == "desc" ? /* @__PURE__ */ jsx30(HiOutlineSortDescending, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx30(HiOutlineSortAscending, { className: "h-4 w-4" }) : ""
                           }
                         ) : null
                       ] }),
-                      allowEditColumn !== false && /* @__PURE__ */ jsx22(
+                      allowEditColumn !== false && /* @__PURE__ */ jsx30(
                         "span",
                         {
                           className: "invisible inline-block group-hover/th:visible",
                           onClick: onPreventClick,
-                          children: /* @__PURE__ */ jsx22(
+                          children: /* @__PURE__ */ jsx30(
                             PopupMenuButton,
                             {
                               buttonClassName: "align-text-bottom",
@@ -2960,19 +3788,19 @@ var _ResizeTable = forwardRef4(function _ResizeTable2({
                                     console.log(commandKey, "is not applied");
                                 }
                               },
-                              buttonIcon: /* @__PURE__ */ jsx22(HiChevronDown, { className: "icon mr-2" }),
+                              buttonIcon: /* @__PURE__ */ jsx30(HiChevronDown, { className: "icon mr-2" }),
                               items: [
                                 [
                                   {
                                     key: "reorder.left",
                                     label: "Move column left",
-                                    icon: /* @__PURE__ */ jsx22(MoveLeftIcon, { className: "mr-2" }),
+                                    icon: /* @__PURE__ */ jsx30(MoveLeftIcon, { className: "mr-2" }),
                                     disabled: i === 0
                                   },
                                   {
                                     key: "reorder.right",
                                     label: "Move column right",
-                                    icon: /* @__PURE__ */ jsx22(MoveRightIcon, { className: "mr-2" }),
+                                    icon: /* @__PURE__ */ jsx30(MoveRightIcon, { className: "mr-2" }),
                                     disabled: i === headerGroup.headers.length - 1
                                   }
                                 ],
@@ -2981,7 +3809,7 @@ var _ResizeTable = forwardRef4(function _ResizeTable2({
                                     {
                                       key: "rename",
                                       label: "Rename column",
-                                      icon: /* @__PURE__ */ jsx22(RenameIcon, { className: "mr-2" })
+                                      icon: /* @__PURE__ */ jsx30(RenameIcon, { className: "mr-2" })
                                     }
                                   ]
                                 ] : [],
@@ -2990,7 +3818,7 @@ var _ResizeTable = forwardRef4(function _ResizeTable2({
                                     {
                                       key: "delete",
                                       label: "Remove column",
-                                      icon: /* @__PURE__ */ jsx22(DeleteIcon, { className: "mr-2" }),
+                                      icon: /* @__PURE__ */ jsx30(DeleteIcon, { className: "mr-2" }),
                                       status: "danger"
                                     }
                                   ]
@@ -3000,7 +3828,7 @@ var _ResizeTable = forwardRef4(function _ResizeTable2({
                           )
                         }
                       ),
-                      header.column.getCanResize() ? /* @__PURE__ */ jsx22(
+                      header.column.getCanResize() ? /* @__PURE__ */ jsx30(
                         "div",
                         {
                           onMouseDown: header.getResizeHandler(),
@@ -3023,11 +3851,11 @@ var _ResizeTable = forwardRef4(function _ResizeTable2({
               },
               headerGroup.id
             )) }),
-            /* @__PURE__ */ jsxs19("tbody", { children: [
-              enableVirtualization && paddingTop > 0 && /* @__PURE__ */ jsx22("tr", { children: /* @__PURE__ */ jsx22("td", { style: { height: `${paddingTop}px` } }) }),
+            /* @__PURE__ */ jsxs27("tbody", { children: [
+              enableVirtualization && paddingTop > 0 && /* @__PURE__ */ jsx30("tr", { children: /* @__PURE__ */ jsx30("td", { style: { height: `${paddingTop}px` } }) }),
               enableVirtualization ? virtualRows.map((virtualRow) => {
                 const row = table.getRowModel().rows[virtualRow.index];
-                return /* @__PURE__ */ jsx22(
+                return /* @__PURE__ */ jsx30(
                   "tr",
                   {
                     "data-index": virtualRow.index,
@@ -3036,7 +3864,7 @@ var _ResizeTable = forwardRef4(function _ResizeTable2({
                       onClick ? "cursor-pointer" : "",
                       rowClassNameFn ? rowClassNameFn(row) : ""
                     ),
-                    children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx22(
+                    children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx30(
                       "td",
                       {
                         ...{
@@ -3056,7 +3884,7 @@ var _ResizeTable = forwardRef4(function _ResizeTable2({
                   },
                   row.id
                 );
-              }) : table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx22(
+              }) : table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx30(
                 "tr",
                 {
                   className: cx3(
@@ -3064,7 +3892,7 @@ var _ResizeTable = forwardRef4(function _ResizeTable2({
                     onClick ? "cursor-pointer" : "",
                     rowClassNameFn ? rowClassNameFn(row) : ""
                   ),
-                  children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx22(
+                  children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx30(
                     "td",
                     {
                       ...{
@@ -3084,8 +3912,8 @@ var _ResizeTable = forwardRef4(function _ResizeTable2({
                 },
                 row.id
               )),
-              enableVirtualization && paddingBottom > 0 && /* @__PURE__ */ jsx22("tr", { children: /* @__PURE__ */ jsx22("td", { style: { height: `${paddingBottom}px` } }) }),
-              onFetchMore && /* @__PURE__ */ jsx22("tr", { children: /* @__PURE__ */ jsx22(
+              enableVirtualization && paddingBottom > 0 && /* @__PURE__ */ jsx30("tr", { children: /* @__PURE__ */ jsx30("td", { style: { height: `${paddingBottom}px` } }) }),
+              onFetchMore && /* @__PURE__ */ jsx30("tr", { children: /* @__PURE__ */ jsx30(
                 "td",
                 {
                   colSpan: table.getHeaderGroups()[0].headers.length,
@@ -3094,8 +3922,8 @@ var _ResizeTable = forwardRef4(function _ResizeTable2({
                     if (isFetching) return;
                     onFetchMore?.();
                   },
-                  children: isFetching || hasMore ? /* @__PURE__ */ jsxs19("span", { className: "inline-flex items-center gap-2", children: [
-                    /* @__PURE__ */ jsx22(
+                  children: isFetching || hasMore ? /* @__PURE__ */ jsxs27("span", { className: "inline-flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsx30(
                       IoReload,
                       {
                         className: cx3(
@@ -3104,7 +3932,7 @@ var _ResizeTable = forwardRef4(function _ResizeTable2({
                         )
                       }
                     ),
-                    /* @__PURE__ */ jsx22("span", { children: "Loading..." })
+                    /* @__PURE__ */ jsx30("span", { children: "Loading..." })
                   ] }) : "No more data"
                 }
               ) })
@@ -3142,10 +3970,10 @@ function getNumberWithDecimal(hex, decimal, asNumber) {
 }
 
 // src/utils/use-mobile.ts
-import { useState as useState12, useEffect as useEffect9 } from "react";
+import { useState as useState14, useEffect as useEffect11 } from "react";
 function useMobile(breakpoint = 768, defaultValue = false) {
-  const [isMobile, setIsMobile] = useState12(defaultValue);
-  useEffect9(() => {
+  const [isMobile, setIsMobile] = useState14(defaultValue);
+  useEffect11(() => {
     const checkUserAgent = () => {
       if (typeof window === "undefined") return false;
       const userAgent = window.navigator.userAgent.toLowerCase();
@@ -3196,13 +4024,15 @@ export {
   BaseZIndexContext,
   NewButton as Button,
   COLOR_MAP,
+  Checkbox,
   LuSquareX as CloseSquareO,
   Collapse,
+  ConfirmDialog,
   CopyButton,
   CopyIcon,
   CopySuccessIcon,
-  DarkModeContext,
   DeleteIcon,
+  Descriptions,
   DisclosurePanel,
   Empty,
   LuEye as EyeO,
@@ -3217,25 +4047,34 @@ export {
   MoveLeftIcon,
   MoveRightIcon,
   NavSizeContext,
+  Notification,
   LuSquarePlus as PlusSquareO,
   PopoverTooltip,
   PopupMenuButton,
   Proccessing,
+  ProgressBar,
   ROOT_KEY,
   RadioSelect,
   RenameIcon,
   ResizeTable,
   SUFFIX_NODE_KEY,
+  SearchInput,
   Select,
+  SlideOver,
   SpinLoading,
   StatusBadge,
   StatusRole,
   SubMenuButton,
   SvgFolderContext,
   Switch,
+  Group as TabGroup,
+  List as TabList,
+  Panel as TabPanel,
+  Panels as TabPanels,
   buttonClass,
   cx3 as classNames,
   getNumberWithDecimal,
+  getTabClassName,
   parseHex,
   useBoolean,
   useDarkMode,