@deviceinsight/ng-ui-basic-components 7.16.0 → 7.18.0

package/dist/index.cjs

@@ -1,897 +1,866 @@
-"use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
-const cx = require("classnames");
-const reactI18next = require("react-i18next");
-const ReactDOM = require("react-dom");
-const Draggable = require("react-draggable");
-const react = require("@floating-ui/react");
-function _interopNamespaceDefault(e) {
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-  if (e) {
-    for (const k in e) {
-      if (k !== "default") {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
-class Accordion extends React__namespace.Component {
-  state = {
-    currentPageIndex: -1
-  };
-  componentDidMount() {
-    const { defaultOpenPageIndex } = this.props;
-    if (defaultOpenPageIndex !== null && defaultOpenPageIndex !== void 0) {
-      this.handleAccordionToggle(defaultOpenPageIndex);
-    }
-  }
-  handleAccordionToggle = (index) => {
-    const { onPageChange } = this.props;
-    const newPageIndex = this.state.currentPageIndex !== index ? index : -1;
-    this.setState({
-      currentPageIndex: newPageIndex
-    });
-    if (onPageChange) {
-      onPageChange(newPageIndex);
-    }
-  };
-  render() {
-    const { children, accordionClass } = this.props;
-    const { currentPageIndex } = this.state;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: accordionClass ? `di accordion ${accordionClass}` : "di accordion", children: children && children.map(
-      (child, index) => child ? /* @__PURE__ */ jsxRuntime.jsx(
-        child.type,
-        {
-          index,
-          isOpen: currentPageIndex === index,
-          toggle: () => this.handleAccordionToggle(index),
-          ...child.props
-        },
-        index
-      ) : null
-    ) });
-  }
-}
-class AccordionItem extends React__namespace.PureComponent {
-  render() {
-    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__ */ jsxRuntime.jsxs("div", { className: accordionItemClasses.join(" "), children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "head", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "title", onClick: toggle, "data-testid": rest["data-testid"], children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h1", { title: titleTooltip, children: title }),
-          badge && /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              className: "di label",
-              style: {
-                margin: "0 0 0 10px",
-                backgroundColor: "#ddd",
-                borderColor: "transparent"
-              },
-              children: badge
-            }
-          ),
-          info1 && /* @__PURE__ */ jsxRuntime.jsx("span", { style: info1.cssStyle, children: info1.text })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tools", children: tools && tools.map((toolComponent, index) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tool", children: toolComponent }, index)) })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cont", children })
-    ] });
-  }
-}
-function Button$1({
-  children,
-  title,
-  type,
-  disabled,
-  onClick,
-  style,
-  tabIndex,
-  t,
-  primary,
-  danger,
-  naked,
-  className,
-  small,
-  ...rest
-}) {
-  let btnTitle = title;
-  if (title && typeof title !== "string") {
-    btnTitle = t(title.id, {
-      defaultValue: title.defaultValue
-    });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "button",
-    {
-      "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 Button = reactI18next.withTranslation()(Button$1);
-const ButtonRow = ({ children, dividing, className, style }) => /* @__PURE__ */ jsxRuntime.jsx("div", { style, className: `di button-row ${dividing ? "dividing" : ""} ${className || ""}`, children });
-ButtonRow.defaultProps = {
-  dividing: false
+//#region \0rolldown/runtime.js
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
 };
-const isTouchEvent = (event) => {
-  return !!event.touches;
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+//#endregion
+let react = require("react");
+react = __toESM(react, 1);
+let react_jsx_runtime = require("react/jsx-runtime");
+let classnames = require("classnames");
+classnames = __toESM(classnames, 1);
+let react_i18next = require("react-i18next");
+let react_dom = require("react-dom");
+react_dom = __toESM(react_dom, 1);
+let react_draggable = require("react-draggable");
+react_draggable = __toESM(react_draggable, 1);
+let _floating_ui_react = require("@floating-ui/react");
+//#region src/components/accordion/Accordion.tsx
+/**
+* Accordions are best used to display homogenous information, e.g. multiple configurations which would take up a lot of space otherwise.
+*/
+var Accordion = class extends react.Component {
+	state = { currentPageIndex: -1 };
+	componentDidMount() {
+		const { defaultOpenPageIndex } = this.props;
+		if (defaultOpenPageIndex !== null && defaultOpenPageIndex !== void 0) this.handleAccordionToggle(defaultOpenPageIndex);
+	}
+	handleAccordionToggle = (index) => {
+		const { onPageChange } = this.props;
+		const newPageIndex = this.state.currentPageIndex !== index ? index : -1;
+		this.setState({ currentPageIndex: newPageIndex });
+		if (onPageChange) onPageChange(newPageIndex);
+	};
+	render() {
+		const { children, accordionClass } = this.props;
+		const { currentPageIndex } = this.state;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: accordionClass ? `di accordion ${accordionClass}` : "di accordion",
+			children: children && children.map((child, index) => child ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(child.type, {
+				index,
+				isOpen: currentPageIndex === index,
+				toggle: () => this.handleAccordionToggle(index),
+				...child.props
+			}, index) : null)
+		});
+	}
 };
-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;
+//#endregion
+//#region src/components/accordionComponents/AccordionItem.tsx
+var AccordionItem = class extends react.PureComponent {
+	render() {
+		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__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: accordionItemClasses.join(" "),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "head",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: "title",
+					onClick: toggle,
+					"data-testid": rest["data-testid"],
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
+							title: titleTooltip,
+							children: title
+						}),
+						badge && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "di label",
+							style: {
+								margin: "0 0 0 10px",
+								backgroundColor: "#ddd",
+								borderColor: "transparent"
+							},
+							children: badge
+						}),
+						info1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							style: info1.cssStyle,
+							children: info1.text
+						})
+					]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "tools",
+					children: tools && tools.map((toolComponent, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "tool",
+						children: toolComponent
+					}, index))
+				})]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "cont",
+				children
+			})]
+		});
+	}
 };
