@telia-ace/widget-ui 1.1.2-rc.1 → 1.1.2-rc.3

package/index.mjs

@@ -38,24 +38,30 @@ const vt = (e) => e === "entering" || e === "entered", xt = (e) => e === "exitin
     in: "transform: scale(1);",
     out: "transform: scale(0);"
   }
-}, wt = ["slide-up", "slide-down", "slide-left", "slide-right", "scale"], he = {
+}, wt = [
+  "slide-up",
+  "slide-down",
+  "slide-left",
+  "slide-right",
+  "scale"
+], he = {
   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))
       return r && r.length > 0 ? k`
-                    ${r && r.length > 0 && r.map((d) => F[d] ? F[d].in : "")}
-                    transition: ${s} ${n.duration}ms ${n.easing};
-                ` : "";
+          ${r && r.length > 0 && r.map((d) => F[d] ? F[d].in : "")}
+          transition: ${s} ${n.duration}ms ${n.easing};
+        ` : "";
     const a = r && r.length > 0 && k`
-                ${r.map((d) => F[d] ? F[d].out : "")}
-            `;
+        ${r.map((d) => F[d] ? F[d].out : "")}
+      `;
     if (xt(e)) {
       const d = o.transitionKeys.split(" ");
       return d && d.length > 0 && e === "exiting" ? k`
-                    ${a};
-                    ${d.map((c) => F[c] ? F[c].out : "")}
-                    transition: ${s} ${o.duration}ms ${o.easing};
-                ` : a;
+          ${a};
+          ${d.map((c) => F[c] ? F[c].out : "")}
+          transition: ${s} ${o.duration}ms ${o.easing};
+        ` : a;
     }
   },
   composeViewTransition: (e, t, n) => {
@@ -116,15 +122,18 @@ const De = () => {
     return "edge-chromium";
   if ((f || l) && c)
     return "blink";
-}, kt = ["string", "number"], D = (e) => Object.keys(e).reduce((t, n) => {
-  const o = typeof e[n] > "u" ? "" : e[n], r = typeof o;
-  if (kt.indexOf(r) > -1) {
-    const s = n.substring(0, 5);
-    s === "data-" || s === "aria-" ? t[st(n)] = o.toString() : n.substring(0, 4) !== "css-" && (t[n] = o.toString());
-  } else
-    t[n] = o;
-  return t;
-}, {}), g1 = (e, t) => e.get("seoConfiguration") ? /* @__PURE__ */ i(nn, { ...t }) : null, $t = (e) => new RegExp("^#", "i").test(e), Lt = (e) => ({ children: t, ...n }) => {
+}, kt = ["string", "number"], D = (e) => Object.keys(e).reduce(
+  (t, n) => {
+    const o = typeof e[n] > "u" ? "" : e[n], r = typeof o;
+    if (kt.indexOf(r) > -1) {
+      const s = n.substring(0, 5);
+      s === "data-" || s === "aria-" ? t[st(n)] = o.toString() : n.substring(0, 4) !== "css-" && (t[n] = o.toString());
+    } else
+      t[n] = o;
+    return t;
+  },
+  {}
+), g1 = (e, t) => e.get("seoConfiguration") ? /* @__PURE__ */ i(nn, { ...t }) : null, $t = (e) => new RegExp("^#", "i").test(e), Lt = (e) => ({ children: t, ...n }) => {
   const {
     implementation: o,
     name: r
@@ -150,8 +159,8 @@ const De = () => {
   return Object.keys(We(e)).forEach((n) => {
     n.indexOf("css-") > -1 && (t += `${n.replace("css-", "")}:${e[n]};`);
   }), k`
-        ${t}
-    `;
+    ${t}
+  `;
 }, St = (e, t) => {
   let n = "";
   const o = () => {
@@ -175,11 +184,15 @@ const De = () => {
       r = c;
     }
   }
-  const a = ((d, c, l) => l[d] ? `${c}${l[d]}` : `${c}${d}`)(o, r, e.theme.typographyVariantMapping || {});
+  const a = ((d, c, l) => l[d] ? `${c}${l[d]}` : `${c}${d}`)(
+    o,
+    r,
+    e.theme.typographyVariantMapping || {}
+  );
   return k`
-        ${a} {
-            ${n}
-        }
+      ${a} {
+        ${n}
+      }
     `;
 };
 function Et(e, t) {
@@ -190,28 +203,30 @@ const Rt = (e) => (t) => /* @__PURE__ */ i(Sn, { attrs: t, htmlBody: e }), Ht =
     a: Lt(e),
     img: Rt(t)
   }
