chordia-ui 4.0.1 → 4.0.2

package/dist/components/UpdatedInteractionDetails.es.js

@@ -1,6 +1,6 @@
 import { jsxs as i, Fragment as Le, jsx as t } from "react/jsx-runtime";
 import Se, { useState as I, useRef as $, useEffect as Be, useMemo as We } from "react";
-import { u as xe } from "../useMediaQuery.es.js";
+import { u as ve } from "../useMediaQuery.es.js";
 import { ShieldCheck as Jn, TrendingUp as Un, Lightbulb as en, ThumbsUp as tn, ArrowLeftRight as ei, ArrowDown as Ne, ArrowUp as Pe, ChevronUp as at, ChevronDown as je, Pencil as ti, FileSignal as nn, ScrollText as rn, PauseCircle as ln, PlayCircle as on, Info as an, MessagesSquare as Tt, Check as ni, CircleCheck as ii, Ellipsis as ri, X as At, CornerDownRight as li, Target as sn, ChevronRight as dn, AudioLines as oi, Search as ai, Pause as Rt, ArrowRightLeft as si, CircleDashed as di, MicOff as ci, ClipboardCheck as fi, ArrowLeft as rt, ArrowRight as Lt, ClipboardList as pi, CalendarDays as Bt, PhoneOutgoing as Nt, PhoneIncoming as Pt, Headset as jt, CircleUser as lt, History as gi, ExternalLink as hi, ThumbsDown as ui } from "lucide-react";
 import { U as yi } from "../UpdatedInteractionRecording.es.js";
 import { A as mi } from "../AgentLiftAnalysisCard.es.js";