-const useOutsideClick = (elements, callback) => {
-  const callbackRef = React.useRef(callback);
-  React.useEffect(() => {
-    callbackRef.current = callback;
-  }, [callback]);
-  React.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);
-      }
-    };
-    document.addEventListener("mousedown", listener, true);
-    document.addEventListener("touchstart", listener, true);
-    return () => {
-      document.removeEventListener("mousedown", listener, true);
-      document.removeEventListener("touchstart", listener, true);
-    };
-  }, [elements]);
+//#endregion
+//#region src/components/button/Button.tsx
+/**
+* Buttons are used to inform the user about a potential user interaction, which then on interaction causes an action.
+* To create a standardized look and feel, different props can be passed to the Button.
+*/
+function Button({ children, title, type, disabled, onClick, style, tabIndex, t, primary, danger, naked, className, small, ...rest }) {
+	let btnTitle = title;
+	if (title && typeof title !== "string") btnTitle = t(title.id, { defaultValue: title.defaultValue });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		"data-testid": rest["data-testid"],
+		type: type || "button",
+		className: (0, classnames.default)("di button", className, {
+			small,
+			primary,
+			danger,
+			link: naked
+		}),
+		title: typeof btnTitle === "string" ? btnTitle : void 0,
+		disabled,
+		onClick,
+		style,
+		tabIndex,
+		children
+	});
+}
+var Button_default = (0, react_i18next.withTranslation)()(Button);
+//#endregion
+//#region src/components/button/ButtonRow.tsx
+/**
+* ButtonRows align Buttons nicely for all relevant and/or related user actions such as saving or canceling changes.
+* To separate the ButtonRow from the content, the extra property `dividing` can be used.
+*/
+var ButtonRow = ({ children, dividing, className, style }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	style,
+	className: `di button-row ${dividing ? "dividing" : ""} ${className || ""}`,
+	children
+});
+ButtonRow.defaultProps = { dividing: false };
+//#endregion
+//#region src/hooks/useOutsideClick.ts
+var isTouchEvent = (event) => {
+	return !!event.touches;
 };
+var 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;
+};
+var useOutsideClick = (elements, callback) => {
+	const callbackRef = (0, react.useRef)(callback);
+	(0, react.useEffect)(() => {
+		callbackRef.current = callback;
+	}, [callback]);
+	(0, react.useEffect)(() => {
+		const listener = (event) => {
+			if (elements.filter((element) => element != null).every((element) => element !== event.target && !element.contains(event.target) && !isInsideBoundingRect(element, event))) callbackRef.current(event);
+		};
+		document.addEventListener("mousedown", listener, true);
+		document.addEventListener("touchstart", listener, true);
+		return () => {
+			document.removeEventListener("mousedown", listener, true);
+			document.removeEventListener("touchstart", listener, true);
+		};
+	}, [elements]);
+};
+//#endregion
+//#region src/components/modalComponents/ModalWindow.tsx
 function ModalWindow({ className, width, header, content, footer, onOutsideClick }) {
-  const ref = React.useRef(null);
-  const [rootElement, setRootElement] = React.useState(null);
-  React.useEffect(() => {
-    setRootElement(ref.current);
-  }, []);
-  useOutsideClick([rootElement], () => {
-    if (onOutsideClick) onOutsideClick();
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx(Draggable, { handle: ".modal-header", nodeRef: ref, children: /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      ref,
-      className: `modal-window ${className || ""}`,
-      style: {
-        maxWidth: width
-      },
-      children: [
-        header && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "modal-header", children: header }),
-        content && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "modal-content", children: content }),
-        footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "modal-footer", children: footer })
-      ]
-    }
-  ) });
-}
-class Modal extends React.Component {
-  static defaultProps = {
-    width: "60%"
-  };
-  container;
-  modalRoot;
-  timeoutId;
-  constructor(props) {
-    super(props);
-    this.state = {
-      className: "di modal"
-    };
-  }
-  componentDidMount() {
-    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 || ""}`
-      }),
-      10
-    );
-  }
-  componentWillUnmount() {
-    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 = (event) => {
-    if (event.key === "Escape" && this.props.onOutsideClick) {
-      this.props.onOutsideClick(event);
-    }
-  };
-  render() {
-    if (!this.container) {
-      return null;
-    }
-    return ReactDOM.createPortal(
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: this.state.className, onMouseDown: this.props.onMouseDown, children: /* @__PURE__ */ jsxRuntime.jsx(ModalWindow, { ...this.props }) }),
-      this.container
-    );
-  }
-}
-class ModalContainer extends React.PureComponent {
-  render() {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { id: "modal-root" });
-  }
-}
-class Spinner extends React.Component {
-  static defaultProps = {
-    size: 56,
-    center: false
-  };
-  render() {
-    const { size = 56, center, ...dataAttrs } = this.props;
-    let style = {
-      width: size,
-      height: size
-    };
-    if (center) {
-      style = {
-        ...style,
-        position: "absolute",
-        top: "50%",
-        left: "50%",
-        marginTop: -size / 2,
-        marginLeft: -size / 2
-      };
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "di spinner", style, ...dataAttrs });
-  }
+	const ref = (0, react.useRef)(null);
+	const [rootElement, setRootElement] = (0, react.useState)(null);
+	(0, react.useEffect)(() => {
+		setRootElement(ref.current);
+	}, []);
+	useOutsideClick([rootElement], () => {
+		if (onOutsideClick) onOutsideClick();
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_draggable.default, {
+		handle: ".modal-header",
+		nodeRef: ref,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			ref,
+			className: `modal-window ${className || ""}`,
+			style: { maxWidth: width },
+			children: [
+				header && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "modal-header",
+					children: header
+				}),
+				content && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "modal-content",
+					children: content
+				}),
+				footer && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "modal-footer",
+					children: footer
+				})
+			]
+		})
+	});
 }
-class SpinnerContainer extends React.Component {
-  static defaultProps = {
-    size: 56
-  };
-  render() {
-    const { show, size, children, className } = this.props;
-    const classNames = `di spinner-wrapper ${className ? className : ""}`;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: `di spinner-container ${show ? "visible" : ""}`,
-          "data-testid": this.props["data-testid"],
-          children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size, center: true })
-        }
-      ),
-      children
-    ] });
-  }
-}
-const getWrapperClassName = (type, small) => {
-  switch (type) {
-    case "checkbox":
-    case "radio":
-      return "di checkbox";
-    case "toggle":
-      return small ? "di toggle toggle-small" : "di toggle";
-    default:
-      throw Error(`type not support: ${type}`);
-  }
+//#endregion
+//#region src/components/modal/Modal.tsx
+var Modal = class extends react.default.Component {
+	static defaultProps = { width: "60%" };
+	container;
+	modalRoot;
+	timeoutId;
+	constructor(props) {
+		super(props);
+		this.state = { className: "di modal" };
+	}
+	componentDidMount() {
+		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 || ""}` }), 10);
+	}
+	componentWillUnmount() {
+		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 = (event) => {
+		if (event.key === "Escape" && this.props.onOutsideClick) this.props.onOutsideClick(event);
+	};
+	render() {
+		if (!this.container) return null;
+		return react_dom.default.createPortal(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: this.state.className,
+			onMouseDown: this.props.onMouseDown,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModalWindow, { ...this.props })
+		}), this.container);
+	}
+};
+//#endregion
+//#region src/components/modalComponents/ModalContainer.tsx
+var ModalContainer = class extends react.default.PureComponent {
+	render() {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { id: "modal-root" });
+	}
+};
+//#endregion
+//#region src/components/spinner/Spinner.tsx
+/**
+* Spinners usually show a loading indication.
+*/
+var Spinner = class extends react.default.Component {
+	static defaultProps = {
+		size: 56,
+		center: false
+	};
+	render() {
+		const { size = 56, center, ...dataAttrs } = this.props;
+		let style = {
+			width: size,
+			height: size
+		};
+		if (center) style = {
+			...style,
+			position: "absolute",
+			top: "50%",
+			left: "50%",
+			marginTop: -size / 2,
+			marginLeft: -size / 2
+		};
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "di spinner",
+			style,
+			...dataAttrs
+		});
+	}
 };