-}), zt = (e) => St(e, "a"), se = H(({ className: e, children: t, ...n }, o) => /* @__PURE__ */ i(
-  Dt,
-  {
-    type: "button",
-    className: $(e, "humany-button"),
-    ...D(n),
-    ref: o,
-    children: t
-  }
-)), Dt = y.button`
-    -webkit-appearance: button;
-    text-transform: none;
-    overflow: visible;
-    outline: none;
-    border: none;
-    background-color: transparent;
-    cursor: pointer;
-    font-family: inherit;
-    font-size: inherit;
-    line-height: normal;
-    margin: 0;
-    padding: 0;
+}), zt = (e) => St(e, "a"), se = H(
+  ({ className: e, children: t, ...n }, o) => /* @__PURE__ */ i(
+    Dt,
+    {
+      type: "button",
+      className: $(e, "humany-button"),
+      ...D(n),
+      ref: o,
+      children: t
+    }
+  )
+), Dt = y.button`
+  -webkit-appearance: button;
+  text-transform: none;
+  overflow: visible;
+  outline: none;
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: normal;
+  margin: 0;
+  padding: 0;
 `, p1 = ({
   onChange: e = () => {
   },
@@ -234,7 +249,9 @@ const Rt = (e) => (t) => /* @__PURE__ */ i(Sn, { attrs: t, htmlBody: e }), Ht =
   type: "",
   name: "",
   branch: ""
-}), Nt = K({}), Vt = K(null), Wt = K(null), pe = () => P(Ze), T = () => P(Bt), C1 = (e, t) => {
+}), Nt = K(
+  {}
+), Vt = 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) => {
@@ -433,18 +450,24 @@ const Rt = (e) => (t) => /* @__PURE__ */ i(Sn, { attrs: t, htmlBody: e }), Ht =
     };
   }, [r]), t;
 }, Oe = () => P(Vt), S1 = (e) => {
-  const t = T(), n = Oe(), [o, r] = w({ name: "", params: {} }), s = W();
+  const t = T(), n = Oe(), [o, r] = w({
+    name: "",
+    params: {}
+  }), s = W();
   return v(() => {
     const a = (e || t).get("$widget");
     if (!a)
       return;
     const { events: d } = a;
-    return d.subscribe("router:change", (l, { next: { routeData: u } }) => {
-      if (s.current) {
-        const { name: h, params: f } = u;
-        Re(f), r({ name: h, params: f });
+    return d.subscribe(
+      "router:change",
+      (l, { next: { routeData: u } }) => {
+        if (s.current) {
+          const { name: h, params: f } = u;
+          Re(f), r({ name: h, params: f });
+        }
       }
-    });
+    );
   }, [s, e, t]), v(() => {
     if (n && n.history && s.current) {
       const a = n.getRouteData(), { name: d, params: c } = a;
@@ -578,15 +601,17 @@ const Rt = (e) => (t) => /* @__PURE__ */ i(Sn, { attrs: t, htmlBody: e }), Ht =
     r !== e && t();
   });
   return () => n(e);
-}, be = H(({ className: e, children: t, ...n }, o) => /* @__PURE__ */ i(
-  "span",
-  {
-    ref: o,
-    className: $(e, "humany-text"),
-    ...D(n),
-    children: t
-  }
-)), Pe = (e) => k`
+}, be = H(
+  ({ className: e, children: t, ...n }, o) => /* @__PURE__ */ i(
+    "span",
+    {
+      ref: o,
+      className: $(e, "humany-text"),
+      ...D(n),
+      children: t
+    }
+  )
+), Pe = (e) => k`
   display: flex;
   justify-content: center;
   flex-direction: column;
@@ -853,7 +878,11 @@ const Rt = (e) => (t) => /* @__PURE__ */ i(Sn, { attrs: t, htmlBody: e }), Ht =
       return /* @__PURE__ */ i(
         "i",
         {
-          className: $(s, "humany-icon", "humany-custom-icon"),
+          className: $(
+            s,
+            "humany-icon",
+            "humany-custom-icon"
+          ),
           title: e,
           style: { ...u, ...r },
           ...l,
@@ -1194,9 +1223,36 @@ const Rt = (e) => (t) => /* @__PURE__ */ i(Sn, { attrs: t, htmlBody: e }), Ht =
           ] });
         case "options":
           return /* @__PURE__ */ b("svg", { viewBox: "0 0 16 2", ...u, children: [
-            /* @__PURE__ */ i("circle", { cx: "15", cy: "1", r: "1", transform: "rotate(90 15 1)", fill: "black" }),
-            /* @__PURE__ */ i("circle", { cx: "1", cy: "1", r: "1", transform: "rotate(90 1 1)", fill: "black" }),
-            /* @__PURE__ */ i("circle", { cx: "8", cy: "1", r: "1", transform: "rotate(90 8 1)", fill: "black" })
+            /* @__PURE__ */ i(
+              "circle",
+              {
+                cx: "15",
+                cy: "1",
+                r: "1",
+                transform: "rotate(90 15 1)",
+                fill: "black"
+              }
+            ),
+            /* @__PURE__ */ i(
+              "circle",
+              {
+                cx: "1",
+                cy: "1",
+                r: "1",
+                transform: "rotate(90 1 1)",
+                fill: "black"
+              }
+            ),
+            /* @__PURE__ */ i(
+              "circle",
+              {
+                cx: "8",
+                cy: "1",
+                r: "1",
+                transform: "rotate(90 8 1)",
+                fill: "black"
+              }
+            )
           ] });
         case "browse":
           return /* @__PURE__ */ b("svg", { viewBox: "0 0 24 24", ...u, children: [
@@ -1401,7 +1457,7 @@ const Rt = (e) => (t) => /* @__PURE__ */ i(Sn, { attrs: t, htmlBody: e }), Ht =
       ) : null;
   }
 }, jt = y.svg`
