@helpwave/hightide 0.1.27 → 0.1.28

package/dist/components/user-action/index.js

@@ -0,0 +1,4257 @@
+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/user-action/index.ts
+var user_action_exports = {};
+__export(user_action_exports, {
+  ButtonColorUtil: () => ButtonColorUtil,
+  ButtonUtil: () => ButtonUtil,
+  Checkbox: () => Checkbox2,
+  CheckboxUncontrolled: () => CheckboxUncontrolled,
+  CopyToClipboardWrapper: () => CopyToClipboardWrapper,
+  DateTimePicker: () => DateTimePicker,
+  IconButton: () => IconButton,
+  IconButtonUtil: () => IconButtonUtil,
+  Input: () => Input,
+  InputUncontrolled: () => InputUncontrolled,
+  InsideLabelInput: () => InsideLabelInput,
+  InsideLabelInputUncontrolled: () => InsideLabelInputUncontrolled,
+  Label: () => Label,
+  Menu: () => Menu,
+  MenuItem: () => MenuItem,
+  MultiSelect: () => MultiSelect,
+  MultiSelectChipDisplay: () => MultiSelectChipDisplay,
+  MultiSelectChipDisplayUncontrolled: () => MultiSelectChipDisplayUncontrolled,
+  MultiSelectUncontrolled: () => MultiSelectUncontrolled,
+  OutlineButton: () => OutlineButton,
+  ScrollPicker: () => ScrollPicker,
+  SearchBar: () => SearchBar,
+  Select: () => Select,
+  SelectButton: () => SelectButton,
+  SelectChipDisplay: () => SelectChipDisplay,
+  SelectContent: () => SelectContent,
+  SelectOption: () => SelectOption,
+  SelectRoot: () => SelectRoot,
+  SelectUncontrolled: () => SelectUncontrolled,
+  SolidButton: () => SolidButton,
+  TextButton: () => TextButton,
+  Textarea: () => Textarea,
+  TextareaUncontrolled: () => TextareaUncontrolled,
+  TextareaWithHeadline: () => TextareaWithHeadline,
+  ToggleableInput: () => ToggleableInput,
+  ToggleableInputUncontrolled: () => ToggleableInputUncontrolled,
+  Tooltip: () => Tooltip
+});
+module.exports = __toCommonJS(user_action_exports);
+
+// src/components/user-action/Button.tsx
+var import_react = require("react");
+var import_clsx = __toESM(require("clsx"));
+var import_jsx_runtime = require("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 = (0, import_react.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__ */ (0, import_jsx_runtime.jsxs)(
+    "button",
+    {
+      ref,
+      onClick,
+      className: (0, import_clsx.default)(
+        "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__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            className: (0, import_clsx.default)(
+              iconColorClasses,
+              "group-disabled:text-disabled-icon"
+            ),
+            children: startIcon
+          }
+        ),
+        children,
+        endIcon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            className: (0, import_clsx.default)(
+              iconColorClasses,
+              "group-disabled:text-disabled-icon"
+            ),
+            children: endIcon
+          }
+        )
+      ]
+    }
+  );
+});
+var OutlineButton = ({
+  children,
+  color = "primary",
+  size = "medium",
+  startIcon,
+  endIcon,
+  onClick,
+  className,
+  ...restProps
+}) => {
+  const colorClasses = {
+    primary: "not-disabled:border-button-outline-primary-text not-disabled:text-button-outline-primary-text"
+  }[color];
+  const iconColorClasses = {
+    primary: "not-group-disabled:text-button-outline-primary-icon"
+  }[color];
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "button",
+    {
+      onClick,
+      className: (0, import_clsx.default)(
+        "group font-semibold bg-transparent border-2 ",
+        "not-disabled:hover:brightness-80",
+        colorClasses,
+        "disabled:text-disabled-text disabled:border-disabled-outline",
+        ButtonUtil.paddingMapping[size],
+        className
+      ),
+      ...restProps,
+      children: [
+        startIcon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            className: (0, import_clsx.default)(
+              iconColorClasses,
+              "group-disabled:text-disabled-icon"
+            ),
+            children: startIcon
+          }
+        ),
+        children,
+        endIcon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            className: (0, import_clsx.default)(
+              iconColorClasses,
+              "group-disabled:text-disabled-icon"
+            ),
+            children: endIcon
+          }
+        )
+      ]
+    }
+  );
+};
+var TextButton = ({
+  children,
+  color = "neutral",
+  size = "medium",
+  startIcon,
+  endIcon,
+  onClick,
+  coloredHoverBackground = true,
+  className,
+  ...restProps
+}) => {
+  const colorClasses = {
+    primary: "not-disabled:bg-transparent not-disabled:text-button-text-primary-text focus-style-none focus-visible:ring-2 not-disabled:focus-visible:ring-button-text-primary-text",
+    negative: "not-disabled:bg-transparent not-disabled:text-button-text-negative-text focus-style-none focus-visible:ring-2 not-disabled:focus-visible:ring-button-text-negative-text",
+    neutral: "not-disabled:bg-transparent not-disabled:text-button-text-neutral-text focus-style-none focus-visible:ring-2 not-disabled:focus-visible:ring-button-text-neutral-text"
+  }[color];
+  const backgroundColor = {
+    primary: "not-disabled:hover:bg-button-text-primary-text/20 not-disabled:focus-visible:bg-button-text-primary-text/20",
+    negative: "not-disabled:hover:bg-button-text-negative-text/20 not-disabled:focus-visible:bg-button-text-negative-text/20",
+    neutral: "not-disabled:hover:bg-button-text-neutral-text/20 not-disabled:focus-visible:bg-button-text-neutral-text/20"
+  }[color];
+  const iconColorClasses = {
+    primary: "not-group-disabled:text-button-text-primary-icon",
+    negative: "not-group-disabled:text-button-text-negative-icon",
+    neutral: "not-group-disabled:text-button-text-neutral-icon"
+  }[color];
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "button",
+    {
+      onClick,
+      className: (0, import_clsx.default)(
+        "group font-semibold",
+        "disabled:text-disabled-text",
+        colorClasses,
+        {
+          [backgroundColor]: coloredHoverBackground,
+          "not-disabled:hover:bg-button-text-hover-background": !coloredHoverBackground
+        },
+        ButtonUtil.paddingMapping[size],
+        className
+      ),
+      ...restProps,
+      children: [
+        startIcon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            className: (0, import_clsx.default)(
+              iconColorClasses,
+              "group-disabled:text-disabled-icon"
+            ),
+            children: startIcon
+          }
+        ),
+        children,
+        endIcon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            className: (0, import_clsx.default)(
+              iconColorClasses,
+              "group-disabled:text-disabled-icon"
+            ),
+            children: endIcon
+          }
+        )
+      ]
+    }
+  );
+};
+var IconButton = (0, import_react.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__ */ (0, import_jsx_runtime.jsx)(
+    "button",
+    {
+      ref,
+      className: (0, import_clsx.default)(
+        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/components/user-action/Checkbox.tsx
+var import_react2 = require("react");
+var import_lucide_react = require("lucide-react");
+var import_clsx2 = __toESM(require("clsx"));
+
+// node_modules/@radix-ui/react-checkbox/dist/index.mjs
+var React10 = __toESM(require("react"), 1);
+
+// node_modules/@radix-ui/react-compose-refs/dist/index.mjs
+var React = __toESM(require("react"), 1);
+function setRef(ref, value) {
+  if (typeof ref === "function") {
+    return ref(value);
+  } else if (ref !== null && ref !== void 0) {
+    ref.current = value;
+  }
+}
+function composeRefs(...refs) {
+  return (node) => {
+    let hasCleanup = false;
+    const cleanups = refs.map((ref) => {
+      const cleanup = setRef(ref, node);
+      if (!hasCleanup && typeof cleanup == "function") {
+        hasCleanup = true;
+      }
+      return cleanup;
+    });
+    if (hasCleanup) {
+      return () => {
+        for (let i = 0; i < cleanups.length; i++) {
+          const cleanup = cleanups[i];
+          if (typeof cleanup == "function") {
+            cleanup();
+          } else {
+            setRef(refs[i], null);
+          }
+        }
+      };
+    }
+  };
+}
+function useComposedRefs(...refs) {
+  return React.useCallback(composeRefs(...refs), refs);
+}
+
+// node_modules/@radix-ui/react-context/dist/index.mjs
+var React2 = __toESM(require("react"), 1);
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function createContextScope(scopeName, createContextScopeDeps = []) {
+  let defaultContexts = [];
+  function createContext32(rootComponentName, defaultContext) {
+    const BaseContext = React2.createContext(defaultContext);
+    const index = defaultContexts.length;
+    defaultContexts = [...defaultContexts, defaultContext];
+    const Provider = (props) => {
+      const { scope, children, ...context } = props;
+      const Context = scope?.[scopeName]?.[index] || BaseContext;
+      const value = React2.useMemo(() => context, Object.values(context));
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Context.Provider, { value, children });
+    };
+    Provider.displayName = rootComponentName + "Provider";
+    function useContext22(consumerName, scope) {
+      const Context = scope?.[scopeName]?.[index] || BaseContext;
+      const context = React2.useContext(Context);
+      if (context) return context;
+      if (defaultContext !== void 0) return defaultContext;
+      throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
+    }
+    return [Provider, useContext22];
+  }
+  const createScope = () => {
+    const scopeContexts = defaultContexts.map((defaultContext) => {
+      return React2.createContext(defaultContext);
+    });
+    return function useScope(scope) {
+      const contexts = scope?.[scopeName] || scopeContexts;
+      return React2.useMemo(
+        () => ({ [`__scope${scopeName}`]: { ...scope, [scopeName]: contexts } }),
+        [scope, contexts]
+      );
+    };
+  };
+  createScope.scopeName = scopeName;
+  return [createContext32, composeContextScopes(createScope, ...createContextScopeDeps)];
+}
+function composeContextScopes(...scopes) {
+  const baseScope = scopes[0];
+  if (scopes.length === 1) return baseScope;
+  const createScope = () => {
+    const scopeHooks = scopes.map((createScope2) => ({
+      useScope: createScope2(),
+      scopeName: createScope2.scopeName
+    }));
+    return function useComposedScopes(overrideScopes) {
+      const nextScopes = scopeHooks.reduce((nextScopes2, { useScope, scopeName }) => {
+        const scopeProps = useScope(overrideScopes);
+        const currentScope = scopeProps[`__scope${scopeName}`];
+        return { ...nextScopes2, ...currentScope };
+      }, {});
+      return React2.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
+    };
+  };
+  createScope.scopeName = baseScope.scopeName;
+  return createScope;
+}
+
+// node_modules/@radix-ui/primitive/dist/index.mjs
+function composeEventHandlers(originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) {
+  return function handleEvent(event) {
+    originalEventHandler?.(event);
+    if (checkForDefaultPrevented === false || !event.defaultPrevented) {
+      return ourEventHandler?.(event);
+    }
+  };
+}
+
+// node_modules/@radix-ui/react-use-controllable-state/dist/index.mjs
+var React4 = __toESM(require("react"), 1);
+
+// node_modules/@radix-ui/react-use-layout-effect/dist/index.mjs
+var React3 = __toESM(require("react"), 1);
+var useLayoutEffect2 = globalThis?.document ? React3.useLayoutEffect : () => {
+};
+
+// node_modules/@radix-ui/react-use-controllable-state/dist/index.mjs
+var React22 = __toESM(require("react"), 1);
+var useInsertionEffect = React4[" useInsertionEffect ".trim().toString()] || useLayoutEffect2;
+function useControllableState({
+  prop,
+  defaultProp,
+  onChange = () => {
+  },
+  caller
+}) {
+  const [uncontrolledProp, setUncontrolledProp, onChangeRef] = useUncontrolledState({
+    defaultProp,
+    onChange
+  });
+  const isControlled = prop !== void 0;
+  const value = isControlled ? prop : uncontrolledProp;
+  if (true) {
+    const isControlledRef = React4.useRef(prop !== void 0);
+    React4.useEffect(() => {
+      const wasControlled = isControlledRef.current;
+      if (wasControlled !== isControlled) {
+        const from = wasControlled ? "controlled" : "uncontrolled";
+        const to = isControlled ? "controlled" : "uncontrolled";
+        console.warn(
+          `${caller} is changing from ${from} to ${to}. Components should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled value for the lifetime of the component.`
+        );
+      }
+      isControlledRef.current = isControlled;
+    }, [isControlled, caller]);
+  }
+  const setValue = React4.useCallback(
+    (nextValue) => {
+      if (isControlled) {
+        const value2 = isFunction(nextValue) ? nextValue(prop) : nextValue;
+        if (value2 !== prop) {
+          onChangeRef.current?.(value2);
+        }
+      } else {
+        setUncontrolledProp(nextValue);
+      }
+    },
+    [isControlled, prop, setUncontrolledProp, onChangeRef]
+  );
+  return [value, setValue];
+}
+function useUncontrolledState({
+  defaultProp,
+  onChange
+}) {
+  const [value, setValue] = React4.useState(defaultProp);
+  const prevValueRef = React4.useRef(value);
+  const onChangeRef = React4.useRef(onChange);
+  useInsertionEffect(() => {
+    onChangeRef.current = onChange;
+  }, [onChange]);
+  React4.useEffect(() => {
+    if (prevValueRef.current !== value) {
+      onChangeRef.current?.(value);
+      prevValueRef.current = value;
+    }
+  }, [value, prevValueRef]);
+  return [value, setValue, onChangeRef];
+}
+function isFunction(value) {
+  return typeof value === "function";
+}
+var SYNC_STATE = Symbol("RADIX:SYNC_STATE");
+
+// node_modules/@radix-ui/react-use-previous/dist/index.mjs
+var React5 = __toESM(require("react"), 1);
+function usePrevious(value) {
+  const ref = React5.useRef({ value, previous: value });
+  return React5.useMemo(() => {
+    if (ref.current.value !== value) {
+      ref.current.previous = ref.current.value;
+      ref.current.value = value;
+    }
+    return ref.current.previous;
+  }, [value]);
+}
+
+// node_modules/@radix-ui/react-use-size/dist/index.mjs
+var React6 = __toESM(require("react"), 1);
+function useSize(element) {
+  const [size, setSize] = React6.useState(void 0);
+  useLayoutEffect2(() => {
+    if (element) {
+      setSize({ width: element.offsetWidth, height: element.offsetHeight });
+      const resizeObserver = new ResizeObserver((entries) => {
+        if (!Array.isArray(entries)) {
+          return;
+        }
+        if (!entries.length) {
+          return;
+        }
+        const entry = entries[0];
+        let width;
+        let height;
+        if ("borderBoxSize" in entry) {
+          const borderSizeEntry = entry["borderBoxSize"];
+          const borderSize = Array.isArray(borderSizeEntry) ? borderSizeEntry[0] : borderSizeEntry;
+          width = borderSize["inlineSize"];
+          height = borderSize["blockSize"];
+        } else {
+          width = element.offsetWidth;
+          height = element.offsetHeight;
+        }
+        setSize({ width, height });
+      });
+      resizeObserver.observe(element, { box: "border-box" });
+      return () => resizeObserver.unobserve(element);
+    } else {
+      setSize(void 0);
+    }
+  }, [element]);
+  return size;
+}
+
+// node_modules/@radix-ui/react-presence/dist/index.mjs
+var React23 = __toESM(require("react"), 1);
+var React7 = __toESM(require("react"), 1);
+function useStateMachine(initialState, machine) {
+  return React7.useReducer((state, event) => {
+    const nextState = machine[state][event];
+    return nextState ?? state;
+  }, initialState);
+}
+var Presence = (props) => {
+  const { present, children } = props;
+  const presence = usePresence(present);
+  const child = typeof children === "function" ? children({ present: presence.isPresent }) : React23.Children.only(children);
+  const ref = useComposedRefs(presence.ref, getElementRef(child));
+  const forceMount = typeof children === "function";
+  return forceMount || presence.isPresent ? React23.cloneElement(child, { ref }) : null;
+};
+Presence.displayName = "Presence";
+function usePresence(present) {
+  const [node, setNode] = React23.useState();
+  const stylesRef = React23.useRef(null);
+  const prevPresentRef = React23.useRef(present);
+  const prevAnimationNameRef = React23.useRef("none");
+  const initialState = present ? "mounted" : "unmounted";
+  const [state, send] = useStateMachine(initialState, {
+    mounted: {
+      UNMOUNT: "unmounted",
+      ANIMATION_OUT: "unmountSuspended"
+    },
+    unmountSuspended: {
+      MOUNT: "mounted",
+      ANIMATION_END: "unmounted"
+    },
+    unmounted: {
+      MOUNT: "mounted"
+    }
+  });
+  React23.useEffect(() => {
+    const currentAnimationName = getAnimationName(stylesRef.current);
+    prevAnimationNameRef.current = state === "mounted" ? currentAnimationName : "none";
+  }, [state]);
+  useLayoutEffect2(() => {
+    const styles = stylesRef.current;
+    const wasPresent = prevPresentRef.current;
+    const hasPresentChanged = wasPresent !== present;
+    if (hasPresentChanged) {
+      const prevAnimationName = prevAnimationNameRef.current;
+      const currentAnimationName = getAnimationName(styles);
+      if (present) {
+        send("MOUNT");
+      } else if (currentAnimationName === "none" || styles?.display === "none") {
+        send("UNMOUNT");
+      } else {
+        const isAnimating = prevAnimationName !== currentAnimationName;
+        if (wasPresent && isAnimating) {
+          send("ANIMATION_OUT");
+        } else {
+          send("UNMOUNT");
+        }
+      }
+      prevPresentRef.current = present;
+    }
+  }, [present, send]);
+  useLayoutEffect2(() => {
+    if (node) {
+      let timeoutId;
+      const ownerWindow = node.ownerDocument.defaultView ?? window;
+      const handleAnimationEnd = (event) => {
+        const currentAnimationName = getAnimationName(stylesRef.current);
+        const isCurrentAnimation = currentAnimationName.includes(event.animationName);
+        if (event.target === node && isCurrentAnimation) {
+          send("ANIMATION_END");
+          if (!prevPresentRef.current) {
+            const currentFillMode = node.style.animationFillMode;
+            node.style.animationFillMode = "forwards";
+            timeoutId = ownerWindow.setTimeout(() => {
+              if (node.style.animationFillMode === "forwards") {
+                node.style.animationFillMode = currentFillMode;
+              }
+            });
+          }
+        }
+      };
+      const handleAnimationStart = (event) => {
+        if (event.target === node) {
+          prevAnimationNameRef.current = getAnimationName(stylesRef.current);
+        }
+      };
+      node.addEventListener("animationstart", handleAnimationStart);
+      node.addEventListener("animationcancel", handleAnimationEnd);
+      node.addEventListener("animationend", handleAnimationEnd);
+      return () => {
+        ownerWindow.clearTimeout(timeoutId);
+        node.removeEventListener("animationstart", handleAnimationStart);
+        node.removeEventListener("animationcancel", handleAnimationEnd);
+        node.removeEventListener("animationend", handleAnimationEnd);
+      };
+    } else {
+      send("ANIMATION_END");
+    }
+  }, [node, send]);
+  return {
+    isPresent: ["mounted", "unmountSuspended"].includes(state),
+    ref: React23.useCallback((node2) => {
+      stylesRef.current = node2 ? getComputedStyle(node2) : null;
+      setNode(node2);
+    }, [])
+  };
+}
+function getAnimationName(styles) {
+  return styles?.animationName || "none";
+}
+function getElementRef(element) {
+  let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
+  let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.ref;
+  }
+  getter = Object.getOwnPropertyDescriptor(element, "ref")?.get;
+  mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.props.ref;
+  }
+  return element.props.ref || element.ref;
+}
+
+// node_modules/@radix-ui/react-primitive/dist/index.mjs
+var React9 = __toESM(require("react"), 1);
+var ReactDOM = __toESM(require("react-dom"), 1);
+
+// node_modules/@radix-ui/react-slot/dist/index.mjs
+var React8 = __toESM(require("react"), 1);
+var import_jsx_runtime3 = require("react/jsx-runtime");
+// @__NO_SIDE_EFFECTS__
+function createSlot(ownerName) {
+  const SlotClone = /* @__PURE__ */ createSlotClone(ownerName);
+  const Slot2 = React8.forwardRef((props, forwardedRef) => {
+    const { children, ...slotProps } = props;
+    const childrenArray = React8.Children.toArray(children);
+    const slottable = childrenArray.find(isSlottable);
+    if (slottable) {
+      const newElement = slottable.props.children;
+      const newChildren = childrenArray.map((child) => {
+        if (child === slottable) {
+          if (React8.Children.count(newElement) > 1) return React8.Children.only(null);
+          return React8.isValidElement(newElement) ? newElement.props.children : null;
+        } else {
+          return child;
+        }
+      });
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SlotClone, { ...slotProps, ref: forwardedRef, children: React8.isValidElement(newElement) ? React8.cloneElement(newElement, void 0, newChildren) : null });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SlotClone, { ...slotProps, ref: forwardedRef, children });
+  });
+  Slot2.displayName = `${ownerName}.Slot`;
+  return Slot2;
+}
+// @__NO_SIDE_EFFECTS__
+function createSlotClone(ownerName) {
+  const SlotClone = React8.forwardRef((props, forwardedRef) => {
+    const { children, ...slotProps } = props;
+    if (React8.isValidElement(children)) {
+      const childrenRef = getElementRef2(children);
+      const props2 = mergeProps(slotProps, children.props);
+      if (children.type !== React8.Fragment) {
+        props2.ref = forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef;
+      }
+      return React8.cloneElement(children, props2);
+    }
+    return React8.Children.count(children) > 1 ? React8.Children.only(null) : null;
+  });
+  SlotClone.displayName = `${ownerName}.SlotClone`;
+  return SlotClone;
+}
+var SLOTTABLE_IDENTIFIER = Symbol("radix.slottable");
+function isSlottable(child) {
+  return React8.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
+}
+function mergeProps(slotProps, childProps) {
+  const overrideProps = { ...childProps };
+  for (const propName in childProps) {
+    const slotPropValue = slotProps[propName];
+    const childPropValue = childProps[propName];
+    const isHandler = /^on[A-Z]/.test(propName);
+    if (isHandler) {
+      if (slotPropValue && childPropValue) {
+        overrideProps[propName] = (...args) => {
+          const result = childPropValue(...args);
+          slotPropValue(...args);
+          return result;
+        };
+      } else if (slotPropValue) {
+        overrideProps[propName] = slotPropValue;
+      }
+    } else if (propName === "style") {
+      overrideProps[propName] = { ...slotPropValue, ...childPropValue };
+    } else if (propName === "className") {
+      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
+    }
+  }
+  return { ...slotProps, ...overrideProps };
+}
+function getElementRef2(element) {
+  let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
+  let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.ref;
+  }
+  getter = Object.getOwnPropertyDescriptor(element, "ref")?.get;
+  mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.props.ref;
+  }
+  return element.props.ref || element.ref;
+}
+
+// node_modules/@radix-ui/react-primitive/dist/index.mjs
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var NODES = [
+  "a",
+  "button",
+  "div",
+  "form",
+  "h2",
+  "h3",
+  "img",
+  "input",
+  "label",
+  "li",
+  "nav",
+  "ol",
+  "p",
+  "select",
+  "span",
+  "svg",
+  "ul"
+];
+var Primitive = NODES.reduce((primitive, node) => {
+  const Slot = createSlot(`Primitive.${node}`);
+  const Node2 = React9.forwardRef((props, forwardedRef) => {
+    const { asChild, ...primitiveProps } = props;
+    const Comp = asChild ? Slot : node;
+    if (typeof window !== "undefined") {
+      window[Symbol.for("radix-ui")] = true;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Comp, { ...primitiveProps, ref: forwardedRef });
+  });
+  Node2.displayName = `Primitive.${node}`;
+  return { ...primitive, [node]: Node2 };
+}, {});
+
+// node_modules/@radix-ui/react-checkbox/dist/index.mjs
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var CHECKBOX_NAME = "Checkbox";
+var [createCheckboxContext, createCheckboxScope] = createContextScope(CHECKBOX_NAME);
+var [CheckboxProviderImpl, useCheckboxContext] = createCheckboxContext(CHECKBOX_NAME);
+function CheckboxProvider(props) {
+  const {
+    __scopeCheckbox,
+    checked: checkedProp,
+    children,
+    defaultChecked,
+    disabled,
+    form,
+    name,
+    onCheckedChange,
+    required,
+    value = "on",
+    // @ts-expect-error
+    internal_do_not_use_render
+  } = props;
+  const [checked, setChecked] = useControllableState({
+    prop: checkedProp,
+    defaultProp: defaultChecked ?? false,
+    onChange: onCheckedChange,
+    caller: CHECKBOX_NAME
+  });
+  const [control, setControl] = React10.useState(null);
+  const [bubbleInput, setBubbleInput] = React10.useState(null);
+  const hasConsumerStoppedPropagationRef = React10.useRef(false);
+  const isFormControl = control ? !!form || !!control.closest("form") : (
+    // We set this to true by default so that events bubble to forms without JS (SSR)
+    true
+  );
+  const context = {
+    checked,
+    disabled,
+    setChecked,
+    control,
+    setControl,
+    name,
+    form,
+    value,
+    hasConsumerStoppedPropagationRef,
+    required,
+    defaultChecked: isIndeterminate(defaultChecked) ? false : defaultChecked,
+    isFormControl,
+    bubbleInput,
+    setBubbleInput
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    CheckboxProviderImpl,
+    {
+      scope: __scopeCheckbox,
+      ...context,
+      children: isFunction2(internal_do_not_use_render) ? internal_do_not_use_render(context) : children
+    }
+  );
+}
+var TRIGGER_NAME = "CheckboxTrigger";
+var CheckboxTrigger = React10.forwardRef(
+  ({ __scopeCheckbox, onKeyDown, onClick, ...checkboxProps }, forwardedRef) => {
+    const {
+      control,
+      value,
+      disabled,
+      checked,
+      required,
+      setControl,
+      setChecked,
+      hasConsumerStoppedPropagationRef,
+      isFormControl,
+      bubbleInput
+    } = useCheckboxContext(TRIGGER_NAME, __scopeCheckbox);
+    const composedRefs = useComposedRefs(forwardedRef, setControl);
+    const initialCheckedStateRef = React10.useRef(checked);
+    React10.useEffect(() => {
+      const form = control?.form;
+      if (form) {
+        const reset = () => setChecked(initialCheckedStateRef.current);
+        form.addEventListener("reset", reset);
+        return () => form.removeEventListener("reset", reset);
+      }
+    }, [control, setChecked]);
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      Primitive.button,
+      {
+        type: "button",
+        role: "checkbox",
+        "aria-checked": isIndeterminate(checked) ? "mixed" : checked,
+        "aria-required": required,
+        "data-state": getState(checked),
+        "data-disabled": disabled ? "" : void 0,
+        disabled,
+        value,
+        ...checkboxProps,
+        ref: composedRefs,
+        onKeyDown: composeEventHandlers(onKeyDown, (event) => {
+          if (event.key === "Enter") event.preventDefault();
+        }),
+        onClick: composeEventHandlers(onClick, (event) => {
+          setChecked((prevChecked) => isIndeterminate(prevChecked) ? true : !prevChecked);
+          if (bubbleInput && isFormControl) {
+            hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();
+            if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();
+          }
+        })
+      }
+    );
+  }
+);
+CheckboxTrigger.displayName = TRIGGER_NAME;
+var Checkbox = React10.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      __scopeCheckbox,
+      name,
+      checked,
+      defaultChecked,
+      required,
+      disabled,
+      value,
+      onCheckedChange,
+      form,
+      ...checkboxProps
+    } = props;
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      CheckboxProvider,
+      {
+        __scopeCheckbox,
+        checked,
+        defaultChecked,
+        disabled,
+        required,
+        onCheckedChange,
+        name,
+        form,
+        value,
+        internal_do_not_use_render: ({ isFormControl }) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            CheckboxTrigger,
+            {
+              ...checkboxProps,
+              ref: forwardedRef,
+              __scopeCheckbox
+            }
+          ),
+          isFormControl && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            CheckboxBubbleInput,
+            {
+              __scopeCheckbox
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+Checkbox.displayName = CHECKBOX_NAME;
+var INDICATOR_NAME = "CheckboxIndicator";
+var CheckboxIndicator = React10.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeCheckbox, forceMount, ...indicatorProps } = props;
+    const context = useCheckboxContext(INDICATOR_NAME, __scopeCheckbox);
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      Presence,
+      {
+        present: forceMount || isIndeterminate(context.checked) || context.checked === true,
+        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          Primitive.span,
+          {
+            "data-state": getState(context.checked),
+            "data-disabled": context.disabled ? "" : void 0,
+            ...indicatorProps,
+            ref: forwardedRef,
+            style: { pointerEvents: "none", ...props.style }
+          }
+        )
+      }
+    );
+  }
+);
+CheckboxIndicator.displayName = INDICATOR_NAME;
+var BUBBLE_INPUT_NAME = "CheckboxBubbleInput";
+var CheckboxBubbleInput = React10.forwardRef(
+  ({ __scopeCheckbox, ...props }, forwardedRef) => {
+    const {
+      control,
+      hasConsumerStoppedPropagationRef,
+      checked,
+      defaultChecked,
+      required,
+      disabled,
+      name,
+      value,
+      form,
+      bubbleInput,
+      setBubbleInput
+    } = useCheckboxContext(BUBBLE_INPUT_NAME, __scopeCheckbox);
+    const composedRefs = useComposedRefs(forwardedRef, setBubbleInput);
+    const prevChecked = usePrevious(checked);
+    const controlSize = useSize(control);
+    React10.useEffect(() => {
+      const input = bubbleInput;
+      if (!input) return;
+      const inputProto = window.HTMLInputElement.prototype;
+      const descriptor = Object.getOwnPropertyDescriptor(
+        inputProto,
+        "checked"
+      );
+      const setChecked = descriptor.set;
+      const bubbles = !hasConsumerStoppedPropagationRef.current;
+      if (prevChecked !== checked && setChecked) {
+        const event = new Event("click", { bubbles });
+        input.indeterminate = isIndeterminate(checked);
+        setChecked.call(input, isIndeterminate(checked) ? false : checked);
+        input.dispatchEvent(event);
+      }
+    }, [bubbleInput, prevChecked, checked, hasConsumerStoppedPropagationRef]);
+    const defaultCheckedRef = React10.useRef(isIndeterminate(checked) ? false : checked);
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      Primitive.input,
+      {
+        type: "checkbox",
+        "aria-hidden": true,
+        defaultChecked: defaultChecked ?? defaultCheckedRef.current,
+        required,
+        disabled,
+        name,
+        value,
+        form,
+        ...props,
+        tabIndex: -1,
+        ref: composedRefs,
+        style: {
+          ...props.style,
+          ...controlSize,
+          position: "absolute",
+          pointerEvents: "none",
+          opacity: 0,
+          margin: 0,
+          // We transform because the input is absolutely positioned but we have
+          // rendered it **after** the button. This pulls it back to sit on top
+          // of the button.
+          transform: "translateX(-100%)"
+        }
+      }
+    );
+  }
+);
+CheckboxBubbleInput.displayName = BUBBLE_INPUT_NAME;
+function isFunction2(value) {
+  return typeof value === "function";
+}
+function isIndeterminate(checked) {
+  return checked === "indeterminate";
+}
+function getState(checked) {
+  return isIndeterminate(checked) ? "indeterminate" : checked ? "checked" : "unchecked";
+}
+
+// src/components/user-action/Checkbox.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var checkboxSizeMapping = {
+  sm: "size-5 border-1",
+  md: "size-6 border-1",
+  lg: "size-8 border-2"
+};
+var checkboxIconSizeMapping = {
+  sm: "size-4 stroke-3",
+  md: "size-5 stroke-3",
+  lg: "size-7 stroke-3"
+};
+var Checkbox2 = ({
+  disabled,
+  checked = false,
+  indeterminate = false,
+  onChange,
+  size = "md",
+  className = "",
+  ...props
+}) => {
+  const usedSizeClass = checkboxSizeMapping[size];
+  const innerIconSize = checkboxIconSizeMapping[size];
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    Checkbox,
+    {
+      ...props,
+      disabled,
+      checked: indeterminate ? "indeterminate" : checked,
+      onCheckedChange: onChange,
+      className: (0, import_clsx2.default)(
+        usedSizeClass,
+        `flex-col-0 items-center justify-center rounded outline-none`,
+        {
+          "text-disabled-text border-disabled-outline bg-disabled-background cursor-not-allowed": disabled,
+          "hover:border-primary": !disabled,
+          "bg-input-background": !disabled && !checked,
+          "bg-primary/30 border-primary text-primary": !disabled && (checked || indeterminate)
+        },
+        className
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(CheckboxIndicator, { children: [
+        !checked && !indeterminate && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: (0, import_clsx2.default)("bg-input-background", innerIconSize) }),
+        checked && !indeterminate && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react.Check, { className: innerIconSize }),
+        indeterminate && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react.Minus, { className: innerIconSize })
+      ] })
+    }
+  );
+};
+var CheckboxUncontrolled = ({
+  checked: initialChecked,
+  onChange,
+  ...props
+}) => {
+  const [checked, setChecked] = (0, import_react2.useState)(initialChecked);
+  (0, import_react2.useEffect)(() => {
+    setChecked(initialChecked);
+  }, [initialChecked]);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    Checkbox2,
+    {
+      ...props,
+      checked,
+      onChange: (value) => {
+        setChecked(value);
+        if (onChange) {
+          onChange(value);
+        }
+      }
+    }
+  );
+};
+
+// src/components/user-action/CopyToClipboardWrapper.tsx
+var import_react5 = require("react");
+var import_clsx3 = require("clsx");
+
+// 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/localization/LanguageProvider.tsx
+var import_react4 = require("react");
+
+// src/hooks/useLocalStorage.ts
+var import_react3 = require("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
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var LanguageContext = (0, import_react4.createContext)({
+  language: LanguageUtil.DEFAULT_LANGUAGE,
+  setLanguage: (v) => v
+});
+var useLanguage = () => (0, import_react4.useContext)(LanguageContext);
+var useLocale = (overWriteLanguage) => {
+  const { language } = useLanguage();
+  const mapping = {
+    en: "en-US",
+    de: "de-DE"
+  };
+  return mapping[overWriteLanguage ?? language];
+};
+
+// 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/utils/writeToClipboard.ts
+var writeToClipboard = (text) => {
+  return navigator.clipboard.writeText(text);
+};
+
+// src/components/user-action/CopyToClipboardWrapper.tsx
+var import_lucide_react2 = require("lucide-react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var CopyToClipboardWrapper = ({
+  children,
+  textToCopy,
+  tooltipClassName = "",
+  containerClassName = "",
+  position = "bottom",
+  zIndex = 10
+}) => {
+  const translation = useTranslation([formTranslation]);
+  const [isShowingIndication, setIsShowingIndication] = (0, import_react5.useState)(false);
+  const [isShowingConfirmation, setIsShowingConfirmation] = (0, import_react5.useState)(false);
+  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-tooltip-background border-l-transparent border-r-transparent`,
+    bottom: `bottom-full left-1/2 -translate-x-1/2 border-b-tooltip-background border-l-transparent border-r-transparent`,
+    left: `left-full top-1/2 -translate-y-1/2 border-l-tooltip-background border-t-transparent border-b-transparent`,
+    right: `right-full top-1/2 -translate-y-1/2 border-r-tooltip-background 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_runtime8.jsxs)(
+    "div",
+    {
+      className: (0, import_clsx3.clsx)("relative inline-block cursor-copy", containerClassName),
+      onMouseEnter: () => {
+        setIsShowingIndication(true);
+      },
+      onMouseLeave: () => {
+        setIsShowingIndication(false);
+        setIsShowingConfirmation(false);
+      },
+      onClick: () => {
+        writeToClipboard(textToCopy).catch(console.error);
+        setIsShowingIndication(false);
+        setIsShowingConfirmation(true);
+      },
+      children: [
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+          "div",
+          {
+            className: (0, import_clsx3.clsx)(
+              `absolute text-xs font-semibold text-tooltip-text px-2 py-1 rounded whitespace-nowrap
+           shadow-around-md bg-tooltip-background cursor-default pointer-events-none`,
+              "transition-opacity duration-200",
+              positionClasses[position],
+              tooltipClassName
+            ),
+            style: {
+              zIndex,
+              opacity: isShowingIndication || isShowingConfirmation ? 1 : 0
+            },
+            children: [
+              isShowingConfirmation && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex-row-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react2.CheckIcon, { size: 16, className: "text-positive" }),
+                translation("copied")
+              ] }),
+              isShowingIndication && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex-row-1 text-description", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react2.Copy, { size: 16 }),
+                translation("clickToCopy")
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                "div",
+                {
+                  className: (0, import_clsx3.clsx)(`absolute w-0 h-0`, triangleClasses[position]),
+                  style: { ...triangleStyle[position], zIndex: zIndex + 1 }
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/components/user-action/DateAndTimePicker.tsx
+var import_clsx9 = __toESM(require("clsx"));
+
+// src/utils/noop.ts
+var noop = () => void 0;
+
+// src/utils/array.ts
+var equalSizeGroups = (array, groupSize) => {
+  if (groupSize <= 0) {
+    console.warn(`group size should be greater than 0: groupSize = ${groupSize}`);
+    return [[...array]];
+  }
+  const groups = [];
+  for (let i = 0; i < array.length; i += groupSize) {
+    groups.push(array.slice(i, Math.min(i + groupSize, array.length)));
+  }
+  return groups;
+};
+var defaultRangeOptions = {
+  allowEmptyRange: false,
+  stepSize: 1,
+  exclusiveStart: false,
+  exclusiveEnd: true
+};
+var range = (endOrRange, options) => {
+  const { allowEmptyRange, stepSize, exclusiveStart, exclusiveEnd } = { ...defaultRangeOptions, ...options };
+  let start = 0;
+  let end;
+  if (typeof endOrRange === "number") {
+    end = endOrRange;
+  } else {
+    start = endOrRange[0];
+    end = endOrRange[1];
+  }
+  if (!exclusiveEnd) {
+    end -= 1;
+  }
+  if (exclusiveStart) {
+    start += 1;
+  }
+  if (end - 1 < start) {
+    if (!allowEmptyRange) {
+      console.warn(`range: end (${end}) < start (${start}) should be allowed explicitly, set options.allowEmptyRange to true`);
+    }
+    return [];
+  }
+  return Array.from({ length: end - start }, (_, index) => index * stepSize + start);
+};
+var closestMatch = (list, firstCloser) => {
+  return list.reduce((item1, item2) => {
+    return firstCloser(item1, item2) ? item1 : item2;
+  });
+};
+var getNeighbours = (list, item, neighbourDistance = 2) => {
+  const index = list.indexOf(item);
+  const totalItems = neighbourDistance * 2 + 1;
+  if (list.length < totalItems) {
+    console.warn("List is to short");
+    return list;
+  }
+  if (index === -1) {
+    console.error("item not found in list");
+    return list.splice(0, totalItems);
+  }
+  let start = index - neighbourDistance;
+  if (start < 0) {
+    start += list.length;
+  }
+  const end = (index + neighbourDistance + 1) % list.length;
+  const result = [];
+  let ignoreOnce = list.length === totalItems;
+  for (let i = start; i !== end || ignoreOnce; i = (i + 1) % list.length) {
+    result.push(list[i]);
+    if (end === i && ignoreOnce) {
+      ignoreOnce = false;
+    }
+  }
+  return result;
+};
+
+// src/utils/date.ts
+var monthsList = ["january", "february", "march", "april", "may", "june", "july", "august", "september", "october", "november", "december"];
+var weekDayList = ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"];
+var changeDuration = (date, duration, isAdding) => {
+  const {
+    years = 0,
+    months = 0,
+    days = 0,
+    hours = 0,
+    minutes = 0,
+    seconds = 0,
+    milliseconds = 0
+  } = duration;
+  if (years < 0) {
+    console.error(`Range error years must be greater than 0: received ${years}`);
+    return new Date(date);
+  }
+  if (months < 0 || months > 11) {
+    console.error(`Range error month must be 0 <= month <= 11: received ${months}`);
+    return new Date(date);
+  }
+  if (days < 0) {
+    console.error(`Range error days must be greater than 0: received ${days}`);
+    return new Date(date);
+  }
+  if (hours < 0 || hours > 23) {
+    console.error(`Range error hours must be 0 <= hours <= 23: received ${hours}`);
+    return new Date(date);
+  }
+  if (minutes < 0 || minutes > 59) {
+    console.error(`Range error minutes must be 0 <= minutes <= 59: received ${minutes}`);
+    return new Date(date);
+  }
+  if (seconds < 0 || seconds > 59) {
+    console.error(`Range error seconds must be 0 <= seconds <= 59: received ${seconds}`);
+    return new Date(date);
+  }
+  if (milliseconds < 0) {
+    console.error(`Range error seconds must be greater than 0: received ${milliseconds}`);
+    return new Date(date);
+  }
+  const multiplier = isAdding ? 1 : -1;
+  const newDate = new Date(date);
+  newDate.setFullYear(newDate.getFullYear() + multiplier * years);
+  newDate.setMonth(newDate.getMonth() + multiplier * months);
+  newDate.setDate(newDate.getDate() + multiplier * days);
+  newDate.setHours(newDate.getHours() + multiplier * hours);
+  newDate.setMinutes(newDate.getMinutes() + multiplier * minutes);
+  newDate.setSeconds(newDate.getSeconds() + multiplier * seconds);
+  newDate.setMilliseconds(newDate.getMilliseconds() + multiplier * milliseconds);
+  return newDate;
+};
+var addDuration = (date, duration) => {
+  return changeDuration(date, duration, true);
+};
+var subtractDuration = (date, duration) => {
+  return changeDuration(date, duration, false);
+};
+var isInTimeSpan = (value, startDate, endDate) => {
+  if (startDate && endDate) {
+    console.assert(startDate <= endDate);
+    return startDate <= value && value <= endDate;
+  } else if (startDate) {
+    return startDate <= value;
+  } else if (endDate) {
+    return endDate >= value;
+  } else {
+    return true;
+  }
+};
+var equalDate = (date1, date2) => {
+  return date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth() && date1.getDate() === date2.getDate();
+};
+var getWeeksForCalenderMonth = (date, weekStart, weeks = 6) => {
+  const month = date.getMonth();
+  const year = date.getFullYear();
+  const dayList = [];
+  let currentDate = new Date(year, month, 1);
+  const weekStartIndex = weekDayList.indexOf(weekStart);
+  while (currentDate.getDay() !== weekStartIndex) {
+    currentDate = subtractDuration(currentDate, { days: 1 });
+  }
+  while (dayList.length < 7 * weeks) {
+    const date2 = new Date(currentDate);
+    date2.setHours(date2.getHours(), date2.getMinutes());
+    dayList.push(date2);
+    currentDate = addDuration(currentDate, { days: 1 });
+  }
+  return equalSizeGroups(dayList, 7);
+};
+
+// src/components/date/TimePicker.tsx
+var import_react6 = require("react");
+var import_react_custom_scrollbars_2 = require("react-custom-scrollbars-2");
+var import_clsx4 = __toESM(require("clsx"));
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var TimePicker = ({
+  time = /* @__PURE__ */ new Date(),
+  onChange = noop,
+  is24HourFormat = true,
+  minuteIncrement = "5min",
+  maxHeight = 300,
+  className = ""
+}) => {
+  const minuteRef = (0, import_react6.useRef)(null);
+  const hourRef = (0, import_react6.useRef)(null);
+  const isPM = time.getHours() >= 11;
+  const hours = is24HourFormat ? range(24) : range([1, 12], { exclusiveEnd: false });
+  let minutes = range(60);
+  (0, import_react6.useEffect)(() => {
+    const scrollToItem = () => {
+      if (minuteRef.current) {
+        const container = minuteRef.current.parentElement;
+        const hasOverflow = container.scrollHeight > maxHeight;
+        if (hasOverflow) {
+          minuteRef.current.scrollIntoView({
+            behavior: "instant",
+            block: "nearest"
+          });
+        }
+      }
+    };
+    scrollToItem();
+  }, [minuteRef, minuteRef.current]);
+  (0, import_react6.useEffect)(() => {
+    const scrollToItem = () => {
+      if (hourRef.current) {
+        const container = hourRef.current.parentElement;
+        const hasOverflow = container.scrollHeight > maxHeight;
+        if (hasOverflow) {
+          hourRef.current.scrollIntoView({
+            behavior: "instant",
+            block: "nearest"
+          });
+        }
+      }
+    };
+    scrollToItem();
+  }, [hourRef, hourRef.current]);
+  switch (minuteIncrement) {
+    case "5min":
+      minutes = minutes.filter((value) => value % 5 === 0);
+      break;
+    case "10min":
+      minutes = minutes.filter((value) => value % 10 === 0);
+      break;
+    case "15min":
+      minutes = minutes.filter((value) => value % 15 === 0);
+      break;
+    case "30min":
+      minutes = minutes.filter((value) => value % 30 === 0);
+      break;
+  }
+  const closestMinute = closestMatch(minutes, (item1, item2) => Math.abs(item1 - time.getMinutes()) < Math.abs(item2 - time.getMinutes()));
+  const style = (selected) => (0, import_clsx4.default)(
+    "chip-full hover:brightness-90 hover:bg-primary hover:text-on-primary rounded-md mr-3",
+    { "bg-primary text-on-primary": selected, "bg-white text-black": !selected }
+  );
+  const onChangeWrapper = (transformer) => {
+    const newDate = new Date(time);
+    transformer(newDate);
+    onChange(newDate);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: (0, import_clsx4.default)("flex-row-2 w-fit min-w-[150px] select-none", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_custom_scrollbars_2.Scrollbars, { autoHeight: true, autoHeightMax: maxHeight, style: { height: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex-col-1 h-full", children: hours.map((hour) => {
+      const currentHour = hour === time.getHours() - (!is24HourFormat && isPM ? 12 : 0);
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        "button",
+        {
+          ref: currentHour ? hourRef : void 0,
+          className: style(currentHour),
+          onClick: () => onChangeWrapper((newDate) => newDate.setHours(hour + (!is24HourFormat && isPM ? 12 : 0))),
+          children: hour.toString().padStart(2, "0")
+        },
+        hour
+      );
+    }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_custom_scrollbars_2.Scrollbars, { autoHeight: true, autoHeightMax: maxHeight, style: { height: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex-col-1 h-full", children: minutes.map((minute) => {
+      const currentMinute = minute === closestMinute;
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        "button",
+        {
+          ref: currentMinute ? minuteRef : void 0,
+          className: style(currentMinute),
+          onClick: () => onChangeWrapper((newDate) => newDate.setMinutes(minute)),
+          children: minute.toString().padStart(2, "0")
+        },
+        minute + minuteIncrement
+      );
+    }) }) }),
+    !is24HourFormat && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex-col-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        "button",
+        {
+          className: style(!isPM),
+          onClick: () => onChangeWrapper((newDate) => isPM && newDate.setHours(newDate.getHours() - 12)),
+          children: "AM"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        "button",
+        {
+          className: style(isPM),
+          onClick: () => onChangeWrapper((newDate) => !isPM && newDate.setHours(newDate.getHours() + 12)),
+          children: "PM"
+        }
+      )
+    ] })
+  ] });
+};
+
+// src/components/date/DatePicker.tsx
+var import_react10 = require("react");
+var import_lucide_react4 = require("lucide-react");
+var import_clsx8 = __toESM(require("clsx"));
+
+// src/components/date/YearMonthPicker.tsx
+var import_react8 = require("react");
+var import_react_custom_scrollbars_22 = require("react-custom-scrollbars-2");
+var import_clsx6 = __toESM(require("clsx"));
+
+// src/components/layout/Expandable.tsx
+var import_react7 = require("react");
+var import_lucide_react3 = require("lucide-react");
+var import_clsx5 = __toESM(require("clsx"));
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var ExpansionIcon = ({ isExpanded, className }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    import_lucide_react3.ChevronDown,
+    {
+      "aria-hidden": true,
+      className: (0, import_clsx5.default)(
+        "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 = (0, import_react7.forwardRef)(function Expandable2({
+  children,
+  id: providedId,
+  label,
+  icon,
+  isExpanded = false,
+  onChange = noop,
+  clickOnlyOnHeader = true,
+  disabled = false,
+  className,
+  headerClassName,
+  contentClassName,
+  contentExpandedClassName
+}, ref) {
+  const defaultIcon = (0, import_react7.useCallback)((expanded) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ExpansionIcon, { isExpanded: expanded }), []);
+  icon ??= defaultIcon;
+  const generatedId = (0, import_react7.useId)();
+  const id = providedId ?? generatedId;
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    "div",
+    {
+      ref,
+      onClick: () => !clickOnlyOnHeader && !disabled && onChange(!isExpanded),
+      className: (0, import_clsx5.default)(
+        "flex-col-0 bg-surface text-on-surface group rounded-lg shadow-sm",
+        { "cursor-pointer": !clickOnlyOnHeader && !disabled },
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+          "button",
+          {
+            onClick: () => clickOnlyOnHeader && !disabled && onChange(!isExpanded),
+            className: (0, import_clsx5.default)(
+              "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__ */ (0, import_jsx_runtime10.jsx)(
+          "div",
+          {
+            id: `${id}-content`,
+            className: (0, import_clsx5.default)(
+              "flex-col-2 px-4 transition-all duration-300 ease-in-out",
+              {
+                [(0, import_clsx5.default)("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 = (0, import_react7.forwardRef)(function ExpandableUncontrolled2({
+  isExpanded,
+  onChange = noop,
+  ...props
+}, ref) {
+  const [usedIsExpanded, setUsedIsExpanded] = (0, import_react7.useState)(isExpanded);
+  (0, import_react7.useEffect)(() => {
+    setUsedIsExpanded(isExpanded);
+  }, [isExpanded]);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    Expandable,
+    {
+      ...props,
+      ref,
+      isExpanded: usedIsExpanded,
+      onChange: (value) => {
+        onChange(value);
+        setUsedIsExpanded(value);
+      }
+    }
+  );
+});
+
+// src/components/date/YearMonthPicker.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var YearMonthPicker = ({
+  displayedYearMonth = /* @__PURE__ */ new Date(),
+  start = subtractDuration(/* @__PURE__ */ new Date(), { years: 50 }),
+  end = addDuration(/* @__PURE__ */ new Date(), { years: 50 }),
+  onChange = noop,
+  className = "",
+  maxHeight = 300,
+  showValueOpen = true
+}) => {
+  const locale = useLocale();
+  const ref = (0, import_react8.useRef)(null);
+  (0, import_react8.useEffect)(() => {
+    const scrollToItem = () => {
+      if (ref.current) {
+        ref.current.scrollIntoView({
+          behavior: "instant",
+          block: "center"
+        });
+      }
+    };
+    scrollToItem();
+  }, [ref]);
+  if (end < start) {
+    console.error(`startYear: (${start}) less than endYear: (${end})`);
+    return null;
+  }
+  const years = range([start.getFullYear(), end.getFullYear()], { exclusiveEnd: false });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: (0, import_clsx6.default)("flex-col-0 select-none", className), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_custom_scrollbars_22.Scrollbars, { autoHeight: true, autoHeightMax: maxHeight, style: { height: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex-col-1 mr-3", children: years.map((year) => {
+    const selectedYear = displayedYearMonth.getFullYear() === year;
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      ExpandableUncontrolled,
+      {
+        ref: (displayedYearMonth.getFullYear() ?? (/* @__PURE__ */ new Date()).getFullYear()) === year ? ref : void 0,
+        label: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: (0, import_clsx6.default)({ "text-primary font-bold": selectedYear }), children: year }),
+        isExpanded: showValueOpen && selectedYear,
+        contentClassName: "gap-y-1",
+        children: equalSizeGroups([...monthsList], 3).map((monthList, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex-row-1", children: monthList.map((month) => {
+          const monthIndex = monthsList.indexOf(month);
+          const newDate = new Date(year, monthIndex);
+          const selectedMonth = selectedYear && monthIndex === displayedYearMonth.getMonth();
+          const firstOfMonth = new Date(year, monthIndex, 1);
+          const lastOfMonth = new Date(year, monthIndex, 1);
+          const isAfterStart = start === void 0 || start <= addDuration(subtractDuration(lastOfMonth, { days: 1 }), { months: 1 });
+          const isBeforeEnd = end === void 0 || firstOfMonth <= end;
+          const isValid = isAfterStart && isBeforeEnd;
+          return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            SolidButton,
+            {
+              disabled: !isValid,
+              color: selectedMonth && isValid ? "primary" : "neutral",
+              className: "flex-1",
+              size: "small",
+              onClick: () => {
+                onChange(newDate);
+              },
+              children: new Intl.DateTimeFormat(locale, { month: "short" }).format(newDate)
+            },
+            month
+          );
+        }) }, index))
+      },
+      year
+    );
+  }) }) }) });
+};
+
+// src/components/date/DayPicker.tsx
+var import_clsx7 = __toESM(require("clsx"));
+var import_react9 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var DayPicker = ({
+  displayedMonth,
+  selected,
+  start,
+  end,
+  onChange = noop,
+  weekStart = "monday",
+  markToday = true,
+  className = ""
+}) => {
+  const locale = useLocale();
+  const month = displayedMonth.getMonth();
+  const weeks = getWeeksForCalenderMonth(displayedMonth, weekStart);
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: (0, import_clsx7.default)("flex-col-1 min-w-[220px] select-none", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex-row-2 text-center", children: weeks[0].map((weekDay, index) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex-1 font-semibold", children: new Intl.DateTimeFormat(locale, { weekday: "long" }).format(weekDay).substring(0, 2) }, index)) }),
+    weeks.map((week, index) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex-row-2 text-center", children: week.map((date) => {
+      const isSelected = !!selected && equalDate(selected, date);
+      const isToday = equalDate(/* @__PURE__ */ new Date(), date);
+      const isSameMonth = date.getMonth() === month;
+      const isDayValid = isInTimeSpan(date, start, end);
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        "button",
+        {
+          disabled: !isDayValid,
+          className: (0, import_clsx7.default)(
+            "flex-1 rounded-full border-2",
+            {
+              "text-description": !isSameMonth && !isSelected && isDayValid,
+              "text-button-solid-neutral-text bg-button-solid-neutral-background": !isSelected && isSameMonth && isDayValid,
+              "text-button-solid-primary-text bg-button-solid-primary-background": isSelected && isDayValid,
+              "hover:brightness-90 hover:bg-button-solid-primary-background hover:text-button-solid-primary-text": isDayValid,
+              "text-disabled-text bg-disabled-background cursor-not-allowed": !isDayValid,
+              "border-secondary": isToday && markToday,
+              "border-transparent": !isToday || !markToday
+            }
+          ),
+          onClick: () => onChange(date),
+          children: date.getDate()
+        },
+        date.getDate()
+      );
+    }) }, index))
+  ] });
+};
+
+// src/localization/defaults/time.ts
+var monthTranslation = {
+  en: {
+    january: "January",
+    february: "Febuary",
+    march: "March",
+    april: "April",
+    may: "May",
+    june: "June",
+    july: "July",
+    august: "August",
+    september: "September",
+    october: "October",
+    november: "November",
+    december: "December"
+  },
+  de: {
+    january: "Januar",
+    february: "Febuar",
+    march: "M\xE4rz",
+    april: "April",
+    may: "Mai",
+    june: "Juni",
+    july: "Juli",
+    august: "August",
+    september: "September",
+    october: "October",
+    november: "November",
+    december: "December"
+  }
+};
+var timeTranslation = {
+  en: {
+    ...monthTranslation.en,
+    century: { one: "Century", other: "Centuries" },
+    decade: { one: "Decade", other: "Decades" },
+    year: { one: "Year", other: "Years" },
+    month: { one: "Month", other: "Months" },
+    day: { one: "Day", other: "Days" },
+    hour: { one: "Hour", other: "Hours" },
+    minute: { one: "Minute", other: "Minutes" },
+    second: { one: "Second", other: "Seconds" },
+    millisecond: { one: "Millisecond", other: "Milliseconds" },
+    microsecond: { one: "Microsecond", other: "Microseconds" },
+    nanosecond: { one: "Nanosecond", other: "Nanoseconds" },
+    yesterday: "Yesterday",
+    today: "Today",
+    tomorrow: "Tomorrow",
+    in: "in",
+    ago: "ago"
+  },
+  de: {
+    ...monthTranslation.de,
+    century: { one: "Jahrhundert", other: "Jahrhunderte" },
+    decade: { one: "Jahrzehnt", other: "Jahrzehnte" },
+    year: { one: "Jahr", other: "Jahre" },
+    month: { one: "Monat", other: "Monate" },
+    day: { one: "Tag", other: "Tage" },
+    hour: { one: "Stunde", other: "Stunden" },
+    minute: { one: "Minute", other: "Minuten" },
+    second: { one: "Sekunde", other: "Sekunden" },
+    millisecond: { one: "Millisekunde", other: "Millisekunden" },
+    microsecond: { one: "Mikrosekunde", other: "Mikrosekunden" },
+    nanosecond: { one: "Nanosekunde", other: "Nanosekunden" },
+    yesterday: "Gestern",
+    today: "Heute",
+    tomorrow: "Morgen",
+    in: "in",
+    ago: "vor"
+  }
+};
+
+// src/components/date/DatePicker.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var DatePicker = ({
+  overwriteTranslation,
+  value = /* @__PURE__ */ new Date(),
+  start = subtractDuration(/* @__PURE__ */ new Date(), { years: 50 }),
+  end = addDuration(/* @__PURE__ */ new Date(), { years: 50 }),
+  initialDisplay = "day",
+  onChange = noop,
+  yearMonthPickerProps,
+  dayPickerProps,
+  className = ""
+}) => {
+  const locale = useLocale();
+  const translation = useTranslation([timeTranslation], overwriteTranslation);
+  const [displayedMonth, setDisplayedMonth] = (0, import_react10.useState)(value);
+  const [displayMode, setDisplayMode] = (0, import_react10.useState)(initialDisplay);
+  (0, import_react10.useEffect)(() => {
+    setDisplayedMonth(value);
+  }, [value]);
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: (0, import_clsx8.default)("flex-col-4", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex-row-2 items-center justify-between h-7", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+        TextButton,
+        {
+          className: (0, import_clsx8.default)("flex-row-1 items-center cursor-pointer select-none", {
+            "text-disabled-text": displayMode !== "day"
+          }),
+          onClick: () => setDisplayMode(displayMode === "day" ? "yearMonth" : "day"),
+          children: [
+            `${new Intl.DateTimeFormat(locale, { month: "long" }).format(displayedMonth)} ${displayedMonth.getFullYear()}`,
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react4.ChevronDown, { size: 16 })
+          ]
+        }
+      ),
+      displayMode === "day" && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex-row-2 justify-end", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          SolidButton,
+          {
+            size: "small",
+            color: "primary",
+            disabled: !isInTimeSpan(subtractDuration(displayedMonth, { months: 1 }), start, end),
+            onClick: () => {
+              setDisplayedMonth(subtractDuration(displayedMonth, { months: 1 }));
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react4.ArrowUp, { size: 20 })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          SolidButton,
+          {
+            size: "small",
+            color: "primary",
+            disabled: !isInTimeSpan(addDuration(displayedMonth, { months: 1 }), start, end),
+            onClick: () => {
+              setDisplayedMonth(addDuration(displayedMonth, { months: 1 }));
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react4.ArrowDown, { size: 20 })
+          }
+        )
+      ] })
+    ] }),
+    displayMode === "yearMonth" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      YearMonthPicker,
+      {
+        ...yearMonthPickerProps,
+        displayedYearMonth: value,
+        start,
+        end,
+        onChange: (newDate) => {
+          setDisplayedMonth(newDate);
+          setDisplayMode("day");
+        }
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        DayPicker,
+        {
+          ...dayPickerProps,
+          displayedMonth,
+          start,
+          end,
+          selected: value,
+          onChange: (date) => {
+            onChange(date);
+          }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "mt-2", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        TextButton,
+        {
+          color: "primary",
+          onClick: () => {
+            const newDate = /* @__PURE__ */ new Date();
+            newDate.setHours(value.getHours(), value.getMinutes());
+            onChange(newDate);
+          },
+          children: translation("today")
+        }
+      ) })
+    ] })
+  ] });
+};
+
+// src/components/user-action/DateAndTimePicker.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var DateTimePicker = ({
+  overwriteTranslation,
+  value = /* @__PURE__ */ new Date(),
+  start = subtractDuration(/* @__PURE__ */ new Date(), { years: 50 }),
+  end = addDuration(/* @__PURE__ */ new Date(), { years: 50 }),
+  mode = "dateTime",
+  onFinish = noop,
+  onChange = noop,
+  onRemove = noop,
+  timePickerProps,
+  datePickerProps
+}) => {
+  const translation = useTranslation([formTranslation, timeTranslation], overwriteTranslation);
+  const useDate = mode === "dateTime" || mode === "date";
+  const useTime = mode === "dateTime" || mode === "time";
+  let dateDisplay;
+  let timeDisplay;
+  if (useDate) {
+    dateDisplay = /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      DatePicker,
+      {
+        ...datePickerProps,
+        className: "min-w-[320px] min-h-[250px]",
+        yearMonthPickerProps: { maxHeight: 218 },
+        value,
+        start,
+        end,
+        onChange
+      }
+    );
+  }
+  if (useTime) {
+    timeDisplay = /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      TimePicker,
+      {
+        ...timePickerProps,
+        className: (0, import_clsx9.default)("h-full", { "justify-between w-full": mode === "time" }),
+        maxHeight: 250,
+        time: value,
+        onChange
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex-col-2 w-fit", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex-row-4", children: [
+      dateDisplay,
+      timeDisplay
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex-row-2 justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex-row-2 mt-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SolidButton, { size: "medium", color: "negative", onClick: onRemove, children: translation("clear") }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        SolidButton,
+        {
+          size: "medium",
+          onClick: () => onFinish(value),
+          children: translation("change")
+        }
+      )
+    ] }) })
+  ] });
+};
+
+// src/components/user-action/Label.tsx
+var import_clsx10 = __toESM(require("clsx"));
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var styleMapping = {
+  sm: "typography-label-xs color-label-text",
+  md: "typography-label-md color-label-text"
+};
+var Label = ({
+  children,
+  size = "md",
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("label", { ...props, className: (0, import_clsx10.default)(styleMapping[size], className), children });
+};
+
+// src/components/user-action/Menu.tsx
+var import_react13 = require("react");
+var import_clsx11 = __toESM(require("clsx"));
+
+// src/hooks/useOutsideClick.ts
+var import_react11 = require("react");
+var useOutsideClick = (refs, handler) => {
+  (0, import_react11.useEffect)(() => {
+    const listener = (event) => {
+      if (event.target === null) return;
+      if (refs.some((ref) => !ref.current || ref.current.contains(event.target))) {
+        return;
+      }
+      handler();
+    };
+    document.addEventListener("mousedown", listener);
+    document.addEventListener("touchstart", listener);
+    return () => {
+      document.removeEventListener("mousedown", listener);
+      document.removeEventListener("touchstart", listener);
+    };
+  }, [refs, handler]);
+};
+
+// src/hooks/useHoverState.ts
+var import_react12 = require("react");
+var defaultUseHoverStateProps = {
+  closingDelay: 200,
+  isDisabled: false
+};
+var useHoverState = (props = void 0) => {
+  const { closingDelay, isDisabled } = { ...defaultUseHoverStateProps, ...props };
+  const [isHovered, setIsHovered] = (0, import_react12.useState)(false);
+  const [timer, setTimer] = (0, import_react12.useState)();
+  const onMouseEnter = () => {
+    if (isDisabled) {
+      return;
+    }
+    clearTimeout(timer);
+    setIsHovered(true);
+  };
+  const onMouseLeave = () => {
+    if (isDisabled) {
+      return;
+    }
+    setTimer(setTimeout(() => {
+      setIsHovered(false);
+    }, closingDelay));
+  };
+  (0, import_react12.useEffect)(() => {
+    if (timer) {
+      return () => {
+        clearTimeout(timer);
+      };
+    }
+  });
+  (0, import_react12.useEffect)(() => {
+    if (timer) {
+      clearTimeout(timer);
+    }
+  }, [isDisabled]);
+  return {
+    isHovered,
+    setIsHovered,
+    handlers: { onMouseEnter, onMouseLeave }
+  };
+};
+
+// src/utils/bagFunctions.ts
+var resolve = (children, bag) => {
+  if (typeof children === "function") {
+    return children(bag);
+  }
+  return children ?? void 0;
+};
+var BagFunctionUtil = {
+  resolve
+};
+
+// src/hooks/usePopoverPosition.ts
+var defaultPopoverPositionOptions = {
+  edgePadding: 16,
+  outerGap: 4,
+  horizontalAlignment: "leftInside",
+  verticalAlignment: "bottomOutside",
+  disabled: false
+};
+var usePopoverPosition = (trigger, options) => {
+  const {
+    edgePadding,
+    outerGap,
+    verticalAlignment,
+    horizontalAlignment,
+    disabled
+  } = { ...defaultPopoverPositionOptions, ...options };
+  if (disabled || !trigger) {
+    return {};
+  }
+  const left = {
+    leftOutside: trigger.left - outerGap,
+    leftInside: trigger.left,
+    rightOutside: trigger.right + outerGap,
+    rightInside: trigger.right,
+    center: trigger.left + trigger.width / 2
+  }[horizontalAlignment];
+  const top = {
+    topOutside: trigger.top - outerGap,
+    topInside: trigger.top,
+    bottomOutside: trigger.bottom + outerGap,
+    bottomInside: trigger.bottom,
+    center: trigger.top + trigger.height / 2
+  }[verticalAlignment];
+  const translateX = {
+    leftOutside: "-100%",
+    leftInside: void 0,
+    rightOutside: void 0,
+    rightInside: "-100%",
+    center: "-50%"
+  }[horizontalAlignment];
+  const translateY = {
+    topOutside: "-100%",
+    topInside: void 0,
+    bottomOutside: void 0,
+    bottomInside: "-100%",
+    center: "-50%"
+  }[verticalAlignment];
+  return {
+    left: Math.max(left, edgePadding),
+    top: Math.max(top, edgePadding),
+    translate: [translateX ?? "0", translateY ?? "0"].join(" ")
+  };
+};
+
+// src/components/user-action/Menu.tsx
+var import_react_dom = require("react-dom");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var MenuItem = ({
+  children,
+  onClick,
+  alignment = "left",
+  isDisabled = false,
+  className
+}) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  "div",
+  {
+    className: (0, import_clsx11.default)("block px-3 py-1.5 first:rounded-t-md last:rounded-b-md text-sm font-semibold text-nowrap", {
+      "text-right": alignment === "right",
+      "text-left": alignment === "left",
+      "text-disabled-text cursor-not-allowed": isDisabled,
+      "text-menu-text hover:bg-primary/20": !isDisabled,
+      "cursor-pointer": !!onClick
+    }, className),
+    onClick,
+    children
+  }
+);
+function getScrollableParents(element) {
+  const scrollables = [];
+  let parent = element.parentElement;
+  while (parent) {
+    scrollables.push(parent);
+    parent = parent.parentElement;
+  }
+  return scrollables;
+}
+var Menu = ({
+  trigger,
+  children,
+  alignmentHorizontal = "leftInside",
+  alignmentVertical = "bottomOutside",
+  showOnHover = false,
+  disabled = false,
+  menuClassName = ""
+}) => {
+  const { isHovered: isOpen, setIsHovered: setIsOpen } = useHoverState({ isDisabled: !showOnHover || disabled });
+  const triggerRef = (0, import_react13.useRef)(null);
+  const menuRef = (0, import_react13.useRef)(null);
+  useOutsideClick([triggerRef, menuRef], () => setIsOpen(false));
+  const [isHidden, setIsHidden] = (0, import_react13.useState)(true);
+  const bag = {
+    isOpen,
+    close: () => setIsOpen(false),
+    toggleOpen: () => setIsOpen((prevState) => !prevState),
+    disabled
+  };
+  const menuPosition = usePopoverPosition(
+    triggerRef.current?.getBoundingClientRect(),
+    { verticalAlignment: alignmentVertical, horizontalAlignment: alignmentHorizontal, disabled }
+  );
+  (0, import_react13.useEffect)(() => {
+    if (!isOpen) return;
+    const triggerEl = triggerRef.current;
+    if (!triggerEl) return;
+    const scrollableParents = getScrollableParents(triggerEl);
+    const close = () => setIsOpen(false);
+    scrollableParents.forEach((parent) => {
+      parent.addEventListener("scroll", close);
+    });
+    window.addEventListener("resize", close);
+    return () => {
+      scrollableParents.forEach((parent) => {
+        parent.removeEventListener("scroll", close);
+      });
+      window.removeEventListener("resize", close);
+    };
+  }, [isOpen, setIsOpen]);
+  (0, import_react13.useEffect)(() => {
+    if (isOpen) {
+      setIsHidden(false);
+    }
+  }, [isOpen]);
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+    trigger(bag, triggerRef),
+    (0, import_react_dom.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      "div",
+      {
+        ref: menuRef,
+        onClick: (e) => e.stopPropagation(),
+        className: (0, import_clsx11.default)(
+          "absolute rounded-md bg-menu-background text-menu-text shadow-around-lg shadow-strong z-[300]",
+          {
+            "animate-pop-in": isOpen,
+            "animate-pop-out": !isOpen,
+            "hidden": isHidden
+          },
+          menuClassName
+        ),
+        onAnimationEnd: () => {
+          if (!isOpen) {
+            setIsHidden(true);
+          }
+        },
+        style: {
+          ...menuPosition
+        },
+        children: BagFunctionUtil.resolve(children, bag)
+      }
+    ), document.body)
+  ] });
+};
+
+// src/components/user-action/ScrollPicker.tsx
+var import_react14 = require("react");
+var import_clsx12 = __toESM(require("clsx"));
+
+// src/utils/math.ts
+var clamp = (value, range2 = [0, 1]) => {
+  const [min, max] = range2;
+  return Math.min(Math.max(value, min), max);
+};
+
+// src/components/user-action/ScrollPicker.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var up = 1;
+var down = -1;
+var ScrollPicker = ({
+  options,
+  mapping,
+  selected,
+  onChange = noop,
+  disabled = false
+}) => {
+  let selectedIndex = 0;
+  if (selected && options.indexOf(selected) !== -1) {
+    selectedIndex = options.indexOf(selected);
+  }
+  const [{
+    currentIndex,
+    transition,
+    items,
+    lastTimeStamp
+  }, setAnimation] = (0, import_react14.useState)({
+    targetIndex: selectedIndex,
+    currentIndex: disabled ? selectedIndex : 0,
+    velocity: 0,
+    animationVelocity: Math.floor(options.length / 2),
+    transition: 0,
+    items: options
+  });
+  const itemsShownCount = 5;
+  const shownItems = getNeighbours(range(items.length), currentIndex).map((index) => ({
+    name: mapping(items[index]),
+    index
+  }));
+  const itemHeight = 40;
+  const distance = 8;
+  const containerHeight = itemHeight * (itemsShownCount - 2) + distance * (itemsShownCount - 2 + 1);
+  const getDirection = (0, import_react14.useCallback)((targetIndex, currentIndex2, transition2, length) => {
+    if (targetIndex === currentIndex2) {
+      return transition2 > 0 ? up : down;
+    }
+    let distanceForward = targetIndex - currentIndex2;
+    if (distanceForward < 0) {
+      distanceForward += length;
+    }
+    return distanceForward >= length / 2 ? down : up;
+  }, []);
+  const animate = (0, import_react14.useCallback)((timestamp, startTime) => {
+    setAnimation((prevState) => {
+      const {
+        targetIndex,
+        currentIndex: currentIndex2,
+        transition: transition2,
+        animationVelocity,
+        velocity,
+        items: items2,
+        lastScrollTimeStamp
+      } = prevState;
+      if (disabled) {
+        return { ...prevState, currentIndex: targetIndex, velocity: 0, lastTimeStamp: timestamp };
+      }
+      if (targetIndex === currentIndex2 && velocity === 0 && transition2 === 0 || !startTime) {
+        return { ...prevState, lastTimeStamp: timestamp };
+      }
+      const progress = (timestamp - startTime) / 1e3;
+      const direction = getDirection(targetIndex, currentIndex2, transition2, items2.length);
+      let newVelocity = velocity;
+      let usedVelocity;
+      let newCurrentIndex = currentIndex2;
+      const isAutoScrolling = velocity <= 10 && (!lastScrollTimeStamp || timestamp - lastScrollTimeStamp > 50);
+      const newLastScrollTimeStamp = velocity !== 0 ? timestamp : lastScrollTimeStamp;
+      if (isAutoScrolling) {
+        usedVelocity = direction * animationVelocity;
+      } else {
+        usedVelocity = velocity;
+        newVelocity = velocity * 0.5;
+        if (Math.abs(newVelocity) <= 0.05) {
+          newVelocity = 0;
+        }
+      }
+      let newTransition = transition2 + usedVelocity * progress;
+      const changeThreshold = 0.5;
+      while (newTransition >= changeThreshold) {
+        if (newCurrentIndex === targetIndex && newTransition >= changeThreshold && isAutoScrolling) {
+          newTransition = 0;
+          break;
+        }
+        newCurrentIndex = (currentIndex2 + 1) % items2.length;
+        newTransition -= 1;
+      }
+      if (newTransition >= changeThreshold) {
+        newTransition = 0;
+      }
+      while (newTransition <= -changeThreshold) {
+        if (newCurrentIndex === targetIndex && newTransition <= -changeThreshold && isAutoScrolling) {
+          newTransition = 0;
+          break;
+        }
+        newCurrentIndex = currentIndex2 === 0 ? items2.length - 1 : currentIndex2 - 1;
+        newTransition += 1;
+      }
+      let newTargetIndex = targetIndex;
+      if (!isAutoScrolling) {
+        newTargetIndex = newCurrentIndex;
+      }
+      if ((currentIndex2 !== newTargetIndex || newTargetIndex !== targetIndex) && newTargetIndex === newCurrentIndex) {
+        onChange(items2[newCurrentIndex]);
+      }
+      return {
+        targetIndex: newTargetIndex,
+        currentIndex: newCurrentIndex,
+        animationVelocity,
+        transition: newTransition,
+        velocity: newVelocity,
+        items: items2,
+        lastTimeStamp: timestamp,
+        lastScrollTimeStamp: newLastScrollTimeStamp
+      };
+    });
+  }, [disabled, getDirection, onChange]);
+  (0, import_react14.useEffect)(() => {
+    requestAnimationFrame((timestamp) => animate(timestamp, lastTimeStamp));
+  });
+  const opacity = (transition2, index, itemsCount) => {
+    const max = 100;
+    const min = 0;
+    const distance2 = max - min;
+    let opacityValue = min;
+    const unitTransition = clamp(transition2 / 0.5);
+    if (index === 1 || index === itemsCount - 2) {
+      if (index === 1 && transition2 > 0) {
+        opacityValue += Math.floor(unitTransition * distance2);
+      }
+      if (index === itemsCount - 2 && transition2 < 0) {
+        opacityValue += Math.floor(unitTransition * distance2);
+      }
+    } else {
+      opacityValue = max;
+    }
+    return clamp(1 - opacityValue / max);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    "div",
+    {
+      className: "relative overflow-hidden",
+      style: { height: containerHeight },
+      onWheel: (event) => {
+        if (event.deltaY !== 0) {
+          const deltaY = clamp(event.deltaY, [-itemHeight * 2 / 3, itemHeight * 2 / 3]);
+          setAnimation(({ velocity, ...animationData }) => ({ ...animationData, velocity: velocity + deltaY }));
+        }
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "absolute top-1/2 -translate-y-1/2 -translate-x-1/2 left-1/2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          "div",
+          {
+            className: "absolute z-[1] top-1/2 -translate-y-1/2 -translate-x-1/2 left-1/2 w-full min-w-[40px] border border-divider/50 border-y-2 border-x-0 ",
+            style: { height: `${itemHeight}px` }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          "div",
+          {
+            className: "flex-col-2 select-none",
+            style: {
+              transform: `translateY(${-transition * (distance + itemHeight)}px)`,
+              columnGap: `${distance}px`
+            },
+            children: shownItems.map(({ name, index }, arrayIndex) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              "div",
+              {
+                className: (0, import_clsx12.default)(
+                  `flex-col-2 items-center justify-center rounded-md`,
+                  {
+                    "text-primary font-bold": currentIndex === index,
+                    "text-on-background": currentIndex === index,
+                    "cursor-pointer": !disabled,
+                    "cursor-not-allowed": disabled
+                  }
+                ),
+                style: {
+                  opacity: currentIndex !== index ? opacity(transition, arrayIndex, shownItems.length) : void 0,
+                  height: `${itemHeight}px`,
+                  maxHeight: `${itemHeight}px`
+                },
+                onClick: () => !disabled && setAnimation((prevState) => ({ ...prevState, targetIndex: index })),
+                children: name
+              },
+              index
+            ))
+          }
+        )
+      ] })
+    }
+  );
+};
+
+// src/components/user-action/input/Input.tsx
+var import_react17 = require("react");
+var import_clsx13 = __toESM(require("clsx"));
+
+// src/hooks/useDelay.ts
+var import_react15 = require("react");
+var defaultOptions = {
+  delay: 3e3,
+  disabled: false
+};
+function useDelay(options) {
+  const [timer, setTimer] = (0, import_react15.useState)(void 0);
+  const { delay, disabled } = {
+    ...defaultOptions,
+    ...options
+  };
+  const clearTimer = () => {
+    clearTimeout(timer);
+    setTimer(void 0);
+  };
+  const restartTimer = (onDelayFinish) => {
+    if (disabled) {
+      return;
+    }
+    clearTimeout(timer);
+    setTimer(setTimeout(() => {
+      onDelayFinish();
+      setTimer(void 0);
+    }, delay));
+  };
+  (0, import_react15.useEffect)(() => {
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [timer]);
+  (0, import_react15.useEffect)(() => {
+    if (disabled) {
+      clearTimeout(timer);
+      setTimer(void 0);
+    }
+  }, [disabled, timer]);
+  return { restartTimer, clearTimer, hasActiveTimer: !!timer };
+}
+
+// src/hooks/focus/useFocusManagement.ts
+var import_react16 = require("react");
+function useFocusManagement() {
+  const getFocusableElements = (0, import_react16.useCallback)(() => {
+    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 = (0, import_react16.useCallback)(() => {
+    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 = (0, import_react16.useCallback)(() => {
+    const nextElement = getNextFocusElement();
+    nextElement?.focus();
+  }, [getNextFocusElement]);
+  const getPreviousFocusElement = (0, import_react16.useCallback)(() => {
+    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 = (0, import_react16.useCallback)(() => {
+    const previousElement = getPreviousFocusElement();
+    if (previousElement) previousElement.focus();
+  }, [getPreviousFocusElement]);
+  return {
+    getFocusableElements,
+    getNextFocusElement,
+    getPreviousFocusElement,
+    focusNext,
+    focusPrevious
+  };
+}
+
+// src/components/user-action/input/Input.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var defaultEditCompleteOptions = {
+  allowEnterComplete: false,
+  onBlur: true,
+  afterDelay: true,
+  delay: 2500
+};
+var Input = (0, import_react17.forwardRef)(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 = (0, import_react17.useRef)(null);
+  (0, import_react17.useImperativeHandle)(forwardedRef, () => innerRef.current);
+  const { focusNext } = useFocusManagement();
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    "input",
+    {
+      ...props,
+      ref: innerRef,
+      value,
+      disabled,
+      className: defaultStyle ? (0, import_clsx13.default)(
+        "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
+    }
+  );
+});
+var InputUncontrolled = ({
+  value = "",
+  onChangeText,
+  ...props
+}) => {
+  const [usedValue, setUsedValue] = (0, import_react17.useState)(value);
+  (0, import_react17.useEffect)(() => {
+    setUsedValue(value);
+  }, [value]);
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    Input,
+    {
+      ...props,
+      value: usedValue,
+      onChangeText: (text) => {
+        onChangeText?.(text);
+        setUsedValue(text);
+      }
+    }
+  );
+};
+
+// src/components/user-action/SearchBar.tsx
+var import_lucide_react5 = require("lucide-react");
+var import_clsx14 = require("clsx");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var SearchBar = ({
+  placeholder,
+  onSearch,
+  disableOnSearch,
+  containerClassName,
+  ...inputProps
+}) => {
+  const translation = useTranslation([formTranslation]);
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: (0, import_clsx14.clsx)("flex-row-2 justify-between items-center", containerClassName), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      Input,
+      {
+        ...inputProps,
+        placeholder: placeholder ?? translation("search")
+      }
+    ),
+    onSearch && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(IconButton, { color: "neutral", disabled: disableOnSearch, onClick: onSearch, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react5.Search, { className: "w-full h-full" }) })
+  ] });
+};
+
+// src/components/user-action/Textarea.tsx
+var import_react18 = require("react");
+var import_clsx15 = __toESM(require("clsx"));
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var Textarea = (0, import_react18.forwardRef)(function Textarea2({
+  id,
+  onChange,
+  onChangeText,
+  onBlur,
+  onEditCompleted,
+  saveDelayOptions,
+  defaultStyle = true,
+  invalid = false,
+  disabled = false,
+  className,
+  ...props
+}, ref) {
+  const { restartTimer, clearTimer } = useDelay(saveDelayOptions);
+  const onEditCompletedWrapper = (text) => {
+    onEditCompleted?.(text);
+    clearTimer();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    "textarea",
+    {
+      ref,
+      id,
+      className: (0, import_clsx15.default)(
+        "resize-none w-full h-32 overflow-y-scroll",
+        "py-2 px-3 rounded-md border-1",
+        {
+          "bg-input-background text-input-text hover:border-primary focus-within:border-primary focus-within:ring-2 ring-focus": !disabled && !invalid,
+          "bg-on-negative text-negative border-negative-border hover:border-negative-border-hover focus-visible:ring-negative-border": invalid && !disabled && defaultStyle,
+          "text-disabled-text bg-disabled-background border-disabled-border": disabled && defaultStyle
+        },
+        className
+      ),
+      onChange: (event) => {
+        const value = event.target.value;
+        restartTimer(() => {
+          onEditCompletedWrapper(value);
+        });
+        onChange?.(event);
+        onChangeText?.(value);
+      },
+      onBlur: (event) => {
+        onBlur?.(event);
+        onEditCompletedWrapper(event.target.value);
+      },
+      disabled,
+      ...props
+    }
+  );
+});
+var TextareaUncontrolled = ({
+  value = "",
+  onChangeText = noop,
+  ...props
+}) => {
+  const [text, setText] = (0, import_react18.useState)(value);
+  (0, import_react18.useEffect)(() => {
+    setText(value);
+  }, [value]);
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    Textarea,
+    {
+      ...props,
+      value: text,
+      onChangeText: (text2) => {
+        setText(text2);
+        onChangeText(text2);
+      }
+    }
+  );
+};
+var TextareaWithHeadline = ({
+  id,
+  headline,
+  headlineProps,
+  disabled,
+  className,
+  containerClassName,
+  ...props
+}) => {
+  const genId = (0, import_react18.useId)();
+  const usedId = id ?? genId;
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+    "div",
+    {
+      className: (0, import_clsx15.default)(
+        "group flex-col-3 border-2 rounded-lg",
+        {
+          "bg-input-background text-input-text hover:border-primary focus-within:border-primary": !disabled,
+          "border-disabled-border bg-disabled-background cursor-not-allowed": disabled
+        },
+        containerClassName
+      ),
+      children: [
+        headline && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Label, { size: "md", ...headlineProps, htmlFor: usedId, children: headline }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          Textarea,
+          {
+            ...props,
+            id: usedId,
+            className: (0, import_clsx15.default)(
+              "border-transparent focus:ring-0 focus-visible:ring-0 resize-none h-32",
+              className
+            ),
+            defaultStyle: false
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/components/user-action/Tooltip.tsx
+var import_clsx16 = require("clsx");
+var import_jsx_runtime21 = 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-tooltip-background border-l-transparent border-r-transparent`,
+    bottom: `bottom-full left-1/2 -translate-x-1/2 border-b-tooltip-background border-l-transparent border-r-transparent`,
+    left: `left-full top-1/2 -translate-y-1/2 border-l-tooltip-background border-t-transparent border-b-transparent`,
+    right: `right-full top-1/2 -translate-y-1/2 border-r-tooltip-background 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_runtime21.jsxs)(
+    "div",
+    {
+      className: (0, import_clsx16.clsx)("relative inline-block", containerClassName),
+      ...handlers,
+      children: [
+        children,
+        isHovered && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+          "div",
+          {
+            className: (0, import_clsx16.clsx)(
+              `opacity-0 absolute text-xs font-semibold text-tooltip-text px-2 py-1 rounded whitespace-nowrap
+           animate-tooltip-fade-in shadow-around-md bg-tooltip-background`,
+              positionClasses[position],
+              tooltipClassName
+            ),
+            style: { zIndex, animationDelay: animationDelay + "ms" },
+            children: [
+              tooltip,
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                "div",
+                {
+                  className: (0, import_clsx16.clsx)(`absolute w-0 h-0`, triangleClasses[position]),
+                  style: { ...triangleStyle[position], zIndex: zIndex + 1 }
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/components/user-action/input/InsideLabelInput.tsx
+var import_react19 = require("react");
+var import_react20 = require("react");
+var import_clsx17 = __toESM(require("clsx"));
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var InsideLabelInput = (0, import_react20.forwardRef)(function InsideLabelInput2({
+  id: customId,
+  label,
+  ...props
+}, forwardedRef) {
+  const { value } = props;
+  const [isFocused, setIsFocused] = (0, import_react20.useState)(false);
+  const generatedId = (0, import_react19.useId)();
+  const id = customId ?? generatedId;
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: (0, import_clsx17.default)("relative"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      Input,
+      {
+        ...props,
+        id,
+        className: (0, import_clsx17.default)("h-14 px-4 pb-2 py-6.5", props.className),
+        ref: forwardedRef,
+        "aria-labelledby": id + "-label",
+        onFocus: (event) => {
+          props.onFocus?.(event);
+          setIsFocused(true);
+        },
+        onBlur: (event) => {
+          props.onBlur?.(event);
+          setIsFocused(false);
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      "label",
+      {
+        id: id + "-label",
+        "aria-hidden": true,
+        "data-display": isFocused || !!value ? "small" : "full",
+        className: (0, import_clsx17.default)(
+          "absolute left-4 top-2 transition-all pointer-events-none touch-none",
+          "data-[display=small]:top-2 data-[display=small]:h-force-4.5 data-[display=small]:typography-caption-sm-regular data-[display=small]:overflow-y-hidden",
+          "data-[display=full]:top-1/2 data-[display=full]:-translate-y-1/2 data-[display=full]:typography-body-md-regular"
+        ),
+        children: label
+      }
+    )
+  ] });
+});
+var InsideLabelInputUncontrolled = ({
+  value: initialValue,
+  ...props
+}) => {
+  const [value, setValue] = (0, import_react20.useState)(initialValue);
+  (0, import_react20.useEffect)(() => {
+    setValue(initialValue);
+  }, [initialValue]);
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    InsideLabelInput,
+    {
+      ...props,
+      value,
+      onChangeText: (text) => {
+        props.onChangeText?.(text);
+        setValue(text);
+      }
+    }
+  );
+};
+
+// src/components/user-action/input/ToggleableInput.tsx
+var import_react21 = require("react");
+var import_lucide_react6 = require("lucide-react");
+var import_clsx18 = __toESM(require("clsx"));
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var ToggleableInput = (0, import_react21.forwardRef)(function ToggleableInput2({
+  value,
+  initialState = "display",
+  editCompleteOptions,
+  ...props
+}, forwardedRef) {
+  const [isEditing, setIsEditing] = (0, import_react21.useState)(initialState !== "display");
+  const innerRef = (0, import_react21.useRef)(null);
+  (0, import_react21.useImperativeHandle)(forwardedRef, () => innerRef.current);
+  (0, import_react21.useEffect)(() => {
+    if (isEditing) {
+      innerRef.current?.focus();
+    }
+  }, [isEditing]);
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: (0, import_clsx18.default)("relative flex-row-2", { "flex-1": isEditing }), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      Input,
+      {
+        ...props,
+        ref: innerRef,
+        value,
+        onEditCompleted: (text) => {
+          props.onEditCompleted?.(text);
+          setIsEditing(false);
+        },
+        onFocus: (event) => {
+          props.onFocus?.(event);
+          setIsEditing(true);
+          event.target.select();
+        },
+        editCompleteOptions: {
+          ...editCompleteOptions,
+          allowEnterComplete: true
+        },
+        className: (0, import_clsx18.default)(`w-full ring-0 outline-0 decoration-primary underline-offset-4`, {
+          "underline": isEditing,
+          "text-transparent": !isEditing
+        }),
+        defaultStyle: false
+      }
+    ),
+    !isEditing && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "absolute left-0 flex-row-2 items-center pointer-events-none touch-none w-full overflow-hidden", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: (0, import_clsx18.default)(" truncate"), children: value }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react6.Pencil, { className: (0, import_clsx18.default)(`size-force-4`, { "text-transparent": isEditing }) })
+    ] })
+  ] });
+});
+var ToggleableInputUncontrolled = ({
+  value: initialValue,
+  onChangeText,
+  ...restProps
+}) => {
+  const [value, setValue] = (0, import_react21.useState)(initialValue);
+  (0, import_react21.useEffect)(() => {
+    setValue(initialValue);
+  }, [initialValue]);
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    ToggleableInput,
+    {
+      value,
+      onChangeText: (text) => {
+        onChangeText?.(text);
+        setValue(text);
+      },
+      ...restProps
+    }
+  );
+};
+
+// src/components/user-action/select/Select.tsx
+var import_react25 = require("react");
+var import_clsx20 = __toESM(require("clsx"));
+
+// src/hooks/focus/useFocusTrap.ts
+var import_react23 = require("react");
+
+// src/hooks/focus/useIsMounted.ts
+var import_react22 = require("react");
+var isClient = typeof window !== "undefined" && typeof document !== "undefined";
+var useIsomorphicEffect = isClient ? import_react22.useLayoutEffect : import_react22.useEffect;
+var useIsMounted = () => {
+  const [isMounted, setIsMounted] = (0, import_react22.useState)(false);
+  useIsomorphicEffect(() => {
+    setIsMounted(true);
+    return () => {
+      setIsMounted(false);
+    };
+  }, []);
+  return isMounted;
+};
+
+// src/hooks/focus/useFocusTrap.ts
+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 = (0, import_react23.useRef)(null);
+  const [paused, setPaused] = (0, import_react23.useState)(false);
+  const isMounted = useIsMounted();
+  const id = (0, import_react23.useId)();
+  const focusElement = (0, import_react23.useCallback)(() => {
+    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]);
+  (0, import_react23.useEffect)(() => {
+    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]);
+  (0, import_react23.useEffect)(() => {
+    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/utils/match.ts
+var match = (key, values) => {
+  return values[key];
+};
+
+// src/components/user-action/select/Select.tsx
+var import_lucide_react7 = require("lucide-react");
+
+// src/components/layout/Chip.tsx
+var import_clsx19 = __toESM(require("clsx"));
+var import_jsx_runtime24 = require("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__ */ (0, import_jsx_runtime24.jsxs)(
+    "div",
+    {
+      ...restProps,
+      className: (0, import_clsx19.default)(
+        `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__ */ (0, import_jsx_runtime24.jsx)("span", { className: colorMappingIcon, children: trailingIcon })
+      ]
+    }
+  );
+};
+
+// src/hooks/useFloatingElement.ts
+var import_react24 = require("react");
+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] = (0, import_react24.useState)();
+  const isMounted = useIsMounted();
+  const calculate = (0, import_react24.useCallback)(() => {
+    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;
+  (0, import_react24.useEffect)(() => {
+    if (active && isMounted) {
+      calculate();
+    } else {
+      setStyle(void 0);
+    }
+  }, [calculate, active, isMounted, height, width]);
+  (0, import_react24.useEffect)(() => {
+    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/user-action/select/Select.tsx
+var import_react_dom2 = require("react-dom");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var defaultToggleOpenOptions = {
+  highlightStartPosition: "first"
+};
+var SelectContext = (0, import_react25.createContext)(null);
+function useSelectContext() {
+  const ctx = (0, import_react25.useContext)(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 = (0, import_react25.useRef)([]);
+  const triggerRef = (0, import_react25.useRef)(null);
+  const generatedId = (0, import_react25.useId)();
+  const usedId = id ?? generatedId;
+  const [internalState, setInternalState] = (0, import_react25.useState)({
+    isOpen
+  });
+  const state = {
+    ...internalState,
+    id: usedId,
+    disabled,
+    invalid,
+    value: isMultiSelect ? values ?? [] : [value].filter(Boolean)
+  };
+  const config = {
+    isMultiSelect,
+    iconAppearance
+  };
+  const registerItem = (0, import_react25.useCallback)((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 = (0, import_react25.useCallback)((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 = (0, import_react25.useCallback)((ref) => {
+    triggerRef.current = ref.current;
+  }, []);
+  const unregisterTrigger = (0, import_react25.useCallback)(() => {
+    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
+    }));
+  };
+  (0, import_react25.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime25.jsx)(SelectContext.Provider, { value: contextValue, children });
+};
+var SelectOption = (0, import_react25.forwardRef)(
+  function SelectOption2({ children, value, disabled = false, iconAppearance, className, ...restProps }, ref) {
+    const { state, config, item, trigger } = useSelectContext();
+    const { register, unregister, toggleSelection, highlightItem } = item;
+    const itemRef = (0, import_react25.useRef)(null);
+    iconAppearance ??= config.iconAppearance;
+    (0, import_react25.useEffect)(() => {
+      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__ */ (0, import_jsx_runtime25.jsxs)(
+      "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: (0, import_clsx20.default)(
+          "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__ */ (0, import_jsx_runtime25.jsx)(
+            import_lucide_react7.CheckIcon,
+            {
+              className: (0, import_clsx20.default)("w-4 h-4", { "opacity-0": !isSelected || disabled }),
+              "aria-hidden": true
+            }
+          ),
+          children ?? value,
+          iconAppearance === "right" && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            import_lucide_react7.CheckIcon,
+            {
+              className: (0, import_clsx20.default)("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 = (0, import_react25.forwardRef)(function SelectButton2({ placeholder, selectedDisplay, ...props }, ref) {
+  const translation = useTranslation([defaultSelectButtonTranslation]);
+  const { state, trigger } = useSelectContext();
+  const { register, unregister, toggleOpen } = trigger;
+  const innerRef = (0, import_react25.useRef)(null);
+  (0, import_react25.useImperativeHandle)(ref, () => innerRef.current);
+  (0, import_react25.useEffect)(() => {
+    register(innerRef);
+    return () => unregister();
+  }, [register, unregister]);
+  const disabled = !!props?.disabled || !!state.disabled;
+  const invalid = state.invalid;
+  const hasValue = state.value.length > 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+    "button",
+    {
+      ...props,
+      ref: innerRef,
+      id: state.id,
+      className: (0, import_clsx20.default)(
+        "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__ */ (0, import_jsx_runtime25.jsx)(ExpansionIcon, { isExpanded: state.isOpen })
+      ]
+    }
+  );
+});
+var SelectChipDisplay = (0, import_react25.forwardRef)(function SelectChipDisplay2({ ...props }, ref) {
+  const { state, trigger, item } = useSelectContext();
+  const { register, unregister, toggleOpen } = trigger;
+  const innerRef = (0, import_react25.useRef)(null);
+  (0, import_react25.useImperativeHandle)(ref, () => innerRef.current);
+  (0, import_react25.useEffect)(() => {
+    register(innerRef);
+    return () => unregister();
+  }, [register, unregister]);
+  const disabled = !!props?.disabled || !!state.disabled;
+  const invalid = state.invalid;
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+    "div",
+    {
+      ...props,
+      ref: innerRef,
+      className: (0, import_clsx20.default)(
+        "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__ */ (0, import_jsx_runtime25.jsxs)(Chip, { className: "gap-x-2", children: [
+          value,
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            "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__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react7.XIcon, {})
+            }
+          )
+        ] }, value)),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          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__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react7.Plus, {})
+          }
+        )
+      ]
+    }
+  );
+});
+var SelectContent = (0, import_react25.forwardRef)(
+  function SelectContent2({
+    alignment,
+    orientation = "vertical",
+    ...props
+  }, ref) {
+    const innerRef = (0, import_react25.useRef)(null);
+    (0, import_react25.useImperativeHandle)(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 (0, import_react_dom2.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          "div",
+          {
+            hidden: !state.isOpen,
+            onClick: () => trigger.toggleOpen(false),
+            className: (0, import_clsx20.default)("fixed w-screen h-screen inset-0")
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          "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: (0, import_clsx20.default)("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 = (0, import_react25.forwardRef)(function Select2({
+  children,
+  contentPanelProps,
+  buttonProps,
+  ...props
+}, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(SelectRoot, { ...props, isMultiSelect: false, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      SelectButton,
+      {
+        ref,
+        ...buttonProps,
+        selectedDisplay: (values) => {
+          const value = values[0];
+          if (!buttonProps?.selectedDisplay) return void 0;
+          return buttonProps.selectedDisplay(value);
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(SelectContent, { ...contentPanelProps, children })
+  ] });
+});
+var SelectUncontrolled = (0, import_react25.forwardRef)(function SelectUncontrolled2({
+  value: initialValue,
+  onValueChanged,
+  ...props
+}, ref) {
+  const [value, setValue] = (0, import_react25.useState)(initialValue);
+  (0, import_react25.useEffect)(() => {
+    setValue(initialValue);
+  }, [initialValue]);
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    Select,
+    {
+      ...props,
+      ref,
+      value,
+      onValueChanged: (value2) => {
+        setValue(value2);
+        onValueChanged?.(value2);
+      }
+    }
+  );
+});
+var MultiSelect = (0, import_react25.forwardRef)(function MultiSelect2({
+  children,
+  contentPanelProps,
+  buttonProps,
+  ...props
+}, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(SelectRoot, { ...props, isMultiSelect: true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(SelectButton, { ref, ...buttonProps }),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(SelectContent, { ...contentPanelProps, children })
+  ] });
+});
+var MultiSelectUncontrolled = (0, import_react25.forwardRef)(function MultiSelectUncontrolled2({
+  values: initialValues,
+  onValuesChanged,
+  ...props
+}, ref) {
+  const [values, setValues] = (0, import_react25.useState)(initialValues);
+  (0, import_react25.useEffect)(() => {
+    setValues(initialValues);
+  }, [initialValues]);
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    MultiSelect,
+    {
+      ...props,
+      ref,
+      values,
+      onValuesChanged: (value) => {
+        setValues(value);
+        onValuesChanged?.(value);
+      }
+    }
+  );
+});
+var MultiSelectChipDisplay = (0, import_react25.forwardRef)(function MultiSelectChipDisplay2({
+  children,
+  contentPanelProps,
+  chipDisplayProps,
+  ...props
+}, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(SelectRoot, { ...props, isMultiSelect: true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(SelectChipDisplay, { ref, ...chipDisplayProps }),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(SelectContent, { ...contentPanelProps, children })
+  ] });
+});
+var MultiSelectChipDisplayUncontrolled = (0, import_react25.forwardRef)(function MultiSelectChipDisplayUncontrolled2({
+  values: initialValues,
+  onValuesChanged,
+  ...props
+}, ref) {
+  const [values, setValues] = (0, import_react25.useState)(initialValues);
+  (0, import_react25.useEffect)(() => {
+    setValues(initialValues);
+  }, [initialValues]);
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    MultiSelectChipDisplay,
+    {
+      ...props,
+      ref,
+      values,
+      onValuesChanged: (value) => {
+        setValues(value);
+        onValuesChanged?.(value);
+      }
+    }
+  );
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ButtonColorUtil,
+  ButtonUtil,
+  Checkbox,
+  CheckboxUncontrolled,
+  CopyToClipboardWrapper,
+  DateTimePicker,
+  IconButton,
+  IconButtonUtil,
+  Input,
+  InputUncontrolled,
+  InsideLabelInput,
+  InsideLabelInputUncontrolled,
+  Label,
+  Menu,
+  MenuItem,
+  MultiSelect,
+  MultiSelectChipDisplay,
+  MultiSelectChipDisplayUncontrolled,
+  MultiSelectUncontrolled,
+  OutlineButton,
+  ScrollPicker,
+  SearchBar,
+  Select,
+  SelectButton,
+  SelectChipDisplay,
+  SelectContent,
+  SelectOption,
+  SelectRoot,
+  SelectUncontrolled,
+  SolidButton,
+  TextButton,
+  Textarea,
+  TextareaUncontrolled,
+  TextareaWithHeadline,
+  ToggleableInput,
+  ToggleableInputUncontrolled,
+  Tooltip
+});
+//# sourceMappingURL=index.js.map