@rufous/ui 0.2.81 → 0.2.83

package/dist/main.js

@@ -3870,7 +3870,7 @@ var RufousLogoLoader = ({ size = 80, sx, className }) => {
 };
 
 // lib/DataGrid/DataGrid.tsx
-import React74, { useState as useState8, useMemo as useMemo2, useRef as useRef8, useEffect as useEffect8 } from "react";
+import React75, { useState as useState9, useMemo as useMemo2, useRef as useRef9, useEffect as useEffect9 } from "react";
 import {
   ChevronUp,
   ChevronDown,
@@ -3889,6 +3889,238 @@ import {
   Trash2,
   Plus
 } from "lucide-react";
+
+// lib/Tooltip/Tooltip.tsx
+import React74, {
+  useCallback as useCallback3,
+  useEffect as useEffect8,
+  useRef as useRef8,
+  useState as useState8
+} from "react";
+import ReactDOM3 from "react-dom";
+var GAP = 8;
+function computePosition(anchor, tooltip, placement) {
+  const { top: aTop, left: aLeft, width: aW, height: aH } = anchor;
+  const { width: tW, height: tH } = tooltip;
+  let top = 0;
+  let left = 0;
+  let arrowLeft;
+  let arrowTop;
+  switch (placement) {
+    case "top":
+      top = aTop - tH - GAP;
+      left = aLeft + aW / 2 - tW / 2;
+      arrowLeft = tW / 2 - 4;
+      break;
+    case "top-start":
+      top = aTop - tH - GAP;
+      left = aLeft;
+      arrowLeft = Math.min(aW / 2, tW - 16);
+      break;
+    case "top-end":
+      top = aTop - tH - GAP;
+      left = aLeft + aW - tW;
+      arrowLeft = Math.max(tW - aW / 2 - 4, 8);
+      break;
+    case "bottom":
+      top = aTop + aH + GAP;
+      left = aLeft + aW / 2 - tW / 2;
+      arrowLeft = tW / 2 - 4;
+      break;
+    case "bottom-start":
+      top = aTop + aH + GAP;
+      left = aLeft;
+      arrowLeft = Math.min(aW / 2, tW - 16);
+      break;
+    case "bottom-end":
+      top = aTop + aH + GAP;
+      left = aLeft + aW - tW;
+      arrowLeft = Math.max(tW - aW / 2 - 4, 8);
+      break;
+    case "left":
+      top = aTop + aH / 2 - tH / 2;
+      left = aLeft - tW - GAP;
+      arrowTop = tH / 2 - 4;
+      break;
+    case "left-start":
+      top = aTop;
+      left = aLeft - tW - GAP;
+      arrowTop = Math.min(aH / 2, tH - 16);
+      break;
+    case "left-end":
+      top = aTop + aH - tH;
+      left = aLeft - tW - GAP;
+      arrowTop = Math.max(tH - aH / 2 - 4, 8);
+      break;
+    case "right":
+      top = aTop + aH / 2 - tH / 2;
+      left = aLeft + aW + GAP;
+      arrowTop = tH / 2 - 4;
+      break;
+    case "right-start":
+      top = aTop;
+      left = aLeft + aW + GAP;
+      arrowTop = Math.min(aH / 2, tH - 16);
+      break;
+    case "right-end":
+      top = aTop + aH - tH;
+      left = aLeft + aW + GAP;
+      arrowTop = Math.max(tH - aH / 2 - 4, 8);
+      break;
+    default:
+      top = aTop - tH - GAP;
+      left = aLeft + aW / 2 - tW / 2;
+  }
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+  left = Math.max(8, Math.min(left, vw - tW - 8));
+  top = Math.max(8, Math.min(top, vh - tH - 8));
+  return { top, left, arrowLeft, arrowTop };
+}
+var Tooltip = ({
+  title,
+  placement = "top",
+  arrow = false,
+  open: controlledOpen,
+  disableHoverListener = false,
+  disableFocusListener = false,
+  enterDelay = 100,
+  leaveDelay = 0,
+  children,
+  followCursor = false,
+  className = "",
+  style,
+  sx
+}) => {
+  const sxClass = useSx(sx);
+  const [internalOpen, setInternalOpen] = useState8(false);
+  const [position, setPosition] = useState8({ top: 0, left: 0 });
+  const anchorRef = useRef8(null);
+  const tooltipRef = useRef8(null);
+  const enterTimer = useRef8(null);
+  const leaveTimer = useRef8(null);
+  const cursorPos = useRef8({ x: 0, y: 0 });
+  const isOpen = controlledOpen !== void 0 ? controlledOpen : internalOpen;
+  const clearTimers = useCallback3(() => {
+    if (enterTimer.current) clearTimeout(enterTimer.current);
+    if (leaveTimer.current) clearTimeout(leaveTimer.current);
+  }, []);
+  const updatePosition = useCallback3(() => {
+    if (!anchorRef.current || !tooltipRef.current) return;
+    const anchorRect = anchorRef.current.getBoundingClientRect();
+    const tooltipRect = tooltipRef.current.getBoundingClientRect();
+    if (followCursor) {
+      const fakeRect = {
+        top: cursorPos.current.y,
+        left: cursorPos.current.x,
+        right: cursorPos.current.x,
+        bottom: cursorPos.current.y,
+        width: 0,
+        height: 0,
+        x: cursorPos.current.x,
+        y: cursorPos.current.y,
+        toJSON: () => ({})
+      };
+      setPosition(computePosition(fakeRect, tooltipRect, placement));
+    } else {
+      setPosition(computePosition(anchorRect, tooltipRect, placement));
+    }
+  }, [placement, followCursor]);
+  useEffect8(() => {
+    if (isOpen) {
+      requestAnimationFrame(() => {
+        updatePosition();
+      });
+    }
+  }, [isOpen, updatePosition]);
+  const handleOpen = useCallback3(() => {
+    clearTimers();
+    if (enterDelay > 0) {
+      enterTimer.current = setTimeout(() => {
+        setInternalOpen(true);
+      }, enterDelay);
+    } else {
+      setInternalOpen(true);
+    }
+  }, [enterDelay, clearTimers]);
+  const handleClose = useCallback3(() => {
+    clearTimers();
+    if (leaveDelay > 0) {
+      leaveTimer.current = setTimeout(() => {
+        setInternalOpen(false);
+      }, leaveDelay);
+    } else {
+      setInternalOpen(false);
+    }
+  }, [leaveDelay, clearTimers]);
+  const handleMouseMove = useCallback3(
+    (e) => {
+      cursorPos.current = { x: e.clientX, y: e.clientY };
+      if (isOpen && followCursor) {
+        updatePosition();
+      }
+    },
+    [isOpen, followCursor, updatePosition]
+  );
+  useEffect8(() => {
+    return () => clearTimers();
+  }, [clearTimers]);
+  const childProps = {};
+  if (!disableHoverListener) {
+    childProps.onMouseEnter = handleOpen;
+    childProps.onMouseLeave = handleClose;
+    childProps.onMouseMove = followCursor ? handleMouseMove : void 0;
+  }
+  if (!disableFocusListener) {
+    childProps.onFocus = handleOpen;
+    childProps.onBlur = handleClose;
+  }
+  const tooltipClasses = [
+    "rf-tooltip",
+    `rf-tooltip--placement-${placement}`,
+    isOpen ? "rf-tooltip--visible" : "",
+    sxClass,
+    className
+  ].filter(Boolean).join(" ");
+  const tooltipElement = /* @__PURE__ */ React74.createElement(
+    "div",
+    {
+      ref: tooltipRef,
+      className: tooltipClasses,
+      style: {
+        top: position.top,
+        left: position.left,
+        ...style
+      },
+      role: "tooltip",
+      "aria-hidden": !isOpen
+    },
+    title,
+    arrow && /* @__PURE__ */ React74.createElement(
+      "span",
+      {
+        className: "rf-tooltip__arrow",
+        style: {
+          ...position.arrowLeft !== void 0 ? { left: position.arrowLeft } : {},
+          ...position.arrowTop !== void 0 ? { top: position.arrowTop } : {}
+        }
+      }
+    )
+  );
+  return /* @__PURE__ */ React74.createElement(React74.Fragment, null, /* @__PURE__ */ React74.createElement(
+    "span",
+    {
+      ref: anchorRef,
+      style: { display: "inline-flex", position: "relative" },
+      "aria-describedby": isOpen ? "rf-tooltip" : void 0,
+      ...childProps
+    },
+    React74.cloneElement(children)
+  ), ReactDOM3.createPortal(tooltipElement, document.body));
+};
+Tooltip.displayName = "Tooltip";
+
+// lib/DataGrid/DataGrid.tsx
 var getOperatorsForType = (type) => {
   if (type === "date") return [
     { value: "is", label: "is" },
@@ -3941,10 +4173,12 @@ function DataGrid({
   pageSizeOptions = [5, 10, 25, 50],
   title,
   className,
-  sx
+  sx,
+  onRowDoubleClick,
+  onCellDoubleClick
 }) {
   const sxClass = useSx(sx);
-  const [columnOverrides, setColumnOverrides] = useState8({});
+  const [columnOverrides, setColumnOverrides] = useState9({});
   const resolvedColumns = useMemo2(() => {
     return initialColumnsProp.map((col) => {
       const field = String(col.field || col.key || "");
@@ -3958,7 +4192,7 @@ function DataGrid({
       };
     });
   }, [initialColumnsProp, columnOverrides]);
-  const [columnWidths, setColumnWidths] = useState8(() => {
+  const [columnWidths, setColumnWidths] = useState9(() => {
     const widths = {};
     initialColumnsProp.forEach((col) => {
       const field = String(col.field || col.key || "");
@@ -3967,26 +4201,26 @@ function DataGrid({
     });
     return widths;
   });
-  const [pageSize, setPageSize] = useState8(initialPageSize);
-  const [sortField, setSortField] = useState8(null);
-  const [sortDirection, setSortDirection] = useState8(null);
-  const [filterText, setFilterText] = useState8("");
-  const [currentPage, setCurrentPage] = useState8(1);
-  const [columnFilters, setColumnFilters] = useState8({});
-  const [resizingColumn, setResizingColumn] = useState8(null);
-  const [startX, setStartX] = useState8(0);
-  const [startWidth, setStartWidth] = useState8(0);
-  const [activeMenu, setActiveMenu] = useState8(null);
-  const [menuPosition, setMenuPosition] = useState8({ top: 0, left: 0 });
-  const menuRef = useRef8(null);
-  const [showManageColumns, setShowManageColumns] = useState8(false);
-  const [showAdvancedFilter, setShowAdvancedFilter] = useState8(false);
+  const [pageSize, setPageSize] = useState9(initialPageSize);
+  const [sortField, setSortField] = useState9(null);
+  const [sortDirection, setSortDirection] = useState9(null);
+  const [filterText, setFilterText] = useState9("");
+  const [currentPage, setCurrentPage] = useState9(1);
+  const [columnFilters, setColumnFilters] = useState9({});
+  const [resizingColumn, setResizingColumn] = useState9(null);
+  const [startX, setStartX] = useState9(0);
+  const [startWidth, setStartWidth] = useState9(0);
+  const [activeMenu, setActiveMenu] = useState9(null);
+  const [menuPosition, setMenuPosition] = useState9({ top: 0, left: 0 });
+  const menuRef = useRef9(null);
+  const [showManageColumns, setShowManageColumns] = useState9(false);
+  const [showAdvancedFilter, setShowAdvancedFilter] = useState9(false);
   const initialFilterCol = String(initialColumnsProp[0]?.field || initialColumnsProp[0]?.key || "");
-  const [advancedFilters, setAdvancedFilters] = useState8([
+  const [advancedFilters, setAdvancedFilters] = useState9([
     { column: initialFilterCol, operator: getDefaultOperator(initialColumnsProp[0]?.type), value: "", logic: "AND" }
   ]);
-  const [colSearch, setColSearch] = useState8("");
-  useEffect8(() => {
+  const [colSearch, setColSearch] = useState9("");
+  useEffect9(() => {
     const handleMouseMove = (e) => {
       if (!resizingColumn) return;
       const col = resolvedColumns.find((c) => String(c.field) === resizingColumn);
@@ -4006,7 +4240,7 @@ function DataGrid({
       document.removeEventListener("mouseup", handleMouseUp);
     };
   }, [resizingColumn, startX, startWidth, resolvedColumns]);
-  useEffect8(() => {
+  useEffect9(() => {
     const handleClickOutside = (e) => {
       if (menuRef.current && !menuRef.current.contains(e.target)) {
         setActiveMenu(null);
@@ -4015,7 +4249,7 @@ function DataGrid({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
-  useEffect8(() => {
+  useEffect9(() => {
     setColumnWidths((prev) => {
       const next = { ...prev };
       initialColumnsProp.forEach((col) => {
@@ -4252,7 +4486,7 @@ function DataGrid({
     return offset2;
   };
   const hasActiveFilters = advancedFilters.some((f) => f.value);
-  return /* @__PURE__ */ React74.createElement("div", { className: ["dg-root", sxClass, className].filter(Boolean).join(" ") }, /* @__PURE__ */ React74.createElement("div", { className: "dg-header" }, /* @__PURE__ */ React74.createElement("div", { className: "dg-header-info" }, /* @__PURE__ */ React74.createElement("h2", null, title), /* @__PURE__ */ React74.createElement("p", null, filteredData.length, " total records")), /* @__PURE__ */ React74.createElement("div", { className: "dg-header-actions" }, /* @__PURE__ */ React74.createElement("div", { className: "dg-search-wrap" }, /* @__PURE__ */ React74.createElement(Search, { size: 15 }), /* @__PURE__ */ React74.createElement(
+  return /* @__PURE__ */ React75.createElement("div", { className: ["dg-root", sxClass, className].filter(Boolean).join(" ") }, /* @__PURE__ */ React75.createElement("div", { className: "dg-header" }, /* @__PURE__ */ React75.createElement("div", { className: "dg-header-info" }, /* @__PURE__ */ React75.createElement("h2", null, title), /* @__PURE__ */ React75.createElement("p", null, filteredData.length, " total records")), /* @__PURE__ */ React75.createElement("div", { className: "dg-header-actions" }, /* @__PURE__ */ React75.createElement("div", { className: "dg-search-wrap" }, /* @__PURE__ */ React75.createElement(Search, { size: 15 }), /* @__PURE__ */ React75.createElement(
     "input",
     {
       className: "dg-search",
@@ -4263,52 +4497,50 @@ function DataGrid({
         setCurrentPage(1);
       }
     }
-  )), /* @__PURE__ */ React74.createElement(
+  )), /* @__PURE__ */ React75.createElement(Tooltip, { title: "Filters", placement: "top" }, /* @__PURE__ */ React75.createElement(
     "button",
     {
       className: `dg-icon-btn ${hasActiveFilters ? "active" : ""}`,
-      onClick: () => setShowAdvancedFilter(true),
-      title: "Filters"
+      onClick: () => setShowAdvancedFilter(true)
     },
-    /* @__PURE__ */ React74.createElement(Filter, { size: 16 })
-  ), /* @__PURE__ */ React74.createElement(
+    /* @__PURE__ */ React75.createElement(Filter, { size: 16 })
+  )), /* @__PURE__ */ React75.createElement(Tooltip, { title: "Manage Columns", placement: "top" }, /* @__PURE__ */ React75.createElement(
     "button",
     {
       className: "dg-icon-btn",
-      onClick: () => setShowManageColumns(true),
-      title: "Manage Columns"
+      onClick: () => setShowManageColumns(true)
     },
-    /* @__PURE__ */ React74.createElement(Columns, { size: 16 })
-  ), /* @__PURE__ */ React74.createElement("button", { className: "dg-action-btn", onClick: handleExport }, /* @__PURE__ */ React74.createElement(Download, { size: 14 }), " Export CSV"))), /* @__PURE__ */ React74.createElement("div", { className: "dg-table-wrap" }, /* @__PURE__ */ React74.createElement("table", { className: "dg-table" }, /* @__PURE__ */ React74.createElement("thead", null, /* @__PURE__ */ React74.createElement("tr", null, visibleColumns.map((col, idx) => {
+    /* @__PURE__ */ React75.createElement(Columns, { size: 16 })
+  )), /* @__PURE__ */ React75.createElement("button", { className: "dg-action-btn", onClick: handleExport }, /* @__PURE__ */ React75.createElement(Download, { size: 14 }), " Export CSV"))), /* @__PURE__ */ React75.createElement("div", { className: "dg-table-wrap" }, /* @__PURE__ */ React75.createElement("table", { className: "dg-table" }, /* @__PURE__ */ React75.createElement("thead", null, /* @__PURE__ */ React75.createElement("tr", null, visibleColumns.map((col, idx) => {
     const colField = String(col.field);
     const width = columnWidths[colField] || 200;
     const leftOffset = getLeftOffset(col, idx);
     const rightOffset = getRightOffset(col, idx);
     const isSorted = sortField === col.field;
-    return /* @__PURE__ */ React74.createElement(
+    return /* @__PURE__ */ React75.createElement(
       "th",
       {
         key: colField,
         className: `dg-thead-cell${col.pinned === "left" ? " pinned-left" : col.pinned === "right" ? " pinned-right" : ""} ${col.headerClassName || ""}`,
         style: { width, minWidth: width, left: leftOffset, right: rightOffset, flex: col.flex }
       },
-      /* @__PURE__ */ React74.createElement("div", { className: "dg-th-inner" }, /* @__PURE__ */ React74.createElement(
+      /* @__PURE__ */ React75.createElement("div", { className: "dg-th-inner" }, /* @__PURE__ */ React75.createElement(
         "div",
         {
           className: `dg-th-label${col.sortable === false ? " no-sort" : ""}`,
           onClick: () => col.sortable !== false && handleSort(col.field || "")
         },
         col.headerName,
-        isSorted && sortDirection === "asc" && /* @__PURE__ */ React74.createElement(ChevronUp, { size: 12 }),
-        isSorted && sortDirection === "desc" && /* @__PURE__ */ React74.createElement(ChevronDown, { size: 12 })
-      ), /* @__PURE__ */ React74.createElement("div", { className: "dg-th-actions" }, !col.disableColumnMenu && /* @__PURE__ */ React74.createElement(
+        isSorted && sortDirection === "asc" && /* @__PURE__ */ React75.createElement(ChevronUp, { size: 12 }),
+        isSorted && sortDirection === "desc" && /* @__PURE__ */ React75.createElement(ChevronDown, { size: 12 })
+      ), /* @__PURE__ */ React75.createElement("div", { className: "dg-th-actions" }, !col.disableColumnMenu && /* @__PURE__ */ React75.createElement(
         "button",
         {
           className: "dg-th-menu-btn",
           onClick: (e) => handleMenuOpen(e, colField)
         },
-        /* @__PURE__ */ React74.createElement(MoreVertical, { size: 13 })
-      ), /* @__PURE__ */ React74.createElement(
+        /* @__PURE__ */ React75.createElement(MoreVertical, { size: 13 })
+      ), /* @__PURE__ */ React75.createElement(
         "div",
         {
           className: `dg-resizer${resizingColumn === colField ? " resizing" : ""}`,
@@ -4321,17 +4553,18 @@ function DataGrid({
         }
       )))
     );
-  }), actions && /* @__PURE__ */ React74.createElement("th", { style: { width: 0, padding: 0 } }))), /* @__PURE__ */ React74.createElement("tbody", null, paginatedData.length === 0 ? /* @__PURE__ */ React74.createElement("tr", null, /* @__PURE__ */ React74.createElement("td", { colSpan: visibleColumns.length + (actions ? 1 : 0), className: "dg-empty" }, "No records found")) : paginatedData.map((item) => /* @__PURE__ */ React74.createElement("tr", { key: item.id, className: "dg-tbody-row" }, visibleColumns.map((col, idx) => {
+  }), actions && /* @__PURE__ */ React75.createElement("th", { style: { width: 0, padding: 0 } }))), /* @__PURE__ */ React75.createElement("tbody", null, paginatedData.length === 0 ? /* @__PURE__ */ React75.createElement("tr", null, /* @__PURE__ */ React75.createElement("td", { colSpan: visibleColumns.length + (actions ? 1 : 0), className: "dg-empty" }, "No records found")) : paginatedData.map((item) => /* @__PURE__ */ React75.createElement("tr", { key: item.id, className: "dg-tbody-row", onDoubleClick: () => onRowDoubleClick?.(item) }, visibleColumns.map((col, idx) => {
     const colField = String(col.field);
     const width = columnWidths[colField] || 200;
     const leftOffset = getLeftOffset(col, idx);
     const rightOffset = getRightOffset(col, idx);
-    return /* @__PURE__ */ React74.createElement(
+    return /* @__PURE__ */ React75.createElement(
       "td",
       {
         key: `${item.id}-${colField}`,
         className: `dg-td${col.pinned === "left" ? " pinned-left" : col.pinned === "right" ? " pinned-right" : ""} ${col.cellClassName || ""}`,
-        style: { width, minWidth: width, maxWidth: width, left: leftOffset, right: rightOffset, flex: col.flex }
+        style: { width, minWidth: width, maxWidth: width, left: leftOffset, right: rightOffset, flex: col.flex },
+        onDoubleClick: () => onCellDoubleClick?.({ row: item, field: colField, value: item[col.field || ""] })
       },
       (() => {
         const field = String(col.field);
@@ -4347,22 +4580,20 @@ function DataGrid({
         return String(formattedValue ?? "");
       })()
     );
-  }), actions && /* @__PURE__ */ React74.createElement("td", { className: "dg-row-actions-cell" }, (() => {
+  }), actions && /* @__PURE__ */ React75.createElement("td", { className: "dg-row-actions-cell" }, (() => {
     const resolvedActions = typeof actions === "function" ? actions(item) : actions;
     const visibleActions = resolvedActions.filter((a) => !a.show || a.show(item));
     if (visibleActions.length === 0) return null;
-    return /* @__PURE__ */ React74.createElement("div", { className: "dg-row-actions" }, /* @__PURE__ */ React74.createElement("div", { className: "dg-action-group" }, visibleActions.map((action, i) => /* @__PURE__ */ React74.createElement(
+    return /* @__PURE__ */ React75.createElement("div", { className: "dg-row-actions" }, /* @__PURE__ */ React75.createElement("div", { className: "dg-action-group" }, visibleActions.map((action, i) => /* @__PURE__ */ React75.createElement(Tooltip, { key: i, title: action.label, placement: "top" }, /* @__PURE__ */ React75.createElement(
       "button",
       {
-        key: i,
         className: "dg-row-action-btn",
         style: { color: action.color || "var(--text-secondary)" },
-        onClick: () => action.onClick(item),
-        title: action.label
+        onClick: () => action.onClick(item)
       },
       action.icon
-    ))));
-  })())))))), /* @__PURE__ */ React74.createElement("div", { className: "dg-pagination" }, /* @__PURE__ */ React74.createElement("div", { className: "dg-page-info" }, /* @__PURE__ */ React74.createElement("div", { className: "dg-per-page" }, /* @__PURE__ */ React74.createElement("span", null, "Rows per page:"), /* @__PURE__ */ React74.createElement(
+    )))));
+  })())))))), /* @__PURE__ */ React75.createElement("div", { className: "dg-pagination" }, /* @__PURE__ */ React75.createElement("div", { className: "dg-page-info" }, /* @__PURE__ */ React75.createElement("div", { className: "dg-per-page" }, /* @__PURE__ */ React75.createElement("span", null, "Rows per page:"), /* @__PURE__ */ React75.createElement(
     "select",
     {
       value: pageSize,
@@ -4371,8 +4602,8 @@ function DataGrid({
         setCurrentPage(1);
       }
     },
-    pageSizeOptions.map((o) => /* @__PURE__ */ React74.createElement("option", { key: o, value: o }, o))
-  )), /* @__PURE__ */ React74.createElement("span", null, (currentPage - 1) * pageSize + 1, "\u2013", Math.min(currentPage * pageSize, filteredData.length), " of ", filteredData.length)), /* @__PURE__ */ React74.createElement("div", { className: "dg-page-nav" }, /* @__PURE__ */ React74.createElement("button", { className: "dg-page-btn", disabled: currentPage === 1, onClick: () => setCurrentPage((p) => p - 1) }, /* @__PURE__ */ React74.createElement(ChevronLeft, { size: 15 })), /* @__PURE__ */ React74.createElement("span", { className: "dg-page-fraction" }, currentPage, " / ", totalPages), /* @__PURE__ */ React74.createElement("button", { className: "dg-page-btn", disabled: currentPage === totalPages, onClick: () => setCurrentPage((p) => p + 1) }, /* @__PURE__ */ React74.createElement(ChevronRight, { size: 15 })))), activeMenu && /* @__PURE__ */ React74.createElement(
+    pageSizeOptions.map((o) => /* @__PURE__ */ React75.createElement("option", { key: o, value: o }, o))
+  )), /* @__PURE__ */ React75.createElement("span", null, (currentPage - 1) * pageSize + 1, "\u2013", Math.min(currentPage * pageSize, filteredData.length), " of ", filteredData.length)), /* @__PURE__ */ React75.createElement("div", { className: "dg-page-nav" }, /* @__PURE__ */ React75.createElement("button", { className: "dg-page-btn", disabled: currentPage === 1, onClick: () => setCurrentPage((p) => p - 1) }, /* @__PURE__ */ React75.createElement(ChevronLeft, { size: 15 })), /* @__PURE__ */ React75.createElement("span", { className: "dg-page-fraction" }, currentPage, " / ", totalPages), /* @__PURE__ */ React75.createElement("button", { className: "dg-page-btn", disabled: currentPage === totalPages, onClick: () => setCurrentPage((p) => p + 1) }, /* @__PURE__ */ React75.createElement(ChevronRight, { size: 15 })))), activeMenu && /* @__PURE__ */ React75.createElement(
     "div",
     {
       ref: menuRef,
@@ -4383,25 +4614,25 @@ function DataGrid({
         ...menuPosition.right !== void 0 ? { right: menuPosition.right } : {}
       }
     },
-    /* @__PURE__ */ React74.createElement("button", { className: "dg-menu-item", onClick: () => handleSort(activeMenu, "asc") }, /* @__PURE__ */ React74.createElement(ArrowUp, { size: 14 }), " Sort ascending"),
-    /* @__PURE__ */ React74.createElement("button", { className: "dg-menu-item", onClick: () => handleSort(activeMenu, "desc") }, /* @__PURE__ */ React74.createElement(ArrowDown, { size: 14 }), " Sort descending"),
-    /* @__PURE__ */ React74.createElement("div", { className: "dg-menu-divider" }),
+    /* @__PURE__ */ React75.createElement("button", { className: "dg-menu-item", onClick: () => handleSort(activeMenu, "asc") }, /* @__PURE__ */ React75.createElement(ArrowUp, { size: 14 }), " Sort ascending"),
+    /* @__PURE__ */ React75.createElement("button", { className: "dg-menu-item", onClick: () => handleSort(activeMenu, "desc") }, /* @__PURE__ */ React75.createElement(ArrowDown, { size: 14 }), " Sort descending"),
+    /* @__PURE__ */ React75.createElement("div", { className: "dg-menu-divider" }),
     (() => {
       const col = resolvedColumns.find((c) => c.field === activeMenu);
       if (!col) return null;
-      return /* @__PURE__ */ React74.createElement(React74.Fragment, null, col.pinned === "left" ? /* @__PURE__ */ React74.createElement("button", { className: "dg-menu-item", onClick: () => togglePin(activeMenu, "left") }, /* @__PURE__ */ React74.createElement(Pin, { size: 14, style: { transform: "rotate(0deg)", opacity: 0.5 } }), " Unpin") : /* @__PURE__ */ React74.createElement("button", { className: "dg-menu-item", onClick: () => togglePin(activeMenu, "left") }, /* @__PURE__ */ React74.createElement(Pin, { size: 14, style: { transform: "rotate(45deg)" } }), " Pin left"), col.pinned === "right" ? /* @__PURE__ */ React74.createElement("button", { className: "dg-menu-item", onClick: () => togglePin(activeMenu, "right") }, /* @__PURE__ */ React74.createElement(Pin, { size: 14, style: { transform: "rotate(0deg)", opacity: 0.5 } }), " Unpin") : /* @__PURE__ */ React74.createElement("button", { className: "dg-menu-item", onClick: () => togglePin(activeMenu, "right") }, /* @__PURE__ */ React74.createElement(Pin, { size: 14, style: { transform: "rotate(-45deg)" } }), " Pin right"));
+      return /* @__PURE__ */ React75.createElement(React75.Fragment, null, col.pinned === "left" ? /* @__PURE__ */ React75.createElement("button", { className: "dg-menu-item", onClick: () => togglePin(activeMenu, "left") }, /* @__PURE__ */ React75.createElement(Pin, { size: 14, style: { transform: "rotate(0deg)", opacity: 0.5 } }), " Unpin") : /* @__PURE__ */ React75.createElement("button", { className: "dg-menu-item", onClick: () => togglePin(activeMenu, "left") }, /* @__PURE__ */ React75.createElement(Pin, { size: 14, style: { transform: "rotate(45deg)" } }), " Pin left"), col.pinned === "right" ? /* @__PURE__ */ React75.createElement("button", { className: "dg-menu-item", onClick: () => togglePin(activeMenu, "right") }, /* @__PURE__ */ React75.createElement(Pin, { size: 14, style: { transform: "rotate(0deg)", opacity: 0.5 } }), " Unpin") : /* @__PURE__ */ React75.createElement("button", { className: "dg-menu-item", onClick: () => togglePin(activeMenu, "right") }, /* @__PURE__ */ React75.createElement(Pin, { size: 14, style: { transform: "rotate(-45deg)" } }), " Pin right"));
     })(),
-    /* @__PURE__ */ React74.createElement("div", { className: "dg-menu-divider" }),
-    /* @__PURE__ */ React74.createElement("button", { className: "dg-menu-item", onClick: () => {
+    /* @__PURE__ */ React75.createElement("div", { className: "dg-menu-divider" }),
+    /* @__PURE__ */ React75.createElement("button", { className: "dg-menu-item", onClick: () => {
       setShowAdvancedFilter(true);
       setActiveMenu(null);
-    } }, /* @__PURE__ */ React74.createElement(Filter, { size: 14 }), " Filter\u2026"),
-    /* @__PURE__ */ React74.createElement("button", { className: "dg-menu-item", onClick: () => toggleHide(activeMenu) }, /* @__PURE__ */ React74.createElement(EyeOff, { size: 14 }), " Hide column"),
-    /* @__PURE__ */ React74.createElement("button", { className: "dg-menu-item", onClick: () => {
+    } }, /* @__PURE__ */ React75.createElement(Filter, { size: 14 }), " Filter\u2026"),
+    /* @__PURE__ */ React75.createElement("button", { className: "dg-menu-item", onClick: () => toggleHide(activeMenu) }, /* @__PURE__ */ React75.createElement(EyeOff, { size: 14 }), " Hide column"),
+    /* @__PURE__ */ React75.createElement("button", { className: "dg-menu-item", onClick: () => {
       setShowManageColumns(true);
       setActiveMenu(null);
-    } }, /* @__PURE__ */ React74.createElement(Columns, { size: 14 }), " Manage columns")
-  ), showManageColumns && /* @__PURE__ */ React74.createElement("div", { className: "dg-modal-overlay", onClick: () => setShowManageColumns(false) }, /* @__PURE__ */ React74.createElement("div", { className: "dg-modal", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React74.createElement("div", { className: "dg-modal-header" }, /* @__PURE__ */ React74.createElement("h3", null, "Manage Columns"), /* @__PURE__ */ React74.createElement("button", { className: "dg-icon-btn", onClick: () => setShowManageColumns(false) }, /* @__PURE__ */ React74.createElement(X2, { size: 18 }))), /* @__PURE__ */ React74.createElement("div", { className: "dg-modal-body" }, /* @__PURE__ */ React74.createElement("div", { className: "dg-search-wrap", style: { marginBottom: 8 } }, /* @__PURE__ */ React74.createElement(Search, { size: 14 }), /* @__PURE__ */ React74.createElement(
+    } }, /* @__PURE__ */ React75.createElement(Columns, { size: 14 }), " Manage columns")
+  ), showManageColumns && /* @__PURE__ */ React75.createElement("div", { className: "dg-modal-overlay", onClick: () => setShowManageColumns(false) }, /* @__PURE__ */ React75.createElement("div", { className: "dg-modal", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React75.createElement("div", { className: "dg-modal-header" }, /* @__PURE__ */ React75.createElement("h3", null, "Manage Columns"), /* @__PURE__ */ React75.createElement("button", { className: "dg-icon-btn", onClick: () => setShowManageColumns(false) }, /* @__PURE__ */ React75.createElement(X2, { size: 18 }))), /* @__PURE__ */ React75.createElement("div", { className: "dg-modal-body" }, /* @__PURE__ */ React75.createElement("div", { className: "dg-search-wrap", style: { marginBottom: 8 } }, /* @__PURE__ */ React75.createElement(Search, { size: 14 }), /* @__PURE__ */ React75.createElement(
     "input",
     {
       className: "dg-search",
@@ -4413,15 +4644,15 @@ function DataGrid({
   )), resolvedColumns.filter((c) => c.header.toLowerCase().includes(colSearch.toLowerCase())).map((col) => {
     const key = String(col.key);
     const isUnhideable = col.hideable === false;
-    return /* @__PURE__ */ React74.createElement("div", { key, className: `dg-col-row${isUnhideable ? " disabled" : ""}` }, /* @__PURE__ */ React74.createElement("div", { className: "dg-col-label" }, /* @__PURE__ */ React74.createElement("div", { className: "dg-col-dot", style: { background: col.hidden ? "var(--border-color)" : "var(--primary-color)" } }), col.header), !isUnhideable && /* @__PURE__ */ React74.createElement("button", { className: "dg-icon-btn", onClick: () => toggleHide(key) }, col.hidden ? /* @__PURE__ */ React74.createElement(EyeOff, { size: 14 }) : /* @__PURE__ */ React74.createElement(EyeOff, { size: 14, style: { opacity: 0.4 } })));
-  })), /* @__PURE__ */ React74.createElement("div", { className: "dg-modal-footer" }, /* @__PURE__ */ React74.createElement("button", { className: "dg-action-btn", onClick: () => setColumnOverrides((prev) => {
+    return /* @__PURE__ */ React75.createElement("div", { key, className: `dg-col-row${isUnhideable ? " disabled" : ""}` }, /* @__PURE__ */ React75.createElement("div", { className: "dg-col-label" }, /* @__PURE__ */ React75.createElement("div", { className: "dg-col-dot", style: { background: col.hidden ? "var(--border-color)" : "var(--primary-color)" } }), col.header), !isUnhideable && /* @__PURE__ */ React75.createElement("button", { className: "dg-icon-btn", onClick: () => toggleHide(key) }, col.hidden ? /* @__PURE__ */ React75.createElement(EyeOff, { size: 14 }) : /* @__PURE__ */ React75.createElement(EyeOff, { size: 14, style: { opacity: 0.4 } })));
+  })), /* @__PURE__ */ React75.createElement("div", { className: "dg-modal-footer" }, /* @__PURE__ */ React75.createElement("button", { className: "dg-action-btn", onClick: () => setColumnOverrides((prev) => {
     const next = { ...prev };
     resolvedColumns.forEach((c) => {
       const k = String(c.key);
       next[k] = { ...next[k], hidden: false };
     });
     return next;
-  }) }, "Show All"), /* @__PURE__ */ React74.createElement("button", { className: "dg-action-btn", onClick: () => {
+  }) }, "Show All"), /* @__PURE__ */ React75.createElement("button", { className: "dg-action-btn", onClick: () => {
     const newOverrides = { ...columnOverrides };
     resolvedColumns.forEach((c) => {
       if (c.hideable !== false) {
@@ -4430,21 +4661,21 @@ function DataGrid({
       }
     });
     setColumnOverrides(newOverrides);
-  } }, "Hide All")))), showAdvancedFilter && /* @__PURE__ */ React74.createElement("div", { className: "dg-modal-overlay", onClick: () => setShowAdvancedFilter(false) }, /* @__PURE__ */ React74.createElement("div", { className: "dg-modal dg-modal-wide dg-filter-modal", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React74.createElement("div", { className: "dg-modal-header" }, /* @__PURE__ */ React74.createElement("h3", null, "Filters"), /* @__PURE__ */ React74.createElement("button", { className: "dg-icon-btn", onClick: () => setShowAdvancedFilter(false) }, /* @__PURE__ */ React74.createElement(X2, { size: 18 }))), /* @__PURE__ */ React74.createElement("div", { className: "dg-modal-body" }, advancedFilters.map((f, idx) => /* @__PURE__ */ React74.createElement("div", { key: idx }, idx > 0 && /* @__PURE__ */ React74.createElement("div", { className: "dg-filter-logic" }, /* @__PURE__ */ React74.createElement(
+  } }, "Hide All")))), showAdvancedFilter && /* @__PURE__ */ React75.createElement("div", { className: "dg-modal-overlay", onClick: () => setShowAdvancedFilter(false) }, /* @__PURE__ */ React75.createElement("div", { className: "dg-modal dg-modal-wide dg-filter-modal", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React75.createElement("div", { className: "dg-modal-header" }, /* @__PURE__ */ React75.createElement("h3", null, "Filters"), /* @__PURE__ */ React75.createElement("button", { className: "dg-icon-btn", onClick: () => setShowAdvancedFilter(false) }, /* @__PURE__ */ React75.createElement(X2, { size: 18 }))), /* @__PURE__ */ React75.createElement("div", { className: "dg-modal-body" }, advancedFilters.map((f, idx) => /* @__PURE__ */ React75.createElement("div", { key: idx }, idx > 0 && /* @__PURE__ */ React75.createElement("div", { className: "dg-filter-logic" }, /* @__PURE__ */ React75.createElement(
     "button",
     {
       className: `dg-logic-btn${f.logic === "AND" ? " active" : ""}`,
       onClick: () => setAdvancedFilters((p) => p.map((fi, i) => i === idx ? { ...fi, logic: "AND" } : fi))
     },
     "AND"
-  ), /* @__PURE__ */ React74.createElement(
+  ), /* @__PURE__ */ React75.createElement(
     "button",
     {
       className: `dg-logic-btn${f.logic === "OR" ? " active" : ""}`,
       onClick: () => setAdvancedFilters((p) => p.map((fi, i) => i === idx ? { ...fi, logic: "OR" } : fi))
     },
     "OR"
-  )), /* @__PURE__ */ React74.createElement("div", { className: "dg-filter-row" }, advancedFilters.length > 1 && /* @__PURE__ */ React74.createElement("button", { className: "dg-icon-btn", onClick: () => setAdvancedFilters((p) => p.filter((_, i) => i !== idx)) }, /* @__PURE__ */ React74.createElement(X2, { size: 14 })), /* @__PURE__ */ React74.createElement(
+  )), /* @__PURE__ */ React75.createElement("div", { className: "dg-filter-row" }, advancedFilters.length > 1 && /* @__PURE__ */ React75.createElement("button", { className: "dg-icon-btn", onClick: () => setAdvancedFilters((p) => p.filter((_, i) => i !== idx)) }, /* @__PURE__ */ React75.createElement(X2, { size: 14 })), /* @__PURE__ */ React75.createElement(
     "select",
     {
       className: "dg-filter-select",
@@ -4456,20 +4687,20 @@ function DataGrid({
         setAdvancedFilters((p) => p.map((fi, i) => i === idx ? { ...fi, column: newColKey, operator: defaultOp, value: "" } : fi));
       }
     },
-    resolvedColumns.map((c) => /* @__PURE__ */ React74.createElement("option", { key: String(c.key), value: String(c.key) }, c.header))
+    resolvedColumns.map((c) => /* @__PURE__ */ React75.createElement("option", { key: String(c.key), value: String(c.key) }, c.header))
   ), (() => {
     const col = resolvedColumns.find((c) => String(c.key) === f.column);
     const operators = getOperatorsForType(col?.type);
     const hideValue = f.operator === "is empty" || f.operator === "is not empty";
-    return /* @__PURE__ */ React74.createElement(React74.Fragment, null, /* @__PURE__ */ React74.createElement(
+    return /* @__PURE__ */ React75.createElement(React75.Fragment, null, /* @__PURE__ */ React75.createElement(
       "select",
       {
         className: "dg-filter-select dg-filter-select-sm",
         value: f.operator,
         onChange: (e) => setAdvancedFilters((p) => p.map((fi, i) => i === idx ? { ...fi, operator: e.target.value, value: "" } : fi))
       },
-      operators.map((op) => /* @__PURE__ */ React74.createElement("option", { key: op.value, value: op.value }, op.label))
-    ), !hideValue && col?.type === "date" && /* @__PURE__ */ React74.createElement("div", { className: "dg-filter-datefield" }, /* @__PURE__ */ React74.createElement(
+      operators.map((op) => /* @__PURE__ */ React75.createElement("option", { key: op.value, value: op.value }, op.label))
+    ), !hideValue && col?.type === "date" && /* @__PURE__ */ React75.createElement("div", { className: "dg-filter-datefield" }, /* @__PURE__ */ React75.createElement(
       DateField,
       {
         value: f.value,
@@ -4478,17 +4709,17 @@ function DataGrid({
       }
     )), !hideValue && col?.type === "status" && (() => {
       const options = col.statusOptions || [...new Set(data.map((item) => String(item[col.field || col.key || ""])))].filter((v) => v && v !== "undefined" && v !== "null").sort();
-      return /* @__PURE__ */ React74.createElement(
+      return /* @__PURE__ */ React75.createElement(
         "select",
         {
           className: "dg-filter-select",
           value: f.value,
           onChange: (e) => setAdvancedFilters((p) => p.map((fi, i) => i === idx ? { ...fi, value: e.target.value } : fi))
         },
-        /* @__PURE__ */ React74.createElement("option", { value: "" }, "Select\u2026"),
-        options.map((opt) => /* @__PURE__ */ React74.createElement("option", { key: opt, value: opt }, opt))
+        /* @__PURE__ */ React75.createElement("option", { value: "" }, "Select\u2026"),
+        options.map((opt) => /* @__PURE__ */ React75.createElement("option", { key: opt, value: opt }, opt))
       );
-    })(), !hideValue && col?.type !== "date" && col?.type !== "status" && /* @__PURE__ */ React74.createElement(
+    })(), !hideValue && col?.type !== "date" && col?.type !== "status" && /* @__PURE__ */ React75.createElement(
       "input",
       {
         type: col?.type === "number" ? "number" : "text",
@@ -4498,7 +4729,7 @@ function DataGrid({
         onChange: (e) => setAdvancedFilters((p) => p.map((fi, i) => i === idx ? { ...fi, value: e.target.value } : fi))
       }
     ));
-  })()))), /* @__PURE__ */ React74.createElement(
+  })()))), /* @__PURE__ */ React75.createElement(
     "button",
     {
       className: "dg-action-btn",
@@ -4509,9 +4740,9 @@ function DataGrid({
         setAdvancedFilters((p) => [...p, { column: String(firstCol.key), operator: defaultOp, value: "", logic: "AND" }]);
       }
     },
-    /* @__PURE__ */ React74.createElement(Plus, { size: 14 }),
+    /* @__PURE__ */ React75.createElement(Plus, { size: 14 }),
     " Add Filter"
-  )), /* @__PURE__ */ React74.createElement("div", { className: "dg-modal-footer" }, /* @__PURE__ */ React74.createElement(
+  )), /* @__PURE__ */ React75.createElement("div", { className: "dg-modal-footer" }, /* @__PURE__ */ React75.createElement(
     "button",
     {
       className: "dg-action-btn",
@@ -4520,25 +4751,25 @@ function DataGrid({
         setAdvancedFilters([{ column: String(firstCol.key), operator: getDefaultOperator(firstCol?.type), value: "", logic: "AND" }]);
       }
     },
-    /* @__PURE__ */ React74.createElement(Trash2, { size: 14 }),
+    /* @__PURE__ */ React75.createElement(Trash2, { size: 14 }),
     " Reset"
-  ), /* @__PURE__ */ React74.createElement("button", { className: "submit-btn", onClick: () => setShowAdvancedFilter(false) }, "Apply")))));
+  ), /* @__PURE__ */ React75.createElement("button", { className: "submit-btn", onClick: () => setShowAdvancedFilter(false) }, "Apply")))));
 }
 
 // lib/Select/Select.tsx
-import React75, {
-  useState as useState9,
-  useRef as useRef9,
-  useEffect as useEffect9,
-  useCallback as useCallback3
+import React76, {
+  useState as useState10,
+  useRef as useRef10,
+  useEffect as useEffect10,
+  useCallback as useCallback4
 } from "react";
-import ReactDOM3 from "react-dom";
-var ChevronDownIcon2 = () => /* @__PURE__ */ React75.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React75.createElement("polyline", { points: "6 9 12 15 18 9" }));
-var CheckIcon2 = () => /* @__PURE__ */ React75.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React75.createElement("polyline", { points: "20 6 9 17 4 12" }));
+import ReactDOM4 from "react-dom";
+var ChevronDownIcon2 = () => /* @__PURE__ */ React76.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React76.createElement("polyline", { points: "6 9 12 15 18 9" }));
+var CheckIcon2 = () => /* @__PURE__ */ React76.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React76.createElement("polyline", { points: "20 6 9 17 4 12" }));
 function normaliseOptions(options) {
   return options.map((o) => typeof o === "string" ? { value: o, label: o } : o);
 }
-var Select = React75.forwardRef(function Select2(props, ref) {
+var Select = React76.forwardRef(function Select2(props, ref) {
   const {
     options: rawOptions,
     value,
@@ -4557,14 +4788,14 @@ var Select = React75.forwardRef(function Select2(props, ref) {
     style,
     sx
   } = props;
-  const [open, setOpen] = useState9(false);
-  const [focusedIdx, setFocusedIdx] = useState9(-1);
-  const [popupStyle, setPopupStyle] = useState9({});
-  const containerRef = useRef9(null);
-  const listRef = useRef9(null);
-  const inputId = useRef9(`rf-sel-${Math.random().toString(36).slice(2, 9)}`).current;
+  const [open, setOpen] = useState10(false);
+  const [focusedIdx, setFocusedIdx] = useState10(-1);
+  const [popupStyle, setPopupStyle] = useState10({});
+  const containerRef = useRef10(null);
+  const listRef = useRef10(null);
+  const inputId = useRef10(`rf-sel-${Math.random().toString(36).slice(2, 9)}`).current;
   const sxClass = useSx(sx);
-  const calcPopupStyle = useCallback3(() => {
+  const calcPopupStyle = useCallback4(() => {
     if (!containerRef.current) return;
     const rect = containerRef.current.getBoundingClientRect();
     setPopupStyle({
@@ -4575,28 +4806,28 @@ var Select = React75.forwardRef(function Select2(props, ref) {
   }, []);
   const options = normaliseOptions(rawOptions);
   const selectedValues = multiple ? Array.isArray(value) ? value : value != null ? [value] : [] : value != null ? [value] : [];
-  const isSelected = useCallback3(
+  const isSelected = useCallback4(
     (optValue) => selectedValues.includes(optValue),
     [selectedValues]
   );
   const getSelectedLabels = () => options.filter((o) => selectedValues.includes(o.value)).map((o) => o.label);
   const hasValue = selectedValues.length > 0;
   const isFloating = Boolean(open || hasValue);
-  const openPopup = useCallback3(() => {
+  const openPopup = useCallback4(() => {
     if (disabled) return;
     calcPopupStyle();
     setOpen(true);
     setFocusedIdx(-1);
   }, [disabled, calcPopupStyle]);
-  const closePopup = useCallback3(() => {
+  const closePopup = useCallback4(() => {
     setOpen(false);
     setFocusedIdx(-1);
   }, []);
-  const togglePopup = useCallback3(() => {
+  const togglePopup = useCallback4(() => {
     if (open) closePopup();
     else openPopup();
   }, [open, openPopup, closePopup]);
-  useEffect9(() => {
+  useEffect10(() => {
     if (!open) return;
     const handleOutside = (e) => {
       if (containerRef.current && !containerRef.current.contains(e.target)) {
@@ -4612,7 +4843,7 @@ var Select = React75.forwardRef(function Select2(props, ref) {
       window.removeEventListener("resize", calcPopupStyle);
     };
   }, [open, closePopup, calcPopupStyle]);
-  const selectOption = useCallback3((opt) => {
+  const selectOption = useCallback4((opt) => {
     if (opt.disabled) return;
     if (multiple) {
       const already = isSelected(opt.value);
@@ -4687,20 +4918,20 @@ var Select = React75.forwardRef(function Select2(props, ref) {
     if (multiple) {
       const labels = getSelectedLabels();
       if (labels.length === 0) {
-        return /* @__PURE__ */ React75.createElement("div", { className: "rf-select__chips" }, placeholder && /* @__PURE__ */ React75.createElement("span", { className: "rf-select__display rf-select__display--placeholder" }, placeholder));
+        return /* @__PURE__ */ React76.createElement("div", { className: "rf-select__chips" }, placeholder && /* @__PURE__ */ React76.createElement("span", { className: "rf-select__display rf-select__display--placeholder" }, placeholder));
       }
       if (labels.length <= 2) {
-        return /* @__PURE__ */ React75.createElement("div", { className: "rf-select__chips" }, labels.map((l, i) => /* @__PURE__ */ React75.createElement("span", { key: i, className: "rf-select__chip" }, l)));
+        return /* @__PURE__ */ React76.createElement("div", { className: "rf-select__chips" }, labels.map((l, i) => /* @__PURE__ */ React76.createElement("span", { key: i, className: "rf-select__chip" }, l)));
       }
-      return /* @__PURE__ */ React75.createElement("div", { className: "rf-select__chips" }, labels.slice(0, 2).map((l, i) => /* @__PURE__ */ React75.createElement("span", { key: i, className: "rf-select__chip" }, l)), /* @__PURE__ */ React75.createElement("span", { className: "rf-select__count" }, "+", labels.length - 2));
+      return /* @__PURE__ */ React76.createElement("div", { className: "rf-select__chips" }, labels.slice(0, 2).map((l, i) => /* @__PURE__ */ React76.createElement("span", { key: i, className: "rf-select__chip" }, l)), /* @__PURE__ */ React76.createElement("span", { className: "rf-select__count" }, "+", labels.length - 2));
     }
     const selectedOpt = options.find((o) => o.value === value);
     if (selectedOpt) {
-      return /* @__PURE__ */ React75.createElement("div", { className: "rf-select__display" }, selectedOpt.label);
+      return /* @__PURE__ */ React76.createElement("div", { className: "rf-select__display" }, selectedOpt.label);
     }
-    return /* @__PURE__ */ React75.createElement("div", { className: `rf-select__display${placeholder ? " rf-select__display--placeholder" : ""}` }, placeholder || "\xA0");
+    return /* @__PURE__ */ React76.createElement("div", { className: `rf-select__display${placeholder ? " rf-select__display--placeholder" : ""}` }, placeholder || "\xA0");
   };
-  return /* @__PURE__ */ React75.createElement(
+  return /* @__PURE__ */ React76.createElement(
     "div",
     {
       ref: (node) => {
@@ -4711,7 +4942,7 @@ var Select = React75.forwardRef(function Select2(props, ref) {
       className: rootClasses,
       style
     },
-    /* @__PURE__ */ React75.createElement(
+    /* @__PURE__ */ React76.createElement(
       "div",
       {
         className: "rf-text-field__wrapper",
@@ -4725,16 +4956,16 @@ var Select = React75.forwardRef(function Select2(props, ref) {
         onKeyDown: handleKeyDown
       },
       renderDisplay(),
-      label && /* @__PURE__ */ React75.createElement("label", { id: inputId, className: "rf-text-field__label" }, label, required && /* @__PURE__ */ React75.createElement("span", { className: "rf-text-field__asterisk" }, " *")),
-      variant === "outlined" && /* @__PURE__ */ React75.createElement("fieldset", { className: "rf-text-field__notch" }, label ? /* @__PURE__ */ React75.createElement("legend", { className: "rf-text-field__legend" }, /* @__PURE__ */ React75.createElement("span", null, label, required ? " *" : "")) : /* @__PURE__ */ React75.createElement("legend", { className: "rf-text-field__legend--empty" })),
-      /* @__PURE__ */ React75.createElement("div", { className: "rf-select__arrow", "aria-hidden": "true" }, /* @__PURE__ */ React75.createElement(ChevronDownIcon2, null))
+      label && /* @__PURE__ */ React76.createElement("label", { id: inputId, className: "rf-text-field__label" }, label, required && /* @__PURE__ */ React76.createElement("span", { className: "rf-text-field__asterisk" }, " *")),
+      variant === "outlined" && /* @__PURE__ */ React76.createElement("fieldset", { className: "rf-text-field__notch" }, label ? /* @__PURE__ */ React76.createElement("legend", { className: "rf-text-field__legend" }, /* @__PURE__ */ React76.createElement("span", null, label, required ? " *" : "")) : /* @__PURE__ */ React76.createElement("legend", { className: "rf-text-field__legend--empty" })),
+      /* @__PURE__ */ React76.createElement("div", { className: "rf-select__arrow", "aria-hidden": "true" }, /* @__PURE__ */ React76.createElement(ChevronDownIcon2, null))
     ),
-    helperText && /* @__PURE__ */ React75.createElement("div", { className: `rf-text-field__helper-text${error ? " rf-text-field__helper-text--error" : ""}` }, helperText),
-    open && !disabled && ReactDOM3.createPortal(
-      /* @__PURE__ */ React75.createElement("div", { className: "rf-select__popup", role: "presentation", style: popupStyle }, /* @__PURE__ */ React75.createElement("ul", { ref: listRef, className: "rf-select__listbox", role: "listbox", "aria-multiselectable": multiple }, options.map((opt, idx) => {
+    helperText && /* @__PURE__ */ React76.createElement("div", { className: `rf-text-field__helper-text${error ? " rf-text-field__helper-text--error" : ""}` }, helperText),
+    open && !disabled && ReactDOM4.createPortal(
+      /* @__PURE__ */ React76.createElement("div", { className: "rf-select__popup", role: "presentation", style: popupStyle }, /* @__PURE__ */ React76.createElement("ul", { ref: listRef, className: "rf-select__listbox", role: "listbox", "aria-multiselectable": multiple }, options.map((opt, idx) => {
         const selected = isSelected(opt.value);
         const focused = focusedIdx === idx;
-        return /* @__PURE__ */ React75.createElement(
+        return /* @__PURE__ */ React76.createElement(
           "li",
           {
             key: opt.value,
@@ -4753,8 +4984,8 @@ var Select = React75.forwardRef(function Select2(props, ref) {
             onMouseDown: (e) => e.preventDefault(),
             onClick: () => selectOption(opt)
           },
-          /* @__PURE__ */ React75.createElement("span", { className: "rf-select__option-label" }, opt.label),
-          /* @__PURE__ */ React75.createElement("span", { className: "rf-select__option-check", "aria-hidden": "true" }, /* @__PURE__ */ React75.createElement(CheckIcon2, null))
+          /* @__PURE__ */ React76.createElement("span", { className: "rf-select__option-label" }, opt.label),
+          /* @__PURE__ */ React76.createElement("span", { className: "rf-select__option-check", "aria-hidden": "true" }, /* @__PURE__ */ React76.createElement(CheckIcon2, null))
         );
       }))),
       document.body
@@ -4764,11 +4995,11 @@ var Select = React75.forwardRef(function Select2(props, ref) {
 Select.displayName = "Select";
 
 // lib/Slider/Slider.tsx
-import React76, {
-  useState as useState10,
-  useRef as useRef10,
-  useEffect as useEffect10,
-  useCallback as useCallback4
+import React77, {
+  useState as useState11,
+  useRef as useRef11,
+  useEffect as useEffect11,
+  useCallback as useCallback5
 } from "react";
 function clamp(val, min, max) {
   return Math.max(min, Math.min(max, val));
@@ -4779,7 +5010,7 @@ function snapToStep(val, min, step) {
 function pct(val, min, max) {
   return (val - min) / (max - min) * 100;
 }
-var Slider = React76.forwardRef(function Slider2(props, ref) {
+var Slider = React77.forwardRef(function Slider2(props, ref) {
   const {
     value,
     onChange,
@@ -4799,9 +5030,9 @@ var Slider = React76.forwardRef(function Slider2(props, ref) {
     sx
   } = props;
   const sxClass = useSx(sx);
-  const trackRef = useRef10(null);
-  const draggingThumb = useRef10(null);
-  const [dragging, setDragging] = useState10(null);
+  const trackRef = useRef11(null);
+  const draggingThumb = useRef11(null);
+  const [dragging, setDragging] = useState11(null);
   const isRange = range || Array.isArray(value);
   const rawVal = value ?? (isRange ? [min, max] : min);
   const vals = isRange ? Array.isArray(rawVal) ? [rawVal[0], rawVal[1]] : [rawVal, rawVal] : [rawVal, rawVal];
@@ -4812,7 +5043,7 @@ var Slider = React76.forwardRef(function Slider2(props, ref) {
     computedMarks.push(...marks);
   }
   const hasLabelledMarks = computedMarks.some((m) => m.label);
-  const getValueFromPointer = useCallback4((e) => {
+  const getValueFromPointer = useCallback5((e) => {
     const track = trackRef.current;
     if (!track) return min;
     const rect = track.getBoundingClientRect();
@@ -4826,7 +5057,7 @@ var Slider = React76.forwardRef(function Slider2(props, ref) {
     const raw = min + ratio * (max - min);
     return clamp(snapToStep(raw, min, step), min, max);
   }, [min, max, step, orientation]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (dragging === null) return;
     const onMove = (e) => {
       const newVal = getValueFromPointer(e);
@@ -4919,7 +5150,7 @@ var Slider = React76.forwardRef(function Slider2(props, ref) {
     const val = vals[thumb];
     const p = pct(val, min, max);
     const thumbStyle = orientation === "vertical" ? { bottom: `${p}%`, transform: "translate(-50%, 50%)" } : { left: `${p}%` };
-    return /* @__PURE__ */ React76.createElement(
+    return /* @__PURE__ */ React77.createElement(
       "div",
       {
         key: thumb,
@@ -4935,30 +5166,30 @@ var Slider = React76.forwardRef(function Slider2(props, ref) {
         onPointerDown: (e) => handleThumbPointerDown(e, thumb),
         onKeyDown: (e) => handleThumbKeyDown(e, thumb)
       },
-      valueLabelDisplay !== "off" && /* @__PURE__ */ React76.createElement("div", { className: "rf-slider__value-label", "aria-hidden": "true" }, val)
+      valueLabelDisplay !== "off" && /* @__PURE__ */ React77.createElement("div", { className: "rf-slider__value-label", "aria-hidden": "true" }, val)
     );
   };
-  return /* @__PURE__ */ React76.createElement("div", { ref, className: rootClasses, style }, label && /* @__PURE__ */ React76.createElement("div", { className: "rf-slider__label" }, label), /* @__PURE__ */ React76.createElement(
+  return /* @__PURE__ */ React77.createElement("div", { ref, className: rootClasses, style }, label && /* @__PURE__ */ React77.createElement("div", { className: "rf-slider__label" }, label), /* @__PURE__ */ React77.createElement(
     "div",
     {
       ref: trackRef,
       className: "rf-slider__track-container",
       onPointerDown: handleTrackPointerDown
     },
-    /* @__PURE__ */ React76.createElement("div", { className: "rf-slider__rail", "aria-hidden": "true" }),
-    /* @__PURE__ */ React76.createElement("div", { className: "rf-slider__track", style: trackStyle, "aria-hidden": "true" }),
+    /* @__PURE__ */ React77.createElement("div", { className: "rf-slider__rail", "aria-hidden": "true" }),
+    /* @__PURE__ */ React77.createElement("div", { className: "rf-slider__track", style: trackStyle, "aria-hidden": "true" }),
     computedMarks.map((mark) => {
       const p = pct(mark.value, min, max);
       const isActive = isRange ? mark.value >= vals[0] && mark.value <= vals[1] : mark.value <= vals[0];
       const markStyle = orientation === "vertical" ? { bottom: `${p}%`, transform: "translate(-50%, 50%)" } : { left: `${p}%` };
-      return /* @__PURE__ */ React76.createElement(React76.Fragment, { key: mark.value }, /* @__PURE__ */ React76.createElement(
+      return /* @__PURE__ */ React77.createElement(React77.Fragment, { key: mark.value }, /* @__PURE__ */ React77.createElement(
         "div",
         {
           className: `rf-slider__mark${isActive ? " rf-slider__mark--active" : ""}`,
           style: markStyle,
           "aria-hidden": "true"
         }
-      ), mark.label && orientation === "horizontal" && /* @__PURE__ */ React76.createElement(
+      ), mark.label && orientation === "horizontal" && /* @__PURE__ */ React77.createElement(
         "div",
         {
           className: "rf-slider__mark-label",
@@ -4970,13 +5201,13 @@ var Slider = React76.forwardRef(function Slider2(props, ref) {
     }),
     renderThumb(0),
     isRange && renderThumb(1)
-  ), hasLabelledMarks && orientation === "horizontal" && /* @__PURE__ */ React76.createElement("div", { className: "rf-slider__marks-labels", "aria-hidden": "true" }));
+  ), hasLabelledMarks && orientation === "horizontal" && /* @__PURE__ */ React77.createElement("div", { className: "rf-slider__marks-labels", "aria-hidden": "true" }));
 });
 Slider.displayName = "Slider";
 
 // lib/Switch/Switch.tsx
-import React77, { useRef as useRef11 } from "react";
-var Switch = React77.forwardRef(function Switch2(props, ref) {
+import React78, { useRef as useRef12 } from "react";
+var Switch = React78.forwardRef(function Switch2(props, ref) {
   const {
     checked = false,
     onChange,
@@ -4991,8 +5222,8 @@ var Switch = React77.forwardRef(function Switch2(props, ref) {
     sx
   } = props;
   const sxClass = useSx(sx);
-  const inputRef = useRef11(null);
-  const inputId = useRef11(`rf-sw-${Math.random().toString(36).slice(2, 9)}`).current;
+  const inputRef = useRef12(null);
+  const inputId = useRef12(`rf-sw-${Math.random().toString(36).slice(2, 9)}`).current;
   const handleChange = (e) => {
     if (!disabled) onChange?.(e.target.checked);
   };
@@ -5006,7 +5237,7 @@ var Switch = React77.forwardRef(function Switch2(props, ref) {
     sxClass,
     className
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ React77.createElement(
+  return /* @__PURE__ */ React78.createElement(
     "label",
     {
       ref,
@@ -5014,7 +5245,7 @@ var Switch = React77.forwardRef(function Switch2(props, ref) {
       style,
       htmlFor: inputId
     },
-    /* @__PURE__ */ React77.createElement(
+    /* @__PURE__ */ React78.createElement(
       "input",
       {
         ref: inputRef,
@@ -5029,16 +5260,16 @@ var Switch = React77.forwardRef(function Switch2(props, ref) {
         "aria-checked": checked
       }
     ),
-    /* @__PURE__ */ React77.createElement("div", { className: "rf-switch__track", "aria-hidden": "true" }, /* @__PURE__ */ React77.createElement("div", { className: "rf-switch__thumb" })),
-    label && /* @__PURE__ */ React77.createElement("span", { className: "rf-switch__label" }, label, required && /* @__PURE__ */ React77.createElement("span", { style: { color: "var(--tf-error-color, #d32f2f)" } }, " *"))
+    /* @__PURE__ */ React78.createElement("div", { className: "rf-switch__track", "aria-hidden": "true" }, /* @__PURE__ */ React78.createElement("div", { className: "rf-switch__thumb" })),
+    label && /* @__PURE__ */ React78.createElement("span", { className: "rf-switch__label" }, label, required && /* @__PURE__ */ React78.createElement("span", { style: { color: "var(--tf-error-color, #d32f2f)" } }, " *"))
   );
 });
 Switch.displayName = "Switch";
 
 // lib/RadioGroup/RadioGroup.tsx
-import React78, { useRef as useRef12, createContext as createContext3, useContext as useContext3 } from "react";
+import React79, { useRef as useRef13, createContext as createContext3, useContext as useContext3 } from "react";
 var RadioGroupContext = createContext3({});
-var Radio = React78.forwardRef(function Radio2(props, ref) {
+var Radio = React79.forwardRef(function Radio2(props, ref) {
   const ctx = useContext3(RadioGroupContext);
   const {
     value,
@@ -5051,7 +5282,7 @@ var Radio = React78.forwardRef(function Radio2(props, ref) {
     sx
   } = props;
   const sxClass = useSx(sx);
-  const inputId = useRef12(`rf-radio-${Math.random().toString(36).slice(2, 9)}`).current;
+  const inputId = useRef13(`rf-radio-${Math.random().toString(36).slice(2, 9)}`).current;
   const isChecked = checkedProp !== void 0 ? checkedProp : ctx.value === value;
   const isDisabled = disabledProp !== void 0 ? disabledProp : ctx.disabled ?? false;
   const size = sizeProp ?? ctx.size ?? "medium";
@@ -5069,7 +5300,7 @@ var Radio = React78.forwardRef(function Radio2(props, ref) {
     isDisabled ? "rf-radio--disabled" : "",
     sxClass
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ React78.createElement("label", { ref, className: rootClasses, htmlFor: inputId }, /* @__PURE__ */ React78.createElement(
+  return /* @__PURE__ */ React79.createElement("label", { ref, className: rootClasses, htmlFor: inputId }, /* @__PURE__ */ React79.createElement(
     "input",
     {
       id: inputId,
@@ -5082,10 +5313,10 @@ var Radio = React78.forwardRef(function Radio2(props, ref) {
       name,
       "aria-checked": isChecked
     }
-  ), /* @__PURE__ */ React78.createElement("div", { className: "rf-radio__control", "aria-hidden": "true" }, /* @__PURE__ */ React78.createElement("div", { className: "rf-radio__ripple" }), /* @__PURE__ */ React78.createElement("div", { className: "rf-radio__outer" }, /* @__PURE__ */ React78.createElement("div", { className: "rf-radio__inner" }))), label && /* @__PURE__ */ React78.createElement("span", { className: "rf-radio__label" }, label));
+  ), /* @__PURE__ */ React79.createElement("div", { className: "rf-radio__control", "aria-hidden": "true" }, /* @__PURE__ */ React79.createElement("div", { className: "rf-radio__ripple" }), /* @__PURE__ */ React79.createElement("div", { className: "rf-radio__outer" }, /* @__PURE__ */ React79.createElement("div", { className: "rf-radio__inner" }))), label && /* @__PURE__ */ React79.createElement("span", { className: "rf-radio__label" }, label));
 });
 Radio.displayName = "Radio";
-var RadioGroup = React78.forwardRef(function RadioGroup2(props, ref) {
+var RadioGroup = React79.forwardRef(function RadioGroup2(props, ref) {
   const {
     value,
     onChange,
@@ -5101,7 +5332,7 @@ var RadioGroup = React78.forwardRef(function RadioGroup2(props, ref) {
     sx
   } = props;
   const sxClass = useSx(sx);
-  const groupName = useRef12(name ?? `rf-rg-${Math.random().toString(36).slice(2, 9)}`).current;
+  const groupName = useRef13(name ?? `rf-rg-${Math.random().toString(36).slice(2, 9)}`).current;
   const rootClasses = [
     "rf-radio-group",
     row ? "rf-radio-group--row" : "",
@@ -5109,7 +5340,7 @@ var RadioGroup = React78.forwardRef(function RadioGroup2(props, ref) {
     sxClass,
     className
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ React78.createElement(RadioGroupContext.Provider, { value: { value, onChange, name: groupName, disabled, size } }, /* @__PURE__ */ React78.createElement(
+  return /* @__PURE__ */ React79.createElement(RadioGroupContext.Provider, { value: { value, onChange, name: groupName, disabled, size } }, /* @__PURE__ */ React79.createElement(
     "div",
     {
       ref,
@@ -5118,8 +5349,8 @@ var RadioGroup = React78.forwardRef(function RadioGroup2(props, ref) {
       role: "radiogroup",
       "aria-label": label
     },
-    label && /* @__PURE__ */ React78.createElement("div", { className: "rf-radio-group__label" }, label),
-    options ? options.map((opt) => /* @__PURE__ */ React78.createElement(
+    label && /* @__PURE__ */ React79.createElement("div", { className: "rf-radio-group__label" }, label),
+    options ? options.map((opt) => /* @__PURE__ */ React79.createElement(
       Radio,
       {
         key: opt.value,
@@ -5133,12 +5364,12 @@ var RadioGroup = React78.forwardRef(function RadioGroup2(props, ref) {
 RadioGroup.displayName = "RadioGroup";
 
 // lib/Rating/Rating.tsx
-import React79, {
-  useState as useState11,
-  useRef as useRef13
+import React80, {
+  useState as useState12,
+  useRef as useRef14
 } from "react";
 var starSize = { small: 18, medium: 24, large: 32 };
-var FilledStarIcon = ({ size }) => /* @__PURE__ */ React79.createElement(
+var FilledStarIcon = ({ size }) => /* @__PURE__ */ React80.createElement(
   "svg",
   {
     width: size,
@@ -5147,9 +5378,9 @@ var FilledStarIcon = ({ size }) => /* @__PURE__ */ React79.createElement(
     fill: "currentColor",
     "aria-hidden": "true"
   },
-  /* @__PURE__ */ React79.createElement("path", { d: "M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" })
+  /* @__PURE__ */ React80.createElement("path", { d: "M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" })
 );
-var EmptyStarIcon = ({ size }) => /* @__PURE__ */ React79.createElement(
+var EmptyStarIcon = ({ size }) => /* @__PURE__ */ React80.createElement(
   "svg",
   {
     width: size,
@@ -5160,9 +5391,9 @@ var EmptyStarIcon = ({ size }) => /* @__PURE__ */ React79.createElement(
     strokeWidth: "1.6",
     "aria-hidden": "true"
   },
-  /* @__PURE__ */ React79.createElement("path", { d: "M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" })
+  /* @__PURE__ */ React80.createElement("path", { d: "M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" })
 );
-var Rating = React79.forwardRef(function Rating2(props, ref) {
+var Rating = React80.forwardRef(function Rating2(props, ref) {
   const {
     value,
     onChange,
@@ -5180,13 +5411,13 @@ var Rating = React79.forwardRef(function Rating2(props, ref) {
     sx
   } = props;
   const sxClass = useSx(sx);
-  const [hoverValue, setHoverValue] = useState11(null);
-  const starsRef = useRef13(null);
+  const [hoverValue, setHoverValue] = useState12(null);
+  const starsRef = useRef14(null);
   const currentValue = value ?? 0;
   const displayValue = hoverValue !== null ? hoverValue : currentValue;
   const iconSize = starSize[size] ?? 24;
-  const renderedFilledIcon = icon ?? /* @__PURE__ */ React79.createElement(FilledStarIcon, { size: iconSize });
-  const renderedEmptyIcon = emptyIcon ?? /* @__PURE__ */ React79.createElement(EmptyStarIcon, { size: iconSize });
+  const renderedFilledIcon = icon ?? /* @__PURE__ */ React80.createElement(FilledStarIcon, { size: iconSize });
+  const renderedEmptyIcon = emptyIcon ?? /* @__PURE__ */ React80.createElement(EmptyStarIcon, { size: iconSize });
   const isFilled = (pos) => {
     if (highlightSelectedOnly) return displayValue === pos;
     return displayValue >= pos - (precision < 1 ? 0.25 : 0);
@@ -5247,7 +5478,7 @@ var Rating = React79.forwardRef(function Rating2(props, ref) {
     sxClass,
     className
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ React79.createElement("div", { ref, className: rootClasses, style }, label && /* @__PURE__ */ React79.createElement("div", { className: "rf-rating__label" }, label), /* @__PURE__ */ React79.createElement(
+  return /* @__PURE__ */ React80.createElement("div", { ref, className: rootClasses, style }, label && /* @__PURE__ */ React80.createElement("div", { className: "rf-rating__label" }, label), /* @__PURE__ */ React80.createElement(
     "div",
     {
       ref: starsRef,
@@ -5264,7 +5495,7 @@ var Rating = React79.forwardRef(function Rating2(props, ref) {
         "rf-rating__item",
         isHovered ? "rf-rating__item--hovered" : ""
       ].filter(Boolean).join(" ");
-      return /* @__PURE__ */ React79.createElement(
+      return /* @__PURE__ */ React80.createElement(
         "button",
         {
           key: pos,
@@ -5279,15 +5510,15 @@ var Rating = React79.forwardRef(function Rating2(props, ref) {
         },
         halfFilled ? (
           // Half-star: show half filled + half empty
-          /* @__PURE__ */ React79.createElement("div", { className: "rf-rating__icon-container", style: { position: "relative" } }, /* @__PURE__ */ React79.createElement("span", { className: "rf-rating__icon--empty" }, renderedEmptyIcon), /* @__PURE__ */ React79.createElement(
+          /* @__PURE__ */ React80.createElement("div", { className: "rf-rating__icon-container", style: { position: "relative" } }, /* @__PURE__ */ React80.createElement("span", { className: "rf-rating__icon--empty" }, renderedEmptyIcon), /* @__PURE__ */ React80.createElement(
             "span",
             {
               className: "rf-rating__half-left",
               style: { position: "absolute", inset: 0, width: "50%", overflow: "hidden" }
             },
-            /* @__PURE__ */ React79.createElement("span", { className: "rf-rating__icon--filled" }, renderedFilledIcon)
+            /* @__PURE__ */ React80.createElement("span", { className: "rf-rating__icon--filled" }, renderedFilledIcon)
           ))
-        ) : /* @__PURE__ */ React79.createElement("div", { className: "rf-rating__icon-container" }, /* @__PURE__ */ React79.createElement("span", { className: filled ? "rf-rating__icon--filled" : "rf-rating__icon--empty" }, filled ? renderedFilledIcon : renderedEmptyIcon))
+        ) : /* @__PURE__ */ React80.createElement("div", { className: "rf-rating__icon-container" }, /* @__PURE__ */ React80.createElement("span", { className: filled ? "rf-rating__icon--filled" : "rf-rating__icon--empty" }, filled ? renderedFilledIcon : renderedEmptyIcon))
       );
     })
   ));
@@ -5295,12 +5526,12 @@ var Rating = React79.forwardRef(function Rating2(props, ref) {
 Rating.displayName = "Rating";
 
 // lib/ToggleButton/ToggleButton.tsx
-import React80, {
+import React81, {
   createContext as createContext4,
   useContext as useContext4
 } from "react";
 var ToggleGroupContext = createContext4({});
-var ToggleButton = React80.forwardRef(
+var ToggleButton = React81.forwardRef(
   function ToggleButton2(props, ref) {
     const ctx = useContext4(ToggleGroupContext);
     const { value, children, disabled: disabledProp, selected: selectedProp, sx } = props;
@@ -5333,7 +5564,7 @@ var ToggleButton = React80.forwardRef(
         }
       }
     };
-    const isIconOnly = React80.Children.count(children) === 1 && React80.isValidElement(children) && children.type === "svg";
+    const isIconOnly = React81.Children.count(children) === 1 && React81.isValidElement(children) && children.type === "svg";
     const btnClasses = [
       "rf-toggle-btn",
       isSelected ? "rf-toggle-btn--selected" : "",
@@ -5341,7 +5572,7 @@ var ToggleButton = React80.forwardRef(
       isIconOnly ? "rf-toggle-btn--icon-only" : "",
       sxClass
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ React80.createElement(
+    return /* @__PURE__ */ React81.createElement(
       "button",
       {
         ref,
@@ -5356,7 +5587,7 @@ var ToggleButton = React80.forwardRef(
   }
 );
 ToggleButton.displayName = "ToggleButton";
-var ToggleButtonGroup = React80.forwardRef(
+var ToggleButtonGroup = React81.forwardRef(
   function ToggleButtonGroup2(props, ref) {
     const {
       value,
@@ -5383,7 +5614,7 @@ var ToggleButtonGroup = React80.forwardRef(
       sxClass,
       className
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ React80.createElement(ToggleGroupContext.Provider, { value: { value, onChange, exclusive, size, disabled, color } }, /* @__PURE__ */ React80.createElement(
+    return /* @__PURE__ */ React81.createElement(ToggleGroupContext.Provider, { value: { value, onChange, exclusive, size, disabled, color } }, /* @__PURE__ */ React81.createElement(
       "div",
       {
         ref,
@@ -5399,7 +5630,7 @@ var ToggleButtonGroup = React80.forwardRef(
 ToggleButtonGroup.displayName = "ToggleButtonGroup";
 
 // lib/Avatar/Avatar.tsx
-import React81, { useState as useState12 } from "react";
+import React82, { useState as useState13 } from "react";
 var DEFAULT_PALETTE = [
   "#a41b06",
   "#8b1605",
@@ -5434,7 +5665,7 @@ function getInitials(alt) {
   }
   return words[0][0].toUpperCase();
 }
-var Avatar = React81.forwardRef(
+var Avatar = React82.forwardRef(
   ({
     src,
     alt,
@@ -5449,7 +5680,7 @@ var Avatar = React81.forwardRef(
     sx
   }, ref) => {
     const sxClass = useSx(sx);
-    const [imgError, setImgError] = useState12(false);
+    const [imgError, setImgError] = useState13(false);
     const { className: sizeClass, style: sizeStyle } = getSizeStyle(size);
     const bgColor = color || DEFAULT_PALETTE[_avatarColorIndex % DEFAULT_PALETTE.length];
     const classes = [
@@ -5469,7 +5700,7 @@ var Avatar = React81.forwardRef(
       inlineStyle.backgroundColor = bgColor;
       inlineStyle.color = "#ffffff";
     }
-    return /* @__PURE__ */ React81.createElement("div", { ref, className: classes, style: inlineStyle, "aria-label": alt, role: alt ? "img" : void 0, onClick, tabIndex: onClick ? 0 : void 0 }, showImage ? /* @__PURE__ */ React81.createElement(
+    return /* @__PURE__ */ React82.createElement("div", { ref, className: classes, style: inlineStyle, "aria-label": alt, role: alt ? "img" : void 0, onClick, tabIndex: onClick ? 0 : void 0 }, showImage ? /* @__PURE__ */ React82.createElement(
       "img",
       {
         src,
@@ -5478,7 +5709,7 @@ var Avatar = React81.forwardRef(
         onError: () => setImgError(true),
         ...imgProps
       }
-    ) : /* @__PURE__ */ React81.createElement("span", { className: "rf-avatar__initials" }, content));
+    ) : /* @__PURE__ */ React82.createElement("span", { className: "rf-avatar__initials" }, content));
   }
 );
 Avatar.displayName = "Avatar";
@@ -5491,7 +5722,7 @@ var AvatarGroup = ({
   sx
 }) => {
   const sxClass = useSx(sx);
-  const childArray = React81.Children.toArray(children);
+  const childArray = React82.Children.toArray(children);
   const totalCount = childArray.length;
   const overflowCount = totalCount > max ? totalCount - (max - 1) : 0;
   const visibleChildren = overflowCount > 0 ? childArray.slice(0, max - 1) : childArray;
@@ -5505,7 +5736,7 @@ var AvatarGroup = ({
   }
   const classes = ["rf-avatar-group", spacingClass, sxClass, className].filter(Boolean).join(" ");
   const avatarsToRender = [...visibleChildren].reverse();
-  return /* @__PURE__ */ React81.createElement("div", { className: classes, style, role: "group" }, overflowCount > 0 && /* @__PURE__ */ React81.createElement(
+  return /* @__PURE__ */ React82.createElement("div", { className: classes, style, role: "group" }, overflowCount > 0 && /* @__PURE__ */ React82.createElement(
     Avatar,
     {
       className: "rf-avatar-group__overflow",
@@ -5517,7 +5748,7 @@ var AvatarGroup = ({
   ), avatarsToRender.map((child, i) => {
     if (typeof spacing === "number") {
       const typedChild = child;
-      return React81.cloneElement(typedChild, {
+      return React82.cloneElement(typedChild, {
         key: i,
         style: {
           marginLeft: i < avatarsToRender.length - 1 ? -spacing : 0,
@@ -5531,7 +5762,7 @@ var AvatarGroup = ({
 AvatarGroup.displayName = "AvatarGroup";
 
 // lib/Chip/Chip.tsx
-import React82 from "react";
+import React83 from "react";
 var Chip = ({
   label,
   onDelete,
@@ -5569,7 +5800,7 @@ var Chip = ({
       onDelete();
     }
   };
-  return /* @__PURE__ */ React82.createElement(
+  return /* @__PURE__ */ React83.createElement(
     "div",
     {
       className: classes,
@@ -5580,10 +5811,10 @@ var Chip = ({
       onKeyDown: !disabled ? handleKeyDown : void 0,
       "aria-disabled": disabled || void 0
     },
-    avatar && /* @__PURE__ */ React82.createElement("span", { className: "rf-chip__avatar" }, avatar),
-    !avatar && icon && /* @__PURE__ */ React82.createElement("span", { className: "rf-chip__icon", "aria-hidden": "true" }, icon),
-    /* @__PURE__ */ React82.createElement("span", { className: "rf-chip__label" }, label),
-    onDelete && /* @__PURE__ */ React82.createElement(
+    avatar && /* @__PURE__ */ React83.createElement("span", { className: "rf-chip__avatar" }, avatar),
+    !avatar && icon && /* @__PURE__ */ React83.createElement("span", { className: "rf-chip__icon", "aria-hidden": "true" }, icon),
+    /* @__PURE__ */ React83.createElement("span", { className: "rf-chip__label" }, label),
+    onDelete && /* @__PURE__ */ React83.createElement(
       "button",
       {
         className: "rf-chip__delete",
@@ -5604,7 +5835,7 @@ var Chip = ({
 Chip.displayName = "Chip";
 
 // lib/Divider/Divider.tsx
-import React83 from "react";
+import React84 from "react";
 var Divider = ({
   orientation = "horizontal",
   variant = "fullWidth",
@@ -5618,7 +5849,7 @@ var Divider = ({
   sx
 }) => {
   const sxClass = useSx(sx);
-  const hasChildren = React83.Children.count(children) > 0;
+  const hasChildren = React84.Children.count(children) > 0;
   const variantClass = variant === "inset" ? "rf-divider--inset" : variant === "middle" ? "rf-divider--middle" : "";
   const classes = [
     "rf-divider",
@@ -5634,7 +5865,7 @@ var Divider = ({
   ].filter(Boolean).join(" ");
   const Tag = component || (hasChildren ? "div" : "hr");
   if (!hasChildren) {
-    return /* @__PURE__ */ React83.createElement(
+    return /* @__PURE__ */ React84.createElement(
       Tag,
       {
         className: classes,
@@ -5643,7 +5874,7 @@ var Divider = ({
       }
     );
   }
-  return /* @__PURE__ */ React83.createElement(
+  return /* @__PURE__ */ React84.createElement(
     Tag,
     {
       className: classes,
@@ -5651,13 +5882,13 @@ var Divider = ({
       role: "separator",
       "aria-orientation": orientation
     },
-    /* @__PURE__ */ React83.createElement("span", { className: "rf-divider__text" }, children)
+    /* @__PURE__ */ React84.createElement("span", { className: "rf-divider__text" }, children)
   );
 };
 Divider.displayName = "Divider";
 
 // lib/List/List.tsx
-import React84 from "react";
+import React85 from "react";
 var List = ({
   dense = false,
   disablePadding = false,
@@ -5675,7 +5906,7 @@ var List = ({
     sxClass,
     className
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ React84.createElement("ul", { className: classes, style }, subheader, children);
+  return /* @__PURE__ */ React85.createElement("ul", { className: classes, style }, subheader, children);
 };
 List.displayName = "List";
 var ListItem = ({
@@ -5699,7 +5930,7 @@ var ListItem = ({
     sxClass,
     className
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ React84.createElement("li", { className: classes, style }, /* @__PURE__ */ React84.createElement("div", { className: "rf-list-item__content" }, children), secondaryAction && /* @__PURE__ */ React84.createElement("div", { className: "rf-list-item__secondary-action" }, secondaryAction));
+  return /* @__PURE__ */ React85.createElement("li", { className: classes, style }, /* @__PURE__ */ React85.createElement("div", { className: "rf-list-item__content" }, children), secondaryAction && /* @__PURE__ */ React85.createElement("div", { className: "rf-list-item__secondary-action" }, secondaryAction));
 };
 ListItem.displayName = "ListItem";
 var ListItemText = ({
@@ -5716,12 +5947,12 @@ var ListItemText = ({
     inset ? "rf-list-item-text--inset" : "",
     sxClass
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ React84.createElement("div", { className: classes }, /* @__PURE__ */ React84.createElement("p", { className: "rf-list-item-text__primary", ...primaryTypographyProps }, primary), secondary && /* @__PURE__ */ React84.createElement("p", { className: "rf-list-item-text__secondary", ...secondaryTypographyProps }, secondary));
+  return /* @__PURE__ */ React85.createElement("div", { className: classes }, /* @__PURE__ */ React85.createElement("p", { className: "rf-list-item-text__primary", ...primaryTypographyProps }, primary), secondary && /* @__PURE__ */ React85.createElement("p", { className: "rf-list-item-text__secondary", ...secondaryTypographyProps }, secondary));
 };
 ListItemText.displayName = "ListItemText";
 var ListItemIcon = ({ children, sx }) => {
   const sxClass = useSx(sx);
-  return /* @__PURE__ */ React84.createElement("div", { className: ["rf-list-item-icon", sxClass].filter(Boolean).join(" "), "aria-hidden": "true" }, children);
+  return /* @__PURE__ */ React85.createElement("div", { className: ["rf-list-item-icon", sxClass].filter(Boolean).join(" "), "aria-hidden": "true" }, children);
 };
 ListItemIcon.displayName = "ListItemIcon";
 var ListItemButton = ({
@@ -5753,7 +5984,7 @@ var ListItemButton = ({
     "aria-disabled": disabled || void 0
   };
   if (href) {
-    return /* @__PURE__ */ React84.createElement(
+    return /* @__PURE__ */ React85.createElement(
       "a",
       {
         href,
@@ -5764,7 +5995,7 @@ var ListItemButton = ({
       children
     );
   }
-  return /* @__PURE__ */ React84.createElement(
+  return /* @__PURE__ */ React85.createElement(
     "button",
     {
       type: "button",
@@ -5793,12 +6024,12 @@ var ListSubheader = ({
     color !== "default" ? `rf-list-subheader--color-${color}` : "",
     sxClass
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ React84.createElement("li", { className: classes, role: "presentation", "aria-label": typeof children === "string" ? children : void 0 }, children);
+  return /* @__PURE__ */ React85.createElement("li", { className: classes, role: "presentation", "aria-label": typeof children === "string" ? children : void 0 }, children);
 };
 ListSubheader.displayName = "ListSubheader";
 
 // lib/Typography/Typography.tsx
-import React85 from "react";
+import React86 from "react";
 var VARIANT_ELEMENT_MAP = {
   h1: "h1",
   h2: "h2",
@@ -5807,353 +6038,123 @@ var VARIANT_ELEMENT_MAP = {
   h5: "h5",
   h6: "h6",
   subtitle1: "h6",
-  subtitle2: "h6",
-  body1: "p",
-  body2: "p",
-  caption: "span",
-  overline: "span",
-  button: "span"
-};
-var COLOR_CLASSES = {
-  primary: "rf-typography--color-primary",
-  secondary: "rf-typography--color-secondary",
-  textPrimary: "rf-typography--color-textPrimary",
-  textSecondary: "rf-typography--color-textSecondary",
-  error: "rf-typography--color-error"
-};
-var WEIGHT_CLASSES = {
-  light: "rf-typography--weight-light",
-  regular: "rf-typography--weight-regular",
-  medium: "rf-typography--weight-medium",
-  bold: "rf-typography--weight-bold"
-};
-var Typography = ({
-  variant = "body1",
-  component,
-  align = "inherit",
-  color,
-  noWrap = false,
-  gutterBottom = false,
-  paragraph = false,
-  fontWeight,
-  children,
-  className = "",
-  style,
-  sx
-}) => {
-  const sxClass = useSx(sx);
-  const Tag = component || (paragraph ? "p" : VARIANT_ELEMENT_MAP[variant] || "span");
-  const colorClass = color ? COLOR_CLASSES[color] : "";
-  const colorStyle = color && !COLOR_CLASSES[color] ? { color } : {};
-  let weightClass = "";
-  let weightStyle = {};
-  if (fontWeight !== void 0) {
-    if (typeof fontWeight === "string") {
-      weightClass = WEIGHT_CLASSES[fontWeight] || "";
-    } else {
-      weightStyle = { fontWeight };
-    }
-  }
-  const alignClass = align !== "inherit" ? `rf-typography--align-${align}` : "";
-  const classes = [
-    "rf-typography",
-    `rf-typography--${variant}`,
-    alignClass,
-    colorClass,
-    weightClass,
-    noWrap ? "rf-typography--no-wrap" : "",
-    gutterBottom ? "rf-typography--gutter-bottom" : "",
-    paragraph ? "rf-typography--paragraph" : "",
-    sxClass,
-    className
-  ].filter(Boolean).join(" ");
-  const inlineStyle = {
-    ...colorStyle,
-    ...weightStyle,
-    ...style
-  };
-  return /* @__PURE__ */ React85.createElement(Tag, { className: classes, style: Object.keys(inlineStyle).length > 0 ? inlineStyle : void 0 }, children);
-};
-Typography.displayName = "Typography";
-
-// lib/Skeleton/Skeleton.tsx
-import React86 from "react";
-var Skeleton = ({
-  variant = "text",
-  width,
-  height,
-  animation = "pulse",
-  className = "",
-  style,
-  sx
-}) => {
-  const sxClass = useSx(sx);
-  const animationClass = animation === "pulse" ? "rf-skeleton--pulse" : animation === "wave" ? "rf-skeleton--wave" : "rf-skeleton--no-animation";
-  const classes = [
-    "rf-skeleton",
-    `rf-skeleton--${variant}`,
-    animationClass,
-    sxClass,
-    className
-  ].filter(Boolean).join(" ");
-  const inlineStyle = {
-    ...width !== void 0 ? { width: typeof width === "number" ? width : width } : {},
-    ...height !== void 0 ? { height: typeof height === "number" ? height : height } : {},
-    ...style
-  };
-  if (variant === "text" && !height) {
-  }
-  if (variant === "circular" && !width && !height) {
-    inlineStyle.width = 40;
-    inlineStyle.height = 40;
-  }
-  if (variant === "rectangular" && !height) {
-    inlineStyle.height = 140;
-  }
-  if (variant === "rounded" && !height) {
-    inlineStyle.height = 140;
-  }
-  return /* @__PURE__ */ React86.createElement(
-    "span",
-    {
-      className: classes,
-      style: Object.keys(inlineStyle).length > 0 ? inlineStyle : void 0,
-      "aria-busy": "true",
-      "aria-live": "polite"
-    }
-  );
-};
-Skeleton.displayName = "Skeleton";
-
-// lib/Tooltip/Tooltip.tsx
-import React87, {
-  useCallback as useCallback5,
-  useEffect as useEffect11,
-  useRef as useRef14,
-  useState as useState13
-} from "react";
-import ReactDOM4 from "react-dom";
-var GAP = 8;
-function computePosition(anchor, tooltip, placement) {
-  const { top: aTop, left: aLeft, width: aW, height: aH } = anchor;
-  const { width: tW, height: tH } = tooltip;
-  let top = 0;
-  let left = 0;
-  let arrowLeft;
-  let arrowTop;
-  switch (placement) {
-    case "top":
-      top = aTop - tH - GAP;
-      left = aLeft + aW / 2 - tW / 2;
-      arrowLeft = tW / 2 - 4;
-      break;
-    case "top-start":
-      top = aTop - tH - GAP;
-      left = aLeft;
-      arrowLeft = Math.min(aW / 2, tW - 16);
-      break;
-    case "top-end":
-      top = aTop - tH - GAP;
-      left = aLeft + aW - tW;
-      arrowLeft = Math.max(tW - aW / 2 - 4, 8);
-      break;
-    case "bottom":
-      top = aTop + aH + GAP;
-      left = aLeft + aW / 2 - tW / 2;
-      arrowLeft = tW / 2 - 4;
-      break;
-    case "bottom-start":
-      top = aTop + aH + GAP;
-      left = aLeft;
-      arrowLeft = Math.min(aW / 2, tW - 16);
-      break;
-    case "bottom-end":
-      top = aTop + aH + GAP;
-      left = aLeft + aW - tW;
-      arrowLeft = Math.max(tW - aW / 2 - 4, 8);
-      break;
-    case "left":
-      top = aTop + aH / 2 - tH / 2;
-      left = aLeft - tW - GAP;
-      arrowTop = tH / 2 - 4;
-      break;
-    case "left-start":
-      top = aTop;
-      left = aLeft - tW - GAP;
-      arrowTop = Math.min(aH / 2, tH - 16);
-      break;
-    case "left-end":
-      top = aTop + aH - tH;
-      left = aLeft - tW - GAP;
-      arrowTop = Math.max(tH - aH / 2 - 4, 8);
-      break;
-    case "right":
-      top = aTop + aH / 2 - tH / 2;
-      left = aLeft + aW + GAP;
-      arrowTop = tH / 2 - 4;
-      break;
-    case "right-start":
-      top = aTop;
-      left = aLeft + aW + GAP;
-      arrowTop = Math.min(aH / 2, tH - 16);
-      break;
-    case "right-end":
-      top = aTop + aH - tH;
-      left = aLeft + aW + GAP;
-      arrowTop = Math.max(tH - aH / 2 - 4, 8);
-      break;
-    default:
-      top = aTop - tH - GAP;
-      left = aLeft + aW / 2 - tW / 2;
-  }
-  const vw = window.innerWidth;
-  const vh = window.innerHeight;
-  left = Math.max(8, Math.min(left, vw - tW - 8));
-  top = Math.max(8, Math.min(top, vh - tH - 8));
-  return { top, left, arrowLeft, arrowTop };
-}
-var Tooltip = ({
-  title,
-  placement = "top",
-  arrow = false,
-  open: controlledOpen,
-  disableHoverListener = false,
-  disableFocusListener = false,
-  enterDelay = 100,
-  leaveDelay = 0,
+  subtitle2: "h6",
+  body1: "p",
+  body2: "p",
+  caption: "span",
+  overline: "span",
+  button: "span"
+};
+var COLOR_CLASSES = {
+  primary: "rf-typography--color-primary",
+  secondary: "rf-typography--color-secondary",
+  textPrimary: "rf-typography--color-textPrimary",
+  textSecondary: "rf-typography--color-textSecondary",
+  error: "rf-typography--color-error"
+};
+var WEIGHT_CLASSES = {
+  light: "rf-typography--weight-light",
+  regular: "rf-typography--weight-regular",
+  medium: "rf-typography--weight-medium",
+  bold: "rf-typography--weight-bold"
+};
+var Typography = ({
+  variant = "body1",
+  component,
+  align = "inherit",
+  color,
+  noWrap = false,
+  gutterBottom = false,
+  paragraph = false,
+  fontWeight,
   children,
-  followCursor = false,
   className = "",
   style,
   sx
 }) => {
   const sxClass = useSx(sx);
-  const [internalOpen, setInternalOpen] = useState13(false);
-  const [position, setPosition] = useState13({ top: 0, left: 0 });
-  const anchorRef = useRef14(null);
-  const tooltipRef = useRef14(null);
-  const enterTimer = useRef14(null);
-  const leaveTimer = useRef14(null);
-  const cursorPos = useRef14({ x: 0, y: 0 });
-  const isOpen = controlledOpen !== void 0 ? controlledOpen : internalOpen;
-  const clearTimers = useCallback5(() => {
-    if (enterTimer.current) clearTimeout(enterTimer.current);
-    if (leaveTimer.current) clearTimeout(leaveTimer.current);
-  }, []);
-  const updatePosition = useCallback5(() => {
-    if (!anchorRef.current || !tooltipRef.current) return;
-    const anchorRect = anchorRef.current.getBoundingClientRect();
-    const tooltipRect = tooltipRef.current.getBoundingClientRect();
-    if (followCursor) {
-      const fakeRect = {
-        top: cursorPos.current.y,
-        left: cursorPos.current.x,
-        right: cursorPos.current.x,
-        bottom: cursorPos.current.y,
-        width: 0,
-        height: 0,
-        x: cursorPos.current.x,
-        y: cursorPos.current.y,
-        toJSON: () => ({})
-      };
-      setPosition(computePosition(fakeRect, tooltipRect, placement));
-    } else {
-      setPosition(computePosition(anchorRect, tooltipRect, placement));
-    }
-  }, [placement, followCursor]);
-  useEffect11(() => {
-    if (isOpen) {
-      requestAnimationFrame(() => {
-        updatePosition();
-      });
-    }
-  }, [isOpen, updatePosition]);
-  const handleOpen = useCallback5(() => {
-    clearTimers();
-    if (enterDelay > 0) {
-      enterTimer.current = setTimeout(() => {
-        setInternalOpen(true);
-      }, enterDelay);
-    } else {
-      setInternalOpen(true);
-    }
-  }, [enterDelay, clearTimers]);
-  const handleClose = useCallback5(() => {
-    clearTimers();
-    if (leaveDelay > 0) {
-      leaveTimer.current = setTimeout(() => {
-        setInternalOpen(false);
-      }, leaveDelay);
+  const Tag = component || (paragraph ? "p" : VARIANT_ELEMENT_MAP[variant] || "span");
+  const colorClass = color ? COLOR_CLASSES[color] : "";
+  const colorStyle = color && !COLOR_CLASSES[color] ? { color } : {};
+  let weightClass = "";
+  let weightStyle = {};
+  if (fontWeight !== void 0) {
+    if (typeof fontWeight === "string") {
+      weightClass = WEIGHT_CLASSES[fontWeight] || "";
     } else {
-      setInternalOpen(false);
+      weightStyle = { fontWeight };
     }
-  }, [leaveDelay, clearTimers]);
-  const handleMouseMove = useCallback5(
-    (e) => {
-      cursorPos.current = { x: e.clientX, y: e.clientY };
-      if (isOpen && followCursor) {
-        updatePosition();
-      }
-    },
-    [isOpen, followCursor, updatePosition]
-  );
-  useEffect11(() => {
-    return () => clearTimers();
-  }, [clearTimers]);
-  const childProps = {};
-  if (!disableHoverListener) {
-    childProps.onMouseEnter = handleOpen;
-    childProps.onMouseLeave = handleClose;
-    childProps.onMouseMove = followCursor ? handleMouseMove : void 0;
-  }
-  if (!disableFocusListener) {
-    childProps.onFocus = handleOpen;
-    childProps.onBlur = handleClose;
   }
-  const tooltipClasses = [
-    "rf-tooltip",
-    `rf-tooltip--placement-${placement}`,
-    isOpen ? "rf-tooltip--visible" : "",
+  const alignClass = align !== "inherit" ? `rf-typography--align-${align}` : "";
+  const classes = [
+    "rf-typography",
+    `rf-typography--${variant}`,
+    alignClass,
+    colorClass,
+    weightClass,
+    noWrap ? "rf-typography--no-wrap" : "",
+    gutterBottom ? "rf-typography--gutter-bottom" : "",
+    paragraph ? "rf-typography--paragraph" : "",
     sxClass,
     className
   ].filter(Boolean).join(" ");
-  const tooltipElement = /* @__PURE__ */ React87.createElement(
-    "div",
-    {
-      ref: tooltipRef,
-      className: tooltipClasses,
-      style: {
-        top: position.top,
-        left: position.left,
-        ...style
-      },
-      role: "tooltip",
-      "aria-hidden": !isOpen
-    },
-    title,
-    arrow && /* @__PURE__ */ React87.createElement(
-      "span",
-      {
-        className: "rf-tooltip__arrow",
-        style: {
-          ...position.arrowLeft !== void 0 ? { left: position.arrowLeft } : {},
-          ...position.arrowTop !== void 0 ? { top: position.arrowTop } : {}
-        }
-      }
-    )
-  );
-  return /* @__PURE__ */ React87.createElement(React87.Fragment, null, /* @__PURE__ */ React87.createElement(
+  const inlineStyle = {
+    ...colorStyle,
+    ...weightStyle,
+    ...style
+  };
+  return /* @__PURE__ */ React86.createElement(Tag, { className: classes, style: Object.keys(inlineStyle).length > 0 ? inlineStyle : void 0 }, children);
+};
+Typography.displayName = "Typography";
+
+// lib/Skeleton/Skeleton.tsx
+import React87 from "react";
+var Skeleton = ({
+  variant = "text",
+  width,
+  height,
+  animation = "pulse",
+  className = "",
+  style,
+  sx
+}) => {
+  const sxClass = useSx(sx);
+  const animationClass = animation === "pulse" ? "rf-skeleton--pulse" : animation === "wave" ? "rf-skeleton--wave" : "rf-skeleton--no-animation";
+  const classes = [
+    "rf-skeleton",
+    `rf-skeleton--${variant}`,
+    animationClass,
+    sxClass,
+    className
+  ].filter(Boolean).join(" ");
+  const inlineStyle = {
+    ...width !== void 0 ? { width: typeof width === "number" ? width : width } : {},
+    ...height !== void 0 ? { height: typeof height === "number" ? height : height } : {},
+    ...style
+  };
+  if (variant === "text" && !height) {
+  }
+  if (variant === "circular" && !width && !height) {
+    inlineStyle.width = 40;
+    inlineStyle.height = 40;
+  }
+  if (variant === "rectangular" && !height) {
+    inlineStyle.height = 140;
+  }
+  if (variant === "rounded" && !height) {
+    inlineStyle.height = 140;
+  }
+  return /* @__PURE__ */ React87.createElement(
     "span",
     {
-      ref: anchorRef,
-      style: { display: "inline-flex", position: "relative" },
-      "aria-describedby": isOpen ? "rf-tooltip" : void 0,
-      ...childProps
-    },
-    React87.cloneElement(children)
-  ), ReactDOM4.createPortal(tooltipElement, document.body));
+      className: classes,
+      style: Object.keys(inlineStyle).length > 0 ? inlineStyle : void 0,
+      "aria-busy": "true",
+      "aria-live": "polite"
+    }
+  );
 };
-Tooltip.displayName = "Tooltip";
+Skeleton.displayName = "Skeleton";
 
 // lib/Box/Box.tsx
 import * as React88 from "react";
@@ -8646,7 +8647,7 @@ var TextToSpeech = forwardRef12(({ editor, onTextToSpeech }, ref) => {
     setPaused(false);
   }, []);
   useImperativeHandle2(ref, () => ({ stop: handleStop }), [handleStop]);
-  return /* @__PURE__ */ React107.createElement("div", { className: "tts-wrapper", ref: panelRef }, /* @__PURE__ */ React107.createElement(
+  return /* @__PURE__ */ React107.createElement("div", { className: "tts-wrapper", ref: panelRef }, /* @__PURE__ */ React107.createElement(Tooltip, { title: "Text to Speech", placement: "top" }, /* @__PURE__ */ React107.createElement(
     "button",
     {
       className: `toolbar-btn ${speaking ? "is-active" : ""}`,
@@ -8656,11 +8657,10 @@ var TextToSpeech = forwardRef12(({ editor, onTextToSpeech }, ref) => {
         } else {
           setShowPanel(!showPanel);
         }
-      },
-      title: "Text to Speech"
+      }
     },
     speaking ? "\u23F9" : "\u{1F50A}"
-  ), showPanel && !speaking && /* @__PURE__ */ React107.createElement("div", { className: "tts-panel" }, /* @__PURE__ */ React107.createElement("div", { className: "tts-panel-header" }, "Text to Speech"), /* @__PURE__ */ React107.createElement("label", { className: "tts-label" }, "Voice"), /* @__PURE__ */ React107.createElement(
+  )), showPanel && !speaking && /* @__PURE__ */ React107.createElement("div", { className: "tts-panel" }, /* @__PURE__ */ React107.createElement("div", { className: "tts-panel-header" }, "Text to Speech"), /* @__PURE__ */ React107.createElement("label", { className: "tts-label" }, "Voice"), /* @__PURE__ */ React107.createElement(
     "select",
     {
       className: "tts-select",
@@ -8682,7 +8682,7 @@ var TextToSpeech = forwardRef12(({ editor, onTextToSpeech }, ref) => {
   ), /* @__PURE__ */ React107.createElement("div", { className: "tts-info" }, editor && !editor.state.selection.empty ? "Will read selected text" : "Will read all editor text"), /* @__PURE__ */ React107.createElement("button", { className: "tts-speak-btn", onClick: () => {
     handleSpeak();
     setShowPanel(false);
-  } }, "\u25B6 Speak")), speaking && /* @__PURE__ */ React107.createElement("div", { className: "tts-controls" }, paused ? /* @__PURE__ */ React107.createElement("button", { className: "toolbar-btn", onClick: handleResume, title: "Resume" }, "\u25B6") : /* @__PURE__ */ React107.createElement("button", { className: "toolbar-btn", onClick: handlePause, title: "Pause" }, "\u275A\u275A"), /* @__PURE__ */ React107.createElement("button", { className: "toolbar-btn", onClick: handleStop, title: "Stop" }, "\u25A0")));
+  } }, "\u25B6 Speak")), speaking && /* @__PURE__ */ React107.createElement("div", { className: "tts-controls" }, paused ? /* @__PURE__ */ React107.createElement(Tooltip, { title: "Resume", placement: "top" }, /* @__PURE__ */ React107.createElement("button", { className: "toolbar-btn", onClick: handleResume }, "\u25B6")) : /* @__PURE__ */ React107.createElement(Tooltip, { title: "Pause", placement: "top" }, /* @__PURE__ */ React107.createElement("button", { className: "toolbar-btn", onClick: handlePause }, "\u275A\u275A")), /* @__PURE__ */ React107.createElement(Tooltip, { title: "Stop", placement: "top" }, /* @__PURE__ */ React107.createElement("button", { className: "toolbar-btn", onClick: handleStop }, "\u25A0"))));
 });
 var TextToSpeech_default = TextToSpeech;
 
@@ -8801,7 +8801,7 @@ var SpeechToText = forwardRef13(({ editor, onSpeechToText }, ref) => {
   }, []);
   useImperativeHandle3(ref, () => ({ stop: stopListening }), [stopListening]);
   if (!supported) {
-    return /* @__PURE__ */ React108.createElement("button", { className: "toolbar-btn", disabled: true, title: "Speech recognition not supported in this browser" }, "\u{1F3A4}");
+    return /* @__PURE__ */ React108.createElement(Tooltip, { title: "Speech recognition not supported in this browser", placement: "top" }, /* @__PURE__ */ React108.createElement("button", { className: "toolbar-btn", disabled: true }, "\u{1F3A4}"));
   }
   const LANGUAGES2 = [
     { code: "en-US", label: "English (US)" },
@@ -8823,7 +8823,7 @@ var SpeechToText = forwardRef13(({ editor, onSpeechToText }, ref) => {
     { code: "kn-IN", label: "Kannada" },
     { code: "ml-IN", label: "Malayalam" }
   ];
-  return /* @__PURE__ */ React108.createElement("div", { className: "stt-wrapper", ref: panelRef }, /* @__PURE__ */ React108.createElement(
+  return /* @__PURE__ */ React108.createElement("div", { className: "stt-wrapper", ref: panelRef }, /* @__PURE__ */ React108.createElement(Tooltip, { title: listening ? "Stop recording" : "Speech to Text", placement: "top" }, /* @__PURE__ */ React108.createElement(
     "button",
     {
       className: `toolbar-btn ${listening ? "is-active stt-recording" : ""}`,
@@ -8833,11 +8833,10 @@ var SpeechToText = forwardRef13(({ editor, onSpeechToText }, ref) => {
         } else {
           setShowPanel(!showPanel);
         }
-      },
-      title: listening ? "Stop recording" : "Speech to Text"
+      }
     },
     "\u{1F3A4}"
-  ), showPanel && !listening && /* @__PURE__ */ React108.createElement("div", { className: "stt-panel" }, /* @__PURE__ */ React108.createElement("div", { className: "stt-panel-header" }, "Speech to Text"), /* @__PURE__ */ React108.createElement("label", { className: "stt-label" }, "Language"), /* @__PURE__ */ React108.createElement(
+  )), showPanel && !listening && /* @__PURE__ */ React108.createElement("div", { className: "stt-panel" }, /* @__PURE__ */ React108.createElement("div", { className: "stt-panel-header" }, "Speech to Text"), /* @__PURE__ */ React108.createElement("label", { className: "stt-label" }, "Language"), /* @__PURE__ */ React108.createElement(
     "select",
     {
       className: "stt-select",
@@ -8991,16 +8990,15 @@ var AICommands = ({ editor, onAICommand }) => {
     setPreviousResults([]);
   }, []);
   if (!editor) return null;
-  return /* @__PURE__ */ React109.createElement(React109.Fragment, null, /* @__PURE__ */ React109.createElement("div", { className: "ai-commands-wrapper", ref: panelRef }, /* @__PURE__ */ React109.createElement(
+  return /* @__PURE__ */ React109.createElement(React109.Fragment, null, /* @__PURE__ */ React109.createElement("div", { className: "ai-commands-wrapper", ref: panelRef }, /* @__PURE__ */ React109.createElement(Tooltip, { title: "AI Commands", placement: "top" }, /* @__PURE__ */ React109.createElement(
     "button",
     {
       className: `toolbar-btn ${open ? "is-active" : ""}`,
-      onClick: () => setOpen(!open),
-      title: "AI Commands"
+      onClick: () => setOpen(!open)
     },
     /* @__PURE__ */ React109.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", stroke: "none" }, /* @__PURE__ */ React109.createElement("path", { d: "M9 2l1.5 3L14 6.5 10.5 8 9 11 7.5 8 4 6.5 7.5 5zM18 10l1 2 2 1-2 1-1 2-1-2-2-1 2-1zM5 17l1.5 3L10 21.5 6.5 23 5 26 3.5 23 0 21.5 3.5 20z" })),
     /* @__PURE__ */ React109.createElement("span", { className: "dropdown-arrow" }, "\u25BE")
-  ), open && /* @__PURE__ */ React109.createElement("div", { className: "ai-commands-panel" }, /* @__PURE__ */ React109.createElement("div", { className: "ai-commands-header" }, "AI Commands"), /* @__PURE__ */ React109.createElement("div", { className: "ai-commands-list" }, AI_COMMANDS.map((cmd) => /* @__PURE__ */ React109.createElement(
+  )), open && /* @__PURE__ */ React109.createElement("div", { className: "ai-commands-panel" }, /* @__PURE__ */ React109.createElement("div", { className: "ai-commands-header" }, "AI Commands"), /* @__PURE__ */ React109.createElement("div", { className: "ai-commands-list" }, AI_COMMANDS.map((cmd) => /* @__PURE__ */ React109.createElement(
     "button",
     {
       key: cmd.id,
@@ -9017,16 +9015,15 @@ var AICommands = ({ editor, onAICommand }) => {
         onChange: (e) => setPromptText(e.target.value),
         rows: 3
       }
-    ), /* @__PURE__ */ React109.createElement(
+    ), /* @__PURE__ */ React109.createElement(Tooltip, { title: "Run with custom prompt", placement: "top" }, /* @__PURE__ */ React109.createElement(
       "button",
       {
         className: "ai-modal-robot-btn",
         onClick: () => fetchAIResult(promptText, originalText),
-        disabled: loading,
-        title: "Run with custom prompt"
+        disabled: loading
       },
       /* @__PURE__ */ React109.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React109.createElement("rect", { x: "3", y: "11", width: "18", height: "10", rx: "2" }), /* @__PURE__ */ React109.createElement("circle", { cx: "9", cy: "16", r: "1" }), /* @__PURE__ */ React109.createElement("circle", { cx: "15", cy: "16", r: "1" }), /* @__PURE__ */ React109.createElement("path", { d: "M12 2v4" }), /* @__PURE__ */ React109.createElement("path", { d: "M8 7h8" }))
-    ))), /* @__PURE__ */ React109.createElement("div", { className: "ai-modal-actions" }, /* @__PURE__ */ React109.createElement(
+    )))), /* @__PURE__ */ React109.createElement("div", { className: "ai-modal-actions" }, /* @__PURE__ */ React109.createElement(
       "button",
       {
         className: "ai-modal-action-btn ai-modal-insert-btn",
@@ -9042,16 +9039,15 @@ var AICommands = ({ editor, onAICommand }) => {
         disabled: loading || !resultText
       },
       "Insert After"
-    ), /* @__PURE__ */ React109.createElement(
+    ), /* @__PURE__ */ React109.createElement(Tooltip, { title: "Generate another response", placement: "top" }, /* @__PURE__ */ React109.createElement(
       "button",
       {
         className: "ai-modal-action-btn ai-modal-refresh-btn",
         onClick: handleRefresh,
-        disabled: loading,
-        title: "Generate another response"
+        disabled: loading
       },
       /* @__PURE__ */ React109.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React109.createElement("path", { d: "M21 2v6h-6" }), /* @__PURE__ */ React109.createElement("path", { d: "M3 12a9 9 0 0 1 15-6.7L21 8" }), /* @__PURE__ */ React109.createElement("path", { d: "M3 22v-6h6" }), /* @__PURE__ */ React109.createElement("path", { d: "M21 12a9 9 0 0 1-15 6.7L3 16" }))
-    )), /* @__PURE__ */ React109.createElement("div", { className: "ai-modal-result-section" }, loading ? /* @__PURE__ */ React109.createElement("div", { className: "ai-modal-loading" }, /* @__PURE__ */ React109.createElement("span", { className: "ai-spinner" }), /* @__PURE__ */ React109.createElement("span", null, "Generating response...")) : /* @__PURE__ */ React109.createElement("div", { className: "ai-modal-result" }, resultText)), /* @__PURE__ */ React109.createElement("div", { className: "ai-modal-footer" }, /* @__PURE__ */ React109.createElement("button", { className: "ai-modal-cancel-btn", onClick: handleCancel }, "CANCEL")))),
+    ))), /* @__PURE__ */ React109.createElement("div", { className: "ai-modal-result-section" }, loading ? /* @__PURE__ */ React109.createElement("div", { className: "ai-modal-loading" }, /* @__PURE__ */ React109.createElement("span", { className: "ai-spinner" }), /* @__PURE__ */ React109.createElement("span", null, "Generating response...")) : /* @__PURE__ */ React109.createElement("div", { className: "ai-modal-result" }, resultText)), /* @__PURE__ */ React109.createElement("div", { className: "ai-modal-footer" }, /* @__PURE__ */ React109.createElement("button", { className: "ai-modal-cancel-btn", onClick: handleCancel }, "CANCEL")))),
     document.body
   ));
 };
@@ -9269,7 +9265,7 @@ var TranslateModal = ({ editor, onClose, onTranslate, initialSource, initialTarg
       },
       /* @__PURE__ */ React110.createElement("span", { className: "translate-code" }, lang.code),
       /* @__PURE__ */ React110.createElement("span", { className: "translate-name" }, lang.name)
-    )))), /* @__PURE__ */ React110.createElement("div", { className: "translate-swap" }, /* @__PURE__ */ React110.createElement("button", { className: "translate-swap-btn", onClick: handleSwap, title: "Swap languages" }, "\u21C4")), /* @__PURE__ */ React110.createElement("div", { className: "translate-col" }, /* @__PURE__ */ React110.createElement("div", { className: "translate-filter" }, /* @__PURE__ */ React110.createElement(
+    )))), /* @__PURE__ */ React110.createElement("div", { className: "translate-swap" }, /* @__PURE__ */ React110.createElement(Tooltip, { title: "Swap languages", placement: "top" }, /* @__PURE__ */ React110.createElement("button", { className: "translate-swap-btn", onClick: handleSwap }, "\u21C4"))), /* @__PURE__ */ React110.createElement("div", { className: "translate-col" }, /* @__PURE__ */ React110.createElement("div", { className: "translate-filter" }, /* @__PURE__ */ React110.createElement(
       "input",
       {
         type: "text",
@@ -10151,16 +10147,15 @@ var Dropdown = ({ trigger, children, className = "", keepOpen = false }) => {
     };
     position();
   }, [open]);
-  return /* @__PURE__ */ React112.createElement("div", { className: `dropdown ${className}`, ref }, /* @__PURE__ */ React112.createElement(
+  return /* @__PURE__ */ React112.createElement("div", { className: `dropdown ${className}`, ref }, /* @__PURE__ */ React112.createElement(Tooltip, { title: trigger.title || "", placement: "top" }, /* @__PURE__ */ React112.createElement(
     "button",
     {
       className: `toolbar-btn ${trigger.className || ""}`,
-      onClick: () => setOpen(!open),
-      title: trigger.title
+      onClick: () => setOpen(!open)
     },
     trigger.label,
     /* @__PURE__ */ React112.createElement("span", { className: "dropdown-arrow" }, "\u25BE")
-  ), open && createPortal4(
+  )), open && createPortal4(
     /* @__PURE__ */ React112.createElement("div", { className: "rf-rte-wrapper rf-rte-dropdown-portal" }, /* @__PURE__ */ React112.createElement("div", { ref: menuRef, className: "dropdown-menu dropdown-menu-fixed", onClick: keepOpen ? void 0 : () => setOpen(false) }, typeof children === "function" ? children(() => setOpen(false)) : children)),
     document.body
   ));
@@ -10406,16 +10401,14 @@ var ColorPickerPanel = ({ editor, onClose }) => {
       onClick: () => setTab("text")
     },
     "Text"
-  )), /* @__PURE__ */ React112.createElement("div", { className: "color-picker-grid" }, COLOR_PALETTE.map((color, i) => /* @__PURE__ */ React112.createElement(
+  )), /* @__PURE__ */ React112.createElement("div", { className: "color-picker-grid" }, COLOR_PALETTE.map((color, i) => /* @__PURE__ */ React112.createElement(Tooltip, { key: i, title: color, placement: "top" }, /* @__PURE__ */ React112.createElement(
     "button",
     {
-      key: i,
       className: `color-picker-swatch ${color === "#ffffff" ? "white-swatch" : ""}${activeColor && activeColor.toLowerCase() === color.toLowerCase() ? " swatch-active" : ""}`,
       style: { background: color },
-      onClick: () => applyColor(color),
-      title: color
+      onClick: () => applyColor(color)
     }
-  ))), /* @__PURE__ */ React112.createElement("div", { className: "color-picker-footer" }, /* @__PURE__ */ React112.createElement("div", { className: "color-picker-preview", style: { background: activeColor || "#000" } }), /* @__PURE__ */ React112.createElement("button", { className: "color-picker-remove", onClick: removeColor, title: "Remove color" }, "\u2713")));
+  )))), /* @__PURE__ */ React112.createElement("div", { className: "color-picker-footer" }, /* @__PURE__ */ React112.createElement("div", { className: "color-picker-preview", style: { background: activeColor || "#000" } }), /* @__PURE__ */ React112.createElement(Tooltip, { title: "Remove color", placement: "top" }, /* @__PURE__ */ React112.createElement("button", { className: "color-picker-remove", onClick: removeColor }, "\u2713"))));
 };
 var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTextToSpeech, onClose, onImageUpload, visibleButtons, isFullscreen, onToggleFullscreen }) => {
   const [, setEditorState] = useState30(0);
@@ -10496,25 +10489,23 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
     setTimeout(() => setTranslateStatus(""), 2e3);
   }, [editor, translateSource, translateTarget, onTranslate]);
   if (!editor) return null;
-  return /* @__PURE__ */ React112.createElement("div", { className: "toolbar" }, /* @__PURE__ */ React112.createElement("div", { className: `toolbar-row ${onClose ? "with-close" : ""}` }, (show("undo") || show("redo")) && /* @__PURE__ */ React112.createElement("div", { className: "toolbar-group" }, show("undo") && /* @__PURE__ */ React112.createElement(
+  return /* @__PURE__ */ React112.createElement("div", { className: "toolbar" }, /* @__PURE__ */ React112.createElement("div", { className: `toolbar-row ${onClose ? "with-close" : ""}` }, (show("undo") || show("redo")) && /* @__PURE__ */ React112.createElement("div", { className: "toolbar-group" }, show("undo") && /* @__PURE__ */ React112.createElement(Tooltip, { title: "Undo (Ctrl+Z)", placement: "top" }, /* @__PURE__ */ React112.createElement(
     "button",
     {
       className: "toolbar-btn",
       onClick: () => editor.chain().focus().undo().run(),
-      disabled: !editor.can().undo(),
-      title: "Undo (Ctrl+Z)"
+      disabled: !editor.can().undo()
     },
     /* @__PURE__ */ React112.createElement(IconUndo, null)
-  ), show("redo") && /* @__PURE__ */ React112.createElement(
+  )), show("redo") && /* @__PURE__ */ React112.createElement(Tooltip, { title: "Redo (Ctrl+Y)", placement: "top" }, /* @__PURE__ */ React112.createElement(
     "button",
     {
       className: "toolbar-btn",
       onClick: () => editor.chain().focus().redo().run(),
-      disabled: !editor.can().redo(),
-      title: "Redo (Ctrl+Y)"
+      disabled: !editor.can().redo()
     },
     /* @__PURE__ */ React112.createElement(IconRedo, null)
-  )), show("ai") && /* @__PURE__ */ React112.createElement("div", { className: "toolbar-group" }, /* @__PURE__ */ React112.createElement(AICommands_default, { editor, onAICommand })), /* @__PURE__ */ React112.createElement("div", { className: "toolbar-group" }, show("paragraph") && /* @__PURE__ */ React112.createElement(
+  ))), show("ai") && /* @__PURE__ */ React112.createElement("div", { className: "toolbar-group" }, /* @__PURE__ */ React112.createElement(AICommands_default, { editor, onAICommand })), /* @__PURE__ */ React112.createElement("div", { className: "toolbar-group" }, show("paragraph") && /* @__PURE__ */ React112.createElement(
     Dropdown,
     {
       trigger: {
@@ -10645,23 +10636,21 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
       keepOpen: true
     },
     (close) => /* @__PURE__ */ React112.createElement(ColorPickerPanel, { editor, onClose: close })
-  ), show("bold") && /* @__PURE__ */ React112.createElement(
+  ), show("bold") && /* @__PURE__ */ React112.createElement(Tooltip, { title: "Bold (Ctrl+B)", placement: "top" }, /* @__PURE__ */ React112.createElement(
     "button",
     {
       className: `toolbar-btn ${editor.isActive("bold") ? "is-active" : ""}`,
-      onClick: () => editor.chain().focus().toggleBold().run(),
-      title: "Bold (Ctrl+B)"
+      onClick: () => editor.chain().focus().toggleBold().run()
     },
     /* @__PURE__ */ React112.createElement(IconBold, null)
-  ), show("italic") && /* @__PURE__ */ React112.createElement(
+  )), show("italic") && /* @__PURE__ */ React112.createElement(Tooltip, { title: "Italic (Ctrl+I)", placement: "top" }, /* @__PURE__ */ React112.createElement(
     "button",
     {
       className: `toolbar-btn ${editor.isActive("italic") ? "is-active" : ""}`,
-      onClick: () => editor.chain().focus().toggleItalic().run(),
-      title: "Italic (Ctrl+I)"
+      onClick: () => editor.chain().focus().toggleItalic().run()
     },
     /* @__PURE__ */ React112.createElement(IconItalic, null)
-  ), show("strike") && /* @__PURE__ */ React112.createElement(
+  )), show("strike") && /* @__PURE__ */ React112.createElement(
     Dropdown,
     {
       trigger: { label: /* @__PURE__ */ React112.createElement(IconStrike, null), title: "Text decoration", className: editor.isActive("strike") ? "is-active" : "" }
@@ -10686,15 +10675,14 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
         c.run();
       }
     } }, "\u2715 Clear formatting")
-  ), show("link") && /* @__PURE__ */ React112.createElement(
+  ), show("link") && /* @__PURE__ */ React112.createElement(Tooltip, { title: "Insert Link", placement: "top" }, /* @__PURE__ */ React112.createElement(
     "button",
     {
       className: `toolbar-btn ${editor.isActive("link") ? "is-active" : ""}`,
-      onClick: setLink,
-      title: "Insert Link"
+      onClick: setLink
     },
     /* @__PURE__ */ React112.createElement(IconLink, null)
-  ), show("lineheight") && /* @__PURE__ */ React112.createElement(
+  )), show("lineheight") && /* @__PURE__ */ React112.createElement(
     Dropdown,
     {
       trigger: {
@@ -10721,15 +10709,14 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
         lh
       );
     })
-  )), (show("ul") || show("ol")) && /* @__PURE__ */ React112.createElement("div", { className: "toolbar-group" }, show("ul") && /* @__PURE__ */ React112.createElement("div", { className: "list-split-btn" }, /* @__PURE__ */ React112.createElement(
+  )), (show("ul") || show("ol")) && /* @__PURE__ */ React112.createElement("div", { className: "toolbar-group" }, show("ul") && /* @__PURE__ */ React112.createElement("div", { className: "list-split-btn" }, /* @__PURE__ */ React112.createElement(Tooltip, { title: editor.isActive("bulletList") ? "Disable Bullet List" : "Enable Bullet List", placement: "top" }, /* @__PURE__ */ React112.createElement(
     "button",
     {
       className: `toolbar-btn ${editor.isActive("bulletList") ? "is-active" : ""}`,
-      onClick: () => editor.chain().focus().toggleBulletList().run(),
-      title: editor.isActive("bulletList") ? "Disable Bullet List" : "Enable Bullet List"
+      onClick: () => editor.chain().focus().toggleBulletList().run()
     },
     /* @__PURE__ */ React112.createElement(IconBulletList, null)
-  ), /* @__PURE__ */ React112.createElement(Dropdown, { trigger: { label: "", title: "List style", className: "list-arrow-btn" }, keepOpen: true }, [
+  )), /* @__PURE__ */ React112.createElement(Dropdown, { trigger: { label: "", title: "List style", className: "list-arrow-btn" }, keepOpen: true }, [
     { label: "Default", style: null, icon: "\u2022" },
     { label: "Circle", style: "circle", icon: "\u25CB" },
     { label: "Dot", style: "disc", icon: "\u2219" },
@@ -10762,15 +10749,14 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
     /* @__PURE__ */ React112.createElement("span", { className: "bullet-style-icon" }, item.icon),
     " ",
     item.label
-  )))), show("ol") && /* @__PURE__ */ React112.createElement("div", { className: "list-split-btn" }, /* @__PURE__ */ React112.createElement(
+  )))), show("ol") && /* @__PURE__ */ React112.createElement("div", { className: "list-split-btn" }, /* @__PURE__ */ React112.createElement(Tooltip, { title: editor.isActive("orderedList") ? "Disable Ordered List" : "Enable Ordered List", placement: "top" }, /* @__PURE__ */ React112.createElement(
     "button",
     {
       className: `toolbar-btn ${editor.isActive("orderedList") ? "is-active" : ""}`,
-      onClick: () => editor.chain().focus().toggleOrderedList().run(),
-      title: editor.isActive("orderedList") ? "Disable Ordered List" : "Enable Ordered List"
+      onClick: () => editor.chain().focus().toggleOrderedList().run()
     },
     /* @__PURE__ */ React112.createElement(IconOrderedList, null)
-  ), /* @__PURE__ */ React112.createElement(Dropdown, { trigger: { label: "", title: "List style", className: "list-arrow-btn" }, keepOpen: true }, [
+  )), /* @__PURE__ */ React112.createElement(Dropdown, { trigger: { label: "", title: "List style", className: "list-arrow-btn" }, keepOpen: true }, [
     { label: "Default", style: "decimal", icon: "1." },
     { label: "Lower Alpha", style: "lower-alpha", icon: "a." },
     { label: "Lower Greek", style: "lower-greek", icon: "\u03B1." },
@@ -10830,7 +10816,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
       " ",
       item.label
     ))
-  ), show("indent") && /* @__PURE__ */ React112.createElement(
+  ), show("indent") && /* @__PURE__ */ React112.createElement(Tooltip, { title: "Increase Indent", placement: "top" }, /* @__PURE__ */ React112.createElement(
     "button",
     {
       className: "toolbar-btn",
@@ -10847,11 +10833,10 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
           });
           return true;
         }).run();
-      },
-      title: "Increase Indent"
+      }
     },
     /* @__PURE__ */ React112.createElement(IconIndentIncrease, null)
-  ), show("outdent") && /* @__PURE__ */ React112.createElement(
+  )), show("outdent") && /* @__PURE__ */ React112.createElement(Tooltip, { title: "Decrease Indent", placement: "top" }, /* @__PURE__ */ React112.createElement(
     "button",
     {
       className: "toolbar-btn",
@@ -10868,35 +10853,31 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
           });
           return true;
         }).run();
-      },
-      title: "Decrease Indent"
+      }
     },
     /* @__PURE__ */ React112.createElement(IconIndentDecrease, null)
-  )), show("table") && /* @__PURE__ */ React112.createElement(Dropdown, { trigger: { label: /* @__PURE__ */ React112.createElement(IconTable, null), title: "Insert Table" }, keepOpen: true }, (close) => /* @__PURE__ */ React112.createElement(TableGridSelector, { editor, onClose: close })), show("image") && /* @__PURE__ */ React112.createElement(Dropdown, { trigger: { label: /* @__PURE__ */ React112.createElement(IconImage, null), title: "Insert Image" }, keepOpen: true }, (close) => /* @__PURE__ */ React112.createElement(ImagePanel, { editor, onClose: close, onImageUpload })), show("video") && /* @__PURE__ */ React112.createElement(Dropdown, { trigger: { label: /* @__PURE__ */ React112.createElement(IconVideo, null), title: "Insert Video" }, keepOpen: true }, (close) => /* @__PURE__ */ React112.createElement(InsertPanel, { editor, onClose: close, mode: "video" })), show("cut") && /* @__PURE__ */ React112.createElement(
+  ))), show("table") && /* @__PURE__ */ React112.createElement(Dropdown, { trigger: { label: /* @__PURE__ */ React112.createElement(IconTable, null), title: "Insert Table" }, keepOpen: true }, (close) => /* @__PURE__ */ React112.createElement(TableGridSelector, { editor, onClose: close })), show("image") && /* @__PURE__ */ React112.createElement(Dropdown, { trigger: { label: /* @__PURE__ */ React112.createElement(IconImage, null), title: "Insert Image" }, keepOpen: true }, (close) => /* @__PURE__ */ React112.createElement(ImagePanel, { editor, onClose: close, onImageUpload })), show("video") && /* @__PURE__ */ React112.createElement(Dropdown, { trigger: { label: /* @__PURE__ */ React112.createElement(IconVideo, null), title: "Insert Video" }, keepOpen: true }, (close) => /* @__PURE__ */ React112.createElement(InsertPanel, { editor, onClose: close, mode: "video" })), show("cut") && /* @__PURE__ */ React112.createElement(Tooltip, { title: "Cut (Ctrl+X)", placement: "top" }, /* @__PURE__ */ React112.createElement(
     "button",
     {
       className: "toolbar-btn",
-      onClick: () => document.execCommand("cut"),
-      title: "Cut (Ctrl+X)"
+      onClick: () => document.execCommand("cut")
     },
     /* @__PURE__ */ React112.createElement(IconCut, null)
-  ), show("copy") && /* @__PURE__ */ React112.createElement(
+  )), show("copy") && /* @__PURE__ */ React112.createElement(Tooltip, { title: "Copy selected text", placement: "top" }, /* @__PURE__ */ React112.createElement(
     "button",
     {
       className: "toolbar-btn",
-      onClick: handleCopy,
-      title: "Copy selected text"
+      onClick: handleCopy
     },
     copySuccess ? /* @__PURE__ */ React112.createElement(IconCheck, null) : /* @__PURE__ */ React112.createElement(IconCopy, null)
-  ), show("paste") && /* @__PURE__ */ React112.createElement(
+  )), show("paste") && /* @__PURE__ */ React112.createElement(Tooltip, { title: "Paste (Ctrl+V)", placement: "top" }, /* @__PURE__ */ React112.createElement(
     "button",
     {
       className: "toolbar-btn",
-      onClick: handlePaste,
-      title: "Paste (Ctrl+V)"
+      onClick: handlePaste
     },
     /* @__PURE__ */ React112.createElement(IconPaste, null)
-  ), show("specialchars") && /* @__PURE__ */ React112.createElement(Dropdown, { trigger: { label: "\u03A9", title: "Special characters", className: "special-characters-btn" } }, /* @__PURE__ */ React112.createElement("div", { className: "char-grid" }, SPECIAL_CHARS.map((char) => /* @__PURE__ */ React112.createElement(
+  )), show("specialchars") && /* @__PURE__ */ React112.createElement(Dropdown, { trigger: { label: "\u03A9", title: "Special characters", className: "special-characters-btn" } }, /* @__PURE__ */ React112.createElement("div", { className: "char-grid" }, SPECIAL_CHARS.map((char) => /* @__PURE__ */ React112.createElement(
     "button",
     {
       key: char,
@@ -10928,23 +10909,21 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
       }
     } }, "</>", " Inline Code"),
     /* @__PURE__ */ React112.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleCodeBlock().run() }, "{ }", " Code Block")
-  ), show("fullscreen") && /* @__PURE__ */ React112.createElement(
+  ), show("fullscreen") && /* @__PURE__ */ React112.createElement(Tooltip, { title: "Toggle Fullscreen", placement: "top" }, /* @__PURE__ */ React112.createElement(
     "button",
     {
       className: `toolbar-btn ${isFullscreen ? "is-active" : ""}`,
-      onClick: onToggleFullscreen,
-      title: "Toggle Fullscreen"
+      onClick: onToggleFullscreen
     },
     /* @__PURE__ */ React112.createElement(IconFullscreen, null)
-  ), show("tts") && /* @__PURE__ */ React112.createElement(TextToSpeech_default, { ref: ttsRef, editor, onTextToSpeech }), show("stt") && /* @__PURE__ */ React112.createElement(SpeechToText_default, { ref: sttRef, editor, onSpeechToText }), show("translate") && /* @__PURE__ */ React112.createElement("div", { className: "translate-split-btn" }, /* @__PURE__ */ React112.createElement(
+  )), show("tts") && /* @__PURE__ */ React112.createElement(TextToSpeech_default, { ref: ttsRef, editor, onTextToSpeech }), show("stt") && /* @__PURE__ */ React112.createElement(SpeechToText_default, { ref: sttRef, editor, onSpeechToText }), show("translate") && /* @__PURE__ */ React112.createElement("div", { className: "translate-split-btn" }, /* @__PURE__ */ React112.createElement(Tooltip, { title: "Translate selected text", placement: "top" }, /* @__PURE__ */ React112.createElement(
     "button",
     {
       className: "toolbar-btn",
-      onClick: handleQuickTranslate,
-      title: "Translate selected text"
+      onClick: handleQuickTranslate
     },
     /* @__PURE__ */ React112.createElement(IconTranslate, null)
-  ), /* @__PURE__ */ React112.createElement(Dropdown, { trigger: { label: "", title: "Translate options", className: "translate-arrow-btn" } }, /* @__PURE__ */ React112.createElement("button", { className: "dropdown-item", onClick: () => setShowTranslateModal(true) }, "Options")), translateStatus && /* @__PURE__ */ React112.createElement("span", { className: `translate-toast-popup ${translateStatus === "Please select the text" || translateStatus === "Translation failed" ? "error" : ""}` }, translateStatus)), show("todo") && /* @__PURE__ */ React112.createElement("div", { className: "todo-split-btn" }, /* @__PURE__ */ React112.createElement(
+  )), /* @__PURE__ */ React112.createElement(Dropdown, { trigger: { label: "", title: "Translate options", className: "translate-arrow-btn" } }, /* @__PURE__ */ React112.createElement("button", { className: "dropdown-item", onClick: () => setShowTranslateModal(true) }, "Options")), translateStatus && /* @__PURE__ */ React112.createElement("span", { className: `translate-toast-popup ${translateStatus === "Please select the text" || translateStatus === "Translation failed" ? "error" : ""}` }, translateStatus)), show("todo") && /* @__PURE__ */ React112.createElement("div", { className: "todo-split-btn" }, /* @__PURE__ */ React112.createElement(Tooltip, { title: todoEnabled ? "Disable Task List" : "Enable Task List", placement: "top" }, /* @__PURE__ */ React112.createElement(
     "button",
     {
       className: `toolbar-btn ${todoEnabled ? "is-active" : ""}`,
@@ -10985,11 +10964,10 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
             }).run();
           }
         }
-      },
-      title: todoEnabled ? "Disable Task List" : "Enable Task List"
+      }
     },
     /* @__PURE__ */ React112.createElement(IconTaskList, null)
-  ), /* @__PURE__ */ React112.createElement(Dropdown, { trigger: { label: "", title: "Task status", className: "todo-arrow-btn" }, keepOpen: true }, ["todo", "working", "blocked", "resolved"].map((status) => {
+  )), /* @__PURE__ */ React112.createElement(Dropdown, { trigger: { label: "", title: "Task status", className: "todo-arrow-btn" }, keepOpen: true }, ["todo", "working", "blocked", "resolved"].map((status) => {
     const images = { todo: "https://storage.googleapis.com/rufous-com-bucket-1/static/images/todo-blank.svg", working: "https://storage.googleapis.com/rufous-com-bucket-1/static/images/working.svg", blocked: "https://storage.googleapis.com/rufous-com-bucket-1/static/images/blocked.svg", resolved: "https://storage.googleapis.com/rufous-com-bucket-1/static/images/closed.svg" };
     const labels = { todo: "Todo", working: "Working", blocked: "Blocked", resolved: "Resolved" };
     return /* @__PURE__ */ React112.createElement("button", { key: status, className: "dropdown-item task-status-item", onClick: () => {
@@ -11026,7 +11004,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
         return true;
       }).run();
     } }, /* @__PURE__ */ React112.createElement("span", { className: `task-icon task-${status}` }, /* @__PURE__ */ React112.createElement("img", { src: images[status], alt: status })), " ", labels[status]);
-  })))), onClose && /* @__PURE__ */ React112.createElement("div", { className: "toolbar-row-right" }, /* @__PURE__ */ React112.createElement(
+  })))), onClose && /* @__PURE__ */ React112.createElement("div", { className: "toolbar-row-right" }, /* @__PURE__ */ React112.createElement(Tooltip, { title: "Close", placement: "top" }, /* @__PURE__ */ React112.createElement(
     "button",
     {
       className: "toolbar-btn btn-cross",
@@ -11040,11 +11018,10 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
         } catch {
         }
         onClose();
-      },
-      title: "Close"
+      }
     },
     /* @__PURE__ */ React112.createElement(closeIcon_default, { color: "#a81c08" })
-  )), showTranslateModal && /* @__PURE__ */ React112.createElement(
+  ))), showTranslateModal && /* @__PURE__ */ React112.createElement(
     TranslateModal_default,
     {
       editor,
@@ -11128,15 +11105,14 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
       value: width,
       onChange: (e) => handleWidthChange(e.target.value)
     }
-  ), /* @__PURE__ */ React113.createElement(
+  ), /* @__PURE__ */ React113.createElement(Tooltip, { title: lockRatio ? "Unlock aspect ratio" : "Lock aspect ratio", placement: "top" }, /* @__PURE__ */ React113.createElement(
     "button",
     {
       className: `lock-btn ${lockRatio ? "locked" : ""}`,
-      onClick: () => setLockRatio(!lockRatio),
-      title: lockRatio ? "Unlock aspect ratio" : "Lock aspect ratio"
+      onClick: () => setLockRatio(!lockRatio)
     },
     lockRatio ? "\u{1F512}" : "\u{1F513}"
-  ), /* @__PURE__ */ React113.createElement(
+  )), /* @__PURE__ */ React113.createElement(
     "input",
     {
       type: "number",
@@ -11321,13 +11297,13 @@ var ImageToolbar = ({ editor }) => {
         style: { position: "absolute", top: pos.top, left: pos.left, zIndex: 1e3 },
         onMouseDown: (e) => e.preventDefault()
       },
-      /* @__PURE__ */ React113.createElement("button", { className: "img-tool-btn", onClick: handleDelete, title: "Delete" }, "\u{1F5D1}"),
-      /* @__PURE__ */ React113.createElement("button", { className: "img-tool-btn", onClick: () => setShowModal(true), title: "Edit properties" }, "\u270E"),
-      /* @__PURE__ */ React113.createElement("div", { className: "img-tool-copy-wrapper" }, /* @__PURE__ */ React113.createElement("button", { className: "img-tool-btn", onClick: handleCopy, title: "Copy image" }, copyStatus ? "\u2713" : "\u{1F4CB}"), copyStatus && /* @__PURE__ */ React113.createElement("span", { className: "img-copy-toast" }, copyStatus)),
-      /* @__PURE__ */ React113.createElement("div", { className: "img-tool-dropdown" }, /* @__PURE__ */ React113.createElement("button", { className: "img-tool-btn", onClick: () => {
+      /* @__PURE__ */ React113.createElement(Tooltip, { title: "Delete", placement: "top" }, /* @__PURE__ */ React113.createElement("button", { className: "img-tool-btn", onClick: handleDelete }, "\u{1F5D1}")),
+      /* @__PURE__ */ React113.createElement(Tooltip, { title: "Edit properties", placement: "top" }, /* @__PURE__ */ React113.createElement("button", { className: "img-tool-btn", onClick: () => setShowModal(true) }, "\u270E")),
+      /* @__PURE__ */ React113.createElement("div", { className: "img-tool-copy-wrapper" }, /* @__PURE__ */ React113.createElement(Tooltip, { title: "Copy image", placement: "top" }, /* @__PURE__ */ React113.createElement("button", { className: "img-tool-btn", onClick: handleCopy }, copyStatus ? "\u2713" : "\u{1F4CB}")), copyStatus && /* @__PURE__ */ React113.createElement("span", { className: "img-copy-toast" }, copyStatus)),
+      /* @__PURE__ */ React113.createElement("div", { className: "img-tool-dropdown" }, /* @__PURE__ */ React113.createElement(Tooltip, { title: "Horizontal alignment", placement: "top" }, /* @__PURE__ */ React113.createElement("button", { className: "img-tool-btn", onClick: () => {
         setShowAlign(!showAlign);
         setShowVAlign(false);
-      }, title: "Horizontal alignment" }, "\u2630 ", /* @__PURE__ */ React113.createElement("span", { className: "dropdown-arrow" }, "\u25BE")), showAlign && /* @__PURE__ */ React113.createElement("div", { className: "img-tool-menu" }, ALIGNMENTS.map((a) => /* @__PURE__ */ React113.createElement("button", { key: a.value, className: "dropdown-item", onClick: () => setAlignmentVal(a.value) }, a.icon, " ", a.label))))
+      } }, "\u2630 ", /* @__PURE__ */ React113.createElement("span", { className: "dropdown-arrow" }, "\u25BE"))), showAlign && /* @__PURE__ */ React113.createElement("div", { className: "img-tool-menu" }, ALIGNMENTS.map((a) => /* @__PURE__ */ React113.createElement("button", { key: a.value, className: "dropdown-item", onClick: () => setAlignmentVal(a.value) }, a.icon, " ", a.label))))
     ), showModal && /* @__PURE__ */ React113.createElement(
       ImagePropertiesModal,
       {
@@ -11410,15 +11386,14 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
       value: width,
       onChange: (e) => handleWidthChange(e.target.value)
     }
-  ), /* @__PURE__ */ React114.createElement(
+  ), /* @__PURE__ */ React114.createElement(Tooltip, { title: lockRatio ? "Unlock aspect ratio" : "Lock aspect ratio", placement: "top" }, /* @__PURE__ */ React114.createElement(
     "button",
     {
       className: `lock-btn ${lockRatio ? "locked" : ""}`,
-      onClick: () => setLockRatio(!lockRatio),
-      title: lockRatio ? "Unlock aspect ratio" : "Lock aspect ratio"
+      onClick: () => setLockRatio(!lockRatio)
     },
     lockRatio ? "\u{1F512}" : "\u{1F513}"
-  ), /* @__PURE__ */ React114.createElement(
+  )), /* @__PURE__ */ React114.createElement(
     "input",
     {
       type: "number",
@@ -11545,13 +11520,13 @@ var VideoToolbar = ({ editor }) => {
         style: { position: "absolute", top: pos.top, left: pos.left, zIndex: 1e3 },
         onMouseDown: (e) => e.preventDefault()
       },
-      /* @__PURE__ */ React114.createElement("button", { className: "img-tool-btn", onClick: handleDelete, title: "Delete" }, "\u{1F5D1}"),
-      /* @__PURE__ */ React114.createElement("button", { className: "img-tool-btn", onClick: () => setShowModal(true), title: "Edit properties" }, "\u270E"),
-      /* @__PURE__ */ React114.createElement("div", { className: "img-tool-copy-wrapper" }, /* @__PURE__ */ React114.createElement("button", { className: "img-tool-btn", onClick: handleCopy, title: "Copy URL" }, copyStatus ? "\u2713" : "\u{1F4CB}"), copyStatus && /* @__PURE__ */ React114.createElement("span", { className: "img-copy-toast" }, copyStatus)),
-      /* @__PURE__ */ React114.createElement("div", { className: "img-tool-dropdown" }, /* @__PURE__ */ React114.createElement("button", { className: "img-tool-btn", onClick: () => {
+      /* @__PURE__ */ React114.createElement(Tooltip, { title: "Delete", placement: "top" }, /* @__PURE__ */ React114.createElement("button", { className: "img-tool-btn", onClick: handleDelete }, "\u{1F5D1}")),
+      /* @__PURE__ */ React114.createElement(Tooltip, { title: "Edit properties", placement: "top" }, /* @__PURE__ */ React114.createElement("button", { className: "img-tool-btn", onClick: () => setShowModal(true) }, "\u270E")),
+      /* @__PURE__ */ React114.createElement("div", { className: "img-tool-copy-wrapper" }, /* @__PURE__ */ React114.createElement(Tooltip, { title: "Copy URL", placement: "top" }, /* @__PURE__ */ React114.createElement("button", { className: "img-tool-btn", onClick: handleCopy }, copyStatus ? "\u2713" : "\u{1F4CB}")), copyStatus && /* @__PURE__ */ React114.createElement("span", { className: "img-copy-toast" }, copyStatus)),
+      /* @__PURE__ */ React114.createElement("div", { className: "img-tool-dropdown" }, /* @__PURE__ */ React114.createElement(Tooltip, { title: "Size presets", placement: "top" }, /* @__PURE__ */ React114.createElement("button", { className: "img-tool-btn", onClick: () => {
         setShowSize(!showSize);
         setShowAlign(false);
-      }, title: "Size presets" }, /* @__PURE__ */ React114.createElement("span", { style: { fontSize: "11px" } }, node.attrs.width || 640, "x", node.attrs.height || 360), /* @__PURE__ */ React114.createElement("span", { className: "dropdown-arrow" }, "\u25BE")), showSize && /* @__PURE__ */ React114.createElement("div", { className: "img-tool-menu" }, /* @__PURE__ */ React114.createElement("button", { className: "dropdown-item", onClick: () => {
+      } }, /* @__PURE__ */ React114.createElement("span", { style: { fontSize: "11px" } }, node.attrs.width || 640, "x", node.attrs.height || 360), /* @__PURE__ */ React114.createElement("span", { className: "dropdown-arrow" }, "\u25BE"))), showSize && /* @__PURE__ */ React114.createElement("div", { className: "img-tool-menu" }, /* @__PURE__ */ React114.createElement("button", { className: "dropdown-item", onClick: () => {
         handleResize("small");
         setShowSize(false);
       } }, "Small (320x180)"), /* @__PURE__ */ React114.createElement("button", { className: "dropdown-item", onClick: () => {
@@ -11564,10 +11539,10 @@ var VideoToolbar = ({ editor }) => {
         handleResize("full");
         setShowSize(false);
       } }, "Full (854x480)"))),
-      /* @__PURE__ */ React114.createElement("div", { className: "img-tool-dropdown" }, /* @__PURE__ */ React114.createElement("button", { className: "img-tool-btn", onClick: () => {
+      /* @__PURE__ */ React114.createElement("div", { className: "img-tool-dropdown" }, /* @__PURE__ */ React114.createElement(Tooltip, { title: "Horizontal alignment", placement: "top" }, /* @__PURE__ */ React114.createElement("button", { className: "img-tool-btn", onClick: () => {
         setShowAlign(!showAlign);
         setShowSize(false);
-      }, title: "Horizontal alignment" }, "\u2630 ", /* @__PURE__ */ React114.createElement("span", { className: "dropdown-arrow" }, "\u25BE")), showAlign && /* @__PURE__ */ React114.createElement("div", { className: "img-tool-menu" }, ALIGNMENTS2.map((a) => /* @__PURE__ */ React114.createElement("button", { key: a.value, className: "dropdown-item", onClick: () => setAlignmentVal(a.value) }, a.icon, " ", a.label))))
+      } }, "\u2630 ", /* @__PURE__ */ React114.createElement("span", { className: "dropdown-arrow" }, "\u25BE"))), showAlign && /* @__PURE__ */ React114.createElement("div", { className: "img-tool-menu" }, ALIGNMENTS2.map((a) => /* @__PURE__ */ React114.createElement("button", { key: a.value, className: "dropdown-item", onClick: () => setAlignmentVal(a.value) }, a.icon, " ", a.label))))
     ), showModal && /* @__PURE__ */ React114.createElement(
       VideoPropertiesModal,
       {
@@ -11650,101 +11625,19 @@ var TableToolbar = ({ editor }) => {
         style: { top: pos.top, left: pos.left },
         onMouseDown: prevent
       },
-      /* @__PURE__ */ React115.createElement(
-        "button",
-        {
-          className: "rf-table-toolbar-btn",
-          onClick: () => editor.chain().focus().addRowBefore().run(),
-          title: "Insert row above"
-        },
-        /* @__PURE__ */ React115.createElement(IconAddRowBefore, null)
-      ),
-      /* @__PURE__ */ React115.createElement(
-        "button",
-        {
-          className: "rf-table-toolbar-btn",
-          onClick: () => editor.chain().focus().addRowAfter().run(),
-          title: "Insert row below"
-        },
-        /* @__PURE__ */ React115.createElement(IconAddRowAfter, null)
-      ),
-      /* @__PURE__ */ React115.createElement(
-        "button",
-        {
-          className: "rf-table-toolbar-btn rf-table-toolbar-btn-danger",
-          onClick: () => editor.chain().focus().deleteRow().run(),
-          title: "Delete row"
-        },
-        /* @__PURE__ */ React115.createElement(IconDeleteRow, null)
-      ),
+      /* @__PURE__ */ React115.createElement(Tooltip, { title: "Insert row above", placement: "top" }, /* @__PURE__ */ React115.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().addRowBefore().run() }, /* @__PURE__ */ React115.createElement(IconAddRowBefore, null))),
+      /* @__PURE__ */ React115.createElement(Tooltip, { title: "Insert row below", placement: "top" }, /* @__PURE__ */ React115.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().addRowAfter().run() }, /* @__PURE__ */ React115.createElement(IconAddRowAfter, null))),
+      /* @__PURE__ */ React115.createElement(Tooltip, { title: "Delete row", placement: "top" }, /* @__PURE__ */ React115.createElement("button", { className: "rf-table-toolbar-btn rf-table-toolbar-btn-danger", onClick: () => editor.chain().focus().deleteRow().run() }, /* @__PURE__ */ React115.createElement(IconDeleteRow, null))),
       /* @__PURE__ */ React115.createElement("span", { className: "rf-table-toolbar-sep" }),
-      /* @__PURE__ */ React115.createElement(
-        "button",
-        {
-          className: "rf-table-toolbar-btn",
-          onClick: () => editor.chain().focus().addColumnBefore().run(),
-          title: "Insert column left"
-        },
-        /* @__PURE__ */ React115.createElement(IconAddColBefore, null)
-      ),
-      /* @__PURE__ */ React115.createElement(
-        "button",
-        {
-          className: "rf-table-toolbar-btn",
-          onClick: () => editor.chain().focus().addColumnAfter().run(),
-          title: "Insert column right"
-        },
-        /* @__PURE__ */ React115.createElement(IconAddColAfter, null)
-      ),
-      /* @__PURE__ */ React115.createElement(
-        "button",
-        {
-          className: "rf-table-toolbar-btn rf-table-toolbar-btn-danger",
-          onClick: () => editor.chain().focus().deleteColumn().run(),
-          title: "Delete column"
-        },
-        /* @__PURE__ */ React115.createElement(IconDeleteCol, null)
-      ),
+      /* @__PURE__ */ React115.createElement(Tooltip, { title: "Insert column left", placement: "top" }, /* @__PURE__ */ React115.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().addColumnBefore().run() }, /* @__PURE__ */ React115.createElement(IconAddColBefore, null))),
+      /* @__PURE__ */ React115.createElement(Tooltip, { title: "Insert column right", placement: "top" }, /* @__PURE__ */ React115.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().addColumnAfter().run() }, /* @__PURE__ */ React115.createElement(IconAddColAfter, null))),
+      /* @__PURE__ */ React115.createElement(Tooltip, { title: "Delete column", placement: "top" }, /* @__PURE__ */ React115.createElement("button", { className: "rf-table-toolbar-btn rf-table-toolbar-btn-danger", onClick: () => editor.chain().focus().deleteColumn().run() }, /* @__PURE__ */ React115.createElement(IconDeleteCol, null))),
       /* @__PURE__ */ React115.createElement("span", { className: "rf-table-toolbar-sep" }),
-      /* @__PURE__ */ React115.createElement(
-        "button",
-        {
-          className: "rf-table-toolbar-btn",
-          onClick: () => editor.chain().focus().mergeCells().run(),
-          disabled: !canMerge,
-          title: "Merge cells"
-        },
-        /* @__PURE__ */ React115.createElement(IconMergeCells, null)
-      ),
-      /* @__PURE__ */ React115.createElement(
-        "button",
-        {
-          className: "rf-table-toolbar-btn",
-          onClick: () => editor.chain().focus().splitCell().run(),
-          disabled: !canSplit,
-          title: "Split cell"
-        },
-        /* @__PURE__ */ React115.createElement(IconSplitCell, null)
-      ),
+      /* @__PURE__ */ React115.createElement(Tooltip, { title: "Merge cells", placement: "top" }, /* @__PURE__ */ React115.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().mergeCells().run(), disabled: !canMerge }, /* @__PURE__ */ React115.createElement(IconMergeCells, null))),
+      /* @__PURE__ */ React115.createElement(Tooltip, { title: "Split cell", placement: "top" }, /* @__PURE__ */ React115.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().splitCell().run(), disabled: !canSplit }, /* @__PURE__ */ React115.createElement(IconSplitCell, null))),
       /* @__PURE__ */ React115.createElement("span", { className: "rf-table-toolbar-sep" }),
-      /* @__PURE__ */ React115.createElement(
-        "button",
-        {
-          className: `rf-table-toolbar-btn ${editor.isActive("tableHeader") ? "active" : ""}`,
-          onClick: () => editor.chain().focus().toggleHeaderRow().run(),
-          title: "Toggle header row"
-        },
-        /* @__PURE__ */ React115.createElement(IconToggleHeader, null)
-      ),
-      /* @__PURE__ */ React115.createElement(
-        "button",
-        {
-          className: "rf-table-toolbar-btn rf-table-toolbar-btn-danger",
-          onClick: () => editor.chain().focus().deleteTable().run(),
-          title: "Delete table"
-        },
-        /* @__PURE__ */ React115.createElement(IconDeleteTable, null)
-      )
+      /* @__PURE__ */ React115.createElement(Tooltip, { title: "Toggle header row", placement: "top" }, /* @__PURE__ */ React115.createElement("button", { className: `rf-table-toolbar-btn ${editor.isActive("tableHeader") ? "active" : ""}`, onClick: () => editor.chain().focus().toggleHeaderRow().run() }, /* @__PURE__ */ React115.createElement(IconToggleHeader, null))),
+      /* @__PURE__ */ React115.createElement(Tooltip, { title: "Delete table", placement: "top" }, /* @__PURE__ */ React115.createElement("button", { className: "rf-table-toolbar-btn rf-table-toolbar-btn-danger", onClick: () => editor.chain().focus().deleteTable().run() }, /* @__PURE__ */ React115.createElement(IconDeleteTable, null)))
     ),
     document.body
   );