@telia-ace/widget-conversation 1.0.40 → 1.0.41

package/dist/{conversation-9e73f101.js → conversation-5f8374bf.js}

@@ -2,42 +2,42 @@ var ve = Object.defineProperty, Ee = Object.defineProperties;
 var xe = Object.getOwnPropertyDescriptors;
 var T = Object.getOwnPropertySymbols;
 var ne = Object.prototype.hasOwnProperty, re = Object.prototype.propertyIsEnumerable;
-var te = (e, t, r) => t in e ? ve(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, g = (e, t) => {
-  for (var r in t || (t = {}))
-    ne.call(t, r) && te(e, r, t[r]);
+var te = (e, t, o) => t in e ? ve(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o, g = (e, t) => {
+  for (var o in t || (t = {}))
+    ne.call(t, o) && te(e, o, t[o]);
   if (T)
-    for (var r of T(t))
-      re.call(t, r) && te(e, r, t[r]);
+    for (var o of T(t))
+      re.call(t, o) && te(e, o, t[o]);
   return e;
-}, E = (e, t) => Ee(e, xe(t));
-var F = (e, t) => {
-  var r = {};
-  for (var o in e)
-    ne.call(e, o) && t.indexOf(o) < 0 && (r[o] = e[o]);
+}, x = (e, t) => Ee(e, xe(t));
+var W = (e, t) => {
+  var o = {};
+  for (var r in e)
+    ne.call(e, r) && t.indexOf(r) < 0 && (o[r] = e[r]);
   if (e != null && T)
-    for (var o of T(e))
-      t.indexOf(o) < 0 && re.call(e, o) && (r[o] = e[o]);
-  return r;
+    for (var r of T(e))
+      t.indexOf(r) < 0 && re.call(e, r) && (o[r] = e[r]);
+  return o;
 };
-import a from "@emotion/styled";
-import { useIsTabbing as ke, useDispatch as Y, useProperties as N, useScroll as se, SymbolBadge as x, Input as le, Button as z, borderTabStyle as p, Typography as G, invertedHoverButton as we, Html as J, List as ie, buttonCss as Q, ItemList as K, itemList as O, useComponent as Ce, genericHtml as Se, headingElement as X, list as ze, WidgetOverlayOutlet as ce, ConversationContext as Le } from "@telia-ace/widget-ui";
+import l from "@emotion/styled";
+import { useIsTabbing as ke, useDispatch as G, useProperties as N, useScroll as le, SymbolBadge as v, Input as se, Button as z, borderTabStyle as f, Typography as J, invertedHoverButton as we, Html as Q, List as ie, buttonCss as K, ItemList as O, itemList as j, Link as Ce, useComponent as Se, genericHtml as ze, headingElement as X, list as Le, WidgetOverlayOutlet as ce, ConversationContext as Me } from "@telia-ace/widget-ui";
 import { appendClassNames as I } from "@telia-ace/widget-utilities";
-import n, { useState as A, useEffect as me, forwardRef as Z, Suspense as Me, useMemo as Ne, useCallback as de, useRef as Ie } from "react";
-import { css as y, keyframes as He } from "@emotion/react";
-import { FormComponent as Te } from "@telia-ace/widget-forms";
-import { ConversationMessageListItemType as w, ConversationMessageType as W } from "./index.js";
+import n, { useState as A, useEffect as me, forwardRef as Z, Suspense as Ne, useMemo as Ie, useCallback as de, useRef as He } from "react";
+import { css as y, keyframes as Te } from "@emotion/react";
+import { FormComponent as Ae } from "@telia-ace/widget-forms";
+import { ConversationMessageListItemType as w, ConversationMessageType as P } from "./index.js";
 import "@telia-ace/widget-core";
 import "@telia-ace/widget-services";
 import "@telia-ace/widget-plugins";
-const Ae = ({ className: e }) => {
-  const [t, r] = A(""), [o, s] = A(!1), [l, u] = A(0), [c, h] = A(0), v = ke(), m = Y(), {
+const Re = ({ className: e }) => {
+  const [t, o] = A(""), [r, a] = A(!1), [s, u] = A(0), [c, h] = A(0), E = ke(), m = G(), {
     inputPlaceholder: i = "Type your message",
     inputHidden: $ = !1,
     inputDisabled: S = !1,
     sendButtonLabel: L = "Send message",
     inputMultiline: k = !0,
-    secondaryAction: f
-  } = N(), [ye, b] = se(!0);
+    secondaryAction: p
+  } = N(), [ye, b] = le(!0);
   me(() => {
     if (b.current) {
       const { lineHeight: d, maxHeight: H } = getComputedStyle(b.current);
@@ -49,85 +49,85 @@ const Ae = ({ className: e }) => {
       }
     }
   }, [b.current]);
-  const j = (d) => {
-    !d.shiftKey || !k ? (d.preventDefault(), t && t.length > 0 && (m("user-submit", { text: t }), r(""), D(""))) : t.length < 1 && d.preventDefault();
-  }, pe = (d) => {
-    f && (d.preventDefault(), m("action", g({
-      actionKey: f.action
-    }, f)));
+  const D = (d) => {
+    !d.shiftKey || !k ? (d.preventDefault(), t && t.length > 0 && (m("user-submit", { text: t }), o(""), F(""))) : t.length < 1 && d.preventDefault();
   }, fe = (d) => {
+    p && (d.preventDefault(), m("action", g({
+      actionKey: p.action
+    }, p)));
+  }, pe = (d) => {
     if (k && b.current) {
       const H = b.current.scrollHeight;
-      if (H > l) {
+      if (H > s) {
         b.current.style.height = "auto";
         let M = H;
-        d.length < 1 && (M = l), b.current.style.height = `${M}px`, M >= c ? b.current.style.overflowY = "scroll" : b.current.style.overflowY = "hidden";
+        d.length < 1 && (M = s), b.current.style.height = `${M}px`, M >= c ? b.current.style.overflowY = "scroll" : b.current.style.overflowY = "hidden";
       }
     }
-  }, D = (d) => {
-    fe(d), r(d), d && d.length > 0 && m("user-typing", { textLength: d.length });
+  }, F = (d) => {
+    pe(d), o(d), d && d.length > 0 && m("user-typing", { textLength: d.length });
   };
   return $ ? null : /* @__PURE__ */ n.createElement(
-    Oe,
+    je,
     {
       grow: k,
       className: I("humany-conversation-input", e),
-      "data-has-focus": o,
+      "data-has-focus": r,
       scrollableCss: ye,
-      isTabbing: v
+      isTabbing: E
     },
-    f && /* @__PURE__ */ n.createElement(
-      Ke,
+    p && /* @__PURE__ */ n.createElement(
+      Oe,
       {
         disabled: S,
-        onClick: pe,
-        title: f.label,
-        "aria-label": f.label
+        onClick: fe,
+        title: p.label,
+        "aria-label": p.label
       },
       /* @__PURE__ */ n.createElement(
-        x,
+        v,
         {
           size: 24,
-          symbol: { type: "Svg", content: f.icon || "browse" }
+          symbol: { type: "Svg", content: p.icon || "browse" }
         }
       )
     ),
     k ? /* @__PURE__ */ n.createElement(
-      Re,
+      Be,
       {
         value: t,
-        onChange: D,
-        onEnter: j,
+        onChange: F,
+        onEnter: D,
         disabled: S,
         "aria-label": i,
         placeholder: i,
-        onFocusChange: s,
+        onFocusChange: a,
         type: "textarea",
         rows: 1,
         ref: b
       }
     ) : /* @__PURE__ */ n.createElement(
-      Be,
+      Ke,
       {
         value: t,
-        onChange: D,
-        onEnter: j,
+        onChange: F,
+        onEnter: D,
         disabled: S,
         "aria-label": i,
         placeholder: i,
-        onFocusChange: s
+        onFocusChange: a
       }
     ),
     /* @__PURE__ */ n.createElement(
       ue,
       {
         disabled: S,
-        onClick: j,
+        onClick: D,
         title: L,
         "aria-label": L
       },
       /* @__PURE__ */ n.createElement(
-        je,
+        De,
         {
           size: 22,
           symbol: { type: "Svg", content: "send" },
@@ -136,7 +136,7 @@ const Ae = ({ className: e }) => {
       )
     )
   );
-}, Re = a(le)`
+}, Be = l(se)`
     resize: none;
     flex: 1;
     flex-shrink: 1;
@@ -156,7 +156,7 @@ const Ae = ({ className: e }) => {
     border: none;
     transition: height 200ms linear;
     outline: none;
-`, Be = a(le)`
+`, Ke = l(se)`
     flex: 1;
     border: none;
     background-color: transparent;
@@ -182,7 +182,7 @@ const Ae = ({ className: e }) => {
 }};
         font-style: italic;
     }
-`, ue = a(z)`
+`, ue = l(z)`
     flex: 0 0 50px;
     align-self: stretch;
     background-color: transparent;
@@ -192,15 +192,15 @@ const Ae = ({ className: e }) => {
     border: none;
     color: #a6a6a6;
     &:focus-visible {
-        ${p};
+        ${f};
     }
-`, Ke = a(ue)`
+`, Oe = l(ue)`
     border-right: ${(e) => e.theme.border};
     margin: ${(e) => {
   var t;
   return (t = e.theme.sizes) == null ? void 0 : t.normal;
 }} 0;
-`, Oe = a.div`
+`, je = l.div`
     ${(e) => e.grow ? y`
                   min-height: 50px;
                   max-height: 150px;
@@ -215,18 +215,18 @@ const Ae = ({ className: e }) => {
   return (t = e.theme.colors) == null ? void 0 : t.accent;
 }};
     border-top: ${(e) => e.theme.inputBorder};
-    ${(e) => e["data-has-focus"] && e.isTabbing && p}
+    ${(e) => e["data-has-focus"] && e.isTabbing && f}
     textarea {
         ${(e) => !!e.scrollableCss && e.scrollableCss}
     }
-`, je = a(
-  (r) => {
-    var o = r, {
+`, De = l(
+  (o) => {
+    var r = o, {
       hasContent: e
-    } = o, t = F(o, [
+    } = r, t = W(r, [
       "hasContent"
     ]);
-    return /* @__PURE__ */ n.createElement(x, g({}, t));
+    return /* @__PURE__ */ n.createElement(v, g({}, t));
   }
 )`
     line,
@@ -240,7 +240,7 @@ const Ae = ({ className: e }) => {
   return e.hasContent ? (t = e.theme.colors) == null ? void 0 : t.primary : "#a6a6a6";
 }};
     }
-`, De = Ae, Fe = a.div`
+`, Fe = Re, We = l.div`
     width: ${(e) => e.avatarSize || "32px"};
     height: ${(e) => e.avatarSize || "32px"};
     border-radius: 50%;
@@ -287,7 +287,7 @@ const Ae = ({ className: e }) => {
 }};
         }
     }
-`, We = He`
+`, Pe = Te`
   0% {
     opacity: 0;
   }
@@ -297,7 +297,7 @@ const Ae = ({ className: e }) => {
   100% {
     opacity: 0;
   }
-`, Pe = a.div`
+`, Ue = l.div`
     display: flex;
     justify-content: center;
     > div {
@@ -309,7 +309,7 @@ const Ae = ({ className: e }) => {
   var t;
   return (t = e.theme.colors) == null ? void 0 : t.text;
 }};
-        animation: ${We} 1s infinite;
+        animation: ${Pe} 1s infinite;
     }
     > div:nth-of-type(2) {
         animation-delay: 100ms;
@@ -317,29 +317,29 @@ const Ae = ({ className: e }) => {
     > div:nth-of-type(3) {
         animation-delay: 200ms;
     }
-`, _ = a.div`
+`, V = l.div`
     grid-area: content;
     max-width: 100%;
     overflow: hidden;
-`, Ue = a(G)`
+`, _e = l(J)`
     font-size: ${(e) => {
   var t;
   return (t = e.theme.fonts) == null ? void 0 : t.normal;
 }};
     font-weight: normal;
     margin: 0;
-`, V = a.div`
+`, q = l.div`
     display: flex;
     ${(e) => e.left && "justify-content: start;"};
     ${(e) => e.center && "justify-content: center;"};
     ${(e) => e.right && "justify-content: end;"};
-`, q = a.div`
+`, Y = l.div`
     ${(e) => {
   var t;
   return e.padded && `padding: ${(t = e.theme.sizes) == null ? void 0 : t.medium};`;
 }}
-    ${(e) => !e.user && e.stacked && _e(e.stacked, e.theme)}
-    ${(e) => e.user && e.stacked && Ve(e.stacked, e.theme)}
+    ${(e) => !e.user && e.stacked && Ve(e.stacked, e.theme)}
+    ${(e) => e.user && e.stacked && qe(e.stacked, e.theme)}
 
     display: inline-block;
     margin-top: ${(e) => {
@@ -355,15 +355,15 @@ const Ae = ({ className: e }) => {
     }
     max-width: 100%;
     ${(e) => e.fullWidth && "width: 100%;"}
-`, _e = (e, t) => {
-  var o, s;
-  const r = y`
-        background-color: ${(o = t.colors) == null ? void 0 : o.accent};
-        color: ${(s = t.colors) == null ? void 0 : s.text};
+`, Ve = (e, t) => {
+  var r, a;
+  const o = y`
+        background-color: ${(r = t.colors) == null ? void 0 : r.accent};
+        color: ${(a = t.colors) == null ? void 0 : a.text};
         ${t.border && `border: ${t.border};`};
     `;
   return t.borderRadius ? y`
-        ${r}
+        ${o}
 
         border-top-right-radius: ${t.borderRadius};
         border-bottom-right-radius: ${t.borderRadius};
@@ -375,15 +375,15 @@ const Ae = ({ className: e }) => {
         ${e === "last" && `
             border-bottom-left-radius: ${t.borderRadius};
         `}
-    ` : r;
-}, Ve = (e, t) => {
-  var o, s;
-  const r = y`
-        background-color: ${(o = t.colors) == null ? void 0 : o.primary};
-        color: ${(s = t.colors) == null ? void 0 : s.accent};
+    ` : o;
+}, qe = (e, t) => {
+  var r, a;
+  const o = y`
+        background-color: ${(r = t.colors) == null ? void 0 : r.primary};
+        color: ${(a = t.colors) == null ? void 0 : a.accent};
     `;
   return t.borderRadius ? y`
-        ${r}
+        ${o}
 
         border-top-left-radius: ${t.borderRadius};
         border-bottom-left-radius: ${t.borderRadius};
@@ -395,8 +395,8 @@ const Ae = ({ className: e }) => {
         ${e === "last" && `
             border-bottom-right-radius: ${t.borderRadius};
         `}
-    ` : r;
-}, R = a.div`
+    ` : o;
+}, R = l.div`
     margin-bottom: ${(e) => {
   var t;
   return (t = e.theme.sizes) == null ? void 0 : t.normal;
@@ -405,19 +405,19 @@ const Ae = ({ className: e }) => {
         margin-bottom: 0;
     }
 `, C = (e) => {
-  var t, r;
+  var t, o;
   return y`
     margin: ${(t = e.theme.sizes) == null ? void 0 : t.medium} 0;
-    padding: 0 ${(r = e.theme.sizes) == null ? void 0 : r.medium};
+    padding: 0 ${(o = e.theme.sizes) == null ? void 0 : o.medium};
 `;
-}, qe = a(Te)`
+}, Ye = l(Ae)`
     & button.humany-form-component-button {
         ${(e) => {
-  var t, r, o, s;
-  return ((t = e.theme.colors) == null ? void 0 : t.primary) && ((r = e.theme.colors) == null ? void 0 : r.accent) && we({
+  var t, o, r, a;
+  return ((t = e.theme.colors) == null ? void 0 : t.primary) && ((o = e.theme.colors) == null ? void 0 : o.accent) && we({
     active: !1,
-    primaryColor: (o = e.theme.colors) == null ? void 0 : o.primary,
-    secondaryColor: (s = e.theme.colors) == null ? void 0 : s.accent,
+    primaryColor: (r = e.theme.colors) == null ? void 0 : r.primary,
+    secondaryColor: (a = e.theme.colors) == null ? void 0 : a.accent,
     theme: e.theme
   });
 }};
@@ -438,18 +438,18 @@ const Ae = ({ className: e }) => {
 }};
         }
     }
-`, Ye = a(J)`
+`, Ge = l(Q)`
     white-space: pre-wrap;
     a {
         color: ${(e) => e.theme.colors.link};
         &:focus {
             ${(e) => {
   var t;
-  return ((t = e.theme.accessibility) == null ? void 0 : t.isTabbing) && p;
+  return ((t = e.theme.accessibility) == null ? void 0 : t.isTabbing) && f;
 }};
         }
     }
-`, Ge = a(ie)`
+`, Je = l(ie)`
     padding: 0;
     list-style: none;
     margin: 0 -${(e) => {
@@ -462,8 +462,8 @@ const Ae = ({ className: e }) => {
   return (t = e.theme.sizes) == null ? void 0 : t.normal;
 }};
     }
-`, Je = a.button`
-    ${(e) => Q(e)};
+`, Qe = l.button`
+    ${(e) => K(e)};
     display: block;
     background-color: ${(e) => {
   var t;
@@ -472,12 +472,12 @@ const Ae = ({ className: e }) => {
     width: 100%;
     color: #fff;
     &:focus-visible {
-        ${p}
+        ${f}
         background-color: transparent;
     }
-`, Qe = Z(
-  ({ boxed: e, className: t, agentData: r }, o) => /* @__PURE__ */ n.createElement(_, { ref: o }, /* @__PURE__ */ n.createElement(V, { left: e, center: !e }, /* @__PURE__ */ n.createElement(q, { padded: !!e, stacked: e ? "first" : void 0 }, /* @__PURE__ */ n.createElement(Pe, null, /* @__PURE__ */ n.createElement("div", null), /* @__PURE__ */ n.createElement("div", null), /* @__PURE__ */ n.createElement("div", null)))))
-), oe = Qe, Xe = a.p`
+`, Xe = Z(
+  ({ boxed: e, className: t, agentData: o }, r) => /* @__PURE__ */ n.createElement(V, { ref: r }, /* @__PURE__ */ n.createElement(q, { left: e, center: !e }, /* @__PURE__ */ n.createElement(Y, { padded: !!e, stacked: e ? "first" : void 0 }, /* @__PURE__ */ n.createElement(Ue, null, /* @__PURE__ */ n.createElement("div", null), /* @__PURE__ */ n.createElement("div", null), /* @__PURE__ */ n.createElement("div", null)))))
+), oe = Xe, Ze = l.p`
     && {
         font-size: ${(e) => {
   var t;
@@ -492,24 +492,24 @@ const Ae = ({ className: e }) => {
   var t;
   return (t = e.theme.colors) == null ? void 0 : t.text;
 }};
-`, ae = (e) => new Date(e).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }), Ze = ({ className: e, name: t, timestamp: r }) => {
-  if (!t && !r)
+`, ae = (e) => new Date(e).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }), et = ({ className: e, name: t, timestamp: o }) => {
+  if (!t && !o)
     return null;
-  let o = "";
-  return t ? r ? o = `${t}: ${ae(r)}` : o = t : r && (o = ae(r)), /* @__PURE__ */ n.createElement(Xe, null, o);
-}, B = Ze, et = ({ className: e, children: t, sender: r, timestamp: o }) => {
-  const { avatar: s, name: l } = r, { avatarSize: u } = N();
+  let r = "";
+  return t ? o ? r = `${t}: ${ae(o)}` : r = t : o && (r = ae(o)), /* @__PURE__ */ n.createElement(Ze, null, r);
+}, B = et, tt = ({ className: e, children: t, sender: o, timestamp: r }) => {
+  const { avatar: a, name: s } = o, { avatarSize: u } = N();
   return /* @__PURE__ */ n.createElement(
-    tt,
+    nt,
     {
-      hasAvatar: !!s,
+      hasAvatar: !!a,
       className: I(e, "humany-conversation-agent-message")
     },
-    s && /* @__PURE__ */ n.createElement(Fe, { avatarSize: u }, typeof s == "string" ? /* @__PURE__ */ n.createElement("img", { src: s }) : /* @__PURE__ */ n.createElement(x, { symbol: s })),
+    a && /* @__PURE__ */ n.createElement(We, { avatarSize: u }, typeof a == "string" ? /* @__PURE__ */ n.createElement("img", { src: a }) : /* @__PURE__ */ n.createElement(v, { symbol: a })),
     t,
-    /* @__PURE__ */ n.createElement(B, { name: l, timestamp: o })
+    /* @__PURE__ */ n.createElement(B, { name: s, timestamp: r })
   );
-}, tt = a.div`
+}, nt = l.div`
     display: grid;
     margin-right: 10%;
     width: 90%;
@@ -526,24 +526,24 @@ const Ae = ({ className: e }) => {
                       'content'
                       'info';
               `};
-`, he = et, nt = Z(
-  ({ className: e, children: t, timestamp: r, discrete: o, fullWidth: s }, l) => /* @__PURE__ */ n.createElement(
-    rt,
+`, he = tt, rt = Z(
+  ({ className: e, children: t, timestamp: o, discrete: r, fullWidth: a }, s) => /* @__PURE__ */ n.createElement(
+    ot,
     {
-      ref: l,
+      ref: s,
       className: I(e, "humany-conversation-system-message"),
-      fullWidth: s
+      fullWidth: a
     },
-    o ? /* @__PURE__ */ n.createElement(ot, { className: "humany-conversation-discrete-message" }, t, /* @__PURE__ */ n.createElement(B, { timestamp: r })) : /* @__PURE__ */ n.createElement(n.Fragment, null, t, /* @__PURE__ */ n.createElement(B, { timestamp: r }))
+    r ? /* @__PURE__ */ n.createElement(at, { className: "humany-conversation-discrete-message" }, t, /* @__PURE__ */ n.createElement(B, { timestamp: o })) : /* @__PURE__ */ n.createElement(n.Fragment, null, t, /* @__PURE__ */ n.createElement(B, { timestamp: o }))
   )
-), rt = a.div`
+), ot = l.div`
     ${(e) => e.fullWidth && "width: 100%"};
     padding: 0 ${(e) => {
   var t;
   return (t = e.theme.sizes) == null ? void 0 : t.large;
 }};
     overflow: auto;
-`, ot = a.div`
+`, at = l.div`
     text-align: center;
     word-wrap: break-word;
     font-size: ${(e) => {
@@ -557,46 +557,63 @@ const Ae = ({ className: e }) => {
     > p {
         margin: 0;
     }
-`, at = nt, st = ({ className: e, children: t, timestamp: r }) => {
-  const { userLabel: o = "" } = N();
+`, lt = rt, st = ({ className: e, children: t, timestamp: o }) => {
+  const { userLabel: r = "" } = N();
   return /* @__PURE__ */ n.createElement(
-    lt,
+    it,
     {
       className: I(e, "humany-conversation-user-message")
     },
     t,
-    /* @__PURE__ */ n.createElement(B, { name: o, timestamp: r })
+    /* @__PURE__ */ n.createElement(B, { name: r, timestamp: o })
   );
-}, lt = a.div`
+}, it = l.div`
     margin-left: 10%;
     width: 90%;
     display: flex;
     flex-direction: column;
     align-items: flex-end;
-`, it = st, ee = (e) => Array.isArray(e) ? e : Object.keys(e).map((t) => ({
+`, ct = st, ee = (e) => Array.isArray(e) ? e : Object.keys(e).map((t) => ({
   label: e[t],
   actionKey: t
-})), ct = ({ header: e, actions: t, dispatch: r }) => /* @__PURE__ */ n.createElement(
-  mt,
+})), mt = ({ header: e, actions: t, dispatch: o }) => /* @__PURE__ */ n.createElement(
+  dt,
   {
     className: "humany-conversation-button-list",
     header: e,
     items: ee(t),
-    renderItem: (o) => /* @__PURE__ */ n.createElement("li", { key: o.actionKey }, /* @__PURE__ */ n.createElement(
-      dt,
-      {
-        onClick: () => {
-          r("action", o);
+    renderItem: (r) => {
+      var s;
+      const a = !!((s = r == null ? void 0 : r.data) != null && s.href);
+      return /* @__PURE__ */ n.createElement("li", { key: r.actionKey }, a ? /* @__PURE__ */ n.createElement(
+        ut,
+        {
+          onClick: () => {
+            o("action", r);
+          },
+          href: r.data.href,
+          target: r.data.target,
+          "aria-label": r.label,
+          title: r.label
         },
-        "aria-label": o.label,
-        title: o.label
-      },
-      /* @__PURE__ */ n.createElement(x, { symbol: o.symbol }),
-      o.label
-    ))
+        /* @__PURE__ */ n.createElement(v, { symbol: r.symbol }),
+        r.label
+      ) : /* @__PURE__ */ n.createElement(
+        ht,
+        {
+          onClick: () => {
+            o("action", r);
+          },
+          "aria-label": r.label,
+          title: r.label
+        },
+        /* @__PURE__ */ n.createElement(v, { symbol: r.symbol }),
+        r.label
+      ));
+    }
   }
-), mt = a(K)`
-    ${O}
+), dt = l(O)`
+    ${j}
     > ul {
         display: flex;
         flex-wrap: wrap;
@@ -609,8 +626,36 @@ const Ae = ({ className: e }) => {
         }
     }
     ${C}
-`, dt = a(z)`
-    ${Q};
+`, ut = l(Ce)`
+    ${K};
+
+    display: block;
+    padding: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.normal;
+}};
+    background-color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.primary;
+}};
+    width: 100%;
+    color: #ffffff;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    &:focus-visible {
+        ${f}
+        background-color: transparent;
+    }
+
+    i,
+    svg {
+        margin-right: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.small;
+}};
+    }
+`, ht = l(z)`
+    ${K};
 
     display: block;
     padding: ${(e) => {
@@ -626,7 +671,7 @@ const Ae = ({ className: e }) => {
     overflow: hidden;
     text-overflow: ellipsis;
     &:focus-visible {
-        ${p}
+        ${f}
         background-color: transparent;
     }
 
@@ -637,52 +682,52 @@ const Ae = ({ className: e }) => {
   return (t = e.theme.sizes) == null ? void 0 : t.small;
 }};
     }
-`, ut = ({ type: e, content: t = {} }) => {
-  const r = Ce(e);
-  return !r || !e ? null : /* @__PURE__ */ n.createElement(Me, { fallback: null }, /* @__PURE__ */ n.createElement(r, g({}, t)));
-}, ht = ({ body: e }) => /* @__PURE__ */ n.createElement(gt, { html: e }), gt = a(J)`
-    ${Se}
+`, gt = ({ type: e, content: t = {} }) => {
+  const o = Se(e);
+  return !o || !e ? null : /* @__PURE__ */ n.createElement(Ne, { fallback: null }, /* @__PURE__ */ n.createElement(o, g({}, t)));
+}, yt = ({ body: e }) => /* @__PURE__ */ n.createElement(ft, { html: e }), ft = l(Q)`
+    ${ze}
     color: inherit;
     white-space: pre-wrap;
     ${C}
     a {
         color: ${(e) => e.theme.colors.link};
         &:focus-visible {
-            ${p};
+            ${f};
         }
     }
-`, yt = ({ header: e, actions: t, dispatch: r }) => /* @__PURE__ */ n.createElement(
-  pt,
+`, pt = ({ header: e, actions: t, dispatch: o }) => /* @__PURE__ */ n.createElement(
+  bt,
   {
     className: "humany-conversation-item-list",
     header: e,
     items: ee(t),
-    renderItem: (o) => {
-      var s;
-      return /* @__PURE__ */ n.createElement("li", { key: o.actionKey }, /* @__PURE__ */ n.createElement(ft, null, ((s = o.symbol) == null ? void 0 : s.content) && /* @__PURE__ */ n.createElement("div", { className: "item-icon" }, /* @__PURE__ */ n.createElement(
-        x,
+    renderItem: (r) => {
+      var a;
+      return /* @__PURE__ */ n.createElement("li", { key: r.actionKey }, /* @__PURE__ */ n.createElement($t, null, ((a = r.symbol) == null ? void 0 : a.content) && /* @__PURE__ */ n.createElement("div", { className: "item-icon" }, /* @__PURE__ */ n.createElement(
+        v,
         {
           size: 22,
           symbol: {
-            type: o.symbol.type,
-            content: o.symbol.content
+            type: r.symbol.type,
+            content: r.symbol.content
           }
         }
       )), /* @__PURE__ */ n.createElement("div", { className: "item-body" }, /* @__PURE__ */ n.createElement(
         z,
         {
           onClick: () => {
-            r("action", o);
+            o("action", r);
           },
-          "aria-label": o.label,
-          title: o.label
+          "aria-label": r.label,
+          title: r.label
         },
-        o.label
-      ), o.description && /* @__PURE__ */ n.createElement("p", null, o.description))));
+        r.label
+      ), r.description && /* @__PURE__ */ n.createElement("p", null, r.description))));
     }
   }
-), pt = a(K)`
-    ${O}
+), bt = l(O)`
+    ${j}
 
     > .humany-paragraph {
         ${C}
@@ -719,7 +764,7 @@ const Ae = ({ className: e }) => {
             border-bottom: none;
         }
     }
-`, ft = a.div`
+`, $t = l.div`
     display: flex;
     gap: ${(e) => {
   var t;
@@ -758,7 +803,7 @@ const Ae = ({ className: e }) => {
         margin: 0;
 
         &:focus-visible {
-            ${p}
+            ${f}
             span {
                 color: ${(e) => {
   var t;
@@ -768,25 +813,25 @@ const Ae = ({ className: e }) => {
             }
         }
     }
-`, bt = ({ header: e, actions: t, dispatch: r }) => /* @__PURE__ */ n.createElement(
-  $t,
+`, vt = ({ header: e, actions: t, dispatch: o }) => /* @__PURE__ */ n.createElement(
+  Et,
   {
     className: "humany-conversation-link-list",
     header: e,
     items: ee(t),
-    renderItem: (o) => /* @__PURE__ */ n.createElement("li", { key: o.actionKey }, /* @__PURE__ */ n.createElement(
-      vt,
+    renderItem: (r) => /* @__PURE__ */ n.createElement("li", { key: r.actionKey }, /* @__PURE__ */ n.createElement(
+      xt,
       {
-        help: o.actionKey === "help",
+        help: r.actionKey === "help",
         onClick: () => {
-          r("action", o);
+          o("action", r);
         },
-        "aria-label": o.label,
-        title: o.label
+        "aria-label": r.label,
+        title: r.label
       },
-      o.label,
-      o.actionKey === "help" && /* @__PURE__ */ n.createElement(
-        x,
+      r.label,
+      r.actionKey === "help" && /* @__PURE__ */ n.createElement(
+        v,
         {
           size: 14,
           symbol: {
@@ -797,8 +842,8 @@ const Ae = ({ className: e }) => {
       )
     ))
   }
-), $t = a(K)`
-    ${O}
+), Et = l(O)`
+    ${j}
     ${C}
 
     ${(e) => X(e)(
@@ -819,7 +864,7 @@ const Ae = ({ className: e }) => {
             margin: 0;
         }
     }
-`, vt = a(z)`
+`, xt = l(z)`
     display: block;
     text-align: left;
     font-weight: 300;
@@ -832,20 +877,20 @@ const Ae = ({ className: e }) => {
     overflow: hidden;
 
     ${(e) => {
-  var t, r;
+  var t, o;
   return e.help && y`
             color: ${(t = e.theme.colors) == null ? void 0 : t.text};
             text-decoration: underline;
 
             i,
             svg {
-                margin-left: ${(r = e.theme.sizes) == null ? void 0 : r.small};
+                margin-left: ${(o = e.theme.sizes) == null ? void 0 : o.small};
             }
         `;
 }}
 
     &:focus-visible {
-        ${p}
+        ${f}
         span {
             color: ${(e) => {
   var t;
@@ -854,18 +899,18 @@ const Ae = ({ className: e }) => {
             text-decoration: underline;
         }
     }
-`, Et = () => /* @__PURE__ */ n.createElement(xt, { className: "humany-conversation-separator" }), xt = a.div`
+`, kt = () => /* @__PURE__ */ n.createElement(wt, { className: "humany-conversation-separator" }), wt = l.div`
     ${(e) => e.theme.border && `border-bottom: ${e.theme.border};`}
     width: 100%;
-`, kt = ({ text: e }) => /* @__PURE__ */ n.createElement(wt, { className: "humany-conversation-text", variant: "span" }, e), wt = a(G)`
+`, Ct = ({ text: e }) => /* @__PURE__ */ n.createElement(St, { className: "humany-conversation-text", variant: "span" }, e), St = l(J)`
     ${C}
-`, Ct = ({
+`, zt = ({
   header: e = "Video call",
   acceptLabel: t = "Accept",
-  declineLabel: r = "Decline",
-  dispatch: o
+  declineLabel: o = "Decline",
+  dispatch: r
 }) => {
-  const s = Ne(() => [
+  const a = Ie(() => [
     {
       label: t,
       actionKey: "accept-video-call",
@@ -875,39 +920,39 @@ const Ae = ({ className: e }) => {
       }
     },
     {
-      label: r,
+      label: o,
       actionKey: "decline-video-call",
       symbol: {
         type: "Svg",
         content: "close"
       }
     }
-  ], [t, r]);
+  ], [t, o]);
   return /* @__PURE__ */ n.createElement(
-    St,
+    Lt,
     {
       className: "humany-conversation-video-request",
       header: e,
-      items: s,
-      renderItem: (l) => {
-        const u = l.actionKey === "accept-video-call" ? "#70c48e" : "#da5c85";
-        return /* @__PURE__ */ n.createElement("li", { key: l.actionKey }, /* @__PURE__ */ n.createElement(
-          zt,
+      items: a,
+      renderItem: (s) => {
+        const u = s.actionKey === "accept-video-call" ? "#70c48e" : "#da5c85";
+        return /* @__PURE__ */ n.createElement("li", { key: s.actionKey }, /* @__PURE__ */ n.createElement(
+          Mt,
           {
             onClick: () => {
-              o("action", l);
+              r("action", s);
             },
-            "aria-label": l.label,
-            title: l.label,
+            "aria-label": s.label,
+            title: s.label,
             bgColor: u
           },
-          /* @__PURE__ */ n.createElement(x, { symbol: l.symbol, size: 25 })
+          /* @__PURE__ */ n.createElement(v, { symbol: s.symbol, size: 25 })
         ));
       }
     }
   );
-}, St = a(K)`
-    ${(e) => O(e)}
+}, Lt = l(O)`
+    ${(e) => j(e)}
     > ul {
         display: flex;
         flex-wrap: wrap;
@@ -920,8 +965,8 @@ const Ae = ({ className: e }) => {
         }
     }
     ${(e) => C(e)}
-`, zt = a(z)`
-    ${Q};
+`, Mt = l(z)`
+    ${K};
 
     background-color: ${(e) => e.bgColor};
     display: flex;
@@ -933,7 +978,7 @@ const Ae = ({ className: e }) => {
     border-radius: 100%;
 
     &:focus-visible {
-        ${p}
+        ${f}
         background-color: transparent;
 
         i,
@@ -960,86 +1005,86 @@ const Ae = ({ className: e }) => {
             stroke: #fff;
         }
     }
-`, Lt = ([e, t]) => ({ type: e, content: t }), Mt = ({ items: e, dispatch: t }) => /* @__PURE__ */ n.createElement(
-  Nt,
+`, Nt = ([e, t]) => ({ type: e, content: t }), It = ({ items: e, dispatch: t }) => /* @__PURE__ */ n.createElement(
+  Ht,
   {
     className: "humany-message-list",
-    items: e.map(Lt),
+    items: e.map(Nt),
     renderLi: !0,
-    renderItem: (r) => {
-      switch (r.type) {
+    renderItem: (o) => {
+      switch (o.type) {
         case w.Text:
-          return /* @__PURE__ */ n.createElement(kt, { text: r.content });
+          return /* @__PURE__ */ n.createElement(Ct, { text: o.content });
         case w.HTML:
-          return /* @__PURE__ */ n.createElement(ht, g({}, r.content));
+          return /* @__PURE__ */ n.createElement(yt, g({}, o.content));
         case w.Separator:
-          return /* @__PURE__ */ n.createElement(Et, g({}, r.content));
+          return /* @__PURE__ */ n.createElement(kt, g({}, o.content));
         case w.ItemList:
-          return /* @__PURE__ */ n.createElement(yt, E(g({}, r.content), { dispatch: t }));
+          return /* @__PURE__ */ n.createElement(pt, x(g({}, o.content), { dispatch: t }));
         case w.LinkList:
-          return /* @__PURE__ */ n.createElement(bt, E(g({}, r.content), { dispatch: t }));
+          return /* @__PURE__ */ n.createElement(vt, x(g({}, o.content), { dispatch: t }));
         case w.ButtonList:
-          return /* @__PURE__ */ n.createElement(ct, E(g({}, r.content), { dispatch: t }));
+          return /* @__PURE__ */ n.createElement(mt, x(g({}, o.content), { dispatch: t }));
         case w.VideoRequest:
-          return /* @__PURE__ */ n.createElement(Ct, E(g({}, r.content), { dispatch: t }));
+          return /* @__PURE__ */ n.createElement(zt, x(g({}, o.content), { dispatch: t }));
         default:
-          return /* @__PURE__ */ n.createElement(ut, { type: r.type, content: r.content });
+          return /* @__PURE__ */ n.createElement(gt, { type: o.type, content: o.content });
       }
     }
   }
-), Nt = a(ie)`
-    ${ze}
+), Ht = l(ie)`
+    ${Le}
 
     > li {
         margin: 0;
     }
-`, It = Z(
-  ({ className: e, timestamp: t, sender: r, type: o, content: s }, l) => {
+`, Tt = Z(
+  ({ className: e, timestamp: t, sender: o, type: r, content: a }, s) => {
     const u = de(
       (m) => {
         let i = "first";
-        return s.length > 1 && (i = m === 0 ? "first" : m + 1 === s.length ? "last" : "middle"), i;
+        return a.length > 1 && (i = m === 0 ? "first" : m + 1 === a.length ? "last" : "middle"), i;
       },
-      [s]
-    ), c = () => /* @__PURE__ */ n.createElement(n.Fragment, null, s.map((m) => {
-      const { key: i, body: $, title: S, form: L, actions: k } = m, f = !!$ && !S && !L && !k;
+      [a]
+    ), c = () => /* @__PURE__ */ n.createElement(n.Fragment, null, a.map((m) => {
+      const { key: i, body: $, title: S, form: L, actions: k } = m, p = !!$ && !S && !L && !k;
       return /* @__PURE__ */ n.createElement(
-        at,
+        lt,
         {
           className: e,
           key: i,
-          discrete: f,
-          ref: l,
+          discrete: p,
+          ref: s,
           timestamp: t,
           fullWidth: !!L || !!k
         },
-        f && $ ? /* @__PURE__ */ n.createElement(J, { html: $ }) : /* @__PURE__ */ n.createElement(P, { isSystem: !0, content: m })
+        p && $ ? /* @__PURE__ */ n.createElement(Q, { html: $ }) : /* @__PURE__ */ n.createElement(U, { isSystem: !0, content: m })
       );
-    })), h = () => /* @__PURE__ */ n.createElement(he, { sender: r, timestamp: t, className: e }, /* @__PURE__ */ n.createElement(_, { className: "humany-message-content-bundle" }, s.map((m, i) => /* @__PURE__ */ n.createElement(
-      V,
+    })), h = () => /* @__PURE__ */ n.createElement(he, { sender: o, timestamp: t, className: e }, /* @__PURE__ */ n.createElement(V, { className: "humany-message-content-bundle" }, a.map((m, i) => /* @__PURE__ */ n.createElement(
+      q,
       {
         className: "humany-message-container",
         left: !0,
         key: m.key,
-        ref: l
+        ref: s
       },
       /* @__PURE__ */ n.createElement(
-        P,
+        U,
         {
           content: m,
           stacked: u(i)
         }
       )
-    )))), v = () => /* @__PURE__ */ n.createElement(it, { timestamp: t, className: e }, /* @__PURE__ */ n.createElement(_, { className: "humany-message-content-bundle" }, s.map((m, i) => /* @__PURE__ */ n.createElement(
-      V,
+    )))), E = () => /* @__PURE__ */ n.createElement(ct, { timestamp: t, className: e }, /* @__PURE__ */ n.createElement(V, { className: "humany-message-content-bundle" }, a.map((m, i) => /* @__PURE__ */ n.createElement(
+      q,
       {
         className: "humany-message-container",
         right: !0,
         key: m.key,
-        ref: l
+        ref: s
       },
       /* @__PURE__ */ n.createElement(
-        P,
+        U,
         {
           isUser: !0,
           content: m,
@@ -1047,35 +1092,35 @@ const Ae = ({ className: e }) => {
         }
       )
     ))));
-    switch (o) {
-      case W.System:
+    switch (r) {
+      case P.System:
         return c();
-      case W.Agent:
+      case P.Agent:
         return h();
-      case W.User:
-        return v();
+      case P.User:
+        return E();
       default:
         return null;
     }
   }
-), P = ({ content: e, isUser: t, isSystem: r, stacked: o }) => {
-  const s = Y(), { title: l, body: u, actions: c, form: h, items: v } = e;
-  return v ? /* @__PURE__ */ n.createElement(q, { className: "humany-message-content", user: !!t, stacked: o }, /* @__PURE__ */ n.createElement(Mt, { items: v, dispatch: s })) : /* @__PURE__ */ n.createElement(
-    q,
+), U = ({ content: e, isUser: t, isSystem: o, stacked: r }) => {
+  const a = G(), { title: s, body: u, actions: c, form: h, items: E } = e;
+  return E ? /* @__PURE__ */ n.createElement(Y, { className: "humany-message-content", user: !!t, stacked: r }, /* @__PURE__ */ n.createElement(It, { items: E, dispatch: a })) : /* @__PURE__ */ n.createElement(
+    Y,
     {
       className: "humany-message-content",
-      padded: !r,
+      padded: !o,
       user: !!t,
-      stacked: o,
+      stacked: r,
       fullWidth: !!h || !!c
     },
-    l && /* @__PURE__ */ n.createElement(R, null, /* @__PURE__ */ n.createElement(Ue, { variant: "h2" }, l)),
-    u && /* @__PURE__ */ n.createElement(R, null, /* @__PURE__ */ n.createElement(Ye, { html: u })),
+    s && /* @__PURE__ */ n.createElement(R, null, /* @__PURE__ */ n.createElement(_e, { variant: "h2" }, s)),
+    u && /* @__PURE__ */ n.createElement(R, null, /* @__PURE__ */ n.createElement(Ge, { html: u })),
     h && /* @__PURE__ */ n.createElement(R, null, /* @__PURE__ */ n.createElement(
-      qe,
-      E(g({}, h), {
+      Ye,
+      x(g({}, h), {
         onChange: (i, $) => {
-          s("form", {
+          a("form", {
             data: $,
             formKey: h.schema.id,
             actionKey: i
@@ -1084,14 +1129,14 @@ const Ae = ({ className: e }) => {
       })
     )),
     c && /* @__PURE__ */ n.createElement(R, null, /* @__PURE__ */ n.createElement(
-      Ge,
+      Je,
       {
         items: Object.keys(c).map((i) => ({ label: c[i], actionKey: i })),
         renderItem: (i) => /* @__PURE__ */ n.createElement("li", { key: i.actionKey }, /* @__PURE__ */ n.createElement(
-          Je,
+          Qe,
           {
             onClick: () => {
-              s("action", i.actionKey);
+              a("action", i.actionKey);
             }
           },
           i.label
@@ -1107,24 +1152,24 @@ const Ae = ({ className: e }) => {
         behavior: "smooth"
       });
     }, 250);
-  }, []), [t, r] = se(!0), {
-    messages: o,
-    loading: s,
-    typingActors: l = []
-  } = N(), u = () => l && l.length ? l.map((c, h) => /* @__PURE__ */ n.createElement(U, { id: `typing_${c.name}`, key: `typing_${c.name}` }, /* @__PURE__ */ n.createElement(he, { timestamp: Date.now(), sender: c }, /* @__PURE__ */ n.createElement(oe, { boxed: !0, ref: e })))) : null;
-  return /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(Ht, { tabIndex: 0, scrollableCss: t, ref: r }, o && o.length ? o.map((c, h) => {
-    const { type: v, timestamp: m, sender: i, content: $ } = c;
+  }, []), [t, o] = le(!0), {
+    messages: r,
+    loading: a,
+    typingActors: s = []
+  } = N(), u = () => s && s.length ? s.map((c, h) => /* @__PURE__ */ n.createElement(_, { id: `typing_${c.name}`, key: `typing_${c.name}` }, /* @__PURE__ */ n.createElement(he, { timestamp: Date.now(), sender: c }, /* @__PURE__ */ n.createElement(oe, { boxed: !0, ref: e })))) : null;
+  return /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(At, { tabIndex: 0, scrollableCss: t, ref: o }, r && r.length ? r.map((c, h) => {
+    const { type: E, timestamp: m, sender: i, content: $ } = c;
     return /* @__PURE__ */ n.createElement(
-      U,
+      _,
       {
         className: "humany-conversation-entry",
         tabIndex: -1,
-        key: `${v}_${i == null ? void 0 : i.name}_${m}_${$[0].key}`
+        key: `${E}_${i == null ? void 0 : i.name}_${m}_${$[0].key}`
       },
-      /* @__PURE__ */ n.createElement(It, E(g({}, c), { ref: e }))
+      /* @__PURE__ */ n.createElement(Tt, x(g({}, c), { ref: e }))
     );
-  }) : null, u(), s && /* @__PURE__ */ n.createElement(U, null, /* @__PURE__ */ n.createElement(oe, { ref: e }))), /* @__PURE__ */ n.createElement(De, null));
-}, Ht = a.div`
+  }) : null, u(), a && /* @__PURE__ */ n.createElement(_, null, /* @__PURE__ */ n.createElement(oe, { ref: e }))), /* @__PURE__ */ n.createElement(Fe, null));
+}, At = l.div`
     display: flex;
     flex-direction: column;
     align-items: stretch;
@@ -1135,9 +1180,9 @@ const Ae = ({ className: e }) => {
 }};
     ${(e) => !!e.scrollableCss && e.scrollableCss};
     &:focus-visible {
-        ${(e) => p(e)};
+        ${(e) => f(e)};
     }
-`, U = a.div`
+`, _ = l.div`
     margin: 0;
     margin-bottom: ${(e) => {
   var t;
@@ -1175,8 +1220,8 @@ const Ae = ({ className: e }) => {
                 font-weight: normal;
             `
 )}
-`, Tt = ({ dispatch: e }) => {
-  const t = Ie(null);
+`, Rt = ({ dispatch: e }) => {
+  const t = He(null);
   return me(() => {
     t.current && t.current.parentNode && e("overlay-mounted", t.current);
   }, [t]), /* @__PURE__ */ n.createElement(
@@ -1187,26 +1232,26 @@ const Ae = ({ className: e }) => {
       ref: t
     }
   );
-}, At = ({
+}, Bt = ({
   dispatch: e,
   header: t,
-  buttonLabel: r
+  buttonLabel: o
 }) => /* @__PURE__ */ n.createElement(
-  Rt,
+  Kt,
   {
     portalId: "humany-conversation-portal",
     className: "humany-conversation-outlet"
   },
-  /* @__PURE__ */ n.createElement(Bt, { className: "humany-conversation-outlet-head" }, /* @__PURE__ */ n.createElement(
-    Ot,
+  /* @__PURE__ */ n.createElement(Ot, { className: "humany-conversation-outlet-head" }, /* @__PURE__ */ n.createElement(
+    Dt,
     {
       className: "humany-conversation-outlet-head-button",
-      "aria-label": r,
-      title: r,
+      "aria-label": o,
+      title: o,
       onClick: () => e("hide-overlay-conversation")
     },
     /* @__PURE__ */ n.createElement(
-      x,
+      v,
       {
         symbol: {
           type: "Svg",
@@ -1216,7 +1261,7 @@ const Ae = ({ className: e }) => {
       }
     )
   ), t && /* @__PURE__ */ n.createElement(
-    Kt,
+    jt,
     {
       className: "humany-conversation-outlet-header",
       variant: "h1"
@@ -1224,7 +1269,7 @@ const Ae = ({ className: e }) => {
     t
   )),
   /* @__PURE__ */ n.createElement(ge, null)
-), Rt = a(ce)`
+), Kt = l(ce)`
     z-index: 11;
     top: auto;
     height: 65%;
@@ -1239,7 +1284,7 @@ const Ae = ({ className: e }) => {
   var t;
   return (t = e.theme.sizes) == null ? void 0 : t.large;
 }};
-`, Bt = a.div`
+`, Ot = l.div`
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -1253,7 +1298,7 @@ const Ae = ({ className: e }) => {
   return (t = e.theme.sizes) == null ? void 0 : t.normal;
 }};
     ${(e) => e.theme.border && `border-bottom: ${e.theme.border};`}
-`, Kt = a(G)`
+`, jt = l(J)`
     font-size: ${(e) => {
   var t;
   return (t = e.theme.fonts) == null ? void 0 : t.medium;
@@ -1263,7 +1308,7 @@ const Ae = ({ className: e }) => {
   return (t = e.theme.colors) == null ? void 0 : t.text;
 }};
     margin: 0;
-`, Ot = a(z)`
+`, Dt = l(z)`
     display: flex;
     align-items: center;
     justify-content: center;
@@ -1277,7 +1322,7 @@ const Ae = ({ className: e }) => {
     ${(e) => e.theme.borderRadius && `border-radius: ${e.theme.borderRadius};`}
 
     &:focus-visible {
-        ${p};
+        ${f};
     }
 
     svg line {
@@ -1286,36 +1331,36 @@ const Ae = ({ className: e }) => {
   return (t = e.theme.colors) == null ? void 0 : t.text;
 }};
     }
-`, Qt = (r) => {
-  var o = r, { className: e } = o, t = F(o, ["className"]);
+`, Zt = (o) => {
+  var r = o, { className: e } = r, t = W(r, ["className"]);
   const {
-    overlay: s,
-    overlayConversationHeader: l,
+    overlay: a,
+    overlayConversationHeader: s,
     overlayConversationCloseLabel: u,
     conversationControllerId: c
-  } = N(), h = Y();
+  } = N(), h = G();
   return /* @__PURE__ */ n.createElement(
-    Le.Provider,
+    Me.Provider,
     {
       value: c ? { id: c } : null
     },
     /* @__PURE__ */ n.createElement(
-      jt,
-      E(g({}, t), {
+      Ft,
+      x(g({}, t), {
         className: I(e, "humany-conversation-component")
       }),
       /* @__PURE__ */ n.createElement(ge, null)
     ),
-    s && /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(Tt, { dispatch: h }), s.conversation && /* @__PURE__ */ n.createElement(
-      At,
+    a && /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(Rt, { dispatch: h }), a.conversation && /* @__PURE__ */ n.createElement(
+      Bt,
       {
         dispatch: h,
-        header: l,
+        header: s,
         buttonLabel: u
       }
     ))
   );
-}, jt = a.div`
+}, Ft = l.div`
     position: absolute;
     right: 0;
     left: 0;
@@ -1326,6 +1371,6 @@ const Ae = ({ className: e }) => {
     flex-direction: column;
 `;
 export {
-  Qt as default
+  Zt as default
 };
-//# sourceMappingURL=conversation-9e73f101.js.map
+//# sourceMappingURL=conversation-5f8374bf.js.map