@telia-ace/widget-ui 1.0.14 → 1.0.17

package/dist/index.js

@@ -29,9 +29,9 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import styled, { css } from "styled-components";
+import styled, { css, keyframes } from "styled-components";
 import { kebabCase, appendClassNames, uuid, removeNullAndUndefinedValues } from "@telia-ace/widget-utilities";
-import React, { forwardRef, createContext, useContext as useContext$1, useState, useEffect, useRef, useCallback, useImperativeHandle, Component, useMemo, lazy } from "react";
+import React, { forwardRef, createContext, useContext as useContext$1, useState, useEffect, useRef, useCallback, useImperativeHandle, useMemo, Component, lazy } from "react";
 import { CSSTransition, Transition } from "react-transition-group";
 import { Container, WidgetState } from "@webprovisions/platform";
 import { ComponentPlatform, asDescriptor, createEventSubscriber, ComponentQuery, WidgetRenderState, extendComponent } from "@telia-ace/widget-core";
@@ -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)
     }
   };
 };
@@ -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;
@@ -1601,6 +1602,30 @@ const SymbolBadge = (_g) => {
             fill: "white"
           }));
         }
+        case "video": {
+          if (style.minWidth && typeof style.minWidth === "number") {
+            style.minWidth = `${style.minWidth}px`;
+          }
+          return /* @__PURE__ */ React.createElement("svg", __spreadProps(__spreadValues({
+            viewBox: "0 0 25 25"
+          }, svgProps), {
+            style
+          }), /* @__PURE__ */ React.createElement("path", {
+            d: "M16.8245 10.0758C18.7392 8.55799 21.3085 7.08973 21.7947 7.61552C22.5982 8.47863 22.5288 16.6929 21.7947 17.4766C21.3482 17.9627 18.7589 16.4945 16.8245 14.9866",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }), /* @__PURE__ */ React.createElement("path", {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M2.61914 12.5385C2.61914 7.12973 4.41578 5.32715 9.80764 5.32715C15.1985 5.32715 16.9952 7.12973 16.9952 12.5385C16.9952 17.9462 15.1985 19.7497 9.80764 19.7497C4.41578 19.7497 2.61914 17.9462 2.61914 12.5385Z",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }));
+        }
         case "star-empty": {
           return /* @__PURE__ */ React.createElement("svg", __spreadValues({
             viewBox: "0 0 13 12"
@@ -1628,6 +1653,79 @@ const SymbolBadge = (_g) => {
             fill: "black"
           }));
         }
+        case "zoom-in": {
+          return /* @__PURE__ */ React.createElement("svg", __spreadValues({
+            viewBox: "0 0 24 24"
+          }, svgProps), /* @__PURE__ */ React.createElement("path", {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M21.9774 20.8287L17.9149 16.7662C17.8437 16.6957 17.76 16.639 17.668 16.5992C20.7612 12.9331 20.415 7.48045 16.883 4.23507C13.3509 0.989694 7.88848 1.10517 4.49673 4.49691C1.10499 7.88866 0.98951 13.3511 4.23489 16.8831C7.48027 20.4152 12.9329 20.7614 16.599 17.6682C16.6388 17.7601 16.6955 17.8439 16.766 17.9151L20.8285 21.9776C21.1457 22.2948 21.6601 22.2948 21.9774 21.9776C22.2947 21.6603 22.2947 21.1459 21.9774 20.8287ZM10.8404 18.1531C6.80186 18.1531 3.52794 14.8792 3.52794 10.8406C3.52794 6.80204 6.80186 3.52813 10.8404 3.52813C14.879 3.52813 18.1529 6.80204 18.1529 10.8406C18.1483 14.8773 14.8771 18.1484 10.8404 18.1531Z",
+            fill: "white"
+          }), /* @__PURE__ */ React.createElement("path", {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M10.8749 6.75003C11.2892 6.75003 11.6249 7.08581 11.6249 7.50003V14.25C11.6249 14.6642 11.2892 15 10.8749 15C10.4607 15 10.1249 14.6642 10.1249 14.25V7.50003C10.1249 7.08581 10.4607 6.75003 10.8749 6.75003Z",
+            fill: "white"
+          }), /* @__PURE__ */ React.createElement("path", {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M6.74994 10.875C6.74994 10.4608 7.08573 10.125 7.49994 10.125H14.2499C14.6642 10.125 14.9999 10.4608 14.9999 10.875C14.9999 11.2892 14.6642 11.625 14.2499 11.625H7.49994C7.08573 11.625 6.74994 11.2892 6.74994 10.875Z",
+            fill: "white"
+          }));
+        }
+        case "zoom-out": {
+          return /* @__PURE__ */ React.createElement("svg", __spreadValues({
+            viewBox: "0 0 24 24"
+          }, svgProps), /* @__PURE__ */ React.createElement("path", {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M22.1025 20.9536L18.04 16.8911C17.9688 16.8206 17.8851 16.764 17.7931 16.7241C20.8864 13.0581 20.5401 7.60539 17.0081 4.36001C13.476 1.11463 8.0136 1.23011 4.62185 4.62185C1.23011 8.0136 1.11463 13.476 4.36001 17.0081C7.60539 20.5401 13.0581 20.8864 16.7241 17.7931C16.764 17.8851 16.8206 17.9688 16.8911 18.04L20.9536 22.1025C21.2709 22.4198 21.7853 22.4198 22.1025 22.1025C22.4198 21.7853 22.4198 21.2709 22.1025 20.9536ZM10.9656 18.2781C6.92698 18.2781 3.65306 15.0041 3.65306 10.9656C3.65306 6.92698 6.92698 3.65306 10.9656 3.65306C15.0041 3.65306 18.2781 6.92698 18.2781 10.9656C18.2734 15.0022 15.0022 18.2734 10.9656 18.2781Z",
+            fill: "white"
+          }), /* @__PURE__ */ React.createElement("path", {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M6.87506 11C6.87506 10.5858 7.21085 10.25 7.62506 10.25H14.3751C14.7893 10.25 15.1251 10.5858 15.1251 11C15.1251 11.4142 14.7893 11.75 14.3751 11.75H7.62506C7.21085 11.75 6.87506 11.4142 6.87506 11Z",
+            fill: "white"
+          }));
+        }
+        case "download": {
+          return /* @__PURE__ */ React.createElement("svg", __spreadValues({
+            viewBox: "0 0 24 24"
+          }, svgProps), /* @__PURE__ */ React.createElement("path", {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M22.5 11.1346V18.4038C22.498 20.1873 21.0527 21.6326 19.2692 21.6346H4.73077C2.94731 21.6326 1.50204 20.1873 1.5 18.4038V11.1346C1.5 10.6885 1.86162 10.3269 2.30769 10.3269C2.75377 10.3269 3.11538 10.6885 3.11538 11.1346V18.4038C3.1164 19.2956 3.83904 20.0182 4.73077 20.0192H19.2692C20.161 20.0182 20.8836 19.2956 20.8846 18.4038V11.1346C20.8846 10.6885 21.2462 10.3269 21.6923 10.3269C22.1384 10.3269 22.5 10.6885 22.5 11.1346ZM11.1434 16.2663C11.6167 16.7388 12.3832 16.7388 12.8565 16.2663L17.4172 11.7057C17.7326 11.3903 17.7326 10.8789 17.4172 10.5635C17.1018 10.2481 16.5904 10.2481 16.275 10.5635L12.8076 14.0308V3.05769C12.8076 2.61162 12.446 2.25 11.9999 2.25C11.5539 2.25 11.1923 2.61162 11.1923 3.05769V14.0308L7.72485 10.5636C7.40946 10.2482 6.89812 10.2482 6.58273 10.5636C6.26734 10.8789 6.26734 11.3903 6.58273 11.7057L11.1434 16.2663Z",
+            fill: "white"
+          }));
+        }
+        case "lightbox-close": {
+          return /* @__PURE__ */ React.createElement("svg", __spreadValues({
+            viewBox: "0 0 24 24"
+          }, svgProps), /* @__PURE__ */ React.createElement("path", {
+            xmlns: "http://www.w3.org/2000/svg",
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M19.2621 18.1129C19.4674 18.3182 19.5475 18.6173 19.4724 18.8977C19.3973 19.178 19.1783 19.397 18.8979 19.4721C18.6176 19.5472 18.3184 19.4671 18.1132 19.2619L12.1877 13.3363L6.26214 19.2619C6.0569 19.4671 5.75776 19.5472 5.47741 19.4721C5.19705 19.397 4.97807 19.178 4.90294 18.8977C4.82782 18.6173 4.90798 18.3182 5.11321 18.1129L11.0388 12.1874L5.11321 6.26186C4.90798 6.05663 4.82782 5.75749 4.90294 5.47713C4.97807 5.19678 5.19705 4.97779 5.47741 4.90267C5.75776 4.82755 6.0569 4.9077 6.26214 5.11294L12.1877 11.0385L18.1132 5.11294C18.4305 4.79567 18.9449 4.79567 19.2621 5.11294C19.5794 5.4302 19.5794 5.9446 19.2621 6.26186L13.3366 12.1874L19.2621 18.1129Z",
+            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;
     }
@@ -1744,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,
@@ -1764,7 +1862,7 @@ const Drawer = ({
     "aria-expanded": visible
   }));
 };
-const Wrapper$5 = styled.div`
+const Wrapper$6 = styled.div`
     font-family: ${(p) => {
   var _a;
   return (_a = p.theme.fonts) == null ? void 0 : _a.type;
@@ -1806,7 +1904,7 @@ const Header$1 = styled(Typography)`
 const AnimationBase = css`
     transition: ${(p) => p.duration}ms;
 `;
-const WrapperWithSlideInBottom = styled(Wrapper$5)`
+const WrapperWithSlideInBottom = styled(Wrapper$6)`
     max-height: 0;
     ${AnimationBase}
 
@@ -1824,7 +1922,7 @@ const WrapperWithSlideInBottom = styled(Wrapper$5)`
         max-height: 0;
     }
 `;
-const WrapperWithSlideInRight = styled(Wrapper$5)`
+const WrapperWithSlideInRight = styled(Wrapper$6)`
     ${AnimationBase}
     transform: translateX(100%);
     height: ${(p) => p.fullScreen ? "100%" : "auto"};
@@ -1843,7 +1941,7 @@ const WrapperWithSlideInRight = styled(Wrapper$5)`
         transform: translateX(100%);
     }
 `;
-const WrapperWithSlideInLeft = styled(Wrapper$5)`
+const WrapperWithSlideInLeft = styled(Wrapper$6)`
     ${AnimationBase}
     transform: translateX(-100%);
     height: ${(p) => p.fullScreen ? "100%" : "auto"};
@@ -1862,7 +1960,7 @@ const WrapperWithSlideInLeft = styled(Wrapper$5)`
         transform: translateX(-100%);
     }
 `;
-const WrapperWithSlideInTop = styled(Wrapper$5)`
+const WrapperWithSlideInTop = styled(Wrapper$6)`
     ${AnimationBase}
     bottom: unset;
     top: 0;
@@ -1973,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,
@@ -2015,9 +2113,9 @@ const StyledDropdown = styled.div`
 `;
 const Empty = (_k) => {
   var other = __objRest(_k, []);
-  return /* @__PURE__ */ React.createElement(Wrapper$4, __spreadValues({}, other));
+  return /* @__PURE__ */ React.createElement(Wrapper$5, __spreadValues({}, other));
 };
-const Wrapper$4 = styled.div`
+const Wrapper$5 = styled.div`
     display: none;
 `;
 var grid = forwardRef((_l, ref) => {
@@ -2043,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]);
@@ -2247,129 +2348,9 @@ const ItemTree = ({
     className: appendClassNames(className, "humany-item-tree")
   }, rootItem && rootItem(!hasSelectedChildren(tree || [])), tree && renderTreeItems(tree, 1));
 };
-const Overlay = (_z) => {
-  var _A = _z, {
-    visible,
-    duration = 500,
-    children,
-    onClick = () => {
-    }
-  } = _A, other = __objRest(_A, [
-    "visible",
-    "duration",
-    "children",
-    "onClick"
-  ]);
-  const ref = useRef();
-  const onOverlayClick = useCallback((e) => {
-    if (e.target === ref.current) {
-      onClick(e);
-    }
-  }, [onClick]);
-  return /* @__PURE__ */ React.createElement(CSSTransition, {
-    in: visible,
-    className: "humany-overlay-transition",
-    classNames: "humany-overlay-transition",
-    unmountOnExit: true,
-    timeout: duration
-  }, /* @__PURE__ */ React.createElement(Portal, null, /* @__PURE__ */ React.createElement(Wrapper$3, __spreadValues({
-    className: "humany-overlay",
-    duration,
-    ref,
-    onClick: onOverlayClick
-  }, other), children)));
-};
-const Wrapper$3 = styled.div`
-    background: rgba(0, 0, 0, 0.6);
-    min-width: 100%;
-    min-height: 100%;
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    left: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 7;
-
-    transition: ${(p) => p.duration}ms;
-    opacity: 0;
-
-    &.humany-overlay-transition-enter {
-        opacity: 0.1;
-    }
-    &.humany-overlay-transition-enter-active,
-    &.humany-overlay-transition-enter-done,
-    &.humany-overlay-transition-exit {
-        opacity: 1;
-    }
-
-    &.humany-overlay-transition-exit-active,
-    &.humany-overlay-transition-exit-done {
-        opacity: 0;
-    }
-`;
-const Lightbox = ({ attrs }) => {
-  const [visible, toggleVisible] = useToggle(false);
-  const esc = useKeyPress("Escape");
-  useEffect(() => {
-    if (esc) {
-      toggleVisible(false);
-    }
-  }, [esc]);
-  const overlayClick = useCallback((e) => {
-    toggleVisible(false);
-  }, [toggleVisible]);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Overlay, {
-    visible,
-    onClick: overlayClick
-  }, /* @__PURE__ */ React.createElement(CloseButton, {
-    onClick: () => toggleVisible(false)
-  }, /* @__PURE__ */ React.createElement(StyledSymbolBadge, {
-    size: 24,
-    symbol: { type: "Svg", content: "close" }
-  })), /* @__PURE__ */ React.createElement(Content$1, null, /* @__PURE__ */ React.createElement("img", __spreadValues({}, attrs)))), /* @__PURE__ */ React.createElement("a", {
-    onClick: () => toggleVisible()
-  }, /* @__PURE__ */ React.createElement(Thumbnail, __spreadValues({}, attrs))));
-};
-const Content$1 = styled.div`
-    padding: ${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
-}};
-    max-width: 80%;
-    max-height: 80%;
-
-    img {
-        width: auto !important;
-        height: auto !important;
-        max-width: 100%;
-        max-height: 100%;
-    }
-`;
-const CloseButton = styled(Button)`
-    position: fixed;
-    top: 50px;
-    right: 50px;
-    transition: opacity 300ms ease-in-out;
-    opacity: 0.7;
-
-    &:hover {
-        opacity: 1;
-    }
-`;
-const StyledSymbolBadge = styled(SymbolBadge)`
-    path {
-        stroke: #ffffff;
-    }
-`;
-const Thumbnail = styled.img`
-    cursor: pointer;
-`;
-var RouteLink = forwardRef((_B, forwardedRef) => {
-  var _C = _B, { className, onClick = () => {
-  }, name = "", to = "", params = {}, children } = _C, other = __objRest(_C, ["className", "onClick", "name", "to", "params", "children"]);
+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) {
@@ -2425,8 +2406,8 @@ var RouteLink = forwardRef((_B, forwardedRef) => {
     to: path
   }), children);
 });