@@ -159,7 +159,7 @@ const Fi = ({ data: e, loading: n, error: r }) => {
   Se.useEffect(() => {
     bi();
   }, []);
-  const o = xe("(max-width: 900px)");
+  const o = ve("(max-width: 900px)");
   if (n)
     return /* @__PURE__ */ i(Le, { children: [
       /* @__PURE__ */ t("style", { children: `
@@ -373,7 +373,7 @@ const Yt = {
   // Customer Intent, Paradigm) plus a "Number" (interaction id) render inline.
   flatView: k = !1
 }) => {
-  const [S, W] = I(!1), D = $(null), L = xe("(max-width: 640px)"), C = e.duration_seconds != null ? Wi(e.duration_seconds) : null, z = e.message_count, T = n.interaction_driver, Y = r.interaction_paradigm, N = (h) => o.find((R) => (R.key || "").toLowerCase().includes(h)), q = N("resolution_outcome"), ee = N("customer_intent"), A = N("location"), y = N("outcome_quality"), m = (h) => h ? h.replace(/_/g, " ").replace(/\b\w/g, (R) => R.toUpperCase()) : null, u = a !== "Neutral" ? a : y ? m(y.value) : a, te = f ?? (q ? m(q.value) : null), re = p ?? (ee ? m(ee.value) : null), le = b ?? (A ? m(A.value) : null), ne = Y != null ? m(Y) : null, se = new Set(["resolution_outcome", "customer_intent", "location", "outcome_quality"].map((h) => `dim.${h}`)), B = o.filter((h) => !se.has(h.key)), de = [], ge = [
+  const [S, W] = I(!1), D = $(null), L = ve("(max-width: 640px)"), C = e.duration_seconds != null ? Wi(e.duration_seconds) : null, z = e.message_count, T = n.interaction_driver, Y = r.interaction_paradigm, N = (h) => o.find((R) => (R.key || "").toLowerCase().includes(h)), q = N("resolution_outcome"), ee = N("customer_intent"), A = N("location"), y = N("outcome_quality"), m = (h) => h ? h.replace(/_/g, " ").replace(/\b\w/g, (R) => R.toUpperCase()) : null, u = a !== "Neutral" ? a : y ? m(y.value) : a, te = f ?? (q ? m(q.value) : null), re = p ?? (ee ? m(ee.value) : null), le = b ?? (A ? m(A.value) : null), ne = Y != null ? m(Y) : null, se = new Set(["resolution_outcome", "customer_intent", "location", "outcome_quality"].map((h) => `dim.${h}`)), B = o.filter((h) => !se.has(h.key)), xe = [], pe = [
     [
       C != null ? { label: "Duration", value: C } : null,
       z != null ? { label: "Messages", value: z } : null
@@ -385,20 +385,20 @@ const Yt = {
     ]
   ];
   for (let h = 0; h < B.length; h += 2) {
-    const R = B[h] ? { label: B[h].display_name || B[h].label || B[h].key, value: m(B[h].value) } : null, ue = B[h + 1] ? { label: B[h + 1].display_name || B[h + 1].label || B[h + 1].key, value: m(B[h + 1].value) } : null;
-    ge.push([R, ue]);
+    const R = B[h] ? { label: B[h].display_name || B[h].label || B[h].key, value: m(B[h].value) } : null, he = B[h + 1] ? { label: B[h + 1].display_name || B[h + 1].label || B[h + 1].key, value: m(B[h + 1].value) } : null;
+    pe.push([R, he]);
   }
-  ge.push([
+  pe.push([
     { label: "Outcome Quality", value: u },
     { isMoreDetails: !0 }
-  ]), ge.forEach((h) => de.push(h));
-  const ce = [
+  ]), pe.forEach((h) => xe.push(h));
+  const de = [
     te != null && { label: "Resolution Outcome", value: te },
     re != null && { label: "Customer Intent", value: re },
     // resolvedLocation != null && { label: 'Location', value: resolvedLocation },
     ne != null && { label: "Paradigm", value: ne },
     ...d || []
-  ].filter(Boolean), he = [];
+  ].filter(Boolean), ge = [];
   if (k) {
     const h = [
       C != null && { label: "Duration", value: C },
@@ -417,9 +417,9 @@ const Yt = {
       w != null && w !== "" && { label: "Number", value: w }
     ].filter(Boolean);
     for (let R = 0; R < h.length; R += 2)
-      he.push([h[R], h[R + 1] || null]);
+      ge.push([h[R], h[R + 1] || null]);
   }
-  const c = k ? he : de;
+  const c = k ? ge : xe;
   Be(() => {
     if (!S)
       return;
@@ -544,7 +544,7 @@ const Yt = {
       },
       children: [
         c.map((h, R) => {
-          var ue;
+          var he;
           return /* @__PURE__ */ i(
             "div",
             {
@@ -558,13 +558,13 @@ const Yt = {
               },
               children: [
                 /* @__PURE__ */ t("div", { style: Yt, children: h[0] && !h[0].isMoreDetails ? Q(h[0]) : /* @__PURE__ */ t("div", { style: { flex: 1 } }) }),
-                /* @__PURE__ */ t("div", { style: Yt, children: h[1] && !h[1].isMoreDetails ? Q(h[1]) : (ue = h[1]) != null && ue.isMoreDetails ? Oe() : /* @__PURE__ */ t("div", { style: { flex: 1 } }) })
+                /* @__PURE__ */ t("div", { style: Yt, children: h[1] && !h[1].isMoreDetails ? Q(h[1]) : (he = h[1]) != null && he.isMoreDetails ? Oe() : /* @__PURE__ */ t("div", { style: { flex: 1 } }) })
               ]
             },
             R
           );
         }),
-        !k && S && ce.length > 0 && /* @__PURE__ */ i(
+        !k && S && de.length > 0 && /* @__PURE__ */ i(
           "div",
           {
             style: {
@@ -594,7 +594,7 @@ const Yt = {
                 borderBottom: "1px solid var(--Grey-absent, #D9D9D9)",
                 alignSelf: "stretch"
               }, children: "More details" }),
-              ce.map((h) => /* @__PURE__ */ i(
+              de.map((h) => /* @__PURE__ */ i(
                 "div",
                 {
                   style: {
@@ -1069,7 +1069,7 @@ const Yt = {
     { label: "Communication", value: 3 }
   ]
 }) => {
-  const p = xe("(max-width: 640px)"), b = Number(e), w = Number.isFinite(b) ? Math.min(Math.max(b, n), r) : n, H = w.toFixed(1), g = H.endsWith(".0") ? H.slice(0, -2) : H;
+  const p = ve("(max-width: 640px)"), b = Number(e), w = Number.isFinite(b) ? Math.min(Math.max(b, n), r) : n, H = w.toFixed(1), g = H.endsWith(".0") ? H.slice(0, -2) : H;
   return /* @__PURE__ */ i("div", { style: {
     display: "flex",
     flexDirection: "column",
@@ -1307,8 +1307,8 @@ const Yt = {
   onMenuClick: f,
   showReply: p = !0
 }) => {
-  var ce, he;
-  const [b, w] = I(!1), [H, g] = I(!1), [k, S] = I(!1), [W, D] = I(""), [L, C] = I(!1), [z, T] = I(""), [Y, N] = I(!1), q = $(null), ee = $(null), A = $(null), y = e.author || {}, m = y.name || e.author_name || "Unknown", u = y.initials || $e(m), te = y.role || e.author_role, re = y.color || cn(te) || "#6B7C93", le = y.avatar || e.avatar, ne = e.timestamp || e.created_at, se = Bi(ne), B = Li(ne), de = !!(e.isEdited || e.is_edited || e.edited), ge = Array.isArray(e.content) ? e.content : [e.content || e.text || ""];
+  var de, ge;
+  const [b, w] = I(!1), [H, g] = I(!1), [k, S] = I(!1), [W, D] = I(""), [L, C] = I(!1), [z, T] = I(""), [Y, N] = I(!1), q = $(null), ee = $(null), A = $(null), y = e.author || {}, m = y.name || e.author_name || "Unknown", u = y.initials || $e(m), te = y.role || e.author_role, re = y.color || cn(te) || "#6B7C93", le = y.avatar || e.avatar, ne = e.timestamp || e.created_at, se = Bi(ne), B = Li(ne), xe = !!(e.isEdited || e.is_edited || e.edited), pe = Array.isArray(e.content) ? e.content : [e.content || e.text || ""];
   return Se.useEffect(() => {
     if (!H)
       return;
@@ -1391,7 +1391,7 @@ const Yt = {
                       children: se
                     }
                   ),
-                  de && /* @__PURE__ */ t(
+                  xe && /* @__PURE__ */ t(
                     "span",
                     {
                       style: {
@@ -1596,7 +1596,7 @@ const Yt = {
                           children: [
                             "“",
                             " ",
-                            ((ce = e.author) == null ? void 0 : ce.name) || "Unknown"
+                            ((de = e.author) == null ? void 0 : de.name) || "Unknown"
                           ]
                         }
                       ),
@@ -1700,7 +1700,7 @@ const Yt = {
             }
           ) : (
             /* Message bubbles — stacked, gap: 4px, fit content */
-            /* @__PURE__ */ t("div", { style: { display: "flex", flexDirection: "column", gap: 4, alignItems: "flex-start" }, children: ge.map((c, Q) => /* @__PURE__ */ t(
+            /* @__PURE__ */ t("div", { style: { display: "flex", flexDirection: "column", gap: 4, alignItems: "flex-start" }, children: pe.map((c, Q) => /* @__PURE__ */ t(
               "div",
               {
                 style: {
@@ -1861,7 +1861,7 @@ const Yt = {
                             children: [
                               "“",
                               " ",
-                              ((he = e.author) == null ? void 0 : he.name) || "Unknown"
+                              ((ge = e.author) == null ? void 0 : ge.name) || "Unknown"
                             ]
                           }
                         ),
@@ -2232,7 +2232,7 @@ const Yt = {
       replies: (y[u.id] || []).map(m)
     });
     return D.filter((u) => !u.parentId).map(m);
-  }, [D]), q = n ?? D.length, ee = xe("(max-width: 900px)"), A = xe("(max-width: 640px)");
+  }, [D]), q = n ?? D.length, ee = ve("(max-width: 900px)"), A = ve("(max-width: 640px)");
   return /* @__PURE__ */ i(
     "div",
     {
@@ -3560,7 +3560,7 @@ const Yt = {
       ]
     }
   );
-}, ve = ({ text: e, children: n }) => {
+}, me = ({ text: e, children: n }) => {
   const [r, o] = I(!1), a = $(null), [l, d] = I({ top: 0, left: 0 });
   return e ? /* @__PURE__ */ i(
     "div",
@@ -3668,14 +3668,14 @@ const br = ({
   interactionId: se,
   moreDetails: B,
   // Compass score props
-  compassScore: de,
+  compassScore: xe,
   // gauge meter value — compass_score, range 0.5-5
-  compassMaxScore: ge = 5,
+  compassMaxScore: pe = 5,
   // Compass score as a backend-computed percentage (0–100), shown in the
   // bracket next to the score, e.g. "3.5 (62.5%)". Prefer this over any local
   // score→percent conversion; null hides the bracket.
-  compassScorePct: ce = null,
-  predictedCsat: he,
+  compassScorePct: de = null,
+  predictedCsat: ge,
   // predicted objective number (e.g. compass_score) — shown as "03" top-right
   predictedLabel: c = "Predicted Objective",
   compassLegends: Q,
@@ -3683,12 +3683,12 @@ const br = ({
   customerSessions: Oe,
   customerSessionCount: h,
   onSessionClick: R,
-  onViewAllSessions: ue,
+  onViewAllSessions: he,
   // Footer navigation
   prevSessionDesc: st,
-  prevSessionDisabled: fe = !1,
+  prevSessionDisabled: ce = !1,
   nextSessionDesc: dt,
-  nextSessionDisabled: pe = !1,
+  nextSessionDisabled: fe = !1,
   onPreviousSession: De,
   onNextSession: ze,
   // Comments
@@ -3722,7 +3722,7 @@ const br = ({
   commentsResolved: Fn
 }) => {
   var Mt;
-  const [Ve, Me] = I("overview"), [Wn, ft] = I(/* @__PURE__ */ new Set()), [In, Ge] = I(!1), [Dn, pt] = I(null), [gt, ht] = I(!1), [ut, zn] = I(0), [yt, Mn] = I(!1), _ = xe("(max-width: 640px)"), ye = $(null), qe = $(null), mt = $(null), He = $(null), vt = $(null), xt = $(null), bt = {
+  const [Ve, Me] = I("overview"), [Wn, ft] = I(/* @__PURE__ */ new Set()), [In, Ge] = I(!1), [Dn, pt] = I(null), [gt, ht] = I(!1), [ut, zn] = I(0), [yt, Mn] = I(!1), _ = ve("(max-width: 640px)"), ue = $(null), qe = $(null), mt = $(null), He = $(null), vt = $(null), xt = $(null), bt = {
     overview: qe,
     coaching: mt,
     signals: He,
@@ -3807,7 +3807,7 @@ const br = ({
     const x = s / 1e3;
     setTimeout(() => {
       var F;
-      (F = ye.current) != null && F.scrollToTranscript && ye.current.scrollToTranscript(x);
+      (F = ue.current) != null && F.scrollToTranscript && ue.current.scrollToTranscript(x);
     }, 220);
   }, Ct = (s) => {
     Me("signals");
@@ -3825,10 +3825,10 @@ const br = ({
     const x = (s == null ? void 0 : s.start_ms) ?? (s == null ? void 0 : s.startMs);
     setTimeout(() => {
       var F, M;
-      if (x != null && ((F = ye.current) != null && F.scrollToTranscript) && ye.current.scrollToTranscript(x / 1e3), A)
+      if (x != null && ((F = ue.current) != null && F.scrollToTranscript) && ue.current.scrollToTranscript(x / 1e3), A)
         A(s);
-      else if (x != null && ((M = ye.current) != null && M.seekTo)) {
-        ye.current.seekTo(x / 1e3), ht(!0), zn(x / 1e3);
+      else if (x != null && ((M = ue.current) != null && M.seekTo)) {
+        ue.current.seekTo(x / 1e3), ht(!0), zn(x / 1e3);
         const j = (s.end_ms ?? s.endMs ?? x + 5e3) - x;
         setTimeout(() => ht(!1), j);
       }
@@ -3885,11 +3885,11 @@ const br = ({
         flexShrink: 0,
         ..._ ? { width: "100%", justifyContent: "space-between", order: 1 } : {}
       }, children: [
-        /* @__PURE__ */ t(ve, { text: st, children: /* @__PURE__ */ i(
+        /* @__PURE__ */ t(me, { text: st, children: /* @__PURE__ */ i(
           "button",
           {
-            onClick: fe ? void 0 : De,
-            disabled: fe,
+            onClick: ce ? void 0 : De,
+            disabled: ce,
             style: {
               display: "flex",
               alignItems: "center",
@@ -3897,8 +3897,8 @@ const br = ({
               padding: "4px 12px",
               background: "none",
               border: "none",
-              cursor: fe ? "default" : "pointer",
-              opacity: fe ? 0.4 : 1
+              cursor: ce ? "default" : "pointer",
+              opacity: ce ? 0.4 : 1
             },
             children: [
               /* @__PURE__ */ t(rt, { size: 16, color: "var(--Neutral-800, #323232)", strokeWidth: 1.5 }),
@@ -3919,11 +3919,11 @@ const br = ({
           background: "var(--Grey-absent, #D9D9D9)",
           flexShrink: 0
         } }),
-        /* @__PURE__ */ t(ve, { text: dt, children: /* @__PURE__ */ i(
+        /* @__PURE__ */ t(me, { text: dt, children: /* @__PURE__ */ i(
           "button",
           {
-            onClick: pe ? void 0 : ze,
-            disabled: pe,
+            onClick: fe ? void 0 : ze,
+            disabled: fe,
             style: {
               display: "flex",
               alignItems: "center",
@@ -3931,8 +3931,8 @@ const br = ({
               padding: "4px 12px",
               background: "none",
               border: "none",
-              cursor: pe ? "default" : "pointer",
-              opacity: pe ? 0.4 : 1
+              cursor: fe ? "default" : "pointer",
+              opacity: fe ? 0.4 : 1
             },
             children: [
               /* @__PURE__ */ t("span", { style: {
@@ -4000,11 +4000,11 @@ const br = ({
         }
       ),
       (De || ze) && yt && /* @__PURE__ */ i("div", { style: { display: "flex", alignItems: "center", flexShrink: 0 }, children: [
-        /* @__PURE__ */ t(ve, { text: st, children: /* @__PURE__ */ i(
+        /* @__PURE__ */ t(me, { text: st, children: /* @__PURE__ */ i(
           "button",
           {
-            onClick: fe ? void 0 : De,
-            disabled: fe,
+            onClick: ce ? void 0 : De,
+            disabled: ce,
             style: {
               display: "flex",
               alignItems: "center",
@@ -4012,8 +4012,8 @@ const br = ({
               padding: "4px 12px",
               background: "none",
               border: "none",
-              cursor: fe ? "default" : "pointer",
-              opacity: fe ? 0.4 : 1
+              cursor: ce ? "default" : "pointer",
+              opacity: ce ? 0.4 : 1
             },
             children: [
               /* @__PURE__ */ t(rt, { size: 16, color: "var(--Neutral-800, #323232)", strokeWidth: 1.5 }),
@@ -4034,11 +4034,11 @@ const br = ({
           background: "var(--Grey-absent, #D9D9D9)",
           flexShrink: 0
         } }),
-        /* @__PURE__ */ t(ve, { text: dt, children: /* @__PURE__ */ i(
+        /* @__PURE__ */ t(me, { text: dt, children: /* @__PURE__ */ i(
           "button",
           {
-            onClick: pe ? void 0 : ze,
-            disabled: pe,
+            onClick: fe ? void 0 : ze,
+            disabled: fe,
             style: {
               display: "flex",
               alignItems: "center",
@@ -4046,8 +4046,8 @@ const br = ({
               padding: "4px 12px",
               background: "none",
               border: "none",
-              cursor: pe ? "default" : "pointer",
-              opacity: pe ? 0.4 : 1
+              cursor: fe ? "default" : "pointer",
+              opacity: fe ? 0.4 : 1
             },
             children: [
               /* @__PURE__ */ t("span", { style: {
@@ -4110,11 +4110,11 @@ const br = ({
               gap: _ ? 12 : 16,
               ..._ ? { flexBasis: "100%", width: "100%" } : { paddingLeft: 16, borderLeft: "1px solid var(--Grey-absent, #D9D9D9)" }
             }, children: [
-              /* @__PURE__ */ t(ve, { text: jn, children: /* @__PURE__ */ i("div", { style: { display: "flex", alignItems: "center", gap: 6, padding: "8px 0", cursor: "pointer" }, children: [
+              /* @__PURE__ */ t(me, { text: jn, children: /* @__PURE__ */ i("div", { style: { display: "flex", alignItems: "center", gap: 6, padding: "8px 0", cursor: "pointer" }, children: [
                 /* @__PURE__ */ t(jt, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.5 }),
                 /* @__PURE__ */ t("span", { style: { fontSize: 13, fontWeight: 400, color: "var(--Grey-Strong, #2E3236)", fontFamily: "var(--font-sans)", lineHeight: 1.2 }, children: Ue })
               ] }) }),
-              tt > 1 ? /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(ve, { text: Dt, children: /* @__PURE__ */ i(
+              tt > 1 ? /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(me, { text: Dt, children: /* @__PURE__ */ i(
                 "button",
                 {
                   onClick: () => Ge(!0),
@@ -4145,7 +4145,7 @@ const br = ({
                     /* @__PURE__ */ t(dn, { size: 16, color: "var(--Grey-Strong, #2E3236)", strokeWidth: 1.7 })
                   ]
                 }
-              ) }) }) : /* @__PURE__ */ t(ve, { text: Dt, children: /* @__PURE__ */ i("div", { style: { display: "flex", alignItems: "center", gap: 4, padding: "8px 0", cursor: "pointer" }, children: [
+              ) }) }) : /* @__PURE__ */ t(me, { text: Dt, children: /* @__PURE__ */ i("div", { style: { display: "flex", alignItems: "center", gap: 4, padding: "8px 0", cursor: "pointer" }, children: [
                 /* @__PURE__ */ t(lt, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.5 }),
                 /* @__PURE__ */ t("span", { style: { fontSize: 13, fontWeight: 400, color: "var(--Grey-Strong, #2E3236)", lineHeight: 1.2 }, children: Fe })
               ] }) })
@@ -4162,13 +4162,13 @@ const br = ({
           /* @__PURE__ */ t("div", { style: { flex: 1, minWidth: 0, display: "flex" }, children: /* @__PURE__ */ t(
             Ai,
             {
-              score: de ?? 0.5,
+              score: xe ?? 0.5,
               minScore: 0,
-              maxScore: ge,
-              predictedScore: he ?? 0.5,
+              maxScore: pe,
+              predictedScore: ge ?? 0.5,
               predictedLabel: c,
               legends: Q,
-              outcomePercent: ce ?? (de != null ? Math.min(100, Math.max(0, Math.round((de - 1) / 4 * 1e3) / 10)) : null)
+              outcomePercent: de ?? null
             }
           ) }),
           /* @__PURE__ */ i("div", { style: {
@@ -4203,16 +4203,16 @@ const br = ({
               const s = Wt || {}, v = s.difficulty, x = s.difficulty_band, F = s.p_expected, M = s.score_impact ?? F, P = s.lift_raw, j = s.lift_display, ie = (_t = s.interpretation) == null ? void 0 : _t.lift_band, we = s.p_full, ae = (Et = s.interpretation) == null ? void 0 : Et.description;
               if (!(v != null || x != null || P != null || ie != null || we != null || ae != null))
                 return null;
-              const it = (me, Ae, Xn) => Math.max(Ae, Math.min(Xn, me)), Kn = v != null ? it((v - 50) / 50, -1, 1) : 0, Vn = P != null ? it(P * 3, -1, 1) : 0, Gt = M != null ? Math.round(M * 100) : null, Ht = (me) => {
-                if (me)
-                  return String(me).split("_").map(
+              const it = (ye, Ae, Xn) => Math.max(Ae, Math.min(Xn, ye)), Kn = v != null ? it((v - 50) / 50, -1, 1) : 0, Vn = P != null ? it(P * 3, -1, 1) : 0, Gt = M != null ? Math.round(M * 100) : null, Ht = (ye) => {
+                if (ye)
+                  return String(ye).split("_").map(
                     (Ae) => Ae.charAt(0).toUpperCase() + Ae.slice(1).toLowerCase()
                   ).join(" ");
               }, qn = Ht(x), Qn = Ht(ie), Zn = (() => {
                 if (typeof j == "string") {
-                  const me = parseFloat(j.replace("%", ""));
-                  if (Number.isFinite(me))
-                    return me;
+                  const ye = parseFloat(j.replace("%", ""));
+                  if (Number.isFinite(ye))
+                    return ye;
                 }
                 return P != null ? Math.round(P * 100) : null;
               })();
@@ -4293,7 +4293,7 @@ const br = ({
           /* @__PURE__ */ t("div", { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ t(
             yi,
             {
-              ref: ye,
+              ref: ue,
               audioUrl: l,
               durationSeconds: Ft.duration_seconds,
               audioRef: d,
@@ -4414,7 +4414,7 @@ const br = ({
           "button",
           {
             onClick: () => {
-              ue && ue(), Ge(!1);
+              he && he(), Ge(!1);
             },
             style: {
               display: "flex",
@@ -4565,7 +4565,7 @@ const br = ({
   return e > 0 ? `+${n}pp` : `${n}pp`;
 }, wr = ({ outcomeLift: e, driverLabels: n = [], showOutcomeOnly: r = !1 }) => {
   var S;
-  const o = xe("(max-width: 640px)");
+  const o = ve("(max-width: 640px)");
   if (!e || e.lift == null)
     return null;
   const a = e.p_expected, l = e.p_full, d = e.lift_raw ?? (l != null && a != null ? l - a : null), f = e.lift, p = (S = e.interpretation) != null && S.lift_band ? e.interpretation.lift_band.replace(/_/g, " ") : f >= 0 ? "Positive" : "Negative", b = p.charAt(0).toUpperCase() + p.slice(1), H = /negative/i.test(p) ? ui : tn, g = n.slice(0, Jt), k = n.length - Jt;