-const getCheckboxClassName = (type, small) => {
-  switch (type) {
-    case "checkbox":
-      return "box";
-    case "radio":
-      return "radio";
-    case "toggle":
-      return small ? "switch switch-small" : "switch";
-    default:
-      throw Error(`type not support: ${type}`);
-  }
+//#endregion
+//#region src/components/spinner/SpinnerContainer.tsx
+/**
+* SpinnerContainer wraps the entire content and displays a loading indicator until the loading is done.
+*/
+var SpinnerContainer = class extends react.default.Component {
+	static defaultProps = { size: 56 };
+	render() {
+		const { show, size, children, className } = this.props;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: `di spinner-wrapper ${className ? className : ""}`,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: `di spinner-container ${show ? "visible" : ""}`,
+				"data-testid": this.props["data-testid"],
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Spinner, {
+					size,
+					center: true
+				})
+			}), children]
+		});
+	}
 };
-const Checkbox = ({
-  type = "checkbox",
-  value,
-  onChange,
-  title,
-  label,
-  disabled = false,
-  toggleSmall = false,
-  toggleColor = "#259b23",
-  t,
-  ...other
-}) => {
-  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__ */ jsxRuntime.jsxs(
-    "label",
-    {
-      title: tooltip,
-      className: getWrapperClassName(type, toggleSmall),
-      "data-testid": other["wrapper-data-testid"],
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            type: "checkbox",
-            checked: value,
-            disabled,
-            onChange: () => onChange(!value),
-            "data-testid": other["data-testid"]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: getCheckboxClassName(type, toggleSmall),
-            style,
-            "data-testid": other["innerdiv-data-testid"]
-          }
-        ),
-        label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "textlabel", children: labelText })
-      ]
-    }
-  );
+//#endregion
+//#region src/components/input/Checkbox.tsx
+var getWrapperClassName = (type, small) => {
+	switch (type) {
+		case "checkbox":
+		case "radio": return "di checkbox";
+		case "toggle": return small ? "di toggle toggle-small" : "di toggle";
+		default: throw Error(`type not support: ${type}`);
+	}
 };
-const Checkbox_default = reactI18next.withTranslation()(Checkbox);
+var getCheckboxClassName = (type, small) => {
+	switch (type) {
+		case "checkbox": return "box";
+		case "radio": return "radio";
+		case "toggle": return small ? "switch switch-small" : "switch";
+		default: throw Error(`type not support: ${type}`);
+	}
+};
+/**
+* Checkbox for enabling user interaction can have one of multiple types which are defined via the `type` prop.
+*/
+var Checkbox = ({ type = "checkbox", value, onChange, title, label, disabled = false, toggleSmall = false, toggleColor = "#259b23", t, ...other }) => {
+	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__ */ (0, react_jsx_runtime.jsxs)("label", {
+		title: tooltip,
+		className: getWrapperClassName(type, toggleSmall),
+		"data-testid": other["wrapper-data-testid"],
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				type: "checkbox",
+				checked: value,
+				disabled,
+				onChange: () => onChange(!value),
+				"data-testid": other["data-testid"]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: getCheckboxClassName(type, toggleSmall),
+				style,
+				"data-testid": other["innerdiv-data-testid"]
+			}),
+			label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "textlabel",
+				children: labelText
+			})
+		]
+	});
+};
+var Checkbox_default = (0, react_i18next.withTranslation)()(Checkbox);
+//#endregion
+//#region src/components/confirm/utils.ts
 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;
