@sentio/ui-core 0.1.0

package/dist/index.js

@@ -0,0 +1,3248 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  BD: () => BD,
+  BarLoading: () => BarLoading,
+  BaseDialog: () => BaseDialog,
+  Button: () => NewButton,
+  COLOR_MAP: () => COLOR_MAP,
+  CloseSquareO: () => import_lu2.LuSquareX,
+  Collapse: () => Collapse,
+  CopyButton: () => CopyButton,
+  CopyIcon: () => CopyIcon,
+  CopySuccessIcon: () => CopySuccessIcon,
+  DarkModeContext: () => DarkModeContext,
+  DeleteIcon: () => DeleteIcon,
+  DisclosurePanel: () => DisclosurePanel,
+  Empty: () => Empty,
+  EyeO: () => import_lu2.LuEye,
+  FlatTree: () => FlatTree,
+  HeaderToolsContent: () => HeaderToolsContent,
+  HeaderToolsToggleButton: () => HeaderToolsToggleButton,
+  Input: () => Input,
+  LinkifyText: () => LinkifyText,
+  MenuContext: () => MenuContext,
+  MenuItem: () => MenuItem,
+  MinusSquareO: () => import_lu2.LuSquareMinus,
+  MoveLeftIcon: () => MoveLeftIcon,
+  MoveRightIcon: () => MoveRightIcon,
+  NavSizeContext: () => NavSizeContext,
+  PlusSquareO: () => import_lu2.LuSquarePlus,
+  PopoverTooltip: () => PopoverTooltip,
+  PopupMenuButton: () => PopupMenuButton,
+  ROOT_KEY: () => ROOT_KEY,
+  RadioSelect: () => RadioSelect,
+  RenameIcon: () => RenameIcon,
+  ResizeTable: () => ResizeTable,
+  SUFFIX_NODE_KEY: () => SUFFIX_NODE_KEY,
+  Select: () => Select,
+  SpinLoading: () => SpinLoading,
+  StatusBadge: () => StatusBadge,
+  StatusRole: () => StatusRole,
+  SubMenuButton: () => SubMenuButton,
+  SvgFolderContext: () => SvgFolderContext,
+  Switch: () => Switch,
+  classNames: () => import_class_variance_authority10.cx,
+  getNumberWithDecimal: () => getNumberWithDecimal,
+  parseHex: () => parseHex,
+  useBoolean: () => useBoolean,
+  useDarkMode: () => useDarkMode,
+  useDetectExtenstion: () => useDetectExtenstion,
+  useMobile: () => useMobile
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/common/BarLoading.tsx
+var import_react_spinners = require("react-spinners");
+var import_react = require("react");
+var import_class_variance_authority = require("class-variance-authority");
+var import_jsx_runtime = require("react/jsx-runtime");
+function _BarLoading({
+  hint = "Loading Sentio",
+  loading = true,
+  className,
+  iconClassName,
+  width = 150,
+  gray
+}) {
+  if (loading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        className: (0, import_class_variance_authority.cx)(
+          "loading-container flex h-full flex-col justify-center overflow-hidden",
+          className
+        ),
+        children: [
+          hint && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "loading-text text-icontent text-gray my-2 text-center font-medium", children: hint }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex justify-center pt-1", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_react_spinners.BarLoader,
+            {
+              color: "#0756D5",
+              loading: true,
+              height: 5,
+              width,
+              cssOverride: {
+                borderRadius: "4px"
+              }
+            }
+          ) })
+        ]
+      }
+    );
+  }
+  return null;
+}
+var BarLoading = (0, import_react.memo)(_BarLoading);
+
+// src/common/SpinLoading.tsx
+var import_react_spinners2 = require("react-spinners");
+var import_class_variance_authority2 = require("class-variance-authority");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var SpinLoading = function Spinner(args) {
+  const {
+    loading = false,
+    children,
+    className,
+    size = 48,
+    showMask,
+    maskOpacity = 80
+  } = args;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: (0, import_class_variance_authority2.cx)("relative", className), children: [
+    showMask && loading && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "div",
+      {
+        className: (0, import_class_variance_authority2.cx)(
+          "absolute bottom-0 left-0 right-0 top-0 z-[1]",
+          maskOpacity ? `bg-white dark:bg-sentio-gray-100/${maskOpacity}` : "dark:bg-sentio-gray-100 bg-white"
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "absolute left-[50%] top-[50%] z-[1] -translate-y-6", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_react_spinners2.ClipLoader,
+      {
+        loading,
+        color: "#3B82F6",
+        size,
+        cssOverride: {
+          borderWidth: 3
+        }
+      }
+    ) }),
+    children
+  ] });
+};
+
+// src/common/CopyButton.tsx
+var import_react2 = require("react");
+var import_copy_to_clipboard = __toESM(require("copy-to-clipboard"));
+var import_class_variance_authority3 = require("class-variance-authority");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var CopyIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    strokeWidth: "2",
+    stroke: "currentColor",
+    ...props,
+    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "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__ */ (0, import_jsx_runtime3.jsx)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "rgb(var(--cyan-600))",
+    ...props,
+    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "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] = (0, import_react2.useState)(false);
+  const [isHovered, setIsHovered] = (0, import_react2.useState)(false);
+  const [isMobile, setIsMobile] = (0, import_react2.useState)(false);
+  const timeoutRef = (0, import_react2.useRef)(null);
+  const iconContainerRef = (0, import_react2.useRef)(null);
+  (0, import_react2.useEffect)(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth < 640);
+    };
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+    return () => window.removeEventListener("resize", checkMobile);
+  }, []);
+  const copyToClipboard = (0, import_react2.useCallback)((val) => {
+    (0, import_copy_to_clipboard.default)(val);
+    setCopied(true);
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    timeoutRef.current = setTimeout(() => {
+      setCopied(false);
+      timeoutRef.current = null;
+    }, 2e3);
+  }, []);
+  const onCopy = (0, import_react2.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 = (0, import_react2.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__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      className: (0, import_class_variance_authority3.cx)(
+        "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__ */ (0, import_jsx_runtime3.jsxs)(
+          "div",
+          {
+            ref: iconContainerRef,
+            className: (0, import_class_variance_authority3.cx)(
+              "icon-container inline-block overflow-hidden align-sub",
+              isPureComponent ? className : "",
+              copied ? "copied" : ""
+            ),
+            style: iconContainerStyle,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                CopyIcon,
+                {
+                  className: "icon-copy block cursor-pointer transition-all",
+                  width: size,
+                  height: size,
+                  style: { ...svgStyle, ...iconCopyStyle },
+                  onClick: onCopy
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                CopySuccessIcon,
+                {
+                  className: "icon-success block transition-all",
+                  width: size,
+                  height: size,
+                  style: { ...svgStyle, ...iconSuccessStyle }
+                }
+              )
+            ]
+          }
+        ),
+        placement === "left" && children
+      ]
+    }
+  );
+};
+
+// src/common/NewButton.tsx
+var import_react5 = require("react");
+
+// src/common/DivTooltip.tsx
+var import_react3 = __toESM(require("react"));
+var import_react4 = require("@floating-ui/react");
+var import_class_variance_authority4 = require("class-variance-authority");
+var import_lodash = require("lodash");
+var import_jsx_runtime4 = require("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 = (0, import_react3.useRef)(null);
+  const [open, setOpen] = (0, import_react3.useState)(false);
+  const [isVisible, setIsVisible] = (0, import_react3.useState)(false);
+  const timeoutRef = (0, import_react3.useRef)();
+  const {
+    x,
+    y,
+    refs,
+    strategy,
+    middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },
+    context,
+    placement
+  } = (0, import_react4.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: [
+      (0, import_react4.offset)(offsetOptions),
+      (0, import_react4.flip)(),
+      (0, import_react4.shift)(),
+      (0, import_react4.arrow)({ element: arrowRef, padding: 8 })
+    ],
+    strategy: propStrategy,
+    placement: placementOption,
+    whileElementsMounted: import_react4.autoUpdate
+  });
+  const {
+    delay = {
+      open: 500,
+      close: 0
+    }
+  } = (0, import_react4.useDelayGroup)(context);
+  const { getReferenceProps, getFloatingProps } = (0, import_react4.useInteractions)([
+    (0, import_react4.useHover)(context, {
+      handleClose: (0, import_react4.safePolygon)({
+        buffer: -Infinity
+      }),
+      delay
+    })
+  ]);
+  (0, import_react3.useEffect)(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+  if (!text)
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+      icon,
+      children
+    ] });
+  const Portal = usePortal ? import_react4.FloatingPortal : import_react3.default.Fragment;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: (0, import_class_variance_authority4.cx)("relative flex items-center", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "div",
+      {
+        ref: refs.setReference,
+        ...getReferenceProps(),
+        className: (0, import_class_variance_authority4.cx)(buttonClassName, open && activeButtonClassName),
+        children: [
+          icon,
+          children
+        ]
+      }
+    ),
+    (enableFadeAnimation ? isVisible : open) && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "_sentio_", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "div",
+      {
+        className: (0, import_class_variance_authority4.cx)(
+          "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__ */ (0, import_jsx_runtime4.jsx)(
+            "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"
+              }
+            }
+          ),
+          (0, import_lodash.isString)(text) ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "p",
+            {
+              className: (0, import_class_variance_authority4.cx)("w-max whitespace-pre-wrap", maxWidth),
+              children: text
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "div",
+            {
+              className: (0, import_class_variance_authority4.cx)(
+                "w-max overflow-auto",
+                maxWidth
+              ),
+              children: text
+            }
+          )
+        ]
+      }
+    ) }) })
+  ] });
+};
+
+// src/common/NewButton.tsx
+var import_class_variance_authority5 = require("class-variance-authority");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var buttonClass = (0, import_class_variance_authority5.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__ */ (0, import_jsx_runtime5.jsxs)("svg", { className: `h-5 w-5 animate-spin ${className}`, viewBox: "0 0 24 24", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "circle",
+      {
+        className: light ? "opacity-5" : "opacity-10",
+        cx: "12",
+        cy: "12",
+        r: "10",
+        stroke: "currentColor",
+        strokeWidth: "4"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "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 = (0, import_class_variance_authority5.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 = (0, import_class_variance_authority5.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 = (0, import_react5.useMemo)(() => {
+    let iconEl2 = null;
+    if (processing) {
+      iconEl2 = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        Proccessing,
+        {
+          className: (0, import_class_variance_authority5.cx)(pIconClass({ size }), role == "primary" ? "text-white" : ""),
+          light: role !== "primary"
+        }
+      );
+    } else if (icon) {
+      iconEl2 = (0, import_react5.cloneElement)(icon, { className: (0, import_class_variance_authority5.cx)(icon.props.className, iconClasses) });
+    }
+    return iconEl2;
+  }, [icon, iconClasses, processing, role]);
+  const cls = (0, import_class_variance_authority5.cx)(
+    className,
+    buttonClass({
+      size,
+      status,
+      role,
+      disabled,
+      position
+    })
+  );
+  const btn = /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "button",
+    {
+      title,
+      onClick,
+      type,
+      disabled: disabled || processing,
+      className: cls,
+      ref,
+      value,
+      suppressHydrationWarning: true,
+      id,
+      children: [
+        iconEl,
+        children
+      ]
+    }
+  );
+  if (disabled && disabledHint) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      PopoverTooltip,
+      {
+        usePortal: disabledHintPortal,
+        buttonClassName: disabledHintPortal ? "w-full" : "",
+        className: "text-gray",
+        text: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-sm text-gray-500", children: disabledHint }),
+        hideArrow: true,
+        children: btn
+      }
+    );
+  }
+  return btn;
+}
+var NewButton = (0, import_react5.forwardRef)(Button);
+var NewButton_default = NewButton;
+
+// src/common/dialog/BaseDialog.tsx
+var import_react6 = require("react");
+var import_react7 = require("@headlessui/react");
+var import_class_variance_authority6 = require("class-variance-authority");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var BaseZIndexContext = (0, import_react6.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__ */ (0, import_jsx_runtime6.jsx)(import_react7.Transition, { appear: true, as: import_react6.Fragment, show: open, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    import_react7.Dialog,
+    {
+      className: (0, import_class_variance_authority6.cx)("relative", "_sentio_"),
+      as: "div",
+      onClose,
+      initialFocus,
+      style: {
+        zIndex
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          import_react7.Transition.Child,
+          {
+            as: import_react6.Fragment,
+            enter: "ease-out duration-300",
+            enterFrom: "opacity-0",
+            enterTo: "opacity-100",
+            leave: "ease-in duration-200",
+            leaveFrom: "opacity-100",
+            leaveTo: "opacity-0",
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              "div",
+              {
+                className: (0, import_class_variance_authority6.cx)(
+                  "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__ */ (0, import_jsx_runtime6.jsx)("div", { className: "fixed inset-0 z-10 overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          import_react7.Transition.Child,
+          {
+            as: import_react6.Fragment,
+            enter: "ease-out duration-300",
+            enterFrom: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
+            enterTo: "opacity-100 translate-y-0 sm:scale-100",
+            leave: "ease-in duration-200",
+            leaveFrom: "opacity-100 translate-y-0 sm:scale-100",
+            leaveTo: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+              import_react7.Dialog.Panel,
+              {
+                "data-testid": "create-dashboard",
+                className: (0, import_class_variance_authority6.cx)(
+                  "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__ */ (0, import_jsx_runtime6.jsx)(
+                    import_react7.Dialog.Title,
+                    {
+                      as: "h3",
+                      className: (0, import_class_variance_authority6.cx)(
+                        "text-ilabel font-ilabel text-text-foreground pl-4",
+                        titleBorder && "border-border-color border-b pb-4"
+                      ),
+                      children: title
+                    }
+                  ) : null,
+                  children,
+                  footer ? footer : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+                    "div",
+                    {
+                      className: (0, import_class_variance_authority6.cx)(
+                        "flex items-center justify-between pt-4 ",
+                        footerBorder && "border-border-color border-t"
+                      ),
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                          "div",
+                          {
+                            className: "truncate px-4 text-sm font-semibold text-red-500",
+                            title: errorMessages || "",
+                            children: errorMessages || " "
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+                          "div",
+                          {
+                            className: (0, import_class_variance_authority6.cx)(
+                              `flex flex-row-reverse items-center gap-3 px-4`,
+                              buttonsClassName ?? ""
+                            ),
+                            children: [
+                              extraButtons,
+                              onOk && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(NewButton_default, { role: "primary", onClick: onOk, ...okProps, children: okText || "OK" }),
+                              onCancel && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(NewButton_default, { onClick: onCancel, ...cancelProps, children: cancelText || "Cancel" })
+                            ]
+                          }
+                        )
+                      ]
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        ) }) })
+      ]
+    }
+  ) });
+}
+var BaseDialog = (0, import_react6.memo)(_BaseDialog);
+
+// src/common/DisclosurePanel.tsx
+var import_class_variance_authority7 = require("class-variance-authority");
+var import_isFunction = __toESM(require("lodash/isFunction"));
+var import_react8 = require("react");
+var import_lu = require("react-icons/lu");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function DisclosurePanel({
+  title,
+  children,
+  defaultOpen,
+  className,
+  containerClassName,
+  iconClassName = "h-5 w-5",
+  titleClassName
+}) {
+  const [open, setOpen] = (0, import_react8.useState)(defaultOpen || false);
+  const toggle = (0, import_react8.useCallback)(() => {
+    setOpen((prev) => !prev);
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    "div",
+    {
+      className: containerClassName || "dark:bg-sentio-gray-200 w-full rounded bg-[#F6F8FA]",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+          "button",
+          {
+            className: (0, import_class_variance_authority7.cx)(
+              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__ */ (0, import_jsx_runtime7.jsx)(
+                import_lu.LuChevronRight,
+                {
+                  className: (0, import_class_variance_authority7.cx)(
+                    open ? "rotate-90 transform" : "",
+                    "mr-1 self-center transition-all",
+                    iconClassName
+                  )
+                }
+              ),
+              (0, import_isFunction.default)(title) ? title(open) : title
+            ]
+          }
+        ),
+        open && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: (0, import_class_variance_authority7.cx)("p-2", className), children })
+      ]
+    }
+  );
+}
+
+// src/common/Collapse.tsx
+var import_solid = require("@heroicons/react/20/solid");
+var import_class_variance_authority8 = require("class-variance-authority");
+
+// src/utils/use-boolean.ts
+var import_react9 = require("react");
+function useBoolean(defaultValue = false) {
+  const [value, setValue] = (0, import_react9.useState)(defaultValue);
+  const setTrue = (0, import_react9.useCallback)(() => setValue(true), []);
+  const setFalse = (0, import_react9.useCallback)(() => setValue(false), []);
+  const toggle = (0, import_react9.useCallback)(() => setValue((v) => !v), []);
+  return {
+    value,
+    setValue,
+    setTrue,
+    setFalse,
+    toggle
+  };
+}
+
+// src/common/Collapse.tsx
+var import_react10 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var Collapse = ({
+  title,
+  children,
+  className,
+  titleClassName,
+  defaultOpen = false,
+  iconClassName = "h-5 w-5"
+}) => {
+  const { toggle, value: visible, setTrue, setFalse } = useBoolean(defaultOpen);
+  (0, import_react10.useEffect)(() => {
+    if (defaultOpen) {
+      setTrue();
+    } else {
+      setFalse();
+    }
+  }, [defaultOpen, setTrue, setFalse]);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: (0, import_class_variance_authority8.cx)("space-y-2", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+      "span",
+      {
+        className: (0, import_class_variance_authority8.cx)(
+          "text-gray hover:text-primary active:text-primary-700 inline-flex cursor-pointer items-center gap-2",
+          titleClassName
+        ),
+        onClick: toggle,
+        children: [
+          title,
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            import_solid.ChevronDownIcon,
+            {
+              className: (0, import_class_variance_authority8.cx)(
+                "transition",
+                iconClassName,
+                visible ? "rotate-180" : ""
+              )
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "div",
+      {
+        className: (0, import_class_variance_authority8.cx)(
+          "overflow-hidden transition-all duration-200",
+          visible ? "max-h-[2000px] opacity-100" : "max-h-0 opacity-0"
+        ),
+        children
+      }
+    )
+  ] });
+};
+
+// src/common/Input.tsx
+var import_class_variance_authority9 = require("class-variance-authority");
+var import_solid2 = require("@heroicons/react/20/solid");
+var import_react11 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var inputContainerStyles = (0, import_class_variance_authority9.cva)(
+  "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 = (0, import_class_variance_authority9.cva)(
+  [
+    "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 = (0, import_class_variance_authority9.cva)("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 = (0, import_react11.forwardRef)(
+  function Input2(props, inputRef) {
+    const { className, error, errorClassName, size, ...rest } = props;
+    const containerClassName = inputContainerStyles({
+      size,
+      error: !!error,
+      readOnly: rest.disabled
+    });
+    const inputClassName = (0, import_class_variance_authority9.cx)(inputStyles({ size, error: !!error }), className);
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: containerClassName, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("input", { ...rest, ref: inputRef, className: inputClassName }),
+        error && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_solid2.ExclamationCircleIcon, { className: iconStyles({ size }) }) })
+      ] }),
+      error && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "mt-2 text-xs text-red-600", children: typeof error == "string" ? error : error.message })
+    ] });
+  }
+);
+
+// src/common/select/Radio.tsx
+var import_react12 = require("@headlessui/react");
+
+// src/utils/classnames.ts
+var import_class_variance_authority10 = require("class-variance-authority");
+
+// src/common/select/Radio.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function RadioSelect({
+  value,
+  onChange,
+  label,
+  labelClassName,
+  options,
+  vertical,
+  containerClassName
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react12.RadioGroup, { value, onChange, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react12.RadioGroup.Label, { className: "text-ilabel text-text-foreground mr-4 font-medium", children: [
+      label,
+      ":"
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      "div",
+      {
+        className: (0, import_class_variance_authority10.cx)(
+          "item-center",
+          vertical ? "flex flex-col gap-2" : "inline-flex gap-4",
+          containerClassName
+        ),
+        children: options.map(({ name, value: value2 }, index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react12.RadioGroup.Option, { value: value2, children: ({ checked }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "group/radio", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            "input",
+            {
+              readOnly: true,
+              type: "radio",
+              checked,
+              className: "border-sentio-gray-300 group-hover/radio:border-primary-500"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            "label",
+            {
+              className: (0, import_class_variance_authority10.cx)(
+                "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
+var import_react13 = require("react");
+var import_react14 = require("@headlessui/react");
+var import_class_variance_authority11 = require("class-variance-authority");
+var import_lodash2 = require("lodash");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var switchClass = (0, import_class_variance_authority11.cva)(
+  [
+    "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 = (0, import_class_variance_authority11.cva)(
+  "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 = (0, import_class_variance_authority11.cva)(
+  "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] = (0, import_react13.useState)(checked);
+  const onChange = (0, import_react13.useCallback)(() => {
+    setState((enabled2) => {
+      if ((0, import_lodash2.isFunction)(_onChange)) {
+        setTimeout(() => {
+          _onChange(!enabled2);
+        });
+      }
+      return !enabled2;
+    });
+  }, [_onChange]);
+  (0, import_react13.useEffect)(() => {
+    setState(checked);
+  }, [checked]);
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react14.Switch.Group, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+      import_react14.Switch,
+      {
+        checked: enabled,
+        onChange: onChange || setState,
+        className: switchClass({
+          enabled,
+          size,
+          disabled
+        }),
+        disabled,
+        children: [
+          srText && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "sr-only", children: srText }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: dotClass({
+                enabled,
+                size
+              })
+            }
+          )
+        ]
+      }
+    ),
+    label && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      import_react14.Switch.Label,
+      {
+        className: labelClass({
+          size,
+          disabled
+        }),
+        children: label
+      }
+    )
+  ] });
+}
+
+// src/common/select/Select.tsx
+var import_react15 = require("@headlessui/react");
+var import_solid3 = require("@heroicons/react/20/solid");
+var import_lodash3 = require("lodash");
+var import_class_variance_authority12 = require("class-variance-authority");
+var import_react16 = require("react");
+var import_isFunction2 = __toESM(require("lodash/isFunction"));
+var import_react_spinners3 = require("react-spinners");
+var import_react_laag = require("react-laag");
+var import_react_resize_detector = require("react-resize-detector");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var buttonClass2 = (0, import_class_variance_authority12.cva)(
+  [
+    "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 = (0, import_class_variance_authority12.cva)(["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 = (0, import_class_variance_authority12.cva)([], {
+  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 ((0, import_isFunction2.default)(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) => (0, import_lodash3.isEqual)(o.value, value));
+  const listRef = (0, import_react16.useRef)(null);
+  const [open, setOpen] = (0, import_react16.useState)(false);
+  const { width, ref } = (0, import_react_resize_detector.useResizeDetector)({
+    refreshMode: "debounce",
+    refreshRate: 100,
+    handleHeight: false
+  });
+  const baseZIndex = (0, import_react16.useContext)(BaseZIndexContext);
+  const { renderLayer, triggerProps, layerProps } = (0, import_react_laag.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 = (0, import_react16.useMemo)(() => {
+    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__ */ (0, import_jsx_runtime12.jsxs)(
+    import_react15.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: (0, import_class_variance_authority10.cx)(
+        "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__ */ (0, import_jsx_runtime12.jsx)(
+          import_react15.Listbox.Option,
+          {
+            value: null,
+            disabled: true,
+            className: optionClass({ disabled: true, size }),
+            children: noOptionsMessage ?? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("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__ */ (0, import_jsx_runtime12.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "text-gray px-3.5 py-1 text-xs font-medium", children: label }),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { children: options2.map(
+              (option, i) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                import_react15.Listbox.Option,
+                {
+                  value: option.value,
+                  disabled: option.disabled,
+                  className: ({ active }) => optionClass({
+                    disabled: option.disabled,
+                    size,
+                    active,
+                    selected: (0, import_lodash3.isEqual)(value, option.value)
+                  }),
+                  title: option.title,
+                  children: ({ selected, active }) => {
+                    if (renderOption) {
+                      return renderOption(option, { selected, active });
+                    }
+                    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                        "span",
+                        {
+                          className: (0, import_class_variance_authority10.cx)(
+                            selected ? "font-medium" : "font-normal",
+                            "text-ilabel block truncate"
+                          ),
+                          children: generateLabel(option.label, {
+                            selected,
+                            active
+                          })
+                        }
+                      ),
+                      selected ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                        "span",
+                        {
+                          className: (0, import_class_variance_authority10.cx)(
+                            "text-primary-600 absolute inset-y-0 right-0 flex items-center pr-2 dark:text-white"
+                          ),
+                          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                            import_solid3.CheckIcon,
+                            {
+                              className: iconClass2({ size }),
+                              "aria-hidden": "true"
+                            }
+                          )
+                        }
+                      ) : null
+                    ] });
+                  }
+                },
+                i
+              )
+            ) })
+          ] }, label);
+        }) : options.map((option, i) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          import_react15.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__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                  "span",
+                  {
+                    className: (0, import_class_variance_authority10.cx)(
+                      selected ? "font-medium" : "font-normal",
+                      "text-ilabel block truncate"
+                    ),
+                    children: generateLabel(option.label, { selected, active })
+                  }
+                ),
+                selected ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                  "span",
+                  {
+                    className: (0, import_class_variance_authority10.cx)(
+                      "text-primary-600 absolute inset-y-0 right-0 flex items-center pr-2 dark:text-white"
+                    ),
+                    children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                      import_solid3.CheckIcon,
+                      {
+                        className: iconClass2({ size }),
+                        "aria-hidden": "true"
+                      }
+                    )
+                  }
+                ) : null
+              ] });
+            }
+          },
+          i
+        )),
+        isFetchingMore && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          import_react15.Listbox.Option,
+          {
+            value: null,
+            disabled: true,
+            className: optionClass({ disabled: true, size }),
+            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex w-full items-center justify-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_spinners3.ClipLoader, { size: 16, color: "#A6C2F0" }),
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-gray/50 text-xs", children: "Loading more..." })
+            ] })
+          }
+        )
+      ]
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react15.Listbox, { value, onChange, disabled, children: ({ open: headlessOpen }) => {
+    if (headlessOpen !== open && asLayer) {
+      setOpen(headlessOpen);
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: (0, import_class_variance_authority10.cx)(className, "relative"), ref, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+        import_react15.Listbox.Button,
+        {
+          as: "div",
+          className: (0, import_class_variance_authority10.cx)(
+            buttonClass2({
+              open: headlessOpen,
+              size,
+              error: !!error,
+              disabled: !!disabled
+            }),
+            buttonClassName
+          ),
+          ...triggerProps,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "pr-4", children: selectedIndex > -1 ? generateLabel(options[selectedIndex].label, {}) : placeholder ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              "span",
+              {
+                className: (0, import_class_variance_authority10.cx)(
+                  "font-normal",
+                  error ? "text-red-400" : "text-gray-400"
+                ),
+                children: placeholder
+              }
+            ) : "" }),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              "button",
+              {
+                type: "button",
+                disabled,
+                className: (0, import_class_variance_authority10.cx)(
+                  "absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none"
+                ),
+                children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                  import_solid3.ChevronDownIcon,
+                  {
+                    className: iconClass2({ size, disabled: !!disabled })
+                  }
+                )
+              }
+            )
+          ]
+        }
+      ),
+      headlessOpen ? asLayer ? renderLayer(
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "div",
+          {
+            ...layerProps,
+            style: {
+              ...layerProps.style,
+              zIndex: Math.max(10, baseZIndex + 1),
+              minWidth: width
+            },
+            children: optionsElement
+          }
+        )
+      ) : optionsElement : null,
+      error && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "mt-2 text-xs font-medium text-red-600", children: typeof error == "string" ? error : error.message })
+    ] });
+  } });
+}
+
+// src/common/tree/FlatTree.tsx
+var import_react19 = require("react");
+
+// src/common/tree/Tree.tsx
+var import_react17 = require("react");
+
+// src/common/tree/TreeIcons.tsx
+var import_lu2 = require("react-icons/lu");
+
+// src/common/tree/Tree.tsx
+var import_class_variance_authority13 = require("class-variance-authority");
+var import_react18 = require("react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var Line = () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("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 = (0, import_react17.forwardRef)(function Tree({
+  open: defaultOpen,
+  content,
+  children,
+  depth = 0,
+  type,
+  contentClassName,
+  prefix,
+  suffix,
+  onClick,
+  onOpenClick,
+  showToggle,
+  className,
+  expandIcon = /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lu2.LuSquarePlus, { className: "h-[1em] w-[1em] align-middle" }),
+  collapseIcon = /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lu2.LuSquareMinus, { className: "h-[1em] w-[1em] align-middle" })
+}, ref) {
+  const [open, setOpen] = (0, import_react17.useState)(defaultOpen);
+  (0, import_react18.useEffect)(() => {
+    setOpen(defaultOpen);
+  }, [defaultOpen]);
+  const toggle = (0, import_react17.useCallback)(
+    (evt) => {
+      evt.stopPropagation();
+      if (onOpenClick) {
+        onOpenClick(!open);
+      } else {
+        setOpen((val) => {
+          return !val;
+        });
+      }
+    },
+    [open, onOpenClick]
+  );
+  const lineNodes = (0, import_react17.useMemo)(() => {
+    const lines = [];
+    for (let i = 0; i < depth; i++) {
+      lines.push(/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Line, {}, i));
+    }
+    return lines;
+  }, [depth]);
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    "div",
+    {
+      className: (0, import_class_variance_authority13.cx)(
+        "text-icontent font-icontent overflow-hidden text-ellipsis whitespace-nowrap align-middle",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+          "div",
+          {
+            ref,
+            className: (0, import_class_variance_authority13.cx)(
+              "flex items-center px-2 py-1 hover:bg-gray-100",
+              contentClassName
+            ),
+            onClick,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "inline-flex shrink-0 items-center self-stretch", children: lineNodes }),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "inline-flex shrink-0 items-center", children: children || showToggle ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                "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__ */ (0, import_jsx_runtime13.jsx)("span", { className: "mr-[19px] h-1 w-px" }) }),
+              type,
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "flex-1 align-middle", children: content })
+            ]
+          }
+        ),
+        prefix,
+        open ? children : null,
+        suffix
+      ]
+    }
+  );
+});
+
+// src/common/tree/FlatTree.tsx
+var import_react_virtual = require("@tanstack/react-virtual");
+var import_isNumber = __toESM(require("lodash/isNumber"));
+var import_class_variance_authority14 = require("class-variance-authority");
+var import_lodash4 = require("lodash");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var SUFFIX_NODE_KEY = "selectedKey_after";
+var ROOT_KEY = "root";
+var TreeContext = (0, import_react19.createContext)({
+  expandKeys: [],
+  onExpand: (key) => {
+    console.log(key);
+  }
+});
+var ControledTree = ({
+  item,
+  selected,
+  contentClassName,
+  expandIcon,
+  collapseIcon
+}) => {
+  const { expandKeys, onExpand, onClick } = (0, import_react19.useContext)(TreeContext);
+  let titleNode;
+  if (typeof item.title === "function") {
+    titleNode = item.title(item);
+  } else {
+    titleNode = item.title;
+  }
+  const onOpenClick = (0, import_react19.useCallback)(() => {
+    onExpand(item.key);
+  }, [onExpand, item.key]);
+  const onNodeClick = (0, import_react19.useCallback)(() => {
+    onClick?.(item);
+  }, [item]);
+  const isLeaf = item.children === void 0 || item.children?.length === 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    Tree_default,
+    {
+      contentClassName: (0, import_class_variance_authority14.cx)(
+        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 = (0, import_react19.useRef)(null);
+  const selectedKeyRef = (0, import_react19.useRef)();
+  const [expandKeys, setExpandKeys] = (0, import_react19.useState)([]);
+  const [selectedKey, setSelectedKey] = (0, import_react19.useState)();
+  const parentRef = (0, import_react19.useRef)(null);
+  (0, import_react19.useEffect)(() => {
+    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 = (0, import_react19.useMemo)(() => {
+    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 && (0, import_react19.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 = (0, import_react19.useCallback)(
+    (index) => {
+      if ((0, import_isNumber.default)(rowHeight)) {
+        return rowHeight;
+      }
+      return rowHeight(index, dataRef.current?.[index]?.key === SUFFIX_NODE_KEY);
+    },
+    [rowHeight]
+  );
+  const rowVirtualizer = (0, import_react_virtual.useVirtualizer)({
+    count: flattenData.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize,
+    overscan: 10
+  });
+  const contextValue = (0, import_react19.useMemo)(() => {
+    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]);
+  (0, import_react19.useEffect)(() => {
+    if (!(0, import_isNumber.default)(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]);
+  (0, import_react19.useEffect)(() => {
+    setSelectedKey(void 0);
+  }, [expandDepth]);
+  (0, import_react19.useEffect)(() => {
+    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] = (0, import_react19.useTransition)();
+  const onScroll = (0, import_react19.useMemo)(() => {
+    if (!scrollIntoView) {
+      return () => {
+      };
+    }
+    const throttleFn = (0, import_lodash4.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__ */ (0, import_jsx_runtime14.jsx)(TreeContext.Provider, { value: contextValue, children: virtual ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    "div",
+    {
+      className: "overflow-auto",
+      ref: parentRef,
+      style: {
+        height
+      },
+      onScroll,
+      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        "div",
+        {
+          style: {
+            height: `${rowVirtualizer.getTotalSize()}px`,
+            width: "100%",
+            position: "relative"
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            "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__ */ (0, import_jsx_runtime14.jsx)(
+                "div",
+                {
+                  className: dataRef.current[virtualItem.index].key === scrollToKey ? "bg-primary-100" : "",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                    ControledTree,
+                    {
+                      item: dataRef.current[virtualItem.index],
+                      selected: selectedKey === dataRef.current[virtualItem.index].key,
+                      contentClassName,
+                      expandIcon,
+                      collapseIcon
+                    }
+                  )
+                },
+                virtualItem.key
+              ))
+            }
+          )
+        }
+      )
+    }
+  ) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, { children: flattenData.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    "div",
+    {
+      className: item.key === scrollToKey ? "bg-primary-100" : "",
+      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        ControledTree,
+        {
+          item,
+          selected: selectedKey === item.key,
+          contentClassName,
+          expandIcon,
+          collapseIcon
+        }
+      )
+    },
+    item.key || index
+  )) }) });
+};
+var FlatTree_default = (0, import_react19.memo)(FlatTree);
+
+// src/common/text/LinkifyText.tsx
+var import_linkify_urls = require("linkify-urls");
+var import_dompurify = __toESM(require("dompurify"));
+var import_react20 = require("react");
+var import_lodash5 = require("lodash");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+if (import_dompurify.default?.addHook) {
+  import_dompurify.default.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 = (0, import_react20.memo)(function LinkifyText2({
+  text,
+  className,
+  isHighlightNumbers
+}) {
+  if ((0, import_lodash5.isUndefined)(text) || (0, import_lodash5.isNull)(text)) {
+    return null;
+  }
+  if (!(0, import_lodash5.isString)(text)) {
+    if (text.toString) {
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className, children: text.toString() });
+    }
+    return null;
+  }
+  const linkStr = (0, import_linkify_urls.linkifyUrlsToHtml)(
+    isHighlightNumbers ? renderTextWithColoredNumbers(text) : text,
+    {
+      attributes: {
+        class: "text-primary hover:underline",
+        target: "_blank",
+        rel: "noopener noreferrer"
+      }
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    "span",
+    {
+      className,
+      dangerouslySetInnerHTML: { __html: import_dompurify.default.sanitize(linkStr) }
+    }
+  );
+});
+
+// src/common/Empty.tsx
+var import_react22 = require("react");
+
+// src/utils/extension-context.ts
+var import_react21 = require("react");
+var SvgFolderContext = (0, import_react21.createContext)("");
+var useDetectExtenstion = () => {
+  const folderPath = (0, import_react21.useContext)(SvgFolderContext);
+  return Boolean(folderPath);
+};
+var DarkModeContext = (0, import_react21.createContext)(false);
+var useDarkMode = () => {
+  return (0, import_react21.useContext)(DarkModeContext);
+};
+
+// src/common/Empty.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var Empty = (props) => {
+  const parentFolder = (0, import_react22.useContext)(SvgFolderContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "mx-auto w-fit", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      "img",
+      {
+        src: props.src ?? `${parentFolder}/empty.svg`,
+        width: 88,
+        height: 88,
+        alt: "empty icon",
+        className: "mx-auto"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-ilabel text-gray", children: props.title || "No results found" })
+  ] });
+};
+
+// src/common/badge/StatusBadge.tsx
+var import_class_variance_authority15 = require("class-variance-authority");
+var import_jsx_runtime17 = require("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__ */ (0, import_jsx_runtime17.jsxs)(
+    "span",
+    {
+      className: (0, import_class_variance_authority15.cx)(
+        "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__ */ (0, import_jsx_runtime17.jsx)("div", { className: "mr-1.5 h-1.5 w-1.5 rounded-full bg-current" }),
+        status
+      ]
+    }
+  );
+}
+
+// src/common/HeaderToolsDropdown.tsx
+var import_lu3 = require("react-icons/lu");
+var import_class_variance_authority16 = require("class-variance-authority");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var HeaderToolsToggleButton = ({
+  isOpen,
+  onClick,
+  className
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    "button",
+    {
+      onClick,
+      className: (0, import_class_variance_authority16.cx)(
+        "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__ */ (0, import_jsx_runtime18.jsx)(import_lu3.LuChevronUp, { className: "h-4 w-4 transition-transform" }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lu3.LuChevronDown, { className: "h-4 w-4 transition-transform" })
+    }
+  );
+};
+var HeaderToolsContent = ({
+  isOpen,
+  children,
+  className
+}) => {
+  if (!isOpen) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: (0, import_class_variance_authority16.cx)("w-full overflow-hidden", className), children });
+};
+
+// src/common/table/ResizeTable.tsx
+var import_react30 = require("react");
+var import_react_table = require("@tanstack/react-table");
+var import_react_virtual2 = require("@tanstack/react-virtual");
+var import_hi2 = require("react-icons/hi");
+var import_lodash6 = require("lodash");
+
+// src/common/menu/PopupMenuButton.tsx
+var import_react27 = require("react");
+var import_react28 = require("@headlessui/react");
+var import_react29 = require("@floating-ui/react");
+
+// src/common/menu/SubMenu.tsx
+var import_react23 = require("react");
+var import_react24 = require("@floating-ui/react");
+var import_react25 = require("@headlessui/react");
+var import_hi = require("react-icons/hi");
+var import_solid4 = require("@heroicons/react/20/solid");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var 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 = (0, import_react23.createContext)({});
+var MenuItem = ({ item, onSelect, labelClassName }) => {
+  const { selectedKey } = (0, import_react23.useContext)(MenuContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react25.Menu.Item, { disabled: item.disabled, children: ({ active }) => {
+    if (item.items) {
+      return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        SubMenuButton,
+        {
+          items: item.items,
+          icon: item.icon,
+          name: item.key,
+          label: item.label,
+          onSelect,
+          active
+        },
+        item.key
+      );
+    }
+    const buttonNode = /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+      "button",
+      {
+        onClick: (e) => onSelect?.(item.key, e, item),
+        className: (0, import_class_variance_authority10.cx)(
+          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__ */ (0, import_jsx_runtime19.jsx)(
+            "span",
+            {
+              className: (0, import_class_variance_authority10.cx)(
+                "flex-1 truncate text-left",
+                labelClassName
+              ),
+              children: item.label
+            }
+          ),
+          item.key === selectedKey ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_hi.HiCheck, { className: "icon-lg ml-2" }) : null
+        ]
+      }
+    );
+    if (item.disabled && item.disabledHint) {
+      return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        PopoverTooltip,
+        {
+          text: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("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] = (0, import_react23.useState)(false);
+  const { refs, floatingStyles, context } = (0, import_react24.useFloating)({
+    open,
+    onOpenChange: setOpen,
+    placement,
+    whileElementsMounted: import_react24.autoUpdate,
+    middleware: [(0, import_react24.flip)(), (0, import_react24.shift)()]
+  });
+  const { getReferenceProps, getFloatingProps } = (0, import_react24.useInteractions)([
+    (0, import_react24.useHover)(context, {
+      handleClose: (0, import_react24.safePolygon)()
+    })
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+    import_react25.Menu,
+    {
+      as: "div",
+      className: (0, import_class_variance_authority10.cx)(
+        "group flex items-center",
+        "text-ilabel rounded-md",
+        disabled ? "pointer-events-none cursor-not-allowed text-gray-400" : "cursor-pointer"
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+          import_react25.Menu.Button,
+          {
+            className: (0, import_class_variance_authority10.cx)(
+              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__ */ (0, import_jsx_runtime19.jsx)("span", { className: "flex-shrink flex-grow text-left", children: label }),
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                import_solid4.ChevronRightIcon,
+                {
+                  className: (0, import_class_variance_authority10.cx)(
+                    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__ */ (0, import_jsx_runtime19.jsx)(
+          import_react25.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__ */ (0, import_jsx_runtime19.jsx)(
+                "div",
+                {
+                  className: "overflow-auto py-1",
+                  style: { maxHeight: "60vh" },
+                  children: items2.map((item) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(MenuItem, { item, onSelect }, item.key))
+                },
+                i
+              ) : null
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/utils/nav-size-context.ts
+var import_react26 = require("react");
+var NavSizeContext = (0, import_react26.createContext)({
+  small: true,
+  showLabel: true,
+  setSmall: (small) => {
+  },
+  setShowLabel: (showLabel) => {
+  }
+});
+
+// src/common/menu/PopupMenuButton.tsx
+var import_jsx_runtime20 = require("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] = (0, import_react27.useState)(false);
+  const { small } = (0, import_react27.useContext)(NavSizeContext);
+  const { refs, floatingStyles, context } = (0, import_react29.useFloating)({
+    open: menuOpen,
+    onOpenChange: setMenuOpen,
+    middleware: [(0, import_react29.offset)(offset2), (0, import_react29.flip)(), (0, import_react29.shift)()],
+    placement,
+    whileElementsMounted: import_react29.autoUpdate
+  });
+  const itemStyle = (0, import_react27.useMemo)(() => {
+    return {
+      width
+    };
+  }, [width]);
+  const onOpenCallbackRef = (0, import_react27.useRef)(onOpenCallback);
+  onOpenCallbackRef.current = onOpenCallback;
+  (0, import_react27.useEffect)(() => {
+    if (menuOpen) {
+      onOpenCallbackRef.current?.();
+    }
+  }, [menuOpen]);
+  let menuItems = null;
+  if (menuOpen && items.length > 0) {
+    menuItems = /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(MenuContext.Provider, { value: { selectedKey }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { ref: refs.setFloating, style: floatingStyles, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      import_react28.Transition,
+      {
+        as: import_react27.Fragment,
+        enter: "transition ease-out duration-100",
+        enterFrom: "transform opacity-0 scale-95",
+        enterTo: "transform opacity-100 scale-100",
+        leave: "transition ease-in duration-75",
+        leaveFrom: "transform opacity-100 scale-100",
+        leaveTo: "transform opacity-0 scale-95",
+        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+          import_react28.Menu.Items,
+          {
+            className: "dark:bg-sentio-gray-200 dark:divide-sentio-gray-400/50 z-10 mt-1 w-[80vw] origin-top cursor-pointer divide-y divide-gray-200 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:ring-gray-100 sm:w-64",
+            style: itemStyle,
+            children: [
+              header,
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: `${itemsClassName} divide-y`, children: items.map((items2, i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "py-1", children: [
+                groupLabels?.[i] ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "px-4 py-0.5 text-[10px] font-medium leading-[12px] text-gray-500", children: groupLabels[i] }) : null,
+                items2.map(
+                  (item) => renderItem ? renderItem(item) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                    MenuItem,
+                    {
+                      item,
+                      onSelect,
+                      labelClassName: itemLabelClassName
+                    },
+                    item.key
+                  )
+                )
+              ] }, i)) }),
+              footer
+            ]
+          }
+        )
+      }
+    ) }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react28.Menu, { children: ({ open }) => {
+    setTimeout(() => {
+      setMenuOpen(open);
+    }, 0);
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        import_react28.Menu.Button,
+        {
+          className: (0, import_class_variance_authority10.cx)(
+            "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__ */ (0, import_jsx_runtime20.jsx)(import_react29.FloatingPortal, { children: menuItems }) : menuItems
+    ] });
+  } });
+}
+
+// src/common/table/Icons.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var MoveLeftIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+  "svg",
+  {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("g", { clipPath: "url(#clip0_6869_7300)", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          "path",
+          {
+            d: "M2.66666 8H9.33332",
+            stroke: "currentColor",
+            strokeWidth: "1.33333",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          "path",
+          {
+            d: "M2.66666 8L5.33332 10.6667",
+            stroke: "currentColor",
+            strokeWidth: "1.33333",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          "path",
+          {
+            d: "M2.66669 7.9987L5.33335 5.33203",
+            stroke: "currentColor",
+            strokeWidth: "1.33333",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          "path",
+          {
+            d: "M13.3333 2.66797V13.3346",
+            stroke: "currentColor",
+            strokeWidth: "1.33333",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("clipPath", { id: "clip0_6869_7300", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("rect", { width: "16", height: "16", fill: "white" }) }) })
+    ]
+  }
+);
+var MoveRightIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+  "svg",
+  {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("g", { clipPath: "url(#clip0_6869_7309)", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          "path",
+          {
+            d: "M13.3333 8H6.66666",
+            stroke: "currentColor",
+            strokeWidth: "1.33333",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          "path",
+          {
+            d: "M13.3333 8L10.6667 10.6667",
+            stroke: "currentColor",
+            strokeWidth: "1.33333",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          "path",
+          {
+            d: "M13.3334 7.9987L10.6667 5.33203",
+            stroke: "currentColor",
+            strokeWidth: "1.33333",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          "path",
+          {
+            d: "M2.66669 2.66797V13.3346",
+            stroke: "currentColor",
+            strokeWidth: "1.33333",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("clipPath", { id: "clip0_6869_7309", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("rect", { width: "16", height: "16", fill: "white" }) }) })
+    ]
+  }
+);
+var RenameIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+  "svg",
+  {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        "path",
+        {
+          d: "M8 13.3281H14",
+          stroke: "currentColor",
+          strokeWidth: "1.33333",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        "path",
+        {
+          d: "M11 2.33609C11.2652 2.07087 11.6249 1.92188 12 1.92188C12.1857 1.92188 12.3696 1.95845 12.5412 2.02953C12.7128 2.1006 12.8687 2.20477 13 2.33609C13.1313 2.46741 13.2355 2.62331 13.3066 2.79489C13.3776 2.96647 13.4142 3.15037 13.4142 3.33609C13.4142 3.52181 13.3776 3.7057 13.3066 3.87728C13.2355 4.04886 13.1313 4.20477 13 4.33609L4.66667 12.6694L2 13.3361L2.66667 10.6694L11 2.33609Z",
+          stroke: "currentColor",
+          strokeWidth: "1.33333",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    ]
+  }
+);
+var DeleteIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+  "svg",
+  {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("g", { clipPath: "url(#clip0_6869_7344)", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          "path",
+          {
+            d: "M2.66669 4.66797H13.3334",
+            stroke: "currentColor",
+            strokeWidth: "1.02222",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          "path",
+          {
+            d: "M6.66669 7.33203V11.332",
+            stroke: "currentColor",
+            strokeWidth: "1.02222",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          "path",
+          {
+            d: "M9.33331 7.33203V11.332",
+            stroke: "currentColor",
+            strokeWidth: "1.02222",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          "path",
+          {
+            d: "M3.33331 4.66797L3.99998 12.668C3.99998 13.0216 4.14046 13.3607 4.3905 13.6108C4.64055 13.8608 4.97969 14.0013 5.33331 14.0013H10.6666C11.0203 14.0013 11.3594 13.8608 11.6095 13.6108C11.8595 13.3607 12 13.0216 12 12.668L12.6666 4.66797",
+            stroke: "currentColor",
+            strokeWidth: "1.02222",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          "path",
+          {
+            d: "M6 4.66667V2.66667C6 2.48986 6.07024 2.32029 6.19526 2.19526C6.32029 2.07024 6.48986 2 6.66667 2H9.33333C9.51014 2 9.67971 2.07024 9.80474 2.19526C9.92976 2.32029 10 2.48986 10 2.66667V4.66667",
+            stroke: "currentColor",
+            strokeWidth: "1.02222",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("clipPath", { id: "clip0_6869_7344", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("rect", { width: "16", height: "16", fill: "white" }) }) })
+    ]
+  }
+);
+
+// src/common/table/ResizeTable.tsx
+var import_io5 = require("react-icons/io5");
+var import_jsx_runtime22 = require("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 = (0, import_react30.forwardRef)(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 = (0, import_react30.useMemo)(() => {
+    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] = (0, import_react30.useState)(() => {
+    const initialState = {
+      pagination: {
+        pageIndex: 0,
+        pageSize: 10
+      },
+      ...state
+    };
+    return initialState;
+  });
+  const table = (0, import_react_table.useReactTable)({
+    data,
+    columns: adjustedColumns,
+    columnResizeMode,
+    getCoreRowModel: (0, import_react_table.getCoreRowModel)(),
+    getSortedRowModel: allowSort ? (0, import_react_table.getSortedRowModel)() : void 0,
+    state: tableState,
+    onStateChange: setTableState,
+    manualSorting
+  });
+  (0, import_react30.useEffect)(() => {
+    if (state && Object.keys(state).length > 0) {
+      setTableState((prev) => {
+        const newState = {
+          ...prev,
+          ...state,
+          pagination: prev.pagination || state.pagination || { pageIndex: 0, pageSize: 10 }
+        };
+        return (0, import_lodash6.isEqual)(prev, newState) ? prev : newState;
+      });
+    }
+  }, [state]);
+  const debounceStateChange = (0, import_react30.useMemo)(() => {
+    if (!onStateChange) return void 0;
+    return (0, import_lodash6.debounce)(onStateChange, 500, {});
+  }, [onStateChange]);
+  (0, import_react30.useEffect)(() => {
+    debounceStateChange?.(tableState);
+  }, [debounceStateChange, tableState]);
+  const fetchMoreOnBottomReached = (0, import_react30.useMemo)(() => {
+    return (0, import_lodash6.debounce)((containerRefElement) => {
+      if (containerRefElement) {
+        const { scrollHeight, scrollTop, clientHeight } = containerRefElement;
+        if (scrollHeight - scrollTop - clientHeight < 300 && !isFetching && hasMore) {
+          onFetchMore?.();
+        }
+      }
+    }, 500);
+  }, [onFetchMore, isFetching, hasMore]);
+  const tableContainerElementRef = (0, import_react30.useRef)(null);
+  (0, import_react30.useEffect)(() => {
+    if (tableContainerRef) {
+      if (typeof tableContainerRef === "function") {
+        tableContainerRef(tableContainerElementRef.current);
+      } else {
+        tableContainerRef.current = tableContainerElementRef.current;
+      }
+    }
+  }, [tableContainerRef]);
+  const rowVirtualizer = (0, import_react_virtual2.useVirtualizer)({
+    count: enableVirtualization ? table.getRowModel().rows.length : 0,
+    getScrollElement: () => tableContainerElementRef.current,
+    estimateSize: (0, import_react30.useCallback)(() => estimatedRowHeight, [estimatedRowHeight]),
+    overscan,
+    enabled: enableVirtualization
+  });
+  const virtualRows = enableVirtualization ? rowVirtualizer.getVirtualItems() : [];
+  const paddingTop = enableVirtualization && virtualRows.length > 0 ? virtualRows[0].start : 0;
+  const paddingBottom = enableVirtualization && virtualRows.length > 0 ? rowVirtualizer.getTotalSize() - (virtualRows[virtualRows.length - 1].start + virtualRows[virtualRows.length - 1].size) : 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    "div",
+    {
+      className: "overflow-auto",
+      style: height ? { height } : void 0,
+      ref: tableContainerElementRef,
+      onScroll: (e) => fetchMoreOnBottomReached(e.target),
+      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+        "table",
+        {
+          className: "w-fit",
+          ...{
+            style: {
+              width: table.getCenterTotalSize()
+            }
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("thead", { className: "dark:bg-sentio-gray-100 sticky top-0 z-[1] bg-white", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              "tr",
+              {
+                className: "relative flex w-fit cursor-pointer items-center border-b",
+                children: headerGroup.headers.map((header, i) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+                  "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__ */ (0, import_jsx_runtime22.jsxs)("span", { className: "flex w-full flex-1 overflow-hidden", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "flex-1 truncate", children: header.isPlaceholder ? null : (0, import_react_table.flexRender)(
+                          header.column.columnDef.header,
+                          header.getContext()
+                        ) }),
+                        header.column.getCanSort() && allowSort ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                          "span",
+                          {
+                            className: (0, import_class_variance_authority10.cx)(
+                              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__ */ (0, import_jsx_runtime22.jsx)(import_hi2.HiOutlineSortDescending, { className: "h-4 w-4" }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_hi2.HiOutlineSortAscending, { className: "h-4 w-4" }) : ""
+                          }
+                        ) : null
+                      ] }),
+                      allowEditColumn !== false && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                        "span",
+                        {
+                          className: "invisible inline-block group-hover/th:visible",
+                          onClick: onPreventClick,
+                          children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                            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__ */ (0, import_jsx_runtime22.jsx)(import_hi2.HiChevronDown, { className: "icon mr-2" }),
+                              items: [
+                                [
+                                  {
+                                    key: "reorder.left",
+                                    label: "Move column left",
+                                    icon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(MoveLeftIcon, { className: "mr-2" }),
+                                    disabled: i === 0
+                                  },
+                                  {
+                                    key: "reorder.right",
+                                    label: "Move column right",
+                                    icon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(MoveRightIcon, { className: "mr-2" }),
+                                    disabled: i === headerGroup.headers.length - 1
+                                  }
+                                ],
+                                ...onColumnRename ? [
+                                  [
+                                    {
+                                      key: "rename",
+                                      label: "Rename column",
+                                      icon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(RenameIcon, { className: "mr-2" })
+                                    }
+                                  ]
+                                ] : [],
+                                ...!onColumnRemove ? [] : [
+                                  [
+                                    {
+                                      key: "delete",
+                                      label: "Remove column",
+                                      icon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DeleteIcon, { className: "mr-2" }),
+                                      status: "danger"
+                                    }
+                                  ]
+                                ]
+                              ]
+                            }
+                          )
+                        }
+                      ),
+                      header.column.getCanResize() ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                        "div",
+                        {
+                          onMouseDown: header.getResizeHandler(),
+                          onTouchStart: header.getResizeHandler(),
+                          className: (0, import_class_variance_authority10.cx)(
+                            `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__ */ (0, import_jsx_runtime22.jsxs)("tbody", { children: [
+              enableVirtualization && paddingTop > 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { style: { height: `${paddingTop}px` } }) }),
+              enableVirtualization ? virtualRows.map((virtualRow) => {
+                const row = table.getRowModel().rows[virtualRow.index];
+                return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                  "tr",
+                  {
+                    "data-index": virtualRow.index,
+                    className: (0, import_class_variance_authority10.cx)(
+                      "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__ */ (0, import_jsx_runtime22.jsx)(
+                      "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: (0, import_react_table.flexRender)(
+                          cell.column.columnDef.cell,
+                          cell.getContext()
+                        )
+                      },
+                      cell.id
+                    ))
+                  },
+                  row.id
+                );
+              }) : table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                "tr",
+                {
+                  className: (0, import_class_variance_authority10.cx)(
+                    "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__ */ (0, import_jsx_runtime22.jsx)(
+                    "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: (0, import_react_table.flexRender)(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )
+                    },
+                    cell.id
+                  ))
+                },
+                row.id
+              )),
+              enableVirtualization && paddingBottom > 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { style: { height: `${paddingBottom}px` } }) }),
+              onFetchMore && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                "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__ */ (0, import_jsx_runtime22.jsxs)("span", { className: "inline-flex items-center gap-2", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                      import_io5.IoReload,
+                      {
+                        className: (0, import_class_variance_authority10.cx)(
+                          "h-4 w-4",
+                          isFetching ? "animate-spin" : ""
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: "Loading..." })
+                  ] }) : "No more data"
+                }
+              ) })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+});
+var ResizeTable = (0, import_react30.memo)(_ResizeTable);
+
+// src/utils/number-format.ts
+var import_bigdecimal = __toESM(require("@sentio/bigdecimal"));
+var BD = import_bigdecimal.default.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
+var import_react31 = require("react");
+function useMobile(breakpoint = 768, defaultValue = false) {
+  const [isMobile, setIsMobile] = (0, import_react31.useState)(defaultValue);
+  (0, import_react31.useEffect)(() => {
+    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;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BD,
+  BarLoading,
+  BaseDialog,
+  Button,
+  COLOR_MAP,
+  CloseSquareO,
+  Collapse,
+  CopyButton,
+  CopyIcon,
+  CopySuccessIcon,
+  DarkModeContext,
+  DeleteIcon,
+  DisclosurePanel,
+  Empty,
+  EyeO,
+  FlatTree,
+  HeaderToolsContent,
+  HeaderToolsToggleButton,
+  Input,
+  LinkifyText,
+  MenuContext,
+  MenuItem,
+  MinusSquareO,
+  MoveLeftIcon,
+  MoveRightIcon,
+  NavSizeContext,
+  PlusSquareO,
+  PopoverTooltip,
+  PopupMenuButton,
+  ROOT_KEY,
+  RadioSelect,
+  RenameIcon,
+  ResizeTable,
+  SUFFIX_NODE_KEY,
+  Select,
+  SpinLoading,
+  StatusBadge,
+  StatusRole,
+  SubMenuButton,
+  SvgFolderContext,
+  Switch,
+  classNames,
+  getNumberWithDecimal,
+  parseHex,
+  useBoolean,
+  useDarkMode,
+  useDetectExtenstion,
+  useMobile
+});
+//# sourceMappingURL=index.js.map