@telia-ace/knowledge-widget-ui 0.0.1

package/index.mjs

@@ -0,0 +1,1364 @@
+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 F, formatUrl as J, appendClassNames as k } from "@telia-ace/widget-utilities";
+import c from "@emotion/styled";
+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: i,
+  connection: o,
+  type: s,
+  target: r,
+  href: m,
+  children: l,
+  connectionKey: d
+}) => {
+  const u = {}, { name: h, params: f } = ne();
+  switch (s) {
+    case "default":
+    case "guide":
+      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: x,
+        uriName: n === v ? J($) : J(t)
+      });
+      break;
+    case "link":
+      u.href = m, u.target = r;
+      break;
+  }
+  return /* @__PURE__ */ a(
+    He,
+    {
+      className: k(e, "humany-dialog-link"),
+      ...u,
+      children: l || /* @__PURE__ */ p(te, { children: [
+        s === "link" && /* @__PURE__ */ a(I, { faIcon: "link" }),
+        /* @__PURE__ */ a("span", { children: t })
+      ] })
+    }
+  );
+}, Mt = A(
+  ({ className: t, dialog: e, ...n }, i) => e.length ? /* @__PURE__ */ a(
+    qe,
+    {
+      className: k(t, "humany-dialog"),
+      items: e,
+      renderItem: (o) => /* @__PURE__ */ a("li", { "data-dialog": o.connection, children: /* @__PURE__ */ a(fe, { ...o }) }, o.connection),
+      ...n,
+      ref: i
+    }
+  ) : null
+), qe = c(E)`
+  ${ie}
+  a {
+    min-width: 150px;
+    max-width: 400px;
+    display: block;
+    white-space: normal;
+    ${(t) => {
+  var e, n;
+  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
+  });
+}}
+  }
+
+  i {
+    margin: 0 ${(t) => {
+  var e;
+  return (e = t.theme.sizes) == null ? void 0 : e.small;
+}} 0 0;
+  }
+`, Pt = ({
+  trigger: t,
+  header: e,
+  className: n,
+  animation: i,
+  fullScreen: o,
+  onToggle: s,
+  children: r,
+  ref: m,
+  closeButtonAriaLabel: l,
+  ...d
+}) => /* @__PURE__ */ a(
+  je,
+  {
+    className: k(n, "humany-drawer-list"),
+    trigger: t,
+    header: e,
+    animation: i,
+    fullScreen: o,
+    onToggle: s,
+    closeButtonAriaLabel: l,
+    children: /* @__PURE__ */ a(Je, { ...d, children: r })
+  }
+), Je = c(C)`
+  ${D}
+  font-family: ${(t) => {
+  var e;
+  return (e = t.theme.fonts) == null ? void 0 : e.type;
+}};
+  padding: ${(t) => {
+  var e;
+  return (e = t.theme.sizes) == null ? void 0 : e.medium;
+}};
+  > ul > li {
+    overflow: visible;
+    font-weight: 300;
+    font-size: ${(t) => {
+  var e;
+  return (e = t.theme.fonts) == null ? void 0 : e.normal;
+}};
+  }
+`, Bt = ({
+  items: t,
+  renderItem: e,
+  trigger: n,
+  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);
+  font-family: ${(t) => {
+  var e;
+  return (e = t.theme.fonts) == null ? void 0 : e.type;
+}};
+  font-size: ${(t) => {
+  var e;
+  return (e = t.theme.fonts) == null ? void 0 : e.normal;
+}};
+`, Xe = c.div`
+  padding: ${(t) => {
+  var e;
+  return (e = t.theme.sizes) == null ? void 0 : e.normal;
+}};
+  padding-bottom: 0;
+  font-size: ${(t) => {
+  var e;
+  return (e = t.theme.fonts) == null ? void 0 : e.normal;
+}};
+  font-weight: normal;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: 0;
+    font-weight: normal;
+    padding-bottom: 0;
+  }
+
+  svg,
+  i {
+    margin-right: ${(t) => {
+  var e;
+  return (e = t.theme.sizes) == null ? void 0 : e.small;
+}};
+  }
+`, Ze = c(E)`
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  padding: ${(t) => {
+  var e;
+  return (e = t.theme.sizes) == null ? void 0 : e.small;
+}} 0;
+
+  li {
+    background: #fff;
+
+    a {
+      display: block;
+      font-size: ${(t) => {
+  var e;
+  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}`;
+}};
+      cursor: pointer;
+      color: #555;
+      text-decoration: none;
+
+      &:hover {
+        background: #f9f9f9;
+        color: ${(t) => {
+  var e;
+  return (e = t.theme.colors) == null ? void 0 : e.primary;
+}};
+      }
+    }
+  }
+`, Ht = ({
+  trigger: t,
+  className: e,
+  children: n,
+  closeButtonAriaLabel: i,
+  ...o
+}) => /* @__PURE__ */ a(
+  oe,
+  {
+    className: k(e, "humany-dropdown-list"),
+    closeButtonAriaLabel: i,
+    trigger: t,
+    children: /* @__PURE__ */ a(et, { ...o, children: n })
+  }
+), et = c(C)`
+  ${D}
+  font-family: ${(t) => {
+  var e;
+  return (e = t.theme.fonts) == null ? void 0 : e.type;
+}};
+  > div {
+    ${(t) => {
+  var e;
+  return Y(t)(
+    "> h1",
+    y`
+          font-size: ${(e = t.theme.fonts) == null ? void 0 : e.normal};
+          line-height: 1.2em;
+        `
+  );
+}}
+  }
+  > ul > li {
+    overflow: visible;
+    font-weight: 300;
+    font-size: ${(t) => {
+  var e;
+  return (e = t.theme.fonts) == null ? void 0 : e.normal;
+}};
+
+    a {
+      display: inline-block;
+
+      @media (hover: hover) {
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+`, tt = (t) => y`
+  ${t["data-loading"] && "position: relative;"};
+  ${t["data-loading"] && "min-height: 150px;"}
+  > * {
+    transition: 200ms ease-out opacity;
+    opacity: ${t["data-loading"] ? "0.5" : "1"};
+  }
+  .humany-loader {
+    opacity: ${t["data-loading"] ? "1" : "0"};
+  }
+`, jt = c(I)`
+  && {
+    font-size: ${(t) => {
+  var e;
+  return (e = t.theme.fonts) == null ? void 0 : e.small;
+}};
+  }
+  width: 1.2em;
+`, Rt = c(se)`
+  font-size: ${(t) => {
+  var e;
+  return (e = t.theme.fonts) == null ? void 0 : e.medium;
+}};
+  font-weight: normal;
+  line-height: 1.2em;
+  color: ${(t) => {
+  var e;
+  return (e = t.theme.colors) == null ? void 0 : e.text;
+}};
+`, nt = c(_)`
+  display: flex;
+  align-items: center;
+
+  ${(t) => {
+  var e;
+  return t["data-has-label"] === "true" && t["data-has-symbol"] === "true" && `
+        svg, i    {
+            margin: 0 ${(e = t.theme.sizes) == null ? void 0 : e.small} 0 0;
+        }
+    `;
+}}
+
+  &:focus-visible {
+    ${(t) => t["data-has-label"] === "true" && V}
+
+    svg, i {
+      ${(t) => t["data-has-label"] === "false" && t["data-has-symbol"] === "true" && y`
+          ${V(t)}
+          box-sizing: content-box;
+        `}
+    }
+  }
+
+  span {
+    flex: 1;
+    font-weight: 300;
+  }
+`, it = ({
+  addFavoriteTooltip: t,
+  removeFavoriteCancelLabel: e,
+  removeFavoriteConfirmLabel: n,
+  removeFavoriteHeader: i,
+  removeFavoriteLabel: o,
+  removeFavoriteTooltip: s,
+  id: r,
+  isFavorite: m,
+  guideTitle: l,
+  buttonLabel: d = "",
+  actions: { addFavorite: u, removeFavorite: h }
+}) => {
+  const f = w(() => {
+    h(r);
+  }, [r, h]), v = w(() => {
+    u(r);
+  }, [r, u]), $ = `${m ? s : t}${l ? `: "${l}"` : ""}`;
+  return m ? /* @__PURE__ */ a(
+    Re,
+    {
+      trigger: /* @__PURE__ */ p(
+        Q,
+        {
+          className: "humany-favorite-button",
+          title: $,
+          "aria-label": $,
+          "data-favorite": "true",
+          "data-has-label": d ? "true" : "false",
+          "data-has-symbol": "true",
+          children: [
+            /* @__PURE__ */ a(
+              z,
+              {
+                size: 16,
+                symbol: { type: "Svg", content: "star-empty" }
+              }
+            ),
+            d && /* @__PURE__ */ a(j, { children: d })
+          ]
+        }
+      ),
+      onConfirm: f,
+      cancelLabel: e,
+      confirmLabel: n,
+      header: i,
+      text: o
+    }
+  ) : /* @__PURE__ */ p(
+    Q,
+    {
+      className: "humany-favorite-button",
+      title: $,
+      "aria-label": $,
+      onClick: v,
+      "data-favorite": "false",
+      "data-has-label": d ? "true" : "false",
+      "data-has-symbol": "true",
+      children: [
+        /* @__PURE__ */ a(z, { size: 16, symbol: { type: "Svg", content: "star-empty" } }),
+        d && /* @__PURE__ */ a(j, { children: d })
+      ]
+    }
+  );
+}, Q = c(nt)`
+  grid-area: favorite;
+
+  &:focus-visible {
+    svg {
+      ${(t) => {
+  var e, n;
+  return t["data-favorite"] === "true" ? `
+          fill: transparent;
+
+          path {
+            fill: transparent;
+          }
+        ` : `
+          fill: ${(e = t.theme.colors) == null ? void 0 : e.text};
+
+          path {
+            fill: ${(n = t.theme.colors) == null ? void 0 : n.text};
+          }
+        `;
+}}
+    }
+  }
+
+  ${(t) => {
+  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: ${(i = t.theme.colors) == null ? void 0 : i.text};
+        }
+
+        ${t["data-favorite"] === "true" && `
+          fill: ${(o = t.theme.colors) == null ? void 0 : o.text};
+
+          path {
+            fill: ${(s = t.theme.colors) == null ? void 0 : s.text};
+          }
+        `};
+      }
+
+      &:hover {
+        svg {
+          ${t["data-favorite"] === "true" ? `
+          fill: transparent;
+
+          path {
+            fill: transparent;
+          }
+        ` : `
+          fill: ${(r = t.theme.colors) == null ? void 0 : r.text};
+
+          path {
+            fill: ${(m = t.theme.colors) == null ? void 0 : m.text};
+          }
+        `};
+        }
+      }
+    `;
+}}
+`, Wt = A(
+  ({
+    onFeedback: t = () => {
+    },
+    direction: e = "horizontal",
+    className: n,
+    header: i,
+    positive: o,
+    negative: s,
+    selected: r,
+    ...m
+  }, l) => /* @__PURE__ */ p(
+    ot,
+    {
+      className: k(n, "humany-feedback"),
+      "data-direction": e,
+      ...re(m),
+      ref: l,
+      children: [
+        !!i && /* @__PURE__ */ a(at, { children: i }),
+        /* @__PURE__ */ p(
+          X,
+          {
+            className: "humany-feedback-button",
+            disabled: !!r,
+            "data-selected": r === "positive",
+            "data-direction": e,
+            onClick: () => t("positive"),
+            children: [
+              /* @__PURE__ */ a(I, { faIcon: "smile-o" }),
+              /* @__PURE__ */ a("span", { children: o })
+            ]
+          }
+        ),
+        /* @__PURE__ */ p(
+          X,
+          {
+            className: "humany-feedback-button",
+            disabled: !!r,
+            "data-selected": r === "negative",
+            "data-direction": e,
+            onClick: () => t("negative"),
+            children: [
+              /* @__PURE__ */ a(I, { faIcon: "frown-o" }),
+              /* @__PURE__ */ a("span", { children: s })
+            ]
+          }
+        )
+      ]
+    }
+  )
+), at = c(j)`
+  font-weight: normal;
+  margin: 0 0 ${(t) => {
+  var e;
+  return (e = t.theme.sizes) == null ? void 0 : e.normal;
+}};
+  font-size: ${(t) => {
+  var e;
+  return (e = t.theme.fonts) == null ? void 0 : e.normal;
+}};
+  display: block;
+`, X = c(_)`
+  display: inline-block;
+  font-size: ${(t) => {
+  var e;
+  return (e = t.theme.fonts) == null ? void 0 : e.normal;
+}};
+  font-weight: 300;
+  && {
+    margin-right: ${(t) => {
+  var e;
+  return (e = t.theme.sizes) == null ? void 0 : e.large;
+}};
+  }
+
+  ${(t) => {
+  var e, n;
+  return t["data-direction"] === "horizontal" && y`
+      width: 225px;
+      max-width: calc(50% - ${(e = t.theme.sizes) == null ? void 0 : e.large} - ${(n = t.theme.sizes) == null ? void 0 : n.small});
+    `;
+}}
+
+  ${(t) => t["data-direction"] === "vertical" && y`
+      min-width: 190px;
+    `}
+
+  ${(t) => {
+  var e, n;
+  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",
+    theme: t.theme
+  });
+}}
+
+  i {
+    margin: 0 ${(t) => {
+  var e;
+  return (e = t.theme.sizes) == null ? void 0 : e.small;
+}} 0 0;
+  }
+`, ot = c.div`
+  ${(t) => {
+  var e;
+  return t["data-direction"] === "vertical" && y`
+      > button {
+        width: 100%;
+        &:not(:last-child) {
+          margin-bottom: ${(e = t.theme.sizes) == null ? void 0 : e.normal};
+        }
+      }
+    `;
+}}
+`, 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, i] = N(t), o = w(() => setTimeout(() => {
+    i(t);
+  }, e), [e, i, t]);
+  return M(
+    () => {
+      const s = o();
+      return () => {
+        clearTimeout(s);
+      };
+    },
+    [o]
+    // Only re-call effect if value or delay changes
+  ), n;
+}, 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",
+        (u, { updated: h }) => {
+          n([...h]);
+        }
+      );
+    }
+  }, []);
+  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,
+    Ue(
+      () => ({
+        addFavorite: o,
+        removeFavorite: s,
+        clearFavorites: r,
+        toggleFavorite: m
+      }),
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [e]
+    )
+  ];
+}, _t = () => {
+  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: i = "",
+  publishedLabel: o = "",
+  modifiedBy: s = "",
+  publishedBy: r = "",
+  showModified: m = !1,
+  showPublished: l = !1,
+  modified: d,
+  published: u
+}) => {
+  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(H, { className: "humany-modified", children: [
+      h && ", ",
+      i,
+      f,
+      n && s && ` ${n.replace("{{editor}}", s)}`
+    ] })
+  ] });
+}, Z = c(ce)`
+  &:not(:first-child) {
+    margin-left: 4px;
+  }
+  &:not(:last-child) {
+    margin-right: 4px;
+  }
+`, H = c(se)`
+  font-style: italic;
+`, 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: i }) => n && /* @__PURE__ */ a("li", { "data-tag": e, children: /* @__PURE__ */ a(ht, { size: 18, symbol: n, title: i }) }, e)
+  }
+) : 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: F({
+          ...m,
+          uriName: o || void 0,
+          id: void 0,
+          guide: void 0,
+          accordion: void 0
+        }),
+        text: t,
+        children: /* @__PURE__ */ a(
+          z,
+          {
+            size: i,
+            symbol: { type: "Svg", content: "caret-up" }
+          }
+        )
+      }
+    ),
+    s
+  ] });
+}), ct = c.li`
+  > 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;
+  }
+`, Gt = A(
+  ({
+    expandable: t = !1,
+    routing: e = {},
+    paramMappers: n = {},
+    symbolSize: i = 11,
+    pageRole: o = "link",
+    pageCaret: s = "down",
+    showTags: r = !1,
+    showFavoriteToggle: m = !1,
+    localPaging: l = !1,
+    onItemClick: d = () => {
+    },
+    dispatch: u = () => {
+    },
+    metadata: h = {},
+    pageLabel: f,
+    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) && !!K || !!(h != null && h.showModified) && !!U).toString(),
+          children: [
+            /* @__PURE__ */ a(
+              R,
+              {
+                className: "humany-guide-link",
+                routeName: ke,
+                onClick: (Be) => {
+                  d(Be, g), Ie.dispatch("tracking:guide-list-item-clicked", {
+                    guide: g
+                  });
+                },
+                params: Se(g),
+                text: L,
+                children: /* @__PURE__ */ a(
+                  z,
+                  {
+                    size: i,
+                    symbol: {
+                      type: "Svg",
+                      content: t ? "caret-down" : "caret-right"
+                    }
+                  }
+                )
+              }
+            ),
+            m && /* @__PURE__ */ a(
+              it,
+              {
+                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__ */ a(lt, { tags: Ae }),
+            /* @__PURE__ */ a(
+              ft,
+              {
+                ...h,
+                indent: t ? void 0 : i,
+                modified: U,
+                published: K,
+                publishedBy: Me,
+                modifiedBy: Pe
+              }
+            )
+          ]
+        },
+        b
+      );
+    }, Fe = w(
+      (g, b, L) => S ? S(g, b, L, B) : B(g),
+      [S, B]
+    ), Ce = w(
+      (g) => {
+        l && (g.preventDefault(), u("page", G()));
+      },
+      [u, l]
+    );
+    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(
+      dt,
+      {
+        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 || De ? "true" : "false",
+        ...re(O),
+        ref: P,
+        children: [
+          f ? /* @__PURE__ */ a(
+            R,
+            {
+              text: f,
+              title: f,
+              "aria-label": f,
+              routeName: ze,
+              role: o,
+              params: G(),
+              onClick: Ce,
+              children: /* @__PURE__ */ a(
+                z,
+                {
+                  size: i,
+                  symbol: { type: "Svg", content: `caret-${s}` }
+                }
+              )
+            }
+          ) : null,
+          $,
+          !O["data-loading"] && x.length === 0 && /* @__PURE__ */ a("p", { children: xe })
+        ]
+      }
+    );
+  }
+), dt = c(C)`
+  ${D}
+  padding: ${(t) => {
+  var e;
+  return (e = t.theme.sizes) == null ? void 0 : e.large;
+}};
+  overflow: auto;
+  justify-content: flex-start;
+  white-space: nowrap;
+  font-weight: 300;
+  text-decoration: none;
+
+  > div {
+    ${(t) => Y(t)(
+  "> h1",
+  y`
+          white-space: pre-wrap;
+        `
+)}
+  }
+
+  > ul > li {
+    ${(t) => {
+  var e, n;
+  return t["grid-items"] === "true" && y`
+        display: grid;
+        grid-template-columns: auto 1fr 1fr;
+        gap: 0px 0px;
+        grid-template-areas: '. favorite tags';
+        align-items: center;
+
+        > button {
+          margin: 0 0 0 ${(e = t.theme.sizes) == null ? void 0 : e.small};
+
+          &[data-favorite='false'] {
+            ${t.isTabbing ? "opacity: 0;" : "display: none;"};
+            &:focus {
+              opacity: 1;
+            }
+          }
+        }
+
+        > span {
+          font-size: ${(n = t.theme.fonts) == null ? void 0 : n.small};
+        }
+
+        &:hover {
+          button[data-favorite='false'] {
+            display: flex;
+            justify-self: flex-start;
+          }
+        }
+
+        &[has-metadata='true'] {
+          grid-template-rows: 1fr 1fr;
+          grid-template-areas:
+            '. favorite tags'
+            'metadata metadata metadata';
+        }
+      `;
+}}
+    > a {
+      color: ${(t) => {
+  var e;
+  return (e = t.theme.colors) == null ? void 0 : e.primary;
+}};
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 100%;
+      display: inline-block;
+
+      svg {
+        margin: 0 calc(${(t) => {
+  var e;
+  return (e = t.theme.sizes) == null ? void 0 : e.small;
+}}*2) 0 0;
+        line {
+          stroke: ${(t) => {
+  var e;
+  return (e = t.theme.colors) == null ? void 0 : e.primary;
+}};
+        }
+      }
+
+      ${(t) => {
+  var e;
+  return t.expandable === "true" && y`
+          display: flex;
+          flex-direction: row-reverse;
+          justify-content: flex-end;
+          align-items: center;
+
+          span {
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+
+          svg {
+            margin: 0 0 0 ${(e = t.theme.sizes) == null ? void 0 : e.small};
+          }
+        `;
+}}
+
+      &:focus-visible {
+        ${W}
+        text-decoration: underline;
+      }
+
+      @media (hover: hover) {
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+
+  > a {
+    color: ${(t) => {
+  var e;
+  return (e = t.theme.colors) == null ? void 0 : e.text;
+}};
+    margin: ${(t) => {
+  var e;
+  return (e = t.theme.sizes) == null ? void 0 : e.normal;
+}} 0 0;
+    align-self: flex-start;
+    align-items: center;
+    display: flex;
+
+    span {
+      text-decoration: underline;
+    }
+
+    svg {
+      margin: 0 calc(${(t) => {
+  var e;
+  return (e = t.theme.sizes) == null ? void 0 : e.small;
+}}*2) 0 0;
+      line {
+        stroke: ${(t) => {
+  var e;
+  return (e = t.theme.colors) == null ? void 0 : e.text;
+}};
+      }
+    }
+
+    &:focus-visible {
+      ${W}
+      text-decoration: underline;
+    }
+  }
+`, mt = c(E)`
+  ${ie}
+  display: flex;
+  margin: 0 0 0 auto;
+  grid-area: tags;
+
+  li,
+  li:last-child {
+    margin: 0 0 0 ${(t) => {
+  var e;
+  return (e = t.theme.sizes) == null ? void 0 : e.small;
+}};
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+`, ht = c(z)`
+  display: block;
+  color: ${(t) => {
+  var e;
+  return (e = t.theme.colors) == null ? void 0 : e.primary;
+}};
+  ${(t) => {
+  if (t.symbol.type === "Uri")
+    return `
+        width: ${t.size}px;
+        height: ${t.size}px;
+      `;
+  if (t.symbol.type === "FontAwesome")
+    return `
+        font-size: ${t.size}px;
+      `;
+}}
+`, ft = c(rt)`
+  grid-area: metadata;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  font-size: ${(t) => {
+  var e;
+  return (e = t.theme.fonts) == null ? void 0 : e.small;
+}};
+  ${(t) => {
+  var e;
+  return typeof t.indent == "number" && `text-indent: calc(${(e = t.theme.sizes) == null ? void 0 : e.small} * 2 + ${t.indent}px);`;
+}}
+`, ut = he`
+  100% {
+    transform: rotate(360deg);
+  }
+`, gt = 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;
+  }
+`, pt = c.svg`
+  animation: ${ut} 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;
+`, yt = c.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"};
+  }
+`, $t = c.div`
+  position: relative;
+  margin: 0 auto;
+  width: 100px;
+  &:before {
+    content: '';
+    display: block;
+    padding-top: 100%;
+  }
+`, vt = c.circle`
+  stroke-dasharray: 1, 200;
+  stroke-dashoffset: 0;
+  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;
+`, 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",
+    r: "20",
+    fill: "none",
+    "stroke-width": "2",
+    "stroke-miterlimit": "10"
+  }
+) }) }) }), Kt = ({
+  className: t,
+  showHeader: e,
+  notificationList: n,
+  loading: i,
+  ...o
+}) => {
+  const [s, r] = N(null), {
+    id: m,
+    title: l,
+    symbol: d,
+    notifications: u = [],
+    defaultHeaderOptions: h = { visible: !0 }
+  } = n || {};
+  return !u.length && !i ? null : /* @__PURE__ */ a(
+    wt,
+    {
+      ...o,
+      "data-loading": i,
+      "data-show-header": typeof e == "boolean" ? e : h.visible,
+      className: k(t, "humany-notification-list"),
+      "data-notification-category": m,
+      header: l,
+      symbol: d,
+      items: u,
+      renderItem: ({ id: f, title: v, body: $, modified: x, expandable: S }) => /* @__PURE__ */ a(
+        kt,
+        {
+          "data-notification": f,
+          "data-expanded": S ? s === f : !0,
+          children: S ? /* @__PURE__ */ p(te, { children: [
+            /* @__PURE__ */ p(
+              bt,
+              {
+                title: v,
+                "aria-label": v,
+                "aria-expanded": s === f,
+                onClick: () => r(s === f ? null : f),
+                children: [
+                  /* @__PURE__ */ a("span", { children: v }),
+                  /* @__PURE__ */ a(
+                    zt,
+                    {
+                      size: 11,
+                      symbol: {
+                        type: "Svg",
+                        content: `caret-${s === f ? "up" : "down"}`
+                      }
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ a(ee, { html: $ }),
+            x && /* @__PURE__ */ a(
+              St,
+              {
+                format: de.YYYY_MM_DD,
+                timestamp: x
+              }
+            )
+          ] }) : /* @__PURE__ */ a(ee, { html: $ })
+        },
+        f
+      ),
+      children: /* @__PURE__ */ a(xt, { loading: i })
+    }
+  );
+}, bt = c(_)`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  text-align: left;
+  svg,
+  i {
+    color: ${(t) => {
+  var e;
+  return (e = t.theme.colors) == null ? void 0 : e.primary;
+}};
+  }
+  span {
+    color: ${(t) => {
+  var e;
+  return (e = t.theme.colors) == null ? void 0 : e.text;
+}};
+    font-size: ${(t) => {
+  var e;
+  return (e = t.theme.fonts) == null ? void 0 : e.normal;
+}};
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex: 1;
+    white-space: nowrap;
+  }
+  &:focus-visible {
+    ${W}
+    span {
+      color: ${(t) => {
+  var e;
+  return (e = t.theme.colors) == null ? void 0 : e.primary;
+}};
+      text-decoration: underline;
+    }
+  }
+`, wt = c(C)`
+  ${tt}
+  ${D}
+  overflow: hidden;
+  justify-content: flex-start;
+  padding: ${(t) => {
+  var e;
+  return (e = t.theme.sizes) == null ? void 0 : e.large;
+}};
+  ${(t) => !t["data-show-header"] && y`
+      > div {
+        ${Y(t)(
+  "h1",
+  y`
+            display: none;
+          `
+)}
+      }
+    `}
+
+  @media (hover: hover) {
+    button:hover {
+      text-decoration: underline;
+    }
+  }
+`, ee = c(_e)`
+  ${Oe}
+  font-weight: 300;
+
+  p {
+    white-space: normal;
+  }
+`, kt = c.li`
+  .humany-paragraph {
+    display: none;
+    &:not(:only-child) {
+      ${(t) => {
+  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: ${(i = t.theme.sizes) == null ? void 0 : i.normal} 0;
+        `;
+}}
+    }
+  }
+
+  ${(t) => t["data-expanded"] && y`
+      .humany-paragraph {
+        display: block;
+      }
+    `}
+
+  > span {
+    display: block;
+    font-weight: 300;
+    color: ${(t) => {
+  var e;
+  return (e = t.theme.colors) == null ? void 0 : e.accent;
+}};
+  }
+`, zt = c(z)`
+  margin: 0 0 0 ${(t) => {
+  var e;
+  return (e = t.theme.sizes) == null ? void 0 : e.small;
+}};
+  line {
+    stroke: ${(t) => {
+  var e;
+  return (e = t.theme.colors) == null ? void 0 : e.primary;
+}};
+  }
+`, St = c(ce)`
+  font-size: ${(t) => {
+  var e;
+  return (e = t.theme.fonts) == null ? void 0 : e.small;
+}};
+  font-weight: 300;
+`, Nt = (t) => new RegExp("^#", "i").test(t), Lt = (t) => ({ children: e, ...n }) => {
+  const {
+    implementation: i,
+    name: o
+  } = t.get("$widget"), { href: s = "" } = n;
+  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 (i.widgets.get(d) && !d.startsWith("blob?") && !d.startsWith(o))
+      return /* @__PURE__ */ a(Ke, { widgetName: d, children: e });
+  }
+  return /* @__PURE__ */ a("a", { ...n, children: e });
+}, Ut = (t, e = []) => ({
+  transform: {
+    a: (n) => {
+      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__ */ a(fe, { ...m, children: i });
+      }
+      return Lt(t)(n);
+    }
+  }
+});
+export {
+  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,
+  st as useFavorites,
+  _t as useHover
+};