+	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;
 }
+//#endregion
+//#region src/components/confirm/Confirm.tsx
 function transformTextToElement(message) {
-  if (isTranslationDescriptor(message)) {
-    return /* @__PURE__ */ jsxRuntime.jsx(reactI18next.Trans, { i18nKey: message.id, children: message.defaultValue });
-  }
-  return message;
+	if (isTranslationDescriptor(message)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_i18next.Trans, {
+		i18nKey: message.id,
+		children: message.defaultValue
+	});
+	return message;
 }
-function Confirm({
-  title,
-  message,
-  onAccept,
-  onDecline,
-  acceptButtonLabel,
-  declineButtonLabel,
-  acceptButtonStyle = "primary"
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Modal,
-    {
-      header: transformTextToElement(title),
-      content: transformTextToElement(message),
-      footer: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Button,
-          {
-            primary: acceptButtonStyle === "primary",
-            danger: acceptButtonStyle === "danger",
-            onClick: onAccept,
-            children: acceptButtonLabel ? transformTextToElement(acceptButtonLabel) : /* @__PURE__ */ jsxRuntime.jsx(reactI18next.Trans, { i18nKey: "form.accept", children: "Accept" })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: onDecline, children: declineButtonLabel ? transformTextToElement(declineButtonLabel) : /* @__PURE__ */ jsxRuntime.jsx(reactI18next.Trans, { i18nKey: "form.decline", children: "Decline" }) })
-      ] }),
-      width: 500
-    }
-  );
+/**
+* Confirm enables the possibility to open up a dialog within a modal, requiring additional user actions.
+* This component should not be used directly, instead use `@withConfirm` to inject a promise based confirm method
+*/
+function Confirm({ title, message, onAccept, onDecline, acceptButtonLabel, declineButtonLabel, acceptButtonStyle = "primary" }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Modal, {
+		header: transformTextToElement(title),
+		content: transformTextToElement(message),
+		footer: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button_default, {
+			primary: acceptButtonStyle === "primary",
+			danger: acceptButtonStyle === "danger",
+			onClick: onAccept,
+			children: acceptButtonLabel ? transformTextToElement(acceptButtonLabel) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_i18next.Trans, {
+				i18nKey: "form.accept",
+				children: "Accept"
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button_default, {
+			onClick: onDecline,
+			children: declineButtonLabel ? transformTextToElement(declineButtonLabel) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_i18next.Trans, {
+				i18nKey: "form.decline",
+				children: "Decline"
+			})
+		})] }),
+		width: 500
+	});
 }
-const ConfirmContext = React.createContext({
-  confirm: () => Promise.reject(new Error("ConfirmProvider is missing!"))
-});
+//#endregion
+//#region src/components/confirm/ConfirmProvider.tsx
+var ConfirmContext = (0, react.createContext)({ confirm: () => Promise.reject(/* @__PURE__ */ new Error("ConfirmProvider is missing!")) });
 function ConfirmProvider({ children }) {
-  const [visible, setVisible] = React.useState(false);
-  const [confirmProps, setConfirmProps] = React.useState({
-    title: "",
-    message: "",
-    onAccept: () => {
-    },
-    onDecline: () => {
-    }
-  });
-  async function confirm(options) {
-    return new Promise((resolve) => {
-      setVisible(true);
-      setConfirmProps({
-        ...options,
-        onAccept: () => {
-          setVisible(false);
-          resolve(true);
-        },
-        onDecline: () => {
-          setVisible(false);
-          resolve(false);
-        }
-      });
-    });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs(ConfirmContext.Provider, { value: { confirm }, children: [
-    children,
-    visible && /* @__PURE__ */ jsxRuntime.jsx(Confirm, { ...confirmProps })
-  ] });
+	const [visible, setVisible] = (0, react.useState)(false);
+	const [confirmProps, setConfirmProps] = (0, react.useState)({
+		title: "",
+		message: "",
+		onAccept: () => {},
+		onDecline: () => {}
+	});
+	async function confirm(options) {
+		return new Promise((resolve) => {
+			setVisible(true);
+			setConfirmProps({
+				...options,
+				onAccept: () => {
+					setVisible(false);
+					resolve(true);
+				},
+				onDecline: () => {
+					setVisible(false);
+					resolve(false);
+				}
+			});
+		});
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ConfirmContext.Provider, {
+		value: { confirm },
+		children: [children, visible && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Confirm, { ...confirmProps })]
+	});
 }
+//#endregion
+//#region src/components/confirm/useConfirm.ts
 function useConfirm() {
-  const context = React.useContext(ConfirmContext);
-  if (!context) {
-    throw new Error("ConfirmProvider is missing");
-  }
-  const { confirm } = context;
-  return confirm;
+	const context = (0, react.useContext)(ConfirmContext);
+	if (!context) throw new Error("ConfirmProvider is missing");
+	const { confirm } = context;
+	return confirm;
 }
+//#endregion
+//#region src/components/confirm/withConfirm.tsx
 function withConfirm(WrappedComponent) {
-  function WithConfirm(props) {
-    const confirm = useConfirm();
-    const { t } = reactI18next.useTranslation();
-    function trans(arg) {
-      if (isTranslationDescriptor(arg)) {
-        return t(arg.id, { defaultValue: arg.defaultValue });
-      }
-      return arg;
-    }
-    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 (resolveWithConfirmation) {
-        return accepted;
-      } else if (!accepted) {
-        return new Promise(() => {
-        });
-      }
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(WrappedComponent, { ...props, confirm: deprecatedConfirm });
-  }
-  return function WithConfirmWrapper(props) {
-    return /* @__PURE__ */ jsxRuntime.jsx(ConfirmProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(WithConfirm, { ...props }) });
-  };
+	function WithConfirm(props) {
+		const confirm = useConfirm();
+		const { t } = (0, react_i18next.useTranslation)();
+		function trans(arg) {
+			if (isTranslationDescriptor(arg)) return t(arg.id, { defaultValue: arg.defaultValue });
+			return arg;
+		}
+		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 (resolveWithConfirmation) return accepted;
+			else if (!accepted) return new Promise(() => {});
+		}
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WrappedComponent, {
+			...props,
+			confirm: deprecatedConfirm
+		});
+	}
+	return function WithConfirmWrapper(props) {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConfirmProvider, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WithConfirm, { ...props }) });
+	};
 }
