@sentio/ui-core 0.1.0

package/dist/index.mjs

@@ -0,0 +1,3236 @@
+// src/common/BarLoading.tsx
+import { BarLoader } from "react-spinners";
+import { memo } from "react";
+import { cx as classNames } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+function _BarLoading({
+  hint = "Loading Sentio",
+  loading = true,
+  className,
+  iconClassName,
+  width = 150,
+  gray
+}) {
+  if (loading) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: classNames(
+          "loading-container flex h-full flex-col justify-center overflow-hidden",
+          className
+        ),
+        children: [
+          hint && /* @__PURE__ */ jsx("div", { className: "loading-text text-icontent text-gray my-2 text-center font-medium", children: hint }),
+          /* @__PURE__ */ jsx("div", { className: "flex justify-center pt-1", children: /* @__PURE__ */ jsx(
+            BarLoader,
+            {
+              color: "#0756D5",
+              loading: true,
+              height: 5,
+              width,
+              cssOverride: {
+                borderRadius: "4px"
+              }
+            }
+          ) })
+        ]
+      }
+    );
+  }
+  return null;
+}
+var BarLoading = memo(_BarLoading);
+
+// src/common/SpinLoading.tsx
+import { ClipLoader } from "react-spinners";
+import { cx as classNames2 } from "class-variance-authority";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var SpinLoading = function Spinner(args) {
+  const {
+    loading = false,
+    children,
+    className,
+    size = 48,
+    showMask,
+    maskOpacity = 80
+  } = args;
+  return /* @__PURE__ */ jsxs2("div", { className: classNames2("relative", className), children: [
+    showMask && loading && /* @__PURE__ */ jsx2(
+      "div",
+      {
+        className: classNames2(
+          "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__ */ jsx2("div", { className: "absolute left-[50%] top-[50%] z-[1] -translate-y-6", children: /* @__PURE__ */ jsx2(
+      ClipLoader,
+      {
+        loading,
+        color: "#3B82F6",
+        size,
+        cssOverride: {
+          borderWidth: 3
+        }
+      }
+    ) }),
+    children
+  ] });
+};
+
+// src/common/CopyButton.tsx
+import {
+  useState,
+  useCallback,
+  useRef,
+  useEffect
+} from "react";
+import copy from "copy-to-clipboard";
+import { cx as classNames3 } from "class-variance-authority";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var CopyIcon = (props) => /* @__PURE__ */ jsx3(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    strokeWidth: "2",
+    stroke: "currentColor",
+    ...props,
+    children: /* @__PURE__ */ jsx3(
+      "path",
+      {
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        d: "M16.5 8.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v8.25A2.25 2.25 0 0 0 6 16.5h2.25m8.25-8.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-7.5A2.25 2.25 0 0 1 8.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 0 0-2.25 2.25v6"
+      }
+    )
+  }
+);
+var CopySuccessIcon = (props) => /* @__PURE__ */ jsx3(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "rgb(var(--cyan-600))",
+    ...props,
+    children: /* @__PURE__ */ jsx3(
+      "path",
+      {
+        fillRule: "evenodd",
+        d: "M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z",
+        clipRule: "evenodd"
+      }
+    )
+  }
+);
+var CopyButton = ({
+  text = "",
+  size = 16,
+  ml,
+  mr,
+  placement = "right",
+  hover,
+  children,
+  className
+}) => {
+  const [copied, setCopied] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+  const [isMobile, setIsMobile] = useState(false);
+  const timeoutRef = useRef(null);
+  const iconContainerRef = useRef(null);
+  useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth < 640);
+    };
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+    return () => window.removeEventListener("resize", checkMobile);
+  }, []);
+  const copyToClipboard = useCallback((val) => {
+    copy(val);
+    setCopied(true);
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    timeoutRef.current = setTimeout(() => {
+      setCopied(false);
+      timeoutRef.current = null;
+    }, 2e3);
+  }, []);
+  const onCopy = useCallback(
+    (e) => {
+      const target = e.target;
+      if (target.nodeName.toLowerCase() === "a" && target.getAttribute("href")) {
+        return;
+      }
+      e.stopPropagation();
+      e.preventDefault();
+      if (copied) return;
+      if (typeof text === "function") {
+        const val = text();
+        if (val instanceof Promise) {
+          val.then((res) => {
+            copyToClipboard(res);
+          }).catch((error) => {
+            console.error(error);
+          });
+        } else {
+          copyToClipboard(val);
+        }
+      } else {
+        copyToClipboard(text);
+      }
+    },
+    [copied, text, copyToClipboard]
+  );
+  const handleEventProxy = useCallback(
+    (e) => {
+      if (children) {
+        onCopy(e);
+      }
+    },
+    [children, onCopy]
+  );
+  const isPureComponent = !children;
+  const iconContainerStyle = {
+    minWidth: `${size}px`,
+    maxWidth: `${size}px`,
+    minHeight: `${size}px`,
+    maxHeight: `${size}px`,
+    marginLeft: ml !== void 0 ? `${ml}px` : void 0,
+    marginRight: mr !== void 0 ? `${mr}px` : void 0,
+    visibility: !isPureComponent && hover ? isMobile ? "visible" : isHovered ? "visible" : "hidden" : "visible"
+  };
+  const containerStyle = {
+    display: !isPureComponent ? "inline-block" : "contents"
+  };
+  const svgStyle = {
+    margin: 0
+  };
+  const iconCopyStyle = {
+    transform: copied ? "translateY(-100%)" : "translateY(0)"
+  };
+  const iconSuccessStyle = {
+    transform: copied ? "translateY(-100%)" : "translateY(100%)"
+  };
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: classNames3(
+        "inline-block min-w-fit overflow-hidden whitespace-nowrap",
+        "space-x-1",
+        className
+      ),
+      style: containerStyle,
+      onClick: handleEventProxy,
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      children: [
+        placement === "right" && children,
+        /* @__PURE__ */ jsxs3(
+          "div",
+          {
+            ref: iconContainerRef,
+            className: classNames3(
+              "icon-container inline-block overflow-hidden align-sub",
+              isPureComponent ? className : "",
+              copied ? "copied" : ""
+            ),
+            style: iconContainerStyle,
+            children: [
+              /* @__PURE__ */ jsx3(
+                CopyIcon,
+                {
+                  className: "icon-copy block cursor-pointer transition-all",
+                  width: size,
+                  height: size,
+                  style: { ...svgStyle, ...iconCopyStyle },
+                  onClick: onCopy
+                }
+              ),
+              /* @__PURE__ */ jsx3(
+                CopySuccessIcon,
+                {
+                  className: "icon-success block transition-all",
+                  width: size,
+                  height: size,
+                  style: { ...svgStyle, ...iconSuccessStyle }
+                }
+              )
+            ]
+          }
+        ),
+        placement === "left" && children
+      ]
+    }
+  );
+};
+
+// src/common/NewButton.tsx
+import { cloneElement, forwardRef, useMemo } from "react";
+
+// src/common/DivTooltip.tsx
+import React, { useRef as useRef2, useState as useState2, useEffect as useEffect2 } from "react";
+import {
+  useFloating,
+  useHover,
+  useInteractions,
+  safePolygon,
+  arrow,
+  offset,
+  shift,
+  flip,
+  autoUpdate,
+  FloatingPortal,
+  useDelayGroup
+} from "@floating-ui/react";
+import { cx as classNames4 } from "class-variance-authority";
+import { isString } from "lodash";
+import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var PopoverTooltip = ({
+  icon,
+  text,
+  className,
+  buttonClassName,
+  activeButtonClassName,
+  children,
+  strategy: propStrategy,
+  hideArrow,
+  offsetOptions = 8,
+  placementOption = "bottom",
+  maxWidth = "max-w-[300px]",
+  usePortal = false,
+  enableFadeAnimation = false,
+  animationDuration = 150
+}) => {
+  const arrowRef = useRef2(null);
+  const [open, setOpen] = useState2(false);
+  const [isVisible, setIsVisible] = useState2(false);
+  const timeoutRef = useRef2();
+  const {
+    x,
+    y,
+    refs,
+    strategy,
+    middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },
+    context,
+    placement
+  } = useFloating({
+    open,
+    onOpenChange: (newOpen) => {
+      setOpen(newOpen);
+      if (enableFadeAnimation) {
+        if (newOpen) {
+          setIsVisible(true);
+        } else {
+          if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+          }
+          timeoutRef.current = setTimeout(() => {
+            setIsVisible(false);
+          }, animationDuration);
+        }
+      } else {
+        setIsVisible(newOpen);
+      }
+    },
+    middleware: [
+      offset(offsetOptions),
+      flip(),
+      shift(),
+      arrow({ element: arrowRef, padding: 8 })
+    ],
+    strategy: propStrategy,
+    placement: placementOption,
+    whileElementsMounted: autoUpdate
+  });
+  const {
+    delay = {
+      open: 500,
+      close: 0
+    }
+  } = useDelayGroup(context);
+  const { getReferenceProps, getFloatingProps } = useInteractions([
+    useHover(context, {
+      handleClose: safePolygon({
+        buffer: -Infinity
+      }),
+      delay
+    })
+  ]);
+  useEffect2(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+  if (!text)
+    return /* @__PURE__ */ jsxs4(Fragment, { children: [
+      icon,
+      children
+    ] });
+  const Portal = usePortal ? FloatingPortal : React.Fragment;
+  return /* @__PURE__ */ jsxs4("div", { className: classNames4("relative flex items-center", className), children: [
+    /* @__PURE__ */ jsxs4(
+      "div",
+      {
+        ref: refs.setReference,
+        ...getReferenceProps(),
+        className: classNames4(buttonClassName, open && activeButtonClassName),
+        children: [
+          icon,
+          children
+        ]
+      }
+    ),
+    (enableFadeAnimation ? isVisible : open) && /* @__PURE__ */ jsx4(Portal, { children: /* @__PURE__ */ jsx4("div", { className: "_sentio_", children: /* @__PURE__ */ jsxs4(
+      "div",
+      {
+        className: classNames4(
+          "sentio-tooltip dark:bg-sentio-gray-200 z-10 rounded-md bg-white p-2 text-xs shadow-lg ring-1 ring-black ring-opacity-5 dark:ring-gray-100",
+          enableFadeAnimation && `transition-opacity duration-[${animationDuration}ms] ease-in-out`,
+          enableFadeAnimation ? open ? "opacity-100" : "opacity-0" : ""
+        ),
+        ref: refs.setFloating,
+        style: {
+          position: strategy,
+          top: y ?? 0,
+          left: x ?? 0
+        },
+        ...getFloatingProps,
+        children: [
+          !hideArrow && placement === "bottom" && /* @__PURE__ */ jsx4(
+            "div",
+            {
+              className: "arrow -translate-y-[5px] before:absolute before:h-2 before:w-2 before:rotate-45 before:bg-white before:border-l before:border-t before:border-black/5 dark:before:bg-sentio-gray-200 dark:before:border-gray-100",
+              ref: arrowRef,
+              style: {
+                left: arrowX ?? 0,
+                top: arrowY ?? 0,
+                position: "absolute"
+              }
+            }
+          ),
+          isString(text) ? /* @__PURE__ */ jsx4(
+            "p",
+            {
+              className: classNames4("w-max whitespace-pre-wrap", maxWidth),
+              children: text
+            }
+          ) : /* @__PURE__ */ jsx4(
+            "div",
+            {
+              className: classNames4(
+                "w-max overflow-auto",
+                maxWidth
+              ),
+              children: text
+            }
+          )
+        ]
+      }
+    ) }) })
+  ] });
+};
+
+// src/common/NewButton.tsx
+import { cva, cx } from "class-variance-authority";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var buttonClass = cva(["inline-flex", "items-center", "font-medium"], {
+  variants: {
+    role: {
+      primary: ["btn-primary"],
+      secondary: ["btn-secondary"],
+      dashed: ["btn-dashed"],
+      text: ["btn-text"],
+      link: ["btn-link"],
+      tertiary: [],
+      tertiarytext: [],
+      custom: []
+      // custom button
+    },
+    status: {
+      default: "btn-status-default",
+      danger: "btn-status-danger"
+    },
+    size: {
+      sm: ["px-2", "py-1.5", "text-xs", "font-normal", "gap-2"],
+      default: ["px-2.5", "text-ilabel", "font-ilabel", "gap-2", "py-1"],
+      md: ["px-2.5 text-ilabel font-ilabel gap-2", "py-1.5"],
+      lg: ["px-3 text-sm gap-3", "py-2"]
+    },
+    disabled: {
+      false: [""],
+      true: ["btn-disabled"]
+    },
+    position: {
+      begin: ["rounded-l-md"],
+      end: ["rounded-r-md"],
+      middle: [""],
+      full: ["rounded-md"]
+    }
+  },
+  compoundVariants: [
+    {
+      role: "secondary",
+      size: "default",
+      class: "py-[3px]"
+    },
+    {
+      role: "dashed",
+      size: "default",
+      class: "py-[3px]"
+    },
+    {
+      role: "secondary",
+      size: "md",
+      class: "py-[5px]"
+    },
+    {
+      role: "dashed",
+      size: "md",
+      class: "py-[5px]"
+    },
+    {
+      role: "secondary",
+      size: "lg",
+      class: "py-[7px]"
+    },
+    {
+      role: "dashed",
+      size: "lg",
+      class: "py-[7px]"
+    },
+    {
+      role: "tertiary",
+      disabled: false,
+      class: [
+        "bg-primary-100 dark:bg-gray-100",
+        "hover:bg-primary-100/90 dark:hover:bg-gray-200/90",
+        "active:bg-primary-200 dark:active:bg-gray-300",
+        "text-primary-600 dark:text-gray-600",
+        "hover:text-primary-500 dark:hover:text-gray-700",
+        "active:text-primary-700 dark:active:text-gray-800",
+        "focus:ring-primary-700 dark:focus:ring-gray-800"
+      ]
+    },
+    {
+      role: "tertiary",
+      disabled: true,
+      class: "cursor-not-allowed bg-gray-100 text-gray-400"
+    },
+    {
+      role: "tertiarytext",
+      disabled: false,
+      class: [
+        "hover:bg-primary-100/90 dark:hover:bg-gray-200/90",
+        "active:bg-primary-200 dark:active:bg-gray-300",
+        "text-primary-600 dark:text-gray-600",
+        "hover:text-primary-500 dark:hover:text-gray-700",
+        "active:text-primary-700 dark:active:text-gray-800",
+        "focus:ring-primary-700 dark:focus:ring-gray-800"
+      ]
+    },
+    {
+      role: "tertiarytext",
+      disabled: true,
+      class: "cursor-not-allowed text-gray-400"
+    }
+  ],
+  defaultVariants: {
+    role: "secondary",
+    status: "default",
+    size: "default",
+    position: "full",
+    disabled: false
+  }
+});
+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",
+      {
+        className: light ? "opacity-5" : "opacity-10",
+        cx: "12",
+        cy: "12",
+        r: "10",
+        stroke: "currentColor",
+        strokeWidth: "4"
+      }
+    ),
+    /* @__PURE__ */ jsx5(
+      "path",
+      {
+        className: light ? "opacity-50" : "opacity-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"
+      }
+    )
+  ] });
+}
+var iconClass = cva("", {
+  variants: {
+    size: {
+      default: "w-4 h-4",
+      md: "w-[18px] h-[18px]",
+      lg: "w-5 h-4",
+      sm: "w-4 h-4"
+    },
+    disabled: {
+      true: "saturate-0",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    size: "default",
+    disabled: false
+  }
+});
+var pIconClass = cva("", {
+  variants: {
+    size: {
+      default: "!w-4 !h-4",
+      md: "!w-[18px] !h-[18px]",
+      lg: "!w-5 !h-5",
+      sm: "!w-4 !h-4"
+    }
+  },
+  defaultVariants: {
+    size: "default"
+  }
+});
+function Button({
+  className,
+  size,
+  type,
+  role,
+  status,
+  onClick,
+  children,
+  processing,
+  disabled,
+  disabledHint,
+  disabledHintPortal,
+  position,
+  icon,
+  title,
+  value,
+  id
+}, ref) {
+  const iconClasses = iconClass({ size, disabled });
+  const iconEl = useMemo(() => {
+    let iconEl2 = null;
+    if (processing) {
+      iconEl2 = /* @__PURE__ */ jsx5(
+        Proccessing,
+        {
+          className: cx(pIconClass({ size }), role == "primary" ? "text-white" : ""),
+          light: role !== "primary"
+        }
+      );
+    } else if (icon) {
+      iconEl2 = cloneElement(icon, { className: cx(icon.props.className, iconClasses) });
+    }
+    return iconEl2;
+  }, [icon, iconClasses, processing, role]);
+  const cls = cx(
+    className,
+    buttonClass({
+      size,
+      status,
+      role,
+      disabled,
+      position
+    })
+  );
+  const btn = /* @__PURE__ */ jsxs5(
+    "button",
+    {
+      title,
+      onClick,
+      type,
+      disabled: disabled || processing,
+      className: cls,
+      ref,
+      value,
+      suppressHydrationWarning: true,
+      id,
+      children: [
+        iconEl,
+        children
+      ]
+    }
+  );
+  if (disabled && disabledHint) {
+    return /* @__PURE__ */ jsx5(
+      PopoverTooltip,
+      {
+        usePortal: disabledHintPortal,
+        buttonClassName: disabledHintPortal ? "w-full" : "",
+        className: "text-gray",
+        text: /* @__PURE__ */ jsx5("p", { className: "text-sm text-gray-500", children: disabledHint }),
+        hideArrow: true,
+        children: btn
+      }
+    );
+  }
+  return btn;
+}
+var NewButton = forwardRef(Button);
+var NewButton_default = NewButton;
+
+// src/common/dialog/BaseDialog.tsx
+import { Fragment as Fragment2, memo as memo2, createContext } from "react";
+import { Dialog, Transition } from "@headlessui/react";
+import { cx as classNames5 } from "class-variance-authority";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var BaseZIndexContext = createContext(10);
+function _BaseDialog({
+  title,
+  open,
+  onClose,
+  onCancel,
+  cancelText,
+  cancelProps = {},
+  onOk,
+  okText,
+  okProps = {},
+  children,
+  buttonsClassName,
+  panelClassName,
+  titleBorder = true,
+  footerBorder = true,
+  initialFocus,
+  extraButtons,
+  errorMessages,
+  footer,
+  zIndex = 10,
+  mask = "normal"
+}) {
+  return /* @__PURE__ */ jsx6(Transition, { appear: true, as: Fragment2, show: open, children: /* @__PURE__ */ jsxs6(
+    Dialog,
+    {
+      className: classNames5("relative", "_sentio_"),
+      as: "div",
+      onClose,
+      initialFocus,
+      style: {
+        zIndex
+      },
+      children: [
+        /* @__PURE__ */ jsx6(
+          Transition.Child,
+          {
+            as: Fragment2,
+            enter: "ease-out duration-300",
+            enterFrom: "opacity-0",
+            enterTo: "opacity-100",
+            leave: "ease-in duration-200",
+            leaveFrom: "opacity-100",
+            leaveTo: "opacity-0",
+            children: /* @__PURE__ */ jsx6(
+              "div",
+              {
+                className: classNames5(
+                  "fixed inset-0 transition-opacity",
+                  mask === "light" ? "bg-gray-500/30 dark:bg-gray-200/30" : "bg-gray-500/75 dark:bg-gray-200/50"
+                )
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx6("div", { className: "fixed inset-0 z-10 overflow-y-auto", children: /* @__PURE__ */ jsx6("div", { className: "flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0", children: /* @__PURE__ */ jsx6(
+          Transition.Child,
+          {
+            as: Fragment2,
+            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__ */ jsxs6(
+              Dialog.Panel,
+              {
+                "data-testid": "create-dashboard",
+                className: classNames5(
+                  "dark:bg-sidebar relative transform overflow-hidden rounded-lg bg-white pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-3xl",
+                  panelClassName
+                ),
+                children: [
+                  title ? /* @__PURE__ */ jsx6(
+                    Dialog.Title,
+                    {
+                      as: "h3",
+                      className: classNames5(
+                        "text-ilabel font-ilabel text-text-foreground pl-4",
+                        titleBorder && "border-border-color border-b pb-4"
+                      ),
+                      children: title
+                    }
+                  ) : null,
+                  children,
+                  footer ? footer : /* @__PURE__ */ jsxs6(
+                    "div",
+                    {
+                      className: classNames5(
+                        "flex items-center justify-between pt-4 ",
+                        footerBorder && "border-border-color border-t"
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsx6(
+                          "div",
+                          {
+                            className: "truncate px-4 text-sm font-semibold text-red-500",
+                            title: errorMessages || "",
+                            children: errorMessages || " "
+                          }
+                        ),
+                        /* @__PURE__ */ jsxs6(
+                          "div",
+                          {
+                            className: classNames5(
+                              `flex flex-row-reverse items-center gap-3 px-4`,
+                              buttonsClassName ?? ""
+                            ),
+                            children: [
+                              extraButtons,
+                              onOk && /* @__PURE__ */ jsx6(NewButton_default, { role: "primary", onClick: onOk, ...okProps, children: okText || "OK" }),
+                              onCancel && /* @__PURE__ */ jsx6(NewButton_default, { onClick: onCancel, ...cancelProps, children: cancelText || "Cancel" })
+                            ]
+                          }
+                        )
+                      ]
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        ) }) })
+      ]
+    }
+  ) });
+}
+var BaseDialog = memo2(_BaseDialog);
+
+// src/common/DisclosurePanel.tsx
+import { cx as classNames6 } from "class-variance-authority";
+import isFunction from "lodash/isFunction";
+import { useState as useState3, useCallback as useCallback2 } from "react";
+import { LuChevronRight } from "react-icons/lu";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+function DisclosurePanel({
+  title,
+  children,
+  defaultOpen,
+  className,
+  containerClassName,
+  iconClassName = "h-5 w-5",
+  titleClassName
+}) {
+  const [open, setOpen] = useState3(defaultOpen || false);
+  const toggle = useCallback2(() => {
+    setOpen((prev) => !prev);
+  }, []);
+  return /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      className: containerClassName || "dark:bg-sentio-gray-200 w-full rounded bg-[#F6F8FA]",
+      children: [
+        /* @__PURE__ */ jsxs7(
+          "button",
+          {
+            className: classNames6(
+              open ? "rounded-t" : "rounded",
+              "focus-visible:ring-primary-500 text-ilabel font-ilabel text-text-foreground hover:bg-sentio-gray-100 dark:hover:bg-sentio-gray-400 flex w-full px-2 py-1.5 text-left focus:outline-none focus-visible:ring focus-visible:ring-opacity-75",
+              titleClassName
+            ),
+            onClick: toggle,
+            children: [
+              /* @__PURE__ */ jsx7(
+                LuChevronRight,
+                {
+                  className: classNames6(
+                    open ? "rotate-90 transform" : "",
+                    "mr-1 self-center transition-all",
+                    iconClassName
+                  )
+                }
+              ),
+              isFunction(title) ? title(open) : title
+            ]
+          }
+        ),
+        open && /* @__PURE__ */ jsx7("div", { className: classNames6("p-2", className), children })
+      ]
+    }
+  );
+}
+
+// src/common/Collapse.tsx
+import { ChevronDownIcon } from "@heroicons/react/20/solid";
+import { cx as classNames7 } from "class-variance-authority";
+
+// src/utils/use-boolean.ts
+import { useCallback as useCallback3, useState as useState4 } from "react";
+function useBoolean(defaultValue = false) {
+  const [value, setValue] = useState4(defaultValue);
+  const setTrue = useCallback3(() => setValue(true), []);
+  const setFalse = useCallback3(() => setValue(false), []);
+  const toggle = useCallback3(() => setValue((v) => !v), []);
+  return {
+    value,
+    setValue,
+    setTrue,
+    setFalse,
+    toggle
+  };
+}
+
+// src/common/Collapse.tsx
+import { useEffect as useEffect3 } from "react";
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+var Collapse = ({
+  title,
+  children,
+  className,
+  titleClassName,
+  defaultOpen = false,
+  iconClassName = "h-5 w-5"
+}) => {
+  const { toggle, value: visible, setTrue, setFalse } = useBoolean(defaultOpen);
+  useEffect3(() => {
+    if (defaultOpen) {
+      setTrue();
+    } else {
+      setFalse();
+    }
+  }, [defaultOpen, setTrue, setFalse]);
+  return /* @__PURE__ */ jsxs8("div", { className: classNames7("space-y-2", className), children: [
+    /* @__PURE__ */ jsxs8(
+      "span",
+      {
+        className: classNames7(
+          "text-gray hover:text-primary active:text-primary-700 inline-flex cursor-pointer items-center gap-2",
+          titleClassName
+        ),
+        onClick: toggle,
+        children: [
+          title,
+          /* @__PURE__ */ jsx8(
+            ChevronDownIcon,
+            {
+              className: classNames7(
+                "transition",
+                iconClassName,
+                visible ? "rotate-180" : ""
+              )
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx8(
+      "div",
+      {
+        className: classNames7(
+          "overflow-hidden transition-all duration-200",
+          visible ? "max-h-[2000px] opacity-100" : "max-h-0 opacity-0"
+        ),
+        children
+      }
+    )
+  ] });
+};
+
+// src/common/Input.tsx
+import { cva as cva2, cx as cx2 } from "class-variance-authority";
+import { ExclamationCircleIcon } from "@heroicons/react/20/solid";
+import { forwardRef as forwardRef2 } from "react";
+import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+var inputContainerStyles = cva2(
+  "flex relative rounded-md border focus-within:ring-1 w-full font-normal overflow-hidden",
+  {
+    variants: {
+      size: {
+        sm: "text-sm h-6",
+        md: "text-base h-8",
+        lg: "text-lg h-10"
+      },
+      error: {
+        true: "border-red-300 text-red-900 placeholder:text-red-300 focus-within:ring-red-500",
+        false: "border-gray-300  focus-within:ring-primary-500 focus-within:border-primary-500"
+      },
+      readOnly: {
+        true: "bg-gray-50 text-gray-400",
+        false: "text-text-foreground"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      error: false,
+      readOnly: false
+    },
+    compoundVariants: []
+  }
+);
+var inputStyles = cva2(
+  [
+    "block",
+    "w-full",
+    "placeholder:text-ilabel placeholder:font-normal",
+    "border-none focus:ring-0",
+    "focus:outline-none"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "sm:text-xs placeholder:text-xs placeholder:font-normal pl-2 pr-6",
+        md: "sm:text-ilabel placeholder:text-ilabel placeholder:font-normal pl-2 pr-10",
+        lg: "sm:text-lg placeholder:text-lg placeholder:font-normal pl-3 pr-10"
+      },
+      error: {
+        true: "border-red-300",
+        false: "border-gray-300 "
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      error: false
+    }
+  }
+);
+var iconStyles = cva2("text-red-500", {
+  variants: {
+    size: {
+      sm: "h-4 w-4",
+      md: "h-5 w-5",
+      lg: "h-6 w-6"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var Input = forwardRef2(
+  function Input2(props, inputRef) {
+    const { className, error, errorClassName, size, ...rest } = props;
+    const containerClassName = inputContainerStyles({
+      size,
+      error: !!error,
+      readOnly: rest.disabled
+    });
+    const inputClassName = cx2(inputStyles({ size, error: !!error }), className);
+    return /* @__PURE__ */ jsxs9("div", { children: [
+      /* @__PURE__ */ jsxs9("div", { className: containerClassName, children: [
+        /* @__PURE__ */ jsx9("input", { ...rest, ref: inputRef, className: inputClassName }),
+        error && /* @__PURE__ */ jsx9("div", { className: "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3", children: /* @__PURE__ */ jsx9(ExclamationCircleIcon, { className: iconStyles({ size }) }) })
+      ] }),
+      error && /* @__PURE__ */ jsx9("p", { className: "mt-2 text-xs text-red-600", children: typeof error == "string" ? error : error.message })
+    ] });
+  }
+);
+
+// src/common/select/Radio.tsx
+import { RadioGroup } from "@headlessui/react";
+
+// src/utils/classnames.ts
+import { cx as cx3 } from "class-variance-authority";
+
+// src/common/select/Radio.tsx
+import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+function RadioSelect({
+  value,
+  onChange,
+  label,
+  labelClassName,
+  options,
+  vertical,
+  containerClassName
+}) {
+  return /* @__PURE__ */ jsxs10(RadioGroup, { value, onChange, children: [
+    label && /* @__PURE__ */ jsxs10(RadioGroup.Label, { className: "text-ilabel text-text-foreground mr-4 font-medium", children: [
+      label,
+      ":"
+    ] }),
+    /* @__PURE__ */ jsx10(
+      "div",
+      {
+        className: cx3(
+          "item-center",
+          vertical ? "flex flex-col gap-2" : "inline-flex gap-4",
+          containerClassName
+        ),
+        children: options.map(({ name, value: value2 }, index) => /* @__PURE__ */ jsx10(RadioGroup.Option, { value: value2, children: ({ checked }) => /* @__PURE__ */ jsxs10("span", { className: "group/radio", children: [
+          /* @__PURE__ */ jsx10(
+            "input",
+            {
+              readOnly: true,
+              type: "radio",
+              checked,
+              className: "border-sentio-gray-300 group-hover/radio:border-primary-500"
+            }
+          ),
+          /* @__PURE__ */ jsx10(
+            "label",
+            {
+              className: cx3(
+                "text-ilabel group-hover/radio:text-primary-500 group-hover/radio:dark:text-primary-600  ml-2 font-medium ",
+                checked ? "text-primary dark:text-primary-700" : "text-gray",
+                labelClassName
+              ),
+              children: name
+            }
+          )
+        ] }) }, index))
+      }
+    )
+  ] });
+}
+
+// src/common/select/Switch.tsx
+import { useCallback as useCallback4, useEffect as useEffect4, useState as useState5 } from "react";
+import { Switch as HeadlessSwitch } from "@headlessui/react";
+import { cva as cva3 } from "class-variance-authority";
+import { isFunction as isFunction2 } from "lodash";
+import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
+var switchClass = cva3(
+  [
+    "relative inline-flex shrink-0 rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75"
+  ],
+  {
+    variants: {
+      size: {
+        lg: "h-8 w-[68px]",
+        default: "h-6 w-[52px]",
+        sm: "h-[16px] w-[30px]"
+      },
+      enabled: {
+        true: "bg-primary group-hover:bg-primary-500",
+        false: "bg-gray-400/50 group-hover:bg-primary-200"
+      },
+      disabled: {
+        true: "cursor-not-allowed opacity-50",
+        false: "cursor-pointer"
+      }
+    },
+    defaultVariants: {
+      size: "default",
+      enabled: false
+    },
+    compoundVariants: [
+      {
+        enabled: false,
+        disabled: true,
+        class: "!bg-gray-400/50"
+      }
+    ]
+  }
+);
+var dotClass = cva3(
+  "pointer-events-none inline-block transform rounded-full bg-white dark:bg-sentio-gray-100 shadow-lg ring-0 transition duration-200 ease-in-out",
+  {
+    variants: {
+      size: {
+        lg: "h-7 w-7",
+        default: "h-5 w-5",
+        sm: "h-3 w-3"
+      },
+      enabled: {
+        true: "",
+        false: "translate-x-0"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    },
+    compoundVariants: [
+      {
+        size: "sm",
+        enabled: true,
+        class: "translate-x-3.5 switch-dot-sm"
+      },
+      {
+        size: "default",
+        enabled: true,
+        class: "translate-x-7"
+      },
+      {
+        size: "lg",
+        enabled: true,
+        class: "translate-x-9"
+      }
+    ]
+  }
+);
+var labelClass = cva3(
+  "text-text-foreground ml-2 font-medium align-text-bottom",
+  {
+    variants: {
+      size: {
+        lg: "text-sm leading-8",
+        default: "text-icontent leading-6 ",
+        sm: "text-icontent leading-5"
+      },
+      disabled: {
+        true: "cursor-not-allowed opacity-50",
+        false: "cursor-pointer"
+      }
+    },
+    defaultVariants: {
+      size: "default",
+      disabled: false
+    }
+  }
+);
+function Switch({
+  checked,
+  onChange: _onChange,
+  srText,
+  size = "default",
+  disabled,
+  label
+}) {
+  const [enabled, setState] = useState5(checked);
+  const onChange = useCallback4(() => {
+    setState((enabled2) => {
+      if (isFunction2(_onChange)) {
+        setTimeout(() => {
+          _onChange(!enabled2);
+        });
+      }
+      return !enabled2;
+    });
+  }, [_onChange]);
+  useEffect4(() => {
+    setState(checked);
+  }, [checked]);
+  return /* @__PURE__ */ jsxs11(HeadlessSwitch.Group, { children: [
+    /* @__PURE__ */ jsxs11(
+      HeadlessSwitch,
+      {
+        checked: enabled,
+        onChange: onChange || setState,
+        className: switchClass({
+          enabled,
+          size,
+          disabled
+        }),
+        disabled,
+        children: [
+          srText && /* @__PURE__ */ jsx11("span", { className: "sr-only", children: srText }),
+          /* @__PURE__ */ jsx11(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: dotClass({
+                enabled,
+                size
+              })
+            }
+          )
+        ]
+      }
+    ),
+    label && /* @__PURE__ */ jsx11(
+      HeadlessSwitch.Label,
+      {
+        className: labelClass({
+          size,
+          disabled
+        }),
+        children: label
+      }
+    )
+  ] });
+}
+
+// src/common/select/Select.tsx
+import { Listbox } from "@headlessui/react";
+import { CheckIcon, ChevronDownIcon as ChevronDownIcon2 } from "@heroicons/react/20/solid";
+import { isEqual } from "lodash";
+import { cva as cva4 } from "class-variance-authority";
+import {
+  useMemo as useMemo2,
+  useRef as useRef3,
+  useState as useState6,
+  useContext
+} from "react";
+import isFunction3 from "lodash/isFunction";
+import { ClipLoader as ClipLoader2 } from "react-spinners";
+import { useLayer } from "react-laag";
+import { useResizeDetector } from "react-resize-detector";
+import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
+var buttonClass2 = cva4(
+  [
+    "focus:ring-primary focus:border-primary",
+    "relative w-full rounded-md border bg-white dark:bg-sentio-gray-100 text-left focus:outline-none focus:ring-1 text-ilabel"
+  ],
+  {
+    variants: {
+      open: {
+        true: "bg-sentio-gray-100 ring-1 ring-primary border-primary",
+        false: ""
+      },
+      size: {
+        sm: "py-1 px-2",
+        md: "py-2 px-3"
+      },
+      error: {
+        true: "border-red-300 text-red-900 placeholder-red-300 focus-within:ring-red-500",
+        false: "border-border-color"
+      },
+      disabled: {
+        true: "cursor-not-allowed",
+        false: "cursor-default"
+      }
+    },
+    defaultVariants: {
+      open: false,
+      size: "sm",
+      error: false,
+      disabled: false
+    },
+    compoundVariants: [
+      {
+        open: true,
+        error: true,
+        class: "!ring-red-300 border-red-300"
+      }
+    ]
+  }
+);
+var optionClass = cva4(["relative cursor-default select-none"], {
+  variants: {
+    disabled: {
+      true: "cursor-not-allowed text-gray-400",
+      false: "text-text-foreground"
+    },
+    size: {
+      sm: "py-1 pl-3 pr-5",
+      md: "py-2 pl-3 pr-6"
+    },
+    active: {
+      true: "bg-primary-50 dark:bg-primary-400/50",
+      false: ""
+    },
+    selected: {
+      true: "!bg-primary-100 dark:!bg-primary-400",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    disabled: false,
+    active: false,
+    selected: false,
+    size: "sm"
+  }
+});
+var iconClass2 = cva4([], {
+  variants: {
+    size: {
+      sm: "h-3.5 w-3.5",
+      md: "h-4 w-4"
+    },
+    disabled: {
+      true: "opacity-50",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    size: "sm",
+    disabled: false
+  }
+});
+function generateLabel(label, props) {
+  if (isFunction3(label)) {
+    return label(props);
+  }
+  return label;
+}
+function Select({
+  className,
+  buttonClassName,
+  optionsClassName,
+  options,
+  value,
+  onChange,
+  placeholder,
+  size = "sm",
+  renderOption,
+  noOptionsMessage,
+  error,
+  disabled,
+  fetchMore,
+  isFetchingMore,
+  scrollBottomThreshold = 100,
+  groupedOptions,
+  groupedOrder,
+  unmountOptions = true,
+  direction = "down",
+  asLayer
+}) {
+  const selectedIndex = options.findIndex((o) => isEqual(o.value, value));
+  const listRef = useRef3(null);
+  const [open, setOpen] = useState6(false);
+  const { width, ref } = useResizeDetector({
+    refreshMode: "debounce",
+    refreshRate: 100,
+    handleHeight: false
+  });
+  const baseZIndex = useContext(BaseZIndexContext);
+  const { renderLayer, triggerProps, layerProps } = useLayer({
+    isOpen: open,
+    auto: true,
+    preferX: "left",
+    preferY: direction === "up" ? "top" : "bottom",
+    placement: direction === "up" ? "top-start" : "bottom-start",
+    triggerOffset: 4,
+    onOutsideClick: () => setOpen(false)
+  });
+  const grouped = useMemo2(() => {
+    if (!groupedOptions || !options || options.length === 0) {
+      return options;
+    }
+    const groupedOptionsList = options.reduce((acc, option) => {
+      ;
+      (acc[option.group] = acc[option.group] || []).push(option);
+      return acc;
+    }, {});
+    return groupedOrder?.reduce((acc, group) => {
+      return [
+        ...acc,
+        {
+          label: group.label,
+          options: groupedOptionsList[group.key] || []
+        }
+      ];
+    }, []);
+  }, [groupedOptions, groupedOrder, options]);
+  const optionsElement = /* @__PURE__ */ jsxs12(
+    Listbox.Options,
+    {
+      ref: listRef,
+      onScroll: () => {
+        if (listRef.current?.scrollHeight) {
+          const bottomHeight = listRef.current?.scrollHeight - listRef.current?.clientHeight - listRef.current?.scrollTop;
+          if (bottomHeight < scrollBottomThreshold) {
+            fetchMore?.();
+          }
+        }
+      },
+      unmount: unmountOptions,
+      className: cx3(
+        "text-ilabel dark:bg-sentio-gray-100 scrollbar-thin max-h-60 w-full overflow-auto rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:ring-gray-100 sm:text-sm",
+        asLayer ? "" : "absolute z-10",
+        optionsClassName
+      ),
+      children: [
+        !options || options.length === 0 ? /* @__PURE__ */ jsx12(
+          Listbox.Option,
+          {
+            value: null,
+            disabled: true,
+            className: optionClass({ disabled: true, size }),
+            children: noOptionsMessage ?? /* @__PURE__ */ jsx12("span", { className: "text-gray-400", children: "No options" })
+          }
+        ) : null,
+        groupedOptions && grouped ? grouped.map(({ label, options: options2 }) => {
+          if (!options2 || options2.length === 0) {
+            return null;
+          }
+          return /* @__PURE__ */ jsxs12("div", { children: [
+            /* @__PURE__ */ jsx12("div", { className: "text-gray px-3.5 py-1 text-xs font-medium", children: label }),
+            /* @__PURE__ */ jsx12("div", { children: options2.map(
+              (option, i) => /* @__PURE__ */ jsx12(
+                Listbox.Option,
+                {
+                  value: option.value,
+                  disabled: option.disabled,
+                  className: ({ active }) => optionClass({
+                    disabled: option.disabled,
+                    size,
+                    active,
+                    selected: isEqual(value, option.value)
+                  }),
+                  title: option.title,
+                  children: ({ selected, active }) => {
+                    if (renderOption) {
+                      return renderOption(option, { selected, active });
+                    }
+                    return /* @__PURE__ */ jsxs12(Fragment3, { children: [
+                      /* @__PURE__ */ jsx12(
+                        "span",
+                        {
+                          className: cx3(
+                            selected ? "font-medium" : "font-normal",
+                            "text-ilabel block truncate"
+                          ),
+                          children: generateLabel(option.label, {
+                            selected,
+                            active
+                          })
+                        }
+                      ),
+                      selected ? /* @__PURE__ */ jsx12(
+                        "span",
+                        {
+                          className: cx3(
+                            "text-primary-600 absolute inset-y-0 right-0 flex items-center pr-2 dark:text-white"
+                          ),
+                          children: /* @__PURE__ */ jsx12(
+                            CheckIcon,
+                            {
+                              className: iconClass2({ size }),
+                              "aria-hidden": "true"
+                            }
+                          )
+                        }
+                      ) : null
+                    ] });
+                  }
+                },
+                i
+              )
+            ) })
+          ] }, label);
+        }) : options.map((option, i) => /* @__PURE__ */ jsx12(
+          Listbox.Option,
+          {
+            value: option.value,
+            disabled: option.disabled,
+            className: ({ active }) => optionClass({
+              disabled: option.disabled,
+              size,
+              active,
+              selected: selectedIndex === i
+            }),
+            title: option.title,
+            children: ({ selected, active }) => {
+              if (renderOption) {
+                return renderOption(option, { selected, active });
+              }
+              return /* @__PURE__ */ jsxs12(Fragment3, { children: [
+                /* @__PURE__ */ jsx12(
+                  "span",
+                  {
+                    className: cx3(
+                      selected ? "font-medium" : "font-normal",
+                      "text-ilabel block truncate"
+                    ),
+                    children: generateLabel(option.label, { selected, active })
+                  }
+                ),
+                selected ? /* @__PURE__ */ jsx12(
+                  "span",
+                  {
+                    className: cx3(
+                      "text-primary-600 absolute inset-y-0 right-0 flex items-center pr-2 dark:text-white"
+                    ),
+                    children: /* @__PURE__ */ jsx12(
+                      CheckIcon,
+                      {
+                        className: iconClass2({ size }),
+                        "aria-hidden": "true"
+                      }
+                    )
+                  }
+                ) : null
+              ] });
+            }
+          },
+          i
+        )),
+        isFetchingMore && /* @__PURE__ */ jsx12(
+          Listbox.Option,
+          {
+            value: null,
+            disabled: true,
+            className: optionClass({ disabled: true, size }),
+            children: /* @__PURE__ */ jsxs12("div", { className: "flex w-full items-center justify-center gap-2", children: [
+              /* @__PURE__ */ jsx12(ClipLoader2, { size: 16, color: "#A6C2F0" }),
+              /* @__PURE__ */ jsx12("span", { className: "text-gray/50 text-xs", children: "Loading more..." })
+            ] })
+          }
+        )
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsx12(Listbox, { value, onChange, disabled, children: ({ open: headlessOpen }) => {
+    if (headlessOpen !== open && asLayer) {
+      setOpen(headlessOpen);
+    }
+    return /* @__PURE__ */ jsxs12("div", { className: cx3(className, "relative"), ref, children: [
+      /* @__PURE__ */ jsxs12(
+        Listbox.Button,
+        {
+          as: "div",
+          className: cx3(
+            buttonClass2({
+              open: headlessOpen,
+              size,
+              error: !!error,
+              disabled: !!disabled
+            }),
+            buttonClassName
+          ),
+          ...triggerProps,
+          children: [
+            /* @__PURE__ */ jsx12("div", { className: "pr-4", children: selectedIndex > -1 ? generateLabel(options[selectedIndex].label, {}) : placeholder ? /* @__PURE__ */ jsx12(
+              "span",
+              {
+                className: cx3(
+                  "font-normal",
+                  error ? "text-red-400" : "text-gray-400"
+                ),
+                children: placeholder
+              }
+            ) : "" }),
+            /* @__PURE__ */ jsx12(
+              "button",
+              {
+                type: "button",
+                disabled,
+                className: cx3(
+                  "absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none"
+                ),
+                children: /* @__PURE__ */ jsx12(
+                  ChevronDownIcon2,
+                  {
+                    className: iconClass2({ size, disabled: !!disabled })
+                  }
+                )
+              }
+            )
+          ]
+        }
+      ),
+      headlessOpen ? asLayer ? renderLayer(
+        /* @__PURE__ */ jsx12(
+          "div",
+          {
+            ...layerProps,
+            style: {
+              ...layerProps.style,
+              zIndex: Math.max(10, baseZIndex + 1),
+              minWidth: width
+            },
+            children: optionsElement
+          }
+        )
+      ) : optionsElement : null,
+      error && /* @__PURE__ */ jsx12("p", { className: "mt-2 text-xs font-medium text-red-600", children: typeof error == "string" ? error : error.message })
+    ] });
+  } });
+}
+
+// src/common/tree/FlatTree.tsx
+import {
+  useState as useState8,
+  useMemo as useMemo4,
+  createContext as createContext2,
+  useContext as useContext2,
+  useCallback as useCallback6,
+  useRef as useRef4,
+  useEffect as useEffect6,
+  memo as memo3,
+  isValidElement,
+  useTransition
+} from "react";
+
+// src/common/tree/Tree.tsx
+import { useCallback as useCallback5, useState as useState7, useMemo as useMemo3, forwardRef as forwardRef3 } from "react";
+
+// src/common/tree/TreeIcons.tsx
+import { LuSquarePlus, LuSquareMinus, LuSquareX, LuEye } from "react-icons/lu";
+
+// src/common/tree/Tree.tsx
+import { cx as classNames8 } from "class-variance-authority";
+import { useEffect as useEffect5 } from "react";
+import { jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
+var Line = () => {
+  return /* @__PURE__ */ jsx13("div", { className: "-my-1.5 mr-[19px] h-full min-h-[24px] w-[px] translate-x-2 border-l border-dashed border-gray-400" });
+};
+var Tree_default = forwardRef3(function Tree({
+  open: defaultOpen,
+  content,
+  children,
+  depth = 0,
+  type,
+  contentClassName,
+  prefix,
+  suffix,
+  onClick,
+  onOpenClick,
+  showToggle,
+  className,
+  expandIcon = /* @__PURE__ */ jsx13(LuSquarePlus, { className: "h-[1em] w-[1em] align-middle" }),
+  collapseIcon = /* @__PURE__ */ jsx13(LuSquareMinus, { className: "h-[1em] w-[1em] align-middle" })
+}, ref) {
+  const [open, setOpen] = useState7(defaultOpen);
+  useEffect5(() => {
+    setOpen(defaultOpen);
+  }, [defaultOpen]);
+  const toggle = useCallback5(
+    (evt) => {
+      evt.stopPropagation();
+      if (onOpenClick) {
+        onOpenClick(!open);
+      } else {
+        setOpen((val) => {
+          return !val;
+        });
+      }
+    },
+    [open, onOpenClick]
+  );
+  const lineNodes = useMemo3(() => {
+    const lines = [];
+    for (let i = 0; i < depth; i++) {
+      lines.push(/* @__PURE__ */ jsx13(Line, {}, i));
+    }
+    return lines;
+  }, [depth]);
+  return /* @__PURE__ */ jsxs13(
+    "div",
+    {
+      className: classNames8(
+        "text-icontent font-icontent overflow-hidden text-ellipsis whitespace-nowrap align-middle",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs13(
+          "div",
+          {
+            ref,
+            className: classNames8(
+              "flex items-center px-2 py-1 hover:bg-gray-100",
+              contentClassName
+            ),
+            onClick,
+            children: [
+              /* @__PURE__ */ jsx13("div", { className: "inline-flex shrink-0 items-center self-stretch", children: lineNodes }),
+              /* @__PURE__ */ jsx13("div", { className: "inline-flex shrink-0 items-center", children: children || showToggle ? /* @__PURE__ */ jsx13(
+                "button",
+                {
+                  className: "fill-gray color-gray hover:fill-primary-500 hover:color-primary-500 dark:hover:fill-primary-700 mr-1.5 cursor-pointer",
+                  onClick: toggle,
+                  children: open ? collapseIcon : expandIcon
+                }
+              ) : /* @__PURE__ */ jsx13("span", { className: "mr-[19px] h-1 w-px" }) }),
+              type,
+              /* @__PURE__ */ jsx13("span", { className: "flex-1 align-middle", children: content })
+            ]
+          }
+        ),
+        prefix,
+        open ? children : null,
+        suffix
+      ]
+    }
+  );
+});
+
+// src/common/tree/FlatTree.tsx
+import { useVirtualizer } from "@tanstack/react-virtual";
+import isNumber from "lodash/isNumber";
+import { cx as classNames9 } from "class-variance-authority";
+import { throttle } from "lodash";
+import { Fragment as Fragment4, jsx as jsx14 } from "react/jsx-runtime";
+var SUFFIX_NODE_KEY = "selectedKey_after";
+var ROOT_KEY = "root";
+var TreeContext = createContext2({
+  expandKeys: [],
+  onExpand: (key) => {
+    console.log(key);
+  }
+});
+var ControledTree = ({
+  item,
+  selected,
+  contentClassName,
+  expandIcon,
+  collapseIcon
+}) => {
+  const { expandKeys, onExpand, onClick } = useContext2(TreeContext);
+  let titleNode;
+  if (typeof item.title === "function") {
+    titleNode = item.title(item);
+  } else {
+    titleNode = item.title;
+  }
+  const onOpenClick = useCallback6(() => {
+    onExpand(item.key);
+  }, [onExpand, item.key]);
+  const onNodeClick = useCallback6(() => {
+    onClick?.(item);
+  }, [item]);
+  const isLeaf = item.children === void 0 || item.children?.length === 0;
+  return /* @__PURE__ */ jsx14(
+    Tree_default,
+    {
+      contentClassName: classNames9(
+        selected ? "bg-sentio-gray-100" : "",
+        item.key === SUFFIX_NODE_KEY ? "!px-0 !py-0" : "",
+        contentClassName
+      ),
+      className: item.key === SUFFIX_NODE_KEY ? "sticky left-0 inline-block !overflow-visible" : "group/tree",
+      showToggle: !isLeaf,
+      open: expandKeys.includes(item.key),
+      depth: item.depth,
+      content: titleNode,
+      onOpenClick,
+      onClick: onNodeClick,
+      expandIcon,
+      collapseIcon
+    },
+    item.key
+  );
+};
+var DEFAULT_ROW_HEIGHT = 35;
+function checkRootKeyDefault(v) {
+  return v === ROOT_KEY;
+}
+var FlatTree = (props) => {
+  const {
+    data,
+    defaultExpandAll,
+    virtual,
+    rowHeight = DEFAULT_ROW_HEIGHT,
+    height,
+    onClick,
+    suffixNode,
+    expandDepth,
+    contentClassName,
+    expandIcon,
+    collapseIcon,
+    scrollToKey,
+    scrollIntoView,
+    isRootKey = checkRootKeyDefault
+  } = props;
+  const dataRef = useRef4(null);
+  const selectedKeyRef = useRef4();
+  const [expandKeys, setExpandKeys] = useState8([]);
+  const [selectedKey, setSelectedKey] = useState8();
+  const parentRef = useRef4(null);
+  useEffect6(() => {
+    if (defaultExpandAll) {
+      const flatten = (data2) => {
+        return data2.reduce((acc, cur) => {
+          const { children, key } = cur;
+          acc.push(key);
+          if (children) {
+            acc.push(...flatten(children));
+          }
+          return acc;
+        }, []);
+      };
+      setExpandKeys(flatten(data || []));
+    } else {
+      setExpandKeys([]);
+    }
+  }, [data, defaultExpandAll]);
+  const flattenData = useMemo4(() => {
+    const expandKeysSet = new Set(expandKeys);
+    const flatten = (data2, depth = 0) => {
+      return data2.reduce((acc, cur) => {
+        const { children } = cur;
+        acc.push({ ...cur, depth });
+        if (children && expandKeysSet.has(cur.key)) {
+          acc.push(...flatten(children, depth + 1));
+        }
+        return acc;
+      }, []);
+    };
+    const list = flatten(data || []);
+    if (selectedKey && isValidElement(suffixNode)) {
+      const index = list.findIndex((item) => item.key === selectedKey);
+      if (index > -1) {
+        list.splice(index + 1, 0, {
+          key: SUFFIX_NODE_KEY,
+          title: suffixNode,
+          depth: 0
+        });
+      }
+    }
+    return list;
+  }, [data, expandKeys, selectedKey, suffixNode]);
+  dataRef.current = flattenData;
+  const estimateSize = useCallback6(
+    (index) => {
+      if (isNumber(rowHeight)) {
+        return rowHeight;
+      }
+      return rowHeight(index, dataRef.current?.[index]?.key === SUFFIX_NODE_KEY);
+    },
+    [rowHeight]
+  );
+  const rowVirtualizer = useVirtualizer({
+    count: flattenData.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize,
+    overscan: 10
+  });
+  const contextValue = useMemo4(() => {
+    return {
+      expandKeys,
+      onExpand: (key) => {
+        setExpandKeys((keys) => {
+          if (keys.includes(key)) {
+            return keys.filter((k) => k !== key);
+          } else {
+            return [...keys, key];
+          }
+        });
+      },
+      onClick: (data2) => {
+        if (onClick === void 0) {
+          return;
+        }
+        if (data2.key === SUFFIX_NODE_KEY || isRootKey(data2.key)) {
+          return;
+        }
+        setSelectedKey((key) => {
+          if (key === data2.key) {
+            selectedKeyRef.current = void 0;
+            return void 0;
+          }
+          selectedKeyRef.current = data2.key;
+          return data2.key;
+        });
+        onClick?.(data2);
+      }
+    };
+  }, [expandKeys, onClick]);
+  useEffect6(() => {
+    if (!isNumber(expandDepth)) {
+      return;
+    }
+    const flatten = (data2, currentDepth = 0) => {
+      return data2.reduce((acc, cur) => {
+        const { children, key } = cur;
+        if (currentDepth < expandDepth && children && children.length > 0) {
+          acc.push(key);
+          acc.push(...flatten(children, currentDepth + 1));
+        }
+        return acc;
+      }, []);
+    };
+    setExpandKeys(flatten(data || []));
+  }, [data, expandDepth]);
+  useEffect6(() => {
+    setSelectedKey(void 0);
+  }, [expandDepth]);
+  useEffect6(() => {
+    if (dataRef.current && scrollToKey) {
+      const index = dataRef.current.findIndex(
+        (item) => item.key === scrollToKey
+      );
+      if (index > -1) {
+        rowVirtualizer.scrollToIndex(index, {
+          align: "center",
+          behavior: "auto"
+        });
+      }
+    }
+  }, [scrollToKey]);
+  const visibleItems = rowVirtualizer.getVirtualItems();
+  const [isPending, startTransition] = useTransition();
+  const onScroll = useMemo4(() => {
+    if (!scrollIntoView) {
+      return () => {
+      };
+    }
+    const throttleFn = throttle(
+      () => {
+        startTransition(() => {
+          parentRef.current?.scrollIntoView(true);
+        });
+      },
+      1e3,
+      { trailing: true }
+    );
+    let lastScrollTop = 0;
+    return (evt) => {
+      const scrollTop = evt.currentTarget.scrollTop;
+      if (scrollTop > lastScrollTop) {
+        throttleFn();
+      }
+      lastScrollTop = scrollTop;
+    };
+  }, [scrollIntoView]);
+  return /* @__PURE__ */ jsx14(TreeContext.Provider, { value: contextValue, children: virtual ? /* @__PURE__ */ jsx14(
+    "div",
+    {
+      className: "overflow-auto",
+      ref: parentRef,
+      style: {
+        height
+      },
+      onScroll,
+      children: /* @__PURE__ */ jsx14(
+        "div",
+        {
+          style: {
+            height: `${rowVirtualizer.getTotalSize()}px`,
+            width: "100%",
+            position: "relative"
+          },
+          children: /* @__PURE__ */ jsx14(
+            "div",
+            {
+              className: "absolute left-0 top-0 w-max min-w-full",
+              style: {
+                transform: visibleItems?.[0]?.start ? `translateY(${visibleItems[0].start}px)` : void 0
+              },
+              children: rowVirtualizer.getVirtualItems().map((virtualItem) => /* @__PURE__ */ jsx14(
+                "div",
+                {
+                  className: dataRef.current[virtualItem.index].key === scrollToKey ? "bg-primary-100" : "",
+                  children: /* @__PURE__ */ jsx14(
+                    ControledTree,
+                    {
+                      item: dataRef.current[virtualItem.index],
+                      selected: selectedKey === dataRef.current[virtualItem.index].key,
+                      contentClassName,
+                      expandIcon,
+                      collapseIcon
+                    }
+                  )
+                },
+                virtualItem.key
+              ))
+            }
+          )
+        }
+      )
+    }
+  ) : /* @__PURE__ */ jsx14(Fragment4, { children: flattenData.map((item, index) => /* @__PURE__ */ jsx14(
+    "div",
+    {
+      className: item.key === scrollToKey ? "bg-primary-100" : "",
+      children: /* @__PURE__ */ jsx14(
+        ControledTree,
+        {
+          item,
+          selected: selectedKey === item.key,
+          contentClassName,
+          expandIcon,
+          collapseIcon
+        }
+      )
+    },
+    item.key || index
+  )) }) });
+};
+var FlatTree_default = memo3(FlatTree);
+
+// src/common/text/LinkifyText.tsx
+import { linkifyUrlsToHtml } from "linkify-urls";
+import DOMPurify from "dompurify";
+import { memo as memo4 } from "react";
+import { isString as isString2, isUndefined, isNull } from "lodash";
+import { jsx as jsx15 } from "react/jsx-runtime";
+if (DOMPurify?.addHook) {
+  DOMPurify.addHook("afterSanitizeAttributes", function(node) {
+    if ("target" in node) {
+      node.setAttribute("target", "_blank");
+    }
+    if (!node.hasAttribute("target") && (node.hasAttribute("xlink:href") || node.hasAttribute("href"))) {
+      node.setAttribute("xlink:show", "new");
+    }
+  });
+}
+var renderTextWithColoredNumbers = (text) => {
+  const numberRegex = /\b(\d+(?:\.\d+)?)\b/g;
+  return text.replace(numberRegex, (match, number, offset2) => {
+    const before = text.charAt(offset2 - 1);
+    const after = text.charAt(offset2 + match.length);
+    if (before === "x" || /[a-fA-F]/.test(before) || /[a-fA-F]/.test(after)) {
+      return match;
+    }
+    return `<span class="font-mono text-primary-500 dark:text-primary-700">${match}</span>`;
+  });
+};
+var LinkifyText = memo4(function LinkifyText2({
+  text,
+  className,
+  isHighlightNumbers
+}) {
+  if (isUndefined(text) || isNull(text)) {
+    return null;
+  }
+  if (!isString2(text)) {
+    if (text.toString) {
+      return /* @__PURE__ */ jsx15("span", { className, children: text.toString() });
+    }
+    return null;
+  }
+  const linkStr = linkifyUrlsToHtml(
+    isHighlightNumbers ? renderTextWithColoredNumbers(text) : text,
+    {
+      attributes: {
+        class: "text-primary hover:underline",
+        target: "_blank",
+        rel: "noopener noreferrer"
+      }
+    }
+  );
+  return /* @__PURE__ */ jsx15(
+    "span",
+    {
+      className,
+      dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(linkStr) }
+    }
+  );
+});
+
+// src/common/Empty.tsx
+import { useContext as useContext4 } from "react";
+
+// src/utils/extension-context.ts
+import { createContext as createContext3, useContext as useContext3 } from "react";
+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";
+var Empty = (props) => {
+  const parentFolder = useContext4(SvgFolderContext);
+  return /* @__PURE__ */ jsxs14("div", { className: "mx-auto w-fit", children: [
+    /* @__PURE__ */ jsx16(
+      "img",
+      {
+        src: props.src ?? `${parentFolder}/empty.svg`,
+        width: 88,
+        height: 88,
+        alt: "empty icon",
+        className: "mx-auto"
+      }
+    ),
+    /* @__PURE__ */ jsx16("span", { className: "text-ilabel text-gray", children: props.title || "No results found" })
+  ] });
+};
+
+// src/common/badge/StatusBadge.tsx
+import { cx as classNames10 } from "class-variance-authority";
+import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
+var StatusRole = /* @__PURE__ */ ((StatusRole2) => {
+  StatusRole2["Success"] = "success";
+  StatusRole2["Warning"] = "warning";
+  StatusRole2["Error"] = "error";
+  StatusRole2["Disabled"] = "disabled";
+  StatusRole2["Info"] = "info";
+  return StatusRole2;
+})(StatusRole || {});
+var VersionStateColors = {
+  ["success" /* Success */]: "bg-cyan-600/10 text-cyan-600",
+  ["warning" /* Warning */]: "bg-orange-600/10 text-orange-600",
+  ["error" /* Error */]: "bg-red-600/10 text-red-600",
+  ["disabled" /* Disabled */]: "bg-gray-600/10 text-gray-600",
+  ["info" /* Info */]: "bg-gray-300/10 text-gray-300"
+};
+function StatusBadge({
+  status,
+  className,
+  colorClasses: _colorClasses,
+  roundClasses,
+  bubble,
+  role
+}) {
+  const colorClasses = _colorClasses || VersionStateColors[role || "info" /* Info */];
+  return /* @__PURE__ */ jsxs15(
+    "span",
+    {
+      className: classNames10(
+        "text-ilabel inline-flex cursor-default items-center px-2 py-0.5 font-medium",
+        colorClasses,
+        roundClasses ? roundClasses : "rounded-full",
+        className
+      ),
+      "data-test-status": status,
+      children: [
+        bubble && /* @__PURE__ */ jsx17("div", { className: "mr-1.5 h-1.5 w-1.5 rounded-full bg-current" }),
+        status
+      ]
+    }
+  );
+}
+
+// src/common/HeaderToolsDropdown.tsx
+import { LuChevronDown, LuChevronUp } from "react-icons/lu";
+import { cx as classNames11 } from "class-variance-authority";
+import { jsx as jsx18 } from "react/jsx-runtime";
+var HeaderToolsToggleButton = ({
+  isOpen,
+  onClick,
+  className
+}) => {
+  return /* @__PURE__ */ jsx18(
+    "button",
+    {
+      onClick,
+      className: classNames11(
+        "flex items-center justify-center rounded-md p-1 transition-colors",
+        "dark:hover:bg-sentio-gray-100 hover:bg-gray-200",
+        "text-text-foreground",
+        className
+      ),
+      "aria-label": "Toggle tools",
+      children: isOpen ? /* @__PURE__ */ jsx18(LuChevronUp, { className: "h-4 w-4 transition-transform" }) : /* @__PURE__ */ jsx18(LuChevronDown, { className: "h-4 w-4 transition-transform" })
+    }
+  );
+};
+var HeaderToolsContent = ({
+  isOpen,
+  children,
+  className
+}) => {
+  if (!isOpen) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx18("div", { className: classNames11("w-full overflow-hidden", className), children });
+};
+
+// src/common/table/ResizeTable.tsx
+import {
+  forwardRef as forwardRef4,
+  memo as memo5,
+  useCallback as useCallback7,
+  useEffect as useEffect8,
+  useMemo as useMemo6,
+  useRef as useRef6,
+  useState as useState11
+} from "react";
+import {
+  useReactTable,
+  getCoreRowModel,
+  getSortedRowModel,
+  flexRender
+} from "@tanstack/react-table";
+import { useVirtualizer as useVirtualizer2 } from "@tanstack/react-virtual";
+import {
+  HiOutlineSortDescending,
+  HiOutlineSortAscending,
+  HiChevronDown
+} from "react-icons/hi";
+import { debounce, isEqual as isEqual2 } from "lodash";
+
+// src/common/menu/PopupMenuButton.tsx
+import {
+  Fragment as Fragment5,
+  useState as useState10,
+  useContext as useContext6,
+  useMemo as useMemo5,
+  useEffect as useEffect7,
+  useRef as useRef5
+} from "react";
+import { Menu as Menu2, Transition as Transition2 } from "@headlessui/react";
+import {
+  FloatingPortal as FloatingPortal2,
+  useFloating as useFloating3,
+  shift as shift3,
+  flip as flip3,
+  autoUpdate as autoUpdate3,
+  offset as FloatingOffset
+} from "@floating-ui/react";
+
+// src/common/menu/SubMenu.tsx
+import { useState as useState9, createContext as createContext4, useContext as useContext5 } from "react";
+import {
+  useFloating as useFloating2,
+  useHover as useHover2,
+  useInteractions as useInteractions2,
+  autoUpdate as autoUpdate2,
+  flip as flip2,
+  shift as shift2,
+  safePolygon as safePolygon2
+} from "@floating-ui/react";
+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";
+var COLOR_MAP = {
+  default: {
+    active: "bg-gray-100 text-text-foreground dark:bg-primary-600 dark:text-white",
+    default: "text-text-foreground",
+    disabled: "text-gray-400 cursor-not-allowed"
+  },
+  danger: {
+    active: "bg-red-100 text-red-600 dark:bg-red-600 dark:text-white",
+    default: "text-red-600",
+    disabled: "text-red-200 dark:text-red-600/40 cursor-not-allowed"
+  }
+};
+var MenuContext = createContext4({});
+var MenuItem = ({ item, onSelect, labelClassName }) => {
+  const { selectedKey } = useContext5(MenuContext);
+  return /* @__PURE__ */ jsx19(Menu.Item, { disabled: item.disabled, children: ({ active }) => {
+    if (item.items) {
+      return /* @__PURE__ */ jsx19(
+        SubMenuButton,
+        {
+          items: item.items,
+          icon: item.icon,
+          name: item.key,
+          label: item.label,
+          onSelect,
+          active
+        },
+        item.key
+      );
+    }
+    const buttonNode = /* @__PURE__ */ jsxs16(
+      "button",
+      {
+        onClick: (e) => onSelect?.(item.key, e, item),
+        className: cx3(
+          item.disabled ? COLOR_MAP[item.status || "default"].disabled : active ? COLOR_MAP[item.status || "default"].active : COLOR_MAP[item.status || "default"].default,
+          "text-ilabel font-ilabel flex w-full items-center px-4 py-1.5 transition-colors duration-200"
+        ),
+        disabled: item.disabled,
+        children: [
+          item.icon,
+          /* @__PURE__ */ jsx19(
+            "span",
+            {
+              className: cx3(
+                "flex-1 truncate text-left",
+                labelClassName
+              ),
+              children: item.label
+            }
+          ),
+          item.key === selectedKey ? /* @__PURE__ */ jsx19(HiCheck, { className: "icon-lg ml-2" }) : null
+        ]
+      }
+    );
+    if (item.disabled && item.disabledHint) {
+      return /* @__PURE__ */ jsx19(
+        PopoverTooltip,
+        {
+          text: /* @__PURE__ */ jsx19("span", { className: "text-icontent font-icontent text-gray cursor-auto", children: item.disabledHint }),
+          strategy: "fixed",
+          children: buttonNode
+        }
+      );
+    }
+    return buttonNode;
+  } });
+};
+var SubMenuButton = (props) => {
+  const {
+    label,
+    status,
+    items,
+    disabled,
+    onSelect,
+    active,
+    placement = "right-start",
+    buttonClass: buttonClass3
+  } = props;
+  const [open, setOpen] = useState9(false);
+  const { refs, floatingStyles, context } = useFloating2({
+    open,
+    onOpenChange: setOpen,
+    placement,
+    whileElementsMounted: autoUpdate2,
+    middleware: [flip2(), shift2()]
+  });
+  const { getReferenceProps, getFloatingProps } = useInteractions2([
+    useHover2(context, {
+      handleClose: safePolygon2()
+    })
+  ]);
+  return /* @__PURE__ */ jsxs16(
+    Menu,
+    {
+      as: "div",
+      className: cx3(
+        "group flex items-center",
+        "text-ilabel rounded-md",
+        disabled ? "pointer-events-none cursor-not-allowed text-gray-400" : "cursor-pointer"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs16(
+          Menu.Button,
+          {
+            className: cx3(
+              active || open ? COLOR_MAP[status || "default"].active : COLOR_MAP[status || "default"].default,
+              "text-ilabel font-ilabel flex w-full items-center px-4 py-1.5",
+              buttonClass3
+            ),
+            ref: refs.setReference,
+            onClick: (e) => {
+              e.preventDefault();
+              onSelect && onSelect(props.name, e);
+            },
+            ...getReferenceProps,
+            children: [
+              props.icon,
+              /* @__PURE__ */ jsx19("span", { className: "flex-shrink flex-grow text-left", children: label }),
+              /* @__PURE__ */ jsx19(
+                ChevronRightIcon,
+                {
+                  className: cx3(
+                    open ? "text-gray-500" : "text-gray-400",
+                    "h-4.5 w-4.5 flex-shrink-0  group-hover:text-gray-500",
+                    placement?.startsWith("bottom") ? "rotate-90" : ""
+                  ),
+                  "aria-label": "expand items"
+                }
+              )
+            ]
+          }
+        ),
+        open && /* @__PURE__ */ jsx19(
+          Menu.Items,
+          {
+            static: true,
+            ref: refs.setFloating,
+            style: floatingStyles,
+            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(
+                "div",
+                {
+                  className: "overflow-auto py-1",
+                  style: { maxHeight: "60vh" },
+                  children: items2.map((item) => /* @__PURE__ */ jsx19(MenuItem, { item, onSelect }, item.key))
+                },
+                i
+              ) : null
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/utils/nav-size-context.ts
+import { createContext as createContext5 } from "react";
+var NavSizeContext = createContext5({
+  small: true,
+  showLabel: true,
+  setSmall: (small) => {
+  },
+  setShowLabel: (showLabel) => {
+  }
+});
+
+// src/common/menu/PopupMenuButton.tsx
+import { Fragment as Fragment6, jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
+function PopupMenuButton({
+  buttonIcon,
+  items,
+  groupLabels,
+  onSelect,
+  ariaLabel,
+  header,
+  footer,
+  buttonClassName,
+  itemsClassName = "",
+  itemLabelClassName,
+  renderItem,
+  placement = "bottom-start",
+  offset: offset2 = 0,
+  portal = true,
+  width,
+  selectedKey,
+  onOpenCallback
+}) {
+  const [menuOpen, setMenuOpen] = useState10(false);
+  const { small } = useContext6(NavSizeContext);
+  const { refs, floatingStyles, context } = useFloating3({
+    open: menuOpen,
+    onOpenChange: setMenuOpen,
+    middleware: [FloatingOffset(offset2), flip3(), shift3()],
+    placement,
+    whileElementsMounted: autoUpdate3
+  });
+  const itemStyle = useMemo5(() => {
+    return {
+      width
+    };
+  }, [width]);
+  const onOpenCallbackRef = useRef5(onOpenCallback);
+  onOpenCallbackRef.current = onOpenCallback;
+  useEffect7(() => {
+    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, children: /* @__PURE__ */ jsx20(
+      Transition2,
+      {
+        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,
+          {
+            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
+            ]
+          }
+        )
+      }
+    ) }) });
+  }
+  return /* @__PURE__ */ jsx20(Menu2, { children: ({ open }) => {
+    setTimeout(() => {
+      setMenuOpen(open);
+    }, 0);
+    return /* @__PURE__ */ jsxs17(Fragment6, { children: [
+      /* @__PURE__ */ jsx20(
+        Menu2.Button,
+        {
+          className: cx3(
+            "text-gray w-fit px-1 hover:text-gray-500 active:text-gray-700",
+            buttonClassName
+          ),
+          "aria-label": ariaLabel,
+          ref: refs.setReference,
+          as: buttonIcon ? "div" : void 0,
+          children: typeof buttonIcon === "function" ? buttonIcon(menuOpen) : buttonIcon
+        }
+      ),
+      portal ? /* @__PURE__ */ jsx20(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(
+  "svg",
+  {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxs18("g", { clipPath: "url(#clip0_6869_7300)", children: [
+        /* @__PURE__ */ jsx21(
+          "path",
+          {
+            d: "M2.66666 8H9.33332",
+            stroke: "currentColor",
+            strokeWidth: "1.33333",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx21(
+          "path",
+          {
+            d: "M2.66666 8L5.33332 10.6667",
+            stroke: "currentColor",
+            strokeWidth: "1.33333",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx21(
+          "path",
+          {
+            d: "M2.66669 7.9987L5.33335 5.33203",
+            stroke: "currentColor",
+            strokeWidth: "1.33333",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx21(
+          "path",
+          {
+            d: "M13.3333 2.66797V13.3346",
+            stroke: "currentColor",
+            strokeWidth: "1.33333",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx21("defs", { children: /* @__PURE__ */ jsx21("clipPath", { id: "clip0_6869_7300", children: /* @__PURE__ */ jsx21("rect", { width: "16", height: "16", fill: "white" }) }) })
+    ]
+  }
+);
+var MoveRightIcon = (props) => /* @__PURE__ */ jsxs18(
+  "svg",
+  {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxs18("g", { clipPath: "url(#clip0_6869_7309)", children: [
+        /* @__PURE__ */ jsx21(
+          "path",
+          {
+            d: "M13.3333 8H6.66666",
+            stroke: "currentColor",
+            strokeWidth: "1.33333",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx21(
+          "path",
+          {
+            d: "M13.3333 8L10.6667 10.6667",
+            stroke: "currentColor",
+            strokeWidth: "1.33333",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx21(
+          "path",
+          {
+            d: "M13.3334 7.9987L10.6667 5.33203",
+            stroke: "currentColor",
+            strokeWidth: "1.33333",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx21(
+          "path",
+          {
+            d: "M2.66669 2.66797V13.3346",
+            stroke: "currentColor",
+            strokeWidth: "1.33333",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx21("defs", { children: /* @__PURE__ */ jsx21("clipPath", { id: "clip0_6869_7309", children: /* @__PURE__ */ jsx21("rect", { width: "16", height: "16", fill: "white" }) }) })
+    ]
+  }
+);
+var RenameIcon = (props) => /* @__PURE__ */ jsxs18(
+  "svg",
+  {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx21(
+        "path",
+        {
+          d: "M8 13.3281H14",
+          stroke: "currentColor",
+          strokeWidth: "1.33333",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      ),
+      /* @__PURE__ */ jsx21(
+        "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",
+          stroke: "currentColor",
+          strokeWidth: "1.33333",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    ]
+  }
+);
+var DeleteIcon = (props) => /* @__PURE__ */ jsxs18(
+  "svg",
+  {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxs18("g", { clipPath: "url(#clip0_6869_7344)", children: [
+        /* @__PURE__ */ jsx21(
+          "path",
+          {
+            d: "M2.66669 4.66797H13.3334",
+            stroke: "currentColor",
+            strokeWidth: "1.02222",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx21(
+          "path",
+          {
+            d: "M6.66669 7.33203V11.332",
+            stroke: "currentColor",
+            strokeWidth: "1.02222",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx21(
+          "path",
+          {
+            d: "M9.33331 7.33203V11.332",
+            stroke: "currentColor",
+            strokeWidth: "1.02222",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx21(
+          "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",
+            stroke: "currentColor",
+            strokeWidth: "1.02222",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx21(
+          "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",
+            stroke: "currentColor",
+            strokeWidth: "1.02222",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx21("defs", { children: /* @__PURE__ */ jsx21("clipPath", { id: "clip0_6869_7344", children: /* @__PURE__ */ jsx21("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";
+var reorder = (list, startIndex, endIndex) => {
+  const result = Array.from(list);
+  const [removed] = result.splice(startIndex, 1);
+  result.splice(endIndex, 0, removed);
+  return result;
+};
+function onPreventClick(e) {
+  e.stopPropagation();
+}
+var _ResizeTable = forwardRef4(function _ResizeTable2({
+  data,
+  columns,
+  columnResizeMode,
+  onClick,
+  height,
+  onFetchMore,
+  hasMore,
+  isFetching,
+  allowSort,
+  allowEditColumn,
+  allowResizeColumn,
+  state = {},
+  onStateChange,
+  onColumnRemove,
+  onColumnRename,
+  minSize,
+  manualSorting,
+  minWidth,
+  rowClassNameFn,
+  enableVirtualization = false,
+  estimatedRowHeight = 35,
+  overscan = 5
+}, tableContainerRef) {
+  const adjustedColumns = useMemo6(() => {
+    let totalWidth = 0;
+    const newColumns = columns.map((c) => {
+      const item = Object.assign({ minSize }, c);
+      totalWidth += item.size || item.minSize || 0;
+      return item;
+    });
+    if (minWidth && totalWidth < minWidth) {
+      const ratio = minWidth / totalWidth;
+      newColumns.forEach((c) => {
+        if (c.size) {
+          c.size = Math.floor(c.size * ratio);
+        } else if (c.minSize) {
+          c.size = Math.floor(c.minSize * ratio);
+        }
+      });
+    }
+    return newColumns;
+  }, [columns, minSize, minWidth]);
+  const [tableState, setTableState] = useState11(() => {
+    const initialState = {
+      pagination: {
+        pageIndex: 0,
+        pageSize: 10
+      },
+      ...state
+    };
+    return initialState;
+  });
+  const table = useReactTable({
+    data,
+    columns: adjustedColumns,
+    columnResizeMode,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: allowSort ? getSortedRowModel() : void 0,
+    state: tableState,
+    onStateChange: setTableState,
+    manualSorting
+  });
+  useEffect8(() => {
+    if (state && Object.keys(state).length > 0) {
+      setTableState((prev) => {
+        const newState = {
+          ...prev,
+          ...state,
+          pagination: prev.pagination || state.pagination || { pageIndex: 0, pageSize: 10 }
+        };
+        return isEqual2(prev, newState) ? prev : newState;
+      });
+    }
+  }, [state]);
+  const debounceStateChange = useMemo6(() => {
+    if (!onStateChange) return void 0;
+    return debounce(onStateChange, 500, {});
+  }, [onStateChange]);
+  useEffect8(() => {
+    debounceStateChange?.(tableState);
+  }, [debounceStateChange, tableState]);
+  const fetchMoreOnBottomReached = useMemo6(() => {
+    return debounce((containerRefElement) => {
+      if (containerRefElement) {
+        const { scrollHeight, scrollTop, clientHeight } = containerRefElement;
+        if (scrollHeight - scrollTop - clientHeight < 300 && !isFetching && hasMore) {
+          onFetchMore?.();
+        }
+      }
+    }, 500);
+  }, [onFetchMore, isFetching, hasMore]);
+  const tableContainerElementRef = useRef6(null);
+  useEffect8(() => {
+    if (tableContainerRef) {
+      if (typeof tableContainerRef === "function") {
+        tableContainerRef(tableContainerElementRef.current);
+      } else {
+        tableContainerRef.current = tableContainerElementRef.current;
+      }
+    }
+  }, [tableContainerRef]);
+  const rowVirtualizer = useVirtualizer2({
+    count: enableVirtualization ? table.getRowModel().rows.length : 0,
+    getScrollElement: () => tableContainerElementRef.current,
+    estimateSize: useCallback7(() => 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(
+    "div",
+    {
+      className: "overflow-auto",
+      style: height ? { height } : void 0,
+      ref: tableContainerElementRef,
+      onScroll: (e) => fetchMoreOnBottomReached(e.target),
+      children: /* @__PURE__ */ jsxs19(
+        "table",
+        {
+          className: "w-fit",
+          ...{
+            style: {
+              width: table.getCenterTotalSize()
+            }
+          },
+          children: [
+            /* @__PURE__ */ jsx22("thead", { className: "dark:bg-sentio-gray-100 sticky top-0 z-[1] bg-white", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx22(
+              "tr",
+              {
+                className: "relative flex w-fit cursor-pointer items-center border-b",
+                children: headerGroup.headers.map((header, i) => /* @__PURE__ */ jsxs19(
+                  "th",
+                  {
+                    colSpan: header.colSpan,
+                    style: {
+                      width: header.getSize()
+                    },
+                    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(
+                          header.column.columnDef.header,
+                          header.getContext()
+                        ) }),
+                        header.column.getCanSort() && allowSort ? /* @__PURE__ */ jsx22(
+                          "span",
+                          {
+                            className: cx3(
+                              header.column.getIsSorted() ? "hover:text-text-foreground visible hover:bg-gray-200" : "invisible",
+                              "ml-2 flex-none rounded px-1 py-0.5 text-gray-600 group-hover:visible group-focus:visible",
+                              "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" }) : ""
+                          }
+                        ) : null
+                      ] }),
+                      allowEditColumn !== false && /* @__PURE__ */ jsx22(
+                        "span",
+                        {
+                          className: "invisible inline-block group-hover/th:visible",
+                          onClick: onPreventClick,
+                          children: /* @__PURE__ */ jsx22(
+                            PopupMenuButton,
+                            {
+                              buttonClassName: "align-text-bottom",
+                              onSelect: (commandKey) => {
+                                const colOrder = headerGroup.headers.map(
+                                  (item) => item?.id
+                                );
+                                switch (commandKey) {
+                                  case "reorder.left":
+                                    table.setColumnOrder(
+                                      reorder(colOrder, i, i - 1)
+                                    );
+                                    break;
+                                  case "reorder.right":
+                                    table.setColumnOrder(
+                                      reorder(colOrder, i, i + 1)
+                                    );
+                                    break;
+                                  case "delete":
+                                    onColumnRemove?.(header.column.columnDef);
+                                    break;
+                                  default:
+                                    console.log(commandKey, "is not applied");
+                                }
+                              },
+                              buttonIcon: /* @__PURE__ */ jsx22(HiChevronDown, { className: "icon mr-2" }),
+                              items: [
+                                [
+                                  {
+                                    key: "reorder.left",
+                                    label: "Move column left",
+                                    icon: /* @__PURE__ */ jsx22(MoveLeftIcon, { className: "mr-2" }),
+                                    disabled: i === 0
+                                  },
+                                  {
+                                    key: "reorder.right",
+                                    label: "Move column right",
+                                    icon: /* @__PURE__ */ jsx22(MoveRightIcon, { className: "mr-2" }),
+                                    disabled: i === headerGroup.headers.length - 1
+                                  }
+                                ],
+                                ...onColumnRename ? [
+                                  [
+                                    {
+                                      key: "rename",
+                                      label: "Rename column",
+                                      icon: /* @__PURE__ */ jsx22(RenameIcon, { className: "mr-2" })
+                                    }
+                                  ]
+                                ] : [],
+                                ...!onColumnRemove ? [] : [
+                                  [
+                                    {
+                                      key: "delete",
+                                      label: "Remove column",
+                                      icon: /* @__PURE__ */ jsx22(DeleteIcon, { className: "mr-2" }),
+                                      status: "danger"
+                                    }
+                                  ]
+                                ]
+                              ]
+                            }
+                          )
+                        }
+                      ),
+                      header.column.getCanResize() ? /* @__PURE__ */ jsx22(
+                        "div",
+                        {
+                          onMouseDown: header.getResizeHandler(),
+                          onTouchStart: header.getResizeHandler(),
+                          className: cx3(
+                            `text-md hover:bg-primary-200/50 absolute right-0 top-0 inline-block flex
+                          h-full w-2 cursor-col-resize touch-none select-none items-center text-gray-400`
+                          ),
+                          style: {
+                            transform: columnResizeMode === "onEnd" && header.column.getIsResizing() ? `translateX(${table.getState().columnSizingInfo.deltaOffset}px)` : ""
+                          },
+                          onClick: (e) => e.stopPropagation(),
+                          children: "\u22EE"
+                        }
+                      ) : null
+                    ]
+                  },
+                  header.id
+                ))
+              },
+              headerGroup.id
+            )) }),
+            /* @__PURE__ */ jsxs19("tbody", { children: [
+              enableVirtualization && paddingTop > 0 && /* @__PURE__ */ jsx22("tr", { children: /* @__PURE__ */ jsx22("td", { style: { height: `${paddingTop}px` } }) }),
+              enableVirtualization ? virtualRows.map((virtualRow) => {
+                const row = table.getRowModel().rows[virtualRow.index];
+                return /* @__PURE__ */ jsx22(
+                  "tr",
+                  {
+                    "data-index": virtualRow.index,
+                    className: cx3(
+                      "hover:!bg-primary-50 dark:hover:!bg-sentio-gray-300 group flex w-fit items-center border-b",
+                      onClick ? "cursor-pointer" : "",
+                      rowClassNameFn ? rowClassNameFn(row) : ""
+                    ),
+                    children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx22(
+                      "td",
+                      {
+                        ...{
+                          style: {
+                            width: cell.column.getSize()
+                          }
+                        },
+                        onClick: () => onClick && onClick(row, cell),
+                        className: "text-ilabel dark:text-text-foreground-secondary truncate whitespace-nowrap py-2 pl-2 text-gray-600",
+                        children: flexRender(
+                          cell.column.columnDef.cell,
+                          cell.getContext()
+                        )
+                      },
+                      cell.id
+                    ))
+                  },
+                  row.id
+                );
+              }) : table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx22(
+                "tr",
+                {
+                  className: cx3(
+                    "hover:!bg-primary-50 dark:hover:!bg-sentio-gray-300 blinked group flex w-fit items-center border-b",
+                    onClick ? "cursor-pointer" : "",
+                    rowClassNameFn ? rowClassNameFn(row) : ""
+                  ),
+                  children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx22(
+                    "td",
+                    {
+                      ...{
+                        style: {
+                          width: cell.column.getSize()
+                        }
+                      },
+                      onClick: () => onClick && onClick(row, cell),
+                      className: "text-ilabel dark:text-text-foreground-secondary truncate whitespace-nowrap py-2 pl-2 text-gray-600",
+                      children: flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )
+                    },
+                    cell.id
+                  ))
+                },
+                row.id
+              )),
+              enableVirtualization && paddingBottom > 0 && /* @__PURE__ */ jsx22("tr", { children: /* @__PURE__ */ jsx22("td", { style: { height: `${paddingBottom}px` } }) }),
+              onFetchMore && /* @__PURE__ */ jsx22("tr", { children: /* @__PURE__ */ jsx22(
+                "td",
+                {
+                  colSpan: table.getHeaderGroups()[0].headers.length,
+                  className: "text-ilabel hover:bg-primary-50 cursor-pointer py-2 text-center text-gray-600",
+                  onClick: () => {
+                    if (isFetching) return;
+                    onFetchMore?.();
+                  },
+                  children: isFetching || hasMore ? /* @__PURE__ */ jsxs19("span", { className: "inline-flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsx22(
+                      IoReload,
+                      {
+                        className: cx3(
+                          "h-4 w-4",
+                          isFetching ? "animate-spin" : ""
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsx22("span", { children: "Loading..." })
+                  ] }) : "No more data"
+                }
+              ) })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+});
+var ResizeTable = memo5(_ResizeTable);
+
+// src/utils/number-format.ts
+import BigDecimal from "@sentio/bigdecimal";
+var BD = BigDecimal.clone({
+  EXPONENTIAL_AT: 1e9
+});
+function parseHex(hex = "0") {
+  try {
+    return BigInt(BD(hex).toString());
+  } catch {
+    return BigInt(0);
+  }
+}
+function getNumberWithDecimal(hex, decimal, asNumber) {
+  if (hex === void 0 || decimal === void 0) {
+    return null;
+  }
+  const bigInt = typeof hex === "bigint" ? hex : parseHex(hex);
+  const n = BD(bigInt.toString()).div(decimal > 0 ? BD(10).pow(decimal) : 1);
+  if (asNumber) {
+    return n.toNumber();
+  }
+  return n.toString();
+}
+
+// src/utils/use-mobile.ts
+import { useState as useState12, useEffect as useEffect9 } from "react";
+function useMobile(breakpoint = 768, defaultValue = false) {
+  const [isMobile, setIsMobile] = useState12(defaultValue);
+  useEffect9(() => {
+    const checkUserAgent = () => {
+      if (typeof window === "undefined") return false;
+      const userAgent = window.navigator.userAgent.toLowerCase();
+      const mobileKeywords = [
+        "android",
+        "iphone",
+        "ipad",
+        "ipod",
+        "blackberry",
+        "windows phone",
+        "mobile",
+        "webos",
+        "opera mini"
+      ];
+      return mobileKeywords.some((keyword) => userAgent.includes(keyword));
+    };
+    const checkScreenWidth = () => {
+      if (typeof window === "undefined") return false;
+      return window.innerWidth < breakpoint;
+    };
+    const checkTouchSupport = () => {
+      if (typeof window === "undefined") return false;
+      return "ontouchstart" in window || navigator.maxTouchPoints > 0;
+    };
+    const detectMobile = () => {
+      const isUserAgentMobile = checkUserAgent();
+      const isScreenSmall = checkScreenWidth();
+      const hasTouchSupport = checkTouchSupport();
+      if (isUserAgentMobile) return true;
+      if (isScreenSmall && hasTouchSupport) return true;
+      return isScreenSmall;
+    };
+    setIsMobile(detectMobile());
+    const handleResize = () => {
+      setIsMobile(detectMobile());
+    };
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [breakpoint]);
+  return isMobile;
+}
+export {
+  BD,
+  BarLoading,
+  BaseDialog,
+  NewButton as Button,
+  COLOR_MAP,
+  LuSquareX as CloseSquareO,
+  Collapse,
+  CopyButton,
+  CopyIcon,
+  CopySuccessIcon,
+  DarkModeContext,
+  DeleteIcon,
+  DisclosurePanel,
+  Empty,
+  LuEye as EyeO,
+  FlatTree,
+  HeaderToolsContent,
+  HeaderToolsToggleButton,
+  Input,
+  LinkifyText,
+  MenuContext,
+  MenuItem,
+  LuSquareMinus as MinusSquareO,
+  MoveLeftIcon,
+  MoveRightIcon,
+  NavSizeContext,
+  LuSquarePlus as PlusSquareO,
+  PopoverTooltip,
+  PopupMenuButton,
+  ROOT_KEY,
+  RadioSelect,
+  RenameIcon,
+  ResizeTable,
+  SUFFIX_NODE_KEY,
+  Select,
+  SpinLoading,
+  StatusBadge,
+  StatusRole,
+  SubMenuButton,
+  SvgFolderContext,
+  Switch,
+  cx3 as classNames,
+  getNumberWithDecimal,
+  parseHex,
+  useBoolean,
+  useDarkMode,
+  useDetectExtenstion,
+  useMobile
+};
+//# sourceMappingURL=index.mjs.map