@helpwave/hightide 0.0.13 → 0.0.16

package/dist/components/modals/DiscardChangesDialog.js

@@ -1,24 +1,407 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { SolidButton } from '../Button';
-import { useTranslation } from '../../hooks/useTranslation';
-import { Modal } from './Modal';
-const defaultDiscardChangesDialogTranslation = {
-    en: {
-        save: 'Save',
-        cancel: 'Cancel',
-        dontSave: 'Don\'t save',
-        title: 'Unsaved Changes',
-        description: 'Do you want to save your changes?'
-    },
-    de: {
-        save: 'Speichern',
-        cancel: 'Abbrechen',
-        dontSave: 'Nicht Speichern',
-        title: 'Ungespeicherte Änderungen',
-        description: 'Möchtest du die Änderungen speichern?'
-    }
-};
-export const DiscardChangesDialog = ({ overwriteTranslation, children, title, description, onCancel, onSave, onDontSave, ...modalProps }) => {
-    const translation = useTranslation(defaultDiscardChangesDialogTranslation, overwriteTranslation);
-    return (_jsxs(Modal, { title: title !== null && title !== void 0 ? title : translation.title, description: description !== null && description !== void 0 ? description : translation.description, ...modalProps, children: [children, _jsxs("div", { className: "row mt-3 gap-x-4 justify-end", children: [_jsx(SolidButton, { color: "positive", onClick: onSave, children: translation.save }), _jsx(SolidButton, { color: "negative", onClick: onDontSave, children: translation.dontSave }), _jsx(SolidButton, { autoFocus: true, color: "primary", onClick: onCancel, children: translation.cancel })] })] }));
+"use strict";
+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 __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
 };
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/modals/DiscardChangesDialog.tsx
+var DiscardChangesDialog_exports = {};
+__export(DiscardChangesDialog_exports, {
+  DiscardChangesDialog: () => DiscardChangesDialog
+});
+module.exports = __toCommonJS(DiscardChangesDialog_exports);
+
+// src/components/Button.tsx
+var import_clsx = __toESM(require("clsx"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var ButtonSizePaddings = {
+  small: "btn-sm",
+  medium: "btn-md",
+  large: "btn-lg"
+};
+var SolidButton = ({
+  children,
+  disabled = false,
+  color = "primary",
+  size = "medium",
+  startIcon,
+  endIcon,
+  onClick,
+  className,
+  ...restProps
+}) => {
+  const colorClasses = {
+    primary: "bg-button-solid-primary-background text-button-solid-primary-text",
+    secondary: "bg-button-solid-secondary-background text-button-solid-secondary-text",
+    tertiary: "bg-button-solid-tertiary-background text-button-solid-tertiary-text",
+    positive: "bg-button-solid-positive-background text-button-solid-positive-text",
+    warning: "bg-button-solid-warning-background text-button-solid-warning-text",
+    negative: "bg-button-solid-negative-background text-button-solid-negative-text"
+  }[color];
+  const iconColorClasses = {
+    primary: "text-button-solid-primary-icon",
+    secondary: "text-button-solid-secondary-icon",
+    tertiary: "text-button-solid-tertiary-icon",
+    positive: "text-button-solid-positive-icon",
+    warning: "text-button-solid-warning-icon",
+    negative: "text-button-solid-negative-icon"
+  }[color];
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "button",
+    {
+      onClick: disabled ? void 0 : onClick,
+      disabled: disabled || onClick === void 0,
+      className: (0, import_clsx.default)(
+        className,
+        {
+          "text-disabled-text bg-disabled-background": disabled,
+          [(0, import_clsx.default)(colorClasses, "hover:brightness-90")]: !disabled
+        },
+        ButtonSizePaddings[size]
+      ),
+      ...restProps,
+      children: [
+        startIcon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            className: (0, import_clsx.default)({
+              [iconColorClasses]: !disabled,
+              [`text-disabled-icon`]: disabled
+            }),
+            children: startIcon
+          }
+        ),
+        children,
+        endIcon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            className: (0, import_clsx.default)({
+              [iconColorClasses]: !disabled,
+              [`text-disabled-icon`]: disabled
+            }),
+            children: endIcon
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/hooks/useLanguage.tsx
+var import_react2 = require("react");
+
+// src/hooks/useLocalStorage.tsx
+var import_react = require("react");
+
+// src/hooks/useLanguage.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var DEFAULT_LANGUAGE = "en";
+var LanguageContext = (0, import_react2.createContext)({ language: DEFAULT_LANGUAGE, setLanguage: (v) => v });
+var useLanguage = () => (0, import_react2.useContext)(LanguageContext);
+
+// src/hooks/useTranslation.ts
+var useTranslation = (defaults, translationOverwrite = {}) => {
+  const { language: languageProp, translation: overwrite } = translationOverwrite;
+  const { language: inferredLanguage } = useLanguage();
+  const usedLanguage = languageProp ?? inferredLanguage;
+  let defaultValues = defaults[usedLanguage];
+  if (overwrite && overwrite[usedLanguage]) {
+    defaultValues = { ...defaultValues, ...overwrite[usedLanguage] };
+  }
+  return defaultValues;
+};
+
+// src/components/modals/Modal.tsx
+var import_react5 = require("react");
+var import_react_dom = __toESM(require("react-dom"));
+var import_lucide_react = require("lucide-react");
+var import_clsx3 = __toESM(require("clsx"));
+
+// src/hooks/useHoverState.ts
+var import_react3 = require("react");
+var defaultUseHoverStateProps = {
+  closingDelay: 200,
+  isDisabled: false
+};
+var useHoverState = (props = void 0) => {
+  const { closingDelay, isDisabled } = { ...defaultUseHoverStateProps, ...props };
+  const [isHovered, setIsHovered] = (0, import_react3.useState)(false);
+  const [timer, setTimer] = (0, import_react3.useState)();
+  const onMouseEnter = () => {
+    if (isDisabled) {
+      return;
+    }
+    clearTimeout(timer);
+    setIsHovered(true);
+  };
+  const onMouseLeave = () => {
+    if (isDisabled) {
+      return;
+    }
+    setTimer(setTimeout(() => {
+      setIsHovered(false);
+    }, closingDelay));
+  };
+  (0, import_react3.useEffect)(() => {
+    if (timer) {
+      return () => {
+        clearTimeout(timer);
+      };
+    }
+  });
+  (0, import_react3.useEffect)(() => {
+    if (timer) {
+      clearTimeout(timer);
+    }
+  }, [isDisabled]);
+  return {
+    isHovered,
+    setIsHovered,
+    handlers: { onMouseEnter, onMouseLeave }
+  };
+};
+
+// src/components/Tooltip.tsx
+var import_clsx2 = require("clsx");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Tooltip = ({
+  tooltip,
+  children,
+  animationDelay = 650,
+  tooltipClassName = "",
+  containerClassName = "",
+  position = "bottom",
+  zIndex = 10
+}) => {
+  const { isHovered, handlers } = useHoverState();
+  const positionClasses = {
+    top: `bottom-full left-1/2 -translate-x-1/2 mb-[6px]`,
+    bottom: `top-full left-1/2 -translate-x-1/2 mt-[6px]`,
+    left: `right-full top-1/2 -translate-y-1/2 mr-[6px]`,
+    right: `left-full top-1/2 -translate-y-1/2 ml-[6px]`
+  };
+  const triangleSize = 6;
+  const triangleClasses = {
+    top: `top-full left-1/2 -translate-x-1/2 border-t-gray-600 border-l-transparent border-r-transparent`,
+    bottom: `bottom-full left-1/2 -translate-x-1/2 border-b-gray-600 border-l-transparent border-r-transparent`,
+    left: `left-full top-1/2 -translate-y-1/2 border-l-gray-600 border-t-transparent border-b-transparent`,
+    right: `right-full top-1/2 -translate-y-1/2 border-r-gray-600 border-t-transparent border-b-transparent`
+  };
+  const triangleStyle = {
+    top: { borderWidth: `${triangleSize}px ${triangleSize}px 0 ${triangleSize}px` },
+    bottom: { borderWidth: `0 ${triangleSize}px ${triangleSize}px ${triangleSize}px` },
+    left: { borderWidth: `${triangleSize}px 0 ${triangleSize}px ${triangleSize}px` },
+    right: { borderWidth: `${triangleSize}px ${triangleSize}px ${triangleSize}px 0` }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      className: (0, import_clsx2.clsx)("relative inline-block", containerClassName),
+      ...handlers,
+      children: [
+        children,
+        isHovered && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          "div",
+          {
+            className: (0, import_clsx2.clsx)(`opacity-0 absolute text-black text-xs font-semibold text-gray-600 px-2 py-1 rounded whitespace-nowrap border-2 border-gray-600
+           animate-tooltip-fade-in shadow-lg bg-gray-100`, positionClasses[position], tooltipClassName),
+            style: { zIndex, animationDelay: animationDelay + "ms" },
+            children: [
+              tooltip,
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "div",
+                {
+                  className: (0, import_clsx2.clsx)(`absolute w-0 h-0`, triangleClasses[position]),
+                  style: { ...triangleStyle[position], zIndex }
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/components/modals/ModalRegister.tsx
+var import_react4 = require("react");
+
+// src/util/noop.ts
+var noop = () => void 0;
+
+// src/components/modals/ModalRegister.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var ModalContext = (0, import_react4.createContext)({
+  register: [],
+  addToRegister: noop,
+  removeFromRegister: noop
+});
+
+// src/components/modals/Modal.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var defaultModalHeaderTranslation = {
+  en: {
+    close: "Close"
+  },
+  de: {
+    close: "Schlie\xDFen"
+  }
+};
+var ModalHeader = ({
+  overwriteTranslation,
+  onCloseClick,
+  title,
+  titleText = "",
+  description,
+  descriptionText = ""
+}) => {
+  const translation = useTranslation(defaultModalHeaderTranslation, overwriteTranslation);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "col", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "row justify-between items-start gap-x-8", children: [
+      title ?? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: (0, import_clsx3.default)("textstyle-title-lg", {
+        "mb-1": description || descriptionText
+      }), children: titleText }),
+      !!onCloseClick && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Tooltip, { tooltip: translation.close, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { className: "row bg-gray-200 hover:bg-gray-300 rounded-md p-1", onClick: onCloseClick, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react.X, {}) }) })
+    ] }),
+    description ?? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "textstyle-description", children: descriptionText })
+  ] });
+};
+var modalRootName = "modal-root";
+var Modal = ({
+  children,
+  id,
+  isOpen,
+  onBackgroundClick,
+  backgroundClassName = "",
+  modalClassName = "",
+  containerClassName = "",
+  ...modalHeaderProps
+}) => {
+  const modalRoot = typeof window !== "undefined" ? document.getElementById(modalRootName) : null;
+  const {
+    register,
+    addToRegister,
+    removeFromRegister
+  } = (0, import_react5.useContext)(ModalContext);
+  if (!id) {
+    console.error("the id cannot be empty");
+  }
+  (0, import_react5.useEffect)(() => {
+    if (isOpen) {
+      addToRegister(id);
+    } else {
+      removeFromRegister(id);
+    }
+  }, [addToRegister, id, removeFromRegister, isOpen]);
+  if (modalRoot === null || !isOpen) return null;
+  const isLast = register.length < 1 || register[register.length - 1] === id;
+  const isSecondLast = register.length < 2 || register[register.length - 2] === id;
+  return import_react_dom.default.createPortal(
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: (0, import_clsx3.default)("fixed inset-0 overflow-y-auto z-[99]", containerClassName), id, children: [
+      isLast && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "div",
+        {
+          className: (0, import_clsx3.default)("fixed inset-0 h-screen w-screen", backgroundClassName, {
+            "bg-black/70": isLast && register.length === 1
+          }),
+          onClick: onBackgroundClick
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        "div",
+        {
+          className: (0, import_clsx3.default)("fixed left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 col p-4 bg-white text-black rounded-xl shadow-xl", modalClassName),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ModalHeader, { ...modalHeaderProps }),
+            children
+          ]
+        }
+      ),
+      !isLast && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "div",
+        {
+          className: (0, import_clsx3.default)("fixed inset-0 h-screen w-screen", backgroundClassName, {
+            "bg-black/70": isSecondLast && register.length > 1
+          })
+        }
+      )
+    ] }),
+    modalRoot,
+    id
+  );
+};
+
+// src/components/modals/DiscardChangesDialog.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var defaultDiscardChangesDialogTranslation = {
+  en: {
+    save: "Save",
+    cancel: "Cancel",
+    dontSave: "Don't save",
+    title: "Unsaved Changes",
+    description: "Do you want to save your changes?"
+  },
+  de: {
+    save: "Speichern",
+    cancel: "Abbrechen",
+    dontSave: "Nicht Speichern",
+    title: "Ungespeicherte \xC4nderungen",
+    description: "M\xF6chtest du die \xC4nderungen speichern?"
+  }
+};
+var DiscardChangesDialog = ({
+  overwriteTranslation,
+  children,
+  title,
+  description,
+  onCancel,
+  onSave,
+  onDontSave,
+  ...modalProps
+}) => {
+  const translation = useTranslation(defaultDiscardChangesDialogTranslation, overwriteTranslation);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    Modal,
+    {
+      title: title ?? translation.title,
+      description: description ?? translation.description,
+      ...modalProps,
+      children: [
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "row mt-3 gap-x-4 justify-end", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SolidButton, { color: "positive", onClick: onSave, children: translation.save }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SolidButton, { color: "negative", onClick: onDontSave, children: translation.dontSave }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SolidButton, { autoFocus: true, color: "primary", onClick: onCancel, children: translation.cancel })
+        ] })
+      ]
+    }
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DiscardChangesDialog
+});
+//# sourceMappingURL=DiscardChangesDialog.js.map

