ssovee-os-web-ui 0.1.85 → 0.1.88

package/README.md

@@ -181,8 +181,6 @@ export function PluginPreview() {
   return (
     <PluginPlayground
       metadata={pluginMetadata}
-      onClose={() => console.log("Playground closed")}
-      onMinimize={(isMinimized) => console.log("Minimized:", isMinimized)}
     >
       <div>
         <Typography variant="h6">Plugin Content</Typography>

package/dist/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var React22 = require('react');
+var React23 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('@phosphor-icons/react');
 var Editor = require('@monaco-editor/react');
@@ -26,7 +26,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React22__namespace = /*#__PURE__*/_interopNamespace(React22);
+var React23__namespace = /*#__PURE__*/_interopNamespace(React23);
 var Editor__default = /*#__PURE__*/_interopDefault(Editor);
 
 // src/components/Button.tsx
@@ -35,7 +35,7 @@ var Editor__default = /*#__PURE__*/_interopDefault(Editor);
 function cn(...inputs) {
   return inputs.filter(Boolean).join(" ");
 }
-var Button = React22__namespace.default.forwardRef(
+var Button = React23__namespace.default.forwardRef(
   ({
     className,
     variant = "primary",
@@ -171,7 +171,7 @@ var Typography = ({
   return /* @__PURE__ */ jsxRuntime.jsx(Component, { className: classes, children });
 };
 var Typography_default = Typography;
-var Input = React22__namespace.default.forwardRef(
+var Input = React23__namespace.default.forwardRef(
   ({
     className,
     variant = "default",
@@ -249,7 +249,7 @@ var Input = React22__namespace.default.forwardRef(
 );
 Input.displayName = "Input";
 var Input_default = Input;
-var TextArea = React22__namespace.default.forwardRef(
+var TextArea = React23__namespace.default.forwardRef(
   ({
     className,
     variant = "default",
@@ -310,17 +310,22 @@ var CodeEditor = ({
   value,
   onChange,
   language = "json",
-  theme = "light",
   height = "100%",
   options,
-  className
+  className,
+  isDarkTheme
 }) => {
+  const editorTheme = React23.useMemo(() => {
+    if (typeof isDarkTheme === "undefined") return "light";
+    const isDark = Boolean(isDarkTheme);
+    return isDark ? "vs-dark" : "light";
+  }, [isDarkTheme]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className, style: { height }, children: /* @__PURE__ */ jsxRuntime.jsx(
     Editor__default.default,
     {
       height: "100%",
       language,
-      theme,
+      theme: editorTheme,
       value,
       onChange: (nextValue) => onChange(nextValue ?? ""),
       options
@@ -328,7 +333,7 @@ var CodeEditor = ({
   ) });
 };
 var CodeEditor_default = CodeEditor;
-var Select = React22__namespace.default.forwardRef(
+var Select = React23__namespace.default.forwardRef(
   ({
     className,
     options,
@@ -408,7 +413,7 @@ var Select = React22__namespace.default.forwardRef(
 );
 Select.displayName = "Select";
 var Select_default = Select;
-var Checkbox = React22__namespace.default.forwardRef(
+var Checkbox = React23__namespace.default.forwardRef(
   ({
     className,
     variant = "default",
@@ -483,7 +488,7 @@ var Checkbox = React22__namespace.default.forwardRef(
 );
 Checkbox.displayName = "Checkbox";
 var Checkbox_default = Checkbox;
-var Toggle = React22__namespace.default.forwardRef(
+var Toggle = React23__namespace.default.forwardRef(
   ({
     checked,
     onChange,
@@ -589,10 +594,10 @@ var Dropdown = ({
   className,
   trigger
 }) => {
-  const [isOpen, setIsOpen] = React22.useState(false);
-  const dropdownRef = React22.useRef(null);
+  const [isOpen, setIsOpen] = React23.useState(false);
+  const dropdownRef = React23.useRef(null);
   const selectedOption = options.find((option) => option.value === value);
-  React22.useEffect(() => {
+  React23.useEffect(() => {
     const handleClickOutside = (event) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
         setIsOpen(false);
@@ -719,9 +724,9 @@ var ImageWithPlaceholder = ({
   };
   const resolvedSrc = resolveSrc(src);
   const initialSrc = isValidSrc(resolvedSrc) ? resolvedSrc : fallbackSrc;
-  const [imgSrc, setImgSrc] = React22.useState(initialSrc);
-  const [hasError, setHasError] = React22.useState(!isValidSrc(resolvedSrc));
-  React22.useEffect(() => {
+  const [imgSrc, setImgSrc] = React23.useState(initialSrc);
+  const [hasError, setHasError] = React23.useState(!isValidSrc(resolvedSrc));
+  React23.useEffect(() => {
     const nextResolvedSrc = resolveSrc(src);
     if (isValidSrc(nextResolvedSrc)) {
       setImgSrc(nextResolvedSrc);
@@ -930,8 +935,8 @@ var Toast = ({
   showCloseButton = true,
   className
 }) => {
-  const [isShowing, setIsShowing] = React22.useState(false);
-  React22.useEffect(() => {
+  const [isShowing, setIsShowing] = React23.useState(false);
+  React23.useEffect(() => {
     if (isVisible) {
       setIsShowing(true);
       let timer = null;
@@ -1155,7 +1160,7 @@ var Modal = ({
   closeOnEscape = true,
   className
 }) => {
-  React22.useEffect(() => {
+  React23.useEffect(() => {
     if (!isOpen) return;
     const handleEscape = (e) => {
       if (e.key === "Escape" && closeOnEscape) {
@@ -1222,7 +1227,7 @@ var Modal = ({
   );
 };
 var Modal_default = Modal;
-var Card = React22__namespace.default.forwardRef(
+var Card = React23__namespace.default.forwardRef(
   ({
     className,
     variant = "default",
@@ -1260,7 +1265,7 @@ var Card = React22__namespace.default.forwardRef(
 );
 Card.displayName = "Card";
 var Card_default = Card;
-var Badge = React22__namespace.default.forwardRef(
+var Badge = React23__namespace.default.forwardRef(
   ({
     className,
     variant = "default",
@@ -1315,7 +1320,7 @@ var Avatar = ({
   className,
   onClick
 }) => {
-  const [imgError, setImgError] = React22.useState(false);
+  const [imgError, setImgError] = React23.useState(false);
   const sizeClasses = {
     sm: "w-8 h-8 text-xs",
     md: "w-10 h-10 text-sm",
@@ -1338,7 +1343,7 @@ var Avatar = ({
       }
     ) }) });
   };
-  const handleImgError = React22.useCallback(() => {
+  const handleImgError = React23.useCallback(() => {
     setImgError(true);
   }, []);
   const isSrcAvailable = typeof src === "string" && src.trim() !== "";
@@ -1410,8 +1415,8 @@ var Tooltip = ({
   delay = 200,
   className
 }) => {
-  const [isVisible, setIsVisible] = React22.useState(false);
-  const [timeoutId, setTimeoutId] = React22.useState(null);
+  const [isVisible, setIsVisible] = React23.useState(false);
+  const [timeoutId, setTimeoutId] = React23.useState(null);
   const showTooltip = () => {
     const id = setTimeout(() => setIsVisible(true), delay);
     setTimeoutId(id);
@@ -1541,14 +1546,14 @@ var matchShortcut = (event, shortcut, os) => {
 var useShortcutFormatter = ({
   globalKeyboardShortcuts: globalKeyboardShortcuts2 = []
 } = {}) => {
-  const [os, setOS] = React22.useState("windows");
-  const listenersRef = React22.useRef(
+  const [os, setOS] = React23.useState("windows");
+  const listenersRef = React23.useRef(
     /* @__PURE__ */ new Map()
   );
-  React22.useEffect(() => {
+  React23.useEffect(() => {
     setOS(detectOS());
   }, []);
-  React22.useEffect(() => {
+  React23.useEffect(() => {
     if (!globalKeyboardShortcuts2.length) return;
     const handleKeyDown = (event) => {
       for (const shortcut of globalKeyboardShortcuts2) {
@@ -1566,21 +1571,21 @@ var useShortcutFormatter = ({
       window.removeEventListener("keydown", handleKeyDown);
     };
   }, [os, globalKeyboardShortcuts2]);
-  const formatKeys = React22.useCallback(
+  const formatKeys = React23.useCallback(
     (keys = []) => {
       const separator = os === "mac" ? "" : " + ";
       return keys.map((key) => keyMap[os][key.toLowerCase()] || key.toUpperCase()).join(separator);
     },
     [os]
   );
-  const getShortcutByCommand = React22.useCallback(
+  const getShortcutByCommand = React23.useCallback(
     (command) => {
       const found = globalKeyboardShortcuts2.find((s) => s.command === command);
       return found ? found.shortcut : [];
     },
     [globalKeyboardShortcuts2]
   );
-  const addShortcutListener = React22.useCallback(
+  const addShortcutListener = React23.useCallback(
     (command, listener) => {
       if (!listenersRef.current.has(command)) {
         listenersRef.current.set(command, /* @__PURE__ */ new Set());
@@ -1589,7 +1594,7 @@ var useShortcutFormatter = ({
     },
     []
   );
-  const removeShortcutListener = React22.useCallback(
+  const removeShortcutListener = React23.useCallback(
     (command, listener) => {
       if (listenersRef.current.has(command)) {
         listenersRef.current.get(command).delete(listener);
@@ -1629,7 +1634,7 @@ var globalKeyboardShortcuts = [
     usage: "Focus search"
   }
 ];
-var SearchInput = React22__namespace.default.forwardRef(
+var SearchInput = React23__namespace.default.forwardRef(
   ({
     onSearch,
     placeholder = "Search...",
@@ -1644,16 +1649,16 @@ var SearchInput = React22__namespace.default.forwardRef(
     isActive = true,
     ...props
   }, ref) => {
-    const [searchValue, setSearchValue] = React22__namespace.default.useState(value || "");
-    const inputRef = React22.useRef(null);
-    React22.useImperativeHandle(ref, () => inputRef.current);
+    const [searchValue, setSearchValue] = React23__namespace.default.useState(value || "");
+    const inputRef = React23.useRef(null);
+    React23.useImperativeHandle(ref, () => inputRef.current);
     const {
       addShortcutListener,
       removeShortcutListener,
       formatKeys,
       getShortcutByCommand
     } = useShortcutFormatter_default({ globalKeyboardShortcuts });
-    React22.useEffect(() => {
+    React23.useEffect(() => {
       setSearchValue(value ?? "");
     }, [value]);
     const handleChange = (e) => {
@@ -1662,7 +1667,7 @@ var SearchInput = React22__namespace.default.forwardRef(
       onChange?.(e);
       onSearch?.(newValue);
     };
-    const handleClear = React22.useCallback(() => {
+    const handleClear = React23.useCallback(() => {
       setSearchValue("");
       onSearch?.("");
       const syntheticEvent = {
@@ -1670,7 +1675,7 @@ var SearchInput = React22__namespace.default.forwardRef(
       };
       onChange?.(syntheticEvent);
     }, [onChange, onSearch]);
-    React22.useEffect(() => {
+    React23.useEffect(() => {
       if (!enableKeyboardShortcuts || !isActive) return;
       const handleFocusSearch = (e) => {
         e?.preventDefault();
@@ -1823,8 +1828,8 @@ var FileUpload = ({
   children,
   dragAndDrop = false
 }) => {
-  const fileInputRef = React22.useRef(null);
-  const [isDragOver, setIsDragOver] = React22__namespace.default.useState(false);
+  const fileInputRef = React23.useRef(null);
+  const [isDragOver, setIsDragOver] = React23__namespace.default.useState(false);
   const handleFileSelect = (files) => {
     if (!files) return;
     const fileArray = Array.from(files);
@@ -2122,7 +2127,7 @@ var Pagination = ({
   ] });
 };
 var Pagination_default = Pagination;
-var Radio = React22__namespace.default.forwardRef(
+var Radio = React23__namespace.default.forwardRef(
   ({
     className,
     label,
@@ -2187,7 +2192,7 @@ var Radio = React22__namespace.default.forwardRef(
 Radio.displayName = "Radio";
 var Radio_default = Radio;
 var Accordion = ({ items, active = -1 }) => {
-  const [activeIndex, setActiveIndex] = React22.useState(active);
+  const [activeIndex, setActiveIndex] = React23.useState(active);
   const toggleAccordion = (index) => {
     setActiveIndex(activeIndex === index ? null : index);
   };
@@ -2228,8 +2233,8 @@ var Tabs = ({
   buttonClassName = "flex items-center gap-1 px-[8px] py-[2px] text-[13px] cursor-pointer transition-all duration-300 text-neutral-300 rounded-[6px] m-[8px]",
   activeButtonClassName = "bg-surface-3 text-neutral-400"
 }) => {
-  const [activeTab, setActiveTab] = React22.useState(defaultActiveTab);
-  React22.useEffect(() => {
+  const [activeTab, setActiveTab] = React23.useState(defaultActiveTab);
+  React23.useEffect(() => {
     setActiveTab(defaultActiveTab);
   }, [defaultActiveTab]);
   const handleTabClick = (index) => {
@@ -2268,11 +2273,11 @@ function renderPluginChild(child, app, api, reloadKey) {
     const renderFn = child;
     return renderFn({ app, api });
   }
-  return React22.Children.map(child, (node, index) => {
-    if (!React22.isValidElement(node)) {
+  return React23.Children.map(child, (node, index) => {
+    if (!React23.isValidElement(node)) {
       return node;
     }
-    return React22.cloneElement(
+    return React23.cloneElement(
       node,
       {
         key: `${reloadKey}-${index}`,
@@ -2301,23 +2306,24 @@ function PluginPlayground({
   children,
   metadata,
   backgroundImage,
-  onClose,
-  onMinimize
+  api
 }) {
-  const [mockUser] = React22.useState(DEFAULT_MOCK_USER);
-  const [mockToken] = React22.useState(DEFAULT_TOKEN);
-  const [isMinimized, setIsMinimized] = React22.useState(false);
-  const [isClosed, setIsClosed] = React22.useState(false);
-  const [isActive, setIsActive] = React22.useState(true);
-  const [isNightMode, setIsNightMode] = React22.useState(true);
-  React22.useEffect(() => {
+  const [mockUser] = React23.useState(DEFAULT_MOCK_USER);
+  const [mockToken] = React23.useState(DEFAULT_TOKEN);
+  const [isMinimized, setIsMinimized] = React23.useState(false);
+  const [isClosed, setIsClosed] = React23.useState(false);
+  const [isActive, setIsActive] = React23.useState(true);
+  const [isNightMode, setIsNightMode] = React23.useState(true);
+  React23.useEffect(() => {
     if (typeof window === "undefined") return;
     const storedTheme = window.localStorage.getItem("plugin-playground-theme");
-    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    const prefersDark = window.matchMedia(
+      "(prefers-color-scheme: dark)"
+    ).matches;
     const shouldUseDark = storedTheme ? storedTheme === "dark" : prefersDark;
     setIsNightMode(shouldUseDark);
   }, []);
-  React22.useEffect(() => {
+  React23.useEffect(() => {
     if (typeof document === "undefined") return;
     document.documentElement.classList.toggle("dark", isNightMode);
     window.localStorage.setItem(
@@ -2327,29 +2333,26 @@ function PluginPlayground({
   }, [isNightMode]);
   const title = metadata.title ?? metadata.name ?? "Plugin Playground";
   const slug = metadata.slug ?? "local-plugin";
-  const defaultSize = React22.useMemo(() => getDefaultSize(metadata), [metadata]);
+  const defaultSize = React23.useMemo(() => getDefaultSize(metadata), [metadata]);
   const canvasBackground = backgroundImage ?? metadata.backgroundImage ?? DEFAULT_BACKGROUND;
   const isWindowResizable = metadata.windowSize?.isAppWindowResizing ?? metadata.isResizing ?? true;
-  const minimizeWindow = React22.useCallback(() => {
+  const minimizeWindow = React23.useCallback(() => {
     setIsActive(false);
     setIsMinimized(true);
     setIsClosed(false);
-    onMinimize?.(true);
-  }, [onMinimize]);
-  const closeWindow = React22.useCallback(() => {
+  }, []);
+  const closeWindow = React23.useCallback(() => {
     setIsActive(false);
     setIsClosed(true);
     setIsMinimized(false);
-    onClose?.();
-  }, [onClose]);
-  const restoreWindow = React22.useCallback(() => {
+  }, []);
+  const restoreWindow = React23.useCallback(() => {
     setIsActive(true);
     setIsClosed(false);
     setIsMinimized(false);
-    onMinimize?.(false);
-  }, [onMinimize]);
-  const mockApi = React22.useMemo(
-    () => ({
+  }, []);
+  const mockApi = React23.useMemo(
+    () => api ? api : {
       showToast: (message, type) => {
         console.info(`[playground:${type}] ${message}`);
       },
@@ -2363,10 +2366,10 @@ function PluginPlayground({
         return mockToken;
       },
       isDarkTheme: true
-    }),
+    },
     [mockToken, mockUser]
   );
-  const appProps = React22.useMemo(
+  const appProps = React23.useMemo(
     () => ({
       name: title,
       slug,
@@ -2536,13 +2539,13 @@ var WindowWithSideMenu = ({
     removeShortcutListener,
     getShortcutByCommand
   } = useShortcutFormatter_default({ globalKeyboardShortcuts });
-  const [state, dispatch] = React22.useReducer(reducer, {
+  const [state, dispatch] = React23.useReducer(reducer, {
     ...initialState,
     windowSize: app.windowSize.windowSize ?? defaultSize,
     defaultSize: app.windowSize.windowSize ?? defaultSize
   });
-  const windowRef = React22.useRef(null);
-  React22.useEffect(() => {
+  const windowRef = React23.useRef(null);
+  React23.useEffect(() => {
     if (app.isMinimize !== state.isMinimized) {
       dispatch({ type: "SYNC_MINIMIZE_STATE", payload: app.isMinimize });
     }
@@ -2603,7 +2606,7 @@ var WindowWithSideMenu = ({
     document.body.style.userSelect = "none";
     dispatch({ type: "START_RESIZE", payload: { x: e.clientX, y: e.clientY } });
   };
-  React22.useEffect(() => {
+  React23.useEffect(() => {
     if (state.isDragging || state.resizeStart) {
       window.addEventListener("mousemove", handleMouseMove);
       window.addEventListener("mouseup", handleMouseUp);
@@ -2614,7 +2617,7 @@ var WindowWithSideMenu = ({
       document.body.style.userSelect = "";
     };
   }, [state.isDragging, state.resizeStart]);
-  React22.useEffect(() => {
+  React23.useEffect(() => {
     if (windowRef.current) {
       windowRef.current.addEventListener("click", () => {
         if (app?.callback) {
@@ -2623,7 +2626,7 @@ var WindowWithSideMenu = ({
       });
     }
   }, [app?.slug, windowRef]);
-  React22.useEffect(() => {
+  React23.useEffect(() => {
     const handleExitApp = () => {
       if (app?.callback) {
         app?.callback("CLOSE_APP");
@@ -2634,7 +2637,7 @@ var WindowWithSideMenu = ({
       removeShortcutListener("exit_app", handleExitApp);
     };
   }, [app?.slug, app.isActive]);
-  React22.useEffect(() => {
+  React23.useEffect(() => {
     const handleMinimize = () => {
       if (app?.slug && app.isActive) {
         dispatch({
@@ -2651,7 +2654,7 @@ var WindowWithSideMenu = ({
       removeShortcutListener("minimize_app", handleMinimize);
     };
   }, [app?.slug, app.isActive, state.isMinimized, state.windowSize]);
-  React22.useEffect(() => {
+  React23.useEffect(() => {
     const handleMaximize = () => {
       if (app?.slug && app.isActive) {
         dispatch({
@@ -2822,7 +2825,7 @@ var WindowWithSideMenu = ({
                   style: {
                     maxHeight: `${state.windowSize.height - 37}px`
                   },
-                  children: React22.isValidElement(children) && typeof children.type !== "string" ? React22__namespace.default.cloneElement(children, {
+                  children: React23.isValidElement(children) && typeof children.type !== "string" ? React23__namespace.default.cloneElement(children, {
                     windowSize: state.windowSize,
                     isAppWindowResizing: state.resizeStart !== null
                   }) : children
@@ -2928,13 +2931,13 @@ var WindowWithoutSideMenu = ({
     removeShortcutListener,
     getShortcutByCommand
   } = useShortcutFormatter_default({ globalKeyboardShortcuts });
-  const [state, dispatch] = React22.useReducer(reducer2, {
+  const [state, dispatch] = React23.useReducer(reducer2, {
     ...initialState2,
     windowSize: app.windowSize.windowSize ?? defaultSize,
     defaultSize: app.windowSize.windowSize ?? defaultSize
   });
-  const windowRef = React22.useRef(null);
-  React22.useEffect(() => {
+  const windowRef = React23.useRef(null);
+  React23.useEffect(() => {
     if (app.isMinimize !== state.isMinimized) {
       dispatch({ type: "SYNC_MINIMIZE_STATE", payload: app.isMinimize });
     }
@@ -2991,7 +2994,7 @@ var WindowWithoutSideMenu = ({
     document.body.style.userSelect = "none";
     dispatch({ type: "START_RESIZE", payload: { x: e.clientX, y: e.clientY } });
   };
-  React22.useEffect(() => {
+  React23.useEffect(() => {
     if (state.isDragging || state.resizeStart) {
       window.addEventListener("mousemove", handleMouseMove);
       window.addEventListener("mouseup", handleMouseUp);
@@ -3002,7 +3005,7 @@ var WindowWithoutSideMenu = ({
       document.body.style.userSelect = "";
     };
   }, [state.isDragging, state.resizeStart]);
-  React22.useEffect(() => {
+  React23.useEffect(() => {
     if (windowRef.current) {
       windowRef.current.addEventListener("click", () => {
         if (app?.callback) {
@@ -3011,7 +3014,7 @@ var WindowWithoutSideMenu = ({
       });
     }
   }, [app?.slug, windowRef]);
-  React22.useEffect(() => {
+  React23.useEffect(() => {
     const handleExitApp = () => {
       if (app?.callback) {
         app?.callback("CLOSE_APP");
@@ -3022,7 +3025,7 @@ var WindowWithoutSideMenu = ({
       removeShortcutListener("exit_app", handleExitApp);
     };
   }, [app?.slug, app.isActive]);
-  React22.useEffect(() => {
+  React23.useEffect(() => {
     const handleMinimize = () => {
       if (app?.slug && app.isActive) {
         dispatch({
@@ -3039,7 +3042,7 @@ var WindowWithoutSideMenu = ({
       removeShortcutListener("minimize_app", handleMinimize);
     };
   }, [app?.slug, app.isActive, state.isMinimized, state.windowSize]);
-  React22.useEffect(() => {
+  React23.useEffect(() => {
     const handleMaximize = () => {
       if (app?.slug && app.isActive) {
         dispatch({
@@ -3155,7 +3158,7 @@ var WindowWithoutSideMenu = ({
                 style: {
                   maxHeight: `${state.windowSize.height - 37}px`
                 },
-                children: React22.isValidElement(children) && typeof children.type !== "string" ? React22__namespace.default.cloneElement(children, {
+                children: React23.isValidElement(children) && typeof children.type !== "string" ? React23__namespace.default.cloneElement(children, {
                   windowSize: state.windowSize,
                   isAppWindowResizing: state.resizeStart !== null
                 }) : children
@@ -3178,7 +3181,7 @@ var WindowWithoutSideMenu = ({
   );
 };
 var WindowWithoutSideMenu_default = WindowWithoutSideMenu;
-var Table = React22__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
+var Table = React23__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
   "table",
   {
     ref,
@@ -3187,9 +3190,9 @@ var Table = React22__namespace.forwardRef(({ className, ...props }, ref) => /* @
   }
 ) }));
 Table.displayName = "Table";
-var TableHeader = React22__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("thead", { ref, className: cn("[&_tr]:border-b text-neutral-400 bg-surface-2", className), ...props }));
+var TableHeader = React23__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("thead", { ref, className: cn("[&_tr]:border-b text-neutral-400 bg-surface-2", className), ...props }));
 TableHeader.displayName = "TableHeader";
-var TableBody = React22__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TableBody = React23__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "tbody",
   {
     ref,
@@ -3198,7 +3201,7 @@ var TableBody = React22__namespace.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 TableBody.displayName = "TableBody";
-var TableFooter = React22__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TableFooter = React23__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "tfoot",
   {
     ref,
@@ -3210,7 +3213,7 @@ var TableFooter = React22__namespace.forwardRef(({ className, ...props }, ref) =
   }
 ));
 TableFooter.displayName = "TableFooter";
-var TableRow = React22__namespace.forwardRef(({ className, onClick, ...props }, ref) => {
+var TableRow = React23__namespace.forwardRef(({ className, onClick, ...props }, ref) => {
   const isInteractive = typeof onClick === "function";
   return /* @__PURE__ */ jsxRuntime.jsx(
     "tr",
@@ -3227,7 +3230,7 @@ var TableRow = React22__namespace.forwardRef(({ className, onClick, ...props },
   );
 });
 TableRow.displayName = "TableRow";
-var TableHead = React22__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TableHead = React23__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "th",
   {
     ref,
@@ -3239,7 +3242,7 @@ var TableHead = React22__namespace.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 TableHead.displayName = "TableHead";
-var TableCell = React22__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TableCell = React23__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "td",
   {
     ref,
@@ -3248,7 +3251,7 @@ var TableCell = React22__namespace.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 TableCell.displayName = "TableCell";
-var TableCaption = React22__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TableCaption = React23__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "caption",
   {
     ref,
@@ -3258,12 +3261,12 @@ var TableCaption = React22__namespace.forwardRef(({ className, ...props }, ref)
 ));
 TableCaption.displayName = "TableCaption";
 var useGridClasses = (windowSize, gridRules) => {
-  const deviceType = React22.useMemo(() => {
+  const deviceType = React23.useMemo(() => {
     if (windowSize.width <= 640) return "mobile";
     if (windowSize.width <= 1024) return "tablet";
     return "desktop";
   }, [windowSize]);
-  const gridClasses = React22.useMemo(() => {
+  const gridClasses = React23.useMemo(() => {
     const classes = {};
     for (const element in gridRules) {
       const classRules = gridRules[element] ?? {};
@@ -3276,8 +3279,8 @@ var useGridClasses = (windowSize, gridRules) => {
 };
 var useGridClasses_default = useGridClasses;
 var useDeviceSupport = () => {
-  const [isSupported, setIsSupported] = React22.useState(true);
-  React22.useEffect(() => {
+  const [isSupported, setIsSupported] = React23.useState(true);
+  React23.useEffect(() => {
     function checkSupport() {
       const ua = typeof window !== "undefined" ? window.navigator.userAgent : "";
       const width = typeof window !== "undefined" ? window.innerWidth : 1920;
@@ -3403,7 +3406,7 @@ var useSound = () => {
     audio.currentTime = 0;
     await audio.play();
   };
-  const playSound = React22.useCallback((type) => {
+  const playSound = React23.useCallback((type) => {
     if (typeof window === "undefined") {
       return;
     }