@telia-ace/knowledge-widget-components-guide 1.1.1-rc.2 → 1.1.1-rc.3

package/guide-38b65368.mjs

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