@telia-ace/knowledge-widget-ui 1.0.26-next.6 → 1.0.26-next.8

package/dist/index.js

@@ -1,38 +1,38 @@
 var He = Object.defineProperty, je = Object.defineProperties;
 var Oe = Object.getOwnPropertyDescriptors;
 var R = Object.getOwnPropertySymbols;
-var re = Object.prototype.hasOwnProperty, ie = Object.prototype.propertyIsEnumerable;
-var se = (t, e, n) => e in t ? He(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n, y = (t, e) => {
-  for (var n in e || (e = {}))
-    re.call(e, n) && se(t, n, e[n]);
+var re = Object.prototype.hasOwnProperty, se = Object.prototype.propertyIsEnumerable;
+var oe = (t, e, a) => e in t ? He(t, e, { enumerable: !0, configurable: !0, writable: !0, value: a }) : t[e] = a, y = (t, e) => {
+  for (var a in e || (e = {}))
+    re.call(e, a) && oe(t, a, e[a]);
   if (R)
-    for (var n of R(e))
-      ie.call(e, n) && se(t, n, e[n]);
+    for (var a of R(e))
+      se.call(e, a) && oe(t, a, e[a]);
   return t;
 }, E = (t, e) => je(t, Oe(e));
 var w = (t, e) => {
-  var n = {};
+  var a = {};
   for (var o in t)
-    re.call(t, o) && e.indexOf(o) < 0 && (n[o] = t[o]);
+    re.call(t, o) && e.indexOf(o) < 0 && (a[o] = t[o]);
   if (t != null && R)
     for (var o of R(t))
-      e.indexOf(o) < 0 && ie.call(t, o) && (n[o] = t[o]);
-  return n;
+      e.indexOf(o) < 0 && se.call(t, o) && (a[o] = t[o]);
+  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 ee, list as pe, invertedHoverButton as ye, Drawer as _e, ItemList as Y, itemList as _, Dropdown as $e, headingElement as te, Text as ve, Button as ne, paddedBorderTabStyle as le, Confirm as Ke, SymbolBadge as N, StyledText as Q, convertToStringAttributes as xe, useKeyPress as W, useContainer as Ve, useEventListener as ce, DateFormats as be, Timestamp as we, useIsTabbing as qe, usePrevious as Ge, TextLink as X, borderTabStyle as Z, Paragraph as Ue, genericHtml as Je, AnchorLink as Qe, WidgetLink as Xe } from "@telia-ace/widget-ui";
+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";
 export * from "@telia-ace/widget-ui";
-import a, { forwardRef as K, useCallback as k, useState as T, useEffect as V, useMemo as Ze, useRef as Ee, useImperativeHandle as et } from "react";
-import { createParams as j, formatUrl as me, appendClassNames as z, htmlParentContains as tt } from "@telia-ace/widget-utilities";
-const nt = ({
+import n, { forwardRef as _, useCallback as k, 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 z, htmlParentContains as tt } from "@telia-ace/widget-utilities";
+const at = ({
   title: t = "",
   className: e,
-  id: n,
+  id: a,
   parent: o,
-  connection: r,
+  connection: s,
   type: i,
-  target: s,
+  target: r,
   href: c,
   children: m,
   connectionKey: f
@@ -43,33 +43,33 @@ const nt = ({
     case "guide":
       const { id: S, title: g } = o;
       u.routeName = l, u.params = j(E(y({}, h), {
-        guide: n,
+        guide: a,
         connection: f,
-        uriName: n === S ? me(g) : me(t)
+        uriName: a === S ? ce(g) : ce(t)
       }));
       break;
     case "link":
-      u.href = c, u.target = s;
+      u.href = c, u.target = r;
       break;
   }
-  return /* @__PURE__ */ a.createElement(Ye, y({
+  return /* @__PURE__ */ n.createElement(Ye, y({
     className: z(e, "humany-dialog-link")
-  }, u), m || /* @__PURE__ */ a.createElement(a.Fragment, null, i === "link" && /* @__PURE__ */ a.createElement(H, {
+  }, u), m || /* @__PURE__ */ n.createElement(n.Fragment, null, i === "link" && /* @__PURE__ */ n.createElement(H, {
     faIcon: "link"
-  }), /* @__PURE__ */ a.createElement("span", null, t)));
-}, ke = nt, tn = K((r, o) => {
-  var i = r, { className: t, dialog: e } = i, n = w(i, ["className", "dialog"]);
-  return e.length ? /* @__PURE__ */ a.createElement(at, E(y({
+  }), /* @__PURE__ */ n.createElement("span", null, t)));
+}, ke = at, ta = _((s, o) => {
+  var i = s, { className: t, dialog: e } = i, a = w(i, ["className", "dialog"]);
+  return e.length ? /* @__PURE__ */ n.createElement(nt, E(y({
     className: z(t, "humany-dialog"),
     items: e,
-    renderItem: (s) => /* @__PURE__ */ a.createElement("li", {
-      key: s.connection,
-      "data-dialog": s.connection
-    }, /* @__PURE__ */ a.createElement(ke, y({}, s)))
-  }, n), {
+    renderItem: (r) => /* @__PURE__ */ n.createElement("li", {
+      key: r.connection,
+      "data-dialog": r.connection
+    }, /* @__PURE__ */ n.createElement(ke, y({}, r)))
+  }, a), {
     ref: o
   })) : null;
-}), at = d(ee)`
+}), nt = d(Z)`
     ${pe}
     a {
         min-width: 150px;
@@ -77,9 +77,9 @@ const nt = ({
         display: block;
         white-space: normal;
         ${(t) => {
-  var e, n;
+  var e, a;
   return ((e = t.theme.colors) == null ? void 0 : e.primary) && ye({
-    primaryColor: (n = t.theme.colors) == null ? void 0 : n.primary,
+    primaryColor: (a = t.theme.colors) == null ? void 0 : a.primary,
     secondaryColor: "#FFFFFF",
     theme: t.theme
   });
@@ -96,11 +96,11 @@ const nt = ({
   var l = u, {
     trigger: t,
     header: e,
-    className: n,
+    className: a,
     animation: o,
-    fullScreen: r,
+    fullScreen: s,
     onToggle: i,
-    children: s,
+    children: r,
     ref: c,
     closeButtonAriaLabel: m
   } = l, f = w(l, [
@@ -114,17 +114,17 @@ const nt = ({
     "ref",
     "closeButtonAriaLabel"
   ]);
-  return /* @__PURE__ */ a.createElement(_e, {
-    className: z(n, "humany-drawer-list"),
+  return /* @__PURE__ */ n.createElement(_e, {
+    className: z(a, "humany-drawer-list"),
     trigger: t,
     header: e,
     animation: o,
-    fullScreen: r,
+    fullScreen: s,
     onToggle: i,
     closeButtonAriaLabel: m
-  }, /* @__PURE__ */ a.createElement(st, y({}, f), s));
-}, nn = ot, st = d(Y)`
-    ${_}
+  }, /* @__PURE__ */ n.createElement(rt, y({}, f), r));
+}, aa = ot, rt = d(O)`
+    ${Y}
     font-family: ${(t) => {
   var e;
   return (e = t.theme.fonts) == null ? void 0 : e.type;
@@ -141,13 +141,13 @@ const nt = ({
   return (e = t.theme.fonts) == null ? void 0 : e.normal;
 }};
     }
-`, rt = ({ items: t, renderItem: e, trigger: n, header: o, children: r }) => /* @__PURE__ */ a.createElement($e, {
+`, st = ({ items: t, renderItem: e, trigger: a, header: o, children: s }) => /* @__PURE__ */ n.createElement($e, {
   className: "humany-dropdown-actions",
-  trigger: n
-}, /* @__PURE__ */ a.createElement(it, null, !!o && /* @__PURE__ */ a.createElement(lt, null, o), t && e && /* @__PURE__ */ a.createElement(ct, {
+  trigger: a
+}, /* @__PURE__ */ n.createElement(it, null, !!o && /* @__PURE__ */ n.createElement(lt, null, o), t && e && /* @__PURE__ */ n.createElement(ct, {
   items: t,
   renderItem: e
-}), r)), an = rt, it = d.div`
+}), s)), na = st, it = d.div`
     background: #fff;
     border: #ccc 1px solid;
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
@@ -192,7 +192,7 @@ const nt = ({
   return (e = t.theme.sizes) == null ? void 0 : e.small;
 }};
     }
-`, ct = d(ee)`
+`, ct = d(Z)`
     list-style: none;
     padding: 0;
     margin: 0;
@@ -211,8 +211,8 @@ const nt = ({
   return (e = t.theme.fonts) == null ? void 0 : e.small;
 }};
             padding: ${(t) => {
-  var e, n;
-  return `${(e = t.theme.sizes) == null ? void 0 : e.small} ${(n = t.theme.sizes) == null ? void 0 : n.normal}`;
+  var e, a;
+  return `${(e = t.theme.sizes) == null ? void 0 : e.small} ${(a = t.theme.sizes) == null ? void 0 : a.normal}`;
 }};
             cursor: pointer;
             color: #555;
@@ -228,24 +228,24 @@ const nt = ({
         }
     }
 `, mt = (i) => {
-  var s = i, {
+  var r = i, {
     trigger: t,
     className: e,
-    children: n,
+    children: a,
     closeButtonAriaLabel: o
-  } = s, r = w(s, [
+  } = r, s = w(r, [
     "trigger",
     "className",
     "children",
     "closeButtonAriaLabel"
   ]);
-  return /* @__PURE__ */ a.createElement($e, {
+  return /* @__PURE__ */ n.createElement($e, {
     className: z(e, "humany-dropdown-list"),
     closeButtonAriaLabel: o,
     trigger: t
-  }, /* @__PURE__ */ a.createElement(dt, y({}, r), n));
-}, on = mt, dt = d(Y)`
-    ${_}
+  }, /* @__PURE__ */ n.createElement(dt, y({}, s), a));
+}, oa = mt, dt = d(O)`
+    ${Y}
     font-family: ${(t) => {
   var e;
   return (e = t.theme.fonts) == null ? void 0 : e.type;
@@ -253,7 +253,7 @@ const nt = ({
     > div {
         ${(t) => {
   var e;
-  return te(t)(
+  return ee(t)(
     "> h1",
     $`
                     font-size: ${(e = t.theme.fonts) == null ? void 0 : e.normal};
@@ -290,7 +290,7 @@ const nt = ({
     .humany-loader {
         opacity: ${t["data-loading"] ? "1" : "0"};
     }
-`, sn = d(H)`
+`, ra = d(H)`
     && {
         font-size: ${(t) => {
   var e;
@@ -298,7 +298,7 @@ const nt = ({
 }};
     }
     width: 1.2em;
-`, rn = d(ve)`
+`, sa = d(ve)`
     font-size: ${(t) => {
   var e;
   return (e = t.theme.fonts) == null ? void 0 : e.medium;
@@ -309,7 +309,7 @@ const nt = ({
   var e;
   return (e = t.theme.colors) == null ? void 0 : e.text;
 }};
-`, ft = d(ne)`
+`, ft = d(te)`
     display: flex;
     align-items: center;
 
@@ -323,11 +323,11 @@ const nt = ({
 }}
 
     &:focus-visible {
-        ${(t) => t["data-has-label"] === "true" && le}
+        ${(t) => t["data-has-label"] === "true" && ie}
 
         svg, i {
             ${(t) => t["data-has-label"] === "false" && t["data-has-symbol"] === "true" && $`
-                    ${le(t)}
+                    ${ie(t)}
                     box-sizing: content-box;
                 `}
         }
@@ -340,39 +340,39 @@ const nt = ({
 `, ht = ({
   addFavoriteTooltip: t,
   removeFavoriteCancelLabel: e,
-  removeFavoriteConfirmLabel: n,
+  removeFavoriteConfirmLabel: a,
   removeFavoriteHeader: o,
-  removeFavoriteLabel: r,
+  removeFavoriteLabel: s,
   removeFavoriteTooltip: i,
-  id: s,
+  id: r,
   isFavorite: c,
   guideTitle: m,
   buttonLabel: f = "",
   actions: { addFavorite: u, removeFavorite: l }
 }) => {
   const h = k(() => {
-    l(s);
-  }, [s, l]), S = k(() => {
-    u(s);
-  }, [s, u]), g = `${c ? i : t}${m ? `: "${m}"` : ""}`;
-  return /* @__PURE__ */ a.createElement(a.Fragment, null, c ? /* @__PURE__ */ a.createElement(Ke, {
-    trigger: /* @__PURE__ */ a.createElement(de, {
+    l(r);
+  }, [r, l]), S = k(() => {
+    u(r);
+  }, [r, u]), g = `${c ? i : t}${m ? `: "${m}"` : ""}`;
+  return /* @__PURE__ */ n.createElement(n.Fragment, null, c ? /* @__PURE__ */ n.createElement(Ke, {
+    trigger: /* @__PURE__ */ n.createElement(me, {
       className: "humany-favorite-button",
       title: g,
       "aria-label": g,
       "data-favorite": "true",
       "data-has-label": f ? "true" : "false",
       "data-has-symbol": "true"
-    }, /* @__PURE__ */ a.createElement(N, {
+    }, /* @__PURE__ */ n.createElement(N, {
       size: 16,
       symbol: { type: "Svg", content: "star-empty" }
-    }), f && /* @__PURE__ */ a.createElement(Q, null, f)),
+    }), f && /* @__PURE__ */ n.createElement(J, null, f)),
     onConfirm: h,
     cancelLabel: e,
-    confirmLabel: n,
+    confirmLabel: a,
     header: o,
-    text: r
-  }) : /* @__PURE__ */ a.createElement(de, {
+    text: s
+  }) : /* @__PURE__ */ n.createElement(me, {
     className: "humany-favorite-button",
     title: g,
     "aria-label": g,
@@ -380,17 +380,17 @@ const nt = ({
     "data-favorite": "false",
     "data-has-label": f ? "true" : "false",
     "data-has-symbol": "true"
-  }, /* @__PURE__ */ a.createElement(N, {
+  }, /* @__PURE__ */ n.createElement(N, {
     size: 16,
     symbol: { type: "Svg", content: "star-empty" }
-  }), f && /* @__PURE__ */ a.createElement(Q, null, f)));
-}, gt = ht, de = d(ft)`
+  }), f && /* @__PURE__ */ n.createElement(J, null, f)));
+}, gt = ht, me = d(ft)`
     grid-area: favorite;
 
     &:focus-visible {
         svg {
             ${(t) => {
-  var e, n;
+  var e, a;
   return t["data-favorite"] === "true" ? `
           fill: transparent;
 
@@ -401,7 +401,7 @@ const nt = ({
           fill: ${(e = t.theme.colors) == null ? void 0 : e.text};
 
           path {
-            fill: ${(n = t.theme.colors) == null ? void 0 : n.text};
+            fill: ${(a = t.theme.colors) == null ? void 0 : a.text};
           }
         `;
 }}
@@ -409,17 +409,17 @@ const nt = ({
     }
 
     ${(t) => {
-  var e, n, o, r, i, s, c;
+  var e, a, o, s, i, r, c;
   return ((e = t.theme.colors) == null ? void 0 : e.text) && $`
             svg {
-                stroke: ${(n = t.theme.colors) == null ? void 0 : n.text};
+                stroke: ${(a = t.theme.colors) == null ? void 0 : a.text};
 
                 path {
                     stroke: ${(o = t.theme.colors) == null ? void 0 : o.text};
                 }
 
                 ${t["data-favorite"] === "true" && `
-        fill: ${(r = t.theme.colors) == null ? void 0 : r.text};
+        fill: ${(s = t.theme.colors) == null ? void 0 : s.text};
 
         path {
           fill: ${(i = t.theme.colors) == null ? void 0 : i.text};
@@ -436,7 +436,7 @@ const nt = ({
             fill: transparent;
           }
         ` : `
-          fill: ${(s = t.theme.colors) == null ? void 0 : s.text};
+          fill: ${(r = t.theme.colors) == null ? void 0 : r.text};
 
           path {
             fill: ${(c = t.theme.colors) == null ? void 0 : c.text};
@@ -446,17 +446,17 @@ const nt = ({
             }
         `;
 }}
-`, ln = K(
+`, ia = _(
   (f, m) => {
     var u = f, {
       onFeedback: t = () => {
       },
       direction: e = "horizontal",
-      className: n,
+      className: a,
       header: o,
-      positive: r,
+      positive: s,
       negative: i,
-      selected: s
+      selected: r
     } = u, c = w(u, [
       "onFeedback",
       "direction",
@@ -466,32 +466,32 @@ const nt = ({
       "negative",
       "selected"
     ]);
-    return /* @__PURE__ */ a.createElement(yt, E(y({
-      className: z(n, "humany-feedback"),
+    return /* @__PURE__ */ n.createElement(yt, E(y({
+      className: z(a, "humany-feedback"),
       "data-direction": e
     }, xe(c)), {
       ref: m
-    }), !!o && /* @__PURE__ */ a.createElement(pt, null, o), /* @__PURE__ */ a.createElement(ue, {
+    }), !!o && /* @__PURE__ */ n.createElement(pt, null, o), /* @__PURE__ */ n.createElement(de, {
       className: "humany-feedback-button",
-      disabled: !!s,
-      "aria-pressed": s === "positive",
-      "data-selected": s === "positive",
+      disabled: !!r,
+      "aria-pressed": r === "positive",
+      "data-selected": r === "positive",
       "data-direction": e,
       onClick: () => t("positive")
-    }, /* @__PURE__ */ a.createElement(H, {
+    }, /* @__PURE__ */ n.createElement(H, {
       faIcon: "smile-o"
-    }), /* @__PURE__ */ a.createElement("span", null, r)), /* @__PURE__ */ a.createElement(ue, {
+    }), /* @__PURE__ */ n.createElement("span", null, s)), /* @__PURE__ */ n.createElement(de, {
       className: "humany-feedback-button",
-      disabled: !!s,
-      "aria-pressed": s === "negative",
-      "data-selected": s === "negative",
+      disabled: !!r,
+      "aria-pressed": r === "negative",
+      "data-selected": r === "negative",
       "data-direction": e,
       onClick: () => t("negative")
-    }, /* @__PURE__ */ a.createElement(H, {
+    }, /* @__PURE__ */ n.createElement(H, {
       faIcon: "frown-o"
-    }), /* @__PURE__ */ a.createElement("span", null, i)));
+    }), /* @__PURE__ */ n.createElement("span", null, i)));
   }
-), pt = d(Q)`
+), pt = d(J)`
     font-weight: normal;
     margin: 0 0 ${(t) => {
   var e;
@@ -502,7 +502,7 @@ const nt = ({
   return (e = t.theme.fonts) == null ? void 0 : e.normal;
 }};
     display: block;
-`, ue = d(ne)`
+`, de = d(te)`
     display: inline-block;
     font-size: ${(t) => {
   var e;
@@ -517,10 +517,10 @@ const nt = ({
     }
 
     ${(t) => {
-  var e, n;
+  var e, a;
   return t["data-direction"] === "horizontal" && $`
             width: 225px;
-            max-width: calc(50% - ${(e = t.theme.sizes) == null ? void 0 : e.large} - ${(n = t.theme.sizes) == null ? void 0 : n.small});
+            max-width: calc(50% - ${(e = t.theme.sizes) == null ? void 0 : e.large} - ${(a = t.theme.sizes) == null ? void 0 : a.small});
         `;
 }}
 
@@ -529,10 +529,10 @@ const nt = ({
         `}
 
   ${(t) => {
-  var e, n;
+  var e, a;
   return ((e = t.theme.colors) == null ? void 0 : e.primary) && ye({
     active: t["data-selected"],
-    primaryColor: (n = t.theme.colors) == null ? void 0 : n.primary,
+    primaryColor: (a = t.theme.colors) == null ? void 0 : a.primary,
     secondaryColor: "#FFFFFF",
     theme: t.theme
   });
@@ -557,143 +557,143 @@ const nt = ({
         `;
 }}
 `, $t = () => {
-  const [t, e] = T(null), n = W("ArrowLeft"), o = W("ArrowRight"), r = W("ArrowUp"), i = W("ArrowDown");
-  return V(() => {
-    e(n ? "left" : o ? "right" : r ? "up" : i ? "down" : null);
-  }, [n, o, r, i]), t;
-}, cn = $t, vt = (t, e) => {
-  const [n, o] = T(t), r = k(() => setTimeout(() => {
+  const [t, e] = T(null), a = W("ArrowLeft"), o = W("ArrowRight"), s = W("ArrowUp"), i = W("ArrowDown");
+  return K(() => {
+    e(a ? "left" : o ? "right" : s ? "up" : i ? "down" : null);
+  }, [a, o, s, i]), t;
+}, la = $t, vt = (t, e) => {
+  const [a, o] = T(t), s = k(() => setTimeout(() => {
     o(t);
   }, e), [e, o, t]);
-  return V(
+  return K(
     () => {
-      const i = r();
+      const i = s();
       return () => {
         clearTimeout(i);
       };
     },
-    [r]
-  ), n;
-}, mn = vt, xt = () => {
-  const t = Ve(), [e, n] = T([]), o = t.get("favorites");
-  V(() => {
+    [s]
+  ), a;
+}, ca = vt, xt = () => {
+  const t = Ve(), [e, a] = T([]), o = t.get("favorites");
+  K(() => {
     if (o) {
-      n(o.get());
+      a(o.get());
       const { events: m } = t.get("$widget");
       return m.subscribe("widget:favorites-updated", (u, { updated: l }) => {
-        n([...l]);
+        a([...l]);
       });
     }
   }, []);
-  const r = (m) => o ? o.add(m) : Promise.resolve([]), i = (m) => o ? o.remove(m) : Promise.resolve([]), s = () => o ? o.clear() : Promise.resolve([]), c = k(
-    (m) => e.indexOf(m) > -1 ? i(m) : r(m),
+  const s = (m) => o ? o.add(m) : Promise.resolve([]), i = (m) => o ? o.remove(m) : Promise.resolve([]), r = () => o ? o.clear() : Promise.resolve([]), c = k(
+    (m) => e.indexOf(m) > -1 ? i(m) : s(m),
     [e]
   );
   return [
     e,
     Ze(
       () => ({
-        addFavorite: r,
+        addFavorite: s,
         removeFavorite: i,
-        clearFavorites: s,
+        clearFavorites: r,
         toggleFavorite: c
       }),
       [e]
     )
   ];
-}, bt = xt, dn = () => {
-  const [t, e] = T(!1), n = Ee(), o = k(() => e(!0), [e]), r = k(() => e(!1), [e]);
-  return ce("mouseenter", o, n.current), ce("mouseleave", r, n.current), [t, n];
+}, bt = xt, ma = () => {
+  const [t, e] = T(!1), a = Ee(), o = k(() => e(!0), [e]), s = k(() => e(!1), [e]);
+  return le("mouseenter", o, a.current), le("mouseleave", s, a.current), [t, a];
 }, wt = ({
   format: t = be.YYYY_MM_DD_HH_MM,
   className: e = "",
-  byLabel: n = "",
+  byLabel: a = "",
   modifiedLabel: o = "",
-  publishedLabel: r = "",
+  publishedLabel: s = "",
   modifiedBy: i = "",
-  publishedBy: s = "",
+  publishedBy: r = "",
   showModified: c = !1,
   showPublished: m = !1,
   modified: f,
   published: u
 }) => {
-  const l = m && u ? /* @__PURE__ */ a.createElement(fe, {
+  const l = m && u ? /* @__PURE__ */ n.createElement(ue, {
     format: t,
     timestamp: u
-  }) : null, h = c && f ? /* @__PURE__ */ a.createElement(fe, {
+  }) : null, h = c && f ? /* @__PURE__ */ n.createElement(ue, {
     format: t,
     timestamp: f
   }) : null;
-  return !l && !h ? null : /* @__PURE__ */ a.createElement(J, {
+  return !l && !h ? null : /* @__PURE__ */ n.createElement(U, {
     className: z(e, "humany-metadata")
-  }, l && /* @__PURE__ */ a.createElement(J, {
+  }, l && /* @__PURE__ */ n.createElement(U, {
     className: "humany-published"
-  }, r, l, n && s && ` ${n.replace("{{editor}}", s)}`), h && /* @__PURE__ */ a.createElement(J, {
+  }, s, l, a && r && ` ${a.replace("{{editor}}", r)}`), h && /* @__PURE__ */ n.createElement(U, {
     className: "humany-modified"
-  }, l && ", ", o, h, n && i && ` ${n.replace("{{editor}}", i)}`));
-}, Et = wt, fe = d(we)`
+  }, l && ", ", o, h, a && i && ` ${a.replace("{{editor}}", i)}`));
+}, Et = wt, ue = d(we)`
     &:not(:first-child) {
         margin-left: 4px;
     }
     &:not(:last-child) {
         margin-right: 4px;
     }
-`, J = d(ve)`
+`, U = d(ve)`
     font-style: italic;
-`, kt = ({ tags: t }) => t.filter((e) => e.symbol).length ? /* @__PURE__ */ a.createElement(Nt, {
+`, kt = ({ tags: t }) => t.filter((e) => e.symbol).length ? /* @__PURE__ */ n.createElement(Nt, {
   className: "humany-guide-list-tags",
   items: t,
-  renderItem: ({ id: e, symbol: n, title: o }) => n && /* @__PURE__ */ a.createElement("li", {
+  renderItem: ({ id: e, symbol: a, title: o }) => a && /* @__PURE__ */ n.createElement("li", {
     key: e,
     "data-tag": e
-  }, /* @__PURE__ */ a.createElement(Lt, {
+  }, /* @__PURE__ */ n.createElement(Lt, {
     size: 18,
-    symbol: n,
+    symbol: a,
     title: o
   }))
-}) : null, un = K(({ title: t, id: e, route: n, symbolSize: o, collapseUri: r, children: i }, s) => {
+}) : null, da = _(({ title: t, id: e, route: a, symbolSize: o, collapseUri: s, children: i }, r) => {
   const { params: c } = ge();
-  return /* @__PURE__ */ a.createElement(zt, {
-    ref: s,
+  return /* @__PURE__ */ n.createElement(zt, {
+    ref: r,
     "data-guide": e
-  }, /* @__PURE__ */ a.createElement(X, {
+  }, /* @__PURE__ */ n.createElement(Q, {
     title: t,
     "aria-label": t,
-    routeName: n,
+    routeName: a,
     params: j(E(y({}, c), {
-      uriName: r || void 0,
+      uriName: s || void 0,
       id: void 0,
       guide: void 0,
       accordion: void 0
     })),
     text: t
-  }, /* @__PURE__ */ a.createElement(N, {
+  }, /* @__PURE__ */ n.createElement(N, {
     size: o,
     symbol: { type: "Svg", content: "caret-up" }
   })), i);
 }), zt = d.li`
-  > a { 
-    grid-column: 1 / -1
-    font-weight: bold;
-    margin: 0 0 ${(t) => {
+    > a {
+        grid-column: 1/-1;
+        font-weight: bold;
+        margin: 0 0 ${(t) => {
   var e;
   return (e = t.theme.sizes) == null ? void 0 : e.normal;
 }} 0;
-  }
+    }
 
-  > div {
-    grid-column: 1 / -1
-  }
-`, fn = K(
+    > div {
+        grid-column: 1/-1;
+    }
+`, ua = _(
   (Gt, Fe) => {
     var ae = Gt, {
       expandable: t = !1,
       routing: e = {},
-      paramMappers: n = {},
+      paramMappers: a = {},
       symbolSize: o = 11,
-      pageRole: r = "link",
+      pageRole: s = "link",
       pageCaret: i = "down",
-      showTags: s = !1,
+      showTags: r = !1,
       showFavoriteToggle: c = !1,
       localPaging: m = !1,
       onItemClick: f = () => {
@@ -737,18 +737,18 @@ const nt = ({
       "removeFavoriteLabel",
       "removeFavoriteTooltip"
     ]);
-    const q = qe(), F = Ee(), I = Ge(x), { guide: Ie = "guide", page: Ae = "index" } = e, {
+    const V = qe(), F = Ee(), I = Ge(x), { guide: Ie = "guide", page: Ae = "index" } = e, {
       guide: Te = ({ id: p }) => j({ guide: p }),
-      page: oe = () => j()
-    } = n, [Ce, Me] = bt();
+      page: ne = () => j()
+    } = a, [Ce, Me] = bt();
     et(Fe, () => F.current);
-    const G = (p) => {
-      const { id: b, title: v, tags: D, published: P, modified: A, publishedBy: B, modifiedBy: U } = p;
-      return /* @__PURE__ */ a.createElement("li", {
+    const q = (p) => {
+      const { id: b, title: v, tags: D, published: P, modified: A, publishedBy: B, modifiedBy: G } = p;
+      return /* @__PURE__ */ n.createElement("li", {
         key: b,
         "data-guide": b,
         "has-metadata": (!!(l != null && l.showPublished) && !!P || !!(l != null && l.showModified) && !!A).toString()
-      }, /* @__PURE__ */ a.createElement(X, {
+      }, /* @__PURE__ */ n.createElement(Q, {
         className: "humany-guide-link",
         title: v,
         "aria-label": v,
@@ -756,13 +756,13 @@ const nt = ({
         onClick: (We) => f(We, p),
         params: Te(p),
         text: v
-      }, /* @__PURE__ */ a.createElement(N, {
+      }, /* @__PURE__ */ n.createElement(N, {
         size: o,
         symbol: {
           type: "Svg",
           content: t ? "caret-down" : "caret-right"
         }
-      })), c && /* @__PURE__ */ a.createElement(gt, {
+      })), c && /* @__PURE__ */ n.createElement(gt, {
         guideTitle: v,
         addFavoriteTooltip: C,
         removeFavoriteCancelLabel: M,
@@ -773,26 +773,26 @@ const nt = ({
         isFavorite: Ce.indexOf(b) > -1,
         actions: Me,
         id: b
-      }), s && /* @__PURE__ */ a.createElement(kt, {
+      }), r && /* @__PURE__ */ n.createElement(kt, {
         tags: D
-      }), /* @__PURE__ */ a.createElement(Dt, E(y({}, l), {
+      }), /* @__PURE__ */ n.createElement(Dt, E(y({}, l), {
         indent: t ? void 0 : o,
         modified: A,
         published: P,
         publishedBy: B,
-        modifiedBy: U
+        modifiedBy: G
       })));
     }, Pe = k(
-      (p, b, v) => L ? L(p, b, v, G) : G(p),
-      [L, G]
+      (p, b, v) => L ? L(p, b, v, q) : q(p),
+      [L, q]
     ), Be = k(
       (p) => {
-        m && (p.preventDefault(), u("page", oe()));
+        m && (p.preventDefault(), u("page", ne()));
       },
       [u, m]
     );
-    V(() => {
-      if (q && I && I.length < x.length && F.current) {
+    K(() => {
+      if (V && I && I.length < x.length && F.current) {
         const p = F.current.querySelectorAll(".humany-guide-list > ul > li"), b = p[I.length];
         if (p.length === x.length && I.length) {
           const v = p[I.length];
@@ -808,8 +808,8 @@ const nt = ({
               if (A.addedNodes) {
                 const B = Array.from(
                   A.addedNodes
-                ).find((U) => U.tagName === "A");
-                B && tt(F.current, document.activeElement) && (q && B.focus(), P.disconnect());
+                ).find((G) => G.tagName === "A");
+                B && tt(F.current, document.activeElement) && (V && B.focus(), P.disconnect());
               }
             });
           }).observe(b, {
@@ -825,31 +825,31 @@ const nt = ({
     const Re = !!Object.keys(l).filter(
       (p) => typeof l[p] != "undefined"
     ).length;
-    return /* @__PURE__ */ a.createElement(St, E(y({
+    return /* @__PURE__ */ n.createElement(St, E(y({
       className: z(S, "humany-guide-list"),
       "data-item-count": x.length,
       items: x,
       renderItem: Pe,
-      isTabbing: q,
+      isTabbing: V,
       expandable: t ? "true" : "false",
-      "grid-items": s || c || Re ? "true" : "false"
+      "grid-items": r || c || Re ? "true" : "false"
     }, xe(De)), {
       ref: F
-    }), h ? /* @__PURE__ */ a.createElement(X, {
+    }), h ? /* @__PURE__ */ n.createElement(Q, {
       text: h,
       title: h,
       "aria-label": h,
       routeName: Ae,
-      role: r,
-      params: oe(),
+      role: s,
+      params: ne(),
       onClick: Be
-    }, /* @__PURE__ */ a.createElement(N, {
+    }, /* @__PURE__ */ n.createElement(N, {
       size: o,
       symbol: { type: "Svg", content: `caret-${i}` }
     })) : null, g);
   }
-), St = d(Y)`
-    ${_}
+), St = d(O)`
+    ${Y}
     padding: ${(t) => {
   var e;
   return (e = t.theme.sizes) == null ? void 0 : e.large;
@@ -861,7 +861,7 @@ const nt = ({
     text-decoration: none;
 
     > div {
-        ${(t) => te(t)(
+        ${(t) => ee(t)(
   "> h1",
   $`
                     white-space: pre-wrap;
@@ -871,7 +871,7 @@ const nt = ({
 
     > ul > li {
         ${(t) => {
-  var e, n;
+  var e, a;
   return t["grid-items"] === "true" && $`
                 display: grid;
                 grid-template-columns: auto 1fr 1fr;
@@ -891,7 +891,7 @@ const nt = ({
                 }
 
                 > span {
-                    font-size: ${(n = t.theme.fonts) == null ? void 0 : n.small};
+                    font-size: ${(a = t.theme.fonts) == null ? void 0 : a.small};
                 }
 
                 &:hover {
@@ -952,7 +952,7 @@ const nt = ({
 }}
 
             &:focus-visible {
-                ${Z}
+                ${X}
                 text-decoration: underline;
             }
 
@@ -995,11 +995,11 @@ const nt = ({
         }
 
         &:focus-visible {
-            ${Z}
+            ${X}
             text-decoration: underline;
         }
     }
-`, Nt = d(ee)`
+`, Nt = d(Z)`
     ${pe}
     display: flex;
     margin: 0 0 0 auto;
@@ -1111,15 +1111,15 @@ const nt = ({
   return (e = t.theme.colors) == null ? void 0 : e.primary;
 }};
     stroke-width: 2px;
-`, Pt = ({ loading: t = !1 }) => /* @__PURE__ */ a.createElement(Tt, {
+`, Pt = ({ loading: t = !1 }) => /* @__PURE__ */ n.createElement(Tt, {
   className: "humany-loader",
   "data-loading": t
-}, /* @__PURE__ */ a.createElement(Ct, {
+}, /* @__PURE__ */ n.createElement(Ct, {
   className: "humany-spinner"
-}, /* @__PURE__ */ a.createElement(At, {
+}, /* @__PURE__ */ n.createElement(At, {
   className: "humany-spinner-svg",
   viewBox: "25 25 50 50"
-}, /* @__PURE__ */ a.createElement(Mt, {
+}, /* @__PURE__ */ n.createElement(Mt, {
   cx: "50",
   cy: "50",
   r: "20",
@@ -1127,12 +1127,12 @@ const nt = ({
   "stroke-width": "2",
   "stroke-miterlimit": "10"
 })))), Bt = Pt, Rt = (i) => {
-  var s = i, {
+  var r = i, {
     className: t,
     showHeader: e,
-    notificationList: n,
+    notificationList: a,
     loading: o
-  } = s, r = w(s, [
+  } = r, s = w(r, [
     "className",
     "showHeader",
     "notificationList",
@@ -1144,8 +1144,8 @@ const nt = ({
     symbol: l,
     notifications: h = [],
     defaultHeaderOptions: S = { visible: !0 }
-  } = n || {};
-  return !h.length && !o ? null : /* @__PURE__ */ a.createElement(Ht, E(y({}, r), {
+  } = a || {};
+  return !h.length && !o ? null : /* @__PURE__ */ n.createElement(Ht, E(y({}, s), {
     "data-loading": o,
     "data-show-header": typeof e == "boolean" ? e : S.visible,
     className: z(t, "humany-notification-list"),
@@ -1153,33 +1153,33 @@ const nt = ({
     header: u,
     symbol: l,
     items: h,
-    renderItem: ({ id: g, title: x, body: L, modified: C, expandable: M }) => /* @__PURE__ */ a.createElement(jt, {
+    renderItem: ({ id: g, title: x, body: L, modified: C, expandable: M }) => /* @__PURE__ */ n.createElement(jt, {
       key: g,
       "data-notification": g,
       "data-expanded": M ? c === g : !0
-    }, M ? /* @__PURE__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.createElement(Wt, {
+    }, M ? /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(Wt, {
       title: x,
       "aria-label": x,
       "aria-expanded": c === g,
       onClick: () => m(c === g ? null : g)
-    }, /* @__PURE__ */ a.createElement("span", null, x), /* @__PURE__ */ a.createElement(Ot, {
+    }, /* @__PURE__ */ n.createElement("span", null, x), /* @__PURE__ */ n.createElement(Ot, {
       size: 11,
       symbol: {
         type: "Svg",
         content: `caret-${c === g ? "up" : "down"}`
       }
-    })), /* @__PURE__ */ a.createElement(O, {
+    })), /* @__PURE__ */ n.createElement(fe, {
       html: L
-    }), C && /* @__PURE__ */ a.createElement(Yt, {
+    }), C && /* @__PURE__ */ n.createElement(Yt, {
       format: be.YYYY_MM_DD,
       timestamp: C
-    })) : /* @__PURE__ */ a.createElement(O, {
+    })) : /* @__PURE__ */ n.createElement(fe, {
       html: L
     }))
-  }), /* @__PURE__ */ a.createElement(Bt, {
+  }), /* @__PURE__ */ n.createElement(Bt, {
     loading: o
   }));
-}, Wt = d(ne)`
+}, Wt = d(te)`
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -1207,7 +1207,7 @@ const nt = ({
         white-space: nowrap;
     }
     &:focus-visible {
-        ${Z}
+        ${X}
         span {
             color: ${(t) => {
   var e;
@@ -1216,9 +1216,9 @@ const nt = ({
             text-decoration: underline;
         }
     }
-`, Ht = d(Y)`
+`, Ht = d(O)`
     ${ut}
-    ${_}
+    ${Y}
   overflow: hidden;
     justify-content: flex-start;
     padding: ${(t) => {
@@ -1227,7 +1227,7 @@ const nt = ({
 }};
     ${(t) => !t["data-show-header"] && $`
             > div {
-                ${te(t)(
+                ${ee(t)(
   "h1",
   $`
                         display: none;
@@ -1241,7 +1241,7 @@ const nt = ({
             text-decoration: underline;
         }
     }
-`, O = d(Ue)`
+`, fe = d(Ue)`
     ${Je}
     font-weight: 300;
 
@@ -1249,12 +1249,12 @@ const nt = ({
         white-space: normal;
     }
 `, jt = d.li`
-    ${O} {
+    .humany-paragraph {
         display: none;
         &:not(:only-child) {
             ${(t) => {
-  var e, n, o;
-  return ((e = t.theme.sizes) == null ? void 0 : e.cardinal) && ((n = t.theme.sizes) == null ? void 0 : n.normal) && $`
+  var e, a, o;
+  return ((e = t.theme.sizes) == null ? void 0 : e.cardinal) && ((a = t.theme.sizes) == null ? void 0 : a.normal) && $`
                     margin: ${(o = t.theme.sizes) == null ? void 0 : o.normal} 0;
                 `;
 }}
@@ -1262,7 +1262,7 @@ const nt = ({
     }
 
     ${(t) => t["data-expanded"] && $`
-            ${O} {
+            .humany-paragraph {
                 display: block;
             }
         `}
@@ -1292,61 +1292,61 @@ const nt = ({
   return (e = t.theme.fonts) == null ? void 0 : e.small;
 }};
     font-weight: 300;
-`, hn = Rt, _t = (t) => new RegExp("^#", "i").test(t), Kt = (t) => (o) => {
-  var r = o, { children: e } = r, n = w(r, ["children"]);
+`, fa = Rt, _t = (t) => new RegExp("^#", "i").test(t), Kt = (t) => (o) => {
+  var s = o, { children: e } = s, a = w(s, ["children"]);
   const {
     implementation: i,
-    name: s
-  } = t.get("$widget"), { href: c = "" } = n;
+    name: r
+  } = t.get("$widget"), { href: c = "" } = a;
   if (_t(c))
-    return /* @__PURE__ */ a.createElement(Qe, {
+    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) {
     const l = u[4];
-    if (i.widgets.get(l) && !l.startsWith("blob?") && !l.startsWith(s))
-      return /* @__PURE__ */ a.createElement(Xe, {
+    if (i.widgets.get(l) && !l.startsWith("blob?") && !l.startsWith(r))
+      return /* @__PURE__ */ n.createElement(Xe, {
         widgetName: l
       }, e);
   }
-  return /* @__PURE__ */ a.createElement("a", y({}, n), e);
+  return /* @__PURE__ */ n.createElement("a", y({}, a), e);
 }, Vt = Kt, qt = (t, e = []) => ({
   transform: {
-    a: (n) => {
-      const c = n, { children: o } = c, i = w(c, ["children"])["data-target"];
+    a: (a) => {
+      const c = a, { children: o } = c, i = w(c, ["children"])["data-target"];
       if (i && e.length) {
         const m = e.find(({ connection: f }) => f === i);
         if (m)
-          return /* @__PURE__ */ a.createElement(ke, y({}, m), o);
+          return /* @__PURE__ */ n.createElement(ke, y({}, m), o);
       }
-      return Vt(t)(n);
+      return Vt(t)(a);
     }
   }
-}), gn = qt;
+}), ha = qt;
 export {
-  un as AccordionListItem,
+  da as AccordionListItem,
   ke as DialogLink,
-  tn as DialogList,
-  nn as DrawerList,
-  an as DropdownActions,
-  on as DropdownList,
+  ta as DialogList,
+  aa as DrawerList,
+  na as DropdownActions,
+  oa as DropdownList,
   gt as FavoriteButton,
-  ln as Feedback,
-  fn as GuideList,
+  ia as Feedback,
+  ua as GuideList,
   Bt as Loader,
   Tt as LoaderWrapper,
   Et as Metadata,
-  hn as NotificationList,
-  sn as SmallCaret,
-  rn as StyledHeaderText,
+  fa as NotificationList,
+  ra as SmallCaret,
+  sa as StyledHeaderText,
   ft as StyledListButton,
-  gn as guideRenderInstructions,
+  ha as guideRenderInstructions,
   ut as loadingOpacity,
-  cn as useArrowKeys,
-  mn as useDebounce,
+  la as useArrowKeys,
+  ca as useDebounce,
   bt as useFavorites,
-  dn as useHover
+  ma as useHover
 };
 //# sourceMappingURL=index.js.map