@telia-ace/widget-ui 1.0.31 → 1.0.32-next.1

package/dist/index.js

@@ -21,7 +21,7 @@ var S = (e, t) => {
 };
 var re = (e, t, n) => (me(e, typeof t != "symbol" ? t + "" : t, n), n);
 import { Container as ct, WidgetState as lt } from "@webprovisions/platform";
-import r, { forwardRef as N, createContext as X, useContext as K, useState as $, useEffect as v, useRef as R, useCallback as H, useImperativeHandle as Ce, useMemo as se, Component as ut, lazy as mt } from "react";
+import r, { forwardRef as N, createContext as X, useContext as K, useState as $, useEffect as E, useRef as R, useCallback as T, useImperativeHandle as Ce, useMemo as se, Component as ut, lazy as mt } from "react";
 import { ComponentPlatform as dt, asDescriptor as ft, createEventSubscriber as ht, ComponentQuery as pt, WidgetRenderState as oe, extendComponent as gt } from "@telia-ace/widget-core";
 import { css as L, keyframes as Ze } from "@emotion/react";
 import y from "@emotion/styled";
@@ -259,16 +259,16 @@ const Bt = (e) => (t) => /* @__PURE__ */ r.createElement(Hr, { attrs: t, htmlBod
   type: "",
   name: "",
   branch: ""
-}), Pt = X({}), Ft = X(null), At = X(null), Kt = () => K(Pe), ye = Kt, Yt = () => K(It), W = Yt, jt = (e, t) => {
+}), Pt = X({}), Ft = X(null), At = X(null), Kt = () => K(Pe), ye = Kt, jt = () => K(It), W = jt, Yt = (e, t) => {
   const n = ye().id, o = W();
   return (s, i) => {
     (t || o).getAsync("actionResolver").then((a) => {
       a.action(e || n, s, i);
     });
   };
-}, go = jt, Xt = (e) => {
+}, go = Yt, Xt = (e) => {
   const t = K(Pe), n = U(), [o, s] = $();
-  return v(() => {
+  return E(() => {
     if ((e || t.id) && n) {
       const i = n.nodes.get(e || t.id);
       s(i);
@@ -276,18 +276,18 @@ const Bt = (e) => (t) => /* @__PURE__ */ r.createElement(Hr, { attrs: t, htmlBod
   }, [e, t.id, n]), o;
 }, be = Xt, Ut = () => {
   const e = R(!1);
-  return v(() => (e.current = !0, () => {
+  return E(() => (e.current = !0, () => {
     e.current = !1;
   }), []), e;
 }, O = Ut, _t = (e) => {
   const t = W(), [n, o] = $(null), s = O();
-  return v(() => {
+  return E(() => {
     dt.getInstance(e || t).then((i) => {
       s.current && o(i);
     });
   }, [s]), n;
 }, U = _t, qt = () => {
-  const e = be(), t = U(), [n, o] = $([]), s = O(), i = H(
+  const e = be(), t = U(), [n, o] = $([]), s = O(), i = T(
     (a) => {
       if (t && s.current && a) {
         const l = t.getBranch(a), u = a.getChildren(l).map((c) => ft(c));
@@ -296,9 +296,9 @@ const Bt = (e) => (t) => /* @__PURE__ */ r.createElement(Hr, { attrs: t, htmlBod
     },
     [s, t, o, e]
   );
-  return v(() => {
+  return E(() => {
     e && i(e);
-  }, [e, t]), v(() => {
+  }, [e, t]), E(() => {
     if (t) {
       const [a, l] = ht(t.events);
       return a("components:set-layout", (u, c) => {
@@ -314,7 +314,7 @@ const Bt = (e) => (t) => /* @__PURE__ */ r.createElement(Hr, { attrs: t, htmlBod
   }, [e, t, i]), n;
 }, Co = qt, Qt = () => K(Ot), yo = Qt, Gt = (e, t) => {
   const n = ye(), o = W(), [s, i] = $(void 0), a = O(), l = e || n.type || "";
-  return v(() => {
+  return E(() => {
     if (l) {
       let u;
       return (t || o).getAsync("componentResolver").then((c) => {
@@ -332,9 +332,9 @@ const Bt = (e) => (t) => /* @__PURE__ */ r.createElement(Hr, { attrs: t, htmlBod
   }, [a, l, t, o]), s;
 }, bo = Gt, Jt = (e) => {
   const t = be(e), n = U(), [o, s] = $({}), i = O();
-  return v(() => {
+  return E(() => {
     t && i.current && s(t.attributes.context);
-  }, [i, t]), v(() => {
+  }, [i, t]), E(() => {
     if (n) {
       const a = n.events.subscribe(
         "components:context-changed",
@@ -349,7 +349,7 @@ const Bt = (e) => (t) => /* @__PURE__ */ r.createElement(Hr, { attrs: t, htmlBod
   }, [i, n, t]), o;
 }, en = Jt, tn = () => K(At), vo = tn, nn = () => {
   const e = U(), t = ye(), [n, o] = $([]), [s, i] = $();
-  return v(() => {
+  return E(() => {
     if (e && t) {
       const a = new pt(e).withId(t.id), l = e.actions(a, t.type || q());
       i(l), n !== null && (n.forEach((u) => {
@@ -367,9 +367,9 @@ const Bt = (e) => (t) => /* @__PURE__ */ r.createElement(Hr, { attrs: t, htmlBod
 }, Eo = nn, I = (e, t, n = window, o = () => !0) => {
   const s = R(() => {
   });
-  v(() => {
+  E(() => {
     s.current = t;
-  }, [t]), v(() => {
+  }, [t]), E(() => {
     if (!(n && o()))
       return;
     const a = (l) => s.current(l);
@@ -382,7 +382,7 @@ const Bt = (e) => (t) => /* @__PURE__ */ r.createElement(Hr, { attrs: t, htmlBod
   return n;
 }, on = rn, sn = () => {
   const [e, t] = $(!1);
-  return v(() => {
+  return E(() => {
     const n = () => {
       t(!1);
     }, o = (s) => {
@@ -393,24 +393,24 @@ const Bt = (e) => (t) => /* @__PURE__ */ r.createElement(Hr, { attrs: t, htmlBod
     };
   }, []), e;
 }, xo = sn, an = (e, t) => {
-  const [n, o] = $(!1), s = H(
+  const [n, o] = $(!1), s = T(
     (a) => {
       const { key: l } = a;
       l === e && (o(!0), t && t(a));
     },
     [o, t]
-  ), i = H(
+  ), i = T(
     ({ key: a }) => {
       a === e && o(!1);
     },
     [o]
   );
   return I("keydown", s, window), I("keyup", i, window), n;
-}, j = an, cn = (e) => {
+}, Y = an, cn = (e) => {
   const t = be(e), n = U(), [o, s] = $({}), i = O();
-  return v(() => {
+  return E(() => {
     t && i.current && s(t.attributes.layout);
-  }, [t, i]), v(() => {
+  }, [t, i]), E(() => {
     if (n) {
       const a = n.events.subscribe(
         "components:layout-changed",
@@ -425,12 +425,12 @@ const Bt = (e) => (t) => /* @__PURE__ */ r.createElement(Hr, { attrs: t, htmlBod
   }, [n, i, t]), o;
 }, wo = cn, ln = (e) => {
   const t = R();
-  return v(() => {
+  return E(() => {
     t.current = e;
   }), t.current;
 }, Fe = ln, un = () => K(Pt), $o = un, mn = (e) => {
   const [t, n] = $(), o = W(), s = O();
-  return v(() => {
+  return E(() => {
     let i;
     const a = (e || o).get("$widget");
     if (!a)
@@ -457,7 +457,7 @@ const Bt = (e) => (t) => /* @__PURE__ */ r.createElement(Hr, { attrs: t, htmlBod
   }, [s]), t;
 }, ko = mn, dn = () => K(Ft), Ae = dn, fn = (e) => {
   const t = W(), n = Ae(), [o, s] = $({ name: "", params: {} }), i = O();
-  return v(() => {
+  return E(() => {
     const a = (e || t).get("$widget");
     if (!a)
       return;
@@ -468,7 +468,7 @@ const Bt = (e) => (t) => /* @__PURE__ */ r.createElement(Hr, { attrs: t, htmlBod
         De(d), s({ name: p, params: d });
       }
     });
-  }, [i, e, t]), v(() => {
+  }, [i, e, t]), E(() => {
     if (n && n.history && i.current) {
       const a = n.getRouteData(), { name: l, params: u } = a;
       De(u), s({ name: l, params: u });
@@ -477,18 +477,18 @@ const Bt = (e) => (t) => /* @__PURE__ */ r.createElement(Hr, { attrs: t, htmlBod
 }, Lo = fn, Ke = (e) => {
   const t = R(), n = R(0);
   let o;
-  const s = H(() => {
+  const s = T(() => {
     var c;
     (c = t.current) == null || c.classList.add("humany-scrolling"), clearTimeout(o), o = setTimeout(() => {
       var m;
       (m = t.current) == null || m.classList.remove("humany-scrolling");
     }, 500);
-  }, [t]), i = H(
+  }, [t]), i = T(
     (c) => {
       n.current = c.touches[0].clientY;
     },
     [t]
-  ), a = (c) => l(c) ? c === t.current ? c : null : c.parentElement ? a(c.parentElement) : null, l = (c) => c.scrollWidth > c.clientWidth || c.scrollHeight > c.clientHeight, u = H(
+  ), a = (c) => l(c) ? c === t.current ? c : null : c.parentElement ? a(c.parentElement) : null, l = (c) => c.scrollWidth > c.clientWidth || c.scrollHeight > c.clientHeight, u = T(
     (c) => {
       if (!c.cancelable)
         return;
@@ -531,19 +531,19 @@ const Bt = (e) => (t) => /* @__PURE__ */ r.createElement(Hr, { attrs: t, htmlBod
     }
 `, pn = () => {
   const [e, t] = $(null), n = W(), o = O();
-  return v(() => {
+  return E(() => {
     n.get("settings").then((s) => {
       o.current && t(s);
     });
   }, [o]), e;
 }, Mo = pn, gn = (e = !1) => {
-  const [t, n] = $(e), o = H((s) => {
+  const [t, n] = $(e), o = T((s) => {
     n(typeof s == "boolean" ? s : (i) => !i);
   }, []);
   return [t, o];
-}, Ye = gn, So = (e) => {
+}, je = gn, So = (e) => {
   const t = W(), n = U(), o = t.get("widgetDOMElement"), [s, i] = $(null), [a, l] = $(null), u = O();
-  v(() => {
+  E(() => {
     if (n && u.current) {
       const m = n.nodes.all.find((d) => d.name === "root-area"), p = n.nodes.all.find((d) => d.type === "view");
       if (!(p != null && p.attributes.properties.animation) && !(m != null && m.attributes.properties.animation))
@@ -556,7 +556,7 @@ const Bt = (e) => (t) => /* @__PURE__ */ r.createElement(Hr, { attrs: t, htmlBod
       }
     }
   }, [n, t, u]);
-  const c = H(
+  const c = T(
     (m) => {
       u.current && (m.target === s || m.target === a) && e();
     },
@@ -565,7 +565,7 @@ const Bt = (e) => (t) => /* @__PURE__ */ r.createElement(Hr, { attrs: t, htmlBod
   I("transitionend", c, s), I("transitionend", c, a);
 }, Cn = (e, t, n = [], o) => {
   const s = on(o);
-  return v(() => {
+  return E(() => {
     if (s) {
       const i = s.subscribe(e, t);
       return () => {
@@ -587,7 +587,7 @@ const Bt = (e) => (t) => /* @__PURE__ */ r.createElement(Hr, { attrs: t, htmlBod
     }, V(n)),
     t
   );
-}, Ee = bn, je = (e) => L`
+}, Ee = bn, Ye = (e) => L`
     display: flex;
     justify-content: center;
     flex-direction: column;
@@ -719,7 +719,7 @@ const Bt = (e) => (t) => /* @__PURE__ */ r.createElement(Hr, { attrs: t, htmlBod
             text-decoration: none;
         }
     }
-    > li:last-child {
+    > li:last-of-type {
         margin: 0;
     }
 `;
@@ -823,7 +823,7 @@ const Bt = (e) => (t) => /* @__PURE__ */ r.createElement(Hr, { attrs: t, htmlBod
     const s = document.getElementById(e) || document.createElement("div");
     return s.id = e, s;
   });
-  return v(() => (t.appendChild(o), () => {
+  return E(() => (t.appendChild(o), () => {
     o.childElementCount <= 1 && o.remove();
   }), [o]), bt(n, o);
 }, Q = wn, $n = (l) => {
@@ -1309,7 +1309,7 @@ const Bt = (e) => (t) => /* @__PURE__ */ r.createElement(Hr, { attrs: t, htmlBod
     }
     case "FontAwesome":
       return /* @__PURE__ */ r.createElement(
-        jn,
+        Yn,
         h({
           className: i,
           faIcon: m,
@@ -1355,30 +1355,30 @@ const Hn = 300, Tn = ({
     type: "slide-in-bottom"
   }
 }) => {
-  const { duration: u = Hn } = l, c = R(), m = R(), [p, d] = Ke(!0), [f, C] = Ye(), x = Fe(f), b = R(q());
-  v(() => {
+  const { duration: u = Hn } = l, c = R(), m = R(), [p, d] = Ke(!0), [f, C] = je(), x = Fe(f), v = R(q());
+  E(() => {
     o && o(f);
   }, [f]);
-  const E = j("Escape");
-  v(() => {
-    E && C(!1);
-  }, [E]), I(
+  const b = Y("Escape");
+  E(() => {
+    b && C(!1);
+  }, [b]), I(
     "click",
-    (z) => {
-      const { target: T } = z;
-      !m.current || !d.current || !T || m.current !== T && d.current !== T && !d.current.contains(T) && !m.current.contains(T) && C(!1);
+    (B) => {
+      const { target: D } = B;
+      !m.current || !d.current || !D || m.current !== D && d.current !== D && !d.current.contains(D) && !m.current.contains(D) && C(!1);
     },
     window
   );
-  const g = ve(b.current, () => {
+  const g = ve(v.current, () => {
     C(!1);
   });
   ce("router:changed", () => {
     C(!1);
-  }), v(() => {
+  }), E(() => {
     f && c.current ? c.current.focus() : !f && m.current && x && m.current.focus();
   }, [f, c.current, m.current]);
-  const B = Wn[l.type];
+  const H = Wn[l.type];
   return /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(
     Ie,
     {
@@ -1389,14 +1389,14 @@ const Hn = 300, Tn = ({
       timeout: u
     },
     /* @__PURE__ */ r.createElement(Q, null, /* @__PURE__ */ r.createElement(
-      B,
+      H,
       {
         duration: u,
         fullScreen: i,
         className: M(
           e,
           "humany-drawer",
-          `humany-drawer-${b.current}`
+          `humany-drawer-${v.current}`
         ),
         clientHeight: document.body.clientHeight,
         css: p,
@@ -1416,7 +1416,7 @@ const Hn = 300, Tn = ({
       t
     ))
   ), r.cloneElement(s, {
-    onClick: (z) => {
+    onClick: (B) => {
       C(), g();
     },
     ref: m,
@@ -1543,7 +1543,7 @@ const Hn = 300, Tn = ({
   ["slide-in-left"]: Nn,
   ["slide-in-top"]: Vn
 }, Zn = (e, t, n) => {
-  const [o, s] = $(0), [i, a] = $(0), l = H(
+  const [o, s] = $(0), [i, a] = $(0), l = T(
     (u, c) => {
       if (u.preventDefault(), c) {
         const m = c.getBoundingClientRect();
@@ -1552,7 +1552,7 @@ const Hn = 300, Tn = ({
     },
     [o, i, s, a]
   );
-  return v(() => {
+  return E(() => {
     if (!n || !e)
       return;
     const u = n.getBoundingClientRect(), c = {
@@ -1566,28 +1566,28 @@ const Hn = 300, Tn = ({
     var l = a, { className: e = "", children: t = null, trigger: n, closeButtonAriaLabel: o } = l, s = S(l, ["className", "children", "trigger", "closeButtonAriaLabel"]);
     const u = R(), c = R(), m = R();
     Ce(i, () => m.current, [m.current]);
-    const p = R(q()), [d, f] = $(!1), C = Fe(d), [{ x, y: b }, E] = Xe(d, p.current, m.current), g = j("Escape");
-    v(() => {
+    const p = R(q()), [d, f] = $(!1), C = Fe(d), [{ x, y: v }, b] = Xe(d, p.current, m.current), g = Y("Escape");
+    E(() => {
       g && f(!1);
-    }, [g]), v(() => {
+    }, [g]), E(() => {
       d && u.current ? u.current.focus() : !d && c.current && C && c.current.focus();
     }, [d, u.current, c.current]), I(
       "click",
-      (T) => {
-        const { target: Y } = T;
-        !m.current || !Y || m.current !== Y && !m.current.contains(Y) && f(!1);
+      (D) => {
+        const { target: j } = D;
+        !m.current || !j || m.current !== j && !m.current.contains(j) && f(!1);
       },
       window
     ), ce("router:changed", () => {
       f(!1);
     });
-    const B = ve(p.current, () => {
+    const H = ve(p.current, () => {
       f(!1);
-    }), z = H(
-      (T) => {
-        T.stopPropagation(), E(T, c.current), f(!d), B();
+    }), B = T(
+      (D) => {
+        D.stopPropagation(), b(D, c.current), f(!d), H();
       },
-      [B, E, f]
+      [H, b, f]
     );
     return /* @__PURE__ */ r.createElement(r.Fragment, null, d && /* @__PURE__ */ r.createElement(Q, null, /* @__PURE__ */ r.createElement(
       On,
@@ -1599,7 +1599,7 @@ const Hn = 300, Tn = ({
         )
       }, s), {
         x,
-        y: b,
+        y: v,
         ref: m
       }),
       /* @__PURE__ */ r.createElement(
@@ -1614,14 +1614,14 @@ const Hn = 300, Tn = ({
       ),
       t
     )), r.cloneElement(n, {
-      onClick: z,
+      onClick: B,
       ref: c,
       "aria-label": n.props.title,
       "aria-expanded": d
     }));
   }
 ), zo = In, On = y.div`
-    ${je}
+    ${Ye}
     padding: ${(e) => {
   var t;
   return (t = e.theme.sizes) == null ? void 0 : t.medium;
@@ -1666,7 +1666,7 @@ const Hn = 300, Tn = ({
   (i, s) => {
     var a = i, { htmlParseInstruction: e = null, className: t, html: n } = a, o = S(a, ["htmlParseInstruction", "className", "html"]);
     const l = W(), [u, c] = $();
-    return v(() => {
+    return E(() => {
       const m = zt(l, n), p = k(h(h({}, m), e), {
         transform: h(h({}, m.transform), e == null ? void 0 : e.transform)
       }), d = Dt(n, p);
@@ -1681,7 +1681,7 @@ const Hn = 300, Tn = ({
       u
     );
   }
-), Yn = (i) => {
+), jn = (i) => {
   var a = i, {
     faIcon: e,
     title: t,
@@ -1701,7 +1701,7 @@ const Hn = 300, Tn = ({
       role: o
     }, V(s))
   );
-}, jn = Yn, Vo = N(
+}, Yn = jn, Vo = N(
   (p, m) => {
     var d = p, {
       className: e = "",
@@ -1729,33 +1729,33 @@ const Hn = 300, Tn = ({
       "type"
     ]);
     const [f, C] = $(t), x = R();
-    Ce(m, () => x.current), v(() => {
+    Ce(m, () => x.current), E(() => {
       var g;
       t && ((g = x == null ? void 0 : x.current) == null || g.focus());
     }, [t, m, x]);
-    const b = (g, B) => {
-      C(g), n && n(g), i && g && B.target.select();
-    }, E = k(h({}, V(c)), {
+    const v = (g, H) => {
+      C(g), n && n(g), i && g && H.target.select();
+    }, b = k(h({}, V(c)), {
       disabled: l,
       autoFocus: t,
       type: u,
       onKeyDown: (g) => {
         g.key === "Enter" && f && o(g), g.key === "Escape" && f && s(g);
       },
-      onFocus: (g) => b(!0, g),
-      onBlur: (g) => b(!1, g),
+      onFocus: (g) => v(!0, g),
+      onBlur: (g) => v(!1, g),
       onChange: (g) => a(g.target.value || ""),
       className: M(e, "humany-input"),
       "data-type": u
     });
     return u !== "textarea" ? /* @__PURE__ */ r.createElement(
       "input",
-      k(h({}, E), {
+      k(h({}, b), {
         ref: x
       })
     ) : /* @__PURE__ */ r.createElement(
       "textarea",
-      k(h({}, E), {
+      k(h({}, b), {
         ref: x
       })
     );
@@ -1848,15 +1848,15 @@ const Hn = 300, Tn = ({
       items: p,
       ulProps: a,
       renderItem: (f) => {
-        const { id: C, selected: x, items: b, matches: E } = f, g = x && c(b);
-        return !i && !E ? null : /* @__PURE__ */ r.createElement(
+        const { id: C, selected: x, items: v, matches: b } = f, g = x && c(v);
+        return !i && !b ? null : /* @__PURE__ */ r.createElement(
           "li",
           k(h({}, V(l)), {
             key: C,
             className: "humany-item-tree-item"
           }),
           n && n(f, d, g),
-          b && (s || g) && m(b, d + 1)
+          v && (s || g) && m(v, d + 1)
         );
       }
     }
@@ -1879,21 +1879,30 @@ const Hn = 300, Tn = ({
       ref: null
     });
     if (n) {
-      if (!(m.routes || []).find((E) => E.name === n))
+      if (!(m.routes || []).find((b) => b.name === n))
         return process.env.NODE_ENV !== "production" && de.warn(`Unable to create route. No route named "${n}" exist.`), /* @__PURE__ */ r.createElement(
           fe,
           k(h({}, f), {
-            onClick: (E) => {
-              t(E), E.preventDefault(), process.env.NODE_ENV !== "production" && de.warn(`Unable to navigate. No route named "${n}" exist.`);
+            onClick: (b) => {
+              t(b), b.preventDefault(), process.env.NODE_ENV !== "production" && de.warn(`Unable to navigate. No route named "${n}" exist.`);
             }
           }),
           i
         );
-      const b = Object.keys(s).reduce((E, g) => (E[g] = typeof s[g] == "string" ? encodeURIComponent(s[g]) : s[g], E), {});
+      const v = Object.keys(s).reduce((b, g) => {
+        const H = s[g];
+        if (Array.isArray(H)) {
+          if (H.length === 0)
+            return b;
+          b[g] = H.map((B) => typeof B == "string" ? encodeURIComponent(B) : B).join(",");
+        } else
+          b[g] = typeof H == "string" ? encodeURIComponent(H) : H;
+        return b;
+      }, {});
       try {
-        d = m.generate(n, b || {});
-      } catch (E) {
-        return /* @__PURE__ */ r.createElement(fe, h({}, f), i);
+        d = m.generate(n, v || {});
+      } catch (b) {
+        return /* @__PURE__ */ r.createElement(fe, k(h({}, f), { ref: f.innerRef }), i);
       }
       d && m.settings.mode && m.settings.mode === Be.browser && d[0] !== "/" && (d = `/${d}`);
     } else if (o && m.history)
@@ -1915,7 +1924,7 @@ const Hn = 300, Tn = ({
   }
 ), Gn = y.span``, we = N(
   (x, C) => {
-    var b = x, {
+    var v = x, {
       className: e,
       disabled: t = !1,
       role: n = "link",
@@ -1931,7 +1940,7 @@ const Hn = 300, Tn = ({
       target: m,
       routeName: p,
       params: d
-    } = b, f = S(b, [
+    } = v, f = S(v, [
       "className",
       "disabled",
       "role",
@@ -1946,7 +1955,7 @@ const Hn = 300, Tn = ({
       "routeName",
       "params"
     ]);
-    const E = {
+    const b = {
       title: a,
       disabled: t,
       role: n,
@@ -1973,7 +1982,7 @@ const Hn = 300, Tn = ({
       k(h(h({
         name: p,
         params: d
-      }, E), V(f)), {
+      }, b), V(f)), {
         ref: C
       }),
       c
@@ -1982,7 +1991,7 @@ const Hn = 300, Tn = ({
       k(h(h({
         href: u,
         target: m
-      }, E), V(f)), {
+      }, b), V(f)), {
         ref: C
       }),
       c
@@ -2011,7 +2020,7 @@ const Hn = 300, Tn = ({
     "children",
     "onClick"
   ]);
-  const l = R(), u = H(
+  const l = R(), u = T(
     (c) => {
       c.target === l.current && o(c);
     },
@@ -2153,12 +2162,12 @@ const Hn = 300, Tn = ({
     "image",
     "changeZoom"
   ]);
-  var E;
-  const a = R(null), [l, u] = $(!1), [c, m] = $(!1), b = o.style || {}, { width: p, height: d } = b, f = S(b, ["width", "height"]), C = H(() => {
+  var b;
+  const a = R(null), [l, u] = $(!1), [c, m] = $(!1), v = o.style || {}, { width: p, height: d } = v, f = S(v, ["width", "height"]), C = T(() => {
     const g = a.current;
     if (g) {
-      const B = window.innerWidth / g.naturalWidth, z = window.innerHeight / g.naturalHeight, T = Math.min(B, z);
-      return z >= 1 && B >= 1 ? 1 : T;
+      const H = window.innerWidth / g.naturalWidth, B = window.innerHeight / g.naturalHeight, D = Math.min(H, B);
+      return B >= 1 && H >= 1 ? 1 : D;
     }
     return 1;
   }, [l, t.src]), x = se(() => {
@@ -2166,14 +2175,14 @@ const Hn = 300, Tn = ({
     if (g && l) {
       if (!c) {
         m(!0);
-        const B = C();
-        n(B);
+        const H = C();
+        n(H);
       }
       return g.naturalWidth >= g.naturalHeight ? [`${e * g.naturalWidth}px`, "auto"] : ["auto", `${e * g.naturalHeight}px`];
     }
     return null;
   }, [e, a, l, t.src]);
-  return v(() => (u(!1), function() {
+  return E(() => (u(!1), function() {
     m(!1);
   }), [t.src]), /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(dr, { loading: !l }), /* @__PURE__ */ r.createElement(
     fr,
@@ -2185,7 +2194,7 @@ const Hn = 300, Tn = ({
       imageSize: x,
       draggable: "false"
     }, o), {
-      alt: ((E = o.alt) == null ? void 0 : E.toString()) || "",
+      alt: ((b = o.alt) == null ? void 0 : b.toString()) || "",
       style: f,
       src: t.src,
       loaded: l
@@ -2211,7 +2220,7 @@ const Hn = 300, Tn = ({
     display: inline-block;
     vertical-align: middle;
 `, pr = mr, gr = () => {
-  const e = R(), [t, n] = $(!0), o = H(() => (t || n(!0), e.current && clearTimeout(e.current), e.current = setTimeout(() => {
+  const e = R(), [t, n] = $(!0), o = T(() => (t || n(!0), e.current && clearTimeout(e.current), e.current = setTimeout(() => {
     n(!1);
   }, 3e3), () => {
     e.current && clearTimeout(e.current);
@@ -2219,37 +2228,37 @@ const Hn = 300, Tn = ({
   return [t, o];
 }, Cr = ({ attrs: e, htmlBody: t }) => {
   var Se;
-  const n = j("Escape"), o = j("ArrowLeft"), s = j("ArrowRight"), [i, a] = $(1), [l, u] = $({ top: 0, left: 0, x: 0, y: 0 }), [c, m] = $(!1), [p, d] = gr(), [f, C] = $(null), [x, b] = $(null), E = R(null), g = R(null), B = R(null), z = R(null);
-  v(() => {
+  const n = Y("Escape"), o = Y("ArrowLeft"), s = Y("ArrowRight"), [i, a] = $(1), [l, u] = $({ top: 0, left: 0, x: 0, y: 0 }), [c, m] = $(!1), [p, d] = gr(), [f, C] = $(null), [x, v] = $(null), b = R(null), g = R(null), H = R(null), B = R(null);
+  E(() => {
     n && C(null);
-  }, [n]), v(() => {
+  }, [n]), E(() => {
     a(1);
-  }, [f]), v(() => {
+  }, [f]), E(() => {
     var P, te;
     if (f === null || g.current === null)
       return;
-    const w = g.current.firstElementChild, D = (P = B.current) == null ? void 0 : P.querySelector(".nav-left"), Z = (te = B.current) == null ? void 0 : te.querySelector(".nav-right");
+    const w = g.current.firstElementChild, z = (P = H.current) == null ? void 0 : P.querySelector(".nav-left"), Z = (te = H.current) == null ? void 0 : te.querySelector(".nav-right");
     if (x === "Right")
-      ee && Z ? Z.focus() : J && D && D.focus();
+      ee && Z ? Z.focus() : J && z && z.focus();
     else if (x === "Left")
-      J && D ? D.focus() : ee && Z && Z.focus();
+      J && z ? z.focus() : ee && Z && Z.focus();
     else {
       if (!w)
         return;
       w.focus();
     }
-  }, [f, g, B, x]), v(() => {
+  }, [f, g, H, x]), E(() => {
     if (o) {
       if (J)
         return Le();
     } else if (s && ee)
       return Me();
   }, [o, s]);
-  const T = se(() => {
+  const D = se(() => {
     const w = document.createElement("div");
     w.innerHTML = t || "";
-    const D = w.getElementsByTagName("img");
-    return Array.from(D).reduce((P, te) => {
+    const z = w.getElementsByTagName("img");
+    return Array.from(z).reduce((P, te) => {
       const Re = te.getAttribute("src");
       if (Re) {
         const ot = {
@@ -2259,55 +2268,55 @@ const Hn = 300, Tn = ({
       }
       return P;
     }, []);
-  }, [t]), Y = H(() => {
+  }, [t]), j = T(() => {
     const { src: w } = e;
     if (w) {
-      const D = T.findIndex((Z, P) => Z.src === w);
-      C(D);
+      const z = D.findIndex((Z, P) => Z.src === w);
+      C(z);
     }
-  }, [T, e]), Ge = H((w) => {
+  }, [D, e]), Ge = T((w) => {
     C(null);
-  }, []), ke = H(
+  }, []), ke = T(
     (w) => {
       a(w ? i + i * 0.25 : i - i * 0.25);
     },
     [a, i]
-  ), Je = H(() => {
+  ), Je = T(() => {
     if (f !== null) {
-      const { src: w } = T[f];
+      const { src: w } = D[f];
       w && window.open(w, "_self");
     }
-  }, [T, f]), et = H(
+  }, [D, f]), et = T(
     (w) => {
-      const D = z.current;
-      D && (u({ top: D.scrollTop, left: D.scrollLeft, x: w.clientX, y: w.clientY }), m(!0));
+      const z = B.current;
+      z && (u({ top: z.scrollTop, left: z.scrollLeft, x: w.clientX, y: w.clientY }), m(!0));
     },
-    [z]
-  ), tt = H(
+    [B]
+  ), tt = T(
     (w) => {
-      const D = z.current;
-      if (D && c) {
+      const z = B.current;
+      if (z && c) {
         const Z = w.clientX - l.x, P = w.clientY - l.y;
-        D.scrollTop = l.top - P, D.scrollLeft = l.left - Z;
+        z.scrollTop = l.top - P, z.scrollLeft = l.left - Z;
       }
     },
     [c, l]
   ), nt = (w) => {
     w.preventDefault(), m(!1);
   }, rt = se(() => {
-    if (z.current) {
-      const w = z.current.getElementsByTagName("img");
+    if (B.current) {
+      const w = B.current.getElementsByTagName("img");
       if (w && w.length) {
-        const D = w[0];
-        return D.width > window.innerWidth || D.height > window.innerHeight;
+        const z = w[0];
+        return z.width > window.innerWidth || z.height > window.innerHeight;
       }
     }
     return !1;
-  }, [z, i]), Le = () => {
-    f !== null && (b("Left"), C(f - 1));
+  }, [B, i]), Le = () => {
+    f !== null && (v("Left"), C(f - 1));
   }, Me = () => {
-    f !== null && (b("Right"), C(f + 1));
-  }, J = f !== null && f > 0 && T.length > 1, ee = f !== null && T.length - 1 > f;
+    f !== null && (v("Right"), C(f + 1));
+  }, J = f !== null && f > 0 && D.length > 1, ee = f !== null && D.length - 1 > f;
   return /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(_e, { visible: f !== null, onClick: Ge }, /* @__PURE__ */ r.createElement(
     kr,
     {
@@ -2341,7 +2350,7 @@ const Hn = 300, Tn = ({
       {
         scrolling: c.toString(),
         isDraggable: rt.toString(),
-        ref: z,
+        ref: B,
         onMouseMove: tt,
         onMouseDown: et,
         onMouseUp: nt
@@ -2354,14 +2363,14 @@ const Hn = 300, Tn = ({
           },
           zoomState: i
         }, e), {
-          image: T[f]
+          image: D[f]
         })
       )
     ),
     /* @__PURE__ */ r.createElement(
       wr,
       {
-        ref: B,
+        ref: H,
         show: p.toString(),
         buttons: [
           {
@@ -2407,10 +2416,10 @@ const Hn = 300, Tn = ({
   )), /* @__PURE__ */ r.createElement(
     yr,
     {
-      ref: E,
-      onClick: Y,
+      ref: b,
+      onClick: j,
       onKeyDown: (w) => {
-        w.key === "Enter" && (w.preventDefault(), Y());
+        w.key === "Enter" && (w.preventDefault(), j());
       },
       tabIndex: 0
     },
@@ -2605,15 +2614,15 @@ const Hn = 300, Tn = ({
   (l, a) => {
     var u = l, { className: e, children: t, trigger: n, onOverlayClick: o = () => {
     }, close: s = !1 } = u, i = S(u, ["className", "children", "trigger", "onOverlayClick", "close"]);
-    const [c, m] = Ye(), [p, d] = Ke(!0), f = R(), C = R(q()), x = j("Escape");
-    v(() => {
+    const [c, m] = je(), [p, d] = Ke(!0), f = R(), C = R(q()), x = Y("Escape");
+    E(() => {
       (x || s) && m(!1);
-    }, [x, s]), v(() => {
+    }, [x, s]), E(() => {
       c && f.current && f.current.focus();
     }, [c, f.current]), ce("router:changed", () => {
       m(!1);
     });
-    const b = H(
+    const v = T(
       (g) => {
         m(!1), o(g);
       },
@@ -2624,10 +2633,10 @@ const Hn = 300, Tn = ({
         m(!1);
       }
     }));
-    const E = H(() => ve(C.current, () => {
+    const b = T(() => ve(C.current, () => {
       m(!1);
     }), [C.current]);
-    return /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(_e, { visible: c, onClick: b }, /* @__PURE__ */ r.createElement(
+    return /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(_e, { visible: c, onClick: v }, /* @__PURE__ */ r.createElement(
       Br,
       k(h({
         className: M(
@@ -2652,7 +2661,7 @@ const Hn = 300, Tn = ({
       t
     )), r.cloneElement(n, {
       onClick: (g) => {
-        m(), E();
+        m(), b();
       }
     }));
   }
@@ -2672,7 +2681,7 @@ const Hn = 300, Tn = ({
   var t;
   return (t = e.theme.sizes) == null ? void 0 : t.medium;
 }};
-    ${(e) => je(e)}
+    ${(e) => Ye(e)}
     ${(e) => e.css && e.css}
   outline: none;
 `, zr = ({
@@ -2687,10 +2696,10 @@ const Hn = 300, Tn = ({
   cancelLabel: a = "",
   confirmLabel: l = ""
 }) => {
-  const u = R(), c = H(() => {
+  const u = R(), c = T(() => {
     var p;
     s(), (p = u == null ? void 0 : u.current) == null || p.close();
-  }, [s]), m = H(() => {
+  }, [s]), m = T(() => {
     var p;
     i(), (p = u == null ? void 0 : u.current) == null || p.close();
   }, [i]);
@@ -2868,27 +2877,27 @@ const Oo = Ar, Kr = N(
     return /* @__PURE__ */ r.createElement(we, k(h({ className: M(e, "humany-text-link") }, s), { ref: i }), o, /* @__PURE__ */ r.createElement(Ee, null, n), t ? /* @__PURE__ */ r.createElement(Ue, { html: t, className: "humany-description" }) : null);
   }
 );
-var Yr = /* @__PURE__ */ ((e) => (e.HH_MM = "hh:mm", e.YYYY_MM_DD = "yyyy-mm-dd", e.YYYY_MM_DD_HH_MM = "yyyy-mm-dd hh:mm", e))(Yr || {});
-const jr = ({ className: e = "", format: t = "hh:mm", timestamp: n }) => /* @__PURE__ */ r.createElement("span", { className: M(e, "humany-timestamp") }, Xr(n, t)), Po = jr, We = (e) => `0${e}`.slice(-2);
+var jr = /* @__PURE__ */ ((e) => (e.HH_MM = "hh:mm", e.YYYY_MM_DD = "yyyy-mm-dd", e.YYYY_MM_DD_HH_MM = "yyyy-mm-dd hh:mm", e))(jr || {});
+const Yr = ({ className: e = "", format: t = "hh:mm", timestamp: n }) => /* @__PURE__ */ r.createElement("span", { className: M(e, "humany-timestamp") }, Xr(n, t)), Po = Yr, We = (e) => `0${e}`.slice(-2);
 function Xr(e, t) {
   const n = new Date(e), o = n.toTimeString().split(" ")[0].split(":"), s = o.length > 1 ? `${o[0]}:${o[1]}` : o[0], i = n.getFullYear(), a = n.getMonth() + 1, l = n.getDate(), u = `${i}-${We(a)}-${We(l)}`;
   return t === "yyyy-mm-dd" ? u : t === "hh:mm" ? s : `${u} ${s}`;
 }
 const Ur = (i) => {
   var a = i, { className: e, children: t, content: n, sticky: o = !1 } = a, s = S(a, ["className", "children", "content", "sticky"]);
-  const [l, u] = $(!1), c = R(q()), m = R(), [{ x: p, y: d }, f] = Xe(l, c.current, m.current), C = (b) => {
-    const { target: E } = b;
-    !m.current || !E || m.current !== E && !m.current.contains(E) && u(!1);
+  const [l, u] = $(!1), c = R(q()), m = R(), [{ x: p, y: d }, f] = Xe(l, c.current, m.current), C = (v) => {
+    const { target: b } = v;
+    !m.current || !b || m.current !== b && !m.current.contains(b) && u(!1);
   };
-  v(() => {
+  E(() => {
     if (!!o)
       return window.addEventListener("click", C), () => {
         window.removeEventListener("click", C);
       };
   }, [l, o]);
-  const x = H(
-    (b, E) => {
-      f(b, m.current), u(E);
+  const x = T(
+    (v, b) => {
+      f(v, m.current), u(b);
     },
     [f, u]
   );
@@ -2897,10 +2906,10 @@ const Ur = (i) => {
     {
       ref: m,
       className: "humany-tooltip-trigger",
-      onMouseEnter: o ? void 0 : (b) => x(b, !0),
-      onMouseLeave: o ? void 0 : (b) => x(b, !1),
-      onTouchEnd: o ? (b) => x(b, !l) : void 0,
-      onClick: o ? (b) => x(b, !l) : void 0
+      onMouseEnter: o ? void 0 : (v) => x(v, !0),
+      onMouseLeave: o ? void 0 : (v) => x(v, !1),
+      onTouchEnd: o ? (v) => x(v, !l) : void 0,
+      onClick: o ? (v) => x(v, !l) : void 0
     },
     t,
     l && /* @__PURE__ */ r.createElement(Q, null, /* @__PURE__ */ r.createElement(
@@ -3016,7 +3025,7 @@ const Ur = (i) => {
       const { implementation: f } = c.get("$widget");
       return f.widgets.get(o);
     };
-    v(() => {
+    E(() => {
       const f = m();
       return f == null || f.activate(s).then(() => f.invoke("attach")), () => {
         f == null || f.deactivate();
@@ -3025,11 +3034,11 @@ const Ur = (i) => {
     const p = (f) => {
       const C = m(), x = f.currentTarget;
       if (C) {
-        const b = () => {
+        const v = () => {
           C.invoke("renderState").then(
-            (E) => E === oe.open ? C.invoke("close") : C.invoke("open")
+            (b) => b === oe.open ? C.invoke("close") : C.invoke("open")
           ).then(() => {
-            C.events.subscribeOnce("widget:area-rendered", (E, g) => {
+            C.events.subscribeOnce("widget:area-rendered", (b, g) => {
               c.get(
                 "widgetDOMElement"
               ) && C.events.dispatch("widget:modal-opened", {
@@ -3039,7 +3048,7 @@ const Ur = (i) => {
             });
           });
         };
-        C.state === lt.Deactivated ? C.activate(s).then(() => C.invoke("attach")).then(b) : b();
+        C.state === lt.Deactivated ? C.activate(s).then(() => C.invoke("attach")).then(v) : v();
       }
     }, d = (f) => {
       f.key === "Enter" && (f.preventDefault(), p(f));
@@ -3089,7 +3098,7 @@ const Ur = (i) => {
   t,
   mt(() => n)
 ), gt(e, t, o || (() => {
-}), t, s))), Yo = eo;
+}), t, s))), jo = eo;
 export {
   Vt as AnchorLink,
   ae as Button,
@@ -3100,14 +3109,14 @@ export {
   Zo as Confirm,
   It as ContainerContext,
   At as ConversationContext,
-  Yr as DateFormats,
+  jr as DateFormats,
   Bo as Drawer,
   Rn as DrawerAnimationType,
   zo as Dropdown,
   Fn as Empty,
   No as Grid,
   Ue as Html,
-  jn as Icon,
+  Yn as Icon,
   Vo as Input,
   _n as ItemList,
   Wo as ItemTree,
@@ -3135,10 +3144,10 @@ export {
   F as borderTabStyle,
   Ne as browser,
   vn as buttonCss,
-  je as contentBox,
+  Ye as contentBox,
   V as convertToStringAttributes,
   ho as createEmptyComponent,
-  Yo as createReactComponent,
+  jo as createReactComponent,
   zt as defaultRenderInstructions,
   St as embeddedLinkMapper,
   Ht as filterCssProps,
@@ -3169,7 +3178,7 @@ export {
   on as useEvents,
   O as useIsMounted,
   xo as useIsTabbing,
-  j as useKeyPress,
+  Y as useKeyPress,
   wo as useLayout,
   Fe as usePrevious,
   $o as useProperties,
@@ -3178,7 +3187,7 @@ export {
   Ae as useRouter,
   Ke as useScroll,
   Mo as useSettings,
-  Ye as useToggle,
+  je as useToggle,
   So as useTransitionEnd,
   ve as useUniqueMenu,
   ce as useWidgetEvent