@telia-ace/knowledge-widget-ui 1.0.38-next.1 → 1.0.38

package/dist/index.js

@@ -9,7 +9,7 @@ var re = (t, e, a) => e in t ? He(t, e, { enumerable: !0, configurable: !0, writ
     for (var a of R(e))
       se.call(e, a) && re(t, a, e[a]);
   return t;
-}, k = (t, e) => je(t, Oe(e));
+}, E = (t, e) => je(t, Oe(e));
 var w = (t, e) => {
   var a = {};
   for (var r in t)
@@ -19,13 +19,13 @@ var w = (t, e) => {
       e.indexOf(r) < 0 && se.call(t, r) && (a[r] = t[r]);
   return a;
 };
-import { css as $, keyframes as he } from "@emotion/react";
-import d from "@emotion/styled";
-import { useRouteData as ge, Link as Ye, Icon as H, List as Z, list as pe, invertedHoverButton as ye, Drawer as _e, ItemList as O, itemList as Y, Dropdown as $e, headingElement as ee, Text as ve, Button as te, paddedBorderTabStyle as ie, Confirm as Ke, SymbolBadge as N, StyledText as J, convertToStringAttributes as xe, useKeyPress as W, useContainer as Ve, useEventListener as le, DateFormats as be, Timestamp as we, useIsTabbing as qe, usePrevious as Ge, TextLink as Q, borderTabStyle as X, Paragraph as Ue, genericHtml as Je, AnchorLink as Qe, WidgetLink as Xe } from "@telia-ace/widget-ui";
+import { useRouteData as he, Link as Ye, Icon as H, List as Z, list as ge, invertedHoverButton as pe, ItemList as O, itemList as Y, Drawer as _e, Dropdown as ye, headingElement as ee, Text as $e, Button as te, paddedBorderTabStyle as ie, Confirm as Ve, SymbolBadge as N, StyledText as J, convertToStringAttributes as ve, useKeyPress as W, useContainer as Ke, useEventListener as le, Timestamp as xe, DateFormats as be, TextLink as Q, useIsTabbing as qe, usePrevious as Ge, borderTabStyle as X, Paragraph as Ue, genericHtml as Je, AnchorLink as Qe, WidgetLink as Xe } from "@telia-ace/widget-ui";
 export * from "@telia-ace/widget-ui";
-import n, { forwardRef as _, useCallback as z, useState as T, useEffect as K, useMemo as Ze, useRef as Ee, useImperativeHandle as et } from "react";
-import { createParams as j, formatUrl as ce, appendClassNames as S, htmlParentContains as tt } from "@telia-ace/widget-utilities";
-const at = ({
+import { createParams as j, formatUrl as ce, appendClassNames as z, htmlParentContains as Ze } from "@telia-ace/widget-utilities";
+import n, { forwardRef as _, useCallback as k, useState as A, useEffect as V, useMemo as et, useRef as we, useImperativeHandle as tt } from "react";
+import d from "@emotion/styled";
+import { css as $, keyframes as Ee } from "@emotion/react";
+const ke = ({
   title: t = "",
   className: e,
   id: a,
@@ -34,40 +34,38 @@ const at = ({
   type: i,
   target: o,
   href: c,
-  children: m,
-  connectionKey: f
+  children: m
 }) => {
-  const u = {}, { name: l, params: h } = ge();
+  const f = {}, { name: u, params: l } = he();
   switch (i) {
     case "default":
     case "guide":
-      const { id: E, title: g } = r;
-      let v = f || s;
-      E !== a && !f && (v = void 0), u.routeName = l, u.params = j(k(y({}, h), {
+      const { id: h, title: S } = r;
+      f.routeName = u, f.params = j(E(y({}, l), {
         guide: a,
-        connection: v,
-        uriName: a === E ? ce(g) : ce(t)
+        connection: a === h ? s : void 0,
+        uriName: a === h ? ce(S) : ce(t)
       }));
       break;
     case "link":
-      u.href = c, u.target = o;
+      f.href = c, f.target = o;
       break;
   }
-  return /* @__PURE__ */ n.createElement(Ye, y({ className: S(e, "humany-dialog-link") }, u), m || /* @__PURE__ */ n.createElement(n.Fragment, null, i === "link" && /* @__PURE__ */ n.createElement(H, { faIcon: "link" }), /* @__PURE__ */ n.createElement("span", null, t)));
-}, ke = at, ta = _((s, r) => {
+  return /* @__PURE__ */ n.createElement(Ye, y({ className: z(e, "humany-dialog-link") }, f), m || /* @__PURE__ */ n.createElement(n.Fragment, null, i === "link" && /* @__PURE__ */ n.createElement(H, { faIcon: "link" }), /* @__PURE__ */ n.createElement("span", null, t)));
+}, Ot = _((s, r) => {
   var i = s, { className: t, dialog: e } = i, a = w(i, ["className", "dialog"]);
   return e.length ? /* @__PURE__ */ n.createElement(
-    nt,
-    k(y({
-      className: S(t, "humany-dialog"),
+    at,
+    E(y({
+      className: z(t, "humany-dialog"),
       items: e,
       renderItem: (o) => /* @__PURE__ */ n.createElement("li", { key: o.connection, "data-dialog": o.connection }, /* @__PURE__ */ n.createElement(ke, y({}, o)))
     }, a), {
       ref: r
     })
   ) : null;
-}), nt = d(Z)`
-    ${pe}
+}), at = d(Z)`
+    ${ge}
     a {
         min-width: 150px;
         max-width: 400px;
@@ -75,7 +73,7 @@ const at = ({
         white-space: normal;
         ${(t) => {
   var e, a;
-  return ((e = t.theme.colors) == null ? void 0 : e.primary) && ye({
+  return ((e = t.theme.colors) == null ? void 0 : e.primary) && pe({
     primaryColor: (a = t.theme.colors) == null ? void 0 : a.primary,
     secondaryColor: "#FFFFFF",
     theme: t.theme
@@ -89,7 +87,7 @@ const at = ({
   return (e = t.theme.sizes) == null ? void 0 : e.small;
 }} 0 0;
     }
-`, rt = (u) => {
+`, Yt = (u) => {
   var l = u, {
     trigger: t,
     header: e,
@@ -114,7 +112,7 @@ const at = ({
   return /* @__PURE__ */ n.createElement(
     _e,
     {
-      className: S(a, "humany-drawer-list"),
+      className: z(a, "humany-drawer-list"),
       trigger: t,
       header: e,
       animation: r,
@@ -122,9 +120,9 @@ const at = ({
       onToggle: i,
       closeButtonAriaLabel: m
     },
-    /* @__PURE__ */ n.createElement(ot, y({}, f), o)
+    /* @__PURE__ */ n.createElement(nt, y({}, f), o)
   );
-}, aa = rt, ot = d(O)`
+}, nt = d(O)`
     ${Y}
     font-family: ${(t) => {
   var e;
@@ -142,7 +140,7 @@ const at = ({
   return (e = t.theme.fonts) == null ? void 0 : e.normal;
 }};
     }
-`, st = ({ items: t, renderItem: e, trigger: a, header: r, children: s }) => /* @__PURE__ */ n.createElement($e, { className: "humany-dropdown-actions", trigger: a }, /* @__PURE__ */ n.createElement(it, null, !!r && /* @__PURE__ */ n.createElement(lt, null, r), t && e && /* @__PURE__ */ n.createElement(ct, { items: t, renderItem: e }), s)), na = st, it = d.div`
+`, _t = ({ items: t, renderItem: e, trigger: a, header: r, children: s }) => /* @__PURE__ */ n.createElement(ye, { className: "humany-dropdown-actions", trigger: a }, /* @__PURE__ */ n.createElement(rt, null, !!r && /* @__PURE__ */ n.createElement(ot, null, r), t && e && /* @__PURE__ */ n.createElement(st, { items: t, renderItem: e }), s)), rt = d.div`
     background: #fff;
     border: #ccc 1px solid;
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
@@ -154,7 +152,7 @@ const at = ({
   var e;
   return (e = t.theme.fonts) == null ? void 0 : e.normal;
 }};
-`, lt = d.div`
+`, ot = d.div`
     padding: ${(t) => {
   var e;
   return (e = t.theme.sizes) == null ? void 0 : e.normal;
@@ -187,7 +185,7 @@ const at = ({
   return (e = t.theme.sizes) == null ? void 0 : e.small;
 }};
     }
-`, ct = d(Z)`
+`, st = d(Z)`
     list-style: none;
     padding: 0;
     margin: 0;
@@ -222,7 +220,7 @@ const at = ({
             }
         }
     }
-`, mt = (i) => {
+`, Vt = (i) => {
   var o = i, {
     trigger: t,
     className: e,
@@ -235,15 +233,15 @@ const at = ({
     "closeButtonAriaLabel"
   ]);
   return /* @__PURE__ */ n.createElement(
-    $e,
+    ye,
     {
-      className: S(e, "humany-dropdown-list"),
+      className: z(e, "humany-dropdown-list"),
       closeButtonAriaLabel: r,
       trigger: t
     },
-    /* @__PURE__ */ n.createElement(dt, y({}, s), a)
+    /* @__PURE__ */ n.createElement(it, y({}, s), a)
   );
-}, ra = mt, dt = d(O)`
+}, it = d(O)`
     ${Y}
     font-family: ${(t) => {
   var e;
@@ -279,7 +277,7 @@ const at = ({
             }
         }
     }
-`, ut = (t) => $`
+`, lt = (t) => $`
     ${t["data-loading"] && "position: relative;"};
     ${t["data-loading"] && "min-height: 150px;"}
     > * {
@@ -289,7 +287,7 @@ const at = ({
     .humany-loader {
         opacity: ${t["data-loading"] ? "1" : "0"};
     }
-`, oa = d(H)`
+`, Kt = d(H)`
     && {
         font-size: ${(t) => {
   var e;
@@ -297,7 +295,7 @@ const at = ({
 }};
     }
     width: 1.2em;
-`, sa = d(ve)`
+`, qt = d($e)`
     font-size: ${(t) => {
   var e;
   return (e = t.theme.fonts) == null ? void 0 : e.medium;
@@ -308,7 +306,7 @@ const at = ({
   var e;
   return (e = t.theme.colors) == null ? void 0 : e.text;
 }};
-`, ft = d(te)`
+`, ct = d(te)`
     display: flex;
     align-items: center;
 
@@ -336,7 +334,7 @@ const at = ({
         flex: 1;
         font-weight: 300;
     }
-`, ht = ({
+`, mt = ({
   addFavoriteTooltip: t,
   removeFavoriteCancelLabel: e,
   removeFavoriteConfirmLabel: a,
@@ -349,20 +347,20 @@ const at = ({
   buttonLabel: f = "",
   actions: { addFavorite: u, removeFavorite: l }
 }) => {
-  const h = z(() => {
+  const h = k(() => {
     l(o);
-  }, [o, l]), E = z(() => {
+  }, [o, l]), S = k(() => {
     u(o);
-  }, [o, u]), g = `${c ? i : t}${m ? `: "${m}"` : ""}`;
+  }, [o, u]), p = `${c ? i : t}${m ? `: "${m}"` : ""}`;
   return /* @__PURE__ */ n.createElement(n.Fragment, null, c ? /* @__PURE__ */ n.createElement(
-    Ke,
+    Ve,
     {
       trigger: /* @__PURE__ */ n.createElement(
         me,
         {
           className: "humany-favorite-button",
-          title: g,
-          "aria-label": g,
+          title: p,
+          "aria-label": p,
           "data-favorite": "true",
           "data-has-label": f ? "true" : "false",
           "data-has-symbol": "true"
@@ -386,9 +384,9 @@ const at = ({
     me,
     {
       className: "humany-favorite-button",
-      title: g,
-      "aria-label": g,
-      onClick: E,
+      title: p,
+      "aria-label": p,
+      onClick: S,
       "data-favorite": "false",
       "data-has-label": f ? "true" : "false",
       "data-has-symbol": "true"
@@ -396,7 +394,7 @@ const at = ({
     /* @__PURE__ */ n.createElement(N, { size: 16, symbol: { type: "Svg", content: "star-empty" } }),
     f && /* @__PURE__ */ n.createElement(J, null, f)
   ));
-}, gt = ht, me = d(ft)`
+}, me = d(ct)`
     grid-area: favorite;
 
     &:focus-visible {
@@ -458,7 +456,7 @@ const at = ({
             }
         `;
 }}
-`, ia = _(
+`, Gt = _(
   (f, m) => {
     var u = f, {
       onFeedback: t = () => {
@@ -479,14 +477,14 @@ const at = ({
       "selected"
     ]);
     return /* @__PURE__ */ n.createElement(
-      yt,
-      k(y({
-        className: S(a, "humany-feedback"),
+      ft,
+      E(y({
+        className: z(a, "humany-feedback"),
         "data-direction": e
-      }, xe(c)), {
+      }, ve(c)), {
         ref: m
       }),
-      !!r && /* @__PURE__ */ n.createElement(pt, null, r),
+      !!r && /* @__PURE__ */ n.createElement(dt, null, r),
       /* @__PURE__ */ n.createElement(
         de,
         {
@@ -515,7 +513,7 @@ const at = ({
       )
     );
   }
-), pt = d(J)`
+), dt = d(J)`
     font-weight: normal;
     margin: 0 0 ${(t) => {
   var e;
@@ -554,7 +552,7 @@ const at = ({
 
   ${(t) => {
   var e, a;
-  return ((e = t.theme.colors) == null ? void 0 : e.primary) && ye({
+  return ((e = t.theme.colors) == null ? void 0 : e.primary) && pe({
     active: t["data-selected"],
     primaryColor: (a = t.theme.colors) == null ? void 0 : a.primary,
     secondaryColor: "#FFFFFF",
@@ -568,7 +566,7 @@ const at = ({
   return (e = t.theme.sizes) == null ? void 0 : e.small;
 }} 0 0;
     }
-`, yt = d.div`
+`, ft = d.div`
     ${(t) => {
   var e;
   return t["data-direction"] === "vertical" && $`
@@ -580,16 +578,16 @@ const at = ({
             }
         `;
 }}
-`, $t = () => {
-  const [t, e] = T(null), a = W("ArrowLeft"), r = W("ArrowRight"), s = W("ArrowUp"), i = W("ArrowDown");
-  return K(() => {
+`, Ut = () => {
+  const [t, e] = A(null), a = W("ArrowLeft"), r = W("ArrowRight"), s = W("ArrowUp"), i = W("ArrowDown");
+  return V(() => {
     e(a ? "left" : r ? "right" : s ? "up" : i ? "down" : null);
   }, [a, r, s, i]), t;
-}, la = $t, vt = (t, e) => {
-  const [a, r] = T(t), s = z(() => setTimeout(() => {
+}, Jt = (t, e) => {
+  const [a, r] = A(t), s = k(() => setTimeout(() => {
     r(t);
   }, e), [e, r, t]);
-  return K(
+  return V(
     () => {
       const i = s();
       return () => {
@@ -598,9 +596,9 @@ const at = ({
     },
     [s]
   ), a;
-}, ca = vt, xt = () => {
-  const t = Ve(), [e, a] = T([]), r = t.get("favorites");
-  K(() => {
+}, ut = () => {
+  const t = Ke(), [e, a] = A([]), r = t.get("favorites");
+  V(() => {
     if (r) {
       a(r.get());
       const { events: m } = t.get("$widget");
@@ -609,13 +607,13 @@ const at = ({
       });
     }
   }, []);
-  const s = (m) => r ? r.add(m) : Promise.resolve([]), i = (m) => r ? r.remove(m) : Promise.resolve([]), o = () => r ? r.clear() : Promise.resolve([]), c = z(
+  const s = (m) => r ? r.add(m) : Promise.resolve([]), i = (m) => r ? r.remove(m) : Promise.resolve([]), o = () => r ? r.clear() : Promise.resolve([]), c = k(
     (m) => e.indexOf(m) > -1 ? i(m) : s(m),
     [e]
   );
   return [
     e,
-    Ze(
+    et(
       () => ({
         addFavorite: s,
         removeFavorite: i,
@@ -625,10 +623,10 @@ const at = ({
       [e]
     )
   ];
-}, bt = xt, ma = () => {
-  const [t, e] = T(!1), a = Ee(), r = z(() => e(!0), [e]), s = z(() => e(!1), [e]);
+}, Qt = () => {
+  const [t, e] = A(!1), a = we(), r = k(() => e(!0), [e]), s = k(() => e(!1), [e]);
   return le("mouseenter", r, a.current), le("mouseleave", s, a.current), [t, a];
-}, wt = ({
+}, ht = ({
   format: t = be.YYYY_MM_DD_HH_MM,
   className: e = "",
   byLabel: a = "",
@@ -641,33 +639,33 @@ const at = ({
   modified: f,
   published: u
 }) => {
-  const l = m && u ? /* @__PURE__ */ n.createElement(ue, { format: t, timestamp: u }) : null, h = c && f ? /* @__PURE__ */ n.createElement(ue, { format: t, timestamp: f }) : null;
-  return !l && !h ? null : /* @__PURE__ */ n.createElement(U, { className: S(e, "humany-metadata") }, l && /* @__PURE__ */ n.createElement(U, { className: "humany-published" }, s, l, a && o && ` ${a.replace("{{editor}}", o)}`), h && /* @__PURE__ */ n.createElement(U, { className: "humany-modified" }, l && ", ", r, h, a && i && ` ${a.replace("{{editor}}", i)}`));
-}, Et = wt, ue = d(we)`
+  const l = m && u ? /* @__PURE__ */ n.createElement(fe, { format: t, timestamp: u }) : null, h = c && f ? /* @__PURE__ */ n.createElement(fe, { format: t, timestamp: f }) : null;
+  return !l && !h ? null : /* @__PURE__ */ n.createElement(U, { className: z(e, "humany-metadata") }, l && /* @__PURE__ */ n.createElement(U, { className: "humany-published" }, s, l, a && o && ` ${a.replace("{{editor}}", o)}`), h && /* @__PURE__ */ n.createElement(U, { className: "humany-modified" }, l && ", ", r, h, a && i && ` ${a.replace("{{editor}}", i)}`));
+}, fe = d(xe)`
     &:not(:first-child) {
         margin-left: 4px;
     }
     &:not(:last-child) {
         margin-right: 4px;
     }
-`, U = d(ve)`
+`, U = d($e)`
     font-style: italic;
-`, kt = ({ tags: t }) => t.filter((e) => e.symbol).length ? /* @__PURE__ */ n.createElement(
-  Nt,
+`, gt = ({ tags: t }) => t.filter((e) => e.symbol).length ? /* @__PURE__ */ n.createElement(
+  $t,
   {
     className: "humany-guide-list-tags",
     items: t,
-    renderItem: ({ id: e, symbol: a, title: r }) => a && /* @__PURE__ */ n.createElement("li", { key: e, "data-tag": e }, /* @__PURE__ */ n.createElement(Lt, { size: 18, symbol: a, title: r }))
+    renderItem: ({ id: e, symbol: a, title: r }) => a && /* @__PURE__ */ n.createElement("li", { key: e, "data-tag": e }, /* @__PURE__ */ n.createElement(vt, { size: 18, symbol: a, title: r }))
   }
-) : null, da = _(({ title: t, id: e, route: a, symbolSize: r, collapseUri: s, children: i }, o) => {
-  const { params: c } = ge();
-  return /* @__PURE__ */ n.createElement(zt, { ref: o, "data-guide": e }, /* @__PURE__ */ n.createElement(
+) : null, Xt = _(({ title: t, id: e, route: a, symbolSize: r, collapseUri: s, children: i }, o) => {
+  const { params: c } = he();
+  return /* @__PURE__ */ n.createElement(pt, { ref: o, "data-guide": e }, /* @__PURE__ */ n.createElement(
     Q,
     {
       title: t,
       "aria-label": t,
       routeName: a,
-      params: j(k(y({}, c), {
+      params: j(E(y({}, c), {
         uriName: s || void 0,
         id: void 0,
         guide: void 0,
@@ -677,7 +675,7 @@ const at = ({
     },
     /* @__PURE__ */ n.createElement(N, { size: r, symbol: { type: "Svg", content: "caret-up" } })
   ), i);
-}), zt = d.li`
+}), pt = d.li`
     > a {
         grid-column: 1/-1;
         font-weight: bold;
@@ -690,9 +688,9 @@ const at = ({
     > div {
         grid-column: 1/-1;
     }
-`, ua = _(
-  (Gt, Fe) => {
-    var ae = Gt, {
+`, Zt = _(
+  (Mt, Ie) => {
+    var ae = Mt, {
       expandable: t = !1,
       routing: e = {},
       paramMappers: a = {},
@@ -708,9 +706,9 @@ const at = ({
       },
       metadata: l = {},
       pageLabel: h,
-      className: E,
-      children: g,
-      items: v,
+      className: S,
+      children: p,
+      items: x,
       renderItem: L,
       addFavoriteTooltip: C,
       removeFavoriteCancelLabel: M,
@@ -718,7 +716,7 @@ const at = ({
       removeFavoriteHeader: Se,
       removeFavoriteLabel: Ne,
       removeFavoriteTooltip: Le
-    } = ae, De = w(ae, [
+    } = ae, Fe = w(ae, [
       "expandable",
       "routing",
       "paramMappers",
@@ -743,30 +741,30 @@ const at = ({
       "removeFavoriteLabel",
       "removeFavoriteTooltip"
     ]);
-    const V = qe(), F = Ee(), I = Ge(v), { guide: Ie = "guide", page: Ae = "index" } = e, {
-      guide: Te = ({ id: p }) => j({ guide: p }),
+    const K = qe(), I = we(), T = Ge(x), { guide: Te = "guide", page: De = "index" } = e, {
+      guide: Ae = ({ id: g }) => j({ guide: g }),
       page: ne = () => j()
-    } = a, [Ce, Me] = bt();
-    et(Fe, () => F.current);
-    const q = (p) => {
-      const { id: b, title: x, tags: D, published: P, modified: A, publishedBy: B, modifiedBy: G } = p;
+    } = a, [Ce, Me] = ut();
+    tt(Ie, () => I.current);
+    const q = (g) => {
+      const { id: b, title: v, tags: F, published: P, modified: D, publishedBy: B, modifiedBy: G } = g;
       return /* @__PURE__ */ n.createElement(
         "li",
         {
           key: b,
           "data-guide": b,
-          "has-metadata": (!!(l != null && l.showPublished) && !!P || !!(l != null && l.showModified) && !!A).toString()
+          "has-metadata": (!!(l != null && l.showPublished) && !!P || !!(l != null && l.showModified) && !!D).toString()
         },
         /* @__PURE__ */ n.createElement(
           Q,
           {
             className: "humany-guide-link",
-            title: x,
-            "aria-label": x,
-            routeName: Ie,
-            onClick: (We) => f(We, p),
-            params: Te(p),
-            text: x
+            title: v,
+            "aria-label": v,
+            routeName: Te,
+            onClick: (We) => f(We, g),
+            params: Ae(g),
+            text: v
           },
           /* @__PURE__ */ n.createElement(
             N,
@@ -780,9 +778,9 @@ const at = ({
           )
         ),
         c && /* @__PURE__ */ n.createElement(
-          gt,
+          mt,
           {
-            guideTitle: x,
+            guideTitle: v,
             addFavoriteTooltip: C,
             removeFavoriteCancelLabel: M,
             removeFavoriteConfirmLabel: ze,
@@ -794,46 +792,46 @@ const at = ({
             id: b
           }
         ),
-        o && /* @__PURE__ */ n.createElement(kt, { tags: D }),
+        o && /* @__PURE__ */ n.createElement(gt, { tags: F }),
         /* @__PURE__ */ n.createElement(
-          Dt,
-          k(y({}, l), {
+          xt,
+          E(y({}, l), {
             indent: t ? void 0 : r,
-            modified: A,
+            modified: D,
             published: P,
             publishedBy: B,
             modifiedBy: G
           })
         )
       );
-    }, Pe = z(
-      (p, b, x) => L ? L(p, b, x, q) : q(p),
+    }, Pe = k(
+      (g, b, v) => L ? L(g, b, v, q) : q(g),
       [L, q]
-    ), Be = z(
-      (p) => {
-        m && (p.preventDefault(), u("page", ne()));
+    ), Be = k(
+      (g) => {
+        m && (g.preventDefault(), u("page", ne()));
       },
       [u, m]
     );
-    K(() => {
-      if (V && I && I.length < v.length && F.current) {
-        const p = F.current.querySelectorAll(".humany-guide-list > ul > li"), b = p[I.length];
-        if (p.length === v.length && I.length) {
-          const x = p[I.length];
-          if (x) {
-            const D = x.querySelector(
+    V(() => {
+      if (K && T && T.length < x.length && I.current) {
+        const g = I.current.querySelectorAll(".humany-guide-list > ul > li"), b = g[T.length];
+        if (g.length === x.length && T.length) {
+          const v = g[T.length];
+          if (v) {
+            const F = v.querySelector(
               ".humany-guide-link"
             );
-            D && D.focus();
+            F && F.focus();
           }
         } else
-          b && new MutationObserver((D, P) => {
-            D.forEach((A) => {
-              if (A.addedNodes) {
+          b && new MutationObserver((F, P) => {
+            F.forEach((D) => {
+              if (D.addedNodes) {
                 const B = Array.from(
-                  A.addedNodes
+                  D.addedNodes
                 ).find((G) => G.tagName === "A");
-                B && tt(F.current, document.activeElement) && (V && B.focus(), P.disconnect());
+                B && Ze(I.current, document.activeElement) && (K && B.focus(), P.disconnect());
               }
             });
           }).observe(b, {
@@ -847,20 +845,20 @@ const at = ({
       }
     });
     const Re = !!Object.keys(l).filter(
-      (p) => typeof l[p] != "undefined"
+      (g) => typeof l[g] != "undefined"
     ).length;
     return /* @__PURE__ */ n.createElement(
-      St,
-      k(y({
-        className: S(E, "humany-guide-list"),
-        "data-item-count": v.length,
-        items: v,
+      yt,
+      E(y({
+        className: z(S, "humany-guide-list"),
+        "data-item-count": x.length,
+        items: x,
         renderItem: Pe,
-        isTabbing: V,
+        isTabbing: K,
         expandable: t ? "true" : "false",
         "grid-items": o || c || Re ? "true" : "false"
-      }, xe(De)), {
-        ref: F
+      }, ve(Fe)), {
+        ref: I
       }),
       h ? /* @__PURE__ */ n.createElement(
         Q,
@@ -868,7 +866,7 @@ const at = ({
           text: h,
           title: h,
           "aria-label": h,
-          routeName: Ae,
+          routeName: De,
           role: s,
           params: ne(),
           onClick: Be
@@ -881,10 +879,10 @@ const at = ({
           }
         )
       ) : null,
-      g
+      p
     );
   }
-), St = d(O)`
+), yt = d(O)`
     ${Y}
     padding: ${(t) => {
   var e;
@@ -1035,8 +1033,8 @@ const at = ({
             text-decoration: underline;
         }
     }
-`, Nt = d(Z)`
-    ${pe}
+`, $t = d(Z)`
+    ${ge}
     display: flex;
     margin: 0 0 0 auto;
     grid-area: tags;
@@ -1051,7 +1049,7 @@ const at = ({
         align-items: center;
         justify-content: space-between;
     }
-`, Lt = d(N)`
+`, vt = d(N)`
     display: block;
     color: ${(t) => {
   var e;
@@ -1068,7 +1066,7 @@ const at = ({
         font-size: ${t.size}px;
       `;
 }}
-`, Dt = d(Et)`
+`, xt = d(ht)`
     grid-area: metadata;
     text-overflow: ellipsis;
     overflow: hidden;
@@ -1080,11 +1078,11 @@ const at = ({
   var e;
   return typeof t.indent == "number" && `text-indent: calc(${(e = t.theme.sizes) == null ? void 0 : e.small} * 2 + ${t.indent}px);`;
 }}
-`, Ft = he`
+`, bt = Ee`
   100% {
     transform: rotate(360deg);
   }
-`, It = he`
+`, wt = Ee`
   0% {
     stroke-dasharray: 1, 200;
     stroke-dashoffset: 0;
@@ -1097,8 +1095,8 @@ const at = ({
     stroke-dasharray: 89, 200;
     stroke-dashoffset: -124px;
   }
-`, At = d.svg`
-    animation: ${Ft} 2s linear infinite;
+`, Et = d.svg`
+    animation: ${bt} 2s linear infinite;
     height: 100%;
     transform-origin: center center;
     width: 100%;
@@ -1109,7 +1107,7 @@ const at = ({
     right: 0;
     margin: auto;
     transition: 200ms ease-out opacity;
-`, Tt = d.div`
+`, kt = d.div`
     position: absolute;
     top: 0;
     bottom: 0;
@@ -1128,7 +1126,7 @@ const at = ({
     .humany-spinner-svg {
         opacity: ${(t) => t["data-loading"] ? "1" : "0"};
     }
-`, Ct = d.div`
+`, zt = d.div`
     position: relative;
     margin: 0 auto;
     width: 100px;
@@ -1137,18 +1135,18 @@ const at = ({
         display: block;
         padding-top: 100%;
     }
-`, Mt = d.circle`
+`, St = d.circle`
     stroke-dasharray: 1, 200;
     stroke-dashoffset: 0;
-    animation: ${It} 1.5s ease-in-out infinite;
+    animation: ${wt} 1.5s ease-in-out infinite;
     stroke-linecap: round;
     stroke: ${(t) => {
   var e;
   return (e = t.theme.colors) == null ? void 0 : e.primary;
 }};
     stroke-width: 2px;
-`, Pt = ({ loading: t = !1 }) => /* @__PURE__ */ n.createElement(Tt, { className: "humany-loader", "data-loading": t }, /* @__PURE__ */ n.createElement(Ct, { className: "humany-spinner" }, /* @__PURE__ */ n.createElement(At, { className: "humany-spinner-svg", viewBox: "25 25 50 50" }, /* @__PURE__ */ n.createElement(
-  Mt,
+`, Nt = ({ loading: t = !1 }) => /* @__PURE__ */ n.createElement(kt, { className: "humany-loader", "data-loading": t }, /* @__PURE__ */ n.createElement(zt, { className: "humany-spinner" }, /* @__PURE__ */ n.createElement(Et, { className: "humany-spinner-svg", viewBox: "25 25 50 50" }, /* @__PURE__ */ n.createElement(
+  St,
   {
     cx: "50",
     cy: "50",
@@ -1157,7 +1155,7 @@ const at = ({
     "stroke-width": "2",
     "stroke-miterlimit": "10"
   }
-)))), Bt = Pt, Rt = (i) => {
+)))), ea = (i) => {
   var o = i, {
     className: t,
     showHeader: e,
@@ -1169,61 +1167,61 @@ const at = ({
     "notificationList",
     "loading"
   ]);
-  const [c, m] = T(null), {
+  const [c, m] = A(null), {
     id: f,
     title: u,
     symbol: l,
     notifications: h = [],
-    defaultHeaderOptions: E = { visible: !0 }
+    defaultHeaderOptions: S = { visible: !0 }
   } = a || {};
   return !h.length && !r ? null : /* @__PURE__ */ n.createElement(
-    Ht,
-    k(y({}, s), {
+    Ft,
+    E(y({}, s), {
       "data-loading": r,
-      "data-show-header": typeof e == "boolean" ? e : E.visible,
-      className: S(t, "humany-notification-list"),
+      "data-show-header": typeof e == "boolean" ? e : S.visible,
+      className: z(t, "humany-notification-list"),
       "data-notification-category": f,
       header: u,
       symbol: l,
       items: h,
-      renderItem: ({ id: g, title: v, body: L, modified: C, expandable: M }) => /* @__PURE__ */ n.createElement(
-        jt,
+      renderItem: ({ id: p, title: x, body: L, modified: C, expandable: M }) => /* @__PURE__ */ n.createElement(
+        It,
         {
-          key: g,
-          "data-notification": g,
-          "data-expanded": M ? c === g : !0
+          key: p,
+          "data-notification": p,
+          "data-expanded": M ? c === p : !0
         },
         M ? /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(
-          Wt,
+          Lt,
           {
-            title: v,
-            "aria-label": v,
-            "aria-expanded": c === g,
-            onClick: () => m(c === g ? null : g)
+            title: x,
+            "aria-label": x,
+            "aria-expanded": c === p,
+            onClick: () => m(c === p ? null : p)
           },
-          /* @__PURE__ */ n.createElement("span", null, v),
+          /* @__PURE__ */ n.createElement("span", null, x),
           /* @__PURE__ */ n.createElement(
-            Ot,
+            Tt,
             {
               size: 11,
               symbol: {
                 type: "Svg",
-                content: `caret-${c === g ? "up" : "down"}`
+                content: `caret-${c === p ? "up" : "down"}`
               }
             }
           )
-        ), /* @__PURE__ */ n.createElement(fe, { html: L }), C && /* @__PURE__ */ n.createElement(
-          Yt,
+        ), /* @__PURE__ */ n.createElement(ue, { html: L }), C && /* @__PURE__ */ n.createElement(
+          Dt,
           {
             format: be.YYYY_MM_DD,
             timestamp: C
           }
-        )) : /* @__PURE__ */ n.createElement(fe, { html: L })
+        )) : /* @__PURE__ */ n.createElement(ue, { html: L })
       )
     }),
-    /* @__PURE__ */ n.createElement(Bt, { loading: r })
+    /* @__PURE__ */ n.createElement(Nt, { loading: r })
   );
-}, Wt = d(te)`
+}, Lt = d(te)`
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -1260,8 +1258,8 @@ const at = ({
             text-decoration: underline;
         }
     }
-`, Ht = d(O)`
-    ${ut}
+`, Ft = d(O)`
+    ${lt}
     ${Y}
   overflow: hidden;
     justify-content: flex-start;
@@ -1285,14 +1283,14 @@ const at = ({
             text-decoration: underline;
         }
     }
-`, fe = d(Ue)`
+`, ue = d(Ue)`
     ${Je}
     font-weight: 300;
 
     p {
         white-space: normal;
     }
-`, jt = d.li`
+`, It = d.li`
     .humany-paragraph {
         display: none;
         &:not(:only-child) {
@@ -1319,7 +1317,7 @@ const at = ({
   return (e = t.theme.colors) == null ? void 0 : e.accent;
 }};
     }
-`, Ot = d(N)`
+`, Tt = d(N)`
     margin: 0 0 0 ${(t) => {
   var e;
   return (e = t.theme.sizes) == null ? void 0 : e.small;
@@ -1330,19 +1328,19 @@ const at = ({
   return (e = t.theme.colors) == null ? void 0 : e.primary;
 }};
     }
-`, Yt = d(we)`
+`, Dt = d(xe)`
     font-size: ${(t) => {
   var e;
   return (e = t.theme.fonts) == null ? void 0 : e.small;
 }};
     font-weight: 300;
-`, fa = Rt, _t = (t) => new RegExp("^#", "i").test(t), Kt = (t) => (r) => {
+`, At = (t) => new RegExp("^#", "i").test(t), Ct = (t) => (r) => {
   var s = r, { children: e } = s, a = w(s, ["children"]);
   const {
     implementation: i,
     name: o
   } = t.get("$widget"), { href: c = "" } = a;
-  if (_t(c))
+  if (At(c))
     return /* @__PURE__ */ n.createElement(Qe, { smooth: !0, to: c }, e);
   const m = i.bindings.map((l) => l.replace(/\./g, "\\.")).join("|"), u = new RegExp(`^((http[s]?:)?//)?(${m})/([^\\s]+)`).exec(c);
   if (u && u.length >= 4) {
@@ -1351,7 +1349,7 @@ const at = ({
       return /* @__PURE__ */ n.createElement(Xe, { widgetName: l }, e);
   }
   return /* @__PURE__ */ n.createElement("a", y({}, a), e);
-}, Vt = Kt, qt = (t, e = []) => ({
+}, ta = (t, e = []) => ({
   transform: {
     a: (a) => {
       const c = a, { children: r } = c, i = w(c, ["children"])["data-target"];
@@ -1360,32 +1358,32 @@ const at = ({
         if (m)
           return /* @__PURE__ */ n.createElement(ke, y({}, m), r);
       }
-      return Vt(t)(a);
+      return Ct(t)(a);
     }
   }
-}), ha = qt;
+});
 export {
-  da as AccordionListItem,
+  Xt as AccordionListItem,
   ke as DialogLink,
-  ta as DialogList,
-  aa as DrawerList,
-  na as DropdownActions,
-  ra as DropdownList,
-  gt as FavoriteButton,
-  ia as Feedback,
-  ua as GuideList,
-  Bt as Loader,
-  Tt as LoaderWrapper,
-  Et as Metadata,
-  fa as NotificationList,
-  oa as SmallCaret,
-  sa as StyledHeaderText,
-  ft as StyledListButton,
-  ha as guideRenderInstructions,
-  ut as loadingOpacity,
-  la as useArrowKeys,
-  ca as useDebounce,
-  bt as useFavorites,
-  ma as useHover
+  Ot as DialogList,
+  Yt as DrawerList,
+  _t as DropdownActions,
+  Vt as DropdownList,
+  mt as FavoriteButton,
+  Gt as Feedback,
+  Zt as GuideList,
+  Nt as Loader,
+  kt as LoaderWrapper,
+  ht as Metadata,
+  ea as NotificationList,
+  Kt as SmallCaret,
+  qt as StyledHeaderText,
+  ct as StyledListButton,
+  ta as guideRenderInstructions,
+  lt as loadingOpacity,
+  Ut as useArrowKeys,
+  Jt as useDebounce,
+  ut as useFavorites,
+  Qt as useHover
 };
 //# sourceMappingURL=index.js.map