@telia-ace/knowledge-widget-ui 1.0.10 → 1.0.13

package/dist/index.js

@@ -0,0 +1,1385 @@
+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 { useRouteData, Link, Icon, List, list, invertedHoverButton, ItemList, itemList, Drawer, Dropdown, headingElement, linkTabStyle, Text, Button, paddedBorderTabStyle, Confirm, SymbolBadge, StyledText as StyledText$1, convertToStringAttributes, useKeyPress, useContainer, useEventListener, Timestamp, DateFormats, TextLink, usePrevious, borderTabStyle, AnchorLink, WidgetLink, Lightbox } from "@telia-ace/widget-ui";
+export * from "@telia-ace/widget-ui";
+import { createParams, formatUrl, appendClassNames, htmlParentContains } from "@telia-ace/widget-utilities";
+import React, { forwardRef, useCallback, useState, useEffect, useMemo, useRef, useContext, useImperativeHandle } from "react";
+import styled, { css, keyframes, ThemeContext } from "styled-components";
+const DialogLink = ({
+  title = "",
+  className,
+  id,
+  parent,
+  connection,
+  type,
+  target,
+  href,
+  children
+}) => {
+  const props = {};
+  const { name, params } = useRouteData();
+  switch (type) {
+    case "default":
+    case "guide":
+      const { id: parentId, title: parentTitle } = parent;
+      props.routeName = name;
+      props.params = createParams(__spreadProps(__spreadValues({}, params), {
+        guide: id,
+        connection: id === parentId ? connection : void 0,
+        uriName: id === parentId ? formatUrl(parentTitle) : formatUrl(title)
+      }));
+      break;
+    case "link":
+      props.href = href;
+      props.target = target;
+      break;
+  }
+  return /* @__PURE__ */ React.createElement(Link, __spreadValues({
+    className: appendClassNames(className, "humany-dialog-link")
+  }, props), children || /* @__PURE__ */ React.createElement(React.Fragment, null, type === "link" && /* @__PURE__ */ React.createElement(Icon, {
+    faIcon: "link"
+  }), /* @__PURE__ */ React.createElement("span", null, title)));
+};
+var dialogList = forwardRef((_a, ref) => {
+  var _b = _a, { className, dialog } = _b, other = __objRest(_b, ["className", "dialog"]);
+  return !!dialog.length ? /* @__PURE__ */ React.createElement(StyledList$1, __spreadProps(__spreadValues({
+    className: appendClassNames(className, "humany-dialog"),
+    items: dialog,
+    renderItem: (item) => /* @__PURE__ */ React.createElement("li", {
+      key: item.connection,
+      "data-dialog": item.connection
+    }, /* @__PURE__ */ React.createElement(DialogLink, __spreadValues({}, item)))
+  }, other), {
+    ref
+  })) : null;
+});
+const StyledList$1 = styled(List)`
+    ${list}
+    a {
+        min-width: 150px;
+        max-width: 400px;
+        display: block;
+        white-space: normal;
+        ${(p) => {
+  var _a;
+  return invertedHoverButton({
+    primaryColor: (_a = p.theme.colors) == null ? void 0 : _a.primary,
+    secondaryColor: "#FFFFFF"
+  });
+}}
+    }
+
+    i {
+        margin: 0 ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.small;
+}} 0 0;
+    }
+`;
+const DrawerList = (_c) => {
+  var _d = _c, {
+    trigger,
+    header,
+    className,
+    animation,
+    fullScreen,
+    onToggle,
+    children,
+    ref,
+    closeButtonAriaLabel
+  } = _d, other = __objRest(_d, [
+    "trigger",
+    "header",
+    "className",
+    "animation",
+    "fullScreen",
+    "onToggle",
+    "children",
+    "ref",
+    "closeButtonAriaLabel"
+  ]);
+  return /* @__PURE__ */ React.createElement(Drawer, {
+    className: appendClassNames(className, "humany-drawer-list"),
+    trigger,
+    header,
+    animation,
+    fullScreen,
+    onToggle,
+    closeButtonAriaLabel
+  }, /* @__PURE__ */ React.createElement(StyledItemList$2, __spreadValues({}, other), children));
+};
+const StyledItemList$2 = styled(ItemList)`
+    ${itemList}
+    font-family: ${(p) => {
+  var _a;
+  return (_a = p.theme.fonts) == null ? void 0 : _a.type;
+}};
+    padding: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.medium;
+}};
+    > ul > li {
+        overflow: visible;
+        font-weight: 300;
+        font-size: ${(p) => {
+  var _a;
+  return (_a = p.theme.fonts) == null ? void 0 : _a.normal;
+}};
+    }
+`;
+const DropdownActions = ({ items, renderItem, trigger, header, children }) => {
+  return /* @__PURE__ */ React.createElement(Dropdown, {
+    className: "humany-dropdown-actions",
+    trigger
+  }, /* @__PURE__ */ React.createElement(Wrapper$2, null, !!header && /* @__PURE__ */ React.createElement(Header$1, null, header), items && renderItem && /* @__PURE__ */ React.createElement(StyledList, {
+    items,
+    renderItem
+  }), children));
+};
+const Wrapper$2 = styled.div`
+    background: #fff;
+    border: #ccc 1px solid;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+    font-family: ${(p) => {
+  var _a;
+  return (_a = p.theme.fonts) == null ? void 0 : _a.type;
+}};
+    font-size: ${(p) => {
+  var _a;
+  return (_a = p.theme.fonts) == null ? void 0 : _a.normal;
+}};
+`;
+const Header$1 = styled.div`
+    padding: ${(p) => p.theme.sizes.normal};
+    padding-bottom: 0;
+    font-size: ${(p) => {
+  var _a;
+  return (_a = p.theme.fonts) == null ? void 0 : _a.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: ${(p) => p.theme.sizes.small};
+    }
+`;
+const StyledList = styled(List)`
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    padding: ${(p) => p.theme.sizes.small} 0;
+
+    li {
+        background: #fff;
+
+        a {
+            display: block;
+            font-size: ${(p) => {
+  var _a;
+  return (_a = p.theme.fonts) == null ? void 0 : _a.small;
+}};
+            padding: ${(p) => {
+  var _a, _b;
+  return `${(_a = p.theme.sizes) == null ? void 0 : _a.small} ${(_b = p.theme.sizes) == null ? void 0 : _b.normal}`;
+}};
+            cursor: pointer;
+            color: #555;
+            text-decoration: none;
+
+            &:hover {
+                background: #f9f9f9;
+                color: ${(p) => {
+  var _a;
+  return (_a = p.theme.colors) == null ? void 0 : _a.primary;
+}};
+            }
+        }
+    }
+`;
+const DropdownList = (_e) => {
+  var _f = _e, {
+    trigger,
+    className,
+    children,
+    closeButtonAriaLabel
+  } = _f, other = __objRest(_f, [
+    "trigger",
+    "className",
+    "children",
+    "closeButtonAriaLabel"
+  ]);
+  return /* @__PURE__ */ React.createElement(Dropdown, {
+    className: appendClassNames(className, "humany-dropdown-list"),
+    closeButtonAriaLabel,
+    trigger
+  }, /* @__PURE__ */ React.createElement(StyledItemList$1, __spreadValues({}, other), children));
+};
+const StyledItemList$1 = styled(ItemList)`
+    ${itemList}
+    font-family: ${(p) => {
+  var _a;
+  return (_a = p.theme.fonts) == null ? void 0 : _a.type;
+}};
+    > div {
+        ${headingElement("> h1", css`
+                font-size: ${(p) => {
+  var _a;
+  return (_a = p.theme.fonts) == null ? void 0 : _a.normal;
+}};
+                line-height: 1.2em;
+            `)}
+    }
+    > ul > li {
+        overflow: visible;
+        font-weight: 300;
+        font-size: ${(p) => {
+  var _a;
+  return (_a = p.theme.fonts) == null ? void 0 : _a.normal;
+}};
+
+        a {
+            display: inline-block;
+
+            @media (hover: hover) {
+                &:hover {
+                    text-decoration: underline;
+                }
+            }
+        }
+    }
+`;
+const spin = keyframes`
+  100% {
+    transform: rotate(360deg);
+  }
+`;
+const dash = keyframes`
+  0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -35px;
+  }
+  100% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -124px;
+  }
+`;
+const SpinnerSvg = styled.svg`
+    animation: ${spin} 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;
+`;
+const Wrapper$1 = styled.div`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 100%;
+  width: 100%;
+  pointer-events: ${(p) => p["data-loading"] ? "all" : "none"}
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  transition: 200ms ease-out opacity;
+  box-sizing: border-box;
+  overflow: hidden;
+  ${SpinnerSvg} {
+    opacity: ${(p) => p["data-loading"] ? "1" : "0"}
+  }
+`;
+const Spinner = styled.div`
+    position: relative;
+    margin: 0 auto;
+    width: 100px;
+    &:before {
+        content: '';
+        display: block;
+        padding-top: 100%;
+    }
+`;
+const SpinnerCircle = styled.circle`
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+    animation: ${dash} 1.5s ease-in-out infinite;
+    stroke-linecap: round;
+    stroke: ${(p) => {
+  var _a;
+  return (_a = p.theme.colors) == null ? void 0 : _a.primary;
+}};
+    stroke-width: 2px;
+`;
+const Loader = ({ loading = false }) => {
+  return /* @__PURE__ */ React.createElement(Wrapper$1, {
+    className: "humany-loader",
+    "data-loading": loading
+  }, /* @__PURE__ */ React.createElement(Spinner, {
+    className: "humany-spinner"
+  }, /* @__PURE__ */ React.createElement(SpinnerSvg, {
+    viewBox: "25 25 50 50"
+  }, /* @__PURE__ */ React.createElement(SpinnerCircle, {
+    cx: "50",
+    cy: "50",
+    r: "20",
+    fill: "none",
+    "stroke-width": "2",
+    "stroke-miterlimit": "10"
+  }))));
+};
+const loadingOpacity = css`
+    ${(p) => p["data-loading"] && "position: relative;"};
+    ${(p) => p["data-loading"] && "min-height: 150px;"}
+    > * {
+        transition: 200ms ease-out opacity;
+        opacity: ${(p) => p["data-loading"] ? "0.5" : "1"};
+    }
+    ${Wrapper$1} {
+        opacity: ${(p) => p["data-loading"] ? "1" : "0"};
+    }
+`;
+const genericHtml = css`
+    font-size: ${(p) => {
+  var _a;
+  return (_a = p.theme.fonts) == null ? void 0 : _a.normal;
+}};
+    font-weight: 300;
+    line-height: 1.5em;
+    color: ${(p) => {
+  var _a;
+  return (_a = p.theme.colors) == null ? void 0 : _a.text;
+}};
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        word-break: break-word;
+        &:first-child {
+            margin-top: 0;
+        }
+        &:only-child {
+            margin: 0;
+        }
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+
+    a {
+        color: ${(p) => {
+  var _a;
+  return (_a = p.theme.colors) == null ? void 0 : _a.link;
+}};
+        &:focus {
+            ${(p) => {
+  var _a;
+  return ((_a = p.theme.accessibility) == null ? void 0 : _a.isTabbing) && linkTabStyle;
+}};
+        }
+    }
+
+    img {
+        max-width: 100% !important;
+        height: auto !important;
+    }
+
+    p {
+        word-break: break-word;
+        margin: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
+}} 0;
+    }
+
+    p:first-child {
+        margin: 0 0 ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
+}};
+    }
+
+    p:last-child {
+        margin: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
+}} 0 0;
+    }
+
+    p:only-child {
+        margin: 0;
+    }
+`;
+const SmallCaret = styled(Icon)`
+    && {
+        font-size: ${(p) => {
+  var _a;
+  return (_a = p.theme.fonts) == null ? void 0 : _a.small;
+}};
+    }
+    width: 1.2em;
+`;
+const StyledHeaderText = styled(Text)`
+    font-size: ${(p) => {
+  var _a;
+  return (_a = p.theme.fonts) == null ? void 0 : _a.medium;
+}};
+    font-weight: normal;
+    line-height: 1.2em;
+    color: ${(p) => {
+  var _a;
+  return (_a = p.theme.colors) == null ? void 0 : _a.text;
+}};
+`;
+const StyledListButton = styled(Button)`
+    display: flex;
+    align-items: center;
+
+    ${(p) => {
+  var _a;
+  return p["data-has-label"] === "true" && p["data-has-symbol"] === "true" && `
+        svg, i    {
+            margin: 0 ${(_a = p.theme.sizes) == null ? void 0 : _a.small} 0 0;
+        }
+    `;
+}}
+
+    &:focus {
+        ${(p) => {
+  var _a;
+  return ((_a = p.theme.accessibility) == null ? void 0 : _a.isTabbing) && css`
+                ${(p2) => p2["data-has-label"] === "true" && paddedBorderTabStyle}
+
+                svg, i {
+                    ${(p2) => p2["data-has-label"] === "false" && p2["data-has-symbol"] === "true" && css`
+                            ${paddedBorderTabStyle}
+                            box-sizing: content-box;
+                        `}
+                }
+            `;
+}};
+    }
+
+    span {
+        flex: 1;
+        font-weight: 300;
+    }
+`;
+const FavoriteButton = ({
+  addFavoriteTooltip,
+  removeFavoriteCancelLabel,
+  removeFavoriteConfirmLabel,
+  removeFavoriteHeader,
+  removeFavoriteLabel,
+  removeFavoriteTooltip,
+  id,
+  isFavorite,
+  guideTitle,
+  buttonLabel = "",
+  actions: { addFavorite, removeFavorite }
+}) => {
+  const remove = useCallback(() => {
+    removeFavorite(id);
+  }, [id, removeFavorite]);
+  const add = useCallback(() => {
+    addFavorite(id);
+  }, [id, addFavorite]);
+  const tooltip = `${isFavorite ? removeFavoriteTooltip : addFavoriteTooltip}${guideTitle ? `: "${guideTitle}"` : ""}`;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, isFavorite ? /* @__PURE__ */ React.createElement(Confirm, {
+    trigger: /* @__PURE__ */ React.createElement(StyledButton, {
+      className: "humany-favorite-button",
+      title: tooltip,
+      "aria-label": tooltip,
+      "data-favorite": "true",
+      "data-has-label": buttonLabel ? "true" : "false",
+      "data-has-symbol": "true"
+    }, /* @__PURE__ */ React.createElement(SymbolBadge, {
+      size: 16,
+      symbol: { type: "Svg", content: "star-empty" }
+    }), buttonLabel && /* @__PURE__ */ React.createElement(StyledText$1, null, buttonLabel)),
+    onConfirm: remove,
+    cancelLabel: removeFavoriteCancelLabel,
+    confirmLabel: removeFavoriteConfirmLabel,
+    header: removeFavoriteHeader,
+    text: removeFavoriteLabel
+  }) : /* @__PURE__ */ React.createElement(StyledButton, {
+    className: "humany-favorite-button",
+    title: tooltip,
+    "aria-label": tooltip,
+    onClick: add,
+    "data-favorite": "false",
+    "data-has-label": buttonLabel ? "true" : "false",
+    "data-has-symbol": "true"
+  }, /* @__PURE__ */ React.createElement(SymbolBadge, {
+    size: 16,
+    symbol: { type: "Svg", content: "star-empty" }
+  }), buttonLabel && /* @__PURE__ */ React.createElement(StyledText$1, null, buttonLabel)));
+};
+const StyledButton = styled(StyledListButton)`
+    grid-area: favorite;
+
+    &:focus {
+        ${(p) => {
+  var _a;
+  return ((_a = p.theme.accessibility) == null ? void 0 : _a.isTabbing) && css`
+                svg {
+                    ${(p2) => {
+    var _a2, _b;
+    return p2["data-favorite"] === "true" ? `
+          fill: transparent;
+
+          path {
+            fill: transparent;
+          }
+        ` : `
+          fill: ${(_a2 = p2.theme.colors) == null ? void 0 : _a2.text};
+
+          path {
+            fill: ${(_b = p2.theme.colors) == null ? void 0 : _b.text};
+          }
+        `;
+  }}
+                }
+            `;
+}};
+    }
+
+    ${(p) => {
+  var _a, _b, _c, _d, _e, _f, _g;
+  return ((_a = p.theme.colors) == null ? void 0 : _a.text) && css`
+            svg {
+                stroke: ${(_b = p.theme.colors) == null ? void 0 : _b.text};
+
+                path {
+                    stroke: ${(_c = p.theme.colors) == null ? void 0 : _c.text};
+                }
+
+                ${p["data-favorite"] === "true" && `
+        fill: ${(_d = p.theme.colors) == null ? void 0 : _d.text};
+
+        path {
+          fill: ${(_e = p.theme.colors) == null ? void 0 : _e.text};
+        }
+      `}
+            }
+
+            &:hover {
+                svg {
+                    ${p["data-favorite"] === "true" ? `
+          fill: transparent;
+
+          path {
+            fill: transparent;
+          }
+        ` : `
+          fill: ${(_f = p.theme.colors) == null ? void 0 : _f.text};
+
+          path {
+            fill: ${(_g = p.theme.colors) == null ? void 0 : _g.text};
+          }
+        `}
+                }
+            }
+        `;
+}}
+`;
+var feedback = forwardRef((_g, ref) => {
+  var _h = _g, {
+    onFeedback = () => {
+    },
+    direction = "horizontal",
+    className,
+    header,
+    positive,
+    negative,
+    selected
+  } = _h, other = __objRest(_h, [
+    "onFeedback",
+    "direction",
+    "className",
+    "header",
+    "positive",
+    "negative",
+    "selected"
+  ]);
+  return /* @__PURE__ */ React.createElement(Wrapper, __spreadProps(__spreadValues({
+    className: appendClassNames(className, "humany-feedback"),
+    "data-direction": direction
+  }, convertToStringAttributes(other)), {
+    ref
+  }), !!header && /* @__PURE__ */ React.createElement(Header, null, header), /* @__PURE__ */ React.createElement(FeedbackButton, {
+    className: "humany-feedback-button",
+    disabled: !!selected,
+    "aria-pressed": selected === "positive",
+    "data-selected": selected === "positive",
+    "data-direction": direction,
+    onClick: () => onFeedback("positive")
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    faIcon: "smile-o"
+  }), /* @__PURE__ */ React.createElement("span", null, positive)), /* @__PURE__ */ React.createElement(FeedbackButton, {
+    className: "humany-feedback-button",
+    disabled: !!selected,
+    "aria-pressed": selected === "negative",
+    "data-selected": selected === "negative",
+    "data-direction": direction,
+    onClick: () => onFeedback("negative")
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    faIcon: "frown-o"
+  }), /* @__PURE__ */ React.createElement("span", null, negative)));
+});
+const Header = styled(StyledText$1)`
+    font-weight: normal;
+    margin: 0 0 ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
+}};
+    font-size: ${(p) => {
+  var _a;
+  return (_a = p.theme.fonts) == null ? void 0 : _a.normal;
+}};
+    display: block;
+`;
+const FeedbackButton = styled(Button)`
+    display: inline-block;
+    font-size: ${(p) => {
+  var _a;
+  return (_a = p.theme.fonts) == null ? void 0 : _a.normal;
+}};
+    font-weight: 300;
+    && {
+        margin-right: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.large;
+}};
+    }
+
+    ${(p) => {
+  var _a, _b;
+  return p["data-direction"] === "horizontal" && css`
+            width: 225px;
+            max-width: calc(50% - ${(_a = p.theme.sizes) == null ? void 0 : _a.large} - ${(_b = p.theme.sizes) == null ? void 0 : _b.small});
+        `;
+}}
+
+    ${(p) => p["data-direction"] === "vertical" && css`
+            min-width: 190px;
+        `}
+
+  ${(p) => {
+  var _a;
+  return invertedHoverButton({
+    active: p["data-selected"],
+    primaryColor: (_a = p.theme.colors) == null ? void 0 : _a.primary,
+    secondaryColor: "#FFFFFF"
+  });
+}}
+
+  i {
+        margin: 0 ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.small;
+}} 0 0;
+    }
+`;
+const Wrapper = styled.div`
+    ${(p) => p["data-direction"] === "vertical" && css`
+            > button {
+                width: 100%;
+                &:not(:last-child) {
+                    margin-bottom: ${(p2) => {
+  var _a;
+  return (_a = p2.theme.sizes) == null ? void 0 : _a.normal;
+}};
+                }
+            }
+        `}
+`;
+const useArrowKeys = () => {
+  const [keyPressed, setKeyPressed] = useState(null);
+  const left = useKeyPress("ArrowLeft");
+  const right = useKeyPress("ArrowRight");
+  const up = useKeyPress("ArrowUp");
+  const down = useKeyPress("ArrowDown");
+  const effect = () => {
+    if (left) {
+      setKeyPressed("left");
+    } else if (right) {
+      setKeyPressed("right");
+    } else if (up) {
+      setKeyPressed("up");
+    } else if (down) {
+      setKeyPressed("down");
+    } else {
+      setKeyPressed(null);
+    }
+  };
+  useEffect(effect, [left, right, up, down]);
+  return keyPressed;
+};
+const useDebounce = (value, delay) => {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+  const handler = useCallback(() => {
+    return setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+  }, [delay, setDebouncedValue, value]);
+  useEffect(() => {
+    const timeout = handler();
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [handler]);
+  return debouncedValue;
+};
+const useFavorites = () => {
+  const container = useContainer();
+  const [favorites, setFavorites] = useState([]);
+  const platform = container.get("favorites");
+  useEffect(() => {
+    if (platform) {
+      setFavorites(platform.get());
+      const { events } = container.get("$widget");
+      const unsubscribe = events.subscribe("widget:favorites-updated", (_, { updated }) => {
+        setFavorites([...updated]);
+      });
+      return unsubscribe;
+    }
+  }, []);
+  const add = (guideId) => {
+    if (!platform) {
+      return Promise.resolve([]);
+    }
+    return platform.add(guideId);
+  };
+  const remove = (guideId) => {
+    if (!platform) {
+      return Promise.resolve([]);
+    }
+    return platform.remove(guideId);
+  };
+  const clear = () => {
+    if (!platform) {
+      return Promise.resolve([]);
+    }
+    return platform.clear();
+  };
+  const toggle = useCallback((guideId) => {
+    if (favorites.indexOf(guideId) > -1) {
+      return remove(guideId);
+    } else {
+      return add(guideId);
+    }
+  }, [favorites]);
+  return [
+    favorites,
+    useMemo(() => ({
+      addFavorite: add,
+      removeFavorite: remove,
+      clearFavorites: clear,
+      toggleFavorite: toggle
+    }), [favorites])
+  ];
+};
+var useHover = () => {
+  const [hovering, setHovering] = useState(false);
+  const elem = useRef();
+  const onMouseEnter = useCallback(() => setHovering(true), [setHovering]);
+  const onMouseLeave = useCallback(() => setHovering(false), [setHovering]);
+  useEventListener("mouseenter", onMouseEnter, elem.current);
+  useEventListener("mouseleave", onMouseLeave, elem.current);
+  return [hovering, elem];
+};
+const Metadata = ({
+  format = DateFormats.YYYY_MM_DD_HH_MM,
+  className = "",
+  byLabel = "",
+  modifiedLabel = "",
+  publishedLabel = "",
+  modifiedBy = "",
+  publishedBy = "",
+  showModified = false,
+  showPublished = false,
+  modified,
+  published
+}) => {
+  const publishedTimestamp = showPublished && published ? /* @__PURE__ */ React.createElement(StyledTimestamp, {
+    format,
+    timestamp: published
+  }) : null;
+  const modifiedTimestamp = showModified && modified ? /* @__PURE__ */ React.createElement(StyledTimestamp, {
+    format,
+    timestamp: modified
+  }) : null;
+  if (!publishedTimestamp && !modifiedTimestamp) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(StyledText, {
+    className: appendClassNames(className, "humany-metadata")
+  }, publishedTimestamp && /* @__PURE__ */ React.createElement(StyledText, {
+    className: "humany-published"
+  }, publishedLabel, publishedTimestamp, byLabel && publishedBy && ` ${byLabel.replace("{{editor}}", publishedBy)}`), modifiedTimestamp && /* @__PURE__ */ React.createElement(StyledText, {
+    className: "humany-modified"
+  }, publishedTimestamp && ", ", modifiedLabel, modifiedTimestamp, byLabel && modifiedBy && ` ${byLabel.replace("{{editor}}", modifiedBy)}`));
+};
+const StyledTimestamp = styled(Timestamp)`
+    &:not(:first-child) {
+        margin-left: 4px;
+    }
+    &:not(:last-child) {
+        margin-right: 4px;
+    }
+`;
+const StyledText = styled(Text)`
+    font-style: italic;
+`;
+const Tags = ({ tags }) => {
+  if (!tags.filter((t) => t.symbol).length) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(StyledTagList, {
+    className: "humany-guide-list-tags",
+    items: tags,
+    renderItem: ({ id, symbol, title }) => symbol && /* @__PURE__ */ React.createElement("li", {
+      key: id,
+      "data-tag": id
+    }, /* @__PURE__ */ React.createElement(StyledTagIcon, {
+      size: 18,
+      symbol,
+      title
+    }))
+  });
+};
+const AccordionListItem = forwardRef(({ title, id, route, symbolSize, collapseUri, children }, ref) => {
+  const { params } = useRouteData();
+  return /* @__PURE__ */ React.createElement(ActiveAccordionListItem, {
+    ref,
+    "data-guide": id
+  }, /* @__PURE__ */ React.createElement(TextLink, {
+    title,
+    "aria-label": title,
+    routeName: route,
+    params: createParams(__spreadProps(__spreadValues({}, params), {
+      uriName: collapseUri ? collapseUri : void 0,
+      id: void 0,
+      guide: void 0,
+      accordion: void 0
+    })),
+    text: title
+  }, /* @__PURE__ */ React.createElement(SymbolBadge, {
+    size: symbolSize,
+    symbol: { type: "Svg", content: "caret-up" }
+  })), children);
+});
+const ActiveAccordionListItem = styled.li`
+  > a { 
+    grid-column: 1 / -1
+    font-weight: bold;
+    margin: 0 0 ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
+}} 0;
+  }
+
+  > div {
+    grid-column: 1 / -1
+  }
+`;
+var guideList = forwardRef((_i, ref) => {
+  var _j = _i, {
+    expandable = false,
+    routing = {},
+    paramMappers = {},
+    symbolSize = 11,
+    pageRole = "link",
+    pageCaret = "down",
+    showTags = false,
+    showFavoriteToggle = false,
+    localPaging = false,
+    onItemClick = () => {
+    },
+    dispatch = () => {
+    },
+    metadata = {},
+    pageLabel,
+    className,
+    children,
+    items,
+    renderItem,
+    addFavoriteTooltip,
+    removeFavoriteCancelLabel,
+    removeFavoriteConfirmLabel,
+    removeFavoriteHeader,
+    removeFavoriteLabel,
+    removeFavoriteTooltip
+  } = _j, other = __objRest(_j, [
+    "expandable",
+    "routing",
+    "paramMappers",
+    "symbolSize",
+    "pageRole",
+    "pageCaret",
+    "showTags",
+    "showFavoriteToggle",
+    "localPaging",
+    "onItemClick",
+    "dispatch",
+    "metadata",
+    "pageLabel",
+    "className",
+    "children",
+    "items",
+    "renderItem",
+    "addFavoriteTooltip",
+    "removeFavoriteCancelLabel",
+    "removeFavoriteConfirmLabel",
+    "removeFavoriteHeader",
+    "removeFavoriteLabel",
+    "removeFavoriteTooltip"
+  ]);
+  const {
+    accessibility: { isTabbing = false }
+  } = useContext(ThemeContext);
+  const innerRef = useRef();
+  const prevItems = usePrevious(items);
+  const { guide: guideRoute = "guide", page: pageRoute = "index" } = routing;
+  const {
+    guide: mapGuideParams = ({ id }) => createParams({ guide: id }),
+    page: mapPageParams = () => createParams()
+  } = paramMappers;
+  const [favorites, actions] = useFavorites();
+  useImperativeHandle(ref, () => innerRef.current);
+  const defaultRenderer = (guide) => {
+    const { id, title, tags, published, modified, publishedBy, modifiedBy } = guide;
+    return /* @__PURE__ */ React.createElement("li", {
+      key: id,
+      "data-guide": id,
+      "has-metadata": (!!(metadata == null ? void 0 : metadata.showPublished) && !!published || !!(metadata == null ? void 0 : metadata.showModified) && !!modified).toString()
+    }, /* @__PURE__ */ React.createElement(TextLink, {
+      className: "humany-guide-link",
+      title,
+      "aria-label": title,
+      routeName: guideRoute,
+      onClick: (e) => onItemClick(e, guide),
+      params: mapGuideParams(guide),
+      text: title
+    }, /* @__PURE__ */ React.createElement(SymbolBadge, {
+      size: symbolSize,
+      symbol: {
+        type: "Svg",
+        content: expandable ? "caret-down" : "caret-right"
+      }
+    })), showFavoriteToggle && /* @__PURE__ */ React.createElement(FavoriteButton, {
+      guideTitle: title,
+      addFavoriteTooltip,
+      removeFavoriteCancelLabel,
+      removeFavoriteConfirmLabel,
+      removeFavoriteHeader,
+      removeFavoriteLabel,
+      removeFavoriteTooltip,
+      isFavorite: favorites.indexOf(id) > -1,
+      actions,
+      id
+    }), showTags && /* @__PURE__ */ React.createElement(Tags, {
+      tags
+    }), /* @__PURE__ */ React.createElement(StyledMetadata, __spreadProps(__spreadValues({}, metadata), {
+      indent: expandable ? void 0 : symbolSize,
+      modified,
+      published,
+      publishedBy,
+      modifiedBy
+    })));
+  };
+  const renderer = useCallback((guide, index, items2) => {
+    if (renderItem) {
+      return renderItem(guide, index, items2, defaultRenderer);
+    }
+    return defaultRenderer(guide);
+  }, [renderItem, defaultRenderer]);
+  const onPageClick = useCallback((e) => {
+    if (localPaging) {
+      e.preventDefault();
+      dispatch("page", mapPageParams());
+    }
+  }, [dispatch, localPaging]);
+  useEffect(() => {
+    if (isTabbing && prevItems && prevItems.length < items.length && innerRef.current) {
+      const elements = innerRef.current.querySelectorAll(".humany-guide-list > ul > li");
+      const listItemElem = elements[prevItems.length];
+      if (elements.length === items.length && prevItems.length) {
+        const nextListItem = elements[prevItems.length];
+        if (nextListItem) {
+          const focusNext = nextListItem.querySelector(".humany-guide-link");
+          focusNext && focusNext.focus();
+        }
+      } else if (listItemElem) {
+        const observer = new MutationObserver((mutations, observer2) => {
+          mutations.forEach((mutation) => {
+            if (mutation.addedNodes) {
+              const found = Array.from(mutation.addedNodes).find((node) => node.tagName === "A");
+              if (found && htmlParentContains(innerRef.current, document.activeElement)) {
+                isTabbing && found.focus();
+                observer2.disconnect();
+              }
+            }
+          });
+        });
+        observer.observe(listItemElem, {
+          attributes: false,
+          characterData: false,
+          childList: true,
+          subtree: true,
+          attributeOldValue: false,
+          characterDataOldValue: false
+        });
+      }
+    }
+  });
+  const hasMetaData = !!Object.keys(metadata).filter((k) => typeof metadata[k] !== "undefined").length;
+  return /* @__PURE__ */ React.createElement(StyledItemList, __spreadProps(__spreadValues({
+    className: appendClassNames(className, "humany-guide-list"),
+    "data-item-count": items.length,
+    items,
+    renderItem: renderer,
+    expandable: expandable ? "true" : "false",
+    "grid-items": showTags || showFavoriteToggle || hasMetaData ? "true" : "false"
+  }, convertToStringAttributes(other)), {
+    ref: innerRef
+  }), pageLabel ? /* @__PURE__ */ React.createElement(TextLink, {
+    text: pageLabel,
+    title: pageLabel,
+    "aria-label": pageLabel,
+    routeName: pageRoute,
+    role: pageRole,
+    params: mapPageParams(),
+    onClick: onPageClick
+  }, /* @__PURE__ */ React.createElement(SymbolBadge, {
+    size: symbolSize,
+    symbol: { type: "Svg", content: `caret-${pageCaret}` }
+  })) : null, children);
+});
+const StyledItemList = styled(ItemList)`
+    ${itemList}
+    padding: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.large;
+}};
+    overflow: auto;
+    justify-content: flex-start;
+    white-space: nowrap;
+    font-weight: 300;
+    text-decoration: none;
+
+    > div {
+        ${headingElement("> h1", css`
+                white-space: pre-wrap;
+            `)}
+    }
+
+    > ul > li {
+        ${(p) => p["grid-items"] === "true" && css`
+                display: grid;
+                grid-template-columns: auto 1fr 1fr;
+                gap: 0px 0px;
+                grid-template-areas: '. favorite tags';
+                align-items: center;
+
+                > button {
+                    margin: 0 0 0 ${(p2) => {
+  var _a;
+  return (_a = p2.theme.sizes) == null ? void 0 : _a.small;
+}};
+
+                    &[data-favorite='false'] {
+                        ${(p2) => {
+  var _a;
+  return ((_a = p2.theme.accessibility) == null ? void 0 : _a.isTabbing) ? "opacity: 0;" : "display: none;";
+}};
+                        &:focus {
+                            opacity: 1;
+                        }
+                    }
+                }
+
+                > span {
+                    font-size: ${(p2) => {
+  var _a;
+  return (_a = p2.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: ${(p) => {
+  var _a;
+  return (_a = p.theme.colors) == null ? void 0 : _a.primary;
+}};
+            overflow: hidden;
+            text-overflow: ellipsis;
+            max-width: 100%;
+            display: inline-block;
+
+            svg {
+                margin: 0 calc(${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.small;
+}}*2) 0 0;
+                line {
+                    stroke: ${(p) => {
+  var _a;
+  return (_a = p.theme.colors) == null ? void 0 : _a.primary;
+}};
+                }
+            }
+
+            ${(p) => p.expandable === "true" && css`
+                    display: flex;
+                    flex-direction: row-reverse;
+                    justify-content: flex-end;
+                    align-items: center;
+
+                    span {
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                    }
+
+                    svg {
+                        margin: 0 0 0 ${(p2) => {
+  var _a;
+  return (_a = p2.theme.sizes) == null ? void 0 : _a.small;
+}};
+                    }
+                `}
+
+            &:focus {
+                ${(p) => {
+  var _a;
+  return ((_a = p.theme.accessibility) == null ? void 0 : _a.isTabbing) && css`
+                        ${borderTabStyle}
+                        text-decoration: underline;
+                    `;
+}};
+            }
+
+            @media (hover: hover) {
+                &:hover {
+                    text-decoration: underline;
+                }
+            }
+        }
+    }
+
+    > a {
+        color: ${(p) => {
+  var _a;
+  return (_a = p.theme.colors) == null ? void 0 : _a.text;
+}};
+        margin: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
+}} 0 0;
+        align-self: flex-start;
+        align-items: center;
+        display: flex;
+
+        span {
+            text-decoration: underline;
+        }
+
+        svg {
+            margin: 0 calc(${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.small;
+}}*2) 0 0;
+            line {
+                stroke: ${(p) => {
+  var _a;
+  return (_a = p.theme.colors) == null ? void 0 : _a.text;
+}};
+            }
+        }
+
+        &:focus {
+            ${(p) => {
+  var _a;
+  return ((_a = p.theme.accessibility) == null ? void 0 : _a.isTabbing) && css`
+                    ${borderTabStyle}
+                    text-decoration: underline;
+                `;
+}};
+        }
+    }
+`;
+const StyledTagList = styled(List)`
+    ${list}
+    display: flex;
+    margin: 0 0 0 auto;
+    grid-area: tags;
+
+    li,
+    li:last-child {
+        margin: 0 0 0 ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.small;
+}};
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+`;
+const StyledTagIcon = styled(SymbolBadge)`
+    display: block;
+    color: ${(p) => {
+  var _a;
+  return (_a = p.theme.colors) == null ? void 0 : _a.primary;
+}};
+    ${(p) => {
+  if (p.symbol.type === "Uri") {
+    return `
+        width: ${p.size}px;
+        height: ${p.size}px;
+      `;
+  }
+  if (p.symbol.type === "FontAwesome") {
+    return `
+        font-size: ${p.size}px;
+      `;
+  }
+}}
+`;
+const StyledMetadata = styled(Metadata)`
+    grid-area: metadata;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    font-size: ${(p) => {
+  var _a;
+  return (_a = p.theme.fonts) == null ? void 0 : _a.small;
+}};
+    ${(p) => {
+  var _a;
+  return typeof p.indent === "number" && `text-indent: calc(${(_a = p.theme.sizes) == null ? void 0 : _a.small} * 2 + ${p.indent}px);`;
+}}
+`;
+const isAnchorLink = (href) => {
+  const re = new RegExp("^#", "i");
+  const match = re.test(href);
+  return match;
+};
+const embeddedLinkMapper = (container) => (_a) => {
+  var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
+  const {
+    implementation,
+    name: currentWidgetName
+  } = container.get("$widget");
+  const { href = "" } = props;
+  if (isAnchorLink(href)) {
+    return /* @__PURE__ */ React.createElement(AnchorLink, {
+      smooth: true,
+      to: href
+    }, children);
+  }
+  const escapedBindings = implementation.bindings.map((binding) => binding.replace(/\./g, "\\.")).join("|");
+  const regexp = new RegExp(`^((http[s]?:)?//)?(${escapedBindings})/([^\\s]+)`);
+  const expArray = regexp.exec(href);
+  if (expArray && expArray.length >= 4) {
+    const targetWidgetName = expArray[4];
+    const targetWidget = implementation.widgets.get(targetWidgetName);
+    if (targetWidget && !targetWidgetName.startsWith("blob?") && !targetWidgetName.startsWith(currentWidgetName)) {
+      return /* @__PURE__ */ React.createElement(WidgetLink, {
+        widgetName: targetWidgetName
+      }, children);
+    }
+  }
+  return /* @__PURE__ */ React.createElement("a", __spreadValues({}, props), children);
+};
+const imageLightboxRenderer = (attrs) => /* @__PURE__ */ React.createElement(Lightbox, {
+  attrs
+});
+const guideRenderInstructions = (container, dialog = []) => {
+  return {
+    transform: {
+      img: imageLightboxRenderer,
+      a: (attr) => {
+        const _a = attr, { children } = _a, otherAttr = __objRest(_a, ["children"]);
+        const connectionId = otherAttr["data-target"];
+        if (connectionId && dialog.length) {
+          const item = dialog.find(({ connection }) => connection === connectionId);
+          if (item) {
+            return /* @__PURE__ */ React.createElement(DialogLink, __spreadValues({}, item), children);
+          }
+        }
+        const defaultInstructions = embeddedLinkMapper(container);
+        return defaultInstructions(attr);
+      }
+    }
+  };
+};
+export { AccordionListItem, DialogLink, dialogList as DialogList, DrawerList, DropdownActions, DropdownList, FavoriteButton, feedback as Feedback, guideList as GuideList, Loader, Wrapper$1 as LoaderWrapper, Metadata, SmallCaret, StyledHeaderText, StyledListButton, genericHtml, guideRenderInstructions, loadingOpacity, useArrowKeys, useDebounce, useFavorites, useHover };
+//# sourceMappingURL=index.js.map