@instructure/platform-notebook 1.11.0 → 1.11.1

package/dist/index.js

@@ -1,37 +1,37 @@
-import { jsx as i, jsxs as S, Fragment as Xe } from "react/jsx-runtime";
+import { jsx as i, jsxs as T, Fragment as Xe } from "react/jsx-runtime";
 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 Oe, useMutation as Le, useQuery as Nt } from "@tanstack/react-query";
+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 C } from "@instructure/ui-flex/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 Ae, IconPinLine as De, IconWarningLine as St, NotebookInstUIIcon as Tt, IconEditLine as we, IconTrashLine as Te, IconArrowStartLine as vt } from "@instructure/ui-icons";
+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 Se } from "@instructure/ui-truncate-text/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 Z } from "@instructure/ui-text/v11_7";
 import { ScreenReaderContent as ye } from "@instructure/ui-a11y-content";
-import { Dialog as It } from "@instructure/ui-dialog";
+import { Dialog as Ct } from "@instructure/ui-dialog";
 import { TextArea as Ze } from "@instructure/ui-text-area/v11_7";
 import { Pill as $e } from "@instructure/ui-pill/v11_7";
-import { Pagination as Ct } from "@instructure/ui-pagination/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()
-}), wt = d.object({
+}), Ot = d.object({
   start: d.number(),
   end: d.number()
 }), Pe = d.object({
   selectedText: d.string(),
   hasNoHighlightAnymore: d.boolean().optional(),
-  textPosition: wt.nullable(),
+  textPosition: Ot.nullable(),
   range: Rt.nullable(),
   pageLastModifiedAt: d.string()
 });