-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";
+//#endregion
+//#region src/assets/svg/icon_add.svg
+var icon_add_default = "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";
+//#endregion
+//#region src/assets/svg/icon_cross.svg
+var icon_cross_default = "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";
+//#endregion
+//#region src/assets/svg/icon_edit.svg
+var icon_edit_default = "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";
+//#endregion
+//#region src/assets/svg/icon_gear.svg
+var icon_gear_default = "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";
+//#endregion
+//#region src/assets/svg/icon_duplicate.svg
+var icon_duplicate_default = "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";
+//#endregion
+//#region src/assets/svg/icon_download.svg
+var icon_download_default = "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";
+//#endregion
+//#region src/assets/svg/icon_lupe.svg
+var icon_lupe_default = "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";
+//#endregion
+//#region src/assets/svg/icon_key.svg
+var icon_key_default = "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";
+//#endregion
+//#region src/assets/svg/icon_reload.svg
+var icon_reload_default = "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";
+//#endregion
+//#region src/assets/svg/icon_fullscreen.svg
+var icon_fullscreen_default = "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";
+//#endregion
+//#region src/assets/svg/icon_help_light.svg
+var icon_help_light_default = "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";
+//#endregion
+//#region src/assets/svg/icon_star.svg
+var icon_star_default = "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";
+//#endregion
+//#region src/components/icon/Icon.tsx
 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");
-  }
+	const { add, del, edit, config, duplicate, search, download, sync, fullscreen, iconKey, documentation, star } = props;
+	if (add) return icon_add_default;
+	else if (del) return icon_cross_default;
+	else if (edit) return icon_edit_default;
+	else if (config) return icon_gear_default;
+	else if (duplicate) return icon_duplicate_default;
+	else if (search) return icon_lupe_default;
+	else if (download) return icon_download_default;
+	else if (sync) return icon_reload_default;
+	else if (fullscreen) return icon_fullscreen_default;
+	else if (iconKey) return icon_key_default;
+	else if (documentation) return icon_help_light_default;
+	else if (star) return icon_star_default;
+	else throw Error("getSrc: no icon type specified");
 }
 function getAlt(props) {
-  const { add, del, edit, config, duplicate, search, download, sync, fullscreen, iconKey, documentation, star } = props;
-  if (add) {
-    return "icon add";
-  } else if (del) {
-    return "icon delete";
-  } else if (edit) {
-    return "icon edit";
-  } else if (config) {
-    return "icon config";
-  } else if (duplicate) {
-    return "icon duplicate";
-  } else if (search) {
-    return "icon search";
-  } else if (download) {
-    return "icon download";
-  } else if (sync) {
-    return "icon sync";
-  } else if (fullscreen) {
-    return "icon fullscreen";
-  } else if (iconKey) {
-    return "icon iconKey";
-  } else if (documentation) {
-    return "icon documentation";
-  } else if (star) {
-    return "icon star";
-  } else {
-    throw Error("getAlt: no icon type specified");
-  }
+	const { add, del, edit, config, duplicate, search, download, sync, fullscreen, iconKey, documentation, star } = props;
+	if (add) return "icon add";
+	else if (del) return "icon delete";
+	else if (edit) return "icon edit";
+	else if (config) return "icon config";
+	else if (duplicate) return "icon duplicate";
+	else if (search) return "icon search";
+	else if (download) return "icon download";
+	else if (sync) return "icon sync";
+	else if (fullscreen) return "icon fullscreen";
+	else if (iconKey) return "icon iconKey";
+	else if (documentation) return "icon documentation";
+	else if (star) return "icon star";
+	else throw Error("getAlt: no icon type specified");
 }
 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__ */ jsxRuntime.jsx("img", { src: getSrc(props), className: `di icon ${props.className || ""}`, alt: getAlt(props), style });
+	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__ */ (0, react_jsx_runtime.jsx)("img", {
+		src: getSrc(props),
+		className: `di icon ${props.className || ""}`,
+		alt: getAlt(props),
+		style
+	});
 }
-function Label({
-  text,
-  small = false,
-  large = false,
-  onDelete,
-  className,
-  onClick,
-  children,
-  ...dataTestIds
-}) {
-  function handleDelete(event) {
-    event.stopPropagation();
-    if (onDelete) {
-      onDelete();
-    }
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "span",
-    {
-      onClick,
-      className: cx("di label", className, { large, small, removable: onDelete, clickable: !!onClick }),
-      "data-testid": dataTestIds["data-testid"],
-      children: [
-        typeof text === "string" ? text : text && /* @__PURE__ */ jsxRuntime.jsx(reactI18next.Trans, { i18nKey: text.id, children: text.defaultValue }),
-        /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children }),
-        onDelete && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-testid": dataTestIds["delete-button-data-testid"], className: "remove", onClick: handleDelete, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { del: true, inverted: true }) })
-      ]
-    }
-  );
+//#endregion
+//#region src/components/label/Label.tsx
+/**
+* Label enables an easy way for marking or tagging elements.
+*/
+function Label({ text, small = false, large = false, onDelete, className, onClick, children, ...dataTestIds }) {
+	function handleDelete(event) {
+		event.stopPropagation();
+		if (onDelete) onDelete();
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		onClick,
+		className: (0, classnames.default)("di label", className, {
+			large,
+			small,
+			removable: onDelete,
+			clickable: !!onClick
+		}),
+		"data-testid": dataTestIds["data-testid"],
+		children: [
+			typeof text === "string" ? text : text && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_i18next.Trans, {
+				i18nKey: text.id,
+				children: text.defaultValue
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children }),
+			onDelete && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				"data-testid": dataTestIds["delete-button-data-testid"],
+				className: "remove",
+				onClick: handleDelete,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+					del: true,
+					inverted: true
+				})
+			})
+		]
+	});
 }
