@telia-ace/widget-conversation 1.0.29-next.7 → 1.0.29-next.9

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

@@ -2,34 +2,35 @@ var Ee = Object.defineProperty, xe = Object.defineProperties;
 var we = Object.getOwnPropertyDescriptors;
 var A = Object.getOwnPropertySymbols;
 var ee = Object.prototype.hasOwnProperty, te = Object.prototype.propertyIsEnumerable;
-var Z = (t, e, r) => e in t ? Ee(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r, g = (t, e) => {
-  for (var r in e || (e = {}))
-    ee.call(e, r) && Z(t, r, e[r]);
+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) => {
+  for (var r in t || (t = {}))
+    ee.call(t, r) && Z(e, r, t[r]);
   if (A)
-    for (var r of A(e))
-      te.call(e, r) && Z(t, r, e[r]);
-  return t;
-}, x = (t, e) => xe(t, we(e));
-var j = (t, e) => {
+    for (var r of A(t))
+      te.call(t, r) && Z(e, r, t[r]);
+  return e;
+}, x = (e, t) => xe(e, we(t));
+var j = (e, t) => {
   var r = {};
-  for (var o in t)
-    ee.call(t, o) && e.indexOf(o) < 0 && (r[o] = t[o]);
-  if (t != null && A)
-    for (var o of A(t))
-      e.indexOf(o) < 0 && te.call(t, o) && (r[o] = t[o]);
+  for (var o in e)
+    ee.call(e, o) && t.indexOf(o) < 0 && (r[o] = e[o]);
+  if (e != null && A)
+    for (var o of A(e))
+      t.indexOf(o) < 0 && te.call(e, o) && (r[o] = e[o]);
   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 { 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 a, { css as f, keyframes as Ae } from "styled-components";
+import { css as f, keyframes as Ae } from "@emotion/react";
 import { FormComponent as Re } 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: t }) => {
-  const [e, r] = R(""), [o, l] = R(!1), [s, u] = R(0), [c, h] = R(0), v = ke(), m = V(), {
+const Be = ({ className: e }) => {
+  const [t, r] = R(""), [o, l] = R(!1), [s, u] = R(0), [c, h] = R(0), v = ke(), m = V(), {
     inputPlaceholder: i = "Type your message",
     inputHidden: $ = !1,
     inputDisabled: k = !1,
@@ -49,7 +50,7 @@ const Be = ({ className: t }) => {
     }
   }, [y.current]);
   const N = (d) => {
-    !d.shiftKey || !E ? (d.preventDefault(), e && e.length > 0 && (m("user-submit", { text: e }), r(""), O(""))) : e.length < 1 && d.preventDefault();
+    !d.shiftKey || !E ? (d.preventDefault(), t && t.length > 0 && (m("user-submit", { text: t }), r(""), O(""))) : t.length < 1 && d.preventDefault();
   }, ye = (d) => {
     !p || (d.preventDefault(), m("action", g({
       actionKey: p.action
@@ -68,7 +69,7 @@ const Be = ({ className: t }) => {
   };
   return $ ? null : /* @__PURE__ */ n.createElement(Oe, {
     grow: E,
-    className: H("humany-conversation-input", t),
+    className: H("humany-conversation-input", e),
     "data-has-focus": o,
     scrollableCss: pe,
     isTabbing: v
@@ -81,7 +82,7 @@ const Be = ({ className: t }) => {
     size: 24,
     symbol: { type: "Svg", content: p.icon || "browse" }
   })), E ? /* @__PURE__ */ n.createElement(de, {
-    value: e,
+    value: t,
     onChange: O,
     onEnter: N,
     disabled: k,
@@ -92,7 +93,7 @@ const Be = ({ className: t }) => {
     rows: 1,
     ref: y
   }) : /* @__PURE__ */ n.createElement(Ke, {
-    value: e,
+    value: t,
     onChange: O,
     onEnter: N,
     disabled: k,
@@ -107,7 +108,7 @@ const Be = ({ className: t }) => {
   }, /* @__PURE__ */ n.createElement(je, {
     size: 22,
     symbol: { type: "Svg", content: "send" },
-    hasContent: e && e.length
+    hasContent: !!t && !!t.length
   })));
 }, de = a(oe)`
     resize: none;
@@ -118,13 +119,13 @@ const Be = ({ className: t }) => {
     line-height: 1.2em;
     height: 1.2em;
     padding: 0;
-    margin: ${(t) => {
-  var e;
-  return (e = t.theme.sizes) == null ? void 0 : e.medium;
+    margin: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.medium;
 }};
-    font-size: ${(t) => {
-  var e;
-  return (e = t.theme.fonts) == null ? void 0 : e.normal;
+    font-size: ${(e) => {
+  var t;
+  return (t = e.theme.fonts) == null ? void 0 : t.normal;
 }};
     border: none;
     transition: height 200ms linear;
@@ -134,24 +135,24 @@ const Be = ({ className: t }) => {
     border: none;
     background-color: transparent;
     font-weight: 300;
-    font-size: ${(t) => {
-  var e;
-  return (e = t.theme.fonts) == null ? void 0 : e.normal;
+    font-size: ${(e) => {
+  var t;
+  return (t = e.theme.fonts) == null ? void 0 : t.normal;
 }};
     line-height: 1.2em;
     outline: none;
-    padding: ${(t) => {
-  var e;
-  return (e = t.theme.sizes) == null ? void 0 : e.medium;
+    padding: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.medium;
 }};
-    color: ${(t) => {
-  var e;
-  return (e = t.theme.colors) == null ? void 0 : e.text;
+    color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.text;
 }};
     &::placeholder {
-        color: ${(t) => {
-  var e;
-  return (e = t.theme.colors) == null ? void 0 : e.textLight;
+        color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.textLight;
 }};
         font-style: italic;
     }
@@ -168,13 +169,13 @@ const Be = ({ className: t }) => {
         ${b};
     }
 `, Ne = a(ue)`
-    border-right: ${(t) => t.theme.border};
-    margin: ${(t) => {
-  var e;
-  return (e = t.theme.sizes) == null ? void 0 : e.normal;
+    border-right: ${(e) => e.theme.border};
+    margin: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.normal;
 }} 0;
 `, Oe = a.div`
-    ${(t) => t.grow ? f`
+    ${(e) => e.grow ? f`
                   min-height: 50px;
                   max-height: 150px;
               ` : f`
@@ -183,39 +184,45 @@ const Be = ({ className: t }) => {
     flex: 0 0 auto;
     display: flex;
     align-items: center;
-    background-color: ${(t) => {
-  var e;
-  return (e = t.theme.colors) == null ? void 0 : e.accent;
+    background-color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.accent;
 }};
-    border-top: ${(t) => t.theme.inputBorder};
-    ${(t) => t["data-has-focus"] && t.isTabbing && b}
+    border-top: ${(e) => e.theme.inputBorder};
+    ${(e) => e["data-has-focus"] && e.isTabbing && b}
     ${de} {
-        ${(t) => !!t.scrollableCss && t.scrollableCss}
+        ${(e) => !!e.scrollableCss && e.scrollableCss}
     }
-`, je = a((r) => {
-  var o = r, { hasContent: t } = o, e = j(o, ["hasContent"]);
-  return /* @__PURE__ */ n.createElement(w, g({}, e));
-})`
+`, je = a(
+  (r) => {
+    var o = r, {
+      hasContent: e
+    } = o, t = j(o, [
+      "hasContent"
+    ]);
+    return /* @__PURE__ */ n.createElement(w, g({}, t));
+  }
+)`
     line,
     path {
-        stroke: ${(t) => {
-  var e;
-  return t.hasContent ? (e = t.theme.colors) == null ? void 0 : e.primary : "#a6a6a6";
+        stroke: ${(e) => {
+  var t;
+  return e.hasContent ? (t = e.theme.colors) == null ? void 0 : t.primary : "#a6a6a6";
 }};
-        fill: ${(t) => {
-  var e;
-  return t.hasContent ? (e = t.theme.colors) == null ? void 0 : e.primary : "#a6a6a6";
+        fill: ${(e) => {
+  var t;
+  return e.hasContent ? (t = e.theme.colors) == null ? void 0 : t.primary : "#a6a6a6";
 }};
     }
 `, De = a.div`
-    width: ${(t) => t.avatarSize || "32px"};
-    height: ${(t) => t.avatarSize || "32px"};
+    width: ${(e) => e.avatarSize || "32px"};
+    height: ${(e) => e.avatarSize || "32px"};
     border-radius: 50%;
-    background-color: ${(t) => {
-  var e;
-  return (e = t.theme.colors) == null ? void 0 : e.accent;
+    background-color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.accent;
 }};
-    border: ${(t) => t.theme.border};
+    border: ${(e) => e.theme.border};
     grid-area: avatar;
     align-self: flex-end;
     justify-self: center;
@@ -224,9 +231,9 @@ const Be = ({ className: t }) => {
     display: flex;
     justify-content: center;
     align-items: center;
-    color: ${(t) => {
-  var e;
-  return (e = t.theme.colors) == null ? void 0 : e.text;
+    color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.text;
 }};
 
     > img {
@@ -239,18 +246,18 @@ const Be = ({ className: t }) => {
         width: 90%;
         height: 90%;
         padding: 10%;
-        color: ${(t) => {
-  var e;
-  return (e = t.theme.colors) == null ? void 0 : e.text;
+        color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.text;
 }};
 
         line,
         path,
         circle,
         fill {
-            stroke: ${(t) => {
-  var e;
-  return (e = t.theme.colors) == null ? void 0 : e.text;
+            stroke: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.text;
 }};
         }
     }
@@ -272,9 +279,9 @@ const Be = ({ className: t }) => {
         width: 10px;
         border-radius: 50%;
         margin: 5px;
-        background-color: ${(t) => {
-  var e;
-  return (e = t.theme.colors) == null ? void 0 : e.text;
+        background-color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.text;
 }};
         animation: ${Fe} 1s infinite;
     }
@@ -289,29 +296,29 @@ const Be = ({ className: t }) => {
     max-width: 100%;
     overflow: hidden;
 `, Pe = a(q)`
-    font-size: ${(t) => {
-  var e;
-  return (e = t.theme.fonts) == null ? void 0 : e.normal;
+    font-size: ${(e) => {
+  var t;
+  return (t = e.theme.fonts) == null ? void 0 : t.normal;
 }};
     font-weight: normal;
     margin: 0;
 `, U = a.div`
     display: flex;
-    ${(t) => t.left && "justify-content: start;"};
-    ${(t) => t.center && "justify-content: center;"};
-    ${(t) => t.right && "justify-content: end;"};
+    ${(e) => e.left && "justify-content: start;"};
+    ${(e) => e.center && "justify-content: center;"};
+    ${(e) => e.right && "justify-content: end;"};
 `, _ = a.div`
-    ${(t) => {
-  var e;
-  return t.padded && `padding: ${(e = t.theme.sizes) == null ? void 0 : e.medium};`;
+    ${(e) => {
+  var t;
+  return e.padded && `padding: ${(t = e.theme.sizes) == null ? void 0 : t.medium};`;
 }}
-    ${(t) => !t.user && t.stacked && Ue(t.stacked, t.theme)}
-    ${(t) => t.user && t.stacked && _e(t.stacked, t.theme)}
+    ${(e) => !e.user && e.stacked && Ue(e.stacked, e.theme)}
+    ${(e) => e.user && e.stacked && _e(e.stacked, e.theme)}
 
     display: inline-block;
-    margin-top: ${(t) => {
-  var e;
-  return (e = t.theme.sizes) == null ? void 0 : e.normal;
+    margin-top: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.normal;
 }};
     && > * {
         overflow-wrap: break-word;
@@ -321,122 +328,120 @@ const Be = ({ className: t }) => {
         hyphens: auto;
     }
     max-width: 100%;
-    ${(t) => t.fullWidth && "width: 100%;"}
-`, Ue = (t, e) => {
+    ${(e) => e.fullWidth && "width: 100%;"}
+`, Ue = (e, t) => {
   var o, l;
   const r = f`
-        background-color: ${(o = e.colors) == null ? void 0 : o.accent};
-        color: ${(l = e.colors) == null ? void 0 : l.text};
-        ${e.border && `border: ${e.border};`};
+        background-color: ${(o = t.colors) == null ? void 0 : o.accent};
+        color: ${(l = t.colors) == null ? void 0 : l.text};
+        ${t.border && `border: ${t.border};`};
     `;
-  return e.borderRadius ? f`
+  return t.borderRadius ? f`
         ${r}
 
-        border-top-right-radius: ${e.borderRadius};
-        border-bottom-right-radius: ${e.borderRadius};
+        border-top-right-radius: ${t.borderRadius};
+        border-bottom-right-radius: ${t.borderRadius};
 
-        ${t === "first" && `
-            border-top-left-radius: ${e.borderRadius};
+        ${e === "first" && `
+            border-top-left-radius: ${t.borderRadius};
         `}
 
-        ${t === "last" && `
-            border-bottom-left-radius: ${e.borderRadius};
+        ${e === "last" && `
+            border-bottom-left-radius: ${t.borderRadius};
         `}
     ` : r;
-}, _e = (t, e) => {
+}, _e = (e, t) => {
   var o, l;
   const r = f`
-        background-color: ${(o = e.colors) == null ? void 0 : o.primary};
-        color: ${(l = e.colors) == null ? void 0 : l.accent};
+        background-color: ${(o = t.colors) == null ? void 0 : o.primary};
+        color: ${(l = t.colors) == null ? void 0 : l.accent};
     `;
-  return e.borderRadius ? f`
+  return t.borderRadius ? f`
         ${r}
 
-        border-top-left-radius: ${e.borderRadius};
-        border-bottom-left-radius: ${e.borderRadius};
+        border-top-left-radius: ${t.borderRadius};
+        border-bottom-left-radius: ${t.borderRadius};
 
-        ${t === "first" && `
-            border-top-right-radius: ${e.borderRadius};
+        ${e === "first" && `
+            border-top-right-radius: ${t.borderRadius};
         `}
 
-        ${t === "last" && `
-            border-bottom-right-radius: ${e.borderRadius};
+        ${e === "last" && `
+            border-bottom-right-radius: ${t.borderRadius};
         `}
     ` : r;
 }, B = a.div`
-    margin-bottom: ${(t) => {
-  var e;
-  return (e = t.theme.sizes) == null ? void 0 : e.normal;
+    margin-bottom: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.normal;
 }};
     &:last-child {
         margin-bottom: 0;
     }
-`, T = f`
-    margin: ${(t) => {
-  var e;
-  return (e = t.theme.sizes) == null ? void 0 : e.medium;
-}} 0;
-    padding: 0 ${(t) => {
-  var e;
-  return (e = t.theme.sizes) == null ? void 0 : e.medium;
-}};
-`, Ve = a(Re)`
+`, T = (e) => {
+  var t, r;
+  return f`
+    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)`
     & button.humany-form-component-button {
-        ${(t) => {
-  var e, r;
-  return Ce({
+        ${(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({
     active: !1,
-    primaryColor: (e = t.theme.colors) == null ? void 0 : e.primary,
-    secondaryColor: (r = t.theme.colors) == null ? void 0 : r.accent
+    primaryColor: (o = e.theme.colors) == null ? void 0 : o.primary,
+    secondaryColor: (l = e.theme.colors) == null ? void 0 : l.accent,
+    theme: e.theme
   });
 }};
         display: block;
         width: 100%;
-        margin-bottom: ${(t) => {
-  var e;
-  return (e = t.theme.sizes) == null ? void 0 : e.normal;
+        margin-bottom: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.normal;
 }};
     }
     & button.humany-form-component-submit {
         width: 100%;
         margin: 0;
         :not(:last-child) {
-            margin-bottom: ${(t) => {
-  var e;
-  return (e = t.theme.sizes) == null ? void 0 : e.normal;
+            margin-bottom: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.normal;
 }};
         }
     }
 `, qe = a(Y)`
     white-space: pre-wrap;
     a {
-        color: ${(t) => t.theme.colors.link};
+        color: ${(e) => e.theme.colors.link};
         &:focus {
-            ${(t) => {
-  var e;
-  return ((e = t.theme.accessibility) == null ? void 0 : e.isTabbing) && b;
+            ${(e) => {
+  var t;
+  return ((t = e.theme.accessibility) == null ? void 0 : t.isTabbing) && b;
 }};
         }
     }
 `, Ye = a(le)`
     padding: 0;
     list-style: none;
-    margin: 0 -${(t) => {
-  var e;
-  return (e = t.theme.sizes) == null ? void 0 : e.normal;
+    margin: 0 -${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.normal;
 }};
     > li {
-        margin: ${(t) => {
-  var e;
-  return (e = t.theme.sizes) == null ? void 0 : e.normal;
+        margin: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.normal;
 }};
     }
 `, Ge = a.button`
-    ${G};
+    ${(e) => G(e)};
     display: block;
-    background-color: ${(t) => {
-  var e;
-  return (e = t.theme.colors) == null ? void 0 : e.primary;
+    background-color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.primary;
 }};
     width: 100%;
     color: #fff;
@@ -445,47 +450,47 @@ const Be = ({ className: t }) => {
         background-color: transparent;
     }
 `, ne = X(
-  ({ boxed: t, className: e, agentData: r }, o) => /* @__PURE__ */ n.createElement(P, {
+  ({ boxed: e, className: t, agentData: r }, o) => /* @__PURE__ */ n.createElement(P, {
     ref: o
   }, /* @__PURE__ */ n.createElement(U, {
-    left: t,
-    center: !t
+    left: e,
+    center: !e
   }, /* @__PURE__ */ n.createElement(_, {
-    padded: !!t,
-    stacked: t ? "first" : void 0
+    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`
     && {
-        font-size: ${(t) => {
-  var e;
-  return (e = t.theme.fonts) == null ? void 0 : e.small;
+        font-size: ${(e) => {
+  var t;
+  return (t = e.theme.fonts) == null ? void 0 : t.small;
 }};
         font-weight: 300;
     }
     margin: 0;
     line-height: 1.5em;
     grid-area: info;
-    color: ${(t) => {
-  var e;
-  return (e = t.theme.colors) == null ? void 0 : e.text;
+    color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.text;
 }};
-`, re = (t) => new Date(t).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }), K = ({ className: t, name: e, timestamp: r }) => {
-  if (!e && !r)
+`, re = (e) => new Date(e).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }), K = ({ className: e, name: t, timestamp: r }) => {
+  if (!t && !r)
     return null;
   let o = "";
-  return e ? r ? o = `${e}: ${re(r)}` : o = e : r && (o = re(r)), /* @__PURE__ */ n.createElement(Je, null, o);
-}, he = ({ className: t, children: e, sender: r, timestamp: 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, {
     hasAvatar: !!l,
-    className: H(t, "humany-conversation-agent-message")
+    className: H(e, "humany-conversation-agent-message")
   }, l && /* @__PURE__ */ n.createElement(De, {
     avatarSize: u
   }, typeof l == "string" ? /* @__PURE__ */ n.createElement("img", {
     src: l
   }) : /* @__PURE__ */ n.createElement(w, {
     symbol: l
-  })), e, /* @__PURE__ */ n.createElement(K, {
+  })), t, /* @__PURE__ */ n.createElement(K, {
     name: s,
     timestamp: o
   }));
@@ -493,7 +498,7 @@ const Be = ({ className: t }) => {
     display: grid;
     margin-right: 10%;
     width: 90%;
-    ${(t) => t.hasAvatar ? f`
+    ${(e) => e.hasAvatar ? f`
                   grid-template-columns: auto 1fr;
                   grid-template-rows: 1fr auto;
                   grid-template-areas:
@@ -507,43 +512,43 @@ const Be = ({ className: t }) => {
                       'info';
               `};
 `, Xe = X(
-  ({ className: t, children: e, timestamp: r, discrete: o, fullWidth: l }, s) => /* @__PURE__ */ n.createElement(Ze, {
+  ({ className: e, children: t, timestamp: r, discrete: o, fullWidth: l }, s) => /* @__PURE__ */ n.createElement(Ze, {
     ref: s,
-    className: H(t, "humany-conversation-system-message"),
+    className: H(e, "humany-conversation-system-message"),
     fullWidth: l
   }, o ? /* @__PURE__ */ n.createElement(et, {
     className: "humany-conversation-discrete-message"
-  }, e, /* @__PURE__ */ n.createElement(K, {
+  }, t, /* @__PURE__ */ n.createElement(K, {
     timestamp: r
-  })) : /* @__PURE__ */ n.createElement(n.Fragment, null, e, /* @__PURE__ */ n.createElement(K, {
+  })) : /* @__PURE__ */ n.createElement(n.Fragment, null, t, /* @__PURE__ */ n.createElement(K, {
     timestamp: r
   })))
 ), Ze = a.div`
-    ${(t) => t.fullWidth && "width: 100%"};
-    padding: 0 ${(t) => {
-  var e;
-  return (e = t.theme.sizes) == null ? void 0 : e.large;
+    ${(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`
     text-align: center;
     word-wrap: break-word;
-    font-size: ${(t) => {
-  var e;
-  return (e = t.theme.fonts) == null ? void 0 : e.normal;
+    font-size: ${(e) => {
+  var t;
+  return (t = e.theme.fonts) == null ? void 0 : t.normal;
 }};
-    color: ${(t) => {
-  var e;
-  return (e = t.theme.colors) == null ? void 0 : e.text;
+    color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.text;
 }};
     > p {
         margin: 0;
     }
-`, tt = ({ className: t, children: e, timestamp: r }) => {
+`, tt = ({ className: e, children: t, timestamp: r }) => {
   const { userLabel: o = "" } = M();
   return /* @__PURE__ */ n.createElement(nt, {
-    className: H(t, "humany-conversation-user-message")
-  }, e, /* @__PURE__ */ n.createElement(K, {
+    className: H(e, "humany-conversation-user-message")
+  }, t, /* @__PURE__ */ n.createElement(K, {
     name: o,
     timestamp: r
   }));
@@ -553,12 +558,12 @@ const Be = ({ className: t }) => {
     display: flex;
     flex-direction: column;
     align-items: flex-end;
-`, ge = (t) => Array.isArray(t) ? t : Object.keys(t).map((e) => ({
-  label: t[e],
-  actionKey: e
-})), rt = ({ header: t, actions: e, dispatch: r }) => /* @__PURE__ */ n.createElement(ot, {
-  header: t,
-  items: ge(e),
+`, ge = (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, {
+  header: e,
+  items: ge(t),
   renderItem: (o) => /* @__PURE__ */ n.createElement("li", {
     key: o.actionKey
   }, /* @__PURE__ */ n.createElement(at, {
@@ -575,9 +580,9 @@ const Be = ({ className: t }) => {
     > ul {
         display: flex;
         flex-wrap: wrap;
-        gap: ${(t) => {
-  var e;
-  return (e = t.theme.sizes) == null ? void 0 : e.normal;
+        gap: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.normal;
 }};
         > li {
             margin: 0;
@@ -588,13 +593,13 @@ const Be = ({ className: t }) => {
     ${G};
 
     display: block;
-    padding: ${(t) => {
-  var e;
-  return (e = t.theme.sizes) == null ? void 0 : e.normal;
+    padding: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.normal;
 }};
-    background-color: ${(t) => {
-  var e;
-  return (e = t.theme.colors) == null ? void 0 : e.primary;
+    background-color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.primary;
 }};
     width: 100%;
     color: #ffffff;
@@ -607,32 +612,32 @@ const Be = ({ className: t }) => {
 
     i,
     svg {
-        margin-right: ${(t) => {
-  var e;
-  return (e = t.theme.sizes) == null ? void 0 : e.small;
+        margin-right: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.small;
 }};
     }
-`, lt = ({ type: t, content: e = {} }) => {
-  const r = Se(t);
-  return !r || !t ? null : /* @__PURE__ */ n.createElement(He, {
+`, lt = ({ type: e, content: t = {} }) => {
+  const r = Se(e);
+  return !r || !e ? null : /* @__PURE__ */ n.createElement(He, {
     fallback: null
-  }, /* @__PURE__ */ n.createElement(r, g({}, e)));
-}, st = ({ body: t }) => /* @__PURE__ */ n.createElement(it, {
-  html: t
+  }, /* @__PURE__ */ n.createElement(r, g({}, t)));
+}, st = ({ body: e }) => /* @__PURE__ */ n.createElement(it, {
+  html: e
 }), it = a(Y)`
     ${ze}
     color: inherit;
     white-space: pre-wrap;
     ${T}
     a {
-        color: ${(t) => t.theme.colors.link};
+        color: ${(e) => e.theme.colors.link};
         &:focus-visible {
             ${b};
         }
     }
-`, ct = ({ header: t, actions: e, dispatch: r }) => /* @__PURE__ */ n.createElement(mt, {
-  header: t,
-  items: ge(e),
+`, ct = ({ header: e, actions: t, dispatch: r }) => /* @__PURE__ */ n.createElement(mt, {
+  header: e,
+  items: ge(t),
   renderItem: (o) => /* @__PURE__ */ n.createElement("li", {
     key: o.actionKey
   }, /* @__PURE__ */ n.createElement(dt, {
@@ -653,19 +658,19 @@ const Be = ({ className: t }) => {
     ${Q}
     ${T}
 
-    ${se(
+    ${(e) => se(e)(
   "h1",
   f`
-            white-space: normal;
-        `
+                white-space: normal;
+            `
 )}
 
     > ul {
         display: flex;
         flex-direction: column;
-        gap: ${(t) => {
-  var e;
-  return (e = t.theme.sizes) == null ? void 0 : e.normal;
+        gap: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.normal;
 }};
         > li {
             margin: 0;
@@ -675,23 +680,23 @@ const Be = ({ className: t }) => {
     display: block;
     text-align: left;
     font-weight: 300;
-    color: ${(t) => {
-  var e;
-  return (e = t.theme.colors) == null ? void 0 : e.primary;
+    color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.primary;
 }};
     max-width: 100%;
     text-overflow: ellipsis;
     overflow: hidden;
 
-    ${(t) => {
-  var e, r;
-  return t.help && f`
-            color: ${(e = t.theme.colors) == null ? void 0 : e.text};
+    ${(e) => {
+  var t, r;
+  return e.help && f`
+            color: ${(t = e.theme.colors) == null ? void 0 : t.text};
             text-decoration: underline;
 
             i,
             svg {
-                margin-left: ${(r = t.theme.sizes) == null ? void 0 : r.small};
+                margin-left: ${(r = e.theme.sizes) == null ? void 0 : r.small};
             }
         `;
 }}
@@ -699,29 +704,29 @@ const Be = ({ className: t }) => {
     &:focus-visible {
         ${b}
         span {
-            color: ${(t) => {
-  var e;
-  return (e = t.theme.colors) == null ? void 0 : e.primary;
+            color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.primary;
 }};
             text-decoration: underline;
         }
     }
 `, ut = () => /* @__PURE__ */ n.createElement(ht, null), ht = a.div`
-    ${(t) => t.theme.border && `border-bottom: ${t.theme.border};`}
+    ${(e) => e.theme.border && `border-bottom: ${e.theme.border};`}
     width: 100%;
-`, gt = ({ text: t }) => /* @__PURE__ */ n.createElement(ft, {
+`, gt = ({ text: e }) => /* @__PURE__ */ n.createElement(ft, {
   variant: "span"
-}, t), ft = a(q)`
+}, e), ft = a(q)`
     ${T}
 `, pt = ({
-  header: t = "Video call",
-  acceptLabel: e = "Accept",
+  header: e = "Video call",
+  acceptLabel: t = "Accept",
   declineLabel: r = "Decline",
   dispatch: o
 }) => {
   const l = Te(() => [
     {
-      label: e,
+      label: t,
       actionKey: "accept-video-call",
       symbol: {
         type: "Svg",
@@ -736,9 +741,9 @@ const Be = ({ className: t }) => {
         content: "close"
       }
     }
-  ], [e, r]);
+  ], [t, r]);
   return /* @__PURE__ */ n.createElement(yt, {
-    header: t,
+    header: e,
     items: l,
     renderItem: (s) => {
       const u = s.actionKey === "accept-video-call" ? "#70c48e" : "#da5c85";
@@ -758,23 +763,23 @@ const Be = ({ className: t }) => {
     }
   });
 }, yt = a(J)`
-    ${Q}
+    ${(e) => Q(e)}
     > ul {
         display: flex;
         flex-wrap: wrap;
-        gap: ${(t) => {
-  var e;
-  return (e = t.theme.sizes) == null ? void 0 : e.normal;
+        gap: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.normal;
 }};
         > li {
             margin: 0;
         }
     }
-    ${T}
+    ${(e) => T(e)}
 `, bt = a(L)`
     ${G};
 
-    background-color: ${(t) => t.bgColor};
+    background-color: ${(e) => e.bgColor};
     display: flex;
     justify-content: center;
     align-items: center;
@@ -789,15 +794,15 @@ const Be = ({ className: t }) => {
 
         i,
         svg {
-            color: ${(t) => {
-  var e;
-  return (e = t.theme.colors) == null ? void 0 : e.primary;
+            color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.primary;
 }};
 
             path {
-                stroke: ${(t) => {
-  var e;
-  return (e = t.theme.colors) == null ? void 0 : e.primary;
+                stroke: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.primary;
 }};
             }
         }
@@ -811,8 +816,8 @@ const Be = ({ className: t }) => {
             stroke: #fff;
         }
     }
-`, $t = ([t, e]) => ({ type: t, content: e }), vt = ({ items: t, dispatch: e }) => /* @__PURE__ */ n.createElement(Et, {
-  items: t.map($t),
+`, $t = ([e, t]) => ({ type: e, content: t }), vt = ({ items: e, dispatch: t }) => /* @__PURE__ */ n.createElement(Et, {
+  items: e.map($t),
   renderLi: !0,
   renderItem: (r) => {
     switch (r.type) {
@@ -826,15 +831,15 @@ const Be = ({ className: t }) => {
         return /* @__PURE__ */ n.createElement(ut, g({}, r.content));
       case C.LinkList:
         return /* @__PURE__ */ n.createElement(ct, x(g({}, r.content), {
-          dispatch: e
+          dispatch: t
         }));
       case C.ButtonList:
         return /* @__PURE__ */ n.createElement(rt, x(g({}, r.content), {
-          dispatch: e
+          dispatch: t
         }));
       case C.VideoRequest:
         return /* @__PURE__ */ n.createElement(pt, x(g({}, r.content), {
-          dispatch: e
+          dispatch: t
         }));
       default:
         return /* @__PURE__ */ n.createElement(lt, {
@@ -850,7 +855,7 @@ const Be = ({ className: t }) => {
         margin: 0;
     }
 `, xt = X(
-  ({ className: t, timestamp: e, sender: r, type: o, content: l }, s) => {
+  ({ className: e, timestamp: t, sender: r, type: o, content: l }, s) => {
     const u = me(
       (m) => {
         let i = "first";
@@ -860,11 +865,11 @@ const Be = ({ className: t }) => {
     ), 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, {
-        className: t,
+        className: e,
         key: i,
         discrete: p,
         ref: s,
-        timestamp: e,
+        timestamp: t,
         fullWidth: !!S || !!E
       }, p && $ ? /* @__PURE__ */ n.createElement(Y, {
         html: $
@@ -874,8 +879,8 @@ const Be = ({ className: t }) => {
       }));
     })), h = () => /* @__PURE__ */ n.createElement(he, {
       sender: r,
-      timestamp: e,
-      className: t
+      timestamp: t,
+      className: e
     }, /* @__PURE__ */ n.createElement(P, null, l.map((m, i) => /* @__PURE__ */ n.createElement(U, {
       left: !0,
       key: m.key,
@@ -884,8 +889,8 @@ const Be = ({ className: t }) => {
       content: m,
       stacked: u(i)
     }))))), v = () => /* @__PURE__ */ n.createElement(tt, {
-      timestamp: e,
-      className: t
+      timestamp: t,
+      className: e
     }, /* @__PURE__ */ n.createElement(P, null, l.map((m, i) => /* @__PURE__ */ n.createElement(U, {
       right: !0,
       key: m.key,
@@ -906,17 +911,17 @@ const Be = ({ className: t }) => {
         return null;
     }
   }
-), F = ({ content: t, isUser: e, isSystem: r, stacked: o }) => {
-  const l = V(), { title: s, body: u, actions: c, form: h, items: v } = t;
+), F = ({ content: e, isUser: t, isSystem: r, stacked: o }) => {
+  const l = V(), { title: s, body: u, actions: c, form: h, items: v } = e;
   return v ? /* @__PURE__ */ n.createElement(_, {
-    user: !!e,
+    user: !!t,
     stacked: o
   }, /* @__PURE__ */ n.createElement(vt, {
     items: v,
     dispatch: l
   })) : /* @__PURE__ */ n.createElement(_, {
     padded: !r,
-    user: !!e,
+    user: !!t,
     stacked: o,
     fullWidth: !!h || !!c
   }, s && /* @__PURE__ */ n.createElement(B, null, /* @__PURE__ */ n.createElement(Pe, {
@@ -942,14 +947,14 @@ const Be = ({ className: t }) => {
     }, i.label))
   })));
 }, fe = () => {
-  const t = me((c) => {
+  const e = me((c) => {
     c && setTimeout(() => {
       c.scrollIntoView({
         block: "start",
         behavior: "smooth"
       });
     }, 250);
-  }, []), [e, r] = ae(!0), {
+  }, []), [t, r] = ae(!0), {
     messages: o,
     loading: l,
     typingActors: s = []
@@ -961,11 +966,11 @@ const Be = ({ className: t }) => {
     sender: c
   }, /* @__PURE__ */ n.createElement(ne, {
     boxed: !0,
-    ref: t
+    ref: e
   })))) : null;
   return /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(wt, {
     tabIndex: 0,
-    scrollableCss: e,
+    scrollableCss: t,
     ref: r
   }, o && o.length ? o.map((c, h) => {
     const { type: v, timestamp: m, sender: i, content: $ } = c;
@@ -974,42 +979,42 @@ const Be = ({ className: t }) => {
       tabIndex: -1,
       key: `${v}_${i == null ? void 0 : i.name}_${m}_${$[0].key}`
     }, /* @__PURE__ */ n.createElement(xt, x(g({}, c), {
-      ref: t
+      ref: e
     })));
   }) : null, u(), l && /* @__PURE__ */ n.createElement(W, null, /* @__PURE__ */ n.createElement(ne, {
-    ref: t
+    ref: e
   }))), /* @__PURE__ */ n.createElement(Be, null));
 }, wt = a.div`
     display: flex;
     flex-direction: column;
     align-items: stretch;
     flex: 0 1 100%;
-    padding: 0 ${(t) => {
-  var e;
-  return (e = t.theme.sizes) == null ? void 0 : e.medium;
+    padding: 0 ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.medium;
 }};
-    ${(t) => !!t.scrollableCss && t.scrollableCss};
+    ${(e) => !!e.scrollableCss && e.scrollableCss};
     &:focus-visible {
-        ${b};
+        ${(e) => b(e)};
     }
 `, W = a.div`
     margin: 0;
-    margin-bottom: ${(t) => {
-  var e;
-  return (e = t.theme.sizes) == null ? void 0 : e.medium;
+    margin-bottom: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.medium;
 }};
 
     &:first-of-type {
-        margin-top: ${(t) => {
-  var e;
-  return (e = t.theme.sizes) == null ? void 0 : e.medium;
+        margin-top: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.medium;
 }};
     }
 
     &:last-of-type {
-        padding-bottom: ${(t) => {
-  var e;
-  return (e = t.theme.sizes) == null ? void 0 : e.medium;
+        padding-bottom: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.medium;
 }};
     }
 
@@ -1024,25 +1029,24 @@ const Be = ({ className: t }) => {
     h1 {
         font-weight: normal;
     }
-
-    ${se(
+    ${(e) => se(e)(
   "h1",
   f`
-            font-weight: normal;
-        `
+                font-weight: normal;
+            `
 )}
-`, kt = ({ dispatch: t }) => {
-  const e = Ie(null);
+`, kt = ({ dispatch: e }) => {
+  const t = Ie(null);
   return ce(() => {
-    e.current && e.current.parentNode && t("overlay-mounted", e.current);
-  }, [e]), /* @__PURE__ */ n.createElement(ie, {
+    t.current && t.current.parentNode && e("overlay-mounted", t.current);
+  }, [t]), /* @__PURE__ */ n.createElement(ie, {
     portalId: "humany-conversation-overlay-portal",
     className: "humany-conversation-overlay-outlet",
-    ref: e
+    ref: t
   });
 }, Ct = ({
-  dispatch: t,
-  header: e,
+  dispatch: e,
+  header: t,
   buttonLabel: r
 }) => /* @__PURE__ */ n.createElement(St, {
   portalId: "humany-conversation-portal",
@@ -1053,80 +1057,80 @@ const Be = ({ className: t }) => {
   className: "humany-conversation-outlet-head-button",
   "aria-label": r,
   title: r,
-  onClick: () => t("hide-overlay-conversation")
+  onClick: () => e("hide-overlay-conversation")
 }, /* @__PURE__ */ n.createElement(w, {
   symbol: {
     type: "Svg",
     content: "caret-down"
   },
   size: 20
-})), e && /* @__PURE__ */ n.createElement(Lt, {
+})), t && /* @__PURE__ */ n.createElement(Lt, {
   className: "humany-conversation-outlet-header",
   variant: "h1"
-}, e)), /* @__PURE__ */ n.createElement(fe, null)), St = a(ie)`
+}, t)), /* @__PURE__ */ n.createElement(fe, null)), St = a(ie)`
     z-index: 11;
     top: auto;
     height: 65%;
     background-color: #ffffff;
     display: flex;
     flex-direction: column;
-    border-top-right-radius: ${(t) => {
-  var e;
-  return (e = t.theme.sizes) == null ? void 0 : e.large;
+    border-top-right-radius: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.large;
 }};
-    border-top-left-radius: ${(t) => {
-  var e;
-  return (e = t.theme.sizes) == null ? void 0 : e.large;
+    border-top-left-radius: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.large;
 }};
 `, zt = a.div`
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    gap: ${(t) => {
-  var e;
-  return (e = t.theme.sizes) == null ? void 0 : e.normal;
+    gap: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.normal;
 }};
-    padding: ${(t) => {
-  var e;
-  return (e = t.theme.sizes) == null ? void 0 : e.normal;
+    padding: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.normal;
 }};
-    ${(t) => t.theme.border && `border-bottom: ${t.theme.border};`}
+    ${(e) => e.theme.border && `border-bottom: ${e.theme.border};`}
 `, Lt = a(q)`
-    font-size: ${(t) => {
-  var e;
-  return (e = t.theme.fonts) == null ? void 0 : e.medium;
+    font-size: ${(e) => {
+  var t;
+  return (t = e.theme.fonts) == null ? void 0 : t.medium;
 }};
-    color: ${(t) => {
-  var e;
-  return (e = t.theme.colors) == null ? void 0 : e.text;
+    color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.text;
 }};
     margin: 0;
 `, Mt = a(L)`
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: ${(t) => {
-  var e;
-  return (e = t.theme.sizes) == null ? void 0 : e.small;
-}} ${(t) => {
-  var e;
-  return (e = t.theme.sizes) == null ? void 0 : e.medium;
+    padding: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.small;
+}} ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.medium;
 }};
-    ${(t) => t.theme.borderRadius && `border-radius: ${t.theme.borderRadius};`}
+    ${(e) => e.theme.borderRadius && `border-radius: ${e.theme.borderRadius};`}
 
     &:focus-visible {
         ${b};
     }
 
     svg line {
-        stroke: ${(t) => {
-  var e;
-  return (e = t.theme.colors) == null ? void 0 : e.text;
+        stroke: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.text;
 }};
     }
-`, Ft = (r) => {
-  var o = r, { className: t } = o, e = j(o, ["className"]);
+`, Wt = (r) => {
+  var o = r, { className: e } = o, t = j(o, ["className"]);
   const {
     overlay: l,
     overlayConversationHeader: s,
@@ -1135,8 +1139,8 @@ const Be = ({ className: t }) => {
   } = M(), h = V();
   return /* @__PURE__ */ n.createElement(Me.Provider, {
     value: c ? { id: c } : null
-  }, /* @__PURE__ */ n.createElement(Ht, x(g({}, e), {
-    className: H(t, "humany-conversation-component")
+  }, /* @__PURE__ */ n.createElement(Ht, 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, {
     dispatch: h
   }), l.conversation && /* @__PURE__ */ n.createElement(Ct, {
@@ -1155,6 +1159,6 @@ const Be = ({ className: t }) => {
     flex-direction: column;
 `;
 export {
-  Ft as default
+  Wt as default
 };
-//# sourceMappingURL=conversation.b485c8d7.js.map
+//# sourceMappingURL=conversation.4aefedf8.js.map