@telia-ace/widget-ui 1.0.23-next.7 → 1.0.23-next.8

package/dist/index.js

@@ -20,11 +20,12 @@ var S = (e, t) => {
   return n;
 };
 var re = (e, t, n) => (me(e, typeof t != "symbol" ? t + "" : t, n), n);
-import C, { css as L, keyframes as We } from "styled-components";
+import { css as L, keyframes as We } from "@emotion/react";
 import { kebabCase as mt, appendClassNames as M, uuid as Q, removeNullAndUndefinedValues as De, Logger as de } from "@telia-ace/widget-utilities";
-import r, { forwardRef as N, createContext as _, useContext as Y, useState as k, useEffect as w, useRef as R, useCallback as H, useImperativeHandle as Ce, useMemo as ie, Component as dt, lazy as ft } from "react";
+import r, { forwardRef as N, createContext as _, useContext as Y, useState as k, useEffect as v, useRef as R, useCallback as H, useImperativeHandle as Ce, useMemo as ie, Component as dt, lazy as ft } from "react";
+import y from "@emotion/styled";
 import { CSSTransition as Ie, Transition as ht } from "react-transition-group";
-import { Container as pt, WidgetState as gt } from "@webprovisions/platform";
+import { Container as gt, WidgetState as pt } from "@webprovisions/platform";
 import { ComponentPlatform as Ct, asDescriptor as yt, createEventSubscriber as bt, ComponentQuery as vt, WidgetRenderState as oe, extendComponent as wt } from "@telia-ace/widget-core";
 import { createPortal as Et } from "react-dom";
 import Be from "htmr";
@@ -101,7 +102,7 @@ const kt = (e) => e === "entering" || e === "entered", $t = (e) => e === "exitin
   },
   get: (e) => K[e]
 };
