@telia-ace/knowledge-widget-ui 1.3.33 → 1.3.34

package/index.mjs

@@ -1,63 +1,63 @@
-import { jsx as o, jsxs as p, Fragment as se } from "react/jsx-runtime";
-import { useRouteData as re, Link as Re, Icon as P, List as G, list as le, invertedHoverButton as ce, ItemList as j, itemList as R, Drawer as We, Dropdown as de, headingElement as K, Text as me, Button as U, paddedBorderTabStyle as Z, Confirm as Ee, SymbolBadge as S, StyledText as _, convertToStringAttributes as he, useKeyPress as M, useContainer as fe, useEventListener as ee, Timestamp as ue, DateFormats as ge, TextLink as V, useIsTabbing as He, usePrevious as Oe, borderTabStyle as q, Paragraph as Ye, genericHtml as _e, AnchorLink as Ve, WidgetLink as qe } from "@telia-ace/widget-ui";
+import { jsx as a, jsxs as p, Fragment as te } from "react/jsx-runtime";
+import { useRouteData as ne, Link as He, Icon as I, List as E, list as ie, invertedHoverButton as ae, ItemList as C, itemList as D, Drawer as je, Dropdown as oe, headingElement as Y, Text as se, Button as _, paddedBorderTabStyle as V, Confirm as Re, SymbolBadge as z, StyledText as j, convertToStringAttributes as re, useKeyPress as T, useContainer as le, useEventListener as q, Timestamp as ce, DateFormats as de, TextLink as R, useIsTabbing as We, getHumanyIsTabbing as Ee, setHumanyIsTabbing as Ye, borderTabStyle as W, Paragraph as _e, genericHtml as Oe, AnchorLink as Ge, WidgetLink as Ke } from "@telia-ace/widget-ui";
 export * from "@telia-ace/widget-ui";
-import { createParams as B, formatUrl as te, appendClassNames as z, htmlParentContains as Ge } from "@telia-ace/widget-utilities";
+import { createParams as F, formatUrl as J, appendClassNames as k } from "@telia-ace/widget-utilities";
 import c from "@emotion/styled";
