@telia-ace/knowledge-widget-ui 1.0.49 → 1.1.1-rc.0

package/dist/index.js

@@ -1,1389 +0,0 @@
-var He = Object.defineProperty, je = Object.defineProperties;
-var Oe = Object.getOwnPropertyDescriptors;
-var R = Object.getOwnPropertySymbols;
-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 a of R(e))
-      se.call(e, a) && oe(t, a, e[a]);
-  return t;
-}, k = (t, e) => je(t, Oe(e));
-var w = (t, e) => {
-  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 o of R(t))
-      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 X, list as pe, invertedHoverButton as ye, Drawer as _e, ItemList as O, itemList as Y, Dropdown as $e, headingElement as Z, Text as ve, Button as ee, paddedBorderTabStyle as ie, Confirm as Ke, SymbolBadge as N, StyledText as U, 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 J, borderTabStyle as Q, Paragraph as Ue, genericHtml as Je, AnchorLink as Qe, WidgetLink as Xe } from "@telia-ace/widget-ui";
-export * from "@telia-ace/widget-ui";
-import n, { forwardRef as _, useCallback as z, useState as T, useEffect as K, useMemo as Ze, useRef as Ee, useImperativeHandle as et } from "react";
-import { createParams as j, formatUrl as ce, appendClassNames as S, htmlParentContains as tt } from "@telia-ace/widget-utilities";
-const at = ({
-  title: t = "",
-  className: e,
-  id: a,
-  parent: o,
-  connection: s,
-  type: i,
-  target: r,
-  href: c,
-  children: m,
-  connectionKey: f
-}) => {
-  const u = {}, { name: l, params: h } = ge();
-  switch (i) {
-    case "default":
-    case "guide":
-      const { id: E, title: g } = o;
-      let v = f || s;
-      E !== a && !f && (v = void 0), u.routeName = l, u.params = j(k(y({}, h), {
-        guide: a,
-        connection: v,
-        uriName: a === E ? ce(g) : ce(t)
-      }));
-      break;
-    case "link":
-      u.href = c, u.target = r;
-      break;
-  }
-  return /* @__PURE__ */ n.createElement(Ye, y({ className: S(e, "humany-dialog-link") }, u), m || /* @__PURE__ */ n.createElement(n.Fragment, null, i === "link" && /* @__PURE__ */ n.createElement(H, { faIcon: "link" }), /* @__PURE__ */ n.createElement("span", null, t)));
-}, ke = at, ta = _((s, o) => {
-  var i = s, { className: t, dialog: e } = i, a = w(i, ["className", "dialog"]);
-  return e.length ? /* @__PURE__ */ n.createElement(
-    nt,
-    k(y({
-      className: S(t, "humany-dialog"),
-      items: e,
-      renderItem: (r) => /* @__PURE__ */ n.createElement("li", { key: r.connection, "data-dialog": r.connection }, /* @__PURE__ */ n.createElement(ke, y({}, r)))
-    }, a), {
-      ref: o
-    })
-  ) : null;
-}), nt = d(X)`
-    ${pe}
-    a {
-        min-width: 150px;
-        max-width: 400px;
-        display: block;
-        white-space: normal;
-        ${(t) => {
-  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
-  });
-}}
-    }
-
-    i {
-        margin: 0 ${(t) => {
-  var e;
-  return (e = t.theme.sizes) == null ? void 0 : e.small;
-}} 0 0;
-    }
-`, ot = (u) => {
-  var l = u, {
-    trigger: t,
-    header: e,
-    className: a,
-    animation: o,
-    fullScreen: s,
-    onToggle: i,
-    children: r,
-    ref: c,
-    closeButtonAriaLabel: m
-  } = l, f = w(l, [
-    "trigger",
-    "header",
-    "className",
-    "animation",
-    "fullScreen",
-    "onToggle",
-    "children",
-    "ref",
-    "closeButtonAriaLabel"
-  ]);
-  return /* @__PURE__ */ n.createElement(
-    _e,
-    {
-      className: S(a, "humany-drawer-list"),
-      trigger: t,
-      header: e,
-      animation: o,
-      fullScreen: s,
-      onToggle: i,
-      closeButtonAriaLabel: m
-    },
-    /* @__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;
-}};
-    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;
-}};
-    }
-`, st = ({ items: t, renderItem: e, trigger: a, header: o, children: s }) => /* @__PURE__ */ n.createElement($e, { className: "humany-dropdown-actions", 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)), na = st, it = d.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;
-}};
-`, 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;
-  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;
-}};
-    }
-`, ct = d(X)`
-    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, a;
-  return `${(e = t.theme.sizes) == null ? void 0 : e.small} ${(a = t.theme.sizes) == null ? void 0 : a.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;
-}};
-            }
-        }
-    }
-`, mt = (i) => {
-  var r = i, {
-    trigger: t,
-    className: e,
-    children: a,
-    closeButtonAriaLabel: o
-  } = r, s = w(r, [
-    "trigger",
-    "className",
-    "children",
-    "closeButtonAriaLabel"
-  ]);
-  return /* @__PURE__ */ n.createElement(
-    $e,
-    {
-      className: S(e, "humany-dropdown-list"),
-      closeButtonAriaLabel: o,
-      trigger: t
-    },
-    /* @__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 {
-        ${(t) => {
-  var e;
-  return Z(t)(
-    "> h1",
-    $`
-                    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;
-                }
-            }
-        }
-    }
-`, ut = (t) => $`
-    ${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"};
-    }
-`, ra = d(H)`
-    && {
-        font-size: ${(t) => {
-  var e;
-  return (e = t.theme.fonts) == null ? void 0 : e.small;
-}};
-    }
-    width: 1.2em;
-`, sa = d(ve)`
-    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;
-}};
-`, ft = d(ee)`
-    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" && ie}
-
-        svg, i {
-            ${(t) => t["data-has-label"] === "false" && t["data-has-symbol"] === "true" && $`
-                    ${ie(t)}
-                    box-sizing: content-box;
-                `}
-        }
-    }
-
-    span {
-        flex: 1;
-        font-weight: 300;
-    }
-`, ht = ({
-  addFavoriteTooltip: t,
-  removeFavoriteCancelLabel: e,
-  removeFavoriteConfirmLabel: a,
-  removeFavoriteHeader: o,
-  removeFavoriteLabel: s,
-  removeFavoriteTooltip: i,
-  id: r,
-  isFavorite: c,
-  guideTitle: m,
-  buttonLabel: f = "",
-  actions: { addFavorite: u, removeFavorite: l }
-}) => {
-  const h = z(() => {
-    l(r);
-  }, [r, l]), E = z(() => {
-    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__ */ n.createElement(
-          N,
-          {
-            size: 16,
-            symbol: { type: "Svg", content: "star-empty" }
-          }
-        ),
-        f && /* @__PURE__ */ n.createElement(U, null, f)
-      ),
-      onConfirm: h,
-      cancelLabel: e,
-      confirmLabel: a,
-      header: o,
-      text: s
-    }
-  ) : /* @__PURE__ */ n.createElement(
-    me,
-    {
-      className: "humany-favorite-button",
-      title: g,
-      "aria-label": g,
-      onClick: E,
-      "data-favorite": "false",
-      "data-has-label": f ? "true" : "false",
-      "data-has-symbol": "true"
-    },
-    /* @__PURE__ */ n.createElement(N, { size: 16, symbol: { type: "Svg", content: "star-empty" } }),
-    f && /* @__PURE__ */ n.createElement(U, null, f)
-  ));
-}, gt = ht, me = d(ft)`
-    grid-area: favorite;
-
-    &:focus-visible {
-        svg {
-            ${(t) => {
-  var e, a;
-  return t["data-favorite"] === "true" ? `
-          fill: transparent;
-
-          path {
-            fill: transparent;
-          }
-        ` : `
-          fill: ${(e = t.theme.colors) == null ? void 0 : e.text};
-
-          path {
-            fill: ${(a = t.theme.colors) == null ? void 0 : a.text};
-          }
-        `;
-}}
-        }
-    }
-
-    ${(t) => {
-  var e, a, o, s, i, r, c;
-  return ((e = t.theme.colors) == null ? void 0 : e.text) && $`
-            svg {
-                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: ${(s = t.theme.colors) == null ? void 0 : s.text};
-
-        path {
-          fill: ${(i = t.theme.colors) == null ? void 0 : i.text};
-        }
-      `}
-            }
-
-            &:hover {
-                svg {
-                    ${t["data-favorite"] === "true" ? `
-          fill: transparent;
-
-          path {
-            fill: transparent;
-          }
-        ` : `
-          fill: ${(r = t.theme.colors) == null ? void 0 : r.text};
-
-          path {
-            fill: ${(c = t.theme.colors) == null ? void 0 : c.text};
-          }
-        `}
-                }
-            }
-        `;
-}}
-`, ia = _(
-  (f, m) => {
-    var u = f, {
-      onFeedback: t = () => {
-      },
-      direction: e = "horizontal",
-      className: a,
-      header: o,
-      positive: s,
-      negative: i,
-      selected: r
-    } = u, c = w(u, [
-      "onFeedback",
-      "direction",
-      "className",
-      "header",
-      "positive",
-      "negative",
-      "selected"
-    ]);
-    return /* @__PURE__ */ n.createElement(
-      yt,
-      k(y({
-        className: S(a, "humany-feedback"),
-        "data-direction": e
-      }, xe(c)), {
-        ref: m
-      }),
-      !!o && /* @__PURE__ */ n.createElement(pt, null, o),
-      /* @__PURE__ */ n.createElement(
-        de,
-        {
-          className: "humany-feedback-button",
-          disabled: !!r,
-          "data-selected": r === "positive",
-          "data-direction": e,
-          onClick: () => t("positive")
-        },
-        /* @__PURE__ */ n.createElement(H, { faIcon: "smile-o" }),
-        /* @__PURE__ */ n.createElement("span", null, s)
-      ),
-      /* @__PURE__ */ n.createElement(
-        de,
-        {
-          className: "humany-feedback-button",
-          disabled: !!r,
-          "data-selected": r === "negative",
-          "data-direction": e,
-          onClick: () => t("negative")
-        },
-        /* @__PURE__ */ n.createElement(H, { faIcon: "frown-o" }),
-        /* @__PURE__ */ n.createElement("span", null, i)
-      )
-    );
-  }
-), pt = d(U)`
-    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;
-`, de = d(ee)`
-    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, a;
-  return t["data-direction"] === "horizontal" && $`
-            width: 225px;
-            max-width: calc(50% - ${(e = t.theme.sizes) == null ? void 0 : e.large} - ${(a = t.theme.sizes) == null ? void 0 : a.small});
-        `;
-}}
-
-    ${(t) => t["data-direction"] === "vertical" && $`
-            min-width: 190px;
-        `}
-
-  ${(t) => {
-  var e, a;
-  return ((e = t.theme.colors) == null ? void 0 : e.primary) && ye({
-    active: t["data-selected"],
-    primaryColor: (a = t.theme.colors) == null ? void 0 : a.primary,
-    secondaryColor: "#FFFFFF",
-    theme: t.theme
-  });
-}}
-
-  i {
-        margin: 0 ${(t) => {
-  var e;
-  return (e = t.theme.sizes) == null ? void 0 : e.small;
-}} 0 0;
-    }
-`, yt = d.div`
-    ${(t) => {
-  var e;
-  return t["data-direction"] === "vertical" && $`
-            > button {
-                width: 100%;
-                &:not(:last-child) {
-                    margin-bottom: ${(e = t.theme.sizes) == null ? void 0 : e.normal};
-                }
-            }
-        `;
-}}
-`, $t = () => {
-  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 = z(() => setTimeout(() => {
-    o(t);
-  }, e), [e, o, t]);
-  return K(
-    () => {
-      const i = s();
-      return () => {
-        clearTimeout(i);
-      };
-    },
-    [s]
-  ), a;
-}, ca = vt, xt = () => {
-  const t = Ve(), [e, a] = T([]), o = t.get("favorites");
-  K(() => {
-    if (o) {
-      a(o.get());
-      const { events: m } = t.get("$widget");
-      return m.subscribe("widget:favorites-updated", (u, { updated: l }) => {
-        a([...l]);
-      });
-    }
-  }, []);
-  const s = (m) => o ? o.add(m) : Promise.resolve([]), i = (m) => o ? o.remove(m) : Promise.resolve([]), r = () => o ? o.clear() : Promise.resolve([]), c = z(
-    (m) => e.indexOf(m) > -1 ? i(m) : s(m),
-    [e]
-  );
-  return [
-    e,
-    Ze(
-      () => ({
-        addFavorite: s,
-        removeFavorite: i,
-        clearFavorites: r,
-        toggleFavorite: c
-      }),
-      [e]
-    )
-  ];
-}, bt = xt, ma = () => {
-  const [t, e] = T(!1), a = Ee(), o = z(() => e(!0), [e]), s = z(() => 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: a = "",
-  modifiedLabel: o = "",
-  publishedLabel: s = "",
-  modifiedBy: i = "",
-  publishedBy: r = "",
-  showModified: c = !1,
-  showPublished: m = !1,
-  modified: f,
-  published: u
-}) => {
-  const l = m && u ? /* @__PURE__ */ n.createElement(ue, { format: t, timestamp: u }) : null, h = c && f ? /* @__PURE__ */ n.createElement(ue, { format: t, timestamp: f }) : null;
-  return !l && !h ? null : /* @__PURE__ */ n.createElement(G, { className: S(e, "humany-metadata") }, l && /* @__PURE__ */ n.createElement(G, { className: "humany-published" }, s, l, a && r && ` ${a.replace("{{editor}}", r)}`), h && /* @__PURE__ */ n.createElement(G, { className: "humany-modified" }, 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;
-    }
-`, G = d(ve)`
-    font-style: italic;
-`, kt = ({ tags: t }) => t.filter((e) => e.symbol).length ? /* @__PURE__ */ n.createElement(
-  Nt,
-  {
-    className: "humany-guide-list-tags",
-    items: t,
-    renderItem: ({ id: e, symbol: a, title: o }) => a && /* @__PURE__ */ n.createElement("li", { key: e, "data-tag": e }, /* @__PURE__ */ n.createElement(Lt, { size: 18, symbol: a, title: 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__ */ n.createElement(
-    J,
-    {
-      title: t,
-      "aria-label": t,
-      routeName: a,
-      params: j(k(y({}, c), {
-        uriName: s || void 0,
-        id: void 0,
-        guide: void 0,
-        accordion: void 0
-      })),
-      text: t
-    },
-    /* @__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) => {
-  var e;
-  return (e = t.theme.sizes) == null ? void 0 : e.normal;
-}} 0;
-    }
-
-    > div {
-        grid-column: 1/-1;
-    }
-`, ua = _(
-  (Gt, Fe) => {
-    var te = Gt, {
-      expandable: t = !1,
-      routing: e = {},
-      paramMappers: a = {},
-      symbolSize: o = 11,
-      pageRole: s = "link",
-      pageCaret: i = "down",
-      showTags: r = !1,
-      showFavoriteToggle: c = !1,
-      localPaging: m = !1,
-      onItemClick: f = () => {
-      },
-      dispatch: u = () => {
-      },
-      metadata: l = {},
-      pageLabel: h,
-      className: E,
-      children: g,
-      items: v,
-      renderItem: L,
-      addFavoriteTooltip: C,
-      removeFavoriteCancelLabel: M,
-      removeFavoriteConfirmLabel: ze,
-      removeFavoriteHeader: Se,
-      removeFavoriteLabel: Ne,
-      removeFavoriteTooltip: Le
-    } = te, De = w(te, [
-      "expandable",
-      "routing",
-      "paramMappers",
-      "symbolSize",
-      "pageRole",
-      "pageCaret",
-      "showTags",
-      "showFavoriteToggle",
-      "localPaging",
-      "onItemClick",
-      "dispatch",
-      "metadata",
-      "pageLabel",
-      "className",
-      "children",
-      "items",
-      "renderItem",
-      "addFavoriteTooltip",
-      "removeFavoriteCancelLabel",
-      "removeFavoriteConfirmLabel",
-      "removeFavoriteHeader",
-      "removeFavoriteLabel",
-      "removeFavoriteTooltip"
-    ]);
-    const ae = qe(), F = Ee(), I = Ge(v), { 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 V = (p) => {
-      const { id: b, title: x, tags: D, published: P, modified: A, publishedBy: B, modifiedBy: q } = 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__ */ n.createElement(
-          J,
-          {
-            className: "humany-guide-link",
-            title: x,
-            "aria-label": x,
-            routeName: Ie,
-            onClick: (We) => f(We, p),
-            params: Te(p),
-            text: x
-          },
-          /* @__PURE__ */ n.createElement(
-            N,
-            {
-              size: o,
-              symbol: {
-                type: "Svg",
-                content: t ? "caret-down" : "caret-right"
-              }
-            }
-          )
-        ),
-        c && /* @__PURE__ */ n.createElement(
-          gt,
-          {
-            guideTitle: x,
-            addFavoriteTooltip: C,
-            removeFavoriteCancelLabel: M,
-            removeFavoriteConfirmLabel: ze,
-            removeFavoriteHeader: Se,
-            removeFavoriteLabel: Ne,
-            removeFavoriteTooltip: Le,
-            isFavorite: Ce.indexOf(b) > -1,
-            actions: Me,
-            id: b
-          }
-        ),
-        r && /* @__PURE__ */ n.createElement(kt, { tags: D }),
-        /* @__PURE__ */ n.createElement(
-          Dt,
-          k(y({}, l), {
-            indent: t ? void 0 : o,
-            modified: A,
-            published: P,
-            publishedBy: B,
-            modifiedBy: q
-          })
-        )
-      );
-    }, Pe = z(
-      (p, b, x) => L ? L(p, b, x, V) : V(p),
-      [L, V]
-    ), Be = z(
-      (p) => {
-        m && (p.preventDefault(), u("page", ne()));
-      },
-      [u, m]
-    );
-    K(() => {
-      if (I && I.length < v.length && F.current) {
-        const p = F.current.querySelectorAll(".humany-guide-list > ul > li"), b = p[I.length];
-        if (p.length === v.length && I.length) {
-          const x = p[I.length];
-          if (x) {
-            const D = x.querySelector(
-              ".humany-guide-link"
-            );
-            D && D.focus();
-          }
-        } else
-          b && new MutationObserver((D, P) => {
-            D.forEach((A) => {
-              if (A.addedNodes) {
-                const B = Array.from(
-                  A.addedNodes
-                ).find((q) => q.tagName === "A");
-                B && tt(F.current, document.activeElement) && (ae && B.focus(), P.disconnect());
-              }
-            });
-          }).observe(b, {
-            attributes: !1,
-            characterData: !1,
-            childList: !0,
-            subtree: !0,
-            attributeOldValue: !1,
-            characterDataOldValue: !1
-          });
-      }
-    });
-    const Re = !!Object.keys(l).filter(
-      (p) => typeof l[p] != "undefined"
-    ).length;
-    return /* @__PURE__ */ n.createElement(
-      St,
-      k(y({
-        className: S(E, "humany-guide-list"),
-        "data-item-count": v.length,
-        items: v,
-        renderItem: Pe,
-        isTabbing: ae,
-        expandable: t ? "true" : "false",
-        "grid-items": r || c || Re ? "true" : "false"
-      }, xe(De)), {
-        ref: F
-      }),
-      h ? /* @__PURE__ */ n.createElement(
-        J,
-        {
-          text: h,
-          title: h,
-          "aria-label": h,
-          routeName: Ae,
-          role: s,
-          params: ne(),
-          onClick: Be
-        },
-        /* @__PURE__ */ n.createElement(
-          N,
-          {
-            size: o,
-            symbol: { type: "Svg", content: `caret-${i}` }
-          }
-        )
-      ) : null,
-      g
-    );
-  }
-), St = d(O)`
-    ${Y}
-    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) => Z(t)(
-  "> h1",
-  $`
-                    white-space: pre-wrap;
-                `
-)}
-    }
-
-    > ul > li {
-        ${(t) => {
-  var e, a;
-  return t["grid-items"] === "true" && $`
-                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: ${(a = t.theme.fonts) == null ? void 0 : a.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" && $`
-                    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 {
-                ${Q}
-                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 {
-            ${Q}
-            text-decoration: underline;
-        }
-    }
-`, Nt = d(X)`
-    ${pe}
-    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;
-    }
-`, Lt = d(N)`
-    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;
-      `;
-}}
-`, Dt = d(Et)`
-    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);`;
-}}
-`, 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: a,
-    loading: o
-  } = r, s = w(r, [
-    "className",
-    "showHeader",
-    "notificationList",
-    "loading"
-  ]);
-  const [c, m] = T(null), {
-    id: f,
-    title: u,
-    symbol: l,
-    notifications: h = [],
-    defaultHeaderOptions: E = { visible: !0 }
-  } = a || {};
-  return !h.length && !o ? null : /* @__PURE__ */ n.createElement(
-    Ht,
-    k(y({}, s), {
-      "data-loading": o,
-      "data-show-header": typeof e == "boolean" ? e : E.visible,
-      className: S(t, "humany-notification-list"),
-      "data-notification-category": f,
-      header: u,
-      symbol: l,
-      items: h,
-      renderItem: ({ id: g, title: v, body: L, modified: C, expandable: M }) => /* @__PURE__ */ n.createElement(
-        jt,
-        {
-          key: g,
-          "data-notification": g,
-          "data-expanded": M ? c === g : !0
-        },
-        M ? /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(
-          Wt,
-          {
-            title: v,
-            "aria-label": v,
-            "aria-expanded": c === g,
-            onClick: () => m(c === g ? null : g)
-          },
-          /* @__PURE__ */ n.createElement("span", null, v),
-          /* @__PURE__ */ n.createElement(
-            Ot,
-            {
-              size: 11,
-              symbol: {
-                type: "Svg",
-                content: `caret-${c === g ? "up" : "down"}`
-              }
-            }
-          )
-        ), /* @__PURE__ */ n.createElement(fe, { html: L }), C && /* @__PURE__ */ n.createElement(
-          Yt,
-          {
-            format: be.YYYY_MM_DD,
-            timestamp: C
-          }
-        )) : /* @__PURE__ */ n.createElement(fe, { html: L })
-      )
-    }),
-    /* @__PURE__ */ n.createElement(Bt, { loading: o })
-  );
-}, Wt = d(ee)`
-    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 {
-        ${Q}
-        span {
-            color: ${(t) => {
-  var e;
-  return (e = t.theme.colors) == null ? void 0 : e.primary;
-}};
-            text-decoration: underline;
-        }
-    }
-`, Ht = d(O)`
-    ${ut}
-    ${Y}
-  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"] && $`
-            > div {
-                ${Z(t)(
-  "h1",
-  $`
-                        display: none;
-                    `
-)}
-            }
-        `}
-
-    @media (hover: hover) {
-        button:hover {
-            text-decoration: underline;
-        }
-    }
-`, fe = d(Ue)`
-    ${Je}
-    font-weight: 300;
-
-    p {
-        white-space: normal;
-    }
-`, jt = d.li`
-    .humany-paragraph {
-        display: none;
-        &:not(:only-child) {
-            ${(t) => {
-  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"] && $`
-            .humany-paragraph {
-                display: block;
-            }
-        `}
-
-    > span {
-        display: block;
-        font-weight: 300;
-        color: ${(t) => {
-  var e;
-  return (e = t.theme.colors) == null ? void 0 : e.accent;
-}};
-    }
-`, Ot = d(N)`
-    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;
-}};
-    }
-`, Yt = d(we)`
-    font-size: ${(t) => {
-  var e;
-  return (e = t.theme.fonts) == null ? void 0 : e.small;
-}};
-    font-weight: 300;
-`, fa = Rt, _t = (t) => new RegExp("^#", "i").test(t), Kt = (t) => (o) => {
-  var s = o, { children: e } = s, a = w(s, ["children"]);
-  const {
-    implementation: i,
-    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("|"), 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__ */ n.createElement("a", y({}, a), e);
-}, Vt = Kt, qt = (t, e = []) => ({
-  transform: {
-    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__ */ n.createElement(ke, y({}, m), o);
-      }
-      return Vt(t)(a);
-    }
-  }
-}), ha = qt;
-export {
-  da as AccordionListItem,
-  ke as DialogLink,
-  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