@telia-ace/widget-ui 1.3.0-rc.0 → 1.3.0-rc.10

package/index.mjs

@@ -1,14 +1,14 @@
 var rt = Object.defineProperty;
 var it = (e, t, n) => t in e ? rt(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
 var te = (e, t, n) => (it(e, typeof t != "symbol" ? t + "" : t, n), n);
-import { css as k, keyframes as Ne } from "@emotion/react";
+import { css as k, keyframes as Ve } from "@emotion/react";
 import { kebabCase as st, appendClassNames as $, uuid as U, removeNullAndUndefinedValues as Re, Logger as ue } from "@telia-ace/widget-utilities";
 import { jsx as i, jsxs as b, Fragment as _ } from "react/jsx-runtime";
-import y from "@emotion/styled";
+import C from "@emotion/styled";
 import oe, { forwardRef as H, createContext as K, useContext as P, useState as w, useEffect as v, useRef as L, useCallback as M, useImperativeHandle as ge, createElement as at, useMemo as re, Component as ct, lazy as lt } from "react";
-import { CSSTransition as Ve, Transition as ut } from "react-transition-group";
-import { Container as dt, WidgetState as ht } from "@webprovisions/platform";
-import { ComponentPlatform as ft, asDescriptor as mt, createEventSubscriber as gt, ComponentQuery as pt, WidgetRenderState as ne, extendComponent as Ct } from "@telia-ace/widget-core";
+import { CSSTransition as Ne, Transition as ut } from "react-transition-group";
+import { Container as dt, WidgetState as ft } from "@webprovisions/platform";
+import { ComponentPlatform as ht, asDescriptor as mt, createEventSubscriber as gt, ComponentQuery as pt, WidgetRenderState as ne, extendComponent as Ct } from "@telia-ace/widget-core";
 import { createPortal as yt } from "react-dom";
 import He from "htmr";
 import { HistoryMode as ze, getSpecificWidgetPath as bt } from "@telia-ace/widget-routing";
@@ -44,7 +44,7 @@ const vt = (e) => e === "entering" || e === "entered", xt = (e) => e === "exitin
   "slide-left",
   "slide-right",
   "scale"
-], he = {
+], fe = {
   compose: (e = "exited", t) => {
     const { enter: n, exit: o } = t, r = n.transitionKeys.split(" "), s = wt.indexOf(r[0]) > -1 ? "transform" : "opacity";
     if (vt(e))
@@ -66,7 +66,7 @@ const vt = (e) => e === "entering" || e === "entered", xt = (e) => e === "exitin
   },
   composeViewTransition: (e, t, n) => {
     if (t === "slide")
-      return he.compose(e, {
+      return fe.compose(e, {
         enter: {
           transitionKeys: n === "forth" ? "slide-right" : "slide-left",
           duration: 500
@@ -77,7 +77,7 @@ const vt = (e) => e === "entering" || e === "entered", xt = (e) => e === "exitin
         }
       });
     if (t === "fade")
-      return he.compose(e, {
+      return fe.compose(e, {
         enter: {
           transitionKeys: "fade",
           duration: 500
@@ -90,7 +90,7 @@ const vt = (e) => e === "entering" || e === "entered", xt = (e) => e === "exitin
   },
   get: (e) => F[e]
 };
-var fe = /* @__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))(fe || {});
+var he = /* @__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))(he || {});
 const De = () => {
   const {
     opr: e,
@@ -110,17 +110,17 @@ const De = () => {
   const u = ((m) => m.toString() === "[object SafariRemoteNotification]")(!r || typeof r < "u" && r.pushNotification);
   if (/constructor/i.test(o) || u)
     return "safari";
-  const h = !!s;
-  if (h)
+  const f = !!s;
+  if (f)
     return "internet-explorer";
-  if (!h && a)
+  if (!f && a)
     return "edge";
-  const f = !!d && (!!d.webstore || !!d.runtime);
-  if (f)
+  const h = !!d && (!!d.webstore || !!d.runtime);
+  if (h)
     return "chrome";
-  if (f && navigator.userAgent.indexOf("Edg") !== -1)
+  if (h && navigator.userAgent.indexOf("Edg") !== -1)
     return "edge-chromium";
-  if ((f || l) && c)
+  if ((h || l) && c)
     return "blink";
 }, kt = ["string", "number"], D = (e) => Object.keys(e).reduce(
   (t, n) => {
@@ -166,10 +166,10 @@ const De = () => {
   const o = () => {
     n = "";
   }, r = (u) => {
-    const h = document.getElementById(n);
-    return h !== null ? (u(h), o(), !0) : !1;
+    const f = document.getElementById(n);
+    return f !== null ? (u(f), o(), !0) : !1;
   }, s = (u) => (u.preventDefault(), o(), e.onClick && e.onClick(u), typeof e.to == "string" && (n = e.to.split("#").slice(1).join("#")), n !== "" && r(
-    e.scroll || ((h) => e.smooth ? h.scrollIntoView({ behavior: "smooth" }) : h.scrollIntoView())
+    e.scroll || ((f) => e.smooth ? f.scrollIntoView({ behavior: "smooth" }) : f.scrollIntoView())
   ), !1), { scroll: a, smooth: d, to: c, ...l } = e;
   return t === "a" && (l.href = "javascript:;"), /* @__PURE__ */ i(t, { ...l, onClick: s, children: e.children });
 }, ie = (e) => (t, n) => {
@@ -214,7 +214,7 @@ const Rt = (e) => (t) => /* @__PURE__ */ i(Sn, { attrs: t, htmlBody: e }), Ht =
       children: t
     }
   )
-), Dt = y.button`
+), Dt = C.button`
   -webkit-appearance: button;
   text-transform: none;
   overflow: visible;
@@ -251,9 +251,9 @@ const Rt = (e) => (t) => /* @__PURE__ */ i(Sn, { attrs: t, htmlBody: e }), Ht =
   type: "",
   name: "",
   branch: ""
-}), Nt = K(
+}), Vt = K(
   {}
-), Vt = K(null), Wt = K(null), pe = () => P(Ze), T = () => P(Bt), C1 = (e, t) => {
+), Nt = K(null), Wt = K(null), pe = () => P(Ze), T = () => P(Bt), C1 = (e, t) => {
   const n = pe().id, o = T();
   return (r, s) => {
     (t || o).getAsync("actionResolver").then((a) => {
@@ -276,7 +276,7 @@ const Rt = (e) => (t) => /* @__PURE__ */ i(Sn, { attrs: t, htmlBody: e }), Ht =
 }, Y = (e) => {
   const t = T(), [n, o] = w(null), r = W();
   return v(() => {
-    ft.getInstance(e || t).then(
+    ht.getInstance(e || t).then(
       (s) => {
         r.current && o(s);
       }
@@ -360,7 +360,7 @@ const Rt = (e) => (t) => /* @__PURE__ */ i(Sn, { attrs: t, htmlBody: e }), Ht =
       reject: l
     });
   }) : r.dispatch(a, d);
-}, V = (e, t, n = window, o = () => !0) => {
+}, N = (e, t, n = window, o = () => !0) => {
   const r = L(() => {
   });
   v(() => {
@@ -401,7 +401,7 @@ const Rt = (e) => (t) => /* @__PURE__ */ i(Sn, { attrs: t, htmlBody: e }), Ht =
     },
     [o]
   );
-  return V("keydown", r, window), V("keyup", s, window), n;
+  return N("keydown", r, window), N("keyup", s, window), n;
 }, $1 = (e) => {
   const t = Ce(e), n = Y(), [o, r] = w({}), s = W();
   return v(() => {
@@ -424,7 +424,7 @@ const Rt = (e) => (t) => /* @__PURE__ */ i(Sn, { attrs: t, htmlBody: e }), Ht =
   return v(() => {
     t.current = e;
   }), t.current;
-}, L1 = () => P(Nt), M1 = (e) => {
+}, L1 = () => P(Vt), M1 = (e) => {
   const [t, n] = w(), o = T(), r = W();
   return v(() => {
     let s;
@@ -435,12 +435,12 @@ const Rt = (e) => (t) => /* @__PURE__ */ i(Sn, { attrs: t, htmlBody: e }), Ht =
     return c("renderState").then((l) => {
       r.current && n(l);
     }), (e || o).getAsync("actionResolver").then((l) => {
-      s = l.subscribe(d, (u, h) => {
-        switch (h) {
+      s = l.subscribe(d, (u, f) => {
+        switch (f) {
           case "close":
           case "open":
             r.current && n(
-              h === "open" ? ne.open : ne.closed
+              f === "open" ? ne.open : ne.closed
             );
             break;
           case "hide":
@@ -451,7 +451,7 @@ const Rt = (e) => (t) => /* @__PURE__ */ i(Sn, { attrs: t, htmlBody: e }), Ht =
       s && s();
     };
   }, [r]), t;
-}, Oe = () => P(Vt), S1 = (e) => {
+}, Oe = () => P(Nt), S1 = (e) => {
   const t = T(), n = Oe(), [o, r] = w({
     name: "",
     params: {}
@@ -465,8 +465,8 @@ const Rt = (e) => (t) => /* @__PURE__ */ i(Sn, { attrs: t, htmlBody: e }), Ht =
       "router:change",
       (l, { next: { routeData: u } }) => {
         if (s.current) {
-          const { name: h, params: f } = u;
-          Re(f), r({ name: h, params: f });
+          const { name: f, params: h } = u;
+          Re(h), r({ name: f, params: h });
         }
       }
     );
@@ -494,32 +494,32 @@ const Rt = (e) => (t) => /* @__PURE__ */ i(Sn, { attrs: t, htmlBody: e }), Ht =
     (l) => {
       if (!l.cancelable)
         return;
-      const u = l.touches[0].clientY, h = a(l.target);
-      if (!h)
+      const u = l.touches[0].clientY, f = a(l.target);
+      if (!f)
         return;
-      const f = h.scrollTop, m = n.current - u < 0 ? "up" : "down", C = f <= 0 && m === "up", g = f >= h.scrollHeight - h.offsetHeight && m === "down";
-      (C || g) && l.preventDefault(), n.current = u;
+      const h = f.scrollTop, m = n.current - u < 0 ? "up" : "down", p = h <= 0 && m === "up", g = h >= f.scrollHeight - f.offsetHeight && m === "down";
+      (p || g) && l.preventDefault(), n.current = u;
     },
     [t, n]
   );
-  return V(
+  return N(
     "scroll",
     r,
     t.current,
     () => t.current && e
-  ), V(
+  ), N(
     "touchstart",
     s,
     t.current,
     () => t.current && e
-  ), V(
+  ), N(
     "touchmove",
     c,
     t.current,
     () => t.current && e
   ), e ? [Ot, t] : ["", t];
 }, Ot = `
-    overflow-y: ${De() === fe.Chrome || De() === fe.EdgeChromium ? "overlay" : "auto"};
+    overflow-y: ${De() === he.Chrome || De() === he.EdgeChromium ? "overlay" : "auto"};
     overflow-x: hidden;
     -ms-overflow-style: none; /* IE 10+ */
     scrollbar-width: thin; /* Firefox */
@@ -562,14 +562,14 @@ const Rt = (e) => (t) => /* @__PURE__ */ i(Sn, { attrs: t, htmlBody: e }), Ht =
   const t = T(), n = Y(), o = t.get("widgetDOMElement"), [r, s] = w(null), [a, d] = w(null), c = W();
   v(() => {
     if (n && c.current) {
-      const u = n.nodes.all.find((f) => f.name === "root-area"), h = n.nodes.all.find((f) => f.type === "view");
-      if (!(h != null && h.attributes.properties.animation) && !(u != null && u.attributes.properties.animation))
+      const u = n.nodes.all.find((h) => h.name === "root-area"), f = n.nodes.all.find((h) => h.type === "view");
+      if (!(f != null && f.attributes.properties.animation) && !(u != null && u.attributes.properties.animation))
         e();
       else {
-        const f = (g = "") => o == null ? void 0 : o.querySelector(`[data-node-id="${g}"]`), m = f(h == null ? void 0 : h.id);
+        const h = (g = "") => o == null ? void 0 : o.querySelector(`[data-node-id="${g}"]`), m = h(f == null ? void 0 : f.id);
         m && s(m);
-        const C = f(u == null ? void 0 : u.id);
-        C && d(C);
+        const p = h(u == null ? void 0 : u.id);
+        p && d(p);
       }
     }
   }, [n, t, c]);
@@ -579,11 +579,11 @@ const Rt = (e) => (t) => /* @__PURE__ */ i(Sn, { attrs: t, htmlBody: e }), Ht =
     },
     [e, c, r, a]
   );
-  V(
+  N(
     "transitionend",
     l,
     r
-  ), V(
+  ), N(
     "transitionend",
     l,
     a
@@ -688,7 +688,7 @@ const Rt = (e) => (t) => /* @__PURE__ */ i(Sn, { attrs: t, htmlBody: e }), Ht =
   ${O(e)}
   outline-offset: ${(t = e.theme.sizes) == null ? void 0 : t.small};
 `;
-}, ve = y(se)`
+}, ve = C(se)`
   position: absolute;
   top: ${(e) => {
   var t;
@@ -716,7 +716,7 @@ const Rt = (e) => (t) => /* @__PURE__ */ i(Sn, { attrs: t, htmlBody: e }), Ht =
     height: 15px;
     box-sizing: content-box;
   }
-`, Be = y(be)`
+`, Be = C(be)`
   font-size: ${(e) => {
   var t;
   return (t = e.theme.fonts) == null ? void 0 : t.normal;
@@ -900,7 +900,7 @@ const Rt = (e) => (t) => /* @__PURE__ */ i(Sn, { attrs: t, htmlBody: e }), Ht =
         xmlns: "http://www.w3.org/2000/svg",
         ...a,
         ref: null
-      }, h = { minWidth: `${n}` };
+      }, f = { minWidth: `${n}` };
       switch (c) {
         case "search":
           return /* @__PURE__ */ b("svg", { viewBox: "0 0 32 30", ...u, children: [
@@ -954,22 +954,22 @@ const Rt = (e) => (t) => /* @__PURE__ */ i(Sn, { attrs: t, htmlBody: e }), Ht =
             /* @__PURE__ */ i("path", { d: "M12.2812 11.9473L1.24686 0.726451", stroke: "black" })
           ] });
         case "caret-right":
-          return /* @__PURE__ */ b("svg", { viewBox: "0 0 14 14", style: h, ...u, children: [
+          return /* @__PURE__ */ b("svg", { viewBox: "0 0 14 14", style: f, ...u, children: [
             /* @__PURE__ */ i("line", { x1: "4.13", y1: "1.05", x2: "10.13", y2: "7.05", stroke: "black" }),
             /* @__PURE__ */ i("line", { x1: "10.13", y1: "6.95", x2: "4.13", y2: "12.95", stroke: "black" })
           ] });
         case "caret-left":
-          return /* @__PURE__ */ b("svg", { viewBox: "0 0 14 14", style: h, ...u, children: [
+          return /* @__PURE__ */ b("svg", { viewBox: "0 0 14 14", style: f, ...u, children: [
             /* @__PURE__ */ i("line", { x1: "10.13", y1: "12.95", x2: "4.13", y2: "6.95", stroke: "black" }),
             /* @__PURE__ */ i("line", { x1: "4.13", y1: "7.05", x2: "10.13", y2: "1.05", stroke: "black" })
           ] });
         case "caret-up":
-          return /* @__PURE__ */ b(jt, { viewBox: "0 0 14 14", style: h, ...u, children: [
+          return /* @__PURE__ */ b(jt, { viewBox: "0 0 14 14", style: f, ...u, children: [
             /* @__PURE__ */ i("line", { x1: "13.09", y1: "3.99", x2: "7.1", y2: "9.99", stroke: "black" }),
             /* @__PURE__ */ i("line", { x1: "7.19", y1: "9.99", x2: "1.19", y2: "3.99", stroke: "black" })
           ] });
         case "caret-down":
-          return /* @__PURE__ */ b("svg", { viewBox: "0 0 14 14", style: h, ...u, children: [
+          return /* @__PURE__ */ b("svg", { viewBox: "0 0 14 14", style: f, ...u, children: [
             /* @__PURE__ */ i("line", { x1: "13.09", y1: "3.99", x2: "7.1", y2: "9.99", stroke: "black" }),
             /* @__PURE__ */ i("line", { x1: "7.19", y1: "9.99", x2: "1.19", y2: "3.99", stroke: "black" })
           ] });
@@ -1297,7 +1297,7 @@ const Rt = (e) => (t) => /* @__PURE__ */ i(Sn, { attrs: t, htmlBody: e }), Ht =
             )
           ] });
         case "video":
-          return h.minWidth && typeof h.minWidth == "number" && (h.minWidth = `${h.minWidth}px`), /* @__PURE__ */ b("svg", { viewBox: "0 0 25 25", ...u, style: h, children: [
+          return f.minWidth && typeof f.minWidth == "number" && (f.minWidth = `${f.minWidth}px`), /* @__PURE__ */ b("svg", { viewBox: "0 0 25 25", ...u, style: f, children: [
             /* @__PURE__ */ i(
               "path",
               {
@@ -1458,7 +1458,7 @@ const Rt = (e) => (t) => /* @__PURE__ */ i(Sn, { attrs: t, htmlBody: e }), Ht =
         }
       ) : null;
   }
-}, jt = y.svg`
+}, jt = C.svg`
   transform: rotate(180deg);
 `, Kt = {
   h1: "h1",
@@ -1480,7 +1480,7 @@ const Rt = (e) => (t) => /* @__PURE__ */ i(Sn, { attrs: t, htmlBody: e }), Ht =
     ...r
   }, a = t || s[e] || "span";
   return /* @__PURE__ */ i(Yt, { className: n, as: a, children: o });
-}, Yt = y.span``;
+}, Yt = C.span``;
 var Xt = /* @__PURE__ */ ((e) => (e.SlideInLeft = "slide-in-left", e.SlideInRight = "slide-in-right", e.SlideInBottom = "slide-in-bottom", e.SlideInTop = "slide-in-top", e))(Xt || {});
 const Ut = 300, T1 = ({
   className: e,
@@ -1495,33 +1495,33 @@ const Ut = 300, T1 = ({
     /* SlideInBottom */
   }
 }) => {
-  const { duration: c = Ut } = d, l = L(), u = L(), [h, f] = Ae(!0), [m, C] = Fe(), g = Ie(m), p = L(U());
+  const { duration: c = Ut } = d, l = L(), u = L(), [f, h] = Ae(!0), [m, p] = Fe(), g = Ie(m), y = L(U());
   v(() => {
     o && o(m);
   }, [m]);
   const S = j("Escape");
   v(() => {
-    S && C(!1);
-  }, [S]), V(
+    S && p(!1);
+  }, [S]), N(
     "click",
     (z) => {
       const { target: Z } = z;
-      !u.current || !f.current || !Z || u.current !== Z && f.current !== Z && !f.current.contains(Z) && !u.current.contains(Z) && C(!1);
+      !u.current || !h.current || !Z || u.current !== Z && h.current !== Z && !h.current.contains(Z) && !u.current.contains(Z) && p(!1);
     },
     window
   );
-  const R = ye(p.current, () => {
-    C(!1);
+  const R = ye(y.current, () => {
+    p(!1);
   });
   ae("router:changed", () => {
-    C(!1);
+    p(!1);
   }), v(() => {
     m && l.current ? l.current.focus() : !m && u.current && g && u.current.focus();
   }, [m, l.current, u.current]);
-  const N = en[d.type];
+  const V = en[d.type];
   return /* @__PURE__ */ b(_, { children: [
     /* @__PURE__ */ i(
-      Ve,
+      Ne,
       {
         in: m,
         className: "humany-drawer-transition",
@@ -1529,23 +1529,23 @@ const Ut = 300, T1 = ({
         unmountOnExit: !0,
         timeout: c,
         children: /* @__PURE__ */ i(q, { children: /* @__PURE__ */ b(
-          N,
+          V,
           {
             duration: c,
             fullScreen: s,
             className: $(
               e,
               "humany-drawer",
-              `humany-drawer-${p.current}`
+              `humany-drawer-${y.current}`
             ),
             clientHeight: document.body.clientHeight,
-            css: h,
-            ref: f,
+            css: f,
+            ref: h,
             children: [
               /* @__PURE__ */ i(
                 ve,
                 {
-                  onClick: () => C(!1),
+                  onClick: () => p(!1),
                   tabIndex: 0,
                   ref: l,
                   "aria-label": a,
@@ -1561,14 +1561,14 @@ const Ut = 300, T1 = ({
     ),
     oe.cloneElement(r, {
       onClick: (z) => {
-        C(), R();
+        p(), R();
       },
       ref: u,
       "aria-label": r.props.title,
       "aria-expanded": m
     })
   ] });
-}, ce = y.div`
+}, ce = C.div`
   font-family: ${(e) => {
   var t;
   return (t = e.theme.fonts) == null ? void 0 : t.type;
@@ -1585,7 +1585,7 @@ const Ut = 300, T1 = ({
   box-shadow: ${(e) => e.theme.boxShadow};
   background: #ffffff;
   ${(e) => e.css && e.css}
-`, _t = y(X)`
+`, _t = C(X)`
   padding: ${(e) => {
   var t;
   return (t = e.theme.sizes) == null ? void 0 : t.normal;
@@ -1610,7 +1610,7 @@ const Ut = 300, T1 = ({
   line-height: 1.2em;
 `, le = (e) => k`
   transition: ${e.duration}ms;
-`, qt = y(ce)`
+`, qt = C(ce)`
   max-height: 0;
   ${le}
 
@@ -1627,7 +1627,7 @@ const Ut = 300, T1 = ({
   &.humany-drawer-transition-exit-done {
     max-height: 0;
   }
-`, Qt = y(ce)`
+`, Qt = C(ce)`
   ${le}
   transform: translateX(100%);
   height: ${(e) => e.fullScreen ? "100%" : "auto"};
@@ -1645,7 +1645,7 @@ const Ut = 300, T1 = ({
   &.humany-drawer-transition-exit-done {
     transform: translateX(100%);
   }
-`, Gt = y(ce)`
+`, Gt = C(ce)`
   ${le}
   transform: translateX(-100%);
   height: ${(e) => e.fullScreen ? "100%" : "auto"};
@@ -1663,7 +1663,7 @@ const Ut = 300, T1 = ({
   &.humany-drawer-transition-exit-done {
     transform: translateX(-100%);
   }
-`, Jt = y(ce)`
+`, Jt = C(ce)`
   ${le}
   bottom: unset;
   top: 0;
@@ -1718,7 +1718,7 @@ const Ut = 300, T1 = ({
     };
     c.left < 0 && (l.x = 0), c.bottom > window.innerHeight && (l.y = 0), l.x !== o && r(l.x), l.y !== s && a(l.y);
   }, [n, e, t]), [{ x: o, y: s }, d];
-}, N1 = oe.forwardRef(
+}, V1 = oe.forwardRef(
   ({
     className: e = "",
     children: t = null,
@@ -1728,28 +1728,28 @@ const Ut = 300, T1 = ({
   }, s) => {
     const a = L(), d = L(), c = L();
     ge(s, () => c.current, [c.current]);
-    const l = L(U()), [u, h] = w(!1), f = Ie(u), [{ x: m, y: C }, g] = je(u, l.current, c.current), p = j("Escape");
+    const l = L(U()), [u, f] = w(!1), h = Ie(u), [{ x: m, y: p }, g] = je(u, l.current, c.current), y = j("Escape");
     v(() => {
-      p && h(!1);
-    }, [p]), v(() => {
-      u && a.current ? a.current.focus() : !u && d.current && f && d.current.focus();
-    }, [u, a.current, d.current]), V(
+      y && f(!1);
+    }, [y]), v(() => {
+      u && a.current ? a.current.focus() : !u && d.current && h && d.current.focus();
+    }, [u, a.current, d.current]), N(
       "click",
-      (N) => {
-        const { target: z } = N;
-        !c.current || !z || c.current !== z && !c.current.contains(z) && h(!1);
+      (V) => {
+        const { target: z } = V;
+        !c.current || !z || c.current !== z && !c.current.contains(z) && f(!1);
       },
       window
     ), ae("router:changed", () => {
-      h(!1);
+      f(!1);
     });
     const S = ye(l.current, () => {
-      h(!1);
+      f(!1);
     }), R = M(
-      (N) => {
-        N.stopPropagation(), g(N, d.current), h(!u), S();
+      (V) => {
+        V.stopPropagation(), g(V, d.current), f(!u), S();
       },
-      [S, g, h]
+      [S, g, f]
     );
     return /* @__PURE__ */ b(_, { children: [
       u && /* @__PURE__ */ i(q, { children: /* @__PURE__ */ b(
@@ -1762,13 +1762,13 @@ const Ut = 300, T1 = ({
           ),
           ...r,
           x: m,
-          y: C,
+          y: p,
           ref: c,
           children: [
             /* @__PURE__ */ i(
               ve,
               {
-                onClick: () => h(!1),
+                onClick: () => f(!1),
                 tabIndex: 0,
                 ref: a,
                 "aria-label": o,
@@ -1787,7 +1787,7 @@ const Ut = 300, T1 = ({
       })
     ] });
   }
-), tn = y.div`
+), tn = C.div`
   ${Pe}
   padding: ${(e) => {
   var t;
@@ -1802,9 +1802,9 @@ const Ut = 300, T1 = ({
   let t = "";
   return e.y > 0 ? t += `top: calc(${((n = e.theme.sizes) == null ? void 0 : n.small) || "0px"} + ${e.y || "0"}px);` : t += `bottom: ${((o = e.theme.sizes) == null ? void 0 : o.normal) || "0px"};`, e.x > 0 ? t += `right: ${e.x || "0"}px;` : t += `left: ${((r = e.theme.sizes) == null ? void 0 : r.normal) || "0px"};`, t;
 }};
-`, nn = ({ ...e }) => /* @__PURE__ */ i(on, { ...e }), on = y.div`
+`, nn = ({ ...e }) => /* @__PURE__ */ i(on, { ...e }), on = C.div`
   display: none;
-`, V1 = H(
+`, N1 = H(
   ({ children: e, columns: t, gap: n, className: o, ...r }, s) => /* @__PURE__ */ i(
     rn,
     {
@@ -1817,7 +1817,7 @@ const Ut = 300, T1 = ({
       children: e
     }
   )
-), rn = y.div`
+), rn = C.div`
   display: grid;
   grid-template-columns: repeat(${(e) => e["data-columns"]}, 1fr);
   grid-gap: ${(e) => e["data-gap"]};
@@ -1878,24 +1878,24 @@ const Ut = 300, T1 = ({
     type: c,
     ...l
   }, u) => {
-    const [h, f] = w(t), m = L();
+    const [f, h] = w(t), m = L();
     ge(u, () => m.current), v(() => {
-      var p;
-      t && ((p = m == null ? void 0 : m.current) == null || p.focus());
+      var y;
+      t && ((y = m == null ? void 0 : m.current) == null || y.focus());
     }, [t, u, m]);
-    const C = (p, S) => {
-      f(p), n && n(p), s && p && S.target.select();
+    const p = (y, S) => {
+      h(y), n && n(y), s && y && S.target.select();
     }, g = {
       ...D(l),
       disabled: d,
       autoFocus: t,
       type: c,
-      onKeyDown: (p) => {
-        p.key === "Enter" && h && o(p), p.key === "Escape" && h && r(p);
+      onKeyDown: (y) => {
+        y.key === "Enter" && f && o(y), y.key === "Escape" && f && r(y);
       },
-      onFocus: (p) => C(!0, p),
-      onBlur: (p) => C(!1, p),
-      onChange: (p) => a(p.target.value || ""),
+      onFocus: (y) => p(!0, y),
+      onBlur: (y) => p(!1, y),
+      onChange: (y) => a(y.target.value || ""),
       className: $(e, "humany-input"),
       "data-type": c
     };
@@ -1918,7 +1918,6 @@ const Ut = 300, T1 = ({
     "ul",
     {
       role: "none",
-      "aria-live": "polite",
       className: $(e, "humany-list"),
       "data-item-count": t.length,
       ...D(r),
@@ -1958,14 +1957,14 @@ const Ut = 300, T1 = ({
     renderItem: c,
     renderLi: l,
     ulProps: u,
-    ...h
-  }, f) => /* @__PURE__ */ b(
+    ...f
+  }, h) => /* @__PURE__ */ b(
     "div",
     {
       className: $(r, "humany-item-list"),
       "data-item-count": d.length,
-      ...D(h),
-      ref: f,
+      ...D(f),
+      ref: h,
       children: [
         t || (e || n || o ? /* @__PURE__ */ i(cn, { symbol: a, header: e, text: n, html: o }) : null),
         d.length ? /* @__PURE__ */ i(
@@ -1991,23 +1990,23 @@ const Ut = 300, T1 = ({
   ulProps: a,
   liProps: d
 }) => {
-  const c = (h) => !l(h), l = (h) => !h || h.length < 1 ? !0 : !h.some((f) => !!f.selected), u = (h, f) => /* @__PURE__ */ i(
+  const c = (f) => !l(f), l = (f) => !f || f.length < 1 ? !0 : !f.some((h) => !!h.selected), u = (f, h) => /* @__PURE__ */ i(
     ln,
     {
-      className: $(`humany-item-tree-level-${f}`),
-      items: h,
+      className: $(`humany-item-tree-level-${h}`),
+      items: f,
       ulProps: a,
       renderItem: (m) => {
-        const { id: C, selected: g, items: p, matches: S } = m, R = g && l(p);
+        const { id: p, selected: g, items: y, matches: S } = m, R = g && l(y);
         return !s && !S ? null : /* @__PURE__ */ at(
           "li",
           {
             ...D(d),
-            key: C,
+            key: p,
             className: "humany-item-tree-item"
           },
-          n && n(m, f, R),
-          p && (r || R) && u(p, f + 1)
+          n && n(m, h, R),
+          y && (r || R) && u(y, h + 1)
         );
       }
     }
@@ -2031,7 +2030,7 @@ const Ut = 300, T1 = ({
     if (!c)
       return null;
     let u = "";
-    const h = {
+    const f = {
       onClick: t,
       className: $(e, "humany-route-link"),
       to: u,
@@ -2046,7 +2045,7 @@ const Ut = 300, T1 = ({
         ), /* @__PURE__ */ i(
           de,
           {
-            ...h,
+            ...f,
             onClick: (g) => {
               t(g), g.preventDefault(), process.env.NODE_ENV !== "production" && ue.warn(
                 `Unable to navigate. No route named "${n}" exist.`
@@ -2055,23 +2054,23 @@ const Ut = 300, T1 = ({
             children: s
           }
         );
-      const C = Object.keys(r).reduce(
-        (g, p) => {
-          const S = r[p];
+      const p = Object.keys(r).reduce(
+        (g, y) => {
+          const S = r[y];
           if (Array.isArray(S)) {
             if (S.length === 0)
               return g;
-            g[p] = S.map((R) => typeof R == "string" ? encodeURIComponent(R) : R).join(",");
+            g[y] = S.map((R) => typeof R == "string" ? encodeURIComponent(R) : R).join(",");
           } else
-            g[p] = typeof S == "string" ? encodeURIComponent(S) : S;
+            g[y] = typeof S == "string" ? encodeURIComponent(S) : S;
           return g;
         },
         {}
       );
       try {
-        u = c.generate(n, C || {});
+        u = c.generate(n, p || {});
       } catch {
-        return /* @__PURE__ */ i(de, { ...h, ref: h.innerRef, children: s });
+        return /* @__PURE__ */ i(de, { ...f, ref: f.innerRef, children: s });
       }
       u && c.settings.mode && c.settings.mode === ze.browser && u[0] !== "/" && (u = `/${u}`);
     } else if (o && c.history)
@@ -2086,83 +2085,83 @@ const Ut = 300, T1 = ({
         'Unable to generate path for route link. Either specify route name or use the "to" prop.'
       ), null;
     if (c.settings && c.settings.mode === ze.scopedHash) {
-      const f = l.get("$widget").name;
-      u = bt(u, f);
+      const h = l.get("$widget").name;
+      u = bt(u, h);
     }
-    return h.as ? /* @__PURE__ */ i(dn, { ...h, as: h.as, children: s }) : /* @__PURE__ */ i(de, { ...h, to: u, children: s });
+    return f.as ? /* @__PURE__ */ i(dn, { ...f, as: f.as, children: s }) : /* @__PURE__ */ i(de, { ...f, to: u, children: s });
   }
-), dn = y.span``, xe = H(
+), dn = C.span``, xe = H(
   ({
     className: e,
     disabled: t = !1,
-    role: n = "link",
-    tabIndex: o = 0,
-    onClick: r = () => {
+    tabIndex: n = 0,
+    onClick: o = () => {
     },
-    onKeyDown: s = () => {
+    onKeyDown: r = () => {
     },
-    title: a,
-    as: d,
-    href: c,
-    children: l,
-    target: u,
-    routeName: h,
+    title: s,
+    as: a,
+    href: d,
+    children: c,
+    target: l,
+    routeName: u,
     params: f,
-    ...m
-  }, C) => {
-    const g = {
-      title: a,
+    ...h
+  }, m) => {
+    const p = {
+      title: s,
+      role: u === "index" ? "button" : void 0,
+      "aria-expanded": u === "index" ? "false" : void 0,
       disabled: t,
-      role: n,
-      as: d,
-      tabIndex: o,
+      as: a,
+      tabIndex: n,
       className: $(e, "humany-link", [
         !!t,
         "humany-disabled"
       ]),
-      onClick: (p) => {
-        if (p.persist(), t) {
-          p.preventDefault();
+      onClick: (g) => {
+        if (g.persist(), t) {
+          g.preventDefault();
           return;
         }
-        r(p);
+        o(g);
       },
-      onKeyDown: (p) => {
-        if (p.persist(), t) {
-          p.key !== "Tab" && p.preventDefault();
+      onKeyDown: (g) => {
+        if (g.persist(), t) {
+          g.key !== "Tab" && g.preventDefault();
           return;
         }
-        s(p);
+        r(g);
       }
     };
-    return h ? /* @__PURE__ */ i(
-      hn,
+    return h["data-client-name"] === "custom.link" && (p.role = "link"), u ? /* @__PURE__ */ i(
+      fn,
       {
-        name: h,
+        name: u,
         params: f,
-        ...g,
-        ...D(m),
-        ref: C,
-        children: l
+        ...p,
+        ...D(h),
+        ref: m,
+        children: c
       }
     ) : /* @__PURE__ */ i(
-      fn,
+      hn,
       {
-        href: c,
-        target: u,
-        ...g,
-        ...D(m),
-        ref: C,
-        children: l
+        href: d,
+        target: l,
+        ...p,
+        ...D(h),
+        ref: m,
+        children: c
       }
     );
   }
-), hn = y(un)`
+), fn = C(un)`
   ${(e) => e.disabled ? `
       pointer-events: none;
       opacity: .7;
     ` : "cursor: pointer;"}
-`, fn = y.a`
+`, hn = C.a`
   ${(e) => e.disabled ? `
     pointer-events: none;
     opacity: .7;
@@ -2182,7 +2181,7 @@ const Ut = 300, T1 = ({
     [o]
   );
   return /* @__PURE__ */ i(
-    Ve,
+    Ne,
     {
       in: e,
       className: "humany-overlay-transition",
@@ -2202,7 +2201,7 @@ const Ut = 300, T1 = ({
       ) })
     }
   );
-}, mn = y.div`
+}, mn = C.div`
   background: rgba(0, 0, 0, 0.6);
   min-width: 100%;
   min-height: 100%;
@@ -2232,11 +2231,11 @@ const Ut = 300, T1 = ({
   &.humany-overlay-transition-exit-done {
     opacity: 0;
   }
-`, gn = Ne`
+`, gn = Ve`
   100% {
     transform: rotate(360deg);
   }
-`, pn = Ne`
+`, pn = Ve`
   0% {
     stroke-dasharray: 1, 200;
     stroke-dashoffset: 0;
@@ -2249,7 +2248,7 @@ const Ut = 300, T1 = ({
     stroke-dasharray: 89, 200;
     stroke-dashoffset: -124px;
   }
-`, Cn = y.svg`
+`, Cn = C.svg`
   animation: ${gn} 2s linear infinite;
   height: 100%;
   transform-origin: center center;
@@ -2261,7 +2260,7 @@ const Ut = 300, T1 = ({
   right: 0;
   margin: auto;
   transition: 200ms ease-out opacity;
-`, yn = y.div`
+`, yn = C.div`
   position: absolute;
   top: 0;
   bottom: 0;
@@ -2279,7 +2278,7 @@ const Ut = 300, T1 = ({
   svg {
     opacity: ${(e) => e["data-loading"] ? "1" : "0"};
   }
-`, bn = y.div`
+`, bn = C.div`
   position: relative;
   margin: 0 auto;
   width: 100px;
@@ -2288,7 +2287,7 @@ const Ut = 300, T1 = ({
     display: block;
     padding-top: 100%;
   }
-`, vn = y.circle`
+`, vn = C.circle`
   stroke-dasharray: 1, 200;
   stroke-dashoffset: 0;
   animation: ${pn} 1.5s ease-in-out infinite;
@@ -2321,12 +2320,12 @@ const Ut = 300, T1 = ({
   changeZoom: n,
   ...o
 }) => {
-  var C;
-  const r = L(null), [s, a] = w(!1), [d, c] = w(!1), { width: l, height: u, ...h } = o.style || {}, f = M(() => {
+  var p;
+  const r = L(null), [s, a] = w(!1), [d, c] = w(!1), { width: l, height: u, ...f } = o.style || {}, h = M(() => {
     const g = r.current;
     if (g) {
-      const p = window.innerWidth / g.naturalWidth, S = window.innerHeight / g.naturalHeight, R = Math.min(p, S);
-      return S >= 1 && p >= 1 ? 1 : R;
+      const y = window.innerWidth / g.naturalWidth, S = window.innerHeight / g.naturalHeight, R = Math.min(y, S);
+      return S >= 1 && y >= 1 ? 1 : R;
     }
     return 1;
   }, [s, t.src]), m = re(() => {
@@ -2334,8 +2333,8 @@ const Ut = 300, T1 = ({
     if (g && s) {
       if (!d) {
         c(!0);
-        const p = f();
-        n(p);
+        const y = h();
+        n(y);
       }
       return g.naturalWidth >= g.naturalHeight ? [`${e * g.naturalWidth}px`, "auto"] : ["auto", `${e * g.naturalHeight}px`];
     }
@@ -2355,19 +2354,19 @@ const Ut = 300, T1 = ({
         imageSize: m,
         draggable: "false",
         ...o,
-        alt: ((C = o.alt) == null ? void 0 : C.toString()) || "",
-        style: h,
+        alt: ((p = o.alt) == null ? void 0 : p.toString()) || "",
+        style: f,
         src: t.src,
         loaded: s
       }
     ),
     /* @__PURE__ */ i(Ln, {})
   ] });
-}, kn = y(xn)`
+}, kn = C(xn)`
   svg circle {
     stroke: #ffffff;
   }
-`, $n = y.img`
+`, $n = C.img`
   transform: none;
 
   ${(e) => e.imageSize && k`
@@ -2378,7 +2377,7 @@ const Ut = 300, T1 = ({
   vertical-align: middle;
   position: relative;
   ${(e) => !e.loaded && "display:none;"}
-`, Ln = y.div`
+`, Ln = C.div`
   height: 100%;
   display: inline-block;
   vertical-align: middle;
@@ -2391,16 +2390,16 @@ const Ut = 300, T1 = ({
   return [t, o];
 }, Sn = ({ attrs: e, htmlBody: t }) => {
   var Se;
-  const n = j("Escape"), o = j("ArrowLeft"), r = j("ArrowRight"), [s, a] = w(1), [d, c] = w({ top: 0, left: 0, x: 0, y: 0 }), [l, u] = w(!1), [h, f] = Mn(), [m, C] = w(null), [g, p] = w(null), S = L(null), R = L(null), N = L(null), z = L(null), Z = L(null), [_e, qe] = w(null);
+  const n = j("Escape"), o = j("ArrowLeft"), r = j("ArrowRight"), [s, a] = w(1), [d, c] = w({ top: 0, left: 0, x: 0, y: 0 }), [l, u] = w(!1), [f, h] = Mn(), [m, p] = w(null), [g, y] = w(null), S = L(null), R = L(null), V = L(null), z = L(null), Z = L(null), [_e, qe] = w(null);
   v(() => {
-    n && C(null);
+    n && p(null);
   }, [n]), v(() => {
     a(1);
   }, [m]), v(() => {
     var I, ee;
     if (m === null || R.current === null)
       return;
-    const x = R.current.firstElementChild, E = (I = N.current) == null ? void 0 : I.querySelector(".nav-left"), B = (ee = N.current) == null ? void 0 : ee.querySelector(".nav-right");
+    const x = R.current.firstElementChild, E = (I = V.current) == null ? void 0 : I.querySelector(".nav-left"), B = (ee = V.current) == null ? void 0 : ee.querySelector(".nav-right");
     if (g === "Right")
       J && B ? B.focus() : G && E && E.focus();
     else if (g === "Left")
@@ -2410,7 +2409,7 @@ const Ut = 300, T1 = ({
         return;
       x.focus();
     }
-  }, [m, R, N, g]), v(() => {
+  }, [m, R, V, g]), v(() => {
     if (o) {
       if (G)
         return Le();
@@ -2442,10 +2441,10 @@ const Ut = 300, T1 = ({
     const { src: x } = e;
     if (x) {
       const E = A.findIndex((B, I) => B.src === x);
-      C(E);
+      p(E);
     }
   }, [A, e]), Qe = M((x) => {
-    C(null);
+    p(null);
   }, []), $e = M(
     (x) => {
       a(x ? s + s * 0.25 : s - s * 0.25);
@@ -2488,20 +2487,20 @@ const Ut = 300, T1 = ({
     }
     return !1;
   }, [z, s]), Le = () => {
-    m !== null && (p("Left"), C(m - 1));
+    m !== null && (y("Left"), p(m - 1));
   }, Me = () => {
-    m !== null && (p("Right"), C(m + 1));
+    m !== null && (y("Right"), p(m + 1));
   }, G = m !== null && m > 0 && A.length > 1, J = m !== null && A.length - 1 > m;
   return /* @__PURE__ */ b(_, { children: [
     /* @__PURE__ */ i(Ye, { visible: m !== null, onClick: Qe, children: /* @__PURE__ */ b(
-      Nn,
+      Vn,
       {
-        onMouseDown: () => f(),
-        onMouseMove: () => f(),
-        onTouchStart: () => f(),
-        onKeyDown: () => f(),
+        onMouseDown: () => h(),
+        onMouseMove: () => h(),
+        onTouchStart: () => h(),
+        onKeyDown: () => h(),
         children: [
-          /* @__PURE__ */ i(Vn, { show: h.toString(), children: /* @__PURE__ */ i(
+          /* @__PURE__ */ i(Nn, { show: f.toString(), children: /* @__PURE__ */ i(
             zn,
             {
               ref: R,
@@ -2514,7 +2513,7 @@ const Ut = 300, T1 = ({
                 },
                 {
                   id: "lightbox-close",
-                  onClick: () => C(null),
+                  onClick: () => p(null),
                   icon: "lightbox-close",
                   ariaLabel: "Close"
                 }
@@ -2550,8 +2549,8 @@ const Ut = 300, T1 = ({
           /* @__PURE__ */ i(
             Bn,
             {
-              ref: N,
-              show: h.toString(),
+              ref: V,
+              show: f.toString(),
               buttons: [
                 {
                   id: "previous",
@@ -2574,7 +2573,7 @@ const Ut = 300, T1 = ({
               ]
             }
           ),
-          /* @__PURE__ */ b(Wn, { show: h.toString(), children: [
+          /* @__PURE__ */ b(Wn, { show: f.toString(), children: [
             /* @__PURE__ */ i(
               Dn,
               {
@@ -2639,7 +2638,7 @@ const Ut = 300, T1 = ({
           onClick: c,
           icon: l,
           className: u
-        }, h) => /* @__PURE__ */ i(
+        }, f) => /* @__PURE__ */ i(
           Hn,
           {
             circle: s.toString(),
@@ -2651,32 +2650,32 @@ const Ut = 300, T1 = ({
             "aria-label": d,
             children: /* @__PURE__ */ i(Q, { size: 24, symbol: { type: "Svg", content: l } })
           },
-          r + h.toString()
+          r + f.toString()
         )
       )
     }
   )
-), Xe = y.div`
+), Xe = C.div`
   transition: opacity 0.3s ease 0s;
   z-index: 5;
   ${(e) => e.show === "true" ? "opacity: 1;" : k`
           opacity: 0;
           pointer-events: none;
         `}
-`, En = y(xe)`
+`, En = C(xe)`
   display: inline-block !important;
 
   ${(e) => (e.alignment === "right" || e.alignment === "left") && k`
       float: ${e.alignment};
     `}
-`, Rn = y(Xe)`
+`, Rn = C(Xe)`
   position: fixed;
   display: flex;
   gap: ${(e) => {
   var t;
   return (t = e.theme.sizes) == null ? void 0 : t.normal;
 }};
-`, me = "39px", Hn = y(se)`
+`, me = "39px", Hn = C(se)`
   width: ${me};
   height: ${me};
   display: flex;
@@ -2741,7 +2740,7 @@ const Ut = 300, T1 = ({
           opacity: 0;
           pointer-events: none;
         `}
-`, zn = y(we)`
+`, zn = C(we)`
   top: ${(e) => {
   var t;
   return (t = e.theme.sizes) == null ? void 0 : t.large;
@@ -2750,7 +2749,7 @@ const Ut = 300, T1 = ({
   var t;
   return (t = e.theme.sizes) == null ? void 0 : t.large;
 }};
-`, Dn = y(we)`
+`, Dn = C(we)`
   bottom: ${(e) => {
   var t;
   return (t = e.theme.sizes) == null ? void 0 : t.large;
@@ -2758,7 +2757,7 @@ const Ut = 300, T1 = ({
   width: 100%;
   align-items: center;
   justify-content: center;
-`, Bn = y(we)`
+`, Bn = C(we)`
   display: block;
   button {
     position: fixed;
@@ -2776,7 +2775,7 @@ const Ut = 300, T1 = ({
 }};
     }
   }
-`, Tn = y(X)`
+`, Tn = C(X)`
   position: fixed;
   bottom: ${(e) => {
   var t;
@@ -2795,29 +2794,29 @@ const Ut = 300, T1 = ({
   var t;
   return (t = e.theme.fonts) == null ? void 0 : t.type;
 }};
-`, Ue = y(Xe)`
+`, Ue = C(Xe)`
   position: absolute;
   width: 100vw;
   height: 88px;
   left: 0px;
   z-index: 5;
-`, Nn = y.div`
+`, Vn = C.div`
   width: 100%;
-`, Vn = y(Ue)`
+`, Nn = C(Ue)`
   top: 0px;
   background-image: linear-gradient(
     to bottom,
     rgb(34, 34, 34, 0.8),
     rgba(34, 34, 34, 0)
   );
-`, Wn = y(Ue)`
+`, Wn = C(Ue)`
   bottom: 0px;
   background-image: linear-gradient(
     to top,
     rgb(34, 34, 34, 0.8),
     rgba(34, 34, 34, 0)
   );
-`, Zn = y.div`
+`, Zn = C.div`
   width: 100%;
   height: 100vh;
   overflow: auto;
@@ -2826,7 +2825,7 @@ const Ut = 300, T1 = ({
   white-space: nowrap;
   justify-content: center;
   cursor: ${(e) => e.isDraggable === "true" ? e.scrolling === "true" ? "grabbing" : "grab" : "auto"};
-`, In = y.img`
+`, In = C.img`
   cursor: pointer;
 `, On = H(
   ({
@@ -2838,17 +2837,17 @@ const Ut = 300, T1 = ({
     close: r = !1,
     ...s
   }, a) => {
-    const [d, c] = Fe(), [l, u] = Ae(!0), h = L(), f = L(U()), m = j("Escape");
+    const [d, c] = Fe(), [l, u] = Ae(!0), f = L(), h = L(U()), m = j("Escape");
     v(() => {
       (m || r) && c(!1);
     }, [m, r]), v(() => {
-      d && h.current && h.current.focus();
-    }, [d, h.current]), ae("router:changed", () => {
+      d && f.current && f.current.focus();
+    }, [d, f.current]), ae("router:changed", () => {
       c(!1);
     });
-    const C = M(
-      (p) => {
-        c(!1), o(p);
+    const p = M(
+      (y) => {
+        c(!1), o(y);
       },
       [o, c]
     );
@@ -2857,17 +2856,17 @@ const Ut = 300, T1 = ({
         c(!1);
       }
     }));
-    const g = M(() => ye(f.current, () => {
+    const g = M(() => ye(h.current, () => {
       c(!1);
-    }), [f.current]);
+    }), [h.current]);
     return /* @__PURE__ */ b(_, { children: [
-      /* @__PURE__ */ i(Ye, { visible: d, onClick: C, children: /* @__PURE__ */ b(
+      /* @__PURE__ */ i(Ye, { visible: d, onClick: p, children: /* @__PURE__ */ b(
         An,
         {
           className: $(
             e,
             "humany-modal",
-            `humany-modal-${f.current}`
+            `humany-modal-${h.current}`
           ),
           css: l,
           tabIndex: -1,
@@ -2879,7 +2878,7 @@ const Ut = 300, T1 = ({
               {
                 onClick: () => c(!1),
                 tabIndex: 0,
-                ref: h,
+                ref: f,
                 children: /* @__PURE__ */ i(Q, { symbol: { type: "Svg", content: "close" } })
               }
             ),
@@ -2888,13 +2887,13 @@ const Ut = 300, T1 = ({
         }
       ) }),
       oe.cloneElement(n, {
-        onClick: (p) => {
+        onClick: (y) => {
           c(), g();
         }
       })
     ] });
   }
-), An = y.div`
+), An = C.div`
   font-family: ${(e) => {
   var t;
   return (t = e.theme.fonts) == null ? void 0 : t.type;
@@ -2926,11 +2925,11 @@ const Ut = 300, T1 = ({
   confirmLabel: d = ""
 }) => {
   const c = L(), l = M(() => {
-    var h;
-    r(), (h = c == null ? void 0 : c.current) == null || h.close();
+    var f;
+    r(), (f = c == null ? void 0 : c.current) == null || f.close();
   }, [r]), u = M(() => {
-    var h;
-    s(), (h = c == null ? void 0 : c.current) == null || h.close();
+    var f;
+    s(), (f = c == null ? void 0 : c.current) == null || f.close();
   }, [s]);
   return /* @__PURE__ */ b(
     Fn,
@@ -2947,7 +2946,7 @@ const Ut = 300, T1 = ({
       ]
     }
   );
-}, Fn = y(On)`
+}, Fn = C(On)`
   display: block;
 
   span {
@@ -2965,7 +2964,7 @@ const Ut = 300, T1 = ({
 }};
     }
   }
-`, Pn = y(se)`
+`, Pn = C(se)`
   display: inline-block;
   min-width: 50px;
   ${(e) => {
@@ -2995,7 +2994,7 @@ const Ut = 300, T1 = ({
   &:focus-visible {
     ${O}
   }
-`, jn = y(se)`
+`, jn = C(se)`
   display: inline-block;
   min-width: 50px;
   ${(e) => {
@@ -3031,10 +3030,10 @@ const Ut = 300, T1 = ({
     /* @__PURE__ */ i("span", { children: n }),
     /* @__PURE__ */ i("ul", { children: /* @__PURE__ */ i("li", { children: o }) })
   ] })
-] }), Kn = y.div`
+] }), Kn = C.div`
   display: flex;
   flex-wrap: wrap;
-`, Yn = y.div`
+`, Yn = C.div`
   ${(e) => ie(e)(
   "h2",
   k`
@@ -3044,7 +3043,7 @@ const Ut = 300, T1 = ({
         font-size: 7em;
       `
 )}
-`, Xn = y.div`
+`, Xn = C.div`
   margin-left: ${(e) => {
   var t;
   return (t = e.theme.sizes) == null ? void 0 : t.medium;
@@ -3071,7 +3070,7 @@ const Ut = 300, T1 = ({
   return (t = e.theme.fonts) == null ? void 0 : t.small;
 }};
   }
-`, Un = y.div`
+`, Un = C.div`
   margin-top: ${(e) => {
   var t;
   return (t = e.theme.sizes) == null ? void 0 : t.medium;
@@ -3158,31 +3157,31 @@ const P1 = ({
   sticky: o = !1,
   ...r
 }) => {
-  const [s, a] = w(!1), d = L(U()), c = L(), [{ x: l, y: u }, h] = je(s, d.current, c.current), f = (C) => {
-    const { target: g } = C;
+  const [s, a] = w(!1), d = L(U()), c = L(), [{ x: l, y: u }, f] = je(s, d.current, c.current), h = (p) => {
+    const { target: g } = p;
     !c.current || !g || c.current !== g && !c.current.contains(g) && a(!1);
   };
   v(() => {
     if (o)
-      return window.addEventListener("click", f), () => {
-        window.removeEventListener("click", f);
+      return window.addEventListener("click", h), () => {
+        window.removeEventListener("click", h);
       };
   }, [s, o]);
   const m = M(
-    (C, g) => {
-      h(C, c.current), a(g);
+    (p, g) => {
+      f(p, c.current), a(g);
     },
-    [h, a]
+    [f, a]
   );
   return /* @__PURE__ */ b(
     Gn,
     {
       ref: c,
       className: "humany-tooltip-trigger",
-      onMouseEnter: o ? void 0 : (C) => m(C, !0),
-      onMouseLeave: o ? void 0 : (C) => m(C, !1),
-      onTouchEnd: o ? (C) => m(C, !s) : void 0,
-      onClick: o ? (C) => m(C, !s) : void 0,
+      onMouseEnter: o ? void 0 : (p) => m(p, !0),
+      onMouseLeave: o ? void 0 : (p) => m(p, !1),
+      onTouchEnd: o ? (p) => m(p, !s) : void 0,
+      onClick: o ? (p) => m(p, !s) : void 0,
       children: [
         t,
         s && /* @__PURE__ */ i(q, { children: /* @__PURE__ */ i(
@@ -3198,10 +3197,10 @@ const P1 = ({
       ]
     }
   );
-}, Gn = y.div`
+}, Gn = C.div`
   display: flex;
   align-items: center;
-`, Jn = y.div`
+`, Jn = C.div`
   color: #ffffff;
   background: #161616;
   border-radius: ${(e) => e.theme.borderRadius};
@@ -3262,17 +3261,17 @@ const P1 = ({
           }
         };
       if (typeof a == "object") {
-        const { enter: h, exit: f } = a;
+        const { enter: f, exit: h } = a;
         return {
           enter: {
             transitionKeys: (l = a.enter) == null ? void 0 : l.type,
             duration: r ? typeof r == "number" ? r : r.enter : 200,
-            easing: h.easing ? h.easing : "ease-in"
+            easing: f.easing ? f.easing : "ease-in"
           },
           exit: {
             transitionKeys: (u = a.enter) == null ? void 0 : u.type,
             duration: r ? typeof r == "number" ? r : r.enter : 200,
-            easing: f.easing ? f.easing : "ease-out"
+            easing: h.easing ? h.easing : "ease-out"
           }
         };
       }
@@ -3290,7 +3289,7 @@ const P1 = ({
       mountOnEnter: n,
       unmountOnExit: o,
       onEnter: (l) => l.clientHeight,
-      children: (l) => s && s(l, c && he.compose(l, c))
+      children: (l) => s && s(l, c && fe.compose(l, c))
     }
   );
 }, e1 = H(
@@ -3304,47 +3303,47 @@ const P1 = ({
     ...s
   }, a) => {
     const d = T(), c = () => {
-      const { implementation: h } = d.get("$widget");
-      return h.widgets.get(o);
+      const { implementation: f } = d.get("$widget");
+      return f.widgets.get(o);
     };
     v(() => {
-      const h = c();
-      return h == null || h.activate(r).then(() => h.invoke("attach")), () => {
-        h == null || h.deactivate();
+      const f = c();
+      return f == null || f.activate(r).then(() => f.invoke("attach")), () => {
+        f == null || f.deactivate();
       };
     }, [o]);
-    const l = (h) => {
-      const f = c(), m = h.currentTarget;
-      if (f) {
-        const C = () => {
-          f.invoke("renderState").then(
-            (g) => g === ne.open ? f.invoke("close") : f.invoke("open")
+    const l = (f) => {
+      const h = c(), m = f.currentTarget;
+      if (h) {
+        const p = () => {
+          h.invoke("renderState").then(
+            (g) => g === ne.open ? h.invoke("close") : h.invoke("open")
           ).then(() => {
-            f.events.subscribeOnce(
+            h.events.subscribeOnce(
               "widget:area-rendered",
-              (g, p) => {
+              (g, y) => {
                 d.get(
                   "widgetDOMElement"
-                ) && f.events.dispatch("widget:modal-opened", {
-                  name: f.name,
+                ) && h.events.dispatch("widget:modal-opened", {
+                  name: h.name,
                   ref: m
                 });
               }
             );
           });
         };
-        f.state === ht.Deactivated ? f.activate(r).then(() => f.invoke("attach")).then(C) : C();
+        h.state === ft.Deactivated ? h.activate(r).then(() => h.invoke("attach")).then(p) : p();
       }
-    }, u = (h) => {
-      h.key === "Enter" && (h.preventDefault(), l(h));
+    }, u = (f) => {
+      f.key === "Enter" && (f.preventDefault(), l(f));
     };
     return /* @__PURE__ */ i(
       xe,
       {
         className: $(e, "humany-widget-link"),
         onKeyDown: u,
-        onClick: (h) => {
-          n(h), l(h);
+        onClick: (f) => {
+          n(f), l(f);
         },
         ...s,
         ref: a,
@@ -3372,7 +3371,7 @@ const P1 = ({
       }
     ) }) : null;
   }
-), t1 = y.div`
+), t1 = C.div`
   background-color: #ffffff;
   position: absolute;
   top: 0;
@@ -3393,16 +3392,16 @@ export {
   p1 as Checkbox,
   Tt as ColumnContext,
   Ze as ComponentNodeContext,
-  Nt as ComponentPropertyContext,
+  Vt as ComponentPropertyContext,
   I1 as Confirm,
   Bt as ContainerContext,
   Wt as ConversationContext,
   qn as DateFormats,
   T1 as Drawer,
   Xt as DrawerAnimationType,
-  N1 as Dropdown,
+  V1 as Dropdown,
   nn as Empty,
-  V1 as Grid,
+  N1 as Grid,
   Ke as Html,
   sn as Icon,
   W1 as Input,
@@ -3417,7 +3416,7 @@ export {
   cn as Paragraph,
   q as Portal,
   un as RouteLink,
-  Vt as RoutingContext,
+  Nt as RoutingContext,
   Be as StyledText,
   Q as SymbolBadge,
   A1 as TabStop,
@@ -3450,7 +3449,7 @@ export {
   Pt as list,
   z1 as paddedBorderTabStyle,
   Et as processHtmlString,
-  he as transitionComposer,
+  fe as transitionComposer,
   C1 as useAction,
   y1 as useChildren,
   b1 as useColumns,
@@ -3462,7 +3461,7 @@ export {
   Zt as useContext,
   x1 as useConversation,
   w1 as useDispatch,
-  V as useEventListener,
+  N as useEventListener,
   It as useEvents,
   W as useIsMounted,
   k1 as useIsTabbing,