@helpwave/hightide 0.1.27 → 0.1.28

package/dist/components/layout/index.mjs

@@ -0,0 +1,3064 @@
+// src/components/layout/Carousel.tsx
+import {
+  createContext as createContext2,
+  forwardRef as forwardRef2,
+  useCallback as useCallback2,
+  useContext as useContext2,
+  useEffect as useEffect2,
+  useId,
+  useMemo,
+  useRef,
+  useState as useState3
+} from "react";
+import clsx2 from "clsx";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+// src/utils/array.ts
+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 createLoopingListWithIndex = (list, startIndex = 0, length = 0, forwards = true) => {
+  if (length < 0) {
+    console.warn(`createLoopingList: length must be >= 0, given ${length}`);
+  } else if (length === 0) {
+    length = list.length;
+  }
+  const returnList = [];
+  if (forwards) {
+    for (let i = startIndex; returnList.length < length; i = (i + 1) % list.length) {
+      returnList.push([i, list[i]]);
+    }
+  } else {
+    for (let i = startIndex; returnList.length < length; i = i === 0 ? i = list.length - 1 : i - 1) {
+      returnList.push([i, list[i]]);
+    }
+  }
+  return returnList;
+};
+
+// src/components/user-action/Button.tsx
+import { forwardRef } from "react";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ButtonColorUtil = {
+  solid: ["primary", "secondary", "tertiary", "positive", "warning", "negative", "neutral"],
+  text: ["primary", "negative", "neutral"],
+  outline: ["primary"]
+};
+var IconButtonUtil = {
+  icon: [...ButtonColorUtil.solid, "transparent"]
+};
+var paddingMapping = {
+  small: "btn-sm",
+  medium: "btn-md",
+  large: "btn-lg"
+};
+var iconPaddingMapping = {
+  tiny: "icon-btn-xs",
+  small: "icon-btn-sm",
+  medium: "icon-btn-md",
+  large: "icon-btn-lg"
+};
+var ButtonUtil = {
+  paddingMapping,
+  iconPaddingMapping
+};
+var SolidButton = forwardRef(function SolidButton2({
+  children,
+  color = "primary",
+  size = "medium",
+  startIcon,
+  endIcon,
+  onClick,
+  className,
+  ...restProps
+}, ref) {
+  const colorClasses = {
+    primary: "not-disabled:bg-button-solid-primary-background not-disabled:text-button-solid-primary-text",
+    secondary: "not-disabled:bg-button-solid-secondary-background not-disabled:text-button-solid-secondary-text",
+    tertiary: "not-disabled:bg-button-solid-tertiary-background not-disabled:text-button-solid-tertiary-text",
+    positive: "not-disabled:bg-button-solid-positive-background not-disabled:text-button-solid-positive-text",
+    warning: "not-disabled:bg-button-solid-warning-background not-disabled:text-button-solid-warning-text",
+    negative: "not-disabled:bg-button-solid-negative-background not-disabled:text-button-solid-negative-text",
+    neutral: "not-disabled:bg-button-solid-neutral-background not-disabled:text-button-solid-neutral-text"
+  }[color];
+  const iconColorClasses = {
+    primary: "not-group-disabled:text-button-solid-primary-icon",
+    secondary: "not-group-disabled:text-button-solid-secondary-icon",
+    tertiary: "not-group-disabled:text-button-solid-tertiary-icon",
+    positive: "not-group-disabled:text-button-solid-positive-icon",
+    warning: "not-group-disabled:text-button-solid-warning-icon",
+    negative: "not-group-disabled:text-button-solid-negative-icon",
+    neutral: "not-group-disabled:text-button-solid-neutral-icon"
+  }[color];
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref,
+      onClick,
+      className: clsx(
+        "group font-semibold",
+        colorClasses,
+        "not-disabled:hover:brightness-90",
+        "disabled:text-disabled-text disabled:bg-disabled-background",
+        ButtonUtil.paddingMapping[size],
+        className
+      ),
+      ...restProps,
+      children: [
+        startIcon && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: clsx(
+              iconColorClasses,
+              "group-disabled:text-disabled-icon"
+            ),
+            children: startIcon
+          }
+        ),
+        children,
+        endIcon && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: clsx(
+              iconColorClasses,
+              "group-disabled:text-disabled-icon"
+            ),
+            children: endIcon
+          }
+        )
+      ]
+    }
+  );
+});
+var IconButton = forwardRef(function IconButton2({
+  children,
+  color = "primary",
+  size = "medium",
+  className,
+  ...restProps
+}, ref) {
+  const colorClasses = {
+    primary: "not-disabled:bg-button-solid-primary-background not-disabled:text-button-solid-primary-text",
+    secondary: "not-disabled:bg-button-solid-secondary-background not-disabled:text-button-solid-secondary-text",
+    tertiary: "not-disabled:bg-button-solid-tertiary-background not-disabled:text-button-solid-tertiary-text",
+    positive: "not-disabled:bg-button-solid-positive-background not-disabled:text-button-solid-positive-text",
+    warning: "not-disabled:bg-button-solid-warning-background not-disabled:text-button-solid-warning-text",
+    negative: "not-disabled:bg-button-solid-negative-background not-disabled:text-button-solid-negative-text",
+    neutral: "not-disabled:bg-button-solid-neutral-background not-disabled:text-button-solid-neutral-text",
+    transparent: "not-disabled:bg-transparent"
+  }[color];
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      className: clsx(
+        colorClasses,
+        "not-disabled:hover:brightness-90",
+        "disabled:text-disabled-text",
+        {
+          "disabled:bg-disabled-background": color !== "transparent",
+          "disabled:opacity-70": color === "transparent",
+          "not-disabled:hover:bg-button-text-hover-background": color === "transparent"
+        },
+        ButtonUtil.iconPaddingMapping[size],
+        className
+      ),
+      ...restProps,
+      children
+    }
+  );
+});
+
+// src/localization/LanguageProvider.tsx
+import { createContext, useContext, useEffect, useState as useState2 } from "react";
+
+// src/hooks/useLocalStorage.ts
+import { useCallback, useState } from "react";
+
+// src/localization/util.ts
+var languages = ["en", "de"];
+var languagesLocalNames = {
+  en: "English",
+  de: "Deutsch"
+};
+var DEFAULT_LANGUAGE = "en";
+var LanguageUtil = {
+  languages,
+  DEFAULT_LANGUAGE,
+  languagesLocalNames
+};
+
+// src/localization/LanguageProvider.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var LanguageContext = createContext({
+  language: LanguageUtil.DEFAULT_LANGUAGE,
+  setLanguage: (v) => v
+});
+var useLanguage = () => useContext(LanguageContext);
+
+// src/localization/useTranslation.ts
+var TranslationPluralCount = {
+  zero: 0,
+  one: 1,
+  two: 2,
+  few: 3,
+  many: 11,
+  other: -1
+};
+var useTranslation = (translations, overwriteTranslation = {}) => {
+  const { language: languageProp, translation: overwrite } = overwriteTranslation;
+  const { language: inferredLanguage } = useLanguage();
+  const usedLanguage = languageProp ?? inferredLanguage;
+  const usedTranslations = [...translations];
+  if (overwrite) {
+    usedTranslations.push(overwrite);
+  }
+  return (key, options) => {
+    const { count, replacements } = { ...{ count: 0, replacements: {} }, ...options };
+    try {
+      for (let i = translations.length - 1; i >= 0; i--) {
+        const translation = translations[i];
+        const localizedTranslation = translation[usedLanguage];
+        if (!localizedTranslation) {
+          continue;
+        }
+        const value = localizedTranslation[key];
+        if (!value) {
+          continue;
+        }
+        let forProcessing;
+        if (typeof value !== "string") {
+          if (count === TranslationPluralCount.zero && value?.zero) {
+            forProcessing = value.zero;
+          } else if (count === TranslationPluralCount.one && value?.one) {
+            forProcessing = value.one;
+          } else if (count === TranslationPluralCount.two && value?.two) {
+            forProcessing = value.two;
+          } else if (TranslationPluralCount.few <= count && count < TranslationPluralCount.many && value?.few) {
+            forProcessing = value.few;
+          } else if (count > TranslationPluralCount.many && value?.many) {
+            forProcessing = value.many;
+          } else {
+            forProcessing = value.other;
+          }
+        } else {
+          forProcessing = value;
+        }
+        forProcessing = forProcessing.replace(/\{\{(\w+)}}/g, (_, placeholder) => {
+          return replacements[placeholder] ?? `{{key:${placeholder}}}`;
+        });
+        return forProcessing;
+      }
+    } catch (e) {
+      console.error(e);
+    }
+    return `{{${usedLanguage}:${key}}}`;
+  };
+};
+
+// src/components/layout/Carousel.tsx
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var CarouselContext = createContext2(null);
+var useCarouselContext = () => {
+  const context = useContext2(CarouselContext);
+  if (!context) {
+    console.error("useCarouselContext must be used within CarouselContext");
+  }
+  return context;
+};
+var defaultCarouselTabTranslationType = {
+  en: {
+    showSlide: `Show Slide {{index}}`,
+    slideNavigation: "Slide navigation"
+  },
+  de: {
+    showSlide: "Zeige Slide {{index}}",
+    slideNavigation: "Slide Navigation"
+  }
+};
+function CarouselTabs({
+  onChange
+}) {
+  const translation = useTranslation([
+    defaultCarouselTabTranslationType
+  ]);
+  const { id, slideCount, currentIndex, isLooping } = useCarouselContext();
+  const tabRefs = useRef([]);
+  const handleKeyDown = (event, index) => {
+    let newIndex = index;
+    if (event.key === "ArrowRight") {
+      newIndex = isLooping ? (index + 1) % slideCount : Math.max(index + 1, slideCount - 1);
+    } else if (event.key === "ArrowLeft") {
+      newIndex = isLooping ? (index - 1 + slideCount) % slideCount : Math.max(index - 1, 0);
+    } else {
+      return;
+    }
+    event.preventDefault();
+    onChange(newIndex);
+    tabRefs.current[newIndex]?.focus();
+  };
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      className: "flex-row-1 items-center justify-center w-full my-2",
+      role: "tablist",
+      "aria-label": translation("slideNavigation"),
+      id: `${id}-tablist`,
+      children: range(slideCount).map((index) => {
+        const isSelected = currentIndex === index;
+        return /* @__PURE__ */ jsx3(
+          "button",
+          {
+            id: `${id}-tab-${index}`,
+            ref: (el) => tabRefs.current[index] = el,
+            onClick: () => onChange(index),
+            onKeyDown: (e) => handleKeyDown(e, index),
+            className: clsx2(
+              "w-8 min-w-8 h-3 min-h-3 first:rounded-l-md last:rounded-r-md",
+              {
+                "bg-carousel-dot-disabled hover:bg-carousel-dot-active": currentIndex !== index,
+                "bg-carousel-dot-active hover:brightness-90": currentIndex === index
+              }
+            ),
+            role: "tab",
+            tabIndex: isSelected ? 0 : -1,
+            "aria-label": translation("showSlide", { replacements: { index: (index + 1).toString() } }),
+            "aria-selected": isSelected,
+            "aria-controls": `slide-${index}`,
+            "aria-disabled": isSelected
+          },
+          index
+        );
+      })
+    }
+  );
+}
+var defaultCarouselSlideTranslationType = {
+  en: {
+    slide: "Slide",
+    slideOf: `Slide {{index}} of {{length}} slides`
+  },
+  de: {
+    slide: "Slide",
+    slideOf: `Slide {{index}} von {{length}} slides`
+  }
+};
+var CarouselSlide = forwardRef2(
+  function CarouselSlide2({
+    index,
+    ...props
+  }, ref) {
+    const translation = useTranslation([defaultCarouselSlideTranslationType]);
+    const { id, currentIndex, slideCount } = useCarouselContext();
+    const isSelected = currentIndex === index;
+    return /* @__PURE__ */ jsx3(
+      "div",
+      {
+        ...props,
+        ref,
+        id: `${id}-slide-${index}`,
+        className: clsx2("focus-style-none group/slide", props.className),
+        tabIndex: isSelected ? 0 : void 0,
+        role: "group",
+        "aria-roledescription": translation("slide"),
+        "aria-label": translation("slideOf", {
+          replacements: {
+            index: (index + 1).toString(),
+            length: slideCount.toString()
+          }
+        }),
+        "aria-hidden": isSelected ? void 0 : true
+      }
+    );
+  }
+);
+var defaultCarouselTranslationType = {
+  en: {
+    slide: "Slide",
+    carousel: "Carousel",
+    slideOf: `Slide {{index}} of {{length}} slides`,
+    chooseSlide: "Choose slide to display"
+  },
+  de: {
+    slide: "Slide",
+    carousel: "Karussell",
+    slideOf: `Slide {{index}} von {{length}} slides`,
+    chooseSlide: "W\xE4hle die angezeigte Slide aus"
+  }
+};
+var Carousel = ({
+  children,
+  animationTime = 200,
+  isLooping = false,
+  isAutoPlaying = false,
+  autoLoopingTimeOut = 5e3,
+  autoLoopAnimationTime = 1e3,
+  hintNext = false,
+  arrows = false,
+  dots = true,
+  blurColor = "from-background",
+  heightClassName = "h-96",
+  widthClassName = "w-[70%] desktop:w-1/2",
+  slideContainerProps,
+  ...props
+}) => {
+  const translation = useTranslation([defaultCarouselTranslationType]);
+  const slideRefs = useRef([]);
+  const [currentIndex, setCurrentIndex] = useState3(0);
+  const [hasFocus, setHasFocus] = useState3(false);
+  const [dragState, setDragState] = useState3();
+  const isPaused = hasFocus;
+  const carouselContainerRef = useRef(null);
+  const [disableClick, setDisableClick] = useState3(false);
+  const timeOut = useRef(void 0);
+  const length = useMemo(() => children.length, [children]);
+  const paddingItemCount = 3;
+  const generatedId = "carousel" + useId();
+  const id = props.id ?? generatedId;
+  if (isAutoPlaying && !isLooping) {
+    console.error("When isAutoLooping is true, isLooping should also be true");
+    isLooping = true;
+  }
+  autoLoopingTimeOut = Math.max(0, autoLoopingTimeOut);
+  animationTime = Math.max(100, animationTime);
+  autoLoopAnimationTime = Math.max(200, autoLoopAnimationTime);
+  useEffect2(() => {
+    const carousel = carouselContainerRef.current;
+    if (carousel) {
+      let onFocus = function() {
+        setHasFocus(true);
+      }, onBlur = function() {
+        setHasFocus(false);
+      };
+      carousel?.addEventListener("focusin", onFocus);
+      carousel?.addEventListener("focusout", onBlur);
+      return () => {
+        carousel?.removeEventListener("focusin", onFocus);
+        carousel?.removeEventListener("focusin", onFocus);
+      };
+    }
+  }, []);
+  const getStyleOffset = (index) => {
+    const baseOffset = -50 + (index - currentIndex) * 100;
+    return `${baseOffset}%`;
+  };
+  const canGoLeft = () => {
+    return isLooping || currentIndex !== 0;
+  };
+  const canGoRight = useCallback2(() => {
+    return isLooping || currentIndex !== length - 1;
+  }, [currentIndex, isLooping, length]);
+  const left = () => {
+    if (canGoLeft()) {
+      setCurrentIndex(currentIndex - 1);
+    }
+  };
+  const right = useCallback2(() => {
+    if (canGoRight()) {
+      setCurrentIndex((currentIndex + length + 1) % length);
+    }
+  }, [canGoRight, currentIndex, length]);
+  useEffect2(() => {
+    if (!timeOut.current && !isPaused) {
+      if (autoLoopingTimeOut > 0) {
+        timeOut.current = setTimeout(() => {
+          right();
+          timeOut.current = void 0;
+        }, autoLoopingTimeOut);
+      } else {
+        right();
+      }
+    }
+    if ((isPaused || !!dragState) && timeOut.current) {
+      clearTimeout(timeOut.current);
+      timeOut.current = void 0;
+    }
+  }, [right, isPaused, autoLoopingTimeOut, dragState]);
+  let items = children.map((item, index) => ({
+    index,
+    item
+  }));
+  let before = [];
+  let after = [];
+  if (isLooping) {
+    before = createLoopingListWithIndex(children, length - 1, paddingItemCount, false).reverse().map(([index, item]) => ({
+      index,
+      item
+    }));
+    after = createLoopingListWithIndex(children, 0, paddingItemCount).map(([index, item]) => ({
+      index,
+      item
+    }));
+    items = [...before, ...items, ...after];
+  }
+  const handlePointerDown = (e) => {
+    setDragState({
+      dragOffsetX: 0,
+      dragStartX: e.clientX
+    });
+  };
+  const handlePointerMove = (e) => {
+    if (!dragState) return;
+    setDragState((prevState) => ({ dragStartX: prevState.dragStartX, dragOffsetX: e.clientX - prevState.dragStartX }));
+  };
+  const handlePointerUp = () => {
+    if (!dragState) return;
+    if (dragState.dragOffsetX > 50) {
+      left();
+    } else if (dragState.dragOffsetX < -50) {
+      right();
+    }
+    setDragState(void 0);
+  };
+  useEffect2(() => {
+    setDisableClick(!dragState);
+  }, [dragState]);
+  return /* @__PURE__ */ jsx3(CarouselContext.Provider, { value: { id, currentIndex, slideCount: length, isLooping }, children: /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      ref: carouselContainerRef,
+      ...props,
+      className: clsx2("flex-col-2 items-center w-full", props.className),
+      id,
+      role: "region",
+      "aria-roledescription": translation("slide"),
+      children: [
+        /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            ...slideContainerProps,
+            className: clsx2(`relative w-full overflow-hidden`, heightClassName, slideContainerProps?.className),
+            children: [
+              hintNext ? /* @__PURE__ */ jsxs2(
+                "div",
+                {
+                  onPointerDown: handlePointerDown,
+                  onPointerMove: handlePointerMove,
+                  onPointerUp: handlePointerUp,
+                  onPointerLeave: handlePointerUp,
+                  className: clsx2(`flex-row-2 relative h-full`, heightClassName),
+                  children: [
+                    /* @__PURE__ */ jsx3("div", { className: "flex-row-2 relative h-full w-full px-2 overflow-hidden", children: items.map(({
+                      item,
+                      index
+                    }, listIndex) => {
+                      const isInItems = before.length <= listIndex && listIndex < items.length - after.length;
+                      return /* @__PURE__ */ jsx3(
+                        CarouselSlide,
+                        {
+                          ref: isInItems ? slideRefs[index] : void 0,
+                          index,
+                          className: clsx2(
+                            `absolute left-[50%] h-full overflow-hidden transition-transform ease-in-out`,
+                            widthClassName
+                          ),
+                          onClick: () => !disableClick && setCurrentIndex(index),
+                          style: {
+                            translate: `calc(${getStyleOffset(listIndex - (isLooping ? paddingItemCount : 0))} + ${dragState ? dragState.dragOffsetX : 0}px)`,
+                            transitionDuration: dragState ? "0ms" : (isAutoPlaying && !isPaused ? autoLoopAnimationTime : animationTime) + "ms"
+                          },
+                          children: item
+                        },
+                        listIndex
+                      );
+                    }) }),
+                    /* @__PURE__ */ jsx3(
+                      "div",
+                      {
+                        className: clsx2(`hidden desktop:block pointer-events-none absolute left-0 h-full w-[20%] bg-gradient-to-r to-transparent`, blurColor)
+                      }
+                    ),
+                    /* @__PURE__ */ jsx3(
+                      "div",
+                      {
+                        className: clsx2(`hidden desktop:block pointer-events-none absolute right-0 h-full w-[20%] bg-gradient-to-l to-transparent`, blurColor)
+                      }
+                    )
+                  ]
+                }
+              ) : /* @__PURE__ */ jsx3(
+                "div",
+                {
+                  ref: slideRefs[currentIndex],
+                  className: clsx2("px-16 h-full"),
+                  tabIndex: 0,
+                  role: "group",
+                  "aria-roledescription": translation("slide"),
+                  "aria-label": translation("slideOf", {
+                    replacements: {
+                      index: (currentIndex + 1).toString(),
+                      length: items.length.toString()
+                    }
+                  }),
+                  children: children[currentIndex]
+                }
+              ),
+              arrows && /* @__PURE__ */ jsxs2(Fragment, { children: [
+                /* @__PURE__ */ jsx3(
+                  IconButton,
+                  {
+                    color: "neutral",
+                    className: clsx2("absolute z-10 left-2 top-1/2 -translate-y-1/2 shadow-md", { hidden: !canGoLeft() }),
+                    disabled: !canGoLeft(),
+                    onClick: () => left(),
+                    children: /* @__PURE__ */ jsx3(ChevronLeft, { size: 24 })
+                  }
+                ),
+                /* @__PURE__ */ jsx3(
+                  IconButton,
+                  {
+                    color: "neutral",
+                    className: clsx2("absolute z-10 right-2 top-1/2 -translate-y-1/2 shadow-md", { hidden: !canGoRight() }),
+                    disabled: !canGoRight(),
+                    onClick: () => right(),
+                    children: /* @__PURE__ */ jsx3(ChevronRight, { size: 24 })
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        dots && /* @__PURE__ */ jsx3(CarouselTabs, { onChange: setCurrentIndex })
+      ]
+    }
+  ) });
+};
+
+// src/components/layout/Chip.tsx
+import clsx3 from "clsx";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var chipColors = ["default", "dark", "red", "yellow", "green", "blue", "pink", "orange"];
+var ChipUtil = {
+  colors: chipColors
+};
+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__ */ jsxs3(
+    "div",
+    {
+      ...restProps,
+      className: clsx3(
+        `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__ */ jsx4("span", { className: colorMappingIcon, children: trailingIcon })
+      ]
+    }
+  );
+};
+var ChipList = ({
+  list,
+  className = ""
+}) => {
+  return /* @__PURE__ */ jsx4("div", { className: clsx3("flex flex-wrap gap-x-2 gap-y-2", className), children: list.map((value, index) => /* @__PURE__ */ jsx4(
+    Chip,
+    {
+      ...value,
+      color: value.color ?? "default",
+      variant: value.variant ?? "normal",
+      children: value.children
+    },
+    index
+  )) });
+};
+
+// src/components/layout/DividerInserter.tsx
+import clsx4 from "clsx";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var DividerInserter = ({
+  children,
+  divider,
+  className,
+  ...restProps
+}) => {
+  const nodes = [];
+  for (let index = 0; index < children.length; index++) {
+    const element = children[index];
+    if (element !== void 0) {
+      nodes.push(element);
+      if (index < children.length - 1) {
+        nodes.push(divider(index));
+      }
+    }
+  }
+  return /* @__PURE__ */ jsx5("div", { className: clsx4(className), ...restProps, children: nodes });
+};
+
+// src/components/layout/Expandable.tsx
+import { forwardRef as forwardRef3, useCallback as useCallback3, useEffect as useEffect3, useId as useId2, useState as useState4 } from "react";
+import { ChevronDown } from "lucide-react";
+import clsx5 from "clsx";
+
+// src/utils/noop.ts
+var noop = () => void 0;
+
+// src/components/layout/Expandable.tsx
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var ExpansionIcon = ({ isExpanded, className }) => {
+  return /* @__PURE__ */ jsx6(
+    ChevronDown,
+    {
+      "aria-hidden": true,
+      className: clsx5(
+        "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 = forwardRef3(function Expandable2({
+  children,
+  id: providedId,
+  label,
+  icon,
+  isExpanded = false,
+  onChange = noop,
+  clickOnlyOnHeader = true,
+  disabled = false,
+  className,
+  headerClassName,
+  contentClassName,
+  contentExpandedClassName
+}, ref) {
+  const defaultIcon = useCallback3((expanded) => /* @__PURE__ */ jsx6(ExpansionIcon, { isExpanded: expanded }), []);
+  icon ??= defaultIcon;
+  const generatedId = useId2();
+  const id = providedId ?? generatedId;
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      ref,
+      onClick: () => !clickOnlyOnHeader && !disabled && onChange(!isExpanded),
+      className: clsx5(
+        "flex-col-0 bg-surface text-on-surface group rounded-lg shadow-sm",
+        { "cursor-pointer": !clickOnlyOnHeader && !disabled },
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs4(
+          "button",
+          {
+            onClick: () => clickOnlyOnHeader && !disabled && onChange(!isExpanded),
+            className: clsx5(
+              "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__ */ jsx6(
+          "div",
+          {
+            id: `${id}-content`,
+            className: clsx5(
+              "flex-col-2 px-4 transition-all duration-300 ease-in-out",
+              {
+                [clsx5("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 = forwardRef3(function ExpandableUncontrolled2({
+  isExpanded,
+  onChange = noop,
+  ...props
+}, ref) {
+  const [usedIsExpanded, setUsedIsExpanded] = useState4(isExpanded);
+  useEffect3(() => {
+    setUsedIsExpanded(isExpanded);
+  }, [isExpanded]);
+  return /* @__PURE__ */ jsx6(
+    Expandable,
+    {
+      ...props,
+      ref,
+      isExpanded: usedIsExpanded,
+      onChange: (value) => {
+        onChange(value);
+        setUsedIsExpanded(value);
+      }
+    }
+  );
+});
+
+// src/components/layout/FAQSection.tsx
+import clsx6 from "clsx";
+
+// src/components/layout/MarkdownInterpreter.tsx
+import { Fragment as Fragment2, jsx as jsx7 } from "react/jsx-runtime";
+var astNodeInserterType = ["helpwave", "newline"];
+var ASTNodeInterpreter = ({
+  node,
+  isRoot = false,
+  className = ""
+}) => {
+  switch (node.type) {
+    case "newline":
+      return /* @__PURE__ */ jsx7("br", {});
+    case "text":
+      return isRoot ? /* @__PURE__ */ jsx7("span", { className, children: node.text }) : node.text;
+    case "helpwave":
+      return /* @__PURE__ */ jsx7("span", { className: "font-bold font-space no-underline", children: "helpwave" });
+    case "none":
+      return isRoot ? /* @__PURE__ */ jsx7("span", { className, children: node.children.map((value, index) => /* @__PURE__ */ jsx7(
+        ASTNodeInterpreter,
+        {
+          node: value
+        },
+        index
+      )) }) : /* @__PURE__ */ jsx7(Fragment2, { children: node.children.map((value, index) => /* @__PURE__ */ jsx7(ASTNodeInterpreter, { node: value }, index)) });
+    case "bold":
+      return /* @__PURE__ */ jsx7("b", { children: node.children.map((value, index) => /* @__PURE__ */ jsx7(ASTNodeInterpreter, { node: value }, index)) });
+    case "italic":
+      return /* @__PURE__ */ jsx7("i", { children: node.children.map((value, index) => /* @__PURE__ */ jsx7(ASTNodeInterpreter, { node: value }, index)) });
+    case "underline":
+      return /* @__PURE__ */ jsx7("u", { children: node.children.map((value, index) => /* @__PURE__ */ jsx7(ASTNodeInterpreter, { node: value }, index)) });
+    case "font-space":
+      return /* @__PURE__ */ jsx7("span", { className: "font-space", children: node.children.map((value, index) => /* @__PURE__ */ jsx7(
+        ASTNodeInterpreter,
+        {
+          node: value
+        },
+        index
+      )) });
+    case "primary":
+      return /* @__PURE__ */ jsx7("span", { className: "text-primary", children: node.children.map((value, index) => /* @__PURE__ */ jsx7(
+        ASTNodeInterpreter,
+        {
+          node: value
+        },
+        index
+      )) });
+    case "secondary":
+      return /* @__PURE__ */ jsx7("span", { className: "text-secondary", children: node.children.map((value, index) => /* @__PURE__ */ jsx7(
+        ASTNodeInterpreter,
+        {
+          node: value
+        },
+        index
+      )) });
+    case "warn":
+      return /* @__PURE__ */ jsx7("span", { className: "text-warning", children: node.children.map((value, index) => /* @__PURE__ */ jsx7(
+        ASTNodeInterpreter,
+        {
+          node: value
+        },
+        index
+      )) });
+    case "positive":
+      return /* @__PURE__ */ jsx7("span", { className: "text-positive", children: node.children.map((value, index) => /* @__PURE__ */ jsx7(
+        ASTNodeInterpreter,
+        {
+          node: value
+        },
+        index
+      )) });
+    case "negative":
+      return /* @__PURE__ */ jsx7("span", { className: "text-negative", children: node.children.map((value, index) => /* @__PURE__ */ jsx7(
+        ASTNodeInterpreter,
+        {
+          node: value
+        },
+        index
+      )) });
+    default:
+      return null;
+  }
+};
+var modifierIdentifierMapping = [
+  { id: "i", name: "italic" },
+  { id: "b", name: "bold" },
+  { id: "u", name: "underline" },
+  { id: "space", name: "font-space" },
+  { id: "primary", name: "primary" },
+  { id: "secondary", name: "secondary" },
+  { id: "warn", name: "warn" },
+  { id: "positive", name: "positive" },
+  { id: "negative", name: "negative" }
+];
+var inserterIdentifierMapping = [
+  { id: "helpwave", name: "helpwave" },
+  { id: "newline", name: "newline" }
+];
+var parseMarkdown = (text, commandStart = "\\", open = "{", close = "}") => {
+  let start = text.indexOf(commandStart);
+  const children = [];
+  while (text !== "") {
+    if (start === -1) {
+      children.push({
+        type: "text",
+        text
+      });
+      break;
+    }
+    children.push(parseMarkdown(text.substring(0, start)));
+    text = text.substring(start);
+    if (text.length <= 1) {
+      children.push({
+        type: "text",
+        text
+      });
+      text = "";
+      continue;
+    }
+    const simpleReplace = [commandStart, open, close];
+    if (simpleReplace.some((value) => text[1] === value)) {
+      children.push({
+        type: "text",
+        text: simpleReplace.find((value) => text[1] === value)
+      });
+      text = text.substring(2);
+      start = text.indexOf(commandStart);
+      continue;
+    }
+    const inserter = inserterIdentifierMapping.find((value) => text.substring(1).startsWith(value.id));
+    if (inserter) {
+      children.push({
+        type: inserter.name
+      });
+      text = text.substring(inserter.id.length + 1);
+      start = text.indexOf(commandStart);
+      continue;
+    }
+    const modifier = modifierIdentifierMapping.find((value) => text.substring(1).startsWith(value.id));
+    if (modifier) {
+      if (text[modifier.id.length + 1] !== open) {
+        children.push({
+          type: "text",
+          text: text.substring(0, modifier.id.length + 1)
+        });
+        text = text.substring(modifier.id.length + 2);
+        start = text.indexOf(commandStart);
+        continue;
+      }
+      let closing = -1;
+      let index = modifier.id.length + 2;
+      let counter = 1;
+      let escaping = false;
+      while (index < text.length) {
+        if (text[index] === open && !escaping) {
+          counter++;
+        }
+        if (text[index] === close && !escaping) {
+          counter--;
+          if (counter === 0) {
+            closing = index;
+            break;
+          }
+        }
+        escaping = text[index] === commandStart;
+        index++;
+      }
+      if (closing !== -1) {
+        children.push({
+          type: modifier.name,
+          children: [parseMarkdown(text.substring(modifier.id.length + 2, closing))]
+        });
+        text = text.substring(closing + 1);
+        start = text.indexOf(commandStart);
+        continue;
+      }
+    }
+    children.push({
+      type: "text",
+      text: text[0]
+    });
+    text = text.substring(1);
+    start = text.indexOf(commandStart);
+  }
+  return {
+    type: "none",
+    children
+  };
+};
+var optimizeTree = (node) => {
+  if (node.type === "text") {
+    return !node.text ? void 0 : node;
+  }
+  if (astNodeInserterType.some((value) => value === node.type)) {
+    return node;
+  }
+  const currentNode = node;
+  if (currentNode.children.length === 0) {
+    return void 0;
+  }
+  let children = [];
+  for (let i = 0; i < currentNode.children.length; i++) {
+    const child = optimizeTree(currentNode.children[i]);
+    if (!child) {
+      continue;
+    }
+    if (child.type === "none") {
+      children.push(...child.children);
+    } else {
+      children.push(child);
+    }
+  }
+  currentNode.children = children;
+  children = [];
+  for (let i = 0; i < currentNode.children.length; i++) {
+    const child = currentNode.children[i];
+    if (child) {
+      if (child.type === "text" && children[children.length - 1]?.type === "text") {
+        children[children.length - 1].text += child.text;
+      } else {
+        children.push(child);
+      }
+    }
+  }
+  currentNode.children = children;
+  return currentNode;
+};
+var MarkdownInterpreter = ({ text, className }) => {
+  const tree = parseMarkdown(text);
+  const optimizedTree = optimizeTree(tree);
+  return /* @__PURE__ */ jsx7(ASTNodeInterpreter, { node: optimizedTree, isRoot: true, className });
+};
+
+// src/components/layout/FAQSection.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+var FAQSection = ({
+  entries,
+  expandableClassName
+}) => {
+  return /* @__PURE__ */ jsx8("ul", { className: "flex-col-4", children: entries.map(({ id, title, content, ...restProps }) => /* @__PURE__ */ jsx8("li", { children: /* @__PURE__ */ jsx8(
+    ExpandableUncontrolled,
+    {
+      ...restProps,
+      label: /* @__PURE__ */ jsx8("h3", { id, className: "typography-title-md-semibold", children: title }),
+      clickOnlyOnHeader: false,
+      icon: (expanded) => /* @__PURE__ */ jsx8(ExpansionIcon, { isExpanded: expanded, className: "text-primary" }),
+      className: clsx6("rounded-xl", expandableClassName),
+      children: /* @__PURE__ */ jsx8("div", { className: "mt-2", children: content.type === "markdown" ? /* @__PURE__ */ jsx8(MarkdownInterpreter, { text: content.value }) : content.value })
+    },
+    id
+  ) }, id)) });
+};
+
+// src/components/layout/FloatingContainer.tsx
+import { forwardRef as forwardRef4, useImperativeHandle, useRef as useRef2 } from "react";
+import { createPortal } from "react-dom";
+import { clsx as clsx7 } from "clsx";
+
+// src/hooks/useFloatingElement.ts
+import { useCallback as useCallback4, useEffect as useEffect5, useState as useState6 } from "react";
+
+// src/utils/math.ts
+var clamp = (value, range2 = [0, 1]) => {
+  const [min, max] = range2;
+  return Math.min(Math.max(value, min), max);
+};
+
+// src/hooks/focus/useIsMounted.ts
+import { useEffect as useEffect4, useLayoutEffect, useState as useState5 } from "react";
+var isClient = typeof window !== "undefined" && typeof document !== "undefined";
+var useIsomorphicEffect = isClient ? useLayoutEffect : useEffect4;
+var useIsMounted = () => {
+  const [isMounted, setIsMounted] = useState5(false);
+  useIsomorphicEffect(() => {
+    setIsMounted(true);
+    return () => {
+      setIsMounted(false);
+    };
+  }, []);
+  return isMounted;
+};
+
+// src/hooks/useFloatingElement.ts
+function calculatePosition({
+  windowRect,
+  containerRect,
+  anchorRect,
+  options
+}) {
+  const { verticalAlignment, horizontalAlignment, gap, screenPadding } = options;
+  const windowWidth = windowRect.width;
+  const windowHeight = windowRect.height;
+  const maxWidth = windowWidth - 2 * screenPadding;
+  const maxHeight = windowHeight - 2 * screenPadding;
+  const width = Math.min(containerRect.width, maxWidth);
+  const height = Math.min(containerRect.height, maxHeight);
+  const leftSuggestion = {
+    beforeStart: anchorRect.left - width - gap,
+    afterStart: anchorRect.left,
+    center: anchorRect.left + anchorRect.width / 2 - width / 2,
+    beforeEnd: anchorRect.right - width,
+    afterEnd: anchorRect.right + gap
+  }[horizontalAlignment];
+  const topSuggestion = {
+    beforeStart: anchorRect.top - height - gap,
+    afterStart: anchorRect.top,
+    center: anchorRect.top + anchorRect.height / 2 - height / 2,
+    beforeEnd: anchorRect.bottom - height,
+    afterEnd: anchorRect.bottom + gap
+  }[verticalAlignment];
+  const left = clamp(leftSuggestion, [
+    screenPadding,
+    windowWidth - screenPadding - width
+  ]);
+  const top = clamp(topSuggestion, [
+    screenPadding,
+    windowHeight - screenPadding - height
+  ]);
+  return {
+    left,
+    top,
+    maxWidth,
+    maxHeight
+  };
+}
+function useFloatingElement({
+  active = true,
+  windowRef,
+  anchorRef,
+  containerRef,
+  isPolling = false,
+  pollingInterval = 100,
+  verticalAlignment = "afterEnd",
+  horizontalAlignment = "afterStart",
+  screenPadding = 16,
+  gap = 4
+}) {
+  const [style, setStyle] = useState6();
+  const isMounted = useIsMounted();
+  const calculate = useCallback4(() => {
+    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;
+  useEffect5(() => {
+    if (active && isMounted) {
+      calculate();
+    } else {
+      setStyle(void 0);
+    }
+  }, [calculate, active, isMounted, height, width]);
+  useEffect5(() => {
+    window.addEventListener("resize", calculate);
+    let timeout;
+    if (isPolling) {
+      timeout = setInterval(calculate, pollingInterval);
+    }
+    return () => {
+      window.removeEventListener("resize", calculate);
+      if (timeout) {
+        clearInterval(timeout);
+      }
+    };
+  }, [calculate, isPolling, pollingInterval]);
+  return style;
+}
+
+// src/components/layout/FloatingContainer.tsx
+import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+var FloatingContainer = forwardRef4(function FloatingContainer2({
+  children,
+  backgroundOverlay,
+  anchor,
+  isPolling = false,
+  pollingInterval = 100,
+  verticalAlignment = "afterEnd",
+  horizontalAlignment = "afterStart",
+  screenPadding = 16,
+  gap = 4,
+  ...props
+}, forwardRef9) {
+  const innerRef = useRef2(null);
+  useImperativeHandle(forwardRef9, () => innerRef.current);
+  const position = useFloatingElement({
+    active: !props.hidden,
+    containerRef: innerRef,
+    anchorRef: anchor,
+    isPolling,
+    pollingInterval,
+    verticalAlignment,
+    horizontalAlignment,
+    gap,
+    screenPadding
+  });
+  return createPortal(
+    /* @__PURE__ */ jsxs5(Fragment3, { children: [
+      backgroundOverlay,
+      /* @__PURE__ */ jsx9(
+        "div",
+        {
+          ...props,
+          ref: innerRef,
+          style: {
+            position: "fixed",
+            overflow: "hidden",
+            opacity: position ? void 0 : 0,
+            // hide when position calculation isn't done yet
+            transition: position ? `top ${pollingInterval}ms linear, left ${pollingInterval}ms linear` : void 0,
+            ...position,
+            ...props.style
+          },
+          className: clsx7("motion-safe:duration-100 motion-reduce:duration-0", props.className),
+          children
+        }
+      )
+    ] }),
+    document.body
+  );
+});
+
+// src/components/layout/ListBox.tsx
+import React2, { createContext as createContext3, forwardRef as forwardRef5, useCallback as useCallback5, useContext as useContext3, useEffect as useEffect6, useRef as useRef3, useState as useState7 } from "react";
+import { clsx as clsx8 } from "clsx";
+
+// src/utils/match.ts
+var match = (key, values) => {
+  return values[key];
+};
+
+// src/components/layout/ListBox.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+var ListBoxContext = createContext3(null);
+function useListBoxContext() {
+  const ctx = useContext3(ListBoxContext);
+  if (!ctx) {
+    throw new Error("ListBoxItem must be used within a ListBoxPrimitive");
+  }
+  return ctx;
+}
+var ListBoxItem = forwardRef5(
+  function ListBoxItem2({ value, disabled = false, children, className, ...rest }, ref) {
+    const {
+      registerItem,
+      unregisterItem,
+      highlightedId,
+      setHighlightedId,
+      onItemClick,
+      isSelected
+    } = useListBoxContext();
+    const itemRef = useRef3(null);
+    const id = React2.useId();
+    useEffect6(() => {
+      registerItem({ id, value, disabled, ref: itemRef });
+      return () => unregisterItem(id);
+    }, [id, value, disabled, registerItem, unregisterItem]);
+    const isHighlighted = highlightedId === id;
+    const selected = isSelected(value);
+    return /* @__PURE__ */ jsx10(
+      "li",
+      {
+        ref: (node) => {
+          itemRef.current = node;
+          if (typeof ref === "function") ref(node);
+          else if (ref) ref.current = node;
+        },
+        id,
+        role: "option",
+        "aria-disabled": disabled,
+        "aria-selected": selected,
+        "data-highlighted": isHighlighted ? "" : void 0,
+        "data-selected": selected ? "" : void 0,
+        "data-disabled": disabled ? "" : void 0,
+        className: clsx8(
+          "flex-row-1 items-center px-2 py-1 rounded-md",
+          "data-highlighted:bg-primary/20",
+          "data-disabled:text-disabled data-disabled:cursor-not-allowed",
+          "not-data-disabled:cursor-pointer",
+          className
+        ),
+        onClick: () => {
+          if (!disabled) onItemClick(id);
+        },
+        onMouseEnter: () => {
+          if (!disabled) {
+            setHighlightedId(id);
+          }
+        },
+        ...rest,
+        children: children ?? value
+      }
+    );
+  }
+);
+var ListBoxPrimitive = forwardRef5(
+  function ListBoxPrimitive2({
+    value,
+    onSelectionChanged,
+    onItemClicked,
+    isSelection = false,
+    isMultiple = false,
+    orientation = "vertical",
+    ...props
+  }, ref) {
+    const itemsRef = useRef3([]);
+    const [highlightedIndex, setHighlightedIndex] = useState7(void 0);
+    const registerItem = useCallback5((item) => {
+      itemsRef.current.push(item);
+      itemsRef.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 = useCallback5((id) => {
+      itemsRef.current = itemsRef.current.filter((i) => i.id !== id);
+    }, []);
+    const isSelected = useCallback5(
+      (val) => (value ?? []).includes(val),
+      [value]
+    );
+    const onItemClickedHandler = useCallback5(
+      (id) => {
+        const index = itemsRef.current.findIndex((i) => i.id === id);
+        if (index === -1) {
+          console.error("ListBoxItem provided an invalid id");
+          return;
+        }
+        const item = itemsRef.current[index];
+        const val = item.value;
+        onItemClicked?.(val);
+        setHighlightedIndex(index);
+        if (!isSelection) return;
+        if (!isMultiple) {
+          onSelectionChanged?.([val]);
+        } else {
+          if (isSelected(val)) {
+            onSelectionChanged?.((value ?? []).filter((v) => v !== val));
+          } else {
+            onSelectionChanged?.([...value ?? [], val]);
+          }
+        }
+      },
+      [onItemClicked, isSelection, isMultiple, onSelectionChanged, isSelected, value]
+    );
+    const setHighlightedId = useCallback5((id) => {
+      const index = itemsRef.current.findIndex((i) => i.id === id);
+      if (index !== -1) {
+        setHighlightedIndex(index);
+      }
+    }, []);
+    useEffect6(() => {
+      if (highlightedIndex !== void 0) {
+        itemsRef.current[highlightedIndex]?.ref.current?.scrollIntoView({ block: "nearest", behavior: "auto" });
+      }
+    }, [highlightedIndex]);
+    const highlightedItem = itemsRef.current[highlightedIndex];
+    const ctxValue = {
+      registerItem,
+      unregisterItem,
+      highlightedId: highlightedItem?.id,
+      setHighlightedId,
+      onItemClick: onItemClickedHandler,
+      isSelected
+    };
+    const moveHighlight = (delta) => {
+      if (itemsRef.current.length === 0) return;
+      let nextIndex = highlightedIndex ?? -1;
+      for (let i = 0; i < itemsRef.current.length; i++) {
+        nextIndex = (nextIndex + delta + itemsRef.current.length) % itemsRef.current.length;
+        if (!itemsRef.current[nextIndex].disabled) break;
+      }
+      setHighlightedIndex(nextIndex);
+    };
+    return /* @__PURE__ */ jsx10(ListBoxContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsx10(
+      "ul",
+      {
+        ref,
+        ...props,
+        onFocus: (event) => {
+          if (highlightedIndex === void 0) {
+            const firstEnabled = itemsRef.current.findIndex((i) => !i.disabled);
+            setHighlightedIndex(firstEnabled !== -1 ? firstEnabled : void 0);
+          }
+          props.onFocus?.(event);
+        },
+        onBlur: (event) => {
+          setHighlightedIndex(void 0);
+          props.onBlur?.(event);
+        },
+        onKeyDown: (event) => {
+          switch (event.key) {
+            case match(orientation, {
+              vertical: "ArrowDown",
+              horizontal: "ArrowUp"
+            }):
+              moveHighlight(1);
+              event.preventDefault();
+              break;
+            case match(orientation, {
+              vertical: "ArrowUp",
+              horizontal: "ArrowDown"
+            }):
+              moveHighlight(-1);
+              event.preventDefault();
+              break;
+            case "Home":
+              setHighlightedIndex(itemsRef.current.findIndex((i) => !i.disabled));
+              event.preventDefault();
+              break;
+            case "End":
+              for (let i = itemsRef.current.length - 1; i >= 0; i--) {
+                if (!itemsRef.current[i].disabled) {
+                  setHighlightedIndex(i);
+                  break;
+                }
+              }
+              event.preventDefault();
+              break;
+            case "Enter":
+            case " ":
+              if (highlightedIndex !== void 0) {
+                event.preventDefault();
+                onItemClickedHandler(itemsRef.current[highlightedIndex].id);
+              }
+              break;
+          }
+          props.onKeyDown?.(event);
+        },
+        role: "listbox",
+        "aria-multiselectable": isSelection ? isMultiple : void 0,
+        "aria-orientation": orientation,
+        tabIndex: 0,
+        children: props.children
+      }
+    ) });
+  }
+);
+var ListBoxMultiple = ({ ...props }) => {
+  return /* @__PURE__ */ jsx10(ListBoxPrimitive, { ...props });
+};
+var ListBoxMultipleUncontrolled = ({
+  value: initialValue,
+  onSelectionChanged,
+  ...props
+}) => {
+  const [value, setValue] = useState7(initialValue);
+  useEffect6(() => {
+    setValue(initialValue);
+  }, [initialValue]);
+  return /* @__PURE__ */ jsx10(
+    ListBoxMultiple,
+    {
+      ...props,
+      value,
+      onSelectionChanged: (newValue) => {
+        setValue(newValue);
+        onSelectionChanged?.(newValue);
+      }
+    }
+  );
+};
+var ListBox = forwardRef5(function ListBox2({
+  value,
+  onSelectionChanged,
+  ...props
+}, ref) {
+  return /* @__PURE__ */ jsx10(
+    ListBoxPrimitive,
+    {
+      ref,
+      value: value !== void 0 ? [value] : void 0,
+      onSelectionChanged: (newValue) => {
+        onSelectionChanged(newValue[0] ?? value);
+      },
+      isMultiple: false,
+      ...props
+    }
+  );
+});
+var ListBoxUncontrolled = ({
+  value: initialValue,
+  onSelectionChanged,
+  ...props
+}) => {
+  const [value, setValue] = useState7(initialValue);
+  useEffect6(() => {
+    setValue(initialValue);
+  }, [initialValue]);
+  return /* @__PURE__ */ jsx10(
+    ListBox,
+    {
+      ...props,
+      value,
+      onSelectionChanged: (newValue) => {
+        setValue(newValue);
+        onSelectionChanged?.(newValue);
+      }
+    }
+  );
+};
+
+// node_modules/@radix-ui/react-scroll-area/dist/index.mjs
+import * as React23 from "react";
+
+// node_modules/@radix-ui/react-primitive/dist/index.mjs
+import * as React5 from "react";
+import * as ReactDOM from "react-dom";
+
+// node_modules/@radix-ui/react-slot/dist/index.mjs
+import * as React4 from "react";
+
+// node_modules/@radix-ui/react-compose-refs/dist/index.mjs
+import * as React3 from "react";
+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 React3.useCallback(composeRefs(...refs), refs);
+}
+
+// node_modules/@radix-ui/react-slot/dist/index.mjs
+import { Fragment as Fragment22, jsx as jsx11 } from "react/jsx-runtime";
+// @__NO_SIDE_EFFECTS__
+function createSlot(ownerName) {
+  const SlotClone = /* @__PURE__ */ createSlotClone(ownerName);
+  const Slot2 = React4.forwardRef((props, forwardedRef) => {
+    const { children, ...slotProps } = props;
+    const childrenArray = React4.Children.toArray(children);
+    const slottable = childrenArray.find(isSlottable);
+    if (slottable) {
+      const newElement = slottable.props.children;
+      const newChildren = childrenArray.map((child) => {
+        if (child === slottable) {
+          if (React4.Children.count(newElement) > 1) return React4.Children.only(null);
+          return React4.isValidElement(newElement) ? newElement.props.children : null;
+        } else {
+          return child;
+        }
+      });
+      return /* @__PURE__ */ jsx11(SlotClone, { ...slotProps, ref: forwardedRef, children: React4.isValidElement(newElement) ? React4.cloneElement(newElement, void 0, newChildren) : null });
+    }
+    return /* @__PURE__ */ jsx11(SlotClone, { ...slotProps, ref: forwardedRef, children });
+  });
+  Slot2.displayName = `${ownerName}.Slot`;
+  return Slot2;
+}
+// @__NO_SIDE_EFFECTS__
+function createSlotClone(ownerName) {
+  const SlotClone = React4.forwardRef((props, forwardedRef) => {
+    const { children, ...slotProps } = props;
+    if (React4.isValidElement(children)) {
+      const childrenRef = getElementRef(children);
+      const props2 = mergeProps(slotProps, children.props);
+      if (children.type !== React4.Fragment) {
+        props2.ref = forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef;
+      }
+      return React4.cloneElement(children, props2);
+    }
+    return React4.Children.count(children) > 1 ? React4.Children.only(null) : null;
+  });
+  SlotClone.displayName = `${ownerName}.SlotClone`;
+  return SlotClone;
+}
+var SLOTTABLE_IDENTIFIER = Symbol("radix.slottable");
+function isSlottable(child) {
+  return React4.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 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
+import { jsx as jsx12 } from "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 = React5.forwardRef((props, forwardedRef) => {
+    const { asChild, ...primitiveProps } = props;
+    const Comp = asChild ? Slot : node;
+    if (typeof window !== "undefined") {
+      window[Symbol.for("radix-ui")] = true;
+    }
+    return /* @__PURE__ */ jsx12(Comp, { ...primitiveProps, ref: forwardedRef });
+  });
+  Node2.displayName = `Primitive.${node}`;
+  return { ...primitive, [node]: Node2 };
+}, {});
+
+// node_modules/@radix-ui/react-presence/dist/index.mjs
+import * as React22 from "react";
+
+// node_modules/@radix-ui/react-use-layout-effect/dist/index.mjs
+import * as React6 from "react";
+var useLayoutEffect22 = globalThis?.document ? React6.useLayoutEffect : () => {
+};
+
+// node_modules/@radix-ui/react-presence/dist/index.mjs
+import * as React7 from "react";
+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 }) : React22.Children.only(children);
+  const ref = useComposedRefs(presence.ref, getElementRef2(child));
+  const forceMount = typeof children === "function";
+  return forceMount || presence.isPresent ? React22.cloneElement(child, { ref }) : null;
+};
+Presence.displayName = "Presence";
+function usePresence(present) {
+  const [node, setNode] = React22.useState();
+  const stylesRef = React22.useRef(null);
+  const prevPresentRef = React22.useRef(present);
+  const prevAnimationNameRef = React22.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"
+    }
+  });
+  React22.useEffect(() => {
+    const currentAnimationName = getAnimationName(stylesRef.current);
+    prevAnimationNameRef.current = state === "mounted" ? currentAnimationName : "none";
+  }, [state]);
+  useLayoutEffect22(() => {
+    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]);
+  useLayoutEffect22(() => {
+    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: React22.useCallback((node2) => {
+      stylesRef.current = node2 ? getComputedStyle(node2) : null;
+      setNode(node2);
+    }, [])
+  };
+}
+function getAnimationName(styles) {
+  return styles?.animationName || "none";
+}
+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-context/dist/index.mjs
+import * as React8 from "react";
+import { jsx as jsx13 } from "react/jsx-runtime";
+function createContextScope(scopeName, createContextScopeDeps = []) {
+  let defaultContexts = [];
+  function createContext32(rootComponentName, defaultContext) {
+    const BaseContext = React8.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 = React8.useMemo(() => context, Object.values(context));
+      return /* @__PURE__ */ jsx13(Context.Provider, { value, children });
+    };
+    Provider.displayName = rootComponentName + "Provider";
+    function useContext22(consumerName, scope) {
+      const Context = scope?.[scopeName]?.[index] || BaseContext;
+      const context = React8.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 React8.createContext(defaultContext);
+    });
+    return function useScope(scope) {
+      const contexts = scope?.[scopeName] || scopeContexts;
+      return React8.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 React8.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
+    };
+  };
+  createScope.scopeName = baseScope.scopeName;
+  return createScope;
+}
+
+// node_modules/@radix-ui/react-use-callback-ref/dist/index.mjs
+import * as React9 from "react";
+function useCallbackRef(callback) {
+  const callbackRef = React9.useRef(callback);
+  React9.useEffect(() => {
+    callbackRef.current = callback;
+  });
+  return React9.useMemo(() => (...args) => callbackRef.current?.(...args), []);
+}
+
+// node_modules/@radix-ui/react-direction/dist/index.mjs
+import * as React10 from "react";
+import { jsx as jsx14 } from "react/jsx-runtime";
+var DirectionContext = React10.createContext(void 0);
+function useDirection(localDir) {
+  const globalDir = React10.useContext(DirectionContext);
+  return localDir || globalDir || "ltr";
+}
+
+// node_modules/@radix-ui/number/dist/index.mjs
+function clamp2(value, [min, max]) {
+  return Math.min(max, Math.max(min, value));
+}
+
+// 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-scroll-area/dist/index.mjs
+import * as React11 from "react";
+import { Fragment as Fragment5, jsx as jsx15, jsxs as jsxs6 } from "react/jsx-runtime";
+function useStateMachine2(initialState, machine) {
+  return React11.useReducer((state, event) => {
+    const nextState = machine[state][event];
+    return nextState ?? state;
+  }, initialState);
+}
+var SCROLL_AREA_NAME = "ScrollArea";
+var [createScrollAreaContext, createScrollAreaScope] = createContextScope(SCROLL_AREA_NAME);
+var [ScrollAreaProvider, useScrollAreaContext] = createScrollAreaContext(SCROLL_AREA_NAME);
+var ScrollArea = React23.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      __scopeScrollArea,
+      type = "hover",
+      dir,
+      scrollHideDelay = 600,
+      ...scrollAreaProps
+    } = props;
+    const [scrollArea, setScrollArea] = React23.useState(null);
+    const [viewport, setViewport] = React23.useState(null);
+    const [content, setContent] = React23.useState(null);
+    const [scrollbarX, setScrollbarX] = React23.useState(null);
+    const [scrollbarY, setScrollbarY] = React23.useState(null);
+    const [cornerWidth, setCornerWidth] = React23.useState(0);
+    const [cornerHeight, setCornerHeight] = React23.useState(0);
+    const [scrollbarXEnabled, setScrollbarXEnabled] = React23.useState(false);
+    const [scrollbarYEnabled, setScrollbarYEnabled] = React23.useState(false);
+    const composedRefs = useComposedRefs(forwardedRef, (node) => setScrollArea(node));
+    const direction = useDirection(dir);
+    return /* @__PURE__ */ jsx15(
+      ScrollAreaProvider,
+      {
+        scope: __scopeScrollArea,
+        type,
+        dir: direction,
+        scrollHideDelay,
+        scrollArea,
+        viewport,
+        onViewportChange: setViewport,
+        content,
+        onContentChange: setContent,
+        scrollbarX,
+        onScrollbarXChange: setScrollbarX,
+        scrollbarXEnabled,
+        onScrollbarXEnabledChange: setScrollbarXEnabled,
+        scrollbarY,
+        onScrollbarYChange: setScrollbarY,
+        scrollbarYEnabled,
+        onScrollbarYEnabledChange: setScrollbarYEnabled,
+        onCornerWidthChange: setCornerWidth,
+        onCornerHeightChange: setCornerHeight,
+        children: /* @__PURE__ */ jsx15(
+          Primitive.div,
+          {
+            dir: direction,
+            ...scrollAreaProps,
+            ref: composedRefs,
+            style: {
+              position: "relative",
+              // Pass corner sizes as CSS vars to reduce re-renders of context consumers
+              ["--radix-scroll-area-corner-width"]: cornerWidth + "px",
+              ["--radix-scroll-area-corner-height"]: cornerHeight + "px",
+              ...props.style
+            }
+          }
+        )
+      }
+    );
+  }
+);
+ScrollArea.displayName = SCROLL_AREA_NAME;
+var VIEWPORT_NAME = "ScrollAreaViewport";
+var ScrollAreaViewport = React23.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeScrollArea, children, nonce, ...viewportProps } = props;
+    const context = useScrollAreaContext(VIEWPORT_NAME, __scopeScrollArea);
+    const ref = React23.useRef(null);
+    const composedRefs = useComposedRefs(forwardedRef, ref, context.onViewportChange);
+    return /* @__PURE__ */ jsxs6(Fragment5, { children: [
+      /* @__PURE__ */ jsx15(
+        "style",
+        {
+          dangerouslySetInnerHTML: {
+            __html: `[data-radix-scroll-area-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-scroll-area-viewport]::-webkit-scrollbar{display:none}`
+          },
+          nonce
+        }
+      ),
+      /* @__PURE__ */ jsx15(
+        Primitive.div,
+        {
+          "data-radix-scroll-area-viewport": "",
+          ...viewportProps,
+          ref: composedRefs,
+          style: {
+            /**
+             * We don't support `visible` because the intention is to have at least one scrollbar
+             * if this component is used and `visible` will behave like `auto` in that case
+             * https://developer.mozilla.org/en-US/docs/Web/CSS/overflow#description
+             *
+             * We don't handle `auto` because the intention is for the native implementation
+             * to be hidden if using this component. We just want to ensure the node is scrollable
+             * so could have used either `scroll` or `auto` here. We picked `scroll` to prevent
+             * the browser from having to work out whether to render native scrollbars or not,
+             * we tell it to with the intention of hiding them in CSS.
+             */
+            overflowX: context.scrollbarXEnabled ? "scroll" : "hidden",
+            overflowY: context.scrollbarYEnabled ? "scroll" : "hidden",
+            ...props.style
+          },
+          children: /* @__PURE__ */ jsx15("div", { ref: context.onContentChange, style: { minWidth: "100%", display: "table" }, children })
+        }
+      )
+    ] });
+  }
+);
+ScrollAreaViewport.displayName = VIEWPORT_NAME;
+var SCROLLBAR_NAME = "ScrollAreaScrollbar";
+var ScrollAreaScrollbar = React23.forwardRef(
+  (props, forwardedRef) => {
+    const { forceMount, ...scrollbarProps } = props;
+    const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
+    const { onScrollbarXEnabledChange, onScrollbarYEnabledChange } = context;
+    const isHorizontal = props.orientation === "horizontal";
+    React23.useEffect(() => {
+      isHorizontal ? onScrollbarXEnabledChange(true) : onScrollbarYEnabledChange(true);
+      return () => {
+        isHorizontal ? onScrollbarXEnabledChange(false) : onScrollbarYEnabledChange(false);
+      };
+    }, [isHorizontal, onScrollbarXEnabledChange, onScrollbarYEnabledChange]);
+    return context.type === "hover" ? /* @__PURE__ */ jsx15(ScrollAreaScrollbarHover, { ...scrollbarProps, ref: forwardedRef, forceMount }) : context.type === "scroll" ? /* @__PURE__ */ jsx15(ScrollAreaScrollbarScroll, { ...scrollbarProps, ref: forwardedRef, forceMount }) : context.type === "auto" ? /* @__PURE__ */ jsx15(ScrollAreaScrollbarAuto, { ...scrollbarProps, ref: forwardedRef, forceMount }) : context.type === "always" ? /* @__PURE__ */ jsx15(ScrollAreaScrollbarVisible, { ...scrollbarProps, ref: forwardedRef }) : null;
+  }
+);
+ScrollAreaScrollbar.displayName = SCROLLBAR_NAME;
+var ScrollAreaScrollbarHover = React23.forwardRef((props, forwardedRef) => {
+  const { forceMount, ...scrollbarProps } = props;
+  const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
+  const [visible, setVisible] = React23.useState(false);
+  React23.useEffect(() => {
+    const scrollArea = context.scrollArea;
+    let hideTimer = 0;
+    if (scrollArea) {
+      const handlePointerEnter = () => {
+        window.clearTimeout(hideTimer);
+        setVisible(true);
+      };
+      const handlePointerLeave = () => {
+        hideTimer = window.setTimeout(() => setVisible(false), context.scrollHideDelay);
+      };
+      scrollArea.addEventListener("pointerenter", handlePointerEnter);
+      scrollArea.addEventListener("pointerleave", handlePointerLeave);
+      return () => {
+        window.clearTimeout(hideTimer);
+        scrollArea.removeEventListener("pointerenter", handlePointerEnter);
+        scrollArea.removeEventListener("pointerleave", handlePointerLeave);
+      };
+    }
+  }, [context.scrollArea, context.scrollHideDelay]);
+  return /* @__PURE__ */ jsx15(Presence, { present: forceMount || visible, children: /* @__PURE__ */ jsx15(
+    ScrollAreaScrollbarAuto,
+    {
+      "data-state": visible ? "visible" : "hidden",
+      ...scrollbarProps,
+      ref: forwardedRef
+    }
+  ) });
+});
+var ScrollAreaScrollbarScroll = React23.forwardRef((props, forwardedRef) => {
+  const { forceMount, ...scrollbarProps } = props;
+  const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
+  const isHorizontal = props.orientation === "horizontal";
+  const debounceScrollEnd = useDebounceCallback(() => send("SCROLL_END"), 100);
+  const [state, send] = useStateMachine2("hidden", {
+    hidden: {
+      SCROLL: "scrolling"
+    },
+    scrolling: {
+      SCROLL_END: "idle",
+      POINTER_ENTER: "interacting"
+    },
+    interacting: {
+      SCROLL: "interacting",
+      POINTER_LEAVE: "idle"
+    },
+    idle: {
+      HIDE: "hidden",
+      SCROLL: "scrolling",
+      POINTER_ENTER: "interacting"
+    }
+  });
+  React23.useEffect(() => {
+    if (state === "idle") {
+      const hideTimer = window.setTimeout(() => send("HIDE"), context.scrollHideDelay);
+      return () => window.clearTimeout(hideTimer);
+    }
+  }, [state, context.scrollHideDelay, send]);
+  React23.useEffect(() => {
+    const viewport = context.viewport;
+    const scrollDirection = isHorizontal ? "scrollLeft" : "scrollTop";
+    if (viewport) {
+      let prevScrollPos = viewport[scrollDirection];
+      const handleScroll = () => {
+        const scrollPos = viewport[scrollDirection];
+        const hasScrollInDirectionChanged = prevScrollPos !== scrollPos;
+        if (hasScrollInDirectionChanged) {
+          send("SCROLL");
+          debounceScrollEnd();
+        }
+        prevScrollPos = scrollPos;
+      };
+      viewport.addEventListener("scroll", handleScroll);
+      return () => viewport.removeEventListener("scroll", handleScroll);
+    }
+  }, [context.viewport, isHorizontal, send, debounceScrollEnd]);
+  return /* @__PURE__ */ jsx15(Presence, { present: forceMount || state !== "hidden", children: /* @__PURE__ */ jsx15(
+    ScrollAreaScrollbarVisible,
+    {
+      "data-state": state === "hidden" ? "hidden" : "visible",
+      ...scrollbarProps,
+      ref: forwardedRef,
+      onPointerEnter: composeEventHandlers(props.onPointerEnter, () => send("POINTER_ENTER")),
+      onPointerLeave: composeEventHandlers(props.onPointerLeave, () => send("POINTER_LEAVE"))
+    }
+  ) });
+});
+var ScrollAreaScrollbarAuto = React23.forwardRef((props, forwardedRef) => {
+  const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
+  const { forceMount, ...scrollbarProps } = props;
+  const [visible, setVisible] = React23.useState(false);
+  const isHorizontal = props.orientation === "horizontal";
+  const handleResize = useDebounceCallback(() => {
+    if (context.viewport) {
+      const isOverflowX = context.viewport.offsetWidth < context.viewport.scrollWidth;
+      const isOverflowY = context.viewport.offsetHeight < context.viewport.scrollHeight;
+      setVisible(isHorizontal ? isOverflowX : isOverflowY);
+    }
+  }, 10);
+  useResizeObserver(context.viewport, handleResize);
+  useResizeObserver(context.content, handleResize);
+  return /* @__PURE__ */ jsx15(Presence, { present: forceMount || visible, children: /* @__PURE__ */ jsx15(
+    ScrollAreaScrollbarVisible,
+    {
+      "data-state": visible ? "visible" : "hidden",
+      ...scrollbarProps,
+      ref: forwardedRef
+    }
+  ) });
+});
+var ScrollAreaScrollbarVisible = React23.forwardRef((props, forwardedRef) => {
+  const { orientation = "vertical", ...scrollbarProps } = props;
+  const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
+  const thumbRef = React23.useRef(null);
+  const pointerOffsetRef = React23.useRef(0);
+  const [sizes, setSizes] = React23.useState({
+    content: 0,
+    viewport: 0,
+    scrollbar: { size: 0, paddingStart: 0, paddingEnd: 0 }
+  });
+  const thumbRatio = getThumbRatio(sizes.viewport, sizes.content);
+  const commonProps = {
+    ...scrollbarProps,
+    sizes,
+    onSizesChange: setSizes,
+    hasThumb: Boolean(thumbRatio > 0 && thumbRatio < 1),
+    onThumbChange: (thumb) => thumbRef.current = thumb,
+    onThumbPointerUp: () => pointerOffsetRef.current = 0,
+    onThumbPointerDown: (pointerPos) => pointerOffsetRef.current = pointerPos
+  };
+  function getScrollPosition(pointerPos, dir) {
+    return getScrollPositionFromPointer(pointerPos, pointerOffsetRef.current, sizes, dir);
+  }
+  if (orientation === "horizontal") {
+    return /* @__PURE__ */ jsx15(
+      ScrollAreaScrollbarX,
+      {
+        ...commonProps,
+        ref: forwardedRef,
+        onThumbPositionChange: () => {
+          if (context.viewport && thumbRef.current) {
+            const scrollPos = context.viewport.scrollLeft;
+            const offset = getThumbOffsetFromScroll(scrollPos, sizes, context.dir);
+            thumbRef.current.style.transform = `translate3d(${offset}px, 0, 0)`;
+          }
+        },
+        onWheelScroll: (scrollPos) => {
+          if (context.viewport) context.viewport.scrollLeft = scrollPos;
+        },
+        onDragScroll: (pointerPos) => {
+          if (context.viewport) {
+            context.viewport.scrollLeft = getScrollPosition(pointerPos, context.dir);
+          }
+        }
+      }
+    );
+  }
+  if (orientation === "vertical") {
+    return /* @__PURE__ */ jsx15(
+      ScrollAreaScrollbarY,
+      {
+        ...commonProps,
+        ref: forwardedRef,
+        onThumbPositionChange: () => {
+          if (context.viewport && thumbRef.current) {
+            const scrollPos = context.viewport.scrollTop;
+            const offset = getThumbOffsetFromScroll(scrollPos, sizes);
+            thumbRef.current.style.transform = `translate3d(0, ${offset}px, 0)`;
+          }
+        },
+        onWheelScroll: (scrollPos) => {
+          if (context.viewport) context.viewport.scrollTop = scrollPos;
+        },
+        onDragScroll: (pointerPos) => {
+          if (context.viewport) context.viewport.scrollTop = getScrollPosition(pointerPos);
+        }
+      }
+    );
+  }
+  return null;
+});
+var ScrollAreaScrollbarX = React23.forwardRef((props, forwardedRef) => {
+  const { sizes, onSizesChange, ...scrollbarProps } = props;
+  const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
+  const [computedStyle, setComputedStyle] = React23.useState();
+  const ref = React23.useRef(null);
+  const composeRefs2 = useComposedRefs(forwardedRef, ref, context.onScrollbarXChange);
+  React23.useEffect(() => {
+    if (ref.current) setComputedStyle(getComputedStyle(ref.current));
+  }, [ref]);
+  return /* @__PURE__ */ jsx15(
+    ScrollAreaScrollbarImpl,
+    {
+      "data-orientation": "horizontal",
+      ...scrollbarProps,
+      ref: composeRefs2,
+      sizes,
+      style: {
+        bottom: 0,
+        left: context.dir === "rtl" ? "var(--radix-scroll-area-corner-width)" : 0,
+        right: context.dir === "ltr" ? "var(--radix-scroll-area-corner-width)" : 0,
+        ["--radix-scroll-area-thumb-width"]: getThumbSize(sizes) + "px",
+        ...props.style
+      },
+      onThumbPointerDown: (pointerPos) => props.onThumbPointerDown(pointerPos.x),
+      onDragScroll: (pointerPos) => props.onDragScroll(pointerPos.x),
+      onWheelScroll: (event, maxScrollPos) => {
+        if (context.viewport) {
+          const scrollPos = context.viewport.scrollLeft + event.deltaX;
+          props.onWheelScroll(scrollPos);
+          if (isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos)) {
+            event.preventDefault();
+          }
+        }
+      },
+      onResize: () => {
+        if (ref.current && context.viewport && computedStyle) {
+          onSizesChange({
+            content: context.viewport.scrollWidth,
+            viewport: context.viewport.offsetWidth,
+            scrollbar: {
+              size: ref.current.clientWidth,
+              paddingStart: toInt(computedStyle.paddingLeft),
+              paddingEnd: toInt(computedStyle.paddingRight)
+            }
+          });
+        }
+      }
+    }
+  );
+});
+var ScrollAreaScrollbarY = React23.forwardRef((props, forwardedRef) => {
+  const { sizes, onSizesChange, ...scrollbarProps } = props;
+  const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
+  const [computedStyle, setComputedStyle] = React23.useState();
+  const ref = React23.useRef(null);
+  const composeRefs2 = useComposedRefs(forwardedRef, ref, context.onScrollbarYChange);
+  React23.useEffect(() => {
+    if (ref.current) setComputedStyle(getComputedStyle(ref.current));
+  }, [ref]);
+  return /* @__PURE__ */ jsx15(
+    ScrollAreaScrollbarImpl,
+    {
+      "data-orientation": "vertical",
+      ...scrollbarProps,
+      ref: composeRefs2,
+      sizes,
+      style: {
+        top: 0,
+        right: context.dir === "ltr" ? 0 : void 0,
+        left: context.dir === "rtl" ? 0 : void 0,
+        bottom: "var(--radix-scroll-area-corner-height)",
+        ["--radix-scroll-area-thumb-height"]: getThumbSize(sizes) + "px",
+        ...props.style
+      },
+      onThumbPointerDown: (pointerPos) => props.onThumbPointerDown(pointerPos.y),
+      onDragScroll: (pointerPos) => props.onDragScroll(pointerPos.y),
+      onWheelScroll: (event, maxScrollPos) => {
+        if (context.viewport) {
+          const scrollPos = context.viewport.scrollTop + event.deltaY;
+          props.onWheelScroll(scrollPos);
+          if (isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos)) {
+            event.preventDefault();
+          }
+        }
+      },
+      onResize: () => {
+        if (ref.current && context.viewport && computedStyle) {
+          onSizesChange({
+            content: context.viewport.scrollHeight,
+            viewport: context.viewport.offsetHeight,
+            scrollbar: {
+              size: ref.current.clientHeight,
+              paddingStart: toInt(computedStyle.paddingTop),
+              paddingEnd: toInt(computedStyle.paddingBottom)
+            }
+          });
+        }
+      }
+    }
+  );
+});
+var [ScrollbarProvider, useScrollbarContext] = createScrollAreaContext(SCROLLBAR_NAME);
+var ScrollAreaScrollbarImpl = React23.forwardRef((props, forwardedRef) => {
+  const {
+    __scopeScrollArea,
+    sizes,
+    hasThumb,
+    onThumbChange,
+    onThumbPointerUp,
+    onThumbPointerDown,
+    onThumbPositionChange,
+    onDragScroll,
+    onWheelScroll,
+    onResize,
+    ...scrollbarProps
+  } = props;
+  const context = useScrollAreaContext(SCROLLBAR_NAME, __scopeScrollArea);
+  const [scrollbar, setScrollbar] = React23.useState(null);
+  const composeRefs2 = useComposedRefs(forwardedRef, (node) => setScrollbar(node));
+  const rectRef = React23.useRef(null);
+  const prevWebkitUserSelectRef = React23.useRef("");
+  const viewport = context.viewport;
+  const maxScrollPos = sizes.content - sizes.viewport;
+  const handleWheelScroll = useCallbackRef(onWheelScroll);
+  const handleThumbPositionChange = useCallbackRef(onThumbPositionChange);
+  const handleResize = useDebounceCallback(onResize, 10);
+  function handleDragScroll(event) {
+    if (rectRef.current) {
+      const x = event.clientX - rectRef.current.left;
+      const y = event.clientY - rectRef.current.top;
+      onDragScroll({ x, y });
+    }
+  }
+  React23.useEffect(() => {
+    const handleWheel = (event) => {
+      const element = event.target;
+      const isScrollbarWheel = scrollbar?.contains(element);
+      if (isScrollbarWheel) handleWheelScroll(event, maxScrollPos);
+    };
+    document.addEventListener("wheel", handleWheel, { passive: false });
+    return () => document.removeEventListener("wheel", handleWheel, { passive: false });
+  }, [viewport, scrollbar, maxScrollPos, handleWheelScroll]);
+  React23.useEffect(handleThumbPositionChange, [sizes, handleThumbPositionChange]);
+  useResizeObserver(scrollbar, handleResize);
+  useResizeObserver(context.content, handleResize);
+  return /* @__PURE__ */ jsx15(
+    ScrollbarProvider,
+    {
+      scope: __scopeScrollArea,
+      scrollbar,
+      hasThumb,
+      onThumbChange: useCallbackRef(onThumbChange),
+      onThumbPointerUp: useCallbackRef(onThumbPointerUp),
+      onThumbPositionChange: handleThumbPositionChange,
+      onThumbPointerDown: useCallbackRef(onThumbPointerDown),
+      children: /* @__PURE__ */ jsx15(
+        Primitive.div,
+        {
+          ...scrollbarProps,
+          ref: composeRefs2,
+          style: { position: "absolute", ...scrollbarProps.style },
+          onPointerDown: composeEventHandlers(props.onPointerDown, (event) => {
+            const mainPointer = 0;
+            if (event.button === mainPointer) {
+              const element = event.target;
+              element.setPointerCapture(event.pointerId);
+              rectRef.current = scrollbar.getBoundingClientRect();
+              prevWebkitUserSelectRef.current = document.body.style.webkitUserSelect;
+              document.body.style.webkitUserSelect = "none";
+              if (context.viewport) context.viewport.style.scrollBehavior = "auto";
+              handleDragScroll(event);
+            }
+          }),
+          onPointerMove: composeEventHandlers(props.onPointerMove, handleDragScroll),
+          onPointerUp: composeEventHandlers(props.onPointerUp, (event) => {
+            const element = event.target;
+            if (element.hasPointerCapture(event.pointerId)) {
+              element.releasePointerCapture(event.pointerId);
+            }
+            document.body.style.webkitUserSelect = prevWebkitUserSelectRef.current;
+            if (context.viewport) context.viewport.style.scrollBehavior = "";
+            rectRef.current = null;
+          })
+        }
+      )
+    }
+  );
+});
+var THUMB_NAME = "ScrollAreaThumb";
+var ScrollAreaThumb = React23.forwardRef(
+  (props, forwardedRef) => {
+    const { forceMount, ...thumbProps } = props;
+    const scrollbarContext = useScrollbarContext(THUMB_NAME, props.__scopeScrollArea);
+    return /* @__PURE__ */ jsx15(Presence, { present: forceMount || scrollbarContext.hasThumb, children: /* @__PURE__ */ jsx15(ScrollAreaThumbImpl, { ref: forwardedRef, ...thumbProps }) });
+  }
+);
+var ScrollAreaThumbImpl = React23.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeScrollArea, style, ...thumbProps } = props;
+    const scrollAreaContext = useScrollAreaContext(THUMB_NAME, __scopeScrollArea);
+    const scrollbarContext = useScrollbarContext(THUMB_NAME, __scopeScrollArea);
+    const { onThumbPositionChange } = scrollbarContext;
+    const composedRef = useComposedRefs(
+      forwardedRef,
+      (node) => scrollbarContext.onThumbChange(node)
+    );
+    const removeUnlinkedScrollListenerRef = React23.useRef(void 0);
+    const debounceScrollEnd = useDebounceCallback(() => {
+      if (removeUnlinkedScrollListenerRef.current) {
+        removeUnlinkedScrollListenerRef.current();
+        removeUnlinkedScrollListenerRef.current = void 0;
+      }
+    }, 100);
+    React23.useEffect(() => {
+      const viewport = scrollAreaContext.viewport;
+      if (viewport) {
+        const handleScroll = () => {
+          debounceScrollEnd();
+          if (!removeUnlinkedScrollListenerRef.current) {
+            const listener = addUnlinkedScrollListener(viewport, onThumbPositionChange);
+            removeUnlinkedScrollListenerRef.current = listener;
+            onThumbPositionChange();
+          }
+        };
+        onThumbPositionChange();
+        viewport.addEventListener("scroll", handleScroll);
+        return () => viewport.removeEventListener("scroll", handleScroll);
+      }
+    }, [scrollAreaContext.viewport, debounceScrollEnd, onThumbPositionChange]);
+    return /* @__PURE__ */ jsx15(
+      Primitive.div,
+      {
+        "data-state": scrollbarContext.hasThumb ? "visible" : "hidden",
+        ...thumbProps,
+        ref: composedRef,
+        style: {
+          width: "var(--radix-scroll-area-thumb-width)",
+          height: "var(--radix-scroll-area-thumb-height)",
+          ...style
+        },
+        onPointerDownCapture: composeEventHandlers(props.onPointerDownCapture, (event) => {
+          const thumb = event.target;
+          const thumbRect = thumb.getBoundingClientRect();
+          const x = event.clientX - thumbRect.left;
+          const y = event.clientY - thumbRect.top;
+          scrollbarContext.onThumbPointerDown({ x, y });
+        }),
+        onPointerUp: composeEventHandlers(props.onPointerUp, scrollbarContext.onThumbPointerUp)
+      }
+    );
+  }
+);
+ScrollAreaThumb.displayName = THUMB_NAME;
+var CORNER_NAME = "ScrollAreaCorner";
+var ScrollAreaCorner = React23.forwardRef(
+  (props, forwardedRef) => {
+    const context = useScrollAreaContext(CORNER_NAME, props.__scopeScrollArea);
+    const hasBothScrollbarsVisible = Boolean(context.scrollbarX && context.scrollbarY);
+    const hasCorner = context.type !== "scroll" && hasBothScrollbarsVisible;
+    return hasCorner ? /* @__PURE__ */ jsx15(ScrollAreaCornerImpl, { ...props, ref: forwardedRef }) : null;
+  }
+);
+ScrollAreaCorner.displayName = CORNER_NAME;
+var ScrollAreaCornerImpl = React23.forwardRef((props, forwardedRef) => {
+  const { __scopeScrollArea, ...cornerProps } = props;
+  const context = useScrollAreaContext(CORNER_NAME, __scopeScrollArea);
+  const [width, setWidth] = React23.useState(0);
+  const [height, setHeight] = React23.useState(0);
+  const hasSize = Boolean(width && height);
+  useResizeObserver(context.scrollbarX, () => {
+    const height2 = context.scrollbarX?.offsetHeight || 0;
+    context.onCornerHeightChange(height2);
+    setHeight(height2);
+  });
+  useResizeObserver(context.scrollbarY, () => {
+    const width2 = context.scrollbarY?.offsetWidth || 0;
+    context.onCornerWidthChange(width2);
+    setWidth(width2);
+  });
+  return hasSize ? /* @__PURE__ */ jsx15(
+    Primitive.div,
+    {
+      ...cornerProps,
+      ref: forwardedRef,
+      style: {
+        width,
+        height,
+        position: "absolute",
+        right: context.dir === "ltr" ? 0 : void 0,
+        left: context.dir === "rtl" ? 0 : void 0,
+        bottom: 0,
+        ...props.style
+      }
+    }
+  ) : null;
+});
+function toInt(value) {
+  return value ? parseInt(value, 10) : 0;
+}
+function getThumbRatio(viewportSize, contentSize) {
+  const ratio = viewportSize / contentSize;
+  return isNaN(ratio) ? 0 : ratio;
+}
+function getThumbSize(sizes) {
+  const ratio = getThumbRatio(sizes.viewport, sizes.content);
+  const scrollbarPadding = sizes.scrollbar.paddingStart + sizes.scrollbar.paddingEnd;
+  const thumbSize = (sizes.scrollbar.size - scrollbarPadding) * ratio;
+  return Math.max(thumbSize, 18);
+}
+function getScrollPositionFromPointer(pointerPos, pointerOffset, sizes, dir = "ltr") {
+  const thumbSizePx = getThumbSize(sizes);
+  const thumbCenter = thumbSizePx / 2;
+  const offset = pointerOffset || thumbCenter;
+  const thumbOffsetFromEnd = thumbSizePx - offset;
+  const minPointerPos = sizes.scrollbar.paddingStart + offset;
+  const maxPointerPos = sizes.scrollbar.size - sizes.scrollbar.paddingEnd - thumbOffsetFromEnd;
+  const maxScrollPos = sizes.content - sizes.viewport;
+  const scrollRange = dir === "ltr" ? [0, maxScrollPos] : [maxScrollPos * -1, 0];
+  const interpolate = linearScale([minPointerPos, maxPointerPos], scrollRange);
+  return interpolate(pointerPos);
+}
+function getThumbOffsetFromScroll(scrollPos, sizes, dir = "ltr") {
+  const thumbSizePx = getThumbSize(sizes);
+  const scrollbarPadding = sizes.scrollbar.paddingStart + sizes.scrollbar.paddingEnd;
+  const scrollbar = sizes.scrollbar.size - scrollbarPadding;
+  const maxScrollPos = sizes.content - sizes.viewport;
+  const maxThumbPos = scrollbar - thumbSizePx;
+  const scrollClampRange = dir === "ltr" ? [0, maxScrollPos] : [maxScrollPos * -1, 0];
+  const scrollWithoutMomentum = clamp2(scrollPos, scrollClampRange);
+  const interpolate = linearScale([0, maxScrollPos], [0, maxThumbPos]);
+  return interpolate(scrollWithoutMomentum);
+}
+function linearScale(input, output) {
+  return (value) => {
+    if (input[0] === input[1] || output[0] === output[1]) return output[0];
+    const ratio = (output[1] - output[0]) / (input[1] - input[0]);
+    return output[0] + ratio * (value - input[0]);
+  };
+}
+function isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos) {
+  return scrollPos > 0 && scrollPos < maxScrollPos;
+}
+var addUnlinkedScrollListener = (node, handler = () => {
+}) => {
+  let prevPosition = { left: node.scrollLeft, top: node.scrollTop };
+  let rAF = 0;
+  (function loop() {
+    const position = { left: node.scrollLeft, top: node.scrollTop };
+    const isHorizontalScroll = prevPosition.left !== position.left;
+    const isVerticalScroll = prevPosition.top !== position.top;
+    if (isHorizontalScroll || isVerticalScroll) handler();
+    prevPosition = position;
+    rAF = window.requestAnimationFrame(loop);
+  })();
+  return () => window.cancelAnimationFrame(rAF);
+};
+function useDebounceCallback(callback, delay) {
+  const handleCallback = useCallbackRef(callback);
+  const debounceTimerRef = React23.useRef(0);
+  React23.useEffect(() => () => window.clearTimeout(debounceTimerRef.current), []);
+  return React23.useCallback(() => {
+    window.clearTimeout(debounceTimerRef.current);
+    debounceTimerRef.current = window.setTimeout(handleCallback, delay);
+  }, [handleCallback, delay]);
+}
+function useResizeObserver(element, onResize) {
+  const handleResize = useCallbackRef(onResize);
+  useLayoutEffect22(() => {
+    let rAF = 0;
+    if (element) {
+      const resizeObserver = new ResizeObserver(() => {
+        cancelAnimationFrame(rAF);
+        rAF = window.requestAnimationFrame(handleResize);
+      });
+      resizeObserver.observe(element);
+      return () => {
+        window.cancelAnimationFrame(rAF);
+        resizeObserver.unobserve(element);
+      };
+    }
+  }, [element, handleResize]);
+}
+var Root = ScrollArea;
+var Viewport = ScrollAreaViewport;
+var Scrollbar = ScrollAreaScrollbar;
+var Thumb = ScrollAreaThumb;
+var Corner = ScrollAreaCorner;
+
+// src/components/layout/ScrollArea.tsx
+import { clsx as clsx9 } from "clsx";
+import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
+var ScrollArea2 = ({
+  children,
+  scrollbarSize = "md",
+  scrollbarType = "auto",
+  scrollbarAxis = "both",
+  className,
+  ...props
+}) => {
+  const scrollbarStyle = {
+    sm: { "--scrollbar-size": "calc(4px + var(--spacing))" },
+    md: { "--scrollbar-size": "calc(6px + var(--spacing))" }
+  }[scrollbarSize];
+  const hasHorizontalScrollBar = scrollbarAxis === "horizontal" || scrollbarAxis === "both";
+  const hasVerticalScrollBar = scrollbarAxis === "vertical" || scrollbarAxis === "both";
+  return /* @__PURE__ */ jsxs7(
+    Root,
+    {
+      ...props,
+      className: clsx9(
+        "overflow-hidden",
+        className
+      ),
+      style: {
+        ...scrollbarStyle,
+        ...props.style
+      },
+      type: scrollbarType,
+      children: [
+        hasHorizontalScrollBar && /* @__PURE__ */ jsx16(
+          Scrollbar,
+          {
+            orientation: "horizontal",
+            className: clsx9(
+              "peer/horizontal group/scrollbar flex-col-0 rounded-full select-none touch-none bg-scrollbar-track/50 hover:bg-scrollbar-track",
+              {
+                "h-[var(--scrollbar-size)]": scrollbarType === "always",
+                "data-[state=visible]:h-[var(--scrollbar-size)]": scrollbarType !== "always"
+              }
+            ),
+            children: /* @__PURE__ */ jsx16(
+              Thumb,
+              {
+                className: clsx9(
+                  "flex relative rounded-full bg-scrollbar-thumb group-hover/scrollbar:bg-primary",
+                  {
+                    "min-h-[var(--scrollbar-size)]": scrollbarType === "always",
+                    "data-[state=visible]:min-h-[var(--scrollbar-size)]": scrollbarType !== "always"
+                  }
+                )
+              }
+            )
+          }
+        ),
+        hasVerticalScrollBar && /* @__PURE__ */ jsx16(
+          Scrollbar,
+          {
+            orientation: "vertical",
+            className: clsx9(
+              "peer/vertical group/scrollbar flex-col-0 rounded-full select-none touch-none bg-scrollbar-track/50 hover:bg-scrollbar-track",
+              {
+                "w-[var(--scrollbar-size)]": scrollbarType === "always",
+                "data-[state=visible]:w-[var(--scrollbar-size)]": scrollbarType !== "always"
+              }
+            ),
+            children: /* @__PURE__ */ jsx16(
+              Thumb,
+              {
+                className: clsx9(
+                  "flex relative rounded-full bg-scrollbar-thumb group-hover/scrollbar:bg-primary",
+                  {
+                    "min-w-[var(--scrollbar-size)]": scrollbarType === "always",
+                    "data-[state=visible]:min-w-[var(--scrollbar-size)]": scrollbarType !== "always"
+                  }
+                )
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx16(
+          Viewport,
+          {
+            className: clsx9(
+              "border-inherit",
+              {
+                "w-[calc(100%_-_var(--scrollbar-size))] h-[calc(100%_-_var(--scrollbar-size))]": scrollbarType === "always",
+                "w-full h-full": scrollbarType === "scroll" || scrollbarType === "hover" || scrollbarType === "auto",
+                "peer-[&:where([data-state=visible])]/horizontal:h-[calc(100%_-_var(--scrollbar-size))] peer-[&:where([data-state=visible])]/vertical:w-[calc(100%_-_var(--scrollbar-size))]": scrollbarType === "auto"
+              }
+            ),
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx16(
+          Corner,
+          {
+            className: clsx9(
+              "bg-scrollbar-track rounded-full"
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/components/layout/TextImage.tsx
+import clsx10 from "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/components/layout/TextImage.tsx
+import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
+var TextImage = ({
+  overwriteTranslation,
+  title,
+  description,
+  imageUrl,
+  onShowMoreClicked,
+  color = "primary",
+  badge,
+  contentClassName = "",
+  className = ""
+}) => {
+  const translation = useTranslation([formTranslation], overwriteTranslation);
+  const chipColorMapping = {
+    primary: "text-text-image-primary-background bg-text-image-primary-text",
+    secondary: "text-text-image-secondary-background bg-text-image-secondary-text",
+    dark: "text-text-image-dark-background bg-text-image-dark-text"
+  };
+  const colorMapping = {
+    primary: "text-text-image-primary-text bg-linear-to-r from-30% from-text-image-primary-background to-text-image-primary-background/55",
+    secondary: "text-text-image-secondary-text bg-linear-to-r from-30% from-text-image-secondary-background to-text-image-secondary-background/55",
+    dark: "text-text-image-dark-text bg-linear-to-r from-30% from-text-image-dark-background to-text-image-dark-background/55"
+  };
+  return /* @__PURE__ */ jsx17(
+    "div",
+    {
+      className: clsx10("rounded-2xl w-full", className),
+      style: {
+        backgroundImage: `url(${imageUrl})`,
+        backgroundSize: "cover"
+      },
+      children: /* @__PURE__ */ jsxs8(
+        "div",
+        {
+          className: clsx10(`flex-col-2 px-6 py-12 rounded-2xl h-full`, colorMapping[color], contentClassName),
+          children: [
+            badge && /* @__PURE__ */ jsx17("div", { className: clsx10(`chip-full mb-2 py-2 px-4 w-fit`, chipColorMapping[color]), children: /* @__PURE__ */ jsx17("span", { className: "text-lg font-bold", children: badge }) }),
+            /* @__PURE__ */ jsxs8("div", { className: "flex-col-1 overflow-hidden", children: [
+              /* @__PURE__ */ jsx17("span", { className: "typography-title-lg-semibold", children: title }),
+              /* @__PURE__ */ jsx17("span", { className: "text-ellipsis overflow-hidden", children: description })
+            ] }),
+            onShowMoreClicked && /* @__PURE__ */ jsx17("div", { className: "flex-row-2 mt-2 underline", children: /* @__PURE__ */ jsx17("button", { onClick: onShowMoreClicked, children: translation("showMore") }) })
+          ]
+        }
+      )
+    }
+  );
+};
+
+// src/components/layout/VerticalDivider.tsx
+import { jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
+var VerticalDivider = ({
+  width = 1,
+  height = 100,
+  strokeWidth = 4,
+  dashGap = 4,
+  dashLength = 4
+}) => {
+  return /* @__PURE__ */ jsx18("div", { style: { width: width + "px", height: height + "px" }, children: /* @__PURE__ */ jsxs9(
+    "svg",
+    {
+      width,
+      height,
+      viewBox: `0 0 ${width} ${height}`,
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsx18(
+          "line",
+          {
+            opacity: "0.5",
+            x1: width / 2,
+            y1: height,
+            x2: width / 2,
+            y2: "0",
+            stroke: "url(#paint_linear)",
+            strokeWidth,
+            strokeDasharray: `${dashLength} ${dashLength + dashGap}`,
+            strokeLinecap: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx18("defs", { children: /* @__PURE__ */ jsxs9(
+          "linearGradient",
+          {
+            id: "paint_linear",
+            x1: width / 2,
+            y1: "0",
+            x2: width / 2,
+            y2: height,
+            gradientUnits: "userSpaceOnUse",
+            children: [
+              /* @__PURE__ */ jsx18("stop", { stopOpacity: "0", stopColor: "currentColor" }),
+              /* @__PURE__ */ jsx18("stop", { offset: "0.5", stopColor: "currentColor" }),
+              /* @__PURE__ */ jsx18("stop", { offset: "1", stopColor: "currentColor", stopOpacity: "0" })
+            ]
+          }
+        ) })
+      ]
+    }
+  ) });
+};
+export {
+  ASTNodeInterpreter,
+  Carousel,
+  CarouselSlide,
+  Chip,
+  ChipList,
+  ChipUtil,
+  DividerInserter,
+  Expandable,
+  ExpandableUncontrolled,
+  ExpansionIcon,
+  FAQSection,
+  FloatingContainer,
+  ListBox,
+  ListBoxItem,
+  ListBoxMultiple,
+  ListBoxMultipleUncontrolled,
+  ListBoxPrimitive,
+  ListBoxUncontrolled,
+  MarkdownInterpreter,
+  ScrollArea2 as ScrollArea,
+  TextImage,
+  VerticalDivider
+};
+//# sourceMappingURL=index.mjs.map