-var Link = forwardRef((_D, ref) => {
-  var _E = _D, {
+var Link = forwardRef((_B, ref) => {
+  var _C = _B, {
     className,
     disabled = false,
     role = "link",
@@ -2441,7 +2422,7 @@ var Link = forwardRef((_D, ref) => {
     target,
     routeName,
     params
-  } = _E, other = __objRest(_E, [
+  } = _C, other = __objRest(_C, [
     "className",
     "disabled",
     "role",
@@ -2504,9 +2485,624 @@ const StyledLink = styled.a`
     opacity: .7;
   ` : "cursor: pointer;"}
 `;
-const Modal = forwardRef((_F, ref) => {
-  var _G = _F, { className, children, trigger, onOverlayClick = () => {
-  }, close = false } = _G, other = __objRest(_G, ["className", "children", "trigger", "onOverlayClick", "close"]);
+const Overlay = (_D) => {
+  var _E = _D, {
+    visible,
+    duration = 500,
+    children,
+    onClick = () => {
+    }
+  } = _E, other = __objRest(_E, [
+    "visible",
+    "duration",
+    "children",
+    "onClick"
+  ]);
+  const ref = useRef();
+  const onOverlayClick = useCallback((e) => {
+    if (e.target === ref.current) {
+      onClick(e);
+    }
+  }, [onClick]);
+  return /* @__PURE__ */ React.createElement(CSSTransition, {
+    in: visible,
+    className: "humany-overlay-transition",
+    classNames: "humany-overlay-transition",
+    unmountOnExit: true,
+    timeout: duration
+  }, /* @__PURE__ */ React.createElement(Portal, null, /* @__PURE__ */ React.createElement(Wrapper$4, __spreadValues({
+    className: "humany-overlay",
+    duration,
+    ref,
+    onClick: onOverlayClick
+  }, other), children)));
+};
+const Wrapper$4 = styled.div`
+    background: rgba(0, 0, 0, 0.6);
+    min-width: 100%;
+    min-height: 100%;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 7;
+
+    transition: ${(p) => p.duration}ms;
+    opacity: 0;
+
+    &.humany-overlay-transition-enter {
+        opacity: 0.1;
+    }
+    &.humany-overlay-transition-enter-active,
+    &.humany-overlay-transition-enter-done,
+    &.humany-overlay-transition-exit {
+        opacity: 1;
+    }
+
+    &.humany-overlay-transition-exit-active,
+    &.humany-overlay-transition-exit-done {
+        opacity: 0;
+    }
+`;
+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$3 = 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 = ({ className, loading = false }) => {
+  return /* @__PURE__ */ React.createElement(Wrapper$3, {
+    className: appendClassNames("humany-loader", className),
+    "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 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"]);
+  const imageSize = useMemo(() => {
+    const img = ref.current;
+    if (img) {
+      if (img.width >= img.height) {
+        return [`${zoomState}vw`, "auto"];
+      } else {
+        return ["auto", `${zoomState}vh`];
+      }
+    }
+    return null;
+  }, [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: () => {
+      setLoaded(true);
+    },
+    ref,
+    imageSize,
+    draggable: "false"
+  }, attrs), {
+    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;
+        `}
+    vertical-align: middle;
+    position: relative;
+    ${(props) => !props.loaded && "display:none;"}
+`;
+const EmptyDiv = styled.div`
+    height: 100%;
+    display: inline-block;
+    vertical-align: middle;
+`;
+const useFadeOut = () => {
+  const timeOut = useRef();
+  const [show, setShow] = useState(true);
+  const triggerChange = useCallback(() => {
+    if (!show)
+      setShow(true);
+    if (timeOut.current) {
+      clearTimeout(timeOut.current);
+    }
+    timeOut.current = setTimeout(() => {
+      setShow(false);
+    }, 3e3);
+    return () => {
+      if (timeOut.current) {
+        clearTimeout(timeOut.current);
+      }
+    };
+  }, [show, timeOut]);
+  return [show, triggerChange];
+};
+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 [openImage, setOpenImage] = useState(null);
+  const imageLinkRef = useRef(null);
+  const topButtonsRef = useRef(null);
+  const contentRef = useRef(null);
+  useEffect(() => {
+    if (esc) {
+      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) => {
+    setOpenImage(null);
+  }, [toggleVisible]);
+  const changeZoomState = useCallback((zoomIn) => {
+    if (zoomIn) {
+      setZoomState(zoomState + 10);
+    } else {
+      setZoomState(zoomState - 10);
+    }
+  }, [setZoomState, zoomState]);
+  const downloadImage = useCallback(() => {
+    const { src } = attrs;
+    if (src) {
+      window.open(src, "_blank");
+    }
+  }, [attrs]);
+  const mouseDownHandler = useCallback((e) => {
+    const ele = contentRef.current;
+    if (ele) {
+      setScroll({ top: ele.scrollTop, left: ele.scrollLeft, x: e.clientX, y: e.clientY });
+      setScrolling(true);
+    }
+  }, [contentRef]);
+  const mouseDragHandler = useCallback((e) => {
+    const ele = contentRef.current;
+    if (ele && scrolling) {
+      const dx = e.clientX - scroll.x;
+      const dy = e.clientY - scroll.y;
+      ele.scrollTop = scroll.top - dy;
+      ele.scrollLeft = scroll.left - dx;
+    }
+  }, [scrolling, scroll]);
+  const mouseStopDragHandler = (e) => {
+    e.preventDefault();
+    setScrolling(false);
+  };
+  const isDraggable = useMemo(() => {
+    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;
+  }, [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: openImage !== null,
+    onClick: overlayClick
+  }, /* @__PURE__ */ React.createElement(DraggableArea, {
+    onMouseDown: () => triggerFadeOut(),
+    onMouseMove: () => triggerFadeOut(),
+    onTouchStart: () => triggerFadeOut(),
+    onKeyDown: () => triggerFadeOut()
+  }, /* @__PURE__ */ React.createElement(TransparentBarTop, {
+    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
+  }, openImage !== null && /* @__PURE__ */ React.createElement(ZoomImg, __spreadProps(__spreadValues({
+    zoomState
+  }, 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 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 === "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(34, 34, 34, 0.8), rgba(34, 34, 34, 0));
+`;
+const TransparentBarBottom = styled(TransparentBar)`
+    bottom: 0px;
+    background-image: linear-gradient(to top, rgb(34, 34, 34, 0.8), rgba(34, 34, 34, 0));
+`;
+const Content$1 = styled.div`
+    width: 100%;
+    height: 100vh;
+    overflow: auto;
+    text-align: center;
+    vertical-align: middle;
+    white-space: nowrap;
+    justify-content: center;
+    cursor: ${(p) => p.isDraggable === "true" ? p.scrolling === "true" ? "grabbing" : "grab" : "auto"};
+`;
+const Thumbnail = styled.img`
+    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"]);
   const [visible, toggleVisible] = useToggle();
   const [css2, innerRef] = useScroll(true);
   const closeButtonRef = useRef();
@@ -2548,7 +3144,7 @@ const Modal = forwardRef((_F, ref) => {
     tabIndex: -1
   }, other), {
     ref: innerRef
-  }), /* @__PURE__ */ React.createElement(CloseButton$1, {
+  }), /* @__PURE__ */ React.createElement(CloseButton, {
     onClick: () => toggleVisible(false),
     tabIndex: 0,
     ref: closeButtonRef
@@ -2812,8 +3408,8 @@ class TabStop extends Component {
     });
   }
 }
-var TextLink = forwardRef((_H, ref) => {
-  var _I = _H, { className, description, text, children } = _I, other = __objRest(_I, ["className", "description", "text", "children"]);
+var TextLink = forwardRef((_J, ref) => {
+  var _K = _J, { className, description, text, children } = _K, other = __objRest(_K, ["className", "description", "text", "children"]);
   return /* @__PURE__ */ React.createElement(Link, __spreadProps(__spreadValues({
     className: appendClassNames(className, "humany-text-link")
   }, other), {
@@ -2853,8 +3449,8 @@ function formatDate(unformattedDate, format) {
   }
   return `${dateString} ${timeString}`;
 }
-const Tooltip = (_J) => {
-  var _K = _J, { className, children, content, sticky = false } = _K, other = __objRest(_K, ["className", "children", "content", "sticky"]);
+const Tooltip = (_L) => {
+  var _M = _L, { className, children, content, sticky = false } = _M, other = __objRest(_M, ["className", "children", "content", "sticky"]);
   const [open, setOpen] = useState(false);
   const id = useRef(uuid());
   const ref = useRef();
@@ -2999,9 +3595,9 @@ const TransitionComponent = (props) => {
     onEnter: (node) => node.clientHeight
   }, (state) => children && children(state, def && transitionComposer.compose(state, def)));
 };
-var WidgetLink = forwardRef((_L, ref) => {
-  var _M = _L, { className, children, onClick = () => {
-  }, widgetName, activationOptions } = _M, other = __objRest(_M, ["className", "children", "onClick", "widgetName", "activationOptions"]);
+var WidgetLink = forwardRef((_N, ref) => {
+  var _O = _N, { className, children, onClick = () => {
+  }, widgetName, activationOptions } = _O, other = __objRest(_O, ["className", "children", "onClick", "widgetName", "activationOptions"]);
   const container = useContainer();
   const getWidget = () => {
     const { implementation } = container.get("$widget");
@@ -3094,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