@instructure/platform-notebook 0.10.1 → 1.1.0

package/dist/index.js

@@ -1,184 +1,182 @@
-import { jsx as s, jsxs as T, Fragment as Ye } from "react/jsx-runtime";
-import { createContext as Pe, useMemo as re, useContext as _e, useReducer as Fe, useRef as V, useEffect as ee, useState as W, useCallback as K } from "react";
-import { createPortal as Ze } from "react-dom";
-import { z as c } from "zod";
-import Je from "diff-match-patch";
-import { useQueryClient as ge, useMutation as pe, useQuery as et } from "@tanstack/react-query";
-import { IconQuestionLine as Ne, IconPinLine as be, IconWarningLine as tt, IconNoteLine as nt, IconEditLine as fe, IconTrashLine as le, IconArrowOpenStartLine as ot, IconArrowOpenEndLine as rt, IconArrowStartLine as st } from "@instructure/ui-icons";
-import { Menu as te } from "@instructure/ui-menu";
+import { jsx as s, jsxs as E, Fragment as et } from "react/jsx-runtime";
+import { createContext as Be, useMemo as ie, useContext as He, useReducer as je, useRef as J, useEffect as Z, useState as H, useCallback as q } from "react";
+import { createPortal as tt } from "react-dom";
+import { z as d } from "zod";
+import nt from "diff-match-patch";
+import { useQueryClient as be, useMutation as Ee, useQuery as ot } from "@tanstack/react-query";
+import { IconQuestionLine as Se, IconPinLine as Te, IconWarningLine as rt, IconNoteLine as st, IconEditLine as pe, IconTrashLine as ue, IconArrowStartLine as it } from "@instructure/ui-icons";
+import { Menu as ne } from "@instructure/ui-menu";
 import { View as z } from "@instructure/ui-view";
-import { Flex as C } from "@instructure/ui-flex";
-import { TruncateText as me } from "@instructure/ui-truncate-text";
-import { ScreenReaderContent as Me } from "@instructure/ui-a11y-content";
-import { SimpleSelect as we } from "@instructure/ui-simple-select";
-import { Heading as ae } from "@instructure/ui-heading";
+import { Flex as S } from "@instructure/ui-flex";
+import { TruncateText as Ne } from "@instructure/ui-truncate-text";
+import { ScreenReaderContent as ze } from "@instructure/ui-a11y-content";
+import { SimpleSelect as De } from "@instructure/ui-simple-select";
+import { Heading as fe } from "@instructure/ui-heading";
 import { Text as U } from "@instructure/ui-text";
