@deviceinsight/ng-ui-basic-components 7.3.0 → 7.5.0

package/dist/index.js

@@ -1,49 +1,59 @@
-import { jsx as a, jsxs as m, Fragment as Z } from "react/jsx-runtime";
-import * as y from "react";
-import P, { useRef as M, useEffect as N, useState as x, createContext as X, useContext as Y } from "react";
-import g from "classnames";
-import { withTranslation as E, Trans as A, useTranslation as G } from "react-i18next";
-import J from "react-dom";
-import Q from "react-draggable";
-import { useFloating as ee, offset as te, flip as ne, shift as ie, size as se, arrow as ae, autoUpdate as $, useClick as oe, useHover as re, safePolygon as ce, useFocus as le, useDismiss as de, useInteractions as ue, FloatingPortal as he } from "@floating-ui/react";
-class Ye extends y.Component {
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import React__default, { useRef, useEffect, useState, createContext, useContext } from "react";
+import cx from "classnames";
+import { withTranslation, Trans, useTranslation } from "react-i18next";
+import ReactDOM from "react-dom";
+import Draggable from "react-draggable";
+import { useFloating, autoUpdate, offset, flip, shift, size, arrow, useClick, useHover, safePolygon, useFocus, useDismiss, useInteractions, FloatingPortal } from "@floating-ui/react";
+class Accordion extends React.Component {
   state = {
     currentPageIndex: -1
   };
   componentDidMount() {
-    const { defaultOpenPageIndex: e } = this.props;
-    e != null && this.handleAccordionToggle(e);
+    const { defaultOpenPageIndex } = this.props;
+    if (defaultOpenPageIndex !== null && defaultOpenPageIndex !== void 0) {
+      this.handleAccordionToggle(defaultOpenPageIndex);
+    }
   }
-  handleAccordionToggle = (e) => {
-    const { onPageChange: t } = this.props, i = this.state.currentPageIndex !== e ? e : -1;
+  handleAccordionToggle = (index) => {
+    const { onPageChange } = this.props;
+    const newPageIndex = this.state.currentPageIndex !== index ? index : -1;
     this.setState({
-      currentPageIndex: i
-    }), t && t(i);
+      currentPageIndex: newPageIndex
+    });
+    if (onPageChange) {
+      onPageChange(newPageIndex);
+    }
   };
   render() {
-    const { children: e, accordionClass: t } = this.props, { currentPageIndex: i } = this.state;
-    return /* @__PURE__ */ a("div", { className: t ? `di accordion ${t}` : "di accordion", children: e && e.map(
-      (s, o) => s ? /* @__PURE__ */ a(
-        s.type,
+    const { children, accordionClass } = this.props;
+    const { currentPageIndex } = this.state;
+    return /* @__PURE__ */ jsx("div", { className: accordionClass ? `di accordion ${accordionClass}` : "di accordion", children: children && children.map(
+      (child, index) => child ? /* @__PURE__ */ jsx(
+        child.type,
         {
-          index: o,
-          isOpen: i === o,
-          toggle: () => this.handleAccordionToggle(o),
-          ...s.props
+          index,
+          isOpen: currentPageIndex === index,
+          toggle: () => this.handleAccordionToggle(index),
+          ...child.props
         },
-        o
+        index
       ) : null
     ) });
   }
 }
-class Ge extends y.PureComponent {
+class AccordionItem extends React.PureComponent {
   render() {
-    const { badge: e, children: t, isOpen: i, info1: s, itemClasses: o, title: r, titleTooltip: c, toggle: l, tools: u, ...h } = this.props, d = ["item"];
-    return o && d.push(o), i && d.push("open"), /* @__PURE__ */ m("div", { className: d.join(" "), children: [
-      /* @__PURE__ */ m("div", { className: "head", children: [
-        /* @__PURE__ */ m("span", { className: "title", onClick: l, "data-testid": h["data-testid"], children: [
-          /* @__PURE__ */ a("h1", { title: c, children: r }),
-          e && /* @__PURE__ */ a(
+    const { badge, children, isOpen, info1, itemClasses, title, titleTooltip, toggle, tools, ...rest } = this.props;
+    const accordionItemClasses = ["item"];
+    if (itemClasses) accordionItemClasses.push(itemClasses);
+    if (isOpen) accordionItemClasses.push("open");
+    return /* @__PURE__ */ jsxs("div", { className: accordionItemClasses.join(" "), children: [
+      /* @__PURE__ */ jsxs("div", { className: "head", children: [
+        /* @__PURE__ */ jsxs("span", { className: "title", onClick: toggle, "data-testid": rest["data-testid"], children: [
+          /* @__PURE__ */ jsx("h1", { title: titleTooltip, children: title }),
+          badge && /* @__PURE__ */ jsx(
             "span",
             {
               className: "di label",
@@ -52,110 +62,146 @@ class Ge extends y.PureComponent {
                 backgroundColor: "#ddd",
                 borderColor: "transparent"
               },
-              children: e
+              children: badge
             }
           ),
-          s && /* @__PURE__ */ a("span", { style: s.cssStyle, children: s.text })
+          info1 && /* @__PURE__ */ jsx("span", { style: info1.cssStyle, children: info1.text })
         ] }),
-        /* @__PURE__ */ a("span", { className: "tools", children: u && u.map((p, f) => /* @__PURE__ */ a("span", { className: "tool", children: p }, f)) })
+        /* @__PURE__ */ jsx("span", { className: "tools", children: tools && tools.map((toolComponent, index) => /* @__PURE__ */ jsx("span", { className: "tool", children: toolComponent }, index)) })
       ] }),
-      /* @__PURE__ */ a("div", { className: "cont", children: t })
+      /* @__PURE__ */ jsx("div", { className: "cont", children })
     ] });
   }
 }
-function pe({
-  children: n,
-  title: e,
-  type: t,
-  disabled: i,
-  onClick: s,
-  style: o,
-  tabIndex: r,
-  t: c,
-  primary: l,
-  danger: u,
-  naked: h,
-  className: d,
-  small: p,
-  ...f
+function Button({
+  children,
+  title,
+  type,
+  disabled,
+  onClick,
+  style,
+  tabIndex,
+  t,
+  primary,
+  danger,
+  naked,
+  className,
+  small,
+  ...rest
 }) {
-  let v = e;
-  return e && typeof e != "string" && (v = c(e.id, {
-    defaultValue: e.defaultValue
-  })), /* @__PURE__ */ a(
+  let btnTitle = title;
+  if (title && typeof title !== "string") {
+    btnTitle = t(title.id, {
+      defaultValue: title.defaultValue
+    });
+  }
+  return /* @__PURE__ */ jsx(
     "button",
     {
-      "data-testid": f["data-testid"],
-      type: t || "button",
-      className: g("di button", d, { small: p, primary: l, danger: u, link: h }),
-      title: typeof v == "string" ? v : void 0,
-      disabled: i,
-      onClick: s,
-      style: o,
-      tabIndex: r,
-      children: n
+      "data-testid": rest["data-testid"],
+      type: type || "button",
+      className: cx("di button", className, { small, primary, danger, link: naked }),
+      title: typeof btnTitle === "string" ? btnTitle : void 0,
+      disabled,
+      onClick,
+      style,
+      tabIndex,
+      children
     }
   );
 }
-const b = E()(pe), me = ({ children: n, dividing: e, className: t, style: i }) => /* @__PURE__ */ a("div", { style: i, className: `di button-row ${e ? "dividing" : ""} ${t || ""}`, children: n });
-me.defaultProps = {
-  dividing: !1
+const Button$1 = withTranslation()(Button);
+const ButtonRow = ({ children, dividing, className, style }) => /* @__PURE__ */ jsx("div", { style, className: `di button-row ${dividing ? "dividing" : ""} ${className || ""}`, children });
+ButtonRow.defaultProps = {
+  dividing: false
+};
+const isTouchEvent = (event) => {
+  return !!event.touches;
 };
-const fe = (n) => !!n.touches, ge = (n, e) => {
-  const t = n.getBoundingClientRect();
-  let i, s;
-  return fe(e) ? (i = e.touches[0].pageX, s = e.touches[0].pageY) : (i = e.pageX, s = e.pageY), t.left <= i && t.right >= i && t.top <= s && t.bottom >= s;
-}, ve = (n, e) => {
-  const t = M(e);
-  N(() => {
-    t.current = e;
-  }, [e]), N(() => {
-    const i = (s) => {
-      n.filter((r) => r != null).every(
-        (r) => r !== s.target && !r.contains(s.target) && !ge(r, s)
-      ) && t.current(s);
+const isInsideBoundingRect = (element, event) => {
+  const rect = element.getBoundingClientRect();
+  let x, y;
+  if (isTouchEvent(event)) {
+    x = event.touches[0].pageX;
+    y = event.touches[0].pageY;
+  } else {
+    x = event.pageX;
+    y = event.pageY;
+  }
+  return rect.left <= x && rect.right >= x && rect.top <= y && rect.bottom >= y;
+};
+const useOutsideClick = (elements, callback) => {
+  const callbackRef = useRef(callback);
+  useEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+  useEffect(() => {
+    const listener = (event) => {
+      const elementsNonNull = elements.filter((element) => element != null);
+      if (elementsNonNull.every(
+        (element) => element !== event.target && !element.contains(event.target) && !isInsideBoundingRect(element, event)
+      )) {
+        callbackRef.current(event);
+      }
     };
-    return document.addEventListener("mousedown", i, !0), document.addEventListener("touchstart", i, !0), () => {
-      document.removeEventListener("mousedown", i, !0), document.removeEventListener("touchstart", i, !0);
+    document.addEventListener("mousedown", listener, true);
+    document.addEventListener("touchstart", listener, true);
+    return () => {
+      document.removeEventListener("mousedown", listener, true);
+      document.removeEventListener("touchstart", listener, true);
     };
-  }, [n]);
+  }, [elements]);
 };
-function we({ className: n, width: e, header: t, content: i, footer: s, onOutsideClick: o }) {
-  const r = M(null), [c, l] = x(null);
-  return N(() => {
-    l(r.current);
-  }, []), ve([c], () => {
-    o && o();
-  }), /* @__PURE__ */ a(Q, { handle: ".modal-header", nodeRef: r, children: /* @__PURE__ */ m(
+function ModalWindow({ className, width, header, content, footer, onOutsideClick }) {
+  const ref = useRef(null);
+  const [rootElement, setRootElement] = useState(null);
+  useEffect(() => {
+    setRootElement(ref.current);
+  }, []);
+  useOutsideClick([rootElement], () => {
+    if (onOutsideClick) onOutsideClick();
+  });
+  return /* @__PURE__ */ jsx(Draggable, { handle: ".modal-header", nodeRef: ref, children: /* @__PURE__ */ jsxs(
     "div",
     {
-      ref: r,
-      className: `modal-window ${n || ""}`,
+      ref,
+      className: `modal-window ${className || ""}`,
       style: {
-        maxWidth: e
+        maxWidth: width
       },
       children: [
-        t && /* @__PURE__ */ a("div", { className: "modal-header", children: t }),
-        i && /* @__PURE__ */ a("div", { className: "modal-content", children: i }),
-        s && /* @__PURE__ */ a("div", { className: "modal-footer", children: s })
+        header && /* @__PURE__ */ jsx("div", { className: "modal-header", children: header }),
+        content && /* @__PURE__ */ jsx("div", { className: "modal-content", children: content }),
+        footer && /* @__PURE__ */ jsx("div", { className: "modal-footer", children: footer })
       ]
     }
   ) });
 }
-class ye extends P.Component {
+class Modal extends React__default.Component {
   static defaultProps = {
     width: "60%"
   };
   container;
   modalRoot;
   timeoutId;
-  constructor(e) {
-    super(e), this.state = {
+  constructor(props) {
+    super(props);
+    this.state = {
       className: "di modal"
     };
   }
   componentDidMount() {
-    this.container = document.createElement("div"), this.modalRoot = document.getElementById("modal-root"), this.modalRoot ? this.modalRoot.appendChild(this.container) : document.body && document.body.appendChild(this.container), this.props.onOutsideClick && window.addEventListener("keydown", this.keyEventHandler), this.timeoutId = setTimeout(
+    this.container = document.createElement("div");
+    this.modalRoot = document.getElementById("modal-root");
+    if (this.modalRoot) {
+      this.modalRoot.appendChild(this.container);
+    } else if (document.body) {
+      document.body.appendChild(this.container);
+    }
+    if (this.props.onOutsideClick) {
+      window.addEventListener("keydown", this.keyEventHandler);
+    }
+    this.timeoutId = setTimeout(
       () => this.setState({
         className: `di modal show ${this.props.className || ""}`
       }),
@@ -163,177 +209,210 @@ class ye extends P.Component {
     );
   }
   componentWillUnmount() {
-    this.container && (this.modalRoot ? this.modalRoot.removeChild(this.container) : document.body && document.body.removeChild(this.container)), this.props.onOutsideClick && window.removeEventListener("keydown", this.keyEventHandler), this.timeoutId && clearTimeout(this.timeoutId);
+    if (this.container) {
+      if (this.modalRoot) {
+        this.modalRoot.removeChild(this.container);
+      } else if (document.body) {
+        document.body.removeChild(this.container);
+      }
+    }
+    if (this.props.onOutsideClick) {
+      window.removeEventListener("keydown", this.keyEventHandler);
+    }
+    if (this.timeoutId) {
+      clearTimeout(this.timeoutId);
+    }
   }
-  keyEventHandler = (e) => {
-    e.key === "Escape" && this.props.onOutsideClick && this.props.onOutsideClick(e);
+  keyEventHandler = (event) => {
+    if (event.key === "Escape" && this.props.onOutsideClick) {
+      this.props.onOutsideClick(event);
+    }
   };
   render() {
-    return this.container ? J.createPortal(
-      /* @__PURE__ */ a("div", { className: this.state.className, onMouseDown: this.props.onMouseDown, children: /* @__PURE__ */ a(we, { ...this.props }) }),
+    if (!this.container) {
+      return null;
+    }
+    return ReactDOM.createPortal(
+      /* @__PURE__ */ jsx("div", { className: this.state.className, onMouseDown: this.props.onMouseDown, children: /* @__PURE__ */ jsx(ModalWindow, { ...this.props }) }),
       this.container
-    ) : null;
+    );
   }
 }
-class Je extends P.PureComponent {
+class ModalContainer extends React__default.PureComponent {
   render() {
-    return /* @__PURE__ */ a("div", { id: "modal-root" });
+    return /* @__PURE__ */ jsx("div", { id: "modal-root" });
   }
 }
-class xe extends P.Component {
+class Spinner extends React__default.Component {
   static defaultProps = {
     size: 56,
-    center: !1
+    center: false
   };
   render() {
-    const { size: e = 56, center: t, ...i } = this.props;
-    let s = {
-      width: e,
-      height: e
+    const { size: size2 = 56, center, ...dataAttrs } = this.props;
+    let style = {
+      width: size2,
+      height: size2
     };
-    return t && (s = {
-      ...s,
-      position: "absolute",
-      top: "50%",
-      left: "50%",
-      marginTop: -e / 2,
-      marginLeft: -e / 2
-    }), /* @__PURE__ */ a("div", { className: "di spinner", style: s, ...i });
+    if (center) {
+      style = {
+        ...style,
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        marginTop: -size2 / 2,
+        marginLeft: -size2 / 2
+      };
+    }
+    return /* @__PURE__ */ jsx("div", { className: "di spinner", style, ...dataAttrs });
   }
 }
-class Qe extends P.Component {
+class SpinnerContainer extends React__default.Component {
   static defaultProps = {
     size: 56
   };
   render() {
-    const { show: e, size: t, children: i, className: s } = this.props, o = `di spinner-wrapper ${s || ""}`;
-    return /* @__PURE__ */ m("div", { className: o, children: [
-      /* @__PURE__ */ a(
+    const { show, size: size2, children, className } = this.props;
+    const classNames = `di spinner-wrapper ${className ? className : ""}`;
+    return /* @__PURE__ */ jsxs("div", { className: classNames, children: [
+      /* @__PURE__ */ jsx(
         "div",
         {
-          className: `di spinner-container ${e ? "visible" : ""}`,
+          className: `di spinner-container ${show ? "visible" : ""}`,
           "data-testid": this.props["data-testid"],
-          children: /* @__PURE__ */ a(xe, { size: t, center: !0 })
+          children: /* @__PURE__ */ jsx(Spinner, { size: size2, center: true })
         }
       ),
-      i
+      children
     ] });
   }
 }
-const be = (n, e) => {
-  switch (n) {
+const getWrapperClassName = (type, small) => {
+  switch (type) {
     case "checkbox":
     case "radio":
       return "di checkbox";
     case "toggle":
-      return e ? "di toggle toggle-small" : "di toggle";
+      return small ? "di toggle toggle-small" : "di toggle";
     default:
-      throw Error(`type not support: ${n}`);
+      throw Error(`type not support: ${type}`);
   }
-}, Ce = (n, e) => {
-  switch (n) {
+};
+const getCheckboxClassName = (type, small) => {
+  switch (type) {
     case "checkbox":
       return "box";
     case "radio":
       return "radio";
     case "toggle":
-      return e ? "switch switch-small" : "switch";
+      return small ? "switch switch-small" : "switch";
     default:
-      throw Error(`type not support: ${n}`);
+      throw Error(`type not support: ${type}`);
   }
-}, ke = ({
-  type: n = "checkbox",
-  value: e,
-  onChange: t,
-  title: i,
-  label: s,
-  disabled: o = !1,
-  toggleSmall: r = !1,
-  toggleColor: c = "#259b23",
-  t: l,
-  ...u
+};
+const Checkbox = ({
+  type = "checkbox",
+  value,
+  onChange,
+  title,
+  label,
+  disabled = false,
+  toggleSmall = false,
+  toggleColor = "#259b23",
+  t,
+  ...other
 }) => {
-  const h = n === "toggle" ? {
-    backgroundColor: e ? c : "gray"
-  } : {}, d = i ? l(i.id, {
-    defaultValue: i.defaultValue
-  }) : void 0, p = s ? l(s.id, {
-    defaultValue: s.defaultValue
+  const style = type === "toggle" ? {
+    backgroundColor: value ? toggleColor : "gray"
+  } : {};
+  const tooltip = title ? t(title.id, {
+    defaultValue: title.defaultValue
+  }) : void 0;
+  const labelText = label ? t(label.id, {
+    defaultValue: label.defaultValue
   }) : null;
-  return /* @__PURE__ */ m(
+  return /* @__PURE__ */ jsxs(
     "label",
     {
-      title: d,
-      className: be(n, r),
-      "data-testid": u["wrapper-data-testid"],
+      title: tooltip,
+      className: getWrapperClassName(type, toggleSmall),
+      "data-testid": other["wrapper-data-testid"],
       children: [
-        /* @__PURE__ */ a(
+        /* @__PURE__ */ jsx(
           "input",
           {
             type: "checkbox",
-            checked: e,
-            disabled: o,
-            onChange: () => t(!e),
-            "data-testid": u["data-testid"]
+            checked: value,
+            disabled,
+            onChange: () => onChange(!value),
+            "data-testid": other["data-testid"]
           }
         ),
-        /* @__PURE__ */ a(
+        /* @__PURE__ */ jsx(
           "div",
           {
-            className: Ce(n, r),
-            style: h,
-            "data-testid": u["innerdiv-data-testid"]
+            className: getCheckboxClassName(type, toggleSmall),
+            style,
+            "data-testid": other["innerdiv-data-testid"]
           }
         ),
-        s && /* @__PURE__ */ a("span", { className: "textlabel", children: p })
+        label && /* @__PURE__ */ jsx("span", { className: "textlabel", children: labelText })
       ]
     }
   );
-}, et = E()(ke);
-function V(n) {
-  const e = typeof n == "object" && typeof n.id == "string" && typeof n.defaultValue == "string";
-  return e && console.warn(
-    "Please use strings instead of TranslationDescriptors to initialize the Confirm modal, because TranslationDescriptors are deprecated"
-  ), e;
+};
+const Checkbox_default = withTranslation()(Checkbox);
+function isTranslationDescriptor(arg) {
+  const result = typeof arg === "object" && typeof arg.id === "string" && typeof arg.defaultValue === "string";
+  if (result) {
+    console.warn(
+      "Please use strings instead of TranslationDescriptors to initialize the Confirm modal, because TranslationDescriptors are deprecated"
+    );
+  }
+  return result;
 }
-function k(n) {
-  return V(n) ? /* @__PURE__ */ a(A, { i18nKey: n.id, children: n.defaultValue }) : n;
+function transformTextToElement(message) {
+  if (isTranslationDescriptor(message)) {
+    return /* @__PURE__ */ jsx(Trans, { i18nKey: message.id, children: message.defaultValue });
+  }
+  return message;
 }
-function Ne({
-  title: n,
-  message: e,
-  onAccept: t,
-  onDecline: i,
-  acceptButtonLabel: s,
-  declineButtonLabel: o,
-  acceptButtonStyle: r = "primary"
+function Confirm({
+  title,
+  message,
+  onAccept,
+  onDecline,
+  acceptButtonLabel,
+  declineButtonLabel,
+  acceptButtonStyle = "primary"
 }) {
-  return /* @__PURE__ */ a(
-    ye,
+  return /* @__PURE__ */ jsx(
+    Modal,
     {
-      header: k(n),
-      content: k(e),
-      footer: /* @__PURE__ */ m("div", { children: [
-        /* @__PURE__ */ a(
-          b,
+      header: transformTextToElement(title),
+      content: transformTextToElement(message),
+      footer: /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(
+          Button$1,
           {
-            primary: r === "primary",
-            danger: r === "danger",
-            onClick: t,
-            children: s ? k(s) : /* @__PURE__ */ a(A, { i18nKey: "form.accept", children: "Accept" })
+            primary: acceptButtonStyle === "primary",
+            danger: acceptButtonStyle === "danger",
+            onClick: onAccept,
+            children: acceptButtonLabel ? transformTextToElement(acceptButtonLabel) : /* @__PURE__ */ jsx(Trans, { i18nKey: "form.accept", children: "Accept" })
           }
         ),
-        /* @__PURE__ */ a(b, { onClick: i, children: o ? k(o) : /* @__PURE__ */ a(A, { i18nKey: "form.decline", children: "Decline" }) })
+        /* @__PURE__ */ jsx(Button$1, { onClick: onDecline, children: declineButtonLabel ? transformTextToElement(declineButtonLabel) : /* @__PURE__ */ jsx(Trans, { i18nKey: "form.decline", children: "Decline" }) })
       ] }),
       width: 500
     }
   );
 }
-const I = X({
+const ConfirmContext = createContext({
   confirm: () => Promise.reject(new Error("ConfirmProvider is missing!"))
 });
-function Ae({ children: n }) {
-  const [e, t] = x(!1), [i, s] = x({
+function ConfirmProvider({ children }) {
+  const [visible, setVisible] = useState(false);
+  const [confirmProps, setConfirmProps] = useState({
     title: "",
     message: "",
     onAccept: () => {
@@ -341,370 +420,442 @@ function Ae({ children: n }) {
     onDecline: () => {
     }
   });
-  async function o(r) {
-    return new Promise((c) => {
-      t(!0), s({
-        ...r,
+  async function confirm(options) {
+    return new Promise((resolve) => {
+      setVisible(true);
+      setConfirmProps({
+        ...options,
         onAccept: () => {
-          t(!1), c(!0);
+          setVisible(false);
+          resolve(true);
         },
         onDecline: () => {
-          t(!1), c(!1);
+          setVisible(false);
+          resolve(false);
         }
       });
     });
   }
-  return /* @__PURE__ */ m(I.Provider, { value: { confirm: o }, children: [
-    n,
-    e && /* @__PURE__ */ a(Ne, { ...i })
+  return /* @__PURE__ */ jsxs(ConfirmContext.Provider, { value: { confirm }, children: [
+    children,
+    visible && /* @__PURE__ */ jsx(Confirm, { ...confirmProps })
   ] });
 }
-function Te() {
-  const n = Y(I);
-  if (!n)
+function useConfirm() {
+  const context = useContext(ConfirmContext);
+  if (!context) {
     throw new Error("ConfirmProvider is missing");
-  const { confirm: e } = n;
-  return e;
+  }
+  const { confirm } = context;
+  return confirm;
 }
-function tt(n) {
-  function e(t) {
-    const i = Te(), { t: s } = G();
-    function o(c) {
-      return V(c) ? s(c.id, { defaultValue: c.defaultValue }) : c;
+function withConfirm(WrappedComponent) {
+  function WithConfirm(props) {
+    const confirm = useConfirm();
+    const { t } = useTranslation();
+    function trans(arg) {
+      if (isTranslationDescriptor(arg)) {
+        return t(arg.id, { defaultValue: arg.defaultValue });
+      }
+      return arg;
     }
-    async function r(c, l, u, h, d, p) {
-      const f = await i({
-        title: o(c),
-        message: V(l) ? o(l) : l,
-        acceptButtonLabel: u ? o(u) : void 0,
-        declineButtonLabel: h ? o(h) : void 0,
-        acceptButtonStyle: p
+    async function deprecatedConfirm(title, message, acceptButtonLabel, declineButtonLabel, resolveWithConfirmation, acceptButtonStyle) {
+      const accepted = await confirm({
+        title: trans(title),
+        message: isTranslationDescriptor(message) ? trans(message) : message,
+        acceptButtonLabel: acceptButtonLabel ? trans(acceptButtonLabel) : void 0,
+        declineButtonLabel: declineButtonLabel ? trans(declineButtonLabel) : void 0,
+        acceptButtonStyle
       });
-      if (d)
-        return f;
-      if (!f)
+      if (resolveWithConfirmation) {
+        return accepted;
+      } else if (!accepted) {
         return new Promise(() => {
         });
+      }
     }
-    return /* @__PURE__ */ a(n, { ...t, confirm: r });
+    return /* @__PURE__ */ jsx(WrappedComponent, { ...props, confirm: deprecatedConfirm });
   }
-  return function(i) {
-    return /* @__PURE__ */ a(Ae, { children: /* @__PURE__ */ a(e, { ...i }) });
+  return function WithConfirmWrapper(props) {
+    return /* @__PURE__ */ jsx(ConfirmProvider, { children: /* @__PURE__ */ jsx(WithConfirm, { ...props }) });
   };
 }
-const Pe = "data:image/svg+xml,%3csvg%20id='icon-add_24_sga'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3e%3cpolygon%20id='plus'%20points='20%2010%2014%2010%2014%204%2010%204%2010%2010%204%2010%204%2014%2010%2014%2010%2020%2014%2020%2014%2014%2020%2014%2020%2010'/%3e%3c/svg%3e", Ve = "data:image/svg+xml,%3csvg%20id='icon-cross_24_sga'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3e%3cpolygon%20id='icon-cross_24'%20points='20%206.28%2017.87%204%2012%209.78%206.13%204%204%206.28%209.78%2011.97%204%2017.66%206.13%2019.93%2012%2014.15%2017.87%2019.93%2020%2017.66%2014.22%2011.97%2020%206.28'/%3e%3c/svg%3e", Me = "data:image/svg+xml,%3csvg%20id='icon-edit-24_sga'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3e%3cg%20id='stift'%3e%3cpath%20d='M7.35,12.65a.5.5,0,0,0,0,.7l3.3,3.3a.5.5,0,0,0,.7,0l8.3-8.3A1.4,1.4,0,0,0,20,7.5v-1a1.4,1.4,0,0,0-.35-.85l-1.3-1.3A1.4,1.4,0,0,0,17.5,4h-1a1.4,1.4,0,0,0-.85.35Z'/%3e%3c/g%3e%3cpath%20d='M5.9,14.49c.06-.27.26-.33.45-.14l3.3,3.3c.19.19.13.39-.14.45l-4,.8a.3.3,0,0,1-.39-.39Z'/%3e%3c/svg%3e", Ee = "data:image/svg+xml,%3csvg%20id='icon-gear-24_sga'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3e%3cg%20id='icon-gear-24_sga-2'%20data-name='icon-gear-24_sga'%3e%3cpath%20d='M22.82,14.06A1.25,1.25,0,0,0,24,13,7.66,7.66,0,0,0,24,12,7.66,7.66,0,0,0,24,11a1.25,1.25,0,0,0-1.13-1l-1.09,0A1.49,1.49,0,0,1,20.44,9c-.15-.47-.44-2-.07-2.37l.74-.81a1.16,1.16,0,0,0,0-1.5L19.7,2.87a1.16,1.16,0,0,0-1.5,0l-.81.74a1.5,1.5,0,0,1-1.54.27c-.44-.23-1.72-1.08-1.74-1.63l0-1.09A1.25,1.25,0,0,0,13,.05a7.66,7.66,0,0,0-1,0,7.66,7.66,0,0,0-1,.05,1.25,1.25,0,0,0-1,1.13l0,1.09A1.52,1.52,0,0,1,9,3.56c-.47.15-2,.44-2.37.07L5.8,2.89a1.16,1.16,0,0,0-1.5,0L2.86,4.3a1.18,1.18,0,0,0,0,1.5l.74.81A1.5,1.5,0,0,1,3.9,8.15c-.23.44-1.08,1.72-1.63,1.74l-1.09,0A1.25,1.25,0,0,0,.05,11a7.66,7.66,0,0,0,0,1,7.66,7.66,0,0,0,.05,1,1.25,1.25,0,0,0,1.13,1l1.09,0A1.47,1.47,0,0,1,3.55,15c.16.48.45,2,.08,2.37l-.74.81a1.16,1.16,0,0,0,0,1.5L4.3,21.13a1.16,1.16,0,0,0,1.5,0l.81-.74a1.5,1.5,0,0,1,1.54-.27c.44.23,1.72,1.08,1.75,1.63l0,1.09A1.25,1.25,0,0,0,11,24,7.66,7.66,0,0,0,12,24,7.66,7.66,0,0,0,13,24a1.25,1.25,0,0,0,1-1.13l0-1.09A1.49,1.49,0,0,1,15,20.44c.47-.15,2-.44,2.37-.07l.81.74a1.16,1.16,0,0,0,1.5,0l1.43-1.43a1.16,1.16,0,0,0,0-1.5l-.74-.81a1.5,1.5,0,0,1-.27-1.54c.23-.44,1.08-1.72,1.63-1.74ZM12,15.5A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z'/%3e%3c/g%3e%3c/svg%3e", Be = "data:image/svg+xml,%3csvg%20id='Layer_1'%20data-name='Layer%201'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3e%3cg%3e%3cpath%20d='M22.1,4.91a3,3,0,0,0-3-3H6.44a2.4,2.4,0,0,1,1.34-.4h12.6A2.12,2.12,0,0,1,22.5,3.62V17.26a1.42,1.42,0,0,1-.4,1Z'/%3e%3cpath%20d='M20.38,1H7.78A3,3,0,0,0,5.26,2.4H19.09A2.51,2.51,0,0,1,21.6,4.91V19.12A1.94,1.94,0,0,0,23,17.26V3.62A2.62,2.62,0,0,0,20.38,1Z'/%3e%3c/g%3e%3cg%3e%3cpath%20d='M4,21.5A1.5,1.5,0,0,1,2.5,20V5.8A1.5,1.5,0,0,1,4,4.3H18.2a1.5,1.5,0,0,1,1.5,1.5V20a1.5,1.5,0,0,1-1.5,1.5ZM9.5,18a.5.5,0,0,0,.5.5h2a.5.5,0,0,0,.5-.5V14.5H16a.5.5,0,0,0,.5-.5V12a.5.5,0,0,0-.5-.5H12.5V8a.5.5,0,0,0-.5-.5H10a.5.5,0,0,0-.5.5v3.5H6a.5.5,0,0,0-.5.5v2a.5.5,0,0,0,.5.5H9.5Z'/%3e%3cpath%20d='M18.2,4.8a1,1,0,0,1,1,1V20a1,1,0,0,1-1,1H4a1,1,0,0,1-1-1V5.8a1,1,0,0,1,1-1H18.2M9,11H6a1,1,0,0,0-1,1v2a1,1,0,0,0,1,1H9v3a1,1,0,0,0,1,1h2a1,1,0,0,0,1-1V15h3a1,1,0,0,0,1-1V12a1,1,0,0,0-1-1H13V8a1,1,0,0,0-1-1H10A1,1,0,0,0,9,8v3m9.2-7.2H4a2,2,0,0,0-2,2V20a2,2,0,0,0,2,2H18.2a2,2,0,0,0,2-2V5.8a2,2,0,0,0-2-2ZM6,14V12h4V8h2v4h4v2H12v4H10V14Z'/%3e%3c/g%3e%3c/svg%3e", He = "data:image/svg+xml,%3csvg%20id='Layer_1'%20data-name='Layer%201'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3e%3cpolygon%20points='7.92%2012%202.84%207%2013%207%207.92%2012'/%3e%3crect%20x='5'%20y='2'%20width='6'%20height='5'/%3e%3crect%20x='2'%20y='14'%20width='12'%20height='1'/%3e%3c/svg%3e", Le = "data:image/svg+xml,%3csvg%20id='Layer_1'%20data-name='Layer%201'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3e%3cdefs%3e%3cstyle%3e%20.cls-1%20{%20fill:%20%23fff;%20}%20%3c/style%3e%3c/defs%3e%3cg%3e%3ccircle%20class='cls-1'%20cx='5.5'%20cy='5.5'%20r='4.5'/%3e%3cpath%20d='M5.5,2A3.5,3.5,0,1,1,2,5.5,3.5,3.5,0,0,1,5.5,2m0-1A4.5,4.5,0,1,0,10,5.5,4.49,4.49,0,0,0,5.5,1Z'/%3e%3c/g%3e%3crect%20x='6.79'%20y='10.04'%20width='7.74'%20height='2.16'%20transform='translate(10.98%20-4.28)%20rotate(45)'/%3e%3c/svg%3e", _e = "data:image/svg+xml,%3csvg%20data-name='icon_key'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2027.02%2027'%3e%3cpath%20d='M35.07,16.5a8.52,8.52,0,0,0-7.69,12L17.2,38.8a2.46,2.46,0,0,0,0,3.46,2.41,2.41,0,0,0,3.42,0l1.69-1.7,2.91,2.94L31,37.63l-2.92-3,2.44-2.46a8.31,8.31,0,0,0,4.51,1.33,8.53,8.53,0,0,0,0-17Zm0,3.91A4.62,4.62,0,1,1,30.5,25,4.6,4.6,0,0,1,35.07,20.41Z'%20transform='translate(-16.49%20-16.5)'/%3e%3c/svg%3e", $e = "data:image/svg+xml,%3csvg%20id='Layer_1'%20data-name='Layer%201'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3e%3cg%20id='Pfeilende'%3e%3cpath%20d='M24,10H15l9-8.93Z'/%3e%3c/g%3e%3cpath%20d='M18.45,18.78A9.33,9.33,0,0,1,2.62,14.86,9.8,9.8,0,0,1,8.89,2.69,9.42,9.42,0,0,1,20.72,9.14H23A11.72,11.72,0,0,0,11.68,0,11.74,11.74,0,0,0,.34,9.14,12,12,0,0,0,8.89,23.65a11.43,11.43,0,0,0,11.16-3.31Z'/%3e%3c/svg%3e", Re = "data:image/svg+xml,%3csvg%20data-name='icon_fullscreen_sga'%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%3e%3cpolygon%20id='ecke'%20points='2%2014%202%2010%200%2010%200%2016%206%2016%206%2014%202%2014'/%3e%3cpolygon%20id='ecke-2'%20data-name='ecke'%20points='2%202%206%202%206%200%200%200%200%206%202%206%202%202'/%3e%3cpolygon%20id='ecke-3'%20data-name='ecke'%20points='14%2014%2010%2014%2010%2016%2016%2016%2016%2010%2014%2010%2014%2014'/%3e%3cpolygon%20id='ecke-4'%20data-name='ecke'%20points='10%200%2010%202%2014%202%2014%206%2016%206%2016%200%2010%200'/%3e%3c/svg%3e", Ze = "data:image/svg+xml,%3csvg%20id='Icon_help'%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3e%3cpath%20id='icon_help-2'%20data-name='icon_help'%20d='M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm1,16H11V15h2Zm1.7-6.26a4.85,4.85,0,0,1-.49.81l-1,1.37a1.36,1.36,0,0,0-.18.34,1,1,0,0,0-.07.38L13,14H11l.1-.49a2,2,0,0,1,.13-.77,3.18,3.18,0,0,1,.4-.69l1-1.33a3.21,3.21,0,0,0,.29-.46,1.19,1.19,0,0,0,.11-.47,1.17,1.17,0,0,0-.3-.82,1.07,1.07,0,0,0-.83-.33A1,1,0,0,0,11.1,9a1.25,1.25,0,0,0-.28.83H9a2.94,2.94,0,0,1,.23-1.17,2.45,2.45,0,0,1,.63-.88,2.9,2.9,0,0,1,.93-.55A3.13,3.13,0,0,1,11.94,7a3.31,3.31,0,0,1,1.13.19,2.82,2.82,0,0,1,.94.54,2.62,2.62,0,0,1,.65.88A3,3,0,0,1,14.9,9.8,2.16,2.16,0,0,1,14.7,10.74Z'%20style='opacity:%200.2'/%3e%3c/svg%3e", Ie = "data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20id='icon_star_16'%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%3e%3cpath%20id='star'%20d='M8,0l2.45,4.97,5.55,.76-4.04,3.83,.99,5.44-4.94-2.61-4.94,2.61,.99-5.44L0,5.73l5.55-.76L8,0Z'/%3e%3c/svg%3e";
-function Se(n) {
-  const { add: e, del: t, edit: i, config: s, duplicate: o, search: r, download: c, sync: l, fullscreen: u, iconKey: h, documentation: d, star: p } = n;
-  if (e)
-    return Pe;
-  if (t)
-    return Ve;
-  if (i)
-    return Me;
-  if (s)
-    return Ee;
-  if (o)
-    return Be;
-  if (r)
-    return Le;
-  if (c)
-    return He;
-  if (l)
-    return $e;
-  if (u)
-    return Re;
-  if (h)
-    return _e;
-  if (d)
-    return Ze;
-  if (p)
-    return Ie;
-  throw Error("getSrc: no icon type specified");
+const iconAdd = "data:image/svg+xml,%3csvg%20id='icon-add_24_sga'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3e%3cpolygon%20id='plus'%20points='20%2010%2014%2010%2014%204%2010%204%2010%2010%204%2010%204%2014%2010%2014%2010%2020%2014%2020%2014%2014%2020%2014%2020%2010'/%3e%3c/svg%3e";
+const iconDel = "data:image/svg+xml,%3csvg%20id='icon-cross_24_sga'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3e%3cpolygon%20id='icon-cross_24'%20points='20%206.28%2017.87%204%2012%209.78%206.13%204%204%206.28%209.78%2011.97%204%2017.66%206.13%2019.93%2012%2014.15%2017.87%2019.93%2020%2017.66%2014.22%2011.97%2020%206.28'/%3e%3c/svg%3e";
+const iconEdit = "data:image/svg+xml,%3csvg%20id='icon-edit-24_sga'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3e%3cg%20id='stift'%3e%3cpath%20d='M7.35,12.65a.5.5,0,0,0,0,.7l3.3,3.3a.5.5,0,0,0,.7,0l8.3-8.3A1.4,1.4,0,0,0,20,7.5v-1a1.4,1.4,0,0,0-.35-.85l-1.3-1.3A1.4,1.4,0,0,0,17.5,4h-1a1.4,1.4,0,0,0-.85.35Z'/%3e%3c/g%3e%3cpath%20d='M5.9,14.49c.06-.27.26-.33.45-.14l3.3,3.3c.19.19.13.39-.14.45l-4,.8a.3.3,0,0,1-.39-.39Z'/%3e%3c/svg%3e";
+const iconConfig = "data:image/svg+xml,%3csvg%20id='icon-gear-24_sga'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3e%3cg%20id='icon-gear-24_sga-2'%20data-name='icon-gear-24_sga'%3e%3cpath%20d='M22.82,14.06A1.25,1.25,0,0,0,24,13,7.66,7.66,0,0,0,24,12,7.66,7.66,0,0,0,24,11a1.25,1.25,0,0,0-1.13-1l-1.09,0A1.49,1.49,0,0,1,20.44,9c-.15-.47-.44-2-.07-2.37l.74-.81a1.16,1.16,0,0,0,0-1.5L19.7,2.87a1.16,1.16,0,0,0-1.5,0l-.81.74a1.5,1.5,0,0,1-1.54.27c-.44-.23-1.72-1.08-1.74-1.63l0-1.09A1.25,1.25,0,0,0,13,.05a7.66,7.66,0,0,0-1,0,7.66,7.66,0,0,0-1,.05,1.25,1.25,0,0,0-1,1.13l0,1.09A1.52,1.52,0,0,1,9,3.56c-.47.15-2,.44-2.37.07L5.8,2.89a1.16,1.16,0,0,0-1.5,0L2.86,4.3a1.18,1.18,0,0,0,0,1.5l.74.81A1.5,1.5,0,0,1,3.9,8.15c-.23.44-1.08,1.72-1.63,1.74l-1.09,0A1.25,1.25,0,0,0,.05,11a7.66,7.66,0,0,0,0,1,7.66,7.66,0,0,0,.05,1,1.25,1.25,0,0,0,1.13,1l1.09,0A1.47,1.47,0,0,1,3.55,15c.16.48.45,2,.08,2.37l-.74.81a1.16,1.16,0,0,0,0,1.5L4.3,21.13a1.16,1.16,0,0,0,1.5,0l.81-.74a1.5,1.5,0,0,1,1.54-.27c.44.23,1.72,1.08,1.75,1.63l0,1.09A1.25,1.25,0,0,0,11,24,7.66,7.66,0,0,0,12,24,7.66,7.66,0,0,0,13,24a1.25,1.25,0,0,0,1-1.13l0-1.09A1.49,1.49,0,0,1,15,20.44c.47-.15,2-.44,2.37-.07l.81.74a1.16,1.16,0,0,0,1.5,0l1.43-1.43a1.16,1.16,0,0,0,0-1.5l-.74-.81a1.5,1.5,0,0,1-.27-1.54c.23-.44,1.08-1.72,1.63-1.74ZM12,15.5A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z'/%3e%3c/g%3e%3c/svg%3e";
+const iconDuplicate = "data:image/svg+xml,%3csvg%20id='Layer_1'%20data-name='Layer%201'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3e%3cg%3e%3cpath%20d='M22.1,4.91a3,3,0,0,0-3-3H6.44a2.4,2.4,0,0,1,1.34-.4h12.6A2.12,2.12,0,0,1,22.5,3.62V17.26a1.42,1.42,0,0,1-.4,1Z'/%3e%3cpath%20d='M20.38,1H7.78A3,3,0,0,0,5.26,2.4H19.09A2.51,2.51,0,0,1,21.6,4.91V19.12A1.94,1.94,0,0,0,23,17.26V3.62A2.62,2.62,0,0,0,20.38,1Z'/%3e%3c/g%3e%3cg%3e%3cpath%20d='M4,21.5A1.5,1.5,0,0,1,2.5,20V5.8A1.5,1.5,0,0,1,4,4.3H18.2a1.5,1.5,0,0,1,1.5,1.5V20a1.5,1.5,0,0,1-1.5,1.5ZM9.5,18a.5.5,0,0,0,.5.5h2a.5.5,0,0,0,.5-.5V14.5H16a.5.5,0,0,0,.5-.5V12a.5.5,0,0,0-.5-.5H12.5V8a.5.5,0,0,0-.5-.5H10a.5.5,0,0,0-.5.5v3.5H6a.5.5,0,0,0-.5.5v2a.5.5,0,0,0,.5.5H9.5Z'/%3e%3cpath%20d='M18.2,4.8a1,1,0,0,1,1,1V20a1,1,0,0,1-1,1H4a1,1,0,0,1-1-1V5.8a1,1,0,0,1,1-1H18.2M9,11H6a1,1,0,0,0-1,1v2a1,1,0,0,0,1,1H9v3a1,1,0,0,0,1,1h2a1,1,0,0,0,1-1V15h3a1,1,0,0,0,1-1V12a1,1,0,0,0-1-1H13V8a1,1,0,0,0-1-1H10A1,1,0,0,0,9,8v3m9.2-7.2H4a2,2,0,0,0-2,2V20a2,2,0,0,0,2,2H18.2a2,2,0,0,0,2-2V5.8a2,2,0,0,0-2-2ZM6,14V12h4V8h2v4h4v2H12v4H10V14Z'/%3e%3c/g%3e%3c/svg%3e";
+const iconDownload = "data:image/svg+xml,%3csvg%20id='Layer_1'%20data-name='Layer%201'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3e%3cpolygon%20points='7.92%2012%202.84%207%2013%207%207.92%2012'/%3e%3crect%20x='5'%20y='2'%20width='6'%20height='5'/%3e%3crect%20x='2'%20y='14'%20width='12'%20height='1'/%3e%3c/svg%3e";
+const iconSearch = "data:image/svg+xml,%3csvg%20id='Layer_1'%20data-name='Layer%201'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3e%3cdefs%3e%3cstyle%3e%20.cls-1%20{%20fill:%20%23fff;%20}%20%3c/style%3e%3c/defs%3e%3cg%3e%3ccircle%20class='cls-1'%20cx='5.5'%20cy='5.5'%20r='4.5'/%3e%3cpath%20d='M5.5,2A3.5,3.5,0,1,1,2,5.5,3.5,3.5,0,0,1,5.5,2m0-1A4.5,4.5,0,1,0,10,5.5,4.49,4.49,0,0,0,5.5,1Z'/%3e%3c/g%3e%3crect%20x='6.79'%20y='10.04'%20width='7.74'%20height='2.16'%20transform='translate(10.98%20-4.28)%20rotate(45)'/%3e%3c/svg%3e";
+const iconIconKey = "data:image/svg+xml,%3csvg%20data-name='icon_key'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2027.02%2027'%3e%3cpath%20d='M35.07,16.5a8.52,8.52,0,0,0-7.69,12L17.2,38.8a2.46,2.46,0,0,0,0,3.46,2.41,2.41,0,0,0,3.42,0l1.69-1.7,2.91,2.94L31,37.63l-2.92-3,2.44-2.46a8.31,8.31,0,0,0,4.51,1.33,8.53,8.53,0,0,0,0-17Zm0,3.91A4.62,4.62,0,1,1,30.5,25,4.6,4.6,0,0,1,35.07,20.41Z'%20transform='translate(-16.49%20-16.5)'/%3e%3c/svg%3e";
+const iconSync = "data:image/svg+xml,%3csvg%20id='Layer_1'%20data-name='Layer%201'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3e%3cg%20id='Pfeilende'%3e%3cpath%20d='M24,10H15l9-8.93Z'/%3e%3c/g%3e%3cpath%20d='M18.45,18.78A9.33,9.33,0,0,1,2.62,14.86,9.8,9.8,0,0,1,8.89,2.69,9.42,9.42,0,0,1,20.72,9.14H23A11.72,11.72,0,0,0,11.68,0,11.74,11.74,0,0,0,.34,9.14,12,12,0,0,0,8.89,23.65a11.43,11.43,0,0,0,11.16-3.31Z'/%3e%3c/svg%3e";
+const iconFullscreen = "data:image/svg+xml,%3csvg%20data-name='icon_fullscreen_sga'%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%3e%3cpolygon%20id='ecke'%20points='2%2014%202%2010%200%2010%200%2016%206%2016%206%2014%202%2014'/%3e%3cpolygon%20id='ecke-2'%20data-name='ecke'%20points='2%202%206%202%206%200%200%200%200%206%202%206%202%202'/%3e%3cpolygon%20id='ecke-3'%20data-name='ecke'%20points='14%2014%2010%2014%2010%2016%2016%2016%2016%2010%2014%2010%2014%2014'/%3e%3cpolygon%20id='ecke-4'%20data-name='ecke'%20points='10%200%2010%202%2014%202%2014%206%2016%206%2016%200%2010%200'/%3e%3c/svg%3e";
+const iconDocumentation = "data:image/svg+xml,%3csvg%20id='Icon_help'%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3e%3cpath%20id='icon_help-2'%20data-name='icon_help'%20d='M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm1,16H11V15h2Zm1.7-6.26a4.85,4.85,0,0,1-.49.81l-1,1.37a1.36,1.36,0,0,0-.18.34,1,1,0,0,0-.07.38L13,14H11l.1-.49a2,2,0,0,1,.13-.77,3.18,3.18,0,0,1,.4-.69l1-1.33a3.21,3.21,0,0,0,.29-.46,1.19,1.19,0,0,0,.11-.47,1.17,1.17,0,0,0-.3-.82,1.07,1.07,0,0,0-.83-.33A1,1,0,0,0,11.1,9a1.25,1.25,0,0,0-.28.83H9a2.94,2.94,0,0,1,.23-1.17,2.45,2.45,0,0,1,.63-.88,2.9,2.9,0,0,1,.93-.55A3.13,3.13,0,0,1,11.94,7a3.31,3.31,0,0,1,1.13.19,2.82,2.82,0,0,1,.94.54,2.62,2.62,0,0,1,.65.88A3,3,0,0,1,14.9,9.8,2.16,2.16,0,0,1,14.7,10.74Z'%20style='opacity:%200.2'/%3e%3c/svg%3e";
+const iconStar = "data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20id='icon_star_16'%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%3e%3cpath%20id='star'%20d='M8,0l2.45,4.97,5.55,.76-4.04,3.83,.99,5.44-4.94-2.61-4.94,2.61,.99-5.44L0,5.73l5.55-.76L8,0Z'/%3e%3c/svg%3e";
+function getSrc(props) {
+  const { add, del, edit, config, duplicate, search, download, sync, fullscreen, iconKey, documentation, star } = props;
+  if (add) {
+    return iconAdd;
+  } else if (del) {
+    return iconDel;
+  } else if (edit) {
+    return iconEdit;
+  } else if (config) {
+    return iconConfig;
+  } else if (duplicate) {
+    return iconDuplicate;
+  } else if (search) {
+    return iconSearch;
+  } else if (download) {
+    return iconDownload;
+  } else if (sync) {
+    return iconSync;
+  } else if (fullscreen) {
+    return iconFullscreen;
+  } else if (iconKey) {
+    return iconIconKey;
+  } else if (documentation) {
+    return iconDocumentation;
+  } else if (star) {
+    return iconStar;
+  } else {
+    throw Error("getSrc: no icon type specified");
+  }
 }
-function De(n) {
-  const { add: e, del: t, edit: i, config: s, duplicate: o, search: r, download: c, sync: l, fullscreen: u, iconKey: h, documentation: d, star: p } = n;
-  if (e)
+function getAlt(props) {
+  const { add, del, edit, config, duplicate, search, download, sync, fullscreen, iconKey, documentation, star } = props;
+  if (add) {
     return "icon add";
-  if (t)
+  } else if (del) {
     return "icon delete";
-  if (i)
+  } else if (edit) {
     return "icon edit";
-  if (s)
+  } else if (config) {
     return "icon config";
-  if (o)
+  } else if (duplicate) {
     return "icon duplicate";
-  if (r)
+  } else if (search) {
     return "icon search";
-  if (c)
+  } else if (download) {
     return "icon download";
-  if (l)
+  } else if (sync) {
     return "icon sync";
-  if (u)
+  } else if (fullscreen) {
     return "icon fullscreen";
-  if (h)
+  } else if (iconKey) {
     return "icon iconKey";
-  if (d)
+  } else if (documentation) {
     return "icon documentation";
-  if (p)
+  } else if (star) {
     return "icon star";
-  throw Error("getAlt: no icon type specified");
+  } else {
+    throw Error("getAlt: no icon type specified");
+  }
 }
-function T(n) {
-  let e;
-  return n.large ? e = { width: 24, height: 24 } : e = { width: 16, height: 16 }, n.inverted && (e = { ...e, filter: "invert(1)" }), /* @__PURE__ */ a("img", { src: Se(n), className: `di icon ${n.className || ""}`, alt: De(n), style: e });
+function Icon(props) {
+  let style;
+  if (props.large) {
+    style = { width: 24, height: 24 };
+  } else {
+    style = { width: 16, height: 16 };
+  }
+  if (props.inverted) {
+    style = { ...style, filter: "invert(1)" };
+  }
+  return /* @__PURE__ */ jsx("img", { src: getSrc(props), className: `di icon ${props.className || ""}`, alt: getAlt(props), style });
 }
-function nt({
-  text: n,
-  small: e = !1,
-  large: t = !1,
-  onDelete: i,
-  className: s,
-  onClick: o,
-  children: r,
-  ...c
+function Label({
+  text,
+  small = false,
+  large = false,
+  onDelete,
+  className,
+  onClick,
+  children,
+  ...dataTestIds
 }) {
-  function l(u) {
-    u.stopPropagation(), i && i();
+  function handleDelete(event) {
+    event.stopPropagation();
+    if (onDelete) {
+      onDelete();
+    }
   }
-  return /* @__PURE__ */ m(
+  return /* @__PURE__ */ jsxs(
     "span",
     {
-      onClick: o,
-      className: g("di label", s, { large: t, small: e, removable: i, clickable: !!o }),
-      "data-testid": c["data-testid"],
+      onClick,
+      className: cx("di label", className, { large, small, removable: onDelete, clickable: !!onClick }),
+      "data-testid": dataTestIds["data-testid"],
       children: [
-        typeof n == "string" ? n : n && /* @__PURE__ */ a(A, { i18nKey: n.id, children: n.defaultValue }),
-        /* @__PURE__ */ a(Z, { children: r }),
-        i && /* @__PURE__ */ a("span", { "data-testid": c["delete-button-data-testid"], className: "remove", onClick: l, children: /* @__PURE__ */ a(T, { del: !0, inverted: !0 }) })
+        typeof text === "string" ? text : text && /* @__PURE__ */ jsx(Trans, { i18nKey: text.id, children: text.defaultValue }),
+        /* @__PURE__ */ jsx(Fragment, { children }),
+        onDelete && /* @__PURE__ */ jsx("span", { "data-testid": dataTestIds["delete-button-data-testid"], className: "remove", onClick: handleDelete, children: /* @__PURE__ */ jsx(Icon, { del: true, inverted: true }) })
       ]
     }
   );
 }
-const w = 16;
-function S({
-  placement: n = "bottom",
-  mode: e = ["click"],
-  disabled: t,
-  handler: i,
-  handlerWrapperClassName: s,
-  preventDestroyContentOnHide: o,
-  open: r,
-  onOpenChange: c,
-  className: l,
-  children: u
+const MARGIN = 16;
+function Popup({
+  placement = "bottom",
+  mode = ["click"],
+  disabled,
+  handler,
+  handlerWrapperClassName,
+  preventDestroyContentOnHide,
+  open,
+  onOpenChange,
+  className,
+  children
 }) {
-  const h = M(null), {
-    elements: d,
-    update: p,
-    refs: f,
-    floatingStyles: v,
-    context: C,
-    middlewareData: B,
-    placement: H
-  } = ee({
-    placement: n,
-    open: r,
-    onOpenChange: c,
-    whileElementsMounted: o ? void 0 : $,
+  const arrowRef = useRef(null);
+  const {
+    elements,
+    update,
+    refs,
+    floatingStyles,
+    context,
+    middlewareData,
+    placement: computedPlacement
+  } = useFloating({
+    placement,
+    open,
+    onOpenChange,
+    whileElementsMounted: !preventDestroyContentOnHide ? autoUpdate : void 0,
     middleware: [
-      te({
+      offset({
         mainAxis: 12
       }),
-      ne({
-        padding: w
+      flip({
+        padding: MARGIN,
+        boundary: "clippingAncestors",
+        altBoundary: true
       }),
-      ie({
-        padding: w
+      shift({
+        padding: MARGIN,
+        boundary: "clippingAncestors",
+        altBoundary: true
       }),
-      se({
-        padding: w,
-        apply({ availableHeight: L, availableWidth: z, elements: _ }) {
-          const U = `${Math.max(0, z - w)}px`, q = `${Math.max(0, L - w)}px`;
-          _.floating.style.maxWidth = U, _.floating.style.maxHeight = q;
+      size({
+        padding: MARGIN,
+        boundary: "clippingAncestors",
+        altBoundary: true,
+        apply({ availableHeight, availableWidth, elements: elements2 }) {
+          const width = `${Math.max(0, availableWidth - MARGIN)}px`;
+          const height = `${Math.max(0, availableHeight - MARGIN)}px`;
+          elements2.floating.style.maxWidth = width;
+          elements2.floating.style.maxHeight = height;
         }
       }),
-      ae({
-        element: h
+      arrow({
+        element: arrowRef
       })
     ]
   });
-  N(() => {
-    if (o && r && d.reference && d.floating)
-      return $(d.reference, d.floating, p);
-  }, [d.floating, d.reference, r, p, o]);
-  const D = oe(C, {
-    enabled: !t && e.includes("click"),
-    keyboardHandlers: !1
+  useEffect(() => {
+    if (preventDestroyContentOnHide && open && elements.reference && elements.floating) {
+      const cleanup = autoUpdate(elements.reference, elements.floating, update);
+      return cleanup;
+    }
+  }, [elements.floating, elements.reference, open, update, preventDestroyContentOnHide]);
+  const click = useClick(context, {
+    enabled: !disabled && mode.includes("click"),
+    keyboardHandlers: false
     // Prevent space key from being blocked in input fields (floating-ui issue #1812)
-  }), K = re(C, {
-    enabled: !t && e.includes("hover"),
-    handleClose: ce()
-  }), F = le(C, { enabled: !t && e.includes("focus") }), O = de(C), { getReferenceProps: W, getFloatingProps: j } = ue([D, K, F, O]);
-  return /* @__PURE__ */ m(Z, { children: [
-    /* @__PURE__ */ a(
+  });
+  const hover = useHover(context, {
+    enabled: !disabled && mode.includes("hover"),
+    handleClose: safePolygon()
+  });
+  const focus = useFocus(context, { enabled: !disabled && mode.includes("focus") });
+  const dismiss = useDismiss(context);
+  const { getReferenceProps, getFloatingProps } = useInteractions([click, hover, focus, dismiss]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
       "span",
       {
         style: { display: "inline-block" },
-        className: g("popup-handler-wrapper", s),
-        ref: f.setReference,
-        ...W(),
-        children: i
+        className: cx("popup-handler-wrapper", handlerWrapperClassName),
+        ref: refs.setReference,
+        ...getReferenceProps(),
+        children: handler
       }
     ),
-    (r || o) && /* @__PURE__ */ a(he, { children: /* @__PURE__ */ a(
+    (open || preventDestroyContentOnHide) && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(
       "div",
       {
-        className: g("di popup-wrapper", { hidden: o && !r }),
-        ref: f.setFloating,
-        style: v,
-        ...j(),
-        children: /* @__PURE__ */ m("div", { className: g("di popup", H, l), children: [
-          /* @__PURE__ */ a(
+        className: cx("di popup-wrapper", { hidden: preventDestroyContentOnHide && !open }),
+        ref: refs.setFloating,
+        style: { ...floatingStyles, zIndex: 1e5 },
+        ...getFloatingProps(),
+        children: /* @__PURE__ */ jsxs("div", { className: cx("di popup", computedPlacement, className), children: [
+          /* @__PURE__ */ jsx(
             "div",
             {
-              className: g("popup-arrow", H),
-              ref: h,
-              style: { left: B.arrow?.x, top: B.arrow?.y }
+              className: cx("popup-arrow", computedPlacement),
+              ref: arrowRef,
+              style: { left: middlewareData.arrow?.x, top: middlewareData.arrow?.y }
             }
           ),
-          /* @__PURE__ */ a("div", { className: "popup-content", children: u })
+          /* @__PURE__ */ jsx("div", { className: "popup-content", children })
         ] })
       }
     ) })
   ] });
 }
-function Ke({ content: n, inverted: e, children: t, disabled: i, style: s, direction: o, className: r }) {
-  const [c, l] = x(!1);
-  return /* @__PURE__ */ a(
-    S,
+function Bubble({ content, inverted, children, disabled, style, direction, className }) {
+  const [open, setOpen] = useState(false);
+  return /* @__PURE__ */ jsx(
+    Popup,
     {
-      open: c,
-      onOpenChange: l,
-      handler: t,
-      disabled: i,
+      open,
+      onOpenChange: setOpen,
+      handler: children,
+      disabled,
       mode: ["hover"],
-      placement: o || "top",
-      className: `bubble ${e ? "inverted" : ""} ${r || ""}`,
-      children: /* @__PURE__ */ a("span", { className: "bubble-content", style: s, children: n })
+      placement: direction ? direction : "top",
+      className: `bubble ${inverted ? "inverted" : ""} ${className ? className : ""}`,
+      children: /* @__PURE__ */ jsx("span", { className: `bubble-content`, style, children: content })
     }
   );
 }
-function it({ content: n, children: e, className: t, direction: i, disabled: s }) {
-  const [o, r] = x(!1);
-  return /* @__PURE__ */ a(
-    S,
+function Tooltip({ content, children, className, direction, disabled }) {
+  const [open, setOpen] = useState(false);
+  return /* @__PURE__ */ jsx(
+    Popup,
     {
-      open: o,
-      disabled: s,
+      open,
+      disabled,
       mode: ["hover"],
-      onOpenChange: r,
-      handler: e,
-      placement: i || "right",
-      className: `tooltip inverted ${t || ""}`,
-      children: /* @__PURE__ */ a("span", { className: "tooltip-content", children: n })
+      onOpenChange: setOpen,
+      handler: children,
+      placement: direction ? direction : "right",
+      className: `tooltip inverted ${className ? className : ""}`,
+      children: /* @__PURE__ */ jsx("span", { className: "tooltip-content", children: content })
     }
   );
 }
-class st extends y.Component {
+class Tabs extends React.Component {
   state = {
     currentTab: this.props.pages.length ? this.props.pages[0].name : null
   };
-  handleClick = (e) => {
-    this.props.onChange ? this.props.onChange(e) : typeof this.props.currentTab > "u" && this.setState({
-      currentTab: e
-    });
+  handleClick = (tab) => {
+    if (this.props.onChange) {
+      this.props.onChange(tab);
+    } else if (typeof this.props.currentTab === "undefined") {
+      this.setState({
+        currentTab: tab
+      });
+    }
   };
   currentTabPage = () => {
-    const e = typeof this.props.currentTab == "string" ? this.props.currentTab : this.state.currentTab;
-    return this.props.pages.find(({ name: t }) => e === t);
+    const currentTab = typeof this.props.currentTab === "string" ? this.props.currentTab : this.state.currentTab;
+    return this.props.pages.find(({ name }) => currentTab === name);
+  };
+  isCurrentTab = (tab) => {
+    const currentTab = typeof this.props.currentTab === "string" ? this.props.currentTab : this.state.currentTab;
+    return currentTab === tab;
   };
-  isCurrentTab = (e) => (typeof this.props.currentTab == "string" ? this.props.currentTab : this.state.currentTab) === e;
   renderBody = () => {
-    const e = this.currentTabPage();
-    return e && typeof e.renderBody == "function" ? e.renderBody() : null;
+    const page = this.currentTabPage();
+    if (page && typeof page.renderBody === "function") {
+      return page.renderBody();
+    }
+    return null;
   };
   render() {
-    const { pages: e, disabled: t } = this.props;
-    return /* @__PURE__ */ m("div", { children: [
-      /* @__PURE__ */ a("div", { className: "di tabs", children: e.map(
-        ({ name: i, renderHeading: s, tabDescription: o }) => o ? /* @__PURE__ */ a(Ke, { inverted: !0, content: o, className: "bubble-tab-description", children: /* @__PURE__ */ a(
+    const { pages, disabled } = this.props;
+    return /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("div", { className: "di tabs", children: pages.map(
+        ({ name, renderHeading, tabDescription }) => tabDescription ? /* @__PURE__ */ jsx(Bubble, { inverted: true, content: tabDescription, className: "bubble-tab-description", children: /* @__PURE__ */ jsx(
           "button",
           {
             "data-testid": "tab-button",
-            className: `item ${t ? "disabled" : ""} ${this.isCurrentTab(i) ? "active" : ""}`,
-            onClick: () => !t && this.handleClick(i),
-            children: s()
+            className: `item ${disabled ? "disabled" : ""} ${this.isCurrentTab(name) ? "active" : ""}`,
+            onClick: () => !disabled && this.handleClick(name),
+            children: renderHeading()
           }
-        ) }, i) : /* @__PURE__ */ a(
+        ) }, name) : /* @__PURE__ */ jsx(
           "button",
           {
             "data-testid": "tab-button",
-            className: `item ${t ? "disabled" : ""} ${this.isCurrentTab(i) ? "active" : ""}`,
-            onClick: () => !t && this.handleClick(i),
-            children: s()
+            className: `item ${disabled ? "disabled" : ""} ${this.isCurrentTab(name) ? "active" : ""}`,
+            onClick: () => !disabled && this.handleClick(name),
+            children: renderHeading()
           },
-          i
+          name
         )
       ) }),
       this.renderBody()
     ] });
   }
 }
-const R = ({
-  onChange: n,
-  inputElement: e,
-  style: t
-}) => /* @__PURE__ */ a(
-  b,
+const ClearButton = ({
+  onChange,
+  inputElement,
+  style
+}) => /* @__PURE__ */ jsx(
+  Button$1,
   {
-    naked: !0,
+    naked: true,
     onClick: () => {
-      n(""), e && e.focus();
+      onChange("");
+      if (inputElement) {
+        inputElement.focus();
+      }
     },
-    style: t,
-    children: /* @__PURE__ */ a(T, { del: !0 })
+    style,
+    children: /* @__PURE__ */ jsx(Icon, { del: true })
   }
 );
-class Fe extends y.Component {
+class SearchBox extends React.Component {
   state = {
     query: this.props.initialValue || ""
   };
   input;
   printPlaceholder() {
-    const { t: e, placeholder: t } = this.props;
-    return typeof t == "object" ? e(t.id, {
-      defaultValue: t.defaultValue
-    }) : t;
+    const { t, placeholder } = this.props;
+    if (typeof placeholder === "object") {
+      return t(placeholder.id, {
+        defaultValue: placeholder.defaultValue
+      });
+    } else {
+      return placeholder;
+    }
   }
-  handleChange = (e) => {
-    const { onChange: t } = this.props;
+  handleChange = (value) => {
+    const { onChange } = this.props;
     this.setState({
-      query: e
-    }), t(e);
+      query: value
+    });
+    onChange(value);
   };
-  handleKeyUp = ({ key: e }) => {
-    const { onSubmit: t } = this.props, { query: i } = this.state;
-    e === "Enter" && typeof t == "function" && t(i);
+  handleKeyUp = ({ key }) => {
+    const { onSubmit } = this.props;
+    const { query } = this.state;
+    if (key === "Enter" && typeof onSubmit === "function") {
+      onSubmit(query);
+    }
   };
   render() {
-    const { onSubmit: e, style: t, clearable: i } = this.props, { query: s } = this.state;
-    return /* @__PURE__ */ m("div", { className: "search-box", style: t, children: [
-      /* @__PURE__ */ a(
+    const { onSubmit, style, clearable } = this.props;
+    const { query } = this.state;
+    return /* @__PURE__ */ jsxs("div", { className: "search-box", style, children: [
+      /* @__PURE__ */ jsx(
         "input",
         {
-          ref: (o) => {
-            this.input = o;
+          ref: (input) => {
+            this.input = input;
           },
           type: "text",
-          value: s,
+          value: query,
           placeholder: this.printPlaceholder(),
           onKeyUp: this.handleKeyUp,
-          onChange: ({ target: { value: o } }) => this.handleChange(o)
+          onChange: ({ target: { value } }) => this.handleChange(value)
         }
       ),
-      typeof e == "function" ? /* @__PURE__ */ m(y.Fragment, { children: [
-        s && i && /* @__PURE__ */ a(
-          R,
+      typeof onSubmit === "function" ? /* @__PURE__ */ jsxs(React.Fragment, { children: [
+        query && clearable && /* @__PURE__ */ jsx(
+          ClearButton,
           {
             onChange: this.handleChange,
             inputElement: this.input,
@@ -713,31 +864,31 @@ class Fe extends y.Component {
             }
           }
         ),
-        /* @__PURE__ */ a(b, { naked: !0, onClick: () => e(s), children: /* @__PURE__ */ a(T, { search: !0 }) })
-      ] }) : s && i ? /* @__PURE__ */ a(R, { onChange: this.handleChange, inputElement: this.input }) : /* @__PURE__ */ a(b, { naked: !0, disabled: !0, children: /* @__PURE__ */ a(T, { search: !0 }) })
+        /* @__PURE__ */ jsx(Button$1, { naked: true, onClick: () => onSubmit(query), children: /* @__PURE__ */ jsx(Icon, { search: true }) })
+      ] }) : query && clearable ? /* @__PURE__ */ jsx(ClearButton, { onChange: this.handleChange, inputElement: this.input }) : /* @__PURE__ */ jsx(Button$1, { naked: true, disabled: true, children: /* @__PURE__ */ jsx(Icon, { search: true }) })
     ] });
   }
 }
-const at = E()(Fe);
+const SearchBox_default = withTranslation()(SearchBox);
 export {
-  Ye as Accordion,
-  Ge as AccordionItem,
-  Ke as Bubble,
-  b as Button,
-  me as ButtonRow,
-  et as Checkbox,
-  Ae as ConfirmProvider,
-  T as Icon,
-  nt as Label,
-  ye as Modal,
-  Je as ModalContainer,
-  S as Popup,
-  at as SearchBox,
-  xe as Spinner,
-  Qe as SpinnerContainer,
-  st as Tabs,
-  it as Tooltip,
-  Te as useConfirm,
-  tt as withConfirm
+  Accordion,
+  AccordionItem,
+  Bubble,
+  Button$1 as Button,
+  ButtonRow,
+  Checkbox_default as Checkbox,
+  ConfirmProvider,
+  Icon,
+  Label,
+  Modal,
+  ModalContainer,
+  Popup,
+  SearchBox_default as SearchBox,
+  Spinner,
+  SpinnerContainer,
+  Tabs,
+  Tooltip,
+  useConfirm,
+  withConfirm
 };
 //# sourceMappingURL=index.js.map