@blocknote/ariakit 0.24.1 → 0.25.0

package/dist/blocknote-ariakit.js

@@ -1,136 +1,168 @@
-import { jsx as r, jsxs as g, Fragment as B } from "react/jsx-runtime";
-import { assertEmpty as i, mergeCSSClasses as b, isSafari as L } from "@blocknote/core";
-import { elementOverflow as P, mergeRefs as C, ComponentsContext as F, BlockNoteViewRaw as E } from "@blocknote/react";
-import { FormProvider as T, FormLabel as G, FormInput as S, MenuProvider as V, Menu as $, MenuButton as w, MenuItem as M, MenuButtonArrow as O, CheckboxCheck as I, MenuGroupLabel as A, MenuSeparator as H, TabProvider as j, TabList as q, Tab as K, TabPanel as z, Button as N, PopoverDisclosure as J, Popover as Q, PopoverProvider as U, Group as y, Toolbar as W, TooltipProvider as X, TooltipAnchor as Y, ToolbarItem as x, Tooltip as Z, SelectProvider as _, Select as ee, SelectArrow as ne, SelectPopover as te, SelectItem as se, SelectItemCheck as ae } from "@ariakit/react";
-import { forwardRef as d, useRef as R, useEffect as D } from "react";
-const re = (n) => {
-  const { children: t, ...s } = n;
-  return i(s), /* @__PURE__ */ r(T, { children: t });
-}, oe = d((n, t) => {
+import { jsx as r, jsxs as h, Fragment as G } from "react/jsx-runtime";
+import { assertEmpty as i, mergeCSSClasses as b, isSafari as A } from "@blocknote/core";
+import { elementOverflow as P, mergeRefs as B, useFocusWithin as $, FormattingToolbarController as V, getFormattingToolbarItems as O, FormattingToolbar as H, ComponentsContext as j, BlockNoteViewRaw as q } from "@blocknote/react";
+import { FormProvider as T, FormLabel as K, FormInput as M, MenuProvider as z, Menu as U, MenuButton as w, MenuItem as C, MenuButtonArrow as W, CheckboxCheck as y, MenuGroupLabel as _, MenuSeparator as J, Button as f, TabProvider as Q, TabList as X, Tab as Y, TabPanel as Z, PopoverDisclosure as ee, Popover as ne, PopoverProvider as te, Group as N, Toolbar as ae, TooltipProvider as x, TooltipAnchor as F, ToolbarItem as R, Tooltip as D, SelectProvider as se, Select as re, SelectArrow as oe, SelectPopover as le, SelectItem as ce, SelectItemCheck as ie } from "@ariakit/react";
+import { forwardRef as u, useRef as E, useEffect as L, useState as ue } from "react";
+const de = (n) => {
+  const { children: t, ...a } = n;
+  return i(a), /* @__PURE__ */ r(T, { children: t });
+}, me = u((n, t) => {
   const {
-    className: s,
+    className: a,
     name: e,
-    label: a,
+    label: s,
     icon: o,
     value: l,
     autoFocus: m,
     placeholder: c,
-    onKeyDown: u,
-    onChange: p,
-    onSubmit: h,
-    ...v
+    onKeyDown: d,
+    onChange: g,
+    onSubmit: p,
+    ...k
   } = n;
-  return i(v), /* @__PURE__ */ g(B, { children: [
-    n.label && /* @__PURE__ */ r(G, { name: e, children: a }),
-    /* @__PURE__ */ g("div", { className: "bn-ak-input-wrapper", children: [
+  return i(k), /* @__PURE__ */ h(G, { children: [
+    n.label && /* @__PURE__ */ r(K, { name: e, children: s }),
+    /* @__PURE__ */ h("div", { className: "bn-ak-input-wrapper", children: [
       o,
       /* @__PURE__ */ r(
-        S,
+        M,
         {
-          className: b("bn-ak-input", s || ""),
+          className: b("bn-ak-input", a || ""),
           ref: t,
           name: e,
           value: l,
           autoFocus: m,
           placeholder: c,
-          onKeyDown: u,
-          onChange: p,
-          onSubmit: h
+          onKeyDown: d,
+          onChange: g,
+          onSubmit: p
         }
       )
     ] })
   ] });
-}), le = (n) => {
+}), be = (n) => {
   const {
     children: t,
-    onOpenChange: s,
+    onOpenChange: a,
     position: e,
-    sub: a,
+    sub: s,
     // unused
     ...o
   } = n;
   return i(o), /* @__PURE__ */ r(
-    V,
+    z,
     {
       placement: e,
-      setOpen: s,
+      setOpen: a,
       virtualFocus: !0,
       children: t
     }
   );
-}, ce = d((n, t) => {
+}, he = u((n, t) => {
   const {
-    className: s,
+    className: a,
     children: e,
-    sub: a,
+    sub: s,
     // unused
     ...o
   } = n;
   return i(o), /* @__PURE__ */ r(
-    $,
+    U,
     {
       unmountOnHide: !0,
-      className: b("bn-ak-menu", s || ""),
+      className: b("bn-ak-menu", a || ""),
       ref: t,
       children: e
     }
   );
-}), ie = d((n, t) => {
-  const { className: s, children: e, icon: a, checked: o, subTrigger: l, onClick: m, ...c } = n;
-  return i(c), l ? /* @__PURE__ */ g(
+}), ge = u((n, t) => {
+  const { className: a, children: e, icon: s, checked: o, subTrigger: l, onClick: m, ...c } = n;
+  return i(c), l ? /* @__PURE__ */ h(
     w,
     {
-      render: /* @__PURE__ */ r(M, {}),
-      className: b("bn-ak-menu-item", s || ""),
+      render: /* @__PURE__ */ r(C, {}),
+      className: b("bn-ak-menu-item", a || ""),
       ref: t,
       onClick: m,
       children: [
-        a,
+        s,
         e,
-        /* @__PURE__ */ r(O, {}),
-        o !== void 0 && /* @__PURE__ */ r(I, { checked: o })
+        /* @__PURE__ */ r(W, {}),
+        o !== void 0 && /* @__PURE__ */ r(y, { checked: o })
       ]
     }
-  ) : /* @__PURE__ */ g(
-    M,
+  ) : /* @__PURE__ */ h(
+    C,
     {
-      className: b("bn-ak-menu-item", s || ""),
+      className: b("bn-ak-menu-item", a || ""),
       ref: t,
       onClick: m,
       children: [
-        a,
+        s,
         e,
-        o !== void 0 && /* @__PURE__ */ r(I, { checked: o })
+        o !== void 0 && /* @__PURE__ */ r(y, { checked: o })
       ]
     }
   );
-}), ue = d((n, t) => {
-  const { className: s, children: e, ...a } = n;
-  return i(a), /* @__PURE__ */ r(
-    A,
+}), pe = u((n, t) => {
+  const { className: a, children: e, ...s } = n;
+  return i(s), /* @__PURE__ */ r(
+    _,
     {
-      className: b("bn-ak-group-label", s || ""),
+      className: b("bn-ak-group-label", a || ""),
       ref: t,
       children: e
     }
   );
-}), de = (n) => {
-  const { children: t, sub: s, ...e } = n;
-  return i(e), s ? t : /* @__PURE__ */ r(w, { render: t });
-}, me = d((n, t) => {
-  const { className: s, ...e } = n;
+}), Ne = (n) => {
+  const { children: t, sub: a, ...e } = n;
+  return i(e), a ? t : /* @__PURE__ */ r(w, { render: t });
+}, ke = u((n, t) => {
+  const { className: a, ...e } = n;
   return i(e), /* @__PURE__ */ r(
-    H,
+    J,
     {
-      className: b("bn-ak-separator", s || ""),
+      className: b("bn-ak-separator", a || ""),
       ref: t
     }
   );
-}), be = d((n, t) => {
+}), fe = u((n, t) => {
   const {
-    className: s,
+    className: a,
+    children: e,
+    icon: s,
+    onClick: o,
+    label: l,
+    onDragEnd: m,
+    onDragStart: c,
+    draggable: d,
+    ...g
+  } = n;
+  return i(g, !1), /* @__PURE__ */ h(
+    f,
+    {
+      onDragEnd: m,
+      onDragStart: c,
+      draggable: d,
+      "aria-label": l,
+      className: b(
+        "bn-ak-button bn-ak-secondary",
+        a || ""
+      ),
+      ref: t,
+      onClick: o,
+      ...g,
+      children: [
+        s,
+        e
+      ]
+    }
+  );
+}), ve = u((n, t) => {
+  const {
+    className: a,
     tabs: e,
-    defaultOpenTab: a,
+    defaultOpenTab: s,
     openTab: o,
     setOpenTab: l,
     loading: m,
@@ -140,228 +172,232 @@ const re = (n) => {
   return i(c), /* @__PURE__ */ r(
     "div",
     {
-      className: b("bn-ak-wrapper", s || ""),
+      className: b("bn-ak-wrapper", a || ""),
       ref: t,
-      children: /* @__PURE__ */ g(
-        j,
+      children: /* @__PURE__ */ h(
+        Q,
         {
-          defaultSelectedId: a,
+          defaultSelectedId: s,
           selectedId: o,
-          setActiveId: (u) => {
-            u && l(u);
+          setActiveId: (d) => {
+            d && l(d);
           },
           children: [
-            /* @__PURE__ */ r(q, { className: "bn-ak-tab-list", children: e.map((u) => /* @__PURE__ */ r(K, { className: "bn-ak-tab", id: u.name, children: u.name }, u.name)) }),
-            /* @__PURE__ */ r("div", { className: "bn-ak-panels", children: e.map((u) => /* @__PURE__ */ r(z, { tabId: u.name, children: u.tabPanel }, u.name)) })
+            /* @__PURE__ */ r(X, { className: "bn-ak-tab-list", children: e.map((d) => /* @__PURE__ */ r(Y, { className: "bn-ak-tab", id: d.name, children: d.name }, d.name)) }),
+            /* @__PURE__ */ r("div", { className: "bn-ak-panels", children: e.map((d) => /* @__PURE__ */ r(Z, { tabId: d.name, children: d.tabPanel }, d.name)) })
           ]
         }
       )
     }
   );
-}), ge = d((n, t) => {
-  const { className: s, children: e, onClick: a, label: o, ...l } = n;
+}), Se = u((n, t) => {
+  const { className: a, children: e, onClick: s, label: o, ...l } = n;
   return i(l), /* @__PURE__ */ r(
-    N,
+    f,
     {
-      className: b("bn-ak-button", s || ""),
-      onClick: a,
+      className: b("bn-ak-button", a || ""),
+      onClick: s,
       "aria-label": o,
       ref: t,
       children: e
     }
   );
-}), pe = d((n, t) => {
-  const { className: s, accept: e, value: a, placeholder: o, onChange: l, ...m } = n;
+}), Te = u((n, t) => {
+  const { className: a, accept: e, value: s, placeholder: o, onChange: l, ...m } = n;
   return i(m), /* @__PURE__ */ r(T, { children: /* @__PURE__ */ r(
-    S,
+    M,
     {
-      className: s,
+      className: a,
       ref: t,
       name: "panel-input",
       type: "file",
       accept: e,
-      value: a ? a.name : void 0,
+      value: s ? s.name : void 0,
       onChange: async (c) => l == null ? void 0 : l(c.target.files[0]),
       placeholder: o
     }
   ) });
-}), he = d((n, t) => {
-  const { className: s, children: e, ...a } = n;
-  return i(a), /* @__PURE__ */ r("div", { className: s, ref: t, children: e });
-}), Ne = d((n, t) => {
-  const { className: s, value: e, placeholder: a, onKeyDown: o, onChange: l, ...m } = n;
+}), Me = u((n, t) => {
+  const { className: a, children: e, ...s } = n;
+  return i(s), /* @__PURE__ */ r("div", { className: a, ref: t, children: e });
+}), Ie = u((n, t) => {
+  const { className: a, value: e, placeholder: s, onKeyDown: o, onChange: l, ...m } = n;
   return i(m), /* @__PURE__ */ r(T, { children: /* @__PURE__ */ r(
-    S,
+    M,
     {
-      className: b("bn-ak-input", s || ""),
+      className: b("bn-ak-input", a || ""),
       name: "panel-input",
       value: e,
-      placeholder: a,
+      placeholder: s,
       onChange: l,
       onKeyDown: o,
       "data-test": "embed-input",
       ref: t
     }
   ) });
-}), ve = d((n, t) => {
-  const { children: s, ...e } = n;
-  return i(e), /* @__PURE__ */ r(J, { render: s, ref: t });
-}), ke = d((n, t) => {
-  const { className: s, children: e, variant: a, ...o } = n;
+}), Ce = u((n, t) => {
+  const { children: a, ...e } = n;
+  return i(e), /* @__PURE__ */ r(ee, { render: a, ref: t });
+}), ye = u((n, t) => {
+  const { className: a, children: e, variant: s, ...o } = n;
   return i(o), /* @__PURE__ */ r(
-    Q,
+    ne,
     {
-      className: b("bn-ak-popover", s || ""),
+      className: b(
+        "bn-ak-popover",
+        a || "",
+        s === "panel-popover" ? "bn-ak-panel-popover" : ""
+      ),
       ref: t,
       children: e
     }
   );
-}), fe = (n) => {
-  const { children: t, opened: s, position: e, ...a } = n;
-  return i(a), /* @__PURE__ */ r(U, { open: s, placement: e, children: t });
-}, Te = d((n, t) => {
-  const { className: s, children: e, ...a } = n;
-  return i(a, !1), /* @__PURE__ */ r(y, { className: s, ref: t, ...a, children: e });
-}), Se = d((n, t) => {
+}), Pe = (n) => {
+  const { children: t, opened: a, position: e, ...s } = n;
+  return i(s), /* @__PURE__ */ r(te, { open: a, placement: e, children: t });
+}, Be = u((n, t) => {
+  const { className: a, children: e, ...s } = n;
+  return i(s, !1), /* @__PURE__ */ r(N, { className: a, ref: t, ...s, children: e });
+}), we = u((n, t) => {
   const {
-    className: s,
+    className: a,
     children: e,
-    icon: a,
+    icon: s,
     onClick: o,
     label: l,
     onDragEnd: m,
     onDragStart: c,
-    draggable: u,
-    ...p
+    draggable: d,
+    ...g
   } = n;
-  return i(p, !1), /* @__PURE__ */ g(
-    N,
+  return i(g, !1), /* @__PURE__ */ h(
+    f,
     {
       onDragEnd: m,
       onDragStart: c,
-      draggable: u,
+      draggable: d,
       "aria-label": l,
       className: b(
         "bn-ak-button bn-ak-secondary",
-        s || ""
+        a || ""
       ),
       ref: t,
       onClick: o,
-      ...p,
+      ...g,
       children: [
-        a,
+        s,
         e
       ]
     }
   );
-}), Me = d((n, t) => {
-  const { className: s, children: e, id: a, columns: o, ...l } = n;
+}), xe = u((n, t) => {
+  const { className: a, children: e, id: s, columns: o, ...l } = n;
   return i(l), /* @__PURE__ */ r(
     "div",
     {
-      className: s,
+      className: a,
       style: { gridTemplateColumns: `repeat(${o}, 1fr)` },
       ref: t,
-      id: a,
+      id: s,
       role: "grid",
       children: e
     }
   );
-}), Ie = d((n, t) => {
-  const { className: s, children: e, columns: a, ...o } = n;
+}), Fe = u((n, t) => {
+  const { className: a, children: e, columns: s, ...o } = n;
   return i(o), /* @__PURE__ */ r(
     "div",
     {
-      className: b("bn-ak-menu-item", s || ""),
-      style: { gridColumn: `1 / ${a + 1}` },
+      className: b("bn-ak-menu-item", a || ""),
+      style: { gridColumn: `1 / ${s + 1}` },
       ref: t,
       children: /* @__PURE__ */ r("div", { className: "bn-ak-suggestion-menu-item-label", children: e })
     }
   );
-}), Pe = d((n, t) => {
-  const { className: s, isSelected: e, onClick: a, item: o, id: l, ...m } = n;
+}), Re = u((n, t) => {
+  const { className: a, isSelected: e, onClick: s, item: o, id: l, ...m } = n;
   i(m);
-  const c = R(null);
-  return D(() => {
+  const c = E(null);
+  return L(() => {
     if (!c.current || !e)
       return;
-    const u = P(
+    const d = P(
       c.current,
       document.querySelector(".bn-grid-suggestion-menu")
     );
-    u === "top" ? c.current.scrollIntoView(!0) : u === "bottom" && c.current.scrollIntoView(!1);
+    d === "top" ? c.current.scrollIntoView(!0) : d === "bottom" && c.current.scrollIntoView(!1);
   }, [e]), /* @__PURE__ */ r(
     "div",
     {
-      className: s,
-      ref: C([t, c]),
+      className: a,
+      ref: B([t, c]),
       id: l,
       role: "option",
-      onClick: a,
+      onClick: s,
       "aria-selected": e || void 0,
       children: o.icon
     }
   );
-}), Ce = d((n, t) => {
+}), De = u((n, t) => {
   const {
-    className: s,
+    className: a,
     children: e,
     // unused, using "dots" instead
-    columns: a,
+    columns: s,
     ...o
   } = n;
   return i(o), /* @__PURE__ */ r(
     "div",
     {
-      className: s,
-      style: { gridColumn: `1 / ${a + 1}` },
+      className: a,
+      style: { gridColumn: `1 / ${s + 1}` },
       ref: t,
       children: e
     }
   );
-}), we = d((n, t) => {
-  const { className: s, children: e, id: a, ...o } = n;
+}), Ee = u((n, t) => {
+  const { className: a, children: e, id: s, ...o } = n;
   return i(o), /* @__PURE__ */ r(
-    y,
+    N,
     {
-      className: b("bn-ak-menu", s || ""),
-      id: a,
+      className: b("bn-ak-menu", a || ""),
+      id: s,
       role: "listbox",
       ref: t,
       children: e
     }
   );
-}), ye = d((n, t) => {
-  const { className: s, children: e, ...a } = n;
-  return i(a), /* @__PURE__ */ r(
+}), Le = u((n, t) => {
+  const { className: a, children: e, ...s } = n;
+  return i(s), /* @__PURE__ */ r(
     "div",
     {
-      className: b("bn-ak-menu-item", s || ""),
+      className: b("bn-ak-menu-item", a || ""),
       ref: t,
       children: /* @__PURE__ */ r("div", { className: "bn-ak-suggestion-menu-item-label", children: e })
     }
   );
-}), xe = d((n, t) => {
-  const { className: s, item: e, isSelected: a, onClick: o, id: l, ...m } = n;
+}), Ge = u((n, t) => {
+  const { className: a, item: e, isSelected: s, onClick: o, id: l, ...m } = n;
   i(m);
-  const c = R(null);
-  return D(() => {
-    if (!c.current || !a)
+  const c = E(null);
+  return L(() => {
+    if (!c.current || !s)
       return;
-    const u = P(
+    const d = P(
       c.current,
       document.querySelector(".bn-suggestion-menu")
     );
-    u === "top" ? c.current.scrollIntoView(!0) : u === "bottom" && c.current.scrollIntoView(!1);
-  }, [a]), /* @__PURE__ */ g(
+    d === "top" ? c.current.scrollIntoView(!0) : d === "bottom" && c.current.scrollIntoView(!1);
+  }, [s]), /* @__PURE__ */ h(
     "div",
     {
-      className: b("bn-ak-menu-item", s || ""),
-      ref: C([t, c]),
+      className: b("bn-ak-menu-item", a || ""),
+      ref: B([t, c]),
       id: l,
       onClick: o,
       role: "option",
-      "aria-selected": a || void 0,
+      "aria-selected": s || void 0,
       children: [
         e.icon && /* @__PURE__ */ r(
           "div",
@@ -371,7 +407,7 @@ const re = (n) => {
             children: e.icon
           }
         ),
-        /* @__PURE__ */ g("div", { className: "bn-ak-suggestion-menu-item-body", children: [
+        /* @__PURE__ */ h("div", { className: "bn-ak-suggestion-menu-item-body", children: [
           /* @__PURE__ */ r("div", { className: "bn-ak-suggestion-menu-item-title", children: e.title }),
           /* @__PURE__ */ r("div", { className: "bn-ak-suggestion-menu-item-subtitle", children: e.subtext })
         ] }),
@@ -386,114 +422,120 @@ const re = (n) => {
       ]
     }
   );
-}), Re = d((n, t) => {
-  const { className: s, children: e, ...a } = n;
-  return i(a), /* @__PURE__ */ r(
+}), Ae = u((n, t) => {
+  const { className: a, children: e, ...s } = n;
+  return i(s), /* @__PURE__ */ r(
     "div",
     {
-      className: b("bn-ak-group-label", s || ""),
+      className: b("bn-ak-group-label", a || ""),
       ref: t,
       children: e
     }
   );
-}), De = d((n, t) => {
-  const { className: s, children: e, ...a } = n;
-  return i(a), /* @__PURE__ */ r("div", { className: s, ref: t, children: e });
-}), Be = d((n, t) => {
-  const { children: s, className: e, onMouseDown: a, onClick: o, ...l } = n;
+}), $e = u((n, t) => {
+  const { className: a, children: e, ...s } = n;
+  return i(s), /* @__PURE__ */ r("div", { className: a, ref: t, children: e });
+}), Ve = u((n, t) => {
+  const { children: a, className: e, onMouseDown: s, onClick: o, ...l } = n;
   return i(l, !1), /* @__PURE__ */ r(
-    N,
+    f,
     {
       className: b(
         "bn-ak-button bn-ak-secondary",
         e || ""
       ),
       ref: t,
-      onMouseDown: a,
+      onMouseDown: s,
       onClick: o,
       ...l,
-      children: s
+      children: a
     }
   );
-}), Le = d((n, t) => {
+}), Oe = u((n, t) => {
   const {
-    className: s,
+    className: a,
     children: e,
-    draggable: a,
+    draggable: s,
     onDragStart: o,
     onDragEnd: l,
     style: m,
     label: c,
-    ...u
+    ...d
   } = n;
-  return i(u, !1), /* @__PURE__ */ r(
-    N,
+  return i(d, !1), /* @__PURE__ */ r(
+    f,
     {
       className: b(
         "bn-ak-button bn-ak-secondary",
-        s || ""
+        a || ""
       ),
       ref: t,
       "aria-label": c,
-      draggable: a,
+      draggable: s,
       onDragStart: o,
       onDragEnd: l,
       style: m,
-      ...u,
+      ...d,
       children: e
     }
   );
-}), k = d(
+}), v = u(
   (n, t) => {
-    const { className: s, children: e, onMouseEnter: a, onMouseLeave: o, ...l } = n;
-    return i(l), /* @__PURE__ */ r(
-      W,
+    const {
+      className: a,
+      children: e,
+      onMouseEnter: s,
+      onMouseLeave: o,
+      variant: l,
+      ...m
+    } = n;
+    return i(m), /* @__PURE__ */ r(
+      ae,
       {
-        className: b("bn-ak-toolbar", s || ""),
+        className: b("bn-ak-toolbar", a || ""),
         ref: t,
-        onMouseEnter: a,
+        onMouseEnter: s,
         onMouseLeave: o,
         children: e
       }
     );
   }
-), f = d(
+), S = u(
   (n, t) => {
     const {
-      className: s,
+      className: a,
       children: e,
-      mainTooltip: a,
+      mainTooltip: s,
       secondaryTooltip: o,
       icon: l,
       isSelected: m,
       isDisabled: c,
-      onClick: u,
-      label: p,
-      ...h
+      onClick: d,
+      label: g,
+      variant: p,
+      ...k
     } = n;
-    return i(h, !1), /* @__PURE__ */ g(X, { children: [
+    return i(k, !1), /* @__PURE__ */ h(x, { children: [
       /* @__PURE__ */ r(
-        Y,
+        F,
         {
-          className: "link",
-          render: /* @__PURE__ */ g(
-            x,
+          render: /* @__PURE__ */ h(
+            R,
             {
-              "aria-label": p,
+              "aria-label": g,
               className: b(
                 "bn-ak-button bn-ak-secondary",
-                s || ""
+                a || ""
               ),
-              onMouseDown: (v) => {
-                L() && v.currentTarget.focus();
+              onMouseDown: (I) => {
+                A() && I.currentTarget.focus();
               },
-              onClick: u,
+              onClick: d,
               "aria-pressed": m,
               "data-selected": m ? "true" : void 0,
-              "data-test": n.mainTooltip.slice(0, 1).toLowerCase() + n.mainTooltip.replace(/\s+/g, "").slice(1),
               disabled: c || !1,
               ref: t,
-              ...h,
+              ...k,
               children: [
                 l,
                 e
@@ -502,51 +544,51 @@ const re = (n) => {
           )
         }
       ),
-      /* @__PURE__ */ g(Z, { className: "bn-ak-tooltip", children: [
-        /* @__PURE__ */ r("span", { children: a }),
+      /* @__PURE__ */ h(D, { className: "bn-ak-tooltip", portal: !1, children: [
+        /* @__PURE__ */ r("span", { children: s }),
         o && /* @__PURE__ */ r("span", { children: o })
       ] })
     ] });
   }
-), Fe = d((n, t) => {
-  const { className: s, items: e, isDisabled: a, ...o } = n;
+), He = u((n, t) => {
+  const { className: a, items: e, isDisabled: s, ...o } = n;
   i(o);
   const l = n.items.filter((c) => c.isSelected)[0], m = (c) => {
-    var u, p;
-    (p = (u = e.find((h) => h.text === c)).onClick) == null || p.call(u);
+    var d, g;
+    (g = (d = e.find((p) => p.text === c)).onClick) == null || g.call(d);
   };
-  return /* @__PURE__ */ g(_, { value: l.text, setValue: m, children: [
-    /* @__PURE__ */ g(
-      ee,
+  return /* @__PURE__ */ h(se, { value: l.text, setValue: m, children: [
+    /* @__PURE__ */ h(
+      re,
       {
         className: "bn-ak-button bn-ak-secondary",
-        disabled: a,
+        disabled: s,
         "aria-label": "Text alignment",
-        render: /* @__PURE__ */ r(x, {}),
+        render: /* @__PURE__ */ r(R, {}),
         children: [
           l.icon,
           " ",
           l.text,
           " ",
-          /* @__PURE__ */ r(ne, {})
+          /* @__PURE__ */ r(oe, {})
         ]
       }
     ),
     /* @__PURE__ */ r(
-      te,
+      le,
       {
-        className: b("bn-ak-popover", s || ""),
+        className: b("bn-ak-popover", a || ""),
         ref: t,
         gutter: 4,
-        children: e.map((c) => /* @__PURE__ */ g(
-          se,
+        children: e.map((c) => /* @__PURE__ */ h(
+          ce,
           {
             className: "bn-ak-select-item",
             value: c.text,
             children: [
               c.icon,
               c.text,
-              c.text === l.text && /* @__PURE__ */ r(ae, {})
+              c.text === l.text && /* @__PURE__ */ r(ie, {})
             ]
           },
           c.text
@@ -554,79 +596,245 @@ const re = (n) => {
       }
     )
   ] });
-}), Ee = {
+}), je = u((n, t) => {
+  const { className: a, children: e, ...s } = n;
+  return i(s, !1), /* @__PURE__ */ r(
+    N,
+    {
+      className: b(a, "bn-ak-hovercard"),
+      ref: t,
+      children: e
+    }
+  );
+}), qe = u((n, t) => {
+  const { className: a, children: e, ...s } = n;
+  return i(s, !1), /* @__PURE__ */ r(
+    N,
+    {
+      className: b(a, "bn-ak-card-section"),
+      ref: t,
+      children: e
+    }
+  );
+}), Ke = u((n, t) => {
+  const { authorInfo: a, timeString: e, ...s } = n;
+  return i(s, !1), a === "loading" ? /* @__PURE__ */ h(N, { className: "bn-ak-author-info", children: [
+    /* @__PURE__ */ r("div", { className: "bn-ak-avatar bn-ak-skeleton" }),
+    /* @__PURE__ */ r("div", { className: "bn-ak-username bn-ak-skeleton" })
+  ] }) : /* @__PURE__ */ h(N, { className: "bn-ak-author-info", children: [
+    /* @__PURE__ */ r(
+      "img",
+      {
+        src: a.avatarUrl,
+        alt: a.username,
+        className: "bn-ak-avatar"
+      }
+    ),
+    /* @__PURE__ */ h("div", { className: "bn-ak-username", children: [
+      a.username,
+      /* @__PURE__ */ r("span", { children: e })
+    ] })
+  ] });
+}), ze = u((n, t) => {
+  const {
+    className: a,
+    showActions: e,
+    authorInfo: s,
+    timeString: o,
+    actions: l,
+    children: m,
+    ...c
+  } = n;
+  i(c, !1);
+  const [d, g] = ue(!1), { focused: p, ref: k } = $();
+  return /* @__PURE__ */ h(
+    N,
+    {
+      ref: t,
+      className: a,
+      onMouseEnter: () => g(!0),
+      onMouseLeave: () => g(!1),
+      children: [
+        l && (e === !0 || e === void 0 || e === "hover" && d || p) ? /* @__PURE__ */ r(
+          N,
+          {
+            ref: k,
+            style: {
+              position: "absolute",
+              right: 0,
+              top: 0,
+              zIndex: 10
+            },
+            children: l
+          }
+        ) : null,
+        /* @__PURE__ */ r(Ke, { ...n }),
+        m
+      ]
+    }
+  );
+}), Ue = u((n, t) => {
+  const { className: a, onFocus: e, onBlur: s, editor: o, editable: l, ...m } = n;
+  return i(m, !1), /* @__PURE__ */ r(
+    Xe,
+    {
+      autoFocus: !0,
+      className: a,
+      editor: n.editor,
+      sideMenu: !1,
+      slashMenu: !1,
+      tableHandles: !1,
+      filePanel: !1,
+      formattingToolbar: !1,
+      editable: l,
+      ref: t,
+      onFocus: e,
+      onBlur: s,
+      children: /* @__PURE__ */ r(
+        V,
+        {
+          formattingToolbar: We
+        }
+      )
+    }
+  );
+}), We = () => {
+  const n = O([]).filter(
+    (t) => t.key !== "nestBlockButton" && t.key !== "unnestBlockButton"
+  );
+  return /* @__PURE__ */ r(H, { blockTypeSelectItems: [], children: n });
+}, _e = u((n, t) => {
+  const {
+    className: a,
+    text: e,
+    icon: s,
+    isSelected: o,
+    mainTooltip: l,
+    secondaryTooltip: m,
+    onClick: c,
+    onMouseEnter: d,
+    ...g
+  } = n;
+  i(g, !1);
+  const p = /* @__PURE__ */ h(
+    f,
+    {
+      className: b(
+        a,
+        "bn-ak-badge bn-ak-button",
+        o && "bn-ak-primary"
+      ),
+      "aria-selected": o === !0,
+      onClick: (k) => c == null ? void 0 : c(k),
+      onMouseEnter: d,
+      ref: t,
+      children: [
+        /* @__PURE__ */ r("span", { children: s }),
+        /* @__PURE__ */ r("span", { children: e })
+      ]
+    }
+  );
+  return l ? /* @__PURE__ */ h(x, { children: [
+    /* @__PURE__ */ r(F, { render: p }),
+    /* @__PURE__ */ h(D, { className: "bn-ak-tooltip", portal: !1, children: [
+      /* @__PURE__ */ r("span", { children: l }),
+      m && /* @__PURE__ */ r("span", { children: m })
+    ] })
+  ] }) : p;
+}), Je = u((n, t) => {
+  const { className: a, children: e, ...s } = n;
+  return i(s), /* @__PURE__ */ r(
+    N,
+    {
+      className: b(a, "bn-ak-badge-group"),
+      ref: t,
+      children: e
+    }
+  );
+}), Qe = {
   FormattingToolbar: {
-    Root: k,
-    Button: f,
-    Select: Fe
+    Root: v,
+    Button: S,
+    Select: He
   },
   FilePanel: {
-    Root: be,
-    Button: ge,
-    FileInput: pe,
-    TabPanel: he,
-    TextInput: Ne
+    Root: ve,
+    Button: Se,
+    FileInput: Te,
+    TabPanel: Me,
+    TextInput: Ie
   },
   GridSuggestionMenu: {
-    Root: Me,
-    Item: Pe,
-    EmptyItem: Ie,
-    Loader: Ce
+    Root: xe,
+    Item: Re,
+    EmptyItem: Fe,
+    Loader: De
   },
   LinkToolbar: {
-    Root: k,
-    Button: f
+    Root: v,
+    Button: S
   },
   SideMenu: {
-    Root: Te,
-    Button: Se
+    Root: Be,
+    Button: we
   },
   SuggestionMenu: {
-    Root: we,
-    Item: xe,
-    EmptyItem: ye,
-    Label: Re,
-    Loader: De
+    Root: Ee,
+    Item: Ge,
+    EmptyItem: Le,
+    Label: Ae,
+    Loader: $e
   },
   TableHandle: {
-    Root: Le,
-    ExtendButton: Be
+    Root: Oe,
+    ExtendButton: Ve
+  },
+  Comments: {
+    Comment: ze,
+    Editor: Ue,
+    Card: je,
+    CardSection: qe
   },
   Generic: {
+    Badge: {
+      Root: _e,
+      Group: Je
+    },
     Toolbar: {
-      Root: k,
-      Button: f
+      Root: v,
+      Button: S
     },
     Form: {
-      Root: re,
-      TextInput: oe
+      Root: de,
+      TextInput: me
     },
     Menu: {
-      Root: le,
-      Trigger: de,
-      Dropdown: ce,
-      Divider: me,
-      Label: ue,
-      Item: ie
+      Root: be,
+      Trigger: Ne,
+      Dropdown: he,
+      Divider: ke,
+      Label: pe,
+      Item: ge,
+      Button: fe
     },
     Popover: {
-      Root: fe,
-      Trigger: ve,
-      Content: ke
+      Root: Pe,
+      Trigger: Ce,
+      Content: ye
     }
   }
-}, He = (n) => {
-  const { className: t, ...s } = n;
-  return /* @__PURE__ */ r(F.Provider, { value: Ee, children: /* @__PURE__ */ r(
-    E,
+}, Xe = (n) => {
+  const { className: t, ...a } = n;
+  return /* @__PURE__ */ r(j.Provider, { value: Qe, children: /* @__PURE__ */ r(
+    q,
     {
       className: b("bn-ariakit", t || ""),
-      ...s
+      ...a
     }
   ) });
 };
 export {
-  He as BlockNoteView,
-  Ee as components
+  Xe as BlockNoteView,
+  Qe as components
 };
 //# sourceMappingURL=blocknote-ariakit.js.map