@telia-ace/widget-ui 1.0.16 → 1.0.17

package/dist/index.js

@@ -327,14 +327,15 @@ function parseHtmlString(html, instruction) {
   }
   return convert(html);
 }
-const imageLightboxRenderer = (attrs) => /* @__PURE__ */ React.createElement(Lightbox, {
-  attrs
+const imageLightboxRenderer = (htmlBody) => (attrs) => /* @__PURE__ */ React.createElement(Lightbox, {
+  attrs,
+  htmlBody
 });
-const defaultRenderInstructions = (container) => {
+const defaultRenderInstructions = (container, htmlBody) => {
   return {
     transform: {
       a: embeddedLinkMapper(container),
-      img: imageLightboxRenderer
+      img: imageLightboxRenderer(htmlBody)
     }
   };
 };
@@ -343,14 +344,14 @@ const AnchorLink = (props) => {
 };
 var Button = forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, other = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ React.createElement(StyledButton$2, __spreadProps(__spreadValues({
+  return /* @__PURE__ */ React.createElement(StyledButton, __spreadProps(__spreadValues({
     type: "button",
     className: appendClassNames(className, "humany-button")
   }, convertToStringAttributes(other)), {
     ref
   }), children);
 });
-const StyledButton$2 = styled.button`
+const StyledButton = styled.button`
     -webkit-appearance: button;
     text-transform: none;
     overflow: visible;
@@ -983,7 +984,7 @@ const paddedBorderTabStyle = css`
   return (_a = p.theme.sizes) == null ? void 0 : _a.small;
 }};
 `;
-const CloseButton$1 = styled(Button)`
+const CloseButton = styled(Button)`
     position: absolute;
     top: ${(p) => {
   var _a;
@@ -1708,6 +1709,23 @@ const SymbolBadge = (_g) => {
             fill: "white"
           }));
         }
+        case "pagination-left": {
+          return /* @__PURE__ */ React.createElement("svg", __spreadValues({
+            viewBox: "0 0 24 24"
+          }, svgProps), /* @__PURE__ */ React.createElement("path", {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M15.7935 18.7087C16.0092 18.9029 16.105 19.1974 16.0447 19.4813C15.9844 19.7652 15.7772 19.9954 15.5012 20.0852C15.2251 20.1749 14.9222 20.1105 14.7065 19.9164L6.58148 12.6039C6.41027 12.4498 6.3125 12.2303 6.3125 12C6.3125 11.7697 6.41027 11.5503 6.58148 11.3962L14.7065 4.08372C15.04 3.78354 15.5536 3.81054 15.8538 4.14402C16.154 4.4775 16.127 4.99119 15.7935 5.29136L8.33939 12L15.7935 18.7087Z",
+            fill: "#222222"
+          }));
+        }
+        case "pagination-right": {
+          return /* @__PURE__ */ React.createElement("svg", __spreadValues({
+            viewBox: "0 0 24 24"
+          }, svgProps), /* @__PURE__ */ React.createElement("path", {
+            d: "M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"
+          }));
+        }
       }
       return null;
     }
@@ -1824,7 +1842,7 @@ const Drawer = ({
     clientHeight: document.body.clientHeight,
     css: css2,
     ref
-  }, /* @__PURE__ */ React.createElement(CloseButton$1, {
+  }, /* @__PURE__ */ React.createElement(CloseButton, {
     onClick: () => toggleVisible(false),
     tabIndex: 0,
     ref: closeButtonRef,
@@ -1844,7 +1862,7 @@ const Drawer = ({
     "aria-expanded": visible
   }));
 };
-const Wrapper$7 = styled.div`
+const Wrapper$6 = styled.div`
     font-family: ${(p) => {
   var _a;
   return (_a = p.theme.fonts) == null ? void 0 : _a.type;
@@ -1886,7 +1904,7 @@ const Header$1 = styled(Typography)`
 const AnimationBase = css`
     transition: ${(p) => p.duration}ms;
 `;
-const WrapperWithSlideInBottom = styled(Wrapper$7)`
+const WrapperWithSlideInBottom = styled(Wrapper$6)`
     max-height: 0;
     ${AnimationBase}
 
@@ -1904,7 +1922,7 @@ const WrapperWithSlideInBottom = styled(Wrapper$7)`
         max-height: 0;
     }
 `;
-const WrapperWithSlideInRight = styled(Wrapper$7)`
+const WrapperWithSlideInRight = styled(Wrapper$6)`
     ${AnimationBase}
     transform: translateX(100%);
     height: ${(p) => p.fullScreen ? "100%" : "auto"};
@@ -1923,7 +1941,7 @@ const WrapperWithSlideInRight = styled(Wrapper$7)`
         transform: translateX(100%);
     }
 `;
-const WrapperWithSlideInLeft = styled(Wrapper$7)`
+const WrapperWithSlideInLeft = styled(Wrapper$6)`
     ${AnimationBase}
     transform: translateX(-100%);
     height: ${(p) => p.fullScreen ? "100%" : "auto"};
@@ -1942,7 +1960,7 @@ const WrapperWithSlideInLeft = styled(Wrapper$7)`
         transform: translateX(-100%);
     }
 `;
-const WrapperWithSlideInTop = styled(Wrapper$7)`
+const WrapperWithSlideInTop = styled(Wrapper$6)`
     ${AnimationBase}
     bottom: unset;
     top: 0;
@@ -2053,7 +2071,7 @@ const Dropdown = React.forwardRef((_i, ref) => {
     x,
     y,
     ref: innerRef
-  }), /* @__PURE__ */ React.createElement(CloseButton$1, {
+  }), /* @__PURE__ */ React.createElement(CloseButton, {
     onClick: () => setVisible(false),
     tabIndex: 0,
     ref: closeButtonRef,
@@ -2095,9 +2113,9 @@ const StyledDropdown = styled.div`
 `;
 const Empty = (_k) => {
   var other = __objRest(_k, []);
-  return /* @__PURE__ */ React.createElement(Wrapper$6, __spreadValues({}, other));
+  return /* @__PURE__ */ React.createElement(Wrapper$5, __spreadValues({}, other));
 };
-const Wrapper$6 = styled.div`
+const Wrapper$5 = styled.div`
     display: none;
 `;
 var grid = forwardRef((_l, ref) => {
@@ -2123,7 +2141,10 @@ var Html = forwardRef((_n, ref) => {
   const container = useContainer();
   const [processedHtml, setProcessedHtml] = useState();
   useEffect(() => {
-    const instructions = htmlParseInstruction || defaultRenderInstructions(container);
+    const defaultInstructions = defaultRenderInstructions(container, html);
+    const instructions = __spreadProps(__spreadValues(__spreadValues({}, defaultInstructions), htmlParseInstruction), {
+      transform: __spreadValues(__spreadValues({}, defaultInstructions.transform), htmlParseInstruction == null ? void 0 : htmlParseInstruction.transform)
+    });
     const processed = parseHtmlString(html, instructions);
     setProcessedHtml(processed);
   }, [html, htmlParseInstruction]);
@@ -2327,14 +2348,151 @@ const ItemTree = ({
     className: appendClassNames(className, "humany-item-tree")
   }, rootItem && rootItem(!hasSelectedChildren(tree || [])), tree && renderTreeItems(tree, 1));
 };
-const Overlay = (_z) => {
-  var _A = _z, {
+var RouteLink = forwardRef((_z, forwardedRef) => {
+  var _A = _z, { className, onClick = () => {
+  }, name = "", to = "", params = {}, children } = _A, other = __objRest(_A, ["className", "onClick", "name", "to", "params", "children"]);
+  const router = useRouter();
+  const container = useContainer();
+  if (!router) {
+    return null;
+  }
+  let path = "";
+  const props = __spreadProps(__spreadValues({
+    onClick,
+    className: appendClassNames(className, "humany-route-link"),
+    to: path,
+    innerRef: forwardedRef
+  }, other), {
+    ref: null
+  });
+  if (name) {
+    const routes = router.routes || [];
+    const route = routes.find((r) => r.name === name);
+    if (!route) {
+      return /* @__PURE__ */ React.createElement(Link$1, __spreadProps(__spreadValues({}, props), {
+        onClick: (e) => {
+          onClick(e);
+          e.preventDefault();
+        }
+      }), children);
+    }
+    const encodedParams = Object.keys(params).reduce((acc, key) => {
+      acc[key] = typeof params[key] === "string" ? encodeURIComponent(params[key]) : params[key];
+      return acc;
+    }, {});
+    try {
+      path = router.generate(name, encodedParams || {});
+    } catch (e) {
+      return /* @__PURE__ */ React.createElement(Link$1, __spreadValues({}, props), children);
+    }
+    if (path && router.settings.mode && router.settings.mode === HistoryMode.browser && path[0] !== "/") {
+      path = `/${path}`;
+    }
+  } else if (to && router.history) {
+    path = router.history.createHref({
+      hash: "",
+      pathname: to,
+      search: "",
+      state: void 0
+    });
+  } else {
+    return null;
+  }
+  if (router.settings && router.settings.mode === HistoryMode.scopedHash) {
+    const widgetName = container.get("$widget").name;
+    path = getSpecificWidgetPath(path, widgetName);
+  }
+  return /* @__PURE__ */ React.createElement(Link$1, __spreadProps(__spreadValues({}, props), {
+    to: path
+  }), children);
+});
+var Link = forwardRef((_B, ref) => {
+  var _C = _B, {
+    className,
+    disabled = false,
+    role = "link",
+    tabIndex = 0,
+    onClick = () => {
+    },
+    onKeyDown = () => {
+    },
+    title,
+    href,
+    children,
+    target,
+    routeName,
+    params
+  } = _C, other = __objRest(_C, [
+    "className",
+    "disabled",
+    "role",
+    "tabIndex",
+    "onClick",
+    "onKeyDown",
+    "title",
+    "href",
+    "children",
+    "target",
+    "routeName",
+    "params"
+  ]);
+  const props = {
+    title,
+    disabled,
+    role,
+    tabIndex,
+    className: appendClassNames(className, "humany-link", [!!disabled, "humany-disabled"]),
+    onClick: (e) => {
+      e.persist();
+      if (disabled) {
+        e.preventDefault();
+        return;
+      }
+      onClick(e);
+    },
+    onKeyDown: (e) => {
+      e.persist();
+      if (disabled) {
+        if (e.key !== "Tab") {
+          e.preventDefault();
+        }
+        return;
+      }
+      onKeyDown(e);
+    }
+  };
+  return routeName ? /* @__PURE__ */ React.createElement(StyledRouteLink, __spreadProps(__spreadValues(__spreadValues({
+    name: routeName,
+    params
+  }, props), convertToStringAttributes(other)), {
+    ref
+  }), children) : /* @__PURE__ */ React.createElement(StyledLink, __spreadProps(__spreadValues(__spreadValues({
+    href,
+    target
+  }, props), convertToStringAttributes(other)), {
+    ref
+  }), children);
+});
+const StyledRouteLink = styled(RouteLink)`
+    ${(p) => p.disabled ? `
+      pointer-events: none;
+      opacity: .7;
+    ` : "cursor: pointer;"}
+`;
+const StyledLink = styled.a`
+    ${(p) => p.disabled ? `
+    pointer-events: none;
+    opacity: .7;
+  ` : "cursor: pointer;"}
+`;
+const Overlay = (_D) => {
+  var _E = _D, {
     visible,
     duration = 500,
     children,
     onClick = () => {
     }
-  } = _A, other = __objRest(_A, [
+  } = _E, other = __objRest(_E, [
     "visible",
     "duration",
     "children",
@@ -2352,14 +2510,14 @@ const Overlay = (_z) => {
     classNames: "humany-overlay-transition",
     unmountOnExit: true,
     timeout: duration
-  }, /* @__PURE__ */ React.createElement(Portal, null, /* @__PURE__ */ React.createElement(Wrapper$5, __spreadValues({
+  }, /* @__PURE__ */ React.createElement(Portal, null, /* @__PURE__ */ React.createElement(Wrapper$4, __spreadValues({
     className: "humany-overlay",
     duration,
     ref,
     onClick: onOverlayClick
   }, other), children)));
 };
-const Wrapper$5 = styled.div`
+const Wrapper$4 = styled.div`
     background: rgba(0, 0, 0, 0.6);
     min-width: 100%;
     min-height: 100%;
@@ -2390,78 +2548,6 @@ const Wrapper$5 = styled.div`
         opacity: 0;
     }
 `;
-const ZoomButtons = ({ zoom, zoomLevel }) => {
-  return /* @__PURE__ */ React.createElement(Wrapper$4, null, /* @__PURE__ */ React.createElement(Buttons, null, /* @__PURE__ */ React.createElement(StyledButton$1, {
-    "aria-label": "Zoom out",
-    onClick: () => {
-      zoom(false);
-    }
-  }, /* @__PURE__ */ React.createElement(StyledSymbolBadge$1, {
-    size: 24,
-    symbol: { type: "Svg", content: "zoom-out" }
-  })), /* @__PURE__ */ React.createElement(StyledButton$1, {
-    "aria-label": "Zoom in",
-    onClick: () => {
-      zoom(true);
-    }
-  }, /* @__PURE__ */ React.createElement(StyledSymbolBadge$1, {
-    size: 24,
-    symbol: { type: "Svg", content: "zoom-in" }
-  }))), /* @__PURE__ */ React.createElement(ZoomLevel, null, /* @__PURE__ */ React.createElement(Typography, {
-    variant: "p"
-  }, zoomLevel, "%")));
-};
-const Wrapper$4 = styled.div`
-    width: 100vw;
-    display: flex;
-    position: absolute;
-    bottom: 0;
-    margin-bottom: ${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
-}};
-    justify-content: center;
-    flex-direction: row;
-`;
-const ZoomLevel = styled.div`
-    right: 45px;
-    position: absolute;
-    color: #fff;
-    font-size: ${(p) => {
-  var _a;
-  return (_a = p.theme.fonts) == null ? void 0 : _a.normal;
-}};
-    line-height: 1.5em;
-    ${(p) => {
-  var _a, _b;
-  return ((_a = p.theme.fonts) == null ? void 0 : _a.type) && `
-    font-family: ${(_b = p.theme.fonts) == null ? void 0 : _b.type};
-  `;
-}}
-`;
-const Buttons = styled.div`
-    position: relative;
-    margin: ${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
-}};
-`;
-const StyledSymbolBadge$1 = styled(SymbolBadge)`
-    path {
-        stroke: #ffffff;
-    }
-`;
-const StyledButton$1 = styled(Button)`
-    transition: opacity 300ms ease-in-out;
-    opacity: 0.7;
-    &:hover {
-        opacity: 1;
-    }
-    margin: ${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.small;
-}};
-`;
 const spin = keyframes`
   100% {
     transform: rotate(360deg);
@@ -2534,9 +2620,9 @@ const SpinnerCircle = styled.circle`
 }};
     stroke-width: 2px;
 `;
-const Loader = ({ loading = false }) => {
+const Loader = ({ className, loading = false }) => {
   return /* @__PURE__ */ React.createElement(Wrapper$3, {
-    className: "humany-loader",
+    className: appendClassNames("humany-loader", className),
     "data-loading": loading
   }, /* @__PURE__ */ React.createElement(Spinner, {
     className: "humany-spinner"
@@ -2551,8 +2637,9 @@ const Loader = ({ loading = false }) => {
     "stroke-miterlimit": "10"
   }))));
 };
-const ZoomImg = (_B) => {
-  var _C = _B, { zoomState } = _C, attrs = __objRest(_C, ["zoomState"]);
+const ZoomImg = (_F) => {
+  var _G = _F, { zoomState, src } = _G, attrs = __objRest(_G, ["zoomState", "src"]);
+  var _b;
   const ref = useRef(null);
   const [loaded, setLoaded] = useState(false);
   const _a = attrs.style || {}, { width, height } = _a, restStyle = __objRest(_a, ["width", "height"]);
@@ -2566,8 +2653,11 @@ const ZoomImg = (_B) => {
       }
     }
     return null;
-  }, [zoomState, ref, loaded]);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Loader, {
+  }, [zoomState, ref, loaded, src]);
+  useEffect(() => {
+    setLoaded(false);
+  }, [src]);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(StyledLoader, {
     loading: !loaded
   }), /* @__PURE__ */ React.createElement(Img, __spreadProps(__spreadValues({
     onLoad: () => {
@@ -2577,19 +2667,28 @@ const ZoomImg = (_B) => {
     imageSize,
     draggable: "false"
   }, attrs), {
-    style: restStyle
+    alt: ((_b = attrs.alt) == null ? void 0 : _b.toString()) || "",
+    style: restStyle,
+    src,
+    loaded
   })), /* @__PURE__ */ React.createElement(EmptyDiv, null));
 };
+const StyledLoader = styled(Loader)`
+    svg circle {
+        stroke: #ffffff;
+    }
+`;
 const Img = styled.img`
     transform: none;
 
-    ${(props) => props.imageSize ? css`
-                  width: ${props.imageSize[0]};
-                  height: ${props.imageSize[1]};
-                  display: inline-block;
-              ` : "display:none;"}
+    ${(props) => props.imageSize && css`
+            width: ${props.imageSize[0]};
+            height: ${props.imageSize[1]};
+            display: inline-block;
+        `}
     vertical-align: middle;
     position: relative;
+    ${(props) => !props.loaded && "display:none;"}
 `;
 const EmptyDiv = styled.div`
     height: 100%;
@@ -2616,21 +2715,63 @@ const useFadeOut = () => {
   }, [show, timeOut]);
   return [show, triggerChange];
 };
-const Lightbox = ({ attrs }) => {
-  const [visible, toggleVisible] = useToggle(false);
+const Lightbox = ({ attrs, htmlBody }) => {
+  var _a;
   const esc = useKeyPress("Escape");
   const [zoomState, setZoomState] = useState(80);
   const [scroll, setScroll] = useState({ top: 0, left: 0, x: 0, y: 0 });
   const [scrolling, setScrolling] = useState(false);
   const [show, triggerFadeOut] = useFadeOut();
-  const ref = useRef(null);
+  const [openImage, setOpenImage] = useState(null);
+  const imageLinkRef = useRef(null);
+  const topButtonsRef = useRef(null);
+  const contentRef = useRef(null);
   useEffect(() => {
     if (esc) {
-      toggleVisible(false);
+      setOpenImage(null);
     }
   }, [esc]);
+  useEffect(() => {
+    setZoomState(80);
+  }, [openImage]);
+  useEffect(() => {
+    if (openImage === null || topButtonsRef.current === null) {
+      return;
+    }
+    const firstButton = topButtonsRef.current.firstElementChild;
+    if (!firstButton) {
+      return;
+    }
+    firstButton.focus();
+  }, [openImage, topButtonsRef]);
+  useEffect(() => {
+    if (openImage !== null || imageLinkRef.current === null) {
+      return;
+    }
+    imageLinkRef.current.focus();
+  }, [openImage, imageLinkRef]);
+  const imageList = useMemo(() => {
+    const div = document.createElement("div");
+    div.innerHTML = htmlBody || "";
+    const images = div.getElementsByTagName("img");
+    const list2 = Array.from(images).reduce((acc, imgElement) => {
+      const src = imgElement.getAttribute("src");
+      if (src) {
+        acc.push(src);
+      }
+      return acc;
+    }, []);
+    return list2;
+  }, [htmlBody]);
+  const toggleVisible = useCallback(() => {
+    const { src } = attrs;
+    if (src) {
+      const position = imageList.indexOf(src);
+      setOpenImage(position);
+    }
+  }, [imageList, attrs]);
   const overlayClick = useCallback((e) => {
-    toggleVisible(false);
+    setOpenImage(null);
   }, [toggleVisible]);
   const changeZoomState = useCallback((zoomIn) => {
     if (zoomIn) {
@@ -2646,14 +2787,14 @@ const Lightbox = ({ attrs }) => {
     }
   }, [attrs]);
   const mouseDownHandler = useCallback((e) => {
-    const ele = ref.current;
+    const ele = contentRef.current;
     if (ele) {
       setScroll({ top: ele.scrollTop, left: ele.scrollLeft, x: e.clientX, y: e.clientY });
       setScrolling(true);
     }
-  }, [ref]);
+  }, [contentRef]);
   const mouseDragHandler = useCallback((e) => {
-    const ele = ref.current;
+    const ele = contentRef.current;
     if (ele && scrolling) {
       const dx = e.clientX - scroll.x;
       const dy = e.clientY - scroll.y;
@@ -2666,74 +2807,285 @@ const Lightbox = ({ attrs }) => {
     setScrolling(false);
   };
   const isDraggable = useMemo(() => {
-    if (ref.current) {
-      const image = ref.current.getElementsByTagName("img");
-      if (image) {
-        const img = image[0];
-        return img.width > window.innerWidth || img.height > window.innerHeight;
+    if (contentRef.current) {
+      const imageElements = contentRef.current.getElementsByTagName("img");
+      if (imageElements && imageElements.length) {
+        const imgElement = imageElements[0];
+        return imgElement.width > window.innerWidth || imgElement.height > window.innerHeight;
       }
     }
     return false;
-  }, [ref, zoomState]);
+  }, [contentRef, zoomState]);
+  const navLeft = () => {
+    if (openImage !== null)
+      setOpenImage(openImage - 1);
+  };
+  const navRight = () => {
+    if (openImage !== null)
+      setOpenImage(openImage + 1);
+  };
+  const canNavigateLeft = openImage !== null && openImage > 0 && imageList.length > 1;
+  const canNavigateRight = openImage !== null && imageList.length - 1 > openImage;
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Overlay, {
-    visible,
+    visible: openImage !== null,
     onClick: overlayClick
   }, /* @__PURE__ */ React.createElement(DraggableArea, {
     onMouseDown: () => triggerFadeOut(),
     onMouseMove: () => triggerFadeOut(),
-    onTouchStart: () => triggerFadeOut()
+    onTouchStart: () => triggerFadeOut(),
+    onKeyDown: () => triggerFadeOut()
   }, /* @__PURE__ */ React.createElement(TransparentBarTop, {
-    show
-  }, /* @__PURE__ */ React.createElement(DownloadButton, {
-    onClick: () => downloadImage()
-  }, /* @__PURE__ */ React.createElement(StyledSymbolBadge, {
-    size: 20,
-    symbol: { type: "Svg", content: "download" }
-  })), /* @__PURE__ */ React.createElement(CloseButton, {
-    onClick: () => toggleVisible(false)
-  }, /* @__PURE__ */ React.createElement(StyledSymbolBadge, {
-    size: 20,
-    symbol: { type: "Svg", content: "lightbox-close" }
-  }))), /* @__PURE__ */ React.createElement(Content$1, {
-    scrolling,
-    isDraggable,
-    ref,
+    show: show.toString()
+  }, /* @__PURE__ */ React.createElement(TopRightButtons, {
+    ref: topButtonsRef,
+    buttons: [
+      {
+        id: "download",
+        onClick: downloadImage,
+        icon: "download"
+      },
+      {
+        id: "lightbox-close",
+        onClick: () => setOpenImage(null),
+        icon: "lightbox-close"
+      }
+    ]
+  })), /* @__PURE__ */ React.createElement(Content$1, {
+    scrolling: scrolling.toString(),
+    isDraggable: isDraggable.toString(),
+    ref: contentRef,
     onMouseMove: mouseDragHandler,
     onMouseDown: mouseDownHandler,
     onMouseUp: mouseStopDragHandler
-  }, /* @__PURE__ */ React.createElement(ZoomImg, __spreadValues({
+  }, openImage !== null && /* @__PURE__ */ React.createElement(ZoomImg, __spreadProps(__spreadValues({
     zoomState
-  }, attrs))), /* @__PURE__ */ React.createElement(TransparentBarBottom, {
-    show
-  }, /* @__PURE__ */ React.createElement(ZoomButtons, {
-    zoom: changeZoomState,
-    zoomLevel: zoomState
-  })))), /* @__PURE__ */ React.createElement("a", {
-    onClick: () => toggleVisible()
-  }, /* @__PURE__ */ React.createElement(Thumbnail, __spreadValues({}, attrs))));
+  }, attrs), {
+    src: imageList[openImage]
+  }))), /* @__PURE__ */ React.createElement(CenterEdgeButtons, {
+    show: show.toString(),
+    buttons: [
+      {
+        id: "previous",
+        onClick: navLeft,
+        icon: "caret-left",
+        circle: true,
+        show: canNavigateLeft
+      },
+      {
+        id: "next",
+        onClick: navRight,
+        icon: "caret-right",
+        circle: true,
+        show: canNavigateRight
+      }
+    ]
+  }), /* @__PURE__ */ React.createElement(TransparentBarBottom, {
+    show: show.toString()
+  }, /* @__PURE__ */ React.createElement(BottomCenterButtons, {
+    buttons: [
+      {
+        id: "zoom-out",
+        onClick: () => changeZoomState(false),
+        icon: "zoom-out"
+      },
+      {
+        id: "zoom-in",
+        onClick: () => changeZoomState(true),
+        icon: "zoom-in"
+      }
+    ]
+  }), /* @__PURE__ */ React.createElement(ZoomLevel, {
+    variant: "span"
+  }, zoomState, "%")))), /* @__PURE__ */ React.createElement(Link, {
+    ref: imageLinkRef,
+    onClick: toggleVisible,
+    onKeyDown: (e) => {
+      if (e.key !== "Enter") {
+        return;
+      }
+      e.preventDefault();
+      toggleVisible();
+    },
+    tabIndex: 0
+  }, /* @__PURE__ */ React.createElement(Thumbnail, __spreadProps(__spreadValues({}, attrs), {
+    alt: ((_a = attrs.alt) == null ? void 0 : _a.toString()) || ""
+  }))));
 };
-const TransparentBar = styled.div`
-    position: absolute;
-    width: 100vw;
-    height: 88px;
-    left: 0px;
+const ButtonSet = forwardRef(({ show = "true", buttons, className }, ref) => {
+  return /* @__PURE__ */ React.createElement(ButtonSetWrapper, {
+    ref,
+    show,
+    className: appendClassNames("humany-button-set", className)
+  }, buttons.map(({ id, circle = false, show: show2 = true, onClick, icon }, index) => /* @__PURE__ */ React.createElement(ButtonSetButton, {
+    key: id + index.toString(),
+    circle: circle.toString(),
+    onClick,
+    tabIndex: !show2 ? -1 : void 0,
+    show: show2.toString(),
+    icon
+  }, /* @__PURE__ */ React.createElement(SymbolBadge, {
+    size: 24,
+    symbol: { type: "Svg", content: icon }
+  }))));
+});
+const FadingDiv = styled.div`
     transition: opacity 0.3s ease 0s;
     z-index: 5;
-    ${(p) => p.show ? "opacity: 1;" : css`
+    ${(p) => p.show === "true" ? "opacity: 1;" : css`
+                  opacity: 0;
+                  pointer-events: none;
+              `}
+`;
+const ButtonSetWrapper = styled(FadingDiv)`
+    position: fixed;
+    display: flex;
+    gap: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
+}};
+`;
+const BUTTON_SIZE = "39px";
+const ButtonSetButton = styled(Button)`
+    width: ${BUTTON_SIZE};
+    height: ${BUTTON_SIZE};
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    ${(p) => p.icon === "caret-left" && css`
+            svg {
+                position: relative;
+                left: -2px;
+            }
+        `}
+
+    ${(p) => {
+  var _a, _b, _c;
+  return p.circle === "true" ? css`
+                  background-color: #ffffff;
+                  border-radius: 50%;
+
+                  svg {
+                      path,
+                      line {
+                          stroke: ${(_a = p.theme.colors) == null ? void 0 : _a.text};
+                      }
+                  }
+
+                  &:focus {
+                      ${((_b = p.theme.accessibility) == null ? void 0 : _b.isTabbing) && css`
+                          ${borderTabStyle}
+                          outline-color: #ffffff;
+                          background-color: transparent;
+
+                          svg {
+                              path,
+                              line {
+                                  stroke: #ffffff;
+                              }
+                          }
+                      `}
+                  }
+              ` : css`
+                  svg {
+                      path,
+                      line {
+                          stroke: #ffffff;
+                      }
+                  }
+                  &:focus {
+                      ${((_c = p.theme.accessibility) == null ? void 0 : _c.isTabbing) && borderTabStyle};
+                      outline-color: #ffffff;
+                  }
+              `;
+}}
+
+    ${(p) => p.show === "true" ? css`
+                  opacity: 0.8;
+                  transition: opacity 0.3s ease 0s;
+                  &:hover {
+                      opacity: 1;
+                  }
+              ` : css`
                   opacity: 0;
                   pointer-events: none;
               `}
 `;
+const TopRightButtons = styled(ButtonSet)`
+    top: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.large;
+}};
+    right: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.large;
+}};
+`;
+const BottomCenterButtons = styled(ButtonSet)`
+    bottom: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.large;
+}};
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+`;
+const CenterEdgeButtons = styled(ButtonSet)`
+    display: block;
+    button {
+        position: fixed;
+        top: calc(50% - calc(${BUTTON_SIZE} / 2));
+        &:first-child {
+            left: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.large;
+}};
+        }
+        &:last-child {
+            right: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.large;
+}};
+        }
+    }
+`;
+const ZoomLevel = styled(Typography)`
+    position: fixed;
+    bottom: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.large;
+}};
+    right: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.large;
+}};
+    color: #ffffff;
+    font-size: ${(p) => {
+  var _a;
+  return (_a = p.theme.fonts) == null ? void 0 : _a.medium;
+}};
+    font-family: ${(p) => {
+  var _a;
+  return (_a = p.theme.fonts) == null ? void 0 : _a.type;
+}};
+`;
+const TransparentBar = styled(FadingDiv)`
+    position: absolute;
+    width: 100vw;
+    height: 88px;
+    left: 0px;
+    z-index: 5;
+`;
 const DraggableArea = styled.div`
     width: 100%;
 `;
 const TransparentBarTop = styled(TransparentBar)`
     top: 0px;
-    background-image: linear-gradient(to bottom, rgb(15, 15, 15, 0.8), rgba(30, 30, 30, 0));
+    background-image: linear-gradient(to bottom, rgb(34, 34, 34, 0.8), rgba(34, 34, 34, 0));
 `;
 const TransparentBarBottom = styled(TransparentBar)`
     bottom: 0px;
-    background-image: linear-gradient(to top, rgb(15, 15, 15, 0.8), rgba(30, 30, 30, 0));
+    background-image: linear-gradient(to top, rgb(34, 34, 34, 0.8), rgba(34, 34, 34, 0));
 `;
 const Content$1 = styled.div`
     width: 100%;
@@ -2743,168 +3095,11 @@ const Content$1 = styled.div`
     vertical-align: middle;
     white-space: nowrap;
     justify-content: center;
-    cursor: ${(props) => props.isDraggable ? props.scrolling ? "grabbing" : "grab" : "auto"};
-`;
-const StyledButton = styled(Button)`
-    position: fixed;
-    top: 34px;
-    transition: opacity 300ms ease-in-out;
-    opacity: 0.7;
-    &:hover {
-        opacity: 1;
-    }
-`;
-const CloseButton = styled(StyledButton)`
-    right: 32px;
-`;
-const DownloadButton = styled(StyledButton)`
-    right: 80px;
-`;
-const StyledSymbolBadge = styled(SymbolBadge)`
-    path {
-        stroke: #ffffff;
-    }
+    cursor: ${(p) => p.isDraggable === "true" ? p.scrolling === "true" ? "grabbing" : "grab" : "auto"};
 `;
 const Thumbnail = styled.img`
     cursor: pointer;
 `;
-var RouteLink = forwardRef((_D, forwardedRef) => {
-  var _E = _D, { className, onClick = () => {
-  }, name = "", to = "", params = {}, children } = _E, other = __objRest(_E, ["className", "onClick", "name", "to", "params", "children"]);
-  const router = useRouter();
-  const container = useContainer();
-  if (!router) {
-    return null;
-  }
-  let path = "";
-  const props = __spreadProps(__spreadValues({
-    onClick,
-    className: appendClassNames(className, "humany-route-link"),
-    to: path,
-    innerRef: forwardedRef
-  }, other), {
-    ref: null
-  });
-  if (name) {
-    const routes = router.routes || [];
-    const route = routes.find((r) => r.name === name);
-    if (!route) {
-      return /* @__PURE__ */ React.createElement(Link$1, __spreadProps(__spreadValues({}, props), {
-        onClick: (e) => {
-          onClick(e);
-          e.preventDefault();
-        }
-      }), children);
-    }
-    const encodedParams = Object.keys(params).reduce((acc, key) => {
-      acc[key] = typeof params[key] === "string" ? encodeURIComponent(params[key]) : params[key];
-      return acc;
-    }, {});
-    try {
-      path = router.generate(name, encodedParams || {});
-    } catch (e) {
-      return /* @__PURE__ */ React.createElement(Link$1, __spreadValues({}, props), children);
-    }
-    if (path && router.settings.mode && router.settings.mode === HistoryMode.browser && path[0] !== "/") {
-      path = `/${path}`;
-    }
-  } else if (to && router.history) {
-    path = router.history.createHref({
-      hash: "",
-      pathname: to,
-      search: "",
-      state: void 0
-    });
-  } else {
-    return null;
-  }
-  if (router.settings && router.settings.mode === HistoryMode.scopedHash) {
-    const widgetName = container.get("$widget").name;
-    path = getSpecificWidgetPath(path, widgetName);
-  }
-  return /* @__PURE__ */ React.createElement(Link$1, __spreadProps(__spreadValues({}, props), {
-    to: path
-  }), children);
-});
-var Link = forwardRef((_F, ref) => {
-  var _G = _F, {
-    className,
-    disabled = false,
-    role = "link",
-    tabIndex = 0,
-    onClick = () => {
-    },
-    onKeyDown = () => {
-    },
-    title,
-    href,
-    children,
-    target,
-    routeName,
-    params
-  } = _G, other = __objRest(_G, [
-    "className",
-    "disabled",
-    "role",
-    "tabIndex",
-    "onClick",
-    "onKeyDown",
-    "title",
-    "href",
-    "children",
-    "target",
-    "routeName",
-    "params"
-  ]);
-  const props = {
-    title,
-    disabled,
-    role,
-    tabIndex,
-    className: appendClassNames(className, "humany-link", [!!disabled, "humany-disabled"]),
-    onClick: (e) => {
-      e.persist();
-      if (disabled) {
-        e.preventDefault();
-        return;
-      }
-      onClick(e);
-    },
-    onKeyDown: (e) => {
-      e.persist();
-      if (disabled) {
-        if (e.key !== "Tab") {
-          e.preventDefault();
-        }
-        return;
-      }
-      onKeyDown(e);
-    }
-  };
-  return routeName ? /* @__PURE__ */ React.createElement(StyledRouteLink, __spreadProps(__spreadValues(__spreadValues({
-    name: routeName,
-    params
-  }, props), convertToStringAttributes(other)), {
-    ref
-  }), children) : /* @__PURE__ */ React.createElement(StyledLink, __spreadProps(__spreadValues(__spreadValues({
-    href,
-    target
-  }, props), convertToStringAttributes(other)), {
-    ref
-  }), children);
-});
-const StyledRouteLink = styled(RouteLink)`
-    ${(p) => p.disabled ? `
-      pointer-events: none;
-      opacity: .7;
-    ` : "cursor: pointer;"}
-`;
-const StyledLink = styled.a`
-    ${(p) => p.disabled ? `
-    pointer-events: none;
-    opacity: .7;
-  ` : "cursor: pointer;"}
-`;
 const Modal = forwardRef((_H, ref) => {
   var _I = _H, { className, children, trigger, onOverlayClick = () => {
   }, close = false } = _I, other = __objRest(_I, ["className", "children", "trigger", "onOverlayClick", "close"]);
@@ -2949,7 +3144,7 @@ const Modal = forwardRef((_H, ref) => {
     tabIndex: -1
   }, other), {
     ref: innerRef
-  }), /* @__PURE__ */ React.createElement(CloseButton$1, {
+  }), /* @__PURE__ */ React.createElement(CloseButton, {
     onClick: () => toggleVisible(false),
     tabIndex: 0,
     ref: closeButtonRef
@@ -3495,5 +3690,5 @@ const createReactComponent = (container, type, reactComponent, fn, options) => {
     }), type, options);
   });
 };
-export { AnchorLink, Button, Checkbox, ColumnContext, ComponentNodeContext, ComponentPropertyContext, Confirm, ContainerContext, DateFormats, Drawer, AnimationType as DrawerAnimationType, Dropdown, Empty, grid as Grid, Html, Icon, input as Input, ItemList, ItemTree, Lightbox, Link, List, Modal, NotFound, Overlay, Paragraph, Portal, RouteLink, RoutingContext, StyledText, SymbolBadge, TabStop, Text, TextLink, Timestamp, Tooltip, TransitionComponent, Typography, WidgetLink, WidgetOverlayOutlet, borderTabStyle, browser, buttonCss, contentBox, convertToStringAttributes, createEmptyComponent, createReactComponent, defaultRenderInstructions, embeddedLinkMapper, filterCssProps, filterCssPropsStyle, genericHashLink, genericHtml, headingElement, invertedHoverButton, itemList, linkTabStyle, list, paddedBorderTabStyle, parseHtmlString as processHtmlString, transitionComposer, useAction, useChildren, useColumns, useComponent, useComponentDescriptor, useComponentNode, useComponentPlatform, useContainer, useContext, useDispatch, useEventListener, useEvents, useIsMounted, useKeyPress, useLayout, usePrevious, useProperties, useRenderState, useRouteData, useRouter, useScroll, useSettings, useToggle, useTransitionEnd, useUniqueMenu, useWidgetEvent };
+export { AnchorLink, Button, Checkbox, ColumnContext, ComponentNodeContext, ComponentPropertyContext, Confirm, ContainerContext, DateFormats, Drawer, AnimationType as DrawerAnimationType, Dropdown, Empty, grid as Grid, Html, Icon, input as Input, ItemList, ItemTree, Lightbox, Link, List, Modal, NotFound, Overlay, Paragraph, Portal, RouteLink, RoutingContext, StyledText, SymbolBadge, TabStop, Text, TextLink, Timestamp, Tooltip, TransitionComponent, Typography, WidgetLink, WidgetOverlayOutlet, borderTabStyle, browser, buttonCss, contentBox, convertToStringAttributes, createEmptyComponent, createReactComponent, defaultRenderInstructions, embeddedLinkMapper, filterCssProps, filterCssPropsStyle, genericHashLink, genericHtml, headingElement, imageLightboxRenderer, invertedHoverButton, itemList, linkTabStyle, list, paddedBorderTabStyle, parseHtmlString as processHtmlString, transitionComposer, useAction, useChildren, useColumns, useComponent, useComponentDescriptor, useComponentNode, useComponentPlatform, useContainer, useContext, useDispatch, useEventListener, useEvents, useIsMounted, useKeyPress, useLayout, usePrevious, useProperties, useRenderState, useRouteData, useRouter, useScroll, useSettings, useToggle, useTransitionEnd, useUniqueMenu, useWidgetEvent };
 //# sourceMappingURL=index.js.map