-const MARGIN = 16;
-function Popup({
-  placement = "bottom",
-  mode = ["click"],
-  disabled,
-  handler,
-  handlerWrapperClassName,
-  preventDestroyContentOnHide,
-  open,
-  onOpenChange,
-  className,
-  children
-}) {
-  const arrowRef = React.useRef(null);
-  const {
-    elements,
-    update,
-    refs,
-    floatingStyles,
-    context,
-    middlewareData,
-    placement: computedPlacement
-  } = react.useFloating({
-    placement,
-    open,
-    onOpenChange,
-    whileElementsMounted: !preventDestroyContentOnHide ? react.autoUpdate : void 0,
-    middleware: [
-      react.offset({
-        mainAxis: 12
-      }),
-      react.flip({
-        padding: MARGIN,
-        boundary: "clippingAncestors",
-        altBoundary: true
-      }),
-      react.shift({
-        padding: MARGIN,
-        boundary: "clippingAncestors",
-        altBoundary: true
-      }),
-      react.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;
-        }
-      }),
-      react.arrow({
-        element: arrowRef
-      })
-    ]
-  });
-  React.useEffect(() => {
-    if (preventDestroyContentOnHide && open && elements.reference && elements.floating) {
-      const cleanup = react.autoUpdate(elements.reference, elements.floating, update);
-      return cleanup;
-    }
-  }, [elements.floating, elements.reference, open, update, preventDestroyContentOnHide]);
-  const click = react.useClick(context, {
-    enabled: !disabled && mode.includes("click"),
-    keyboardHandlers: false
-    // Prevent space key from being blocked in input fields (floating-ui issue #1812)
-  });
-  const hover = react.useHover(context, {
-    enabled: !disabled && mode.includes("hover"),
-    handleClose: react.safePolygon()
-  });
-  const focus = react.useFocus(context, { enabled: !disabled && mode.includes("focus") });
-  const dismiss = react.useDismiss(context);
-  const { getReferenceProps, getFloatingProps } = react.useInteractions([click, hover, focus, dismiss]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "span",
-      {
-        style: { display: "inline-block" },
-        className: cx("popup-handler-wrapper", handlerWrapperClassName),
-        ref: refs.setReference,
-        ...getReferenceProps(),
-        children: handler
-      }
-    ),
-    (open || preventDestroyContentOnHide) && /* @__PURE__ */ jsxRuntime.jsx(react.FloatingPortal, { children: /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: cx("di popup-wrapper", { hidden: preventDestroyContentOnHide && !open }),
-        ref: refs.setFloating,
-        style: { ...floatingStyles, zIndex: 1e5 },
-        ...getFloatingProps(),
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx("di popup", computedPlacement, className), children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: cx("popup-arrow", computedPlacement),
-              ref: arrowRef,
-              style: { left: middlewareData.arrow?.x, top: middlewareData.arrow?.y }
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "popup-content", children })
-        ] })
-      }
-    ) })
-  ] });
+//#endregion
+//#region src/components/popup/Popup.tsx
+var MARGIN = 16;
+/**
+* Popup displays content within a small modal.
+* Its usage is highly flexible and used in several other components.
+*/
+function Popup({ placement = "bottom", mode = ["click"], disabled, handler, handlerWrapperClassName, preventDestroyContentOnHide, open, onOpenChange, className, children }) {
+	const arrowRef = (0, react.useRef)(null);
+	const { elements, update, refs, floatingStyles, context, middlewareData, placement: computedPlacement } = (0, _floating_ui_react.useFloating)({
+		placement,
+		open,
+		onOpenChange,
+		whileElementsMounted: !preventDestroyContentOnHide ? _floating_ui_react.autoUpdate : void 0,
+		middleware: [
+			(0, _floating_ui_react.offset)({ mainAxis: 12 }),
+			(0, _floating_ui_react.flip)({
+				padding: MARGIN,
+				boundary: "clippingAncestors",
+				altBoundary: true
+			}),
+			(0, _floating_ui_react.shift)({
+				padding: MARGIN,
+				boundary: "clippingAncestors",
+				altBoundary: true
+			}),
+			(0, _floating_ui_react.size)({
+				padding: MARGIN,
+				boundary: "clippingAncestors",
+				altBoundary: true,
+				apply({ availableHeight, availableWidth, elements }) {
+					const width = `${Math.max(0, availableWidth - MARGIN)}px`;
+					const height = `${Math.max(0, availableHeight - MARGIN)}px`;
+					elements.floating.style.maxWidth = width;
+					elements.floating.style.maxHeight = height;
+				}
+			}),
+			(0, _floating_ui_react.arrow)({ element: arrowRef })
+		]
+	});
+	(0, react.useEffect)(() => {
+		if (preventDestroyContentOnHide && open && elements.reference && elements.floating) return (0, _floating_ui_react.autoUpdate)(elements.reference, elements.floating, update);
+	}, [
+		elements.floating,
+		elements.reference,
+		open,
+		update,
+		preventDestroyContentOnHide
+	]);
+	const { getReferenceProps, getFloatingProps } = (0, _floating_ui_react.useInteractions)([
+		(0, _floating_ui_react.useClick)(context, {
+			enabled: !disabled && mode.includes("click"),
+			keyboardHandlers: false
+		}),
+		(0, _floating_ui_react.useHover)(context, {
+			enabled: !disabled && mode.includes("hover"),
+			handleClose: (0, _floating_ui_react.safePolygon)()
+		}),
+		(0, _floating_ui_react.useFocus)(context, { enabled: !disabled && mode.includes("focus") }),
+		(0, _floating_ui_react.useDismiss)(context)
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		style: { display: "inline-block" },
+		className: (0, classnames.default)("popup-handler-wrapper", handlerWrapperClassName),
+		ref: refs.setReference,
+		...getReferenceProps(),
+		children: handler
+	}), (open || preventDestroyContentOnHide) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_floating_ui_react.FloatingPortal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, classnames.default)("di popup-wrapper", { hidden: preventDestroyContentOnHide && !open }),
+		ref: refs.setFloating,
+		style: {
+			...floatingStyles,
+			zIndex: 1e5
+		},
+		...getFloatingProps(),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: (0, classnames.default)("di popup", computedPlacement, className),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: (0, classnames.default)("popup-arrow", computedPlacement),
+				ref: arrowRef,
+				style: {
+					left: middlewareData.arrow?.x,
+					top: middlewareData.arrow?.y
+				}
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "popup-content",
+				children
+			})]
+		})
+	}) })] });
 }
