@telia-ace/knowledge-widget-ui 1.0.26-next.5 → 1.0.26-next.7

package/dist/index.js

@@ -1,85 +1,87 @@
-var Oe = Object.defineProperty, Ye = Object.defineProperties;
-var _e = Object.getOwnPropertyDescriptors;
+var He = Object.defineProperty, je = Object.defineProperties;
+var Oe = Object.getOwnPropertyDescriptors;
 var R = Object.getOwnPropertySymbols;
-var se = Object.prototype.hasOwnProperty, ie = Object.prototype.propertyIsEnumerable;
-var oe = (t, e, n) => e in t ? Oe(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n, y = (t, e) => {
-  for (var n in e || (e = {}))
-    se.call(e, n) && oe(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) && oe(t, n, e[n]);
+    for (var a of R(e))
+      se.call(e, a) && oe(t, a, e[a]);
   return t;
-}, E = (t, e) => Ye(t, _e(e));
+}, E = (t, e) => je(t, Oe(e));
 var w = (t, e) => {
-  var n = {};
-  for (var r in t)
-    se.call(t, r) && e.indexOf(r) < 0 && (n[r] = t[r]);
+  var a = {};
+  for (var o in t)
+    re.call(t, o) && e.indexOf(o) < 0 && (a[o] = t[o]);
   if (t != null && R)
-    for (var r of R(t))
-      e.indexOf(r) < 0 && ie.call(t, r) && (n[r] = t[r]);
-  return n;
+    for (var o of R(t))
+      e.indexOf(o) < 0 && se.call(t, o) && (a[o] = t[o]);
+  return a;
 };
-import { useRouteData as he, Link as Ve, Icon as H, List as ee, list as ge, invertedHoverButton as pe, ItemList as Y, itemList as _, Drawer as Ke, Dropdown as ye, headingElement as te, Text as $e, Button as ne, paddedBorderTabStyle as le, Confirm as qe, SymbolBadge as N, StyledText as Q, convertToStringAttributes as ve, useKeyPress as W, useContainer as Ge, useEventListener as ce, Timestamp as xe, DateFormats as be, TextLink as X, useIsTabbing as Ue, usePrevious as Je, borderTabStyle as Z, Paragraph as Qe, genericHtml as Xe, AnchorLink as Ze, WidgetLink as et } from "@telia-ace/widget-ui";
+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";
 export * from "@telia-ace/widget-ui";
