@telia-ace/knowledge-widget-components-guide 1.0.21 → 1.0.23

package/dist/{guide.858ab7a6.js → guide.19e7d4a1.js}

@@ -1,61 +1,61 @@
-var ce = Object.defineProperty, me = Object.defineProperties;
-var de = Object.getOwnPropertyDescriptors;
+var be = Object.defineProperty, fe = Object.defineProperties;
+var ye = Object.getOwnPropertyDescriptors;
 var W = Object.getOwnPropertySymbols;
-var X = Object.prototype.hasOwnProperty, Y = Object.prototype.propertyIsEnumerable;
-var U = (t, e, a) => e in t ? ce(t, e, { enumerable: !0, configurable: !0, writable: !0, value: a }) : t[e] = a, B = (t, e) => {
+var ee = Object.prototype.hasOwnProperty, te = Object.prototype.propertyIsEnumerable;
+var _ = (t, e, a) => e in t ? be(t, e, { enumerable: !0, configurable: !0, writable: !0, value: a }) : t[e] = a, S = (t, e) => {
   for (var a in e || (e = {}))
-    X.call(e, a) && U(t, a, e[a]);
+    ee.call(e, a) && _(t, a, e[a]);
   if (W)
     for (var a of W(e))
-      Y.call(e, a) && U(t, a, e[a]);
+      te.call(e, a) && _(t, a, e[a]);
   return t;
-}, D = (t, e) => me(t, de(e));
-var H = (t, e) => {
+}, D = (t, e) => fe(t, ye(e));
+var F = (t, e) => {
   var a = {};
   for (var o in t)
-    X.call(t, o) && e.indexOf(o) < 0 && (a[o] = t[o]);
+    ee.call(t, o) && e.indexOf(o) < 0 && (a[o] = t[o]);
   if (t != null && W)
     for (var o of W(t))
-      e.indexOf(o) < 0 && Y.call(t, o) && (a[o] = t[o]);
+      e.indexOf(o) < 0 && te.call(t, o) && (a[o] = t[o]);
   return a;
 };
-import { ContactList as ee, contactLink as ue } from "@telia-ace/knowledge-widget-adapters";
-import { NotFound as he, Component as ge } from "@telia-ace/knowledge-widget-types-grid";
-import { List as be, TextLink as te, paddedBorderTabStyle as ae, useRouteData as G, Feedback as fe, StyledHeaderText as ye, useDispatch as ne, useProperties as q, Text as J, SymbolBadge as F, useContainer as oe, Tooltip as pe, StyledListButton as T, DropdownList as le, useFavorites as $e, StyledText as Z, FavoriteButton as Ee, DrawerList as re, DrawerAnimationType as se, useChildren as ke, createEmptyComponent as we, guideRenderInstructions as xe, Loader as ze, loadingOpacity as Se, Paragraph as Le, genericHtml as Be, headingElement as Ne, DialogList as Ce, contentBox as De, Metadata as ve, Button as Re, linkTabStyle as Te } from "@telia-ace/knowledge-widget-ui";
-import { appendClassNames as P, buildCategoryTrail as Fe, createParams as Oe } from "@telia-ace/widget-utilities";
-import n, { useMemo as K, useState as Ie, useEffect as We, useCallback as V, forwardRef as He } from "react";
-import r, { css as O } from "styled-components";
+import { ContactList as oe, contactLink as pe } from "@telia-ace/knowledge-widget-adapters";
+import { NotFound as $e, Component as Ee } from "@telia-ace/knowledge-widget-types-grid";
+import { List as ke, TextLink as le, paddedBorderTabStyle as re, useRouteData as G, Feedback as we, StyledHeaderText as xe, useDispatch as se, useProperties as q, Text as J, SymbolBadge as T, useContainer as ie, Tooltip as ze, StyledListButton as O, DropdownList as ce, useFavorites as Le, StyledText as ae, FavoriteButton as Se, DrawerList as me, DrawerAnimationType as de, useChildren as Be, Lightbox as Ne, DialogLink as Ce, embeddedLinkMapper as ve, createEmptyComponent as De, Loader as Re, loadingOpacity as Fe, Paragraph as Oe, genericHtml as Te, headingElement as Ie, DialogList as We, contentBox as He, Metadata as Me, Button as Pe, linkTabStyle as je } from "@telia-ace/knowledge-widget-ui";
+import { appendClassNames as H, buildCategoryTrail as Ae, createParams as Ve } from "@telia-ace/widget-utilities";
+import n, { useMemo as M, useState as Ge, useEffect as qe, useCallback as V, forwardRef as Je } from "react";
+import r, { css as K } from "styled-components";
 import { PickerTypes as p } from "@telia-ace/knowledge-widget-core";
-const Pe = ({
+const Ke = ({
   className: t,
   defaultAnswerVersionLabel: e,
   guide: { perspective: a, perspectives: o },
-  availablePerspectives: d = []
+  availablePerspectives: u = []
 }) => {
-  const { name: i, params: l } = G(), h = K(() => !o || !d.length ? [] : d.filter(({ name: c }) => !!o[c]).map(({ name: c, title: u }) => ({ label: u, connection: o[c] })), [o, d]);
-  return /* @__PURE__ */ n.createElement(Me, {
-    className: P(t, "humany-guide-answer-version-picker"),
+  const { name: c, params: l } = G(), h = M(() => !o || !u.length ? [] : u.filter(({ name: m }) => !!o[m]).map(({ name: m, title: d }) => ({ label: d, connection: o[m] })), [o, u]);
+  return /* @__PURE__ */ n.createElement(Qe, {
+    className: H(t, "humany-guide-answer-version-picker"),
     items: h,
-    renderItem: (c) => {
-      const u = c.label === "Default" ? e : c.label, g = a === c.connection, b = g && (!l.connection || a === l.connection);
+    renderItem: (m) => {
+      const d = m.label === "Default" ? e : m.label, g = a === m.connection, b = g && (!l.connection || a === l.connection);
       return /* @__PURE__ */ n.createElement("li", {
-        key: c.connection,
-        "data-version": c.connection
-      }, /* @__PURE__ */ n.createElement(je, {
-        key: c.connection,
+        key: m.connection,
+        "data-version": m.connection
+      }, /* @__PURE__ */ n.createElement(Ue, {
+        key: m.connection,
         forwardedAs: b ? "span" : void 0,
-        text: u,
-        routeName: i,
+        text: d,
+        routeName: c,
         selected: g,
-        "aria-label": u,
-        title: u,
-        params: D(B({}, l), {
-          connection: c.connection
+        "aria-label": d,
+        title: d,
+        params: D(S({}, l), {
+          connection: m.connection
         })
       }));
     }
   });
-}, Me = r(be)`
+}, Qe = r(ke)`
     display: flex;
     align-items: center;
     flex-wrap: wrap;
@@ -74,7 +74,7 @@ const Pe = ({
     li > span {
         cursor: default;
     }
-`, je = r(te)`
+`, Ue = r(le)`
     font-weight: 300;
     color: ${(t) => {
   var e;
@@ -82,26 +82,23 @@ const Pe = ({
 }};
     text-decoration: none;
 
-    ${(t) => t.selected && O`
+    ${(t) => t.selected && K`
             font-weight: bold;
             text-decoration: underline;
         `}
 
-    &:focus {
-        ${(t) => {
-  var e;
-  return ((e = t.theme.accessibility) == null ? void 0 : e.isTabbing) && ae;
-}};
+    &:focus-visible {
+        ${re};
     }
-`, Ae = r(ee)`
+`, Xe = r(oe)`
     border-top: ${(t) => t.theme.border};
     ${(t) => t.backButtonShown === "true" && `border-bottom: ${t.theme.border};`}
-`, Ve = r(fe)`
+`, Ye = r(we)`
     ${(t) => {
   var e, a;
   return `padding: ${(e = t.theme.sizes) == null ? void 0 : e.large} ${(a = t.theme.sizes) == null ? void 0 : a.large};`;
 }}
-`, Ge = r(ye)`
+`, Ze = r(xe)`
     ${(t) => {
   var e, a;
   return `padding: ${(e = t.theme.sizes) == null ? void 0 : e.large} ${(a = t.theme.sizes) == null ? void 0 : a.large};`;
@@ -113,15 +110,15 @@ const Pe = ({
   return (e = t.theme.fonts) == null ? void 0 : e.normal;
 }};
     font-weight: bold;
-`, qe = ({ backButtonShown: t = !1, accordion: e = !1 }) => {
-  const a = ne(), {
+`, _e = ({ backButtonShown: t = !1, accordion: e = !1 }) => {
+  const a = se(), {
     loading: o = !1,
-    dialog: d = [],
-    guide: i,
+    dialog: u = [],
+    guide: c,
     handoverContactMethods: l = [],
     contactHeader: h,
-    showFeedback: c,
-    feedbackDirection: u = "horizontal",
+    showFeedback: m,
+    feedbackDirection: d = "horizontal",
     feedbackRecognitionLabel: g,
     feedbackGiven: b,
     feedbackHeader: $,
@@ -129,59 +126,63 @@ const Pe = ({
     negativeFeedbackLabel: f,
     contactFeedbackLabel: s
   } = q();
-  return !c || !i || !i.allowFeedback || o && !b || d.length ? null : b && g && !l.length ? /* @__PURE__ */ n.createElement(Ge, {
+  return !m || !c || !c.allowFeedback || o && !b || u.length ? null : b && g && !l.length ? /* @__PURE__ */ n.createElement(Ze, {
     accordion: e ? "true" : "false"
-  }, g) : i.hasHandover && l.length ? /* @__PURE__ */ n.createElement(Ae, {
+  }, g) : c.hasHandover && l.length ? /* @__PURE__ */ n.createElement(Xe, {
     backButtonShown: t ? "true" : "false",
     accordion: e ? "true" : "false",
     header: h,
     contactMethods: l,
     dispatch: a
-  }) : /* @__PURE__ */ n.createElement(Ve, {
+  }) : /* @__PURE__ */ n.createElement(Ye, {
     accordion: e ? "true" : "false",
     positive: E,
-    negative: i.hasHandover ? s : f,
+    negative: c.hasHandover ? s : f,
     header: $,
     selected: b,
     onFeedback: (k) => a("feedback", k),
-    direction: u
+    direction: d
   });
-}, Je = ({
+}, et = ({
   guide: { categories: t = [] },
   toolbar: { picker: e = p.NONE }
 }) => {
-  const [a, o] = Ie([]), d = oe();
-  return We(() => {
-    Fe("index", t.map((i) => i.toString()), d).then((i) => {
-      o(i);
+  const [a, o] = Ge([]), u = ie();
+  return qe(() => {
+    Ae(
+      "index",
+      t.map((c) => c.toString()),
+      u
+    ).then((c) => {
+      o(c);
     });
-  }, [t]), a.length ? /* @__PURE__ */ n.createElement(pe, {
+  }, [t]), a.length ? /* @__PURE__ */ n.createElement(ze, {
     className: "humany-guide-category-tooltip",
     sticky: e === p.DRAWER,
-    content: /* @__PURE__ */ n.createElement(n.Fragment, null, a.map((i) => /* @__PURE__ */ n.createElement(Ke, {
+    content: /* @__PURE__ */ n.createElement(n.Fragment, null, a.map((c) => /* @__PURE__ */ n.createElement(tt, {
       className: "humany-guide-category-trail",
-      key: i.map((l) => l.id).join(".")
-    }, i.map((l, h) => /* @__PURE__ */ n.createElement(J, {
+      key: c.map((l) => l.id).join(".")
+    }, c.map((l, h) => /* @__PURE__ */ n.createElement(J, {
       className: "humany-guide-category-trail-segment",
       key: l.id
-    }, l.symbol && h === 0 && /* @__PURE__ */ n.createElement(F, {
+    }, l.symbol && h === 0 && /* @__PURE__ */ n.createElement(T, {
       size: 14,
       symbol: l.symbol
-    }), l.title, h !== i.length - 1 && /* @__PURE__ */ n.createElement(Qe, {
+    }), l.title, h !== c.length - 1 && /* @__PURE__ */ n.createElement(at, {
       className: "humany-category-separator"
     }, "/"))))))
-  }, e === p.DRAWER ? /* @__PURE__ */ n.createElement(T, {
+  }, e === p.DRAWER ? /* @__PURE__ */ n.createElement(O, {
     className: "humany-guide-category-tooltip-button",
     "data-has-label": "false",
     "data-has-symbol": "true"
-  }, /* @__PURE__ */ n.createElement(_, {
+  }, /* @__PURE__ */ n.createElement(ne, {
     size: 19,
     symbol: { type: "Svg", content: "information" }
-  })) : /* @__PURE__ */ n.createElement(_, {
+  })) : /* @__PURE__ */ n.createElement(ne, {
     size: 19,
     symbol: { type: "Svg", content: "information" }
   })) : null;
-}, Ke = r.div`
+}, tt = r.div`
     i,
     svg {
         margin: 0 ${(t) => {
@@ -196,24 +197,24 @@ const Pe = ({
   return (e = t.theme.sizes) == null ? void 0 : e.small;
 }};
     }
-`, Qe = r(J)`
+`, at = r(J)`
     margin: 0 ${(t) => {
   var e;
   return (e = t.theme.sizes) == null ? void 0 : e.small;
 }};
-`, _ = r(F)`
+`, ne = r(T)`
     display: block;
-`, Ue = ({
+`, nt = ({
   header: t,
   tooltip: e,
   printActionLabel: a,
   copyActionLabel: o,
-  addFavoriteTooltip: d,
-  removeFavoriteCancelLabel: i,
+  addFavoriteTooltip: u,
+  removeFavoriteCancelLabel: c,
   removeFavoriteConfirmLabel: l,
   removeFavoriteHeader: h,
-  removeFavoriteLabel: c,
-  removeFavoriteTooltip: u,
+  removeFavoriteLabel: m,
+  removeFavoriteTooltip: d,
   toolbarFunctionsCloseButtonAriaLabel: g,
   allowCopy: b = !1,
   allowPrint: $ = !1,
@@ -222,74 +223,77 @@ const Pe = ({
   guide: s,
   dispatch: k
 }) => {
-  const [S, N] = $e(), m = V((y) => {
-    s && k("copy", s);
-  }, [s, k]), w = V(() => {
+  const [B, C] = Le(), i = V(
+    (y) => {
+      s && k("copy", s);
+    },
+    [s, k]
+  ), z = V(() => {
     s && k("print");
-  }, [s, k]), x = K(() => {
-    const { id: y, title: v } = s, C = [];
-    if (b && C.push({
+  }, [s, k]), L = M(() => {
+    const { id: y, title: R } = s, v = [];
+    if (b && v.push({
       type: "copy",
-      child: /* @__PURE__ */ n.createElement(T, {
+      child: /* @__PURE__ */ n.createElement(O, {
         "data-has-label": o ? "true" : "false",
         "data-has-symbol": "true",
         title: o,
         "aria-label": a,
-        onClick: m
+        onClick: i
       }, /* @__PURE__ */ n.createElement(A, {
         size: 16,
         symbol: { type: "Svg", content: "copy" }
-      }), o && /* @__PURE__ */ n.createElement(Z, null, o))
-    }), $ && C.push({
+      }), o && /* @__PURE__ */ n.createElement(ae, null, o))
+    }), $ && v.push({
       type: "print",
-      child: /* @__PURE__ */ n.createElement(T, {
+      child: /* @__PURE__ */ n.createElement(O, {
         "data-has-label": a ? "true" : "false",
         "data-has-symbol": "true",
         title: a,
         "aria-label": a,
-        onClick: w
+        onClick: z
       }, /* @__PURE__ */ n.createElement(A, {
         size: 16,
         symbol: { type: "Svg", content: "print" }
-      }), a && /* @__PURE__ */ n.createElement(Z, null, a))
+      }), a && /* @__PURE__ */ n.createElement(ae, null, a))
     }), E) {
-      const R = S.indexOf(y) > -1;
-      C.push({
+      const I = B.indexOf(y) > -1;
+      v.push({
         type: "favorite",
-        child: /* @__PURE__ */ n.createElement(Ee, {
+        child: /* @__PURE__ */ n.createElement(Se, {
           id: y,
-          guideTitle: v,
-          isFavorite: R,
-          buttonLabel: R ? u : d,
-          addFavoriteTooltip: d,
-          removeFavoriteCancelLabel: i,
+          guideTitle: R,
+          isFavorite: I,
+          buttonLabel: I ? d : u,
+          addFavoriteTooltip: u,
+          removeFavoriteCancelLabel: c,
           removeFavoriteConfirmLabel: l,
           removeFavoriteHeader: h,
-          removeFavoriteLabel: c,
-          removeFavoriteTooltip: u,
-          actions: N
+          removeFavoriteLabel: m,
+          removeFavoriteTooltip: d,
+          actions: C
         })
       });
     }
-    return C;
+    return v;
   }, [
-    S,
+    B,
     s,
     b,
     $,
     E,
     a,
     o,
-    d,
-    i,
+    u,
+    c,
     l,
     h,
-    c,
-    u
+    m,
+    d
   ]);
-  if (!x.length)
+  if (!L.length)
     return null;
-  const z = /* @__PURE__ */ n.createElement(Ye, {
+  const w = /* @__PURE__ */ n.createElement(lt, {
     tabIndex: 0,
     title: e,
     "data-has-symbol": "true",
@@ -297,27 +301,27 @@ const Pe = ({
   }, /* @__PURE__ */ n.createElement(A, {
     symbol: { type: "Svg", content: "options" },
     size: 18
-  })), L = ({ type: y, child: v }) => /* @__PURE__ */ n.createElement("li", {
+  })), N = ({ type: y, child: R }) => /* @__PURE__ */ n.createElement("li", {
     key: y,
     "data-function-type": y
-  }, v);
-  return f === p.DROPDOWN ? /* @__PURE__ */ n.createElement(Xe, {
+  }, R);
+  return f === p.DROPDOWN ? /* @__PURE__ */ n.createElement(ot, {
     className: "humany-guide-functions-dropdown-list",
     header: t,
-    items: x,
-    trigger: z,
-    renderItem: L,
+    items: L,
+    trigger: w,
+    renderItem: N,
     closeButtonAriaLabel: g
-  }) : f === p.DRAWER ? /* @__PURE__ */ n.createElement(re, {
+  }) : f === p.DRAWER ? /* @__PURE__ */ n.createElement(me, {
     className: "humany-guide-functions-drawer-list",
-    animation: { type: se.SlideInBottom },
+    animation: { type: de.SlideInBottom },
     header: t,
-    items: x,
-    trigger: z,
-    renderItem: L,
+    items: L,
+    trigger: w,
+    renderItem: N,
     closeButtonAriaLabel: g
   }) : null;
-}, A = r(F)`
+}, A = r(T)`
     circle {
         fill: ${(t) => {
   var e;
@@ -333,81 +337,81 @@ const Pe = ({
   return (e = t.theme.colors) == null ? void 0 : e.text;
 }};
     }
-`, Xe = r(le)`
+`, ot = r(ce)`
     display: block;
     min-height: auto;
-`, Ye = r(T)`
+`, lt = r(O)`
     padding: calc(${(t) => {
   var e;
   return (e = t.theme.sizes) == null ? void 0 : e.small;
 }} * 2) 0;
-`, Ze = (t, e) => {
+`, rt = (t, e) => {
   var a;
   return ((a = e.find((o) => o.id === t.id)) == null ? void 0 : a.label) || "";
-}, _e = (i) => {
-  var l = i, {
+}, st = (c) => {
+  var l = c, {
     header: t,
     tooltip: e,
     picker: a = p.NONE,
     guide: o
-  } = l, d = H(l, [
+  } = l, u = F(l, [
     "header",
     "tooltip",
     "picker",
     "guide"
   ]);
-  const { name: h, params: c } = G(), u = K(() => Object.keys(o.translations || {}).reduce((E, f) => {
+  const { name: h, params: m } = G(), d = M(() => Object.keys(o.translations || {}).reduce((E, f) => {
     const s = {};
-    return s.key = f, s.id = (o.translations || {})[f], s.label = d[`${f}LanguageLabel`], (s.id || s.label) && E.push(s), E;
-  }, []), [o, d]);
-  if (!u.length)
+    return s.key = f, s.id = (o.translations || {})[f], s.label = u[`${f}LanguageLabel`], (s.id || s.label) && E.push(s), E;
+  }, []), [o, u]);
+  if (!d.length)
     return null;
-  const g = Ze(o, u), b = /* @__PURE__ */ n.createElement(et, {
+  const g = rt(o, d), b = /* @__PURE__ */ n.createElement(it, {
     tabIndex: 0,
     title: e,
     "data-has-symbol": "true",
     "data-has-label": a === p.DROPDOWN && g ? "true" : "false"
-  }, a === p.DROPDOWN && /* @__PURE__ */ n.createElement(n.Fragment, null, g && /* @__PURE__ */ n.createElement(at, null, g), /* @__PURE__ */ n.createElement(nt, {
+  }, a === p.DROPDOWN && /* @__PURE__ */ n.createElement(n.Fragment, null, g && /* @__PURE__ */ n.createElement(mt, null, g), /* @__PURE__ */ n.createElement(dt, {
     symbol: { type: "Svg", content: "caret-down" },
     size: 11
-  })), a === p.DRAWER && /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(tt, {
+  })), a === p.DRAWER && /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(ct, {
     symbol: { type: "Svg", content: "language" },
     size: 20
   }))), $ = ({ label: E, key: f, id: s }) => /* @__PURE__ */ n.createElement("li", {
     key: f,
     "data-language": f
-  }, /* @__PURE__ */ n.createElement(lt, {
+  }, /* @__PURE__ */ n.createElement(ht, {
     tabIndex: 0,
     text: E,
     routeName: h,
     selected: o.id === s,
-    params: Oe(D(B({}, c), {
+    params: Ve(D(S({}, m), {
       connection: void 0,
       guide: s
     }))
   }));
-  return a === p.DROPDOWN ? /* @__PURE__ */ n.createElement(ot, {
+  return a === p.DROPDOWN ? /* @__PURE__ */ n.createElement(ut, {
     className: "humany-guide-languages-dropdown-list",
     header: t,
-    items: u,
+    items: d,
     trigger: b,
     renderItem: $
-  }) : a === p.DRAWER ? /* @__PURE__ */ n.createElement(re, {
+  }) : a === p.DRAWER ? /* @__PURE__ */ n.createElement(me, {
     className: "humany-guide-languages-drawer-list",
-    animation: { type: se.SlideInBottom },
+    animation: { type: de.SlideInBottom },
     header: t,
-    items: u,
+    items: d,
     trigger: b,
     renderItem: $
   }) : null;
-}, et = r(T)`
+}, it = r(O)`
     &&& {
         margin: 0 ${(t) => {
   var e;
   return `calc(${(e = t.theme.sizes) == null ? void 0 : e.small} * 2)`;
 }} 0 0;
     }
-`, tt = r(F)`
+`, ct = r(T)`
     circle {
         fill: ${(t) => {
   var e;
@@ -423,7 +427,7 @@ const Pe = ({
   return (e = t.theme.colors) == null ? void 0 : e.text;
 }};
     }
-`, at = r(J)`
+`, mt = r(J)`
     margin: 0 ${(t) => {
   var e;
   return (e = t.theme.sizes) == null ? void 0 : e.small;
@@ -432,7 +436,7 @@ const Pe = ({
   var e;
   return (e = t.theme.fonts) == null ? void 0 : e.normal;
 }};
-`, nt = r(F)`
+`, dt = r(T)`
     align-self: flex-end;
     stroke-width: 2px;
     stroke-linecap: round;
@@ -447,45 +451,41 @@ const Pe = ({
   return (e = t.theme.colors) == null ? void 0 : e.text;
 }};
     }
-`, ot = r(le)`
+`, ut = r(ce)`
     display: block;
     min-height: auto;
-`, lt = r(te)`
+`, ht = r(le)`
     color: ${(t) => {
   var e, a;
   return t.selected ? (e = t.theme.colors) == null ? void 0 : e.primary : (a = t.theme.colors) == null ? void 0 : a.text;
 }};
     ${(t) => t.selected && "font-weight: bold;"}
 
-    &:focus {
-        ${(t) => {
-  var e;
-  return (e = t.theme.accessibility) != null && e.isTabbing ? O`
-                      ${ae}
-                      text-decoration: underline;
-                  ` : "outline: none;";
-}}
+    outline: none;
+    &:focus-visible {
+        ${re}
+        text-decoration: underline;
     }
-`, rt = (t) => {
+`, gt = (t) => {
   const {
     allowCopy: e = !1,
     allowPrint: a = !1,
     guideCategories: o = !1,
-    language: d = !1,
-    showFavoriteToggle: i = !1,
+    language: u = !1,
+    showFavoriteToggle: c = !1,
     picker: l = p.NONE
   } = t;
-  return !e && !a && !d && !i && !o || l === p.NONE;
-}, st = ({ className: t = "", dispatch: e }) => {
+  return !e && !a && !u && !c && !o || l === p.NONE;
+}, bt = ({ className: t = "", dispatch: e }) => {
   const y = q(), {
     toolbarLanguageHeader: a,
     toolbarFunctionsHeader: o,
-    toolbarLanguageTooltip: d,
-    toolbarFunctionsTooltip: i,
+    toolbarLanguageTooltip: u,
+    toolbarFunctionsTooltip: c,
     toolbarFunctionsCloseButtonAriaLabel: l,
     printActionLabel: h,
-    copyActionLabel: c,
-    addFavoriteTooltip: u,
+    copyActionLabel: m,
+    addFavoriteTooltip: d,
     removeFavoriteCancelLabel: g,
     removeFavoriteConfirmLabel: b,
     removeFavoriteHeader: $,
@@ -493,7 +493,7 @@ const Pe = ({
     removeFavoriteTooltip: f,
     guide: s,
     toolbar: k
-  } = y, S = H(y, [
+  } = y, B = F(y, [
     "toolbarLanguageHeader",
     "toolbarFunctionsHeader",
     "toolbarLanguageTooltip",
@@ -510,39 +510,39 @@ const Pe = ({
     "guide",
     "toolbar"
   ]);
-  if (!s || !k || rt(k))
+  if (!s || !k || gt(k))
     return null;
-  const { language: N, guideCategories: m, allowCopy: w, allowPrint: x, showFavoriteToggle: z, picker: L } = k;
-  return /* @__PURE__ */ n.createElement(it, {
-    className: P("humany-guide-toolbar", t)
-  }, N && Object.keys(s.translations || {}).length > 1 && /* @__PURE__ */ n.createElement(_e, B({
+  const { language: C, guideCategories: i, allowCopy: z, allowPrint: L, showFavoriteToggle: w, picker: N } = k;
+  return /* @__PURE__ */ n.createElement(ft, {
+    className: H("humany-guide-toolbar", t)
+  }, C && Object.keys(s.translations || {}).length > 1 && /* @__PURE__ */ n.createElement(st, S({
     guide: s,
     header: a,
-    tooltip: d,
-    picker: L
-  }, S)), m && /* @__PURE__ */ n.createElement(Je, {
+    tooltip: u,
+    picker: N
+  }, B)), i && /* @__PURE__ */ n.createElement(et, {
     guide: s,
     toolbar: k
-  }), (w || x || z) && /* @__PURE__ */ n.createElement(Ue, {
+  }), (z || L || w) && /* @__PURE__ */ n.createElement(nt, {
     guide: s,
     header: o,
-    tooltip: i,
+    tooltip: c,
     printActionLabel: h,
-    copyActionLabel: c,
-    addFavoriteTooltip: u,
+    copyActionLabel: m,
+    addFavoriteTooltip: d,
     removeFavoriteCancelLabel: g,
     removeFavoriteConfirmLabel: b,
     removeFavoriteHeader: $,
     removeFavoriteLabel: E,
     removeFavoriteTooltip: f,
     toolbarFunctionsCloseButtonAriaLabel: l,
-    allowCopy: w,
-    allowPrint: x,
-    showFavoriteToggle: z,
-    picker: L,
+    allowCopy: z,
+    allowPrint: L,
+    showFavoriteToggle: w,
+    picker: N,
     dispatch: e
   }));
-}, it = r.div`
+}, ft = r.div`
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -554,132 +554,155 @@ const Pe = ({
   return (e = t.theme.sizes) == null ? void 0 : e.small;
 }} * 2) 0 0;
     }
-`, Bt = He((d, o) => {
-  var i = d, { className: t, accordion: e = !1 } = i, a = H(i, ["className", "accordion"]);
-  const {
-    loading: l = !1,
-    dialog: h = [],
-    contactMethods: c = [],
-    showHeader: u = !0,
-    showAnswerVersions: g = !1,
-    defaultAnswerVersionLabel: b = "Default",
-    backButtonLabel: $,
-    metadataByLabel: E,
-    metadataModifiedLabel: f,
-    metadataPublishedLabel: s,
-    availablePerspectives: k,
-    metadata: S,
-    toolbar: N,
-    guide: m,
-    error: w
-  } = q(), {
-    params: { connection: x }
-  } = G(), z = oe(), L = ke(), y = ne(), v = V(() => {
-    y("back");
-  }, [y]);
-  if (!m && !w && !l)
-    return we(z, D(B({}, a), {
-      className: P(t, "humany-guide")
+`, Wt = Je(
+  (u, o) => {
+    var c = u, { className: t, accordion: e = !1 } = c, a = F(c, ["className", "accordion"]);
+    const {
+      loading: l = !1,
+      dialog: h = [],
+      contactMethods: m = [],
+      showHeader: d = !0,
+      showAnswerVersions: g = !1,
+      defaultAnswerVersionLabel: b = "Default",
+      backButtonLabel: $,
+      metadataByLabel: E,
+      metadataModifiedLabel: f,
+      metadataPublishedLabel: s,
+      availablePerspectives: k,
+      metadata: B,
+      toolbar: C,
+      guide: i,
+      error: z
+    } = q(), {
+      params: { connection: L }
+    } = G(), w = ie(), N = Be(), y = se(), R = M(() => ({
+      transform: {
+        img: (x) => /* @__PURE__ */ n.createElement(Ne, {
+          attrs: x,
+          htmlBody: (i == null ? void 0 : i.body) || ""
+        }),
+        a: (x) => {
+          const Y = x, { children: he } = Y, X = F(Y, ["children"])["data-target"];
+          if (X && h.length) {
+            const Z = h.find(
+              ({ connection: ge }) => ge === X
+            );
+            if (Z)
+              return /* @__PURE__ */ n.createElement(Ce, S({}, Z), he);
+          }
+          return ve(w)(x);
+        }
+      }
+    }), [i, w, h]), v = V(() => {
+      y("back");
+    }, [y]);
+    if (!i && !z && !l)
+      return De(w, D(S({}, a), {
+        className: H(t, "humany-guide")
+      }));
+    const { id: I = "", title: Q = "", body: P = "", translations: U = {} } = i || {};
+    if (z && z.status === 404)
+      return /* @__PURE__ */ n.createElement($e, {
+        showSearch: !1
+      });
+    const j = !!e && !!L, ue = Object.keys(U).find((x) => U[x] === `${I}`);
+    return /* @__PURE__ */ n.createElement(yt, D(S({
+      ref: o
+    }, a), {
+      "data-loading": l,
+      className: H(t, "humany-guide")
+    }), /* @__PURE__ */ n.createElement(wt, {
+      "data-loading": l,
+      accordion: e ? "true" : "false",
+      className: "humany-guide-content"
+    }, (g && i || !!C) && /* @__PURE__ */ n.createElement(kt, {
+      className: "humany-guide-top"
+    }, g && i && /* @__PURE__ */ n.createElement(Ke, {
+      defaultAnswerVersionLabel: b,
+      availablePerspectives: k,
+      guide: i
+    }), !!C && /* @__PURE__ */ n.createElement(bt, {
+      dispatch: y
+    })), !!(Q || P) && /* @__PURE__ */ n.createElement(pt, {
+      className: "humany-guide-body",
+      accordion: e ? "true" : "false",
+      header: d && Q || void 0,
+      html: P,
+      htmlParseInstruction: R,
+      lang: ue
+    }), h && P.indexOf("h-option-link") === -1 && /* @__PURE__ */ n.createElement(Et, {
+      dialog: h
+    }), /* @__PURE__ */ n.createElement($t, {
+      backButtonShown: j ? "true" : "false",
+      contactMethods: m,
+      dispatch: y,
+      guideId: i && i.id
+    }), !m.length && /* @__PURE__ */ n.createElement(_e, {
+      backButtonShown: j,
+      accordion: e
+    }), j && /* @__PURE__ */ n.createElement(Lt, {
+      "aria-label": $,
+      onClick: v
+    }, /* @__PURE__ */ n.createElement(St, {
+      width: "7",
+      height: "13",
+      viewBox: "0 0 7 13",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, /* @__PURE__ */ n.createElement("line", {
+      x1: "6.64645",
+      y1: "12.5513",
+      x2: "0.648357",
+      y2: "6.55319"
+    }), /* @__PURE__ */ n.createElement("line", {
+      x1: "0.646447",
+      y1: "6.64455",
+      x2: "6.64454",
+      y2: "0.646465"
+    })), $ && /* @__PURE__ */ n.createElement("span", null, $)), B && /* @__PURE__ */ n.createElement(xt, D(S({}, B), {
+      modified: i == null ? void 0 : i.modified,
+      published: i == null ? void 0 : i.published,
+      modifiedBy: i == null ? void 0 : i.modifiedBy,
+      publishedBy: i == null ? void 0 : i.publishedBy,
+      byLabel: E,
+      modifiedLabel: f,
+      publishedLabel: s
+    })), N.map((x) => /* @__PURE__ */ n.createElement(zt, {
+      key: x.id,
+      id: x.id,
+      branch: "default",
+      embedded: !0
+    }))), /* @__PURE__ */ n.createElement(Re, {
+      loading: l
     }));
-  const { id: C = "", title: R = "", body: M = "", translations: Q = {} } = m || {};
-  if (w && w.status === 404)
-    return /* @__PURE__ */ n.createElement(he, {
-      showSearch: !1
-    });
-  const j = !!e && !!x, ie = Object.keys(Q).find((I) => Q[I] === `${C}`);
-  return /* @__PURE__ */ n.createElement(ct, D(B({
-    ref: o
-  }, a), {
-    "data-loading": l,
-    className: P(t, "humany-guide")
-  }), /* @__PURE__ */ n.createElement(gt, {
-    "data-loading": l,
-    accordion: e ? "true" : "false",
-    className: "humany-guide-content"
-  }, (g && m || !!N) && /* @__PURE__ */ n.createElement(ht, {
-    className: "humany-guide-top"
-  }, g && m && /* @__PURE__ */ n.createElement(Pe, {
-    defaultAnswerVersionLabel: b,
-    availablePerspectives: k,
-    guide: m
-  }), !!N && /* @__PURE__ */ n.createElement(st, {
-    dispatch: y
-  })), !!(R || M) && /* @__PURE__ */ n.createElement(mt, {
-    className: "humany-guide-body",
-    accordion: e ? "true" : "false",
-    header: u && R || void 0,
-    html: M,
-    htmlParseInstruction: xe(z, h),
-    lang: ie
-  }), h && M.indexOf("h-option-link") === -1 && /* @__PURE__ */ n.createElement(ut, {
-    dialog: h
-  }), /* @__PURE__ */ n.createElement(dt, {
-    backButtonShown: j ? "true" : "false",
-    contactMethods: c,
-    dispatch: y,
-    guideId: m && m.id
-  }), !c.length && /* @__PURE__ */ n.createElement(qe, {
-    backButtonShown: j,
-    accordion: e
-  }), j && /* @__PURE__ */ n.createElement(yt, {
-    "aria-label": $,
-    onClick: v
-  }, /* @__PURE__ */ n.createElement(pt, {
-    width: "7",
-    height: "13",
-    viewBox: "0 0 7 13",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /* @__PURE__ */ n.createElement("line", {
-    x1: "6.64645",
-    y1: "12.5513",
-    x2: "0.648357",
-    y2: "6.55319"
-  }), /* @__PURE__ */ n.createElement("line", {
-    x1: "0.646447",
-    y1: "6.64455",
-    x2: "6.64454",
-    y2: "0.646465"
-  })), $ && /* @__PURE__ */ n.createElement("span", null, $)), S && /* @__PURE__ */ n.createElement(bt, D(B({}, S), {
-    modified: m == null ? void 0 : m.modified,
-    published: m == null ? void 0 : m.published,
-    modifiedBy: m == null ? void 0 : m.modifiedBy,
-    publishedBy: m == null ? void 0 : m.publishedBy,
-    byLabel: E,
-    modifiedLabel: f,
-    publishedLabel: s
-  })), L.map((I) => /* @__PURE__ */ n.createElement(ft, {
-    key: I.id,
-    id: I.id,
-    branch: "default",
-    embedded: !0
-  }))), /* @__PURE__ */ n.createElement(ze, {
-    loading: l
-  }));
-}), ct = r.div`
-    ${Se}
+  }
+), yt = r.div`
+    ${Fe}
     min-width: 0;
-`, mt = r(Le)`
-    ${Be}
+`, pt = r(Oe)`
+    ${Te}
     ${(t) => {
   var e;
   return `padding: ${(e = t.theme.sizes) == null ? void 0 : e.large};`;
 }}
   display: block;
     line-height: 1.6em;
-    ${Ne("h1", O`
+    ${Ie(
+  "h1",
+  K`
             font-size: ${(t) => {
-  var e;
-  return (e = t.theme.fonts) == null ? void 0 : e.large;
-}};
+    var e;
+    return (e = t.theme.fonts) == null ? void 0 : e.large;
+  }};
             font-weight: normal;
             line-height: 1.6em;
             line-height: 1.6em;
             margin: 0 0 ${(t) => {
-  var e;
-  return (e = t.theme.sizes) == null ? void 0 : e.small;
-}};
-        `)}
+    var e;
+    return (e = t.theme.sizes) == null ? void 0 : e.small;
+  }};
+        `
+)}
 
     p {
         font-weight: 300;
@@ -695,16 +718,16 @@ const Pe = ({
             display: inline;
         }
     }
-`, dt = r(ee)`
+`, $t = r(oe)`
     border-top: ${(t) => t.theme.border};
     ${(t) => t.backButtonShown === "true" && `border-bottom: ${t.theme.border};`}
-`, ut = r(Ce)`
+`, Et = r(We)`
     ${(t) => {
   var e, a;
   return `padding: 0 ${(e = t.theme.sizes) == null ? void 0 : e.large} ${(a = t.theme.sizes) == null ? void 0 : a.large};`;
 }}
     display: block;
-`, ht = r.div`
+`, kt = r.div`
     ${(t) => {
   var e, a;
   return `padding: calc(${(e = t.theme.sizes) == null ? void 0 : e.normal}*2) ${(a = t.theme.sizes) == null ? void 0 : a.large};`;
@@ -715,19 +738,19 @@ const Pe = ({
     border-bottom: ${(t) => t.theme.border};
     border-radius: ${(t) => `${t.theme.borderRadius} ${t.theme.borderRadius}`} 0 0;
     background-color: #ffffff;
-`, gt = r.div`
-    ${De}
+`, wt = r.div`
+    ${He}
     display: block;
     > a {
-        ${ue}
+        ${pe}
     }
 
-    ${(t) => t.accordion === "true" && O`
+    ${(t) => t.accordion === "true" && K`
             white-space: normal;
             box-shadow: none;
             background-color: #fafafa;
         `}
-`, bt = r(ve)`
+`, xt = r(Me)`
     display: block;
     ${(t) => {
   var e, a;
@@ -743,9 +766,9 @@ const Pe = ({
   return (e = t.theme.colors) == null ? void 0 : e.text;
 }};
     border-top: ${(t) => t.theme.border};
-`, ft = r(ge)`
+`, zt = r(Ee)`
     border-top: ${(t) => t.theme.border};
-`, yt = r(Re)`
+`, Lt = r(Pe)`
     ${(t) => {
   var e, a;
   return `padding: ${(e = t.theme.sizes) == null ? void 0 : e.normal} calc(${(a = t.theme.sizes) == null ? void 0 : a.normal} * 2);`;
@@ -762,19 +785,14 @@ const Pe = ({
     span {
         font-weight: 300;
     }
-    &:focus {
-        ${(t) => {
-  var e;
-  return ((e = t.theme.accessibility) == null ? void 0 : e.isTabbing) && O`
-                ${Te}
-                padding: ${(a) => {
-    var o, d;
-    return `calc(${(o = a.theme.sizes) == null ? void 0 : o.small} / 2) ${(d = a.theme.sizes) == null ? void 0 : d.small}`;
-  }};
-            `;
+    &:focus-visible {
+        ${je}
+        padding: ${(t) => {
+  var e, a;
+  return `calc(${(e = t.theme.sizes) == null ? void 0 : e.small} / 2) ${(a = t.theme.sizes) == null ? void 0 : a.small}`;
 }};
     }
-`, pt = r.svg`
+`, St = r.svg`
     margin-right: ${(t) => {
   var e;
   return (e = t.theme.sizes) == null ? void 0 : e.small;
@@ -787,6 +805,6 @@ const Pe = ({
     }
 `;
 export {
-  Bt as default
+  Wt as default
 };
-//# sourceMappingURL=guide.858ab7a6.js.map
+//# sourceMappingURL=guide.19e7d4a1.js.map