package/dist/components/modals/DiscardChangesDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/modals/DiscardChangesDialog.tsx","../../../src/components/Button.tsx","../../../src/hooks/useLanguage.tsx","../../../src/hooks/useLocalStorage.tsx","../../../src/hooks/useTranslation.ts","../../../src/components/modals/Modal.tsx","../../../src/hooks/useHoverState.ts","../../../src/components/Tooltip.tsx","../../../src/components/modals/ModalRegister.tsx","../../../src/util/noop.ts"],"sourcesContent":["import type { PropsWithChildren } from 'react'\nimport { SolidButton } from '../Button'\nimport type { PropsForTranslation } from '../../hooks/useTranslation'\nimport { useTranslation } from '../../hooks/useTranslation'\nimport { Modal, type ModalProps } from './Modal'\n\ntype DiscardChangesDialogTranslation = {\n  save: string,\n  cancel: string,\n  dontSave: string,\n  title: string,\n  description: string,\n}\n\nconst defaultDiscardChangesDialogTranslation = {\n  en: {\n    save: 'Save',\n    cancel: 'Cancel',\n    dontSave: 'Don\\'t save',\n    title: 'Unsaved Changes',\n    description: 'Do you want to save your changes?'\n  },\n  de: {\n    save: 'Speichern',\n    cancel: 'Abbrechen',\n    dontSave: 'Nicht Speichern',\n    title: 'Ungespeicherte Änderungen',\n    description: 'Möchtest du die Änderungen speichern?'\n  }\n}\n\ntype DiscardChangesDialogProps = ModalProps & {\n  isShowingDecline?: boolean,\n  requireAnswer?: boolean,\n  onCancel: () => void,\n  onSave: () => void,\n  onDontSave: () => void,\n}\n\nexport const DiscardChangesDialog = ({\n  overwriteTranslation,\n  children,\n  title,\n  description,\n  onCancel,\n  onSave,\n  onDontSave,\n  ...modalProps\n}: PropsForTranslation<DiscardChangesDialogTranslation, PropsWithChildren<DiscardChangesDialogProps>>) => {\n  const translation = useTranslation(defaultDiscardChangesDialogTranslation, overwriteTranslation)\n  return (\n    <Modal\n      title={title ?? translation.title}\n      description={description ?? translation.description}\n      {...modalProps}\n    >\n      {children}\n      <div className=\"row mt-3 gap-x-4 justify-end\">\n        <SolidButton color=\"positive\" onClick={onSave}>\n          {translation.save}\n        </SolidButton>\n        <SolidButton color=\"negative\" onClick={onDontSave}>\n          {translation.dontSave}\n        </SolidButton>\n        <SolidButton autoFocus color=\"primary\" onClick={onCancel}>\n          {translation.cancel}\n        </SolidButton>\n      </div>\n    </Modal>\n  )\n}\n","import type { PropsWithChildren, ButtonHTMLAttributes, ReactNode } from 'react'\nimport clsx from 'clsx'\n\nexport type SolidButtonColor = 'primary' | 'secondary' | 'tertiary' | 'positive' | 'warning'| 'negative'\nexport type OutlineButtonColor = 'primary'\nexport type TextButtonColor = 'negative' | 'neutral'\n\ntype ButtonSizes = 'small' | 'medium' | 'large'\n\n/**\n * The shard properties between all button types\n */\nexport type ButtonProps = PropsWithChildren<{\n  /**\n   * @default 'medium'\n   */\n  size?: ButtonSizes,\n}> & ButtonHTMLAttributes<Element>\n\nexport const ButtonSizePaddings: Record<ButtonSizes, string> = {\n  small: 'btn-sm',\n  medium: 'btn-md',\n  large: 'btn-lg'\n}\n\ntype ButtonWithIconsProps = ButtonProps & {\n  startIcon?: ReactNode,\n  endIcon?: ReactNode,\n}\n\nexport type SolidButtonProps = ButtonWithIconsProps & {\n  color?: SolidButtonColor,\n}\n\nexport type OutlineButtonProps = ButtonWithIconsProps & {\n  color?: OutlineButtonColor,\n}\n\nexport type TextButtonProps = ButtonWithIconsProps & {\n  color?: TextButtonColor,\n}\n\n/**\n * A button with a solid background and different sizes\n */\nconst SolidButton = ({\n                       children,\n                       disabled = false,\n                       color = 'primary',\n                       size = 'medium',\n                       startIcon,\n                       endIcon,\n                       onClick,\n                       className,\n                       ...restProps\n                     }: SolidButtonProps) => {\n  const colorClasses = {\n    primary: 'bg-button-solid-primary-background text-button-solid-primary-text',\n    secondary: 'bg-button-solid-secondary-background text-button-solid-secondary-text',\n    tertiary: 'bg-button-solid-tertiary-background text-button-solid-tertiary-text',\n    positive: 'bg-button-solid-positive-background text-button-solid-positive-text',\n    warning: 'bg-button-solid-warning-background text-button-solid-warning-text',\n    negative: 'bg-button-solid-negative-background text-button-solid-negative-text',\n  }[color]\n\n  const iconColorClasses = {\n    primary: 'text-button-solid-primary-icon',\n    secondary: 'text-button-solid-secondary-icon',\n    tertiary: 'text-button-solid-tertiary-icon',\n    positive: 'text-button-solid-positive-icon',\n    warning: 'text-button-solid-warning-icon',\n    negative: 'text-button-solid-negative-icon',\n  }[color]\n\n  return (\n    <button\n      onClick={disabled ? undefined : onClick}\n      disabled={disabled || onClick === undefined}\n      className={clsx(\n        className,\n        {\n          'text-disabled-text bg-disabled-background': disabled,\n          [clsx(colorClasses, 'hover:brightness-90')]: !disabled\n        },\n        ButtonSizePaddings[size]\n      )}\n      {...restProps}\n    >\n      {startIcon && (\n        <span\n          className={clsx({\n            [iconColorClasses]: !disabled,\n            [`text-disabled-icon`]: disabled\n          })}\n        >\n        {startIcon}\n      </span>\n      )}\n      {children}\n      {endIcon && (\n        <span\n          className={clsx({\n            [iconColorClasses]: !disabled,\n            [`text-disabled-icon`]: disabled\n          })}\n        >\n        {endIcon}\n      </span>\n      )}\n    </button>\n  )\n}\n\n/**\n * A button with an outline border and different sizes\n */\nconst OutlineButton = ({\n                         children,\n                         disabled = false,\n                         color = 'primary',\n                         size = 'medium',\n                         startIcon,\n                         endIcon,\n                         onClick,\n                         className,\n                         ...restProps\n                       }: OutlineButtonProps) => {\n  const colorClasses = {\n    primary: 'bg-transparent border-2 border-button-outline-primary-text text-button-outline-primary-text',\n  }[color]\n\n  const iconColorClasses = {\n    primary: 'text-button-outline-primary-icon',\n  }[color]\n  return (\n    <button\n      onClick={disabled ? undefined : onClick}\n      disabled={disabled || onClick === undefined}\n      className={clsx(\n        className, {\n          'text-disabled-text border-disabled-outline)': disabled,\n          [clsx(colorClasses, 'hover:brightness-80')]: !disabled,\n        },\n        ButtonSizePaddings[size]\n      )}\n      {...restProps}\n    >\n      {startIcon && (\n        <span\n          className={clsx({\n            [iconColorClasses]: !disabled,\n            [`text-disabled-icon`]: disabled\n          })}\n        >\n        {startIcon}\n      </span>\n      )}\n      {children}\n      {endIcon && (\n        <span\n          className={clsx({\n            [iconColorClasses]: !disabled,\n            [`text-disabled-icon`]: disabled\n          })}\n        >\n        {endIcon}\n      </span>\n      )}\n    </button>\n  )\n}\n\n/**\n * A text that is a button that can have different sizes\n */\nconst TextButton = ({\n                      children,\n                      disabled = false,\n                      color = 'neutral',\n                      size = 'medium',\n                      startIcon,\n                      endIcon,\n                      onClick,\n                      className,\n                      ...restProps\n                    }: TextButtonProps) => {\n  const colorClasses = {\n    negative: 'bg-transparent text-button-text-negative-text',\n    neutral: 'bg-transparent text-button-text-neutral-text',\n  }[color]\n\n  const iconColorClasses = {\n    negative: 'text-button-text-negative-icon',\n    neutral: 'text-button-text-neutral-icon',\n  }[color]\n  return (\n    <button\n      onClick={disabled ? undefined : onClick}\n      disabled={disabled || onClick === undefined}\n      className={clsx(\n        className, {\n          'text-disabled-text': disabled,\n          [clsx(colorClasses, 'hover:bg-button-text-hover-background rounded-full')]: !disabled,\n        },\n        ButtonSizePaddings[size]\n      )}\n      {...restProps}\n    >\n      {startIcon && (\n        <span\n          className={clsx({\n            [iconColorClasses]: !disabled,\n            [`text-disabled-icon`]: disabled\n          })}\n        >\n        {startIcon}\n      </span>\n      )}\n      {children}\n      {endIcon && (\n        <span\n          className={clsx({\n            [iconColorClasses]: !disabled,\n            [`text-disabled-icon`]: disabled\n          })}\n        >\n        {endIcon}\n      </span>\n      )}\n    </button>\n  )\n}\n\n// TODO Icon button\n\nexport { SolidButton, OutlineButton, TextButton }\n","import type { Dispatch, PropsWithChildren, SetStateAction } from 'react'\nimport { createContext, useContext, useEffect, useState } from 'react'\nimport useLocalStorage from './useLocalStorage'\n\nexport const languages = ['en', 'de'] as const\nexport type Languages = typeof languages[number]\nexport const languagesLocalNames: Record<Languages, string> = {\n  en: 'English',\n  de: 'Deutsch',\n}\n\nexport const DEFAULT_LANGUAGE = 'en'\n\nexport type LanguageContextValue = {\n  language: Languages,\n  setLanguage: Dispatch<SetStateAction<Languages>>,\n}\n\nexport const LanguageContext = createContext<LanguageContextValue>({ language: DEFAULT_LANGUAGE, setLanguage: (v) => v })\n\nexport const useLanguage = () => useContext(LanguageContext)\n\nexport const useLocale = (overWriteLanguage?: Languages) => {\n  const { language } = useLanguage()\n  const mapping: Record<Languages, string> = {\n    en: 'en-US',\n    de: 'de-DE'\n  }\n  return mapping[overWriteLanguage ?? language]\n}\n\ntype ProvideLanguageProps = {\n  initialLanguage?: Languages,\n}\n\nexport const ProvideLanguage = ({ initialLanguage, children }: PropsWithChildren<ProvideLanguageProps>) => {\n  const [language, setLanguage] = useState<Languages>(initialLanguage ?? DEFAULT_LANGUAGE)\n  const [storedLanguage, setStoredLanguage] = useLocalStorage<Languages>('language', initialLanguage ?? DEFAULT_LANGUAGE)\n\n  useEffect(() => {\n    if(language !== initialLanguage && initialLanguage){\n      console.warn('LanguageProvider initial state changed: Prefer using useLanguages\\'s setLanguage instead')\n      setLanguage(initialLanguage)\n    }\n  }, [initialLanguage]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  useEffect(() => {\n    // TODO set locale of html tag here as well\n    setStoredLanguage(language)\n  }, [language, setStoredLanguage])\n\n  useEffect(() => {\n    if (storedLanguage !== null) {\n      setLanguage(storedLanguage)\n      return\n    }\n\n    const languagesToTestAgainst = Object.values(languages)\n\n    const matchingBrowserLanguages = window.navigator.languages\n      .map(language => languagesToTestAgainst.find((test) => language === test || language.split('-')[0] === test))\n      .filter(entry => entry !== undefined)\n\n    if (matchingBrowserLanguages.length === 0) return\n\n    const firstMatch = matchingBrowserLanguages[0] as Languages\n    setLanguage(firstMatch)\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  return (\n    <LanguageContext.Provider value={{\n      language,\n      setLanguage\n    }}>\n      {children}\n    </LanguageContext.Provider>\n  )\n}\n","import type { Dispatch, SetStateAction } from 'react'\nimport { useCallback, useEffect, useState } from 'react'\nimport { LocalStorageService } from '../util/storage'\n\ntype SetValue<T> = Dispatch<SetStateAction<T>>\nconst useLocalStorage = <T, >(key: string, initValue: T): [T, SetValue<T>] => {\n  const get = useCallback((): T => {\n    if (typeof window === 'undefined') {\n      return initValue\n    }\n    const storageService = new LocalStorageService()\n    const value = storageService.get<T>(key)\n    return value || initValue\n  }, [initValue, key])\n\n  const [storedValue, setStoredValue] = useState<T>(get)\n\n  const setValue: SetValue<T> = useCallback(value => {\n    const newValue = value instanceof Function ? value(storedValue) : value\n    const storageService = new LocalStorageService()\n    storageService.set(key, value)\n\n    setStoredValue(newValue)\n  }, [storedValue, setStoredValue, key])\n\n  useEffect(() => {\n    setStoredValue(get())\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  return [storedValue, setValue]\n}\n\nexport default useLocalStorage\n","import type { Languages } from './useLanguage'\nimport { useLanguage } from './useLanguage'\n\nexport type Translation<T> = Record<Languages, T>\n\ntype OverwriteTranslationType<Translation extends Record<string, unknown>> = {\n  language?: Languages,\n  translation?: Partial<Record<Languages, Partial<Translation>>>,\n}\n\n/**\n * Adds the `language` prop to the component props.\n *\n * @param Translation the type of the translation object\n *\n * @param Props the type of the component props, defaults to `Record<string, never>`,\n *              if you don't expect any other props other than `language` and get an\n *              error when using your component (because it uses `forwardRef` etc.)\n *              you can try out `Record<string, unknown>`, this might resolve your\n *              problem as `SomeType & never` is still `never` but `SomeType & unknown`\n *              is `SomeType` which means that adding back props (like `ref` etc.)\n *              works properly\n */\nexport type PropsForTranslation<\n  Translation extends Record<string, unknown>,\n  Props = Record<string, never>\n> = Props & {\n  overwriteTranslation?: OverwriteTranslationType<Translation>,\n};\n\nexport const useTranslation = <Translation extends Record<string, unknown>>(\n  defaults: Record<Languages, Translation>,\n  translationOverwrite: OverwriteTranslationType<Translation> = {}\n) : Translation => {\n  const { language: languageProp, translation: overwrite } = translationOverwrite\n  const { language: inferredLanguage } = useLanguage()\n  const usedLanguage = languageProp ?? inferredLanguage\n  let defaultValues: Translation = defaults[usedLanguage]\n  if (overwrite && overwrite[usedLanguage]) {\n    defaultValues = { ...defaultValues, ...overwrite[usedLanguage] }\n  }\n  return defaultValues\n}\n","import { useContext, useEffect, type MouseEventHandler, type PropsWithChildren, type ReactNode } from 'react'\nimport ReactDOM from 'react-dom'\nimport { X } from 'lucide-react'\nimport clsx from 'clsx'\nimport type { Languages } from '../../hooks/useLanguage'\nimport type { PropsForTranslation } from '../../hooks/useTranslation'\nimport { useTranslation } from '../../hooks/useTranslation'\nimport { Tooltip } from '../Tooltip'\nimport { ModalContext } from './ModalRegister'\n\ntype ModalHeaderTranslation = {\n  close: string,\n}\n\nconst defaultModalHeaderTranslation: Record<Languages, ModalHeaderTranslation> = {\n  en: {\n    close: 'Close'\n  },\n  de: {\n    close: 'Schließen'\n  }\n}\n\nexport type ModalHeaderProps = {\n  onCloseClick?: () => void,\n  /** The title of the Modal. If you want to only set the text use `titleText` instead */\n  title?: ReactNode,\n  /** The title text of the Modal. If you want to set a custom title use `title` instead */\n  titleText?: string,\n  /** The description of the Modal. If you want to only set the text use `descriptionText` instead */\n  description?: ReactNode,\n  /** The description text of the Modal. If you want to set a custom description use `description` instead */\n  descriptionText?: string,\n}\n\n/**\n * A default Header to be used by modals to have a uniform design\n */\nexport const ModalHeader = ({\n                              overwriteTranslation,\n                              onCloseClick,\n                              title,\n                              titleText = '',\n                              description,\n                              descriptionText = ''\n                            }: PropsForTranslation<ModalHeaderTranslation, ModalHeaderProps>) => {\n  const translation = useTranslation(defaultModalHeaderTranslation, overwriteTranslation)\n  return (\n    <div className=\"col\">\n      <div className=\"row justify-between items-start gap-x-8\">\n        {title ?? (\n          <span className={clsx('textstyle-title-lg', {\n            'mb-1': description || descriptionText,\n          })}>\n            {titleText}\n          </span>\n        )}\n        {!!onCloseClick && (\n          <Tooltip tooltip={translation.close}>\n            <button className=\"row bg-gray-200 hover:bg-gray-300 rounded-md p-1\" onClick={onCloseClick}>\n              <X/>\n            </button>\n          </Tooltip>\n        )}\n      </div>\n      {description ?? (<span className=\"textstyle-description\">{descriptionText}</span>)}\n    </div>\n  )\n}\n\nexport const modalRootName = 'modal-root'\n\nexport type ModalProps = {\n  id: string,\n  isOpen: boolean,\n  onBackgroundClick?: MouseEventHandler<HTMLDivElement>,\n  backgroundClassName?: string,\n  modalClassName?: string,\n  containerClassName?: string,\n} & ModalHeaderProps\n\n/**\n * A Generic Modal Window\n *\n * The state needs to be managed by the parent of this component\n *\n * DO NOT Conditionally render this always use the isOpen to ensure that the ModalRegister is working properly\n */\nexport const Modal = ({\n                        children,\n                        id,\n                        isOpen,\n                        onBackgroundClick,\n                        backgroundClassName = '',\n                        modalClassName = '',\n                        containerClassName = '',\n                        ...modalHeaderProps\n                      }: PropsWithChildren<ModalProps>) => {\n  const modalRoot = typeof window !== 'undefined' ? document.getElementById(modalRootName) : null\n  const {\n    register,\n    addToRegister,\n    removeFromRegister\n  } = useContext(ModalContext)\n\n  if (!id) {\n    console.error('the id cannot be empty')\n  }\n\n  useEffect(() => {\n    if (isOpen) {\n      addToRegister(id)\n    } else {\n      removeFromRegister(id)\n    }\n  }, [addToRegister, id, removeFromRegister, isOpen])\n\n  if (modalRoot === null || !isOpen) return null\n\n  const isLast = register.length < 1 || register[register.length - 1] === id\n  const isSecondLast = register.length < 2 || register[register.length - 2] === id\n\n  return ReactDOM.createPortal(\n    <div className={clsx('fixed inset-0 overflow-y-auto z-[99]', containerClassName)} id={id}>\n      {isLast && (\n        <div\n          className={clsx('fixed inset-0 h-screen w-screen', backgroundClassName, {\n            'bg-black/70': isLast && register.length === 1,\n          })}\n          onClick={onBackgroundClick}\n        />\n      )}\n      <div\n        className={clsx('fixed left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 col p-4 bg-white text-black rounded-xl shadow-xl', modalClassName)}>\n        <ModalHeader {...modalHeaderProps} />\n        {children}\n      </div>\n      {!isLast && (\n        <div\n          className={clsx('fixed inset-0 h-screen w-screen', backgroundClassName, {\n            'bg-black/70': isSecondLast && register.length > 1,\n          })}\n        />\n      )}\n    </div>,\n    modalRoot,\n    id\n  )\n}\n","import type { Dispatch, SetStateAction } from 'react'\nimport { useEffect, useState } from 'react'\n\ntype UseHoverStateProps = {\n  /**\n   * The delay after which the menu is closed in milliseconds\n   *\n   * default: 200ms\n   */\n  closingDelay: number,\n  /**\n   * Whether the hover state management should be disabled\n   *\n   * default: false\n   */\n  isDisabled: boolean,\n}\n\ntype UseHoverStateReturnType = {\n  /**\n   * Whether the element is hovered\n   */\n  isHovered: boolean,\n  /**\n   * Function to change the current hover status\n   */\n  setIsHovered: Dispatch<SetStateAction<boolean>>,\n  /**\n   * Handlers to pass on to the component that should be hovered\n   */\n  handlers: {\n    onMouseEnter: () => void,\n    onMouseLeave: () => void,\n  },\n}\n\nconst defaultUseHoverStateProps: UseHoverStateProps = {\n  closingDelay: 200,\n  isDisabled: false,\n}\n\n/**\n * @param props See UseHoverStateProps\n *\n * A react hook for managing the hover state of a component. The handlers provided should be\n * forwarded to the component which should be hovered over\n */\nexport const useHoverState = (props: Partial<UseHoverStateProps> | undefined = undefined): UseHoverStateReturnType => {\n  const { closingDelay, isDisabled } = { ...defaultUseHoverStateProps, ...props }\n\n  const [isHovered, setIsHovered] = useState(false)\n  const [timer, setTimer] = useState<NodeJS.Timeout>()\n\n  const onMouseEnter = () => {\n    if (isDisabled) {\n      return\n    }\n    clearTimeout(timer)\n    setIsHovered(true)\n  }\n\n  const onMouseLeave = () => {\n    if (isDisabled) {\n      return\n    }\n    setTimer(setTimeout(() => {\n      setIsHovered(false)\n    }, closingDelay))\n  }\n\n  useEffect(() => {\n    if (timer) {\n      return () => {\n        clearTimeout(timer)\n      }\n    }\n  })\n\n  useEffect(() => {\n    if (timer) {\n      clearTimeout(timer)\n    }\n  }, [isDisabled]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  return {\n    isHovered, setIsHovered, handlers: { onMouseEnter, onMouseLeave }\n  }\n}\n","import type { CSSProperties, PropsWithChildren, ReactNode } from 'react'\nimport { useHoverState } from '../hooks/useHoverState'\nimport { clsx } from 'clsx'\n\ntype Position = 'top' | 'bottom' | 'left' | 'right'\n\nexport type TooltipProps = PropsWithChildren<{\n  tooltip: string | ReactNode,\n  /**\n   * Number of milliseconds until the tooltip appears\n   *\n   * defaults to 1000ms\n   */\n  animationDelay?: number,\n  /**\n   * Class names of additional styling properties for the tooltip\n   */\n  tooltipClassName?: string,\n  /**\n   * Class names of additional styling properties for the container from which the tooltip will be created\n   */\n  containerClassName?: string,\n  position?: Position,\n  zIndex?: number,\n}>\n\n/**\n * A Component for showing a tooltip when hovering over Content\n * @param tooltip The tooltip to show can be a text or any ReactNode\n * @param children The Content for which the tooltip should be created\n * @param animationDelay The delay before the tooltip appears\n * @param tooltipClassName Additional ClassNames for the Container of the tooltip\n * @param containerClassName Additional ClassNames for the Container holding the content\n * @param position The direction of the tooltip relative to the Container\n * @param zIndex The z Index of the tooltip (you may require this when stacking modals)\n * @constructor\n */\nexport const Tooltip = ({\n                          tooltip,\n                          children,\n                          animationDelay = 650,\n                          tooltipClassName = '',\n                          containerClassName = '',\n                          position = 'bottom',\n                          zIndex = 10,\n                        }: TooltipProps) => {\n  const { isHovered, handlers } = useHoverState()\n\n  const positionClasses = {\n    top: `bottom-full left-1/2 -translate-x-1/2 mb-[6px]`,\n    bottom: `top-full left-1/2 -translate-x-1/2 mt-[6px]`,\n    left: `right-full top-1/2 -translate-y-1/2 mr-[6px]`,\n    right: `left-full top-1/2 -translate-y-1/2 ml-[6px]`\n  }\n\n  const triangleSize = 6\n  const triangleClasses = {\n    top: `top-full left-1/2 -translate-x-1/2 border-t-gray-600 border-l-transparent border-r-transparent`,\n    bottom: `bottom-full left-1/2 -translate-x-1/2 border-b-gray-600 border-l-transparent border-r-transparent`,\n    left: `left-full top-1/2 -translate-y-1/2 border-l-gray-600 border-t-transparent border-b-transparent`,\n    right: `right-full top-1/2 -translate-y-1/2 border-r-gray-600 border-t-transparent border-b-transparent`\n  }\n\n  const triangleStyle: Record<Position, CSSProperties> = {\n    top: { borderWidth: `${triangleSize}px ${triangleSize}px 0 ${triangleSize}px` },\n    bottom: { borderWidth: `0 ${triangleSize}px ${triangleSize}px ${triangleSize}px` },\n    left: { borderWidth: `${triangleSize}px 0 ${triangleSize}px ${triangleSize}px` },\n    right: { borderWidth: `${triangleSize}px ${triangleSize}px ${triangleSize}px 0` }\n  }\n\n  return (\n    <div\n      className={clsx('relative inline-block', containerClassName)}\n      {...handlers}\n    >\n      {children}\n      {isHovered && (\n        <div\n          className={clsx(`opacity-0 absolute text-black text-xs font-semibold text-gray-600 px-2 py-1 rounded whitespace-nowrap border-2 border-gray-600\n           animate-tooltip-fade-in shadow-lg bg-gray-100`, positionClasses[position], tooltipClassName)}\n          style={{ zIndex, animationDelay: animationDelay + 'ms' }}\n        >\n          {tooltip}\n          <div\n            className={clsx(`absolute w-0 h-0`, triangleClasses[position])}\n            style={{ ...triangleStyle[position], zIndex }}\n           />\n        </div>\n      )}\n    </div>\n  )\n}\n","import type { PropsWithChildren } from 'react'\nimport { createContext, useState } from 'react'\nimport { noop } from '../../util/noop'\n\nexport type ModalContextType = {\n  register: string[],\n  addToRegister: (id: string) => void,\n  removeFromRegister: (id: string) => void,\n}\nexport const ModalContext = createContext<ModalContextType>({\n  register: [],\n  addToRegister: noop,\n  removeFromRegister: noop,\n})\n\n/**\n * A Simple Wrapper for the context\n */\nexport const ModalRegister = ({\n  children\n}: PropsWithChildren) => {\n  const [register, setRegister] = useState<string[]>([])\n\n  const inRegister = (id: string) => {\n    return !!register.find(value => value === id)\n  }\n\n  const addToRegister = (id: string) => {\n    if (!inRegister(id)) {\n      setRegister([...register, id])\n    }\n  }\n\n  const removeFromRegister = (id: string) => {\n    if (inRegister(id)) {\n      setRegister(register.filter(value => value !== id))\n    }\n  }\n\n  return (\n    <ModalContext.Provider value={{ register, addToRegister, removeFromRegister }}>\n      {children}\n    </ModalContext.Provider>\n  )\n}\n","export const noop = () => undefined\n"],"mappings":"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","names":["clsx","import_react","import_jsx_runtime","import_react","import_clsx","import_react","import_clsx","import_jsx_runtime","import_react","import_jsx_runtime","import_jsx_runtime","clsx","ReactDOM","import_jsx_runtime"]}