@telia-ace/widget-conversation 1.0.29-next.8 → 1.0.29

package/dist/{conversation.4aefedf8.js → conversation.4bd3eedd.js}

@@ -1,15 +1,15 @@
-var Ee = Object.defineProperty, xe = Object.defineProperties;
-var we = Object.getOwnPropertyDescriptors;
+var ve = Object.defineProperty, Ee = Object.defineProperties;
+var xe = Object.getOwnPropertyDescriptors;
 var A = Object.getOwnPropertySymbols;
 var ee = Object.prototype.hasOwnProperty, te = Object.prototype.propertyIsEnumerable;
-var Z = (e, t, r) => t in e ? Ee(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, g = (e, t) => {
+var Z = (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 = {}))
     ee.call(t, r) && Z(e, r, t[r]);
   if (A)
     for (var r of A(t))
       te.call(t, r) && Z(e, r, t[r]);
   return e;
-}, x = (e, t) => xe(e, we(t));
+}, x = (e, t) => Ee(e, xe(t));
 var j = (e, t) => {
   var r = {};
   for (var o in e)
@@ -20,42 +20,42 @@ var j = (e, t) => {
   return r;
 };
 import a from "@emotion/styled";
-import { Input as oe, Button as L, borderTabStyle as b, SymbolBadge as w, useIsTabbing as ke, useDispatch as V, useProperties as M, useScroll as ae, Typography as q, invertedHoverButton as Ce, Html as Y, List as le, buttonCss as G, ItemList as J, itemList as Q, useComponent as Se, genericHtml as ze, headingElement as se, list as Le, WidgetOverlayOutlet as ie, ConversationContext as Me } from "@telia-ace/widget-ui";
+import { useIsTabbing as we, useDispatch as V, useProperties as L, useScroll as oe, SymbolBadge as w, Input as ae, Button as M, borderTabStyle as b, Typography as q, invertedHoverButton as ke, Html as Y, List as le, buttonCss as G, ItemList as J, itemList as Q, useComponent as Ce, genericHtml as Se, headingElement as se, list as ze, WidgetOverlayOutlet as ie, ConversationContext as Le } from "@telia-ace/widget-ui";
 import { appendClassNames as H } from "@telia-ace/widget-utilities";
-import n, { useState as R, useEffect as ce, forwardRef as X, Suspense as He, useMemo as Te, useCallback as me, useRef as Ie } from "react";
-import { css as f, keyframes as Ae } from "@emotion/react";
-import { FormComponent as Re } from "@telia-ace/widget-forms";
+import n, { useState as R, useEffect as ce, forwardRef as X, Suspense as Me, useMemo as He, useCallback as me, useRef as Te } from "react";
+import { css as f, keyframes as Ie } from "@emotion/react";
+import { FormComponent as Ae } from "@telia-ace/widget-forms";
 import { ConversationMessageListItemType as C, ConversationMessageType as D } from "./index.js";
 import "@telia-ace/widget-core";
 import "@telia-ace/widget-services";
 import "@telia-ace/widget-plugins";
-const Be = ({ className: e }) => {
-  const [t, r] = R(""), [o, l] = R(!1), [s, u] = R(0), [c, h] = R(0), v = ke(), m = V(), {
+const Re = ({ className: e }) => {
+  const [t, r] = R(""), [o, l] = R(!1), [s, u] = R(0), [c, h] = R(0), v = we(), m = V(), {
     inputPlaceholder: i = "Type your message",
     inputHidden: $ = !1,
     inputDisabled: k = !1,
     sendButtonLabel: S = "Send message",
     inputMultiline: E = !0,
     secondaryAction: p
-  } = M(), [pe, y] = ae(!0);
+  } = L(), [fe, y] = oe(!0);
   ce(() => {
     if (y.current) {
       const { lineHeight: d, maxHeight: I } = getComputedStyle(y.current);
       if (d && d.indexOf("px") > -1) {
-        const z = d.split("px"), $e = parseInt(z[0], 10);
-        u($e);
-        const ve = I.split("px");
-        h(parseInt(ve[0], 10));
+        const z = d.split("px"), be = parseInt(z[0], 10);
+        u(be);
+        const $e = I.split("px");
+        h(parseInt($e[0], 10));
       }
     }
   }, [y.current]);
   const N = (d) => {
     !d.shiftKey || !E ? (d.preventDefault(), t && t.length > 0 && (m("user-submit", { text: t }), r(""), O(""))) : t.length < 1 && d.preventDefault();
-  }, ye = (d) => {
+  }, pe = (d) => {
     !p || (d.preventDefault(), m("action", g({
       actionKey: p.action
     }, p)));
-  }, be = (d) => {
+  }, ye = (d) => {
     if (E && y.current) {
       const I = y.current.scrollHeight;
       if (I > s) {
@@ -65,23 +65,23 @@ const Be = ({ className: e }) => {
       }
     }
   }, O = (d) => {
-    be(d), r(d), d && d.length > 0 && m("user-typing", { textLength: d.length });
+    ye(d), r(d), d && d.length > 0 && m("user-typing", { textLength: d.length });
   };
   return $ ? null : /* @__PURE__ */ n.createElement(Oe, {
     grow: E,
     className: H("humany-conversation-input", e),
     "data-has-focus": o,
-    scrollableCss: pe,
+    scrollableCss: fe,
     isTabbing: v
   }, p && /* @__PURE__ */ n.createElement(Ne, {
     disabled: k,
-    onClick: ye,
+    onClick: pe,
     title: p.label,
     "aria-label": p.label
   }, /* @__PURE__ */ n.createElement(w, {
     size: 24,
     symbol: { type: "Svg", content: p.icon || "browse" }
-  })), E ? /* @__PURE__ */ n.createElement(de, {
+  })), E ? /* @__PURE__ */ n.createElement(Be, {
     value: t,
     onChange: O,
     onEnter: N,
@@ -100,7 +100,7 @@ const Be = ({ className: e }) => {
     "aria-label": i,
     placeholder: i,
     onFocusChange: l
-  }), /* @__PURE__ */ n.createElement(ue, {
+  }), /* @__PURE__ */ n.createElement(de, {
     disabled: k,
     onClick: N,
     title: S,
@@ -110,7 +110,7 @@ const Be = ({ className: e }) => {
     symbol: { type: "Svg", content: "send" },
     hasContent: !!t && !!t.length
   })));
-}, de = a(oe)`
+}, Be = a(ae)`
     resize: none;
     flex: 1;
     flex-shrink: 1;
@@ -130,7 +130,7 @@ const Be = ({ className: e }) => {
     border: none;
     transition: height 200ms linear;
     outline: none;
-`, Ke = a(oe)`
+`, Ke = a(ae)`
     flex: 1;
     border: none;
     background-color: transparent;
@@ -156,7 +156,7 @@ const Be = ({ className: e }) => {
 }};
         font-style: italic;
     }
-`, ue = a(L)`
+`, de = a(M)`
     flex: 0 0 50px;
     align-self: stretch;
     background-color: transparent;
@@ -168,7 +168,7 @@ const Be = ({ className: e }) => {
     &:focus-visible {
         ${b};
     }
-`, Ne = a(ue)`
+`, Ne = a(de)`
     border-right: ${(e) => e.theme.border};
     margin: ${(e) => {
   var t;
@@ -190,7 +190,7 @@ const Be = ({ className: e }) => {
 }};
     border-top: ${(e) => e.theme.inputBorder};
     ${(e) => e["data-has-focus"] && e.isTabbing && b}
-    ${de} {
+    textarea {
         ${(e) => !!e.scrollableCss && e.scrollableCss}
     }
 `, je = a(
@@ -214,7 +214,7 @@ const Be = ({ className: e }) => {
   return e.hasContent ? (t = e.theme.colors) == null ? void 0 : t.primary : "#a6a6a6";
 }};
     }
-`, De = a.div`
+`, De = Re, Fe = a.div`
     width: ${(e) => e.avatarSize || "32px"};
     height: ${(e) => e.avatarSize || "32px"};
     border-radius: 50%;
@@ -261,7 +261,7 @@ const Be = ({ className: e }) => {
 }};
         }
     }
-`, Fe = Ae`
+`, We = Ie`
   0% {
     opacity: 0;
   }
@@ -271,7 +271,7 @@ const Be = ({ className: e }) => {
   100% {
     opacity: 0;
   }
-`, We = a.div`
+`, Pe = a.div`
     display: flex;
     justify-content: center;
     > div {
@@ -283,7 +283,7 @@ const Be = ({ className: e }) => {
   var t;
   return (t = e.theme.colors) == null ? void 0 : t.text;
 }};
-        animation: ${Fe} 1s infinite;
+        animation: ${We} 1s infinite;
     }
     > div:nth-child(2) {
         animation-delay: 100ms;
@@ -295,7 +295,7 @@ const Be = ({ className: e }) => {
     grid-area: content;
     max-width: 100%;
     overflow: hidden;
-`, Pe = a(q)`
+`, Ue = a(q)`
     font-size: ${(e) => {
   var t;
   return (t = e.theme.fonts) == null ? void 0 : t.normal;
@@ -312,8 +312,8 @@ const Be = ({ className: e }) => {
   var t;
   return e.padded && `padding: ${(t = e.theme.sizes) == null ? void 0 : t.medium};`;
 }}
-    ${(e) => !e.user && e.stacked && Ue(e.stacked, e.theme)}
-    ${(e) => e.user && e.stacked && _e(e.stacked, e.theme)}
+    ${(e) => !e.user && e.stacked && _e(e.stacked, e.theme)}
+    ${(e) => e.user && e.stacked && Ve(e.stacked, e.theme)}
 
     display: inline-block;
     margin-top: ${(e) => {
@@ -329,7 +329,7 @@ const Be = ({ className: e }) => {
     }
     max-width: 100%;
     ${(e) => e.fullWidth && "width: 100%;"}
-`, Ue = (e, t) => {
+`, _e = (e, t) => {
   var o, l;
   const r = f`
         background-color: ${(o = t.colors) == null ? void 0 : o.accent};
@@ -350,7 +350,7 @@ const Be = ({ className: e }) => {
             border-bottom-left-radius: ${t.borderRadius};
         `}
     ` : r;
-}, _e = (e, t) => {
+}, Ve = (e, t) => {
   var o, l;
   const r = f`
         background-color: ${(o = t.colors) == null ? void 0 : o.primary};
@@ -384,11 +384,11 @@ const Be = ({ className: e }) => {
     margin: ${(t = e.theme.sizes) == null ? void 0 : t.medium} 0;
     padding: 0 ${(r = e.theme.sizes) == null ? void 0 : r.medium};
 `;
-}, Ve = a(Re)`
+}, qe = a(Ae)`
     & button.humany-form-component-button {
         ${(e) => {
   var t, r, o, l;
-  return ((t = e.theme.colors) == null ? void 0 : t.primary) && ((r = e.theme.colors) == null ? void 0 : r.accent) && Ce({
+  return ((t = e.theme.colors) == null ? void 0 : t.primary) && ((r = e.theme.colors) == null ? void 0 : r.accent) && ke({
     active: !1,
     primaryColor: (o = e.theme.colors) == null ? void 0 : o.primary,
     secondaryColor: (l = e.theme.colors) == null ? void 0 : l.accent,
@@ -412,7 +412,7 @@ const Be = ({ className: e }) => {
 }};
         }
     }
-`, qe = a(Y)`
+`, Ye = a(Y)`
     white-space: pre-wrap;
     a {
         color: ${(e) => e.theme.colors.link};
@@ -423,7 +423,7 @@ const Be = ({ className: e }) => {
 }};
         }
     }
-`, Ye = a(le)`
+`, Ge = a(le)`
     padding: 0;
     list-style: none;
     margin: 0 -${(e) => {
@@ -436,7 +436,7 @@ const Be = ({ className: e }) => {
   return (t = e.theme.sizes) == null ? void 0 : t.normal;
 }};
     }
-`, Ge = a.button`
+`, Je = a.button`
     ${(e) => G(e)};
     display: block;
     background-color: ${(e) => {
@@ -449,7 +449,7 @@ const Be = ({ className: e }) => {
         ${b}
         background-color: transparent;
     }
-`, ne = X(
+`, Qe = X(
   ({ boxed: e, className: t, agentData: r }, o) => /* @__PURE__ */ n.createElement(P, {
     ref: o
   }, /* @__PURE__ */ n.createElement(U, {
@@ -458,8 +458,8 @@ const Be = ({ className: e }) => {
   }, /* @__PURE__ */ n.createElement(_, {
     padded: !!e,
     stacked: e ? "first" : void 0
-  }, /* @__PURE__ */ n.createElement(We, null, /* @__PURE__ */ n.createElement("div", null), /* @__PURE__ */ n.createElement("div", null), /* @__PURE__ */ n.createElement("div", null)))))
-), Je = a.p`
+  }, /* @__PURE__ */ n.createElement(Pe, null, /* @__PURE__ */ n.createElement("div", null), /* @__PURE__ */ n.createElement("div", null), /* @__PURE__ */ n.createElement("div", null)))))
+), ne = Qe, Xe = a.p`
     && {
         font-size: ${(e) => {
   var t;
@@ -474,17 +474,17 @@ const Be = ({ className: e }) => {
   var t;
   return (t = e.theme.colors) == null ? void 0 : t.text;
 }};
-`, re = (e) => new Date(e).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }), K = ({ className: e, name: t, timestamp: r }) => {
+`, re = (e) => new Date(e).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }), Ze = ({ className: e, name: t, timestamp: r }) => {
   if (!t && !r)
     return null;
   let o = "";
-  return t ? r ? o = `${t}: ${re(r)}` : o = t : r && (o = re(r)), /* @__PURE__ */ n.createElement(Je, null, o);
-}, he = ({ className: e, children: t, sender: r, timestamp: o }) => {
-  const { avatar: l, name: s } = r, { avatarSize: u } = M();
-  return /* @__PURE__ */ n.createElement(Qe, {
+  return t ? r ? o = `${t}: ${re(r)}` : o = t : r && (o = re(r)), /* @__PURE__ */ n.createElement(Xe, null, o);
+}, K = Ze, et = ({ className: e, children: t, sender: r, timestamp: o }) => {
+  const { avatar: l, name: s } = r, { avatarSize: u } = L();
+  return /* @__PURE__ */ n.createElement(tt, {
     hasAvatar: !!l,
     className: H(e, "humany-conversation-agent-message")
-  }, l && /* @__PURE__ */ n.createElement(De, {
+  }, l && /* @__PURE__ */ n.createElement(Fe, {
     avatarSize: u
   }, typeof l == "string" ? /* @__PURE__ */ n.createElement("img", {
     src: l
@@ -494,7 +494,7 @@ const Be = ({ className: e }) => {
     name: s,
     timestamp: o
   }));
-}, Qe = a.div`
+}, tt = a.div`
     display: grid;
     margin-right: 10%;
     width: 90%;
@@ -511,26 +511,26 @@ const Be = ({ className: e }) => {
                       'content'
                       'info';
               `};
-`, Xe = X(
-  ({ className: e, children: t, timestamp: r, discrete: o, fullWidth: l }, s) => /* @__PURE__ */ n.createElement(Ze, {
+`, ue = et, nt = X(
+  ({ className: e, children: t, timestamp: r, discrete: o, fullWidth: l }, s) => /* @__PURE__ */ n.createElement(rt, {
     ref: s,
     className: H(e, "humany-conversation-system-message"),
     fullWidth: l
-  }, o ? /* @__PURE__ */ n.createElement(et, {
+  }, o ? /* @__PURE__ */ n.createElement(ot, {
     className: "humany-conversation-discrete-message"
   }, t, /* @__PURE__ */ n.createElement(K, {
     timestamp: r
   })) : /* @__PURE__ */ n.createElement(n.Fragment, null, t, /* @__PURE__ */ n.createElement(K, {
     timestamp: r
   })))
-), Ze = a.div`
+), rt = a.div`
     ${(e) => e.fullWidth && "width: 100%"};
     padding: 0 ${(e) => {
   var t;
   return (t = e.theme.sizes) == null ? void 0 : t.large;
 }};
     overflow: auto;
-`, et = a.div`
+`, ot = a.div`
     text-align: center;
     word-wrap: break-word;
     font-size: ${(e) => {
@@ -544,29 +544,29 @@ const Be = ({ className: e }) => {
     > p {
         margin: 0;
     }
-`, tt = ({ className: e, children: t, timestamp: r }) => {
-  const { userLabel: o = "" } = M();
-  return /* @__PURE__ */ n.createElement(nt, {
+`, at = nt, lt = ({ className: e, children: t, timestamp: r }) => {
+  const { userLabel: o = "" } = L();
+  return /* @__PURE__ */ n.createElement(st, {
     className: H(e, "humany-conversation-user-message")
   }, t, /* @__PURE__ */ n.createElement(K, {
     name: o,
     timestamp: r
   }));
-}, nt = a.div`
+}, st = a.div`
     margin-left: 10%;
     width: 90%;
     display: flex;
     flex-direction: column;
     align-items: flex-end;
-`, ge = (e) => Array.isArray(e) ? e : Object.keys(e).map((t) => ({
+`, it = lt, he = (e) => Array.isArray(e) ? e : Object.keys(e).map((t) => ({
   label: e[t],
   actionKey: t
-})), rt = ({ header: e, actions: t, dispatch: r }) => /* @__PURE__ */ n.createElement(ot, {
+})), ct = ({ header: e, actions: t, dispatch: r }) => /* @__PURE__ */ n.createElement(mt, {
   header: e,
-  items: ge(t),
+  items: he(t),
   renderItem: (o) => /* @__PURE__ */ n.createElement("li", {
     key: o.actionKey
-  }, /* @__PURE__ */ n.createElement(at, {
+  }, /* @__PURE__ */ n.createElement(dt, {
     onClick: () => {
       r("action", o);
     },
@@ -575,7 +575,7 @@ const Be = ({ className: e }) => {
   }, /* @__PURE__ */ n.createElement(w, {
     symbol: o.symbol
   }), o.label))
-}), ot = a(J)`
+}), mt = a(J)`
     ${Q}
     > ul {
         display: flex;
@@ -589,7 +589,7 @@ const Be = ({ className: e }) => {
         }
     }
     ${T}
-`, at = a(L)`
+`, dt = a(M)`
     ${G};
 
     display: block;
@@ -617,15 +617,15 @@ const Be = ({ className: e }) => {
   return (t = e.theme.sizes) == null ? void 0 : t.small;
 }};
     }
-`, lt = ({ type: e, content: t = {} }) => {
-  const r = Se(e);
-  return !r || !e ? null : /* @__PURE__ */ n.createElement(He, {
+`, 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)));
-}, st = ({ body: e }) => /* @__PURE__ */ n.createElement(it, {
+}, ht = ({ body: e }) => /* @__PURE__ */ n.createElement(gt, {
   html: e
-}), it = a(Y)`
-    ${ze}
+}), gt = a(Y)`
+    ${Se}
     color: inherit;
     white-space: pre-wrap;
     ${T}
@@ -635,12 +635,12 @@ const Be = ({ className: e }) => {
             ${b};
         }
     }
-`, ct = ({ header: e, actions: t, dispatch: r }) => /* @__PURE__ */ n.createElement(mt, {
+`, ft = ({ header: e, actions: t, dispatch: r }) => /* @__PURE__ */ n.createElement(pt, {
   header: e,
-  items: ge(t),
+  items: he(t),
   renderItem: (o) => /* @__PURE__ */ n.createElement("li", {
     key: o.actionKey
-  }, /* @__PURE__ */ n.createElement(dt, {
+  }, /* @__PURE__ */ n.createElement(yt, {
     help: o.actionKey === "help",
     onClick: () => {
       r("action", o);
@@ -654,7 +654,7 @@ const Be = ({ className: e }) => {
       content: "caret-down"
     }
   })))
-}), mt = a(J)`
+}), pt = a(J)`
     ${Q}
     ${T}
 
@@ -676,7 +676,7 @@ const Be = ({ className: e }) => {
             margin: 0;
         }
     }
-`, dt = a(L)`
+`, yt = a(M)`
     display: block;
     text-align: left;
     font-weight: 300;
@@ -711,20 +711,20 @@ const Be = ({ className: e }) => {
             text-decoration: underline;
         }
     }
-`, ut = () => /* @__PURE__ */ n.createElement(ht, null), ht = a.div`
+`, bt = () => /* @__PURE__ */ n.createElement($t, null), $t = a.div`
     ${(e) => e.theme.border && `border-bottom: ${e.theme.border};`}
     width: 100%;
-`, gt = ({ text: e }) => /* @__PURE__ */ n.createElement(ft, {
+`, vt = ({ text: e }) => /* @__PURE__ */ n.createElement(Et, {
   variant: "span"
-}, e), ft = a(q)`
+}, e), Et = a(q)`
     ${T}
-`, pt = ({
+`, xt = ({
   header: e = "Video call",
   acceptLabel: t = "Accept",
   declineLabel: r = "Decline",
   dispatch: o
 }) => {
-  const l = Te(() => [
+  const l = He(() => [
     {
       label: t,
       actionKey: "accept-video-call",
@@ -742,14 +742,14 @@ const Be = ({ className: e }) => {
       }
     }
   ], [t, r]);
-  return /* @__PURE__ */ n.createElement(yt, {
+  return /* @__PURE__ */ n.createElement(wt, {
     header: e,
     items: l,
     renderItem: (s) => {
       const u = s.actionKey === "accept-video-call" ? "#70c48e" : "#da5c85";
       return /* @__PURE__ */ n.createElement("li", {
         key: s.actionKey
-      }, /* @__PURE__ */ n.createElement(bt, {
+      }, /* @__PURE__ */ n.createElement(kt, {
         onClick: () => {
           o("action", s);
         },
@@ -762,7 +762,7 @@ const Be = ({ className: e }) => {
       })));
     }
   });
-}, yt = a(J)`
+}, wt = a(J)`
     ${(e) => Q(e)}
     > ul {
         display: flex;
@@ -776,7 +776,7 @@ const Be = ({ className: e }) => {
         }
     }
     ${(e) => T(e)}
-`, bt = a(L)`
+`, kt = a(M)`
     ${G};
 
     background-color: ${(e) => e.bgColor};
@@ -816,45 +816,45 @@ const Be = ({ className: e }) => {
             stroke: #fff;
         }
     }
-`, $t = ([e, t]) => ({ type: e, content: t }), vt = ({ items: e, dispatch: t }) => /* @__PURE__ */ n.createElement(Et, {
-  items: e.map($t),
+`, Ct = ([e, t]) => ({ type: e, content: t }), St = ({ items: e, dispatch: t }) => /* @__PURE__ */ n.createElement(zt, {
+  items: e.map(Ct),
   renderLi: !0,
   renderItem: (r) => {
     switch (r.type) {
       case C.Text:
-        return /* @__PURE__ */ n.createElement(gt, {
+        return /* @__PURE__ */ n.createElement(vt, {
           text: r.content
         });
       case C.HTML:
-        return /* @__PURE__ */ n.createElement(st, g({}, r.content));
+        return /* @__PURE__ */ n.createElement(ht, g({}, r.content));
       case C.Separator:
-        return /* @__PURE__ */ n.createElement(ut, g({}, r.content));
+        return /* @__PURE__ */ n.createElement(bt, g({}, r.content));
       case C.LinkList:
-        return /* @__PURE__ */ n.createElement(ct, x(g({}, r.content), {
+        return /* @__PURE__ */ n.createElement(ft, x(g({}, r.content), {
           dispatch: t
         }));
       case C.ButtonList:
-        return /* @__PURE__ */ n.createElement(rt, x(g({}, r.content), {
+        return /* @__PURE__ */ n.createElement(ct, x(g({}, r.content), {
           dispatch: t
         }));
       case C.VideoRequest:
-        return /* @__PURE__ */ n.createElement(pt, x(g({}, r.content), {
+        return /* @__PURE__ */ n.createElement(xt, x(g({}, r.content), {
           dispatch: t
         }));
       default:
-        return /* @__PURE__ */ n.createElement(lt, {
+        return /* @__PURE__ */ n.createElement(ut, {
           type: r.type,
           content: r.content
         });
     }
   }
-}), Et = a(le)`
-    ${Le}
+}), zt = a(le)`
+    ${ze}
 
     > li {
         margin: 0;
     }
-`, xt = X(
+`, Lt = X(
   ({ className: e, timestamp: t, sender: r, type: o, content: l }, s) => {
     const u = me(
       (m) => {
@@ -864,7 +864,7 @@ const Be = ({ className: e }) => {
       [l]
     ), c = () => /* @__PURE__ */ n.createElement(n.Fragment, null, l.map((m) => {
       const { key: i, body: $, title: k, form: S, actions: E } = m, p = !!$ && !k && !S && !E;
-      return /* @__PURE__ */ n.createElement(Xe, {
+      return /* @__PURE__ */ n.createElement(at, {
         className: e,
         key: i,
         discrete: p,
@@ -877,7 +877,7 @@ const Be = ({ className: e }) => {
         isSystem: !0,
         content: m
       }));
-    })), h = () => /* @__PURE__ */ n.createElement(he, {
+    })), h = () => /* @__PURE__ */ n.createElement(ue, {
       sender: r,
       timestamp: t,
       className: e
@@ -888,7 +888,7 @@ const Be = ({ className: e }) => {
     }, /* @__PURE__ */ n.createElement(F, {
       content: m,
       stacked: u(i)
-    }))))), v = () => /* @__PURE__ */ n.createElement(tt, {
+    }))))), v = () => /* @__PURE__ */ n.createElement(it, {
       timestamp: t,
       className: e
     }, /* @__PURE__ */ n.createElement(P, null, l.map((m, i) => /* @__PURE__ */ n.createElement(U, {
@@ -916,7 +916,7 @@ const Be = ({ className: e }) => {
   return v ? /* @__PURE__ */ n.createElement(_, {
     user: !!t,
     stacked: o
-  }, /* @__PURE__ */ n.createElement(vt, {
+  }, /* @__PURE__ */ n.createElement(St, {
     items: v,
     dispatch: l
   })) : /* @__PURE__ */ n.createElement(_, {
@@ -924,11 +924,11 @@ const Be = ({ className: e }) => {
     user: !!t,
     stacked: o,
     fullWidth: !!h || !!c
-  }, s && /* @__PURE__ */ n.createElement(B, null, /* @__PURE__ */ n.createElement(Pe, {
+  }, s && /* @__PURE__ */ n.createElement(B, null, /* @__PURE__ */ n.createElement(Ue, {
     variant: "h2"
-  }, s)), u && /* @__PURE__ */ n.createElement(B, null, /* @__PURE__ */ n.createElement(qe, {
+  }, s)), u && /* @__PURE__ */ n.createElement(B, null, /* @__PURE__ */ n.createElement(Ye, {
     html: u
-  })), h && /* @__PURE__ */ n.createElement(B, null, /* @__PURE__ */ n.createElement(Ve, x(g({}, h), {
+  })), h && /* @__PURE__ */ n.createElement(B, null, /* @__PURE__ */ n.createElement(qe, x(g({}, h), {
     onChange: (i, $) => {
       l("form", {
         data: $,
@@ -936,17 +936,17 @@ const Be = ({ className: e }) => {
         actionKey: i
       });
     }
-  }))), c && /* @__PURE__ */ n.createElement(B, null, /* @__PURE__ */ n.createElement(Ye, {
+  }))), c && /* @__PURE__ */ n.createElement(B, null, /* @__PURE__ */ n.createElement(Ge, {
     items: Object.keys(c).map((i) => ({ label: c[i], actionKey: i })),
     renderItem: (i) => /* @__PURE__ */ n.createElement("li", {
       key: i.actionKey
-    }, /* @__PURE__ */ n.createElement(Ge, {
+    }, /* @__PURE__ */ n.createElement(Je, {
       onClick: () => {
         l("action", i.actionKey);
       }
     }, i.label))
   })));
-}, fe = () => {
+}, ge = () => {
   const e = me((c) => {
     c && setTimeout(() => {
       c.scrollIntoView({
@@ -954,21 +954,21 @@ const Be = ({ className: e }) => {
         behavior: "smooth"
       });
     }, 250);
-  }, []), [t, r] = ae(!0), {
+  }, []), [t, r] = oe(!0), {
     messages: o,
     loading: l,
     typingActors: s = []
-  } = M(), u = () => s && s.length ? s.map((c, h) => /* @__PURE__ */ n.createElement(W, {
+  } = L(), u = () => s && s.length ? s.map((c, h) => /* @__PURE__ */ n.createElement(W, {
     id: `typing_${c.name}`,
     key: `typing_${c.name}`
-  }, /* @__PURE__ */ n.createElement(he, {
+  }, /* @__PURE__ */ n.createElement(ue, {
     timestamp: Date.now(),
     sender: c
   }, /* @__PURE__ */ n.createElement(ne, {
     boxed: !0,
     ref: e
   })))) : null;
-  return /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(wt, {
+  return /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(Mt, {
     tabIndex: 0,
     scrollableCss: t,
     ref: r
@@ -978,13 +978,13 @@ const Be = ({ className: e }) => {
       className: "humany-conversation-entry",
       tabIndex: -1,
       key: `${v}_${i == null ? void 0 : i.name}_${m}_${$[0].key}`
-    }, /* @__PURE__ */ n.createElement(xt, x(g({}, c), {
+    }, /* @__PURE__ */ n.createElement(Lt, x(g({}, c), {
       ref: e
     })));
   }) : null, u(), l && /* @__PURE__ */ n.createElement(W, null, /* @__PURE__ */ n.createElement(ne, {
     ref: e
-  }))), /* @__PURE__ */ n.createElement(Be, null));
-}, wt = a.div`
+  }))), /* @__PURE__ */ n.createElement(De, null));
+}, Mt = a.div`
     display: flex;
     flex-direction: column;
     align-items: stretch;
@@ -1035,8 +1035,8 @@ const Be = ({ className: e }) => {
                 font-weight: normal;
             `
 )}
-`, kt = ({ dispatch: e }) => {
-  const t = Ie(null);
+`, Ht = ({ dispatch: e }) => {
+  const t = Te(null);
   return ce(() => {
     t.current && t.current.parentNode && e("overlay-mounted", t.current);
   }, [t]), /* @__PURE__ */ n.createElement(ie, {
@@ -1044,16 +1044,16 @@ const Be = ({ className: e }) => {
     className: "humany-conversation-overlay-outlet",
     ref: t
   });
-}, Ct = ({
+}, Tt = ({
   dispatch: e,
   header: t,
   buttonLabel: r
-}) => /* @__PURE__ */ n.createElement(St, {
+}) => /* @__PURE__ */ n.createElement(It, {
   portalId: "humany-conversation-portal",
   className: "humany-conversation-outlet"
-}, /* @__PURE__ */ n.createElement(zt, {
+}, /* @__PURE__ */ n.createElement(At, {
   className: "humany-conversation-outlet-head"
-}, /* @__PURE__ */ n.createElement(Mt, {
+}, /* @__PURE__ */ n.createElement(Bt, {
   className: "humany-conversation-outlet-head-button",
   "aria-label": r,
   title: r,
@@ -1064,10 +1064,10 @@ const Be = ({ className: e }) => {
     content: "caret-down"
   },
   size: 20
-})), t && /* @__PURE__ */ n.createElement(Lt, {
+})), t && /* @__PURE__ */ n.createElement(Rt, {
   className: "humany-conversation-outlet-header",
   variant: "h1"
-}, t)), /* @__PURE__ */ n.createElement(fe, null)), St = a(ie)`
+}, t)), /* @__PURE__ */ n.createElement(ge, null)), It = a(ie)`
     z-index: 11;
     top: auto;
     height: 65%;
@@ -1082,7 +1082,7 @@ const Be = ({ className: e }) => {
   var t;
   return (t = e.theme.sizes) == null ? void 0 : t.large;
 }};
-`, zt = a.div`
+`, At = a.div`
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -1096,7 +1096,7 @@ const Be = ({ className: e }) => {
   return (t = e.theme.sizes) == null ? void 0 : t.normal;
 }};
     ${(e) => e.theme.border && `border-bottom: ${e.theme.border};`}
-`, Lt = a(q)`
+`, Rt = a(q)`
     font-size: ${(e) => {
   var t;
   return (t = e.theme.fonts) == null ? void 0 : t.medium;
@@ -1106,7 +1106,7 @@ const Be = ({ className: e }) => {
   return (t = e.theme.colors) == null ? void 0 : t.text;
 }};
     margin: 0;
-`, Mt = a(L)`
+`, Bt = a(M)`
     display: flex;
     align-items: center;
     justify-content: center;
@@ -1129,26 +1129,26 @@ const Be = ({ className: e }) => {
   return (t = e.theme.colors) == null ? void 0 : t.text;
 }};
     }
-`, Wt = (r) => {
+`, Yt = (r) => {
   var o = r, { className: e } = o, t = j(o, ["className"]);
   const {
     overlay: l,
     overlayConversationHeader: s,
     overlayConversationCloseLabel: u,
     conversationControllerId: c
-  } = M(), h = V();
-  return /* @__PURE__ */ n.createElement(Me.Provider, {
+  } = L(), h = V();
+  return /* @__PURE__ */ n.createElement(Le.Provider, {
     value: c ? { id: c } : null
-  }, /* @__PURE__ */ n.createElement(Ht, x(g({}, t), {
+  }, /* @__PURE__ */ n.createElement(Kt, x(g({}, t), {
     className: H(e, "humany-conversation-component")
-  }), /* @__PURE__ */ n.createElement(fe, null)), l && /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(kt, {
+  }), /* @__PURE__ */ n.createElement(ge, null)), l && /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(Ht, {
     dispatch: h
-  }), l.conversation && /* @__PURE__ */ n.createElement(Ct, {
+  }), l.conversation && /* @__PURE__ */ n.createElement(Tt, {
     dispatch: h,
     header: s,
     buttonLabel: u
   })));
-}, Ht = a.div`
+}, Kt = a.div`
     position: absolute;
     right: 0;
     left: 0;
@@ -1159,6 +1159,6 @@ const Be = ({ className: e }) => {
     flex-direction: column;
 `;
 export {
-  Wt as default
+  Yt as default
 };
-//# sourceMappingURL=conversation.4aefedf8.js.map
+//# sourceMappingURL=conversation.4bd3eedd.js.map