@bikdotai/bik-component-library 0.0.853 → 0.0.855

package/dist/esm/components/agent-builder/components/MentionPicker.js

@@ -1,325 +1,393 @@
-import { jsxs as k, jsx as s, Fragment as ie } from "react/jsx-runtime";
-import le from "../../../assets/icons/chevronRight.svg.js";
-import ae from "../../../assets/icons/searchIcon.svg.js";
-import ce from "../../../icons/Arrows/Normal arrows/ArrowLeft.js";
-import { useState as N, useMemo as w, useEffect as U, useRef as se } from "react";
-import h from "styled-components";
-import { TitleSmall as de, BodySecondary as ue, BodyCaption as pe } from "../../TypographyStyle.js";
-import { COLORS as r } from "../../../constants/Theme.js";
-import { CATEGORIES as he, MORE_INTEGRATIONS_KEY as v, isMoreIntegrationSource as P, toolSourceRank as j, MORE_INTEGRATIONS_LABEL as Z, isIntegrationSource as fe, CONFIG_TOOL_SOURCES as ge, MORE_INTEGRATIONS_RANK as me } from "../constants/tools.js";
-import { toolSourceLabel as F } from "../utils/mentionSerialization.js";
-import { renderSourceIcon as H, sourceIcon as z } from "../utils/sourceIcons.js";
-import be from "../../../icons/Informational/Identity/PuzzlePiece.js";
-import ee from "../../../icons/Informational/Common UI/Shield.js";
-const te = {
-  Icon: be,
+import { jsxs as x, jsx as c, Fragment as ae } from "react/jsx-runtime";
+import ce from "../../../assets/icons/chevronRight.svg.js";
+import se from "../../../assets/icons/searchIcon.svg.js";
+import de from "../../../icons/Arrows/Normal arrows/ArrowLeft.js";
+import { useState as M, useMemo as I, useEffect as V, useRef as ue } from "react";
+import u from "styled-components";
+import { TitleSmall as he, BodySecondary as pe, BodyCaption as fe } from "../../TypographyStyle.js";
+import { COLORS as o } from "../../../constants/Theme.js";
+import { PickerType as ge } from "../../variable-picker-v3/model.js";
+import { CATEGORIES as be, MORE_INTEGRATIONS_KEY as v, isMoreIntegrationSource as z, toolSourceRank as j, MORE_INTEGRATIONS_LABEL as ee, isIntegrationSource as me, CONFIG_TOOL_SOURCES as ke, MORE_INTEGRATIONS_RANK as xe } from "../constants/tools.js";
+import { toolSourceLabel as Y } from "../utils/mentionSerialization.js";
+import { renderSourceIcon as te, sourceIcon as q } from "../utils/sourceIcons.js";
+import ve from "../../../icons/Informational/Identity/PuzzlePiece.js";
+import { VariablePicker as we } from "../../variable-picker-v3/VariablePicker.js";
+import re from "../../../icons/Informational/Common UI/Shield.js";
+const ne = {
+  Icon: ve,
   w: 20,
   h: 20
-}, m = (c) => c.meta, E = (c) => m(c)?.plainLabel ?? c.label, xe = "__bik_create_subagent__", Fe = ({
-  items: c,
-  onSelect: C,
-  registerKeyHandler: L,
-  onClose: I,
+}, b = (s) => s.meta, A = (s) => b(s)?.plainLabel ?? s.label, ye = "__bik_create_subagent__", Xe = ({
+  items: s,
+  onSelect: L,
+  registerKeyHandler: C,
+  onClose: w,
   onCreateSubAgent: R,
-  initialSource: Y,
+  initialSource: H,
   toolActions: y,
   integrationStatus: J,
-  onConnectIntegration: K
+  onConnectIntegration: K,
+  variablesData: D,
+  onSelectVariable: G
 }) => {
-  const [ne, M] = N(null), [i, S] = N(Y ?? null), [T, b] = N(-1), [A, Q] = N(""), x = w(
-    () => c.filter((e) => m(e)?.kind === "tool"),
-    [c]
-  ), O = w(
-    () => c.filter((e) => m(e)?.kind === "subagent"),
-    [c]
-  ), q = w(() => {
+  const [oe, T] = M(null), [i, S] = M(H ?? null), [$, m] = M(-1), [E, Q] = M(""), k = I(
+    () => s.filter((e) => b(e)?.kind === "tool"),
+    [s]
+  ), B = I(
+    () => s.filter((e) => b(e)?.kind === "subagent"),
+    [s]
+  ), F = I(() => {
     const e = [];
-    return x.forEach((o) => {
-      const f = m(o)?.source ?? "other";
+    return k.forEach((n) => {
+      const f = b(n)?.source ?? "other";
       e.includes(f) || e.push(f);
     }), e;
-  }, [x]), D = w(
+  }, [k]), U = I(
     () => new Map(
       (y ?? []).map((e) => [e.source, e])
     ),
     [y]
-  ), _ = w(
-    () => he.filter(
-      (e) => e.key === "tool" ? x.length > 0 || (y?.length ?? 0) > 0 : O.length > 0 || !!R
-    ),
-    [x.length, O.length, R, y?.length]
-  ), G = _.length === 1 ? _[0].key : null, d = ne ?? G, u = d ? d === "subagent" ? (
+  ), O = I(
+    () => be.filter((e) => e.key === "tool" ? k.length > 0 || (y?.length ?? 0) > 0 : e.key === "variable" ? (D?.length ?? 0) > 0 && !!G : B.length > 0 || !!R),
+    [
+      k.length,
+      B.length,
+      R,
+      y?.length,
+      D?.length,
+      G
+    ]
+  ), _ = O.length === 1 ? O[0].key : null, a = oe ?? _, h = a ? a === "subagent" ? (
     // Always titled — with a back arrow only when the category chooser is above.
     {
       title: "Sub-agent",
-      onBack: G ? void 0 : () => M(null)
+      onBack: _ ? void 0 : () => T(null)
     }
-  ) : i === v ? {
-    title: Z,
+  ) : a === "variable" ? {
+    title: "Variables",
+    onBack: _ ? void 0 : () => T(null)
+  } : i === v ? {
+    title: ee,
     onBack: () => S(null),
-    icon: te
+    icon: ne
   } : i ? {
-    title: F(i),
+    title: Y(i),
     // Deep-linked to a source (opened from a right-panel source button):
     // that source IS the root, so no back arrow. Otherwise back returns to
     // the "More Integrations" umbrella for a vendor that lives under it,
     // else to the source chooser.
-    onBack: Y ? void 0 : () => S(
-      P(i) ? v : null
+    onBack: H ? void 0 : () => S(
+      z(i) ? v : null
     ),
-    icon: z(i)
+    icon: q(i)
   } : (
     // Always titled — matches the Sub-agent header; back arrow only when the
     // category chooser is above (i.e. not the sole category).
     {
       title: "Tools",
-      onBack: G ? void 0 : () => M(null)
+      onBack: _ ? void 0 : () => T(null)
     }
-  ) : null, a = w(() => {
-    if (!d)
-      return _.map((n) => ({
-        id: n.key,
-        label: n.label,
+  ) : null, d = I(() => {
+    if (!a)
+      return O.map((r) => ({
+        id: r.key,
+        label: r.label,
         drillsIn: !0,
         onActivate: () => {
-          M(n.key), S(null);
+          T(r.key), S(null);
         }
       }));
-    if (d === "subagent") {
-      const n = A.trim().toLowerCase(), p = O.filter((g) => !n || E(g).toLowerCase().includes(n)).map((g) => ({
+    if (a === "subagent") {
+      const r = E.trim().toLowerCase(), p = B.filter((g) => !r || A(g).toLowerCase().includes(r)).map((g) => ({
         id: String(g.id),
-        label: E(g),
+        label: A(g),
         drillsIn: !1,
-        onActivate: () => C(g)
+        onActivate: () => L(g)
       }));
       return R && p.push({
-        id: xe,
+        id: ye,
         label: "Create new",
         drillsIn: !1,
         isCreate: !0,
         onActivate: () => {
-          I?.(), R();
+          w?.(), R();
         }
       }), p;
     }
+    if (a === "variable")
+      return [];
     if (!i || i === v) {
-      const n = (y ?? []).map((t) => t.source).filter((t) => !q.includes(t)), p = [...q, ...n], g = (t) => {
-        const l = D.get(t);
+      const r = (y ?? []).map((t) => t.source).filter((t) => !F.includes(t)), p = [...F, ...r], g = (t) => {
+        const l = U.get(t);
         if ((l !== void 0 ? l.connected : J?.[t]) === !1)
           return {
             id: t,
-            label: F(t),
+            label: Y(t),
             drillsIn: !1,
-            icon: z(t) ?? l?.icon,
+            icon: q(t) ?? l?.icon,
             rightLabel: "Connect",
             onActivate: () => {
-              I?.(), l?.onConnect ? l.onConnect() : K?.(t);
+              w?.(), l?.onConnect ? l.onConnect() : K?.(t);
             }
           };
-        const X = x.filter(
-          ($) => (m($)?.source ?? "other") === t
+        const Z = k.filter(
+          (P) => (b(P)?.source ?? "other") === t
         );
-        if (X.length + (l ? 1 : 0) === 1 && !(l === void 0 && fe(t))) {
-          const $ = z(t) ?? l?.icon;
+        if (Z.length + (l ? 1 : 0) === 1 && !(l === void 0 && me(t))) {
+          const P = q(t) ?? l?.icon;
           if (l)
             return {
               id: t,
               label: l.label,
               drillsIn: !1,
-              icon: $,
+              icon: P,
               onActivate: () => {
-                I?.(), l.onSelect();
+                w?.(), l.onSelect();
               }
             };
-          const B = X[0];
+          const N = Z[0];
           return {
-            id: String(B.id),
-            label: E(B),
+            id: String(N.id),
+            label: A(N),
             drillsIn: !1,
-            icon: $,
-            authRequired: m(B)?.authRequired,
-            onActivate: () => C(B)
+            icon: P,
+            authRequired: b(N)?.authRequired,
+            onActivate: () => L(N)
           };
         }
         return {
           id: t,
-          label: F(t),
+          label: Y(t),
           drillsIn: !0,
-          icon: z(t) ?? l?.icon,
+          icon: q(t) ?? l?.icon,
           onActivate: () => S(t)
         };
       };
       if (i === v)
-        return p.filter((t) => P(t)).sort((t, l) => j(t) - j(l)).map(g);
-      const W = p.filter((t) => !P(t)).map((t) => ({ row: g(t), rank: j(t) }));
-      return p.some((t) => P(t)) && W.push({
-        rank: me,
+        return p.filter((t) => z(t)).sort((t, l) => j(t) - j(l)).map(g);
+      const X = p.filter((t) => !z(t)).map((t) => ({ row: g(t), rank: j(t) }));
+      return p.some((t) => z(t)) && X.push({
+        rank: xe,
         row: {
           id: v,
-          label: Z,
+          label: ee,
           drillsIn: !0,
-          icon: te,
+          icon: ne,
           onActivate: () => S(v)
         }
-      }), W.sort((t, l) => t.rank - l.rank).map((t) => t.row);
+      }), X.sort((t, l) => t.rank - l.rank).map((t) => t.row);
     }
-    const e = A.trim().toLowerCase(), o = x.filter((n) => (m(n)?.source ?? "other") === i).filter((n) => !e || E(n).toLowerCase().includes(e)).map((n) => ({
-      id: String(n.id),
-      label: E(n),
+    const e = E.trim().toLowerCase(), n = k.filter((r) => (b(r)?.source ?? "other") === i).filter((r) => !e || A(r).toLowerCase().includes(e)).map((r) => ({
+      id: String(r.id),
+      label: A(r),
       drillsIn: !1,
-      authRequired: m(n)?.authRequired,
-      onActivate: () => C(n)
-    })), f = D.get(i);
+      authRequired: b(r)?.authRequired,
+      onActivate: () => L(r)
+    })), f = U.get(i);
     if (f) {
-      const n = i in ge;
-      o.push({
+      const r = i in ke;
+      n.push({
         id: `create:${i}`,
         label: f.label,
         drillsIn: !1,
-        isCreate: !n,
+        isCreate: !r,
         onActivate: () => {
-          I?.(), f.onSelect();
+          w?.(), f.onSelect();
         }
       });
     }
-    return o;
+    return n;
   }, [
-    d,
-    _,
-    i,
-    A,
-    x,
+    a,
     O,
-    q,
-    C,
-    I,
+    i,
+    E,
+    k,
+    B,
+    F,
+    L,
+    w,
     R,
     y,
-    D,
+    U,
     J,
     K
   ]);
-  U(() => b(-1), [d, i, A, c]), U(() => Q(""), [d, i]);
-  const V = se({ rows: a, activeIndex: T, header: u });
-  V.current = { rows: a, activeIndex: T, header: u }, U(() => {
-    if (L)
-      return L((e) => {
-        const { rows: o, activeIndex: f, header: n } = V.current;
+  V(() => m(-1), [a, i, E, s]), V(() => Q(""), [a, i]);
+  const W = ue({ rows: d, activeIndex: $, header: h });
+  W.current = { rows: d, activeIndex: $, header: h }, V(() => {
+    if (C)
+      return C((e) => {
+        const { rows: n, activeIndex: f, header: r } = W.current;
+        if (!n.length && e.key !== "ArrowLeft")
+          return !1;
         switch (e.key) {
           case "ArrowDown":
-            return o.length && b((p) => (p + 1) % o.length), !0;
+            return m((p) => (p + 1) % n.length), !0;
           case "ArrowUp":
-            return o.length && b((p) => (p + o.length - 1) % o.length), !0;
+            return m((p) => (p + n.length - 1) % n.length), !0;
           case "ArrowRight":
           case "Enter":
-            return (o[f] ?? o[0])?.onActivate(), !0;
+            return (n[f] ?? n[0])?.onActivate(), !0;
           case "ArrowLeft":
-            return n?.onBack ? (n.onBack(), !0) : !1;
+            return r?.onBack ? (r.onBack(), !0) : !1;
           default:
             return !1;
         }
-      }), () => L(null);
-  }, [L]);
-  const oe = d ? a.length && !a[0].drillsIn ? "items" : "sources" : "categories", re = d === "tool" && !!i && i !== v || d === "subagent";
-  return /* @__PURE__ */ k(ke, { className: `bik-mention-picker bik-mention-picker--${oe}`, children: [
-    u && /* @__PURE__ */ k(
-      Ee,
-      {
-        type: "button",
-        onClick: u.onBack,
-        disabled: !u.onBack,
-        style: {
-          background: r.surface.subdued,
-          cursor: u.onBack ? "pointer" : "default"
-        },
-        children: [
-          u.onBack && /* @__PURE__ */ s(
-            ce,
+      }), () => C(null);
+  }, [C]);
+  const ie = a ? d.length && !d[0].drillsIn ? "items" : "sources" : "categories", le = a === "tool" && !!i && i !== v || a === "subagent";
+  return /* @__PURE__ */ x(
+    Ie,
+    {
+      className: `bik-mention-picker bik-mention-picker--${ie}`,
+      $fixedHeight: a === "variable",
+      children: [
+        h && /* @__PURE__ */ x(
+          Oe,
+          {
+            type: "button",
+            onClick: h.onBack,
+            disabled: !h.onBack,
+            style: {
+              background: o.surface.subdued,
+              cursor: h.onBack ? "pointer" : "default"
+            },
+            children: [
+              h.onBack && /* @__PURE__ */ c(
+                de,
+                {
+                  width: 20,
+                  height: 20,
+                  color: o.content.primary
+                }
+              ),
+              h.icon && te(h.icon),
+              /* @__PURE__ */ x(he, { children: [
+                " ",
+                h.title
+              ] })
+            ]
+          }
+        ),
+        le && /* @__PURE__ */ x(Ee, { children: [
+          /* @__PURE__ */ c(
+            se,
             {
               width: 20,
               height: 20,
-              color: r.content.primary
+              color: o.content.placeholder
             }
           ),
-          u.icon && H(u.icon),
-          /* @__PURE__ */ k(de, { children: [
-            " ",
-            u.title
-          ] })
-        ]
-      }
-    ),
-    re && /* @__PURE__ */ k(ve, { children: [
-      /* @__PURE__ */ s(
-        ae,
-        {
-          width: 20,
-          height: 20,
-          color: r.content.placeholder
-        }
-      ),
-      /* @__PURE__ */ s(
-        ye,
-        {
-          autoFocus: !0,
-          value: A,
-          placeholder: "Search",
-          "data-test": "mention-picker-search",
-          onChange: (e) => Q(e.target.value),
-          onKeyDown: (e) => {
-            a.length && (e.key === "ArrowDown" ? (e.preventDefault(), b((o) => (o + 1) % a.length)) : e.key === "ArrowUp" ? (e.preventDefault(), b((o) => (o + a.length - 1) % a.length)) : e.key === "Enter" && (e.preventDefault(), (a[T] ?? a[0])?.onActivate()));
-          }
-        }
-      )
-    ] }),
-    a.length === 0 ? /* @__PURE__ */ s(Ce, { children: d === "subagent" ? null : "No tools available" }) : a.map((e, o) => /* @__PURE__ */ s(
-      we,
-      {
-        type: "button",
-        $active: o === T,
-        onMouseEnter: () => b(o),
-        onMouseLeave: () => b(-1),
-        onClick: e.onActivate,
-        children: e.isCreate ? /* @__PURE__ */ s(Ae, { children: e.label }) : /* @__PURE__ */ k(ie, { children: [
-          /* @__PURE__ */ k(Ie, { children: [
-            H(e.icon),
-            /* @__PURE__ */ s(ue, { color: r.content.primary, children: e.label }),
-            e.authRequired && /* @__PURE__ */ s(
-              ee,
-              {
-                size: 16,
-                "aria-label": "This tool requires customer verification"
+          /* @__PURE__ */ c(
+            Ae,
+            {
+              autoFocus: !0,
+              value: E,
+              placeholder: "Search",
+              "data-test": "mention-picker-search",
+              onChange: (e) => Q(e.target.value),
+              onKeyDown: (e) => {
+                d.length && (e.key === "ArrowDown" ? (e.preventDefault(), m((n) => (n + 1) % d.length)) : e.key === "ArrowUp" ? (e.preventDefault(), m((n) => (n + d.length - 1) % d.length)) : e.key === "Enter" && (e.preventDefault(), (d[$] ?? d[0])?.onActivate()));
+              }
+            }
+          )
+        ] }),
+        a === "variable" ? (
+          // Shared variable catalog, embedded as this drill-in view. The fill
+          // wrapper hands it the remaining card height, so ITS search bar stays
+          // fixed and only the variable list below scrolls. Selecting a
+          // variable dismisses the menu FIRST (strips the typed "@" + query),
+          // then hands the variable up to insert its `{{token}}` at the cursor.
+          /* @__PURE__ */ c(Se, { children: /* @__PURE__ */ c(
+            we,
+            {
+              type: ge.EMBEDDED,
+              data: D ?? [],
+              showRecommendedBar: !0,
+              skipDefaultVariableContent: !0,
+              onSelect: (e) => {
+                w?.(), G?.(e);
               }
-            )
-          ] }),
-          e.rightLabel ? /* @__PURE__ */ s(Se, { children: e.rightLabel }) : e.drillsIn && /* @__PURE__ */ s(le, { width: 12, height: 12 })
+            }
+          ) })
+        ) : d.length === 0 ? /* @__PURE__ */ c(_e, { children: a === "subagent" ? null : "No tools available" }) : /* @__PURE__ */ c(Re, { children: d.map((e, n) => /* @__PURE__ */ c(
+          Le,
+          {
+            type: "button",
+            $active: n === $,
+            onMouseEnter: () => m(n),
+            onMouseLeave: () => m(-1),
+            onClick: e.onActivate,
+            children: e.isCreate ? /* @__PURE__ */ c(Be, { children: e.label }) : /* @__PURE__ */ x(ae, { children: [
+              /* @__PURE__ */ x(Ce, { children: [
+                te(e.icon),
+                /* @__PURE__ */ c(pe, { color: o.content.primary, children: e.label }),
+                e.authRequired && /* @__PURE__ */ c(
+                  re,
+                  {
+                    size: 14,
+                    "aria-label": "Requires customer verification"
+                  }
+                )
+              ] }),
+              e.rightLabel ? /* @__PURE__ */ c($e, { children: e.rightLabel }) : e.drillsIn && /* @__PURE__ */ c(ce, { width: 12, height: 12 })
+            ] })
+          },
+          e.id
+        )) }),
+        d.some((e) => e.authRequired) && /* @__PURE__ */ x(Te, { children: [
+          /* @__PURE__ */ c(re, { size: 16 }),
+          /* @__PURE__ */ c(fe, { color: o.content.secondary, children: "This tool requires customer verification" })
         ] })
-      },
-      e.id
-    )),
-    a.some((e) => e.authRequired) && /* @__PURE__ */ k(Re, { children: [
-      /* @__PURE__ */ s(ee, { size: 16 }),
-      /* @__PURE__ */ s(pe, { color: r.content.secondary, children: "This tool requires customer verification" })
-    ] })
-  ] });
-}, ke = h.div`
+      ]
+    }
+  );
+}, Ie = u.div`
 	display: flex;
 	flex-direction: column;
 	min-width: 240px;
-	max-height: 301px;
-	overflow-y: auto;
-	background: ${r.surface.standard};
-	border: 1px solid ${r.stroke.primary};
+	/* Variables view is 45px taller: that is what the embedded picker's "Only
+	   Recommended" bar costs, so the variable list keeps the room it had before
+	   the bar was turned on (VariablePicker's calculateHeight subtracts it). */
+	${(s) => s.$fixedHeight ? "height: 346px;" : "max-height: 301px;"}
+	overflow: hidden;
+	background: ${o.surface.standard};
+	border: 1px solid ${o.stroke.primary};
 	border-radius: 4px;
 	box-shadow: 0px -2px 8px 0px #0000001f;
-`, ve = h.div`
+`, Re = u.div`
+	flex: 1 1 auto;
+	min-height: 0;
+	overflow-y: auto;
+	scrollbar-width: none;
+
+	&::-webkit-scrollbar {
+		display: none;
+	}
+`, Se = u.div`
+	flex: 1 1 auto;
+	min-height: 0;
+
+	> div {
+		height: 100%;
+	}
+
+	* {
+		scrollbar-width: none;
+	}
+
+	*::-webkit-scrollbar {
+		display: none;
+	}
+`, Ee = u.div`
 	display: flex;
 	align-items: center;
 	gap: 8px;
 	padding: 10px 12px;
 	flex-shrink: 0;
-	border-bottom: 1px solid ${r.stroke.primary};
-`, ye = h.input`
+	border-bottom: 1px solid ${o.stroke.primary};
+`, Ae = u.input`
 	flex: 1;
 	min-width: 0;
 	border: none;
@@ -327,12 +395,12 @@ const te = {
 	background: transparent;
 	font-family: Inter;
 	font-size: 14px;
-	color: ${r.content.primary};
+	color: ${o.content.primary};
 
 	&::placeholder {
-		color: ${r.content.placeholder};
+		color: ${o.content.placeholder};
 	}
-`, we = h.button`
+`, Le = u.button`
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
@@ -346,45 +414,45 @@ const te = {
 	box-sizing: border-box;
 	flex-shrink: 0;
 	border: none;
-	border-bottom: 1px solid ${r.stroke.primary};
-	background: ${(c) => c.$active ? r.surface.subdued : "transparent"};
+	border-bottom: 1px solid ${o.stroke.primary};
+	background: ${(s) => s.$active ? o.surface.subdued : "transparent"};
 	cursor: pointer;
 	text-align: left;
 
 	&:hover {
-		background: ${r.surface.hovered};
+		background: ${o.surface.hovered};
 	}
-`, Ie = h.div`
+`, Ce = u.div`
 	display: flex;
 	align-items: center;
 	gap: 12px;
 	min-width: 0;
-`, Re = h.div`
+`, Te = u.div`
 	display: flex;
 	align-items: center;
 	gap: 6px;
 	padding: 8px 12px;
-	border-top: 1px solid ${r.stroke.primary};
-`, Se = h.span`
+	border-top: 1px solid ${o.stroke.primary};
+`, $e = u.span`
 	flex-shrink: 0;
-	color: ${r.content.brand};
+	color: ${o.content.brand};
 	font-family: Inter;
 	font-size: 14px;
 	font-weight: 600;
 	white-space: nowrap;
-`, Ae = h.div`
+`, Be = u.div`
 	width: 100%;
 	text-align: center;
-	color: ${r.content.brand};
+	color: ${o.content.brand};
 	font-family: Inter;
 	font-size: 14px;
 	font-weight: 600;
-`, Ee = h.button`
+`, Oe = u.button`
 	display: flex;
 	align-items: center;
 	padding: 12px 16px;
 	border: none;
-	border-bottom: 1px solid ${r.stroke.primary};
+	border-bottom: 1px solid ${o.stroke.primary};
 	background: transparent;
 	cursor: pointer;
 	font-family: Inter;
@@ -394,13 +462,13 @@ const te = {
 	box-sizing: border-box;
 	flex-shrink: 0;
 	gap: 4px;
-`, Ce = h.div`
+`, _e = u.div`
 	padding: 12px 10px;
 	font-family: Inter;
 	font-size: 13px;
-	color: ${r.content.secondary};
+	color: ${o.content.secondary};
 `;
 export {
-  Fe as MentionPicker
+  Xe as MentionPicker
 };
 //# sourceMappingURL=MentionPicker.js.map