@instructure/platform-notebook 1.10.3 → 1.11.1

package/dist/index.js

@@ -1,107 +1,111 @@
 import { jsx as i, jsxs as T, Fragment as Xe } from "react/jsx-runtime";
-import { createContext as Ve, useMemo as he, useContext as Qe, useReducer as Ye, useRef as F, useEffect as W, useState as G, useCallback as K } from "react";
-import { createPortal as ht } from "react-dom";
-import { z as f } from "zod";
-import pt from "diff-match-patch";
-import { useQueryClient as ke, useMutation as Oe, useQuery as yt } from "@tanstack/react-query";
-import { CloseButton as Nt, Button as ne, IconButton as me } from "@instructure/ui-buttons/v11_7";
-import { Flex as x } from "@instructure/ui-flex/v11_7";
-import { Heading as Se } from "@instructure/ui-heading/v11_7";
+import { createContext as Ve, useMemo as pe, useContext as Qe, useReducer as Ye, useRef as F, useEffect as q, useState as W, useCallback as K } from "react";
+import { createPortal as pt } from "react-dom";
+import { z as d } from "zod";
+import yt from "diff-match-patch";
+import { useQueryClient as ke, useMutation as Le, useQuery as Nt } from "@tanstack/react-query";
+import { CloseButton as bt, Button as ne, IconButton as ge } from "@instructure/ui-buttons/v11_7";
+import { Flex as I } from "@instructure/ui-flex/v11_7";
+import { Heading as ve } from "@instructure/ui-heading/v11_7";
 import { Tray as Et } from "@instructure/ui-tray/v11_7";
 import { View as V } from "@instructure/ui-view/v11_7";
-import { IconQuestionLine as Le, IconPinLine as Ae, IconWarningLine as bt, IconNoteLine as Tt, IconEditLine as Re, IconTrashLine as Te, IconArrowStartLine as St } from "@instructure/ui-icons";
-import { Menu as ue } from "@instructure/ui-menu/v11_7";
-import { TruncateText as be } from "@instructure/ui-truncate-text/v11_7";
+import { IconQuestionLine as Ae, IconPinLine as De, IconWarningLine as Tt, NotebookInstUIIcon as St, IconEditLine as Oe, IconTrashLine as Se, IconArrowStartLine as vt } from "@instructure/ui-icons";
+import { Menu as fe } from "@instructure/ui-menu/v11_7";
+import { TruncateText as Te } from "@instructure/ui-truncate-text/v11_7";
 import { SimpleSelect as He } from "@instructure/ui-simple-select/v11_7";
-import { Text as te } from "@instructure/ui-text/v11_7";
-import { ScreenReaderContent as pe } from "@instructure/ui-a11y-content";
+import { Text as Z } from "@instructure/ui-text/v11_7";
+import { ScreenReaderContent as ye } from "@instructure/ui-a11y-content";
 import { Dialog as Ct } from "@instructure/ui-dialog";
 import { TextArea as Ze } from "@instructure/ui-text-area/v11_7";