-    transform: rotate(180deg);
+  transform: rotate(180deg);
 `, Kt = {
   h1: "h1",
   h2: "h2",
@@ -1411,7 +1467,12 @@ const Rt = (e) => (t) => /* @__PURE__ */ i(Sn, { attrs: t, htmlBody: e }), Ht =
   h6: "h6",
   p: "p",
   span: "span"
-}, X = ({ variant: e, component: t, className: n, children: o }) => {
+}, X = ({
+  variant: e,
+  component: t,
+  className: n,
+  children: o
+}) => {
   const { typographyVariantMapping: r = {} } = Zt(), s = {
     ...Kt,
     ...r
@@ -1740,7 +1801,7 @@ const Ut = 300, T1 = ({
   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`
-    display: none;
+  display: none;
 `, V1 = H(
   ({ children: e, columns: t, gap: n, className: o, ...r }, s) => /* @__PURE__ */ i(
     rn,
@@ -1755,12 +1816,12 @@ const Ut = 300, T1 = ({
     }
   )
 ), rn = y.div`
-    display: grid;
-    grid-template-columns: repeat(${(e) => e["data-columns"]}, 1fr);
-    grid-gap: ${(e) => e["data-gap"]};
-    justify-content: center;
-    grid-auto-rows: max-content;
-    ${Mt}
+  display: grid;
+  grid-template-columns: repeat(${(e) => e["data-columns"]}, 1fr);
+  grid-gap: ${(e) => e["data-gap"]};
+  justify-content: center;
+  grid-auto-rows: max-content;
+  ${Mt}
 `, Ke = H(
   ({ htmlParseInstruction: e = null, className: t, html: n, ...o }, r) => {
     const s = T(), [a, d] = w();
@@ -1854,6 +1915,7 @@ const Ut = 300, T1 = ({
   ({ className: e, items: t, renderItem: n, renderLi: o = !1, ...r }, s) => /* @__PURE__ */ i(
     "ul",
     {
+      "aria-live": "polite",
       className: $(e, "humany-list"),
       "data-item-count": t.length,
       ...D(r),
@@ -1903,7 +1965,15 @@ const Ut = 300, T1 = ({
       ref: f,
       children: [
         t || (e || n || o ? /* @__PURE__ */ i(cn, { symbol: a, header: e, text: n, html: o }) : null),
-        d.length ? /* @__PURE__ */ i(an, { items: d, renderItem: c, renderLi: l, ...u }) : null,
+        d.length ? /* @__PURE__ */ i(
+          an,
+          {
+            items: d,
+            renderItem: c,
+            renderLi: l,
+            ...u
+          }
+        ) : null,
         s
       ]
     }
@@ -1944,8 +2014,16 @@ const Ut = 300, T1 = ({
     t && u(t, 1)
   ] });
 }, un = H(
-  ({ className: e, onClick: t = () => {
-  }, name: n = "", to: o = "", params: r = {}, children: s, ...a }, d) => {
+  ({
+    className: e,
+    onClick: t = () => {
+    },
+    name: n = "",
+    to: o = "",
+    params: r = {},
+    children: s,
+    ...a
+  }, d) => {
     const c = Oe(), l = T();
     if (!c)
       return null;
@@ -1960,26 +2038,33 @@ const Ut = 300, T1 = ({
     };
     if (n) {
       if (!(c.routes || []).find((g) => g.name === n))
-        return process.env.NODE_ENV !== "production" && ue.warn(`Unable to create route. No route named "${n}" exist.`), /* @__PURE__ */ i(
+        return process.env.NODE_ENV !== "production" && ue.warn(
+          `Unable to create route. No route named "${n}" exist.`
+        ), /* @__PURE__ */ i(
           de,
           {
             ...h,
             onClick: (g) => {
-              t(g), g.preventDefault(), process.env.NODE_ENV !== "production" && ue.warn(`Unable to navigate. No route named "${n}" exist.`);
+              t(g), g.preventDefault(), process.env.NODE_ENV !== "production" && ue.warn(
+                `Unable to navigate. No route named "${n}" exist.`
+              );
             },
             children: s
           }
         );
-      const C = Object.keys(r).reduce((g, p) => {
-        const S = r[p];
-        if (Array.isArray(S)) {
-          if (S.length === 0)
-            return g;
-          g[p] = S.map((R) => typeof R == "string" ? encodeURIComponent(R) : R).join(",");
-        } else
-          g[p] = typeof S == "string" ? encodeURIComponent(S) : S;
-        return g;
-      }, {});
+      const C = Object.keys(r).reduce(
+        (g, p) => {
+          const S = r[p];
+          if (Array.isArray(S)) {
+            if (S.length === 0)
+              return g;
+            g[p] = S.map((R) => typeof R == "string" ? encodeURIComponent(R) : R).join(",");
+          } else
+            g[p] = typeof S == "string" ? encodeURIComponent(S) : S;
+          return g;
+        },
+        {}
+      );
       try {
         u = c.generate(n, C || {});
       } catch {
@@ -2028,7 +2113,10 @@ const Ut = 300, T1 = ({
       role: n,
       as: d,
       tabIndex: o,
-      className: $(e, "humany-link", [!!t, "humany-disabled"]),
+      className: $(e, "humany-link", [
+        !!t,
+        "humany-disabled"
+      ]),
       onClick: (p) => {
         if (p.persist(), t) {
           p.preventDefault();
@@ -2067,12 +2155,12 @@ const Ut = 300, T1 = ({
     );
   }
 ), hn = y(un)`