-import { forwardRef as W, useCallback as k, useState as F, useEffect as E, useMemo as Ke, useRef as pe, useImperativeHandle as Ue } from "react";
-import { css as y, keyframes as ye } from "@emotion/react";
-const $e = ({
+import { forwardRef as A, useCallback as w, useState as N, useEffect as M, useMemo as Ue, useRef as me, useImperativeHandle as Ve } from "react";
+import { css as y, keyframes as he } from "@emotion/react";
+const fe = ({
   title: t = "",
   className: e,
   id: n,
-  parent: a,
-  connection: i,
+  parent: i,
+  connection: o,
   type: s,
   target: r,
   href: m,
   children: l,
   connectionKey: d
 }) => {
-  const u = {}, { name: h, params: f } = re();
+  const u = {}, { name: h, params: f } = ne();
   switch (s) {
     case "default":
     case "guide":
-      const { id: x, title: v } = a;
-      let $ = d || i;
-      x !== n && !d && ($ = void 0), u.routeName = h, u.params = B({
+      const { id: v, title: $ } = i;
+      let x = d || o;
+      v !== n && !d && (x = void 0), u.routeName = h, u.params = F({
         ...f,
         guide: n,
-        connection: $,
-        uriName: n === x ? te(v) : te(t)
+        connection: x,
+        uriName: n === v ? J($) : J(t)
       });
       break;
     case "link":
       u.href = m, u.target = r;
       break;
   }
-  return /* @__PURE__ */ o(
-    Re,
+  return /* @__PURE__ */ a(
+    He,
     {
-      className: z(e, "humany-dialog-link"),
+      className: k(e, "humany-dialog-link"),
       ...u,
-      children: l || /* @__PURE__ */ p(se, { children: [
-        s === "link" && /* @__PURE__ */ o(P, { faIcon: "link" }),
-        /* @__PURE__ */ o("span", { children: t })
+      children: l || /* @__PURE__ */ p(te, { children: [
+        s === "link" && /* @__PURE__ */ a(I, { faIcon: "link" }),
+        /* @__PURE__ */ a("span", { children: t })
       ] })
     }
   );
-}, Pt = W(
-  ({ className: t, dialog: e, ...n }, a) => e.length ? /* @__PURE__ */ o(
-    Je,
+}, Mt = A(
+  ({ className: t, dialog: e, ...n }, i) => e.length ? /* @__PURE__ */ a(
+    qe,
     {
-      className: z(t, "humany-dialog"),
+      className: k(t, "humany-dialog"),
       items: e,
-      renderItem: (i) => /* @__PURE__ */ o("li", { "data-dialog": i.connection, children: /* @__PURE__ */ o($e, { ...i }) }, i.connection),
+      renderItem: (o) => /* @__PURE__ */ a("li", { "data-dialog": o.connection, children: /* @__PURE__ */ a(fe, { ...o }) }, o.connection),
       ...n,
-      ref: a
+      ref: i
     }
   ) : null
-), Je = c(G)`
-  ${le}
+), qe = c(E)`
+  ${ie}
   a {
     min-width: 150px;
     max-width: 400px;
@@ -65,7 +65,7 @@ const $e = ({
     white-space: normal;
     ${(t) => {
   var e, n;
-  return ((e = t.theme.colors) == null ? void 0 : e.primary) && ce({
+  return ((e = t.theme.colors) == null ? void 0 : e.primary) && ae({
     primaryColor: (n = t.theme.colors) == null ? void 0 : n.primary,
     secondaryColor: "#FFFFFF",
     theme: t.theme
@@ -79,31 +79,31 @@ const $e = ({
   return (e = t.theme.sizes) == null ? void 0 : e.small;
 }} 0 0;
   }
-`, Bt = ({
+`, Pt = ({
   trigger: t,
   header: e,
   className: n,
-  animation: a,
-  fullScreen: i,
+  animation: i,
+  fullScreen: o,
   onToggle: s,
   children: r,
   ref: m,
   closeButtonAriaLabel: l,
   ...d
-}) => /* @__PURE__ */ o(
-  We,
+}) => /* @__PURE__ */ a(
+  je,
   {
-    className: z(n, "humany-drawer-list"),
+    className: k(n, "humany-drawer-list"),
     trigger: t,
     header: e,
-    animation: a,
-    fullScreen: i,
+    animation: i,
+    fullScreen: o,
     onToggle: s,
     closeButtonAriaLabel: l,
-    children: /* @__PURE__ */ o(Qe, { ...d, children: r })
+    children: /* @__PURE__ */ a(Je, { ...d, children: r })
   }
-), Qe = c(j)`
-  ${R}
+), Je = c(C)`
+  ${D}
   font-family: ${(t) => {
   var e;
   return (e = t.theme.fonts) == null ? void 0 : e.type;
@@ -120,17 +120,17 @@ const $e = ({
   return (e = t.theme.fonts) == null ? void 0 : e.normal;
 }};
   }
-`, jt = ({
+`, Bt = ({
   items: t,
   renderItem: e,
   trigger: n,
-  header: a,
-  children: i
-}) => /* @__PURE__ */ o(de, { className: "humany-dropdown-actions", trigger: n, children: /* @__PURE__ */ p(Xe, { children: [
-  !!a && /* @__PURE__ */ o(Ze, { children: a }),
-  t && e && /* @__PURE__ */ o(et, { items: t, renderItem: e }),
-  i
-] }) }), Xe = c.div`
+  header: i,
+  children: o
+}) => /* @__PURE__ */ a(oe, { className: "humany-dropdown-actions", trigger: n, children: /* @__PURE__ */ p(Qe, { children: [
+  !!i && /* @__PURE__ */ a(Xe, { children: i }),
+  t && e && /* @__PURE__ */ a(Ze, { items: t, renderItem: e }),
+  o
+] }) }), Qe = c.div`
   background: #fff;
   border: #ccc 1px solid;
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
@@ -142,7 +142,7 @@ const $e = ({
   var e;
   return (e = t.theme.fonts) == null ? void 0 : e.normal;
 }};
-`, Ze = c.div`
+`, Xe = c.div`
   padding: ${(t) => {
   var e;
   return (e = t.theme.sizes) == null ? void 0 : e.normal;
@@ -175,7 +175,7 @@ const $e = ({
   return (e = t.theme.sizes) == null ? void 0 : e.small;
 }};
   }
-`, et = c(G)`
+`, Ze = c(E)`
   list-style: none;
   padding: 0;
   margin: 0;
@@ -210,22 +210,22 @@ const $e = ({
       }
     }
   }
-`, Rt = ({
+`, Ht = ({
   trigger: t,
   className: e,
   children: n,
-  closeButtonAriaLabel: a,
-  ...i
-}) => /* @__PURE__ */ o(
-  de,
+  closeButtonAriaLabel: i,
+  ...o
+}) => /* @__PURE__ */ a(
+  oe,
   {
-    className: z(e, "humany-dropdown-list"),
-    closeButtonAriaLabel: a,
+    className: k(e, "humany-dropdown-list"),
+    closeButtonAriaLabel: i,
     trigger: t,
-    children: /* @__PURE__ */ o(tt, { ...i, children: n })
+    children: /* @__PURE__ */ a(et, { ...o, children: n })
   }
-), tt = c(j)`
-  ${R}
+), et = c(C)`
+  ${D}
   font-family: ${(t) => {
   var e;
   return (e = t.theme.fonts) == null ? void 0 : e.type;
@@ -233,7 +233,7 @@ const $e = ({
   > div {
     ${(t) => {
   var e;
-  return K(t)(
+  return Y(t)(
     "> h1",
     y`
           font-size: ${(e = t.theme.fonts) == null ? void 0 : e.normal};
@@ -260,7 +260,7 @@ const $e = ({
       }
     }
   }
-`, nt = (t) => y`
+`, tt = (t) => y`
   ${t["data-loading"] && "position: relative;"};
   ${t["data-loading"] && "min-height: 150px;"}
   > * {
@@ -270,7 +270,7 @@ const $e = ({
   .humany-loader {
     opacity: ${t["data-loading"] ? "1" : "0"};
   }
-`, Wt = c(P)`
+`, jt = c(I)`
   && {
     font-size: ${(t) => {
   var e;
@@ -278,7 +278,7 @@ const $e = ({
 }};
   }
   width: 1.2em;
-`, Et = c(me)`
+`, Rt = c(se)`
   font-size: ${(t) => {
   var e;
   return (e = t.theme.fonts) == null ? void 0 : e.medium;
@@ -289,7 +289,7 @@ const $e = ({
   var e;
   return (e = t.theme.colors) == null ? void 0 : e.text;
 }};
-`, at = c(U)`
+`, nt = c(_)`
   display: flex;
   align-items: center;
 
@@ -303,11 +303,11 @@ const $e = ({
 }}
 
   &:focus-visible {
-    ${(t) => t["data-has-label"] === "true" && Z}
+    ${(t) => t["data-has-label"] === "true" && V}
 
     svg, i {
       ${(t) => t["data-has-label"] === "false" && t["data-has-symbol"] === "true" && y`
-          ${Z(t)}
+          ${V(t)}
           box-sizing: content-box;
         `}
     }
@@ -317,12 +317,12 @@ const $e = ({
     flex: 1;
     font-weight: 300;
   }
-`, ot = ({
+`, it = ({
   addFavoriteTooltip: t,
   removeFavoriteCancelLabel: e,
   removeFavoriteConfirmLabel: n,
-  removeFavoriteHeader: a,
-  removeFavoriteLabel: i,
+  removeFavoriteHeader: i,
+  removeFavoriteLabel: o,
   removeFavoriteTooltip: s,
   id: r,
   isFavorite: m,
@@ -330,58 +330,58 @@ const $e = ({
   buttonLabel: d = "",
   actions: { addFavorite: u, removeFavorite: h }
 }) => {
-  const f = k(() => {
+  const f = w(() => {
     h(r);
-  }, [r, h]), x = k(() => {
+  }, [r, h]), v = w(() => {
     u(r);
-  }, [r, u]), v = `${m ? s : t}${l ? `: "${l}"` : ""}`;
-  return m ? /* @__PURE__ */ o(
-    Ee,
+  }, [r, u]), $ = `${m ? s : t}${l ? `: "${l}"` : ""}`;
+  return m ? /* @__PURE__ */ a(
+    Re,
     {
       trigger: /* @__PURE__ */ p(
-        ne,
+        Q,
         {
           className: "humany-favorite-button",
-          title: v,
-          "aria-label": v,
+          title: $,
+          "aria-label": $,
           "data-favorite": "true",
           "data-has-label": d ? "true" : "false",
           "data-has-symbol": "true",
           children: [
-            /* @__PURE__ */ o(
-              S,
+            /* @__PURE__ */ a(
+              z,
               {
                 size: 16,
                 symbol: { type: "Svg", content: "star-empty" }
               }
             ),
-            d && /* @__PURE__ */ o(_, { children: d })
+            d && /* @__PURE__ */ a(j, { children: d })
           ]
         }
       ),
       onConfirm: f,
       cancelLabel: e,
       confirmLabel: n,
-      header: a,
-      text: i
+      header: i,
+      text: o
     }
   ) : /* @__PURE__ */ p(
-    ne,
+    Q,
     {
       className: "humany-favorite-button",
-      title: v,
-      "aria-label": v,
-      onClick: x,
+      title: $,
+      "aria-label": $,
+      onClick: v,
       "data-favorite": "false",
       "data-has-label": d ? "true" : "false",
       "data-has-symbol": "true",
       children: [
-        /* @__PURE__ */ o(S, { size: 16, symbol: { type: "Svg", content: "star-empty" } }),
-        d && /* @__PURE__ */ o(_, { children: d })
+        /* @__PURE__ */ a(z, { size: 16, symbol: { type: "Svg", content: "star-empty" } }),
+        d && /* @__PURE__ */ a(j, { children: d })
       ]
     }
   );
-}, ne = c(at)`
+}, Q = c(nt)`
   grid-area: favorite;
 
   &:focus-visible {
@@ -406,17 +406,17 @@ const $e = ({
   }
 
   ${(t) => {
-  var e, n, a, i, s, r, m;
+  var e, n, i, o, s, r, m;
   return ((e = t.theme.colors) == null ? void 0 : e.text) && y`
       svg {
         stroke: ${(n = t.theme.colors) == null ? void 0 : n.text};
 
         path {
-          stroke: ${(a = t.theme.colors) == null ? void 0 : a.text};
+          stroke: ${(i = t.theme.colors) == null ? void 0 : i.text};
         }
 
         ${t["data-favorite"] === "true" && `
-          fill: ${(i = t.theme.colors) == null ? void 0 : i.text};
+          fill: ${(o = t.theme.colors) == null ? void 0 : o.text};
 
           path {
             fill: ${(s = t.theme.colors) == null ? void 0 : s.text};
@@ -443,28 +443,28 @@ const $e = ({
       }
     `;
 }}
-`, Ht = W(
+`, Wt = A(
   ({
     onFeedback: t = () => {
     },
     direction: e = "horizontal",
     className: n,
-    header: a,
-    positive: i,
+    header: i,
+    positive: o,
     negative: s,
     selected: r,
     ...m
   }, l) => /* @__PURE__ */ p(
-    st,
+    ot,
     {
-      className: z(n, "humany-feedback"),
+      className: k(n, "humany-feedback"),
       "data-direction": e,
-      ...he(m),
+      ...re(m),
       ref: l,
       children: [
-        !!a && /* @__PURE__ */ o(it, { children: a }),
+        !!i && /* @__PURE__ */ a(at, { children: i }),
         /* @__PURE__ */ p(
-          ae,
+          X,
           {
             className: "humany-feedback-button",
             disabled: !!r,
@@ -472,13 +472,13 @@ const $e = ({
             "data-direction": e,
             onClick: () => t("positive"),
             children: [
-              /* @__PURE__ */ o(P, { faIcon: "smile-o" }),
-              /* @__PURE__ */ o("span", { children: i })
+              /* @__PURE__ */ a(I, { faIcon: "smile-o" }),
+              /* @__PURE__ */ a("span", { children: o })
             ]
           }
         ),
         /* @__PURE__ */ p(
-          ae,
+          X,
           {
             className: "humany-feedback-button",
             disabled: !!r,
@@ -486,15 +486,15 @@ const $e = ({
             "data-direction": e,
             onClick: () => t("negative"),
             children: [
-              /* @__PURE__ */ o(P, { faIcon: "frown-o" }),
-              /* @__PURE__ */ o("span", { children: s })
+              /* @__PURE__ */ a(I, { faIcon: "frown-o" }),
+              /* @__PURE__ */ a("span", { children: s })
             ]
           }
         )
       ]
     }
   )
-), it = c(_)`
+), at = c(j)`
   font-weight: normal;
   margin: 0 0 ${(t) => {
   var e;
@@ -505,7 +505,7 @@ const $e = ({
   return (e = t.theme.fonts) == null ? void 0 : e.normal;
 }};
   display: block;
-`, ae = c(U)`
+`, X = c(_)`
   display: inline-block;
   font-size: ${(t) => {
   var e;
@@ -533,7 +533,7 @@ const $e = ({
 
   ${(t) => {
   var e, n;
-  return ((e = t.theme.colors) == null ? void 0 : e.primary) && ce({
+  return ((e = t.theme.colors) == null ? void 0 : e.primary) && ae({
     active: t["data-selected"],
     primaryColor: (n = t.theme.colors) == null ? void 0 : n.primary,
     secondaryColor: "#FFFFFF",
@@ -547,7 +547,7 @@ const $e = ({
   return (e = t.theme.sizes) == null ? void 0 : e.small;
 }} 0 0;
   }
-`, st = c.div`
+`, ot = c.div`
   ${(t) => {
   var e;
   return t["data-direction"] === "vertical" && y`
@@ -559,30 +559,30 @@ const $e = ({
       }
     `;
 }}
-`, Ot = () => {
-  const [t, e] = F(null), n = M("ArrowLeft"), a = M("ArrowRight"), i = M("ArrowUp"), s = M("ArrowDown");
-  return E(() => {
-    e(n ? "left" : a ? "right" : i ? "up" : s ? "down" : null);
-  }, [n, a, i, s]), t;
+`, Et = () => {
+  const [t, e] = N(null), n = T("ArrowLeft"), i = T("ArrowRight"), o = T("ArrowUp"), s = T("ArrowDown");
+  return M(() => {
+    e(n ? "left" : i ? "right" : o ? "up" : s ? "down" : null);
+  }, [n, i, o, s]), t;
 }, Yt = (t, e) => {
-  const [n, a] = F(t), i = k(() => setTimeout(() => {
-    a(t);
-  }, e), [e, a, t]);
-  return E(
+  const [n, i] = N(t), o = w(() => setTimeout(() => {
+    i(t);
+  }, e), [e, i, t]);
+  return M(
     () => {
-      const s = i();
+      const s = o();
       return () => {
         clearTimeout(s);
       };
     },
-    [i]
+    [o]
     // Only re-call effect if value or delay changes
   ), n;
-}, rt = () => {
-  const t = fe(), [e, n] = F([]), a = t.get("favorites");
-  E(() => {
-    if (a) {
-      n(a.get());
+}, st = () => {
+  const t = le(), [e, n] = N([]), i = t.get("favorites");
+  M(() => {
+    if (i) {
+      n(i.get());
       const { events: l } = t.get("$widget");
       return l.subscribe(
         "widget:favorites-updated",
@@ -592,16 +592,16 @@ const $e = ({
       );
     }
   }, []);
-  const i = (l) => a ? a.add(l) : Promise.resolve([]), s = (l) => a ? a.remove(l) : Promise.resolve([]), r = () => a ? a.clear() : Promise.resolve([]), m = k(
-    (l) => e.indexOf(l) > -1 ? s(l) : i(l),
+  const o = (l) => i ? i.add(l) : Promise.resolve([]), s = (l) => i ? i.remove(l) : Promise.resolve([]), r = () => i ? i.clear() : Promise.resolve([]), m = w(
+    (l) => e.indexOf(l) > -1 ? s(l) : o(l),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [e]
   );
   return [
     e,
-    Ke(
+    Ue(
       () => ({
-        addFavorite: i,
+        addFavorite: o,
         removeFavorite: s,
         clearFavorites: r,
         toggleFavorite: m
@@ -611,14 +611,14 @@ const $e = ({
     )
   ];
 }, _t = () => {
-  const [t, e] = F(!1), n = pe(), a = k(() => e(!0), [e]), i = k(() => e(!1), [e]);
-  return ee("mouseenter", a, n.current), ee("mouseleave", i, n.current), [t, n];
-}, lt = ({
-  format: t = ge.YYYY_MM_DD_HH_MM,
+  const [t, e] = N(!1), n = me(), i = w(() => e(!0), [e]), o = w(() => e(!1), [e]);
+  return q("mouseenter", i, n.current), q("mouseleave", o, n.current), [t, n];
+}, rt = ({
+  format: t = de.YYYY_MM_DD_HH_MM,
   className: e = "",
   byLabel: n = "",
-  modifiedLabel: a = "",
-  publishedLabel: i = "",
+  modifiedLabel: i = "",
+  publishedLabel: o = "",
   modifiedBy: s = "",
   publishedBy: r = "",
   showModified: m = !1,
@@ -626,58 +626,58 @@ const $e = ({
   modified: d,
   published: u
 }) => {
-  const h = l && u ? /* @__PURE__ */ o(oe, { format: t, timestamp: u }) : null, f = m && d ? /* @__PURE__ */ o(oe, { format: t, timestamp: d }) : null;
-  return !h && !f ? null : /* @__PURE__ */ p(Y, { className: z(e, "humany-metadata"), children: [
-    h && /* @__PURE__ */ p(Y, { className: "humany-published", children: [
-      i,
+  const h = l && u ? /* @__PURE__ */ a(Z, { format: t, timestamp: u }) : null, f = m && d ? /* @__PURE__ */ a(Z, { format: t, timestamp: d }) : null;
+  return !h && !f ? null : /* @__PURE__ */ p(H, { className: k(e, "humany-metadata"), children: [
+    h && /* @__PURE__ */ p(H, { className: "humany-published", children: [
+      o,
       h,
       n && r && ` ${n.replace("{{editor}}", r)}`
     ] }),
-    f && /* @__PURE__ */ p(Y, { className: "humany-modified", children: [
+    f && /* @__PURE__ */ p(H, { className: "humany-modified", children: [
       h && ", ",
-      a,
+      i,
       f,
       n && s && ` ${n.replace("{{editor}}", s)}`
     ] })
   ] });
-}, oe = c(ue)`
+}, Z = c(ce)`
   &:not(:first-child) {
     margin-left: 4px;
   }
   &:not(:last-child) {
     margin-right: 4px;
   }
-`, Y = c(me)`
+`, H = c(se)`
   font-style: italic;
-`, ct = ({ tags: t }) => t.filter((e) => e.symbol).length ? /* @__PURE__ */ o(
-  ht,
+`, lt = ({ tags: t }) => t.filter((e) => e.symbol).length ? /* @__PURE__ */ a(
+  mt,
   {
     className: "humany-guide-list-tags",
     items: t,
-    renderItem: ({ id: e, symbol: n, title: a }) => n && /* @__PURE__ */ o("li", { "data-tag": e, children: /* @__PURE__ */ o(ft, { size: 18, symbol: n, title: a }) }, e)
+    renderItem: ({ id: e, symbol: n, title: i }) => n && /* @__PURE__ */ a("li", { "data-tag": e, children: /* @__PURE__ */ a(ht, { size: 18, symbol: n, title: i }) }, e)
   }
-) : null, Vt = W(({ title: t, id: e, route: n, symbolSize: a, collapseUri: i, children: s }, r) => {
-  const { params: m } = re();
-  return /* @__PURE__ */ p(dt, { ref: r, "data-guide": e, children: [
-    /* @__PURE__ */ o(
-      V,
+) : null, Ot = A(({ title: t, id: e, route: n, symbolSize: i, collapseUri: o, children: s }, r) => {
+  const { params: m } = ne();
+  return /* @__PURE__ */ p(ct, { ref: r, "data-guide": e, children: [
+    /* @__PURE__ */ a(
+      R,
       {
         "aria-expanded": !0,
         title: t,
         "aria-label": t,
         routeName: n,
-        params: B({
+        params: F({
           ...m,
-          uriName: i || void 0,
+          uriName: o || void 0,
           id: void 0,
           guide: void 0,
           accordion: void 0
         }),
         text: t,
-        children: /* @__PURE__ */ o(
-          S,
+        children: /* @__PURE__ */ a(
+          z,
           {
-            size: a,
+            size: i,
             symbol: { type: "Svg", content: "caret-up" }
           }
         )
@@ -685,7 +685,7 @@ const $e = ({
     ),
     s
   ] });
-}), dt = c.li`
+}), ct = c.li`
   > a {
     grid-column: 1/-1;
     font-weight: bold;
@@ -698,13 +698,13 @@ const $e = ({
   > div {
     grid-column: 1/-1;
   }
-`, qt = W(
+`, Gt = A(
   ({
     expandable: t = !1,
     routing: e = {},
     paramMappers: n = {},
-    symbolSize: a = 11,
-    pageRole: i = "link",
+    symbolSize: i = 11,
+    pageRole: o = "link",
     pageCaret: s = "down",
     showTags: r = !1,
     showFavoriteToggle: m = !1,
@@ -715,48 +715,48 @@ const $e = ({
     },
     metadata: h = {},
     pageLabel: f,
-    className: x,
-    children: v,
-    items: $,
-    renderItem: N,
-    addFavoriteTooltip: ve,
-    removeFavoriteCancelLabel: xe,
-    removeFavoriteConfirmLabel: be,
-    removeFavoriteHeader: we,
-    removeFavoriteLabel: ke,
-    removeFavoriteTooltip: ze,
-    searchResultsEmptyLabel: Se,
-    ...J
-  }, Ne) => {
-    const Q = He(), I = pe(), T = Oe($), { guide: Le = "guide", page: Ie = "index" } = e, {
-      guide: Te = ({ id: g }) => B({ guide: g }),
-      page: X = () => B()
-    } = n, [De, Fe] = rt(), Ce = fe(), { events: Ae } = Ce.get("$widget");
-    Ue(Ne, () => I.current);
-    const H = (g) => {
-      const { id: b, title: w, tags: L, published: C, modified: D, publishedBy: A, modifiedBy: O } = g;
+    className: v,
+    children: $,
+    items: x,
+    renderItem: S,
+    addFavoriteTooltip: ue,
+    removeFavoriteCancelLabel: ge,
+    removeFavoriteConfirmLabel: pe,
+    removeFavoriteHeader: ye,
+    removeFavoriteLabel: $e,
+    removeFavoriteTooltip: ve,
+    searchResultsEmptyLabel: xe,
+    ...O
+  }, be) => {
+    const we = We(), P = me(), { guide: ke = "guide", page: ze = "index" } = e, {
+      guide: Se = ({ id: g }) => F({ guide: g }),
+      page: G = () => F()
+    } = n, [Ne, Le] = st(), Te = le(), { events: Ie } = Te.get("$widget");
+    Ve(be, () => P.current);
+    const B = (g) => {
+      const { id: b, title: L, tags: Ae, published: K, modified: U, publishedBy: Me, modifiedBy: Pe } = g;
       return /* @__PURE__ */ p(
         "li",
         {
           "data-guide": b,
-          "has-metadata": (!!(h != null && h.showPublished) && !!C || !!(h != null && h.showModified) && !!D).toString(),
+          "has-metadata": (!!(h != null && h.showPublished) && !!K || !!(h != null && h.showModified) && !!U).toString(),
           children: [
-            /* @__PURE__ */ o(
-              V,
+            /* @__PURE__ */ a(
+              R,
               {
                 className: "humany-guide-link",
-                routeName: Le,
-                onClick: (je) => {
-                  d(je, g), Ae.dispatch("tracking:guide-list-item-clicked", {
+                routeName: ke,
+                onClick: (Be) => {
+                  d(Be, g), Ie.dispatch("tracking:guide-list-item-clicked", {
                     guide: g
                   });
                 },
-                params: Te(g),
-                text: w,
-                children: /* @__PURE__ */ o(
-                  S,
+                params: Se(g),
+                text: L,
+                children: /* @__PURE__ */ a(
+                  z,
                   {
-                    size: a,
+                    size: i,
                     symbol: {
                       type: "Svg",
                       content: t ? "caret-down" : "caret-right"
@@ -765,122 +765,96 @@ const $e = ({
                 )
               }
             ),
-            m && /* @__PURE__ */ o(
-              ot,
+            m && /* @__PURE__ */ a(
+              it,
               {
-                guideTitle: w,
-                addFavoriteTooltip: ve,
-                removeFavoriteCancelLabel: xe,
-                removeFavoriteConfirmLabel: be,
-                removeFavoriteHeader: we,
-                removeFavoriteLabel: ke,
-                removeFavoriteTooltip: ze,
-                isFavorite: De.indexOf(b) > -1,
-                actions: Fe,
+                guideTitle: L,
+                addFavoriteTooltip: ue,
+                removeFavoriteCancelLabel: ge,
+                removeFavoriteConfirmLabel: pe,
+                removeFavoriteHeader: ye,
+                removeFavoriteLabel: $e,
+                removeFavoriteTooltip: ve,
+                isFavorite: Ne.indexOf(b) > -1,
+                actions: Le,
                 id: b
               }
             ),
-            r && /* @__PURE__ */ o(ct, { tags: L }),
-            /* @__PURE__ */ o(
-              ut,
+            r && /* @__PURE__ */ a(lt, { tags: Ae }),
+            /* @__PURE__ */ a(
+              ft,
               {
                 ...h,
-                indent: t ? void 0 : a,
-                modified: D,
-                published: C,
-                publishedBy: A,
-                modifiedBy: O
+                indent: t ? void 0 : i,
+                modified: U,
+                published: K,
+                publishedBy: Me,
+                modifiedBy: Pe
               }
             )
           ]
         },
         b
       );
-    }, Me = k(
-      (g, b, w) => N ? N(g, b, w, H) : H(g),
-      [N, H]
-    ), Pe = k(
+    }, Fe = w(
+      (g, b, L) => S ? S(g, b, L, B) : B(g),
+      [S, B]
+    ), Ce = w(
       (g) => {
-        l && (g.preventDefault(), u("page", X()));
+        l && (g.preventDefault(), u("page", G()));
       },
       [u, l]
     );
-    E(() => {
-      if (T && T.length < $.length && I.current) {
-        const g = I.current.querySelectorAll(
-          ".humany-guide-list > ul > li"
-        ), b = g[T.length];
-        if (g.length === $.length && T.length) {
-          const w = g[T.length];
-          if (w) {
-            const L = w.querySelector(
-              ".humany-guide-link"
-            );
-            L && L.focus();
-          }
-        } else
-          b && new MutationObserver((L, C) => {
-            L.forEach((D) => {
-              if (D.addedNodes) {
-                const A = Array.from(
-                  D.addedNodes
-                ).find((O) => O.tagName === "A");
-                A && Ge(I.current, document.activeElement) && (Q && A.focus(), C.disconnect());
-              }
-            });
-          }).observe(b, {
-            attributes: !1,
-            characterData: !1,
-            childList: !0,
-            subtree: !0,
-            attributeOldValue: !1,
-            characterDataOldValue: !1
-          });
-      }
-    });
-    const Be = !!Object.keys(h).filter(
+    M(() => {
+      var b;
+      const g = (b = P.current) == null ? void 0 : b.querySelector(
+        ".humany-guide-list > ul > li .humany-guide-link"
+      );
+      g && Ee() && (g.focus(), Ye(!1));
+    }, [x]);
+    const De = !!Object.keys(h).filter(
       (g) => typeof h[g] < "u"
     ).length;
     return /* @__PURE__ */ p(
-      mt,
+      dt,
       {
-        className: z(x, "humany-guide-list"),
-        "data-item-count": $.length,
-        items: $,
-        renderItem: Me,
-        isTabbing: Q,
+        className: k(v, "humany-guide-list"),
+        "data-item-count": x.length,
+        items: x,
+        renderItem: Fe,
+        isTabbing: we,
         expandable: t ? "true" : "false",
-        "grid-items": r || m || Be ? "true" : "false",
-        ...he(J),
-        ref: I,
+        "grid-items": r || m || De ? "true" : "false",
+        ...re(O),
+        ref: P,
         children: [
-          f ? /* @__PURE__ */ o(
-            V,
+          f ? /* @__PURE__ */ a(
+            R,
             {
               text: f,
               title: f,
               "aria-label": f,
-              routeName: Ie,
-              role: i,
-              params: X(),
-              onClick: Pe,
-              children: /* @__PURE__ */ o(
-                S,
+              routeName: ze,
+              role: o,
+              params: G(),
+              onClick: Ce,
+              children: /* @__PURE__ */ a(
+                z,
                 {
-                  size: a,
+                  size: i,
                   symbol: { type: "Svg", content: `caret-${s}` }
                 }
               )
             }
           ) : null,
-          v,
-          !J["data-loading"] && $.length === 0 && /* @__PURE__ */ o("p", { children: Se })
+          $,
+          !O["data-loading"] && x.length === 0 && /* @__PURE__ */ a("p", { children: xe })
         ]
       }
     );
   }
-), mt = c(j)`
-  ${R}
+), dt = c(C)`
+  ${D}
   padding: ${(t) => {
   var e;
   return (e = t.theme.sizes) == null ? void 0 : e.large;
@@ -892,7 +866,7 @@ const $e = ({
   text-decoration: none;
 
   > div {
-    ${(t) => K(t)(
+    ${(t) => Y(t)(
   "> h1",
   y`
           white-space: pre-wrap;
@@ -983,7 +957,7 @@ const $e = ({
 }}
 
       &:focus-visible {
-        ${q}
+        ${W}
         text-decoration: underline;
       }
 
@@ -1026,12 +1000,12 @@ const $e = ({
     }
 
     &:focus-visible {
-      ${q}
+      ${W}
       text-decoration: underline;
     }
   }
-`, ht = c(G)`
-  ${le}
+`, mt = c(E)`
+  ${ie}
   display: flex;
   margin: 0 0 0 auto;
   grid-area: tags;
@@ -1046,7 +1020,7 @@ const $e = ({
     align-items: center;
     justify-content: space-between;
   }
-`, ft = c(S)`
+`, ht = c(z)`
   display: block;
   color: ${(t) => {
   var e;
@@ -1063,7 +1037,7 @@ const $e = ({
         font-size: ${t.size}px;
       `;
 }}
-`, ut = c(lt)`
+`, ft = c(rt)`
   grid-area: metadata;
   text-overflow: ellipsis;
   overflow: hidden;
@@ -1075,11 +1049,11 @@ const $e = ({
   var e;
   return typeof t.indent == "number" && `text-indent: calc(${(e = t.theme.sizes) == null ? void 0 : e.small} * 2 + ${t.indent}px);`;
 }}
-`, gt = ye`
+`, ut = he`
   100% {
     transform: rotate(360deg);
   }
-`, pt = ye`
+`, gt = he`
   0% {
     stroke-dasharray: 1, 200;
     stroke-dashoffset: 0;
@@ -1092,8 +1066,8 @@ const $e = ({
     stroke-dasharray: 89, 200;
     stroke-dashoffset: -124px;
   }
-`, yt = c.svg`
-  animation: ${gt} 2s linear infinite;
+`, pt = c.svg`
+  animation: ${ut} 2s linear infinite;
   height: 100%;
   transform-origin: center center;
   width: 100%;
@@ -1104,7 +1078,7 @@ const $e = ({
   right: 0;
   margin: auto;
   transition: 200ms ease-out opacity;
-`, $t = c.div`
+`, yt = c.div`
   position: absolute;
   top: 0;
   bottom: 0;
@@ -1123,7 +1097,7 @@ const $e = ({
   .humany-spinner-svg {
     opacity: ${(t) => t["data-loading"] ? "1" : "0"};
   }
-`, vt = c.div`
+`, $t = c.div`
   position: relative;
   margin: 0 auto;
   width: 100px;
@@ -1132,18 +1106,18 @@ const $e = ({
     display: block;
     padding-top: 100%;
   }
-`, xt = c.circle`
+`, vt = c.circle`
   stroke-dasharray: 1, 200;
   stroke-dashoffset: 0;
-  animation: ${pt} 1.5s ease-in-out infinite;
+  animation: ${gt} 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;
-`, bt = ({ loading: t = !1 }) => /* @__PURE__ */ o($t, { className: "humany-loader", "data-loading": t, children: /* @__PURE__ */ o(vt, { className: "humany-spinner", children: /* @__PURE__ */ o(yt, { className: "humany-spinner-svg", viewBox: "25 25 50 50", children: /* @__PURE__ */ o(
-  xt,
+`, xt = ({ loading: t = !1 }) => /* @__PURE__ */ a(yt, { className: "humany-loader", "data-loading": t, children: /* @__PURE__ */ a($t, { className: "humany-spinner", children: /* @__PURE__ */ a(pt, { className: "humany-spinner-svg", viewBox: "25 25 50 50", children: /* @__PURE__ */ a(
+  vt,
   {
     cx: "50",
     cy: "50",
@@ -1152,48 +1126,48 @@ const $e = ({
     "stroke-width": "2",
     "stroke-miterlimit": "10"
   }
-) }) }) }), Gt = ({
+) }) }) }), Kt = ({
   className: t,
   showHeader: e,
   notificationList: n,
-  loading: a,
-  ...i
+  loading: i,
+  ...o
 }) => {
-  const [s, r] = F(null), {
+  const [s, r] = N(null), {
     id: m,
     title: l,
     symbol: d,
     notifications: u = [],
     defaultHeaderOptions: h = { visible: !0 }
   } = n || {};
-  return !u.length && !a ? null : /* @__PURE__ */ o(
-    kt,
+  return !u.length && !i ? null : /* @__PURE__ */ a(
+    wt,
     {
-      ...i,
-      "data-loading": a,
+      ...o,
+      "data-loading": i,
       "data-show-header": typeof e == "boolean" ? e : h.visible,
-      className: z(t, "humany-notification-list"),
+      className: k(t, "humany-notification-list"),
       "data-notification-category": m,
       header: l,
       symbol: d,
       items: u,
-      renderItem: ({ id: f, title: x, body: v, modified: $, expandable: N }) => /* @__PURE__ */ o(
-        zt,
+      renderItem: ({ id: f, title: v, body: $, modified: x, expandable: S }) => /* @__PURE__ */ a(
+        kt,
         {
           "data-notification": f,
-          "data-expanded": N ? s === f : !0,
-          children: N ? /* @__PURE__ */ p(se, { children: [
+          "data-expanded": S ? s === f : !0,
+          children: S ? /* @__PURE__ */ p(te, { children: [
             /* @__PURE__ */ p(
-              wt,
+              bt,
               {
-                title: x,
-                "aria-label": x,
+                title: v,
+                "aria-label": v,
                 "aria-expanded": s === f,
                 onClick: () => r(s === f ? null : f),
                 children: [
-                  /* @__PURE__ */ o("span", { children: x }),
-                  /* @__PURE__ */ o(
-                    St,
+                  /* @__PURE__ */ a("span", { children: v }),
+                  /* @__PURE__ */ a(
+                    zt,
                     {
                       size: 11,
                       symbol: {
@@ -1205,22 +1179,22 @@ const $e = ({
                 ]
               }
             ),
-            /* @__PURE__ */ o(ie, { html: v }),
-            $ && /* @__PURE__ */ o(
-              Nt,
+            /* @__PURE__ */ a(ee, { html: $ }),
+            x && /* @__PURE__ */ a(
+              St,
               {
-                format: ge.YYYY_MM_DD,
-                timestamp: $
+                format: de.YYYY_MM_DD,
+                timestamp: x
               }
             )
-          ] }) : /* @__PURE__ */ o(ie, { html: v })
+          ] }) : /* @__PURE__ */ a(ee, { html: $ })
         },
         f
       ),
-      children: /* @__PURE__ */ o(bt, { loading: a })
+      children: /* @__PURE__ */ a(xt, { loading: i })
     }
   );
-}, wt = c(U)`
+}, bt = c(_)`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -1248,7 +1222,7 @@ const $e = ({
     white-space: nowrap;
   }
   &:focus-visible {
-    ${q}
+    ${W}
     span {
       color: ${(t) => {
   var e;
@@ -1257,9 +1231,9 @@ const $e = ({
       text-decoration: underline;
     }
   }
-`, kt = c(j)`
-  ${nt}
-  ${R}
+`, wt = c(C)`
+  ${tt}
+  ${D}
   overflow: hidden;
   justify-content: flex-start;
   padding: ${(t) => {
@@ -1268,7 +1242,7 @@ const $e = ({
 }};
   ${(t) => !t["data-show-header"] && y`
       > div {
-        ${K(t)(
+        ${Y(t)(
   "h1",
   y`
             display: none;
@@ -1282,21 +1256,21 @@ const $e = ({
       text-decoration: underline;
     }
   }
-`, ie = c(Ye)`
-  ${_e}
+`, ee = c(_e)`
+  ${Oe}
   font-weight: 300;
 
   p {
     white-space: normal;
   }
-`, zt = c.li`
+`, kt = c.li`
   .humany-paragraph {
     display: none;
     &:not(:only-child) {
       ${(t) => {
-  var e, n, a;
+  var e, n, i;
   return ((e = t.theme.sizes) == null ? void 0 : e.cardinal) && ((n = t.theme.sizes) == null ? void 0 : n.normal) && y`
-          margin: ${(a = t.theme.sizes) == null ? void 0 : a.normal} 0;
+          margin: ${(i = t.theme.sizes) == null ? void 0 : i.normal} 0;
         `;
 }}
     }
@@ -1316,7 +1290,7 @@ const $e = ({
   return (e = t.theme.colors) == null ? void 0 : e.accent;
 }};
   }
-`, St = c(S)`
+`, zt = c(z)`
   margin: 0 0 0 ${(t) => {
   var e;
   return (e = t.theme.sizes) == null ? void 0 : e.small;
@@ -1327,64 +1301,64 @@ const $e = ({
   return (e = t.theme.colors) == null ? void 0 : e.primary;
 }};
   }
-`, Nt = c(ue)`
+`, St = c(ce)`
   font-size: ${(t) => {
   var e;
   return (e = t.theme.fonts) == null ? void 0 : e.small;
 }};
   font-weight: 300;
-`, Lt = (t) => new RegExp("^#", "i").test(t), It = (t) => ({ children: e, ...n }) => {
+`, Nt = (t) => new RegExp("^#", "i").test(t), Lt = (t) => ({ children: e, ...n }) => {
   const {
-    implementation: a,
-    name: i
+    implementation: i,
+    name: o
   } = t.get("$widget"), { href: s = "" } = n;
-  if (Lt(s))
-    return /* @__PURE__ */ o(Ve, { smooth: !0, to: s, children: e });
-  const r = a.bindings.map((d) => d.replace(/\./g, "\\.")).join("|"), l = new RegExp(
+  if (Nt(s))
+    return /* @__PURE__ */ a(Ge, { smooth: !0, to: s, children: e });
+  const r = i.bindings.map((d) => d.replace(/\./g, "\\.")).join("|"), l = new RegExp(
     `^((http[s]?:)?//)?(${r})/([^\\s]+)`
   ).exec(s);
   if (l && l.length >= 4) {
     const d = l[4];
-    if (a.widgets.get(d) && !d.startsWith("blob?") && !d.startsWith(i))
-      return /* @__PURE__ */ o(qe, { widgetName: d, children: e });
+    if (i.widgets.get(d) && !d.startsWith("blob?") && !d.startsWith(o))
+      return /* @__PURE__ */ a(Ke, { widgetName: d, children: e });
   }
-  return /* @__PURE__ */ o("a", { ...n, children: e });
-}, Kt = (t, e = []) => ({
+  return /* @__PURE__ */ a("a", { ...n, children: e });
+}, Ut = (t, e = []) => ({
   transform: {
     a: (n) => {
-      const { children: a, ...i } = n, s = i["data-target"];
+      const { children: i, ...o } = n, s = o["data-target"];
       if (s && e.length) {
         const m = e.find(
           ({ connection: l }) => l === s
         );
         if (m)
-          return /* @__PURE__ */ o($e, { ...m, children: a });
+          return /* @__PURE__ */ a(fe, { ...m, children: i });
       }
-      return It(t)(n);
+      return Lt(t)(n);
     }
   }
 });
 export {
-  Vt as AccordionListItem,
-  $e as DialogLink,
-  Pt as DialogList,
-  Bt as DrawerList,
-  jt as DropdownActions,
-  Rt as DropdownList,
-  ot as FavoriteButton,
-  Ht as Feedback,
-  qt as GuideList,
-  bt as Loader,
-  $t as LoaderWrapper,
-  lt as Metadata,
-  Gt as NotificationList,
-  Wt as SmallCaret,
-  Et as StyledHeaderText,
-  at as StyledListButton,
-  Kt as guideRenderInstructions,
-  nt as loadingOpacity,
-  Ot as useArrowKeys,
+  Ot as AccordionListItem,
+  fe as DialogLink,
+  Mt as DialogList,
+  Pt as DrawerList,
+  Bt as DropdownActions,
+  Ht as DropdownList,
+  it as FavoriteButton,
+  Wt as Feedback,
+  Gt as GuideList,
+  xt as Loader,
+  yt as LoaderWrapper,
+  rt as Metadata,
+  Kt as NotificationList,
+  jt as SmallCaret,
+  Rt as StyledHeaderText,
+  nt as StyledListButton,
+  Ut as guideRenderInstructions,
+  tt as loadingOpacity,
+  Et as useArrowKeys,
   Yt as useDebounce,
-  rt as useFavorites,
+  st as useFavorites,
   _t as useHover
 };