@telia-ace/widget-ui 1.0.6 → 1.0.9

package/dist/index.js

@@ -0,0 +1,2988 @@
+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 styled, { css } 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, 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";
+import { createPortal } from "react-dom";
+import convert from "htmr";
+import { HistoryMode, getSpecificWidgetPath } from "@telia-ace/widget-routing";
+import { Link as Link$1 } from "react-router-dom";
+const inEnteringState = (status) => {
+  return status === "entering" || status === "entered";
+};
+const inExitingState = (status) => {
+  return status === "exiting" || status === "exited";
+};
+const partials = {
+  fade: {
+    in: "opacity: 1;",
+    out: "opacity: 0;"
+  },
+  "slide-left": {
+    in: "transform: translateX(0);",
+    out: "transform: translateX(-100%);"
+  },
+  "slide-right": {
+    in: "transform: translateX(0);",
+    out: "transform: translateX(100%);"
+  },
+  "slide-up": {
+    in: "transform: translateY(0);",
+    out: "transform: translateY(100%);"
+  },
+  "slide-down": {
+    in: "transform: translateY(0);",
+    out: "transform: translateY(-100%);"
+  },
+  scale: {
+    in: "transform: scale(1);",
+    out: "transform: scale(0);"
+  }
+};
+const transformTransitions = ["slide-up", "slide-down", "slide-left", "slide-right", "scale"];
+const transitionComposer = {
+  compose: (status = "exited", definitions) => {
+    const { enter, exit } = definitions;
+    const inKeys = enter.transitionKeys.split(" ");
+    const transitionProperty = transformTransitions.indexOf(inKeys[0]) > -1 ? "transform" : "opacity";
+    if (inEnteringState(status)) {
+      if (inKeys && inKeys.length > 0) {
+        return css`
+                    ${inKeys && inKeys.length > 0 && inKeys.map((key) => partials[key] ? partials[key].in : "")}
+                    transition: ${transitionProperty} ${enter.duration}ms ${enter.easing};
+                `;
+      }
+      return "";
+    }
+    const inBase = inKeys && inKeys.length > 0 && css`
+                ${inKeys.map((key) => partials[key] ? partials[key].out : "")}
+            `;
+    if (inExitingState(status)) {
+      const outKeys = exit.transitionKeys.split(" ");
+      if (outKeys && outKeys.length > 0 && status === "exiting") {
+        return css`
+                    ${inBase};
+                    ${outKeys.map((key) => partials[key] ? partials[key].out : "")}
+                    transition: ${transitionProperty} ${exit.duration}ms ${exit.easing};
+                `;
+      }
+      return inBase;
+    }
+  },
+  composeViewTransition: (status, type, direction) => {
+    if (type === "slide") {
+      return transitionComposer.compose(status, {
+        enter: {
+          transitionKeys: direction === "forth" ? "slide-right" : "slide-left",
+          duration: 500
+        },
+        exit: {
+          transitionKeys: direction === "forth" ? "slide-left" : "slide-right",
+          duration: 500
+        }
+      });
+    }
+    if (type === "fade") {
+      return transitionComposer.compose(status, {
+        enter: {
+          transitionKeys: "fade",
+          duration: 500
+        },
+        exit: {
+          transitionKeys: "fade",
+          duration: 500
+        }
+      });
+    }
+  },
+  get: (title) => {
+    return partials[title];
+  }
+};
+var Browsers = /* @__PURE__ */ ((Browsers2) => {
+  Browsers2["Opera"] = "opera";
+  Browsers2["Chrome"] = "chrome";
+  Browsers2["Firefox"] = "firefox";
+  Browsers2["Safari"] = "safari";
+  Browsers2["Edge"] = "edge";
+  Browsers2["EdgeChromium"] = "edge-chromium";
+  Browsers2["Blink"] = "blink";
+  Browsers2["IE"] = "internet-explorer";
+  return Browsers2;
+})(Browsers || {});
+var browser = () => {
+  const {
+    opr,
+    opera,
+    InstallTrigger,
+    HTMLElement,
+    safari,
+    documentMode,
+    StyleMedia,
+    chrome,
+    CSS
+  } = window;
+  const isOpera = !!opr && !!opr.addons || !!opera || navigator.userAgent.indexOf(" OPR/") >= 0;
+  if (isOpera) {
+    return "opera";
+  }
+  if (InstallTrigger) {
+    return "firefox";
+  }
+  const safariCheck = ((p) => {
+    return p.toString() === "[object SafariRemoteNotification]";
+  })(!safari || typeof safari !== "undefined" && safari.pushNotification);
+  if (/constructor/i.test(HTMLElement) || safariCheck) {
+    return "safari";
+  }
+  const isIE = !!documentMode;
+  if (isIE) {
+    return "internet-explorer";
+  }
+  if (!isIE && !!StyleMedia) {
+    return "edge";
+  }
+  const isChrome = !!chrome && (!!chrome.webstore || !!chrome.runtime);
+  if (isChrome) {
+    return "chrome";
+  }
+  if (isChrome && navigator.userAgent.indexOf("Edg") !== -1) {
+    return "edge-chromium";
+  }
+  if ((isChrome || isOpera) && !!CSS) {
+    return "blink";
+  }
+};
+const types = ["string", "number"];
+var convertToStringAttributes = (props) => {
+  return Object.keys(props).reduce((result, key) => {
+    const value = typeof props[key] === "undefined" ? "" : props[key];
+    const type = typeof value;
+    if (types.indexOf(type) > -1) {
+      const sub = key.substring(0, 5);
+      if (sub === "data-" || sub === "aria-") {
+        result[kebabCase(key)] = value.toString();
+      } else if (key.substring(0, 4) !== "css-") {
+        result[key] = value.toString();
+      }
+    } else {
+      result[key] = value;
+    }
+    return result;
+  }, {});
+};
+const createEmptyComponent = (container, props) => {
+  if (container.get("seoConfiguration")) {
+    return /* @__PURE__ */ React.createElement(Empty, __spreadValues({}, props));
+  }
+  return null;
+};
+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 filterCssProps = (props) => {
+  const cssProps = {};
+  Object.keys(props).forEach((key) => {
+    if (key.indexOf("css-") > -1) {
+      cssProps[key] = props[key];
+    }
+  });
+  return cssProps;
+};
+const filterCssPropsStyle = css`
+    ${(p) => {
+  let css2 = "";
+  Object.keys(filterCssProps(p)).forEach((key) => {
+    if (key.indexOf("css-") > -1) {
+      css2 += `${key.replace("css-", "")}:${p[key]};`;
+    }
+  });
+  return css2;
+}}
+`;
+const genericHashLink = (props, As) => {
+  let hashFragment = "";
+  const reset = () => {
+    hashFragment = "";
+  };
+  const getElementAndScroll = (scrollFunction) => {
+    const element = document.getElementById(hashFragment);
+    if (element !== null) {
+      scrollFunction(element);
+      reset();
+      return true;
+    }
+    return false;
+  };
+  const handleClick = (e) => {
+    e.preventDefault();
+    reset();
+    if (props.onClick)
+      props.onClick(e);
+    if (typeof props.to === "string") {
+      hashFragment = props.to.split("#").slice(1).join("#");
+    }
+    if (hashFragment !== "") {
+      getElementAndScroll(props.scroll || ((el) => props.smooth ? el.scrollIntoView({ behavior: "smooth" }) : el.scrollIntoView()));
+    }
+    return false;
+  };
+  const _a = props, { scroll, smooth, to } = _a, filteredProps = __objRest(_a, ["scroll", "smooth", "to"]);
+  if (As === "a") {
+    filteredProps.href = "javascript:;";
+  }
+  return /* @__PURE__ */ React.createElement(As, __spreadProps(__spreadValues({}, filteredProps), {
+    onClick: handleClick
+  }), props.children);
+};
+const headingElement = (element, style) => {
+  let defaultTag = element;
+  let prefix = "";
+  if (["h1", "h2", "h3", "h4", "h5", "h6"].includes(element)) {
+    defaultTag = element;
+  } else {
+    const match = element.match(/h1|h2|h3|h4|h5|h6/);
+    if (match == null ? void 0 : match[0]) {
+      defaultTag = match[0];
+      const [pre] = element.split(defaultTag);
+      prefix = pre;
+    }
+  }
+  const renderTag = (element2, pre, mapping) => {
+    if (mapping[element2]) {
+      return `${pre}${mapping[element2]}`;
+    }
+    return `${pre}${element2}`;
+  };
+  return css`
+        ${(p) => renderTag(defaultTag, prefix, p.theme.typographyVariantMapping || {})} {
+            ${style}
+        }
+    `;
+};
+function parseHtmlString(html, instruction) {
+  if (instruction) {
+    return convert(html, instruction);
+  }
+  return convert(html);
+}
+const imageLightboxRenderer = (attrs) => /* @__PURE__ */ React.createElement(Lightbox, {
+  attrs
+});
+const defaultRenderInstructions = (container) => {
+  return {
+    transform: {
+      a: embeddedLinkMapper(container),
+      img: imageLightboxRenderer
+    }
+  };
+};
+const AnchorLink = (props) => {
+  return genericHashLink(props, "a");
+};
+var Button = forwardRef((_a, ref) => {
+  var _b = _a, { className, children } = _b, other = __objRest(_b, ["className", "children"]);
+  return /* @__PURE__ */ React.createElement(StyledButton, __spreadProps(__spreadValues({
+    type: "button",
+    className: appendClassNames(className, "humany-button")
+  }, convertToStringAttributes(other)), {
+    ref
+  }), children);
+});
+const StyledButton = styled.button`
+    -webkit-appearance: button;
+    text-transform: none;
+    overflow: visible;
+    outline: none;
+    border: none;
+    background-color: transparent;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: normal;
+    margin: 0;
+    padding: 0;
+`;
+const Checkbox = (_c) => {
+  var _d = _c, {
+    onChange = () => {
+    },
+    onEnter = () => {
+    },
+    className
+  } = _d, other = __objRest(_d, [
+    "onChange",
+    "onEnter",
+    "className"
+  ]);
+  return /* @__PURE__ */ React.createElement("input", __spreadValues({
+    className: appendClassNames(className, "humany-checkbox"),
+    onKeyDown: (e) => {
+      if (e.key === "Enter") {
+        onEnter(e);
+      }
+    },
+    onChange: (e) => onChange(e.target.value, e.currentTarget.checked)
+  }, convertToStringAttributes(other)));
+};
+const ContainerContext = createContext(new Container());
+const ColumnContext = createContext(1);
+const ComponentNodeContext = createContext({
+  id: "",
+  type: "",
+  name: "",
+  branch: ""
+});
+const ComponentPropertyContext = createContext({});
+const RoutingContext = createContext(null);
+const useComponentDescriptor = () => useContext$1(ComponentNodeContext);
+const useContainer = () => useContext$1(ContainerContext);
+const useAction = (passedOrigin, passedContainer) => {
+  const origin = useComponentDescriptor().id;
+  const container = useContainer();
+  return (action, value) => {
+    (passedContainer || container).getAsync("actionResolver").then((resolver) => {
+      resolver.action(passedOrigin || origin, action, value);
+    });
+  };
+};
+const useComponentNode = (id) => {
+  const descriptor = useContext$1(ComponentNodeContext);
+  const components = useComponentPlatform();
+  const [node, setNode] = useState();
+  useEffect(() => {
+    if ((id || descriptor.id) && components) {
+      const node2 = components.nodes.get(id || descriptor.id);
+      setNode(node2);
+    }
+  }, [id, descriptor.id, components]);
+  return node;
+};
+const useIsMounted = () => {
+  const isMounted = useRef(false);
+  useEffect(() => {
+    isMounted.current = true;
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
+  return isMounted;
+};
+const useComponentPlatform = (passedContainer) => {
+  const container = useContainer();
+  const [componentPlatform, setComponentPlatform] = useState(null);
+  const isMounted = useIsMounted();
+  useEffect(() => {
+    ComponentPlatform.getInstance(passedContainer || container).then((platform) => {
+      if (isMounted.current) {
+        setComponentPlatform(platform);
+      }
+    });
+  }, [isMounted]);
+  return componentPlatform;
+};
+const useChildren = () => {
+  const node = useComponentNode();
+  const components = useComponentPlatform();
+  const [children, setChildren] = useState([]);
+  const isMounted = useIsMounted();
+  const updateChildren = useCallback((node2) => {
+    if (components && isMounted.current) {
+      const branch = components.getBranch(node2);
+      const children2 = node2.getChildren(branch).map((child) => asDescriptor(child));
+      setChildren(children2);
+    }
+  }, [isMounted, components, setChildren]);
+  useEffect(() => {
+    if (node) {
+      updateChildren(node);
+    }
+  }, [node, components]);
+  useEffect(() => {
+    if (components) {
+      const [subscribe, unsubscribe] = createEventSubscriber(components.events);
+      subscribe("components:set-layout", (event, data) => {
+        if (node === data.node.parent || data.node.parent === components.nodes.root) {
+          updateChildren(data.node.parent);
+        }
+      });
+      subscribe("components:node-appended", (event, data) => {
+        if (node === data.node.parent || data.node.parent === components.nodes.root) {
+          updateChildren(data.node.parent);
+        }
+      });
+      subscribe("components:node-removed", (event, { parentNode }) => {
+        if (parentNode === node || parentNode === components.nodes.root) {
+          updateChildren(parentNode);
+        }
+      });
+      return () => {
+        unsubscribe();
+      };
+    }
+  }, [node, components, updateChildren]);
+  return children;
+};
+const useColumns = () => useContext$1(ColumnContext);
+const useComponent = (passedType, passedContainer) => {
+  const descriptor = useComponentDescriptor();
+  const container = useContainer();
+  const [component, setComponent] = useState(void 0);
+  const isMounted = useIsMounted();
+  const type = passedType || descriptor.type || "";
+  useEffect(() => {
+    if (type) {
+      let unsubscribe;
+      (passedContainer || container).getAsync("componentResolver").then((resolver) => {
+        if (isMounted.current) {
+          const component2 = resolver.getComponent(type);
+          setComponent(component2);
+        }
+        unsubscribe = resolver.registerResolver(type, (component2) => {
+          if (isMounted.current) {
+            setComponent(component2);
+          }
+        });
+      });
+      return () => {
+        if (unsubscribe) {
+          unsubscribe();
+        }
+      };
+    }
+  }, [isMounted, type, passedContainer, container]);
+  return component;
+};
+const useContext = (id) => {
+  const node = useComponentNode(id);
+  const components = useComponentPlatform();
+  const [context, setContext] = useState({});
+  const isMounted = useIsMounted();
+  useEffect(() => {
+    if (node && isMounted.current) {
+      setContext(node.attributes.context);
+    }
+  }, [isMounted, node]);
+  useEffect(() => {
+    if (components) {
+      const unsubscribe = components.events.subscribe("components:context-changed", (event, data) => {
+        if (node === data.node && isMounted.current) {
+          setContext(data.node.attributes.context);
+        }
+      });
+      return () => {
+        unsubscribe();
+      };
+    }
+  }, [isMounted, components]);
+  return context;
+};
+const useDispatch = () => {
+  const components = useComponentPlatform();
+  const descriptor = useComponentDescriptor();
+  const [queue, setQueue] = useState([]);
+  const [actions, setActions] = useState();
+  useEffect(() => {
+    if (components && descriptor) {
+      const component = new ComponentQuery(components).withId(descriptor.id);
+      const actions2 = components.actions(component, descriptor.type || uuid());
+      setActions(actions2);
+      if (queue !== null) {
+        queue.forEach((item) => {
+          actions2.dispatch(item.key, item.data).then((value) => item.resolve(value)).catch((reason) => item.reject(reason));
+        });
+        setQueue(null);
+      }
+    }
+  }, [components, descriptor.id]);
+  return (key, data) => {
+    if (queue !== null) {
+      return new Promise((resolve, reject) => {
+        queue.push({
+          key,
+          data,
+          resolve,
+          reject
+        });
+      });
+    }
+    return actions.dispatch(key, data);
+  };
+};
+var useEventListener = (eventName, handler, element = window, condition = () => true) => {
+  const savedHandler = useRef(() => {
+  });
+  useEffect(() => {
+    savedHandler.current = handler;
+  }, [handler]);
+  useEffect(() => {
+    const isSupported = element && condition();
+    if (!isSupported)
+      return;
+    const eventListener = (event) => savedHandler.current(event);
+    element.addEventListener(eventName, eventListener);
+    return () => {
+      element.removeEventListener(eventName, eventListener);
+    };
+  }, [eventName, element]);
+};
+const useEvents = (passedContainer) => {
+  const container = useContainer();
+  const { events } = (passedContainer || container).get("$widget");
+  return events;
+};
+const useKeyPress = (targetKey, action) => {
+  const [keyPressed, setKeyPressed] = useState(false);
+  const onKeyDown = useCallback((event) => {
+    const { key } = event;
+    if (key === targetKey) {
+      setKeyPressed(true);
+      if (action) {
+        action(event);
+      }
+    }
+  }, [setKeyPressed, action]);
+  const onKeyUp = useCallback(({ key }) => {
+    if (key === targetKey) {
+      setKeyPressed(false);
+    }
+  }, [setKeyPressed]);
+  useEventListener("keydown", onKeyDown, window);
+  useEventListener("keyup", onKeyUp, window);
+  return keyPressed;
+};
+const useLayout = (id) => {
+  const node = useComponentNode(id);
+  const components = useComponentPlatform();
+  const [layout, setLayout] = useState({});
+  const isMounted = useIsMounted();
+  useEffect(() => {
+    if (node && isMounted.current) {
+      setLayout(node.attributes.layout);
+    }
+  }, [node, isMounted]);
+  useEffect(() => {
+    if (components) {
+      const unsubscribe = components.events.subscribe("components:layout-changed", (event, data) => {
+        if (node === data.node && isMounted.current) {
+          setLayout(data.node.attributes.layout);
+        }
+      });
+      return () => {
+        unsubscribe();
+      };
+    }
+  }, [components, isMounted]);
+  return layout;
+};
+const usePrevious = (value) => {
+  const ref = useRef();
+  useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+};
+const useProperties = () => {
+  const properties = useContext$1(ComponentPropertyContext);
+  return properties;
+};
+const useRenderState = (passedContainer) => {
+  const [renderState, setRenderState] = useState();
+  const container = useContainer();
+  const isMounted = useIsMounted();
+  useEffect(() => {
+    let unsubscribe;
+    const widget = (passedContainer || container).get("$widget");
+    if (!widget) {
+      return;
+    }
+    const { name, invoke } = widget;
+    invoke("renderState").then((renderState2) => {
+      if (isMounted.current) {
+        setRenderState(renderState2);
+      }
+    });
+    (passedContainer || container).getAsync("actionResolver").then((actionResolver) => {
+      unsubscribe = actionResolver.subscribe(name, (origin, action) => {
+        switch (action) {
+          case "close":
+          case "open":
+            if (isMounted.current) {
+              setRenderState(action === "open" ? WidgetRenderState.open : WidgetRenderState.closed);
+            }
+            break;
+          case "hide":
+            if (isMounted.current) {
+              setRenderState(WidgetRenderState.hidden);
+            }
+        }
+      });
+    });
+    return () => {
+      if (unsubscribe) {
+        unsubscribe();
+      }
+    };
+  }, [isMounted]);
+  return renderState;
+};
+const useRouter = () => {
+  const router = useContext$1(RoutingContext);
+  return router;
+};
+const useRouteData = (passedContainer) => {
+  const container = useContainer();
+  const router = useRouter();
+  const [routeData, setRouteData] = useState({ name: "", params: {} });
+  const isMounted = useIsMounted();
+  useEffect(() => {
+    const widget = (passedContainer || container).get("$widget");
+    if (!widget) {
+      return;
+    }
+    const { events } = widget;
+    const unsubscribe = events.subscribe("router:change", (e, { next: { routeData: routeData2 } }) => {
+      if (isMounted.current) {
+        const { name, params } = routeData2;
+        removeNullAndUndefinedValues(params);
+        setRouteData({ name, params });
+      }
+    });
+    return unsubscribe;
+  }, [isMounted, passedContainer, container]);
+  useEffect(() => {
+    if (router && router.history && isMounted.current) {
+      const routeData2 = router.getRouteData();
+      const { name, params } = routeData2;
+      removeNullAndUndefinedValues(params);
+      setRouteData({ name, params });
+    }
+  }, [router, isMounted]);
+  return routeData;
+};
+var useScroll = (scrollable) => {
+  const elem = useRef();
+  const previousY = useRef(0);
+  let timeoutId;
+  const onScroll = useCallback(() => {
+    var _a;
+    (_a = elem.current) == null ? void 0 : _a.classList.add("humany-scrolling");
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => {
+      var _a2;
+      (_a2 = elem.current) == null ? void 0 : _a2.classList.remove("humany-scrolling");
+    }, 500);
+  }, [elem]);
+  const onTouchStart = useCallback((event) => {
+    previousY.current = event.touches[0].clientY;
+  }, [elem]);
+  const traverseScrollable = (element) => {
+    if (isScrollable(element)) {
+      if (element === elem.current) {
+        return element;
+      }
+      return null;
+    }
+    if (element.parentElement) {
+      return traverseScrollable(element.parentElement);
+    }
+    return null;
+  };
+  const isScrollable = (element) => {
+    return element.scrollWidth > element.clientWidth || element.scrollHeight > element.clientHeight;
+  };
+  const onTouchMove = useCallback((event) => {
+    if (!event.cancelable) {
+      return;
+    }
+    const top = event.touches[0].clientY;
+    const firstScrollable = traverseScrollable(event.target);
+    if (!firstScrollable) {
+      return;
+    }
+    const scrollTop = firstScrollable.scrollTop;
+    const direction = previousY.current - top < 0 ? "up" : "down";
+    const isAtTop = scrollTop <= 0 && direction === "up";
+    const isAtBottom = scrollTop >= firstScrollable.scrollHeight - firstScrollable.offsetHeight && direction === "down";
+    if (isAtTop || isAtBottom) {
+      event.preventDefault();
+    }
+    previousY.current = top;
+  }, [elem, previousY]);
+  useEventListener("scroll", onScroll, elem.current, () => elem.current && scrollable);
+  useEventListener("touchstart", onTouchStart, elem.current, () => elem.current && scrollable);
+  useEventListener("touchmove", onTouchMove, elem.current, () => elem.current && scrollable);
+  if (!scrollable) {
+    return ["", elem];
+  }
+  return [styling, elem];
+};
+const styling = `
+    overflow-y: ${browser() === Browsers.Chrome || browser() === Browsers.EdgeChromium ? "overlay" : "auto"};
+    overflow-x: hidden;
+    -ms-overflow-style: none; /* IE 10+ */
+    scrollbar-width: thin; /* Firefox */
+    scrollbar-color: transparent transparent; /* Firefox */
+
+    ::-webkit-scrollbar {
+        width: 3px !important;
+        background-color: transparent;
+        border-left: none;
+    }
+    ::-webkit-scrollbar-thumb {
+        background-color: transparent;
+    }
+    ::-webkit-scrollbar-track {
+        -webkit-box-shadow: none !important;
+        background-color: transparent;
+    }
+    &.humany-scrolling {
+        scrollbar-color: #7F7F7F transparent;
+        scrollbar-width: thin; /* Firefox */
+        -ms-overflow-style: none; /* IE 10+ */
+
+        ::-webkit-scrollbar-thumb {
+            background-color: #7F7F7F;
+        }
+    }
+`;
+const useSettings = () => {
+  const [settings, setSettings] = useState(null);
+  const container = useContainer();
+  const isMounted = useIsMounted();
+  useEffect(() => {
+    container.get("settings").then((settings2) => {
+      if (isMounted.current) {
+        setSettings(settings2);
+      }
+    });
+  }, [isMounted]);
+  return settings;
+};
+const useToggle = (initialValue = false) => {
+  const [value, setValue] = useState(initialValue);
+  const toggle = useCallback((forced) => {
+    setValue(typeof forced === "boolean" ? forced : (v) => !v);
+  }, []);
+  return [value, toggle];
+};
+var useTransitionEnd = (handler) => {
+  const container = useContainer();
+  const components = useComponentPlatform();
+  const widgetDOMElement = container.get("widgetDOMElement");
+  const [viewDOMElement, setViewDOMElement] = useState(null);
+  const [rootDOMElement, setRootDOMElement] = useState(null);
+  const isMounted = useIsMounted();
+  useEffect(() => {
+    if (components && isMounted.current) {
+      const rootArea = components.nodes.all.find((n) => n.name === "root-area");
+      const view = components.nodes.all.find((n) => n.type === "view");
+      if (!(view == null ? void 0 : view.attributes.properties.animation) && !(rootArea == null ? void 0 : rootArea.attributes.properties.animation)) {
+        handler();
+      } else {
+        const getElement = (id = "") => widgetDOMElement == null ? void 0 : widgetDOMElement.querySelector(`[data-node-id="${id}"]`);
+        const viewDOMElement2 = getElement(view == null ? void 0 : view.id);
+        if (viewDOMElement2) {
+          setViewDOMElement(viewDOMElement2);
+        }
+        const rootDOMElement2 = getElement(rootArea == null ? void 0 : rootArea.id);
+        if (rootDOMElement2) {
+          setRootDOMElement(rootDOMElement2);
+        }
+      }
+    }
+  }, [components, container, isMounted]);
+  const eventListener = useCallback((event) => {
+    if (isMounted.current && (event.target === viewDOMElement || event.target === rootDOMElement)) {
+      handler();
+    }
+  }, [handler, isMounted, viewDOMElement, rootDOMElement]);
+  useEventListener("transitionend", eventListener, viewDOMElement);
+  useEventListener("transitionend", eventListener, rootDOMElement);
+};
+const useWidgetEvent = (event, callback, dependencies = [], passedContainer) => {
+  const events = useEvents(passedContainer);
+  useEffect(() => {
+    if (events) {
+      const unsubscribe = events.subscribe(event, callback);
+      return () => {
+        unsubscribe();
+      };
+    }
+  }, [events].concat(dependencies));
+  return (data) => events == null ? void 0 : events.dispatch(event, data);
+};
+const useUniqueMenu = (id, callback) => {
+  const dispatch = useWidgetEvent("widget:menu-toggled", (_, triggeredId) => {
+    if (triggeredId !== id) {
+      callback();
+    }
+  });
+  return () => dispatch(id);
+};
+const Text = (_e) => {
+  var _f = _e, { className, children } = _f, other = __objRest(_f, ["className", "children"]);
+  return /* @__PURE__ */ React.createElement("span", __spreadValues({
+    className: appendClassNames(className, "humany-text")
+  }, convertToStringAttributes(other)), children);
+};
+const contentBox = css`
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    background: #ffffff;
+    border-radius: ${(p) => p.theme.borderRadius};
+    border: ${(p) => p.theme.border};
+    box-shadow: ${(p) => p.theme.boxShadow || "none"};
+    ${(p) => p["data-loading"] && "min-height: 150px;"}
+`;
+const buttonCss = css`
+    cursor: pointer;
+    text-align: center;
+    border: none;
+    padding: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
+}};
+    border-radius: ${(p) => p.theme.borderRadius};
+    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;
+}};
+    font-weight: 300;
+`;
+const invertedHoverButton = ({
+  primaryColor,
+  secondaryColor,
+  active
+}) => css`
+    ${buttonCss}
+    border: 1px solid ${active ? secondaryColor : primaryColor};
+    background-color: ${active ? primaryColor : secondaryColor};
+
+    color: ${active ? secondaryColor : primaryColor};
+    transition: background-color 200ms ease-out, color 200ms ease-out;
+
+    span,
+    i,
+    p,
+    a {
+        transition: color 200ms ease-out;
+        color: ${active ? secondaryColor : primaryColor};
+        font-size: ${(p) => {
+  var _a;
+  return (_a = p.theme.fonts) == null ? void 0 : _a.normal;
+}};
+    }
+
+    ${(p) => !p.disabled && css`
+            &:hover {
+                background-color: ${primaryColor};
+                color: ${secondaryColor};
+
+                span,
+                i,
+                p,
+                a {
+                    color: ${secondaryColor};
+                }
+            }
+
+            &:focus {
+                ${(p2) => {
+  var _a;
+  return ((_a = p2.theme.accessibility) == null ? void 0 : _a.isTabbing) && borderTabStyle;
+}};
+            }
+        `}
+`;
+const borderTabStyle = css`
+    outline: ${(p) => {
+  var _a;
+  return (_a = p.theme.accessibility) == null ? void 0 : _a.border;
+}};
+    color: ${(p) => {
+  var _a, _b;
+  return (_b = (_a = p.theme.accessibility) == null ? void 0 : _a.colors) == null ? void 0 : _b.inactiveText;
+}};
+    border-color: transparent;
+`;
+const linkTabStyle = css`
+    ${borderTabStyle}
+    text-decoration: underline;
+`;
+const paddedBorderTabStyle = css`
+    ${borderTabStyle}
+    outline-offset: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.small;
+}};
+`;
+const CloseButton$1 = styled(Button)`
+    position: absolute;
+    top: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
+}};
+    right: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
+}};
+    z-index: 1;
+
+    svg {
+        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}
+                padding: ${(p2) => {
+    var _a2;
+    return (_a2 = p2.theme.sizes) == null ? void 0 : _a2.small;
+  }};
+                height: 15px;
+                box-sizing: content-box;
+            `;
+}};
+    }
+`;
+const StyledText = styled(Text)`
+    font-size: ${(p) => {
+  var _a;
+  return (_a = p.theme.fonts) == null ? void 0 : _a.normal;
+}};
+    font-weight: normal;
+    line-height: 1.2em;
+    color: ${(p) => {
+  var _a;
+  return (_a = p.theme.colors) == null ? void 0 : _a.text;
+}};
+`;
+const list = css`
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    > li {
+        margin: 0 0 ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
+}};
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        min-width: 0;
+        &:focus {
+            outline-offset: -2px;
+        }
+        > a {
+            text-decoration: none;
+        }
+    }
+    > li:last-child {
+        margin: 0;
+    }
+`;
+const itemList = css`
+    > div {
+        ${headingElement("> h1", css`
+                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.medium;
+}};
+                font-weight: normal;
+                line-height: 1.8em;
+                color: ${(p) => {
+  var _a;
+  return (_a = p.theme.colors) == null ? void 0 : _a.text;
+}};
+            `)}
+    }
+    > ul {
+        ${list}
+    }
+
+    ${headingElement("h1", css`
+            display: flex;
+            align-items: center;
+
+            i {
+                margin: 7px ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
+}} 0 0;
+                width: 24px;
+                display: inline-block;
+                vertical-align: text-bottom;
+                align-self: flex-start;
+                min-width: 24px;
+                min-height: 24px;
+                text-align: center;
+            }
+        `)}
+`;
+const Portal = ({ elementId = "humany-portal-elements", children }) => {
+  const [container] = React.useState(() => {
+    const el = document.getElementById(elementId) || document.createElement("div");
+    el.id = elementId;
+    return el;
+  });
+  useEffect(() => {
+    document.body.appendChild(container);
+    return () => {
+      if (container.childElementCount <= 1) {
+        document.body.removeChild(container);
+      }
+    };
+  }, [container]);
+  return createPortal(children, container);
+};
+const SymbolBadge = (_g) => {
+  var _h = _g, {
+    text = "",
+    backgroundSize = "contain",
+    size = 12,
+    symbol = {
+      content: "",
+      type: ""
+    },
+    elementStyle = {},
+    className
+  } = _h, other = __objRest(_h, [
+    "text",
+    "backgroundSize",
+    "size",
+    "symbol",
+    "elementStyle",
+    "className"
+  ]);
+  const { type, content } = symbol;
+  const sharedProps = {
+    "aria-label": text,
+    role: "presentation"
+  };
+  switch (type) {
+    case "Uri": {
+      const style = {
+        backgroundSize,
+        backgroundImage: `url('${content}')`,
+        backgroundRepeat: "no-repeat",
+        backgroundPosition: "center",
+        backgroundAttachment: "center"
+      };
+      return /* @__PURE__ */ React.createElement("i", __spreadValues(__spreadValues({
+        className: appendClassNames(className, "humany-icon", "humany-custom-icon"),
+        title: text,
+        style: __spreadValues(__spreadValues({}, style), elementStyle)
+      }, sharedProps), other));
+    }
+    case "Svg": {
+      const svgProps = __spreadProps(__spreadValues({
+        className: appendClassNames(className, "humany-icon"),
+        width: `${size}`,
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg"
+      }, other), {
+        ref: null
+      });
+      const style = { minWidth: `${size}` };
+      switch (content) {
+        case "search": {
+          return /* @__PURE__ */ React.createElement("svg", __spreadValues({
+            viewBox: "0 0 32 30"
+          }, svgProps), /* @__PURE__ */ React.createElement("circle", {
+            cx: "14.8457",
+            cy: "14.5175",
+            r: "8.14359",
+            transform: "rotate(45 14.8457 14.5175)"
+          }), /* @__PURE__ */ React.createElement("line", {
+            x1: "21.1001",
+            y1: "20.4865",
+            x2: "26.5798",
+            y2: "25.9661"
+          }));
+        }
+        case "clear": {
+          return /* @__PURE__ */ React.createElement("svg", __spreadValues({
+            viewBox: "0 0 27 27"
+          }, svgProps), /* @__PURE__ */ React.createElement("circle", {
+            cx: "13.4351",
+            cy: "13.435",
+            r: "9",
+            transform: "rotate(45 13.4351 13.435)",
+            stroke: "black"
+          }), /* @__PURE__ */ React.createElement("line", {
+            x1: "16.6172",
+            y1: "10.2531",
+            x2: "10.2533",
+            y2: "16.6171",
+            stroke: "black"
+          }), /* @__PURE__ */ React.createElement("line", {
+            x1: "16.6171",
+            y1: "16.617",
+            x2: "10.2532",
+            y2: "10.2531",
+            stroke: "black"
+          }));
+        }
+        case "close": {
+          return /* @__PURE__ */ React.createElement("svg", __spreadValues({
+            viewBox: "0 0 13 13"
+          }, svgProps), /* @__PURE__ */ React.createElement("path", {
+            d: "M12.3068 0.50647L1.27246 11.7273",
+            stroke: "black"
+          }), /* @__PURE__ */ React.createElement("path", {
+            d: "M12.2812 11.9473L1.24686 0.726451",
+            stroke: "black"
+          }));
+        }
+        case "caret-right": {
+          return /* @__PURE__ */ React.createElement("svg", __spreadValues({
+            viewBox: "0 0 14 14",
+            style
+          }, svgProps), /* @__PURE__ */ React.createElement("line", {
+            x1: "4.13",
+            y1: "1.05",
+            x2: "10.13",
+            y2: "7.05",
+            stroke: "black"
+          }), /* @__PURE__ */ React.createElement("line", {
+            x1: "10.13",
+            y1: "6.95",
+            x2: "4.13",
+            y2: "12.95",
+            stroke: "black"
+          }));
+        }
+        case "caret-left": {
+          return /* @__PURE__ */ React.createElement("svg", __spreadValues({
+            viewBox: "0 0 14 14",
+            style
+          }, svgProps), /* @__PURE__ */ React.createElement("line", {
+            x1: "10.13",
+            y1: "12.95",
+            x2: "4.13",
+            y2: "6.95",
+            stroke: "black"
+          }), /* @__PURE__ */ React.createElement("line", {
+            x1: "4.13",
+            y1: "7.05",
+            x2: "10.13",
+            y2: "1.05",
+            stroke: "black"
+          }));
+        }
+        case "caret-up": {
+          return /* @__PURE__ */ React.createElement(CaretUp, __spreadValues({
+            viewBox: "0 0 14 14",
+            style
+          }, svgProps), /* @__PURE__ */ React.createElement("line", {
+            x1: "13.09",
+            y1: "3.99",
+            x2: "7.1",
+            y2: "9.99",
+            stroke: "black"
+          }), /* @__PURE__ */ React.createElement("line", {
+            x1: "7.19",
+            y1: "9.99",
+            x2: "1.19",
+            y2: "3.99",
+            stroke: "black"
+          }));
+        }
+        case "caret-down": {
+          return /* @__PURE__ */ React.createElement("svg", __spreadValues({
+            viewBox: "0 0 14 14",
+            style
+          }, svgProps), /* @__PURE__ */ React.createElement("line", {
+            x1: "13.09",
+            y1: "3.99",
+            x2: "7.1",
+            y2: "9.99",
+            stroke: "black"
+          }), /* @__PURE__ */ React.createElement("line", {
+            x1: "7.19",
+            y1: "9.99",
+            x2: "1.19",
+            y2: "3.99",
+            stroke: "black"
+          }));
+        }
+        case "back": {
+          return /* @__PURE__ */ React.createElement("svg", __spreadValues({
+            viewBox: "0 0 18 18"
+          }, svgProps), /* @__PURE__ */ React.createElement("line", {
+            y1: "-0.5",
+            x2: "11.724",
+            y2: "-0.5",
+            transform: "matrix(-0.682355 -0.731021 0.682355 -0.731021 13 16.9999)",
+            stroke: "white"
+          }), /* @__PURE__ */ React.createElement("line", {
+            y1: "-0.5",
+            x2: "11.724",
+            y2: "-0.5",
+            transform: "matrix(0.682355 -0.731021 0.682355 0.731021 5 9.5705)",
+            stroke: "white"
+          }));
+        }
+        case "alert": {
+          return /* @__PURE__ */ React.createElement("svg", __spreadValues({
+            viewBox: "0 0 19 19"
+          }, svgProps), /* @__PURE__ */ React.createElement("circle", {
+            cx: "9.5",
+            cy: "9.5",
+            r: "9.5",
+            fill: "#CA0813"
+          }), /* @__PURE__ */ React.createElement("path", {
+            d: "M10.36 4.878V8.882C10.36 9.30667 10.339 9.72433 10.297 10.135C10.255 10.541 10.199 10.9727 10.129 11.43H8.96C8.89 10.9727 8.834 10.541 8.792 10.135C8.75 9.72433 8.729 9.30667 8.729 8.882V4.878H10.36ZM8.463 14.048C8.463 13.9033 8.48867 13.7657 8.54 13.635C8.596 13.5043 8.67067 13.3923 8.764 13.299C8.862 13.2057 8.97633 13.131 9.107 13.075C9.23767 13.019 9.37767 12.991 9.527 12.991C9.67167 12.991 9.80933 13.019 9.94 13.075C10.0707 13.131 10.1827 13.2057 10.276 13.299C10.3693 13.3923 10.444 13.5043 10.5 13.635C10.556 13.7657 10.584 13.9033 10.584 14.048C10.584 14.1973 10.556 14.3373 10.5 14.468C10.444 14.594 10.3693 14.7037 10.276 14.797C10.1827 14.8903 10.0707 14.9627 9.94 15.014C9.80933 15.07 9.67167 15.098 9.527 15.098C9.37767 15.098 9.23767 15.07 9.107 15.014C8.97633 14.9627 8.862 14.8903 8.764 14.797C8.67067 14.7037 8.596 14.594 8.54 14.468C8.48867 14.3373 8.463 14.1973 8.463 14.048Z",
+            fill: "white"
+          }));
+        }
+        case "send": {
+          return /* @__PURE__ */ React.createElement("svg", __spreadValues({
+            viewBox: "0 0 20 17"
+          }, svgProps), /* @__PURE__ */ React.createElement("path", {
+            d: "M18.95 8.56428L0.949951 0.941406V7.02531L13.6351 8.47059L0.950001 9.92276L0.949951 15.9414L18.95 8.56428Z",
+            fill: "#A6A6A6",
+            stroke: "#A6A6A6",
+            strokeWidth: "0.1"
+          }));
+        }
+        case "chat": {
+          return /* @__PURE__ */ React.createElement("svg", __spreadValues({
+            viewBox: "-2 -3 40 40"
+          }, svgProps), /* @__PURE__ */ React.createElement("path", {
+            strokeWidth: "0",
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M16.9799 34C21.2676 34 25.1841 32.4256 28.1725 29.8285L34.9534 32.1994C35.7991 32.4951 36.553 31.5778 36.0892 30.8173L32.2559 24.5317C33.3474 22.3103 33.9598 19.8153 33.9598 17.1786C33.9598 7.88838 26.3576 0.357178 16.9799 0.357178C7.60216 0.357178 0 7.88838 0 17.1786C0 26.4688 7.60216 34 16.9799 34ZM30.7031 24.565C31.9094 22.3701 32.5948 19.8536 32.5948 17.1786C32.5948 8.6352 25.6038 1.70942 16.9799 1.70942C8.35601 1.70942 1.36498 8.6352 1.36498 17.1786C1.36498 25.722 8.35601 32.6478 16.9799 32.6478C21.1946 32.6478 25.0193 30.9935 27.8285 28.3047L34.3975 30.5798L30.7031 24.565Z",
+            fill: "currentColor"
+          }), /* @__PURE__ */ React.createElement("path", {
+            strokeWidth: "0",
+            d: "M12.9395 17.1786C12.9395 18.6079 11.7809 19.7665 10.3516 19.7665C8.92237 19.7665 7.76373 18.6079 7.76373 17.1786C7.76373 15.7493 8.92237 14.5907 10.3516 14.5907C11.7809 14.5907 12.9395 15.7493 12.9395 17.1786Z",
+            fill: "currentColor"
+          }), /* @__PURE__ */ React.createElement("path", {
+            strokeWidth: "0",
+            d: "M19.4093 17.1786C19.4093 18.6079 18.2507 19.7665 16.8214 19.7665C15.3921 19.7665 14.2335 18.6079 14.2335 17.1786C14.2335 15.7493 15.3921 14.5907 16.8214 14.5907C18.2507 14.5907 19.4093 15.7493 19.4093 17.1786Z",
+            fill: "currentColor"
+          }), /* @__PURE__ */ React.createElement("path", {
+            strokeWidth: "0",
+            d: "M25.8791 17.1786C25.8791 18.6079 24.7204 19.7665 23.2912 19.7665C21.8619 19.7665 20.7033 18.6079 20.7033 17.1786C20.7033 15.7493 21.8619 14.5907 23.2912 14.5907C24.7204 14.5907 25.8791 15.7493 25.8791 17.1786Z",
+            fill: "currentColor"
+          }));
+        }
+        case "chat-new": {
+          return /* @__PURE__ */ React.createElement("svg", __spreadValues({
+            viewBox: "0 0 26 24"
+          }, svgProps), /* @__PURE__ */ React.createElement("path", {
+            d: "M22.1109 10.3813C22.3941 10.2876 22.6674 10.1722 22.9288 10.0371C23.1902 10.9797 23.33 11.9734 23.33 13C23.33 19.0751 18.4348 24 12.3962 24C9.6352 24 7.11325 22.9705 5.18893 21.2721L0.82251 22.8226C0.277922 23.0159 -0.207515 22.4161 0.0911259 21.9188L2.55952 17.8084C1.85665 16.3558 1.46233 14.7242 1.46233 13C1.46233 6.92487 6.35758 2 12.3962 2C13.4013 2 14.3747 2.13645 15.2992 2.39193C15.1628 2.65458 15.0464 2.92925 14.9519 3.21394C14.1358 2.99881 13.2793 2.88427 12.3962 2.88427C6.84301 2.88427 2.34128 7.41324 2.34128 13C2.34128 14.7493 2.78263 16.3949 3.5594 17.8302L1.18047 21.7634L5.41046 20.2757C7.21939 22.034 9.68221 23.1157 12.3962 23.1157C17.9493 23.1157 22.451 18.5868 22.451 13C22.451 12.0944 22.3328 11.2165 22.1109 10.3813Z",
+            fill: "currentColor"
+          }), /* @__PURE__ */ React.createElement("path", {
+            d: "M25.6633 4C25.6633 6.20914 23.8724 8 21.6633 8C19.4541 8 17.6633 6.20914 17.6633 4C17.6633 1.79086 19.4541 0 21.6633 0C23.8724 0 25.6633 1.79086 25.6633 4Z",
+            fill: "currentColor"
+          }));
+        }
+        case "agent": {
+          return /* @__PURE__ */ React.createElement("svg", __spreadValues({
+            viewBox: "0 0 36 30"
+          }, svgProps), /* @__PURE__ */ React.createElement("path", {
+            d: "M0.900024 15.3887C0.900024 12.9034 2.91474 10.8887 5.40002 10.8887H6.28179V20.0995H5.40002C2.91474 20.0995 0.900024 18.0848 0.900024 15.5995V15.3887Z",
+            stroke: "white"
+          }), /* @__PURE__ */ React.createElement("path", {
+            d: "M34.65 15.5996C34.65 18.0849 32.6353 20.0996 30.15 20.0996L29.2683 20.0996L29.2683 10.8888L30.15 10.8888C32.6353 10.8888 34.65 12.9035 34.65 15.3888L34.65 15.5996Z",
+            stroke: "white"
+          }), /* @__PURE__ */ React.createElement("path", {
+            d: "M29.2565 20.5974C29.2565 26.341 22.8747 26.9792 19.6838 26.9792",
+            stroke: "white"
+          }), /* @__PURE__ */ React.createElement("circle", {
+            cx: "17.4074",
+            cy: "26.9795",
+            r: "2.05271",
+            stroke: "white"
+          }), /* @__PURE__ */ React.createElement("path", {
+            d: "M6.28467 12.9396C6.28467 11.195 6.28686 18.0452 6.28467 8.47234C6.28248 -1.10049 29.2591 -1.10047 29.259 8.47234C29.259 18.0452 29.2569 11.6631 29.259 12.9396",
+            stroke: "white"
+          }));
+        }
+        case "minimize": {
+          return /* @__PURE__ */ React.createElement("svg", __spreadValues({
+            viewBox: "0 -10 22 22"
+          }, svgProps), /* @__PURE__ */ React.createElement("path", {
+            d: "M0 1H22",
+            stroke: "white"
+          }));
+        }
+        case "sorting": {
+          return /* @__PURE__ */ React.createElement("svg", __spreadValues({
+            viewBox: "0 0 18 14"
+          }, svgProps), /* @__PURE__ */ React.createElement("path", {
+            d: "M18 1H0M8 13H0M13 7H0"
+          }));
+        }
+        case "copy": {
+          return /* @__PURE__ */ React.createElement("svg", __spreadValues({
+            viewBox: "0 0 19 17"
+          }, svgProps), /* @__PURE__ */ React.createElement("rect", {
+            x: "0.5",
+            y: "0.5",
+            width: "11.6667",
+            height: "11.6014",
+            rx: "1.5",
+            fill: "white"
+          }), /* @__PURE__ */ React.createElement("rect", {
+            x: "6.83301",
+            y: "4.89868",
+            width: "11.6667",
+            height: "11.6014",
+            rx: "1.5",
+            fill: "white"
+          }));
+        }
+        case "print": {
+          return /* @__PURE__ */ React.createElement("svg", __spreadValues({
+            viewBox: "0 0 16 17"
+          }, svgProps), /* @__PURE__ */ React.createElement("path", {
+            d: "M4.31592 0.999999C4.31592 0.723857 4.53977 0.5 4.81592 0.5H11.1845C11.4606 0.5 11.6845 0.723858 11.6845 1V4.53323H4.31592V0.999999Z",
+            fill: "white",
+            stroke: "black"
+          }), /* @__PURE__ */ React.createElement("path", {
+            d: "M0.5 4.84595C0.5 4.56981 0.723858 4.34595 1 4.34595H15C15.2761 4.34595 15.5 4.5698 15.5 4.84595V10.8399C15.5 11.116 15.2761 11.3399 15 11.3399H1C0.723858 11.3399 0.5 11.116 0.5 10.8399V4.84595Z",
+            fill: "white",
+            stroke: "black"
+          }), /* @__PURE__ */ React.createElement("path", {
+            d: "M4.31592 10.0061C4.31592 9.72996 4.53978 9.5061 4.81592 9.5061H11.1845C11.4606 9.5061 11.6845 9.72996 11.6845 10.0061V16.0001C11.6845 16.2762 11.4606 16.5001 11.1845 16.5001H4.81592C4.53978 16.5001 4.31592 16.2762 4.31592 16.0001V10.0061Z",
+            fill: "white",
+            stroke: "black"
+          }), /* @__PURE__ */ React.createElement("line", {
+            x1: "5.29004",
+            y1: "10.8323",
+            x2: "10.7101",
+            y2: "10.8323",
+            stroke: "black"
+          }), /* @__PURE__ */ React.createElement("line", {
+            x1: "5.29004",
+            y1: "12.5242",
+            x2: "10.7101",
+            y2: "12.5242",
+            stroke: "black"
+          }), /* @__PURE__ */ React.createElement("line", {
+            x1: "5.29004",
+            y1: "14.2161",
+            x2: "10.7101",
+            y2: "14.2161",
+            stroke: "black"
+          }));
+        }
+        case "language": {
+          return /* @__PURE__ */ React.createElement("svg", __spreadValues({
+            viewBox: "0 0 19 19"
+          }, svgProps), /* @__PURE__ */ React.createElement("path", {
+            d: "M9.5 18C14.1944 18 18 14.1944 18 9.5C18 4.80558 14.1944 1 9.5 1M9.5 18C4.80558 18 1 14.1944 1 9.5C1 4.80558 4.80558 1 9.5 1M9.5 18C11.823 18 13.7062 14.1944 13.7062 9.5C13.7062 4.80558 11.823 1 9.5 1M9.5 18C7.17699 18 5.29381 14.1944 5.29381 9.5C5.29381 4.80558 7.17699 1 9.5 1M1.44333 6.78351H17.4742M1.3088 11.7784H17.6912",
+            stroke: "black"
+          }));
+        }
+        case "information": {
+          return /* @__PURE__ */ React.createElement("svg", __spreadValues({
+            viewBox: "0 0 17 17"
+          }, svgProps), /* @__PURE__ */ React.createElement("path", {
+            d: "M9.72182 5.99993C10.0524 5.99993 10.3203 5.73198 10.3203 5.40145C10.3203 5.07092 10.0524 4.80297 9.72182 4.80297C9.39129 4.80297 9.12335 5.07092 9.12335 5.40145C9.12335 5.73198 9.39129 5.99993 9.72182 5.99993Z",
+            fill: "black"
+          }), /* @__PURE__ */ React.createElement("path", {
+            d: "M7.21887 6.67639C6.89117 6.71981 6.66072 7.02066 6.70414 7.34836C6.74756 7.67605 7.04841 7.9065 7.3761 7.86308L8.353 7.73364L7.17405 11.3945C7.11289 11.5844 7.15164 11.7825 7.26117 11.932C7.38068 12.1287 7.60875 12.2469 7.85155 12.2147L9.40669 12.0087C9.73436 11.9653 9.96479 11.6645 9.92137 11.3368C9.87795 11.0091 9.57713 10.7787 9.24947 10.8221L8.58762 10.9098L9.76774 7.24534C9.83038 7.05084 9.78821 6.84771 9.67254 6.69702C9.55085 6.50877 9.32791 6.39694 9.09093 6.42834L7.21887 6.67639Z",
+            fill: "black"
+          }), /* @__PURE__ */ React.createElement("path", {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M17 8.5C17 13.1944 13.1944 17 8.5 17C3.80558 17 0 13.1944 0 8.5C0 3.80558 3.80558 0 8.5 0C13.1944 0 17 3.80558 17 8.5ZM16 8.5C16 12.8454 12.8454 16 8.5 16C4.15461 16 1 12.8454 1 8.5C1 4.15461 4.15461 1 8.5 1C12.8454 1 16 4.15461 16 8.5Z",
+            fill: "black"
+          }));
+        }
+        case "options": {
+          return /* @__PURE__ */ React.createElement("svg", __spreadValues({
+            viewBox: "0 0 16 2"
+          }, svgProps), /* @__PURE__ */ React.createElement("circle", {
+            cx: "15",
+            cy: "1",
+            r: "1",
+            transform: "rotate(90 15 1)",
+            fill: "black"
+          }), /* @__PURE__ */ React.createElement("circle", {
+            cx: "1",
+            cy: "1",
+            r: "1",
+            transform: "rotate(90 1 1)",
+            fill: "black"
+          }), /* @__PURE__ */ React.createElement("circle", {
+            cx: "8",
+            cy: "1",
+            r: "1",
+            transform: "rotate(90 8 1)",
+            fill: "black"
+          }));
+        }
+        case "browse": {
+          return /* @__PURE__ */ React.createElement("svg", __spreadValues({
+            viewBox: "0 0 24 24"
+          }, svgProps), /* @__PURE__ */ React.createElement("circle", {
+            cx: "12",
+            cy: "12",
+            r: "12",
+            fill: "currentColor"
+          }), /* @__PURE__ */ React.createElement("path", {
+            "fill-rule": "evenodd",
+            "clip-rule": "evenodd",
+            d: "M6.16663 7.33334C6.16663 6.68901 6.68896 6.16667 7.33329 6.16667H10.25C10.8943 6.16667 11.4166 6.68901 11.4166 7.33334V10.25C11.4166 10.8943 10.8943 11.4167 10.25 11.4167H7.33329C6.68896 11.4167 6.16663 10.8943 6.16663 10.25V7.33334ZM7.33329 7.04167H10.25C10.411 7.04167 10.5416 7.17226 10.5416 7.33334V10.25C10.5416 10.4111 10.411 10.5417 10.25 10.5417H7.33329C7.17221 10.5417 7.04163 10.4111 7.04163 10.25V7.33334C7.04163 7.17226 7.17221 7.04167 7.33329 7.04167Z",
+            fill: "white"
+          }), /* @__PURE__ */ React.createElement("path", {
+            "fill-rule": "evenodd",
+            "clip-rule": "evenodd",
+            d: "M6.16663 13.75C6.16663 13.1057 6.68896 12.5833 7.33329 12.5833H10.25C10.8943 12.5833 11.4166 13.1057 11.4166 13.75V16.6667C11.4166 17.311 10.8943 17.8333 10.25 17.8333H7.33329C6.68896 17.8333 6.16663 17.311 6.16663 16.6667V13.75ZM7.33329 13.4583H10.25C10.411 13.4583 10.5416 13.5889 10.5416 13.75V16.6667C10.5416 16.8278 10.411 16.9583 10.25 16.9583H7.33329C7.17221 16.9583 7.04163 16.8278 7.04163 16.6667V13.75C7.04163 13.5889 7.17221 13.4583 7.33329 13.4583Z",
+            fill: "white"
+          }), /* @__PURE__ */ React.createElement("path", {
+            "fill-rule": "evenodd",
+            "clip-rule": "evenodd",
+            d: "M13.75 6.16667C13.1056 6.16667 12.5833 6.68901 12.5833 7.33334V10.25C12.5833 10.8943 13.1056 11.4167 13.75 11.4167H16.6666C17.311 11.4167 17.8333 10.8943 17.8333 10.25V7.33334C17.8333 6.68901 17.311 6.16667 16.6666 6.16667H13.75ZM16.6666 7.04167H13.75C13.5889 7.04167 13.4583 7.17226 13.4583 7.33334V10.25C13.4583 10.4111 13.5889 10.5417 13.75 10.5417H16.6666C16.8277 10.5417 16.9583 10.4111 16.9583 10.25V7.33334C16.9583 7.17226 16.8277 7.04167 16.6666 7.04167Z",
+            fill: "white"
+          }), /* @__PURE__ */ React.createElement("path", {
+            "fill-rule": "evenodd",
+            "clip-rule": "evenodd",
+            d: "M17.8333 15.2083C17.8333 16.6581 16.658 17.8333 15.2083 17.8333C13.7585 17.8333 12.5833 16.6581 12.5833 15.2083C12.5833 13.7586 13.7585 12.5833 15.2083 12.5833C16.658 12.5833 17.8333 13.7586 17.8333 15.2083ZM16.9583 15.2083C16.9583 16.1748 16.1748 16.9583 15.2083 16.9583C14.2418 16.9583 13.4583 16.1748 13.4583 15.2083C13.4583 14.2418 14.2418 13.4583 15.2083 13.4583C16.1748 13.4583 16.9583 14.2418 16.9583 15.2083Z",
+            fill: "white"
+          }));
+        }
+        case "star-empty": {
+          return /* @__PURE__ */ React.createElement("svg", __spreadValues({
+            viewBox: "0 0 13 12"
+          }, svgProps), /* @__PURE__ */ React.createElement("path", {
+            d: "M2 5.2767L5.11944 4.81796L6.70023 2L7.96487 4.81796L11 5.51699L8.75527 7.64684L9.18735 11L6.42623 9.40534L3.62295 10.7925L4.21311 7.64684L2 5.2767Z",
+            stroke: "black"
+          }));
+        }
+        case "star-filled": {
+          return /* @__PURE__ */ React.createElement("svg", __spreadValues({
+            viewBox: "0 0 13 12"
+          }, svgProps), /* @__PURE__ */ React.createElement("path", {
+            d: "M2 5.2767L5.11944 4.81796L6.70023 2L7.96487 4.81796L11 5.51699L8.75527 7.64684L9.18735 11L6.42623 9.40534L3.62295 10.7925L4.21311 7.64684L2 5.2767Z",
+            fill: "black",
+            stroke: "black"
+          }));
+        }
+        case "cog-wheel": {
+          return /* @__PURE__ */ React.createElement("svg", __spreadValues({
+            viewBox: "0 0 24 24"
+          }, svgProps), /* @__PURE__ */ React.createElement("path", {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M15.273 2.68498V1C15.273 0.447715 14.8253 0 14.273 0H9.72754C9.17525 0 8.72754 0.447715 8.72754 1V2.6852C8.72754 3.20708 8.09656 3.46843 7.72754 3.09941L6.53588 1.90775C6.14536 1.51723 5.51219 1.51723 5.12167 1.90775L1.90755 5.12187C1.51702 5.5124 1.51702 6.14556 1.90755 6.53609L3.09865 7.72719C3.46767 8.09621 3.20632 8.72719 2.68444 8.72719H1C0.447715 8.72719 0 9.1749 0 9.72719V14.2726C0 14.8249 0.447715 15.2726 1 15.2726H2.68534C3.20722 15.2726 3.46857 15.9036 3.09955 16.2726L1.90793 17.4643C1.51741 17.8548 1.51741 18.488 1.90793 18.8785L5.12205 22.0926C5.51258 22.4831 6.14574 22.4831 6.53627 22.0926L7.72754 20.9013C8.09656 20.5323 8.72754 20.7937 8.72754 21.3155V23C8.72754 23.5523 9.17525 24 9.72754 24H14.273C14.8253 24 15.273 23.5523 15.273 23V21.3158C15.273 20.7939 15.904 20.5325 16.273 20.9015L17.4639 22.0924C17.8544 22.483 18.4876 22.483 18.8781 22.0924L22.0922 18.8783C22.4828 18.4878 22.4828 17.8546 22.0922 17.4641L20.9008 16.2726C20.5317 15.9036 20.7931 15.2726 21.315 15.2726H23C23.5523 15.2726 24 14.8249 24 14.2726V9.72719C24 9.1749 23.5523 8.72719 23 8.72719H21.3159C20.794 8.72719 20.5326 8.09621 20.9017 7.72719L22.0926 6.53625C22.4831 6.14572 22.4831 5.51256 22.0926 5.12203L18.8785 1.90791C18.488 1.51739 17.8548 1.51739 17.4643 1.90791L16.273 3.0992C15.904 3.46822 15.273 3.20686 15.273 2.68498ZM16.5792 4.20716C16.263 4.52345 15.7775 4.58532 15.3687 4.40375C15.2439 4.34832 15.1174 4.29587 14.9895 4.2465C14.5723 4.08555 14.273 3.69861 14.273 3.25149V2C14.273 1.44771 13.8253 1 13.273 1H10.7275C10.1753 1 9.72754 1.44772 9.72754 2V3.25116C9.72754 3.69832 9.42816 4.08528 9.01096 4.2462C8.88288 4.29561 8.75633 4.34809 8.6314 4.40357C8.22262 4.58511 7.73715 4.52323 7.42087 4.20695L6.53588 3.32196C6.14536 2.93144 5.51219 2.93144 5.12167 3.32196L3.32176 5.12187C2.93124 5.5124 2.93124 6.14556 3.32176 6.53609L4.20676 7.42109C4.52303 7.73736 4.58491 8.22283 4.40338 8.63161C4.34797 8.75638 4.29555 8.88276 4.2462 9.01067C4.08526 9.42784 3.69831 9.72719 3.25118 9.72719H2C1.44772 9.72719 1 10.1749 1 10.7272V13.2726C1 13.8249 1.44772 14.2726 2 14.2726H3.2511C3.69825 14.2726 4.0852 14.572 4.24614 14.9892C4.29556 15.1173 4.34807 15.2439 4.40357 15.3688C4.58513 15.7776 4.52327 16.2631 4.20698 16.5794L3.32215 17.4643C2.93162 17.8548 2.93162 18.488 3.32215 18.8785L5.12205 20.6784C5.51258 21.0689 6.14574 21.0689 6.53627 20.6784L7.42136 19.7933C7.73762 19.477 8.22305 19.4151 8.63183 19.5966C8.75662 19.6521 8.88302 19.7045 9.01096 19.7538C9.42816 19.9147 9.72754 20.3017 9.72754 20.7489V22C9.72754 22.5523 10.1753 23 10.7275 23H13.273C13.8253 23 14.273 22.5523 14.273 22V20.7485C14.273 20.3014 14.5723 19.9145 14.9895 19.7535C15.1173 19.7042 15.2436 19.6518 15.3682 19.5965C15.777 19.4149 16.2625 19.4768 16.5788 19.7931L17.4639 20.6782C17.8544 21.0687 18.4876 21.0687 18.8781 20.6782L20.678 18.8783C21.0685 18.4878 21.0685 17.8546 20.678 17.4641L19.7929 16.579C19.4766 16.2627 19.4147 15.7772 19.5963 15.3684C19.6517 15.2436 19.7042 15.1172 19.7535 14.9892C19.9145 14.572 20.3014 14.2726 20.7486 14.2726H22C22.5523 14.2726 23 13.8249 23 13.2726V10.7272C23 10.1749 22.5523 9.72719 22 9.72719H20.7485C20.3013 9.72719 19.9144 9.42784 19.7535 9.01067C19.7042 8.8829 19.6518 8.75665 19.5965 8.63201C19.415 8.22324 19.4768 7.7378 19.7931 7.42154L20.6784 6.53625C21.0689 6.14572 21.0689 5.51256 20.6784 5.12203L18.8785 3.32213C18.488 2.9316 17.8548 2.9316 17.4643 3.32213L16.5792 4.20716ZM16.5999 12.0001C16.5999 14.5406 14.5404 16.6001 11.9999 16.6001C9.45939 16.6001 7.3999 14.5406 7.3999 12.0001C7.3999 9.45958 9.45939 7.40009 11.9999 7.40009C14.5404 7.40009 16.5999 9.45958 16.5999 12.0001ZM17.5999 12.0001C17.5999 15.0929 15.0927 17.6001 11.9999 17.6001C8.90711 17.6001 6.3999 15.0929 6.3999 12.0001C6.3999 8.90729 8.90711 6.40009 11.9999 6.40009C15.0927 6.40009 17.5999 8.90729 17.5999 12.0001Z",
+            fill: "black"
+          }));
+        }
+      }
+      return null;
+    }
+    case "FontAwesome": {
+      return /* @__PURE__ */ React.createElement(Icon, __spreadValues({
+        className,
+        faIcon: content,
+        title: text
+      }, other));
+    }
+    default:
+    case "Text": {
+      return text ? /* @__PURE__ */ React.createElement("i", __spreadValues(__spreadValues({
+        className: appendClassNames(className, "humany-letter-symbol"),
+        title: text
+      }, sharedProps), other), text.substring(0, 2)) : null;
+    }
+  }
+};
+const CaretUp = styled.svg`
+    transform: rotate(180deg);
+`;
+const defaultVariantMapping = {
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  h4: "h4",
+  h5: "h5",
+  h6: "h6",
+  p: "p",
+  span: "span"
+};
+const Typography = ({ variant, component, className, children }) => {
+  const { typographyVariantMapping = {} } = useContext();
+  const variantMapping = __spreadValues(__spreadValues({}, defaultVariantMapping), typographyVariantMapping);
+  const Component2 = component || variantMapping[variant] || "span";
+  return /* @__PURE__ */ React.createElement(Base, {
+    className,
+    as: Component2
+  }, children);
+};
+const Base = styled.span``;
+var AnimationType = /* @__PURE__ */ ((AnimationType2) => {
+  AnimationType2["SlideInLeft"] = "slide-in-left";
+  AnimationType2["SlideInRight"] = "slide-in-right";
+  AnimationType2["SlideInBottom"] = "slide-in-bottom";
+  AnimationType2["SlideInTop"] = "slide-in-top";
+  return AnimationType2;
+})(AnimationType || {});
+const defaultDuration = 300;
+const Drawer = ({
+  className,
+  children,
+  header,
+  onToggle,
+  trigger,
+  fullScreen = false,
+  closeButtonAriaLabel,
+  animation = {
+    type: "slide-in-bottom"
+  }
+}) => {
+  const { duration = defaultDuration } = animation;
+  const closeButtonRef = useRef();
+  const triggerRef = useRef();
+  const [css2, ref] = useScroll(true);
+  const [visible, toggleVisible] = useToggle();
+  const previousVisible = usePrevious(visible);
+  const id = useRef(uuid());
+  useEffect(() => {
+    if (onToggle) {
+      onToggle(visible);
+    }
+  }, [visible]);
+  const esc = useKeyPress("Escape");
+  useEffect(() => {
+    if (esc) {
+      toggleVisible(false);
+    }
+  }, [esc]);
+  useEventListener("click", (event) => {
+    const { target } = event;
+    if (!triggerRef.current || !ref.current || !target) {
+      return;
+    }
+    if (triggerRef.current !== target && ref.current !== target && !ref.current.contains(target) && !triggerRef.current.contains(target)) {
+      toggleVisible(false);
+    }
+  }, window);
+  const closeMenus = useUniqueMenu(id.current, () => {
+    toggleVisible(false);
+  });
+  useWidgetEvent("router:changed", () => {
+    toggleVisible(false);
+  });
+  useEffect(() => {
+    if (visible && closeButtonRef.current) {
+      closeButtonRef.current.focus();
+    } else if (!visible && triggerRef.current && previousVisible) {
+      triggerRef.current.focus();
+    }
+  }, [visible, closeButtonRef.current, triggerRef.current]);
+  const WrapperWithAnimation = animations[animation.type];
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(CSSTransition, {
+    in: visible,
+    className: "humany-drawer-transition",
+    classNames: "humany-drawer-transition",
+    unmountOnExit: true,
+    timeout: duration
+  }, /* @__PURE__ */ React.createElement(Portal, null, /* @__PURE__ */ React.createElement(WrapperWithAnimation, {
+    duration,
+    fullScreen,
+    className: appendClassNames(className, "humany-drawer", `humany-drawer-${id.current}`),
+    clientHeight: document.body.clientHeight,
+    css: css2,
+    ref
+  }, /* @__PURE__ */ React.createElement(CloseButton$1, {
+    onClick: () => toggleVisible(false),
+    tabIndex: 0,
+    ref: closeButtonRef,
+    "aria-label": closeButtonAriaLabel
+  }, /* @__PURE__ */ React.createElement(SymbolBadge, {
+    symbol: { type: "Svg", content: "close" }
+  })), !!header && /* @__PURE__ */ React.createElement(Header$1, {
+    variant: "h1",
+    className: "humany-drawer-header"
+  }, header), children))), React.cloneElement(trigger, {
+    onClick: (event) => {
+      toggleVisible();
+      closeMenus();
+    },
+    ref: triggerRef,
+    "aria-label": trigger.props.title,
+    "aria-expanded": visible
+  }));
+};
+const Wrapper$4 = styled.div`
+    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;
+}};
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    border: ${(p) => p.theme.border};
+    width: 100%;
+    box-shadow: ${(p) => p.theme.boxShadow};
+    background: #ffffff;
+    ${(p) => p.css && p.css}
+`;
+const Header$1 = styled(Typography)`
+    padding: ${(p) => p.theme.sizes.normal};
+    margin: 0;
+    text-align: center;
+    border-bottom: #eeeeee 1px solid;
+    background: #ffffff;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-weight: bold;
+    color: ${(p) => {
+  var _a;
+  return (_a = p.theme.colors) == null ? void 0 : _a.text;
+}};
+    font-size: ${(p) => {
+  var _a;
+  return (_a = p.theme.fonts) == null ? void 0 : _a.normal;
+}};
+    line-height: 1.2em;
+`;
+const AnimationBase = css`
+    transition: ${(p) => p.duration}ms;
+`;
+const WrapperWithSlideInBottom = styled(Wrapper$4)`
+    max-height: 0;
+    ${AnimationBase}
+
+    &.humany-drawer-transition-enter {
+        max-height: 0;
+    }
+    &.humany-drawer-transition-enter-active,
+    &.humany-drawer-transition-enter-done,
+    &.humany-drawer-transition-exit {
+        max-height: ${(p) => p.fullScreen ? "100%" : "400px"};
+    }
+
+    &.humany-drawer-transition-exit-active,
+    &.humany-drawer-transition-exit-done {
+        max-height: 0;
+    }
+`;
+const WrapperWithSlideInRight = styled(Wrapper$4)`
+    ${AnimationBase}
+    transform: translateX(100%);
+    height: ${(p) => p.fullScreen ? "100%" : "auto"};
+
+    &.humany-drawer-transition-enter {
+        transform: translateX(100%);
+    }
+    &.humany-drawer-transition-enter-active,
+    &.humany-drawer-transition-enter-done,
+    &.humany-drawer-transition-exit {
+        transform: translateX(0);
+    }
+
+    &.humany-drawer-transition-exit-active,
+    &.humany-drawer-transition-exit-done {
+        transform: translateX(100%);
+    }
+`;
+const WrapperWithSlideInLeft = styled(Wrapper$4)`
+    ${AnimationBase}
+    transform: translateX(-100%);
+    height: ${(p) => p.fullScreen ? "100%" : "auto"};
+
+    &.humany-drawer-transition-enter {
+        transform: translateX(-100%);
+    }
+    &.humany-drawer-transition-enter-active,
+    &.humany-drawer-transition-enter-done,
+    &.humany-drawer-transition-exit {
+        transform: translateX(0);
+    }
+
+    &.humany-drawer-transition-exit-active,
+    &.humany-drawer-transition-exit-done {
+        transform: translateX(-100%);
+    }
+`;
+const WrapperWithSlideInTop = styled(Wrapper$4)`
+    ${AnimationBase}
+    bottom: unset;
+    top: 0;
+    height: 0;
+
+    &.humany-drawer-transition-enter {
+        height: 0;
+    }
+    &.humany-drawer-transition-enter-active,
+    &.humany-drawer-transition-enter-done,
+    &.humany-drawer-transition-exit {
+        height: ${(p) => p.clientHeight}px;
+    }
+
+    &.humany-drawer-transition-exit-active,
+    &.humany-drawer-transition-exit-done {
+        height: 0;
+    }
+`;
+const animations = {
+  ["slide-in-bottom"]: WrapperWithSlideInBottom,
+  ["slide-in-right"]: WrapperWithSlideInRight,
+  ["slide-in-left"]: WrapperWithSlideInLeft,
+  ["slide-in-top"]: WrapperWithSlideInTop
+};
+const usePosition = (visible, id, element) => {
+  const [posX, setPosX] = useState(0);
+  const [posY, setPosY] = useState(0);
+  const set = useCallback((event, trigger) => {
+    event.preventDefault();
+    if (trigger) {
+      const clientRect = trigger.getBoundingClientRect();
+      setPosX(Math.max(document.body.clientWidth - clientRect.right, 1));
+      setPosY(clientRect.bottom + window.scrollY);
+    }
+  }, [posX, posY, setPosX, setPosY]);
+  useEffect(() => {
+    if (!element || !visible) {
+      return;
+    }
+    const clientRect = element.getBoundingClientRect();
+    const newPos = {
+      x: posX,
+      y: posY
+    };
+    if (clientRect.left < 0) {
+      newPos.x = 0;
+    }
+    if (clientRect.bottom > window.innerHeight) {
+      newPos.y = 0;
+    }
+    if (newPos.x !== posX) {
+      setPosX(newPos.x);
+    }
+    if (newPos.y !== posY) {
+      setPosY(newPos.y);
+    }
+  }, [element, visible, id]);
+  return [{ x: posX, y: posY }, set];
+};
+const Dropdown = React.forwardRef((_i, ref) => {
+  var _j = _i, { className = "", children = null, trigger, closeButtonAriaLabel } = _j, props = __objRest(_j, ["className", "children", "trigger", "closeButtonAriaLabel"]);
+  const closeButtonRef = useRef();
+  const triggerRef = useRef();
+  const innerRef = useRef();
+  useImperativeHandle(ref, () => innerRef.current, [innerRef.current]);
+  const id = useRef(uuid());
+  const [visible, setVisible] = useState(false);
+  const previousVisible = usePrevious(visible);
+  const [{ x, y }, set] = usePosition(visible, id.current, innerRef.current);
+  const esc = useKeyPress("Escape");
+  useEffect(() => {
+    if (esc) {
+      setVisible(false);
+    }
+  }, [esc]);
+  useEffect(() => {
+    if (visible && closeButtonRef.current) {
+      closeButtonRef.current.focus();
+    } else if (!visible && triggerRef.current && previousVisible) {
+      triggerRef.current.focus();
+    }
+  }, [visible, closeButtonRef.current, triggerRef.current]);
+  useEventListener("click", (event) => {
+    const { target } = event;
+    if (!innerRef.current || !target) {
+      return;
+    }
+    if (innerRef.current !== target && !innerRef.current.contains(target)) {
+      setVisible(false);
+    }
+  }, window);
+  useWidgetEvent("router:changed", () => {
+    setVisible(false);
+  });
+  const closeMenus = useUniqueMenu(id.current, () => {
+    setVisible(false);
+  });
+  const onTriggerClick = useCallback((event) => {
+    event.stopPropagation();
+    set(event, triggerRef.current);
+    setVisible(!visible);
+    closeMenus();
+  }, [closeMenus, set, setVisible]);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, visible && /* @__PURE__ */ React.createElement(Portal, null, /* @__PURE__ */ React.createElement(StyledDropdown, __spreadProps(__spreadValues({
+    className: appendClassNames("humany-dropdown", `humany-dropdown-${id.current}`, className)
+  }, props), {
+    x,
+    y,
+    ref: innerRef
+  }), /* @__PURE__ */ React.createElement(CloseButton$1, {
+    onClick: () => setVisible(false),
+    tabIndex: 0,
+    ref: closeButtonRef,
+    "aria-label": closeButtonAriaLabel
+  }, /* @__PURE__ */ React.createElement(SymbolBadge, {
+    symbol: { type: "Svg", content: "close" }
+  })), children)), React.cloneElement(trigger, {
+    onClick: onTriggerClick,
+    ref: triggerRef,
+    "aria-label": trigger.props.title,
+    "aria-expanded": visible
+  }));
+});
+const StyledDropdown = styled.div`
+    ${contentBox}
+    padding: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.medium;
+}};
+    min-width: 150px;
+    position: absolute;
+    box-shadow: ${(p) => p.theme.boxShadow};
+
+    ${(p) => {
+  var _a, _b, _c;
+  let css2 = "";
+  if (p.y > 0) {
+    css2 += `top: calc(${((_a = p.theme.sizes) == null ? void 0 : _a.small) || "0px"} + ${p.y || "0"}px);`;
+  } else {
+    css2 += `bottom: ${((_b = p.theme.sizes) == null ? void 0 : _b.normal) || "0px"};`;
+  }
+  if (p.x > 0) {
+    css2 += `right: ${p.x || "0"}px;`;
+  } else {
+    css2 += `left: ${((_c = p.theme.sizes) == null ? void 0 : _c.normal) || "0px"};`;
+  }
+  return css2;
+}};
+`;
+const Empty = (_k) => {
+  var other = __objRest(_k, []);
+  return /* @__PURE__ */ React.createElement(Wrapper$3, __spreadValues({}, other));
+};
+const Wrapper$3 = styled.div`
+    display: none;
+`;
+var grid = forwardRef((_l, ref) => {
+  var _m = _l, { children, columns, gap, className } = _m, other = __objRest(_m, ["children", "columns", "gap", "className"]);
+  return /* @__PURE__ */ React.createElement(Div, __spreadProps(__spreadValues(__spreadValues({
+    className: appendClassNames(className, "humany-grid"),
+    "data-columns": columns,
+    "data-gap": gap
+  }, filterCssProps(other)), convertToStringAttributes(other)), {
+    ref
+  }), children);
+});
+const Div = styled.div`
+    display: grid;
+    grid-template-columns: repeat(${(p) => p["data-columns"]}, 1fr);
+    grid-gap: ${(p) => p["data-gap"]};
+    justify-content: center;
+    grid-auto-rows: max-content;
+    ${filterCssPropsStyle}
+`;
+var Html = forwardRef((_n, ref) => {
+  var _o = _n, { htmlParseInstruction = null, className, html } = _o, other = __objRest(_o, ["htmlParseInstruction", "className", "html"]);
+  const container = useContainer();
+  const [processedHtml, setProcessedHtml] = useState();
+  useEffect(() => {
+    const instructions = htmlParseInstruction || defaultRenderInstructions(container);
+    const processed = parseHtmlString(html, instructions);
+    setProcessedHtml(processed);
+  }, [html, htmlParseInstruction]);
+  return /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({
+    className: appendClassNames(className, "humany-html")
+  }, convertToStringAttributes(other)), {
+    ref
+  }), processedHtml);
+});
+const Icon = (_p) => {
+  var _q = _p, {
+    faIcon,
+    title,
+    className = "",
+    role = "presentation"
+  } = _q, other = __objRest(_q, [
+    "faIcon",
+    "title",
+    "className",
+    "role"
+  ]);
+  return /* @__PURE__ */ React.createElement("i", __spreadValues({
+    className: appendClassNames(className, `fa fa-${faIcon}`),
+    title,
+    role
+  }, convertToStringAttributes(other)));
+};
+var input = forwardRef((_r, ref) => {
+  var _s = _r, {
+    className = "",
+    autoFocus = false,
+    onFocusChange = () => {
+    },
+    onEnter = () => {
+    },
+    onEscape = () => {
+    },
+    selectAllOnFocus,
+    onChange = () => {
+    },
+    disabled = false,
+    type
+  } = _s, other = __objRest(_s, [
+    "className",
+    "autoFocus",
+    "onFocusChange",
+    "onEnter",
+    "onEscape",
+    "selectAllOnFocus",
+    "onChange",
+    "disabled",
+    "type"
+  ]);
+  const [hasFocus, setHasFocus] = useState(autoFocus);
+  const innerRef = useRef();
+  useImperativeHandle(ref, () => innerRef.current);
+  useEffect(() => {
+    var _a;
+    if (autoFocus) {
+      (_a = innerRef == null ? void 0 : innerRef.current) == null ? void 0 : _a.focus();
+    }
+  }, [autoFocus, ref, innerRef]);
+  const handleFocus = (inFocus, event) => {
+    setHasFocus(inFocus);
+    onFocusChange && onFocusChange(inFocus);
+    if (selectAllOnFocus && inFocus) {
+      event.target.select();
+    }
+  };
+  const props = __spreadProps(__spreadValues({}, convertToStringAttributes(other)), {
+    disabled,
+    autoFocus,
+    type,
+    onKeyDown: (e) => {
+      if (e.key === "Enter" && hasFocus) {
+        onEnter(e);
+      }
+      if (e.key === "Escape" && hasFocus) {
+        onEscape(e);
+      }
+    },
+    onFocus: (e) => handleFocus(true, e),
+    onBlur: (e) => handleFocus(false, e),
+    onChange: (e) => onChange(e.target.value || ""),
+    className: appendClassNames(className, "humany-input"),
+    "data-type": type
+  });
+  return type !== "textarea" ? /* @__PURE__ */ React.createElement("input", __spreadProps(__spreadValues({}, props), {
+    ref: innerRef
+  })) : /* @__PURE__ */ React.createElement("textarea", __spreadProps(__spreadValues({}, props), {
+    ref: innerRef
+  }));
+});
+var List = forwardRef((_t, ref) => {
+  var _u = _t, { className, items, renderItem, renderLi = false } = _u, other = __objRest(_u, ["className", "items", "renderItem", "renderLi"]);
+  return /* @__PURE__ */ React.createElement("ul", __spreadProps(__spreadValues({
+    className: appendClassNames(className, "humany-list"),
+    "data-item-count": items.length
+  }, convertToStringAttributes(other)), {
+    ref
+  }), items.map((item, index, items2) => renderLi ? /* @__PURE__ */ React.createElement("li", {
+    className: "humany-list-item",
+    key: item.id
+  }, renderItem(item, index, items2)) : renderItem(item, index, items2)));
+});
+var Paragraph = forwardRef((_v, ref) => {
+  var _w = _v, { text, html, header, className, htmlParseInstruction, symbol } = _w, other = __objRest(_w, ["text", "html", "header", "className", "htmlParseInstruction", "symbol"]);
+  return /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({
+    className: appendClassNames(className, "humany-paragraph")
+  }, convertToStringAttributes(other)), {
+    ref
+  }), header ? /* @__PURE__ */ React.createElement(Typography, {
+    variant: "h1"
+  }, symbol ? /* @__PURE__ */ React.createElement(SymbolBadge, {
+    symbol
+  }) : null, header) : null, html ? /* @__PURE__ */ React.createElement(Html, {
+    html,
+    htmlParseInstruction
+  }) : null, text ? /* @__PURE__ */ React.createElement(Text, null, text) : null);
+});
+var ItemList = forwardRef((_x, ref) => {
+  var _y = _x, {
+    header,
+    customHeader,
+    text,
+    html,
+    className,
+    children,
+    symbol,
+    items,
+    renderItem,
+    renderLi,
+    ulProps
+  } = _y, other = __objRest(_y, [
+    "header",
+    "customHeader",
+    "text",
+    "html",
+    "className",
+    "children",
+    "symbol",
+    "items",
+    "renderItem",
+    "renderLi",
+    "ulProps"
+  ]);
+  return /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({
+    className: appendClassNames(className, "humany-item-list"),
+    "data-item-count": items.length
+  }, convertToStringAttributes(other)), {
+    ref
+  }), customHeader ? customHeader : header || text || html ? /* @__PURE__ */ React.createElement(Paragraph, {
+    symbol,
+    header,
+    text,
+    html
+  }) : null, items.length ? /* @__PURE__ */ React.createElement(List, __spreadValues({
+    items,
+    renderItem,
+    renderLi
+  }, ulProps)) : null, children);
+});
+const ItemTree = ({
+  className = "",
+  tree,
+  renderItem,
+  rootItem,
+  renderUnselected = true,
+  renderEmpty = true,
+  ulProps,
+  liProps
+}) => {
+  const hasSelectedChildren = (items) => {
+    return !checkIfSelected(items);
+  };
+  const checkIfSelected = (items) => {
+    if (!items || items.length < 1) {
+      return true;
+    }
+    return !items.some((item) => !!item.selected);
+  };
+  const renderTreeItems = (treeItems, level) => {
+    return /* @__PURE__ */ React.createElement(ItemList, {
+      className: appendClassNames(`humany-item-tree-level-${level}`),
+      items: treeItems,
+      ulProps,
+      renderItem: (itemProps) => {
+        const { id, selected, items, matches } = itemProps;
+        const isSelected = selected && checkIfSelected(items);
+        if (!renderEmpty && !matches) {
+          return null;
+        }
+        return /* @__PURE__ */ React.createElement("li", __spreadProps(__spreadValues({}, convertToStringAttributes(liProps)), {
+          key: id,
+          className: "humany-item-tree-item"
+        }), renderItem && renderItem(itemProps, level, isSelected), items && (renderUnselected || isSelected) && renderTreeItems(items, level + 1));
+      }
+    });
+  };
+  return /* @__PURE__ */ React.createElement("div", {
+    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$2, __spreadValues({
+    className: "humany-overlay",
+    duration,
+    ref,
+    onClick: onOverlayClick
+  }, other), children)));
+};
+const Wrapper$2 = 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"]);
+  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((_D, ref) => {
+  var _E = _D, {
+    className,
+    disabled = false,
+    role = "link",
+    tabIndex = 0,
+    onClick = () => {
+    },
+    onKeyDown = () => {
+    },
+    title,
+    href,
+    children,
+    target,
+    routeName,
+    params
+  } = _E, other = __objRest(_E, [
+    "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((_F, ref) => {
+  var _G = _F, { className, children, trigger, onOverlayClick = () => {
+  }, close = false } = _G, other = __objRest(_G, ["className", "children", "trigger", "onOverlayClick", "close"]);
+  const [visible, toggleVisible] = useToggle();
+  const [css2, innerRef] = useScroll(true);
+  const closeButtonRef = useRef();
+  const id = useRef(uuid());
+  const esc = useKeyPress("Escape");
+  useEffect(() => {
+    if (esc || close) {
+      toggleVisible(false);
+    }
+  }, [esc, close]);
+  useEffect(() => {
+    if (visible && closeButtonRef.current) {
+      closeButtonRef.current.focus();
+    }
+  }, [visible, closeButtonRef.current]);
+  useWidgetEvent("router:changed", () => {
+    toggleVisible(false);
+  });
+  const overlayClick = useCallback((e) => {
+    toggleVisible(false);
+    onOverlayClick(e);
+  }, [onOverlayClick, toggleVisible]);
+  useImperativeHandle(ref, () => ({
+    close() {
+      toggleVisible(false);
+    }
+  }));
+  const closeMenus = useCallback(() => {
+    return useUniqueMenu(id.current, () => {
+      toggleVisible(false);
+    });
+  }, [id.current]);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Overlay, {
+    visible,
+    onClick: overlayClick
+  }, /* @__PURE__ */ React.createElement(Wrapper$1, __spreadProps(__spreadValues({
+    className: appendClassNames(className, "humany-modal", `humany-modal-${id.current}`),
+    css: css2,
+    tabIndex: -1
+  }, other), {
+    ref: innerRef
+  }), /* @__PURE__ */ React.createElement(CloseButton$1, {
+    onClick: () => toggleVisible(false),
+    tabIndex: 0,
+    ref: closeButtonRef
+  }, /* @__PURE__ */ React.createElement(SymbolBadge, {
+    symbol: { type: "Svg", content: "close" }
+  })), children)), React.cloneElement(trigger, {
+    onClick: (event) => {
+      toggleVisible();
+      closeMenus();
+    }
+  }));
+});
+const Wrapper$1 = styled.div`
+    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;
+}};
+    position: relative;
+    max-width: 50%;
+    min-width: 200px;
+    padding: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.medium;
+}};
+    ${contentBox}
+    ${(p) => p.css && p.css}
+  outline: none;
+`;
+const Confirm = ({
+  className,
+  trigger,
+  header = "",
+  text = "",
+  onCancel = () => {
+  },
+  onConfirm = () => {
+  },
+  cancelLabel = "",
+  confirmLabel = ""
+}) => {
+  const ref = useRef();
+  const cancel = useCallback(() => {
+    var _a;
+    onCancel();
+    (_a = ref == null ? void 0 : ref.current) == null ? void 0 : _a.close();
+  }, [onCancel]);
+  const confirm = useCallback(() => {
+    var _a;
+    onConfirm();
+    (_a = ref == null ? void 0 : ref.current) == null ? void 0 : _a.close();
+  }, [onConfirm]);
+  return /* @__PURE__ */ React.createElement(StyledModal, {
+    className,
+    trigger,
+    ref,
+    onOverlayClick: cancel
+  }, header && /* @__PURE__ */ React.createElement(StyledText, null, header), text && /* @__PURE__ */ React.createElement(StyledText, null, text), confirmLabel && /* @__PURE__ */ React.createElement(StyledConfirmButton, {
+    onClick: confirm
+  }, confirmLabel), cancelLabel && /* @__PURE__ */ React.createElement(StyledCancelButton, {
+    onClick: cancel
+  }, cancelLabel));
+};
+const StyledModal = styled(Modal)`
+    display: block;
+
+    span {
+        display: block;
+        margin: 0 0 ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
+}};
+
+        &:first-of-type:not(:only-of-type) {
+            font-weight: 700;
+            margin: 0 0 ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.small;
+}};
+        }
+    }
+`;
+const StyledConfirmButton = styled(Button)`
+    display: inline-block;
+    min-width: 50px;
+    ${(p) => {
+  var _a, _b;
+  return `padding: ${(_a = p.theme.sizes) == null ? void 0 : _a.small} ${(_b = p.theme.sizes) == null ? void 0 : _b.normal};`;
+}}
+    ${(p) => p.theme.borderRadius && `border-radius: ${p.theme.borderRadius};`}
+  color: #FFFFFF;
+    background-color: ${(p) => {
+  var _a;
+  return (_a = p.theme.colors) == null ? void 0 : _a.primary;
+}};
+    border: 1px solid ${(p) => {
+  var _a;
+  return (_a = p.theme.colors) == null ? void 0 : _a.primary;
+}};
+
+    margin: 0 ${(p) => {
+  var _a;
+  return (_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) && borderTabStyle;
+}};
+        background-color: transparent;
+    }
+`;
+const StyledCancelButton = styled(Button)`
+    display: inline-block;
+    min-width: 50px;
+    ${(p) => {
+  var _a, _b;
+  return `padding: ${(_a = p.theme.sizes) == null ? void 0 : _a.small} ${(_b = p.theme.sizes) == null ? void 0 : _b.normal};`;
+}}
+    ${(p) => p.theme.borderRadius && `border-radius: ${p.theme.borderRadius};`}
+  background-color: transparent;
+    color: ${(p) => {
+  var _a;
+  return (_a = p.theme.colors) == null ? void 0 : _a.text;
+}};
+    border: 1px solid ${(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) && borderTabStyle;
+}};
+    }
+`;
+const NotFound = ({
+  header = "",
+  link = "",
+  suggestionHeader = "",
+  suggestion = ""
+}) => {
+  return /* @__PURE__ */ React.createElement(Wrapper, null, /* @__PURE__ */ React.createElement(Status, null, /* @__PURE__ */ React.createElement(Typography, {
+    variant: "h2"
+  }, "404")), /* @__PURE__ */ React.createElement(Header, null, /* @__PURE__ */ React.createElement(Typography, {
+    variant: "h3"
+  }, header), /* @__PURE__ */ React.createElement(TextLink, {
+    routeName: "index",
+    "aria-label": link,
+    text: link
+  })), /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement("span", null, suggestionHeader), /* @__PURE__ */ React.createElement("ul", null, /* @__PURE__ */ React.createElement("li", null, suggestion))));
+};
+const Wrapper = styled.div`
+    display: flex;
+    flex-wrap: wrap;
+`;
+const Status = styled.div`
+    ${headingElement("h2", css`
+            padding: 0;
+            margin: 0;
+            color: gray;
+            font-size: 7em;
+        `)}
+`;
+const Header = styled.div`
+    margin-left: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.medium;
+}};
+
+    ${headingElement("h3", css`
+            text-transform: uppercase;
+            font-size: ${(p) => {
+  var _a;
+  return (_a = p.theme.fonts) == null ? void 0 : _a.normal;
+}};
+        `)}
+
+    a {
+        color: ${(p) => {
+  var _a;
+  return (_a = p.theme.colors) == null ? void 0 : _a.link;
+}};
+        font-size: ${(p) => {
+  var _a;
+  return (_a = p.theme.fonts) == null ? void 0 : _a.small;
+}};
+    }
+`;
+const Content = styled.div`
+    margin-top: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.medium;
+}};
+    min-width: 100%;
+
+    span {
+        font-weight: bold;
+    }
+`;
+class TabStop extends Component {
+  constructor() {
+    super(...arguments);
+    this.state = {
+      boundFocus: false
+    };
+  }
+  componentWillMount() {
+    const settings = this.props.container.get("accessibilitySettings");
+    if (settings && settings.boundFocus) {
+      this.setState({
+        boundFocus: true
+      });
+    }
+  }
+  componentDidMount() {
+    if (!this.state.boundFocus) {
+      return;
+    }
+    const widgetDOMElement = this.props.container.get("widgetDOMElement");
+    if (this.node && widgetDOMElement) {
+      this.onFocusListener = this.node.addEventListener("focus", () => {
+        const focusable = widgetDOMElement.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+        const filtered = [].filter.call(focusable, (el) => {
+          if (typeof window === "undefined") {
+            return true;
+          }
+          const style = window.getComputedStyle(el);
+          if (style.display === "none" || el.offsetWidth <= 0 && el.offsetHeight <= 0) {
+            return false;
+          }
+          return true;
+        });
+        const firstFocusable = filtered[0];
+        if (firstFocusable) {
+          firstFocusable.focus();
+        }
+      });
+    }
+  }
+  componentWillUnmount() {
+    if (this.node) {
+      this.node.removeEventListener("focus", this.onFocusListener);
+    }
+  }
+  render() {
+    if (!this.state.boundFocus) {
+      return null;
+    }
+    return /* @__PURE__ */ React.createElement("div", {
+      style: { opacity: 0 },
+      tabIndex: 0,
+      ref: (node) => {
+        this.node = node;
+      }
+    });
+  }
+}
+var TextLink = forwardRef((_H, ref) => {
+  var _I = _H, { className, description, text, children } = _I, other = __objRest(_I, ["className", "description", "text", "children"]);
+  return /* @__PURE__ */ React.createElement(Link, __spreadProps(__spreadValues({
+    className: appendClassNames(className, "humany-text-link")
+  }, other), {
+    ref
+  }), children, /* @__PURE__ */ React.createElement(Text, null, text), description ? /* @__PURE__ */ React.createElement(Html, {
+    html: description,
+    className: "humany-description"
+  }) : null);
+});
+var DateFormats = /* @__PURE__ */ ((DateFormats2) => {
+  DateFormats2["HH_MM"] = "hh:mm";
+  DateFormats2["YYYY_MM_DD"] = "yyyy-mm-dd";
+  DateFormats2["YYYY_MM_DD_HH_MM"] = "yyyy-mm-dd hh:mm";
+  return DateFormats2;
+})(DateFormats || {});
+const Timestamp = ({ className = "", format = "hh:mm", timestamp }) => {
+  return /* @__PURE__ */ React.createElement("span", {
+    className: appendClassNames(className, "humany-timestamp")
+  }, formatDate(timestamp, format));
+};
+const asTwoDigitString = (input2) => {
+  return `0${input2}`.slice(-2);
+};
+function formatDate(unformattedDate, format) {
+  const date = new Date(unformattedDate);
+  const dateArray = date.toTimeString().split(" ")[0].split(":");
+  const timeString = dateArray.length > 1 ? `${dateArray[0]}:${dateArray[1]}` : dateArray[0];
+  const year = date.getFullYear();
+  const month = date.getMonth() + 1;
+  const day = date.getDate();
+  const dateString = `${year}-${asTwoDigitString(month)}-${asTwoDigitString(day)}`;
+  if (format === "yyyy-mm-dd") {
+    return dateString;
+  }
+  if (format === "hh:mm") {
+    return timeString;
+  }
+  return `${dateString} ${timeString}`;
+}
+const Tooltip = (_J) => {
+  var _K = _J, { className, children, content, sticky = false } = _K, other = __objRest(_K, ["className", "children", "content", "sticky"]);
+  const [open, setOpen] = useState(false);
+  const id = useRef(uuid());
+  const ref = useRef();
+  const [{ x, y }, set] = usePosition(open, id.current, ref.current);
+  const clickHandler = (event) => {
+    const { target } = event;
+    if (!ref.current || !target) {
+      return;
+    }
+    if (ref.current !== target && !ref.current.contains(target)) {
+      setOpen(false);
+    }
+  };
+  useEffect(() => {
+    if (!sticky) {
+      return;
+    }
+    window.addEventListener("click", clickHandler);
+    return () => {
+      window.removeEventListener("click", clickHandler);
+    };
+  }, [open, sticky]);
+  const handleMouseEvent = useCallback((e, value) => {
+    set(e, ref.current);
+    setOpen(value);
+  }, [set, setOpen]);
+  return /* @__PURE__ */ React.createElement(Trigger, {
+    ref,
+    className: "humany-tooltip-trigger",
+    onMouseEnter: !sticky ? (e) => handleMouseEvent(e, true) : void 0,
+    onMouseLeave: !sticky ? (e) => handleMouseEvent(e, false) : void 0,
+    onTouchEnd: sticky ? (e) => handleMouseEvent(e, !open) : void 0,
+    onClick: sticky ? (e) => handleMouseEvent(e, !open) : void 0
+  }, children, open && /* @__PURE__ */ React.createElement(Portal, null, /* @__PURE__ */ React.createElement(TooltipContainer, __spreadValues({
+    className: appendClassNames(className, "humany-tooltip-container"),
+    x,
+    y
+  }, other), content)));
+};
+const Trigger = styled.div`
+    display: flex;
+    align-items: center;
+`;
+const TooltipContainer = styled.div`
+    color: #ffffff;
+    background: #161616;
+    border-radius: ${(p) => p.theme.borderRadius};
+    padding: calc(${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.small;
+}} * 2);
+    font-size: ${(p) => {
+  var _a;
+  return (_a = p.theme.fonts) == null ? void 0 : _a.normal;
+}};
+    font-family: ${(p) => {
+  var _a;
+  return (_a = p.theme.fonts) == null ? void 0 : _a.type;
+}};
+    position: absolute;
+    z-index: 10;
+
+    a {
+        color: ${(p) => p.color ? p.color : "inherit"};
+        text-decoration: none;
+    }
+
+    i,
+    svg {
+        margin-right: ${(p) => p.theme.sizes.small};
+    }
+
+    ${(p) => {
+  let css2 = "";
+  if (p.y > 0) {
+    css2 += `top: calc(2px + ${p.y || "0"}px);`;
+  } else {
+    css2 += `bottom: 2px;`;
+  }
+  if (p.x > 0) {
+    css2 += `right: calc(2px + ${p.x || "0"}px);`;
+  } else {
+    css2 += `left: 2px;`;
+  }
+  return css2;
+}};
+`;
+const TransitionComponent = (props) => {
+  const {
+    in: inState,
+    mountOnEnter = true,
+    unmountOnExit = true,
+    timeout,
+    children,
+    transitions
+  } = props;
+  const generateTransitionDefinition = () => {
+    var _a, _b;
+    if (!transitions || transitions === "none") {
+      return;
+    }
+    if (typeof transitions === "string") {
+      return {
+        enter: {
+          transitionKeys: transitions,
+          duration: !!timeout ? typeof timeout === "number" ? timeout : timeout.enter : 200,
+          easing: "ease-in"
+        },
+        exit: {
+          transitionKeys: transitions,
+          duration: !!timeout ? typeof timeout === "number" ? timeout : timeout.exit : 200,
+          easing: "ease-out"
+        }
+      };
+    }
+    if (typeof transitions === "object") {
+      const { enter, exit } = transitions;
+      return {
+        enter: {
+          transitionKeys: (_a = transitions.enter) == null ? void 0 : _a.type,
+          duration: !!timeout ? typeof timeout === "number" ? timeout : timeout.enter : 200,
+          easing: !!enter.easing ? enter.easing : "ease-in"
+        },
+        exit: {
+          transitionKeys: (_b = transitions.enter) == null ? void 0 : _b.type,
+          duration: !!timeout ? typeof timeout === "number" ? timeout : timeout.enter : 200,
+          easing: !!exit.easing ? exit.easing : "ease-out"
+        }
+      };
+    }
+  };
+  const def = generateTransitionDefinition();
+  return /* @__PURE__ */ React.createElement(Transition, {
+    timeout: {
+      enter: def && def.enter.duration || 0,
+      exit: def && def.exit.duration || 0
+    },
+    in: inState,
+    appear: true,
+    mountOnEnter,
+    unmountOnExit,
+    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"]);
+  const container = useContainer();
+  const getWidget = () => {
+    const { implementation } = container.get("$widget");
+    return implementation.widgets.get(widgetName);
+  };
+  useEffect(() => {
+    const widget = getWidget();
+    widget == null ? void 0 : widget.activate(activationOptions).then(() => widget.invoke("attach"));
+    return () => {
+      widget == null ? void 0 : widget.deactivate();
+    };
+  }, [widgetName]);
+  const openWidget = (e) => {
+    const widget = getWidget();
+    const target = e.currentTarget;
+    if (widget) {
+      const toggle = () => {
+        widget.invoke("renderState").then((renderState) => renderState === WidgetRenderState.open ? widget.invoke("close") : widget.invoke("open")).then(() => {
+          widget.events.subscribeOnce("widget:area-rendered", (event, data) => {
+            const widgetDOMElement = container.get("widgetDOMElement");
+            if (widgetDOMElement) {
+              widget.events.dispatch("widget:modal-opened", {
+                name: widget.name,
+                ref: target
+              });
+            }
+          });
+        });
+      };
+      if (widget.state === WidgetState.Deactivated) {
+        widget.activate(activationOptions).then(() => widget.invoke("attach")).then(toggle);
+      } else {
+        toggle();
+      }
+    }
+  };
+  const onEnter = (e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      openWidget(e);
+    }
+  };
+  return /* @__PURE__ */ React.createElement(Link, __spreadProps(__spreadValues({
+    className: appendClassNames(className, "humany-widget-link"),
+    onKeyDown: onEnter,
+    onClick: (e) => {
+      onClick(e);
+      openWidget(e);
+    }
+  }, other), {
+    ref
+  }), children);
+});
+const createReactComponent = (container, type, reactComponent, fn, options) => {
+  return container.getAsync("componentResolver").then((componentResolver) => {
+    componentResolver.registerComponent(type, lazy(() => reactComponent));
+    return extendComponent(container, type, fn || (() => {
+    }), 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, borderTabStyle, browser, buttonCss, contentBox, convertToStringAttributes, createEmptyComponent, createReactComponent, defaultRenderInstructions, embeddedLinkMapper, filterCssProps, filterCssPropsStyle, genericHashLink, 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 };
+//# sourceMappingURL=index.js.map