-    ${(e) => e.disabled ? `
+  ${(e) => e.disabled ? `
       pointer-events: none;
       opacity: .7;
     ` : "cursor: pointer;"}
 `, fn = y.a`
-    ${(e) => e.disabled ? `
+  ${(e) => e.disabled ? `
     pointer-events: none;
     opacity: .7;
   ` : "cursor: pointer;"}
@@ -2112,35 +2200,35 @@ const Ut = 300, T1 = ({
     }
   );
 }, mn = y.div`
-    background: rgba(0, 0, 0, 0.6);
-    min-width: 100%;
-    min-height: 100%;
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    left: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 7;
+  background: rgba(0, 0, 0, 0.6);
+  min-width: 100%;
+  min-height: 100%;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 7;
 
-    transition: ${(e) => e.duration}ms;
-    opacity: 0;
+  transition: ${(e) => e.duration}ms;
+  opacity: 0;
 
-    &.humany-overlay-transition-enter {
-        opacity: 0.1;
-    }
-    &.humany-overlay-transition-enter-active,
-    &.humany-overlay-transition-enter-done,
-    &.humany-overlay-transition-exit {
-        opacity: 1;
-    }
+  &.humany-overlay-transition-enter {
+    opacity: 0.1;
+  }
+  &.humany-overlay-transition-enter-active,
+  &.humany-overlay-transition-enter-done,
+  &.humany-overlay-transition-exit {
+    opacity: 1;
+  }
 
-    &.humany-overlay-transition-exit-active,
-    &.humany-overlay-transition-exit-done {
-        opacity: 0;
-    }
+  &.humany-overlay-transition-exit-active,
+  &.humany-overlay-transition-exit-done {
+    opacity: 0;
+  }
 `, gn = Ne`
   100% {
     transform: rotate(360deg);
@@ -2159,65 +2247,72 @@ const Ut = 300, T1 = ({
     stroke-dashoffset: -124px;
   }
 `, Cn = y.svg`
-    animation: ${gn} 2s linear infinite;
-    height: 100%;
-    transform-origin: center center;
-    width: 100%;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    margin: auto;
-    transition: 200ms ease-out opacity;
+  animation: ${gn} 2s linear infinite;
+  height: 100%;
+  transform-origin: center center;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+  transition: 200ms ease-out opacity;
 `, yn = y.div`
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: 100%;
-    width: 100%;
-    pointer-events: ${(e) => e["data-loading"] ? "all" : "none"};
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    transition: 200ms ease-out opacity;
-    box-sizing: border-box;
-    overflow: hidden;
-    svg {
-        opacity: ${(e) => e["data-loading"] ? "1" : "0"};
-    }
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 100%;
+  width: 100%;
+  pointer-events: ${(e) => e["data-loading"] ? "all" : "none"};
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  transition: 200ms ease-out opacity;
+  box-sizing: border-box;
+  overflow: hidden;
+  svg {
+    opacity: ${(e) => e["data-loading"] ? "1" : "0"};
+  }
 `, bn = y.div`
-    position: relative;
-    margin: 0 auto;
-    width: 100px;
-    &:before {
-        content: '';
-        display: block;
-        padding-top: 100%;
-    }
+  position: relative;
+  margin: 0 auto;
+  width: 100px;
+  &:before {
+    content: '';
+    display: block;
+    padding-top: 100%;
+  }
 `, vn = y.circle`
-    stroke-dasharray: 1, 200;
-    stroke-dashoffset: 0;
-    animation: ${pn} 1.5s ease-in-out infinite;
-    stroke-linecap: round;
-    stroke: ${(e) => {
+  stroke-dasharray: 1, 200;
+  stroke-dashoffset: 0;
+  animation: ${pn} 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__ */ i(yn, { className: $("humany-loader", e), "data-loading": t, children: /* @__PURE__ */ i(bn, { className: "humany-spinner", children: /* @__PURE__ */ i(Cn, { viewBox: "25 25 50 50", children: /* @__PURE__ */ i(
-  vn,
+  stroke-width: 2px;
+`, xn = ({ className: e, loading: t = !1 }) => /* @__PURE__ */ i(
+  yn,
   {
-    cx: "50",
-    cy: "50",
-    r: "20",
-    fill: "none",
-    "stroke-width": "2",
-    "stroke-miterlimit": "10"
-  }
-) }) }) }), wn = ({
+    className: $("humany-loader", e),
+    "data-loading": t,
+    children: /* @__PURE__ */ i(bn, { className: "humany-spinner", children: /* @__PURE__ */ i(Cn, { viewBox: "25 25 50 50", children: /* @__PURE__ */ i(
+      vn,
+      {
+        cx: "50",
+        cy: "50",
+        r: "20",
+        fill: "none",
+        "stroke-width": "2",
+        "stroke-miterlimit": "10"
+      }
+    ) }) })
+  }
+), wn = ({
   zoomState: e,
   image: t,
   changeZoom: n,
@@ -2834,81 +2929,90 @@ const Ut = 300, T1 = ({
     var h;
     s(), (h = c == null ? void 0 : c.current) == null || h.close();
   }, [s]);
-  return /* @__PURE__ */ b(Fn, { className: e, trigger: t, ref: c, onOverlayClick: l, children: [
-    n && /* @__PURE__ */ i(Be, { children: n }),
-    o && /* @__PURE__ */ i(Be, { children: o }),
-    d && /* @__PURE__ */ i(Pn, { onClick: u, children: d }),
-    a && /* @__PURE__ */ i(jn, { onClick: l, children: a })
-  ] });
+  return /* @__PURE__ */ b(
+    Fn,
+    {
+      className: e,
+      trigger: t,
+      ref: c,
+      onOverlayClick: l,
+      children: [
+        n && /* @__PURE__ */ i(Be, { children: n }),
+        o && /* @__PURE__ */ i(Be, { children: o }),
+        d && /* @__PURE__ */ i(Pn, { onClick: u, children: d }),
+        a && /* @__PURE__ */ i(jn, { onClick: l, children: a })
+      ]
+    }
+  );
 }, Fn = y(On)`
-    display: block;
+  display: block;
 
-    span {
-        display: block;
-        margin: 0 0 ${(e) => {
+  span {
+    display: block;
+    margin: 0 0 ${(e) => {
   var t;
   return (t = e.theme.sizes) == null ? void 0 : t.normal;
 }};
 
-        &:first-of-type:not(:only-of-type) {
-            font-weight: 700;
-            margin: 0 0 ${(e) => {
+    &:first-of-type:not(:only-of-type) {
+      font-weight: 700;
+      margin: 0 0 ${(e) => {
   var t;
   return (t = e.theme.sizes) == null ? void 0 : t.small;
 }};
-        }
     }
+  }
 `, Pn = y(se)`
-    display: inline-block;
-    min-width: 50px;
-    ${(e) => {
+  display: inline-block;
+  min-width: 50px;
+  ${(e) => {
   var t, n;
   return `padding: ${(t = e.theme.sizes) == null ? void 0 : t.small} ${(n = e.theme.sizes) == null ? void 0 : n.normal};`;
 }}
-    ${(e) => e.theme.borderRadius && `border-radius: ${e.theme.borderRadius};`}
+  ${(e) => e.theme.borderRadius && `border-radius: ${e.theme.borderRadius};`}
   color: #FFFFFF;
-    background-color: ${(e) => {
+  background-color: ${(e) => {
   var t;
   return (t = e.theme.colors) == null ? void 0 : t.primary;
 }};
-    border: 1px solid ${(e) => {
+  border: 1px solid ${(e) => {
   var t;
   return (t = e.theme.colors) == null ? void 0 : t.primary;
 }};
 
-    margin: 0 ${(e) => {
+  margin: 0 ${(e) => {
   var t;
   return (t = e.theme.sizes) == null ? void 0 : t.small;
 }} 0 0;
 
-    &:focus {
-        background-color: transparent;
-    }
+  &:focus {
+    background-color: transparent;
+  }
 
-    &:focus-visible {
-        ${O}
-    }
+  &:focus-visible {
+    ${O}
+  }
 `, jn = y(se)`
-    display: inline-block;
-    min-width: 50px;
-    ${(e) => {
+  display: inline-block;
+  min-width: 50px;
+  ${(e) => {
   var t, n;
   return `padding: ${(t = e.theme.sizes) == null ? void 0 : t.small} ${(n = e.theme.sizes) == null ? void 0 : n.normal};`;
 }}
-    ${(e) => e.theme.borderRadius && `border-radius: ${e.theme.borderRadius};`}
+  ${(e) => e.theme.borderRadius && `border-radius: ${e.theme.borderRadius};`}
   background-color: transparent;
-    color: ${(e) => {
+  color: ${(e) => {
   var t;
   return (t = e.theme.colors) == null ? void 0 : t.text;
 }};
-    border: 1px solid ${(e) => {
+  border: 1px solid ${(e) => {
   var t;
   return (t = e.theme.colors) == null ? void 0 : t.text;
 }};
 
-    &:focus-visible {
-        ${O};
-    }
+  &:focus-visible {
+    ${O};
+  }
 `, O1 = ({
   header: e = "",
   link: t = "",
@@ -2925,55 +3029,55 @@ const Ut = 300, T1 = ({
     /* @__PURE__ */ i("ul", { children: /* @__PURE__ */ i("li", { children: o }) })
   ] })
 ] }), Kn = y.div`
-    display: flex;
-    flex-wrap: wrap;
+  display: flex;
+  flex-wrap: wrap;
 `, Yn = y.div`
-    ${(e) => ie(e)(
+  ${(e) => ie(e)(
   "h2",
   k`