-import { CloseButton as it, Button as $, IconButton as Q } from "@instructure/ui-buttons";
-import { Tray as lt } from "@instructure/ui-tray";
-import { TextArea as He } from "@instructure/ui-text-area";
-import { Pill as ke } from "@instructure/ui-pill";
-import { Spinner as at } from "@instructure/ui-spinner";
-const ct = c.object({
-  startContainer: c.string(),
-  endContainer: c.string(),
-  startOffset: c.number(),
-  endOffset: c.number()
-}), dt = c.object({
-  start: c.number(),
-  end: c.number()
-}), ye = c.object({
-  selectedText: c.string(),
-  hasNoHighlightAnymore: c.boolean().optional(),
-  textPosition: dt.nullable(),
-  range: ct.nullable(),
-  pageLastModifiedAt: c.string()
+import { CloseButton as lt, Button as K, IconButton as re } from "@instructure/ui-buttons";
+import { Tray as at } from "@instructure/ui-tray";
+import { TextArea as $e } from "@instructure/ui-text-area";
+import { Pill as Pe } from "@instructure/ui-pill";
+import { Pagination as ct } from "@instructure/ui-pagination";
+import { Spinner as dt } from "@instructure/ui-spinner";
+const ut = d.object({
+  startContainer: d.string(),
+  endContainer: d.string(),
+  startOffset: d.number(),
+  endOffset: d.number()
+}), ft = d.object({
+  start: d.number(),
+  end: d.number()
+}), ve = d.object({
+  selectedText: d.string(),
+  hasNoHighlightAnymore: d.boolean().optional(),
+  textPosition: ft.nullable(),
+  range: ut.nullable(),
+  pageLastModifiedAt: d.string()
 });
-var w = /* @__PURE__ */ ((n) => (n.IMPORTANT = "Important", n.CONFUSING = "Confusing", n))(w || {});
-const Ee = c.enum([
+var k = /* @__PURE__ */ ((t) => (t.IMPORTANT = "Important", t.CONFUSING = "Confusing", t))(k || {});
+const Ce = d.enum([
   "Important",
   "Confusing"
   /* CONFUSING */
-]), We = c.object({
-  startCursor: c.string().nullish(),
-  endCursor: c.string().nullish(),
-  hasNextPage: c.boolean().nullish(),
-  hasPreviousPage: c.boolean().nullish()
-}), ce = c.object({
-  id: c.string(),
-  rootAccountUuid: c.string(),
-  userId: c.string(),
-  courseId: c.string(),
-  objectId: c.string(),
-  objectType: c.string(),
-  userText: c.string().optional(),
-  reaction: c.array(Ee),
-  highlightData: ye,
-  createdAt: c.string(),
-  updatedAt: c.string()
-}), ut = c.object({
-  cursor: c.string(),
-  node: ce
+]), mt = d.object({
+  totalCount: d.number().nullish(),
+  totalNrOfPages: d.number().nullish()
+}), me = d.object({
+  id: d.string(),
+  rootAccountUuid: d.string(),
+  userId: d.string(),
+  courseId: d.string(),
+  objectId: d.string(),
+  objectType: d.string(),
+  userText: d.string().optional(),
+  reaction: d.array(Ce),
+  highlightData: ve,
+  createdAt: d.string(),
+  updatedAt: d.string()
+}), gt = d.object({
+  cursor: d.string(),
+  node: me
 });
-c.object({
-  notes: c.object({
-    edges: c.array(ut),
-    nodes: c.array(ce),
-    pageInfo: We
+d.object({
+  notes: d.object({
+    edges: d.array(gt),
+    nodes: d.array(me),
+    pageInfo: mt
   })
 });
-const ft = c.object({
-  type: c.string(),
-  id: c.string()
-}), mt = c.object({
-  courseId: c.string().optional(),
-  learningObject: ft.optional(),
-  reactions: c.array(c.string()).optional()
+const ht = d.object({
+  type: d.string(),
+  id: d.string()
+}), pt = d.object({
+  courseId: d.string().optional(),
+  learningObject: ht.optional(),
+  reactions: d.array(d.string()).optional()
 }).optional();
-c.object({
-  courseId: c.string().optional(),
-  filter: mt,
-  pageParams: We.optional(),
-  direction: c.enum(["next", "prev"]).optional(),
-  pageSize: c.number().optional()
+d.object({
+  courseId: d.string().optional(),
+  filter: pt,
+  offset: d.number().optional(),
+  pageSize: d.number().optional()
 });
-c.object({
-  courseId: c.string(),
-  objectId: c.string(),
-  objectType: c.string(),
-  userText: c.string().optional(),
-  reaction: c.array(Ee),
-  highlightData: ye
+d.object({
+  courseId: d.string(),
+  objectId: d.string(),
+  objectType: d.string(),
+  userText: d.string().optional(),
+  reaction: d.array(Ce),
+  highlightData: ve
 });
-c.object({
-  createNote: ce
+d.object({
+  createNote: me
 });
-c.object({
-  id: c.string(),
-  userText: c.string().optional(),
-  reaction: c.array(Ee),
-  highlightData: ye
+d.object({
+  id: d.string(),
+  userText: d.string().optional(),
+  reaction: d.array(Ce),
+  highlightData: ve
 });
-c.object({
-  updateNote: ce
+d.object({
+  updateNote: me
 });
-c.object({
-  deleteNote: c.string()
+d.object({
+  deleteNote: d.string()
 });
-var Be = /* @__PURE__ */ ((n) => (n[n.FORWARDS = 1] = "FORWARDS", n[n.BACKWARDS = 2] = "BACKWARDS", n))(Be || {});
-class q {
-  constructor(e, t) {
-    this.start = e, this.end = t;
+var We = /* @__PURE__ */ ((t) => (t[t.FORWARDS = 1] = "FORWARDS", t[t.BACKWARDS = 2] = "BACKWARDS", t))(We || {});
+class X {
+  constructor(e, n) {
+    this.start = e, this.end = n;
   }
   toRange() {
-    let e, t;
-    if (this.start.element === this.end.element && this.start.offset <= this.end.offset ? [e, t] = je(this.start.element, this.start.offset, this.end.offset) : (e = this.start.resolve({
+    let e, n;
+    if (this.start.element === this.end.element && this.start.offset <= this.end.offset ? [e, n] = Ue(this.start.element, this.start.offset, this.end.offset) : (e = this.start.resolve({
       direction: 1
       /* FORWARDS */
-    }), t = this.end.resolve({
+    }), n = this.end.resolve({
       direction: 2
       /* BACKWARDS */
-    })), !e || !t)
+    })), !e || !n)
       return null;
     const o = new Range();
-    return o.setStart(e.node, e.offset), o.setEnd(t.node, t.offset), o;
+    return o.setStart(e.node, e.offset), o.setEnd(n.node, n.offset), o;
   }
   static fromRange(e) {
-    const t = B.fromPoint(e.startContainer, e.startOffset), o = B.fromPoint(e.endContainer, e.endOffset);
-    return !t || !o ? null : new q(t, o);
+    const n = j.fromPoint(e.startContainer, e.startOffset), o = j.fromPoint(e.endContainer, e.endOffset);
+    return !n || !o ? null : new X(n, o);
   }
-  static fromOffsets(e, t, o) {
-    return new q(new B(e, t), new B(e, o));
+  static fromOffsets(e, n, o) {
+    return new X(new j(e, n), new j(e, o));
   }
   relativeTo(e) {
-    return new q(this.start.relativeTo(e), this.end.relativeTo(e));
+    return new X(this.start.relativeTo(e), this.end.relativeTo(e));
   }
 }
-class B {
-  constructor(e, t) {
-    t < 0 && console.error("Offset is invalid"), this.element = e, this.offset = t;
+class j {
+  constructor(e, n) {
+    n < 0 && console.error("Offset is invalid"), this.element = e, this.offset = n;
   }
   resolve(e = {}) {
     try {
-      return je(this.element, this.offset)[0];
-    } catch (t) {
+      return Ue(this.element, this.offset)[0];
+    } catch (n) {
       if (this.offset === 0 && e.direction !== void 0) {
         const o = document.createTreeWalker(this.element.getRootNode(), NodeFilter.SHOW_TEXT);
         o.currentNode = this.element;
-        const r = e.direction === Be.FORWARDS, i = r ? o.nextNode() : o.previousNode();
+        const r = e.direction === We.FORWARDS, i = r ? o.nextNode() : o.previousNode();
         if (!i)
-          throw t;
+          throw n;
         return { node: i, offset: r ? 0 : i.data.length };
       }
-      throw t;
+      throw n;
     }
   }
-  static fromCharOffset(e, t) {
+  static fromCharOffset(e, n) {
     switch (e.nodeType) {
       case Node.TEXT_NODE:
-        return B.fromPoint(e, t);
+        return j.fromPoint(e, n);
       case Node.ELEMENT_NODE:
-        return new B(e, t);
+        return new j(e, n);
       default:
         return console.error("Node is not an element or text node"), null;
     }
   }
-  static fromPoint(e, t) {
+  static fromPoint(e, n) {
     switch (e.nodeType) {
       case Node.TEXT_NODE: {
-        if (t < 0 || t > e.data.length)
+        if (n < 0 || n > e.data.length)
           return console.error("Text node offset is out of range"), null;
         if (!e.parentElement)
           return console.error("Text node has no parent"), null;
-        const o = De(e) + t;
-        return new B(e.parentElement, o);
+        const o = Fe(e) + n;
+        return new j(e.parentElement, o);
       }
       case Node.ELEMENT_NODE: {
-        if (t < 0 || t > e.childNodes.length)
+        if (n < 0 || n > e.childNodes.length)
           return console.error("Child node offset is out of range"), null;
         let o = 0;
-        for (let r = 0; r < t; r++)
-          o += ze(e.childNodes[r]);
-        return new B(e, o);
+        for (let r = 0; r < n; r++)
+          o += Ge(e.childNodes[r]);
+        return new j(e, o);
       }
       default:
         return console.error("Point is not in an element or text node"), null;
@@ -187,48 +185,48 @@ class B {
   relativeTo(e) {
     if (!e.contains(this.element))
       throw new Error("Parent is not an ancestor of current element");
-    let t = this.element, o = this.offset;
-    for (; t !== e; )
-      o += De(t), t.parentElement && (t = t.parentElement);
-    return new B(t, o);
+    let n = this.element, o = this.offset;
+    for (; n !== e; )
+      o += Fe(n), n.parentElement && (n = n.parentElement);
+    return new j(n, o);
   }
 }
-const ht = (n) => {
-  const e = n.nodeName.toLowerCase();
+const Nt = (t) => {
+  const e = t.nodeName.toLowerCase();
   return e === "#text" ? "text()" : e;
 };
-function gt(n) {
-  let e = 0, t = n;
-  for (; t; )
-    t.nodeName === n.nodeName && (e += 1), t = t.previousSibling;
+function yt(t) {
+  let e = 0, n = t;
+  for (; n; )
+    n.nodeName === t.nodeName && (e += 1), n = n.previousSibling;
   return e;
 }
-const pt = (n) => {
-  const e = ht(n), t = gt(n);
-  return `${e}[${t}]`;
-}, Oe = (n, e) => {
-  let t = "", o = n;
+const bt = (t) => {
+  const e = Nt(t), n = yt(t);
+  return `${e}[${n}]`;
+}, Le = (t, e) => {
+  let n = "", o = t;
   for (; o !== e; ) {
     if (!o) {
       console.error("Node is not a descendant of root");
       return;
     }
-    t = `${pt(o)}/${t}`, o = o.parentNode;
+    n = `${bt(o)}/${n}`, o = o.parentNode;
   }
-  return t = `/${t}`, t = t.replace(/\/$/, ""), t;
-}, Nt = (n, e, t) => {
+  return n = `/${n}`, n = n.replace(/\/$/, ""), n;
+}, Et = (t, e, n) => {
   const o = e.toUpperCase();
   let r = -1;
-  for (let i = 0; i < n.children.length; i++) {
-    const l = n.children[i];
-    if (l.nodeName.toUpperCase() === o && (++r, r === t))
+  for (let i = 0; i < t.children.length; i++) {
+    const l = t.children[i];
+    if (l.nodeName.toUpperCase() === o && (++r, r === n))
       return l;
   }
   return null;
-}, bt = (n, e) => {
-  if (!(n.match(/^(\/[A-Za-z0-9-]+(\[[0-9]+])?)+$/) !== null))
+}, St = (t, e) => {
+  if (!(t.match(/^(\/[A-Za-z0-9-]+(\[[0-9]+])?)+$/) !== null))
     return console.error("Expression is not a simple XPath"), null;
-  const o = n.split("/");
+  const o = t.split("/");
   let r = e;
   o.shift();
   for (const i of o) {
@@ -236,71 +234,71 @@ const pt = (n) => {
     const m = i.indexOf("[");
     if (m !== -1) {
       l = i.slice(0, m);
-      const g = i.slice(m + 1, i.indexOf("]"));
-      if (a = Number.parseInt(g, 10) - 1, a < 0)
+      const h = i.slice(m + 1, i.indexOf("]"));
+      if (a = Number.parseInt(h, 10) - 1, a < 0)
         return null;
     } else
       l = i, a = 0;
-    const d = Nt(r, l, a);
-    if (!d)
+    const c = Et(r, l, a);
+    if (!c)
       return null;
-    r = d;
+    r = c;
   }
   return r;
-}, Re = (n, e = document.body) => {
+}, Ae = (t, e = document.body) => {
   try {
-    return bt(n, e);
+    return St(t, e);
   } catch {
-    return document.evaluate(`.${n}`, e, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
+    return document.evaluate(`.${t}`, e, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
   }
 };
-class Y {
-  constructor(e, t) {
-    this.root = e, this.range = t;
+class ee {
+  constructor(e, n) {
+    this.root = e, this.range = n;
   }
-  static fromRange(e, t) {
-    return new Y(e, t);
+  static fromRange(e, n) {
+    return new ee(e, n);
   }
-  static fromSelector(e, t) {
-    if (!(t != null && t.startContainer) || !(t != null && t.endContainer))
+  static fromSelector(e, n) {
+    if (!(n != null && n.startContainer) || !(n != null && n.endContainer))
       return console.error("No start or end container in selector"), null;
-    const o = Re(t.startContainer, e);
+    const o = Ae(n.startContainer, e);
     if (!o)
       return console.error("Failed to resolve startContainer XPath"), null;
-    const r = Re(t.endContainer, e);
+    const r = Ae(n.endContainer, e);
     if (!r)
       return console.error("Failed to resolve endContainer XPath"), null;
-    const i = B.fromCharOffset(o, t.startOffset), l = B.fromCharOffset(r, t.endOffset);
+    const i = j.fromCharOffset(o, n.startOffset), l = j.fromCharOffset(r, n.endOffset);
     if (!i || !l)
       return null;
-    const a = new q(i, l).toRange();
-    return a ? new Y(e, a) : null;
+    const a = new X(i, l).toRange();
+    return a ? new ee(e, a) : null;
   }
   toRange() {
     return this.range;
   }
   toSelector() {
     var i;
-    const e = (i = q.fromRange(this.range)) == null ? void 0 : i.toRange(), t = e && q.fromRange(e), o = t && Oe(t.start.element, this.root), r = t && Oe(t.end.element, this.root);
+    const e = (i = X.fromRange(this.range)) == null ? void 0 : i.toRange(), n = e && X.fromRange(e), o = n && Le(n.start.element, this.root), r = n && Le(n.end.element, this.root);
     return !o || !r ? null : {
       startContainer: o,
-      startOffset: t.start.offset,
+      startOffset: n.start.offset,
       endContainer: r,
-      endOffset: t.end.offset
+      endOffset: n.end.offset
     };
   }
 }
-class X {
-  constructor(e, t, o) {
-    this.root = e, this.start = t, this.end = o;
+class Y {
+  constructor(e, n, o) {
+    this.root = e, this.start = n, this.end = o;
   }
-  static fromRange(e, t) {
+  static fromRange(e, n) {
     var r;
-    const o = (r = q.fromRange(t)) == null ? void 0 : r.relativeTo(e);
-    return o ? new X(e, o.start.offset, o.end.offset) : null;
+    const o = (r = X.fromRange(n)) == null ? void 0 : r.relativeTo(e);
+    return o ? new Y(e, o.start.offset, o.end.offset) : null;
   }
-  static fromSelector(e, t) {
-    return new X(e, t.start, t.end);
+  static fromSelector(e, n) {
+    return new Y(e, n.start, n.end);
   }
   toSelector() {
     return {
@@ -309,92 +307,93 @@ class X {
     };
   }
   toRange() {
-    return q.fromOffsets(this.root, this.start, this.end).toRange();
+    return X.fromOffsets(this.root, this.start, this.end).toRange();
   }
 }
-const ze = (n) => {
+const Ge = (t) => {
   var e;
-  switch (n.nodeType) {
+  switch (t.nodeType) {
     case Node.ELEMENT_NODE:
     case Node.TEXT_NODE:
-      return ((e = n.textContent) == null ? void 0 : e.length) ?? 0;
+      return ((e = t.textContent) == null ? void 0 : e.length) ?? 0;
     default:
       return 0;
   }
-}, De = (n) => {
-  let e = n.previousSibling, t = 0;
+}, Fe = (t) => {
+  let e = t.previousSibling, n = 0;
   for (; e; )
-    t += ze(e), e = e.previousSibling;
-  return t;
-}, je = (n, ...e) => {
-  let t = e.shift();
-  const o = n.ownerDocument.createNodeIterator(n, NodeFilter.SHOW_TEXT), r = [];
+    n += Ge(e), e = e.previousSibling;
+  return n;
+}, Ue = (t, ...e) => {
+  let n = e.shift();
+  const o = t.ownerDocument.createNodeIterator(t, NodeFilter.SHOW_TEXT), r = [];
   let i = o.nextNode(), l = null, a = 0;
-  for (; t !== void 0 && i; )
-    l = i, a + l.data.length > t ? (r.push({ node: l, offset: t - a }), t = e.shift()) : (i = o.nextNode(), a += l.data.length);
-  for (; t !== void 0 && l && a === t; )
-    r.push({ node: l, offset: l.data.length }), t = e.shift();
-  return t !== void 0 && console.error("Offset exceeds text length"), r;
-}, yt = (n, e, t, o) => {
-  const r = t - e;
-  return Math.abs(r - o) <= 5 ? X.fromSelector(n, {
+  for (; n !== void 0 && i; )
+    l = i, a + l.data.length > n ? (r.push({ node: l, offset: n - a }), n = e.shift()) : (i = o.nextNode(), a += l.data.length);
+  for (; n !== void 0 && l && a === n; )
+    r.push({ node: l, offset: l.data.length }), n = e.shift();
+  return n !== void 0 && console.error("Offset exceeds text length"), r;
+}, Tt = (t, e, n, o) => {
+  const r = n - e;
+  return Math.abs(r - o) <= 5 ? Y.fromSelector(t, {
     start: e,
-    end: t
+    end: n
   }) : null;
-}, Et = (n, e, t, o) => {
-  const r = new Je();
+}, vt = (t, e, n, o) => {
+  const r = new nt();
   r.Match_Distance = 5e3;
-  const i = n.textContent;
+  const i = t.textContent;
   if (!i)
     return null;
   if (e.length > 32) {
-    const l = e.slice(0, 32), a = e.slice(-32), m = o - t;
-    let d = r.match_main(i, l, t);
-    const g = r.match_main(i, a, o), h = g + a.length;
-    if (d === -1 || g === -1)
+    const l = e.slice(0, 32), a = e.slice(-32), m = o - n;
+    let c = r.match_main(i, l, n);
+    const h = r.match_main(i, a, o), g = h + a.length;
+    if (c === -1 || h === -1)
       return null;
-    const u = h - d, S = Math.abs(u - m);
-    if ((d > h || S > 5) && (r.Match_Distance = e.length + 100, d = r.match_main(i, l, h), d !== -1 && d < h))
-      return yt(n, d, h, m);
-    if (d < h && S <= 5)
-      return X.fromSelector(n, {
-        start: d,
-        end: h
+    const u = g - c, p = Math.abs(u - m);
+    if ((c > g || p > 5) && (r.Match_Distance = e.length + 100, c = r.match_main(i, l, g), c !== -1 && c < g))
+      return Tt(t, c, g, m);
+    if (c < g && p <= 5)
+      return Y.fromSelector(t, {
+        start: c,
+        end: g
       });
   } else {
-    const l = r.match_main(i, e, t);
+    const l = r.match_main(i, e, n);
     if (l !== -1)
-      return X.fromSelector(n, {
+      return Y.fromSelector(t, {
         start: l,
         end: l + e.length
       });
   }
   return null;
-}, St = (n, e) => {
+}, Ct = (t, e) => {
   if (!e) return null;
-  const { highlightData: t } = n, { textPosition: o, selectedText: r } = t;
-  return Et(
+  const { highlightData: n } = t, { textPosition: o, selectedText: r } = n;
+  return vt(
     e,
     r,
     (o == null ? void 0 : o.start) ?? 0,
     (o == null ? void 0 : o.end) ?? 0
   );
-}, vt = (n, e, t) => {
+}, It = (t, e, n) => {
   const o = [], r = [];
   for (const i of e) {
-    const l = St(i, n);
+    const l = Ct(i, t);
     if (l) {
-      const a = l.toRange(), m = a && Y.fromRange(n, a);
+      const a = l.toRange(), m = a && ee.fromRange(t, a), c = (a == null ? void 0 : a.toString().trim()) || i.highlightData.selectedText;
       o.push({
         id: i.id,
         reaction: i.reaction,
         userText: i.userText,
         highlightData: {
           ...i.highlightData,
+          selectedText: c,
           hasNoHighlightAnymore: !1,
           range: (m == null ? void 0 : m.toSelector()) ?? null,
           textPosition: l.toSelector(),
-          pageLastModifiedAt: t
+          pageLastModifiedAt: n
         }
       });
     } else
@@ -404,377 +403,378 @@ const ze = (n) => {
         userText: i.userText,
         highlightData: {
           ...i.highlightData,
-          pageLastModifiedAt: t,
+          pageLastModifiedAt: n,
           hasNoHighlightAnymore: !0
         }
       }) : r.push(i.id);
   }
   return { notesForUpdate: o, noteIdsForDelete: r };
-}, Le = (n, e) => {
+}, _e = (t, e) => {
   var l;
   if (!e) return;
-  const { highlightData: t, id: o } = n, { range: r } = t ?? {};
-  r && ((l = Y.fromSelector(e, r)) == null ? void 0 : l.toRange()) && Rt({ id: o });
-}, Tt = (n) => {
-  const e = document.getElementById(ve(n));
+  const { highlightData: n, id: o } = t, { range: r } = n ?? {};
+  r && ((l = ee.fromSelector(e, r)) == null ? void 0 : l.toRange()) && Lt({ id: o });
+}, xt = (t) => {
+  const e = document.getElementById(xe(t));
   if (e) {
-    const t = e.getBoundingClientRect();
-    t.top >= 0 && t.left >= 0 && t.bottom <= (window.innerHeight || document.documentElement.clientHeight) && t.right <= (window.innerWidth || document.documentElement.clientWidth) || e.scrollIntoView({ behavior: "smooth", block: "start" });
+    const n = e.getBoundingClientRect();
+    n.top >= 0 && n.left >= 0 && n.bottom <= (window.innerHeight || document.documentElement.clientHeight) && n.right <= (window.innerWidth || document.documentElement.clientWidth) || e.scrollIntoView({ behavior: "smooth", block: "start" });
   }
-}, se = 90, ie = 172, Ct = (n) => {
-  const e = n.getClientRects();
+}, ae = 90, ce = 172, wt = (t) => {
+  const e = t.getClientRects();
   if (!e.length)
     return null;
-  const t = e[0], o = e[e.length - 1], r = 4, i = 16, l = window.innerWidth || document.documentElement.clientWidth, a = window.innerHeight || document.documentElement.clientHeight, m = (f) => {
-    const y = f + ie;
-    return f >= i && y <= l - i;
-  }, d = (f) => {
-    const y = f + se;
-    return f >= i && y <= a - i;
+  const n = e[0], o = e[e.length - 1], r = 4, i = 16, l = window.innerWidth || document.documentElement.clientWidth, a = window.innerHeight || document.documentElement.clientHeight, m = (y) => {
+    const T = y + ce;
+    return y >= i && T <= l - i;
+  }, c = (y) => {
+    const T = y + ae;
+    return y >= i && T <= a - i;
   };
-  let g;
-  const h = t.right - ie;
-  if (m(h))
-    g = h;
+  let h;
+  const g = n.right - ce;
+  if (m(g))
+    h = g;
   else {
-    const f = t.left;
-    if (m(f))
-      g = f;
+    const y = n.left;
+    if (m(y))
+      h = y;
     else {
-      const E = (t.left + t.right) / 2 - ie / 2;
-      m(E) ? g = E : h < i ? g = i : g = l - ie - i;
+      const N = (n.left + n.right) / 2 - ce / 2;
+      m(N) ? h = N : g < i ? h = i : h = l - ce - i;
     }
   }
   let u;
-  const S = o.bottom + r;
-  if (d(S))
-    u = S;
+  const p = o.bottom + r;
+  if (c(p))
+    u = p;
   else {
-    const f = t.top - se - r;
-    d(f) ? u = f : S + se > a - i ? u = a - se - i : u = i;
+    const y = n.top - ae - r;
+    c(y) ? u = y : p + ae > a - i ? u = a - ae - i : u = i;
   }
-  return { top: u, left: g };
-}, It = (n, e) => {
-  for (const t of e)
-    if (n.start < t.end && n.end > t.start)
+  return { top: u, left: h };
+}, kt = (t, e) => {
+  for (const n of e)
+    if (t.start < n.end && t.end > n.start)
       return !0;
   return !1;
-}, Se = (n) => `highlight-wrapper-${n}`, ve = (n) => `${Se(n)}-start`, Ue = (n) => `${Se(n)}-end`, oe = (n) => `[data-highlight-id="${CSS.escape(n)}"]`, Te = (n, e) => {
-  const t = Number.parseInt(n.slice(1, 3), 16), o = Number.parseInt(n.slice(3, 5), 16), r = Number.parseInt(n.slice(5, 7), 16);
-  return `rgba(${t}, ${o}, ${r}, ${e})`;
-}, xt = (n, e) => {
-  var t;
+}, Ie = (t) => `highlight-wrapper-${t}`, xe = (t) => `${Ie(t)}-start`, qe = (t) => `${Ie(t)}-end`, se = (t) => `[data-highlight-id="${CSS.escape(t)}"]`, we = (t, e) => {
+  const n = Number.parseInt(t.slice(1, 3), 16), o = Number.parseInt(t.slice(3, 5), 16), r = Number.parseInt(t.slice(5, 7), 16);
+  return `rgba(${n}, ${o}, ${r}, ${e})`;
+}, Ot = (t, e) => {
+  var n;
   try {
-    const o = ((t = e.nodeValue) == null ? void 0 : t.length) ?? e.childNodes.length;
-    return n.comparePoint(e, 0) <= 0 && n.comparePoint(e, o) >= 0;
+    const o = ((n = e.nodeValue) == null ? void 0 : n.length) ?? e.childNodes.length;
+    return t.comparePoint(e, 0) <= 0 && t.comparePoint(e, o) >= 0;
   } catch {
     return !1;
   }
-}, wt = (n) => {
+}, Rt = (t) => {
   var i;
-  if (n.collapsed)
+  if (t.collapsed)
     return [];
-  let e = n.commonAncestorContainer;
+  let e = t.commonAncestorContainer;
   if (e && e.nodeType !== Node.ELEMENT_NODE && (e = e.parentElement), !e)
     return [];
-  const t = [], o = (i = e == null ? void 0 : e.ownerDocument) == null ? void 0 : i.createNodeIterator(e, NodeFilter.SHOW_TEXT);
+  const n = [], o = (i = e == null ? void 0 : e.ownerDocument) == null ? void 0 : i.createNodeIterator(e, NodeFilter.SHOW_TEXT);
   let r = (o == null ? void 0 : o.nextNode()) || null;
   for (; r; ) {
-    if (!xt(n, r)) {
+    if (!Ot(t, r)) {
       r = (o == null ? void 0 : o.nextNode()) || null;
       continue;
     }
     const l = r;
-    if (l === n.startContainer && n.startOffset > 0) {
-      l.splitText(n.startOffset), r = (o == null ? void 0 : o.nextNode()) || null;
+    if (l === t.startContainer && t.startOffset > 0) {
+      l.splitText(t.startOffset), r = (o == null ? void 0 : o.nextNode()) || null;
       continue;
     }
-    l === n.endContainer && n.endOffset < l.data.length && l.splitText(n.endOffset), t.push(l), r = (o == null ? void 0 : o.nextNode()) || null;
+    l === t.endContainer && t.endOffset < l.data.length && l.splitText(t.endOffset), n.push(l), r = (o == null ? void 0 : o.nextNode()) || null;
   }
-  return t;
-}, kt = (n, e, t) => {
-  if (n.collapsed) return;
-  const o = e.id ?? "", r = Se(o);
-  if (document.getElementById(ve(o))) {
-    Ot(e, t);
+  return n;
+}, Dt = (t, e, n) => {
+  if (t.collapsed) return;
+  const o = e.id ?? "", r = Ie(o);
+  if (document.getElementById(xe(o))) {
+    Pt(e, n);
     return;
   }
-  const l = e.type === w.IMPORTANT ? t.colors.importantBackground : t.colors.confusingBackground, m = e.id === e.selectedNoteId ? l : Te(l, 0.5), d = e.type === w.IMPORTANT ? t.colors.importantUnderline : t.colors.confusingUnderline, g = e.type === w.IMPORTANT ? "solid" : "dashed", h = n.toString(), u = document.createElement("span");
-  u.id = `${r}-start`, u.className = "highlight-marker-start", u.dataset.highlightId = o || "", u.setAttribute("role", "button"), u.setAttribute("tabindex", "0"), u.setAttribute("aria-label", h), u.style.position = "relative", u.style.fontSize = "0", u.style.lineHeight = "0", u.style.width = "0", u.style.height = "0", u.style.margin = "0", u.style.padding = "0", u.style.border = "0";
-  const S = document.createElement("span");
-  S.id = Ue(o), S.className = "highlight-marker-end", S.dataset.highlightId = o || "";
-  const f = n.cloneRange();
-  f.collapse(!1), f.insertNode(S);
-  const y = n.cloneRange();
-  y.collapse(!0), y.insertNode(u);
-  const E = document.createRange();
-  E.setStartAfter(u), E.setEndBefore(S);
-  const M = wt(E).filter((N) => N.textContent && N.textContent.length > 0);
-  M.forEach((N, I) => {
-    var Z;
-    const k = N.parentElement;
-    if ((k == null ? void 0 : k.dataset.highlightId) === o) return;
-    const x = I === 0, O = I === M.length - 1, _ = M.length === 1;
-    let F;
-    _ ? F = "single" : x ? F = "first" : O ? F = "last" : F = "middle";
-    const D = document.createElement("span");
-    D.className = "highlight-content", D.dataset.highlightId = o || "", D.dataset.position = F, D.style.backgroundColor = m, D.style.textDecorationLine = "underline", D.style.textDecorationColor = d, D.style.textDecorationStyle = g, D.style.textDecorationThickness = t.borderWidthSmall, D.style.textUnderlineOffset = t.underlineOffset, D.style.cursor = "pointer", D.addEventListener("click", (R) => {
-      var b;
-      R.target.tagName !== "A" && ((b = e.onClick) == null || b.call(e));
-    }), (Z = N.parentNode) == null || Z.insertBefore(D, N), D.appendChild(N);
-  }), u.addEventListener("click", (N) => {
+  const l = e.type === k.IMPORTANT ? n.colors.importantBackground : n.colors.confusingBackground, m = e.id === e.selectedNoteId ? l : we(l, 0.5), c = e.type === k.IMPORTANT ? n.colors.importantUnderline : n.colors.confusingUnderline, h = e.type === k.IMPORTANT ? "solid" : "dashed", g = t.toString(), u = document.createElement("span");
+  u.id = `${r}-start`, u.className = "highlight-marker-start", u.dataset.highlightId = o || "", u.setAttribute("role", "button"), u.setAttribute("tabindex", "0"), u.setAttribute("aria-label", g), u.style.position = "relative", u.style.fontSize = "0", u.style.lineHeight = "0", u.style.width = "0", u.style.height = "0", u.style.margin = "0", u.style.padding = "0", u.style.border = "0";
+  const p = document.createElement("span");
+  p.id = qe(o), p.className = "highlight-marker-end", p.dataset.highlightId = o || "";
+  const y = t.cloneRange();
+  y.collapse(!1), y.insertNode(p);
+  const T = t.cloneRange();
+  T.collapse(!0), T.insertNode(u);
+  const N = document.createRange();
+  N.setStartAfter(u), N.setEndBefore(p);
+  const L = Rt(N).filter((b) => b.textContent && b.textContent.length > 0);
+  L.forEach((b, I) => {
+    var G;
+    const R = b.parentElement;
+    if ((R == null ? void 0 : R.dataset.highlightId) === o) return;
+    const C = I === 0, B = I === L.length - 1, x = L.length === 1;
+    let A;
+    x ? A = "single" : C ? A = "first" : B ? A = "last" : A = "middle";
+    const w = document.createElement("span");
+    w.className = "highlight-content", w.dataset.highlightId = o || "", w.dataset.position = A, w.style.backgroundColor = m, w.style.textDecorationLine = "underline", w.style.textDecorationColor = c, w.style.textDecorationStyle = h, w.style.textDecorationThickness = n.borderWidthSmall, w.style.textUnderlineOffset = n.underlineOffset, w.style.cursor = "pointer", w.addEventListener("click", (te) => {
+      var $;
+      te.target.tagName !== "A" && (($ = e.onClick) == null || $.call(e));
+    }), (G = b.parentNode) == null || G.insertBefore(w, b), w.appendChild(b);
+  }), u.addEventListener("click", (b) => {
     var I;
-    N.target.tagName !== "A" && ((I = e.onClick) == null || I.call(e));
-  }), u.addEventListener("keydown", (N) => {
+    b.target.tagName !== "A" && ((I = e.onClick) == null || I.call(e));
+  }), u.addEventListener("keydown", (b) => {
     var I;
-    if (N.key === "Enter" || N.key === " ")
-      N.preventDefault(), (I = e.onClick) == null || I.call(e);
-    else if (N.key === "Tab" && !N.shiftKey) {
-      const k = document.querySelectorAll(oe(o));
-      for (const x of k) {
-        const O = x.querySelector("a");
-        if (O) {
-          N.preventDefault(), O.focus();
+    if (b.key === "Enter" || b.key === " ")
+      b.preventDefault(), (I = e.onClick) == null || I.call(e);
+    else if (b.key === "Tab" && !b.shiftKey) {
+      const R = document.querySelectorAll(se(o));
+      for (const C of R) {
+        const B = C.querySelector("a");
+        if (B) {
+          b.preventDefault(), B.focus();
           break;
         }
       }
     }
   }), u.addEventListener("focus", () => {
     document.querySelectorAll(
-      oe(o)
+      se(o)
     ).forEach((I) => {
       I.classList.add("highlight-focused");
     });
   }), u.addEventListener("blur", () => {
     document.querySelectorAll(
-      oe(o)
+      se(o)
     ).forEach((I) => {
       I.classList.remove("highlight-focused");
     });
   });
 };
-function Ot(n, e) {
-  const t = n.type === w.IMPORTANT ? e.colors.importantBackground : e.colors.confusingBackground, r = n.id === n.selectedNoteId ? t : Te(t, 0.5);
+function Pt(t, e) {
+  const n = t.type === k.IMPORTANT ? e.colors.importantBackground : e.colors.confusingBackground, r = t.id === t.selectedNoteId ? n : we(n, 0.5);
   document.querySelectorAll(
-    oe(n.id ?? "")
+    se(t.id ?? "")
   ).forEach((l) => {
     l.style.backgroundColor = r;
   });
 }
-const Rt = (n) => {
-  const e = n.id ?? "", t = document.getElementById(ve(e)), o = document.getElementById(Ue(e));
+const Lt = (t) => {
+  const e = t.id ?? "", n = document.getElementById(xe(e)), o = document.getElementById(qe(e));
   document.querySelectorAll(
-    oe(e)
+    se(e)
   ).forEach((i) => {
     var l;
     for (; i.firstChild; )
       (l = i.parentNode) == null || l.insertBefore(i.firstChild, i);
     i.remove();
-  }), t == null || t.remove(), o == null || o.remove();
-}, ne = {
+  }), n == null || n.remove(), o == null || o.remove();
+}, oe = {
   all: ["notebook"],
-  notes: (n) => ["notebook", "notes", n]
+  notes: (t) => ["notebook", "notes", t]
 };
-function Dt(n) {
-  const e = ge();
-  return pe({
-    mutationFn: (t) => n.createNote(t),
+function At(t) {
+  const e = be();
+  return Ee({
+    mutationFn: (n) => t.createNote(n),
     onSuccess: () => {
-      e.invalidateQueries({ queryKey: ne.all });
+      e.invalidateQueries({ queryKey: oe.all });
     }
   });
 }
-function Lt(n) {
-  const e = ge();
-  return pe({
-    mutationFn: (t) => n.deleteNote(t),
+function Ft(t) {
+  const e = be();
+  return Ee({
+    mutationFn: (n) => t.deleteNote(n),
     onSuccess: () => {
-      e.invalidateQueries({ queryKey: ne.all });
+      e.invalidateQueries({ queryKey: oe.all });
     }
   });
 }
-function $e({
-  api: n,
+function Ke({
+  api: t,
   enabled: e = !0,
-  ...t
+  ...n
 }) {
-  return et({
-    queryKey: ne.notes(t),
-    queryFn: () => n.getNotes(t),
+  return ot({
+    queryKey: oe.notes(n),
+    queryFn: () => t.getNotes(n),
     enabled: e
   });
 }
-function At(n) {
-  const e = ge();
-  return pe({
-    mutationFn: ({ id: t, input: o }) => n.updateNote(t, o),
-    onMutate: async ({ id: t, input: o }) => {
-      await e.cancelQueries({ queryKey: ne.all });
-      const i = e.getQueryCache().findAll({ queryKey: ne.all }), l = /* @__PURE__ */ new Map();
+function _t(t) {
+  const e = be();
+  return Ee({
+    mutationFn: ({ id: n, input: o }) => t.updateNote(n, o),
+    onMutate: async ({ id: n, input: o }) => {
+      await e.cancelQueries({ queryKey: oe.all });
+      const i = e.getQueryCache().findAll({ queryKey: oe.all }), l = /* @__PURE__ */ new Map();
       for (const a of i) {
         const m = a.state.data;
         m && (l.set(a.queryKey, m), e.setQueryData(a.queryKey, {
           ...m,
           notes: m.notes.map(
-            (d) => d.id === t ? { ...d, ...o, updatedAt: (/* @__PURE__ */ new Date()).toISOString() } : d
+            (c) => c.id === n ? { ...c, ...o, updatedAt: (/* @__PURE__ */ new Date()).toISOString() } : c
           )
         }));
       }
       return { previousData: l };
     },
-    onError: (t, o, r) => {
+    onError: (n, o, r) => {
       if (r != null && r.previousData)
         for (const [i, l] of r.previousData)
           e.setQueryData(i, l);
     },
     onSettled: () => {
-      e.invalidateQueries({ queryKey: ne.all });
+      e.invalidateQueries({ queryKey: oe.all });
     }
   });
 }
-const Pt = "Notebook", _t = "Notes", Ft = "Important", Mt = "Unclear", Ht = "Back", Wt = "Edit note", Bt = "Save", zt = "Cancel", jt = "Delete note", Ut = "note", $t = "Add note (optional)", qt = "Remove from Notebook", Gt = "Add a note (optional)", Kt = "Mark important", Xt = "Mark unclear", Qt = "Saved to Notebook.", Vt = "Note updated", Yt = "Note deleted", Zt = "Error saving to Notebook.", Jt = "Error updating note", en = "Note deletion failed", tn = "Loading notes", nn = "Failed to load notes", on = "Start capturing your notes", rn = "Your notes from learning materials will appear here. Highlight key ideas, reflections, or questions as you learn—they'll all be saved in your Notebook for easy review later.", sn = "Nothing here yet", ln = "Adjust your filters or create a new note to get started.", an = "You have no notes for the selected filter", cn = "Previous page", dn = "Next page", un = "All courses", fn = "All notes", mn = "Close Notebook panel", hn = "To use the Notebook feature, highlight an excerpt from your learning material to flag it as 'confusing' or 'important' and leave an optional note.", gn = "The content you highlighted is no longer available.", Ce = {
-  notebook: Pt,
-  notes: _t,
-  important: Ft,
-  unclear: Mt,
-  back: Ht,
-  editNote: Wt,
-  save: Bt,
-  cancel: zt,
-  deleteNote: jt,
-  note: Ut,
-  addNotePrompt: $t,
-  removeFromNotebook: qt,
-  addNoteOptional: Gt,
-  markImportant: Kt,
-  markUnclear: Xt,
-  savedToNotebook: Qt,
-  noteUpdated: Vt,
-  noteDeleted: Yt,
-  errorSavingNote: Zt,
-  errorUpdatingNote: Jt,
-  noteDeletionFailed: en,
-  loadingNotes: tn,
-  failedToLoadNotes: nn,
-  emptyStateHeading: on,
-  emptyStateDescription: rn,
-  nothingHereYet: sn,
-  adjustFiltersOrCreate: ln,
-  noNotesForFilter: an,
-  previousPage: cn,
-  nextPage: dn,
-  allCourses: un,
-  allNotes: fn,
-  closeNotebookPanel: mn,
-  featureDescription: hn,
-  highlightUnavailable: gn
-}, qe = Pe(null);
-function Ge(n, e) {
-  const t = Ce[n] ?? n;
-  return e ? t.replace(/%\{([^}]+)}/g, (o, r) => String(e[r] ?? `%{${r}}`)) : t;
+const Mt = "Notebook", Bt = "Notes", Ht = "Important", jt = "Unclear", zt = "Back", $t = "Edit note", Wt = "Save", Gt = "Cancel", Ut = "Delete note", qt = "note", Kt = "Add note (optional)", Xt = "Remove from Notebook", Qt = "Add a note (optional)", Vt = "Mark important", Yt = "Mark unclear", Zt = "Saved to Notebook.", Jt = "Note updated", en = "Note deleted", tn = "Error saving to Notebook.", nn = "Error updating note", on = "Note deletion failed", rn = "Loading notes", sn = "Failed to load notes", ln = "Start capturing your notes", an = "Your notes from learning materials will appear here. Highlight key ideas, reflections, or questions as you learn—they'll all be saved in your Notebook for easy review later.", cn = "Nothing here yet", dn = "Adjust your filters or create a new note to get started.", un = "You have no notes for the selected filter", fn = "Previous page", mn = "Next page", gn = "All courses", hn = "All notes", pn = "Close Notebook panel", Nn = "To use the Notebook feature, highlight an excerpt from your learning material to flag it as 'confusing' or 'important' and leave an optional note.", yn = "The content you highlighted is no longer available.", ke = {
+  notebook: Mt,
+  notes: Bt,
+  important: Ht,
+  unclear: jt,
+  back: zt,
+  editNote: $t,
+  save: Wt,
+  cancel: Gt,
+  deleteNote: Ut,
+  note: qt,
+  addNotePrompt: Kt,
+  removeFromNotebook: Xt,
+  addNoteOptional: Qt,
+  markImportant: Vt,
+  markUnclear: Yt,
+  savedToNotebook: Zt,
+  noteUpdated: Jt,
+  noteDeleted: en,
+  errorSavingNote: tn,
+  errorUpdatingNote: nn,
+  noteDeletionFailed: on,
+  loadingNotes: rn,
+  failedToLoadNotes: sn,
+  emptyStateHeading: ln,
+  emptyStateDescription: an,
+  nothingHereYet: cn,
+  adjustFiltersOrCreate: dn,
+  noNotesForFilter: un,
+  previousPage: fn,
+  nextPage: mn,
+  allCourses: gn,
+  allNotes: hn,
+  closeNotebookPanel: pn,
+  featureDescription: Nn,
+  highlightUnavailable: yn
+}, Xe = Be(null);
+function Qe(t, e) {
+  const n = ke[t] ?? t;
+  return e ? n.replace(/%\{([^}]+)}/g, (o, r) => String(e[r] ?? `%{${r}}`)) : n;
 }
-function pn({
-  translations: n,
+function bn({
+  translations: t,
   translate: e,
-  children: t
+  children: n
 }) {
-  const o = re(
+  const o = ie(
     () => ({
-      translations: { ...Ce, ...n },
-      translate: e ?? Ge
+      translations: { ...ke, ...t },
+      translate: e ?? Qe
     }),
-    [n, e]
+    [t, e]
   );
-  return /* @__PURE__ */ s(qe.Provider, { value: o, children: t });
+  return /* @__PURE__ */ s(Xe.Provider, { value: o, children: n });
 }
-function G() {
-  const n = _e(qe);
-  return n || { translations: Ce, translate: Ge };
+function Q() {
+  const t = He(Xe);
+  return t || { translations: ke, translate: Qe };
 }
-const Nn = {
-  selectedNoteId: null,
+const En = (t) => ({
+  selectedNoteId: t ?? null,
   isNoteEditing: !1,
-  isTrayOpen: !1
-};
-function bn(n, e) {
+  isTrayOpen: t != null
+});
+function Sn(t, e) {
   switch (e.type) {
     case "SELECT_NOTE":
       return {
-        ...n,
+        ...t,
         selectedNoteId: e.payload.id,
         isNoteEditing: e.payload.isEditing
       };
     case "CLEAR_SELECTED_NOTE":
-      return { ...n, selectedNoteId: null, isNoteEditing: !1 };
+      return { ...t, selectedNoteId: null, isNoteEditing: !1 };
     case "SET_EDITING":
-      return { ...n, isNoteEditing: e.payload };
+      return { ...t, isNoteEditing: e.payload };
     case "OPEN_TRAY":
-      return { ...n, isTrayOpen: !0 };
+      return { ...t, isTrayOpen: !0 };
     case "CLOSE_TRAY":
-      return { ...n, isTrayOpen: !1, selectedNoteId: null, isNoteEditing: !1 };
+      return { ...t, isTrayOpen: !1, selectedNoteId: null, isNoteEditing: !1 };
     default:
-      return n;
+      return t;
   }
 }
-const Ke = Pe(null);
-function Qn({
-  api: n,
+const Ve = Be(null);
+function Jn({
+  api: t,
   currentUserId: e,
-  objectId: t,
+  objectId: n,
   objectType: o,
   courseId: r,
   pageLastModifiedAt: i,
   onAnalyticsEvent: l,
   onOpen: a,
-  translations: m,
-  translate: d,
+  initialNoteId: m,
+  translations: c,
+  translate: h,
   children: g
 }) {
-  const [h, u] = Fe(bn, Nn), S = V(!1), f = re(
+  const [u, p] = je(Sn, En(m)), y = J(m != null), T = ie(
     () => ({
-      api: n,
+      api: t,
       currentUserId: e,
-      objectId: t,
+      objectId: n,
       objectType: o,
       courseId: r,
       pageLastModifiedAt: i,
       onAnalyticsEvent: l,
-      ...h,
-      selectNote: (y, E = !1) => u({ type: "SELECT_NOTE", payload: { id: y, isEditing: E } }),
-      clearSelectedNote: () => u({ type: "CLEAR_SELECTED_NOTE" }),
-      setEditing: (y) => u({ type: "SET_EDITING", payload: y }),
+      ...u,
+      selectNote: (N, O = !1) => p({ type: "SELECT_NOTE", payload: { id: N, isEditing: O } }),
+      clearSelectedNote: () => p({ type: "CLEAR_SELECTED_NOTE" }),
+      setEditing: (N) => p({ type: "SET_EDITING", payload: N }),
       openTray: () => {
-        S.current || (S.current = !0, a == null || a()), u({ type: "OPEN_TRAY" });
+        y.current || (y.current = !0, a == null || a()), p({ type: "OPEN_TRAY" });
       },
       closeTray: () => {
-        S.current = !1, u({ type: "CLOSE_TRAY" });
+        y.current = !1, p({ type: "CLOSE_TRAY" });
       }
     }),
     [
-      n,
-      e,
       t,
+      e,
+      n,
       o,
       r,
       i,
       l,
       a,
-      h
+      u
     ]
   );
-  return /* @__PURE__ */ s(Ke.Provider, { value: f, children: /* @__PURE__ */ s(pn, { translations: m, translate: d, children: g }) });
+  return /* @__PURE__ */ s(Ve.Provider, { value: T, children: /* @__PURE__ */ s(bn, { translations: c, translate: h, children: g }) });
 }
-function Xe() {
-  const n = _e(Ke);
-  if (!n)
+function Ye() {
+  const t = He(Ve);
+  if (!t)
     throw new Error("useNotebook must be used within a NotebookProvider");
-  return n;
+  return t;
 }
-const yn = ({ currentType: n, onSelectReaction: e }) => {
-  const { translations: t } = G(), o = V(null), r = V(null);
-  return ee(() => {
-    n === w.CONFUSING && o.current ? o.current.focus() : n === w.IMPORTANT && r.current ? r.current.focus() : o.current && o.current.focus();
-  }, [n]), /* @__PURE__ */ s(
+const Tn = ({ currentType: t, onSelectReaction: e }) => {
+  const { translations: n } = Q(), o = J(null), r = J(null);
+  return Z(() => {
+    t === k.CONFUSING && o.current ? o.current.focus() : t === k.IMPORTANT && r.current ? r.current.focus() : o.current && o.current.focus();
+  }, [t]), /* @__PURE__ */ s(
     z,
     {
       as: "div",
@@ -783,221 +783,225 @@ const yn = ({ currentType: n, onSelectReaction: e }) => {
       borderColor: "secondary",
       borderRadius: "medium",
       shadow: "resting",
-      children: /* @__PURE__ */ T(te, { children: [
-        /* @__PURE__ */ T(
-          te.Item,
+      children: /* @__PURE__ */ E(ne, { children: [
+        /* @__PURE__ */ E(
+          ne.Item,
           {
             ref: o,
-            onClick: () => e(w.CONFUSING),
+            onClick: () => e(k.CONFUSING),
             children: [
-              /* @__PURE__ */ s(Ne, { size: "x-small" }),
-              ` ${t.markUnclear}`
+              /* @__PURE__ */ s(Se, { size: "x-small" }),
+              ` ${n.markUnclear}`
             ]
           }
         ),
-        /* @__PURE__ */ T(
-          te.Item,
+        /* @__PURE__ */ E(
+          ne.Item,
           {
             ref: r,
-            onClick: () => e(w.IMPORTANT),
+            onClick: () => e(k.IMPORTANT),
             children: [
-              /* @__PURE__ */ s(be, { size: "x-small" }),
-              ` ${t.markImportant}`
+              /* @__PURE__ */ s(Te, { size: "x-small" }),
+              ` ${n.markImportant}`
             ]
           }
         )
       ] })
     }
   );
-}, de = "notebook-inline-reaction-menu";
-function Vn({
-  containerRef: n,
+}, ge = "notebook-inline-reaction-menu";
+function eo({
+  containerRef: t,
   highlightTheme: e,
-  debounceTime: t = 500
+  debounceTime: n = 500,
+  onCreateError: o,
+  onUpdateError: r,
+  onDeleteError: i
 }) {
   const {
-    api: o,
-    objectId: r,
-    objectType: i,
-    courseId: l,
-    pageLastModifiedAt: a,
-    selectedNoteId: m,
-    selectNote: d,
-    openTray: g
-  } = Xe(), { data: h } = $e({
-    api: o,
+    api: l,
+    objectId: a,
+    objectType: m,
+    courseId: c,
+    pageLastModifiedAt: h,
+    selectedNoteId: g,
+    selectNote: u,
+    openTray: p
+  } = Ye(), { data: y } = Ke({
+    api: l,
     filter: {
-      learningObject: { type: i, id: r }
+      learningObject: { type: m, id: a }
     },
-    courseId: l,
+    courseId: c,
     pageSize: 100
-  }), { mutate: u } = Dt(o), { mutate: S } = At(o), { mutate: f } = Lt(o), y = V([]), [E, H] = W([]), [M, N] = W(null), [I, k] = W(""), [x, O] = W(null), [_, F] = W(!1);
-  ee(() => {
-    const R = n.current;
-    if (!R) return;
-    const b = R.closest(".user_content") ?? R;
-    if (b.classList.contains("enhanced")) {
-      F(!0);
+  }), { mutate: T } = At(l), { mutateAsync: N } = _t(l), { mutate: O } = Ft(l), L = J([]), [b, I] = H([]), [R, C] = H(null), [B, x] = H(""), [A, w] = H(null), [G, te] = H(!1);
+  Z(() => {
+    const D = t.current;
+    if (!D) return;
+    const f = D.closest(".user_content") ?? D;
+    if (f.classList.contains("enhanced")) {
+      te(!0);
       return;
     }
-    const P = new MutationObserver((L) => {
-      for (const p of L)
-        if (p.type === "attributes" && p.attributeName === "class" && p.target.classList.contains("enhanced")) {
-          F(!0), P.disconnect();
+    const F = new MutationObserver((_) => {
+      for (const M of _)
+        if (M.type === "attributes" && M.attributeName === "class" && M.target.classList.contains("enhanced")) {
+          te(!0), F.disconnect();
           return;
         }
     });
-    return P.observe(b, { attributes: !0, attributeFilter: ["class"] }), () => P.disconnect();
-  }, [n]), ee(() => {
-    if (!_ || !n.current) return;
-    let b = null;
-    const P = () => {
-      b && clearTimeout(b), b = setTimeout(() => {
-        var xe;
-        const v = window.getSelection(), A = n.current;
-        if (!(v != null && v.rangeCount) || !A) return;
-        const j = v.toString().trim();
-        if (j === "") return;
-        const J = v.getRangeAt(0);
-        if (!A.contains(J.commonAncestorContainer)) return;
-        const Ie = (xe = X.fromRange(A, J)) == null ? void 0 : xe.toSelector();
-        Ie && !It(Ie, E) && (N(J.cloneRange()), k(j), O(Ct(J)));
-      }, t);
-    }, L = (v) => {
+    return F.observe(f, { attributes: !0, attributeFilter: ["class"] }), () => F.disconnect();
+  }, [t]), Z(() => {
+    if (!G || !t.current) return;
+    let f = null;
+    const F = () => {
+      f && clearTimeout(f), f = setTimeout(() => {
+        var Re;
+        const v = window.getSelection(), P = t.current;
+        if (!(v != null && v.rangeCount) || !P) return;
+        const W = v.toString().trim();
+        if (W === "") return;
+        const V = v.getRangeAt(0);
+        if (!P.contains(V.commonAncestorContainer)) return;
+        const Oe = (Re = Y.fromRange(P, V)) == null ? void 0 : Re.toSelector();
+        Oe && !kt(Oe, b) && (C(V.cloneRange()), x(W), w(wt(V)));
+      }, n);
+    }, _ = (v) => {
       if (!(v.target instanceof Node)) return;
-      const A = document.getElementById(de);
-      A != null && A.contains(v.target) ? (v.preventDefault(), v.stopImmediatePropagation()) : (O(null), N(null), k(""));
-    }, p = () => {
-      O(null), N(null), k("");
+      const P = document.getElementById(ge);
+      P != null && P.contains(v.target) ? (v.preventDefault(), v.stopImmediatePropagation()) : (w(null), C(null), x(""));
+    }, M = () => {
+      w(null), C(null), x("");
     };
-    return document.addEventListener("selectionchange", P), document.addEventListener("mousedown", L), document.addEventListener("touchstart", L), window.addEventListener("scroll", p, !0), () => {
-      b && clearTimeout(b), document.removeEventListener("selectionchange", P), document.removeEventListener("mousedown", L), document.removeEventListener("touchstart", L), window.removeEventListener("scroll", p, !0);
+    return document.addEventListener("selectionchange", F), document.addEventListener("mousedown", _), document.addEventListener("touchstart", _), window.addEventListener("scroll", M, !0), () => {
+      f && clearTimeout(f), document.removeEventListener("selectionchange", F), document.removeEventListener("mousedown", _), document.removeEventListener("touchstart", _), window.removeEventListener("scroll", M, !0);
     };
-  }, [_, E, t, n]);
-  const D = K(
-    (R) => {
-      var j;
-      const b = n.current;
-      if (!b || !R.highlightData) return null;
-      const { highlightData: P, reaction: L, id: p } = R, { range: v } = P, A = v && ((j = Y.fromSelector(b, v)) == null ? void 0 : j.toRange());
-      if (A) {
-        const J = {
-          id: p,
-          selectedNoteId: m,
-          type: L[0],
+  }, [G, b, n, t]);
+  const $ = q(
+    (D) => {
+      var W;
+      const f = t.current;
+      if (!f || !D.highlightData) return null;
+      const { highlightData: F, reaction: _, id: M } = D, { range: v } = F, P = v && ((W = ee.fromSelector(f, v)) == null ? void 0 : W.toRange());
+      if (P) {
+        const V = {
+          id: M,
+          selectedNoteId: g,
+          type: _[0],
           onClick: () => {
-            d(p), g();
+            u(M), p();
           }
         };
-        return kt(A, J, e), P.textPosition;
+        return Dt(P, V, e), F.textPosition;
       }
       return null;
     },
-    [n, m, e, d, g]
+    [t, g, e, u, p]
   );
-  ee(() => {
-    if (!_ || !h || !n.current) return;
-    const R = n.current, b = h.notes, P = /* @__PURE__ */ new Set(), L = [], p = [];
-    if (b.length === 0) {
-      if (y.current.length > 0) {
-        for (const v of y.current)
-          Le(v, R);
-        y.current = [], H([]);
+  Z(() => {
+    if (!G || !y || !t.current) return;
+    const D = t.current, f = y.notes, F = /* @__PURE__ */ new Set(), _ = [], M = [];
+    if (f.length === 0) {
+      if (L.current.length > 0) {
+        for (const v of L.current)
+          _e(v, D);
+        L.current = [], I([]);
       }
       return;
     }
-    if (a && b[0].highlightData.pageLastModifiedAt !== a) {
-      const { notesForUpdate: v, noteIdsForDelete: A } = vt(
-        R,
-        b,
-        a
+    if (h && f[0].highlightData.pageLastModifiedAt !== h) {
+      const { notesForUpdate: v, noteIdsForDelete: P } = It(
+        D,
+        f,
+        h
       );
-      for (const j of v)
-        S({ id: j.id, input: j });
-      for (const j of A)
-        f(j);
+      for (const W of v)
+        N({ id: W.id, input: W }).catch((V) => r == null ? void 0 : r(V));
+      for (const W of P)
+        O(W, { onError: i });
     } else {
-      for (const v of b) {
-        const A = D(v);
-        P.add(v.id), A && (L.push(v), p.push(A));
+      for (const v of f) {
+        const P = $(v);
+        F.add(v.id), P && (_.push(v), M.push(P));
       }
-      for (const v of y.current)
-        P.has(v.id) || Le(v, R);
-      H(p), y.current = L, m && Tt(m);
+      for (const v of L.current)
+        F.has(v.id) || _e(v, D);
+      I(M), L.current = _, g && xt(g);
     }
   }, [
-    _,
+    G,
+    y,
+    $,
     h,
-    D,
-    a,
-    n,
-    S,
-    f,
-    m
+    t,
+    N,
+    O,
+    g
   ]);
-  const Z = (R) => {
-    const b = n.current;
-    if (!M || !b) return;
-    const P = Y.fromRange(b, M), L = X.fromRange(b, M);
-    u(
+  const le = (D) => {
+    const f = t.current;
+    if (!R || !f) return;
+    const F = ee.fromRange(f, R), _ = Y.fromRange(f, R);
+    T(
       {
-        courseId: l,
-        objectId: r,
-        objectType: i,
+        courseId: c,
+        objectId: a,
+        objectType: m,
         userText: "",
-        reaction: [R],
+        reaction: [D],
         highlightData: {
-          selectedText: I,
-          textPosition: (L == null ? void 0 : L.toSelector()) ?? null,
-          range: P.toSelector(),
-          pageLastModifiedAt: a ?? ""
+          selectedText: B,
+          textPosition: (_ == null ? void 0 : _.toSelector()) ?? null,
+          range: F.toSelector(),
+          pageLastModifiedAt: h ?? ""
         }
       },
       {
-        onSuccess: (p) => {
-          var A;
-          const v = p.id;
-          N(null), k(""), O(null), (A = window.getSelection()) == null || A.removeAllRanges(), d(v), g();
-        }
+        onSuccess: (M) => {
+          var P;
+          const v = M.id;
+          C(null), x(""), w(null), (P = window.getSelection()) == null || P.removeAllRanges(), u(v), p();
+        },
+        onError: o
       }
     );
   };
-  return !M || !x ? null : Ze(
+  return !R || !A ? null : tt(
     /* @__PURE__ */ s(
       "div",
       {
-        id: de,
+        id: ge,
         role: "toolbar",
         style: {
           position: "fixed",
           zIndex: 100,
-          top: x.top,
-          left: x.left,
+          top: A.top,
+          left: A.left,
           whiteSpace: "nowrap"
         },
-        onBlur: (R) => {
-          const b = document.getElementById(de);
-          b != null && b.contains(R.relatedTarget) || (O(null), N(null), k(""));
+        onBlur: (D) => {
+          const f = document.getElementById(ge);
+          f != null && f.contains(D.relatedTarget) || (w(null), C(null), x(""));
         },
-        children: /* @__PURE__ */ s(yn, { onSelectReaction: Z })
+        children: /* @__PURE__ */ s(Tn, { onSelectReaction: le })
       }
     ),
     document.body
   );
 }
-const En = (n, e) => ({
-  backgroundColor: n === w.IMPORTANT ? e.colors.importantBackground : e.colors.confusingBackground,
-  underlineColor: n === w.IMPORTANT ? e.colors.importantUnderline : e.colors.confusingUnderline,
-  underlineStyle: n === w.IMPORTANT ? "solid" : "dashed"
-}), he = ({
-  children: n,
-  type: e = w.IMPORTANT,
-  isCardActive: t = !0,
+const vn = (t, e) => ({
+  backgroundColor: t === k.IMPORTANT ? e.colors.importantBackground : e.colors.confusingBackground,
+  underlineColor: t === k.IMPORTANT ? e.colors.importantUnderline : e.colors.confusingUnderline,
+  underlineStyle: t === k.IMPORTANT ? "solid" : "dashed"
+}), ye = ({
+  children: t,
+  type: e = k.IMPORTANT,
+  isCardActive: n = !0,
   theme: o
 }) => {
-  const r = En(e, o), l = {
+  const r = vn(e, o), l = {
     position: "relative",
-    backgroundColor: t ? r.backgroundColor : Te(r.backgroundColor, 0.5),
+    backgroundColor: n ? r.backgroundColor : we(r.backgroundColor, 0.5),
     textDecorationLine: "underline",
     textDecorationStyle: r.underlineStyle,
     textDecorationColor: r.underlineColor,
@@ -1005,222 +1009,245 @@ const En = (n, e) => ({
     textUnderlineOffset: o.underlineOffset,
     lineHeight: "normal"
   };
-  return /* @__PURE__ */ s("span", { "data-note-highlight": "true", style: l, children: n });
-}, Qe = () => {
-  const { translations: n } = G();
-  return /* @__PURE__ */ T(C, { gap: "xx-small", alignItems: "start", as: "div", children: [
-    /* @__PURE__ */ s(C.Item, { as: "div", children: /* @__PURE__ */ s(tt, { color: "error" }) }),
-    /* @__PURE__ */ s(C.Item, { padding: "xxx-small none", shouldShrink: !0, children: /* @__PURE__ */ s(me, { maxLines: 3, children: n.highlightUnavailable }) })
+  return /* @__PURE__ */ s("span", { "data-note-highlight": "true", style: l, children: t });
+}, Ze = () => {
+  const { translations: t } = Q();
+  return /* @__PURE__ */ E(S, { gap: "xx-small", alignItems: "start", as: "div", children: [
+    /* @__PURE__ */ s(S.Item, { as: "div", children: /* @__PURE__ */ s(rt, { color: "error" }) }),
+    /* @__PURE__ */ s(S.Item, { padding: "xxx-small none", shouldShrink: !0, children: /* @__PURE__ */ s(Ne, { maxLines: 3, children: t.highlightUnavailable }) })
   ] });
-}, Sn = {
+}, Cn = {
   filter: null,
   courseFilter: null,
-  pageParamsWithDirection: {}
+  currentPage: 1,
+  totalPages: void 0
 };
-function vn(n, e) {
+function de(t, e) {
+  const n = typeof e == "number" ? Math.min(e, t) : t;
+  return Math.max(1, n);
+}
+function In(t, e) {
   switch (e.type) {
     case "SET_FILTER":
-      return { ...n, filter: e.payload, pageParamsWithDirection: {} };
+      return { ...t, filter: e.payload, currentPage: 1 };
     case "SET_COURSE_FILTER":
-      return { ...n, courseFilter: e.payload, pageParamsWithDirection: {} };
-    case "SET_PAGE_PARAMS_WITH_DIRECTION":
-      return { ...n, pageParamsWithDirection: e.payload };
+      return { ...t, courseFilter: e.payload, currentPage: 1 };
+    case "SET_PAGE":
+      return { ...t, currentPage: de(e.payload, t.totalPages) };
+    case "INCREMENT_PAGE":
+      return { ...t, currentPage: de(t.currentPage + 1, t.totalPages) };
+    case "DECREMENT_PAGE":
+      return { ...t, currentPage: de(t.currentPage - 1, t.totalPages) };
+    case "SET_TOTAL_PAGES":
+      return t.totalPages === e.payload ? t : {
+        ...t,
+        totalPages: e.payload,
+        currentPage: de(t.currentPage, e.payload)
+      };
     default:
-      return n;
+      return t;
   }
 }
-function Yn({
-  api: n,
+function to({
+  api: t,
   courseId: e,
-  enableCourseFilter: t = !1,
+  enableCourseFilter: n = !1,
   learningObject: o,
   pageSize: r = 16
 }) {
-  const [i, l] = Fe(vn, Sn), { filter: a, courseFilter: m, pageParamsWithDirection: d } = i;
-  ee(() => {
-    Object.keys(d).length > 0 && l({ type: "SET_PAGE_PARAMS_WITH_DIRECTION", payload: {} });
+  const [i, l] = je(In, Cn), { filter: a, courseFilter: m, currentPage: c, totalPages: h } = i;
+  Z(() => {
+    l({ type: "SET_PAGE", payload: 1 });
   }, [r]);
-  const g = t ? m : e, { direction: h, pageParams: u } = d, S = h === "next" ? (u == null ? void 0 : u.endCursor) ?? void 0 : h === "prev" ? (u == null ? void 0 : u.startCursor) ?? void 0 : void 0, { data: f, isLoading: y, isError: E } = $e({
-    api: n,
+  const g = n ? m : e, u = (c - 1) * r, { data: p, isLoading: y, isError: T } = Ke({
+    api: t,
     filter: {
       ...g ? { courseId: g } : {},
       ...a ? { reactions: [a] } : {},
       ...o ? { learningObject: o } : {}
     },
-    cursor: S,
-    direction: h,
+    offset: u,
     pageSize: r
-  }), H = (f == null ? void 0 : f.notes) ?? [], M = f == null ? void 0 : f.pageInfo, N = K(() => {
+  }), N = (p == null ? void 0 : p.notes) ?? [], O = p == null ? void 0 : p.pageInfo, L = (O == null ? void 0 : O.totalNrOfPages) ?? void 0;
+  Z(() => {
+    l({ type: "SET_TOTAL_PAGES", payload: L });
+  }, [L]);
+  const b = q((x) => {
+    l({ type: "SET_PAGE", payload: x });
+  }, []), I = q(() => {
     l({
-      type: "SET_PAGE_PARAMS_WITH_DIRECTION",
-      payload: { pageParams: f == null ? void 0 : f.pageInfo, direction: "next" }
+      type: "INCREMENT_PAGE"
+      /* IncrementPage */
     });
-  }, [f == null ? void 0 : f.pageInfo]), I = K(() => {
+  }, []), R = q(() => {
     l({
-      type: "SET_PAGE_PARAMS_WITH_DIRECTION",
-      payload: { pageParams: f == null ? void 0 : f.pageInfo, direction: "prev" }
+      type: "DECREMENT_PAGE"
+      /* DecrementPage */
     });
-  }, [f == null ? void 0 : f.pageInfo]), k = K((O) => {
-    l({ type: "SET_FILTER", payload: O });
-  }, []), x = K((O) => {
-    l({ type: "SET_COURSE_FILTER", payload: O });
+  }, []), C = q((x) => {
+    l({ type: "SET_FILTER", payload: x });
+  }, []), B = q((x) => {
+    l({ type: "SET_COURSE_FILTER", payload: x });
   }, []);
   return {
-    notes: H,
-    pageInfo: M,
+    notes: N,
+    pageInfo: O,
     isLoading: y,
-    isError: E,
+    isError: T,
     filter: a,
     courseFilter: m,
-    setFilter: k,
-    setCourseFilter: x,
-    fetchNextPage: N,
-    fetchPreviousPage: I
+    currentPage: c,
+    totalPages: h,
+    setFilter: C,
+    setCourseFilter: B,
+    setPage: b,
+    fetchNextPage: I,
+    fetchPreviousPage: R
   };
 }
-const ue = "all";
-function Zn({ filter: n, setFilter: e }) {
-  const { translations: t } = G(), o = re(
+const he = "all";
+function no({ filter: t, setFilter: e }) {
+  const { translations: n } = Q(), o = ie(
     () => [
-      { label: t.allNotes, value: ue },
-      { label: t.important, value: w.IMPORTANT },
-      { label: t.unclear, value: w.CONFUSING }
+      { label: n.allNotes, value: he },
+      { label: n.important, value: k.IMPORTANT },
+      { label: n.unclear, value: k.CONFUSING }
     ],
-    [t]
-  ), r = K(
+    [n]
+  ), r = q(
     (l, { value: a }) => {
-      e(!a || a === ue ? null : a);
+      e(!a || a === he ? null : a);
     },
     [e]
   );
   return {
-    filterElement: re(
+    filterElement: ie(
       () => /* @__PURE__ */ s(
-        we,
+        De,
         {
-          renderLabel: /* @__PURE__ */ s(Me, { children: t.notes }),
-          value: n ?? ue,
+          renderLabel: /* @__PURE__ */ s(ze, { children: n.notes }),
+          value: t ?? he,
           onChange: r,
-          children: o.map((l) => /* @__PURE__ */ s(we.Option, { id: l.value, value: l.value, children: l.label }, l.value))
+          children: o.map((l) => /* @__PURE__ */ s(De.Option, { id: l.value, value: l.value, children: l.label }, l.value))
         }
       ),
-      [n, o, r, t.notes]
+      [t, o, r, n.notes]
     ),
     reactionFilterOptions: o,
     handleReactionFilterChange: r
   };
 }
-const Tn = ({ hasActiveFilter: n = !1 }) => {
-  const { translations: e } = G(), t = n ? e.nothingHereYet : e.emptyStateHeading, o = n ? e.adjustFiltersOrCreate : e.emptyStateDescription;
-  return /* @__PURE__ */ s(z, { as: "div", textAlign: "center", children: /* @__PURE__ */ T(C, { direction: "column", alignItems: "center", gap: "small", children: [
-    !n && /* @__PURE__ */ s(nt, { size: "medium" }),
-    /* @__PURE__ */ s(ae, { level: "h3", children: t }),
+const xn = ({ hasActiveFilter: t = !1 }) => {
+  const { translations: e } = Q(), n = t ? e.nothingHereYet : e.emptyStateHeading, o = t ? e.adjustFiltersOrCreate : e.emptyStateDescription;
+  return /* @__PURE__ */ s(z, { as: "div", textAlign: "center", children: /* @__PURE__ */ E(S, { direction: "column", alignItems: "center", gap: "small", children: [
+    !t && /* @__PURE__ */ s(st, { size: "medium" }),
+    /* @__PURE__ */ s(fe, { level: "h3", children: n }),
     /* @__PURE__ */ s(U, { color: "secondary", children: o })
   ] }) });
-}, Jn = ({ children: n }) => {
-  const { isTrayOpen: e, closeTray: t } = Xe(), { translations: o } = G();
+}, oo = ({ children: t }) => {
+  const { isTrayOpen: e, closeTray: n } = Ye(), { translations: o } = Q();
   return /* @__PURE__ */ s(
-    lt,
+    at,
     {
       label: o.notebook,
       open: e,
-      onDismiss: t,
+      onDismiss: n,
       placement: "end",
       size: "regular",
-      children: /* @__PURE__ */ T(C, { direction: "column", height: "100vh", children: [
-        /* @__PURE__ */ s(C.Item, { children: /* @__PURE__ */ s(z, { as: "div", padding: "small medium", borderWidth: "0 0 small 0", children: /* @__PURE__ */ T(C, { justifyItems: "space-between", alignItems: "center", children: [
-          /* @__PURE__ */ s(ae, { level: "h3", children: o.notebook }),
+      children: /* @__PURE__ */ E(S, { direction: "column", height: "100vh", children: [
+        /* @__PURE__ */ s(S.Item, { children: /* @__PURE__ */ s(z, { as: "div", padding: "small medium", borderWidth: "0 0 small 0", children: /* @__PURE__ */ E(S, { justifyItems: "space-between", alignItems: "center", children: [
+          /* @__PURE__ */ s(fe, { level: "h3", children: o.notebook }),
           /* @__PURE__ */ s(
-            it,
+            lt,
             {
               screenReaderLabel: o.closeNotebookPanel,
-              onClick: t,
+              onClick: n,
               size: "small",
               "data-testid": "notebook-tray-close"
             }
           )
         ] }) }) }),
-        /* @__PURE__ */ s(C.Item, { shouldGrow: !0, shouldShrink: !0, overflowY: "auto", overflowX: "hidden", children: n })
+        /* @__PURE__ */ s(S.Item, { shouldGrow: !0, shouldShrink: !0, overflowY: "auto", overflowX: "hidden", children: t })
       ] })
     }
   );
-}, Cn = {
-  [w.IMPORTANT]: {
+}, wn = {
+  [k.IMPORTANT]: {
     color: "success",
     translationKey: "important",
-    icon: /* @__PURE__ */ s(be, { size: "x-small" })
+    icon: /* @__PURE__ */ s(Te, { size: "x-small" })
   },
-  [w.CONFUSING]: {
+  [k.CONFUSING]: {
     color: "danger",
     translationKey: "unclear",
-    icon: /* @__PURE__ */ s(Ne, { size: "x-small" })
+    icon: /* @__PURE__ */ s(Se, { size: "x-small" })
   }
-}, Ve = ({ type: n, onTypeChange: e, renderAsMenuTrigger: t = !1 }) => {
-  const { translations: o } = G(), r = Cn[n], i = o[r.translationKey], [l, a] = W(!1), m = V(null), d = V(null), g = K(
-    (h) => {
-      e == null || e(h), a(!1);
+}, Je = ({ type: t, onTypeChange: e, renderAsMenuTrigger: n = !1 }) => {
+  const { translations: o } = Q(), r = wn[t], i = o[r.translationKey], [l, a] = H(!1), m = J(null), c = J(null), h = q(
+    (g) => {
+      e == null || e(g), a(!1);
     },
     [e]
   );
-  return t && e ? /* @__PURE__ */ T(
-    te,
+  return n && e ? /* @__PURE__ */ E(
+    ne,
     {
       placement: "bottom start",
       show: l,
-      onToggle: (h) => a(h),
+      onToggle: (g) => a(g),
       shouldHideOnSelect: !0,
       shouldFocusTriggerOnClose: !0,
-      trigger: /* @__PURE__ */ s(ke, { color: r.color, renderIcon: r.icon, children: i }),
+      trigger: /* @__PURE__ */ s(Pe, { color: r.color, renderIcon: r.icon, children: i }),
       children: [
-        /* @__PURE__ */ T(te.Item, { ref: m, onClick: () => g(w.CONFUSING), children: [
-          /* @__PURE__ */ s(Ne, { size: "x-small" }),
+        /* @__PURE__ */ E(ne.Item, { ref: m, onClick: () => h(k.CONFUSING), children: [
+          /* @__PURE__ */ s(Se, { size: "x-small" }),
           ` ${o.markUnclear}`
         ] }),
-        /* @__PURE__ */ T(te.Item, { ref: d, onClick: () => g(w.IMPORTANT), children: [
-          /* @__PURE__ */ s(be, { size: "x-small" }),
+        /* @__PURE__ */ E(ne.Item, { ref: c, onClick: () => h(k.IMPORTANT), children: [
+          /* @__PURE__ */ s(Te, { size: "x-small" }),
           ` ${o.markImportant}`
         ] })
       ]
     }
-  ) : /* @__PURE__ */ s(z, { display: "inline-flex", children: /* @__PURE__ */ s(ke, { color: r.color, renderIcon: r.icon, children: i }) });
+  ) : /* @__PURE__ */ s(z, { display: "inline-flex", children: /* @__PURE__ */ s(Pe, { color: r.color, renderIcon: r.icon, children: i }) });
 };
-function Ae(n, e) {
-  return (n instanceof Date ? n : new Date(n)).toLocaleString(e, {
+function Me(t, e) {
+  return (t instanceof Date ? t : new Date(t)).toLocaleString(e, {
     year: "numeric",
     month: "short",
     day: "numeric"
   });
 }
-const In = ({
-  noteId: n,
+const kn = ({
+  noteId: t,
   date: e,
-  highlight: t,
+  highlight: n,
   note: o,
   type: r,
   onClick: i,
   onDelete: l,
   onSaveNote: a,
   onTypeChange: m,
-  isActive: d,
-  isPanelView: g = !1,
-  courseName: h,
+  isActive: c,
+  isPanelView: h = !1,
+  courseName: g,
   locale: u,
-  highlightTheme: S,
-  renderLink: f,
-  href: y
+  highlightTheme: p,
+  renderLink: y,
+  href: T
 }) => {
-  const { translations: E } = G(), [H, M] = W(!1), [N, I] = W(!1), [k, x] = W(o || ""), [O, _] = W(!1), F = V(null), D = K((p) => {
-    F.current = p;
+  const { translations: N } = Q(), [O, L] = H(!1), [b, I] = H(!1), [R, C] = H(o || ""), [B, x] = H(!1), A = J(null), w = q((f) => {
+    A.current = f;
   }, []);
-  ee(() => {
-    var p, v;
-    d && ((p = F.current) == null || p.scrollIntoView({ behavior: "smooth", block: "nearest" }), (v = F.current) == null || v.focus());
-  }, [d]);
-  const Z = r === w.IMPORTANT ? E.important : E.unclear, R = (p) => {
-    p.key === "Enter" && (p.preventDefault(), i == null || i());
-  }, b = [Z, E.note];
-  t && b.push(t), o && b.push(o), e && b.push(Ae(e, u)), h && b.push(h);
-  const P = b.join(", "), L = /* @__PURE__ */ T(
+  Z(() => {
+    var f, F;
+    c && ((f = A.current) == null || f.scrollIntoView({ behavior: "smooth", block: "nearest" }), (F = A.current) == null || F.focus());
+  }, [c]);
+  const G = r === k.IMPORTANT ? N.important : N.unclear, te = (f) => {
+    f.key === "Enter" && (f.preventDefault(), i == null || i());
+  }, $ = [G, N.note];
+  n && $.push(n), o && $.push(o), e && $.push(Me(e, u)), g && $.push(g);
+  const le = $.join(", "), D = /* @__PURE__ */ E(
     z,
     {
       as: "div",
@@ -1228,140 +1255,140 @@ const In = ({
       borderRadius: "medium",
       padding: "small",
       position: "relative",
-      role: y || N ? void 0 : "button",
-      "aria-label": y ? void 0 : P,
-      "aria-pressed": y || N ? void 0 : d,
-      tabIndex: y || d ? -1 : 0,
-      "data-testid": "note-card",
-      elementRef: D,
-      onClick: d ? void 0 : i,
-      onMouseEnter: () => M(!0),
-      onMouseLeave: () => M(!1),
-      onKeyDown: d ? void 0 : R,
-      cursor: N ? "default" : "pointer",
+      role: T || b ? void 0 : "button",
+      "aria-label": T ? void 0 : le,
+      "aria-pressed": T || b ? void 0 : c,
+      tabIndex: T || c ? -1 : 0,
+      "data-testid": `note-card-${t}`,
+      elementRef: w,
+      onClick: c ? void 0 : i,
+      onMouseEnter: () => L(!0),
+      onMouseLeave: () => L(!1),
+      onKeyDown: c ? void 0 : te,
+      cursor: b ? "default" : "pointer",
       children: [
-        /* @__PURE__ */ T(C, { direction: "column", gap: "small", children: [
+        /* @__PURE__ */ E(S, { direction: "column", gap: "small", children: [
           /* @__PURE__ */ s(
-            Ve,
+            Je,
             {
               type: r,
-              onTypeChange: g && m ? (p) => m(n, p) : void 0,
-              renderAsMenuTrigger: g && !!m && !!d
+              onTypeChange: h && m ? (f) => m(t, f) : void 0,
+              renderAsMenuTrigger: h && !!m && !!c
             }
           ),
-          t ? /* @__PURE__ */ s("div", { style: { wordBreak: "break-word", overflowWrap: "break-word" }, children: /* @__PURE__ */ s(U, { children: d && g ? /* @__PURE__ */ s(
-            he,
+          n ? /* @__PURE__ */ s("div", { style: { wordBreak: "break-word", overflowWrap: "break-word" }, children: /* @__PURE__ */ s(U, { children: c && h ? /* @__PURE__ */ s(
+            ye,
             {
               type: r,
-              isCardActive: !!d || H,
-              theme: S,
-              children: t
+              isCardActive: !!c || O,
+              theme: p,
+              children: n
             }
-          ) : /* @__PURE__ */ s(me, { maxLines: 3, truncate: "word", children: /* @__PURE__ */ s(
-            he,
+          ) : /* @__PURE__ */ s(Ne, { maxLines: 3, truncate: "word", children: /* @__PURE__ */ s(
+            ye,
             {
               type: r,
-              isCardActive: !!d || H,
-              theme: S,
-              children: t
+              isCardActive: !!c || O,
+              theme: p,
+              children: n
             }
-          ) }) }) }) : /* @__PURE__ */ s(Qe, {}),
-          /* @__PURE__ */ T(C, { direction: "column", gap: "small", children: [
-            N && g ? /* @__PURE__ */ T(C, { direction: "column", gap: "x-small", children: [
+          ) }) }) }) : /* @__PURE__ */ s(Ze, {}),
+          /* @__PURE__ */ E(S, { direction: "column", gap: "small", children: [
+            b && h ? /* @__PURE__ */ E(S, { direction: "column", gap: "x-small", children: [
               /* @__PURE__ */ s(
-                He,
+                $e,
                 {
-                  label: /* @__PURE__ */ s(Me, { children: E.editNote }),
-                  value: k,
-                  onChange: (p) => x(p.target.value),
-                  placeholder: E.addNoteOptional
+                  label: /* @__PURE__ */ s(ze, { children: N.editNote }),
+                  value: R,
+                  onChange: (f) => C(f.target.value),
+                  placeholder: N.addNoteOptional
                 }
               ),
-              /* @__PURE__ */ T(C, { gap: "xx-small", children: [
-                /* @__PURE__ */ s(C.Item, { shouldGrow: !0, children: /* @__PURE__ */ s(
-                  $,
+              /* @__PURE__ */ E(S, { gap: "xx-small", children: [
+                /* @__PURE__ */ s(S.Item, { shouldGrow: !0, children: /* @__PURE__ */ s(
+                  K,
                   {
                     display: "block",
                     size: "small",
-                    "data-testid": "note-card-cancel",
+                    "data-testid": `note-card-${t}-cancel`,
                     onClick: () => {
-                      x(o || ""), I(!1);
+                      C(o || ""), I(!1);
                     },
-                    children: E.cancel
+                    children: N.cancel
                   }
                 ) }),
-                /* @__PURE__ */ s(C.Item, { shouldGrow: !0, children: /* @__PURE__ */ s(
-                  $,
+                /* @__PURE__ */ s(S.Item, { shouldGrow: !0, children: /* @__PURE__ */ s(
+                  K,
                   {
                     display: "block",
                     color: "primary",
                     size: "small",
-                    "data-testid": "note-card-save",
+                    "data-testid": `note-card-${t}-save`,
                     onClick: () => {
-                      a == null || a(n, k), I(!1);
+                      a == null || a(t, R), I(!1);
                     },
-                    interaction: k.trim() ? "enabled" : "disabled",
-                    children: E.save
+                    interaction: R.trim() ? "enabled" : "disabled",
+                    children: N.save
                   }
                 ) })
               ] })
-            ] }) : o ? /* @__PURE__ */ s("div", { style: { wordBreak: "break-word", overflowWrap: "break-word" }, children: d && g ? /* @__PURE__ */ T(U, { children: [
+            ] }) : o ? /* @__PURE__ */ s("div", { style: { wordBreak: "break-word", overflowWrap: "break-word" }, children: c && h ? /* @__PURE__ */ E(U, { children: [
               o,
               " ",
               /* @__PURE__ */ s(
-                Q,
+                re,
                 {
                   size: "small",
                   withBackground: !1,
                   withBorder: !1,
-                  screenReaderLabel: E.editNote,
-                  "data-testid": "note-card-edit",
-                  onClick: (p) => {
-                    p.stopPropagation(), I(!0);
+                  screenReaderLabel: N.editNote,
+                  "data-testid": `note-card-${t}-edit`,
+                  onClick: (f) => {
+                    f.stopPropagation(), I(!0);
                   },
-                  children: /* @__PURE__ */ s(fe, {})
+                  children: /* @__PURE__ */ s(pe, {})
                 }
               )
-            ] }) : /* @__PURE__ */ s(U, { children: /* @__PURE__ */ s(me, { maxLines: 3, truncate: "word", children: o }) }) }) : g && d ? /* @__PURE__ */ s("div", { children: /* @__PURE__ */ T(U, { color: "secondary", children: [
-              E.addNotePrompt,
+            ] }) : /* @__PURE__ */ s(U, { children: /* @__PURE__ */ s(Ne, { maxLines: 3, truncate: "word", children: o }) }) }) : h && c ? /* @__PURE__ */ s("div", { children: /* @__PURE__ */ E(U, { color: "secondary", children: [
+              N.addNotePrompt,
               " ",
               /* @__PURE__ */ s(
-                Q,
+                re,
                 {
                   size: "small",
                   withBackground: !1,
                   withBorder: !1,
-                  screenReaderLabel: E.editNote,
-                  "data-testid": "note-card-edit",
-                  onClick: (p) => {
-                    p.stopPropagation(), I(!0);
+                  screenReaderLabel: N.editNote,
+                  "data-testid": `note-card-${t}-edit`,
+                  onClick: (f) => {
+                    f.stopPropagation(), I(!0);
                   },
-                  children: /* @__PURE__ */ s(fe, {})
+                  children: /* @__PURE__ */ s(pe, {})
                 }
               )
             ] }) }) : null,
-            /* @__PURE__ */ T(C, { justifyItems: "space-between", alignItems: "center", children: [
-              /* @__PURE__ */ s(U, { size: "small", color: "secondary", children: Ae(e, u) }),
-              d && l && /* @__PURE__ */ s(
-                Q,
+            /* @__PURE__ */ E(S, { justifyItems: "space-between", alignItems: "center", children: [
+              /* @__PURE__ */ s(U, { size: "small", color: "secondary", children: Me(e, u) }),
+              c && l && /* @__PURE__ */ s(
+                re,
                 {
                   size: "small",
                   withBackground: !1,
                   withBorder: !1,
                   color: "danger",
-                  screenReaderLabel: E.deleteNote,
-                  "data-testid": "note-card-delete",
-                  onClick: (p) => {
-                    p.stopPropagation(), _(!0);
+                  screenReaderLabel: N.deleteNote,
+                  "data-testid": `note-card-${t}-delete`,
+                  onClick: (f) => {
+                    f.stopPropagation(), x(!0);
                   },
-                  children: /* @__PURE__ */ s(le, {})
+                  children: /* @__PURE__ */ s(ue, {})
                 }
               )
             ] }),
-            h && /* @__PURE__ */ s(U, { size: "small", color: "secondary", children: h })
+            g && /* @__PURE__ */ s(U, { size: "small", color: "secondary", children: g })
           ] })
         ] }),
-        O && l && /* @__PURE__ */ s(
+        B && l && /* @__PURE__ */ s(
           z,
           {
             as: "div",
@@ -1374,8 +1401,8 @@ const In = ({
             insetInlineStart: "0",
             insetInlineEnd: "0",
             stacking: "above",
-            children: /* @__PURE__ */ T(
-              C,
+            children: /* @__PURE__ */ E(
+              S,
               {
                 direction: "column",
                 justifyItems: "center",
@@ -1384,29 +1411,29 @@ const In = ({
                 height: "100%",
                 children: [
                   /* @__PURE__ */ s(
-                    $,
+                    K,
                     {
                       display: "block",
                       color: "danger",
                       size: "small",
-                      renderIcon: /* @__PURE__ */ s(le, {}),
-                      "data-testid": "note-card-confirm-delete",
-                      onClick: (p) => {
-                        p.stopPropagation(), l(n), _(!1);
+                      renderIcon: /* @__PURE__ */ s(ue, {}),
+                      "data-testid": `note-card-${t}-confirm-delete`,
+                      onClick: (f) => {
+                        f.stopPropagation(), l(t), x(!1);
                       },
-                      children: E.deleteNote
+                      children: N.deleteNote
                     }
                   ),
                   /* @__PURE__ */ s(
-                    $,
+                    K,
                     {
                       display: "block",
                       size: "small",
-                      "data-testid": "note-card-cancel-delete",
-                      onClick: (p) => {
-                        p.stopPropagation(), _(!1);
+                      "data-testid": `note-card-${t}-cancel-delete`,
+                      onClick: (f) => {
+                        f.stopPropagation(), x(!1);
                       },
-                      children: E.cancel
+                      children: N.cancel
                     }
                   )
                 ]
@@ -1417,106 +1444,101 @@ const In = ({
       ]
     }
   );
-  return y && f ? f({ href: y, children: L, ariaLabel: P }) : L;
+  return T && y ? y({ href: T, children: D, ariaLabel: le }) : D;
 };
-function xn(n, e) {
-  const t = Array.from({ length: e }, () => []);
-  return n.forEach((o, r) => {
-    t[r % e].push(o);
-  }), t;
+function On(t, e) {
+  const n = Array.from({ length: e }, () => []);
+  return t.forEach((o, r) => {
+    n[r % e].push(o);
+  }), n;
 }
-const wn = {
+const Rn = {
   display: "flex",
   gap: "1rem",
   boxSizing: "border-box",
   width: "100%",
   alignItems: "flex-start"
-}, kn = {
+}, Dn = {
   display: "flex",
   flexDirection: "column",
   gap: "1rem",
   flex: 1,
   minWidth: 0
-}, eo = ({
-  notes: n,
+}, ro = ({
+  notes: t,
   isLoading: e,
-  isError: t,
-  pageInfo: o,
-  onPreviousPage: r,
-  onNextPage: i,
+  isError: n,
+  currentPage: o,
+  totalPages: r,
+  onPageChange: i,
   onNoteSelect: l,
   onNoteDelete: a,
   onNoteSave: m,
-  onNoteTypeChange: d,
-  selectedNoteId: g,
-  hasActiveFilter: h = !1,
+  onNoteTypeChange: c,
+  selectedNoteId: h,
+  hasActiveFilter: g = !1,
   columnCount: u = 1,
-  highlightTheme: S,
-  locale: f,
-  renderNoteLink: y,
-  noteHref: E
+  highlightTheme: p,
+  locale: y,
+  renderNoteLink: T,
+  noteHref: N
 }) => {
-  const { translations: H } = G(), M = re(
-    () => xn(n, u),
-    [n, u]
-  ), N = (o == null ? void 0 : o.hasNextPage) || (o == null ? void 0 : o.hasPreviousPage);
-  return e ? /* @__PURE__ */ s(z, { as: "div", textAlign: "center", padding: "large", "data-testid": "notes-loading", children: /* @__PURE__ */ s(at, { renderTitle: H.loadingNotes }) }) : t ? /* @__PURE__ */ s(z, { as: "div", textAlign: "center", padding: "large", "data-testid": "notes-error", children: /* @__PURE__ */ s(ae, { level: "h4", children: H.failedToLoadNotes }) }) : n.length === 0 ? /* @__PURE__ */ s(z, { as: "div", padding: "large", "data-testid": "empty-notes", children: /* @__PURE__ */ s(Tn, { hasActiveFilter: h }) }) : /* @__PURE__ */ T(Ye, { children: [
-    /* @__PURE__ */ s("div", { style: wn, "data-testid": "notes-grid", children: M.map((I, k) => (
+  const { translations: O } = Q(), L = ie(
+    () => On(t, u),
+    [t, u]
+  );
+  if (e)
+    return /* @__PURE__ */ s(z, { as: "div", textAlign: "center", padding: "large", "data-testid": "notes-loading", children: /* @__PURE__ */ s(dt, { renderTitle: O.loadingNotes }) });
+  if (n)
+    return /* @__PURE__ */ s(z, { as: "div", textAlign: "center", padding: "large", "data-testid": "notes-error", children: /* @__PURE__ */ s(fe, { level: "h4", children: O.failedToLoadNotes }) });
+  if (t.length === 0)
+    return /* @__PURE__ */ s(z, { as: "div", padding: "large", "data-testid": "empty-notes", children: /* @__PURE__ */ s(xn, { hasActiveFilter: g }) });
+  const b = typeof o == "number" && typeof r == "number" && r > 1 && i !== void 0;
+  return /* @__PURE__ */ E(et, { children: [
+    /* @__PURE__ */ s("div", { style: Rn, "data-testid": "notes-grid", children: L.map((I, R) => (
       // oxlint-disable-next-line react/no-array-index-key -- columns are positional, index is stable
-      /* @__PURE__ */ s("div", { style: kn, children: I.map((x) => {
-        var O;
+      /* @__PURE__ */ s("div", { style: Dn, children: I.map((C) => {
+        var B;
         return /* @__PURE__ */ s(
-          In,
+          kn,
           {
-            noteId: x.id,
-            date: x.createdAt,
-            type: x.reaction[0] ?? w.IMPORTANT,
-            highlight: (O = x.highlightData) == null ? void 0 : O.selectedText,
-            note: x.userText,
-            isActive: g === x.id,
-            isPanelView: !!g,
-            onClick: l ? () => l(x.id) : void 0,
-            onDelete: a ? (_) => a(_) : void 0,
-            onSaveNote: m ? (_, F) => m(_, F) : void 0,
-            onTypeChange: d ? (_, F) => d(_, F) : void 0,
-            highlightTheme: S,
-            locale: f,
-            renderLink: y,
-            href: E ? E(x.id, x) : void 0
+            noteId: C.id,
+            date: C.createdAt,
+            type: C.reaction[0] ?? k.IMPORTANT,
+            highlight: (B = C.highlightData) == null ? void 0 : B.selectedText,
+            note: C.userText,
+            isActive: h === C.id,
+            isPanelView: !!h,
+            onClick: l ? () => l(C.id) : void 0,
+            onDelete: a ? (x) => a(x) : void 0,
+            onSaveNote: m ? (x, A) => m(x, A) : void 0,
+            onTypeChange: c ? (x, A) => c(x, A) : void 0,
+            highlightTheme: p,
+            locale: y,
+            renderLink: T,
+            href: N ? N(C.id, C) : void 0
           },
-          x.id
+          C.id
         );
-      }) }, k)
+      }) }, R)
     )) }),
-    N && /* @__PURE__ */ T(C, { justifyItems: "center", gap: "small", padding: "small", "data-testid": "notes-pagination", children: [
-      /* @__PURE__ */ s(
-        Q,
-        {
-          size: "small",
-          screenReaderLabel: H.previousPage,
-          "data-testid": "notes-prev-page",
-          interaction: o != null && o.hasPreviousPage ? "enabled" : "disabled",
-          onClick: r,
-          children: /* @__PURE__ */ s(ot, {})
-        }
-      ),
-      /* @__PURE__ */ s(
-        Q,
-        {
-          size: "small",
-          screenReaderLabel: H.nextPage,
-          "data-testid": "notes-next-page",
-          interaction: o != null && o.hasNextPage ? "enabled" : "disabled",
-          onClick: i,
-          children: /* @__PURE__ */ s(rt, {})
-        }
-      )
-    ] })
+    b && /* @__PURE__ */ s(S, { justifyItems: "center", padding: "small", "data-testid": "notes-pagination", children: /* @__PURE__ */ s(S.Item, { children: /* @__PURE__ */ s(
+      ct,
+      {
+        as: "nav",
+        variant: "input",
+        labelNext: O.nextPage,
+        labelPrev: O.previousPage,
+        currentPage: o,
+        totalPageNumber: r,
+        onPageChange: i
+      }
+    ) }) })
   ] });
-}, to = ({
-  noteText: n,
+}, so = ({
+  noteText: t,
   reaction: e,
-  highlightText: t,
+  highlightText: n,
   highlightTheme: o,
   onSave: r,
   onDelete: i,
@@ -1524,114 +1546,114 @@ const wn = {
   onBack: a,
   editing: m = !1
 }) => {
-  const { translations: d } = G(), [g, h] = W(m), [u, S] = W(n || ""), [f, y] = W(!1);
-  return /* @__PURE__ */ T(C, { direction: "column", gap: "small", "data-testid": "single-note", children: [
-    t != null ? /* @__PURE__ */ s(z, { as: "div", children: /* @__PURE__ */ s(U, { children: /* @__PURE__ */ s(he, { type: e, isCardActive: !0, theme: o, children: t }) }) }) : /* @__PURE__ */ s(Qe, {}),
-    /* @__PURE__ */ s(Ve, { type: e, onTypeChange: l, renderAsMenuTrigger: !!l }),
-    g ? /* @__PURE__ */ T(C, { direction: "column", gap: "x-small", children: [
+  const { translations: c } = Q(), [h, g] = H(m), [u, p] = H(t || ""), [y, T] = H(!1);
+  return /* @__PURE__ */ E(S, { direction: "column", gap: "small", "data-testid": "single-note", children: [
+    n != null ? /* @__PURE__ */ s(z, { as: "div", children: /* @__PURE__ */ s(U, { children: /* @__PURE__ */ s(ye, { type: e, isCardActive: !0, theme: o, children: n }) }) }) : /* @__PURE__ */ s(Ze, {}),
+    /* @__PURE__ */ s(Je, { type: e, onTypeChange: l, renderAsMenuTrigger: !!l }),
+    h ? /* @__PURE__ */ E(S, { direction: "column", gap: "x-small", children: [
       /* @__PURE__ */ s(
-        He,
+        $e,
         {
-          label: d.addNoteOptional,
+          label: c.addNoteOptional,
           value: u,
-          onChange: (E) => S(E.target.value),
+          onChange: (N) => p(N.target.value),
           resize: "vertical"
         }
       ),
-      /* @__PURE__ */ T(C, { gap: "xx-small", children: [
-        /* @__PURE__ */ s(C.Item, { shouldGrow: !0, children: /* @__PURE__ */ s(
-          $,
+      /* @__PURE__ */ E(S, { gap: "xx-small", children: [
+        /* @__PURE__ */ s(S.Item, { shouldGrow: !0, children: /* @__PURE__ */ s(
+          K,
           {
             display: "block",
             size: "small",
             "data-testid": "single-note-cancel",
             onClick: () => {
-              S(n || ""), h(!1);
+              p(t || ""), g(!1);
             },
-            children: d.cancel
+            children: c.cancel
           }
         ) }),
-        /* @__PURE__ */ s(C.Item, { shouldGrow: !0, children: /* @__PURE__ */ s(
-          $,
+        /* @__PURE__ */ s(S.Item, { shouldGrow: !0, children: /* @__PURE__ */ s(
+          K,
           {
             display: "block",
             color: "primary",
             size: "small",
             "data-testid": "single-note-save",
             onClick: () => {
-              r(u), h(!1);
+              r(u), g(!1);
             },
-            children: d.save
+            children: c.save
           }
         ) })
       ] })
-    ] }) : /* @__PURE__ */ T(C, { direction: "column", gap: "small", children: [
-      n && /* @__PURE__ */ T(z, { as: "div", children: [
-        /* @__PURE__ */ s(ae, { level: "h4", margin: "0 0 xx-small 0", children: d.note }),
-        /* @__PURE__ */ s(U, { children: n })
+    ] }) : /* @__PURE__ */ E(S, { direction: "column", gap: "small", children: [
+      t && /* @__PURE__ */ E(z, { as: "div", children: [
+        /* @__PURE__ */ s(fe, { level: "h4", margin: "0 0 xx-small 0", children: c.note }),
+        /* @__PURE__ */ s(U, { children: t })
       ] }),
-      /* @__PURE__ */ T(C, { justifyItems: "space-between", children: [
+      /* @__PURE__ */ E(S, { justifyItems: "space-between", children: [
         /* @__PURE__ */ s(
-          $,
+          K,
           {
             size: "small",
-            renderIcon: /* @__PURE__ */ s(st, {}),
+            renderIcon: /* @__PURE__ */ s(it, {}),
             "data-testid": "single-note-back",
             onClick: () => a == null ? void 0 : a(),
-            children: d.back
+            children: c.back
           }
         ),
-        /* @__PURE__ */ T(C, { gap: "xx-small", children: [
+        /* @__PURE__ */ E(S, { gap: "xx-small", children: [
           i && /* @__PURE__ */ s(
-            Q,
+            re,
             {
               size: "small",
               withBackground: !1,
               withBorder: !1,
               color: "danger",
-              screenReaderLabel: d.deleteNote,
+              screenReaderLabel: c.deleteNote,
               "data-testid": "single-note-delete",
-              onClick: () => y(!0),
-              children: /* @__PURE__ */ s(le, {})
+              onClick: () => T(!0),
+              children: /* @__PURE__ */ s(ue, {})
             }
           ),
           /* @__PURE__ */ s(
-            Q,
+            re,
             {
               size: "small",
               withBackground: !1,
               withBorder: !1,
-              screenReaderLabel: d.editNote,
+              screenReaderLabel: c.editNote,
               "data-testid": "single-note-edit",
-              onClick: () => h(!0),
-              children: /* @__PURE__ */ s(fe, {})
+              onClick: () => g(!0),
+              children: /* @__PURE__ */ s(pe, {})
             }
           )
         ] })
       ] }),
-      f && i && /* @__PURE__ */ s(z, { as: "div", background: "primary", padding: "medium", borderRadius: "large", children: /* @__PURE__ */ T(C, { direction: "column", justifyItems: "center", alignItems: "center", gap: "x-small", children: [
+      y && i && /* @__PURE__ */ s(z, { as: "div", background: "primary", padding: "medium", borderRadius: "large", children: /* @__PURE__ */ E(S, { direction: "column", justifyItems: "center", alignItems: "center", gap: "x-small", children: [
         /* @__PURE__ */ s(
-          $,
+          K,
           {
             display: "block",
             color: "danger",
             size: "small",
-            renderIcon: /* @__PURE__ */ s(le, {}),
+            renderIcon: /* @__PURE__ */ s(ue, {}),
             "data-testid": "single-note-confirm-delete",
             onClick: () => {
-              i(), y(!1);
+              i(), T(!1);
             },
-            children: d.deleteNote
+            children: c.deleteNote
           }
         ),
         /* @__PURE__ */ s(
-          $,
+          K,
           {
             display: "block",
             size: "small",
             "data-testid": "single-note-cancel-delete",
-            onClick: () => y(!1),
-            children: d.cancel
+            onClick: () => T(!1),
+            children: c.cancel
           }
         )
       ] }) })
@@ -1639,26 +1661,26 @@ const wn = {
   ] });
 };
 export {
-  Vn as ContentWithNoteWrapper,
-  he as Highlight,
-  Qe as HighlightError,
-  In as NoteCard,
-  Ve as NoteChip,
-  yn as NoteReactionMenu,
-  Tn as NotebookEmptyState,
-  Qn as NotebookProvider,
-  pn as NotebookTranslationsProvider,
-  Jn as NotebookTray,
-  eo as NotesListView,
-  w as REACTION_TYPE,
-  to as SingleNote,
-  Te as createTransparentColor,
-  Dt as useCreateNote,
-  Lt as useDeleteNote,
-  $e as useGetNotes,
-  Xe as useNotebook,
-  G as useNotebookTranslations,
-  Yn as useNotesData,
-  Zn as useReactionFilter,
-  At as useUpdateNote
+  eo as ContentWithNoteWrapper,
+  ye as Highlight,
+  Ze as HighlightError,
+  kn as NoteCard,
+  Je as NoteChip,
+  Tn as NoteReactionMenu,
+  xn as NotebookEmptyState,
+  Jn as NotebookProvider,
+  bn as NotebookTranslationsProvider,
+  oo as NotebookTray,
+  ro as NotesListView,
+  k as REACTION_TYPE,
+  so as SingleNote,
+  we as createTransparentColor,
+  At as useCreateNote,
+  Ft as useDeleteNote,
+  Ke as useGetNotes,
+  Ye as useNotebook,
+  Q as useNotebookTranslations,
+  to as useNotesData,
+  no as useReactionFilter,
+  _t as useUpdateNote
 };