+//#endregion
+//#region src/components/bubble/Bubble.tsx
+/**
+* Bubbles are best used to provide some additional information like short instructions or help texts, which are then going to be displayed on Mouse-Over.
+*/
 function Bubble({ content, inverted, children, disabled, style, direction, className }) {
-  const [open, setOpen] = React.useState(false);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Popup,
-    {
-      open,
-      onOpenChange: setOpen,
-      handler: children,
-      disabled,
-      mode: ["hover"],
-      placement: direction ? direction : "top",
-      className: `bubble ${inverted ? "inverted" : ""} ${className ? className : ""}`,
-      children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: `bubble-content`, style, children: content })
-    }
-  );
+	const [open, setOpen] = (0, react.useState)(false);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Popup, {
+		open,
+		onOpenChange: setOpen,
+		handler: children,
+		disabled,
+		mode: ["hover"],
+		placement: direction ? direction : "top",
+		className: `bubble ${inverted ? "inverted" : ""} ${className ? className : ""}`,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: `bubble-content`,
+			style,
+			children: content
+		})
+	});
 }
+//#endregion
+//#region src/components/tooltip/Tooltip.tsx
+/**
+* Tooltip is best used to display some short additional information or description
+*/
 function Tooltip({ content, children, className, direction, disabled }) {
-  const [open, setOpen] = React.useState(false);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Popup,
-    {
-      open,
-      disabled,
-      mode: ["hover"],
-      onOpenChange: setOpen,
-      handler: children,
-      placement: direction ? direction : "right",
-      className: `tooltip inverted ${className ? className : ""}`,
-      children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tooltip-content", children: content })
-    }
-  );
+	const [open, setOpen] = (0, react.useState)(false);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Popup, {
+		open,
+		disabled,
+		mode: ["hover"],
+		onOpenChange: setOpen,
+		handler: children,
+		placement: direction ? direction : "right",
+		className: `tooltip inverted ${className ? className : ""}`,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "tooltip-content",
+			children: content
+		})
+	});
 }