-import { createParams as j, formatUrl as me, appendClassNames as z, htmlParentContains as tt } from "@telia-ace/widget-utilities";
-import a, { forwardRef as V, useCallback as k, useState as A, useEffect as K, useMemo as nt, useRef as we, useImperativeHandle as at } from "react";
-import d, { css as $, keyframes as Ee } from "styled-components";
-const ke = ({
+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,
-  parent: r,
+  id: a,
+  parent: o,
   connection: s,
   type: i,
-  target: o,
+  target: r,
   href: c,
   children: m,
-  connectionKey: u
+  connectionKey: f
 }) => {
-  const f = {}, { name: l, params: h } = he();
+  const u = {}, { name: l, params: h } = ge();
   switch (i) {
     case "default":
     case "guide":
-      const { id: S, title: g } = r;
-      f.routeName = l, f.params = j(E(y({}, h), {
-        guide: n,
-        connection: u,
-        uriName: n === S ? me(g) : me(t)
+      const { id: S, title: g } = o;
+      u.routeName = l, u.params = j(E(y({}, h), {
+        guide: a,
+        connection: f,
+        uriName: a === S ? ce(g) : ce(t)
       }));
       break;
     case "link":
-      f.href = c, f.target = o;
+      u.href = c, u.target = r;
       break;
   }
-  return /* @__PURE__ */ a.createElement(Ve, y({
+  return /* @__PURE__ */ n.createElement(Ye, y({
     className: z(e, "humany-dialog-link")
-  }, f), 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)));
-}, jt = V((s, r) => {
-  var i = s, { className: t, dialog: e } = i, n = w(i, ["className", "dialog"]);
-  return e.length ? /* @__PURE__ */ a.createElement(rt, 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: (o) => /* @__PURE__ */ a.createElement("li", {
-      key: o.connection,
-      "data-dialog": o.connection
-    }, /* @__PURE__ */ a.createElement(ke, y({}, o)))
-  }, n), {
-    ref: r
+    renderItem: (r) => /* @__PURE__ */ n.createElement("li", {
+      key: r.connection,
+      "data-dialog": r.connection
+    }, /* @__PURE__ */ n.createElement(ke, y({}, r)))
+  }, a), {
+    ref: o
   })) : null;
-}), rt = d(ee)`
-    ${ge}
+}), nt = d(Z)`
+    ${pe}
     a {
         min-width: 150px;
         max-width: 400px;
         display: block;
         white-space: normal;
         ${(t) => {
-  var e;
-  return pe({
-    primaryColor: (e = t.theme.colors) == null ? void 0 : e.primary,
-    secondaryColor: "#FFFFFF"
+  var e, a;
+  return ((e = t.theme.colors) == null ? void 0 : e.primary) && ye({
+    primaryColor: (a = t.theme.colors) == null ? void 0 : a.primary,
+    secondaryColor: "#FFFFFF",
+    theme: t.theme
   });
 }}
     }
@@ -90,18 +92,18 @@ const ke = ({
   return (e = t.theme.sizes) == null ? void 0 : e.small;
 }} 0 0;
     }
-`, Ot = (f) => {
-  var l = f, {
+`, ot = (u) => {
+  var l = u, {
     trigger: t,
     header: e,
-    className: n,
-    animation: r,
+    className: a,
+    animation: o,
     fullScreen: s,
     onToggle: i,
-    children: o,
+    children: r,
     ref: c,
     closeButtonAriaLabel: m
-  } = l, u = w(l, [
+  } = l, f = w(l, [
     "trigger",
     "header",
     "className",
@@ -112,17 +114,17 @@ const ke = ({
     "ref",
     "closeButtonAriaLabel"
   ]);
-  return /* @__PURE__ */ a.createElement(Ke, {
-    className: z(n, "humany-drawer-list"),
+  return /* @__PURE__ */ n.createElement(_e, {
+    className: z(a, "humany-drawer-list"),
     trigger: t,
     header: e,
-    animation: r,
+    animation: o,
     fullScreen: s,
     onToggle: i,
     closeButtonAriaLabel: m
-  }, /* @__PURE__ */ a.createElement(ot, y({}, u), o));
-}, ot = 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;
@@ -139,13 +141,13 @@ const ke = ({
   return (e = t.theme.fonts) == null ? void 0 : e.normal;
 }};
     }
-`, Yt = ({ items: t, renderItem: e, trigger: n, header: r, children: s }) => /* @__PURE__ */ a.createElement(ye, {
+`, st = ({ items: t, renderItem: e, trigger: a, header: o, children: s }) => /* @__PURE__ */ n.createElement($e, {
   className: "humany-dropdown-actions",
-  trigger: n
-}, /* @__PURE__ */ a.createElement(st, null, !!r && /* @__PURE__ */ a.createElement(it, null, r), t && e && /* @__PURE__ */ a.createElement(lt, {
+  trigger: a
+}, /* @__PURE__ */ n.createElement(it, null, !!o && /* @__PURE__ */ n.createElement(lt, null, o), t && e && /* @__PURE__ */ n.createElement(ct, {
   items: t,
   renderItem: e
-}), s)), st = 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);
@@ -157,8 +159,11 @@ const ke = ({
   var e;
   return (e = t.theme.fonts) == null ? void 0 : e.normal;
 }};
-`, it = d.div`
-    padding: ${(t) => t.theme.sizes.normal};
+`, lt = d.div`
+    padding: ${(t) => {
+  var e;
+  return (e = t.theme.sizes) == null ? void 0 : e.normal;
+}};
     padding-bottom: 0;
     font-size: ${(t) => {
   var e;
@@ -182,13 +187,19 @@ const ke = ({
 
     svg,
     i {
-        margin-right: ${(t) => t.theme.sizes.small};
+        margin-right: ${(t) => {
+  var e;
+  return (e = t.theme.sizes) == null ? void 0 : e.small;
+}};
     }
-`, lt = d(ee)`
+`, ct = d(Z)`
     list-style: none;
     padding: 0;
     margin: 0;
-    padding: ${(t) => t.theme.sizes.small} 0;
+    padding: ${(t) => {
+  var e;
+  return (e = t.theme.sizes) == null ? void 0 : e.small;
+}} 0;
 
     li {
         background: #fff;
@@ -200,8 +211,8 @@ const ke = ({
   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;
@@ -216,40 +227,40 @@ const ke = ({
             }
         }
     }
-`, _t = (i) => {
-  var o = i, {
+`, mt = (i) => {
+  var r = i, {
     trigger: t,
     className: e,
-    children: n,
-    closeButtonAriaLabel: r
-  } = o, s = w(o, [
+    children: a,
+    closeButtonAriaLabel: o
+  } = r, s = w(r, [
     "trigger",
     "className",
     "children",
     "closeButtonAriaLabel"
   ]);
-  return /* @__PURE__ */ a.createElement(ye, {
+  return /* @__PURE__ */ n.createElement($e, {
     className: z(e, "humany-dropdown-list"),
-    closeButtonAriaLabel: r,
+    closeButtonAriaLabel: o,
     trigger: t
-  }, /* @__PURE__ */ a.createElement(ct, y({}, s), n));
-}, ct = 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;
 }};
     > div {
-        ${te(
-  "> h1",
-  $`
-                font-size: ${(t) => {
-    var e;
-    return (e = t.theme.fonts) == null ? void 0 : e.normal;
-  }};
-                line-height: 1.2em;
-            `
-)}
+        ${(t) => {
+  var e;
+  return ee(t)(
+    "> h1",
+    $`
+                    font-size: ${(e = t.theme.fonts) == null ? void 0 : e.normal};
+                    line-height: 1.2em;
+                `
+  );
+}}
     }
     > ul > li {
         overflow: visible;
@@ -269,97 +280,17 @@ const ke = ({
             }
         }
     }
-`, mt = Ee`
-  100% {
-    transform: rotate(360deg);
-  }
-`, dt = Ee`
-  0% {
-    stroke-dasharray: 1, 200;
-    stroke-dashoffset: 0;
-  }
-  50% {
-    stroke-dasharray: 89, 200;
-    stroke-dashoffset: -35px;
-  }
-  100% {
-    stroke-dasharray: 89, 200;
-    stroke-dashoffset: -124px;
-  }
-`, ze = d.svg`
-    animation: ${mt} 2s linear infinite;
-    height: 100%;
-    transform-origin: center center;
-    width: 100%;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    margin: auto;
-    transition: 200ms ease-out opacity;
-`, Se = d.div`
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: 100%;
-    width: 100%;
-    pointer-events: ${(t) => t["data-loading"] ? "all" : "none"};
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    transition: 200ms ease-out opacity;
-    box-sizing: border-box;
-    overflow: hidden;
-    ${ze} {
-        opacity: ${(t) => t["data-loading"] ? "1" : "0"};
-    }
-`, ft = d.div`
-    position: relative;
-    margin: 0 auto;
-    width: 100px;
-    &:before {
-        content: '';
-        display: block;
-        padding-top: 100%;
-    }
-`, ut = d.circle`
-    stroke-dasharray: 1, 200;
-    stroke-dashoffset: 0;
-    animation: ${dt} 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;
-`, ht = ({ loading: t = !1 }) => /* @__PURE__ */ a.createElement(Se, {
-  className: "humany-loader",
-  "data-loading": t
-}, /* @__PURE__ */ a.createElement(ft, {
-  className: "humany-spinner"
-}, /* @__PURE__ */ a.createElement(ze, {
-  viewBox: "25 25 50 50"
-}, /* @__PURE__ */ a.createElement(ut, {
-  cx: "50",
-  cy: "50",
-  r: "20",
-  fill: "none",
-  "stroke-width": "2",
-  "stroke-miterlimit": "10"
-})))), gt = $`
-    ${(t) => t["data-loading"] && "position: relative;"};
-    ${(t) => t["data-loading"] && "min-height: 150px;"}
+`, ut = (t) => $`
+    ${t["data-loading"] && "position: relative;"};
+    ${t["data-loading"] && "min-height: 150px;"}
     > * {
         transition: 200ms ease-out opacity;
-        opacity: ${(t) => t["data-loading"] ? "0.5" : "1"};
+        opacity: ${t["data-loading"] ? "0.5" : "1"};
     }
-    ${Se} {
-        opacity: ${(t) => t["data-loading"] ? "1" : "0"};
+    .humany-loader {
+        opacity: ${t["data-loading"] ? "1" : "0"};
     }
-`, Vt = d(H)`
+`, ra = d(H)`
     && {
         font-size: ${(t) => {
   var e;
@@ -367,7 +298,7 @@ const ke = ({
 }};
     }
     width: 1.2em;
-`, Kt = d($e)`
+`, sa = d(ve)`
     font-size: ${(t) => {
   var e;
   return (e = t.theme.fonts) == null ? void 0 : e.medium;
@@ -378,7 +309,7 @@ const ke = ({
   var e;
   return (e = t.theme.colors) == null ? void 0 : e.text;
 }};
-`, pt = d(ne)`
+`, ft = d(te)`
     display: flex;
     align-items: center;
 
@@ -392,11 +323,11 @@ const ke = ({
 }}
 
     &: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}
+                    ${ie(t)}
                     box-sizing: content-box;
                 `}
         }
@@ -406,60 +337,60 @@ const ke = ({
         flex: 1;
         font-weight: 300;
     }
-`, yt = ({
+`, ht = ({
   addFavoriteTooltip: t,
   removeFavoriteCancelLabel: e,
-  removeFavoriteConfirmLabel: n,
-  removeFavoriteHeader: r,
+  removeFavoriteConfirmLabel: a,
+  removeFavoriteHeader: o,
   removeFavoriteLabel: s,
   removeFavoriteTooltip: i,
-  id: o,
+  id: r,
   isFavorite: c,
   guideTitle: m,
-  buttonLabel: u = "",
-  actions: { addFavorite: f, removeFavorite: l }
+  buttonLabel: f = "",
+  actions: { addFavorite: u, removeFavorite: l }
 }) => {
   const h = k(() => {
-    l(o);
-  }, [o, l]), S = k(() => {
-    f(o);
-  }, [o, f]), g = `${c ? i : t}${m ? `: "${m}"` : ""}`;
-  return /* @__PURE__ */ a.createElement(a.Fragment, null, c ? /* @__PURE__ */ a.createElement(qe, {
-    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": u ? "true" : "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" }
-    }), u && /* @__PURE__ */ a.createElement(Q, null, u)),
+    }), f && /* @__PURE__ */ n.createElement(J, null, f)),
     onConfirm: h,
     cancelLabel: e,
-    confirmLabel: n,
-    header: r,
+    confirmLabel: a,
+    header: o,
     text: s
-  }) : /* @__PURE__ */ a.createElement(de, {
+  }) : /* @__PURE__ */ n.createElement(me, {
     className: "humany-favorite-button",
     title: g,
     "aria-label": g,
     onClick: S,
     "data-favorite": "false",
-    "data-has-label": u ? "true" : "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" }
-  }), u && /* @__PURE__ */ a.createElement(Q, null, u)));
-}, de = d(pt)`
+  }), 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;
 
@@ -470,7 +401,7 @@ const ke = ({
           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};
           }
         `;
 }}
@@ -478,13 +409,13 @@ const ke = ({
     }
 
     ${(t) => {
-  var e, n, r, s, i, o, 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: ${(r = t.theme.colors) == null ? void 0 : r.text};
+                    stroke: ${(o = t.theme.colors) == null ? void 0 : o.text};
                 }
 
                 ${t["data-favorite"] === "true" && `
@@ -505,7 +436,7 @@ const ke = ({
             fill: transparent;
           }
         ` : `
-          fill: ${(o = t.theme.colors) == null ? void 0 : o.text};
+          fill: ${(r = t.theme.colors) == null ? void 0 : r.text};
 
           path {
             fill: ${(c = t.theme.colors) == null ? void 0 : c.text};
@@ -515,18 +446,18 @@ const ke = ({
             }
         `;
 }}
-`, qt = V(
-  (u, m) => {
-    var f = u, {
+`, ia = _(
+  (f, m) => {
+    var u = f, {
       onFeedback: t = () => {
       },
       direction: e = "horizontal",
-      className: n,
-      header: r,
+      className: a,
+      header: o,
       positive: s,
       negative: i,
-      selected: o
-    } = f, c = w(f, [
+      selected: r
+    } = u, c = w(u, [
       "onFeedback",
       "direction",
       "className",
@@ -535,32 +466,32 @@ const ke = ({
       "negative",
       "selected"
     ]);
-    return /* @__PURE__ */ a.createElement(vt, E(y({
-      className: z(n, "humany-feedback"),
+    return /* @__PURE__ */ n.createElement(yt, E(y({
+      className: z(a, "humany-feedback"),
       "data-direction": e
-    }, ve(c)), {
+    }, xe(c)), {
       ref: m
-    }), !!r && /* @__PURE__ */ a.createElement($t, null, r), /* @__PURE__ */ a.createElement(fe, {
+    }), !!o && /* @__PURE__ */ n.createElement(pt, null, o), /* @__PURE__ */ n.createElement(de, {
       className: "humany-feedback-button",
-      disabled: !!o,
-      "aria-pressed": o === "positive",
-      "data-selected": o === "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, s)), /* @__PURE__ */ a.createElement(fe, {
+    }), /* @__PURE__ */ n.createElement("span", null, s)), /* @__PURE__ */ n.createElement(de, {
       className: "humany-feedback-button",
-      disabled: !!o,
-      "aria-pressed": o === "negative",
-      "data-selected": o === "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)));
   }
-), $t = d(Q)`
+), pt = d(J)`
     font-weight: normal;
     margin: 0 0 ${(t) => {
   var e;
@@ -571,7 +502,7 @@ const ke = ({
   return (e = t.theme.fonts) == null ? void 0 : e.normal;
 }};
     display: block;
-`, fe = d(ne)`
+`, de = d(te)`
     display: inline-block;
     font-size: ${(t) => {
   var e;
@@ -586,10 +517,10 @@ const ke = ({
     }
 
     ${(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});
         `;
 }}
 
@@ -598,11 +529,12 @@ const ke = ({
         `}
 
   ${(t) => {
-  var e;
-  return pe({
+  var e, a;
+  return ((e = t.theme.colors) == null ? void 0 : e.primary) && ye({
     active: t["data-selected"],
-    primaryColor: (e = t.theme.colors) == null ? void 0 : e.primary,
-    secondaryColor: "#FFFFFF"
+    primaryColor: (a = t.theme.colors) == null ? void 0 : a.primary,
+    secondaryColor: "#FFFFFF",
+    theme: t.theme
   });
 }}
 
@@ -612,27 +544,27 @@ const ke = ({
   return (e = t.theme.sizes) == null ? void 0 : e.small;
 }} 0 0;
     }
-`, vt = d.div`
-    ${(t) => t["data-direction"] === "vertical" && $`
+`, yt = d.div`
+    ${(t) => {
+  var e;
+  return t["data-direction"] === "vertical" && $`
             > button {
                 width: 100%;
                 &:not(:last-child) {
-                    margin-bottom: ${(e) => {
-  var n;
-  return (n = e.theme.sizes) == null ? void 0 : n.normal;
-}};
+                    margin-bottom: ${(e = t.theme.sizes) == null ? void 0 : e.normal};
                 }
             }
-        `}
-`, Gt = () => {
-  const [t, e] = A(null), n = W("ArrowLeft"), r = W("ArrowRight"), s = W("ArrowUp"), i = W("ArrowDown");
+        `;
+}}
+`, $t = () => {
+  const [t, e] = T(null), a = W("ArrowLeft"), o = W("ArrowRight"), s = W("ArrowUp"), i = W("ArrowDown");
   return K(() => {
-    e(n ? "left" : r ? "right" : s ? "up" : i ? "down" : null);
-  }, [n, r, s, i]), t;
-}, Ut = (t, e) => {
-  const [n, r] = A(t), s = k(() => setTimeout(() => {
-    r(t);
-  }, e), [e, r, t]);
+    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 K(
     () => {
       const i = s();
@@ -641,93 +573,93 @@ const ke = ({
       };
     },
     [s]
-  ), n;
-}, xt = () => {
-  const t = Ge(), [e, n] = A([]), r = t.get("favorites");
+  ), a;
+}, ca = vt, xt = () => {
+  const t = Ve(), [e, a] = T([]), o = t.get("favorites");
   K(() => {
-    if (r) {
-      n(r.get());
+    if (o) {
+      a(o.get());
       const { events: m } = t.get("$widget");
-      return m.subscribe("widget:favorites-updated", (f, { updated: l }) => {
-        n([...l]);
+      return m.subscribe("widget:favorites-updated", (u, { updated: l }) => {
+        a([...l]);
       });
     }
   }, []);
-  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(
+  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,
-    nt(
+    Ze(
       () => ({
         addFavorite: s,
         removeFavorite: i,
-        clearFavorites: o,
+        clearFavorites: r,
         toggleFavorite: c
       }),
       [e]
     )
   ];
-}, Jt = () => {
-  const [t, e] = A(!1), n = we(), r = k(() => e(!0), [e]), s = k(() => e(!1), [e]);
-  return ce("mouseenter", r, n.current), ce("mouseleave", s, n.current), [t, n];
-}, bt = ({
+}, 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 = "",
-  modifiedLabel: r = "",
+  byLabel: a = "",
+  modifiedLabel: o = "",
   publishedLabel: s = "",
   modifiedBy: i = "",
-  publishedBy: o = "",
+  publishedBy: r = "",
   showModified: c = !1,
   showPublished: m = !1,
-  modified: u,
-  published: f
+  modified: f,
+  published: u
 }) => {
-  const l = m && f ? /* @__PURE__ */ a.createElement(ue, {
-    format: t,
-    timestamp: f
-  }) : null, h = c && u ? /* @__PURE__ */ a.createElement(ue, {
+  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__ */ 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"
-  }, s, l, n && o && ` ${n.replace("{{editor}}", o)}`), h && /* @__PURE__ */ a.createElement(J, {
+  }, s, l, a && r && ` ${a.replace("{{editor}}", r)}`), h && /* @__PURE__ */ n.createElement(U, {
     className: "humany-modified"
-  }, l && ", ", r, h, n && i && ` ${n.replace("{{editor}}", i)}`));
-}, ue = d(xe)`
+  }, 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($e)`
+`, U = d(ve)`
     font-style: italic;
-`, wt = ({ tags: t }) => t.filter((e) => e.symbol).length ? /* @__PURE__ */ a.createElement(zt, {
+`, 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: r }) => 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(St, {
+  }, /* @__PURE__ */ n.createElement(Lt, {
     size: 18,
-    symbol: n,
-    title: r
+    symbol: a,
+    title: o
   }))
-}) : null, Qt = V(({ title: t, id: e, route: n, symbolSize: r, collapseUri: s, children: i }, o) => {
-  const { params: c } = he();
-  return /* @__PURE__ */ a.createElement(Et, {
-    ref: o,
+}) : null, da = _(({ title: t, id: e, route: a, symbolSize: o, collapseUri: s, children: i }, r) => {
+  const { params: c } = ge();
+  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: s || void 0,
       id: void 0,
@@ -735,11 +667,11 @@ const ke = ({
       accordion: void 0
     })),
     text: t
-  }, /* @__PURE__ */ a.createElement(N, {
-    size: r,
+  }, /* @__PURE__ */ n.createElement(N, {
+    size: o,
     symbol: { type: "Svg", content: "caret-up" }
   })), i);
-}), Et = d.li`
+}), zt = d.li`
   > a { 
     grid-column: 1 / -1
     font-weight: bold;
@@ -752,21 +684,21 @@ const ke = ({
   > div {
     grid-column: 1 / -1
   }
-`, Xt = V(
-  (Mt, De) => {
-    var ae = Mt, {
+`, ua = _(
+  (Gt, Fe) => {
+    var ae = Gt, {
       expandable: t = !1,
       routing: e = {},
-      paramMappers: n = {},
-      symbolSize: r = 11,
+      paramMappers: a = {},
+      symbolSize: o = 11,
       pageRole: s = "link",
       pageCaret: i = "down",
-      showTags: o = !1,
+      showTags: r = !1,
       showFavoriteToggle: c = !1,
       localPaging: m = !1,
-      onItemClick: u = () => {
+      onItemClick: f = () => {
       },
-      dispatch: f = () => {
+      dispatch: u = () => {
       },
       metadata: l = {},
       pageLabel: h,
@@ -776,11 +708,11 @@ const ke = ({
       renderItem: L,
       addFavoriteTooltip: C,
       removeFavoriteCancelLabel: M,
-      removeFavoriteConfirmLabel: Ne,
-      removeFavoriteHeader: Le,
-      removeFavoriteLabel: Fe,
-      removeFavoriteTooltip: Ie
-    } = ae, Te = w(ae, [
+      removeFavoriteConfirmLabel: ze,
+      removeFavoriteHeader: Se,
+      removeFavoriteLabel: Ne,
+      removeFavoriteTooltip: Le
+    } = ae, De = w(ae, [
       "expandable",
       "routing",
       "paramMappers",
@@ -805,79 +737,79 @@ const ke = ({
       "removeFavoriteLabel",
       "removeFavoriteTooltip"
     ]);
-    const q = Ue(), I = we(), T = Je(x), { guide: Ae = "guide", page: Ce = "index" } = e, {
-      guide: Me = ({ id: p }) => j({ guide: p }),
-      page: re = () => j()
-    } = n, [Pe, Be] = xt();
-    at(De, () => I.current);
-    const G = (p) => {
-      const { id: b, title: v, tags: F, published: P, modified: D, publishedBy: B, modifiedBy: U } = p;
-      return /* @__PURE__ */ a.createElement("li", {
+    const V = qe(), F = Ee(), I = Ge(x), { guide: Ie = "guide", page: Ae = "index" } = e, {
+      guide: Te = ({ id: p }) => j({ guide: p }),
+      page: ne = () => j()
+    } = a, [Ce, Me] = bt();
+    et(Fe, () => F.current);
+    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) && !!D).toString()
-      }, /* @__PURE__ */ a.createElement(X, {
+        "has-metadata": (!!(l != null && l.showPublished) && !!P || !!(l != null && l.showModified) && !!A).toString()
+      }, /* @__PURE__ */ n.createElement(Q, {
         className: "humany-guide-link",
         title: v,
         "aria-label": v,
-        routeName: Ae,
-        onClick: (je) => u(je, p),
-        params: Me(p),
+        routeName: Ie,
+        onClick: (We) => f(We, p),
+        params: Te(p),
         text: v
-      }, /* @__PURE__ */ a.createElement(N, {
-        size: r,
+      }, /* @__PURE__ */ n.createElement(N, {
+        size: o,
         symbol: {
           type: "Svg",
           content: t ? "caret-down" : "caret-right"
         }
-      })), c && /* @__PURE__ */ a.createElement(yt, {
+      })), c && /* @__PURE__ */ n.createElement(gt, {
         guideTitle: v,
         addFavoriteTooltip: C,
         removeFavoriteCancelLabel: M,
-        removeFavoriteConfirmLabel: Ne,
-        removeFavoriteHeader: Le,
-        removeFavoriteLabel: Fe,
-        removeFavoriteTooltip: Ie,
-        isFavorite: Pe.indexOf(b) > -1,
-        actions: Be,
+        removeFavoriteConfirmLabel: ze,
+        removeFavoriteHeader: Se,
+        removeFavoriteLabel: Ne,
+        removeFavoriteTooltip: Le,
+        isFavorite: Ce.indexOf(b) > -1,
+        actions: Me,
         id: b
-      }), o && /* @__PURE__ */ a.createElement(wt, {
-        tags: F
-      }), /* @__PURE__ */ a.createElement(Nt, E(y({}, l), {
-        indent: t ? void 0 : r,
-        modified: D,
+      }), r && /* @__PURE__ */ n.createElement(kt, {
+        tags: D
+      }), /* @__PURE__ */ n.createElement(Dt, E(y({}, l), {
+        indent: t ? void 0 : o,
+        modified: A,
         published: P,
         publishedBy: B,
-        modifiedBy: U
+        modifiedBy: G
       })));
-    }, Re = k(
-      (p, b, v) => L ? L(p, b, v, G) : G(p),
-      [L, G]
-    ), We = k(
+    }, Pe = k(
+      (p, b, v) => L ? L(p, b, v, q) : q(p),
+      [L, q]
+    ), Be = k(
       (p) => {
-        m && (p.preventDefault(), f("page", re()));
+        m && (p.preventDefault(), u("page", ne()));
       },
-      [f, m]
+      [u, m]
     );
     K(() => {
-      if (q && T && T.length < x.length && I.current) {
-        const p = I.current.querySelectorAll(".humany-guide-list > ul > li"), b = p[T.length];
-        if (p.length === x.length && T.length) {
-          const v = p[T.length];
+      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];
           if (v) {
-            const F = v.querySelector(
+            const D = v.querySelector(
               ".humany-guide-link"
             );
-            F && F.focus();
+            D && D.focus();
           }
         } else
-          b && new MutationObserver((F, P) => {
-            F.forEach((D) => {
-              if (D.addedNodes) {
+          b && new MutationObserver((D, P) => {
+            D.forEach((A) => {
+              if (A.addedNodes) {
                 const B = Array.from(
-                  D.addedNodes
-                ).find((U) => U.tagName === "A");
-                B && tt(I.current, document.activeElement) && (q && B.focus(), P.disconnect());
+                  A.addedNodes
+                ).find((G) => G.tagName === "A");
+                B && tt(F.current, document.activeElement) && (V && B.focus(), P.disconnect());
               }
             });
           }).observe(b, {
@@ -890,34 +822,34 @@ const ke = ({
           });
       }
     });
-    const He = !!Object.keys(l).filter(
+    const Re = !!Object.keys(l).filter(
       (p) => typeof l[p] != "undefined"
     ).length;
-    return /* @__PURE__ */ a.createElement(kt, E(y({
+    return /* @__PURE__ */ n.createElement(St, E(y({
       className: z(S, "humany-guide-list"),
       "data-item-count": x.length,
       items: x,
-      renderItem: Re,
-      isTabbing: q,
+      renderItem: Pe,
+      isTabbing: V,
       expandable: t ? "true" : "false",
-      "grid-items": o || c || He ? "true" : "false"
-    }, ve(Te)), {
-      ref: I
-    }), h ? /* @__PURE__ */ a.createElement(X, {
+      "grid-items": r || c || Re ? "true" : "false"
+    }, xe(De)), {
+      ref: F
+    }), h ? /* @__PURE__ */ n.createElement(Q, {
       text: h,
       title: h,
       "aria-label": h,
-      routeName: Ce,
+      routeName: Ae,
       role: s,
-      params: re(),
-      onClick: We
-    }, /* @__PURE__ */ a.createElement(N, {
-      size: r,
+      params: ne(),
+      onClick: Be
+    }, /* @__PURE__ */ n.createElement(N, {
+      size: o,
       symbol: { type: "Svg", content: `caret-${i}` }
     })) : null, g);
   }
-), kt = d(Y)`
-    ${_}
+), St = d(O)`
+    ${Y}
     padding: ${(t) => {
   var e;
   return (e = t.theme.sizes) == null ? void 0 : e.large;
@@ -929,16 +861,18 @@ const ke = ({
     text-decoration: none;
 
     > div {
-        ${te(
+        ${(t) => ee(t)(
   "> h1",
   $`
-                white-space: pre-wrap;
-            `
+                    white-space: pre-wrap;
+                `
 )}
     }
 
     > ul > li {
-        ${(t) => t["grid-items"] === "true" && $`
+        ${(t) => {
+  var e, a;
+  return t["grid-items"] === "true" && $`
                 display: grid;
                 grid-template-columns: auto 1fr 1fr;
                 gap: 0px 0px;
@@ -946,13 +880,10 @@ const ke = ({
                 align-items: center;
 
                 > button {
-                    margin: 0 0 0 ${(e) => {
-  var n;
-  return (n = e.theme.sizes) == null ? void 0 : n.small;
-}};
+                    margin: 0 0 0 ${(e = t.theme.sizes) == null ? void 0 : e.small};
 
                     &[data-favorite='false'] {
-                        ${(e) => e.isTabbing ? "opacity: 0;" : "display: none;"};
+                        ${t.isTabbing ? "opacity: 0;" : "display: none;"};
                         &:focus {
                             opacity: 1;
                         }
@@ -960,10 +891,7 @@ const ke = ({
                 }
 
                 > span {
-                    font-size: ${(e) => {
-  var n;
-  return (n = e.theme.fonts) == null ? void 0 : n.small;
-}};
+                    font-size: ${(a = t.theme.fonts) == null ? void 0 : a.small};
                 }
 
                 &:hover {
@@ -979,7 +907,8 @@ const ke = ({
                         '. favorite tags'
                         'metadata metadata metadata';
                 }
-            `}
+            `;
+}}
         > a {
             color: ${(t) => {
   var e;
@@ -1003,7 +932,9 @@ const ke = ({
                 }
             }
 
-            ${(t) => t.expandable === "true" && $`
+            ${(t) => {
+  var e;
+  return t.expandable === "true" && $`
                     display: flex;
                     flex-direction: row-reverse;
                     justify-content: flex-end;
@@ -1015,15 +946,13 @@ const ke = ({
                     }
 
                     svg {
-                        margin: 0 0 0 ${(e) => {
-  var n;
-  return (n = e.theme.sizes) == null ? void 0 : n.small;
-}};
+                        margin: 0 0 0 ${(e = t.theme.sizes) == null ? void 0 : e.small};
                     }
-                `}
+                `;
+}}
 
             &:focus-visible {
-                ${Z}
+                ${X}
                 text-decoration: underline;
             }
 
@@ -1066,12 +995,12 @@ const ke = ({
         }
 
         &:focus-visible {
-            ${Z}
+            ${X}
             text-decoration: underline;
         }
     }
-`, zt = d(ee)`
-    ${ge}
+`, Nt = d(Z)`
+    ${pe}
     display: flex;
     margin: 0 0 0 auto;
     grid-area: tags;
@@ -1086,7 +1015,7 @@ const ke = ({
         align-items: center;
         justify-content: space-between;
     }
-`, St = d(N)`
+`, Lt = d(N)`
     display: block;
     color: ${(t) => {
   var e;
@@ -1103,7 +1032,7 @@ const ke = ({
         font-size: ${t.size}px;
       `;
 }}
-`, Nt = d(bt)`
+`, Dt = d(Et)`
     grid-area: metadata;
     text-overflow: ellipsis;
     overflow: hidden;
@@ -1115,60 +1044,142 @@ const ke = ({
   var e;
   return typeof t.indent == "number" && `text-indent: calc(${(e = t.theme.sizes) == null ? void 0 : e.small} * 2 + ${t.indent}px);`;
 }}
-`, Zt = (i) => {
-  var o = i, {
+`, Ft = he`
+  100% {
+    transform: rotate(360deg);
+  }
+`, It = he`
+  0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -35px;
+  }
+  100% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -124px;
+  }
+`, At = d.svg`
+    animation: ${Ft} 2s linear infinite;
+    height: 100%;
+    transform-origin: center center;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
+    transition: 200ms ease-out opacity;
+`, Tt = d.div`
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 100%;
+    width: 100%;
+    pointer-events: ${(t) => t["data-loading"] ? "all" : "none"};
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    transition: 200ms ease-out opacity;
+    box-sizing: border-box;
+    overflow: hidden;
+
+    .humany-spinner-svg {
+        opacity: ${(t) => t["data-loading"] ? "1" : "0"};
+    }
+`, Ct = d.div`
+    position: relative;
+    margin: 0 auto;
+    width: 100px;
+    &:before {
+        content: '';
+        display: block;
+        padding-top: 100%;
+    }
+`, Mt = d.circle`
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+    animation: ${It} 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, {
+  cx: "50",
+  cy: "50",
+  r: "20",
+  fill: "none",
+  "stroke-width": "2",
+  "stroke-miterlimit": "10"
+})))), Bt = Pt, Rt = (i) => {
+  var r = i, {
     className: t,
     showHeader: e,
-    notificationList: n,
-    loading: r
-  } = o, s = w(o, [
+    notificationList: a,
+    loading: o
+  } = r, s = w(r, [
     "className",
     "showHeader",
     "notificationList",
     "loading"
   ]);
-  const [c, m] = A(null), {
-    id: u,
-    title: f,
+  const [c, m] = T(null), {
+    id: f,
+    title: u,
     symbol: l,
     notifications: h = [],
     defaultHeaderOptions: S = { visible: !0 }
-  } = n || {};
-  return !h.length && !r ? null : /* @__PURE__ */ a.createElement(Ft, E(y({}, s), {
-    "data-loading": 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"),
-    "data-notification-category": u,
-    header: f,
+    "data-notification-category": f,
+    header: u,
     symbol: l,
     items: h,
-    renderItem: ({ id: g, title: x, body: L, modified: C, expandable: M }) => /* @__PURE__ */ a.createElement(It, {
+    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(Lt, {
+    }, 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(Tt, {
+    }, /* @__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(Dt, {
+    }), 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(ht, {
-    loading: r
+  }), /* @__PURE__ */ n.createElement(Bt, {
+    loading: o
   }));
-}, Lt = d(ne)`
+}, Wt = d(te)`
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -1196,7 +1207,7 @@ const ke = ({
         white-space: nowrap;
     }
     &:focus-visible {
-        ${Z}
+        ${X}
         span {
             color: ${(t) => {
   var e;
@@ -1205,9 +1216,9 @@ const ke = ({
             text-decoration: underline;
         }
     }
-`, Ft = d(Y)`
-    ${gt}
-    ${_}
+`, Ht = d(O)`
+    ${ut}
+    ${Y}
   overflow: hidden;
     justify-content: flex-start;
     padding: ${(t) => {
@@ -1216,7 +1227,7 @@ const ke = ({
 }};
     ${(t) => !t["data-show-header"] && $`
             > div {
-                ${te(
+                ${ee(t)(
   "h1",
   $`
                         display: none;
@@ -1230,28 +1241,28 @@ const ke = ({
             text-decoration: underline;
         }
     }
-`, O = d(Qe)`
-    ${Xe}
+`, fe = d(Ue)`
+    ${Je}
     font-weight: 300;
 
     p {
         white-space: normal;
     }
-`, It = d.li`
-    ${O} {
+`, jt = d.li`
+    .humany-paragraph {
         display: none;
         &:not(:only-child) {
             ${(t) => {
-  var e, n, r;
-  return ((e = t.theme.sizes) == null ? void 0 : e.cardinal) && ((n = t.theme.sizes) == null ? void 0 : n.normal) && $`
-                    margin: ${(r = t.theme.sizes) == null ? void 0 : r.normal} 0;
+  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;
                 `;
 }}
         }
     }
 
     ${(t) => t["data-expanded"] && $`
-            ${O} {
+            .humany-paragraph {
                 display: block;
             }
         `}
@@ -1264,7 +1275,7 @@ const ke = ({
   return (e = t.theme.colors) == null ? void 0 : e.accent;
 }};
     }
-`, Tt = d(N)`
+`, Ot = d(N)`
     margin: 0 0 0 ${(t) => {
   var e;
   return (e = t.theme.sizes) == null ? void 0 : e.small;
@@ -1275,67 +1286,67 @@ const ke = ({
   return (e = t.theme.colors) == null ? void 0 : e.primary;
 }};
     }
-`, Dt = d(xe)`
+`, Yt = d(we)`
     font-size: ${(t) => {
   var e;
   return (e = t.theme.fonts) == null ? void 0 : e.small;
 }};
     font-weight: 300;
-`, At = (t) => new RegExp("^#", "i").test(t), Ct = (t) => (r) => {
-  var s = r, { children: e } = s, n = w(s, ["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: o
-  } = t.get("$widget"), { href: c = "" } = n;
-  if (At(c))
-    return /* @__PURE__ */ a.createElement(Ze, {
+    name: r
+  } = t.get("$widget"), { href: c = "" } = a;
+  if (_t(c))
+    return /* @__PURE__ */ n.createElement(Qe, {
       smooth: !0,
       to: c
     }, e);
-  const m = i.bindings.map((l) => l.replace(/\./g, "\\.")).join("|"), f = new RegExp(`^((http[s]?:)?//)?(${m})/([^\\s]+)`).exec(c);
-  if (f && f.length >= 4) {
-    const l = f[4];
-    if (i.widgets.get(l) && !l.startsWith("blob?") && !l.startsWith(o))
-      return /* @__PURE__ */ a.createElement(et, {
+  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(r))
+      return /* @__PURE__ */ n.createElement(Xe, {
         widgetName: l
       }, e);
   }
-  return /* @__PURE__ */ a.createElement("a", y({}, n), e);
-}, en = (t, e = []) => ({
+  return /* @__PURE__ */ n.createElement("a", y({}, a), e);
+}, Vt = Kt, qt = (t, e = []) => ({
   transform: {
-    a: (n) => {
-      const c = n, { children: r } = 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: u }) => u === i);
+        const m = e.find(({ connection: f }) => f === i);
         if (m)
-          return /* @__PURE__ */ a.createElement(ke, y({}, m), r);
+          return /* @__PURE__ */ n.createElement(ke, y({}, m), o);
       }
-      return Ct(t)(n);
+      return Vt(t)(a);
     }
   }
-});
+}), ha = qt;
 export {
-  Qt as AccordionListItem,
+  da as AccordionListItem,
   ke as DialogLink,
-  jt as DialogList,
-  Ot as DrawerList,
-  Yt as DropdownActions,
-  _t as DropdownList,
-  yt as FavoriteButton,
-  qt as Feedback,
-  Xt as GuideList,
-  ht as Loader,
-  Se as LoaderWrapper,
-  bt as Metadata,
-  Zt as NotificationList,
-  Vt as SmallCaret,
-  Kt as StyledHeaderText,
-  pt as StyledListButton,
-  en as guideRenderInstructions,
-  gt as loadingOpacity,
-  Gt as useArrowKeys,
-  Ut as useDebounce,
-  xt as useFavorites,
-  Jt as useHover
+  ta as DialogList,
+  aa as DrawerList,
+  na as DropdownActions,
+  oa as DropdownList,
+  gt as FavoriteButton,
+  ia as Feedback,
+  ua as GuideList,
+  Bt as Loader,
+  Tt as LoaderWrapper,
+  Et as Metadata,
+  fa as NotificationList,
+  ra 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
 };
 //# sourceMappingURL=index.js.map