@telia-ace/knowledge-widget-components-guide 1.0.16 → 1.0.17

package/dist/guide.js

@@ -1,917 +0,0 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-import { ContactList, contactLink } from "@telia-ace/knowledge-widget-adapters";
-import { NotFound, Component } from "@telia-ace/knowledge-widget-types-grid";
-import { List, TextLink, paddedBorderTabStyle, useRouteData, Feedback as Feedback$1, StyledHeaderText, useDispatch, useProperties, Text, SymbolBadge, useContainer, Tooltip, StyledListButton, DropdownList, useFavorites, StyledText, FavoriteButton, DrawerList, DrawerAnimationType, useChildren, createEmptyComponent, guideRenderInstructions, Loader, loadingOpacity, Paragraph, genericHtml, headingElement, DialogList, contentBox, Metadata, Button, linkTabStyle } from "@telia-ace/knowledge-widget-ui";
-import { appendClassNames, buildCategoryTrail, createParams } from "@telia-ace/widget-utilities";
-import React, { useMemo, useState, useEffect, useCallback, forwardRef } from "react";
-import styled, { css } from "styled-components";
-import { PickerTypes } from "@telia-ace/knowledge-widget-core";
-const AnswerVersionPicker = ({
-  className,
-  defaultAnswerVersionLabel,
-  guide: { perspective: selectedPerspective, perspectives: guidePerspectives },
-  availablePerspectives = []
-}) => {
-  const { name, params } = useRouteData();
-  const perspectives = useMemo(() => {
-    if (!guidePerspectives || !availablePerspectives.length) {
-      return [];
-    }
-    return availablePerspectives.filter(({ name: name2 }) => !!guidePerspectives[name2]).map(({ name: name2, title }) => {
-      return { label: title, connection: guidePerspectives[name2] };
-    });
-  }, [guidePerspectives, availablePerspectives]);
-  return /* @__PURE__ */ React.createElement(StyledList, {
-    className: appendClassNames(className, "humany-guide-answer-version-picker"),
-    items: perspectives,
-    renderItem: (perspective) => {
-      const label = perspective.label === "Default" ? defaultAnswerVersionLabel : perspective.label;
-      const selected = selectedPerspective === perspective.connection;
-      const isRoot = selected && (!params.connection || selectedPerspective === params.connection);
-      return /* @__PURE__ */ React.createElement("li", {
-        key: perspective.connection,
-        "data-version": perspective.connection
-      }, /* @__PURE__ */ React.createElement(VersionLink, {
-        key: perspective.connection,
-        forwardedAs: isRoot ? "span" : void 0,
-        text: label,
-        routeName: name,
-        selected,
-        "aria-label": label,
-        title: label,
-        params: __spreadProps(__spreadValues({}, params), {
-          connection: perspective.connection
-        })
-      }));
-    }
-  });
-};
-const StyledList = styled(List)`
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-
-    list-style: none;
-    padding: 0;
-    margin: 0;
-
-    li:not(:last-child) {
-        margin: 0 calc(${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.small;
-}} * 2) 0 0;
-    }
-
-    li > span {
-        cursor: default;
-    }
-`;
-const VersionLink = styled(TextLink)`
-    font-weight: 300;
-    color: ${(p) => {
-  var _a;
-  return (_a = p.theme.colors) == null ? void 0 : _a.text;
-}};
-    text-decoration: none;
-
-    ${(p) => p.selected && css`
-            font-weight: bold;
-            text-decoration: underline;
-        `}
-
-    &:focus {
-        ${(p) => {
-  var _a;
-  return ((_a = p.theme.accessibility) == null ? void 0 : _a.isTabbing) && paddedBorderTabStyle;
-}};
-    }
-`;
-const StyledContactList$1 = styled(ContactList)`
-    border-top: ${(p) => p.theme.border};
-    ${(p) => p.backButtonShown === "true" && `border-bottom: ${p.theme.border};`}
-`;
-const StyledFeedback = styled(Feedback$1)`
-    ${(p) => {
-  var _a, _b;
-  return `padding: ${(_a = p.theme.sizes) == null ? void 0 : _a.large} ${(_b = p.theme.sizes) == null ? void 0 : _b.large};`;
-}}
-`;
-const Recognition = styled(StyledHeaderText)`
-    ${(p) => {
-  var _a, _b;
-  return `padding: ${(_a = p.theme.sizes) == null ? void 0 : _a.large} ${(_b = p.theme.sizes) == null ? void 0 : _b.large};`;
-}}
-
-    display: block;
-    font-size: ${(p) => {
-  var _a;
-  return (_a = p.theme.fonts) == null ? void 0 : _a.normal;
-}};
-    font-weight: bold;
-`;
-const Feedback = ({ backButtonShown = false, accordion = false }) => {
-  const dispatch = useDispatch();
-  const {
-    loading = false,
-    dialog = [],
-    guide,
-    handoverContactMethods = [],
-    contactHeader,
-    showFeedback,
-    feedbackDirection = "horizontal",
-    feedbackRecognitionLabel,
-    feedbackGiven,
-    feedbackHeader,
-    positiveFeedbackLabel,
-    negativeFeedbackLabel,
-    contactFeedbackLabel
-  } = useProperties();
-  if (!showFeedback || !guide || !guide.allowFeedback || loading && !feedbackGiven || dialog.length) {
-    return null;
-  }
-  if (feedbackGiven && feedbackRecognitionLabel && !handoverContactMethods.length) {
-    return /* @__PURE__ */ React.createElement(Recognition, {
-      accordion: accordion ? "true" : "false"
-    }, feedbackRecognitionLabel);
-  }
-  return guide.hasHandover && handoverContactMethods.length ? /* @__PURE__ */ React.createElement(StyledContactList$1, {
-    backButtonShown: backButtonShown ? "true" : "false",
-    accordion: accordion ? "true" : "false",
-    header: contactHeader,
-    contactMethods: handoverContactMethods,
-    dispatch
-  }) : /* @__PURE__ */ React.createElement(StyledFeedback, {
-    accordion: accordion ? "true" : "false",
-    positive: positiveFeedbackLabel,
-    negative: guide.hasHandover ? contactFeedbackLabel : negativeFeedbackLabel,
-    header: feedbackHeader,
-    selected: feedbackGiven,
-    onFeedback: (feedback) => dispatch("feedback", feedback),
-    direction: feedbackDirection
-  });
-};
-const Categories = ({
-  guide: { categories = [] },
-  toolbar: { picker = PickerTypes.NONE }
-}) => {
-  const [trail, setTrail] = useState([]);
-  const container = useContainer();
-  useEffect(() => {
-    buildCategoryTrail("index", categories.map((id) => id.toString()), container).then((result) => {
-      setTrail(result);
-    });
-  }, [categories]);
-  if (!trail.length) {
-    return null;
-  }
-  return /* @__PURE__ */ React.createElement(Tooltip, {
-    className: "humany-guide-category-tooltip",
-    sticky: picker === PickerTypes.DRAWER,
-    content: /* @__PURE__ */ React.createElement(React.Fragment, null, trail.map((segments) => {
-      return /* @__PURE__ */ React.createElement(CategoryTrail, {
-        className: "humany-guide-category-trail",
-        key: segments.map((c) => c.id).join(".")
-      }, segments.map((category, index) => {
-        return /* @__PURE__ */ React.createElement(Text, {
-          className: "humany-guide-category-trail-segment",
-          key: category.id
-        }, category.symbol && index === 0 && /* @__PURE__ */ React.createElement(SymbolBadge, {
-          size: 14,
-          symbol: category.symbol
-        }), category.title, index !== segments.length - 1 && /* @__PURE__ */ React.createElement(CategorySeparator, {
-          className: "humany-category-separator"
-        }, "/"));
-      }));
-    }))
-  }, picker === PickerTypes.DRAWER ? /* @__PURE__ */ React.createElement(StyledListButton, {
-    className: "humany-guide-category-tooltip-button",
-    "data-has-label": "false",
-    "data-has-symbol": "true"
-  }, /* @__PURE__ */ React.createElement(CategoriesSymbolBadge, {
-    size: 19,
-    symbol: { type: "Svg", content: "information" }
-  })) : /* @__PURE__ */ React.createElement(CategoriesSymbolBadge, {
-    size: 19,
-    symbol: { type: "Svg", content: "information" }
-  }));
-};
-const CategoryTrail = styled.div`
-    i,
-    svg {
-        margin: 0 ${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.small;
-}} 0 0;
-    }
-
-    &:not(:last-child) {
-        margin: 0 0 ${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.small;
-}};
-    }
-`;
-const CategorySeparator = styled(Text)`
-    margin: 0 ${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.small;
-}};
-`;
-const CategoriesSymbolBadge = styled(SymbolBadge)`
-    display: block;
-`;
-const Functions = ({
-  header,
-  tooltip,
-  printActionLabel,
-  copyActionLabel,
-  addFavoriteTooltip,
-  removeFavoriteCancelLabel,
-  removeFavoriteConfirmLabel,
-  removeFavoriteHeader,
-  removeFavoriteLabel,
-  removeFavoriteTooltip,
-  toolbarFunctionsCloseButtonAriaLabel,
-  allowCopy = false,
-  allowPrint = false,
-  showFavoriteToggle = false,
-  picker = PickerTypes.NONE,
-  guide,
-  dispatch
-}) => {
-  const [favorites, actions] = useFavorites();
-  const handleCopy = useCallback((event) => {
-    if (guide) {
-      dispatch("copy", guide);
-    }
-  }, [guide, dispatch]);
-  const handlePrint = useCallback(() => {
-    if (guide) {
-      dispatch("print");
-    }
-  }, [guide, dispatch]);
-  const items = useMemo(() => {
-    const { id, title } = guide;
-    const items2 = [];
-    if (allowCopy) {
-      items2.push({
-        type: "copy",
-        child: /* @__PURE__ */ React.createElement(StyledListButton, {
-          "data-has-label": copyActionLabel ? "true" : "false",
-          "data-has-symbol": "true",
-          title: copyActionLabel,
-          "aria-label": printActionLabel,
-          onClick: handleCopy
-        }, /* @__PURE__ */ React.createElement(ColoredSymbolBadge$1, {
-          size: 16,
-          symbol: { type: "Svg", content: "copy" }
-        }), copyActionLabel && /* @__PURE__ */ React.createElement(StyledText, null, copyActionLabel))
-      });
-    }
-    if (allowPrint) {
-      items2.push({
-        type: "print",
-        child: /* @__PURE__ */ React.createElement(StyledListButton, {
-          "data-has-label": printActionLabel ? "true" : "false",
-          "data-has-symbol": "true",
-          title: printActionLabel,
-          "aria-label": printActionLabel,
-          onClick: handlePrint
-        }, /* @__PURE__ */ React.createElement(ColoredSymbolBadge$1, {
-          size: 16,
-          symbol: { type: "Svg", content: "print" }
-        }), printActionLabel && /* @__PURE__ */ React.createElement(StyledText, null, printActionLabel))
-      });
-    }
-    if (showFavoriteToggle) {
-      const isFavorite = favorites.indexOf(id) > -1;
-      items2.push({
-        type: "favorite",
-        child: /* @__PURE__ */ React.createElement(FavoriteButton, {
-          id,
-          guideTitle: title,
-          isFavorite,
-          buttonLabel: isFavorite ? removeFavoriteTooltip : addFavoriteTooltip,
-          addFavoriteTooltip,
-          removeFavoriteCancelLabel,
-          removeFavoriteConfirmLabel,
-          removeFavoriteHeader,
-          removeFavoriteLabel,
-          removeFavoriteTooltip,
-          actions
-        })
-      });
-    }
-    return items2;
-  }, [
-    favorites,
-    guide,
-    allowCopy,
-    allowPrint,
-    showFavoriteToggle,
-    printActionLabel,
-    copyActionLabel,
-    addFavoriteTooltip,
-    removeFavoriteCancelLabel,
-    removeFavoriteConfirmLabel,
-    removeFavoriteHeader,
-    removeFavoriteLabel,
-    removeFavoriteTooltip
-  ]);
-  if (!items.length) {
-    return null;
-  }
-  const trigger = /* @__PURE__ */ React.createElement(StyledTriggerButton, {
-    tabIndex: 0,
-    title: tooltip,
-    "data-has-symbol": "true",
-    "data-has-label": "false"
-  }, /* @__PURE__ */ React.createElement(ColoredSymbolBadge$1, {
-    symbol: { type: "Svg", content: "options" },
-    size: 18
-  }));
-  const renderListItem = ({ type, child }) => {
-    return /* @__PURE__ */ React.createElement("li", {
-      key: type,
-      "data-function-type": type
-    }, child);
-  };
-  if (picker === PickerTypes.DROPDOWN) {
-    return /* @__PURE__ */ React.createElement(StyledDropdownList$1, {
-      className: "humany-guide-functions-dropdown-list",
-      header,
-      items,
-      trigger,
-      renderItem: renderListItem,
-      closeButtonAriaLabel: toolbarFunctionsCloseButtonAriaLabel
-    });
-  }
-  if (picker === PickerTypes.DRAWER) {
-    return /* @__PURE__ */ React.createElement(DrawerList, {
-      className: "humany-guide-functions-drawer-list",
-      animation: { type: DrawerAnimationType.SlideInBottom },
-      header,
-      items,
-      trigger,
-      renderItem: renderListItem,
-      closeButtonAriaLabel: toolbarFunctionsCloseButtonAriaLabel
-    });
-  }
-  return null;
-};
-const ColoredSymbolBadge$1 = styled(SymbolBadge)`
-    circle {
-        fill: ${(p) => {
-  var _a;
-  return (_a = p.theme.colors) == null ? void 0 : _a.text;
-}};
-    }
-
-    line,
-    path,
-    rect {
-        stroke: ${(p) => {
-  var _a;
-  return (_a = p.theme.colors) == null ? void 0 : _a.text;
-}};
-    }
-`;
-const StyledDropdownList$1 = styled(DropdownList)`
-    display: block;
-    min-height: auto;
-`;
-const StyledTriggerButton = styled(StyledListButton)`
-    padding: calc(${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.small;
-}} * 2) 0;
-`;
-const getCurrentLanguageLabel = (guide, languages) => {
-  var _a;
-  return ((_a = languages.find((l) => l.id === guide.id)) == null ? void 0 : _a.label) || "";
-};
-const Languages = (_a) => {
-  var _b = _a, {
-    header,
-    tooltip,
-    picker = PickerTypes.NONE,
-    guide
-  } = _b, other = __objRest(_b, [
-    "header",
-    "tooltip",
-    "picker",
-    "guide"
-  ]);
-  const { name, params } = useRouteData();
-  const items = useMemo(() => {
-    return Object.keys(guide.translations || {}).reduce((acc, key) => {
-      const item = {};
-      item.key = key;
-      item.id = (guide.translations || {})[key];
-      item.label = other[`${key}LanguageLabel`];
-      if (item.id || item.label) {
-        acc.push(item);
-      }
-      return acc;
-    }, []);
-  }, [guide, other]);
-  if (!items.length) {
-    return null;
-  }
-  const currentLanguage = getCurrentLanguageLabel(guide, items);
-  const trigger = /* @__PURE__ */ React.createElement(Trigger, {
-    tabIndex: 0,
-    title: tooltip,
-    "data-has-symbol": "true",
-    "data-has-label": picker === PickerTypes.DROPDOWN && currentLanguage ? "true" : "false"
-  }, picker === PickerTypes.DROPDOWN && /* @__PURE__ */ React.createElement(React.Fragment, null, currentLanguage && /* @__PURE__ */ React.createElement(LanguageButtonText, null, currentLanguage), /* @__PURE__ */ React.createElement(LanguageCaretSymbolBadge, {
-    symbol: { type: "Svg", content: "caret-down" },
-    size: 11
-  })), picker === PickerTypes.DRAWER && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ColoredSymbolBadge, {
-    symbol: { type: "Svg", content: "language" },
-    size: 20
-  })));
-  const renderListItem = ({ label, key, id }) => {
-    return /* @__PURE__ */ React.createElement("li", {
-      key,
-      "data-language": key
-    }, /* @__PURE__ */ React.createElement(LanguageLink, {
-      tabIndex: 0,
-      text: label,
-      routeName: name,
-      selected: guide.id === id,
-      params: createParams(__spreadProps(__spreadValues({}, params), {
-        connection: void 0,
-        guide: id
-      }))
-    }));
-  };
-  if (picker === PickerTypes.DROPDOWN) {
-    return /* @__PURE__ */ React.createElement(StyledDropdownList, {
-      className: "humany-guide-languages-dropdown-list",
-      header,
-      items,
-      trigger,
-      renderItem: renderListItem
-    });
-  }
-  if (picker === PickerTypes.DRAWER) {
-    return /* @__PURE__ */ React.createElement(DrawerList, {
-      className: "humany-guide-languages-drawer-list",
-      animation: { type: DrawerAnimationType.SlideInBottom },
-      header,
-      items,
-      trigger,
-      renderItem: renderListItem
-    });
-  }
-  return null;
-};
-const Trigger = styled(StyledListButton)`
-    &&& {
-        margin: 0 ${(p) => {
-  var _a;
-  return `calc(${(_a = p.theme.sizes) == null ? void 0 : _a.small} * 2)`;
-}} 0 0;
-    }
-`;
-const ColoredSymbolBadge = styled(SymbolBadge)`
-    circle {
-        fill: ${(p) => {
-  var _a;
-  return (_a = p.theme.colors) == null ? void 0 : _a.text;
-}};
-    }
-
-    line,
-    path,
-    rect {
-        stroke: ${(p) => {
-  var _a;
-  return (_a = p.theme.colors) == null ? void 0 : _a.text;
-}};
-    }
-`;
-const LanguageButtonText = styled(Text)`
-    margin: 0 ${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.small;
-}} 0 0;
-    font-size: ${(p) => {
-  var _a;
-  return (_a = p.theme.fonts) == null ? void 0 : _a.normal;
-}};
-`;
-const LanguageCaretSymbolBadge = styled(SymbolBadge)`
-    align-self: flex-end;
-    stroke-width: 2px;
-    stroke-linecap: round;
-
-    && {
-        width: 0.6em;
-        height: 1em;
-    }
-    line {
-        stroke: ${(p) => {
-  var _a;
-  return (_a = p.theme.colors) == null ? void 0 : _a.text;
-}};
-    }
-`;
-const StyledDropdownList = styled(DropdownList)`
-    display: block;
-    min-height: auto;
-`;
-const LanguageLink = styled(TextLink)`
-    color: ${(p) => {
-  var _a, _b;
-  return p.selected ? (_a = p.theme.colors) == null ? void 0 : _a.primary : (_b = p.theme.colors) == null ? void 0 : _b.text;
-}};
-    ${(p) => p.selected && "font-weight: bold;"}
-
-    &:focus {
-        ${(p) => {
-  var _a;
-  return ((_a = p.theme.accessibility) == null ? void 0 : _a.isTabbing) ? css`
-                      ${paddedBorderTabStyle}
-                      text-decoration: underline;
-                  ` : "outline: none;";
-}}
-    }
-`;
-const isEmpty = (toolbar) => {
-  const {
-    allowCopy = false,
-    allowPrint = false,
-    guideCategories = false,
-    language = false,
-    showFavoriteToggle = false,
-    picker = PickerTypes.NONE
-  } = toolbar;
-  if (!allowCopy && !allowPrint && !language && !showFavoriteToggle && !guideCategories || picker === PickerTypes.NONE) {
-    return true;
-  }
-  return false;
-};
-const Toolbar = ({ className = "", dispatch }) => {
-  const _a = useProperties(), {
-    toolbarLanguageHeader,
-    toolbarFunctionsHeader,
-    toolbarLanguageTooltip,
-    toolbarFunctionsTooltip,
-    toolbarFunctionsCloseButtonAriaLabel,
-    printActionLabel,
-    copyActionLabel,
-    addFavoriteTooltip,
-    removeFavoriteCancelLabel,
-    removeFavoriteConfirmLabel,
-    removeFavoriteHeader,
-    removeFavoriteLabel,
-    removeFavoriteTooltip,
-    guide,
-    toolbar
-  } = _a, other = __objRest(_a, [
-    "toolbarLanguageHeader",
-    "toolbarFunctionsHeader",
-    "toolbarLanguageTooltip",
-    "toolbarFunctionsTooltip",
-    "toolbarFunctionsCloseButtonAriaLabel",
-    "printActionLabel",
-    "copyActionLabel",
-    "addFavoriteTooltip",
-    "removeFavoriteCancelLabel",
-    "removeFavoriteConfirmLabel",
-    "removeFavoriteHeader",
-    "removeFavoriteLabel",
-    "removeFavoriteTooltip",
-    "guide",
-    "toolbar"
-  ]);
-  if (!guide || !toolbar || isEmpty(toolbar)) {
-    return null;
-  }
-  const { language, guideCategories, allowCopy, allowPrint, showFavoriteToggle, picker } = toolbar;
-  return /* @__PURE__ */ React.createElement(Wrapper$1, {
-    className: appendClassNames("humany-guide-toolbar", className)
-  }, language && Object.keys(guide.translations || {}).length > 1 && /* @__PURE__ */ React.createElement(Languages, __spreadValues({
-    guide,
-    header: toolbarLanguageHeader,
-    tooltip: toolbarLanguageTooltip,
-    picker
-  }, other)), guideCategories && /* @__PURE__ */ React.createElement(Categories, {
-    guide,
-    toolbar
-  }), (allowCopy || allowPrint || showFavoriteToggle) && /* @__PURE__ */ React.createElement(Functions, {
-    guide,
-    header: toolbarFunctionsHeader,
-    tooltip: toolbarFunctionsTooltip,
-    printActionLabel,
-    copyActionLabel,
-    addFavoriteTooltip,
-    removeFavoriteCancelLabel,
-    removeFavoriteConfirmLabel,
-    removeFavoriteHeader,
-    removeFavoriteLabel,
-    removeFavoriteTooltip,
-    toolbarFunctionsCloseButtonAriaLabel,
-    allowCopy,
-    allowPrint,
-    showFavoriteToggle,
-    picker,
-    dispatch
-  }));
-};
-const Wrapper$1 = styled.div`
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin: 0 0 0 auto;
-
-    > :not(:last-child) {
-        margin: 0 calc(${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.small;
-}} * 2) 0 0;
-    }
-`;
-const Guide = forwardRef((_c, ref) => {
-  var _d = _c, { className, accordion = false } = _d, other = __objRest(_d, ["className", "accordion"]);
-  const {
-    loading = false,
-    dialog = [],
-    contactMethods = [],
-    showHeader = true,
-    showAnswerVersions = false,
-    defaultAnswerVersionLabel = "Default",
-    backButtonLabel,
-    metadataByLabel,
-    metadataModifiedLabel,
-    metadataPublishedLabel,
-    availablePerspectives,
-    metadata,
-    toolbar,
-    guide,
-    error
-  } = useProperties();
-  const {
-    params: { connection }
-  } = useRouteData();
-  const container = useContainer();
-  const children = useChildren();
-  const dispatch = useDispatch();
-  const handleBackButtonClick = useCallback(() => {
-    dispatch("back");
-  }, [dispatch]);
-  if (!guide && !error && !loading) {
-    return createEmptyComponent(container, __spreadProps(__spreadValues({}, other), {
-      className: appendClassNames(className, "humany-guide")
-    }));
-  }
-  const { id = "", title = "", body = "", translations = {} } = guide || {};
-  if (error && error.status === 404) {
-    return /* @__PURE__ */ React.createElement(NotFound, {
-      showSearch: false
-    });
-  }
-  const showBackButton = !!accordion && !!connection;
-  const language = Object.keys(translations).find((key) => translations[key] === `${id}`);
-  return /* @__PURE__ */ React.createElement(Wrapper, __spreadProps(__spreadValues({
-    ref
-  }, other), {
-    "data-loading": loading,
-    className: appendClassNames(className, "humany-guide")
-  }), /* @__PURE__ */ React.createElement(Content, {
-    "data-loading": loading,
-    accordion: accordion ? "true" : "false",
-    className: "humany-guide-content"
-  }, (showAnswerVersions && guide || !!toolbar) && /* @__PURE__ */ React.createElement(Top, {
-    className: "humany-guide-top"
-  }, showAnswerVersions && guide && /* @__PURE__ */ React.createElement(AnswerVersionPicker, {
-    defaultAnswerVersionLabel,
-    availablePerspectives,
-    guide
-  }), !!toolbar && /* @__PURE__ */ React.createElement(Toolbar, {
-    dispatch
-  })), !!(title || body) && /* @__PURE__ */ React.createElement(Body, {
-    className: "humany-guide-body",
-    accordion: accordion ? "true" : "false",
-    header: showHeader && title || void 0,
-    html: body,
-    htmlParseInstruction: guideRenderInstructions(container, dialog, body),
-    lang: language
-  }), dialog && body.indexOf("h-option-link") === -1 && /* @__PURE__ */ React.createElement(StyledDialogList, {
-    dialog
-  }), /* @__PURE__ */ React.createElement(StyledContactList, {
-    backButtonShown: showBackButton ? "true" : "false",
-    contactMethods,
-    dispatch,
-    guideId: guide && guide.id
-  }), !contactMethods.length && /* @__PURE__ */ React.createElement(Feedback, {
-    backButtonShown: showBackButton,
-    accordion
-  }), showBackButton && /* @__PURE__ */ React.createElement(BackButton, {
-    "aria-label": backButtonLabel,
-    onClick: handleBackButtonClick
-  }, /* @__PURE__ */ React.createElement(Caret, {
-    width: "7",
-    height: "13",
-    viewBox: "0 0 7 13",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /* @__PURE__ */ React.createElement("line", {
-    x1: "6.64645",
-    y1: "12.5513",
-    x2: "0.648357",
-    y2: "6.55319"
-  }), /* @__PURE__ */ React.createElement("line", {
-    x1: "0.646447",
-    y1: "6.64455",
-    x2: "6.64454",
-    y2: "0.646465"
-  })), backButtonLabel && /* @__PURE__ */ React.createElement("span", null, backButtonLabel)), metadata && /* @__PURE__ */ React.createElement(StyledMetadata, __spreadProps(__spreadValues({}, metadata), {
-    modified: guide == null ? void 0 : guide.modified,
-    published: guide == null ? void 0 : guide.published,
-    modifiedBy: guide == null ? void 0 : guide.modifiedBy,
-    publishedBy: guide == null ? void 0 : guide.publishedBy,
-    byLabel: metadataByLabel,
-    modifiedLabel: metadataModifiedLabel,
-    publishedLabel: metadataPublishedLabel
-  })), children.map((child) => /* @__PURE__ */ React.createElement(StyledComponents, __spreadValues({
-    key: child.id,
-    id: child.id,
-    branch: "default"
-  }, { embedded: true })))), /* @__PURE__ */ React.createElement(Loader, {
-    loading
-  }));
-});
-const Wrapper = styled.div`
-    ${loadingOpacity}
-    min-width: 0;
-`;
-const Body = styled(Paragraph)`
-    ${genericHtml}
-    ${(p) => {
-  var _a;
-  return `padding: ${(_a = p.theme.sizes) == null ? void 0 : _a.large};`;
-}}
-  display: block;
-    line-height: 1.6em;
-    ${headingElement("h1", css`
-            font-size: ${(p) => {
-  var _a;
-  return (_a = p.theme.fonts) == null ? void 0 : _a.large;
-}};
-            font-weight: normal;
-            line-height: 1.6em;
-            line-height: 1.6em;
-            margin: 0 0 ${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.small;
-}};
-        `)}
-
-    p {
-        font-weight: 300;
-        font-size: ${(p) => {
-  var _a;
-  return (_a = p.theme.fonts) == null ? void 0 : _a.normal;
-}};
-        color: ${(p) => {
-  var _a;
-  return (_a = p.theme.colors) == null ? void 0 : _a.text;
-}};
-        a {
-            display: inline;
-        }
-    }
-`;
-const StyledContactList = styled(ContactList)`
-    border-top: ${(p) => p.theme.border};
-    ${(p) => p.backButtonShown === "true" && `border-bottom: ${p.theme.border};`}
-`;
-const StyledDialogList = styled(DialogList)`
-    ${(p) => {
-  var _a, _b;
-  return `padding: 0 ${(_a = p.theme.sizes) == null ? void 0 : _a.large} ${(_b = p.theme.sizes) == null ? void 0 : _b.large};`;
-}}
-    display: block;
-`;
-const Top = styled.div`
-    ${(p) => {
-  var _a, _b;
-  return `padding: calc(${(_a = p.theme.sizes) == null ? void 0 : _a.normal}*2) ${(_b = p.theme.sizes) == null ? void 0 : _b.large};`;
-}}
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    border-bottom: ${(p) => p.theme.border};
-    border-radius: ${(p) => `${p.theme.borderRadius} ${p.theme.borderRadius}`} 0 0;
-    background-color: #ffffff;
-`;
-const Content = styled.div`
-    ${contentBox}
-    display: block;
-    > a {
-        ${contactLink}
-    }
-
-    ${(p) => p.accordion === "true" && css`
-            white-space: normal;
-            box-shadow: none;
-            background-color: #fafafa;
-        `}
-`;
-const StyledMetadata = styled(Metadata)`
-    display: block;
-    ${(p) => {
-  var _a, _b;
-  return `padding: calc(${(_a = p.theme.sizes) == null ? void 0 : _a.normal}*2) ${(_b = p.theme.sizes) == null ? void 0 : _b.large};`;
-}}
-    font-weight: 300;
-    font-size: ${(p) => {
-  var _a;
-  return (_a = p.theme.fonts) == null ? void 0 : _a.normal;
-}};
-    color: ${(p) => {
-  var _a;
-  return (_a = p.theme.colors) == null ? void 0 : _a.text;
-}};
-    border-top: ${(p) => p.theme.border};
-`;
-const StyledComponents = styled(Component)`
-    border-top: ${(p) => p.theme.border};
-`;
-const BackButton = styled(Button)`
-    ${(p) => {
-  var _a, _b;
-  return `padding: ${(_a = p.theme.sizes) == null ? void 0 : _a.normal} calc(${(_b = p.theme.sizes) == null ? void 0 : _b.normal} * 2);`;
-}}
-    color: ${(p) => {
-  var _a;
-  return (_a = p.theme.colors) == null ? void 0 : _a.primary;
-}};
-    text-decoration: underline;
-    font-size: ${(p) => {
-  var _a;
-  return (_a = p.theme.fonts) == null ? void 0 : _a.normal;
-}};
-    span {
-        font-weight: 300;
-    }
-    &:focus {
-        ${(p) => {
-  var _a;
-  return ((_a = p.theme.accessibility) == null ? void 0 : _a.isTabbing) && css`
-                ${linkTabStyle}
-                padding: ${(p2) => {
-    var _a2, _b;
-    return `calc(${(_a2 = p2.theme.sizes) == null ? void 0 : _a2.small} / 2) ${(_b = p2.theme.sizes) == null ? void 0 : _b.small}`;
-  }};
-            `;
-}};
-    }
-`;
-const Caret = styled.svg`
-    margin-right: ${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.small;
-}};
-    line {
-        stroke: ${(p) => {
-  var _a;
-  return (_a = p.theme.colors) == null ? void 0 : _a.primary;
-}};
-    }
-`;
-export { Guide as default };
-//# sourceMappingURL=guide.js.map