-var pe = /* @__PURE__ */ ((e) => (e.Opera = "opera", e.Chrome = "chrome", e.Firefox = "firefox", e.Safari = "safari", e.Edge = "edge", e.EdgeChromium = "edge-chromium", e.Blink = "blink", e.IE = "internet-explorer", e))(pe || {});
+var ge = /* @__PURE__ */ ((e) => (e.Opera = "opera", e.Chrome = "chrome", e.Firefox = "firefox", e.Safari = "safari", e.Edge = "edge", e.EdgeChromium = "edge-chromium", e.Blink = "blink", e.IE = "internet-explorer", e))(ge || {});
 const Ne = () => {
   const {
     opr: e,
@@ -121,10 +122,10 @@ const Ne = () => {
   const m = ((f) => f.toString() === "[object SafariRemoteNotification]")(!i || typeof i != "undefined" && i.pushNotification);
   if (/constructor/i.test(o) || m)
     return "safari";
-  const p = !!s;
-  if (p)
+  const g = !!s;
+  if (g)
     return "internet-explorer";
-  if (!p && !!a)
+  if (!g && !!a)
     return "edge";
   const d = !!l && (!!l.webstore || !!l.runtime);
   if (d)
@@ -141,7 +142,7 @@ const Ne = () => {
   } else
     t[n] = o;
   return t;
-}, {}), p1 = (e, t) => e.get("seoConfiguration") ? /* @__PURE__ */ r.createElement(an, h({}, t)) : null, St = (e) => new RegExp("^#", "i").test(e), Rt = (e) => (o) => {
+}, {}), Cr = (e, t) => e.get("seoConfiguration") ? /* @__PURE__ */ r.createElement(an, h({}, t)) : null, St = (e) => new RegExp("^#", "i").test(e), Rt = (e) => (o) => {
   var i = o, { children: t } = i, n = S(i, ["children"]);
   const {
     implementation: s,
@@ -152,12 +153,12 @@ const Ne = () => {
       smooth: !0,
       to: l
     }, t);
-  const u = s.bindings.map((p) => p.replace(/\./g, "\\.")).join("|"), m = new RegExp(`^((http[s]?:)?//)?(${u})/([^\\s]+)`).exec(l);
+  const u = s.bindings.map((g) => g.replace(/\./g, "\\.")).join("|"), m = new RegExp(`^((http[s]?:)?//)?(${u})/([^\\s]+)`).exec(l);
   if (m && m.length >= 4) {
-    const p = m[4];
-    if (s.widgets.get(p) && !p.startsWith("blob?") && !p.startsWith(a))
-      return /* @__PURE__ */ r.createElement(n1, {
-        widgetName: p
+    const g = m[4];
+    if (s.widgets.get(g) && !g.startsWith("blob?") && !g.startsWith(a))
+      return /* @__PURE__ */ r.createElement(rr, {
+        widgetName: g
       }, t);
   }
   return /* @__PURE__ */ r.createElement("a", h({}, n), t);
@@ -166,49 +167,49 @@ const Ne = () => {
   return Object.keys(e).forEach((n) => {
     n.indexOf("css-") > -1 && (t[n] = e[n]);
   }), t;
-}, Ht = L`
-    ${(e) => {
+}, Ht = (e) => {
   let t = "";
   return Object.keys(Oe(e)).forEach((n) => {
     n.indexOf("css-") > -1 && (t += `${n.replace("css-", "")}:${e[n]};`);
-  }), t;
-}}
-`, zt = (e, t) => {
+  }), L`
+        ${t}
+    `;
+}, zt = (e, t) => {
   let n = "";
   const o = () => {
     n = "";
-  }, i = (p) => {
+  }, i = (g) => {
     const d = document.getElementById(n);
-    return d !== null ? (p(d), o(), !0) : !1;
-  }, s = (p) => (p.preventDefault(), o(), e.onClick && e.onClick(p), typeof e.to == "string" && (n = e.to.split("#").slice(1).join("#")), n !== "" && i(
+    return d !== null ? (g(d), o(), !0) : !1;
+  }, s = (g) => (g.preventDefault(), o(), e.onClick && e.onClick(g), typeof e.to == "string" && (n = e.to.split("#").slice(1).join("#")), n !== "" && i(
     e.scroll || ((d) => e.smooth ? d.scrollIntoView({ behavior: "smooth" }) : d.scrollIntoView())
   ), !1), m = e, { scroll: a, smooth: l, to: u } = m, c = S(m, ["scroll", "smooth", "to"]);
   return t === "a" && (c.href = "javascript:;"), /* @__PURE__ */ r.createElement(t, $(h({}, c), {
     onClick: s
   }), e.children);
-}, se = (e, t) => {
-  let n = e, o = "";
-  if (["h1", "h2", "h3", "h4", "h5", "h6"].includes(e))
-    n = e;
+}, se = (e) => (t, n) => {
+  let o = t, i = "";
+  if (["h1", "h2", "h3", "h4", "h5", "h6"].includes(t))
+    o = t;
   else {
-    const s = e.match(/h1|h2|h3|h4|h5|h6/);
-    if (s != null && s[0]) {
-      n = s[0];
-      const [a] = e.split(n);
-      o = a;
+    const l = t.match(/h1|h2|h3|h4|h5|h6/);
+    if (l != null && l[0]) {
+      o = l[0];
+      const [u] = t.split(o);
+      i = u;
     }
   }
-  const i = (s, a, l) => l[s] ? `${a}${l[s]}` : `${a}${s}`;
+  const a = ((l, u, c) => c[l] ? `${u}${c[l]}` : `${u}${l}`)(o, i, e.theme.typographyVariantMapping || {});
   return L`
-        ${(s) => i(n, o, s.theme.typographyVariantMapping || {})} {
-            ${t}
+        ${a} {
+            ${n}
         }
     `;
 };
 function Dt(e, t) {
   return t ? Be(e, t) : Be(e);
 }
-const Bt = (e) => (t) => /* @__PURE__ */ r.createElement(Rn, {
+const Bt = (e) => (t) => /* @__PURE__ */ r.createElement(Hn, {
   attrs: t,
   htmlBody: e
 }), Tt = (e, t) => ({
@@ -224,7 +225,7 @@ const Bt = (e) => (t) => /* @__PURE__ */ r.createElement(Rn, {
   }, V(n)), {
     ref: o
   }), t);
-}), Vt = C.button`
+}), Vt = y.button`
     -webkit-appearance: button;
     text-transform: none;
     overflow: visible;
@@ -237,7 +238,7 @@ const Bt = (e) => (t) => /* @__PURE__ */ r.createElement(Rn, {
     line-height: normal;
     margin: 0;
     padding: 0;
-`, g1 = (i) => {
+`, yr = (i) => {
   var s = i, {
     onChange: e = () => {
     },
@@ -256,12 +257,12 @@ const Bt = (e) => (t) => /* @__PURE__ */ r.createElement(Rn, {
     },
     onChange: (a) => e(a.target.value, a.currentTarget.checked)
   }, V(o)));
-}, Zt = _(new pt()), Wt = _(1), Fe = _({
+}, Zt = _(new gt()), Wt = _(1), Fe = _({
   id: "",
   type: "",
   name: "",
   branch: ""
-}), It = _({}), Ot = _(null), Ft = _(null), ye = () => Y(Fe), Z = () => Y(Zt), C1 = (e, t) => {
+}), It = _({}), Ot = _(null), Ft = _(null), ye = () => Y(Fe), Z = () => Y(Zt), br = (e, t) => {
   const n = ye().id, o = Z();
   return (i, s) => {
     (t || o).getAsync("actionResolver").then((a) => {
@@ -270,7 +271,7 @@ const Bt = (e) => (t) => /* @__PURE__ */ r.createElement(Rn, {
   };
 }, be = (e) => {
   const t = Y(Fe), n = U(), [o, i] = k();
-  return w(() => {
+  return v(() => {
     if ((e || t.id) && n) {
       const s = n.nodes.get(e || t.id);
       i(s);
@@ -278,17 +279,17 @@ const Bt = (e) => (t) => /* @__PURE__ */ r.createElement(Rn, {
   }, [e, t.id, n]), o;
 }, O = () => {
   const e = R(!1);
-  return w(() => (e.current = !0, () => {
+  return v(() => (e.current = !0, () => {
     e.current = !1;
   }), []), e;
 }, U = (e) => {
   const t = Z(), [n, o] = k(null), i = O();
-  return w(() => {
+  return v(() => {
     Ct.getInstance(e || t).then((s) => {
       i.current && o(s);
     });
   }, [i]), n;
-}, y1 = () => {
+}, vr = () => {
   const e = be(), t = U(), [n, o] = k([]), i = O(), s = H(
     (a) => {
       if (t && i.current) {
@@ -298,9 +299,9 @@ const Bt = (e) => (t) => /* @__PURE__ */ r.createElement(Rn, {
     },
     [i, t, o]
   );
-  return w(() => {
+  return v(() => {
     e && s(e);
-  }, [e, t]), w(() => {
+  }, [e, t]), v(() => {
     if (t) {
       const [a, l] = bt(t.events);
       return a("components:set-layout", (u, c) => {
@@ -314,9 +315,9 @@ const Bt = (e) => (t) => /* @__PURE__ */ r.createElement(Rn, {
       };
     }
   }, [e, t, s]), n;
-}, b1 = () => Y(Wt), v1 = (e, t) => {
+}, wr = () => Y(Wt), Er = (e, t) => {
   const n = ye(), o = Z(), [i, s] = k(void 0), a = O(), l = e || n.type || "";
-  return w(() => {
+  return v(() => {
     if (l) {
       let u;
       return (t || o).getAsync("componentResolver").then((c) => {
@@ -334,9 +335,9 @@ const Bt = (e) => (t) => /* @__PURE__ */ r.createElement(Rn, {
   }, [a, l, t, o]), i;
 }, At = (e) => {
   const t = be(e), n = U(), [o, i] = k({}), s = O();
-  return w(() => {
+  return v(() => {
     t && s.current && i(t.attributes.context);
-  }, [s, t]), w(() => {
+  }, [s, t]), v(() => {
     if (n) {
       const a = n.events.subscribe(
         "components:context-changed",
@@ -349,9 +350,9 @@ const Bt = (e) => (t) => /* @__PURE__ */ r.createElement(Rn, {
       };
     }
   }, [s, n]), o;
-}, w1 = () => Y(Ft), E1 = () => {
+}, xr = () => Y(Ft), kr = () => {
   const e = U(), t = ye(), [n, o] = k([]), [i, s] = k();
-  return w(() => {
+  return v(() => {
     if (e && t) {
       const a = new vt(e).withId(t.id), l = e.actions(a, t.type || Q());
       s(l), n !== null && (n.forEach((u) => {
@@ -369,9 +370,9 @@ const Bt = (e) => (t) => /* @__PURE__ */ r.createElement(Rn, {
 }, I = (e, t, n = window, o = () => !0) => {
   const i = R(() => {
   });
-  w(() => {
+  v(() => {
     i.current = t;
-  }, [t]), w(() => {
+  }, [t]), v(() => {
     if (!(n && o()))
       return;
     const a = (l) => i.current(l);
@@ -382,9 +383,9 @@ const Bt = (e) => (t) => /* @__PURE__ */ r.createElement(Rn, {
 }, Pt = (e) => {
   const t = Z(), { events: n } = (e || t).get("$widget");
   return n;
-}, x1 = () => {
+}, $r = () => {
   const [e, t] = k(!1);
-  return w(() => {
+  return v(() => {
     const n = () => {
       t(!1);
     }, o = (i) => {
@@ -408,11 +409,11 @@ const Bt = (e) => (t) => /* @__PURE__ */ r.createElement(Rn, {
     [o]
   );
   return I("keydown", i, window), I("keyup", s, window), n;
-}, k1 = (e) => {
+}, Lr = (e) => {
   const t = be(e), n = U(), [o, i] = k({}), s = O();
-  return w(() => {
+  return v(() => {
     t && s.current && i(t.attributes.layout);
-  }, [t, s]), w(() => {
+  }, [t, s]), v(() => {
     if (n) {
       const a = n.events.subscribe(
         "components:layout-changed",
@@ -427,12 +428,12 @@ const Bt = (e) => (t) => /* @__PURE__ */ r.createElement(Rn, {
   }, [n, s]), o;
 }, Ae = (e) => {
   const t = R();
-  return w(() => {
+  return v(() => {
     t.current = e;
   }), t.current;
-}, $1 = () => Y(It), L1 = (e) => {
+}, Mr = () => Y(It), Sr = (e) => {
   const [t, n] = k(), o = Z(), i = O();
-  return w(() => {
+  return v(() => {
     let s;
     const a = (e || o).get("$widget");
     if (!a)
@@ -441,12 +442,12 @@ const Bt = (e) => (t) => /* @__PURE__ */ r.createElement(Rn, {
     return u("renderState").then((c) => {
       i.current && n(c);
     }), (e || o).getAsync("actionResolver").then((c) => {
-      s = c.subscribe(l, (m, p) => {
-        switch (p) {
+      s = c.subscribe(l, (m, g) => {
+        switch (g) {
           case "close":
           case "open":
             i.current && n(
-              p === "open" ? oe.open : oe.closed
+              g === "open" ? oe.open : oe.closed
             );
             break;
           case "hide":
@@ -457,20 +458,20 @@ const Bt = (e) => (t) => /* @__PURE__ */ r.createElement(Rn, {
       s && s();
     };
   }, [i]), t;
-}, Pe = () => Y(Ot), M1 = (e) => {
+}, Pe = () => Y(Ot), Rr = (e) => {
   const t = Z(), n = Pe(), [o, i] = k({ name: "", params: {} }), s = O();
-  return w(() => {
+  return v(() => {
     const a = (e || t).get("$widget");
     if (!a)
       return;
     const { events: l } = a;
     return l.subscribe("router:change", (c, { next: { routeData: m } }) => {
       if (s.current) {
-        const { name: p, params: d } = m;
-        De(d), i({ name: p, params: d });
+        const { name: g, params: d } = m;
+        De(d), i({ name: g, params: d });
       }
     });
-  }, [s, e, t]), w(() => {
+  }, [s, e, t]), v(() => {
     if (n && n.history && s.current) {
       const a = n.getRouteData(), { name: l, params: u } = a;
       De(u), i({ name: l, params: u });
@@ -494,17 +495,17 @@ const Bt = (e) => (t) => /* @__PURE__ */ r.createElement(Rn, {
     (c) => {
       if (!c.cancelable)
         return;
-      const m = c.touches[0].clientY, p = a(c.target);
-      if (!p)
+      const m = c.touches[0].clientY, g = a(c.target);
+      if (!g)
         return;
-      const d = p.scrollTop, f = n.current - m < 0 ? "up" : "down", g = d <= 0 && f === "up", E = d >= p.scrollHeight - p.offsetHeight && f === "down";
-      (g || E) && c.preventDefault(), n.current = m;
+      const d = g.scrollTop, f = n.current - m < 0 ? "up" : "down", C = d <= 0 && f === "up", E = d >= g.scrollHeight - g.offsetHeight && f === "down";
+      (C || E) && c.preventDefault(), n.current = m;
     },
     [t, n]
   );
   return I("scroll", i, t.current, () => t.current && e), I("touchstart", s, t.current, () => t.current && e), I("touchmove", u, t.current, () => t.current && e), e ? [Kt, t] : ["", t];
 }, Kt = `
-    overflow-y: ${Ne() === pe.Chrome || Ne() === pe.EdgeChromium ? "overlay" : "auto"};
+    overflow-y: ${Ne() === ge.Chrome || Ne() === ge.EdgeChromium ? "overlay" : "auto"};
     overflow-x: hidden;
     -ms-overflow-style: none; /* IE 10+ */
     scrollbar-width: thin; /* Firefox */
@@ -531,9 +532,9 @@ const Bt = (e) => (t) => /* @__PURE__ */ r.createElement(Rn, {
             background-color: #7F7F7F;
         }
     }
-`, S1 = () => {
+`, Hr = () => {
   const [e, t] = k(null), n = Z(), o = O();
-  return w(() => {
+  return v(() => {
     n.get("settings").then((i) => {
       o.current && t(i);
     });
@@ -543,18 +544,18 @@ const Bt = (e) => (t) => /* @__PURE__ */ r.createElement(Rn, {
     n(typeof i == "boolean" ? i : (s) => !s);
   }, []);
   return [t, o];
-}, R1 = (e) => {
+}, zr = (e) => {
   const t = Z(), n = U(), o = t.get("widgetDOMElement"), [i, s] = k(null), [a, l] = k(null), u = O();
-  w(() => {
+  v(() => {
     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))
+      const m = n.nodes.all.find((d) => d.name === "root-area"), g = n.nodes.all.find((d) => d.type === "view");
+      if (!(g != null && g.attributes.properties.animation) && !(m != null && m.attributes.properties.animation))
         e();
       else {
-        const d = (E = "") => o == null ? void 0 : o.querySelector(`[data-node-id="${E}"]`), f = d(p == null ? void 0 : p.id);
+        const d = (E = "") => o == null ? void 0 : o.querySelector(`[data-node-id="${E}"]`), f = d(g == null ? void 0 : g.id);
         f && s(f);
-        const g = d(m == null ? void 0 : m.id);
-        g && l(g);
+        const C = d(m == null ? void 0 : m.id);
+        C && l(C);
       }
     }
   }, [n, t, u]);
@@ -567,7 +568,7 @@ const Bt = (e) => (t) => /* @__PURE__ */ r.createElement(Rn, {
   I("transitionend", c, i), I("transitionend", c, a);
 }, ce = (e, t, n = [], o) => {
   const i = Pt(o);
-  return w(() => {
+  return v(() => {
     if (i) {
       const s = i.subscribe(e, t);
       return () => {
@@ -585,94 +586,82 @@ const Bt = (e) => (t) => /* @__PURE__ */ r.createElement(Rn, {
   return /* @__PURE__ */ r.createElement("span", h({
     className: M(e, "humany-text")
   }, V(n)), t);
-}, je = L`
+}, je = (e) => L`
     display: flex;
     justify-content: center;
     flex-direction: column;
     background: #ffffff;
-    border-radius: ${(e) => e.theme.borderRadius};
-    border: ${(e) => e.theme.border};
-    box-shadow: ${(e) => e.theme.boxShadow || "none"};
-    ${(e) => e["data-loading"] && "min-height: 150px;"}
-`, Yt = L`
+    border-radius: ${e.theme.borderRadius};
+    border: ${e.theme.border};
+    box-shadow: ${e.theme.boxShadow || "none"};
+    ${e["data-loading"] && "min-height: 150px;"}
+`, Yt = (e) => {
+  var t, n, o;
+  return L`
     cursor: pointer;
     text-align: center;
     border: none;
-    padding: ${(e) => {
-  var t;
-  return (t = e.theme.sizes) == null ? void 0 : t.normal;
-}};
-    border-radius: ${(e) => e.theme.borderRadius};
-    font-family: ${(e) => {
-  var t;
-  return (t = e.theme.fonts) == null ? void 0 : t.type;
-}};
-    font-size: ${(e) => {
-  var t;
-  return (t = e.theme.fonts) == null ? void 0 : t.normal;
-}};
     font-weight: 300;
-`, H1 = ({
-  primaryColor: e,
-  secondaryColor: t,
-  active: n
-}) => L`
-    ${Yt}
-    border: 1px solid ${n ? t : e};
-    background-color: ${n ? e : t};
+    padding: ${(t = e.theme.sizes) == null ? void 0 : t.normal};
+    border-radius: ${e.theme.borderRadius};
+    font-family: ${(n = e.theme.fonts) == null ? void 0 : n.type};
+    font-size: ${(o = e.theme.fonts) == null ? void 0 : o.normal};
+`;
+}, Dr = (e) => {
+  var a;
+  const { primaryColor: t, secondaryColor: n, active: o, theme: i, disabled: s } = e;
+  return L`
+        ${Yt(e)}
+        border: 1px solid ${o ? n : t};
+        background-color: ${o ? t : n};
 
-    color: ${n ? t : e};
-    transition: background-color 200ms ease-out, color 200ms ease-out;
+        color: ${o ? n : t};
+        transition: background-color 200ms ease-out, color 200ms ease-out;
 
-    span,
-    i,
-    p,
-    a {
-        transition: color 200ms ease-out;
-        color: ${n ? t : e};
-        font-size: ${(o) => {
-  var i;
-  return (i = o.theme.fonts) == null ? void 0 : i.normal;
-}};
-    }
+        span,
+        i,
+        p,
+        a {
+            transition: color 200ms ease-out;
+            color: ${o ? n : t};
+            font-size: ${(a = i.fonts) == null ? void 0 : a.normal};
+        }
 
-    ${(o) => !o.disabled && L`
+        ${!s && L`
             &:hover {
-                background-color: ${e};
-                color: ${t};
+                background-color: ${t};
+                color: ${n};
 
                 span,
                 i,
                 p,
                 a {
-                    color: ${t};
+                    color: ${n};
                 }
             }
 
             &:focus-visible {
-                ${P};
+                ${P(e)};
             }
         `}
-`, P = L`
-    outline: ${(e) => {
-  var t;
-  return (t = e.theme.accessibility) == null ? void 0 : t.border;
-}};
-    color: ${(e) => {
-  var t, n;
-  return (n = (t = e.theme.accessibility) == null ? void 0 : t.colors) == null ? void 0 : n.inactiveText;
-}};
+    `;
+}, P = (e) => {
+  var t, n, o;
+  return L`
+    outline: ${(t = e.theme.accessibility) == null ? void 0 : t.border};
+    color: ${(o = (n = e.theme.accessibility) == null ? void 0 : n.colors) == null ? void 0 : o.inactiveText};
     border-color: transparent;
-`, jt = L`
-    ${P}
+`;
+}, jt = (e) => L`
+    ${P(e)}
     text-decoration: underline;
-`, z1 = L`
-    ${P}
-    outline-offset: ${(e) => {
+`, Br = (e) => {
   var t;
-  return (t = e.theme.sizes) == null ? void 0 : t.small;
-}};
-`, Ee = C(ae)`
+  return L`
+    ${P(e)}
+    outline-offset: ${(t = e.theme.sizes) == null ? void 0 : t.small};
+`;
+}, Ee = y(ae)`
     position: absolute;
     top: ${(e) => {
   var t;
@@ -700,7 +689,7 @@ const Bt = (e) => (t) => /* @__PURE__ */ r.createElement(Rn, {
         height: 15px;
         box-sizing: content-box;
     }
-`, Ve = C(we)`
+`, Ve = y(we)`
     font-size: ${(e) => {
   var t;
   return (t = e.theme.fonts) == null ? void 0 : t.normal;
@@ -711,15 +700,14 @@ const Bt = (e) => (t) => /* @__PURE__ */ r.createElement(Rn, {
   var t;
   return (t = e.theme.colors) == null ? void 0 : t.text;
 }};
-`, Xt = L`
+`, Xt = (e) => {
+  var t;
+  return L`
     padding: 0;
     margin: 0;
     list-style: none;
     > li {
-        margin: 0 0 ${(e) => {
-  var t;
-  return (t = e.theme.sizes) == null ? void 0 : t.normal;
-}};
+        margin: 0 0 ${(t = e.theme.sizes) == null ? void 0 : t.normal};
         white-space: nowrap;
         text-overflow: ellipsis;
         min-width: 0;
@@ -733,43 +721,32 @@ const Bt = (e) => (t) => /* @__PURE__ */ r.createElement(Rn, {
     > li:last-child {
         margin: 0;
     }
-`, D1 = L`
+`;
+}, Tr = (e) => {
+  var t, n, o, i;
+  return L`
     > div {
-        ${se(
-  "> h1",
-  L`
-                margin: 0 0 ${(e) => {
-    var t;
-    return (t = e.theme.sizes) == null ? void 0 : t.normal;
-  }};
-                font-size: ${(e) => {
-    var t;
-    return (t = e.theme.fonts) == null ? void 0 : t.medium;
-  }};
+        ${se(e)(
+    "> h1",
+    L`
+                margin: 0 0 ${(t = e.theme.sizes) == null ? void 0 : t.normal};
+                font-size: ${(n = e.theme.fonts) == null ? void 0 : n.medium};
                 font-weight: normal;
                 line-height: 1.8em;
-                color: ${(e) => {
-    var t;
-    return (t = e.theme.colors) == null ? void 0 : t.text;
-  }};
+                color: ${(o = e.theme.colors) == null ? void 0 : o.text};
             `
-)}
+  )}
     }
     > ul {
-        ${Xt}
+        ${Xt(e)}
     }
-
-    ${se(
-  "h1",
-  L`
+    ${se(e)(
+    "h1",
+    L`
             display: flex;
             align-items: center;
-
             i {
-                margin: 7px ${(e) => {
-    var t;
-    return (t = e.theme.sizes) == null ? void 0 : t.normal;
-  }} 0 0;
+                margin: 7px ${(i = e.theme.sizes) == null ? void 0 : i.normal} 0 0;
                 width: 24px;
                 display: inline-block;
                 vertical-align: text-bottom;
@@ -779,18 +756,15 @@ const Bt = (e) => (t) => /* @__PURE__ */ r.createElement(Rn, {
                 text-align: center;
             }
         `
-)}
-`, B1 = L`
-    font-size: ${(e) => {
-  var t;
-  return (t = e.theme.fonts) == null ? void 0 : t.normal;
-}};
+  )}
+`;
+}, Nr = (e) => {
+  var t, n, o, i, s, a;
+  return L`
+    font-size: ${(t = e.theme.fonts) == null ? void 0 : t.normal};
     font-weight: 300;
     line-height: 1.5em;
-    color: ${(e) => {
-  var t;
-  return (t = e.theme.colors) == null ? void 0 : t.text;
-}};
+    color: ${(n = e.theme.colors) == null ? void 0 : n.text};
 
     h1,
     h2,
@@ -811,12 +785,9 @@ const Bt = (e) => (t) => /* @__PURE__ */ r.createElement(Rn, {
     }
 
     a {
-        color: ${(e) => {
-  var t;
-  return (t = e.theme.colors) == null ? void 0 : t.link;
-}};
+        color: ${(o = e.theme.colors) == null ? void 0 : o.link};
         &:focus-visible {
-            ${jt};
+            ${jt(e)};
         }
     }
 
@@ -827,30 +798,22 @@ const Bt = (e) => (t) => /* @__PURE__ */ r.createElement(Rn, {
 
     p {
         word-break: break-word;
-        margin: ${(e) => {
-  var t;
-  return (t = e.theme.sizes) == null ? void 0 : t.normal;
-}} 0;
+        margin: ${(i = e.theme.sizes) == null ? void 0 : i.normal} 0;
     }
 
     p:first-child {
-        margin: 0 0 ${(e) => {
-  var t;
-  return (t = e.theme.sizes) == null ? void 0 : t.normal;
-}};
+        margin: 0 0 ${(s = e.theme.sizes) == null ? void 0 : s.normal};
     }
 
     p:last-child {
-        margin: ${(e) => {
-  var t;
-  return (t = e.theme.sizes) == null ? void 0 : t.normal;
-}} 0 0;
+        margin: ${(a = e.theme.sizes) == null ? void 0 : a.normal} 0 0;
     }
 
     p:only-child {
         margin: 0;
     }
-`, G = ({
+`;
+}, G = ({
   elementId: e = "humany-portal-elements",
   parent: t = document.body,
   children: n
@@ -859,7 +822,7 @@ const Bt = (e) => (t) => /* @__PURE__ */ r.createElement(Rn, {
     const i = document.getElementById(e) || document.createElement("div");
     return i.id = e, i;
   });
-  return w(() => (t.appendChild(o), () => {
+  return v(() => (t.appendChild(o), () => {
     o.childElementCount <= 1 && t.removeChild(o);
   }), [o]), Et(n, o);
 }, J = (l) => {
@@ -881,7 +844,7 @@ const Bt = (e) => (t) => /* @__PURE__ */ r.createElement(Rn, {
     "elementStyle",
     "className"
   ]);
-  const { type: c, content: m } = o, p = {
+  const { type: c, content: m } = o, g = {
     "aria-label": e,
     role: "presentation"
   };
@@ -898,7 +861,7 @@ const Bt = (e) => (t) => /* @__PURE__ */ r.createElement(Rn, {
         className: M(s, "humany-icon", "humany-custom-icon"),
         title: e,
         style: h(h({}, d), i)
-      }, p), a));
+      }, g), a));
     }
     case "Svg": {
       const d = $(h({
@@ -1377,9 +1340,9 @@ const Bt = (e) => (t) => /* @__PURE__ */ r.createElement(Rn, {
       return e ? /* @__PURE__ */ r.createElement("i", h(h({
         className: M(s, "humany-letter-symbol"),
         title: e
-      }, p), a), e.substring(0, 2)) : null;
+      }, g), a), e.substring(0, 2)) : null;
   }
-}, _t = C.svg`
+}, _t = y.svg`
     transform: rotate(180deg);
 `, Ut = {
   h1: "h1",
@@ -1396,9 +1359,9 @@ const Bt = (e) => (t) => /* @__PURE__ */ r.createElement(Rn, {
     className: n,
     as: a
   }, o);
-}, qt = C.span``;
+}, qt = y.span``;
 var Qt = /* @__PURE__ */ ((e) => (e.SlideInLeft = "slide-in-left", e.SlideInRight = "slide-in-right", e.SlideInBottom = "slide-in-bottom", e.SlideInTop = "slide-in-top", e))(Qt || {});
-const Gt = 300, T1 = ({
+const Gt = 300, Vr = ({
   className: e,
   children: t,
   header: n,
@@ -1410,27 +1373,27 @@ const Gt = 300, T1 = ({
     type: "slide-in-bottom"
   }
 }) => {
-  const { duration: u = Gt } = l, c = R(), m = R(), [p, d] = Ke(!0), [f, g] = Ye(), E = Ae(f), v = R(Q());
-  w(() => {
+  const { duration: u = Gt } = l, c = R(), m = R(), [g, d] = Ke(!0), [f, C] = Ye(), E = Ae(f), b = R(Q());
+  v(() => {
     o && o(f);
   }, [f]);
-  const b = X("Escape");
-  w(() => {
-    b && g(!1);
-  }, [b]), I(
+  const w = X("Escape");
+  v(() => {
+    w && C(!1);
+  }, [w]), I(
     "click",
     (T) => {
       const { target: z } = T;
-      !m.current || !d.current || !z || m.current !== z && d.current !== z && !d.current.contains(z) && !m.current.contains(z) && g(!1);
+      !m.current || !d.current || !z || m.current !== z && d.current !== z && !d.current.contains(z) && !m.current.contains(z) && C(!1);
     },
     window
   );
-  const y = ve(v.current, () => {
-    g(!1);
+  const p = ve(b.current, () => {
+    C(!1);
   });
   ce("router:changed", () => {
-    g(!1);
-  }), w(() => {
+    C(!1);
+  }), v(() => {
     f && c.current ? c.current.focus() : !f && m.current && E && m.current.focus();
   }, [f, c.current, m.current]);
   const B = on[l.type];
@@ -1446,13 +1409,13 @@ const Gt = 300, T1 = ({
     className: M(
       e,
       "humany-drawer",
-      `humany-drawer-${v.current}`
+      `humany-drawer-${b.current}`
     ),
     clientHeight: document.body.clientHeight,
-    css: p,
+    css: g,
     ref: d
   }, /* @__PURE__ */ r.createElement(Ee, {
-    onClick: () => g(!1),
+    onClick: () => C(!1),
     tabIndex: 0,
     ref: c,
     "aria-label": a
@@ -1463,13 +1426,13 @@ const Gt = 300, T1 = ({
     className: "humany-drawer-header"
   }, n), t))), r.cloneElement(i, {
     onClick: (T) => {
-      g(), y();
+      C(), p();
     },
     ref: m,
     "aria-label": i.props.title,
     "aria-expanded": f
   }));
-}, le = C.div`
+}, le = y.div`
     font-family: ${(e) => {
   var t;
   return (t = e.theme.fonts) == null ? void 0 : t.type;
@@ -1486,8 +1449,11 @@ const Gt = 300, T1 = ({
     box-shadow: ${(e) => e.theme.boxShadow};
     background: #ffffff;
     ${(e) => e.css && e.css}
-`, Jt = C(q)`
-    padding: ${(e) => e.theme.sizes.normal};
+`, Jt = y(q)`
+    padding: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.normal;
+}};
     margin: 0;
     text-align: center;
     border-bottom: #eeeeee 1px solid;
@@ -1506,9 +1472,9 @@ const Gt = 300, T1 = ({
   return (t = e.theme.fonts) == null ? void 0 : t.normal;
 }};
     line-height: 1.2em;
-`, ue = L`
-    transition: ${(e) => e.duration}ms;
-`, en = C(le)`
+`, ue = (e) => L`
+    transition: ${e.duration}ms;
+`, en = y(le)`
     max-height: 0;
     ${ue}
 
@@ -1525,7 +1491,7 @@ const Gt = 300, T1 = ({
     &.humany-drawer-transition-exit-done {
         max-height: 0;
     }
-`, tn = C(le)`
+`, tn = y(le)`
     ${ue}
     transform: translateX(100%);
     height: ${(e) => e.fullScreen ? "100%" : "auto"};
@@ -1543,7 +1509,7 @@ const Gt = 300, T1 = ({
     &.humany-drawer-transition-exit-done {
         transform: translateX(100%);
     }
-`, nn = C(le)`
+`, nn = y(le)`
     ${ue}
     transform: translateX(-100%);
     height: ${(e) => e.fullScreen ? "100%" : "auto"};
@@ -1561,7 +1527,7 @@ const Gt = 300, T1 = ({
     &.humany-drawer-transition-exit-done {
         transform: translateX(-100%);
     }
-`, rn = C(le)`
+`, rn = y(le)`
     ${ue}
     bottom: unset;
     top: 0;
@@ -1595,7 +1561,7 @@ const Gt = 300, T1 = ({
     },
     [o, s, i, a]
   );
-  return w(() => {
+  return v(() => {
     if (!n || !e)
       return;
     const u = n.getBoundingClientRect(), c = {
@@ -1604,16 +1570,16 @@ const Gt = 300, T1 = ({
     };
     u.left < 0 && (c.x = 0), u.bottom > window.innerHeight && (c.y = 0), c.x !== o && i(c.x), c.y !== s && a(c.y);
   }, [n, e, t]), [{ x: o, y: s }, l];
-}, N1 = r.forwardRef(
+}, Zr = r.forwardRef(
   (a, s) => {
     var l = a, { className: e = "", children: t = null, trigger: n, closeButtonAriaLabel: o } = l, i = S(l, ["className", "children", "trigger", "closeButtonAriaLabel"]);
     const u = R(), c = R(), m = R();
     Ce(s, () => m.current, [m.current]);
-    const p = R(Q()), [d, f] = k(!1), g = Ae(d), [{ x: E, y: v }, b] = Xe(d, p.current, m.current), y = X("Escape");
-    w(() => {
-      y && f(!1);
-    }, [y]), w(() => {
-      d && u.current ? u.current.focus() : !d && c.current && g && c.current.focus();
+    const g = R(Q()), [d, f] = k(!1), C = Ae(d), [{ x: E, y: b }, w] = Xe(d, g.current, m.current), p = X("Escape");
+    v(() => {
+      p && f(!1);
+    }, [p]), v(() => {
+      d && u.current ? u.current.focus() : !d && c.current && C && c.current.focus();
     }, [d, u.current, c.current]), I(
       "click",
       (z) => {
@@ -1624,23 +1590,23 @@ const Gt = 300, T1 = ({
     ), ce("router:changed", () => {
       f(!1);
     });
-    const B = ve(p.current, () => {
+    const B = ve(g.current, () => {
       f(!1);
     }), T = H(
       (z) => {
-        z.stopPropagation(), b(z, c.current), f(!d), B();
+        z.stopPropagation(), w(z, c.current), f(!d), B();
       },
-      [B, b, f]
+      [B, w, f]
     );
     return /* @__PURE__ */ r.createElement(r.Fragment, null, d && /* @__PURE__ */ r.createElement(G, null, /* @__PURE__ */ r.createElement(sn, $(h({
       className: M(
         "humany-dropdown",
-        `humany-dropdown-${p.current}`,
+        `humany-dropdown-${g.current}`,
         e
       )
     }, i), {
       x: E,
-      y: v,
+      y: b,
       ref: m
     }), /* @__PURE__ */ r.createElement(Ee, {
       onClick: () => f(!1),
@@ -1656,7 +1622,7 @@ const Gt = 300, T1 = ({
       "aria-expanded": d
     }));
   }
-), sn = C.div`
+), sn = y.div`
     ${je}
     padding: ${(e) => {
   var t;
@@ -1674,9 +1640,9 @@ const Gt = 300, T1 = ({
 `, an = (t) => {
   var e = S(t, []);
   return /* @__PURE__ */ r.createElement(cn, h({}, e));
-}, cn = C.div`
+}, cn = y.div`
     display: none;
-`, V1 = N(
+`, Wr = N(
   (a, s) => {
     var l = a, { children: e, columns: t, gap: n, className: o } = l, i = S(l, ["children", "columns", "gap", "className"]);
     return /* @__PURE__ */ r.createElement(ln, $(h(h({
@@ -1687,7 +1653,7 @@ const Gt = 300, T1 = ({
       ref: s
     }), e);
   }
-), ln = C.div`
+), ln = y.div`
     display: grid;
     grid-template-columns: repeat(${(e) => e["data-columns"]}, 1fr);
     grid-gap: ${(e) => e["data-gap"]};
@@ -1698,10 +1664,10 @@ const Gt = 300, T1 = ({
   (s, i) => {
     var a = s, { htmlParseInstruction: e = null, className: t, html: n } = a, o = S(a, ["htmlParseInstruction", "className", "html"]);
     const l = Z(), [u, c] = k();
-    return w(() => {
-      const m = Tt(l, n), p = $(h(h({}, m), e), {
+    return v(() => {
+      const m = Tt(l, n), g = $(h(h({}, m), e), {
         transform: h(h({}, m.transform), e == null ? void 0 : e.transform)
-      }), d = Dt(n, p);
+      }), d = Dt(n, g);
       c(d);
     }, [n, e]), /* @__PURE__ */ r.createElement("div", $(h({
       className: M(t, "humany-html")
@@ -1726,9 +1692,9 @@ const Gt = 300, T1 = ({
     title: t,
     role: o
   }, V(i)));
-}, Z1 = N(
-  (p, m) => {
-    var d = p, {
+}, Ir = N(
+  (g, m) => {
+    var d = g, {
       className: e = "",
       autoFocus: t = !1,
       onFocusChange: n = () => {
@@ -1753,29 +1719,29 @@ const Gt = 300, T1 = ({
       "disabled",
       "type"
     ]);
-    const [f, g] = k(t), E = R();
-    Ce(m, () => E.current), w(() => {
-      var y;
-      t && ((y = E == null ? void 0 : E.current) == null || y.focus());
+    const [f, C] = k(t), E = R();
+    Ce(m, () => E.current), v(() => {
+      var p;
+      t && ((p = E == null ? void 0 : E.current) == null || p.focus());
     }, [t, m, E]);
-    const v = (y, B) => {
-      g(y), n && n(y), s && y && B.target.select();
-    }, b = $(h({}, V(c)), {
+    const b = (p, B) => {
+      C(p), n && n(p), s && p && B.target.select();
+    }, w = $(h({}, V(c)), {
       disabled: l,
       autoFocus: t,
       type: u,
-      onKeyDown: (y) => {
-        y.key === "Enter" && f && o(y), y.key === "Escape" && f && i(y);
+      onKeyDown: (p) => {
+        p.key === "Enter" && f && o(p), p.key === "Escape" && f && i(p);
       },
-      onFocus: (y) => v(!0, y),
-      onBlur: (y) => v(!1, y),
-      onChange: (y) => a(y.target.value || ""),
+      onFocus: (p) => b(!0, p),
+      onBlur: (p) => b(!1, p),
+      onChange: (p) => a(p.target.value || ""),
       className: M(e, "humany-input"),
       "data-type": u
     });
-    return u !== "textarea" ? /* @__PURE__ */ r.createElement("input", $(h({}, b), {
+    return u !== "textarea" ? /* @__PURE__ */ r.createElement("input", $(h({}, w), {
       ref: E
-    })) : /* @__PURE__ */ r.createElement("textarea", $(h({}, b), {
+    })) : /* @__PURE__ */ r.createElement("textarea", $(h({}, w), {
       ref: E
     }));
   }
@@ -1812,7 +1778,7 @@ const Gt = 300, T1 = ({
   }
 ), fn = N(
   (f, d) => {
-    var g = f, {
+    var C = f, {
       header: e,
       customHeader: t,
       text: n,
@@ -1824,7 +1790,7 @@ const Gt = 300, T1 = ({
       renderItem: u,
       renderLi: c,
       ulProps: m
-    } = g, p = S(g, [
+    } = C, g = S(C, [
       "header",
       "customHeader",
       "text",
@@ -1840,7 +1806,7 @@ const Gt = 300, T1 = ({
     return /* @__PURE__ */ r.createElement("div", $(h({
       className: M(i, "humany-item-list"),
       "data-item-count": l.length
-    }, V(p)), {
+    }, V(g)), {
       ref: d
     }), t || (e || n || o ? /* @__PURE__ */ r.createElement(dn, {
       symbol: a,
@@ -1853,7 +1819,7 @@ const Gt = 300, T1 = ({
       renderLi: c
     }, m)) : null, s);
   }
-), W1 = ({
+), Or = ({
   className: e = "",
   tree: t,
   renderItem: n,
@@ -1863,16 +1829,16 @@ const Gt = 300, T1 = ({
   ulProps: a,
   liProps: l
 }) => {
-  const u = (p) => !c(p), c = (p) => !p || p.length < 1 ? !0 : !p.some((d) => !!d.selected), m = (p, d) => /* @__PURE__ */ r.createElement(fn, {
+  const u = (g) => !c(g), c = (g) => !g || g.length < 1 ? !0 : !g.some((d) => !!d.selected), m = (g, d) => /* @__PURE__ */ r.createElement(fn, {
     className: M(`humany-item-tree-level-${d}`),
-    items: p,
+    items: g,
     ulProps: a,
     renderItem: (f) => {
-      const { id: g, selected: E, items: v, matches: b } = f, y = E && c(v);
-      return !s && !b ? null : /* @__PURE__ */ r.createElement("li", $(h({}, V(l)), {
-        key: g,
+      const { id: C, selected: E, items: b, matches: w } = f, p = E && c(b);
+      return !s && !w ? null : /* @__PURE__ */ r.createElement("li", $(h({}, V(l)), {
+        key: C,
         className: "humany-item-tree-item"
-      }), n && n(f, d, y), v && (i || y) && m(v, d + 1));
+      }), n && n(f, d, p), b && (i || p) && m(b, d + 1));
     }
   });
   return /* @__PURE__ */ r.createElement("div", {
@@ -1882,7 +1848,7 @@ const Gt = 300, T1 = ({
   (u, l) => {
     var c = u, { className: e, onClick: t = () => {
     }, name: n = "", to: o = "", params: i = {}, children: s } = c, a = S(c, ["className", "onClick", "name", "to", "params", "children"]);
-    const m = Pe(), p = Z();
+    const m = Pe(), g = Z();
     if (!m)
       return null;
     let d = "";
@@ -1895,16 +1861,16 @@ const Gt = 300, T1 = ({
       ref: null
     });
     if (n) {
-      if (!(m.routes || []).find((b) => b.name === n))
+      if (!(m.routes || []).find((w) => w.name === n))
         return process.env.NODE_ENV !== "production" && de.warn(`Unable to create route. No route named "${n}" exist.`), /* @__PURE__ */ r.createElement(fe, $(h({}, f), {
-          onClick: (b) => {
-            t(b), b.preventDefault(), process.env.NODE_ENV !== "production" && de.warn(`Unable to navigate. No route named "${n}" exist.`);
+          onClick: (w) => {
+            t(w), w.preventDefault(), process.env.NODE_ENV !== "production" && de.warn(`Unable to navigate. No route named "${n}" exist.`);
           }
         }), s);
-      const v = Object.keys(i).reduce((b, y) => (b[y] = typeof i[y] == "string" ? encodeURIComponent(i[y]) : i[y], b), {});
+      const b = Object.keys(i).reduce((w, p) => (w[p] = typeof i[p] == "string" ? encodeURIComponent(i[p]) : i[p], w), {});
       try {
-        d = m.generate(n, v || {});
-      } catch (b) {
+        d = m.generate(n, b || {});
+      } catch (w) {
         return /* @__PURE__ */ r.createElement(fe, h({}, f), s);
       }
       d && m.settings.mode && m.settings.mode === Te.browser && d[0] !== "/" && (d = `/${d}`);
@@ -1920,16 +1886,18 @@ const Gt = 300, T1 = ({
         'Unable to generate path for route link. Either specify route name or use the "to" prop.'
       ), null;
     if (m.settings && m.settings.mode === Te.scopedHash) {
-      const g = p.get("$widget").name;
-      d = xt(d, g);
+      const C = g.get("$widget").name;
+      d = xt(d, C);
     }
-    return /* @__PURE__ */ r.createElement(fe, $(h({}, f), {
+    return f.as ? /* @__PURE__ */ r.createElement(gn, $(h({}, f), {
+      as: f.as
+    }), s) : /* @__PURE__ */ r.createElement(fe, $(h({}, f), {
       to: d
     }), s);
   }
-), xe = N(
-  (g, f) => {
-    var E = g, {
+), gn = y.span``, xe = N(
+  (E, C) => {
+    var b = E, {
       className: e,
       disabled: t = !1,
       role: n = "link",
@@ -1939,12 +1907,13 @@ const Gt = 300, T1 = ({
       onKeyDown: s = () => {
       },
       title: a,
-      href: l,
-      children: u,
-      target: c,
-      routeName: m,
-      params: p
-    } = E, d = S(E, [
+      as: l,
+      href: u,
+      children: c,
+      target: m,
+      routeName: g,
+      params: d
+    } = b, f = S(b, [
       "className",
       "disabled",
       "role",
@@ -1952,51 +1921,53 @@ const Gt = 300, T1 = ({
       "onClick",
       "onKeyDown",
       "title",
+      "as",
       "href",
       "children",
       "target",
       "routeName",
       "params"
     ]);
-    const v = {
+    const w = {
       title: a,
       disabled: t,
       role: n,
+      as: l,
       tabIndex: o,
       className: M(e, "humany-link", [!!t, "humany-disabled"]),
-      onClick: (b) => {
-        if (b.persist(), t) {
-          b.preventDefault();
+      onClick: (p) => {
+        if (p.persist(), t) {
+          p.preventDefault();
           return;
         }
-        i(b);
+        i(p);
       },
-      onKeyDown: (b) => {
-        if (b.persist(), t) {
-          b.key !== "Tab" && b.preventDefault();
+      onKeyDown: (p) => {
+        if (p.persist(), t) {
+          p.key !== "Tab" && p.preventDefault();
           return;
         }
-        s(b);
+        s(p);
       }
     };
-    return m ? /* @__PURE__ */ r.createElement(pn, $(h(h({
-      name: m,
-      params: p
-    }, v), V(d)), {
-      ref: f
-    }), u) : /* @__PURE__ */ r.createElement(gn, $(h(h({
-      href: l,
-      target: c
-    }, v), V(d)), {
-      ref: f
-    }), u);
+    return g ? /* @__PURE__ */ r.createElement(pn, $(h(h({
+      name: g,
+      params: d
+    }, w), V(f)), {
+      ref: C
+    }), c) : /* @__PURE__ */ r.createElement(Cn, $(h(h({
+      href: u,
+      target: m
+    }, w), V(f)), {
+      ref: C
+    }), c);
   }
-), pn = C(hn)`
+), pn = y(hn)`
     ${(e) => e.disabled ? `
       pointer-events: none;
       opacity: .7;
     ` : "cursor: pointer;"}
-`, gn = C.a`
+`, Cn = y.a`
     ${(e) => e.disabled ? `
     pointer-events: none;
     opacity: .7;
@@ -2026,13 +1997,13 @@ const Gt = 300, T1 = ({
     classNames: "humany-overlay-transition",
     unmountOnExit: !0,
     timeout: t
-  }, /* @__PURE__ */ r.createElement(G, null, /* @__PURE__ */ r.createElement(Cn, h({
+  }, /* @__PURE__ */ r.createElement(G, null, /* @__PURE__ */ r.createElement(yn, h({
     className: "humany-overlay",
     duration: t,
     ref: l,
     onClick: u
   }, i), n)));
-}, Cn = C.div`
+}, yn = y.div`
     background: rgba(0, 0, 0, 0.6);
     min-width: 100%;
     min-height: 100%;
@@ -2062,11 +2033,11 @@ const Gt = 300, T1 = ({
     &.humany-overlay-transition-exit-done {
         opacity: 0;
     }
-`, yn = We`
+`, bn = We`
   100% {
     transform: rotate(360deg);
   }
-`, bn = We`
+`, vn = We`
   0% {
     stroke-dasharray: 1, 200;
     stroke-dashoffset: 0;
@@ -2079,8 +2050,8 @@ const Gt = 300, T1 = ({
     stroke-dasharray: 89, 200;
     stroke-dashoffset: -124px;
   }
-`, qe = C.svg`
-    animation: ${yn} 2s linear infinite;
+`, qe = y.svg`
+    animation: ${bn} 2s linear infinite;
     height: 100%;
     transform-origin: center center;
     width: 100%;
@@ -2091,7 +2062,7 @@ const Gt = 300, T1 = ({
     right: 0;
     margin: auto;
     transition: 200ms ease-out opacity;
-`, vn = C.div`
+`, wn = y.div`
     position: absolute;
     top: 0;
     bottom: 0;
@@ -2109,7 +2080,7 @@ const Gt = 300, T1 = ({
     ${qe} {
         opacity: ${(e) => e["data-loading"] ? "1" : "0"};
     }
-`, wn = C.div`
+`, En = y.div`
     position: relative;
     margin: 0 auto;
     width: 100px;
@@ -2118,31 +2089,31 @@ const Gt = 300, T1 = ({
         display: block;
         padding-top: 100%;
     }
-`, En = C.circle`
+`, xn = y.circle`
     stroke-dasharray: 1, 200;
     stroke-dashoffset: 0;
-    animation: ${bn} 1.5s ease-in-out infinite;
+    animation: ${vn} 1.5s ease-in-out infinite;
     stroke-linecap: round;
     stroke: ${(e) => {
   var t;
   return (t = e.theme.colors) == null ? void 0 : t.primary;
 }};
     stroke-width: 2px;
-`, xn = ({ className: e, loading: t = !1 }) => /* @__PURE__ */ r.createElement(vn, {
+`, kn = ({ className: e, loading: t = !1 }) => /* @__PURE__ */ r.createElement(wn, {
   className: M("humany-loader", e),
   "data-loading": t
-}, /* @__PURE__ */ r.createElement(wn, {
+}, /* @__PURE__ */ r.createElement(En, {
   className: "humany-spinner"
 }, /* @__PURE__ */ r.createElement(qe, {
   viewBox: "25 25 50 50"
-}, /* @__PURE__ */ r.createElement(En, {
+}, /* @__PURE__ */ r.createElement(xn, {
   cx: "50",
   cy: "50",
   r: "20",
   fill: "none",
   "stroke-width": "2",
   "stroke-miterlimit": "10"
-})))), kn = (i) => {
+})))), $n = (i) => {
   var s = i, {
     zoomState: e,
     image: t,
@@ -2152,31 +2123,31 @@ const Gt = 300, T1 = ({
     "image",
     "changeZoom"
   ]);
-  var b;
-  const a = R(null), [l, u] = k(!1), [c, m] = k(!1), v = o.style || {}, { width: p, height: d } = v, f = S(v, ["width", "height"]), g = H(() => {
-    const y = a.current;
-    if (y) {
-      const B = window.innerWidth / y.width, T = window.innerHeight / y.height, z = Math.min(B, T);
+  var w;
+  const a = R(null), [l, u] = k(!1), [c, m] = k(!1), b = o.style || {}, { width: g, height: d } = b, f = S(b, ["width", "height"]), C = H(() => {
+    const p = a.current;
+    if (p) {
+      const B = window.innerWidth / p.width, T = window.innerHeight / p.height, z = Math.min(B, T);
       return T >= 1 && B >= 1 ? 1 : z;
     }
     return 1;
   }, [l, t.src]), E = ie(() => {
-    const y = a.current;
-    if (y) {
+    const p = a.current;
+    if (p) {
       if (!c) {
         m(!0);
-        const B = g();
+        const B = C();
         n(B);
       }
-      return y.width >= y.height ? [`${e * t.originalWidth}px`, "auto"] : ["auto", `${e * t.originalHeight}px`];
+      return p.width >= p.height ? [`${e * t.originalWidth}px`, "auto"] : ["auto", `${e * t.originalHeight}px`];
     }
     return null;
   }, [e, a, l, t.src]);
-  return w(() => (u(!1), function() {
+  return v(() => (u(!1), function() {
     m(!1);
-  }), [t.src]), /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement($n, {
+  }), [t.src]), /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(Ln, {
     loading: !l
-  }), /* @__PURE__ */ r.createElement(Ln, $(h({
+  }), /* @__PURE__ */ r.createElement(Mn, $(h({
     onLoad: () => {
       u(!0);
     },
@@ -2184,16 +2155,16 @@ const Gt = 300, T1 = ({
     imageSize: E,
     draggable: "false"
   }, o), {
-    alt: ((b = o.alt) == null ? void 0 : b.toString()) || "",
+    alt: ((w = o.alt) == null ? void 0 : w.toString()) || "",
     style: f,
     src: t.src,
     loaded: l
-  })), /* @__PURE__ */ r.createElement(Mn, null));
-}, $n = C(xn)`
+  })), /* @__PURE__ */ r.createElement(Sn, null));
+}, Ln = y(kn)`
     svg circle {
         stroke: #ffffff;
     }
-`, Ln = C.img`
+`, Mn = y.img`
     transform: none;
 
     ${(e) => e.imageSize && L`
@@ -2204,29 +2175,29 @@ const Gt = 300, T1 = ({
     vertical-align: middle;
     position: relative;
     ${(e) => !e.loaded && "display:none;"}
-`, Mn = C.div`
+`, Sn = y.div`
     height: 100%;
     display: inline-block;
     vertical-align: middle;
-`, Sn = () => {
+`, Rn = () => {
   const e = R(), [t, n] = k(!0), o = H(() => (t || n(!0), e.current && clearTimeout(e.current), e.current = setTimeout(() => {
     n(!1);
   }, 3e3), () => {
     e.current && clearTimeout(e.current);
   }), [t, e]);
   return [t, o];
-}, Rn = ({ attrs: e, htmlBody: t }) => {
+}, Hn = ({ attrs: e, htmlBody: t }) => {
   var Se;
-  const n = X("Escape"), o = X("ArrowLeft"), i = X("ArrowRight"), [s, a] = k(1), [l, u] = k({ top: 0, left: 0, x: 0, y: 0 }), [c, m] = k(!1), [p, d] = Sn(), [f, g] = k(null), [E, v] = k(null), b = R(null), y = R(null), B = R(null), T = R(null);
-  w(() => {
-    n && g(null);
-  }, [n]), w(() => {
+  const n = X("Escape"), o = X("ArrowLeft"), i = X("ArrowRight"), [s, a] = k(1), [l, u] = k({ top: 0, left: 0, x: 0, y: 0 }), [c, m] = k(!1), [g, d] = Rn(), [f, C] = k(null), [E, b] = k(null), w = R(null), p = R(null), B = R(null), T = R(null);
+  v(() => {
+    n && C(null);
+  }, [n]), v(() => {
     a(1);
-  }, [f]), w(() => {
+  }, [f]), v(() => {
     var F, A;
-    if (f === null || y.current === null)
+    if (f === null || p.current === null)
       return;
-    const x = y.current.firstElementChild, D = (F = B.current) == null ? void 0 : F.querySelector(".nav-left"), W = (A = B.current) == null ? void 0 : A.querySelector(".nav-right");
+    const x = p.current.firstElementChild, D = (F = B.current) == null ? void 0 : F.querySelector(".nav-left"), W = (A = B.current) == null ? void 0 : A.querySelector(".nav-right");
     if (E === "Right")
       te && W ? W.focus() : ee && D && D.focus();
     else if (E === "Left")
@@ -2236,7 +2207,7 @@ const Gt = 300, T1 = ({
         return;
       x.focus();
     }
-  }, [f, y, B, E]), w(() => {
+  }, [f, p, B, E]), v(() => {
     if (o) {
       if (ee)
         return Le();
@@ -2263,10 +2234,10 @@ const Gt = 300, T1 = ({
     const { src: x } = e;
     if (x) {
       const D = z.findIndex((W, F) => W.src === x);
-      g(D);
+      C(D);
     }
   }, [z, e]), Je = H((x) => {
-    g(null);
+    C(null);
   }, []), $e = H(
     (x) => {
       a(x ? s + s * 0.25 : s - s * 0.25);
@@ -2304,22 +2275,22 @@ const Gt = 300, T1 = ({
     }
     return !1;
   }, [T, s]), Le = () => {
-    f !== null && (v("Left"), g(f - 1));
+    f !== null && (b("Left"), C(f - 1));
   }, Me = () => {
-    f !== null && (v("Right"), g(f + 1));
+    f !== null && (b("Right"), C(f + 1));
   }, ee = f !== null && f > 0 && z.length > 1, te = f !== null && z.length - 1 > f;
   return /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(Ue, {
     visible: f !== null,
     onClick: Je
-  }, /* @__PURE__ */ r.createElement(Zn, {
+  }, /* @__PURE__ */ r.createElement(Wn, {
     onMouseDown: () => d(),
     onMouseMove: () => d(),
     onTouchStart: () => d(),
     onKeyDown: () => d()
-  }, /* @__PURE__ */ r.createElement(Wn, {
-    show: p.toString()
-  }, /* @__PURE__ */ r.createElement(Bn, {
-    ref: y,
+  }, /* @__PURE__ */ r.createElement(In, {
+    show: g.toString()
+  }, /* @__PURE__ */ r.createElement(Tn, {
+    ref: p,
     buttons: [
       {
         id: "download",
@@ -2329,28 +2300,28 @@ const Gt = 300, T1 = ({
       },
       {
         id: "lightbox-close",
-        onClick: () => g(null),
+        onClick: () => C(null),
         icon: "lightbox-close",
         ariaLabel: "Close"
       }
     ]
-  })), /* @__PURE__ */ r.createElement(On, {
+  })), /* @__PURE__ */ r.createElement(Fn, {
     scrolling: c.toString(),
     isDraggable: ot.toString(),
     ref: T,
     onMouseMove: nt,
     onMouseDown: tt,
     onMouseUp: rt
-  }, f !== null && /* @__PURE__ */ r.createElement(kn, $(h({
+  }, f !== null && /* @__PURE__ */ r.createElement($n, $(h({
     changeZoom: (x) => {
       a(x);
     },
     zoomState: s
   }, e), {
     image: z[f]
-  }))), /* @__PURE__ */ r.createElement(Nn, {
+  }))), /* @__PURE__ */ r.createElement(Vn, {
     ref: B,
-    show: p.toString(),
+    show: g.toString(),
     buttons: [
       {
         id: "previous",
@@ -2371,9 +2342,9 @@ const Gt = 300, T1 = ({
         ariaLabel: "Navigate to next image"
       }
     ]
-  }), /* @__PURE__ */ r.createElement(In, {
-    show: p.toString()
-  }, /* @__PURE__ */ r.createElement(Tn, {
+  }), /* @__PURE__ */ r.createElement(On, {
+    show: g.toString()
+  }, /* @__PURE__ */ r.createElement(Nn, {
     buttons: [
       {
         id: "zoom-out",
@@ -2388,26 +2359,26 @@ const Gt = 300, T1 = ({
         ariaLabel: "Zoom in"
       }
     ]
-  }), /* @__PURE__ */ r.createElement(Vn, {
+  }), /* @__PURE__ */ r.createElement(Zn, {
     variant: "span"
-  }, Math.trunc(s * 100), "%")))), /* @__PURE__ */ r.createElement(Hn, {
-    ref: b,
+  }, Math.trunc(s * 100), "%")))), /* @__PURE__ */ r.createElement(zn, {
+    ref: w,
     onClick: j,
     onKeyDown: (x) => {
       x.key === "Enter" && (x.preventDefault(), j());
     },
     tabIndex: 0
-  }, /* @__PURE__ */ r.createElement(Fn, $(h({}, e), {
+  }, /* @__PURE__ */ r.createElement(An, $(h({}, e), {
     alt: ((Se = e.alt) == null ? void 0 : Se.toString()) || ""
   }))));
 }, ke = N(
-  ({ show: e = "true", buttons: t, className: n }, o) => /* @__PURE__ */ r.createElement(zn, {
+  ({ show: e = "true", buttons: t, className: n }, o) => /* @__PURE__ */ r.createElement(Dn, {
     ref: o,
     show: e,
     className: M("humany-button-set", n)
   }, t.map(
-    ({ id: i, circle: s = !1, show: a = !0, ariaLabel: l, onClick: u, icon: c, className: m }, p) => /* @__PURE__ */ r.createElement(Dn, {
-      key: i + p.toString(),
+    ({ id: i, circle: s = !1, show: a = !0, ariaLabel: l, onClick: u, icon: c, className: m }, g) => /* @__PURE__ */ r.createElement(Bn, {
+      key: i + g.toString(),
       circle: s.toString(),
       onClick: u,
       tabIndex: a ? void 0 : -1,
@@ -2420,25 +2391,25 @@ const Gt = 300, T1 = ({
       symbol: { type: "Svg", content: c }
     }))
   ))
-), Qe = C.div`
+), Qe = y.div`
     transition: opacity 0.3s ease 0s;
     z-index: 5;
     ${(e) => e.show === "true" ? "opacity: 1;" : L`
                   opacity: 0;
                   pointer-events: none;
               `}
-`, Hn = C(xe)`
+`, zn = y(xe)`
     display: inline-block !important;
-`, zn = C(Qe)`
+`, Dn = y(Qe)`
     position: fixed;
     display: flex;
     gap: ${(e) => {
   var t;
   return (t = e.theme.sizes) == null ? void 0 : t.normal;
 }};
-`, ge = "39px", Dn = C(ae)`
-    width: ${ge};
-    height: ${ge};
+`, pe = "39px", Bn = y(ae)`
+    width: ${pe};
+    height: ${pe};
     display: flex;
     justify-content: center;
     align-items: center;
@@ -2464,7 +2435,7 @@ const Gt = 300, T1 = ({
                   }
 
                   &:focus-visible {
-                      ${P}
+                      ${P(e)}
                       outline-color: #ffffff;
                       background-color: transparent;
 
@@ -2486,7 +2457,7 @@ const Gt = 300, T1 = ({
                       outline-color: #ffffff;
                   }
                   &:focus-visible {
-                      ${P}
+                      ${P(e)}
                   }
               `;
 }}
@@ -2501,7 +2472,7 @@ const Gt = 300, T1 = ({
                   opacity: 0;
                   pointer-events: none;
               `}
-`, Bn = C(ke)`
+`, Tn = y(ke)`
     top: ${(e) => {
   var t;
   return (t = e.theme.sizes) == null ? void 0 : t.large;
@@ -2510,7 +2481,7 @@ const Gt = 300, T1 = ({
   var t;
   return (t = e.theme.sizes) == null ? void 0 : t.large;
 }};
-`, Tn = C(ke)`
+`, Nn = y(ke)`
     bottom: ${(e) => {
   var t;
   return (t = e.theme.sizes) == null ? void 0 : t.large;
@@ -2518,11 +2489,11 @@ const Gt = 300, T1 = ({
     width: 100%;
     align-items: center;
     justify-content: center;
-`, Nn = C(ke)`
+`, Vn = y(ke)`
     display: block;
     button {
         position: fixed;
-        top: calc(50% - calc(${ge} / 2));
+        top: calc(50% - calc(${pe} / 2));
         &:first-child {
             left: ${(e) => {
   var t;
@@ -2536,7 +2507,7 @@ const Gt = 300, T1 = ({
 }};
         }
     }
-`, Vn = C(q)`
+`, Zn = y(q)`
     position: fixed;
     bottom: ${(e) => {
   var t;
@@ -2555,21 +2526,21 @@ const Gt = 300, T1 = ({
   var t;
   return (t = e.theme.fonts) == null ? void 0 : t.type;
 }};
-`, Ge = C(Qe)`
+`, Ge = y(Qe)`
     position: absolute;
     width: 100vw;
     height: 88px;
     left: 0px;
     z-index: 5;
-`, Zn = C.div`
+`, Wn = y.div`
     width: 100%;
-`, Wn = C(Ge)`
+`, In = y(Ge)`
     top: 0px;
     background-image: linear-gradient(to bottom, rgb(34, 34, 34, 0.8), rgba(34, 34, 34, 0));
-`, In = C(Ge)`
+`, On = y(Ge)`
     bottom: 0px;
     background-image: linear-gradient(to top, rgb(34, 34, 34, 0.8), rgba(34, 34, 34, 0));
-`, On = C.div`
+`, Fn = y.div`
     width: 100%;
     height: 100vh;
     overflow: auto;
@@ -2578,23 +2549,23 @@ const Gt = 300, T1 = ({
     white-space: nowrap;
     justify-content: center;
     cursor: ${(e) => e.isDraggable === "true" ? e.scrolling === "true" ? "grabbing" : "grab" : "auto"};
-`, Fn = C.img`
+`, An = y.img`
     cursor: pointer;
-`, An = N(
+`, Pn = N(
   (l, a) => {
     var u = l, { className: e, children: t, trigger: n, onOverlayClick: o = () => {
     }, close: i = !1 } = u, s = S(u, ["className", "children", "trigger", "onOverlayClick", "close"]);
-    const [c, m] = Ye(), [p, d] = Ke(!0), f = R(), g = R(Q()), E = X("Escape");
-    w(() => {
+    const [c, m] = Ye(), [g, d] = Ke(!0), f = R(), C = R(Q()), E = X("Escape");
+    v(() => {
       (E || i) && m(!1);
-    }, [E, i]), w(() => {
+    }, [E, i]), v(() => {
       c && f.current && f.current.focus();
     }, [c, f.current]), ce("router:changed", () => {
       m(!1);
     });
-    const v = H(
-      (y) => {
-        m(!1), o(y);
+    const b = H(
+      (p) => {
+        m(!1), o(p);
       },
       [o, m]
     );
@@ -2603,19 +2574,19 @@ const Gt = 300, T1 = ({
         m(!1);
       }
     }));
-    const b = H(() => ve(g.current, () => {
+    const w = H(() => ve(C.current, () => {
       m(!1);
-    }), [g.current]);
+    }), [C.current]);
     return /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(Ue, {
       visible: c,
-      onClick: v
-    }, /* @__PURE__ */ r.createElement(Pn, $(h({
+      onClick: b
+    }, /* @__PURE__ */ r.createElement(Kn, $(h({
       className: M(
         e,
         "humany-modal",
-        `humany-modal-${g.current}`
+        `humany-modal-${C.current}`
       ),
-      css: p,
+      css: g,
       tabIndex: -1
     }, s), {
       ref: d
@@ -2626,12 +2597,12 @@ const Gt = 300, T1 = ({
     }, /* @__PURE__ */ r.createElement(J, {
       symbol: { type: "Svg", content: "close" }
     })), t)), r.cloneElement(n, {
-      onClick: (y) => {
-        m(), b();
+      onClick: (p) => {
+        m(), w();
       }
     }));
   }
-), Pn = C.div`
+), Kn = y.div`
     font-family: ${(e) => {
   var t;
   return (t = e.theme.fonts) == null ? void 0 : t.type;
@@ -2647,10 +2618,10 @@ const Gt = 300, T1 = ({
   var t;
   return (t = e.theme.sizes) == null ? void 0 : t.medium;
 }};
-    ${je}
+    ${(e) => je(e)}
     ${(e) => e.css && e.css}
   outline: none;
-`, I1 = ({
+`, Fr = ({
   className: e,
   trigger: t,
   header: n = "",
@@ -2663,23 +2634,23 @@ const Gt = 300, T1 = ({
   confirmLabel: l = ""
 }) => {
   const u = R(), c = H(() => {
-    var p;
-    i(), (p = u == null ? void 0 : u.current) == null || p.close();
+    var g;
+    i(), (g = u == null ? void 0 : u.current) == null || g.close();
   }, [i]), m = H(() => {
-    var p;
-    s(), (p = u == null ? void 0 : u.current) == null || p.close();
+    var g;
+    s(), (g = u == null ? void 0 : u.current) == null || g.close();
   }, [s]);
-  return /* @__PURE__ */ r.createElement(Kn, {
+  return /* @__PURE__ */ r.createElement(Yn, {
     className: e,
     trigger: t,
     ref: u,
     onOverlayClick: c
-  }, n && /* @__PURE__ */ r.createElement(Ve, null, n), o && /* @__PURE__ */ r.createElement(Ve, null, o), l && /* @__PURE__ */ r.createElement(Yn, {
+  }, n && /* @__PURE__ */ r.createElement(Ve, null, n), o && /* @__PURE__ */ r.createElement(Ve, null, o), l && /* @__PURE__ */ r.createElement(jn, {
     onClick: m
-  }, l), a && /* @__PURE__ */ r.createElement(jn, {
+  }, l), a && /* @__PURE__ */ r.createElement(Xn, {
     onClick: c
   }, a));
-}, Kn = C(An)`
+}, Yn = y(Pn)`
     display: block;
 
     span {
@@ -2697,7 +2668,7 @@ const Gt = 300, T1 = ({
 }};
         }
     }
-`, Yn = C(ae)`
+`, jn = y(ae)`
     display: inline-block;
     min-width: 50px;
     ${(e) => {
@@ -2727,7 +2698,7 @@ const Gt = 300, T1 = ({
     &:focus-visible {
         ${P}
     }
-`, jn = C(ae)`
+`, Xn = y(ae)`
     display: inline-block;
     min-width: 50px;
     ${(e) => {
@@ -2748,48 +2719,48 @@ const Gt = 300, T1 = ({
     &:focus-visible {
         ${P};
     }
-`, O1 = ({
+`, Ar = ({
   header: e = "",
   link: t = "",
   suggestionHeader: n = "",
   suggestion: o = ""
-}) => /* @__PURE__ */ r.createElement(Xn, null, /* @__PURE__ */ r.createElement(_n, null, /* @__PURE__ */ r.createElement(q, {
+}) => /* @__PURE__ */ r.createElement(_n, null, /* @__PURE__ */ r.createElement(Un, null, /* @__PURE__ */ r.createElement(q, {
   variant: "h2"
-}, "404")), /* @__PURE__ */ r.createElement(Un, null, /* @__PURE__ */ r.createElement(q, {
+}, "404")), /* @__PURE__ */ r.createElement(qn, null, /* @__PURE__ */ r.createElement(q, {
   variant: "h3"
-}, e), /* @__PURE__ */ r.createElement(Qn, {
+}, e), /* @__PURE__ */ r.createElement(Gn, {
   routeName: "index",
   "aria-label": t,
   text: t
-})), /* @__PURE__ */ r.createElement(qn, null, /* @__PURE__ */ r.createElement("span", null, n), /* @__PURE__ */ r.createElement("ul", null, /* @__PURE__ */ r.createElement("li", null, o)))), Xn = C.div`
+})), /* @__PURE__ */ r.createElement(Qn, null, /* @__PURE__ */ r.createElement("span", null, n), /* @__PURE__ */ r.createElement("ul", null, /* @__PURE__ */ r.createElement("li", null, o)))), _n = y.div`
     display: flex;
     flex-wrap: wrap;
-`, _n = C.div`
-    ${se(
+`, Un = y.div`
+    ${(e) => se(e)(
   "h2",
   L`
-            padding: 0;
-            margin: 0;
-            color: gray;
-            font-size: 7em;
-        `
+                padding: 0;
+                margin: 0;
+                color: gray;
+                font-size: 7em;
+            `
 )}
-`, Un = C.div`
+`, qn = y.div`
     margin-left: ${(e) => {
   var t;
   return (t = e.theme.sizes) == null ? void 0 : t.medium;
 }};
 
-    ${se(
-  "h3",
-  L`
-            text-transform: uppercase;
-            font-size: ${(e) => {
-    var t;
-    return (t = e.theme.fonts) == null ? void 0 : t.normal;
-  }};
-        `
-)}
+    ${(e) => {
+  var t;
+  return se(e)(
+    "h3",
+    L`
+                text-transform: uppercase;
+                font-size: ${(t = e.theme.fonts) == null ? void 0 : t.normal};
+            `
+  );
+}}
 
     a {
         color: ${(e) => {
@@ -2801,7 +2772,7 @@ const Gt = 300, T1 = ({
   return (t = e.theme.fonts) == null ? void 0 : t.small;
 }};
     }
-`, qn = C.div`
+`, Qn = y.div`
     margin-top: ${(e) => {
   var t;
   return (t = e.theme.sizes) == null ? void 0 : t.medium;
@@ -2812,7 +2783,7 @@ const Gt = 300, T1 = ({
         font-weight: bold;
     }
 `;
-class F1 extends dt {
+class Pr extends dt {
   constructor() {
     super(...arguments);
     re(this, "node");
@@ -2851,7 +2822,7 @@ class F1 extends dt {
     }) : null;
   }
 }
-const Qn = N(
+const Gn = N(
   (a, s) => {
     var l = a, { className: e, description: t, text: n, children: o } = l, i = S(l, ["className", "description", "text", "children"]);
     return /* @__PURE__ */ r.createElement(xe, $(h({
@@ -2864,48 +2835,48 @@ const Qn = N(
     }) : null);
   }
 );
-var Gn = /* @__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))(Gn || {});
-const A1 = ({ className: e = "", format: t = "hh:mm", timestamp: n }) => /* @__PURE__ */ r.createElement("span", {
+var Jn = /* @__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))(Jn || {});
+const Kr = ({ className: e = "", format: t = "hh:mm", timestamp: n }) => /* @__PURE__ */ r.createElement("span", {
   className: M(e, "humany-timestamp")
-}, Jn(n, t)), Ze = (e) => `0${e}`.slice(-2);
-function Jn(e, t) {
+}, er(n, t)), Ze = (e) => `0${e}`.slice(-2);
+function er(e, t) {
   const n = new Date(e), o = n.toTimeString().split(" ")[0].split(":"), i = o.length > 1 ? `${o[0]}:${o[1]}` : o[0], s = n.getFullYear(), a = n.getMonth() + 1, l = n.getDate(), u = `${s}-${Ze(a)}-${Ze(l)}`;
   return t === "yyyy-mm-dd" ? u : t === "hh:mm" ? i : `${u} ${i}`;
 }
-const P1 = (s) => {
+const Yr = (s) => {
   var a = s, { className: e, children: t, content: n, sticky: o = !1 } = a, i = S(a, ["className", "children", "content", "sticky"]);
-  const [l, u] = k(!1), c = R(Q()), m = R(), [{ x: p, y: d }, f] = Xe(l, c.current, m.current), g = (v) => {
-    const { target: b } = v;
-    !m.current || !b || m.current !== b && !m.current.contains(b) && u(!1);
+  const [l, u] = k(!1), c = R(Q()), m = R(), [{ x: g, y: d }, f] = Xe(l, c.current, m.current), C = (b) => {
+    const { target: w } = b;
+    !m.current || !w || m.current !== w && !m.current.contains(w) && u(!1);
   };
-  w(() => {
+  v(() => {
     if (!!o)
-      return window.addEventListener("click", g), () => {
-        window.removeEventListener("click", g);
+      return window.addEventListener("click", C), () => {
+        window.removeEventListener("click", C);
       };
   }, [l, o]);
   const E = H(
-    (v, b) => {
-      f(v, m.current), u(b);
+    (b, w) => {
+      f(b, m.current), u(w);
     },
     [f, u]
   );
-  return /* @__PURE__ */ r.createElement(e1, {
+  return /* @__PURE__ */ r.createElement(tr, {
     ref: m,
     className: "humany-tooltip-trigger",
-    onMouseEnter: o ? void 0 : (v) => E(v, !0),
-    onMouseLeave: o ? void 0 : (v) => E(v, !1),
-    onTouchEnd: o ? (v) => E(v, !l) : void 0,
-    onClick: o ? (v) => E(v, !l) : void 0
-  }, t, l && /* @__PURE__ */ r.createElement(G, null, /* @__PURE__ */ r.createElement(t1, h({
+    onMouseEnter: o ? void 0 : (b) => E(b, !0),
+    onMouseLeave: o ? void 0 : (b) => E(b, !1),
+    onTouchEnd: o ? (b) => E(b, !l) : void 0,
+    onClick: o ? (b) => E(b, !l) : void 0
+  }, t, l && /* @__PURE__ */ r.createElement(G, null, /* @__PURE__ */ r.createElement(nr, h({
     className: M(e, "humany-tooltip-container"),
-    x: p,
+    x: g,
     y: d
   }, i), n)));
-}, e1 = C.div`
+}, tr = y.div`
     display: flex;
     align-items: center;
-`, t1 = C.div`
+`, nr = y.div`
     color: #ffffff;
     background: #161616;
     border-radius: ${(e) => e.theme.borderRadius};
@@ -2931,14 +2902,17 @@ const P1 = (s) => {
 
     i,
     svg {
-        margin-right: ${(e) => e.theme.sizes.small};
+        margin-right: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.small;
+}};
     }
 
     ${(e) => {
   let t = "";
   return e.y > 0 ? t += `top: calc(2px + ${e.y || "0"}px);` : t += "bottom: 2px;", e.x > 0 ? t += `right: calc(2px + ${e.x || "0"}px);` : t += "left: 2px;", t;
 }};
-`, K1 = (e) => {
+`, jr = (e) => {
   const {
     in: t,
     mountOnEnter: n = !0,
@@ -2963,12 +2937,12 @@ const P1 = (s) => {
           }
         };
       if (typeof a == "object") {
-        const { enter: p, exit: d } = a;
+        const { enter: g, exit: d } = a;
         return {
           enter: {
             transitionKeys: (c = a.enter) == null ? void 0 : c.type,
             duration: i ? typeof i == "number" ? i : i.enter : 200,
-            easing: p.easing ? p.easing : "ease-in"
+            easing: g.easing ? g.easing : "ease-in"
           },
           exit: {
             transitionKeys: (m = a.enter) == null ? void 0 : m.type,
@@ -2990,7 +2964,7 @@ const P1 = (s) => {
     unmountOnExit: o,
     onEnter: (c) => c.clientHeight
   }, (c) => s && s(c, u && he.compose(c, u)));
-}, n1 = N(
+}, rr = N(
   (l, a) => {
     var u = l, { className: e, children: t, onClick: n = () => {
     }, widgetName: o, activationOptions: i } = u, s = S(u, ["className", "children", "onClick", "widgetName", "activationOptions"]);
@@ -2998,45 +2972,45 @@ const P1 = (s) => {
       const { implementation: f } = c.get("$widget");
       return f.widgets.get(o);
     };
-    w(() => {
+    v(() => {
       const f = m();
       return f == null || f.activate(i).then(() => f.invoke("attach")), () => {
         f == null || f.deactivate();
       };
     }, [o]);
-    const p = (f) => {
-      const g = m(), E = f.currentTarget;
-      if (g) {
-        const v = () => {
-          g.invoke("renderState").then(
-            (b) => b === oe.open ? g.invoke("close") : g.invoke("open")
+    const g = (f) => {
+      const C = m(), E = f.currentTarget;
+      if (C) {
+        const b = () => {
+          C.invoke("renderState").then(
+            (w) => w === oe.open ? C.invoke("close") : C.invoke("open")
           ).then(() => {
-            g.events.subscribeOnce("widget:area-rendered", (b, y) => {
+            C.events.subscribeOnce("widget:area-rendered", (w, p) => {
               c.get(
                 "widgetDOMElement"
-              ) && g.events.dispatch("widget:modal-opened", {
-                name: g.name,
+              ) && C.events.dispatch("widget:modal-opened", {
+                name: C.name,
                 ref: E
               });
             });
           });
         };
-        g.state === gt.Deactivated ? g.activate(i).then(() => g.invoke("attach")).then(v) : v();
+        C.state === pt.Deactivated ? C.activate(i).then(() => C.invoke("attach")).then(b) : b();
       }
     }, d = (f) => {
-      f.key === "Enter" && (f.preventDefault(), p(f));
+      f.key === "Enter" && (f.preventDefault(), g(f));
     };
     return /* @__PURE__ */ r.createElement(xe, $(h({
       className: M(e, "humany-widget-link"),
       onKeyDown: d,
       onClick: (f) => {
-        n(f), p(f);
+        n(f), g(f);
       }
     }, s), {
       ref: a
     }), t);
   }
-), Y1 = N(
+), Xr = N(
   ({ portalId: e = "humany-widget-overlay-portal", className: t, children: n }, o) => {
     const i = Z(), s = ie(() => {
       if (!i)
@@ -3047,12 +3021,12 @@ const P1 = (s) => {
     return s ? /* @__PURE__ */ r.createElement(G, {
       elementId: e,
       parent: s
-    }, /* @__PURE__ */ r.createElement(r1, {
+    }, /* @__PURE__ */ r.createElement(or, {
       className: M("humany-widget-overlay-outlet", t),
       ref: o
     }, n)) : null;
   }
-), r1 = C.div`
+), or = y.div`
     background-color: #ffffff;
     position: absolute;
     top: 0;
@@ -3062,7 +3036,7 @@ const P1 = (s) => {
     z-index: 10;
     width: 100%;
     height: 100%;
-`, j1 = (e, t, n, o, i) => e.getAsync("componentResolver").then((s) => (s.registerComponent(
+`, _r = (e, t, n, o, i) => e.getAsync("componentResolver").then((s) => (s.registerComponent(
   t,
   ft(() => n)
 ), wt(e, t, o || (() => {
@@ -3070,29 +3044,29 @@ const P1 = (s) => {
 export {
   Nt as AnchorLink,
   ae as Button,
-  g1 as Checkbox,
+  yr as Checkbox,
   Wt as ColumnContext,
   Fe as ComponentNodeContext,
   It as ComponentPropertyContext,
-  I1 as Confirm,
+  Fr as Confirm,
   Zt as ContainerContext,
   Ft as ConversationContext,
-  Gn as DateFormats,
-  T1 as Drawer,
+  Jn as DateFormats,
+  Vr as Drawer,
   Qt as DrawerAnimationType,
-  N1 as Dropdown,
+  Zr as Dropdown,
   an as Empty,
-  V1 as Grid,
+  Wr as Grid,
   _e as Html,
   un as Icon,
-  Z1 as Input,
+  Ir as Input,
   fn as ItemList,
-  W1 as ItemTree,
-  Rn as Lightbox,
+  Or as ItemTree,
+  Hn as Lightbox,
   xe as Link,
   mn as List,
-  An as Modal,
-  O1 as NotFound,
+  Pn as Modal,
+  Ar as NotFound,
   Ue as Overlay,
   dn as Paragraph,
   G as Portal,
@@ -3100,63 +3074,63 @@ export {
   Ot as RoutingContext,
   Ve as StyledText,
   J as SymbolBadge,
-  F1 as TabStop,
+  Pr as TabStop,
   we as Text,
-  Qn as TextLink,
-  A1 as Timestamp,
-  P1 as Tooltip,
-  K1 as TransitionComponent,
+  Gn as TextLink,
+  Kr as Timestamp,
+  Yr as Tooltip,
+  jr as TransitionComponent,
   q as Typography,
-  n1 as WidgetLink,
-  Y1 as WidgetOverlayOutlet,
+  rr as WidgetLink,
+  Xr as WidgetOverlayOutlet,
   P as borderTabStyle,
   Ne as browser,
   Yt as buttonCss,
   je as contentBox,
   V as convertToStringAttributes,
-  p1 as createEmptyComponent,
-  j1 as createReactComponent,
+  Cr as createEmptyComponent,
+  _r as createReactComponent,
   Tt as defaultRenderInstructions,
   Rt as embeddedLinkMapper,
   Oe as filterCssProps,
   Ht as filterCssPropsStyle,
   zt as genericHashLink,
-  B1 as genericHtml,
+  Nr as genericHtml,
   se as headingElement,
   Bt as imageLightboxRenderer,
-  H1 as invertedHoverButton,
-  D1 as itemList,
+  Dr as invertedHoverButton,
+  Tr as itemList,
   jt as linkTabStyle,
   Xt as list,
-  z1 as paddedBorderTabStyle,
+  Br as paddedBorderTabStyle,
   Dt as processHtmlString,
   he as transitionComposer,
-  C1 as useAction,
-  y1 as useChildren,
-  b1 as useColumns,
-  v1 as useComponent,
+  br as useAction,
+  vr as useChildren,
+  wr as useColumns,
+  Er as useComponent,
   ye as useComponentDescriptor,
   be as useComponentNode,
   U as useComponentPlatform,
   Z as useContainer,
   At as useContext,
-  w1 as useConversation,
-  E1 as useDispatch,
+  xr as useConversation,
+  kr as useDispatch,
   I as useEventListener,
   Pt as useEvents,
   O as useIsMounted,
-  x1 as useIsTabbing,
+  $r as useIsTabbing,
   X as useKeyPress,
-  k1 as useLayout,
+  Lr as useLayout,
   Ae as usePrevious,
-  $1 as useProperties,
-  L1 as useRenderState,
-  M1 as useRouteData,
+  Mr as useProperties,
+  Sr as useRenderState,
+  Rr as useRouteData,
   Pe as useRouter,
   Ke as useScroll,
-  S1 as useSettings,
+  Hr as useSettings,
   Ye as useToggle,
-  R1 as useTransitionEnd,
+  zr as useTransitionEnd,
   ve as useUniqueMenu,
   ce as useWidgetEvent
 };