@ethora/chat-component 26.8.1 → 26.9.0

package/README.md

@@ -360,6 +360,7 @@ Below is a grouped reference for all `config` options.
 | `headerChatMenu` | `() => void` | Same for the chat header's room menu (the "more" button carrying Report and Leave). When set, that dropdown is not rendered and the button calls your handler. |
 | `colors` | `{ primary; secondary; icons?; ownMessageBackground?; otherMessageBackground?; inputBackground? }` | Theme colours. `primary` drives icon colours and the sender name. `icons` themes every accent icon/icon-button (attach, mic, active send, new-chat, header, empty-state) — defaults to `primary`, so set a *distinct* value to decouple. `ownMessageBackground`/`otherMessageBackground`/`inputBackground` recolour the message bubbles and input bar. |
 | `backgroundChat` | `{ color?; image? }` | Background colour and/or image for the messages area. (`image` as a string URL; pass an object URL for a `File`.) |
+| `colorScheme` | `'light' \| 'dark' \| 'system'` | Light or dark UI. Default `'light'` (the chat as before). `'system'` follows the viewer's OS / browser setting and updates live. Scoped to the chat's own elements, so it never restyles the host page; a host with its own dark mode should pass its resolved choice. `colors.icons`, `colors.iconsBg`, the bubble/input colours and `backgroundChat` are used as given in both schemes. `colors.primary` is the one exception: in dark it is lightened slightly (about 20% toward white) so primary-coloured text and icons stay legible on the dark surface while buttons keep white text on them, and `--ethora-color-primary-text` carries a further-lifted variant for text-only uses such as links and sender names. Pass an already-dark-suitable `primary` if you need the exact brand value. |
 | `typography` | `TypographyConfig` | Font family + size for the chat UI: `fontFamily` (or just `googleFontsFamily`) is applied across all chat text incl. messages and sender names; `fontSize` (px) scales message text, sender names, timestamps, inputs, room names and badges. Plus loaders (`googleFontsUrl`/`fontFaces`) and weight tokens. |
 | `fallbackScreens` | `{ noUser?; noConnection?; noRoom?; error? }` | Replace the built-in screens (Ethora login form, "Connecting...", empty room state, crash screen) with your own text or React nodes. A plain string is rendered as centered text. `error` also accepts a function `({ error, componentStack, scope, reset }) => ReactNode`, see [Error handling](#error-handling-and-crash-containment). |
 | `hiddenRooms` | `{ titles?: string[]; jids?: string[] }` | Hide specific rooms from the room list and unread counters (e.g. `{ titles: ['Main chat'] }` to suppress the auto-created default room). |

package/dist/{ChatProfileModal-DZVi2WRb.js → ChatProfileModal-DfXEnzJf.js}

@@ -1,8 +1,8 @@
 import { jsx as E, jsxs as j, Fragment as gt } from "react/jsx-runtime";
 import ke, { useRef as yt, useState as ee, useMemo as se } from "react";
-import { S as bt, f as qt, b as Tt, D as he, a as pe, e as Ft, g as zt, h as Fe, i as Qt, j as Ht, k as Yt, l as ze } from "./SideDrawer-C_nWZRwH.js";
-import { h as Wt, P as Gt, a as Kt, c as Xt, D as Jt, d as Vt, e as Qe, f as He } from "./handleCopyClick-Bj2V_brV.js";
-import { m as Zt, b as Et, n as de, a1 as er, B as te, v as W, a as Ne, u as fe, a2 as $e, D as Ct, w as wt, a3 as Rt, a4 as Pt, a5 as xt, a6 as tr, a7 as Be, a8 as rr, a9 as nr, $ as or, F as _t, X as ar, aa as ir, ab as Ie, ac as sr, ad as ye, ae as St, P as Mt, T as At, t as lr, af as ur, ag as cr, ah as fr, ai as dr, aj as hr, o as Ye, ak as pr, al as vr, am as mr, an as gr, ao as yr, ap as We, aq as br, ar as Tr, U as Er, as as Cr, at as wr, M as Rr, G as Pr, au as Ge } from "./main-DmtEeYji.js";
+import { S as bt, f as qt, b as Tt, D as he, a as pe, e as Ft, g as zt, h as Fe, i as Qt, j as Ht, k as Yt, l as ze } from "./SideDrawer-DLqEOqAi.js";
+import { h as Wt, P as Gt, a as Kt, c as Xt, D as Jt, d as Vt, e as Qe, f as He } from "./handleCopyClick-CWw4UAlT.js";
+import { o as Zt, b as Et, p as de, a4 as er, B as te, x as W, a as Ne, u as fe, a5 as $e, F as Ct, y as wt, a6 as Rt, a7 as Pt, a8 as xt, a9 as tr, aa as Be, ab as rr, ac as nr, a2 as or, J as _t, Z as ar, ad as ir, ae as Ie, af as sr, ag as ye, ah as St, P as Mt, W as At, w as lr, ai as ur, aj as cr, ak as fr, al as dr, am as hr, q as Ye, an as pr, ao as vr, ap as mr, aq as gr, ar as yr, as as We, at as br, au as Tr, X as Er, av as Cr, aw as wr, M as Rr, K as Pr, ax as Ge } from "./main-BHtKhpBZ.js";
 var le = {}, ve = { exports: {} }, me = { exports: {} }, k = {};
 var Ke;
 function xr() {
@@ -1736,6 +1736,9 @@ const Ur = /* @__PURE__ */ Zt(jr), qr = "chatId", Fr = (n, h, a) => {
   font-size: var(--ethora-font-size-xs, 12px);
   font-weight: var(--ethora-font-weight-medium, 500);
   text-transform: capitalize;
+  [data-ethora-color-scheme='dark'] & {
+    ${({ $banned: n }) => n ? "background-color: rgba(242, 118, 107, 0.15);" : ""}
+  }
 `, on = ({
   member: n,
   disableClick: h,

package/dist/{FilePreviewModal-BelSYN5e.js → FilePreviewModal-Cs1tij9R.js}

@@ -1,6 +1,6 @@
 import { jsx as l, jsxs as B } from "react/jsx-runtime";
 import te, { useState as H, useRef as z, useEffect as O, useMemo as $, useCallback as k } from "react";
-import { n as le, b as pe, aK as we, ab as ve, v as X, B as V, aL as xe, aM as be, av as ye, aN as Ee, aO as Le, aP as ue, aQ as ne, a as Ce, aG as Me, u as q, a2 as Re, aR as re, ap as Pe, al as J, aS as ke, aT as Se, aU as Te, aV as Ae, aW as Ie, aX as Xe, aY as Ye, aZ as ze, a_ as Oe, aw as De, a$ as Fe, b0 as Ne, au as Be, b1 as He, t as Ue } from "./main-DmtEeYji.js";
+import { p as le, b as pe, aN as we, ae as ve, x as X, B as V, aO as xe, aP as be, ay as ye, aQ as Ee, aR as Le, aS as ue, aT as ne, a as Ce, aJ as Re, u as q, a5 as Me, aU as re, as as Pe, ao as J, aV as ke, aW as Se, aX as Te, aY as Ae, aZ as Ie, a_ as Xe, a$ as Ye, b0 as ze, b1 as Oe, az as De, b2 as Fe, b3 as Ne, ax as Be, b4 as He, w as Ue } from "./main-BHtKhpBZ.js";
 function oe(t, i) {
   let o;
   return (...E) => {
@@ -11,18 +11,18 @@ function _e({ debounce: t, scroll: i, polyfill: o, offsetSize: E } = { debounce:
   const L = o || (typeof window > "u" ? class {
   } : window.ResizeObserver);
   if (!L) throw new Error("This browser does not support ResizeObserver out of the box. See: https://github.com/react-spring/react-use-measure/#resize-observer-polyfills");
-  const [u, C] = H({ left: 0, top: 0, width: 0, height: 0, bottom: 0, right: 0, x: 0, y: 0 }), n = z({ element: null, scrollContainers: null, resizeObserver: null, lastBounds: u, orientationHandler: null }), M = t ? typeof t == "number" ? t : t.scroll : null, p = t ? typeof t == "number" ? t : t.resize : null, T = z(!1);
+  const [u, C] = H({ left: 0, top: 0, width: 0, height: 0, bottom: 0, right: 0, x: 0, y: 0 }), n = z({ element: null, scrollContainers: null, resizeObserver: null, lastBounds: u, orientationHandler: null }), R = t ? typeof t == "number" ? t : t.scroll : null, p = t ? typeof t == "number" ? t : t.resize : null, T = z(!1);
   O(() => (T.current = !0, () => {
     T.current = !1;
   }));
   const [b, x, m] = $(() => {
     const r = () => {
       if (!n.current.element) return;
-      const { left: g, top: w, width: v, height: N, bottom: S, right: R, x: f, y: h } = n.current.element.getBoundingClientRect(), A = { left: g, top: w, width: v, height: N, bottom: S, right: R, x: f, y: h };
+      const { left: g, top: w, width: v, height: N, bottom: S, right: M, x: f, y: h } = n.current.element.getBoundingClientRect(), A = { left: g, top: w, width: v, height: N, bottom: S, right: M, x: f, y: h };
       n.current.element instanceof HTMLElement && E && (A.height = n.current.element.offsetHeight, A.width = n.current.element.offsetWidth), Object.freeze(A), T.current && !We(n.current.lastBounds, A) && C(n.current.lastBounds = A);
     };
-    return [r, p ? oe(r, p) : r, M ? oe(r, M) : r];
-  }, [C, E, M, p]);
+    return [r, p ? oe(r, p) : r, R ? oe(r, R) : r];
+  }, [C, E, R, p]);
   function y() {
     n.current.scrollContainers && (n.current.scrollContainers.forEach((r) => r.removeEventListener("scroll", m, !0)), n.current.scrollContainers = null), n.current.resizeObserver && (n.current.resizeObserver.disconnect(), n.current.resizeObserver = null), n.current.orientationHandler && ("orientation" in screen && "removeEventListener" in screen.orientation ? screen.orientation.removeEventListener("change", n.current.orientationHandler) : "onorientationchange" in window && window.removeEventListener("orientationchange", n.current.orientationHandler));
   }
@@ -107,10 +107,10 @@ const Ve = ["x", "y", "top", "bottom", "left", "right", "width", "height"], We =
   text-align: center;
 
   a {
-    color: var(--ethora-color-primary, #0052cd);
+    color: var(--ethora-color-primary-text, var(--ethora-color-primary, #0052cd));
   }
 `, Qe = ({ pdfUrl: t }) => {
-  const i = le(), { config: o } = pe(), [E, L] = _e(), u = z(null), C = z(null), n = z(null), [M, p] = H("loading"), [T, b] = H(0), [x, m] = H(1), y = Math.max(320, Math.floor(L.width || 0));
+  const i = le(), { config: o } = pe(), [E, L] = _e(), u = z(null), C = z(null), n = z(null), [R, p] = H("loading"), [T, b] = H(0), [x, m] = H(1), y = Math.max(320, Math.floor(L.width || 0));
   O(() => {
     let r = !1, g;
     return p("loading"), m(1), b(0), (async () => {
@@ -140,21 +140,21 @@ const Ve = ["x", "y", "top", "bottom", "left", "right", "width", "height"], We =
     };
   }, [t, o?.pdfPreview?.workerSrc]), O(() => {
     const r = C.current, g = u.current;
-    if (M !== "ready" || !r || !g || y <= 0) return;
+    if (R !== "ready" || !r || !g || y <= 0) return;
     let w = !1;
     return (async () => {
       try {
         const v = await r.getPage(x);
         if (w) return;
-        const N = v.getViewport({ scale: 1 }), S = N.width ? y / N.width : 1, R = v.getViewport({ scale: S });
-        g.width = Math.max(1, Math.floor(R.width)), g.height = Math.max(1, Math.floor(R.height));
+        const N = v.getViewport({ scale: 1 }), S = N.width ? y / N.width : 1, M = v.getViewport({ scale: S });
+        g.width = Math.max(1, Math.floor(M.width)), g.height = Math.max(1, Math.floor(M.height));
         const f = g.getContext("2d");
         if (!f) {
           p("error");
           return;
         }
         n.current?.cancel();
-        const h = v.render({ canvasContext: f, viewport: R });
+        const h = v.render({ canvasContext: f, viewport: M });
         n.current = h, await h.promise, v.cleanup();
       } catch (v) {
         w || console.warn("[Ethora] PDF page render failed:", v);
@@ -162,7 +162,7 @@ const Ve = ["x", "y", "top", "bottom", "left", "right", "width", "height"], We =
     })(), () => {
       w = !0, n.current?.cancel(), n.current = null;
     };
-  }, [M, x, y]);
+  }, [R, x, y]);
   const Y = k(
     () => m((r) => Math.max(1, r - 1)),
     []
@@ -170,11 +170,11 @@ const Ve = ["x", "y", "top", "bottom", "left", "right", "width", "height"], We =
     () => m((r) => Math.min(T || 1, r + 1)),
     [T]
   );
-  return M === "error" ? /* @__PURE__ */ l(ie, { children: /* @__PURE__ */ B(Ge, { children: [
+  return R === "error" ? /* @__PURE__ */ l(ie, { children: /* @__PURE__ */ B(Ge, { children: [
     /* @__PURE__ */ l("span", { children: i("modal.filePreview.pdfUnavailable") }),
     /* @__PURE__ */ l("a", { href: t, target: "_blank", rel: "noopener noreferrer", children: i("modal.filePreview.openExternally") })
   ] }) }) : /* @__PURE__ */ B(ie, { children: [
-    /* @__PURE__ */ l(Ze, { ref: E, children: M === "loading" ? /* @__PURE__ */ l(ve, { color: o?.colors?.primary }) : /* @__PURE__ */ l("canvas", { ref: u }) }),
+    /* @__PURE__ */ l(Ze, { ref: E, children: R === "loading" ? /* @__PURE__ */ l(ve, { color: o?.colors?.primary }) : /* @__PURE__ */ l("canvas", { ref: u }) }),
     T > 1 && /* @__PURE__ */ B(Ke, { children: [
       /* @__PURE__ */ l(
         ae,
@@ -235,12 +235,12 @@ const Ve = ["x", "y", "top", "bottom", "left", "right", "width", "height"], We =
   ${ye}
 `, fe = te.forwardRef(
   ({ src: t, alt: i, onSwipeLeft: o, onSwipeRight: E, onError: L, onScaleChange: u }, C) => {
-    const n = z(null), M = z(null), [p, T] = H(I), [b, x] = H({ x: 0, y: 0 }), [m, y] = H(!1), [Y, F] = H(!1), r = z({ scale: I, offset: { x: 0, y: 0 } });
+    const n = z(null), R = z(null), [p, T] = H(I), [b, x] = H({ x: 0, y: 0 }), [m, y] = H(!1), [Y, F] = H(!1), r = z({ scale: I, offset: { x: 0, y: 0 } });
     r.current = { scale: p, offset: b };
     const g = z(null), w = z(null), v = z(
       null
     ), N = k((a) => {
-      const e = n.current, c = M.current;
+      const e = n.current, c = R.current;
       if (!e) return { x: 0, y: 0 };
       const s = e.clientWidth, d = e.clientHeight, P = c?.naturalWidth || 0, D = c?.naturalHeight || 0;
       let j = s, Z = d;
@@ -261,7 +261,7 @@ const Ve = ["x", "y", "top", "bottom", "left", "right", "width", "height"], We =
         });
       },
       [N]
-    ), R = k(
+    ), M = k(
       (a, e, c, s) => {
         const d = r.current, P = G(a, I, ee), D = P / d.scale;
         S(
@@ -278,9 +278,9 @@ const Ve = ["x", "y", "top", "bottom", "left", "right", "width", "height"], We =
       S(I, { x: 0, y: 0 }, !0);
     }, [S]), h = k(
       (a) => {
-        R(r.current.scale * a, 0, 0, !0);
+        M(r.current.scale * a, 0, 0, !0);
       },
-      [R]
+      [M]
     );
     te.useImperativeHandle(
       C,
@@ -300,10 +300,10 @@ const Ve = ["x", "y", "top", "bottom", "left", "right", "width", "height"], We =
       const e = (c) => {
         c.preventDefault();
         const s = a.getBoundingClientRect(), d = c.clientX - s.left - s.width / 2, P = c.clientY - s.top - s.height / 2, D = Math.exp(-c.deltaY * tt);
-        R(r.current.scale * D, d, P, !1);
+        M(r.current.scale * D, d, P, !1);
       };
       return a.addEventListener("wheel", e, { passive: !1 }), () => a.removeEventListener("wheel", e);
-    }, [R]);
+    }, [M]);
     const A = k(
       (a, e) => {
         const c = n.current;
@@ -313,14 +313,14 @@ const Ve = ["x", "y", "top", "bottom", "left", "right", "width", "height"], We =
           return;
         }
         const s = c.getBoundingClientRect();
-        R(
+        M(
           qe,
           a - s.left - s.width / 2,
           e - s.top - s.height / 2,
           !0
         );
       },
-      [f, R]
+      [f, M]
     ), _ = k((a) => {
       a.button === 0 && (r.current.scale <= I || (a.preventDefault(), g.current = { x: a.clientX, y: a.clientY }, F(!0)));
     }, []);
@@ -385,7 +385,7 @@ const Ve = ["x", "y", "top", "bottom", "left", "right", "width", "height"], We =
           ), D = n.current;
           if (!D || P <= 0) return;
           const j = D.getBoundingClientRect(), Z = (s.clientX + d.clientX) / 2 - j.left - j.width / 2, K = (s.clientY + d.clientY) / 2 - j.top - j.height / 2;
-          e.moved = !0, R(
+          e.moved = !0, M(
             e.pinchScale * P / e.pinchDistance,
             Z,
             K,
@@ -409,7 +409,7 @@ const Ve = ["x", "y", "top", "bottom", "left", "right", "width", "height"], We =
           e.lastX = c.clientX, e.lastY = c.clientY;
         }
       },
-      [S, R]
+      [S, M]
     ), U = k(
       (a) => {
         const e = w.current;
@@ -455,7 +455,7 @@ const Ve = ["x", "y", "top", "bottom", "left", "right", "width", "height"], We =
         children: /* @__PURE__ */ l(
           rt,
           {
-            ref: M,
+            ref: R,
             "data-testid": "image-lightbox-image",
             src: t,
             alt: i,
@@ -536,7 +536,7 @@ const ot = (t) => {
 `, gt = ({
   handleCloseModal: t
 }) => {
-  const i = Ce(), o = le(), E = Me(), { activeFile: L } = q(
+  const i = Ce(), o = le(), E = Re(), { activeFile: L } = q(
     (f) => f.chatSettingStore
   ), u = $(
     () => L ?? { fileName: "", fileURL: "", mimetype: "" },
@@ -544,8 +544,8 @@ const ot = (t) => {
   ), C = q(
     (f) => f.chatSettingStore.user?.fileToken || ""
   ), n = q(
-    (f) => Re(f)?.messages
-  ), M = z(null), [p, T] = H(I), b = ue(u?.mimetype, u?.fileName), x = $(() => ot(n), [n]), m = $(
+    (f) => Me(f)?.messages
+  ), R = z(null), [p, T] = H(I), b = ue(u?.mimetype, u?.fileName), x = $(() => ot(n), [n]), m = $(
     () => b === "image" ? it(x, u) : -1,
     [x, u, b]
   ), y = m >= 0 && x.length > 1, Y = y && m > 0, F = y && m < x.length - 1, r = k(
@@ -591,13 +591,13 @@ const ot = (t) => {
     });
   }, N = () => {
     i(re(void 0)), t?.();
-  }, S = u?.fileName || o("modal.filePreview.imageAlt"), R = $(() => {
+  }, S = u?.fileName || o("modal.filePreview.imageAlt"), M = $(() => {
     switch (b) {
       case "image":
         return /* @__PURE__ */ l(
           fe,
           {
-            ref: M,
+            ref: R,
             src: J(u.fileURL, C) || ce,
             alt: S,
             onScaleChange: T,
@@ -669,7 +669,7 @@ const ot = (t) => {
                 /* @__PURE__ */ l(
                   V,
                   {
-                    onClick: () => M.current?.zoomOut(),
+                    onClick: () => R.current?.zoomOut(),
                     disabled: p <= I,
                     "aria-label": o("modal.filePreview.zoomOut"),
                     children: /* @__PURE__ */ l(Xe, {})
@@ -678,7 +678,7 @@ const ot = (t) => {
                 /* @__PURE__ */ l(
                   V,
                   {
-                    onClick: () => M.current?.zoomIn(),
+                    onClick: () => R.current?.zoomIn(),
                     disabled: p >= ee,
                     "aria-label": o("modal.filePreview.zoomIn"),
                     children: /* @__PURE__ */ l(Ye, {})
@@ -687,7 +687,7 @@ const ot = (t) => {
                 /* @__PURE__ */ l(
                   V,
                   {
-                    onClick: () => M.current?.reset(),
+                    onClick: () => R.current?.reset(),
                     disabled: p <= I,
                     "aria-label": o("modal.filePreview.resetZoom"),
                     children: /* @__PURE__ */ l(ze, {})
@@ -721,7 +721,7 @@ const ot = (t) => {
                   children: /* @__PURE__ */ l(Fe, {})
                 }
               ),
-              R,
+              M,
               y && /* @__PURE__ */ l(
                 ct,
                 {

package/dist/{ManageDataModal-Bs_0SHBL.js → ManageDataModal-BBOui09n.js}

@@ -1,7 +1,7 @@
 import { jsxs as o, Fragment as T, jsx as a } from "react/jsx-runtime";
 import { useState as m, useCallback as M } from "react";
-import { av as B, v as t, aw as I, ax as w, B as j, u as z, n as F, F as E, ay as R, J as U, t as x, az as A, aA as $, aB as O, aC as H } from "./main-DmtEeYji.js";
-import { S as J, D as f, a as u, b as D, e as v, f as b } from "./SideDrawer-C_nWZRwH.js";
+import { ay as B, x as t, az as I, aA as w, B as j, u as z, p as E, J as F, aB as R, L as U, w as x, aC as A, aD as $, aE as O, aF as H } from "./main-BHtKhpBZ.js";
+import { S as J, D as f, a as u, b as D, e as v, f as b } from "./SideDrawer-DLqEOqAi.js";
 t(I)`
   display: flex;
   box-sizing: border-box;
@@ -82,7 +82,7 @@ const y = t(j)`
 `, Q = ({
   handleCloseModal: r
 }) => {
-  const { config: l } = z((s) => s.chatSettingStore), e = F(), { showToast: d } = E(), [C, c] = m(!1), [i, g] = m(!1), S = async () => {
+  const { config: l } = z((s) => s.chatSettingStore), e = E(), { showToast: d } = F(), [C, c] = m(!1), [i, g] = m(!1), S = async () => {
     const p = (await H()).data;
     x.log(p);
     const L = new Blob([p], { type: "text/plain" }), h = URL.createObjectURL(L), n = document.createElement("a");

package/dist/{MarkdownBody-BYUK4GVM.js → MarkdownBody-DttRXyAK.js}

@@ -1,6 +1,6 @@
 import { jsxs as fs, jsx as ie, Fragment as hs } from "react/jsx-runtime";
 import "react";
-import { m as ei } from "./main-DmtEeYji.js";
+import { o as ei } from "./main-BHtKhpBZ.js";
 function zr(e) {
   const t = [], n = String(e || "");
   let r = n.indexOf(","), u = 0, i = !1;
@@ -16715,7 +16715,7 @@ const h1 = [
               target: "_blank",
               rel: "noopener noreferrer",
               style: {
-                color: "var(--ethora-color-primary, #0a66c2)",
+                color: "var(--ethora-color-primary-text, var(--ethora-color-primary, #0a66c2))",
                 textDecoration: "none"
               },
               children: r
@@ -16855,7 +16855,7 @@ const h1 = [
                   (l.key === "Enter" || l.key === " ") && (l.preventDefault(), o());
                 } : void 0,
                 style: {
-                  color: "var(--ethora-color-primary, #0052cd)",
+                  color: "var(--ethora-color-primary-text, var(--ethora-color-primary, #0052cd))",
                   fontWeight: 600,
                   cursor: t ? "pointer" : "default"
                 },

package/dist/{SideDrawer-C_nWZRwH.js → SideDrawer-DLqEOqAi.js}

@@ -1,6 +1,6 @@
 import { jsxs as i, jsx as o } from "react/jsx-runtime";
 import { useId as f, useRef as v } from "react";
-import { n as u, w as g, aF as m, aG as w, B as b, aH as y, v as e, aI as D, aJ as k } from "./main-DmtEeYji.js";
+import { p as u, y as g, aI as m, aJ as w, B as b, aK as y, x as e, aL as D, aM as k } from "./main-BHtKhpBZ.js";
 const c = 767, R = `${c}px`, z = e.div`
   position: relative;
   pointer-events: auto;
@@ -62,7 +62,7 @@ const c = 767, R = `${c}px`, z = e.div`
   display: flex;
   flex-direction: column;
   gap: var(--ethora-space-2, 8px);
-`, O = e.h3`
+`, K = e.h3`
   margin: 0;
   padding: 0 var(--ethora-space-1, 4px);
   font-size: var(--ethora-font-size-xs, 12px);
@@ -70,7 +70,7 @@ const c = 767, R = `${c}px`, z = e.div`
   letter-spacing: 0.06em;
   text-transform: uppercase;
   color: var(--ethora-color-text-muted, #8c8c8c);
-`, W = e.div`
+`, O = e.div`
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
@@ -79,17 +79,17 @@ const c = 767, R = `${c}px`, z = e.div`
   border-radius: var(--ethora-radius-md, 12px);
   background-color: var(--ethora-color-bg, #fff);
   overflow: hidden;
-`, _ = e.div`
+`, W = e.div`
   display: flex;
   flex-direction: column;
   gap: var(--ethora-space-1, 4px);
   padding: var(--ethora-space-3, 12px) var(--ethora-space-4, 16px);
-`, F = e.div`
+`, _ = e.div`
   display: flex;
   align-items: baseline;
   justify-content: space-between;
   gap: var(--ethora-space-2, 8px);
-`, K = e.button`
+`, F = e.button`
   border: none;
   background: transparent;
   padding: var(--ethora-space-2, 8px) 0;
@@ -97,7 +97,7 @@ const c = 767, R = `${c}px`, z = e.div`
   font: inherit;
   font-size: var(--ethora-font-size-xs, 13px);
   font-weight: var(--ethora-font-weight-medium, 500);
-  color: var(--ethora-color-primary, #0052cd);
+  color: var(--ethora-color-primary-text, var(--ethora-color-primary, #0052cd));
   align-self: center;
 
   &:hover {
@@ -109,11 +109,11 @@ const c = 767, R = `${c}px`, z = e.div`
     outline-offset: 2px;
     border-radius: var(--ethora-radius-sm, 8px);
   }
-`, G = e.div`
+`, J = e.div`
   height: 1px;
   margin: 0 var(--ethora-space-4, 16px);
   background-color: var(--ethora-color-border, #e6e8ec);
-`, J = e.div`
+`, V = e.div`
   display: flex;
   align-items: center;
   gap: var(--ethora-space-2, 8px);
@@ -135,7 +135,7 @@ const c = 767, R = `${c}px`, z = e.div`
   & > svg {
     flex: 0 0 auto;
   }
-`, V = e.input`
+`, X = e.input`
   flex: 1 1 auto;
   min-width: 0;
   border: none;
@@ -148,22 +148,22 @@ const c = 767, R = `${c}px`, z = e.div`
   &::placeholder {
     color: var(--ethora-color-text-muted, #8c8c8c);
   }
-`, X = e.div`
+`, q = e.div`
   display: flex;
   flex-direction: column;
   width: 100%;
-`, T = e.div`
+`, L = e.div`
   font-size: var(--ethora-font-size-sm, 14px);
   font-weight: var(--ethora-font-weight-medium, 500);
   color: var(--ethora-color-text, #141414);
   text-align: start;
-`, C = e.div`
+`, T = e.div`
   font-size: var(--ethora-font-size-xs, 12px);
   font-weight: var(--ethora-font-weight-regular, 400);
   color: var(--ethora-color-text-muted, #8c8c8c);
   text-align: start;
   line-height: 1.4;
-`, E = e.button`
+`, C = e.button`
   display: flex;
   align-items: center;
   gap: var(--ethora-space-3, 12px);
@@ -186,17 +186,17 @@ const c = 767, R = `${c}px`, z = e.div`
     outline: 2px solid var(--ethora-color-primary, #0052cd);
     outline-offset: -2px;
   }
-`, L = e.span`
+`, E = e.span`
   display: flex;
   flex-direction: column;
   gap: var(--ethora-space-1, 4px);
   flex: 1 1 auto;
   min-width: 0;
-`, j = e.span`
+`, M = e.span`
   flex: 0 0 auto;
   display: inline-flex;
   color: var(--ethora-color-text-muted, #8c8c8c);
-`, H = () => /* @__PURE__ */ o("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ o(
+`, j = () => /* @__PURE__ */ o("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ o(
   "path",
   {
     d: "M6 3.5L10.5 8L6 12.5",
@@ -205,16 +205,16 @@ const c = 767, R = `${c}px`, z = e.div`
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }
-) }), q = ({
+) }), G = ({
   label: r,
   hint: a,
   onClick: t
-}) => /* @__PURE__ */ i(E, { type: "button", onClick: t, children: [
-  /* @__PURE__ */ i(L, { children: [
-    /* @__PURE__ */ o(T, { children: r }),
-    a && /* @__PURE__ */ o(C, { children: a })
+}) => /* @__PURE__ */ i(C, { type: "button", onClick: t, children: [
+  /* @__PURE__ */ i(E, { children: [
+    /* @__PURE__ */ o(L, { children: r }),
+    a && /* @__PURE__ */ o(T, { children: a })
   ] }),
-  /* @__PURE__ */ o(j, { "aria-hidden": "true", children: /* @__PURE__ */ o(H, {}) })
+  /* @__PURE__ */ o(M, { "aria-hidden": "true", children: /* @__PURE__ */ o(j, {}) })
 ] }), Q = ({
   title: r,
   onClose: a,
@@ -255,16 +255,16 @@ const c = 767, R = `${c}px`, z = e.div`
 export {
   $ as D,
   Q as S,
-  O as a,
-  W as b,
-  G as c,
-  q as d,
-  _ as e,
-  C as f,
-  T as g,
-  F as h,
-  J as i,
-  V as j,
-  X as k,
-  K as l
+  K as a,
+  O as b,
+  J as c,
+  G as d,
+  W as e,
+  T as f,
+  L as g,
+  _ as h,
+  V as i,
+  X as j,
+  q as k,
+  F as l
 };