-class Tabs extends React__namespace.Component {
-  state = {
-    currentTab: this.props.pages.length ? this.props.pages[0].name : null
-  };
-  handleClick = (tab) => {
-    if (this.props.onChange) {
-      this.props.onChange(tab);
-    } else if (typeof this.props.currentTab === "undefined") {
-      this.setState({
-        currentTab: tab
-      });
-    }
-  };
-  currentTabPage = () => {
-    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;
-  };
-  renderBody = () => {
-    const page = this.currentTabPage();
-    if (page && typeof page.renderBody === "function") {
-      return page.renderBody();
-    }
-    return null;
-  };
-  render() {
-    const { pages, disabled } = this.props;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "di tabs", children: pages.map(
-        ({ name, renderHeading, tabDescription }) => tabDescription ? /* @__PURE__ */ jsxRuntime.jsx(Bubble, { inverted: true, content: tabDescription, className: "bubble-tab-description", children: /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            "data-testid": "tab-button",
-            className: `item ${disabled ? "disabled" : ""} ${this.isCurrentTab(name) ? "active" : ""}`,
-            onClick: () => !disabled && this.handleClick(name),
-            children: renderHeading()
-          }
-        ) }, name) : /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            "data-testid": "tab-button",
-            className: `item ${disabled ? "disabled" : ""} ${this.isCurrentTab(name) ? "active" : ""}`,
-            onClick: () => !disabled && this.handleClick(name),
-            children: renderHeading()
-          },
-          name
-        )
-      ) }),
-      this.renderBody()
-    ] });
-  }
-}
-const ClearButton = ({
-  onChange,
-  inputElement,
-  style
-}) => /* @__PURE__ */ jsxRuntime.jsx(
-  Button,
-  {
-    naked: true,
-    onClick: () => {
-      onChange("");
-      if (inputElement) {
-        inputElement.focus();
-      }
-    },
-    style,
-    children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { del: true })
-  }
-);
-class SearchBox extends React__namespace.Component {
-  state = {
-    query: this.props.initialValue || ""
-  };
-  input;
-  printPlaceholder() {
-    const { t, placeholder } = this.props;
-    if (typeof placeholder === "object") {
-      return t(placeholder.id, {
-        defaultValue: placeholder.defaultValue
-      });
-    } else {
-      return placeholder;
-    }
-  }
-  handleChange = (value) => {
-    const { onChange } = this.props;
-    this.setState({
-      query: value
-    });
-    onChange(value);
-  };
-  handleKeyUp = ({ key }) => {
-    const { onSubmit } = this.props;
-    const { query } = this.state;
-    if (key === "Enter" && typeof onSubmit === "function") {
-      onSubmit(query);
-    }
-  };
-  render() {
-    const { onSubmit, style, clearable } = this.props;
-    const { query } = this.state;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "search-box", style, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "input",
-        {
-          ref: (input) => {
-            this.input = input;
-          },
-          type: "text",
-          value: query,
-          placeholder: this.printPlaceholder(),
-          onKeyUp: this.handleKeyUp,
-          onChange: ({ target: { value } }) => this.handleChange(value)
-        }
-      ),
-      typeof onSubmit === "function" ? /* @__PURE__ */ jsxRuntime.jsxs(React__namespace.Fragment, { children: [
-        query && clearable && /* @__PURE__ */ jsxRuntime.jsx(
-          ClearButton,
-          {
-            onChange: this.handleChange,
-            inputElement: this.input,
-            style: {
-              right: 30
-            }
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(Button, { naked: true, onClick: () => onSubmit(query), children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { search: true }) })
-      ] }) : query && clearable ? /* @__PURE__ */ jsxRuntime.jsx(ClearButton, { onChange: this.handleChange, inputElement: this.input }) : /* @__PURE__ */ jsxRuntime.jsx(Button, { naked: true, disabled: true, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { search: true }) })
-    ] });
-  }
-}
-const SearchBox_default = reactI18next.withTranslation()(SearchBox);
+//#endregion
+//#region src/components/tabs/Tabs.tsx
+/**
+* Tabs add the possibility to unite several homogeneous pages into one.
+* Unlike RouteTabs, Tabs cannot be accessed directly via the browser's history
+*/
+var Tabs = class extends react.Component {
+	state = { currentTab: this.props.pages.length ? this.props.pages[0].name : null };
+	handleClick = (tab) => {
+		if (this.props.onChange) this.props.onChange(tab);
+		else if (typeof this.props.currentTab === "undefined") this.setState({ currentTab: tab });
+	};
+	currentTabPage = () => {
+		const currentTab = typeof this.props.currentTab === "string" ? this.props.currentTab : this.state.currentTab;
+		return this.props.pages.find(({ name }) => currentTab === name);
+	};
+	isCurrentTab = (tab) => {
+		return (typeof this.props.currentTab === "string" ? this.props.currentTab : this.state.currentTab) === tab;
+	};
+	renderBody = () => {
+		const page = this.currentTabPage();
+		if (page && typeof page.renderBody === "function") return page.renderBody();
+		return null;
+	};
+	render() {
+		const { pages, disabled } = this.props;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "di tabs",
+			children: pages.map(({ name, renderHeading, tabDescription }) => tabDescription ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Bubble, {
+				inverted: true,
+				content: tabDescription,
+				className: "bubble-tab-description",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					"data-testid": "tab-button",
+					className: `item ${disabled ? "disabled" : ""} ${this.isCurrentTab(name) ? "active" : ""}`,
+					onClick: () => !disabled && this.handleClick(name),
+					children: renderHeading()
+				})
+			}, name) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				"data-testid": "tab-button",
+				className: `item ${disabled ? "disabled" : ""} ${this.isCurrentTab(name) ? "active" : ""}`,
+				onClick: () => !disabled && this.handleClick(name),
+				children: renderHeading()
+			}, name))
+		}), this.renderBody()] });
+	}
+};
+//#endregion
+//#region src/components/input/SearchBox.tsx
+var ClearButton = ({ onChange, inputElement, style }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button_default, {
+	naked: true,
+	onClick: () => {
+		onChange("");
+		if (inputElement) inputElement.focus();
+	},
+	style,
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { del: true })
+});
+/**
+* SearchBox is used for searching content and provides a set of `props` for different user experiences
+*/
+var SearchBox = class extends react.Component {
+	state = { query: this.props.initialValue || "" };
+	input;
+	printPlaceholder() {
+		const { t, placeholder } = this.props;
+		if (typeof placeholder === "object") return t(placeholder.id, { defaultValue: placeholder.defaultValue });
+		else return placeholder;
+	}
+	handleChange = (value) => {
+		const { onChange } = this.props;
+		this.setState({ query: value });
+		onChange(value);
+	};
+	handleKeyUp = ({ key }) => {
+		const { onSubmit } = this.props;
+		const { query } = this.state;
+		if (key === "Enter" && typeof onSubmit === "function") onSubmit(query);
+	};
+	render() {
+		const { onSubmit, style, clearable } = this.props;
+		const { query } = this.state;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "search-box",
+			style,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				ref: (input) => {
+					this.input = input;
+				},
+				type: "text",
+				value: query,
+				placeholder: this.printPlaceholder(),
+				onKeyUp: this.handleKeyUp,
+				onChange: ({ target: { value } }) => this.handleChange(value)
+			}), typeof onSubmit === "function" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [query && clearable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ClearButton, {
+				onChange: this.handleChange,
+				inputElement: this.input,
+				style: { right: 30 }
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button_default, {
+				naked: true,
+				onClick: () => onSubmit(query),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { search: true })
+			})] }) : query && clearable ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ClearButton, {
+				onChange: this.handleChange,
+				inputElement: this.input
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button_default, {
+				naked: true,
+				disabled: true,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { search: true })
+			})]
+		});
+	}
+};
+var SearchBox_default = (0, react_i18next.withTranslation)()(SearchBox);
+//#endregion
 exports.Accordion = Accordion;
 exports.AccordionItem = AccordionItem;
 exports.Bubble = Bubble;
-exports.Button = Button;
+exports.Button = Button_default;
 exports.ButtonRow = ButtonRow;
 exports.Checkbox = Checkbox_default;
 exports.ConfirmProvider = ConfirmProvider;
@@ -907,4 +876,5 @@ exports.Tabs = Tabs;
 exports.Tooltip = Tooltip;
 exports.useConfirm = useConfirm;
 exports.withConfirm = withConfirm;
-//# sourceMappingURL=index.cjs.map
+
+//# sourceMappingURL=index.cjs.map