@helpwave/hightide 0.1.25 → 0.1.27

package/dist/components/dialog/index.mjs

@@ -0,0 +1,2067 @@
+// src/components/user-action/Button.tsx
+import { forwardRef } from "react";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ButtonColorUtil = {
+  solid: ["primary", "secondary", "tertiary", "positive", "warning", "negative", "neutral"],
+  text: ["primary", "negative", "neutral"],
+  outline: ["primary"]
+};
+var IconButtonUtil = {
+  icon: [...ButtonColorUtil.solid, "transparent"]
+};
+var paddingMapping = {
+  small: "btn-sm",
+  medium: "btn-md",
+  large: "btn-lg"
+};
+var iconPaddingMapping = {
+  tiny: "icon-btn-xs",
+  small: "icon-btn-sm",
+  medium: "icon-btn-md",
+  large: "icon-btn-lg"
+};
+var ButtonUtil = {
+  paddingMapping,
+  iconPaddingMapping
+};
+var SolidButton = forwardRef(function SolidButton2({
+  children,
+  color = "primary",
+  size = "medium",
+  startIcon,
+  endIcon,
+  onClick,
+  className,
+  ...restProps
+}, ref) {
+  const colorClasses = {
+    primary: "not-disabled:bg-button-solid-primary-background not-disabled:text-button-solid-primary-text",
+    secondary: "not-disabled:bg-button-solid-secondary-background not-disabled:text-button-solid-secondary-text",
+    tertiary: "not-disabled:bg-button-solid-tertiary-background not-disabled:text-button-solid-tertiary-text",
+    positive: "not-disabled:bg-button-solid-positive-background not-disabled:text-button-solid-positive-text",
+    warning: "not-disabled:bg-button-solid-warning-background not-disabled:text-button-solid-warning-text",
+    negative: "not-disabled:bg-button-solid-negative-background not-disabled:text-button-solid-negative-text",
+    neutral: "not-disabled:bg-button-solid-neutral-background not-disabled:text-button-solid-neutral-text"
+  }[color];
+  const iconColorClasses = {
+    primary: "not-group-disabled:text-button-solid-primary-icon",
+    secondary: "not-group-disabled:text-button-solid-secondary-icon",
+    tertiary: "not-group-disabled:text-button-solid-tertiary-icon",
+    positive: "not-group-disabled:text-button-solid-positive-icon",
+    warning: "not-group-disabled:text-button-solid-warning-icon",
+    negative: "not-group-disabled:text-button-solid-negative-icon",
+    neutral: "not-group-disabled:text-button-solid-neutral-icon"
+  }[color];
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref,
+      onClick,
+      className: clsx(
+        "group font-semibold",
+        colorClasses,
+        "not-disabled:hover:brightness-90",
+        "disabled:text-disabled-text disabled:bg-disabled-background",
+        ButtonUtil.paddingMapping[size],
+        className
+      ),
+      ...restProps,
+      children: [
+        startIcon && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: clsx(
+              iconColorClasses,
+              "group-disabled:text-disabled-icon"
+            ),
+            children: startIcon
+          }
+        ),
+        children,
+        endIcon && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: clsx(
+              iconColorClasses,
+              "group-disabled:text-disabled-icon"
+            ),
+            children: endIcon
+          }
+        )
+      ]
+    }
+  );
+});
+var IconButton = forwardRef(function IconButton2({
+  children,
+  color = "primary",
+  size = "medium",
+  className,
+  ...restProps
+}, ref) {
+  const colorClasses = {
+    primary: "not-disabled:bg-button-solid-primary-background not-disabled:text-button-solid-primary-text",
+    secondary: "not-disabled:bg-button-solid-secondary-background not-disabled:text-button-solid-secondary-text",
+    tertiary: "not-disabled:bg-button-solid-tertiary-background not-disabled:text-button-solid-tertiary-text",
+    positive: "not-disabled:bg-button-solid-positive-background not-disabled:text-button-solid-positive-text",
+    warning: "not-disabled:bg-button-solid-warning-background not-disabled:text-button-solid-warning-text",
+    negative: "not-disabled:bg-button-solid-negative-background not-disabled:text-button-solid-negative-text",
+    neutral: "not-disabled:bg-button-solid-neutral-background not-disabled:text-button-solid-neutral-text",
+    transparent: "not-disabled:bg-transparent"
+  }[color];
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      className: clsx(
+        colorClasses,
+        "not-disabled:hover:brightness-90",
+        "disabled:text-disabled-text",
+        {
+          "disabled:bg-disabled-background": color !== "transparent",
+          "disabled:opacity-70": color === "transparent",
+          "not-disabled:hover:bg-button-text-hover-background": color === "transparent"
+        },
+        ButtonUtil.iconPaddingMapping[size],
+        className
+      ),
+      ...restProps,
+      children
+    }
+  );
+});
+
+// src/localization/LanguageProvider.tsx
+import { createContext, useContext, useEffect, useState as useState2 } from "react";
+
+// src/hooks/useLocalStorage.ts
+import { useCallback, useState } from "react";
+
+// src/localization/util.ts
+var languages = ["en", "de"];
+var languagesLocalNames = {
+  en: "English",
+  de: "Deutsch"
+};
+var DEFAULT_LANGUAGE = "en";
+var LanguageUtil = {
+  languages,
+  DEFAULT_LANGUAGE,
+  languagesLocalNames
+};
+
+// src/localization/LanguageProvider.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var LanguageContext = createContext({
+  language: LanguageUtil.DEFAULT_LANGUAGE,
+  setLanguage: (v) => v
+});
+var useLanguage = () => useContext(LanguageContext);
+
+// src/localization/useTranslation.ts
+var TranslationPluralCount = {
+  zero: 0,
+  one: 1,
+  two: 2,
+  few: 3,
+  many: 11,
+  other: -1
+};
+var useTranslation = (translations, overwriteTranslation = {}) => {
+  const { language: languageProp, translation: overwrite } = overwriteTranslation;
+  const { language: inferredLanguage } = useLanguage();
+  const usedLanguage = languageProp ?? inferredLanguage;
+  const usedTranslations = [...translations];
+  if (overwrite) {
+    usedTranslations.push(overwrite);
+  }
+  return (key, options) => {
+    const { count, replacements } = { ...{ count: 0, replacements: {} }, ...options };
+    try {
+      for (let i = translations.length - 1; i >= 0; i--) {
+        const translation = translations[i];
+        const localizedTranslation = translation[usedLanguage];
+        if (!localizedTranslation) {
+          continue;
+        }
+        const value = localizedTranslation[key];
+        if (!value) {
+          continue;
+        }
+        let forProcessing;
+        if (typeof value !== "string") {
+          if (count === TranslationPluralCount.zero && value?.zero) {
+            forProcessing = value.zero;
+          } else if (count === TranslationPluralCount.one && value?.one) {
+            forProcessing = value.one;
+          } else if (count === TranslationPluralCount.two && value?.two) {
+            forProcessing = value.two;
+          } else if (TranslationPluralCount.few <= count && count < TranslationPluralCount.many && value?.few) {
+            forProcessing = value.few;
+          } else if (count > TranslationPluralCount.many && value?.many) {
+            forProcessing = value.many;
+          } else {
+            forProcessing = value.other;
+          }
+        } else {
+          forProcessing = value;
+        }
+        forProcessing = forProcessing.replace(/\{\{(\w+)}}/g, (_, placeholder) => {
+          return replacements[placeholder] ?? `{{key:${placeholder}}}`;
+        });
+        return forProcessing;
+      }
+    } catch (e) {
+      console.error(e);
+    }
+    return `{{${usedLanguage}:${key}}}`;
+  };
+};
+
+// src/components/dialog/ConfirmDialog.tsx
+import clsx4 from "clsx";
+
+// src/components/dialog/Dialog.tsx
+import { useRef as useRef3 } from "react";
+import clsx3 from "clsx";
+import { X } from "lucide-react";
+
+// src/localization/defaults/form.ts
+var formTranslation = {
+  en: {
+    add: "Add",
+    all: "All",
+    apply: "Apply",
+    back: "Back",
+    cancel: "Cancel",
+    change: "Change",
+    clear: "Clear",
+    click: "Click",
+    clickToCopy: "Click to Copy",
+    close: "Close",
+    confirm: "Confirm",
+    copy: "Copy",
+    copied: "Copied",
+    create: "Create",
+    decline: "Decline",
+    delete: "Delete",
+    discard: "Discard",
+    discardChanges: "Discard Changes",
+    done: "Done",
+    edit: "Edit",
+    enterText: "Enter text here",
+    error: "Error",
+    exit: "Exit",
+    fieldRequiredError: "This field is required.",
+    invalidEmailError: "Please enter a valid email address.",
+    less: "Less",
+    loading: "Loading",
+    maxLengthError: "Maximum length exceeded.",
+    minLengthError: "Minimum length not met.",
+    more: "More",
+    next: "Next",
+    no: "No",
+    none: "None",
+    nothingFound: "Nothing found",
+    of: "of",
+    optional: "Optional",
+    pleaseWait: "Please wait...",
+    previous: "Previous",
+    remove: "Remove",
+    required: "Required",
+    reset: "Reset",
+    save: "Save",
+    saved: "Saved",
+    search: "Search",
+    select: "Select",
+    selectOption: "Select an option",
+    show: "Show",
+    showMore: "Show more",
+    showLess: "Show less",
+    submit: "Submit",
+    success: "Success",
+    update: "Update",
+    unsavedChanges: "Unsaved Changes",
+    unsavedChangesSaveQuestion: "Do you want to save your changes?",
+    yes: "Yes"
+  },
+  de: {
+    add: "Hinzuf\xFCgen",
+    all: "Alle",
+    apply: "Anwenden",
+    back: "Zur\xFCck",
+    cancel: "Abbrechen",
+    change: "\xC4ndern",
+    clear: "L\xF6schen",
+    click: "Klicken",
+    clickToCopy: "Zum kopieren klicken",
+    close: "Schlie\xDFen",
+    confirm: "Best\xE4tigen",
+    copy: "Kopieren",
+    copied: "Kopiert",
+    create: "Erstellen",
+    decline: "Ablehnen",
+    delete: "L\xF6schen",
+    discard: "Verwerfen",
+    discardChanges: "\xC4nderungen Verwerfen",
+    done: "Fertig",
+    edit: "Bearbeiten",
+    enterText: "Text hier eingeben",
+    error: "Fehler",
+    exit: "Beenden",
+    fieldRequiredError: "Dieses Feld ist erforderlich.",
+    invalidEmailError: "Bitte geben Sie eine g\xFCltige E-Mail-Adresse ein.",
+    less: "Weniger",
+    loading: "L\xE4dt",
+    maxLengthError: "Maximale L\xE4nge \xFCberschritten.",
+    minLengthError: "Mindestl\xE4nge nicht erreicht.",
+    more: "Mehr",
+    next: "Weiter",
+    no: "Nein",
+    none: "Nichts",
+    nothingFound: "Nichts gefunden",
+    of: "von",
+    optional: "Optional",
+    pleaseWait: "Bitte warten...",
+    previous: "Vorherige",
+    remove: "Entfernen",
+    required: "Erforderlich",
+    reset: "Zur\xFCcksetzen",
+    save: "Speichern",
+    saved: "Gespeichert",
+    search: "Suche",
+    select: "Select",
+    selectOption: "Option ausw\xE4hlen",
+    show: "Anzeigen",
+    showMore: "Mehr anzeigen",
+    showLess: "Weniger anzeigen",
+    submit: "Abschicken",
+    success: "Erfolg",
+    update: "Update",
+    unsavedChanges: "Ungespeicherte \xC4nderungen",
+    unsavedChangesSaveQuestion: "M\xF6chtest du die \xC4nderungen speichern?",
+    yes: "Ja"
+  }
+};
+
+// src/components/layout/FloatingContainer.tsx
+import { forwardRef as forwardRef2, useImperativeHandle, useRef } from "react";
+import { createPortal } from "react-dom";
+import { clsx as clsx2 } from "clsx";
+
+// src/hooks/useFloatingElement.ts
+import { useCallback as useCallback2, useEffect as useEffect3, useState as useState4 } from "react";
+
+// src/utils/math.ts
+var clamp = (value, range = [0, 1]) => {
+  const [min, max] = range;
+  return Math.min(Math.max(value, min), max);
+};
+
+// src/hooks/focus/useIsMounted.ts
+import { useEffect as useEffect2, useLayoutEffect, useState as useState3 } from "react";
+var isClient = typeof window !== "undefined" && typeof document !== "undefined";
+var useIsomorphicEffect = isClient ? useLayoutEffect : useEffect2;
+var useIsMounted = () => {
+  const [isMounted, setIsMounted] = useState3(false);
+  useIsomorphicEffect(() => {
+    setIsMounted(true);
+    return () => {
+      setIsMounted(false);
+    };
+  }, []);
+  return isMounted;
+};
+
+// src/hooks/useFloatingElement.ts
+function calculatePosition({
+  windowRect,
+  containerRect,
+  anchorRect,
+  options
+}) {
+  const { verticalAlignment, horizontalAlignment, gap, screenPadding } = options;
+  const windowWidth = windowRect.width;
+  const windowHeight = windowRect.height;
+  const maxWidth = windowWidth - 2 * screenPadding;
+  const maxHeight = windowHeight - 2 * screenPadding;
+  const width = Math.min(containerRect.width, maxWidth);
+  const height = Math.min(containerRect.height, maxHeight);
+  const leftSuggestion = {
+    beforeStart: anchorRect.left - width - gap,
+    afterStart: anchorRect.left,
+    center: anchorRect.left + anchorRect.width / 2 - width / 2,
+    beforeEnd: anchorRect.right - width,
+    afterEnd: anchorRect.right + gap
+  }[horizontalAlignment];
+  const topSuggestion = {
+    beforeStart: anchorRect.top - height - gap,
+    afterStart: anchorRect.top,
+    center: anchorRect.top + anchorRect.height / 2 - height / 2,
+    beforeEnd: anchorRect.bottom - height,
+    afterEnd: anchorRect.bottom + gap
+  }[verticalAlignment];
+  const left = clamp(leftSuggestion, [
+    screenPadding,
+    windowWidth - screenPadding - width
+  ]);
+  const top = clamp(topSuggestion, [
+    screenPadding,
+    windowHeight - screenPadding - height
+  ]);
+  return {
+    left,
+    top,
+    maxWidth,
+    maxHeight
+  };
+}
+function useFloatingElement({
+  active = true,
+  windowRef,
+  anchorRef,
+  containerRef,
+  isPolling = false,
+  pollingInterval = 100,
+  verticalAlignment = "afterEnd",
+  horizontalAlignment = "afterStart",
+  screenPadding = 16,
+  gap = 4
+}) {
+  const [style, setStyle] = useState4();
+  const isMounted = useIsMounted();
+  const calculate = useCallback2(() => {
+    const containerRect = containerRef.current.getBoundingClientRect();
+    const windowRect = windowRef?.current.getBoundingClientRect() ?? {
+      top: 0,
+      bottom: window.innerHeight,
+      left: 0,
+      right: window.innerWidth,
+      width: window.innerWidth,
+      height: window.innerHeight
+    };
+    const anchorElement = anchorRef?.current;
+    if (anchorRef && !anchorElement) {
+      console.warn("FloatingContainer anchor provided, but its value is undefined");
+    }
+    const anchorRect = anchorElement?.getBoundingClientRect() ?? windowRect;
+    const calculateProps = {
+      windowRect,
+      anchorRect,
+      containerRect,
+      options: {
+        horizontalAlignment,
+        verticalAlignment,
+        screenPadding,
+        gap
+      }
+    };
+    setStyle(calculatePosition(calculateProps));
+  }, [anchorRef, containerRef, gap, horizontalAlignment, screenPadding, verticalAlignment, windowRef]);
+  const height = containerRef.current?.getBoundingClientRect().height;
+  const width = containerRef.current?.getBoundingClientRect().width;
+  useEffect3(() => {
+    if (active && isMounted) {
+      calculate();
+    } else {
+      setStyle(void 0);
+    }
+  }, [calculate, active, isMounted, height, width]);
+  useEffect3(() => {
+    window.addEventListener("resize", calculate);
+    let timeout;
+    if (isPolling) {
+      timeout = setInterval(calculate, pollingInterval);
+    }
+    return () => {
+      window.removeEventListener("resize", calculate);
+      if (timeout) {
+        clearInterval(timeout);
+      }
+    };
+  }, [calculate, isPolling, pollingInterval]);
+  return style;
+}
+
+// src/components/layout/FloatingContainer.tsx
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var FloatingContainer = forwardRef2(function FloatingContainer2({
+  children,
+  backgroundOverlay,
+  anchor,
+  isPolling = false,
+  pollingInterval = 100,
+  verticalAlignment = "afterEnd",
+  horizontalAlignment = "afterStart",
+  screenPadding = 16,
+  gap = 4,
+  ...props
+}, forwardRef6) {
+  const innerRef = useRef(null);
+  useImperativeHandle(forwardRef6, () => innerRef.current);
+  const position = useFloatingElement({
+    active: !props.hidden,
+    containerRef: innerRef,
+    anchorRef: anchor,
+    isPolling,
+    pollingInterval,
+    verticalAlignment,
+    horizontalAlignment,
+    gap,
+    screenPadding
+  });
+  return createPortal(
+    /* @__PURE__ */ jsxs2(Fragment, { children: [
+      backgroundOverlay,
+      /* @__PURE__ */ jsx3(
+        "div",
+        {
+          ...props,
+          ref: innerRef,
+          style: {
+            position: "fixed",
+            overflow: "hidden",
+            opacity: position ? void 0 : 0,
+            // hide when position calculation isn't done yet
+            transition: position ? `top ${pollingInterval}ms linear, left ${pollingInterval}ms linear` : void 0,
+            ...position,
+            ...props.style
+          },
+          className: clsx2("motion-safe:duration-100 motion-reduce:duration-0", props.className),
+          children
+        }
+      )
+    ] }),
+    document.body
+  );
+});
+
+// src/hooks/focus/useFocusTrap.ts
+import { useCallback as useCallback3, useEffect as useEffect4, useId, useRef as useRef2, useState as useState5 } from "react";
+var createFocusGuard = () => {
+  const div = document.createElement("div");
+  Object.assign(div.style, {
+    opacity: "0",
+    outline: "none",
+    boxShadow: "none",
+    position: "fixed",
+    pointerEvents: "none",
+    touchAction: "none"
+  });
+  div.tabIndex = 0;
+  div.setAttribute("data-hw-focus-guard", "");
+  document.body.appendChild(div);
+  return div;
+};
+function getContainedFocusableElements(element) {
+  return element?.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+}
+var FocusTrapService = class {
+  constructor() {
+    // The last entry is always the active one
+    this.listeners = [];
+    this.onFocusIn = (event) => {
+      const active = this.getActive();
+      if (!active || !active.container.current) return;
+      const { container } = active;
+      if (!container.current.contains(event.target)) {
+        this.focusElement();
+      }
+    };
+  }
+  getActive() {
+    if (this.listeners.length === 0) return void 0;
+    return this.listeners[this.listeners.length - 1];
+  }
+  focusElement() {
+    const active = this.getActive();
+    if (!active) return;
+    const { container, initialFocusElement } = active;
+    const containerElement = container.current;
+    if (initialFocusElement?.current) {
+      initialFocusElement.current.focus();
+    } else {
+      const elements = getContainedFocusableElements(containerElement);
+      if (elements && elements.length > 0) {
+        const first = elements.item(0);
+        first.focus();
+      } else {
+        containerElement.focus();
+      }
+    }
+  }
+  removeGuards() {
+    document.querySelectorAll("[data-hw-focus-guard]").forEach((node) => node.remove());
+  }
+  addGuards() {
+    document.body.insertAdjacentElement("afterbegin", createFocusGuard());
+    document.body.insertAdjacentElement("beforeend", createFocusGuard());
+  }
+  activate() {
+    document.addEventListener("focusin", this.onFocusIn);
+    this.addGuards();
+  }
+  deactivate() {
+    document.removeEventListener("focusin", this.onFocusIn);
+    this.removeGuards();
+  }
+  register(listener) {
+    this.listeners.push(listener);
+    if (this.listeners.length === 1) {
+      this.activate();
+    }
+    const active = listener;
+    this.listeners.forEach((listener2) => {
+      const { focus, pause } = listener2;
+      if (listener2 === active) {
+        focus();
+      } else {
+        pause();
+      }
+    });
+  }
+  unregister(id) {
+    const index = this.listeners.findIndex((trap) => trap.id === id);
+    if (index !== -1) {
+      const isActive = index === this.listeners.length - 1;
+      const listener = this.listeners[index];
+      this.listeners = this.listeners.filter((listener2) => listener2.id !== id);
+      if (isActive) {
+        this.deactivate();
+        listener.focusLast();
+        const active = this.getActive();
+        this.listeners.forEach((listener2) => {
+          const { pause, unpause } = listener2;
+          if (listener2 === active) {
+            unpause();
+          } else {
+            pause();
+          }
+        });
+        if (this.listeners.length > 0) {
+          this.activate();
+        }
+      }
+    } else {
+      console.warn(`Unable to unregister id ${id}: not found`);
+    }
+  }
+};
+var service = new FocusTrapService();
+var useFocusTrap = ({
+  container,
+  active = true,
+  initialFocus,
+  focusFirst = true
+}) => {
+  const lastFocusRef = useRef2(null);
+  const [paused, setPaused] = useState5(false);
+  const isMounted = useIsMounted();
+  const id = useId();
+  const focusElement = useCallback3(() => {
+    const containerElement = container.current;
+    if (initialFocus?.current) {
+      initialFocus.current.focus();
+    } else {
+      const elements = getContainedFocusableElements(containerElement);
+      if (elements && elements.length > 0) {
+        const first = elements.item(0);
+        first.focus();
+      } else {
+        containerElement.focus();
+      }
+    }
+  }, [container, initialFocus]);
+  useEffect4(() => {
+    if (active && isMounted) {
+      let pause = function() {
+        setPaused(true);
+      }, unpause = function() {
+        setPaused(false);
+        if (!container.current.contains(document.activeElement)) {
+          focusElement();
+        }
+      }, focus = function() {
+        focusElement();
+        setPaused(false);
+      }, focusLast = function() {
+        lastFocusRef.current?.focus();
+      };
+      if (!lastFocusRef.current) {
+        lastFocusRef.current = document.activeElement;
+      }
+      service.register({ id, pause, focus, focusLast, unpause, container, initialFocusElement: initialFocus });
+      return () => {
+        service.unregister(id);
+        lastFocusRef.current = void 0;
+      };
+    }
+  }, [active, container, focusElement, id, initialFocus, isMounted]);
+  useEffect4(() => {
+    if (active && !paused && isMounted) {
+      let onKeyDown = function(event) {
+        const key = event.key;
+        const elements = getContainedFocusableElements(containerElement);
+        const active2 = document.activeElement;
+        const index = [...elements].findIndex((value) => value === active2);
+        if (index === -1 || event.altKey || event.ctrlKey || event.metaKey) {
+          return;
+        }
+        if (key === "Tab") {
+          const next = event.shiftKey ? -1 : 1;
+          const nextIndex = (index + next + elements.length) % elements.length;
+          const nextElement = elements[nextIndex];
+          nextElement.focus();
+          event.preventDefault();
+        }
+      };
+      const containerElement = container.current;
+      containerElement.addEventListener("keydown", onKeyDown);
+      return () => {
+        containerElement.removeEventListener("keydown", onKeyDown);
+      };
+    }
+  }, [active, paused, isMounted, container, initialFocus, focusFirst, focusElement]);
+};
+
+// src/hooks/useLogOnce.ts
+import { useEffect as useEffect5, useState as useState6 } from "react";
+var defaultOptions = {
+  type: "warning"
+};
+var useLogOnce = (message, condition, options) => {
+  const [hasLogged, setHasLogged] = useState6(false);
+  const { type } = { ...defaultOptions, ...options };
+  useEffect5(() => {
+    if (!hasLogged && condition) {
+      switch (type) {
+        case "info":
+          console.info(message);
+          break;
+        case "error":
+          console.error(message);
+          break;
+        case "warning":
+          console.warn(message);
+          break;
+      }
+      setHasLogged(true);
+    }
+  }, [condition]);
+};
+
+// src/components/dialog/Dialog.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var Dialog = ({
+  children,
+  isOpen,
+  titleElement,
+  description,
+  isModal = true,
+  onClose,
+  horizontalAlignment = "center",
+  verticalAlignment = "center",
+  className,
+  backgroundClassName
+}) => {
+  const translation = useTranslation([formTranslation]);
+  const ref = useRef3(null);
+  const onCloseWrapper = () => {
+    if (!isModal) return;
+    onClose?.();
+  };
+  useLogOnce("Dialog: onClose should be defined for modal dialogs", isModal && !onClose);
+  useFocusTrap({
+    container: ref,
+    active: isOpen,
+    focusFirst: true
+  });
+  if (!isOpen) return void 0;
+  return /* @__PURE__ */ jsxs3(
+    FloatingContainer,
+    {
+      ref,
+      hidden: !isOpen,
+      onKeyDown: (event) => {
+        if (event.key === "Escape") {
+          onCloseWrapper();
+        }
+      },
+      horizontalAlignment,
+      verticalAlignment,
+      backgroundOverlay: /* @__PURE__ */ jsx4(
+        "div",
+        {
+          className: clsx3(
+            "fixed inset-0 h-screen w-screen bg-overlay-shadow",
+            {
+              "motion-safe:animate-fade-in animation-delay-3000": isOpen,
+              "motion-safe:animate-fade-out": !isOpen
+            },
+            backgroundClassName
+          ),
+          hidden: !isOpen,
+          "aria-hidden": true,
+          onClick: onCloseWrapper
+        }
+      ),
+      className: clsx3(
+        "flex-col-2 p-4 bg-overlay-background text-overlay-text rounded-xl shadow-hw-bottom",
+        {
+          "motion-safe:animate-pop-in": isOpen,
+          "motion-safe:animate-pop-out": !isOpen
+        },
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx4("div", { className: "typography-title-lg-semibold mr-8", children: titleElement }),
+        /* @__PURE__ */ jsx4("div", { className: "text-description", children: description }),
+        isModal && /* @__PURE__ */ jsx4(
+          "div",
+          {
+            className: "absolute top-0 right-0",
+            style: {
+              paddingTop: "inherit",
+              paddingRight: "inherit"
+            },
+            children: /* @__PURE__ */ jsx4(
+              IconButton,
+              {
+                color: "neutral",
+                size: "tiny",
+                "aria-label": translation("close"),
+                onClick: onCloseWrapper,
+                children: /* @__PURE__ */ jsx4(X, {})
+              }
+            )
+          }
+        ),
+        children
+      ]
+    }
+  );
+};
+
+// src/components/dialog/ConfirmDialog.tsx
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var ConfirmDialog = ({
+  overwriteTranslation,
+  children,
+  onCancel,
+  onConfirm,
+  onDecline,
+  confirmType = "positive",
+  buttonOverwrites,
+  className,
+  ...restProps
+}) => {
+  const translation = useTranslation([formTranslation], overwriteTranslation);
+  const mapping = {
+    neutral: "neutral",
+    negative: "negative",
+    positive: "positive",
+    primary: "primary"
+  };
+  return /* @__PURE__ */ jsxs4(Dialog, { ...restProps, onClose: onCancel, className: clsx4("justify-between", className), children: [
+    /* @__PURE__ */ jsx5("div", { className: "flex-col-2 grow", children }),
+    /* @__PURE__ */ jsxs4("div", { className: "flex-row-4 mt-3 justify-end", children: [
+      onCancel && /* @__PURE__ */ jsx5(
+        SolidButton,
+        {
+          color: buttonOverwrites?.[0].color ?? "neutral",
+          onClick: onCancel,
+          disabled: buttonOverwrites?.[0].disabled ?? false,
+          children: buttonOverwrites?.[0].text ?? translation("cancel")
+        }
+      ),
+      onDecline && /* @__PURE__ */ jsx5(
+        SolidButton,
+        {
+          color: buttonOverwrites?.[1].color ?? "negative",
+          onClick: onDecline,
+          disabled: buttonOverwrites?.[1].disabled ?? false,
+          children: buttonOverwrites?.[1].text ?? translation("decline")
+        }
+      ),
+      /* @__PURE__ */ jsx5(
+        SolidButton,
+        {
+          color: buttonOverwrites?.[2].color ?? mapping[confirmType],
+          onClick: onConfirm,
+          disabled: buttonOverwrites?.[2].disabled ?? false,
+          children: buttonOverwrites?.[2].text ?? translation("confirm")
+        }
+      )
+    ] })
+  ] });
+};
+
+// src/components/dialog/DiscardChangesDialog.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var DiscardChangesDialog = ({
+  overwriteTranslation,
+  children,
+  onCancel,
+  onSave,
+  onDontSave,
+  titleOverwrite,
+  descriptionOverwrite,
+  ...props
+}) => {
+  const translation = useTranslation([formTranslation], overwriteTranslation);
+  return /* @__PURE__ */ jsx6(
+    ConfirmDialog,
+    {
+      ...props,
+      titleElement: titleOverwrite ?? translation("unsavedChanges"),
+      description: descriptionOverwrite ?? translation("unsavedChangesSaveQuestion"),
+      onConfirm: onSave,
+      onCancel,
+      onDecline: onDontSave,
+      buttonOverwrites: [{ text: translation("cancel") }, { text: translation("discardChanges") }, { text: translation("save") }],
+      children
+    }
+  );
+};
+
+// src/components/user-action/input/Input.tsx
+import { forwardRef as forwardRef3, useEffect as useEffect7, useImperativeHandle as useImperativeHandle2, useRef as useRef4, useState as useState8 } from "react";
+import clsx5 from "clsx";
+
+// src/hooks/useDelay.ts
+import { useEffect as useEffect6, useState as useState7 } from "react";
+var defaultOptions2 = {
+  delay: 3e3,
+  disabled: false
+};
+function useDelay(options) {
+  const [timer, setTimer] = useState7(void 0);
+  const { delay, disabled } = {
+    ...defaultOptions2,
+    ...options
+  };
+  const clearTimer = () => {
+    clearTimeout(timer);
+    setTimer(void 0);
+  };
+  const restartTimer = (onDelayFinish) => {
+    if (disabled) {
+      return;
+    }
+    clearTimeout(timer);
+    setTimer(setTimeout(() => {
+      onDelayFinish();
+      setTimer(void 0);
+    }, delay));
+  };
+  useEffect6(() => {
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [timer]);
+  useEffect6(() => {
+    if (disabled) {
+      clearTimeout(timer);
+      setTimer(void 0);
+    }
+  }, [disabled, timer]);
+  return { restartTimer, clearTimer, hasActiveTimer: !!timer };
+}
+
+// src/hooks/focus/useFocusManagement.ts
+import { useCallback as useCallback4 } from "react";
+function useFocusManagement() {
+  const getFocusableElements = useCallback4(() => {
+    return Array.from(
+      document.querySelectorAll(
+        'input, button, select, textarea, a[href], [tabindex]:not([tabindex="-1"])'
+      )
+    ).filter(
+      (el) => el instanceof HTMLElement && !el.hasAttribute("disabled") && !el.hasAttribute("hidden") && el.tabIndex !== -1
+    );
+  }, []);
+  const getNextFocusElement = useCallback4(() => {
+    const elements = getFocusableElements();
+    if (elements.length === 0) {
+      return void 0;
+    }
+    let nextElement = elements[0];
+    if (document.activeElement instanceof HTMLElement) {
+      const currentIndex = elements.indexOf(document.activeElement);
+      nextElement = elements[(currentIndex + 1) % elements.length];
+    }
+    return nextElement;
+  }, [getFocusableElements]);
+  const focusNext = useCallback4(() => {
+    const nextElement = getNextFocusElement();
+    nextElement?.focus();
+  }, [getNextFocusElement]);
+  const getPreviousFocusElement = useCallback4(() => {
+    const elements = getFocusableElements();
+    if (elements.length === 0) {
+      return void 0;
+    }
+    let previousElement = elements[0];
+    if (document.activeElement instanceof HTMLElement) {
+      const currentIndex = elements.indexOf(document.activeElement);
+      if (currentIndex === 0) {
+        previousElement = elements[elements.length - 1];
+      } else {
+        previousElement = elements[currentIndex - 1];
+      }
+    }
+    return previousElement;
+  }, [getFocusableElements]);
+  const focusPrevious = useCallback4(() => {
+    const previousElement = getPreviousFocusElement();
+    if (previousElement) previousElement.focus();
+  }, [getPreviousFocusElement]);
+  return {
+    getFocusableElements,
+    getNextFocusElement,
+    getPreviousFocusElement,
+    focusNext,
+    focusPrevious
+  };
+}
+
+// src/components/user-action/input/Input.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+var defaultEditCompleteOptions = {
+  allowEnterComplete: false,
+  onBlur: true,
+  afterDelay: true,
+  delay: 2500
+};
+var Input = forwardRef3(function Input2({
+  value,
+  onChange,
+  onChangeText,
+  onEditCompleted,
+  editCompleteOptions,
+  disabled = false,
+  invalid = false,
+  defaultStyle = true,
+  className,
+  ...props
+}, forwardedRef) {
+  const {
+    onBlur: allowEditCompleteOnBlur,
+    afterDelay,
+    delay,
+    allowEnterComplete
+  } = { ...defaultEditCompleteOptions, ...editCompleteOptions };
+  const {
+    restartTimer,
+    clearTimer
+  } = useDelay({ delay, disabled: !afterDelay });
+  const innerRef = useRef4(null);
+  useImperativeHandle2(forwardedRef, () => innerRef.current);
+  const { focusNext } = useFocusManagement();
+  return /* @__PURE__ */ jsx7(
+    "input",
+    {
+      ...props,
+      ref: innerRef,
+      value,
+      disabled,
+      className: defaultStyle ? clsx5(
+        "px-2.5 py-1.75 rounded-md border-1 text-sm",
+        {
+          "bg-input-background text-input-text hover:border-primary focus:border-primary": !disabled && !invalid,
+          "bg-on-negative text-negative border-negative-border hover:border-negative-border-hover focus-visible:ring-negative-border": !disabled && invalid,
+          "bg-disabled-background text-disabled-text border-disabled-border": disabled
+        },
+        className
+      ) : className,
+      onKeyDown: (event) => {
+        props.onKeyDown?.(event);
+        if (!allowEnterComplete) {
+          return;
+        }
+        if (event.key === "Enter" && !event.shiftKey) {
+          event.preventDefault();
+          innerRef.current?.blur();
+          onEditCompleted?.(event.target.value);
+          focusNext();
+        }
+      },
+      onBlur: (event) => {
+        props.onBlur?.(event);
+        if (allowEditCompleteOnBlur) {
+          onEditCompleted?.(event.target.value);
+          clearTimer();
+        }
+      },
+      onChange: (event) => {
+        onChange?.(event);
+        const value2 = event.target.value;
+        restartTimer(() => {
+          innerRef.current?.blur();
+          onEditCompleted?.(value2);
+        });
+        onChangeText?.(value2);
+      },
+      "aria-invalid": props["aria-invalid"] ?? invalid,
+      "aria-disabled": props["aria-disabled"] ?? disabled
+    }
+  );
+});
+
+// src/components/dialog/InputDialog.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+var InputDialog = ({
+  inputs,
+  buttonOverwrites,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx8(
+    ConfirmDialog,
+    {
+      buttonOverwrites,
+      ...props,
+      children: inputs.map((inputProps, index) => /* @__PURE__ */ jsx8(Input, { ...inputProps }, `input ${index}`))
+    }
+  );
+};
+
+// src/components/user-action/select/Select.tsx
+import {
+  createContext as createContext2,
+  forwardRef as forwardRef5,
+  useCallback as useCallback6,
+  useContext as useContext2,
+  useEffect as useEffect9,
+  useId as useId3,
+  useImperativeHandle as useImperativeHandle3,
+  useRef as useRef5,
+  useState as useState10
+} from "react";
+import clsx8 from "clsx";
+
+// src/components/layout/Expandable.tsx
+import { forwardRef as forwardRef4, useCallback as useCallback5, useEffect as useEffect8, useId as useId2, useState as useState9 } from "react";
+import { ChevronDown } from "lucide-react";
+import clsx6 from "clsx";
+
+// src/utils/noop.ts
+var noop = () => void 0;
+
+// src/components/layout/Expandable.tsx
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+var ExpansionIcon = ({ isExpanded, className }) => {
+  return /* @__PURE__ */ jsx9(
+    ChevronDown,
+    {
+      "aria-hidden": true,
+      className: clsx6(
+        "min-w-6 w-6 min-h-6 h-6 transition-transform motion-safe:duration-200 motion-reduce:duration-0 ease-in-out",
+        { "rotate-180": isExpanded },
+        className
+      )
+    }
+  );
+};
+var Expandable = forwardRef4(function Expandable2({
+  children,
+  id: providedId,
+  label,
+  icon,
+  isExpanded = false,
+  onChange = noop,
+  clickOnlyOnHeader = true,
+  disabled = false,
+  className,
+  headerClassName,
+  contentClassName,
+  contentExpandedClassName
+}, ref) {
+  const defaultIcon = useCallback5((expanded) => /* @__PURE__ */ jsx9(ExpansionIcon, { isExpanded: expanded }), []);
+  icon ??= defaultIcon;
+  const generatedId = useId2();
+  const id = providedId ?? generatedId;
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      ref,
+      onClick: () => !clickOnlyOnHeader && !disabled && onChange(!isExpanded),
+      className: clsx6(
+        "flex-col-0 bg-surface text-on-surface group rounded-lg shadow-sm",
+        { "cursor-pointer": !clickOnlyOnHeader && !disabled },
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs5(
+          "button",
+          {
+            onClick: () => clickOnlyOnHeader && !disabled && onChange(!isExpanded),
+            className: clsx6(
+              "flex-row-2 py-2 px-4 rounded-lg justify-between items-center bg-surface text-on-surface select-none",
+              {
+                "group-hover:brightness-97": !isExpanded,
+                "hover:brightness-97": isExpanded && !disabled,
+                "cursor-pointer": clickOnlyOnHeader && !disabled
+              },
+              headerClassName
+            ),
+            "aria-expanded": isExpanded,
+            "aria-controls": `${id}-content`,
+            "aria-disabled": disabled ?? void 0,
+            children: [
+              label,
+              icon(isExpanded)
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx9(
+          "div",
+          {
+            id: `${id}-content`,
+            className: clsx6(
+              "flex-col-2 px-4 transition-all duration-300 ease-in-out",
+              {
+                [clsx6("max-h-96 opacity-100 pb-2 overflow-y-auto", contentExpandedClassName)]: isExpanded,
+                "max-h-0 opacity-0 overflow-hidden": !isExpanded
+              },
+              contentClassName
+            ),
+            role: "region",
+            children
+          }
+        )
+      ]
+    }
+  );
+});
+var ExpandableUncontrolled = forwardRef4(function ExpandableUncontrolled2({
+  isExpanded,
+  onChange = noop,
+  ...props
+}, ref) {
+  const [usedIsExpanded, setUsedIsExpanded] = useState9(isExpanded);
+  useEffect8(() => {
+    setUsedIsExpanded(isExpanded);
+  }, [isExpanded]);
+  return /* @__PURE__ */ jsx9(
+    Expandable,
+    {
+      ...props,
+      ref,
+      isExpanded: usedIsExpanded,
+      onChange: (value) => {
+        onChange(value);
+        setUsedIsExpanded(value);
+      }
+    }
+  );
+});
+
+// src/utils/match.ts
+var match = (key, values) => {
+  return values[key];
+};
+
+// src/components/user-action/select/Select.tsx
+import { CheckIcon, Plus, XIcon } from "lucide-react";
+
+// src/components/layout/Chip.tsx
+import clsx7 from "clsx";
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+var Chip = ({
+  children,
+  trailingIcon,
+  color = "default",
+  size = "md",
+  icon = false,
+  variant = "normal",
+  className = "",
+  ...restProps
+}) => {
+  const colorMapping = {
+    default: "text-tag-default-text bg-tag-default-background",
+    dark: "text-tag-dark-text bg-tag-dark-background",
+    red: "text-tag-red-text bg-tag-red-background",
+    yellow: "text-tag-yellow-text bg-tag-yellow-background",
+    green: "text-tag-green-text bg-tag-green-background",
+    blue: "text-tag-blue-text bg-tag-blue-background",
+    pink: "text-tag-pink-text bg-tag-pink-background",
+    orange: "text-tag-orange-text bg-tag-orange-background"
+  }[color];
+  const colorMappingIcon = {
+    default: "text-tag-default-icon",
+    dark: "text-tag-dark-icon",
+    red: "text-tag-red-icon",
+    yellow: "text-tag-yellow-icon",
+    green: "text-tag-green-icon",
+    blue: "text-tag-blue-icon",
+    pink: "text-tag-pink-icon",
+    orange: "text-tag-orange-icon"
+  }[color];
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      ...restProps,
+      className: clsx7(
+        `flex-row-0 w-fit font-semibold`,
+        colorMapping,
+        !icon ? {
+          "px-1 py-0.5": size === "sm",
+          "px-2 py-1": size === "md",
+          "px-4 py-2": size === "lg"
+        } : {
+          "p-0.5": size === "sm",
+          "p-1": size === "md",
+          "p-2": size === "lg"
+        },
+        {
+          "rounded-md": variant === "normal",
+          "rounded-full": variant === "fullyRounded"
+        },
+        className
+      ),
+      children: [
+        children,
+        trailingIcon && /* @__PURE__ */ jsx10("span", { className: colorMappingIcon, children: trailingIcon })
+      ]
+    }
+  );
+};
+
+// src/components/user-action/select/Select.tsx
+import { createPortal as createPortal2 } from "react-dom";
+import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+var defaultToggleOpenOptions = {
+  highlightStartPosition: "first"
+};
+var SelectContext = createContext2(null);
+function useSelectContext() {
+  const ctx = useContext2(SelectContext);
+  if (!ctx) {
+    throw new Error("SelectContext must be used within a ListBoxPrimitive");
+  }
+  return ctx;
+}
+var SelectRoot = ({
+  children,
+  id,
+  value,
+  onValueChanged,
+  values,
+  onValuesChanged,
+  isOpen = false,
+  disabled = false,
+  invalid = false,
+  isMultiSelect = false,
+  iconAppearance = "left"
+}) => {
+  const optionsRef = useRef5([]);
+  const triggerRef = useRef5(null);
+  const generatedId = useId3();
+  const usedId = id ?? generatedId;
+  const [internalState, setInternalState] = useState10({
+    isOpen
+  });
+  const state = {
+    ...internalState,
+    id: usedId,
+    disabled,
+    invalid,
+    value: isMultiSelect ? values ?? [] : [value].filter(Boolean)
+  };
+  const config = {
+    isMultiSelect,
+    iconAppearance
+  };
+  const registerItem = useCallback6((item) => {
+    optionsRef.current.push(item);
+    optionsRef.current.sort((a, b) => {
+      const aEl = a.ref.current;
+      const bEl = b.ref.current;
+      if (!aEl || !bEl) return 0;
+      return aEl.compareDocumentPosition(bEl) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
+    });
+  }, []);
+  const unregisterItem = useCallback6((value2) => {
+    optionsRef.current = optionsRef.current.filter((i) => i.value !== value2);
+  }, []);
+  const toggleSelection = (value2, isSelected) => {
+    if (disabled) {
+      return;
+    }
+    const option = optionsRef.current.find((i) => i.value === value2);
+    if (!option) {
+      console.error(`SelectOption with value: ${value2} not found`);
+      return;
+    }
+    let newValue;
+    if (isMultiSelect) {
+      const isSelectedBefore = state.value.includes(value2);
+      const isSelectedAfter = isSelected ?? !isSelectedBefore;
+      if (!isSelectedAfter) {
+        newValue = state.value.filter((v) => v !== value2);
+      } else {
+        newValue = [...state.value, value2];
+      }
+    } else {
+      newValue = [value2];
+    }
+    if (!isMultiSelect) {
+      onValueChanged?.(newValue[0]);
+    } else {
+      onValuesChanged?.(newValue);
+    }
+    setInternalState((prevState) => ({
+      ...prevState,
+      highlightedValue: value2
+    }));
+  };
+  const highlightItem = (value2) => {
+    if (disabled) {
+      return;
+    }
+    setInternalState((prevState) => ({
+      ...prevState,
+      highlightedValue: value2
+    }));
+  };
+  const registerTrigger = useCallback6((ref) => {
+    triggerRef.current = ref.current;
+  }, []);
+  const unregisterTrigger = useCallback6(() => {
+    triggerRef.current = null;
+  }, []);
+  const toggleOpen = (isOpen2, options) => {
+    const { highlightStartPosition } = { ...defaultToggleOpenOptions, ...options };
+    let highlightedIndex;
+    if (highlightStartPosition === "first") {
+      highlightedIndex = optionsRef.current.findIndex((option) => !option.disabled);
+    } else {
+      highlightedIndex = optionsRef.current.length - 1 - [...optionsRef.current].reverse().findIndex((option) => !option.disabled);
+    }
+    if (highlightedIndex === -1 || highlightedIndex === optionsRef.current.length) {
+      highlightedIndex = 0;
+    }
+    setInternalState((prevState) => ({
+      ...prevState,
+      isOpen: isOpen2 ?? !prevState.isOpen,
+      highlightedValue: optionsRef.current[highlightedIndex].value
+    }));
+  };
+  const moveHighlightedIndex = (delta) => {
+    let highlightedIndex = optionsRef.current.findIndex((value2) => value2.value === internalState.highlightedValue);
+    if (highlightedIndex === -1) {
+      highlightedIndex = 0;
+    }
+    const optionLength = optionsRef.current.length;
+    const startIndex = (highlightedIndex + delta % optionLength + optionLength) % optionLength;
+    const isForward = delta >= 0;
+    let highlightedValue = optionsRef.current[startIndex].value;
+    for (let i = 0; i < optionsRef.current.length; i++) {
+      const index = (startIndex + (isForward ? i : -i) + optionLength) % optionLength;
+      if (!optionsRef.current[index].disabled) {
+        highlightedValue = optionsRef.current[index].value;
+        break;
+      }
+    }
+    setInternalState((prevState) => ({
+      ...prevState,
+      highlightedValue
+    }));
+  };
+  useEffect9(() => {
+    if (!internalState.highlightedValue) return;
+    const highlighted = optionsRef.current.find((value2) => value2.value === internalState.highlightedValue);
+    if (highlighted) {
+      highlighted.ref.current.scrollIntoView({ behavior: "instant", block: "nearest" });
+    } else {
+      console.error(`SelectRoot: Could not find highlighted value (${internalState.highlightedValue})`);
+    }
+  }, [internalState.highlightedValue]);
+  const contextValue = {
+    state,
+    config,
+    item: {
+      register: registerItem,
+      unregister: unregisterItem,
+      toggleSelection,
+      highlightItem,
+      moveHighlightedIndex
+    },
+    trigger: {
+      ref: triggerRef,
+      register: registerTrigger,
+      unregister: unregisterTrigger,
+      toggleOpen
+    }
+  };
+  return /* @__PURE__ */ jsx11(SelectContext.Provider, { value: contextValue, children });
+};
+var SelectOption = forwardRef5(
+  function SelectOption2({ children, value, disabled = false, iconAppearance, className, ...restProps }, ref) {
+    const { state, config, item, trigger } = useSelectContext();
+    const { register, unregister, toggleSelection, highlightItem } = item;
+    const itemRef = useRef5(null);
+    iconAppearance ??= config.iconAppearance;
+    useEffect9(() => {
+      register({
+        value,
+        disabled,
+        ref: itemRef
+      });
+      return () => unregister(value);
+    }, [value, disabled, register, unregister, children]);
+    const isHighlighted = state.highlightedValue === value;
+    const isSelected = state.value.includes(value);
+    return /* @__PURE__ */ jsxs7(
+      "li",
+      {
+        ...restProps,
+        ref: (node) => {
+          itemRef.current = node;
+          if (typeof ref === "function") ref(node);
+          else if (ref) ref.current = node;
+        },
+        id: value,
+        role: "option",
+        "aria-disabled": disabled,
+        "aria-selected": isSelected,
+        "data-highlighted": isHighlighted ? "" : void 0,
+        "data-selected": isSelected ? "" : void 0,
+        "data-disabled": disabled ? "" : void 0,
+        className: clsx8(
+          "flex-row-1 items-center px-2 py-1 rounded-md",
+          "data-highlighted:bg-primary/20",
+          "data-disabled:text-disabled data-disabled:cursor-not-allowed",
+          "not-data-disabled:cursor-pointer",
+          className
+        ),
+        onClick: (event) => {
+          if (!disabled) {
+            toggleSelection(value);
+            if (!config.isMultiSelect) {
+              trigger.toggleOpen(false);
+            }
+            restProps.onClick?.(event);
+          }
+        },
+        onMouseEnter: (event) => {
+          if (!disabled) {
+            highlightItem(value);
+            restProps.onMouseEnter?.(event);
+          }
+        },
+        children: [
+          iconAppearance === "left" && /* @__PURE__ */ jsx11(
+            CheckIcon,
+            {
+              className: clsx8("w-4 h-4", { "opacity-0": !isSelected || disabled }),
+              "aria-hidden": true
+            }
+          ),
+          children ?? value,
+          iconAppearance === "right" && /* @__PURE__ */ jsx11(
+            CheckIcon,
+            {
+              className: clsx8("w-4 h-4", { "opacity-0": !isSelected || disabled }),
+              "aria-hidden": true
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+var defaultSelectButtonTranslation = {
+  en: {
+    clickToSelect: "Click to select"
+  },
+  de: {
+    clickToSelect: "Zum ausw\xE4hlen dr\xFCcken"
+  }
+};
+var SelectButton = forwardRef5(function SelectButton2({ placeholder, selectedDisplay, ...props }, ref) {
+  const translation = useTranslation([defaultSelectButtonTranslation]);
+  const { state, trigger } = useSelectContext();
+  const { register, unregister, toggleOpen } = trigger;
+  const innerRef = useRef5(null);
+  useImperativeHandle3(ref, () => innerRef.current);
+  useEffect9(() => {
+    register(innerRef);
+    return () => unregister();
+  }, [register, unregister]);
+  const disabled = !!props?.disabled || !!state.disabled;
+  const invalid = state.invalid;
+  const hasValue = state.value.length > 0;
+  return /* @__PURE__ */ jsxs7(
+    "button",
+    {
+      ...props,
+      ref: innerRef,
+      id: state.id,
+      className: clsx8(
+        "flex-row-2 items-center justify-between bg-input-background text-input-text rounded-md px-2.5 py-2.5",
+        "data-placeholder:text-description",
+        props.className
+      ),
+      onClick: () => toggleOpen(!state.isOpen),
+      onKeyDown: (event) => {
+        switch (event.key) {
+          case "ArrowDown":
+            toggleOpen(true, { highlightStartPosition: "first" });
+            break;
+          case "ArrowUp":
+            toggleOpen(true, { highlightStartPosition: "last" });
+            break;
+        }
+      },
+      "data-placeholder": !hasValue ? "" : void 0,
+      "data-disabled": disabled ? "" : void 0,
+      "data-invalid": invalid ? "" : void 0,
+      "aria-invalid": invalid,
+      "aria-disabled": disabled,
+      "aria-haspopup": "listbox",
+      "aria-expanded": state.isOpen,
+      "aria-controls": state.isOpen ? `${state.id}-listbox` : void 0,
+      children: [
+        hasValue ? selectedDisplay?.(state.value) ?? state.value.join(", ") : placeholder ?? translation("clickToSelect"),
+        /* @__PURE__ */ jsx11(ExpansionIcon, { isExpanded: state.isOpen })
+      ]
+    }
+  );
+});
+var SelectChipDisplay = forwardRef5(function SelectChipDisplay2({ ...props }, ref) {
+  const { state, trigger, item } = useSelectContext();
+  const { register, unregister, toggleOpen } = trigger;
+  const innerRef = useRef5(null);
+  useImperativeHandle3(ref, () => innerRef.current);
+  useEffect9(() => {
+    register(innerRef);
+    return () => unregister();
+  }, [register, unregister]);
+  const disabled = !!props?.disabled || !!state.disabled;
+  const invalid = state.invalid;
+  return /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      ...props,
+      ref: innerRef,
+      className: clsx8(
+        "flex flex-wrap flex-row gap-2 items-center bg-input-background text-input-text rounded-md px-2.5 py-2.5",
+        props.className
+      ),
+      "data-disabled": disabled ? "" : void 0,
+      "data-invalid": invalid ? "" : void 0,
+      "aria-invalid": invalid,
+      "aria-disabled": disabled,
+      children: [
+        state.value.map((value) => /* @__PURE__ */ jsxs7(Chip, { className: "gap-x-2", children: [
+          value,
+          /* @__PURE__ */ jsx11(
+            "button",
+            {
+              onClick: () => {
+                item.toggleSelection(value, false);
+              },
+              className: "focus-within:text-negative hover:bg-negative/20 hover:text-negative rounded-md focus-style-none focus-visible:ring-2 focus-visible:ring-negative focus-visible:bg-negative/20",
+              children: /* @__PURE__ */ jsx11(XIcon, {})
+            }
+          )
+        ] }, value)),
+        /* @__PURE__ */ jsx11(
+          IconButton,
+          {
+            id: state.id,
+            onClick: () => toggleOpen(),
+            onKeyDown: (event) => {
+              switch (event.key) {
+                case "ArrowDown":
+                  toggleOpen(true, { highlightStartPosition: "first" });
+                  break;
+                case "ArrowUp":
+                  toggleOpen(true, { highlightStartPosition: "last" });
+              }
+            },
+            size: "small",
+            color: "neutral",
+            "aria-invalid": invalid,
+            "aria-disabled": disabled,
+            "aria-haspopup": "listbox",
+            "aria-expanded": state.isOpen,
+            "aria-controls": state.isOpen ? `${state.id}-listbox` : void 0,
+            children: /* @__PURE__ */ jsx11(Plus, {})
+          }
+        )
+      ]
+    }
+  );
+});
+var SelectContent = forwardRef5(
+  function SelectContent2({
+    alignment,
+    orientation = "vertical",
+    ...props
+  }, ref) {
+    const innerRef = useRef5(null);
+    useImperativeHandle3(ref, () => innerRef.current);
+    const { trigger, state, config, item } = useSelectContext();
+    const position = useFloatingElement({
+      active: state.isOpen,
+      anchorRef: trigger.ref,
+      containerRef: innerRef,
+      ...alignment
+    });
+    useFocusTrap({
+      container: innerRef,
+      active: state.isOpen && !!position
+    });
+    return createPortal2(
+      /* @__PURE__ */ jsxs7(Fragment2, { children: [
+        /* @__PURE__ */ jsx11(
+          "div",
+          {
+            hidden: !state.isOpen,
+            onClick: () => trigger.toggleOpen(false),
+            className: clsx8("fixed w-screen h-screen inset-0")
+          }
+        ),
+        /* @__PURE__ */ jsx11(
+          "ul",
+          {
+            ...props,
+            id: `${state.id}-listbox`,
+            ref: innerRef,
+            hidden: !state.isOpen,
+            onKeyDown: (event) => {
+              switch (event.key) {
+                case "Escape":
+                  trigger.toggleOpen(false);
+                  event.preventDefault();
+                  event.stopPropagation();
+                  break;
+                case match(orientation, {
+                  vertical: "ArrowDown",
+                  horizontal: "ArrowUp"
+                }):
+                  item.moveHighlightedIndex(1);
+                  event.preventDefault();
+                  break;
+                case match(orientation, {
+                  vertical: "ArrowUp",
+                  horizontal: "ArrowDown"
+                }):
+                  item.moveHighlightedIndex(-1);
+                  event.preventDefault();
+                  break;
+                case "Home":
+                  event.preventDefault();
+                  break;
+                case "End":
+                  event.preventDefault();
+                  break;
+                case "Enter":
+                // Fall through
+                case " ":
+                  if (state.highlightedValue) {
+                    item.toggleSelection(state.highlightedValue);
+                    if (!config.isMultiSelect) {
+                      trigger.toggleOpen(false);
+                    }
+                    event.preventDefault();
+                  }
+                  break;
+              }
+            },
+            className: clsx8("flex-col-0 p-2 bg-menu-background text-menu-text rounded-md shadow-hw-bottom focus-style-within overflow-auto", props.className),
+            style: {
+              opacity: position ? void 0 : 0,
+              position: "fixed",
+              ...position
+            },
+            role: "listbox",
+            "aria-multiselectable": config.isMultiSelect,
+            "aria-orientation": orientation,
+            tabIndex: position ? 0 : void 0,
+            children: props.children
+          }
+        )
+      ] }),
+      document.body
+    );
+  }
+);
+var Select = forwardRef5(function Select2({
+  children,
+  contentPanelProps,
+  buttonProps,
+  ...props
+}, ref) {
+  return /* @__PURE__ */ jsxs7(SelectRoot, { ...props, isMultiSelect: false, children: [
+    /* @__PURE__ */ jsx11(
+      SelectButton,
+      {
+        ref,
+        ...buttonProps,
+        selectedDisplay: (values) => {
+          const value = values[0];
+          if (!buttonProps?.selectedDisplay) return void 0;
+          return buttonProps.selectedDisplay(value);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx11(SelectContent, { ...contentPanelProps, children })
+  ] });
+});
+var SelectUncontrolled = forwardRef5(function SelectUncontrolled2({
+  value: initialValue,
+  onValueChanged,
+  ...props
+}, ref) {
+  const [value, setValue] = useState10(initialValue);
+  useEffect9(() => {
+    setValue(initialValue);
+  }, [initialValue]);
+  return /* @__PURE__ */ jsx11(
+    Select,
+    {
+      ...props,
+      ref,
+      value,
+      onValueChanged: (value2) => {
+        setValue(value2);
+        onValueChanged?.(value2);
+      }
+    }
+  );
+});
+var MultiSelect = forwardRef5(function MultiSelect2({
+  children,
+  contentPanelProps,
+  buttonProps,
+  ...props
+}, ref) {
+  return /* @__PURE__ */ jsxs7(SelectRoot, { ...props, isMultiSelect: true, children: [
+    /* @__PURE__ */ jsx11(SelectButton, { ref, ...buttonProps }),
+    /* @__PURE__ */ jsx11(SelectContent, { ...contentPanelProps, children })
+  ] });
+});
+var MultiSelectUncontrolled = forwardRef5(function MultiSelectUncontrolled2({
+  values: initialValues,
+  onValuesChanged,
+  ...props
+}, ref) {
+  const [values, setValues] = useState10(initialValues);
+  useEffect9(() => {
+    setValues(initialValues);
+  }, [initialValues]);
+  return /* @__PURE__ */ jsx11(
+    MultiSelect,
+    {
+      ...props,
+      ref,
+      values,
+      onValuesChanged: (value) => {
+        setValues(value);
+        onValuesChanged?.(value);
+      }
+    }
+  );
+});
+var MultiSelectChipDisplay = forwardRef5(function MultiSelectChipDisplay2({
+  children,
+  contentPanelProps,
+  chipDisplayProps,
+  ...props
+}, ref) {
+  return /* @__PURE__ */ jsxs7(SelectRoot, { ...props, isMultiSelect: true, children: [
+    /* @__PURE__ */ jsx11(SelectChipDisplay, { ref, ...chipDisplayProps }),
+    /* @__PURE__ */ jsx11(SelectContent, { ...contentPanelProps, children })
+  ] });
+});
+var MultiSelectChipDisplayUncontrolled = forwardRef5(function MultiSelectChipDisplayUncontrolled2({
+  values: initialValues,
+  onValuesChanged,
+  ...props
+}, ref) {
+  const [values, setValues] = useState10(initialValues);
+  useEffect9(() => {
+    setValues(initialValues);
+  }, [initialValues]);
+  return /* @__PURE__ */ jsx11(
+    MultiSelectChipDisplay,
+    {
+      ...props,
+      ref,
+      values,
+      onValuesChanged: (value) => {
+        setValues(value);
+        onValuesChanged?.(value);
+      }
+    }
+  );
+});
+
+// src/components/dialog/LanguageDialog.tsx
+import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+var defaultLanguageDialogTranslation = {
+  en: {
+    language: "Language",
+    chooseLanguage: "Choose your language",
+    done: "Done",
+    ...LanguageUtil.languagesLocalNames
+  },
+  de: {
+    language: "Sprache",
+    chooseLanguage: "W\xE4hle deine bevorzugte Sprache",
+    done: "Fertig",
+    ...LanguageUtil.languagesLocalNames
+  }
+};
+var LanguageDialog = ({
+  overwriteTranslation,
+  onClose,
+  titleOverwrite,
+  descriptionOverwrite,
+  ...props
+}) => {
+  const { language, setLanguage } = useLanguage();
+  const translation = useTranslation([defaultLanguageDialogTranslation], overwriteTranslation);
+  return /* @__PURE__ */ jsx12(
+    Dialog,
+    {
+      titleElement: titleOverwrite ?? translation("language"),
+      description: descriptionOverwrite ?? translation("chooseLanguage"),
+      onClose,
+      ...props,
+      children: /* @__PURE__ */ jsxs8("div", { className: "w-64", children: [
+        /* @__PURE__ */ jsx12(
+          Select,
+          {
+            value: language,
+            onValueChanged: (language2) => setLanguage(language2),
+            contentPanelProps: { className: "z-100" },
+            buttonProps: {
+              selectedDisplay: (value) => translation(value)
+            },
+            children: LanguageUtil.languages.map((language2) => /* @__PURE__ */ jsx12(SelectOption, { value: language2, children: translation(language2) }, language2))
+          }
+        ),
+        /* @__PURE__ */ jsx12("div", { className: "flex-row-4 mt-3 justify-end", children: /* @__PURE__ */ jsx12(SolidButton, { color: "positive", onClick: onClose, children: translation("done") }) })
+      ] })
+    }
+  );
+};
+
+// src/theming/useTheme.tsx
+import { useCallback as useCallback7 } from "react";
+import { useMemo } from "react";
+import { createContext as createContext3, useContext as useContext3, useEffect as useEffect10, useState as useState11 } from "react";
+import { jsx as jsx13 } from "react/jsx-runtime";
+var themes = ["light", "dark", "system"];
+var defaultThemeTypeTranslation = {
+  en: {
+    dark: "Dark",
+    light: "Light",
+    system: "System",
+    theme: {
+      one: "Theme",
+      other: "Themes"
+    }
+  },
+  de: {
+    dark: "Dunkel",
+    light: "Hell",
+    system: "System",
+    theme: {
+      one: "Farbschema",
+      other: "Farbschemas"
+    }
+  }
+};
+var ThemeUtil = {
+  themes,
+  translation: defaultThemeTypeTranslation
+};
+var ThemeContext = createContext3(null);
+var useTheme = () => {
+  const context = useContext3(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within ThemeContext. Try adding a ThemeProvider around your app.");
+  }
+  return context;
+};
+
+// src/components/dialog/ThemeDialog.tsx
+import { MonitorCog, MoonIcon, SunIcon } from "lucide-react";
+import clsx9 from "clsx";
+import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+var ThemeIcon = ({ theme, className }) => {
+  if (theme === "dark") {
+    return /* @__PURE__ */ jsx14(MoonIcon, { className: clsx9("w-4 h-4", className) });
+  } else if (theme === "light") {
+    return /* @__PURE__ */ jsx14(SunIcon, { className: clsx9("w-4 h-4", className) });
+  } else {
+    return /* @__PURE__ */ jsx14(MonitorCog, { className: clsx9("w-4 h-4", className) });
+  }
+};
+var defaultConfirmDialogTranslation = {
+  en: {
+    chooseTheme: "Choose your preferred color theme."
+  },
+  de: {
+    chooseTheme: "W\xE4hle dein bevorzugtes Farbschema."
+  }
+};
+var ThemeDialog = ({
+  overwriteTranslation,
+  onClose,
+  titleOverwrite,
+  descriptionOverwrite,
+  ...props
+}) => {
+  const { theme, setTheme } = useTheme();
+  const translation = useTranslation([defaultConfirmDialogTranslation, formTranslation, ThemeUtil.translation], overwriteTranslation);
+  return /* @__PURE__ */ jsx14(
+    Dialog,
+    {
+      titleElement: titleOverwrite ?? translation("theme"),
+      description: descriptionOverwrite ?? translation("chooseTheme"),
+      onClose,
+      ...props,
+      children: /* @__PURE__ */ jsxs9("div", { className: "w-64", children: [
+        /* @__PURE__ */ jsx14(
+          Select,
+          {
+            value: theme,
+            onValueChanged: (theme2) => setTheme(theme2),
+            iconAppearance: "right",
+            contentPanelProps: {
+              className: "z-100"
+            },
+            buttonProps: {
+              selectedDisplay: (value) => /* @__PURE__ */ jsxs9("div", { className: "flex-row-2 items-center", children: [
+                /* @__PURE__ */ jsx14(ThemeIcon, { theme }),
+                translation(value)
+              ] }),
+              className: "min-w-32"
+            },
+            children: ThemeUtil.themes.map((theme2) => /* @__PURE__ */ jsx14(SelectOption, { value: theme2, className: "gap-x-6 justify-between", children: /* @__PURE__ */ jsxs9("div", { className: "flex-row-2 items-center", children: [
+              /* @__PURE__ */ jsx14(ThemeIcon, { theme: theme2 }),
+              translation(theme2)
+            ] }) }, theme2))
+          }
+        ),
+        /* @__PURE__ */ jsx14("div", { className: "flex-row-4 mt-3 justify-end", children: /* @__PURE__ */ jsx14(SolidButton, { autoFocus: true, color: "positive", onClick: onClose, children: translation("done") }) })
+      ] })
+    }
+  );
+};
+export {
+  ConfirmDialog,
+  Dialog,
+  DiscardChangesDialog,
+  InputDialog,
+  LanguageDialog,
+  ThemeDialog
+};
+//# sourceMappingURL=index.mjs.map