@sentio/ui-core 0.1.2 → 0.1.3

package/dist/index.js

@@ -93,9 +93,8 @@ function _BarLoading({
   hint = "Loading Sentio",
   loading = true,
   className,
-  iconClassName,
   width = 150,
-  gray
+  logo
 }) {
   if (loading) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -106,6 +105,7 @@ function _BarLoading({
           className
         ),
         children: [
+          logo,
           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,
@@ -128,10 +128,11 @@ function _BarLoading({
 var BarLoading = (0, import_react.memo)(_BarLoading);
 
 // src/common/SpinLoading.tsx
+var import_react2 = __toESM(require("react"));
 var import_react_spinners2 = require("react-spinners");
 var import_class_variance_authority2 = require("class-variance-authority");
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var SpinLoading = function Spinner(args) {
+var SpinLoading = import_react2.default.forwardRef(function Spinner(args, ref) {
   const {
     loading = false,
     children,
@@ -140,7 +141,7 @@ var SpinLoading = function Spinner(args) {
     showMask,
     maskOpacity = 80
   } = args;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: (0, import_class_variance_authority2.cx)("relative", className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { ref, className: (0, import_class_variance_authority2.cx)("relative", className), children: [
     showMask && loading && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       "div",
       {
@@ -163,10 +164,10 @@ var SpinLoading = function Spinner(args) {
     ) }),
     children
   ] });
-};
+});
 
 // src/common/CopyButton.tsx
-var import_react2 = require("react");
+var import_react3 = 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");
@@ -216,12 +217,12 @@ var CopyButton = ({
   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 [copied, setCopied] = (0, import_react3.useState)(false);
+  const [isHovered, setIsHovered] = (0, import_react3.useState)(false);
+  const [isMobile, setIsMobile] = (0, import_react3.useState)(false);
+  const timeoutRef = (0, import_react3.useRef)(null);
+  const iconContainerRef = (0, import_react3.useRef)(null);
+  (0, import_react3.useEffect)(() => {
     const checkMobile = () => {
       setIsMobile(window.innerWidth < 640);
     };
@@ -229,7 +230,7 @@ var CopyButton = ({
     window.addEventListener("resize", checkMobile);
     return () => window.removeEventListener("resize", checkMobile);
   }, []);
-  const copyToClipboard = (0, import_react2.useCallback)((val) => {
+  const copyToClipboard = (0, import_react3.useCallback)((val) => {
     (0, import_copy_to_clipboard.default)(val);
     setCopied(true);
     if (timeoutRef.current) {
@@ -240,7 +241,7 @@ var CopyButton = ({
       timeoutRef.current = null;
     }, 2e3);
   }, []);
-  const onCopy = (0, import_react2.useCallback)(
+  const onCopy = (0, import_react3.useCallback)(
     (e) => {
       const target = e.target;
       if (target.nodeName.toLowerCase() === "a" && target.getAttribute("href")) {
@@ -266,7 +267,7 @@ var CopyButton = ({
     },
     [copied, text, copyToClipboard]
   );
-  const handleEventProxy = (0, import_react2.useCallback)(
+  const handleEventProxy = (0, import_react3.useCallback)(
     (e) => {
       if (children) {
         onCopy(e);
@@ -350,11 +351,11 @@ var CopyButton = ({
 };
 
 // src/common/NewButton.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 
 // src/common/DivTooltip.tsx
-var import_react3 = __toESM(require("react"));
-var import_react4 = require("@floating-ui/react");
+var import_react4 = __toESM(require("react"));
+var import_react5 = 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");
@@ -374,10 +375,10 @@ var PopoverTooltip = ({
   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 arrowRef = (0, import_react4.useRef)(null);
+  const [open, setOpen] = (0, import_react4.useState)(false);
+  const [isVisible, setIsVisible] = (0, import_react4.useState)(false);
+  const timeoutRef = (0, import_react4.useRef)();
   const {
     x,
     y,
@@ -386,7 +387,7 @@ var PopoverTooltip = ({
     middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },
     context,
     placement
-  } = (0, import_react4.useFloating)({
+  } = (0, import_react5.useFloating)({
     open,
     onOpenChange: (newOpen) => {
       setOpen(newOpen);
@@ -406,30 +407,30 @@ var PopoverTooltip = ({
       }
     },
     middleware: [
-      (0, import_react4.offset)(offsetOptions),
-      (0, import_react4.flip)(),
-      (0, import_react4.shift)(),
-      (0, import_react4.arrow)({ element: arrowRef, padding: 8 })
+      (0, import_react5.offset)(offsetOptions),
+      (0, import_react5.flip)(),
+      (0, import_react5.shift)(),
+      (0, import_react5.arrow)({ element: arrowRef, padding: 8 })
     ],
     strategy: propStrategy,
     placement: placementOption,
-    whileElementsMounted: import_react4.autoUpdate
+    whileElementsMounted: import_react5.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)({
+  } = (0, import_react5.useDelayGroup)(context);
+  const { getReferenceProps, getFloatingProps } = (0, import_react5.useInteractions)([
+    (0, import_react5.useHover)(context, {
+      handleClose: (0, import_react5.safePolygon)({
         buffer: -Infinity
       }),
       delay
     })
   ]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     return () => {
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
@@ -441,7 +442,7 @@ var PopoverTooltip = ({
       icon,
       children
     ] });
-  const Portal = usePortal ? import_react4.FloatingPortal : import_react3.default.Fragment;
+  const Portal = usePortal ? import_react5.FloatingPortal : import_react4.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",
@@ -681,7 +682,7 @@ function Button({
   id
 }, ref) {
   const iconClasses = iconClass({ size, disabled });
-  const iconEl = (0, import_react5.useMemo)(() => {
+  const iconEl = (0, import_react6.useMemo)(() => {
     let iconEl2 = null;
     if (processing) {
       iconEl2 = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
@@ -692,7 +693,7 @@ function Button({
         }
       );
     } else if (icon) {
-      iconEl2 = (0, import_react5.cloneElement)(icon, { className: (0, import_class_variance_authority5.cx)(icon.props.className, iconClasses) });
+      iconEl2 = (0, import_react6.cloneElement)(icon, { className: (0, import_class_variance_authority5.cx)(icon.props.className, iconClasses) });
     }
     return iconEl2;
   }, [icon, iconClasses, processing, role]);
@@ -739,15 +740,15 @@ function Button({
   }
   return btn;
 }
-var NewButton = (0, import_react5.forwardRef)(Button);
+var NewButton = (0, import_react6.forwardRef)(Button);
 var NewButton_default = NewButton;
 
 // src/common/dialog/BaseDialog.tsx
-var import_react6 = require("react");
-var import_react7 = require("@headlessui/react");
+var import_react7 = require("react");
+var import_react8 = 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);
+var BaseZIndexContext = (0, import_react7.createContext)(10);
 var _BaseDialog = ({
   title,
   open,
@@ -770,8 +771,8 @@ var _BaseDialog = ({
   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.jsx)(
-    import_react7.Dialog,
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react8.Transition, { appear: true, as: import_react7.Fragment, show: open, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    import_react8.Dialog,
     {
       className: (0, import_class_variance_authority6.cx)("relative", "_sentio_"),
       as: "div",
@@ -782,9 +783,9 @@ var _BaseDialog = ({
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(BaseZIndexContext.Provider, { value: zIndex, children: [
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-          import_react7.Transition.Child,
+          import_react8.Transition.Child,
           {
-            as: import_react6.Fragment,
+            as: import_react7.Fragment,
             enter: "ease-out duration-300",
             enterFrom: "opacity-0",
             enterTo: "opacity-100",
@@ -803,9 +804,9 @@ var _BaseDialog = ({
           }
         ),
         /* @__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,
+          import_react8.Transition.Child,
           {
-            as: import_react6.Fragment,
+            as: import_react7.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",
@@ -813,7 +814,7 @@ var _BaseDialog = ({
             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,
+              import_react8.Dialog.Panel,
               {
                 "data-testid": "create-dashboard",
                 className: (0, import_class_variance_authority6.cx)(
@@ -822,7 +823,7 @@ var _BaseDialog = ({
                 ),
                 children: [
                   title ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-                    import_react7.Dialog.Title,
+                    import_react8.Dialog.Title,
                     {
                       as: "h3",
                       className: (0, import_class_variance_authority6.cx)(
@@ -875,10 +876,10 @@ var _BaseDialog = ({
     }
   ) });
 };
-var BaseDialog = (0, import_react6.memo)(_BaseDialog);
+var BaseDialog = (0, import_react7.memo)(_BaseDialog);
 
 // src/common/DisclosurePanel.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_class_variance_authority7 = require("class-variance-authority");
 var import_isFunction = __toESM(require("lodash/isFunction"));
 var import_lu = require("react-icons/lu");
@@ -892,8 +893,8 @@ var DisclosurePanel = ({
   iconClassName = "h-5 w-5",
   titleClassName
 }) => {
-  const [open, setOpen] = (0, import_react8.useState)(defaultOpen || false);
-  const toggle = (0, import_react8.useCallback)(() => {
+  const [open, setOpen] = (0, import_react9.useState)(defaultOpen || false);
+  const toggle = (0, import_react9.useCallback)(() => {
     setOpen((prev) => !prev);
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
@@ -937,12 +938,12 @@ 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");
+var import_react10 = 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), []);
+  const [value, setValue] = (0, import_react10.useState)(defaultValue);
+  const setTrue = (0, import_react10.useCallback)(() => setValue(true), []);
+  const setFalse = (0, import_react10.useCallback)(() => setValue(false), []);
+  const toggle = (0, import_react10.useCallback)(() => setValue((v) => !v), []);
   return {
     value,
     setValue,
@@ -953,7 +954,7 @@ function useBoolean(defaultValue = false) {
 }
 
 // src/common/Collapse.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var Collapse = ({
   title,
@@ -964,7 +965,7 @@ var Collapse = ({
   iconClassName = "h-5 w-5"
 }) => {
   const { toggle, value: visible, setTrue, setFalse } = useBoolean(defaultOpen);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (defaultOpen) {
       setTrue();
     } else {
@@ -1014,7 +1015,7 @@ var Collapse = ({
 // 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_react12 = 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",
@@ -1080,7 +1081,7 @@ var iconStyles = (0, import_class_variance_authority9.cva)("text-red-500", {
     size: "md"
   }
 });
-var Input = (0, import_react11.forwardRef)(
+var Input = (0, import_react12.forwardRef)(
   function Input2(props, inputRef) {
     const { className, error, errorClassName, size, ...rest } = props;
     const containerClassName = inputContainerStyles({
@@ -1100,7 +1101,7 @@ var Input = (0, import_react11.forwardRef)(
 );
 
 // src/common/select/Radio.tsx
-var import_react12 = require("@headlessui/react");
+var import_react13 = require("@headlessui/react");
 
 // src/utils/classnames.ts
 var import_class_variance_authority10 = require("class-variance-authority");
@@ -1116,8 +1117,8 @@ function RadioSelect({
   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: [
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react13.RadioGroup, { value, onChange, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react13.RadioGroup.Label, { className: "text-ilabel text-text-foreground mr-4 font-medium", children: [
       label,
       ":"
     ] }),
@@ -1129,7 +1130,7 @@ function RadioSelect({
           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: [
+        children: options.map(({ name, value: value2 }, index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react13.RadioGroup.Option, { value: value2, children: ({ checked }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "group/radio", children: [
           /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             "input",
             {
@@ -1157,8 +1158,8 @@ function RadioSelect({
 }
 
 // src/common/select/Switch.tsx
-var import_react13 = require("react");
-var import_react14 = require("@headlessui/react");
+var import_react14 = require("react");
+var import_react15 = 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");
@@ -1259,8 +1260,8 @@ function Switch({
   disabled,
   label
 }) {
-  const [enabled, setState] = (0, import_react13.useState)(checked);
-  const onChange = (0, import_react13.useCallback)(() => {
+  const [enabled, setState] = (0, import_react14.useState)(checked);
+  const onChange = (0, import_react14.useCallback)(() => {
     setState((enabled2) => {
       if ((0, import_lodash2.isFunction)(_onChange)) {
         setTimeout(() => {
@@ -1270,12 +1271,12 @@ function Switch({
       return !enabled2;
     });
   }, [_onChange]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     setState(checked);
   }, [checked]);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react14.Switch.Group, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react15.Switch.Group, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-      import_react14.Switch,
+      import_react15.Switch,
       {
         checked: enabled,
         onChange: onChange || setState,
@@ -1301,7 +1302,7 @@ function Switch({
       }
     ),
     label && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-      import_react14.Switch.Label,
+      import_react15.Switch.Label,
       {
         className: labelClass({
           size,
@@ -1314,11 +1315,11 @@ function Switch({
 }
 
 // src/common/select/Select.tsx
-var import_react15 = require("@headlessui/react");
+var import_react16 = 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_react17 = require("react");
 var import_isFunction2 = __toESM(require("lodash/isFunction"));
 var import_react_spinners3 = require("react-spinners");
 var import_react_laag = require("react-laag");
@@ -1434,14 +1435,14 @@ function Select({
   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 listRef = (0, import_react17.useRef)(null);
+  const [open, setOpen] = (0, import_react17.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 baseZIndex = (0, import_react17.useContext)(BaseZIndexContext);
   const { renderLayer, triggerProps, layerProps } = (0, import_react_laag.useLayer)({
     isOpen: open,
     auto: true,
@@ -1451,7 +1452,7 @@ function Select({
     triggerOffset: 4,
     onOutsideClick: () => setOpen(false)
   });
-  const grouped = (0, import_react16.useMemo)(() => {
+  const grouped = (0, import_react17.useMemo)(() => {
     if (!groupedOptions || !options || options.length === 0) {
       return options;
     }
@@ -1471,7 +1472,7 @@ function Select({
     }, []);
   }, [groupedOptions, groupedOrder, options]);
   const optionsElement = /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-    import_react15.Listbox.Options,
+    import_react16.Listbox.Options,
     {
       ref: listRef,
       onScroll: () => {
@@ -1490,7 +1491,7 @@ function Select({
       ),
       children: [
         !options || options.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-          import_react15.Listbox.Option,
+          import_react16.Listbox.Option,
           {
             value: null,
             disabled: true,
@@ -1506,7 +1507,7 @@ function Select({
             /* @__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,
+                import_react16.Listbox.Option,
                 {
                   value: option.value,
                   disabled: option.disabled,
@@ -1558,7 +1559,7 @@ function Select({
             ) })
           ] }, label);
         }) : options.map((option, i) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-          import_react15.Listbox.Option,
+          import_react16.Listbox.Option,
           {
             value: option.value,
             disabled: option.disabled,
@@ -1605,7 +1606,7 @@ function Select({
           i
         )),
         isFetchingMore && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-          import_react15.Listbox.Option,
+          import_react16.Listbox.Option,
           {
             value: null,
             disabled: true,
@@ -1619,13 +1620,13 @@ function Select({
       ]
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react15.Listbox, { value, onChange, disabled, children: ({ open: headlessOpen }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react16.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,
+        import_react16.Listbox.Button,
         {
           as: "div",
           className: (0, import_class_variance_authority10.cx)(
@@ -1688,22 +1689,22 @@ function Select({
 }
 
 // src/common/tree/FlatTree.tsx
-var import_react19 = require("react");
+var import_react20 = require("react");
 
 // src/common/tree/Tree.tsx
-var import_react17 = require("react");
+var import_react18 = 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_react19 = 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({
+var Tree_default = (0, import_react18.forwardRef)(function Tree({
   open: defaultOpen,
   content,
   children,
@@ -1719,11 +1720,11 @@ var Tree_default = (0, import_react17.forwardRef)(function Tree({
   expandIcon = /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lu2.LuSquarePlus, { className: "h-4 w-4 align-middle" }),
   collapseIcon = /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lu2.LuSquareMinus, { className: "h-4 w-4 align-middle" })
 }, ref) {
-  const [open, setOpen] = (0, import_react17.useState)(defaultOpen);
-  (0, import_react18.useEffect)(() => {
+  const [open, setOpen] = (0, import_react18.useState)(defaultOpen);
+  (0, import_react19.useEffect)(() => {
     setOpen(defaultOpen);
   }, [defaultOpen]);
-  const toggle = (0, import_react17.useCallback)(
+  const toggle = (0, import_react18.useCallback)(
     (evt) => {
       evt.stopPropagation();
       if (onOpenClick) {
@@ -1736,7 +1737,7 @@ var Tree_default = (0, import_react17.forwardRef)(function Tree({
     },
     [open, onOpenClick]
   );
-  const lineNodes = (0, import_react17.useMemo)(() => {
+  const lineNodes = (0, import_react18.useMemo)(() => {
     const lines = [];
     for (let i = 0; i < depth; i++) {
       lines.push(/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Line, {}, i));
@@ -1791,7 +1792,7 @@ 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)({
+var TreeContext = (0, import_react20.createContext)({
   expandKeys: [],
   onExpand: (key) => {
     console.log(key);
@@ -1804,17 +1805,17 @@ var ControledTree = ({
   expandIcon,
   collapseIcon
 }) => {
-  const { expandKeys, onExpand, onClick } = (0, import_react19.useContext)(TreeContext);
+  const { expandKeys, onExpand, onClick } = (0, import_react20.useContext)(TreeContext);
   let titleNode;
   if (typeof item.title === "function") {
     titleNode = item.title(item);
   } else {
     titleNode = item.title;
   }
-  const onOpenClick = (0, import_react19.useCallback)(() => {
+  const onOpenClick = (0, import_react20.useCallback)(() => {
     onExpand(item.key);
   }, [onExpand, item.key]);
-  const onNodeClick = (0, import_react19.useCallback)(() => {
+  const onNodeClick = (0, import_react20.useCallback)(() => {
     onClick?.(item);
   }, [item]);
   const isLeaf = item.children === void 0 || item.children?.length === 0;
@@ -1860,12 +1861,12 @@ var FlatTree = (props) => {
     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)(() => {
+  const dataRef = (0, import_react20.useRef)(null);
+  const selectedKeyRef = (0, import_react20.useRef)();
+  const [expandKeys, setExpandKeys] = (0, import_react20.useState)([]);
+  const [selectedKey, setSelectedKey] = (0, import_react20.useState)();
+  const parentRef = (0, import_react20.useRef)(null);
+  (0, import_react20.useEffect)(() => {
     if (defaultExpandAll) {
       const flatten = (data2) => {
         return data2.reduce((acc, cur) => {
@@ -1882,7 +1883,7 @@ var FlatTree = (props) => {
       setExpandKeys([]);
     }
   }, [data, defaultExpandAll]);
-  const flattenData = (0, import_react19.useMemo)(() => {
+  const flattenData = (0, import_react20.useMemo)(() => {
     const expandKeysSet = new Set(expandKeys);
     const flatten = (data2, depth = 0) => {
       return data2.reduce((acc, cur) => {
@@ -1895,7 +1896,7 @@ var FlatTree = (props) => {
       }, []);
     };
     const list = flatten(data || []);
-    if (selectedKey && (0, import_react19.isValidElement)(suffixNode)) {
+    if (selectedKey && (0, import_react20.isValidElement)(suffixNode)) {
       const index = list.findIndex((item) => item.key === selectedKey);
       if (index > -1) {
         list.splice(index + 1, 0, {
@@ -1908,7 +1909,7 @@ var FlatTree = (props) => {
     return list;
   }, [data, expandKeys, selectedKey, suffixNode]);
   dataRef.current = flattenData;
-  const estimateSize = (0, import_react19.useCallback)(
+  const estimateSize = (0, import_react20.useCallback)(
     (index) => {
       if ((0, import_isNumber.default)(rowHeight)) {
         return rowHeight;
@@ -1923,7 +1924,7 @@ var FlatTree = (props) => {
     estimateSize,
     overscan: 10
   });
-  const contextValue = (0, import_react19.useMemo)(() => {
+  const contextValue = (0, import_react20.useMemo)(() => {
     return {
       expandKeys,
       onExpand: (key) => {
@@ -1954,7 +1955,7 @@ var FlatTree = (props) => {
       }
     };
   }, [expandKeys, onClick]);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (!(0, import_isNumber.default)(expandDepth)) {
       return;
     }
@@ -1970,10 +1971,10 @@ var FlatTree = (props) => {
     };
     setExpandKeys(flatten(data || []));
   }, [data, expandDepth]);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     setSelectedKey(void 0);
   }, [expandDepth]);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (dataRef.current && scrollToKey) {
       const index = dataRef.current.findIndex(
         (item) => item.key === scrollToKey
@@ -1987,8 +1988,8 @@ var FlatTree = (props) => {
     }
   }, [scrollToKey]);
   const visibleItems = rowVirtualizer.getVirtualItems();
-  const [isPending, startTransition] = (0, import_react19.useTransition)();
-  const onScroll = (0, import_react19.useMemo)(() => {
+  const [isPending, startTransition] = (0, import_react20.useTransition)();
+  const onScroll = (0, import_react20.useMemo)(() => {
     if (!scrollIntoView) {
       return () => {
       };
@@ -2075,12 +2076,12 @@ var FlatTree = (props) => {
     item.key || index
   )) }) });
 };
-var FlatTree_default = (0, import_react19.memo)(FlatTree);
+var FlatTree_default = (0, import_react20.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_react21 = require("react");
 var import_lodash5 = require("lodash");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 if (import_dompurify.default?.addHook) {
@@ -2104,7 +2105,7 @@ var renderTextWithColoredNumbers = (text) => {
     return `<span class="font-mono text-primary-500 dark:text-primary-700">${match}</span>`;
   });
 };
-var LinkifyText = (0, import_react20.memo)(function LinkifyText2({
+var LinkifyText = (0, import_react21.memo)(function LinkifyText2({
   text,
   className,
   isHighlightNumbers
@@ -2138,24 +2139,24 @@ var LinkifyText = (0, import_react20.memo)(function LinkifyText2({
 });
 
 // src/common/Empty.tsx
-var import_react22 = require("react");
+var import_react23 = require("react");
 
 // src/utils/extension-context.ts
-var import_react21 = require("react");
-var SvgFolderContext = (0, import_react21.createContext)("");
+var import_react22 = require("react");
+var SvgFolderContext = (0, import_react22.createContext)("");
 var useDetectExtenstion = () => {
-  const folderPath = (0, import_react21.useContext)(SvgFolderContext);
+  const folderPath = (0, import_react22.useContext)(SvgFolderContext);
   return Boolean(folderPath);
 };
-var DarkModeContext = (0, import_react21.createContext)(false);
+var DarkModeContext = (0, import_react22.createContext)(false);
 var useDarkMode = () => {
-  return (0, import_react21.useContext)(DarkModeContext);
+  return (0, import_react22.useContext)(DarkModeContext);
 };
 
 // src/common/Empty.tsx
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var Empty = (props) => {
-  const parentFolder = (0, import_react22.useContext)(SvgFolderContext);
+  const parentFolder = (0, import_react23.useContext)(SvgFolderContext);
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "mx-auto w-fit", children: [
     /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       "img",
@@ -2252,21 +2253,21 @@ var HeaderToolsContent = ({
 };
 
 // src/common/table/ResizeTable.tsx
-var import_react30 = require("react");
+var import_react31 = 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");
+var import_react28 = require("react");
+var import_react29 = require("@headlessui/react");
+var import_react30 = 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_react24 = require("react");
+var import_react25 = require("@floating-ui/react");
+var import_react26 = 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");
@@ -2282,10 +2283,10 @@ var COLOR_MAP = {
     disabled: "text-red-200 dark:text-red-600/40 cursor-not-allowed"
   }
 };
-var MenuContext = (0, import_react23.createContext)({});
+var MenuContext = (0, import_react24.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 }) => {
+  const { selectedKey } = (0, import_react24.useContext)(MenuContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react26.Menu.Item, { disabled: item.disabled, children: ({ active }) => {
     if (item.items) {
       return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         SubMenuButton,
@@ -2349,21 +2350,21 @@ var SubMenuButton = (props) => {
     placement = "right-start",
     buttonClass: buttonClass3
   } = props;
-  const [open, setOpen] = (0, import_react23.useState)(false);
-  const { refs, floatingStyles, context } = (0, import_react24.useFloating)({
+  const [open, setOpen] = (0, import_react24.useState)(false);
+  const { refs, floatingStyles, context } = (0, import_react25.useFloating)({
     open,
     onOpenChange: setOpen,
     placement,
-    whileElementsMounted: import_react24.autoUpdate,
-    middleware: [(0, import_react24.flip)(), (0, import_react24.shift)()]
+    whileElementsMounted: import_react25.autoUpdate,
+    middleware: [(0, import_react25.flip)(), (0, import_react25.shift)()]
   });
-  const { getReferenceProps, getFloatingProps } = (0, import_react24.useInteractions)([
-    (0, import_react24.useHover)(context, {
-      handleClose: (0, import_react24.safePolygon)()
+  const { getReferenceProps, getFloatingProps } = (0, import_react25.useInteractions)([
+    (0, import_react25.useHover)(context, {
+      handleClose: (0, import_react25.safePolygon)()
     })
   ]);
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
-    import_react25.Menu,
+    import_react26.Menu,
     {
       as: "div",
       className: (0, import_class_variance_authority10.cx)(
@@ -2373,7 +2374,7 @@ var SubMenuButton = (props) => {
       ),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
-          import_react25.Menu.Button,
+          import_react26.Menu.Button,
           {
             className: (0, import_class_variance_authority10.cx)(
               active || open ? COLOR_MAP[status || "default"].active : COLOR_MAP[status || "default"].default,
@@ -2404,7 +2405,7 @@ var SubMenuButton = (props) => {
           }
         ),
         open && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-          import_react25.Menu.Items,
+          import_react26.Menu.Items,
           {
             static: true,
             ref: refs.setFloating,
@@ -2430,8 +2431,8 @@ var SubMenuButton = (props) => {
 };
 
 // src/utils/nav-size-context.ts
-var import_react26 = require("react");
-var NavSizeContext = (0, import_react26.createContext)({
+var import_react27 = require("react");
+var NavSizeContext = (0, import_react27.createContext)({
   small: true,
   showLabel: true,
   setSmall: (small) => {
@@ -2461,23 +2462,23 @@ function PopupMenuButton({
   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)({
+  const [menuOpen, setMenuOpen] = (0, import_react28.useState)(false);
+  const { small } = (0, import_react28.useContext)(NavSizeContext);
+  const { refs, floatingStyles, context } = (0, import_react30.useFloating)({
     open: menuOpen,
     onOpenChange: setMenuOpen,
-    middleware: [(0, import_react29.offset)(offset2), (0, import_react29.flip)(), (0, import_react29.shift)()],
+    middleware: [(0, import_react30.offset)(offset2), (0, import_react30.flip)(), (0, import_react30.shift)()],
     placement,
-    whileElementsMounted: import_react29.autoUpdate
+    whileElementsMounted: import_react30.autoUpdate
   });
-  const itemStyle = (0, import_react27.useMemo)(() => {
+  const itemStyle = (0, import_react28.useMemo)(() => {
     return {
       width
     };
   }, [width]);
-  const onOpenCallbackRef = (0, import_react27.useRef)(onOpenCallback);
+  const onOpenCallbackRef = (0, import_react28.useRef)(onOpenCallback);
   onOpenCallbackRef.current = onOpenCallback;
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     if (menuOpen) {
       onOpenCallbackRef.current?.();
     }
@@ -2485,9 +2486,9 @@ function PopupMenuButton({
   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,
+      import_react29.Transition,
       {
-        as: import_react27.Fragment,
+        as: import_react28.Fragment,
         enter: "transition ease-out duration-100",
         enterFrom: "transform opacity-0 scale-95",
         enterTo: "transform opacity-100 scale-100",
@@ -2495,7 +2496,7 @@ function PopupMenuButton({
         leaveFrom: "transform opacity-100 scale-100",
         leaveTo: "transform opacity-0 scale-95",
         children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-          import_react28.Menu.Items,
+          import_react29.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,
@@ -2522,13 +2523,13 @@ function PopupMenuButton({
       }
     ) }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react28.Menu, { children: ({ open }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react29.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,
+        import_react29.Menu.Button,
         {
           className: (0, import_class_variance_authority10.cx)(
             "text-gray w-fit px-1 hover:text-gray-500 active:text-gray-700",
@@ -2540,7 +2541,7 @@ function PopupMenuButton({
           children: typeof buttonIcon === "function" ? buttonIcon(menuOpen) : buttonIcon
         }
       ),
-      portal ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react29.FloatingPortal, { children: menuItems }) : menuItems
+      portal ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react30.FloatingPortal, { children: menuItems }) : menuItems
     ] });
   } });
 }
@@ -2771,7 +2772,7 @@ var reorder = (list, startIndex, endIndex) => {
 function onPreventClick(e) {
   e.stopPropagation();
 }
-var _ResizeTable = (0, import_react30.forwardRef)(function _ResizeTable2({
+var _ResizeTable = (0, import_react31.forwardRef)(function _ResizeTable2({
   data,
   columns,
   columnResizeMode,
@@ -2795,7 +2796,7 @@ var _ResizeTable = (0, import_react30.forwardRef)(function _ResizeTable2({
   estimatedRowHeight = 35,
   overscan = 5
 }, tableContainerRef) {
-  const adjustedColumns = (0, import_react30.useMemo)(() => {
+  const adjustedColumns = (0, import_react31.useMemo)(() => {
     let totalWidth = 0;
     const newColumns = columns.map((c) => {
       const item = Object.assign({ minSize }, c);
@@ -2814,7 +2815,7 @@ var _ResizeTable = (0, import_react30.forwardRef)(function _ResizeTable2({
     }
     return newColumns;
   }, [columns, minSize, minWidth]);
-  const [tableState, setTableState] = (0, import_react30.useState)(() => {
+  const [tableState, setTableState] = (0, import_react31.useState)(() => {
     const initialState = {
       pagination: {
         pageIndex: 0,
@@ -2834,7 +2835,7 @@ var _ResizeTable = (0, import_react30.forwardRef)(function _ResizeTable2({
     onStateChange: setTableState,
     manualSorting
   });
-  (0, import_react30.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     if (state && Object.keys(state).length > 0) {
       setTableState((prev) => {
         const newState = {
@@ -2846,14 +2847,14 @@ var _ResizeTable = (0, import_react30.forwardRef)(function _ResizeTable2({
       });
     }
   }, [state]);
-  const debounceStateChange = (0, import_react30.useMemo)(() => {
+  const debounceStateChange = (0, import_react31.useMemo)(() => {
     if (!onStateChange) return void 0;
     return (0, import_lodash6.debounce)(onStateChange, 500, {});
   }, [onStateChange]);
-  (0, import_react30.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     debounceStateChange?.(tableState);
   }, [debounceStateChange, tableState]);
-  const fetchMoreOnBottomReached = (0, import_react30.useMemo)(() => {
+  const fetchMoreOnBottomReached = (0, import_react31.useMemo)(() => {
     return (0, import_lodash6.debounce)((containerRefElement) => {
       if (containerRefElement) {
         const { scrollHeight, scrollTop, clientHeight } = containerRefElement;
@@ -2863,8 +2864,8 @@ var _ResizeTable = (0, import_react30.forwardRef)(function _ResizeTable2({
       }
     }, 500);
   }, [onFetchMore, isFetching, hasMore]);
-  const tableContainerElementRef = (0, import_react30.useRef)(null);
-  (0, import_react30.useEffect)(() => {
+  const tableContainerElementRef = (0, import_react31.useRef)(null);
+  (0, import_react31.useEffect)(() => {
     if (tableContainerRef) {
       if (typeof tableContainerRef === "function") {
         tableContainerRef(tableContainerElementRef.current);
@@ -2876,7 +2877,7 @@ var _ResizeTable = (0, import_react30.forwardRef)(function _ResizeTable2({
   const rowVirtualizer = (0, import_react_virtual2.useVirtualizer)({
     count: enableVirtualization ? table.getRowModel().rows.length : 0,
     getScrollElement: () => tableContainerElementRef.current,
-    estimateSize: (0, import_react30.useCallback)(() => estimatedRowHeight, [estimatedRowHeight]),
+    estimateSize: (0, import_react31.useCallback)(() => estimatedRowHeight, [estimatedRowHeight]),
     overscan,
     enabled: enableVirtualization
   });
@@ -3118,7 +3119,7 @@ var _ResizeTable = (0, import_react30.forwardRef)(function _ResizeTable2({
     }
   );
 });
-var ResizeTable = (0, import_react30.memo)(_ResizeTable);
+var ResizeTable = (0, import_react31.memo)(_ResizeTable);
 
 // src/utils/number-format.ts
 var import_bigdecimal = __toESM(require("@sentio/bigdecimal"));
@@ -3145,10 +3146,10 @@ function getNumberWithDecimal(hex, decimal, asNumber) {
 }
 
 // src/utils/use-mobile.ts
-var import_react31 = require("react");
+var import_react32 = require("react");
 function useMobile(breakpoint = 768, defaultValue = false) {
-  const [isMobile, setIsMobile] = (0, import_react31.useState)(defaultValue);
-  (0, import_react31.useEffect)(() => {
+  const [isMobile, setIsMobile] = (0, import_react32.useState)(defaultValue);
+  (0, import_react32.useEffect)(() => {
     const checkUserAgent = () => {
       if (typeof window === "undefined") return false;
       const userAgent = window.navigator.userAgent.toLowerCase();