@@ -40,10 +40,10 @@ const _e = d.enum([
   "Important",
   "Confusing"
   /* CONFUSING */
-]), kt = d.object({
+]), wt = d.object({
   totalCount: d.number().nullish(),
   totalNrOfPages: d.number().nullish()
-}), Ie = d.object({
+}), Ce = d.object({
   id: d.string(),
   rootAccountUuid: d.string(),
   userId: d.string(),
@@ -59,15 +59,15 @@ const _e = d.enum([
   highlightSourceUnavailable: d.boolean().optional(),
   createdAt: d.string(),
   updatedAt: d.string()
-}), Ot = d.object({
+}), kt = d.object({
   cursor: d.string(),
-  node: Ie
+  node: Ce
 });
 d.object({
   notes: d.object({
-    edges: d.array(Ot),
-    nodes: d.array(Ie),
-    pageInfo: kt
+    edges: d.array(kt),
+    nodes: d.array(Ce),
+    pageInfo: wt
   })
 });
 const Lt = d.object({
@@ -93,7 +93,7 @@ d.object({
   highlightData: Pe
 });
 d.object({
-  createNote: Ie
+  createNote: Ce
 });
 d.object({
   id: d.string(),
@@ -102,7 +102,7 @@ d.object({
   highlightData: Pe
 });
 d.object({
-  updateNote: Ie
+  updateNote: Ce
 });
 d.object({
   deleteNote: d.string()
@@ -244,11 +244,11 @@ const _t = (t) => {
   o.shift();
   for (const s of o) {
     let l, a;
-    const m = s.indexOf("[");
-    if (m !== -1) {
-      l = s.slice(0, m);
-      const f = s.slice(m + 1, s.indexOf("]"));
-      if (a = Number.parseInt(f, 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;
@@ -361,14 +361,14 @@ const et = (t) => {
   if (!s)
     return null;
   if (e.length > 32) {
-    const l = e.slice(0, 32), a = e.slice(-32), m = o - n;
+    const l = e.slice(0, 32), a = e.slice(-32), f = o - n;
     let u = r.match_main(s, l, n);
-    const f = r.match_main(s, a, o), c = f + a.length;
-    if (u === -1 || f === -1)
+    const m = r.match_main(s, a, o), c = m + a.length;
+    if (u === -1 || m === -1)
       return null;
-    const h = c - u, N = Math.abs(h - m);
+    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, m);
+      return Bt(t, u, c, f);
     if (u < c && N <= 5)
       return le.fromSelector(t, {
         start: u,
@@ -397,7 +397,7 @@ const et = (t) => {
   for (const s of e) {
     const l = Ht(s, t);
     if (l) {
-      const a = l.toRange(), m = a && ce.fromRange(t, a), u = (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,
@@ -406,7 +406,7 @@ const et = (t) => {
           ...s.highlightData,
           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
         }
@@ -432,7 +432,7 @@ const et = (t) => {
 }, Gt = (t) => {
   const n = document.querySelector(
     `[data-highlight-id="${CSS.escape(t)}"].highlight-content`
-  ) ?? document.getElementById(Ce(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" });
@@ -441,41 +441,41 @@ const et = (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 = (p) => {
-    const x = p + be;
-    return p >= s && x <= l - s;
-  }, u = (p) => {
-    const x = p + Ne;
-    return p >= s && x <= 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 f;
+  let m;
   const c = n.right - be;
-  if (m(c))
-    f = c;
+  if (f(c))
+    m = c;
   else {
-    const p = n.left;
-    if (m(p))
-      f = p;
+    const h = n.left;
+    if (f(h))
+      m = h;
     else {
-      const y = (n.left + n.right) / 2 - be / 2;
-      m(y) ? f = y : c < s ? f = s : f = l - be - s;
+      const p = (n.left + n.right) / 2 - be / 2;
+      f(p) ? m = p : c < s ? m = s : m = l - be - s;
     }
   }
-  let h;
+  let y;
   const N = o.bottom + r;
   if (u(N))
-    h = N;
+    y = N;
   else {
-    const p = n.top - Ne - r;
-    u(p) ? h = p : N + Ne > a - s ? h = a - Ne - 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: f };
+  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;
-}, Fe = (t) => `highlight-wrapper-${t}`, Ce = (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) => {
+}, 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) => {
@@ -536,38 +536,38 @@ const et = (t) => {
 }, Zt = (t, e, n) => {
   if (t.collapsed) return;
   const o = e.id ?? "", r = Fe(o);
-  if (document.getElementById(Ce(o))) {
+  if (document.getElementById(Ie(o))) {
     Jt(e, n);
     return;
   }
-  const l = e.type === L.IMPORTANT ? n.colors.importantBackground : n.colors.confusingBackground, a = e.id === e.selectedNoteId, m = a ? l : Me(l, 0.5), u = e.type === L.IMPORTANT ? n.colors.importantUnderline : n.colors.confusingUnderline, f = e.type === L.IMPORTANT ? "solid" : "dashed", c = document.createElement("span");
+  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 h = e.labelPrefix ?? rt;
-  c.setAttribute("role", "button"), c.setAttribute("tabindex", "0"), c.setAttribute("aria-label", h), 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 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 y = document.createRange();
-  y.setStartAfter(c), y.setEndBefore(N);
-  const z = Yt(y).filter((b) => b.textContent && b.textContent.length > 0);
-  z.forEach((b, T) => {
+  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 = T === 0, G = T === z.length - 1, E = z.length === 1;
+    const D = S === 0, G = S === z.length - 1, E = z.length === 1;
     let w;
     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, m, u, f), v.addEventListener("click", (ee) => {
+    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 T;
-    b.target.tagName !== "A" && ((T = e.onClick) == null || T.call(e));
+    var S;
+    b.target.tagName !== "A" && ((S = e.onClick) == null || S.call(e));
   }), c.addEventListener("keydown", (b) => {
-    var T;
+    var S;
     if (b.key === "Enter" || b.key === " ")
-      b.preventDefault(), (T = e.onClick) == null || T.call(e);
+      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) {
@@ -581,14 +581,14 @@ const et = (t) => {
   }), c.addEventListener("focus", () => {
     document.querySelectorAll(
       `.highlight-content${he(o)}`
-    ).forEach((T) => {
-      T.style.boxShadow = `0 0 0 ${zt} ${n.colors.focusOutline}`, T.style.borderRadius = qt;
+    ).forEach((S) => {
+      S.style.boxShadow = `0 0 0 ${zt} ${n.colors.focusOutline}`, S.style.borderRadius = qt;
     });
   }), c.addEventListener("blur", () => {
     document.querySelectorAll(
       `.highlight-content${he(o)}`
-    ).forEach((T) => {
-      T.style.boxShadow = "", T.style.borderRadius = T.dataset.selected ? ot : "";
+    ).forEach((S) => {
+      S.style.boxShadow = "", S.style.borderRadius = S.dataset.selected ? ot : "";
     });
   });
 };
@@ -599,13 +599,13 @@ function Jt(t, e) {
   ).forEach((u) => {
     st(u, o, r, s, l);
   });
-  const m = document.getElementById(
-    Ce(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 en = (t) => {
-  const e = t.id ?? "", n = document.getElementById(Ce(e)), o = document.getElementById(nt(e));
+  const e = t.id ?? "", n = document.getElementById(Ie(e)), o = document.getElementById(nt(e));
   document.querySelectorAll(
     he(e)
   ).forEach((s) => {
@@ -619,7 +619,7 @@ const en = (t) => {
   notes: (t) => ["notebook", "notes", t]
 };
 function tn(t) {
-  const e = Oe();
+  const e = ke();
   return Le({
     mutationFn: (n) => t.createNote(n),
     onSuccess: () => {
@@ -628,7 +628,7 @@ function tn(t) {
   });
 }
 function nn(t) {
-  const e = Oe();
+  const e = ke();
   return Le({
     mutationFn: (n) => t.deleteNote(n),
     onSuccess: () => {
@@ -668,17 +668,17 @@ function lt({
   });
 }
 function rn(t) {
-  const e = Oe();
+  const e = ke();
   return Le({
     mutationFn: ({ id: n, input: o }) => t.updateNote(n, o),
     onMutate: async ({ id: n, input: o }) => {
       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(
+        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
           )
         }));
@@ -695,7 +695,7 @@ function rn(t) {
     }
   });
 }
-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", Sn = "Mark unclear", Tn = "Saved to Notebook.", vn = "Note updated", In = "Note deleted", Cn = "Error saving to Notebook.", xn = "Error updating note", Rn = "Note deletion failed", wn = "Loading notes", kn = "Failed to load notes", On = "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 = {
+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,
@@ -711,16 +711,16 @@ const sn = "Notebook", ln = "Notes", an = "Important", cn = "Unclear", dn = "Bac
   removeFromNotebook: Nn,
   addNoteOptional: bn,
   markImportant: En,
-  markUnclear: Sn,
-  savedToNotebook: Tn,
+  markUnclear: Tn,
+  savedToNotebook: Sn,
   noteUpdated: vn,
-  noteDeleted: In,
-  errorSavingNote: Cn,
+  noteDeleted: Cn,
+  errorSavingNote: In,
   errorUpdatingNote: xn,
   noteDeletionFailed: Rn,
-  loadingNotes: wn,
-  failedToLoadNotes: kn,
-  emptyStateHeading: On,
+  loadingNotes: On,
+  failedToLoadNotes: wn,
+  emptyStateHeading: kn,
   emptyStateDescription: Ln,
   emptyStatePrecision: An,
   nothingHereYet: Dn,
@@ -786,7 +786,7 @@ function Xn(t, e) {
   }
 }
 const dt = Ve(null);
-function xo({
+function Ro({
   api: t,
   currentUserId: e,
   objectId: n,
@@ -795,11 +795,11 @@ function xo({
   pageLastModifiedAt: s,
   onOpen: l,
   initialNoteId: a,
-  translations: m,
+  translations: f,
   translate: u,
-  children: f
+  children: m
 }) {
-  const [c, h] = Ye(Xn, Kn(a)), N = F(a != null), p = pe(
+  const [c, y] = Ye(Xn, Kn(a)), N = F(a != null), h = pe(
     () => ({
       api: t,
       currentUserId: e,
@@ -808,19 +808,19 @@ function xo({
       courseId: r,
       pageLastModifiedAt: s,
       ...c,
-      selectNote: (x, y = !1) => h({ type: "SELECT_NOTE", payload: { id: x, isEditing: y } }),
-      clearSelectedNote: () => h({ type: "CLEAR_SELECTED_NOTE" }),
-      setEditing: (x) => h({ type: "SET_EDITING", payload: x }),
+      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: () => {
-        N.current || (N.current = !0, l == null || l()), h({ type: "OPEN_TRAY" });
+        N.current || (N.current = !0, l == null || l()), y({ type: "OPEN_TRAY" });
       },
       closeTray: () => {
-        N.current = !1, h({ type: "CLOSE_TRAY" });
+        N.current = !1, y({ type: "CLOSE_TRAY" });
       }
     }),
     [t, e, n, o, r, s, l, c]
   );
-  return /* @__PURE__ */ i(dt.Provider, { value: p, children: /* @__PURE__ */ i(qn, { translations: m, translate: u, children: f }) });
+  return /* @__PURE__ */ i(dt.Provider, { value: h, children: /* @__PURE__ */ i(qn, { translations: f, translate: u, children: m }) });
 }
 function ut() {
   const t = Qe(dt);
@@ -828,7 +828,7 @@ function ut() {
     throw new Error("useNotebook must be used within a NotebookProvider");
   return t;
 }
-const ft = "notebook-tray-content", Ro = ({ children: t }) => {
+const ft = "notebook-tray-content", Oo = ({ children: t }) => {
   const { isTrayOpen: e, closeTray: n } = ut(), { translations: o } = J();
   return /* @__PURE__ */ i(
     Et,
@@ -838,8 +838,8 @@ const ft = "notebook-tray-content", Ro = ({ children: t }) => {
       onDismiss: n,
       placement: "end",
       size: "regular",
-      children: /* @__PURE__ */ S(C, { direction: "column", height: "100vh", id: ft, children: [
-        /* @__PURE__ */ i(C.Item, { children: /* @__PURE__ */ i(V, { as: "div", padding: "small medium", borderWidth: "0 0 small 0", children: /* @__PURE__ */ S(C, { justifyItems: "space-between", alignItems: "center", children: [
+      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(
             bt,
@@ -851,7 +851,7 @@ const ft = "notebook-tray-content", Ro = ({ children: t }) => {
             }
           )
         ] }) }) }),
-        /* @__PURE__ */ i(C.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 })
       ] })
     }
   );
@@ -872,8 +872,8 @@ const ft = "notebook-tray-content", Ro = ({ children: t }) => {
       borderColor: "secondary",
       borderRadius: "medium",
       shadow: "resting",
-      children: /* @__PURE__ */ S(fe, { children: [
-        /* @__PURE__ */ S(
+      children: /* @__PURE__ */ T(fe, { children: [
+        /* @__PURE__ */ T(
           fe.Item,
           {
             ref: r,
@@ -885,7 +885,7 @@ const ft = "notebook-tray-content", Ro = ({ children: t }) => {
             ]
           }
         ),
-        /* @__PURE__ */ S(
+        /* @__PURE__ */ T(
           fe.Item,
           {
             ref: s,
@@ -912,26 +912,26 @@ function wo({
 }) {
   const {
     api: a,
-    objectId: m,
+    objectId: f,
     objectType: u,
-    courseId: f,
+    courseId: m,
     pageLastModifiedAt: c,
-    selectedNoteId: h,
+    selectedNoteId: y,
     isTrayOpen: N,
-    selectNote: p,
+    selectNote: h,
     openTray: x
-  } = ut(), { translations: y } = J(), { data: k } = lt({
+  } = ut(), { translations: p } = J(), { data: R } = lt({
     api: a,
-    courseId: f,
-    learningObject: { type: u, id: m }
-  }), { mutate: z, isPending: b } = tn(a), { mutateAsync: T } = 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);
+    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 I = M.closest(".user_content") ?? M;
-    if (I.classList.contains("enhanced")) {
+    const C = M.closest(".user_content") ?? M;
+    if (C.classList.contains("enhanced")) {
       se(!0);
       return;
     }
@@ -942,112 +942,112 @@ function wo({
           return;
         }
     });
-    return _.observe(I, { attributes: !0, attributeFilter: ["class"] }), () => _.disconnect();
+    return _.observe(C, { attributes: !0, attributeFilter: ["class"] }), () => _.disconnect();
   }, [t]);
   const A = K(() => {
     ae(null), v(null), ee("");
   }, []);
   q(() => {
     if (!re || !t.current) return;
-    let I = null;
+    let C = null;
     const _ = () => {
-      I && clearTimeout(I), I = setTimeout(() => {
+      C && clearTimeout(C), C = setTimeout(() => {
         var Ue;
-        const R = window.getSelection(), U = t.current;
-        if (!(R != null && R.rangeCount) || !U) return;
-        const g = R.toString().trim();
+        const O = window.getSelection(), U = t.current;
+        if (!(O != null && O.rangeCount) || !U) return;
+        const g = O.toString().trim();
         if (g === "") return;
-        const $ = R.getRangeAt(0);
+        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);
-    }, B = (R) => {
-      if (!(R.target instanceof Node)) return;
+    }, B = (O) => {
+      if (!(O.target instanceof Node)) return;
       const U = document.getElementById(xe);
-      U != null && U.contains(R.target) ? (R.preventDefault(), R.stopImmediatePropagation()) : A();
+      U != null && U.contains(O.target) ? (O.preventDefault(), O.stopImmediatePropagation()) : A();
     }, H = () => {
       A();
-    }, O = (R) => {
-      R.key === "Escape" && de.current !== null && (A(), R.stopImmediatePropagation());
+    }, k = (O) => {
+      O.key === "Escape" && de.current !== null && (A(), O.stopImmediatePropagation());
     };
-    return document.addEventListener("selectionchange", _), document.addEventListener("mousedown", B), document.addEventListener("touchstart", B), document.addEventListener("keydown", O), window.addEventListener("scroll", H, !0), () => {
-      I && clearTimeout(I), document.removeEventListener("selectionchange", _), document.removeEventListener("mousedown", B), document.removeEventListener("touchstart", B), document.removeEventListener("keydown", O), window.removeEventListener("scroll", H, !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);
     };
   }, [re, G, n, t, A]);
   const Y = K(
     (M) => {
       var U;
-      const I = t.current;
-      if (!I || !M.highlightData) return null;
-      const { highlightData: _, reaction: B, id: H } = M, { range: O } = _, R = O && ((U = ce.fromSelector(I, O)) == null ? void 0 : U.toRange());
-      if (R) {
-        const g = B[0] === L.IMPORTANT ? y.important : y.unclear, $ = {
+      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: h,
+          selectedNoteId: y,
           type: B[0],
           isTrayOpen: N,
-          labelPrefix: `${y.notebookNote} (${g})`,
+          labelPrefix: `${p.notebookNote} (${g})`,
           popupId: ft,
           onClick: () => {
-            p(H), x();
+            h(H), x();
           }
         };
-        return Zt(R, $, e), _.textPosition;
+        return Zt(O, $, e), _.textPosition;
       }
       return null;
     },
-    [t, h, N, e, y, p, x]
+    [t, y, N, e, p, h, x]
   );
   q(() => {
-    if (!re || !k || !t.current) return;
-    const M = t.current, I = k.notes, _ = /* @__PURE__ */ new Set(), B = [], H = [];
-    if (I.length === 0) {
+    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 O of D.current)
-          ze(O, M);
+        for (const k of D.current)
+          ze(k, M);
         D.current = [], E([]);
       }
       return;
     }
-    if (c && I[0].highlightData.pageLastModifiedAt !== c) {
-      const { notesForUpdate: O, noteIdsForDelete: R } = $t(
+    if (c && C[0].highlightData.pageLastModifiedAt !== c) {
+      const { notesForUpdate: k, noteIdsForDelete: O } = $t(
         M,
-        I,
+        C,
         c
       );
+      for (const U of k)
+        S({ id: U.id, input: U }).catch((g) => r == null ? void 0 : r(g));
       for (const U of O)
-        T({ id: U.id, input: U }).catch((g) => r == null ? void 0 : r(g));
-      for (const U of R)
         P(U, { onError: s });
     } else {
-      for (const O of I) {
-        const R = Y(O);
-        _.add(O.id), R && (B.push(O), H.push(R));
+      for (const k of C) {
+        const O = Y(k);
+        _.add(k.id), O && (B.push(k), H.push(O));
       }
-      for (const O of D.current)
-        _.has(O.id) || ze(O, M);
-      E(H), D.current = B, h && Gt(h);
+      for (const k of D.current)
+        _.has(k.id) || ze(k, M);
+      E(H), D.current = B, y && Gt(y);
     }
   }, [
     re,
-    k,
+    R,
     Y,
     c,
     t,
-    T,
+    S,
     P,
-    h
+    y
   ]);
   const ue = (M) => {
-    const I = t.current;
-    if (!w || !I || te.current) return;
+    const C = t.current;
+    if (!w || !C || te.current) return;
     te.current = !0;
-    const _ = ce.fromRange(I, w), B = le.fromRange(I, w);
+    const _ = ce.fromRange(C, w), B = le.fromRange(C, w);
     z(
       {
-        courseId: f,
-        objectId: m,
+        courseId: m,
+        objectId: f,
         objectType: u,
         userText: "",
         reaction: [M],
@@ -1060,9 +1060,9 @@ function wo({
       },
       {
         onSuccess: (H) => {
-          var R;
-          const O = H.id;
-          A(), (R = window.getSelection()) == null || R.removeAllRanges(), p(O), x(), l == null || l(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
@@ -1086,8 +1086,8 @@ function wo({
           whiteSpace: "nowrap"
         },
         onBlur: (M) => {
-          const I = document.getElementById(xe);
-          I != null && I.contains(M.relatedTarget) || A();
+          const C = document.getElementById(xe);
+          C != null && C.contains(M.relatedTarget) || A();
         },
         children: /* @__PURE__ */ i(Vn, { onSelectReaction: ue, disabled: b })
       }
@@ -1099,7 +1099,7 @@ 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"
-}), ke = ({
+}), we = ({
   children: t,
   type: e = L.IMPORTANT,
   isCardActive: n = !0,
@@ -1122,9 +1122,9 @@ function mt(t, e = "noHighlight") {
 }
 const gt = ({ reason: t } = {}) => {
   const { translations: e } = J();
-  return /* @__PURE__ */ S(C, { gap: "xx-small", alignItems: "start", as: "div", children: [
-    /* @__PURE__ */ i(C.Item, { as: "div", children: /* @__PURE__ */ i(St, { color: "error" }) }),
-    /* @__PURE__ */ i(C.Item, { padding: "xxx-small none", shouldShrink: !0, children: /* @__PURE__ */ i(Se, { maxLines: 3, children: mt(e, t) }) })
+  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) }) })
   ] });
 }, Yn = {
   filter: null,
@@ -1169,37 +1169,37 @@ function ko({
   focusNoteId: s
 }) {
   var se;
-  const [l, a] = Ye(Zn, Yn), { filter: m, courseFilter: u, currentPage: f, totalPages: c } = l;
+  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 ? u : e, N = (f - 1) * r, p = !!o, x = {
-    ...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: y,
-    isLoading: k,
+    data: p,
+    isLoading: R,
     isError: z
   } = it({
     api: t,
     filter: x,
     offset: N,
     pageSize: r,
-    enabled: !p
+    enabled: !h
   }), {
     data: b,
-    isLoading: T,
+    isLoading: S,
     isError: P
   } = lt({
     api: t,
-    courseId: h ?? void 0,
+    courseId: y ?? void 0,
     learningObject: o,
-    enabled: p
+    enabled: h
   }), D = pe(() => {
     const A = (b == null ? void 0 : b.notes) ?? [];
-    return m ? A.filter((Y) => Y.reaction.includes(m)) : A;
-  }, [b, m]), G = F(null);
+    return f ? A.filter((Y) => Y.reaction.includes(f)) : A;
+  }, [b, f]), G = F(null);
   q(() => {
     if (!s) {
       G.current = null;
@@ -1210,9 +1210,9 @@ function ko({
     if (A === -1) return;
     G.current = s;
     const Y = Math.floor(A / r) + 1;
-    Y !== f && a({ type: "FOCUS_PAGE", payload: Y });
-  }, [s, D, r, f]);
-  const E = p ? D.slice(N, N + r) : (y == null ? void 0 : y.notes) ?? [], w = p ? T : k, v = p ? P : z, j = p ? Math.max(1, Math.ceil(D.length / r)) : ((se = y == null ? void 0 : y.pageInfo) == null ? void 0 : se.totalNrOfPages) ?? void 0, ee = p ? { totalCount: D.length, totalNrOfPages: j } : y == null ? void 0 : y.pageInfo;
+    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]);
@@ -1238,9 +1238,9 @@ function ko({
     pageInfo: ee,
     isLoading: w,
     isError: v,
-    filter: m,
+    filter: f,
     courseFilter: u,
-    currentPage: f,
+    currentPage: m,
     totalPages: c,
     setFilter: te,
     setCourseFilter: re,
@@ -1250,7 +1250,7 @@ function ko({
   };
 }
 const Re = "all";
-function Oo({ filter: t, setFilter: e }) {
+function Lo({ filter: t, setFilter: e }) {
   const { translations: n } = J(), o = pe(
     () => [
       { label: n.allNotes, value: Re },
@@ -1283,72 +1283,83 @@ function Oo({ filter: t, setFilter: e }) {
 }
 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__ */ S(C, { direction: "column", alignItems: "center", gap: "small", children: [
-    !t && /* @__PURE__ */ i(Tt, { size: "medium" }),
+  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 })
   ] }) });
-}, eo = {
+}, eo = "#2871AF", to = (t) => ({
   [L.IMPORTANT]: {
     color: "success",
+    themeOverride: {
+      successTextColor: t,
+      successBorderColor: t
+    },
     translationKey: "important",
     icon: /* @__PURE__ */ i(De, { size: "x-small" })
   },
   [L.CONFUSING]: {
     color: "error",
+    themeOverride: void 0,
     translationKey: "unclear",
     icon: /* @__PURE__ */ i(Ae, { size: "x-small" })
   }
-}, ht = ({ type: t, onTypeChange: e, renderAsMenuTrigger: n = !1 }) => {
-  const { translations: o } = J(), r = eo[t], s = o[r.translationKey], [l, a] = W(!1), m = F(null), u = F(null), f = F(null), c = 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 q(() => {
-    if (!l) return;
+    if (!f) return;
     const h = (p) => {
       p.key === "Escape" && p.stopPropagation();
-    }, N = (p) => {
-      var x;
-      p.key === "Escape" && (p.stopPropagation(), a(!1), (x = f.current) == null || x.focus());
+    }, 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", N, !0), () => {
-      document.removeEventListener("keydown", h, !0), document.removeEventListener("keyup", N, !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__ */ S(
+  }, [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(
         $e,
         {
-          color: r.color,
-          renderIcon: r.icon,
+          color: l.color,
+          themeOverride: l.themeOverride,
+          renderIcon: l.icon,
           elementRef: (h) => {
-            f.current = h;
+            y.current = h;
           },
-          children: s
+          children: a
         }
       ),
       children: [
-        /* @__PURE__ */ S(fe.Item, { ref: m, onClick: () => c(L.CONFUSING), children: [
+        /* @__PURE__ */ T(fe.Item, { ref: m, onClick: () => N(L.CONFUSING), children: [
           /* @__PURE__ */ i(Ae, { size: "x-small" }),
-          ` ${o.markUnclear}`
+          ` ${r.markUnclear}`
         ] }),
-        /* @__PURE__ */ S(fe.Item, { ref: u, onClick: () => c(L.IMPORTANT), children: [
+        /* @__PURE__ */ T(fe.Item, { ref: c, onClick: () => N(L.IMPORTANT), children: [
           /* @__PURE__ */ i(De, { size: "x-small" }),
-          ` ${o.markImportant}`
+          ` ${r.markImportant}`
         ] })
       ]
     }
-  ) : /* @__PURE__ */ i(V, { display: "inline-flex", children: /* @__PURE__ */ i($e, { 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, {
@@ -1357,7 +1368,7 @@ function Ke(t, e) {
     day: "numeric"
   });
 }
-const to = ({
+const no = ({
   noteId: t,
   date: e,
   highlight: n,
@@ -1366,34 +1377,34 @@ const to = ({
   type: s,
   onClick: l,
   onDelete: a,
-  onSaveNote: m,
+  onSaveNote: f,
   onTypeChange: u,
-  isActive: f,
+  isActive: m,
   isPanelView: c = !1,
-  courseName: h,
+  courseName: y,
   locale: N,
-  highlightTheme: p,
+  highlightTheme: h,
   renderLink: x,
-  href: y
+  href: p
 }) => {
-  const { translations: k } = J(), [z, b] = W(!1), [T, 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) => {
+  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), I = F(!1);
+  }, []), se = F(null), A = F(null), Y = F(!1), ue = F(null), M = F(null), C = F(!1);
   q(() => {
     var g, $;
-    f ? ((g = te.current) == null || g.scrollIntoView({ behavior: "smooth", block: "nearest" }), ($ = te.current) == null || $.focus()) : w(!1);
-  }, [f]), q(() => {
+    m ? ((g = te.current) == null || g.scrollIntoView({ behavior: "smooth", block: "nearest" }), ($ = te.current) == null || $.focus()) : w(!1);
+  }, [m]), q(() => {
     var g, $;
-    T ? (Y.current = !0, (g = se.current) == null || g.focus()) : Y.current && (Y.current = !1, ($ = A.current) == null || $.focus());
-  }, [T]), q(() => {
-    if (!E && I.current) {
-      I.current = !1;
+    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();
     }
   }, [E]);
   const _ = K((g, $) => {
-    I.current = !$, w(!1);
+    C.current = !$, w(!1);
   }, []);
   q(() => {
     if (!E) return;
@@ -1406,13 +1417,13 @@ const to = ({
       window.removeEventListener("keydown", g, !0), window.removeEventListener("keyup", $, !0);
     };
   }, [E, _]);
-  const B = s === L.IMPORTANT ? k.important : k.unclear, H = (g) => {
+  const B = s === L.IMPORTANT ? R.important : R.unclear, H = (g) => {
     g.key === "Enter" && (g.preventDefault(), l == null || l());
-  }, O = [k.note, B];
-  O.push(
-    n || mt(k, o)
-  ), r && O.push(r), e && O.push(Ke(e, N)), h && O.push(h);
-  const R = O.join(", "), U = /* @__PURE__ */ S(
+  }, 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",
@@ -1421,17 +1432,17 @@ const to = ({
       borderRadius: "medium",
       padding: "small",
       position: "relative",
-      role: y ? void 0 : f || T ? "group" : "button",
-      "aria-label": y ? void 0 : R,
-      "aria-pressed": y || f || T ? void 0 : f,
-      tabIndex: y || f ? -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: re,
-      onClick: f ? void 0 : l,
+      onClick: m ? void 0 : l,
       onMouseEnter: () => b(!0),
       onMouseLeave: () => b(!1),
-      onKeyDown: f ? void 0 : H,
-      cursor: T ? "default" : "pointer",
+      onKeyDown: m ? void 0 : H,
+      cursor: S ? "default" : "pointer",
       children: [
         /* @__PURE__ */ i(
           "div",
@@ -1439,15 +1450,16 @@ const to = ({
             "data-testid": `note-card-${t}-content`,
             style: {
               height: "100%",
-              opacity: f && E && a ? 0.25 : void 0
+              opacity: m && E && a ? 0.25 : void 0
             },
-            children: /* @__PURE__ */ S(C, { direction: "column", gap: "small", height: "100%", children: [
+            children: /* @__PURE__ */ T(I, { direction: "column", gap: "small", height: "100%", children: [
               /* @__PURE__ */ i(
                 ht,
                 {
                   type: s,
                   onTypeChange: c && u ? (g) => u(t, g) : void 0,
-                  renderAsMenuTrigger: c && !!u && !!f
+                  renderAsMenuTrigger: c && !!u && !!m,
+                  theme: h.colors
                 }
               ),
               n ? /* @__PURE__ */ i(
@@ -1458,44 +1470,44 @@ const to = ({
                     overflowWrap: "break-word",
                     whiteSpace: "pre-wrap"
                   },
-                  children: /* @__PURE__ */ i(Z, { children: f && c ? /* @__PURE__ */ i(
-                    ke,
+                  children: /* @__PURE__ */ i(Z, { children: m && c ? /* @__PURE__ */ i(
+                    we,
                     {
                       type: s,
-                      isCardActive: !!f || z,
-                      theme: p,
+                      isCardActive: !!m || z,
+                      theme: h,
                       children: n
                     }
-                  ) : /* @__PURE__ */ S(Xe, { children: [
+                  ) : /* @__PURE__ */ T(Xe, { children: [
                     v && /* @__PURE__ */ i(ye, { children: n }),
-                    /* @__PURE__ */ i("span", { "aria-hidden": v, style: { display: "block" }, children: /* @__PURE__ */ i(Se, { maxLines: 3, truncate: "word", onUpdate: j, children: /* @__PURE__ */ i(
-                      ke,
+                    /* @__PURE__ */ i("span", { "aria-hidden": v, style: { display: "block" }, children: /* @__PURE__ */ i(Te, { maxLines: 3, truncate: "word", onUpdate: j, children: /* @__PURE__ */ i(
+                      we,
                       {
                         type: s,
-                        isCardActive: !!f || z,
-                        theme: p,
+                        isCardActive: !!m || z,
+                        theme: h,
                         children: n
                       }
                     ) }) })
                   ] }) })
                 }
               ) : /* @__PURE__ */ i(gt, { reason: o }),
-              /* @__PURE__ */ i(C.Item, { shouldGrow: !0, children: /* @__PURE__ */ S(C, { direction: "column", gap: "small", height: "100%", children: [
-                T && c ? /* @__PURE__ */ S(C, { direction: "column", gap: "x-small", margin: "xx-small", children: [
+              /* @__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(ye, { children: k.editNote }),
+                      label: /* @__PURE__ */ i(ye, { children: R.editNote }),
                       value: D,
                       onChange: (g) => G(g.target.value),
-                      placeholder: k.addNoteOptional,
+                      placeholder: R.addNoteOptional,
                       textareaRef: (g) => {
                         se.current = g;
                       }
                     }
                   ),
-                  /* @__PURE__ */ S(C, { gap: "xx-small", children: [
-                    /* @__PURE__ */ i(C.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",
@@ -1504,10 +1516,10 @@ const to = ({
                         onClick: () => {
                           G(r || ""), P(!1);
                         },
-                        children: k.cancel
+                        children: R.cancel
                       }
                     ) }),
-                    /* @__PURE__ */ i(C.Item, { shouldGrow: !0, children: /* @__PURE__ */ i(
+                    /* @__PURE__ */ i(I.Item, { shouldGrow: !0, children: /* @__PURE__ */ i(
                       ne,
                       {
                         display: "block",
@@ -1515,9 +1527,9 @@ const to = ({
                         size: "small",
                         "data-testid": `note-card-${t}-save`,
                         onClick: () => {
-                          m == null || m(t, D.trim()), P(!1);
+                          f == null || f(t, D.trim()), P(!1);
                         },
-                        children: k.save
+                        children: R.save
                       }
                     ) })
                   ] })
@@ -1529,7 +1541,7 @@ const to = ({
                       overflowWrap: "break-word",
                       whiteSpace: "pre-wrap"
                     },
-                    children: f && c ? /* @__PURE__ */ S(Z, { children: [
+                    children: m && c ? /* @__PURE__ */ T(Z, { children: [
                       r,
                       " ",
                       /* @__PURE__ */ i(
@@ -1539,7 +1551,7 @@ const to = ({
                           withBackground: !1,
                           withBorder: !1,
                           margin: "xx-small 0 0 xxx-small",
-                          screenReaderLabel: k.editNote,
+                          screenReaderLabel: R.editNote,
                           "data-testid": `note-card-${t}-edit`,
                           elementRef: (g) => {
                             A.current = g;
@@ -1547,16 +1559,16 @@ const to = ({
                           onClick: (g) => {
                             g.stopPropagation(), P(!0);
                           },
-                          children: /* @__PURE__ */ i(we, {})
+                          children: /* @__PURE__ */ i(Oe, {})
                         }
                       )
-                    ] }) : /* @__PURE__ */ S(Z, { children: [
+                    ] }) : /* @__PURE__ */ T(Z, { children: [
                       ee && /* @__PURE__ */ i(ye, { children: r }),
-                      /* @__PURE__ */ i("span", { "aria-hidden": ee, style: { display: "block" }, children: /* @__PURE__ */ i(Se, { maxLines: 3, truncate: "word", onUpdate: Q, children: r }) })
+                      /* @__PURE__ */ i("span", { "aria-hidden": ee, style: { display: "block" }, children: /* @__PURE__ */ i(Te, { maxLines: 3, truncate: "word", onUpdate: Q, children: r }) })
                     ] })
                   }
-                ) : c && f ? /* @__PURE__ */ i("div", { children: /* @__PURE__ */ S(Z, { color: "secondary", children: [
-                  k.addNotePrompt,
+                ) : c && m ? /* @__PURE__ */ i("div", { children: /* @__PURE__ */ T(Z, { color: "secondary", children: [
+                  R.addNotePrompt,
                   " ",
                   /* @__PURE__ */ i(
                     ge,
@@ -1565,7 +1577,7 @@ const to = ({
                       withBackground: !1,
                       withBorder: !1,
                       margin: "xx-small 0 0 xxx-small",
-                      screenReaderLabel: k.editNote,
+                      screenReaderLabel: R.editNote,
                       "data-testid": `note-card-${t}-edit`,
                       elementRef: (g) => {
                         A.current = g;
@@ -1573,13 +1585,13 @@ const to = ({
                       onClick: (g) => {
                         g.stopPropagation(), P(!0);
                       },
-                      children: /* @__PURE__ */ i(we, {})
+                      children: /* @__PURE__ */ i(Oe, {})
                     }
                   )
                 ] }) }) : null,
-                /* @__PURE__ */ S(C, { justifyItems: "space-between", alignItems: "center", margin: "auto 0 0 0", children: [
+                /* @__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) }),
-                  f && a && /* @__PURE__ */ i(
+                  m && a && /* @__PURE__ */ i(
                     ge,
                     {
                       size: "small",
@@ -1587,19 +1599,19 @@ const to = ({
                       withBorder: !1,
                       color: "danger",
                       margin: "xx-small",
-                      screenReaderLabel: k.deleteNote,
+                      screenReaderLabel: R.deleteNote,
                       "data-testid": `note-card-${t}-delete`,
                       elementRef: (g) => {
                         ue.current = g;
                       },
                       onClick: (g) => {
-                        g.stopPropagation(), I.current = !1, w(!0);
+                        g.stopPropagation(), C.current = !1, w(!0);
                       },
-                      children: /* @__PURE__ */ i(Te, {})
+                      children: /* @__PURE__ */ i(Se, {})
                     }
                   )
                 ] }),
-                h && /* @__PURE__ */ S(
+                y && /* @__PURE__ */ T(
                   Z,
                   {
                     as: "div",
@@ -1607,8 +1619,8 @@ const to = ({
                     color: "secondary",
                     "data-testid": `note-card-${t}-course`,
                     children: [
-                      ae && /* @__PURE__ */ i(ye, { children: h }),
-                      /* @__PURE__ */ i("span", { "aria-hidden": ae, style: { display: "block" }, children: /* @__PURE__ */ i(Se, { maxLines: 1, onUpdate: de, children: h }) })
+                      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 }) })
                     ]
                   }
                 )
@@ -1616,12 +1628,12 @@ const to = ({
             ] })
           }
         ),
-        f && E && a && /* @__PURE__ */ i(
-          It,
+        m && E && a && /* @__PURE__ */ i(
+          Ct,
           {
             open: !0,
             as: "div",
-            label: k.deleteNoteConfirmation,
+            label: R.deleteNoteConfirmation,
             shouldContainFocus: !0,
             shouldFocusOnOpen: !0,
             defaultFocusElement: () => M.current,
@@ -1642,8 +1654,8 @@ const to = ({
                 insetInlineStart: "0",
                 insetInlineEnd: "0",
                 stacking: "above",
-                children: /* @__PURE__ */ S(
-                  C,
+                children: /* @__PURE__ */ T(
+                  I,
                   {
                     direction: "column",
                     justifyItems: "center",
@@ -1657,12 +1669,12 @@ const to = ({
                           display: "block",
                           color: "danger",
                           withBackground: !1,
-                          renderIcon: /* @__PURE__ */ i(Te, {}),
+                          renderIcon: /* @__PURE__ */ i(Se, {}),
                           "data-testid": `note-card-${t}-confirm-delete`,
                           onClick: (g) => {
                             g.stopPropagation(), a(t), w(!1);
                           },
-                          children: k.deleteNote
+                          children: R.deleteNote
                         }
                       ),
                       /* @__PURE__ */ i(
@@ -1677,7 +1689,7 @@ const to = ({
                           onClick: (g) => {
                             g.stopPropagation(), _();
                           },
-                          children: k.cancel
+                          children: R.cancel
                         }
                       )
                     ]
@@ -1690,8 +1702,8 @@ const to = ({
       ]
     }
   );
-  return y && x ? x({ href: y, children: U, ariaLabel: R }) : U;
-}, no = {
+  return p && x ? x({ href: p, children: U, ariaLabel: O }) : U;
+}, oo = {
   display: "grid",
   gap: "1rem",
   boxSizing: "border-box",
@@ -1699,7 +1711,7 @@ const to = ({
   margin: 0,
   padding: 0,
   listStyle: "none"
-}, Lo = ({
+}, Ao = ({
   notes: t,
   isLoading: e,
   isError: n,
@@ -1708,19 +1720,19 @@ const to = ({
   onPageChange: s,
   onNoteSelect: l,
   onNoteDelete: a,
-  onNoteSave: m,
+  onNoteSave: f,
   onNoteTypeChange: u,
-  onNotesEmptied: f,
+  onNotesEmptied: m,
   selectedNoteId: c,
-  hasActiveFilter: h = !1,
+  hasActiveFilter: y = !1,
   columnCount: N = 1,
-  highlightTheme: p,
+  highlightTheme: h,
   locale: x,
-  courseNames: y,
-  renderNoteLink: k,
+  courseNames: p,
+  renderNoteLink: R,
   noteHref: z
 }) => {
-  const { translations: b } = J(), T = F(null), P = F(null), D = K(
+  const { translations: b } = J(), S = F(null), P = F(null), D = K(
     (E) => {
       const w = t.findIndex((j) => j.id === E);
       let v = null;
@@ -1733,32 +1745,32 @@ const to = ({
     const E = P.current;
     if (E)
       if (P.current = null, E.targetId === null)
-        f == null || f();
+        m == null || m();
       else {
-        const v = (w = T.current) == null ? void 0 : w.querySelector(
+        const v = (w = S.current) == null ? void 0 : w.querySelector(
           `[data-testid="note-card-${E.targetId}"]`
         );
         v == null || v.focus();
       }
-  }, [t, f]), e)
+  }, [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(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(Jn, { hasActiveFilter: h }) });
+    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__ */ S(Xe, { children: [
+  return /* @__PURE__ */ T(Xe, { children: [
     /* @__PURE__ */ i(
       "ul",
       {
-        ref: T,
-        style: { ...no, gridTemplateColumns: `repeat(${N}, minmax(0, 1fr))` },
+        ref: S,
+        style: { ...oo, gridTemplateColumns: `repeat(${N}, minmax(0, 1fr))` },
         role: "list",
         "data-testid": "notes-grid",
         children: t.map((E) => {
           var w;
           return /* @__PURE__ */ i("li", { children: /* @__PURE__ */ i(
-            to,
+            no,
             {
               noteId: E.id,
               date: E.createdAt,
@@ -1770,20 +1782,20 @@ const to = ({
               isPanelView: !!c,
               onClick: l ? () => l(E.id) : void 0,
               onDelete: a ? D : void 0,
-              onSaveNote: m ? (v, j) => m(v, j) : void 0,
+              onSaveNote: f ? (v, j) => f(v, j) : void 0,
               onTypeChange: u ? (v, j) => u(v, j) : void 0,
-              highlightTheme: p,
+              highlightTheme: h,
               locale: x,
-              courseName: y == null ? void 0 : y.get(E.courseId),
-              renderLink: k,
+              courseName: p == null ? void 0 : p.get(E.courseId),
+              renderLink: R,
               href: z ? z(E.id, E) : void 0
             }
           ) }, E.id);
         })
       }
     ),
-    G && /* @__PURE__ */ i(C, { justifyItems: "center", padding: "small", "data-testid": "notes-pagination", children: /* @__PURE__ */ i(C.Item, { children: /* @__PURE__ */ i(
-      Ct,
+    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",
@@ -1795,7 +1807,7 @@ const to = ({
       }
     ) }) })
   ] });
-}, Ao = ({
+}, Do = ({
   noteText: t,
   reaction: e,
   highlightText: n,
@@ -1804,24 +1816,32 @@ const to = ({
   onDelete: s,
   onTypeChange: l,
   onBack: a,
-  editing: m = !1
+  editing: f = !1
 }) => {
-  const { translations: u } = J(), [f, c] = W(m), [h, N] = W(t || ""), [p, x] = W(!1);
-  return /* @__PURE__ */ S(C, { direction: "column", gap: "small", "data-testid": "single-note", children: [
-    n != null ? /* @__PURE__ */ i(V, { as: "div", children: /* @__PURE__ */ i(Z, { children: /* @__PURE__ */ i(ke, { type: e, isCardActive: !0, theme: o, children: n }) }) }) : /* @__PURE__ */ i(gt, {}),
-    /* @__PURE__ */ i(ht, { type: e, onTypeChange: l, renderAsMenuTrigger: !!l }),
-    f ? /* @__PURE__ */ S(C, { 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: u.addNoteOptional,
-          value: h,
-          onChange: (y) => N(y.target.value),
+          value: y,
+          onChange: (p) => N(p.target.value),
           resize: "vertical"
         }
       ),
-      /* @__PURE__ */ S(C, { gap: "xx-small", children: [
-        /* @__PURE__ */ i(C.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",
@@ -1833,7 +1853,7 @@ const to = ({
             children: u.cancel
           }
         ) }),
-        /* @__PURE__ */ i(C.Item, { shouldGrow: !0, children: /* @__PURE__ */ i(
+        /* @__PURE__ */ i(I.Item, { shouldGrow: !0, children: /* @__PURE__ */ i(
           ne,
           {
             display: "block",
@@ -1841,18 +1861,18 @@ const to = ({
             size: "small",
             "data-testid": "single-note-save",
             onClick: () => {
-              r(h), c(!1);
+              r(y), c(!1);
             },
             children: u.save
           }
         ) })
       ] })
-    ] }) : /* @__PURE__ */ S(C, { direction: "column", gap: "small", children: [
-      t && /* @__PURE__ */ S(V, { as: "div", children: [
+    ] }) : /* @__PURE__ */ T(I, { direction: "column", gap: "small", children: [
+      t && /* @__PURE__ */ T(V, { as: "div", children: [
         /* @__PURE__ */ i(ve, { level: "h4", margin: "0 0 xx-small 0", children: u.note }),
         /* @__PURE__ */ i(Z, { children: t })
       ] }),
-      /* @__PURE__ */ S(C, { justifyItems: "space-between", children: [
+      /* @__PURE__ */ T(I, { justifyItems: "space-between", children: [
         /* @__PURE__ */ i(
           ne,
           {
@@ -1863,7 +1883,7 @@ const to = ({
             children: u.back
           }
         ),
-        /* @__PURE__ */ S(C, { gap: "xx-small", children: [
+        /* @__PURE__ */ T(I, { gap: "xx-small", children: [
           s && /* @__PURE__ */ i(
             ge,
             {
@@ -1874,7 +1894,7 @@ const to = ({
               screenReaderLabel: u.deleteNote,
               "data-testid": "single-note-delete",
               onClick: () => x(!0),
-              children: /* @__PURE__ */ i(Te, {})
+              children: /* @__PURE__ */ i(Se, {})
             }
           ),
           /* @__PURE__ */ i(
@@ -1886,19 +1906,19 @@ const to = ({
               screenReaderLabel: u.editNote,
               "data-testid": "single-note-edit",
               onClick: () => c(!0),
-              children: /* @__PURE__ */ i(we, {})
+              children: /* @__PURE__ */ i(Oe, {})
             }
           )
         ] })
       ] }),
-      p && s && /* @__PURE__ */ i(V, { as: "div", background: "primary", padding: "medium", borderRadius: "large", children: /* @__PURE__ */ S(C, { 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(), x(!1);
@@ -1922,18 +1942,18 @@ const to = ({
 };
 export {
   wo as ContentWithNoteWrapper,
-  ke as Highlight,
+  we as Highlight,
   gt as HighlightError,
-  to as NoteCard,
+  no as NoteCard,
   ht as NoteChip,
   Vn as NoteReactionMenu,
   Jn as NotebookEmptyState,
-  xo as NotebookProvider,
+  Ro as NotebookProvider,
   qn as NotebookTranslationsProvider,
-  Ro as NotebookTray,
-  Lo as NotesListView,
+  Oo as NotebookTray,
+  Ao as NotesListView,
   L as REACTION_TYPE,
-  Ao as SingleNote,
+  Do as SingleNote,
   Me as createTransparentColor,
   mt as getHighlightUnavailableMessage,
   tn as useCreateNote,
@@ -1942,6 +1962,6 @@ export {
   ut as useNotebook,
   J as useNotebookTranslations,
   ko as useNotesData,
-  Oo as useReactionFilter,
+  Lo as useReactionFilter,
   rn as useUpdateNote
 };