-                padding: 0;
-                margin: 0;
-                color: gray;
-                font-size: 7em;
-            `
+        padding: 0;
+        margin: 0;
+        color: gray;
+        font-size: 7em;
+      `
 )}
 `, Xn = y.div`
-    margin-left: ${(e) => {
+  margin-left: ${(e) => {
   var t;
   return (t = e.theme.sizes) == null ? void 0 : t.medium;
 }};
 
-    ${(e) => {
+  ${(e) => {
   var t;
   return ie(e)(
     "h3",
     k`
-                text-transform: uppercase;
-                font-size: ${(t = e.theme.fonts) == null ? void 0 : t.normal};
-            `
+        text-transform: uppercase;
+        font-size: ${(t = e.theme.fonts) == null ? void 0 : t.normal};
+      `
   );
 }}
 
-    a {
-        color: ${(e) => {
+  a {
+    color: ${(e) => {
   var t;
   return (t = e.theme.colors) == null ? void 0 : t.link;
 }};
-        font-size: ${(e) => {
+    font-size: ${(e) => {
   var t;
   return (t = e.theme.fonts) == null ? void 0 : t.small;
 }};
-    }
+  }
 `, Un = y.div`
-    margin-top: ${(e) => {
+  margin-top: ${(e) => {
   var t;
   return (t = e.theme.sizes) == null ? void 0 : t.medium;
 }};
-    min-width: 100%;
+  min-width: 100%;
 
-    span {
-        font-weight: bold;
-    }
+  span {
+    font-weight: bold;
+  }
 `;
 class A1 extends ct {
   constructor() {
@@ -3018,19 +3122,39 @@ class A1 extends ct {
   }
 }
 const _n = H(
-  ({ className: e, description: t, text: n, children: o, ...r }, s) => /* @__PURE__ */ b(xe, { className: $(e, "humany-text-link"), ...r, ref: s, children: [
-    o,
-    /* @__PURE__ */ i(be, { children: n }),
-    t ? /* @__PURE__ */ i(Ke, { html: t, className: "humany-description" }) : null
-  ] })
+  ({ className: e, description: t, text: n, children: o, ...r }, s) => /* @__PURE__ */ b(
+    xe,
+    {
+      className: $(e, "humany-text-link"),
+      ...r,
+      ref: s,
+      children: [
+        o,
+        /* @__PURE__ */ i(be, { children: n }),
+        t ? /* @__PURE__ */ i(Ke, { html: t, className: "humany-description" }) : null
+      ]
+    }
+  )
 );
 var qn = /* @__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))(qn || {});
-const F1 = ({ className: e = "", format: t = "hh:mm", timestamp: n }) => /* @__PURE__ */ i("span", { className: $(e, "humany-timestamp"), children: Qn(n, t) }), Te = (e) => `0${e}`.slice(-2);
+const F1 = ({
+  className: e = "",
+  format: t = "hh:mm",
+  timestamp: n
+}) => /* @__PURE__ */ i("span", { className: $(e, "humany-timestamp"), children: Qn(n, t) }), Te = (e) => `0${e}`.slice(-2);
 function Qn(e, t) {
-  const n = new Date(e), o = n.toTimeString().split(" ")[0].split(":"), r = o.length > 1 ? `${o[0]}:${o[1]}` : o[0], s = n.getFullYear(), a = n.getMonth() + 1, d = n.getDate(), c = `${s}-${Te(a)}-${Te(d)}`;
+  const n = new Date(e), o = n.toTimeString().split(" ")[0].split(":"), r = o.length > 1 ? `${o[0]}:${o[1]}` : o[0], s = n.getFullYear(), a = n.getMonth() + 1, d = n.getDate(), c = `${s}-${Te(a)}-${Te(
+    d
+  )}`;
   return t === "yyyy-mm-dd" ? c : t === "hh:mm" ? r : `${c} ${r}`;
 }
-const P1 = ({ className: e, children: t, content: n, sticky: o = !1, ...r }) => {
+const P1 = ({
+  className: e,
+  children: t,
+  content: n,
+  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;
     !c.current || !g || c.current !== g && !c.current.contains(g) && a(!1);
@@ -3072,41 +3196,41 @@ const P1 = ({ className: e, children: t, content: n, sticky: o = !1, ...r }) =>
     }
   );
 }, Gn = y.div`
-    display: flex;
-    align-items: center;
+  display: flex;
+  align-items: center;
 `, Jn = y.div`
-    color: #ffffff;
-    background: #161616;
-    border-radius: ${(e) => e.theme.borderRadius};
-    padding: calc(${(e) => {
+  color: #ffffff;
+  background: #161616;
+  border-radius: ${(e) => e.theme.borderRadius};
+  padding: calc(${(e) => {
   var t;
   return (t = e.theme.sizes) == null ? void 0 : t.small;
 }} * 2);
-    font-size: ${(e) => {
+  font-size: ${(e) => {
   var t;
   return (t = e.theme.fonts) == null ? void 0 : t.normal;
 }};
-    font-family: ${(e) => {
+  font-family: ${(e) => {
   var t;
   return (t = e.theme.fonts) == null ? void 0 : t.type;
 }};
-    position: absolute;
-    z-index: 10;
+  position: absolute;
+  z-index: 10;
 
-    a {
-        color: ${(e) => e.color ? e.color : "inherit"};
-        text-decoration: none;
-    }
+  a {
+    color: ${(e) => e.color ? e.color : "inherit"};
+    text-decoration: none;
+  }
 
-    i,
-    svg {
-        margin-right: ${(e) => {
+  i,
+  svg {
+    margin-right: ${(e) => {
   var t;
   return (t = e.theme.sizes) == null ? void 0 : t.small;
 }};
-    }
+  }
 
-    ${(e) => {
+  ${(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;
 }};
@@ -3236,22 +3360,25 @@ const P1 = ({ className: e, children: t, content: n, sticky: o = !1, ...r }) =>
     return s ? /* @__PURE__ */ i(q, { elementId: e, parent: s, children: /* @__PURE__ */ i(
       t1,
       {
-        className: $("humany-widget-overlay-outlet", t),
+        className: $(
+          "humany-widget-overlay-outlet",
+          t
+        ),
         ref: o,
         children: n
       }
     ) }) : null;
   }
 ), t1 = y.div`
-    background-color: #ffffff;
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    z-index: 10;
-    width: 100%;
-    height: 100%;
+  background-color: #ffffff;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 10;
+  width: 100%;
+  height: 100%;
 `, Y1 = (e, t, n, o, r) => e.getAsync("componentResolver").then((s) => (s.registerComponent(
   t,
   lt(() => n)