-import { Pill as Ue } from "@instructure/ui-pill/v11_7";
-import { Pagination as vt } from "@instructure/ui-pagination/v11_7";
-import { Spinner as It } from "@instructure/ui-spinner/v11_7";
-const xt = f.object({
-  startContainer: f.string(),
-  endContainer: f.string(),
-  startOffset: f.number(),
-  endOffset: f.number()
-}), Rt = f.object({
-  start: f.number(),
-  end: f.number()
-}), De = f.object({
-  selectedText: f.string(),
-  hasNoHighlightAnymore: f.boolean().optional(),
-  textPosition: Rt.nullable(),
-  range: xt.nullable(),
-  pageLastModifiedAt: f.string()
+import { Pill as $e } from "@instructure/ui-pill/v11_7";
+import { Pagination as It } from "@instructure/ui-pagination/v11_7";
+import { Spinner as xt } from "@instructure/ui-spinner/v11_7";
+const Rt = d.object({
+  startContainer: d.string(),
+  endContainer: d.string(),
+  startOffset: d.number(),
+  endOffset: d.number()
+}), Ot = d.object({
+  start: d.number(),
+  end: d.number()
+}), Pe = d.object({
+  selectedText: d.string(),
+  hasNoHighlightAnymore: d.boolean().optional(),
+  textPosition: Ot.nullable(),
+  range: Rt.nullable(),
+  pageLastModifiedAt: d.string()
 });
-var k = /* @__PURE__ */ ((t) => (t.IMPORTANT = "Important", t.CONFUSING = "Confusing", t))(k || {});
-const Pe = f.enum([
+var L = /* @__PURE__ */ ((t) => (t.IMPORTANT = "Important", t.CONFUSING = "Confusing", t))(L || {});
+const _e = d.enum([
   "Important",
   "Confusing"
   /* CONFUSING */
-]), wt = f.object({
-  totalCount: f.number().nullish(),
-  totalNrOfPages: f.number().nullish()
-}), Ce = f.object({
-  id: f.string(),
-  rootAccountUuid: f.string(),
-  userId: f.string(),
-  courseId: f.string(),
-  objectId: f.string(),
-  objectType: f.string(),
-  userText: f.string().optional(),
-  reaction: f.array(Pe),
-  highlightData: De,
-  createdAt: f.string(),
-  updatedAt: f.string()
-}), kt = f.object({
-  cursor: f.string(),
+]), wt = d.object({
+  totalCount: d.number().nullish(),
+  totalNrOfPages: d.number().nullish()
+}), Ce = 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(_e),
+  highlightData: Pe,
+  // Set by the host when the note's highlight is gone specifically because its source
+  // (the page/assignment/quiz it was captured from) was unpublished or deleted, as opposed
+  // to the note never having had a highlight. Selects the HighlightError reason in NoteCard.
+  highlightSourceUnavailable: d.boolean().optional(),
+  createdAt: d.string(),
+  updatedAt: d.string()
+}), kt = d.object({
+  cursor: d.string(),
   node: Ce
 });
-f.object({
-  notes: f.object({
-    edges: f.array(kt),
-    nodes: f.array(Ce),
+d.object({
+  notes: d.object({
+    edges: d.array(kt),
+    nodes: d.array(Ce),
     pageInfo: wt
   })
 });
-const Ot = f.object({
-  type: f.string(),
-  id: f.string()
-}), Lt = f.object({
-  courseId: f.string().optional(),
-  learningObject: Ot.optional(),
-  reactions: f.array(f.string()).optional()
+const Lt = d.object({
+  type: d.string(),
+  id: d.string()
+}), At = d.object({
+  courseId: d.string().optional(),
+  learningObject: Lt.optional(),
+  reactions: d.array(d.string()).optional()
 }).optional();
-f.object({
-  courseId: f.string().optional(),
-  filter: Lt,
-  offset: f.number().optional(),
-  pageSize: f.number().optional()
+d.object({
+  courseId: d.string().optional(),
+  filter: At,
+  offset: d.number().optional(),
+  pageSize: d.number().optional()
 });
-f.object({
-  courseId: f.string(),
-  objectId: f.string(),
-  objectType: f.string(),
-  userText: f.string().optional(),
-  reaction: f.array(Pe),
-  highlightData: De
+d.object({
+  courseId: d.string(),
+  objectId: d.string(),
+  objectType: d.string(),
+  userText: d.string().optional(),
+  reaction: d.array(_e),
+  highlightData: Pe
 });
-f.object({
+d.object({
   createNote: Ce
 });
-f.object({
-  id: f.string(),
-  userText: f.string().optional(),
-  reaction: f.array(Pe),
-  highlightData: De
+d.object({
+  id: d.string(),
+  userText: d.string().optional(),
+  reaction: d.array(_e),
+  highlightData: Pe
 });
-f.object({
+d.object({
   updateNote: Ce
 });
-f.object({
-  deleteNote: f.string()
+d.object({
+  deleteNote: d.string()
 });
 var Je = /* @__PURE__ */ ((t) => (t[t.FORWARDS = 1] = "FORWARDS", t[t.BACKWARDS = 2] = "BACKWARDS", t))(Je || {});
 class oe {
@@ -200,18 +204,18 @@ class X {
     return new X(n, o);
   }
 }
-const At = (t) => {
+const Dt = (t) => {
   const e = t.nodeName.toLowerCase();
   return e === "#text" ? "text()" : e;
 };
-function Dt(t) {
+function Pt(t) {
   let e = 0, n = t;
   for (; n; )
     n.nodeName === t.nodeName && (e += 1), n = n.previousSibling;
   return e;
 }
-const Pt = (t) => {
-  const e = At(t), n = Dt(t);
+const _t = (t) => {
+  const e = Dt(t), n = Pt(t);
   return `${e}[${n}]`;
 }, Ge = (t, e) => {
   let n = "", o = t;
@@ -220,10 +224,10 @@ const Pt = (t) => {
       console.error("Node is not a descendant of root");
       return;
     }
-    n = `${Pt(o)}/${n}`, o = o.parentNode;
+    n = `${_t(o)}/${n}`, o = o.parentNode;
   }
   return n = `/${n}`, n = n.replace(/\/$/, ""), n;
-}, _t = (t, e, n) => {
+}, Ft = (t, e, n) => {
   const o = e.toUpperCase();
   let r = -1;
   for (let s = 0; s < t.children.length; s++) {
@@ -232,7 +236,7 @@ const Pt = (t) => {
       return l;
   }
   return null;
-}, Ft = (t, e) => {
+}, Mt = (t, e) => {
   if (!(t.match(/^(\/[A-Za-z0-9-]+(\[[0-9]+])?)+$/) !== null))
     return console.error("Expression is not a simple XPath"), null;
   const o = t.split("/");
@@ -240,35 +244,35 @@ const Pt = (t) => {
   o.shift();
   for (const s of o) {
     let l, a;
-    const m = s.indexOf("[");
-    if (m !== -1) {
-      l = s.slice(0, m);
-      const p = s.slice(m + 1, s.indexOf("]"));
-      if (a = Number.parseInt(p, 10) - 1, a < 0)
+    const f = s.indexOf("[");
+    if (f !== -1) {
+      l = s.slice(0, f);
+      const m = s.slice(f + 1, s.indexOf("]"));
+      if (a = Number.parseInt(m, 10) - 1, a < 0)
         return null;
     } else
       l = s, a = 0;
-    const c = _t(r, l, a);
-    if (!c)
+    const u = Ft(r, l, a);
+    if (!u)
       return null;
-    r = c;
+    r = u;
   }
   return r;
 }, je = (t, e = document.body) => {
   if (t === "")
     return e;
   try {
-    return Ft(t, e);
+    return Mt(t, e);
   } catch {
     return document.evaluate(`.${t}`, e, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
   }
 };
-class ae {
+class ce {
   constructor(e, n) {
     this.root = e, this.range = n;
   }
   static fromRange(e, n) {
-    return new ae(e, n);
+    return new ce(e, n);
   }
   static fromSelector(e, n) {
     if ((n == null ? void 0 : n.startContainer) == null || (n == null ? void 0 : n.endContainer) == null)
@@ -283,7 +287,7 @@ class ae {
     if (!s || !l)
       return null;
     const a = new oe(s, l).toRange();
-    return a ? !e.contains(a.startContainer) || !e.contains(a.endContainer) ? (console.error("Resolved range escapes root"), null) : new ae(e, a) : null;
+    return a ? !e.contains(a.startContainer) || !e.contains(a.endContainer) ? (console.error("Resolved range escapes root"), null) : new ce(e, a) : null;
   }
   toRange() {
     return this.range;
@@ -299,17 +303,17 @@ class ae {
     };
   }
 }
-class ie {
+class le {
   constructor(e, n, o) {
     this.root = e, this.start = n, this.end = o;
   }
   static fromRange(e, n) {
     var r;
     const o = (r = oe.fromRange(n)) == null ? void 0 : r.relativeTo(e);
-    return o ? new ie(e, o.start.offset, o.end.offset) : null;
+    return o ? new le(e, o.start.offset, o.end.offset) : null;
   }
   static fromSelector(e, n) {
-    return new ie(e, n.start, n.end);
+    return new le(e, n.start, n.end);
   }
   toSelector() {
     return {
@@ -344,65 +348,65 @@ const et = (t) => {
   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;
-}, Mt = (t, e, n, o) => {
+}, Bt = (t, e, n, o) => {
   const r = n - e;
-  return Math.abs(r - o) <= 5 ? ie.fromSelector(t, {
+  return Math.abs(r - o) <= 5 ? le.fromSelector(t, {
     start: e,
     end: n
   }) : null;
-}, Bt = (t, e, n, o) => {
-  const r = new pt();
+}, Ut = (t, e, n, o) => {
+  const r = new yt();
   r.Match_Distance = 5e3;
   const s = t.textContent;
   if (!s)
     return null;
   if (e.length > 32) {
-    const l = e.slice(0, 32), a = e.slice(-32), m = o - n;
-    let c = r.match_main(s, l, n);
-    const p = r.match_main(s, a, o), d = p + a.length;
-    if (c === -1 || p === -1)
+    const l = e.slice(0, 32), a = e.slice(-32), f = o - n;
+    let u = r.match_main(s, l, n);
+    const m = r.match_main(s, a, o), c = m + a.length;
+    if (u === -1 || m === -1)
       return null;
-    const h = d - c, E = Math.abs(h - m);
-    if ((c > d || E > 5) && (r.Match_Distance = e.length + 100, c = r.match_main(s, l, d), c !== -1 && c < d))
-      return Mt(t, c, d, m);
-    if (c < d && E <= 5)
-      return ie.fromSelector(t, {
-        start: c,
-        end: d
+    const y = c - u, N = Math.abs(y - f);
+    if ((u > c || N > 5) && (r.Match_Distance = e.length + 100, u = r.match_main(s, l, c), u !== -1 && u < c))
+      return Bt(t, u, c, f);
+    if (u < c && N <= 5)
+      return le.fromSelector(t, {
+        start: u,
+        end: c
       });
   } else {
     const l = r.match_main(s, e, n);
     if (l !== -1)
-      return ie.fromSelector(t, {
+      return le.fromSelector(t, {
         start: l,
         end: l + e.length
       });
   }
   return null;
-}, $t = (t, e) => {
+}, Ht = (t, e) => {
   if (!e) return null;
   const { highlightData: n } = t, { textPosition: o, selectedText: r } = n;
-  return Bt(
+  return Ut(
     e,
     r,
     (o == null ? void 0 : o.start) ?? 0,
     (o == null ? void 0 : o.end) ?? 0
   );
-}, Ht = (t, e, n) => {
+}, $t = (t, e, n) => {
   const o = [], r = [];
   for (const s of e) {
-    const l = $t(s, t);
+    const l = Ht(s, t);
     if (l) {
-      const a = l.toRange(), m = a && ae.fromRange(t, a), c = (a == null ? void 0 : a.toString().trim()) || s.highlightData.selectedText;
+      const a = l.toRange(), f = a && ce.fromRange(t, a), u = (a == null ? void 0 : a.toString().trim()) || s.highlightData.selectedText;
       o.push({
         id: s.id,
         reaction: s.reaction,
         userText: s.userText,
         highlightData: {
           ...s.highlightData,
-          selectedText: c,
+          selectedText: u,
           hasNoHighlightAnymore: !1,
-          range: (m == null ? void 0 : m.toSelector()) ?? null,
+          range: (f == null ? void 0 : f.toSelector()) ?? null,
           textPosition: l.toSelector(),
           pageLastModifiedAt: n
         }
@@ -424,59 +428,59 @@ const et = (t) => {
   var l;
   if (!e) return;
   const { highlightData: n, id: o } = t, { range: r } = n ?? {};
-  r && ((l = ae.fromSelector(e, r)) == null ? void 0 : l.toRange()) && Jt({ id: o });
-}, Ut = (t) => {
+  r && ((l = ce.fromSelector(e, r)) == null ? void 0 : l.toRange()) && en({ id: o });
+}, Gt = (t) => {
   const n = document.querySelector(
     `[data-highlight-id="${CSS.escape(t)}"].highlight-content`
-  ) ?? document.getElementById(ve(t));
+  ) ?? document.getElementById(Ie(t));
   if (n) {
     const o = n.getBoundingClientRect();
     o.top >= 0 && o.bottom <= (window.innerHeight || document.documentElement.clientHeight) || n.scrollIntoView({ behavior: "smooth", block: "center" });
   }
-}, ye = 90, Ne = 172, Gt = (t) => {
+}, Ne = 90, be = 172, jt = (t) => {
   const e = t.getClientRects();
   if (!e.length)
     return null;
-  const n = e[0], o = e[e.length - 1], r = 4, s = 16, l = window.innerWidth || document.documentElement.clientWidth, a = window.innerHeight || document.documentElement.clientHeight, m = (y) => {
-    const b = y + Ne;
-    return y >= s && b <= l - s;
-  }, c = (y) => {
-    const b = y + ye;
-    return y >= s && b <= a - s;
+  const n = e[0], o = e[e.length - 1], r = 4, s = 16, l = window.innerWidth || document.documentElement.clientWidth, a = window.innerHeight || document.documentElement.clientHeight, f = (h) => {
+    const x = h + be;
+    return h >= s && x <= l - s;
+  }, u = (h) => {
+    const x = h + Ne;
+    return h >= s && x <= a - s;
   };
-  let p;
-  const d = n.right - Ne;
-  if (m(d))
-    p = d;
+  let m;
+  const c = n.right - be;
+  if (f(c))
+    m = c;
   else {
-    const y = n.left;
-    if (m(y))
-      p = y;
+    const h = n.left;
+    if (f(h))
+      m = h;
     else {
-      const g = (n.left + n.right) / 2 - Ne / 2;
-      m(g) ? p = g : d < s ? p = s : p = l - Ne - s;
+      const p = (n.left + n.right) / 2 - be / 2;
+      f(p) ? m = p : c < s ? m = s : m = l - be - s;
     }
   }
-  let h;
-  const E = o.bottom + r;
-  if (c(E))
-    h = E;
+  let y;
+  const N = o.bottom + r;
+  if (u(N))
+    y = N;
   else {
-    const y = n.top - ye - r;
-    c(y) ? h = y : E + ye > a - s ? h = a - ye - s : h = s;
+    const h = n.top - Ne - r;
+    u(h) ? y = h : N + Ne > a - s ? y = a - Ne - s : y = s;
   }
-  return { top: h, left: p };
-}, jt = (t, e) => {
+  return { top: y, left: m };
+}, Wt = (t, e) => {
   for (const n of e)
     if (t.start < n.end && t.end > n.start)
       return !0;
   return !1;
-}, _e = (t) => `highlight-wrapper-${t}`, ve = (t) => `${_e(t)}-start`, nt = (t) => `${_e(t)}-end`, ge = (t) => `[data-highlight-id="${CSS.escape(t)}"]`, Wt = "2px", zt = "3px", qt = "1px", ot = "3px", Kt = "1px", rt = "Notebook note", Fe = (t, e) => {
+}, Fe = (t) => `highlight-wrapper-${t}`, Ie = (t) => `${Fe(t)}-start`, nt = (t) => `${Fe(t)}-end`, he = (t) => `[data-highlight-id="${CSS.escape(t)}"]`, zt = "2px", qt = "3px", Kt = "1px", ot = "3px", Xt = "1px", rt = "Notebook note", Me = (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})`;
 }, st = (t, e, n, o, r) => {
-  t.style.backgroundColor = n, t.style.textDecorationColor = o, t.style.textDecorationStyle = r, e ? (t.dataset.selected = "true", t.style.outline = `${qt} ${r} ${o}`, t.style.outlineOffset = Kt, t.style.borderRadius = ot, t.style.fontWeight = "bold") : (t.removeAttribute("data-selected"), t.style.outline = "", t.style.outlineOffset = "", t.style.borderRadius = "", t.style.fontWeight = "");
-}, Xt = /* @__PURE__ */ new Set([
+  t.style.backgroundColor = n, t.style.textDecorationColor = o, t.style.textDecorationStyle = r, e ? (t.dataset.selected = "true", t.style.outline = `${Kt} ${r} ${o}`, t.style.outlineOffset = Xt, t.style.borderRadius = ot, t.style.fontWeight = "bold") : (t.removeAttribute("data-selected"), t.style.outline = "", t.style.outlineOffset = "", t.style.borderRadius = "", t.style.fontWeight = "");
+}, Vt = /* @__PURE__ */ new Set([
   "AREA",
   "BASE",
   "BR",
@@ -495,11 +499,11 @@ const et = (t) => {
   const n = t.cloneRange();
   n.collapse(e);
   const o = n.startContainer;
-  if (!(o.nodeType === Node.ELEMENT_NODE && Xt.has(o.tagName)) || !o.parentNode)
+  if (!(o.nodeType === Node.ELEMENT_NODE && Vt.has(o.tagName)) || !o.parentNode)
     return n;
   const s = o.parentNode, l = Array.from(s.childNodes).indexOf(o), a = document.createRange();
   return a.setStart(s, l), a.collapse(!0), a;
-}, Vt = (t, e) => {
+}, Qt = (t, e) => {
   var n;
   try {
     const o = ((n = e.nodeValue) == null ? void 0 : n.length) ?? e.childNodes.length;
@@ -507,7 +511,7 @@ const et = (t) => {
   } catch {
     return !1;
   }
-}, Qt = (t) => {
+}, Yt = (t) => {
   var s;
   if (t.collapsed)
     return [];
@@ -517,7 +521,7 @@ const et = (t) => {
   const n = [], o = (s = e == null ? void 0 : e.ownerDocument) == null ? void 0 : s.createNodeIterator(e, NodeFilter.SHOW_TEXT);
   let r = (o == null ? void 0 : o.nextNode()) || null;
   for (; r; ) {
-    if (!Vt(t, r)) {
+    if (!Qt(t, r)) {
       r = (o == null ? void 0 : o.nextNode()) || null;
       continue;
     }
@@ -529,106 +533,106 @@ const et = (t) => {
     l === t.endContainer && t.endOffset < l.data.length && l.splitText(t.endOffset), n.push(l), r = (o == null ? void 0 : o.nextNode()) || null;
   }
   return n;
-}, Yt = (t, e, n) => {
+}, Zt = (t, e, n) => {
   if (t.collapsed) return;
-  const o = e.id ?? "", r = _e(o);
-  if (document.getElementById(ve(o))) {
-    Zt(e, n);
+  const o = e.id ?? "", r = Fe(o);
+  if (document.getElementById(Ie(o))) {
+    Jt(e, n);
     return;
   }
-  const l = e.type === k.IMPORTANT ? n.colors.importantBackground : n.colors.confusingBackground, a = e.id === e.selectedNoteId, m = a ? l : Fe(l, 0.5), c = e.type === k.IMPORTANT ? n.colors.importantUnderline : n.colors.confusingUnderline, p = e.type === k.IMPORTANT ? "solid" : "dashed", d = document.createElement("span");
-  d.id = `${r}-start`, d.className = "highlight-marker-start", d.dataset.highlightId = o || "";
-  const h = e.labelPrefix ?? rt;
-  d.setAttribute("role", "button"), d.setAttribute("tabindex", "0"), d.setAttribute("aria-label", h), d.setAttribute("aria-haspopup", "dialog"), d.setAttribute("aria-expanded", String(a && !!e.isTrayOpen)), a && d.setAttribute("aria-current", "true"), e.popupId && d.setAttribute("aria-controls", e.popupId), d.style.position = "relative", d.style.fontSize = "0", d.style.lineHeight = "0", d.style.width = "0", d.style.height = "0", d.style.margin = "0", d.style.padding = "0", d.style.border = "0", d.style.outline = "none";
-  const E = document.createElement("span");
-  E.id = nt(o), E.className = "highlight-marker-end", E.dataset.highlightId = o || "", qe(t, !1).insertNode(E), qe(t, !0).insertNode(d);
-  const g = document.createRange();
-  g.setStartAfter(d), g.setEndBefore(E);
-  const j = Qt(g).filter((N) => N.textContent && N.textContent.length > 0);
-  j.forEach((N, I) => {
-    var $;
-    const B = N.parentElement;
-    if ((B == null ? void 0 : B.dataset.highlightId) === o) return;
-    const D = I === 0, P = I === j.length - 1, S = j.length === 1;
+  const l = e.type === L.IMPORTANT ? n.colors.importantBackground : n.colors.confusingBackground, a = e.id === e.selectedNoteId, f = a ? l : Me(l, 0.5), u = e.type === L.IMPORTANT ? n.colors.importantUnderline : n.colors.confusingUnderline, m = e.type === L.IMPORTANT ? "solid" : "dashed", c = document.createElement("span");
+  c.id = `${r}-start`, c.className = "highlight-marker-start", c.dataset.highlightId = o || "";
+  const y = e.labelPrefix ?? rt;
+  c.setAttribute("role", "button"), c.setAttribute("tabindex", "0"), c.setAttribute("aria-label", y), c.setAttribute("aria-haspopup", "dialog"), c.setAttribute("aria-expanded", String(a && !!e.isTrayOpen)), a && c.setAttribute("aria-current", "true"), e.popupId && c.setAttribute("aria-controls", e.popupId), c.style.position = "relative", c.style.fontSize = "0", c.style.lineHeight = "0", c.style.width = "0", c.style.height = "0", c.style.margin = "0", c.style.padding = "0", c.style.border = "0", c.style.outline = "none";
+  const N = document.createElement("span");
+  N.id = nt(o), N.className = "highlight-marker-end", N.dataset.highlightId = o || "", qe(t, !1).insertNode(N), qe(t, !0).insertNode(c);
+  const p = document.createRange();
+  p.setStartAfter(c), p.setEndBefore(N);
+  const z = Yt(p).filter((b) => b.textContent && b.textContent.length > 0);
+  z.forEach((b, S) => {
+    var j;
+    const P = b.parentElement;
+    if ((P == null ? void 0 : P.dataset.highlightId) === o) return;
+    const D = S === 0, G = S === z.length - 1, E = z.length === 1;
     let w;
-    S ? w = "single" : D ? w = "first" : P ? w = "last" : w = "middle";
-    const C = document.createElement("span");
-    C.className = "highlight-content", C.dataset.highlightId = o || "", C.dataset.position = w, C.style.textDecorationLine = "underline", C.style.textDecorationThickness = n.borderWidthSmall, C.style.textUnderlineOffset = n.underlineOffset, C.style.cursor = "pointer", st(C, a, m, c, p), C.addEventListener("click", (re) => {
-      var z;
-      re.target.tagName !== "A" && ((z = e.onClick) == null || z.call(e));
-    }), ($ = N.parentNode) == null || $.insertBefore(C, N), C.appendChild(N);
-  }), d.addEventListener("click", (N) => {
-    var I;
-    N.target.tagName !== "A" && ((I = e.onClick) == null || I.call(e));
-  }), d.addEventListener("keydown", (N) => {
-    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 B = document.querySelectorAll(ge(o));
-      for (const D of B) {
-        const P = D.querySelector("a");
-        if (P) {
-          N.preventDefault(), P.focus();
+    E ? w = "single" : D ? w = "first" : G ? w = "last" : w = "middle";
+    const v = document.createElement("span");
+    v.className = "highlight-content", v.dataset.highlightId = o || "", v.dataset.position = w, v.style.textDecorationLine = "underline", v.style.textDecorationThickness = n.borderWidthSmall, v.style.textUnderlineOffset = n.underlineOffset, v.style.cursor = "pointer", st(v, a, f, u, m), v.addEventListener("click", (ee) => {
+      var Q;
+      ee.target.tagName !== "A" && ((Q = e.onClick) == null || Q.call(e));
+    }), (j = b.parentNode) == null || j.insertBefore(v, b), v.appendChild(b);
+  }), c.addEventListener("click", (b) => {
+    var S;
+    b.target.tagName !== "A" && ((S = e.onClick) == null || S.call(e));
+  }), c.addEventListener("keydown", (b) => {
+    var S;
+    if (b.key === "Enter" || b.key === " ")
+      b.preventDefault(), (S = e.onClick) == null || S.call(e);
+    else if (b.key === "Tab" && !b.shiftKey) {
+      const P = document.querySelectorAll(he(o));
+      for (const D of P) {
+        const G = D.querySelector("a");
+        if (G) {
+          b.preventDefault(), G.focus();
           break;
         }
       }
     }
-  }), d.addEventListener("focus", () => {
+  }), c.addEventListener("focus", () => {
     document.querySelectorAll(
-      `.highlight-content${ge(o)}`
-    ).forEach((I) => {
-      I.style.boxShadow = `0 0 0 ${Wt} ${n.colors.focusOutline}`, I.style.borderRadius = zt;
+      `.highlight-content${he(o)}`
+    ).forEach((S) => {
+      S.style.boxShadow = `0 0 0 ${zt} ${n.colors.focusOutline}`, S.style.borderRadius = qt;
     });
-  }), d.addEventListener("blur", () => {
+  }), c.addEventListener("blur", () => {
     document.querySelectorAll(
-      `.highlight-content${ge(o)}`
-    ).forEach((I) => {
-      I.style.boxShadow = "", I.style.borderRadius = I.dataset.selected ? ot : "";
+      `.highlight-content${he(o)}`
+    ).forEach((S) => {
+      S.style.boxShadow = "", S.style.borderRadius = S.dataset.selected ? ot : "";
     });
   });
 };
-function Zt(t, e) {
-  const n = t.type === k.IMPORTANT ? e.colors.importantBackground : e.colors.confusingBackground, o = t.id === t.selectedNoteId, r = o ? n : Fe(n, 0.5), s = t.type === k.IMPORTANT ? e.colors.importantUnderline : e.colors.confusingUnderline, l = t.type === k.IMPORTANT ? "solid" : "dashed";
+function Jt(t, e) {
+  const n = t.type === L.IMPORTANT ? e.colors.importantBackground : e.colors.confusingBackground, o = t.id === t.selectedNoteId, r = o ? n : Me(n, 0.5), s = t.type === L.IMPORTANT ? e.colors.importantUnderline : e.colors.confusingUnderline, l = t.type === L.IMPORTANT ? "solid" : "dashed";
   document.querySelectorAll(
-    `.highlight-content${ge(t.id ?? "")}`
-  ).forEach((c) => {
-    st(c, o, r, s, l);
+    `.highlight-content${he(t.id ?? "")}`
+  ).forEach((u) => {
+    st(u, o, r, s, l);
   });
-  const m = document.getElementById(
-    ve(t.id ?? "")
+  const f = document.getElementById(
+    Ie(t.id ?? "")
   );
-  m && (m.setAttribute("aria-label", t.labelPrefix ?? rt), m.setAttribute("aria-expanded", String(o && !!t.isTrayOpen)), o ? m.setAttribute("aria-current", "true") : m.removeAttribute("aria-current"));
+  f && (f.setAttribute("aria-label", t.labelPrefix ?? rt), f.setAttribute("aria-expanded", String(o && !!t.isTrayOpen)), o ? f.setAttribute("aria-current", "true") : f.removeAttribute("aria-current"));
 }
-const Jt = (t) => {
-  const e = t.id ?? "", n = document.getElementById(ve(e)), o = document.getElementById(nt(e));
+const en = (t) => {
+  const e = t.id ?? "", n = document.getElementById(Ie(e)), o = document.getElementById(nt(e));
   document.querySelectorAll(
-    ge(e)
+    he(e)
   ).forEach((s) => {
     var l;
     for (; s.firstChild; )
       (l = s.parentNode) == null || l.insertBefore(s.firstChild, s);
     s.remove();
   }), n == null || n.remove(), o == null || o.remove();
-}, fe = {
+}, me = {
   all: ["notebook"],
   notes: (t) => ["notebook", "notes", t]
 };
-function en(t) {
+function tn(t) {
   const e = ke();
-  return Oe({
+  return Le({
     mutationFn: (n) => t.createNote(n),
     onSuccess: () => {
-      e.invalidateQueries({ queryKey: fe.all });
+      e.invalidateQueries({ queryKey: me.all });
     }
   });
 }
-function tn(t) {
+function nn(t) {
   const e = ke();
-  return Oe({
+  return Le({
     mutationFn: (n) => t.deleteNote(n),
     onSuccess: () => {
-      e.invalidateQueries({ queryKey: fe.all });
+      e.invalidateQueries({ queryKey: me.all });
     }
   });
 }
@@ -637,13 +641,13 @@ function it({
   enabled: e = !0,
   ...n
 }) {
-  return yt({
-    queryKey: fe.notes(n),
+  return Nt({
+    queryKey: me.notes(n),
     queryFn: () => t.getNotes(n),
     enabled: e
   });
 }
-const nn = 100;
+const on = 100;
 function lt({
   api: t,
   courseId: e,
@@ -659,23 +663,23 @@ function lt({
       ...o != null && o.length ? { reactions: o } : {}
     },
     offset: 0,
-    pageSize: nn,
+    pageSize: on,
     enabled: r
   });
 }
-function on(t) {
+function rn(t) {
   const e = ke();
-  return Oe({
+  return Le({
     mutationFn: ({ id: n, input: o }) => t.updateNote(n, o),
     onMutate: async ({ id: n, input: o }) => {
-      await e.cancelQueries({ queryKey: fe.all });
-      const s = e.getQueryCache().findAll({ queryKey: fe.all }), l = /* @__PURE__ */ new Map();
+      await e.cancelQueries({ queryKey: me.all });
+      const s = e.getQueryCache().findAll({ queryKey: me.all }), l = /* @__PURE__ */ new Map();
       for (const a of s) {
-        const m = a.state.data;
-        m && (l.set(a.queryKey, m), e.setQueryData(a.queryKey, {
-          ...m,
-          notes: m.notes.map(
-            (c) => c.id === n ? { ...c, ...o, updatedAt: (/* @__PURE__ */ new Date()).toISOString() } : c
+        const f = a.state.data;
+        f && (l.set(a.queryKey, f), e.setQueryData(a.queryKey, {
+          ...f,
+          notes: f.notes.map(
+            (u) => u.id === n ? { ...u, ...o, updatedAt: (/* @__PURE__ */ new Date()).toISOString() } : u
           )
         }));
       }
@@ -687,61 +691,63 @@ function on(t) {
           e.setQueryData(s, l);
     },
     onSettled: () => {
-      e.invalidateQueries({ queryKey: fe.all });
+      e.invalidateQueries({ queryKey: me.all });
     }
   });
 }
-const rn = "Notebook", sn = "Notes", ln = "Important", an = "Unclear", cn = "Back", dn = "Edit note", un = "Save", fn = "Cancel", mn = "Delete note", gn = "Delete note confirmation", hn = "note", pn = "Add note (optional)", yn = "Remove from Notebook", Nn = "Add a note (optional)", En = "Mark important", bn = "Mark unclear", Tn = "Saved to Notebook.", Sn = "Note updated", Cn = "Note deleted", vn = "Error saving to Notebook.", In = "Error updating note", xn = "Note deletion failed", Rn = "Loading notes", wn = "Failed to load notes", kn = "Start capturing your notes", On = "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.", Ln = "Nothing here yet", An = "Adjust your filters or create a new note to get started.", Dn = "You have no notes for the selected filter", Pn = "Filter", _n = "Previous page", Fn = "Next page", Mn = "All courses", Bn = "All notes", $n = "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.", Un = "The content you highlighted is no longer available.", Gn = "Notebook note", Me = {
-  notebook: rn,
-  notes: sn,
-  important: ln,
-  unclear: an,
-  back: cn,
-  editNote: dn,
-  save: un,
-  cancel: fn,
-  deleteNote: mn,
-  deleteNoteConfirmation: gn,
-  note: hn,
-  addNotePrompt: pn,
-  removeFromNotebook: yn,
-  addNoteOptional: Nn,
+const sn = "Notebook", ln = "Notes", an = "Important", cn = "Unclear", dn = "Back", un = "Edit note", fn = "Save", mn = "Cancel", gn = "Delete note", hn = "Delete note confirmation", pn = "note", yn = "Add note (optional)", Nn = "Remove from Notebook", bn = "Add a note (optional)", En = "Mark important", Tn = "Mark unclear", Sn = "Saved to Notebook.", vn = "Note updated", Cn = "Note deleted", In = "Error saving to Notebook.", xn = "Error updating note", Rn = "Note deletion failed", On = "Loading notes", wn = "Failed to load notes", kn = "Start capturing your notes", Ln = "To use the Notebook feature, select text on a page to mark it as Important or Unclear, and add an optional note.", An = "Only you can see your Notebook. Instructors and classmates don't see your notes.", Dn = "Nothing here yet", Pn = "Adjust your filters or create a new note to get started.", _n = "You have no notes for the selected filter", Fn = "Filter", Mn = "Previous page", Bn = "Next page", Un = "All courses", Hn = "All notes", $n = "Close Notebook panel", Gn = "To use the Notebook feature, highlight an excerpt from your learning material to flag it as 'confusing' or 'important' and leave an optional note.", jn = "The content you highlighted is no longer available.", Wn = "This source is no longer available.", zn = "Notebook note", Be = {
+  notebook: sn,
+  notes: ln,
+  important: an,
+  unclear: cn,
+  back: dn,
+  editNote: un,
+  save: fn,
+  cancel: mn,
+  deleteNote: gn,
+  deleteNoteConfirmation: hn,
+  note: pn,
+  addNotePrompt: yn,
+  removeFromNotebook: Nn,
+  addNoteOptional: bn,
   markImportant: En,
-  markUnclear: bn,
-  savedToNotebook: Tn,
-  noteUpdated: Sn,
+  markUnclear: Tn,
+  savedToNotebook: Sn,
+  noteUpdated: vn,
   noteDeleted: Cn,
-  errorSavingNote: vn,
-  errorUpdatingNote: In,
-  noteDeletionFailed: xn,
-  loadingNotes: Rn,
+  errorSavingNote: In,
+  errorUpdatingNote: xn,
+  noteDeletionFailed: Rn,
+  loadingNotes: On,
   failedToLoadNotes: wn,
   emptyStateHeading: kn,
-  emptyStateDescription: On,
-  nothingHereYet: Ln,
-  adjustFiltersOrCreate: An,
-  noNotesForFilter: Dn,
-  filter: Pn,
-  previousPage: _n,
-  nextPage: Fn,
-  allCourses: Mn,
-  allNotes: Bn,
+  emptyStateDescription: Ln,
+  emptyStatePrecision: An,
+  nothingHereYet: Dn,
+  adjustFiltersOrCreate: Pn,
+  noNotesForFilter: _n,
+  filter: Fn,
+  previousPage: Mn,
+  nextPage: Bn,
+  allCourses: Un,
+  allNotes: Hn,
   closeNotebookPanel: $n,
-  featureDescription: Hn,
-  highlightUnavailable: Un,
-  notebookNote: Gn
+  featureDescription: Gn,
+  highlightUnavailable: jn,
+  highlightSourceUnavailable: Wn,
+  notebookNote: zn
 }, at = Ve(null);
 function ct(t, e) {
-  const n = Me[t] ?? t;
+  const n = Be[t] ?? t;
   return e ? n.replace(/%\{([^}]+)}/g, (o, r) => String(e[r] ?? `%{${r}}`)) : n;
 }
-function jn({
+function qn({
   translations: t,
   translate: e,
   children: n
 }) {
-  const o = he(() => ({
-    translations: new Proxy(Me, {
+  const o = pe(() => ({
+    translations: new Proxy(Be, {
       get(s, l) {
         return (t == null ? void 0 : t[l]) ?? s[l];
       }
@@ -750,16 +756,16 @@ function jn({
   }), [t, e]);
   return /* @__PURE__ */ i(at.Provider, { value: o, children: n });
 }
-function Z() {
+function J() {
   const t = Qe(at);
-  return t || { translations: Me, translate: ct };
+  return t || { translations: Be, translate: ct };
 }
-const Wn = (t) => ({
+const Kn = (t) => ({
   selectedNoteId: t ?? null,
   isNoteEditing: !1,
   isTrayOpen: t != null
 });
-function zn(t, e) {
+function Xn(t, e) {
   switch (e.type) {
     case "SELECT_NOTE":
       return {
@@ -780,7 +786,7 @@ function zn(t, e) {
   }
 }
 const dt = Ve(null);
-function Co({
+function Ro({
   api: t,
   currentUserId: e,
   objectId: n,
@@ -789,11 +795,11 @@ function Co({
   pageLastModifiedAt: s,
   onOpen: l,
   initialNoteId: a,
-  translations: m,
-  translate: c,
-  children: p
+  translations: f,
+  translate: u,
+  children: m
 }) {
-  const [d, h] = Ye(zn, Wn(a)), E = F(a != null), y = he(
+  const [c, y] = Ye(Xn, Kn(a)), N = F(a != null), h = pe(
     () => ({
       api: t,
       currentUserId: e,
@@ -801,20 +807,20 @@ function Co({
       objectType: o,
       courseId: r,
       pageLastModifiedAt: s,
-      ...d,
-      selectNote: (b, g = !1) => h({ type: "SELECT_NOTE", payload: { id: b, isEditing: g } }),
-      clearSelectedNote: () => h({ type: "CLEAR_SELECTED_NOTE" }),
-      setEditing: (b) => h({ type: "SET_EDITING", payload: b }),
+      ...c,
+      selectNote: (x, p = !1) => y({ type: "SELECT_NOTE", payload: { id: x, isEditing: p } }),
+      clearSelectedNote: () => y({ type: "CLEAR_SELECTED_NOTE" }),
+      setEditing: (x) => y({ type: "SET_EDITING", payload: x }),
       openTray: () => {
-        E.current || (E.current = !0, l == null || l()), h({ type: "OPEN_TRAY" });
+        N.current || (N.current = !0, l == null || l()), y({ type: "OPEN_TRAY" });
       },
       closeTray: () => {
-        E.current = !1, h({ type: "CLOSE_TRAY" });
+        N.current = !1, y({ type: "CLOSE_TRAY" });
       }
     }),
-    [t, e, n, o, r, s, l, d]
+    [t, e, n, o, r, s, l, c]
   );
-  return /* @__PURE__ */ i(dt.Provider, { value: y, children: /* @__PURE__ */ i(jn, { translations: m, translate: c, children: p }) });
+  return /* @__PURE__ */ i(dt.Provider, { value: h, children: /* @__PURE__ */ i(qn, { translations: f, translate: u, children: m }) });
 }
 function ut() {
   const t = Qe(dt);
@@ -822,8 +828,8 @@ function ut() {
     throw new Error("useNotebook must be used within a NotebookProvider");
   return t;
 }
-const ft = "notebook-tray-content", vo = ({ children: t }) => {
-  const { isTrayOpen: e, closeTray: n } = ut(), { translations: o } = Z();
+const ft = "notebook-tray-content", Oo = ({ children: t }) => {
+  const { isTrayOpen: e, closeTray: n } = ut(), { translations: o } = J();
   return /* @__PURE__ */ i(
     Et,
     {
@@ -832,11 +838,11 @@ const ft = "notebook-tray-content", vo = ({ children: t }) => {
       onDismiss: n,
       placement: "end",
       size: "regular",
-      children: /* @__PURE__ */ T(x, { direction: "column", height: "100vh", id: ft, children: [
-        /* @__PURE__ */ i(x.Item, { children: /* @__PURE__ */ i(V, { as: "div", padding: "small medium", borderWidth: "0 0 small 0", children: /* @__PURE__ */ T(x, { justifyItems: "space-between", alignItems: "center", children: [
-          /* @__PURE__ */ i(Se, { level: "h3", children: o.notebook }),
+      children: /* @__PURE__ */ T(I, { direction: "column", height: "100vh", id: ft, children: [
+        /* @__PURE__ */ i(I.Item, { children: /* @__PURE__ */ i(V, { as: "div", padding: "small medium", borderWidth: "0 0 small 0", children: /* @__PURE__ */ T(I, { justifyItems: "space-between", alignItems: "center", children: [
+          /* @__PURE__ */ i(ve, { level: "h3", children: o.notebook }),
           /* @__PURE__ */ i(
-            Nt,
+            bt,
             {
               screenReaderLabel: o.closeNotebookPanel,
               onClick: n,
@@ -845,18 +851,18 @@ const ft = "notebook-tray-content", vo = ({ children: t }) => {
             }
           )
         ] }) }) }),
-        /* @__PURE__ */ i(x.Item, { shouldGrow: !0, shouldShrink: !0, overflowY: "auto", overflowX: "hidden", children: t })
+        /* @__PURE__ */ i(I.Item, { shouldGrow: !0, shouldShrink: !0, overflowY: "auto", overflowX: "hidden", children: t })
       ] })
     }
   );
-}, qn = ({
+}, Vn = ({
   currentType: t,
   disabled: e = !1,
   onSelectReaction: n
 }) => {
-  const { translations: o } = Z(), r = F(null), s = F(null);
-  return W(() => {
-    t === k.CONFUSING && r.current ? r.current.focus() : t === k.IMPORTANT && s.current ? s.current.focus() : r.current && r.current.focus();
+  const { translations: o } = J(), r = F(null), s = F(null);
+  return q(() => {
+    t === L.CONFUSING && r.current ? r.current.focus() : t === L.IMPORTANT && s.current ? s.current.focus() : r.current && r.current.focus();
   }, [t]), /* @__PURE__ */ i(
     V,
     {
@@ -866,27 +872,27 @@ const ft = "notebook-tray-content", vo = ({ children: t }) => {
       borderColor: "secondary",
       borderRadius: "medium",
       shadow: "resting",
-      children: /* @__PURE__ */ T(ue, { children: [
+      children: /* @__PURE__ */ T(fe, { children: [
         /* @__PURE__ */ T(
-          ue.Item,
+          fe.Item,
           {
             ref: r,
             disabled: e,
-            onClick: () => n(k.CONFUSING),
+            onClick: () => n(L.CONFUSING),
             children: [
-              /* @__PURE__ */ i(Le, { size: "x-small" }),
+              /* @__PURE__ */ i(Ae, { size: "x-small" }),
               ` ${o.markUnclear}`
             ]
           }
         ),
         /* @__PURE__ */ T(
-          ue.Item,
+          fe.Item,
           {
             ref: s,
             disabled: e,
-            onClick: () => n(k.IMPORTANT),
+            onClick: () => n(L.IMPORTANT),
             children: [
-              /* @__PURE__ */ i(Ae, { size: "x-small" }),
+              /* @__PURE__ */ i(De, { size: "x-small" }),
               ` ${o.markImportant}`
             ]
           }
@@ -894,8 +900,8 @@ const ft = "notebook-tray-content", vo = ({ children: t }) => {
       ] })
     }
   );
-}, Ie = "notebook-inline-reaction-menu";
-function Io({
+}, xe = "notebook-inline-reaction-menu";
+function wo({
   containerRef: t,
   highlightTheme: e,
   debounceTime: n = 500,
@@ -906,202 +912,202 @@ function Io({
 }) {
   const {
     api: a,
-    objectId: m,
-    objectType: c,
-    courseId: p,
-    pageLastModifiedAt: d,
-    selectedNoteId: h,
-    isTrayOpen: E,
-    selectNote: y,
-    openTray: b
-  } = ut(), { translations: g } = Z(), { data: Q } = lt({
+    objectId: f,
+    objectType: u,
+    courseId: m,
+    pageLastModifiedAt: c,
+    selectedNoteId: y,
+    isTrayOpen: N,
+    selectNote: h,
+    openTray: x
+  } = ut(), { translations: p } = J(), { data: R } = lt({
     api: a,
-    courseId: p,
-    learningObject: { type: c, id: m }
-  }), { mutate: j, isPending: N } = en(a), { mutateAsync: I } = on(a), { mutate: B } = tn(a), D = F([]), [P, S] = G([]), [w, C] = G(null), [$, re] = G(""), [z, ce] = G(null), se = F(null);
-  se.current = z;
-  const le = F(!1), [J, ee] = G(!1);
-  W(() => {
-    const _ = t.current;
-    if (!_) return;
-    const v = _.closest(".user_content") ?? _;
-    if (v.classList.contains("enhanced")) {
-      ee(!0);
+    courseId: m,
+    learningObject: { type: u, id: f }
+  }), { mutate: z, isPending: b } = tn(a), { mutateAsync: S } = rn(a), { mutate: P } = nn(a), D = F([]), [G, E] = W([]), [w, v] = W(null), [j, ee] = W(""), [Q, ae] = W(null), de = F(null);
+  de.current = Q;
+  const te = F(!1), [re, se] = W(!1);
+  q(() => {
+    const M = t.current;
+    if (!M) return;
+    const C = M.closest(".user_content") ?? M;
+    if (C.classList.contains("enhanced")) {
+      se(!0);
       return;
     }
-    const U = new MutationObserver((M) => {
-      for (const L of M)
-        if (L.type === "attributes" && L.attributeName === "class" && L.target.classList.contains("enhanced")) {
-          ee(!0), U.disconnect();
+    const _ = new MutationObserver((B) => {
+      for (const H of B)
+        if (H.type === "attributes" && H.attributeName === "class" && H.target.classList.contains("enhanced")) {
+          se(!0), _.disconnect();
           return;
         }
     });
-    return U.observe(v, { attributes: !0, attributeFilter: ["class"] }), () => U.disconnect();
+    return _.observe(C, { attributes: !0, attributeFilter: ["class"] }), () => _.disconnect();
   }, [t]);
-  const O = K(() => {
-    ce(null), C(null), re("");
+  const A = K(() => {
+    ae(null), v(null), ee("");
   }, []);
-  W(() => {
-    if (!J || !t.current) return;
-    let v = null;
-    const U = () => {
-      v && clearTimeout(v), v = setTimeout(() => {
-        var $e;
-        const R = window.getSelection(), u = t.current;
-        if (!(R != null && R.rangeCount) || !u) return;
-        const H = R.toString().trim();
-        if (H === "") return;
-        const q = R.getRangeAt(0);
-        if (!u.contains(q.commonAncestorContainer)) return;
-        const Be = ($e = ie.fromRange(u, q)) == null ? void 0 : $e.toSelector();
-        Be && !jt(Be, P) && (C(q.cloneRange()), re(H), ce(Gt(q)));
+  q(() => {
+    if (!re || !t.current) return;
+    let C = null;
+    const _ = () => {
+      C && clearTimeout(C), C = setTimeout(() => {
+        var Ue;
+        const O = window.getSelection(), U = t.current;
+        if (!(O != null && O.rangeCount) || !U) return;
+        const g = O.toString().trim();
+        if (g === "") return;
+        const $ = O.getRangeAt(0);
+        if (!U.contains($.commonAncestorContainer)) return;
+        const ie = (Ue = le.fromRange(U, $)) == null ? void 0 : Ue.toSelector();
+        ie && !Wt(ie, G) && (v($.cloneRange()), ee(g), ae(jt($)));
       }, n);
-    }, M = (R) => {
-      if (!(R.target instanceof Node)) return;
-      const u = document.getElementById(Ie);
-      u != null && u.contains(R.target) ? (R.preventDefault(), R.stopImmediatePropagation()) : O();
-    }, L = () => {
-      O();
-    }, A = (R) => {
-      R.key === "Escape" && se.current !== null && (O(), R.stopImmediatePropagation());
+    }, B = (O) => {
+      if (!(O.target instanceof Node)) return;
+      const U = document.getElementById(xe);
+      U != null && U.contains(O.target) ? (O.preventDefault(), O.stopImmediatePropagation()) : A();
+    }, H = () => {
+      A();
+    }, k = (O) => {
+      O.key === "Escape" && de.current !== null && (A(), O.stopImmediatePropagation());
     };
-    return document.addEventListener("selectionchange", U), document.addEventListener("mousedown", M), document.addEventListener("touchstart", M), document.addEventListener("keydown", A), window.addEventListener("scroll", L, !0), () => {
-      v && clearTimeout(v), document.removeEventListener("selectionchange", U), document.removeEventListener("mousedown", M), document.removeEventListener("touchstart", M), document.removeEventListener("keydown", A), window.removeEventListener("scroll", L, !0);
+    return document.addEventListener("selectionchange", _), document.addEventListener("mousedown", B), document.addEventListener("touchstart", B), document.addEventListener("keydown", k), window.addEventListener("scroll", H, !0), () => {
+      C && clearTimeout(C), document.removeEventListener("selectionchange", _), document.removeEventListener("mousedown", B), document.removeEventListener("touchstart", B), document.removeEventListener("keydown", k), window.removeEventListener("scroll", H, !0);
     };
-  }, [J, P, n, t, O]);
+  }, [re, G, n, t, A]);
   const Y = K(
-    (_) => {
-      var u;
-      const v = t.current;
-      if (!v || !_.highlightData) return null;
-      const { highlightData: U, reaction: M, id: L } = _, { range: A } = U, R = A && ((u = ae.fromSelector(v, A)) == null ? void 0 : u.toRange());
-      if (R) {
-        const H = M[0] === k.IMPORTANT ? g.important : g.unclear, q = {
-          id: L,
-          selectedNoteId: h,
-          type: M[0],
-          isTrayOpen: E,
-          labelPrefix: `${g.notebookNote} (${H})`,
+    (M) => {
+      var U;
+      const C = t.current;
+      if (!C || !M.highlightData) return null;
+      const { highlightData: _, reaction: B, id: H } = M, { range: k } = _, O = k && ((U = ce.fromSelector(C, k)) == null ? void 0 : U.toRange());
+      if (O) {
+        const g = B[0] === L.IMPORTANT ? p.important : p.unclear, $ = {
+          id: H,
+          selectedNoteId: y,
+          type: B[0],
+          isTrayOpen: N,
+          labelPrefix: `${p.notebookNote} (${g})`,
           popupId: ft,
           onClick: () => {
-            y(L), b();
+            h(H), x();
           }
         };
-        return Yt(R, q, e), U.textPosition;
+        return Zt(O, $, e), _.textPosition;
       }
       return null;
     },
-    [t, h, E, e, g, y, b]
+    [t, y, N, e, p, h, x]
   );
-  W(() => {
-    if (!J || !Q || !t.current) return;
-    const _ = t.current, v = Q.notes, U = /* @__PURE__ */ new Set(), M = [], L = [];
-    if (v.length === 0) {
+  q(() => {
+    if (!re || !R || !t.current) return;
+    const M = t.current, C = R.notes, _ = /* @__PURE__ */ new Set(), B = [], H = [];
+    if (C.length === 0) {
       if (D.current.length > 0) {
-        for (const A of D.current)
-          ze(A, _);
-        D.current = [], S([]);
+        for (const k of D.current)
+          ze(k, M);
+        D.current = [], E([]);
       }
       return;
     }
-    if (d && v[0].highlightData.pageLastModifiedAt !== d) {
-      const { notesForUpdate: A, noteIdsForDelete: R } = Ht(
-        _,
-        v,
-        d
+    if (c && C[0].highlightData.pageLastModifiedAt !== c) {
+      const { notesForUpdate: k, noteIdsForDelete: O } = $t(
+        M,
+        C,
+        c
       );
-      for (const u of A)
-        I({ id: u.id, input: u }).catch((H) => r == null ? void 0 : r(H));
-      for (const u of R)
-        B(u, { onError: s });
+      for (const U of k)
+        S({ id: U.id, input: U }).catch((g) => r == null ? void 0 : r(g));
+      for (const U of O)
+        P(U, { onError: s });
     } else {
-      for (const A of v) {
-        const R = Y(A);
-        U.add(A.id), R && (M.push(A), L.push(R));
+      for (const k of C) {
+        const O = Y(k);
+        _.add(k.id), O && (B.push(k), H.push(O));
       }
-      for (const A of D.current)
-        U.has(A.id) || ze(A, _);
-      S(L), D.current = M, h && Ut(h);
+      for (const k of D.current)
+        _.has(k.id) || ze(k, M);
+      E(H), D.current = B, y && Gt(y);
     }
   }, [
-    J,
-    Q,
+    re,
+    R,
     Y,
-    d,
+    c,
     t,
-    I,
-    B,
-    h
+    S,
+    P,
+    y
   ]);
-  const de = (_) => {
-    const v = t.current;
-    if (!w || !v || le.current) return;
-    le.current = !0;
-    const U = ae.fromRange(v, w), M = ie.fromRange(v, w);
-    j(
+  const ue = (M) => {
+    const C = t.current;
+    if (!w || !C || te.current) return;
+    te.current = !0;
+    const _ = ce.fromRange(C, w), B = le.fromRange(C, w);
+    z(
       {
-        courseId: p,
-        objectId: m,
-        objectType: c,
+        courseId: m,
+        objectId: f,
+        objectType: u,
         userText: "",
-        reaction: [_],
+        reaction: [M],
         highlightData: {
-          selectedText: $,
-          textPosition: (M == null ? void 0 : M.toSelector()) ?? null,
-          range: U.toSelector(),
-          pageLastModifiedAt: d ?? ""
+          selectedText: j,
+          textPosition: (B == null ? void 0 : B.toSelector()) ?? null,
+          range: _.toSelector(),
+          pageLastModifiedAt: c ?? ""
         }
       },
       {
-        onSuccess: (L) => {
-          var R;
-          const A = L.id;
-          O(), (R = window.getSelection()) == null || R.removeAllRanges(), y(A), b(), l == null || l(L);
+        onSuccess: (H) => {
+          var O;
+          const k = H.id;
+          A(), (O = window.getSelection()) == null || O.removeAllRanges(), h(k), x(), l == null || l(H);
         },
         onError: o,
         // Unlock on failure too, so the user can retry from the still-open menu
         onSettled: () => {
-          le.current = !1;
+          te.current = !1;
         }
       }
     );
   };
-  return !w || !z ? null : ht(
+  return !w || !Q ? null : pt(
     /* @__PURE__ */ i(
       "div",
       {
-        id: Ie,
+        id: xe,
         role: "toolbar",
         style: {
           position: "fixed",
           zIndex: 100,
-          top: z.top,
-          left: z.left,
+          top: Q.top,
+          left: Q.left,
           whiteSpace: "nowrap"
         },
-        onBlur: (_) => {
-          const v = document.getElementById(Ie);
-          v != null && v.contains(_.relatedTarget) || O();
+        onBlur: (M) => {
+          const C = document.getElementById(xe);
+          C != null && C.contains(M.relatedTarget) || A();
         },
-        children: /* @__PURE__ */ i(qn, { onSelectReaction: de, disabled: N })
+        children: /* @__PURE__ */ i(Vn, { onSelectReaction: ue, disabled: b })
       }
     ),
     document.body
   );
 }
-const Kn = (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"
+const Qn = (t, e) => ({
+  backgroundColor: t === L.IMPORTANT ? e.colors.importantBackground : e.colors.confusingBackground,
+  underlineColor: t === L.IMPORTANT ? e.colors.importantUnderline : e.colors.confusingUnderline,
+  underlineStyle: t === L.IMPORTANT ? "solid" : "dashed"
 }), we = ({
   children: t,
-  type: e = k.IMPORTANT,
+  type: e = L.IMPORTANT,
   isCardActive: n = !0,
   theme: o
 }) => {
-  const r = Kn(e, o), l = {
+  const r = Qn(e, o), l = {
     position: "relative",
-    backgroundColor: n ? r.backgroundColor : Fe(r.backgroundColor, 0.5),
+    backgroundColor: n ? r.backgroundColor : Me(r.backgroundColor, 0.5),
     textDecorationLine: "underline",
     textDecorationStyle: r.underlineStyle,
     textDecorationColor: r.underlineColor,
@@ -1110,13 +1116,17 @@ const Kn = (t, e) => ({
     lineHeight: "normal"
   };
   return /* @__PURE__ */ i("span", { "data-note-highlight": "true", style: l, children: t });
-}, mt = () => {
-  const { translations: t } = Z();
-  return /* @__PURE__ */ T(x, { gap: "xx-small", alignItems: "start", as: "div", children: [
-    /* @__PURE__ */ i(x.Item, { as: "div", children: /* @__PURE__ */ i(bt, { color: "error" }) }),
-    /* @__PURE__ */ i(x.Item, { padding: "xxx-small none", shouldShrink: !0, children: /* @__PURE__ */ i(be, { maxLines: 3, children: t.highlightUnavailable }) })
+};
+function mt(t, e = "noHighlight") {
+  return e === "sourceUnavailable" ? t.highlightSourceUnavailable : t.highlightUnavailable;
+}
+const gt = ({ reason: t } = {}) => {
+  const { translations: e } = J();
+  return /* @__PURE__ */ T(I, { gap: "xx-small", alignItems: "start", as: "div", children: [
+    /* @__PURE__ */ i(I.Item, { as: "div", children: /* @__PURE__ */ i(Tt, { color: "error" }) }),
+    /* @__PURE__ */ i(I.Item, { padding: "xxx-small none", shouldShrink: !0, children: /* @__PURE__ */ i(Te, { maxLines: 3, children: mt(e, t) }) })
   ] });
-}, Xn = {
+}, Yn = {
   filter: null,
   courseFilter: null,
   currentPage: 1,
@@ -1126,7 +1136,7 @@ function Ee(t, e) {
   const n = typeof e == "number" ? Math.min(e, t) : t;
   return Math.max(1, n);
 }
-function Vn(t, e) {
+function Zn(t, e) {
   switch (e.type) {
     case "SET_FILTER":
       return { ...t, filter: e.payload, currentPage: 1 };
@@ -1150,7 +1160,7 @@ function Vn(t, e) {
       return t;
   }
 }
-function xo({
+function ko({
   api: t,
   courseId: e,
   enableCourseFilter: n = !1,
@@ -1158,109 +1168,109 @@ function xo({
   pageSize: r = 16,
   focusNoteId: s
 }) {
-  var ee;
-  const [l, a] = Ye(Vn, Xn), { filter: m, courseFilter: c, currentPage: p, totalPages: d } = l;
-  W(() => {
+  var se;
+  const [l, a] = Ye(Zn, Yn), { filter: f, courseFilter: u, currentPage: m, totalPages: c } = l;
+  q(() => {
     a({ type: "SET_PAGE", payload: 1 });
   }, [r]);
-  const h = n ? c : e, E = (p - 1) * r, y = !!o, b = {
-    ...h ? { courseId: h } : {},
-    ...m ? { reactions: [m] } : {},
+  const y = n ? u : e, N = (m - 1) * r, h = !!o, x = {
+    ...y ? { courseId: y } : {},
+    ...f ? { reactions: [f] } : {},
     ...o ? { learningObject: o } : {}
   }, {
-    data: g,
-    isLoading: Q,
-    isError: j
+    data: p,
+    isLoading: R,
+    isError: z
   } = it({
     api: t,
-    filter: b,
-    offset: E,
+    filter: x,
+    offset: N,
     pageSize: r,
-    enabled: !y
+    enabled: !h
   }), {
-    data: N,
-    isLoading: I,
-    isError: B
+    data: b,
+    isLoading: S,
+    isError: P
   } = lt({
     api: t,
-    courseId: h ?? void 0,
+    courseId: y ?? void 0,
     learningObject: o,
-    enabled: y
-  }), D = he(() => {
-    const O = (N == null ? void 0 : N.notes) ?? [];
-    return m ? O.filter((Y) => Y.reaction.includes(m)) : O;
-  }, [N, m]), P = F(null);
-  W(() => {
+    enabled: h
+  }), D = pe(() => {
+    const A = (b == null ? void 0 : b.notes) ?? [];
+    return f ? A.filter((Y) => Y.reaction.includes(f)) : A;
+  }, [b, f]), G = F(null);
+  q(() => {
     if (!s) {
-      P.current = null;
+      G.current = null;
       return;
     }
-    if (P.current === s) return;
-    const O = D.findIndex((de) => de.id === s);
-    if (O === -1) return;
-    P.current = s;
-    const Y = Math.floor(O / r) + 1;
-    Y !== p && a({ type: "FOCUS_PAGE", payload: Y });
-  }, [s, D, r, p]);
-  const S = y ? D.slice(E, E + r) : (g == null ? void 0 : g.notes) ?? [], w = y ? I : Q, C = y ? B : j, $ = y ? Math.max(1, Math.ceil(D.length / r)) : ((ee = g == null ? void 0 : g.pageInfo) == null ? void 0 : ee.totalNrOfPages) ?? void 0, re = y ? { totalCount: D.length, totalNrOfPages: $ } : g == null ? void 0 : g.pageInfo;
-  W(() => {
-    a({ type: "SET_TOTAL_PAGES", payload: $ });
-  }, [$]);
-  const z = K((O) => {
-    a({ type: "SET_PAGE", payload: O });
-  }, []), ce = K(() => {
+    if (G.current === s) return;
+    const A = D.findIndex((ue) => ue.id === s);
+    if (A === -1) return;
+    G.current = s;
+    const Y = Math.floor(A / r) + 1;
+    Y !== m && a({ type: "FOCUS_PAGE", payload: Y });
+  }, [s, D, r, m]);
+  const E = h ? D.slice(N, N + r) : (p == null ? void 0 : p.notes) ?? [], w = h ? S : R, v = h ? P : z, j = h ? Math.max(1, Math.ceil(D.length / r)) : ((se = p == null ? void 0 : p.pageInfo) == null ? void 0 : se.totalNrOfPages) ?? void 0, ee = h ? { totalCount: D.length, totalNrOfPages: j } : p == null ? void 0 : p.pageInfo;
+  q(() => {
+    a({ type: "SET_TOTAL_PAGES", payload: j });
+  }, [j]);
+  const Q = K((A) => {
+    a({ type: "SET_PAGE", payload: A });
+  }, []), ae = K(() => {
     a({
       type: "INCREMENT_PAGE"
       /* IncrementPage */
     });
-  }, []), se = K(() => {
+  }, []), de = K(() => {
     a({
       type: "DECREMENT_PAGE"
       /* DecrementPage */
     });
-  }, []), le = K((O) => {
-    a({ type: "SET_FILTER", payload: O });
-  }, []), J = K((O) => {
-    a({ type: "SET_COURSE_FILTER", payload: O });
+  }, []), te = K((A) => {
+    a({ type: "SET_FILTER", payload: A });
+  }, []), re = K((A) => {
+    a({ type: "SET_COURSE_FILTER", payload: A });
   }, []);
   return {
-    notes: S,
-    pageInfo: re,
+    notes: E,
+    pageInfo: ee,
     isLoading: w,
-    isError: C,
-    filter: m,
-    courseFilter: c,
-    currentPage: p,
-    totalPages: d,
-    setFilter: le,
-    setCourseFilter: J,
-    setPage: z,
-    fetchNextPage: ce,
-    fetchPreviousPage: se
+    isError: v,
+    filter: f,
+    courseFilter: u,
+    currentPage: m,
+    totalPages: c,
+    setFilter: te,
+    setCourseFilter: re,
+    setPage: Q,
+    fetchNextPage: ae,
+    fetchPreviousPage: de
   };
 }
-const xe = "all";
-function Ro({ filter: t, setFilter: e }) {
-  const { translations: n } = Z(), o = he(
+const Re = "all";
+function Lo({ filter: t, setFilter: e }) {
+  const { translations: n } = J(), o = pe(
     () => [
-      { label: n.allNotes, value: xe },
-      { label: n.important, value: k.IMPORTANT },
-      { label: n.unclear, value: k.CONFUSING }
+      { label: n.allNotes, value: Re },
+      { label: n.important, value: L.IMPORTANT },
+      { label: n.unclear, value: L.CONFUSING }
     ],
     [n]
   ), r = K(
     (l, { value: a }) => {
-      e(!a || a === xe ? null : a);
+      e(!a || a === Re ? null : a);
     },
     [e]
   );
   return {
-    filterElement: he(
+    filterElement: pe(
       () => /* @__PURE__ */ i(
         He,
         {
           renderLabel: n.filter,
-          value: t ?? xe,
+          value: t ?? Re,
           onChange: r,
           children: o.map((l) => /* @__PURE__ */ i(He.Option, { id: l.value, value: l.value, children: l.label }, l.value))
         }
@@ -1271,73 +1281,85 @@ function Ro({ filter: t, setFilter: e }) {
     handleReactionFilterChange: r
   };
 }
-const Qn = ({ hasActiveFilter: t = !1 }) => {
-  const { translations: e } = Z(), n = t ? e.nothingHereYet : e.emptyStateHeading, o = t ? e.adjustFiltersOrCreate : e.emptyStateDescription;
-  return /* @__PURE__ */ i(V, { as: "div", textAlign: "center", children: /* @__PURE__ */ T(x, { direction: "column", alignItems: "center", gap: "small", children: [
-    !t && /* @__PURE__ */ i(Tt, { size: "medium" }),
-    /* @__PURE__ */ i(Se, { level: "h3", children: n }),
-    /* @__PURE__ */ i(te, { color: "secondary", children: o })
+const Jn = ({ hasActiveFilter: t = !1 }) => {
+  const { translations: e } = J(), n = t ? e.nothingHereYet : e.emptyStateHeading, o = t ? e.adjustFiltersOrCreate : e.emptyStateDescription;
+  return /* @__PURE__ */ i(V, { as: "div", textAlign: "center", children: /* @__PURE__ */ T(I, { direction: "column", alignItems: "center", gap: "small", children: [
+    !t && /* @__PURE__ */ i(St, { size: "medium" }),
+    /* @__PURE__ */ i(ve, { level: "h3", children: n }),
+    /* @__PURE__ */ i(Z, { color: "secondary", children: o }),
+    !t && /* @__PURE__ */ i(Z, { color: "secondary", children: e.emptyStatePrecision })
   ] }) });
-}, Yn = {
-  [k.IMPORTANT]: {
+}, eo = "#2871AF", to = (t) => ({
+  [L.IMPORTANT]: {
     color: "success",
+    themeOverride: {
+      successTextColor: t,
+      successBorderColor: t
+    },
     translationKey: "important",
-    icon: /* @__PURE__ */ i(Ae, { size: "x-small" })
+    icon: /* @__PURE__ */ i(De, { size: "x-small" })
   },
-  [k.CONFUSING]: {
+  [L.CONFUSING]: {
     color: "error",
+    themeOverride: void 0,
     translationKey: "unclear",
-    icon: /* @__PURE__ */ i(Le, { size: "x-small" })
+    icon: /* @__PURE__ */ i(Ae, { size: "x-small" })
   }
-}, gt = ({ type: t, onTypeChange: e, renderAsMenuTrigger: n = !1 }) => {
-  const { translations: o } = Z(), r = Yn[t], s = o[r.translationKey], [l, a] = G(!1), m = F(null), c = F(null), p = F(null), d = K(
+}), ht = ({
+  type: t,
+  onTypeChange: e,
+  renderAsMenuTrigger: n = !1,
+  theme: o
+}) => {
+  const { translations: r } = J(), l = to((o == null ? void 0 : o.importantPill) ?? eo)[t], a = r[l.translationKey], [f, u] = W(!1), m = F(null), c = F(null), y = F(null), N = K(
     (h) => {
-      e == null || e(h), a(!1);
+      e == null || e(h), u(!1);
     },
     [e]
   );
-  return W(() => {
-    if (!l) return;
-    const h = (y) => {
-      y.key === "Escape" && y.stopPropagation();
-    }, E = (y) => {
-      var b;
-      y.key === "Escape" && (y.stopPropagation(), a(!1), (b = p.current) == null || b.focus());
+  return q(() => {
+    if (!f) return;
+    const h = (p) => {
+      p.key === "Escape" && p.stopPropagation();
+    }, x = (p) => {
+      var R;
+      p.key === "Escape" && (p.stopPropagation(), u(!1), (R = y.current) == null || R.focus());
     };
-    return document.addEventListener("keydown", h, !0), document.addEventListener("keyup", E, !0), () => {
-      document.removeEventListener("keydown", h, !0), document.removeEventListener("keyup", E, !0);
+    return document.addEventListener("keydown", h, !0), document.addEventListener("keyup", x, !0), () => {
+      document.removeEventListener("keydown", h, !0), document.removeEventListener("keyup", x, !0);
     };
-  }, [l]), n && e ? /* @__PURE__ */ T(
-    ue,
+  }, [f]), n && e ? /* @__PURE__ */ T(
+    fe,
     {
       placement: "bottom start",
-      show: l,
-      onToggle: (h) => a(h),
+      show: f,
+      onToggle: (h) => u(h),
       shouldHideOnSelect: !0,
       shouldFocusTriggerOnClose: !0,
       trigger: /* @__PURE__ */ i(
-        Ue,
+        $e,
         {
-          color: r.color,
-          renderIcon: r.icon,
+          color: l.color,
+          themeOverride: l.themeOverride,
+          renderIcon: l.icon,
           elementRef: (h) => {
-            p.current = h;
+            y.current = h;
           },
-          children: s
+          children: a
         }
       ),
       children: [
-        /* @__PURE__ */ T(ue.Item, { ref: m, onClick: () => d(k.CONFUSING), children: [
-          /* @__PURE__ */ i(Le, { size: "x-small" }),
-          ` ${o.markUnclear}`
-        ] }),
-        /* @__PURE__ */ T(ue.Item, { ref: c, onClick: () => d(k.IMPORTANT), children: [
+        /* @__PURE__ */ T(fe.Item, { ref: m, onClick: () => N(L.CONFUSING), children: [
           /* @__PURE__ */ i(Ae, { size: "x-small" }),
-          ` ${o.markImportant}`
+          ` ${r.markUnclear}`
+        ] }),
+        /* @__PURE__ */ T(fe.Item, { ref: c, onClick: () => N(L.IMPORTANT), children: [
+          /* @__PURE__ */ i(De, { size: "x-small" }),
+          ` ${r.markImportant}`
         ] })
       ]
     }
-  ) : /* @__PURE__ */ i(V, { display: "inline-flex", children: /* @__PURE__ */ i(Ue, { color: r.color, renderIcon: r.icon, children: s }) });
+  ) : /* @__PURE__ */ i(V, { display: "inline-flex", children: /* @__PURE__ */ i($e, { color: l.color, themeOverride: l.themeOverride, renderIcon: l.icon, children: a }) });
 };
 function Ke(t, e) {
   return (t instanceof Date ? t : new Date(t)).toLocaleString(e, {
@@ -1346,59 +1368,62 @@ function Ke(t, e) {
     day: "numeric"
   });
 }
-const Zn = ({
+const no = ({
   noteId: t,
   date: e,
   highlight: n,
-  note: o,
-  type: r,
-  onClick: s,
-  onDelete: l,
-  onSaveNote: a,
-  onTypeChange: m,
-  isActive: c,
-  isPanelView: p = !1,
-  courseName: d,
-  locale: h,
-  highlightTheme: E,
-  renderLink: y,
-  href: b
+  highlightUnavailableReason: o,
+  note: r,
+  type: s,
+  onClick: l,
+  onDelete: a,
+  onSaveNote: f,
+  onTypeChange: u,
+  isActive: m,
+  isPanelView: c = !1,
+  courseName: y,
+  locale: N,
+  highlightTheme: h,
+  renderLink: x,
+  href: p
 }) => {
-  const { translations: g } = Z(), [Q, j] = G(!1), [N, I] = G(!1), [B, D] = G(o || ""), [P, S] = G(!1), [w, C] = G(!1), [$, re] = G(!1), [z, ce] = G(!1), se = F(null), le = K((u) => {
-    se.current = u;
-  }, []), J = F(null), ee = F(null), O = F(!1), Y = F(null), de = F(null), _ = F(!1);
-  W(() => {
-    var u, H;
-    c ? ((u = se.current) == null || u.scrollIntoView({ behavior: "smooth", block: "nearest" }), (H = se.current) == null || H.focus()) : S(!1);
-  }, [c]), W(() => {
-    var u, H;
-    N ? (O.current = !0, (u = J.current) == null || u.focus()) : O.current && (O.current = !1, (H = ee.current) == null || H.focus());
-  }, [N]), W(() => {
-    if (!P && _.current) {
-      _.current = !1;
-      const u = Y.current;
-      u != null && u.isConnected && u.focus();
+  const { translations: R } = J(), [z, b] = W(!1), [S, P] = W(!1), [D, G] = W(r || ""), [E, w] = W(!1), [v, j] = W(!1), [ee, Q] = W(!1), [ae, de] = W(!1), te = F(null), re = K((g) => {
+    te.current = g;
+  }, []), se = F(null), A = F(null), Y = F(!1), ue = F(null), M = F(null), C = F(!1);
+  q(() => {
+    var g, $;
+    m ? ((g = te.current) == null || g.scrollIntoView({ behavior: "smooth", block: "nearest" }), ($ = te.current) == null || $.focus()) : w(!1);
+  }, [m]), q(() => {
+    var g, $;
+    S ? (Y.current = !0, (g = se.current) == null || g.focus()) : Y.current && (Y.current = !1, ($ = A.current) == null || $.focus());
+  }, [S]), q(() => {
+    if (!E && C.current) {
+      C.current = !1;
+      const g = ue.current;
+      g != null && g.isConnected && g.focus();
     }
-  }, [P]);
-  const v = K((u, H) => {
-    _.current = !H, S(!1);
+  }, [E]);
+  const _ = K((g, $) => {
+    C.current = !$, w(!1);
   }, []);
-  W(() => {
-    if (!P) return;
-    const u = (q) => {
-      q.key === "Escape" && q.stopPropagation();
-    }, H = (q) => {
-      q.key === "Escape" && (q.stopPropagation(), v());
+  q(() => {
+    if (!E) return;
+    const g = (ie) => {
+      ie.key === "Escape" && ie.stopPropagation();
+    }, $ = (ie) => {
+      ie.key === "Escape" && (ie.stopPropagation(), _());
     };
-    return window.addEventListener("keydown", u, !0), window.addEventListener("keyup", H, !0), () => {
-      window.removeEventListener("keydown", u, !0), window.removeEventListener("keyup", H, !0);
+    return window.addEventListener("keydown", g, !0), window.addEventListener("keyup", $, !0), () => {
+      window.removeEventListener("keydown", g, !0), window.removeEventListener("keyup", $, !0);
     };
-  }, [P, v]);
-  const U = r === k.IMPORTANT ? g.important : g.unclear, M = (u) => {
-    u.key === "Enter" && (u.preventDefault(), s == null || s());
-  }, L = [g.note, U];
-  L.push(n || g.highlightUnavailable), o && L.push(o), e && L.push(Ke(e, h)), d && L.push(d);
-  const A = L.join(", "), R = /* @__PURE__ */ T(
+  }, [E, _]);
+  const B = s === L.IMPORTANT ? R.important : R.unclear, H = (g) => {
+    g.key === "Enter" && (g.preventDefault(), l == null || l());
+  }, k = [R.note, B];
+  k.push(
+    n || mt(R, o)
+  ), r && k.push(r), e && k.push(Ke(e, N)), y && k.push(y);
+  const O = k.join(", "), U = /* @__PURE__ */ T(
     V,
     {
       as: "div",
@@ -1407,17 +1432,17 @@ const Zn = ({
       borderRadius: "medium",
       padding: "small",
       position: "relative",
-      role: b ? void 0 : c || N ? "group" : "button",
-      "aria-label": b ? void 0 : A,
-      "aria-pressed": b || c || N ? void 0 : c,
-      tabIndex: b || c ? -1 : 0,
+      role: p ? void 0 : m || S ? "group" : "button",
+      "aria-label": p ? void 0 : O,
+      "aria-pressed": p || m || S ? void 0 : m,
+      tabIndex: p || m ? -1 : 0,
       "data-testid": `note-card-${t}`,
-      elementRef: le,
-      onClick: c ? void 0 : s,
-      onMouseEnter: () => j(!0),
-      onMouseLeave: () => j(!1),
-      onKeyDown: c ? void 0 : M,
-      cursor: N ? "default" : "pointer",
+      elementRef: re,
+      onClick: m ? void 0 : l,
+      onMouseEnter: () => b(!0),
+      onMouseLeave: () => b(!1),
+      onKeyDown: m ? void 0 : H,
+      cursor: S ? "default" : "pointer",
       children: [
         /* @__PURE__ */ i(
           "div",
@@ -1425,15 +1450,16 @@ const Zn = ({
             "data-testid": `note-card-${t}-content`,
             style: {
               height: "100%",
-              opacity: c && P && l ? 0.25 : void 0
+              opacity: m && E && a ? 0.25 : void 0
             },
-            children: /* @__PURE__ */ T(x, { direction: "column", gap: "small", height: "100%", children: [
+            children: /* @__PURE__ */ T(I, { direction: "column", gap: "small", height: "100%", children: [
               /* @__PURE__ */ i(
-                gt,
+                ht,
                 {
-                  type: r,
-                  onTypeChange: p && m ? (u) => m(t, u) : void 0,
-                  renderAsMenuTrigger: p && !!m && !!c
+                  type: s,
+                  onTypeChange: c && u ? (g) => u(t, g) : void 0,
+                  renderAsMenuTrigger: c && !!u && !!m,
+                  theme: h.colors
                 }
               ),
               n ? /* @__PURE__ */ i(
@@ -1444,56 +1470,56 @@ const Zn = ({
                     overflowWrap: "break-word",
                     whiteSpace: "pre-wrap"
                   },
-                  children: /* @__PURE__ */ i(te, { children: c && p ? /* @__PURE__ */ i(
+                  children: /* @__PURE__ */ i(Z, { children: m && c ? /* @__PURE__ */ i(
                     we,
                     {
-                      type: r,
-                      isCardActive: !!c || Q,
-                      theme: E,
+                      type: s,
+                      isCardActive: !!m || z,
+                      theme: h,
                       children: n
                     }
                   ) : /* @__PURE__ */ T(Xe, { children: [
-                    w && /* @__PURE__ */ i(pe, { children: n }),
-                    /* @__PURE__ */ i("span", { "aria-hidden": w, style: { display: "block" }, children: /* @__PURE__ */ i(be, { maxLines: 3, truncate: "word", onUpdate: C, children: /* @__PURE__ */ i(
+                    v && /* @__PURE__ */ i(ye, { children: n }),
+                    /* @__PURE__ */ i("span", { "aria-hidden": v, style: { display: "block" }, children: /* @__PURE__ */ i(Te, { maxLines: 3, truncate: "word", onUpdate: j, children: /* @__PURE__ */ i(
                       we,
                       {
-                        type: r,
-                        isCardActive: !!c || Q,
-                        theme: E,
+                        type: s,
+                        isCardActive: !!m || z,
+                        theme: h,
                         children: n
                       }
                     ) }) })
                   ] }) })
                 }
-              ) : /* @__PURE__ */ i(mt, {}),
-              /* @__PURE__ */ i(x.Item, { shouldGrow: !0, children: /* @__PURE__ */ T(x, { direction: "column", gap: "small", height: "100%", children: [
-                N && p ? /* @__PURE__ */ T(x, { direction: "column", gap: "x-small", margin: "xx-small", children: [
+              ) : /* @__PURE__ */ i(gt, { reason: o }),
+              /* @__PURE__ */ i(I.Item, { shouldGrow: !0, children: /* @__PURE__ */ T(I, { direction: "column", gap: "small", height: "100%", children: [
+                S && c ? /* @__PURE__ */ T(I, { direction: "column", gap: "x-small", margin: "xx-small", children: [
                   /* @__PURE__ */ i(
                     Ze,
                     {
-                      label: /* @__PURE__ */ i(pe, { children: g.editNote }),
-                      value: B,
-                      onChange: (u) => D(u.target.value),
-                      placeholder: g.addNoteOptional,
-                      textareaRef: (u) => {
-                        J.current = u;
+                      label: /* @__PURE__ */ i(ye, { children: R.editNote }),
+                      value: D,
+                      onChange: (g) => G(g.target.value),
+                      placeholder: R.addNoteOptional,
+                      textareaRef: (g) => {
+                        se.current = g;
                       }
                     }
                   ),
-                  /* @__PURE__ */ T(x, { gap: "xx-small", children: [
-                    /* @__PURE__ */ i(x.Item, { shouldGrow: !0, children: /* @__PURE__ */ i(
+                  /* @__PURE__ */ T(I, { gap: "xx-small", children: [
+                    /* @__PURE__ */ i(I.Item, { shouldGrow: !0, children: /* @__PURE__ */ i(
                       ne,
                       {
                         display: "block",
                         size: "small",
                         "data-testid": `note-card-${t}-cancel`,
                         onClick: () => {
-                          D(o || ""), I(!1);
+                          G(r || ""), P(!1);
                         },
-                        children: g.cancel
+                        children: R.cancel
                       }
                     ) }),
-                    /* @__PURE__ */ i(x.Item, { shouldGrow: !0, children: /* @__PURE__ */ i(
+                    /* @__PURE__ */ i(I.Item, { shouldGrow: !0, children: /* @__PURE__ */ i(
                       ne,
                       {
                         display: "block",
@@ -1501,13 +1527,13 @@ const Zn = ({
                         size: "small",
                         "data-testid": `note-card-${t}-save`,
                         onClick: () => {
-                          a == null || a(t, B.trim()), I(!1);
+                          f == null || f(t, D.trim()), P(!1);
                         },
-                        children: g.save
+                        children: R.save
                       }
                     ) })
                   ] })
-                ] }) : o ? /* @__PURE__ */ i(
+                ] }) : r ? /* @__PURE__ */ i(
                   "div",
                   {
                     style: {
@@ -1515,86 +1541,86 @@ const Zn = ({
                       overflowWrap: "break-word",
                       whiteSpace: "pre-wrap"
                     },
-                    children: c && p ? /* @__PURE__ */ T(te, { children: [
-                      o,
+                    children: m && c ? /* @__PURE__ */ T(Z, { children: [
+                      r,
                       " ",
                       /* @__PURE__ */ i(
-                        me,
+                        ge,
                         {
                           size: "small",
                           withBackground: !1,
                           withBorder: !1,
                           margin: "xx-small 0 0 xxx-small",
-                          screenReaderLabel: g.editNote,
+                          screenReaderLabel: R.editNote,
                           "data-testid": `note-card-${t}-edit`,
-                          elementRef: (u) => {
-                            ee.current = u;
+                          elementRef: (g) => {
+                            A.current = g;
                           },
-                          onClick: (u) => {
-                            u.stopPropagation(), I(!0);
+                          onClick: (g) => {
+                            g.stopPropagation(), P(!0);
                           },
-                          children: /* @__PURE__ */ i(Re, {})
+                          children: /* @__PURE__ */ i(Oe, {})
                         }
                       )
-                    ] }) : /* @__PURE__ */ T(te, { children: [
-                      $ && /* @__PURE__ */ i(pe, { children: o }),
-                      /* @__PURE__ */ i("span", { "aria-hidden": $, style: { display: "block" }, children: /* @__PURE__ */ i(be, { maxLines: 3, truncate: "word", onUpdate: re, children: o }) })
+                    ] }) : /* @__PURE__ */ T(Z, { children: [
+                      ee && /* @__PURE__ */ i(ye, { children: r }),
+                      /* @__PURE__ */ i("span", { "aria-hidden": ee, style: { display: "block" }, children: /* @__PURE__ */ i(Te, { maxLines: 3, truncate: "word", onUpdate: Q, children: r }) })
                     ] })
                   }
-                ) : p && c ? /* @__PURE__ */ i("div", { children: /* @__PURE__ */ T(te, { color: "secondary", children: [
-                  g.addNotePrompt,
+                ) : c && m ? /* @__PURE__ */ i("div", { children: /* @__PURE__ */ T(Z, { color: "secondary", children: [
+                  R.addNotePrompt,
                   " ",
                   /* @__PURE__ */ i(
-                    me,
+                    ge,
                     {
                       size: "small",
                       withBackground: !1,
                       withBorder: !1,
                       margin: "xx-small 0 0 xxx-small",
-                      screenReaderLabel: g.editNote,
+                      screenReaderLabel: R.editNote,
                       "data-testid": `note-card-${t}-edit`,
-                      elementRef: (u) => {
-                        ee.current = u;
+                      elementRef: (g) => {
+                        A.current = g;
                       },
-                      onClick: (u) => {
-                        u.stopPropagation(), I(!0);
+                      onClick: (g) => {
+                        g.stopPropagation(), P(!0);
                       },
-                      children: /* @__PURE__ */ i(Re, {})
+                      children: /* @__PURE__ */ i(Oe, {})
                     }
                   )
                 ] }) }) : null,
-                /* @__PURE__ */ T(x, { justifyItems: "space-between", alignItems: "center", margin: "auto 0 0 0", children: [
-                  /* @__PURE__ */ i(te, { as: "div", size: "small", color: "secondary", children: Ke(e, h) }),
-                  c && l && /* @__PURE__ */ i(
-                    me,
+                /* @__PURE__ */ T(I, { justifyItems: "space-between", alignItems: "center", margin: "auto 0 0 0", children: [
+                  /* @__PURE__ */ i(Z, { as: "div", size: "small", color: "secondary", children: Ke(e, N) }),
+                  m && a && /* @__PURE__ */ i(
+                    ge,
                     {
                       size: "small",
                       withBackground: !1,
                       withBorder: !1,
                       color: "danger",
                       margin: "xx-small",
-                      screenReaderLabel: g.deleteNote,
+                      screenReaderLabel: R.deleteNote,
                       "data-testid": `note-card-${t}-delete`,
-                      elementRef: (u) => {
-                        Y.current = u;
+                      elementRef: (g) => {
+                        ue.current = g;
                       },
-                      onClick: (u) => {
-                        u.stopPropagation(), _.current = !1, S(!0);
+                      onClick: (g) => {
+                        g.stopPropagation(), C.current = !1, w(!0);
                       },
-                      children: /* @__PURE__ */ i(Te, {})
+                      children: /* @__PURE__ */ i(Se, {})
                     }
                   )
                 ] }),
-                d && /* @__PURE__ */ T(
-                  te,
+                y && /* @__PURE__ */ T(
+                  Z,
                   {
                     as: "div",
                     size: "small",
                     color: "secondary",
                     "data-testid": `note-card-${t}-course`,
                     children: [
-                      z && /* @__PURE__ */ i(pe, { children: d }),
-                      /* @__PURE__ */ i("span", { "aria-hidden": z, style: { display: "block" }, children: /* @__PURE__ */ i(be, { maxLines: 1, onUpdate: ce, children: d }) })
+                      ae && /* @__PURE__ */ i(ye, { children: y }),
+                      /* @__PURE__ */ i("span", { "aria-hidden": ae, style: { display: "block" }, children: /* @__PURE__ */ i(Te, { maxLines: 1, onUpdate: de, children: y }) })
                     ]
                   }
                 )
@@ -1602,19 +1628,19 @@ const Zn = ({
             ] })
           }
         ),
-        c && P && l && /* @__PURE__ */ i(
+        m && E && a && /* @__PURE__ */ i(
           Ct,
           {
             open: !0,
             as: "div",
-            label: g.deleteNoteConfirmation,
+            label: R.deleteNoteConfirmation,
             shouldContainFocus: !0,
             shouldFocusOnOpen: !0,
-            defaultFocusElement: () => de.current,
+            defaultFocusElement: () => M.current,
             shouldCloseOnDocumentClick: !0,
             shouldCloseOnEscape: !1,
             shouldReturnFocus: !1,
-            onDismiss: v,
+            onDismiss: _,
             children: /* @__PURE__ */ i(
               V,
               {
@@ -1629,7 +1655,7 @@ const Zn = ({
                 insetInlineEnd: "0",
                 stacking: "above",
                 children: /* @__PURE__ */ T(
-                  x,
+                  I,
                   {
                     direction: "column",
                     justifyItems: "center",
@@ -1643,12 +1669,12 @@ const Zn = ({
                           display: "block",
                           color: "danger",
                           withBackground: !1,
-                          renderIcon: /* @__PURE__ */ i(Te, {}),
+                          renderIcon: /* @__PURE__ */ i(Se, {}),
                           "data-testid": `note-card-${t}-confirm-delete`,
-                          onClick: (u) => {
-                            u.stopPropagation(), l(t), S(!1);
+                          onClick: (g) => {
+                            g.stopPropagation(), a(t), w(!1);
                           },
-                          children: g.deleteNote
+                          children: R.deleteNote
                         }
                       ),
                       /* @__PURE__ */ i(
@@ -1657,13 +1683,13 @@ const Zn = ({
                           display: "block",
                           withBackground: !1,
                           "data-testid": `note-card-${t}-cancel-delete`,
-                          elementRef: (u) => {
-                            de.current = u;
+                          elementRef: (g) => {
+                            M.current = g;
                           },
-                          onClick: (u) => {
-                            u.stopPropagation(), v();
+                          onClick: (g) => {
+                            g.stopPropagation(), _();
                           },
-                          children: g.cancel
+                          children: R.cancel
                         }
                       )
                     ]
@@ -1676,8 +1702,8 @@ const Zn = ({
       ]
     }
   );
-  return b && y ? y({ href: b, children: R, ariaLabel: A }) : R;
-}, Jn = {
+  return p && x ? x({ href: p, children: U, ariaLabel: O }) : U;
+}, oo = {
   display: "grid",
   gap: "1rem",
   boxSizing: "border-box",
@@ -1685,7 +1711,7 @@ const Zn = ({
   margin: 0,
   padding: 0,
   listStyle: "none"
-}, wo = ({
+}, Ao = ({
   notes: t,
   isLoading: e,
   isError: n,
@@ -1694,93 +1720,94 @@ const Zn = ({
   onPageChange: s,
   onNoteSelect: l,
   onNoteDelete: a,
-  onNoteSave: m,
-  onNoteTypeChange: c,
-  onNotesEmptied: p,
-  selectedNoteId: d,
-  hasActiveFilter: h = !1,
-  columnCount: E = 1,
-  highlightTheme: y,
-  locale: b,
-  courseNames: g,
-  renderNoteLink: Q,
-  noteHref: j
+  onNoteSave: f,
+  onNoteTypeChange: u,
+  onNotesEmptied: m,
+  selectedNoteId: c,
+  hasActiveFilter: y = !1,
+  columnCount: N = 1,
+  highlightTheme: h,
+  locale: x,
+  courseNames: p,
+  renderNoteLink: R,
+  noteHref: z
 }) => {
-  const { translations: N } = Z(), I = F(null), B = F(null), D = K(
-    (S) => {
-      const w = t.findIndex(($) => $.id === S);
-      let C = null;
-      t.length > 1 && (C = w > 0 ? t[w - 1].id : t[1].id), B.current = { targetId: C }, a == null || a(S);
+  const { translations: b } = J(), S = F(null), P = F(null), D = K(
+    (E) => {
+      const w = t.findIndex((j) => j.id === E);
+      let v = null;
+      t.length > 1 && (v = w > 0 ? t[w - 1].id : t[1].id), P.current = { targetId: v }, a == null || a(E);
     },
     [t, a]
   );
-  if (W(() => {
+  if (q(() => {
     var w;
-    const S = B.current;
-    if (S)
-      if (B.current = null, S.targetId === null)
-        p == null || p();
+    const E = P.current;
+    if (E)
+      if (P.current = null, E.targetId === null)
+        m == null || m();
       else {
-        const C = (w = I.current) == null ? void 0 : w.querySelector(
-          `[data-testid="note-card-${S.targetId}"]`
+        const v = (w = S.current) == null ? void 0 : w.querySelector(
+          `[data-testid="note-card-${E.targetId}"]`
         );
-        C == null || C.focus();
+        v == null || v.focus();
       }
-  }, [t, p]), e)
-    return /* @__PURE__ */ i(V, { as: "div", textAlign: "center", padding: "large", "data-testid": "notes-loading", children: /* @__PURE__ */ i(It, { renderTitle: N.loadingNotes }) });
+  }, [t, m]), e)
+    return /* @__PURE__ */ i(V, { as: "div", textAlign: "center", padding: "large", "data-testid": "notes-loading", children: /* @__PURE__ */ i(xt, { renderTitle: b.loadingNotes }) });
   if (n)
-    return /* @__PURE__ */ i(V, { as: "div", textAlign: "center", padding: "large", "data-testid": "notes-error", children: /* @__PURE__ */ i(Se, { level: "h4", children: N.failedToLoadNotes }) });
+    return /* @__PURE__ */ i(V, { as: "div", textAlign: "center", padding: "large", "data-testid": "notes-error", children: /* @__PURE__ */ i(ve, { level: "h4", children: b.failedToLoadNotes }) });
   if (t.length === 0)
-    return /* @__PURE__ */ i(V, { as: "div", padding: "large", "data-testid": "empty-notes", children: /* @__PURE__ */ i(Qn, { hasActiveFilter: h }) });
-  const P = typeof o == "number" && typeof r == "number" && r > 1 && s !== void 0;
+    return /* @__PURE__ */ i(V, { as: "div", padding: "large", "data-testid": "empty-notes", children: /* @__PURE__ */ i(Jn, { hasActiveFilter: y }) });
+  const G = typeof o == "number" && typeof r == "number" && r > 1 && s !== void 0;
   return /* @__PURE__ */ T(Xe, { children: [
     /* @__PURE__ */ i(
       "ul",
       {
-        ref: I,
-        style: { ...Jn, gridTemplateColumns: `repeat(${E}, minmax(0, 1fr))` },
+        ref: S,
+        style: { ...oo, gridTemplateColumns: `repeat(${N}, minmax(0, 1fr))` },
         role: "list",
         "data-testid": "notes-grid",
-        children: t.map((S) => {
+        children: t.map((E) => {
           var w;
           return /* @__PURE__ */ i("li", { children: /* @__PURE__ */ i(
-            Zn,
+            no,
             {
-              noteId: S.id,
-              date: S.createdAt,
-              type: S.reaction[0] ?? k.IMPORTANT,
-              highlight: (w = S.highlightData) == null ? void 0 : w.selectedText,
-              note: S.userText,
-              isActive: d === S.id,
-              isPanelView: !!d,
-              onClick: l ? () => l(S.id) : void 0,
+              noteId: E.id,
+              date: E.createdAt,
+              type: E.reaction[0] ?? L.IMPORTANT,
+              highlight: (w = E.highlightData) == null ? void 0 : w.selectedText,
+              highlightUnavailableReason: E.highlightSourceUnavailable ? "sourceUnavailable" : void 0,
+              note: E.userText,
+              isActive: c === E.id,
+              isPanelView: !!c,
+              onClick: l ? () => l(E.id) : void 0,
               onDelete: a ? D : void 0,
-              onSaveNote: m ? (C, $) => m(C, $) : void 0,
-              onTypeChange: c ? (C, $) => c(C, $) : void 0,
-              highlightTheme: y,
-              locale: b,
-              courseName: g == null ? void 0 : g.get(S.courseId),
-              renderLink: Q,
-              href: j ? j(S.id, S) : void 0
+              onSaveNote: f ? (v, j) => f(v, j) : void 0,
+              onTypeChange: u ? (v, j) => u(v, j) : void 0,
+              highlightTheme: h,
+              locale: x,
+              courseName: p == null ? void 0 : p.get(E.courseId),
+              renderLink: R,
+              href: z ? z(E.id, E) : void 0
             }
-          ) }, S.id);
+          ) }, E.id);
         })
       }
     ),
-    P && /* @__PURE__ */ i(x, { justifyItems: "center", padding: "small", "data-testid": "notes-pagination", children: /* @__PURE__ */ i(x.Item, { children: /* @__PURE__ */ i(
-      vt,
+    G && /* @__PURE__ */ i(I, { justifyItems: "center", padding: "small", "data-testid": "notes-pagination", children: /* @__PURE__ */ i(I.Item, { children: /* @__PURE__ */ i(
+      It,
       {
         as: "nav",
         variant: "input",
-        labelNext: N.nextPage,
-        labelPrev: N.previousPage,
+        labelNext: b.nextPage,
+        labelPrev: b.previousPage,
         currentPage: o,
         totalPageNumber: r,
         onPageChange: s
       }
     ) }) })
   ] });
-}, ko = ({
+}, Do = ({
   noteText: t,
   reaction: e,
   highlightText: n,
@@ -1789,36 +1816,44 @@ const Zn = ({
   onDelete: s,
   onTypeChange: l,
   onBack: a,
-  editing: m = !1
+  editing: f = !1
 }) => {
-  const { translations: c } = Z(), [p, d] = G(m), [h, E] = G(t || ""), [y, b] = G(!1);
-  return /* @__PURE__ */ T(x, { direction: "column", gap: "small", "data-testid": "single-note", children: [
-    n != null ? /* @__PURE__ */ i(V, { as: "div", children: /* @__PURE__ */ i(te, { children: /* @__PURE__ */ i(we, { type: e, isCardActive: !0, theme: o, children: n }) }) }) : /* @__PURE__ */ i(mt, {}),
-    /* @__PURE__ */ i(gt, { type: e, onTypeChange: l, renderAsMenuTrigger: !!l }),
-    p ? /* @__PURE__ */ T(x, { direction: "column", gap: "x-small", children: [
+  const { translations: u } = J(), [m, c] = W(f), [y, N] = W(t || ""), [h, x] = W(!1);
+  return /* @__PURE__ */ T(I, { direction: "column", gap: "small", "data-testid": "single-note", children: [
+    n != null ? /* @__PURE__ */ i(V, { as: "div", children: /* @__PURE__ */ i(Z, { children: /* @__PURE__ */ i(we, { type: e, isCardActive: !0, theme: o, children: n }) }) }) : /* @__PURE__ */ i(gt, {}),
+    /* @__PURE__ */ i(
+      ht,
+      {
+        type: e,
+        onTypeChange: l,
+        renderAsMenuTrigger: !!l,
+        theme: o.colors
+      }
+    ),
+    m ? /* @__PURE__ */ T(I, { direction: "column", gap: "x-small", children: [
       /* @__PURE__ */ i(
         Ze,
         {
-          label: c.addNoteOptional,
-          value: h,
-          onChange: (g) => E(g.target.value),
+          label: u.addNoteOptional,
+          value: y,
+          onChange: (p) => N(p.target.value),
           resize: "vertical"
         }
       ),
-      /* @__PURE__ */ T(x, { gap: "xx-small", children: [
-        /* @__PURE__ */ i(x.Item, { shouldGrow: !0, children: /* @__PURE__ */ i(
+      /* @__PURE__ */ T(I, { gap: "xx-small", children: [
+        /* @__PURE__ */ i(I.Item, { shouldGrow: !0, children: /* @__PURE__ */ i(
           ne,
           {
             display: "block",
             size: "small",
             "data-testid": "single-note-cancel",
             onClick: () => {
-              E(t || ""), d(!1);
+              N(t || ""), c(!1);
             },
-            children: c.cancel
+            children: u.cancel
           }
         ) }),
-        /* @__PURE__ */ i(x.Item, { shouldGrow: !0, children: /* @__PURE__ */ i(
+        /* @__PURE__ */ i(I.Item, { shouldGrow: !0, children: /* @__PURE__ */ i(
           ne,
           {
             display: "block",
@@ -1826,69 +1861,69 @@ const Zn = ({
             size: "small",
             "data-testid": "single-note-save",
             onClick: () => {
-              r(h), d(!1);
+              r(y), c(!1);
             },
-            children: c.save
+            children: u.save
           }
         ) })
       ] })
-    ] }) : /* @__PURE__ */ T(x, { direction: "column", gap: "small", children: [
+    ] }) : /* @__PURE__ */ T(I, { direction: "column", gap: "small", children: [
       t && /* @__PURE__ */ T(V, { as: "div", children: [
-        /* @__PURE__ */ i(Se, { level: "h4", margin: "0 0 xx-small 0", children: c.note }),
-        /* @__PURE__ */ i(te, { children: t })
+        /* @__PURE__ */ i(ve, { level: "h4", margin: "0 0 xx-small 0", children: u.note }),
+        /* @__PURE__ */ i(Z, { children: t })
       ] }),
-      /* @__PURE__ */ T(x, { justifyItems: "space-between", children: [
+      /* @__PURE__ */ T(I, { justifyItems: "space-between", children: [
         /* @__PURE__ */ i(
           ne,
           {
             size: "small",
-            renderIcon: /* @__PURE__ */ i(St, {}),
+            renderIcon: /* @__PURE__ */ i(vt, {}),
             "data-testid": "single-note-back",
             onClick: () => a == null ? void 0 : a(),
-            children: c.back
+            children: u.back
           }
         ),
-        /* @__PURE__ */ T(x, { gap: "xx-small", children: [
+        /* @__PURE__ */ T(I, { gap: "xx-small", children: [
           s && /* @__PURE__ */ i(
-            me,
+            ge,
             {
               size: "small",
               withBackground: !1,
               withBorder: !1,
               color: "danger",
-              screenReaderLabel: c.deleteNote,
+              screenReaderLabel: u.deleteNote,
               "data-testid": "single-note-delete",
-              onClick: () => b(!0),
-              children: /* @__PURE__ */ i(Te, {})
+              onClick: () => x(!0),
+              children: /* @__PURE__ */ i(Se, {})
             }
           ),
           /* @__PURE__ */ i(
-            me,
+            ge,
             {
               size: "small",
               withBackground: !1,
               withBorder: !1,
-              screenReaderLabel: c.editNote,
+              screenReaderLabel: u.editNote,
               "data-testid": "single-note-edit",
-              onClick: () => d(!0),
-              children: /* @__PURE__ */ i(Re, {})
+              onClick: () => c(!0),
+              children: /* @__PURE__ */ i(Oe, {})
             }
           )
         ] })
       ] }),
-      y && s && /* @__PURE__ */ i(V, { as: "div", background: "primary", padding: "medium", borderRadius: "large", children: /* @__PURE__ */ T(x, { direction: "column", justifyItems: "center", alignItems: "center", gap: "x-small", children: [
+      h && s && /* @__PURE__ */ i(V, { as: "div", background: "primary", padding: "medium", borderRadius: "large", children: /* @__PURE__ */ T(I, { direction: "column", justifyItems: "center", alignItems: "center", gap: "x-small", children: [
         /* @__PURE__ */ i(
           ne,
           {
             display: "block",
             color: "danger",
             size: "small",
-            renderIcon: /* @__PURE__ */ i(Te, {}),
+            renderIcon: /* @__PURE__ */ i(Se, {}),
             "data-testid": "single-note-confirm-delete",
             onClick: () => {
-              s(), b(!1);
+              s(), x(!1);
             },
-            children: c.deleteNote
+            children: u.deleteNote
           }
         ),
         /* @__PURE__ */ i(
@@ -1897,8 +1932,8 @@ const Zn = ({
             display: "block",
             size: "small",
             "data-testid": "single-note-cancel-delete",
-            onClick: () => b(!1),
-            children: c.cancel
+            onClick: () => x(!1),
+            children: u.cancel
           }
         )
       ] }) })
@@ -1906,26 +1941,27 @@ const Zn = ({
   ] });
 };
 export {
-  Io as ContentWithNoteWrapper,
+  wo as ContentWithNoteWrapper,
   we as Highlight,
-  mt as HighlightError,
-  Zn as NoteCard,
-  gt as NoteChip,
-  qn as NoteReactionMenu,
-  Qn as NotebookEmptyState,
-  Co as NotebookProvider,
-  jn as NotebookTranslationsProvider,
-  vo as NotebookTray,
-  wo as NotesListView,
-  k as REACTION_TYPE,
-  ko as SingleNote,
-  Fe as createTransparentColor,
-  en as useCreateNote,
-  tn as useDeleteNote,
+  gt as HighlightError,
+  no as NoteCard,
+  ht as NoteChip,
+  Vn as NoteReactionMenu,
+  Jn as NotebookEmptyState,
+  Ro as NotebookProvider,
+  qn as NotebookTranslationsProvider,
+  Oo as NotebookTray,
+  Ao as NotesListView,
+  L as REACTION_TYPE,
+  Do as SingleNote,
+  Me as createTransparentColor,
+  mt as getHighlightUnavailableMessage,
+  tn as useCreateNote,
+  nn as useDeleteNote,
   it as useGetNotes,
   ut as useNotebook,
-  Z as useNotebookTranslations,
-  xo as useNotesData,
-  Ro as useReactionFilter,
-  on as useUpdateNote
+  J as useNotebookTranslations,
+  ko as useNotesData,
+  Lo as useReactionFilter,
+  rn as useUpdateNote
 };