aidos-ui 4.0.3 → 4.0.5

package/dist/index.js

@@ -1,69 +1,3869 @@
-export * from "./Badge";
-export * from "./BaseButton";
-export * from "./BaseInput";
-export * from "./BaseLink";
-export * from "./BaseList";
-export * from "./BaseListAddOn";
-export * from "./BaseListItem";
-export * from "./BaseView";
-export * from "./Box";
-export * from "./Button";
-export * from "./Calendar";
-export * from "./Card";
-export * from "./Checkbox";
-export * from "./Circle";
-export * from "./Column";
-export * from "./DarkMode";
-export * from "./DateInput";
-export * from "./DatePicker";
-export * from "./DatetimeInput";
-export * from "./Dialog";
-export * from "./Dropdown";
-export * from "./Emitter";
-export * from "./FlexLayout";
-export * from "./guid";
-export * from "./Icon";
-export * from "./IconButton";
-export * from "./IconLink";
-export * from "./IconType";
-export * from "./jss";
-export * from "./Link";
-export * from "./List";
-export * from "./ListButtonItem";
-export * from "./ListDivider";
-export * from "./ListHeaderItem";
-export * from "./ListItem";
-export * from "./ListLinkItem";
-export * from "./ListSpacer";
-export * from "./MenuIcon";
-export * from "./numberToBase";
-export * from "./OnVisible";
-export * from "./Popover";
-export * from "./ProgressBar";
-export * from "./ProgressCircle";
-export * from "./Providers";
-export * from "./RangeInput";
-export * from "./RootView";
-export * from "./Row";
-export * from "./Select";
-export * from "./StackContext";
-export * from "./stateMachineContextFactory";
-export * from "./StaticCheckbox";
-export * from "./Storage";
-export * from "./Stream";
-export * from "./Sublist";
-export * from "./SubmitIconInput";
-export * from "./Tabs";
-export * from "./Text";
-export * from "./TextArea";
-export * from "./TextInput";
-export * from "./TextInputWithState";
-export * from "./TextPairing";
-export * from "./TimeInput";
-export * from "./TimeInput";
-export * from "./Tooltip";
-export * from "./useCookie";
-export * from "./useNavigation";
-export * from "./usePromise";
-export * from "./useRefEffect";
+import React34, { useId, useContext, useMemo, cloneElement, forwardRef, useRef, useCallback, useEffect, useState, createContext, startTransition } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Icon as Icon$1 } from '@iconify/react';
+
+// src/BaseView.tsx
+
+// src/hash.ts
+function hash(source, modulus) {
+  let hash2 = 0;
+  let i;
+  let chr;
+  if (source.length === 0) {
+    return hash2;
+  }
+  for (i = 0; i < source.length; i++) {
+    chr = source.charCodeAt(i);
+    hash2 = (hash2 << 5) - hash2 + chr;
+    hash2 |= 0;
+  }
+  if (modulus) {
+    return Math.abs(hash2) % modulus;
+  } else {
+    return Math.abs(hash2);
+  }
+}
+
+// src/isServer.ts
+function isServer() {
+  return typeof window === "undefined" || window.document == null;
+}
+var aliases = {
+  margin: (value) => {
+    if (value == null) {
+      return [];
+    }
+    const matches = typeof value === "string" ? Array.from(value.matchAll(/(.+) (.+)$/g))[0] : null;
+    if (matches) {
+      return [
+        ["margin-top", matches[1]],
+        ["margin-bottom", matches[1]],
+        ["margin-left", matches[2]],
+        ["margin-right", matches[2]]
+      ];
+    } else {
+      return [
+        ["margin-top", value],
+        ["margin-bottom", value],
+        ["margin-left", value],
+        ["margin-right", value]
+      ];
+    }
+  },
+  padding: (value) => {
+    if (value == null) {
+      return [];
+    }
+    const matches = typeof value === "string" ? Array.from(value.matchAll(/(.+) (.+)$/g))[0] : null;
+    if (matches) {
+      return [
+        ["padding-top", matches[1]],
+        ["padding-bottom", matches[1]],
+        ["padding-left", matches[2]],
+        ["padding-right", matches[2]]
+      ];
+    } else {
+      return [
+        ["padding-top", value],
+        ["padding-bottom", value],
+        ["padding-left", value],
+        ["padding-right", value]
+      ];
+    }
+  }
+};
+var rawHashMap = /* @__PURE__ */ new Map();
+function createStyleNode(content) {
+  if (isServer()) {
+    serverStyles.push(content);
+  } else {
+    const style = document.createElement("style");
+    style.appendChild(document.createTextNode(content));
+    document.head.appendChild(style);
+  }
+}
+var pixelStyles = /* @__PURE__ */ new Set([
+  "min-height",
+  "height",
+  "max-height",
+  "min-width",
+  "width",
+  "max-width",
+  "margin",
+  "margin-top",
+  "margin-bottom",
+  "margin-left",
+  "margin-right",
+  "padding",
+  "padding-top",
+  "padding-bottom",
+  "padding-left",
+  "padding-right",
+  "border-radius",
+  "font-size",
+  "top",
+  "bottom",
+  "left",
+  "right",
+  "outline-offset",
+  "gap",
+  "row-gap",
+  "column-gap"
+]);
+var toPixelValue = (key, value) => {
+  const sValue = value.toString();
+  if (sValue.includes("%") || sValue.includes("v") || sValue.includes("px") || sValue.includes("em") || sValue.includes("rem")) {
+    return sValue;
+  }
+  return pixelStyles.has(key) && Number.isInteger(parseInt(value, 10)) ? `${value}px` : value;
+};
+var getCSS = (key, value) => {
+  const cssProp = key.replace(/[A-Z]/g, (m) => "-" + m.toLowerCase());
+  const cssValue = toPixelValue(cssProp, value);
+  return [cssProp, cssValue];
+};
+var flattenJSS = (jss) => {
+  if (!jss) {
+    return {};
+  } else if (Array.isArray(jss)) {
+    const result = {};
+    for (const item of jss) {
+      Object.assign(result, flattenJSS(item));
+    }
+    return result;
+  } else {
+    return jss;
+  }
+};
+var toClassnames = (jss, componentName) => {
+  jss = flattenJSS(jss);
+  const stylesStack = Object.entries(jss);
+  const classNames = [];
+  if (componentName) {
+    classNames.push(componentName);
+  }
+  while (stylesStack.length) {
+    const [key, value] = stylesStack.pop();
+    if (aliases[key]) {
+      stylesStack.push(...aliases[key](value));
+      continue;
+    }
+    const inputKey = key + JSON.stringify(value);
+    const rawHash = hash(inputKey).toString(32);
+    const cached = rawHashMap.get(rawHash);
+    if (cached != null) {
+      if (cached.key !== inputKey) {
+        console.warn(
+          `[jss] Hash collision detected: "${inputKey}" collides with "${cached.key}"`
+        );
+      }
+      classNames.push(cached.selector);
+      continue;
+    }
+    const selector = `x${rawHash}`;
+    rawHashMap.set(rawHash, { selector, key: inputKey });
+    classNames.push(selector);
+    if (typeof value === "number" || typeof value === "string") {
+      const [cssProp, cssValue] = getCSS(key, value);
+      createStyleNode(`.${selector} { ${cssProp}: ${cssValue}; }`);
+    } else if (typeof value === "object" && key.startsWith("@media")) {
+      const media = key;
+      const cssValue = Object.entries(value).map(([key2, value2]) => {
+        const [cssProp, cssValue2] = getCSS(key2, value2);
+        return `${cssProp}: ${cssValue2}; `;
+      }).join(" ");
+      createStyleNode(`${media} { .${selector} { ${cssValue} } }`);
+    } else if (typeof value === "object" && value != null) {
+      const cssValue = Object.entries(value).map(([key2, value2]) => {
+        const [cssProp, cssValue2] = getCSS(key2, value2);
+        return `${cssProp}: ${cssValue2}; `;
+      }).join(" ");
+      createStyleNode(`.${selector}${key} { ${cssValue} }`);
+    }
+  }
+  return classNames.join(" ");
+};
+var serverStyles = [];
+function JSSProvider({
+  themes,
+  children
+}) {
+  const stylesRef = useRef(null);
+  if (stylesRef.current == null) {
+    stylesRef.current = getBaseStyles(themes);
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    stylesRef.current.map((style, i) => /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: style } }, i)),
+    children
+  ] });
+}
+function JSServerStyles() {
+  const stylesRef = useRef(null);
+  if (stylesRef.current == null) {
+    stylesRef.current = serverStyles;
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: stylesRef.current.map((style, i) => /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: style } }, i)) });
+}
+function cssVar(string) {
+  return `var(${string})`;
+}
+var sizes = {
+  xsmall: cssVar("--spacing-xs"),
+  small: cssVar("--spacing-s"),
+  medium: cssVar("--spacing-m"),
+  large: cssVar("--spacing-l"),
+  xlarge: cssVar("--spacing-xl"),
+  xxlarge: cssVar("--spacing-xxl"),
+  xxxlarge: cssVar("--spacing-xxxl")
+};
+function getSize(size) {
+  return sizes[size];
+}
+function getSpacing(spacing) {
+  if (spacing === "none") {
+    return "0px";
+  } else {
+    return getSize(spacing);
+  }
+}
+function getPadding(padding) {
+  if (Array.isArray(padding)) {
+    const [vertical, horizontal] = padding;
+    return {
+      paddingTop: getSpacing(vertical),
+      paddingBottom: getSpacing(vertical),
+      paddingLeft: getSpacing(horizontal),
+      paddingRight: getSpacing(horizontal)
+    };
+  } else {
+    return {
+      padding: getSpacing(padding)
+    };
+  }
+}
+function getMargin(margin) {
+  if (Array.isArray(margin)) {
+    const [vertical, horizontal] = margin;
+    return {
+      marginTop: getSpacing(vertical),
+      marginBottom: getSpacing(vertical),
+      marginLeft: getSpacing(horizontal),
+      marginRight: getSpacing(horizontal)
+    };
+  } else {
+    return {
+      margin: getSpacing(margin)
+    };
+  }
+}
+var lightTheme = {
+  /* Background */
+  ["--overlay-background"]: "rgb(245, 246, 250)",
+  ["--primary-background"]: "rgb(239, 239, 244)",
+  ["--secondary-background"]: "rgb(232, 232, 234)",
+  ["--divider"]: "rgb(200, 200, 200)",
+  ["--strong-divider"]: "rgb(100, 100, 100)",
+  ["--pressed-background"]: "rgb(220, 222, 224)",
+  ["--hovered-background"]: "rgb(232, 235, 237)",
+  ["--selected-background"]: "rgb(227, 230, 232)",
+  ["--nav-bar"]: "rgb(232, 232, 234)",
+  /* Effects */
+  ["--warning"]: "rgb(255, 204, 0)",
+  ["--highlight"]: "rgb(0, 122, 255)",
+  ["--outline"]: "rgb(103, 176, 255)",
+  ["--light-highlight"]: "rgb(220, 232, 245)",
+  /* Text */
+  ["--primary-text"]: "rgb(0, 0, 0)",
+  ["--secondary-text"]: "rgb(100, 100, 100)",
+  ["--subtle-text"]: "rgb(180, 180, 180)",
+  ["--highlight-text"]: "rgb(0, 122, 255)",
+  ["--negative-text"]: "rgb(255, 59, 48)",
+  ["--light-text"]: "rgb(255, 255, 255)",
+  ["--font-xsmall"]: "8px",
+  ["--font-small"]: "12px",
+  ["--font-medium"]: "14px",
+  ["--font-large"]: "18px",
+  ["--font-xlarge"]: "22px",
+  ["--font-xxlarge"]: "26px",
+  ["--font-xxxlarge"]: "34px",
+  /* Buttons */
+  ["--background-button-positive"]: "rgb(0, 122, 255)",
+  ["--background-button-secondary"]: "rgb(218, 218, 223)",
+  ["--background-button-negative"]: "rgb(255, 59, 48)",
+  ["--background-button-disabled"]: "rgb(218, 218, 223)",
+  /* Spacing */
+  ["--spacing-xs"]: "2px",
+  ["--spacing-s"]: "4px",
+  ["--spacing-m"]: "8px",
+  ["--spacing-l"]: "12px",
+  ["--spacing-xl"]: "16px",
+  ["--spacing-xxl"]: "24px",
+  ["--spacing-xxxl"]: "32px",
+  ["--border-radius-s"]: "2px",
+  ["--border-radius-m"]: "4px",
+  ["--border-radius-l"]: "8px",
+  ["--nav-bar-height"]: "50px",
+  /* Shadows */
+  ["--shadow-sm"]: "0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1)",
+  ["--shadow-md"]: "0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05)",
+  ["--shadow-lg"]: "0 10px 25px rgba(0, 0, 0, 0.15), 0 4px 10px rgba(0, 0, 0, 0.1)",
+  /* Transitions */
+  ["--transition-fast"]: "0.15s ease",
+  ["--transition-normal"]: "0.2s ease"
+};
+var darkTheme = {
+  /* Background */
+  ["--overlay-background"]: "rgb(35, 36, 37)",
+  ["--primary-background"]: "rgb(42, 43, 46)",
+  ["--secondary-background"]: "rgb(65, 66, 67)",
+  ["--divider"]: "rgb(70, 72, 73)",
+  ["--strong-divider"]: "rgb(100, 100, 100)",
+  ["--pressed-background"]: "rgb(90, 92, 93)",
+  ["--hovered-background"]: "rgb(50, 53, 54)",
+  ["--selected-background"]: "rgb(65, 68, 69)",
+  ["--nav-bar"]: "rgb(34, 35, 36)",
+  /* Effects */
+  ["--warning"]: "rgb(255, 204, 0)",
+  ["--highlight"]: "rgb(50, 140, 220)",
+  ["--outline"]: "rgb(91, 170, 255)",
+  ["--light-highlight"]: "rgba(49, 57, 63)",
+  /* Text */
+  ["--primary-text"]: "rgb(255, 255, 255)",
+  ["--secondary-text"]: "rgb(200, 200, 200)",
+  ["--subtle-text"]: "rgb(140, 140, 140)",
+  ["--highlight-text"]: "#4ca7f8",
+  ["--negative-text"]: "rgb(255, 59, 48)",
+  ["--light-text"]: "rgb(255, 255, 255)",
+  ["--font-xsmall"]: "8px",
+  ["--font-small"]: "12px",
+  ["--font-medium"]: "14px",
+  ["--font-large"]: "18px",
+  ["--font-xlarge"]: "22px",
+  ["--font-xxlarge"]: "26px",
+  ["--font-xxxlarge"]: "34px",
+  /* Buttons */
+  ["--background-button-positive"]: "rgb(50, 140, 220)",
+  ["--background-button-secondary"]: "rgb(82, 83, 86)",
+  ["--background-button-negative"]: "rgb(255, 59, 48)",
+  ["--background-button-disabled"]: "rgb(70, 72, 73)",
+  /* Spacing */
+  ["--spacing-xs"]: "2px",
+  ["--spacing-s"]: "4px",
+  ["--spacing-m"]: "8px",
+  ["--spacing-l"]: "12px",
+  ["--spacing-xl"]: "16px",
+  ["--spacing-xxl"]: "24px",
+  ["--spacing-xxxl"]: "32px",
+  ["--border-radius-s"]: "2px",
+  ["--border-radius-m"]: "4px",
+  ["--border-radius-l"]: "8px",
+  ["--nav-bar-height"]: "50px",
+  /* Shadows - stronger for dark mode to be visible */
+  ["--shadow-sm"]: "0 1px 2px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.3)",
+  ["--shadow-md"]: "0 4px 6px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.2)",
+  ["--shadow-lg"]: "0 10px 25px rgba(0, 0, 0, 0.35), 0 4px 10px rgba(0, 0, 0, 0.25)",
+  /* Transitions */
+  ["--transition-fast"]: "0.15s ease",
+  ["--transition-normal"]: "0.2s ease"
+};
+var baseStyles = `
+* {
+  box-sizing: border-box;
+  border: none;
+  touch-action: manipulation;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+*:focus {
+  outline-color: ${cssVar("--highlight")};
+}
+
+html,
+body {
+  margin: 0;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  background-color: ${cssVar("--primary-background")};
+}
+
+@keyframes dialogFadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+@keyframes backdropFadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes popoverFadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+`;
+var backgroundStyles = {
+  highlight: {
+    backgroundColor: cssVar("--highlight")
+  },
+  light: {
+    backgroundColor: cssVar("--light-text")
+  },
+  dark: {
+    backgroundColor: cssVar("--primary-text")
+  },
+  warning: {
+    backgroundColor: cssVar("--warning")
+  },
+  "primary-background": {
+    backgroundColor: cssVar("--primary-background")
+  },
+  negative: {
+    backgroundColor: cssVar("--negative-text")
+  },
+  "secondary-background": {
+    backgroundColor: cssVar("--secondary-background")
+  },
+  divider: {
+    backgroundColor: cssVar("--divider")
+  },
+  inherit: {
+    backgroundColor: "inherit"
+  }
+};
+var getBackground = (color) => {
+  return backgroundStyles[color];
+};
+var MOBILE = 750;
+var TABLET = 1e3;
+var LAPTOP = 1200;
+var MOBILE_MEDIA = `@media (min-width: 0px) and (max-width: ${MOBILE}px)`;
+var TABLET_MEDIA = `@media (min-width: ${MOBILE}px) and (max-width: ${TABLET}px)`;
+var LAPTOP_MEDIA = `@media (min-width: ${TABLET}px) and (max-width: ${LAPTOP}px)`;
+var DESKTOP_MEDIA = `@media (min-width: ${LAPTOP}px)`;
+function mobile(jss) {
+  return {
+    [MOBILE_MEDIA]: jss
+  };
+}
+function tablet(jss) {
+  return {
+    [TABLET_MEDIA]: jss
+  };
+}
+function laptop(jss) {
+  return {
+    [LAPTOP_MEDIA]: jss
+  };
+}
+function desktop(jss) {
+  return {
+    [DESKTOP_MEDIA]: jss
+  };
+}
+var textColorStyles = {
+  primary: {
+    color: cssVar("--primary-text")
+  },
+  secondary: {
+    color: cssVar("--secondary-text")
+  },
+  highlight: {
+    color: cssVar("--highlight-text")
+  },
+  negative: {
+    color: cssVar("--negative-text")
+  },
+  subtle: {
+    color: cssVar("--subtle-text")
+  },
+  light: {
+    color: cssVar("--light-text")
+  },
+  inherit: {
+    color: "inherit"
+  }
+};
+var getTextColor = (color) => {
+  return textColorStyles[color];
+};
+function getBaseStyles(themes) {
+  const css = [];
+  css.push(baseStyles);
+  css.push(`body {
+      color-scheme: light;
+      ${Object.entries(themes.light).map(([key, value]) => `${key}: ${value};`).join("\n   ")}
+    }`);
+  css.push(`body.dark-mode {
+      color-scheme: dark;
+      ${Object.entries(themes.dark).map(([key, value]) => `${key}: ${value};`).join("\n    ")}
+    }`);
+  return css;
+}
+var styles = {
+  relative: {
+    position: "relative"
+  },
+  grow: {
+    flexGrow: 1
+  },
+  shrink: {
+    flexShrink: 1
+  }
+};
+var BaseView = React34.forwardRef(
+  ({
+    jss,
+    children,
+    tag,
+    grow,
+    shrink,
+    relative,
+    ...otherProps
+  }, ref) => {
+    const Tag = tag ?? "div";
+    return (
+      // @ts-ignore
+      /* @__PURE__ */ jsx(
+        Tag,
+        {
+          ref,
+          className: toClassnames([
+            jss,
+            grow && styles.grow,
+            shrink && styles.shrink,
+            relative && styles.relative
+          ]),
+          ...otherProps,
+          children
+        }
+      )
+    );
+  }
+);
+var sizes2 = {
+  xsmall: 4,
+  small: 6,
+  medium: 12,
+  large: 18,
+  xlarge: 24
+};
+function Badge({
+  size = "medium",
+  color = "highlight",
+  jss
+}) {
+  return /* @__PURE__ */ jsx(
+    BaseView,
+    {
+      jss: [
+        {
+          width: sizes2[size],
+          height: sizes2[size],
+          borderRadius: sizes2[size] / 2
+        },
+        getBackground(color),
+        jss
+      ]
+    }
+  );
+}
+
+// src/Interactable.tsx
+var styles2 = {
+  root: {
+    cursor: "pointer",
+    display: "inline-flex",
+    alignItems: "center",
+    transition: "opacity 0.1s ease-in",
+    outlineColor: cssVar("--outline"),
+    "[aria-disabled=true]": {
+      color: cssVar("--secondary-text"),
+      backgroundColor: cssVar("--background-button-secondary")
+    },
+    ":focus-visible": {
+      outlineWidth: "2px",
+      outlineStyle: "solid",
+      outlineOffset: -2
+    }
+  },
+  dark: {
+    backgroundColor: "black",
+    "[aria-disabled=true]": {
+      backgroundColor: cssVar("--background-button-disabled")
+    }
+  },
+  light: {
+    backgroundColor: "white",
+    "[aria-disabled=true]": {
+      backgroundColor: cssVar("--background-button-disabled")
+    }
+  },
+  positive: {
+    backgroundColor: cssVar("--background-button-positive"),
+    "[aria-disabled=true]": {
+      backgroundColor: cssVar("--background-button-disabled")
+    }
+  },
+  primary: {
+    backgroundColor: cssVar("--background-button-secondary"),
+    "[aria-disabled=true]": {
+      backgroundColor: cssVar("--background-button-disabled")
+    }
+  },
+  negative: {
+    backgroundColor: cssVar("--background-button-negative"),
+    "[aria-disabled=true]": {
+      backgroundColor: cssVar("--background-button-disabled")
+    }
+  },
+  disabled: {
+    cursor: "default"
+  },
+  bare: {
+    backgroundColor: "inherit",
+    outlineColor: cssVar("--outline"),
+    "[aria-disabled=true]": {
+      backgroundColor: "inherit"
+    },
+    "[aria-disabled=true]:hover": {
+      backgroundColor: "inherit"
+    }
+  },
+  opacityHover: {
+    ":hover": {
+      opacity: 0.8
+    },
+    "[aria-disabled=true]:hover": {
+      opacity: 1
+    }
+  }};
+function getInteractableJSS({
+  color,
+  bare,
+  disabled,
+  animateInteraction,
+  padding,
+  border
+}) {
+  return [
+    styles2.root,
+    color === "dark" && styles2.dark,
+    color === "light" && styles2.light,
+    color === "positive" && styles2.positive,
+    color === "primary" && styles2.primary,
+    color === "negative" && styles2.negative,
+    border && {
+      border: `1px solid ${getCSSColor(color, disabled, bare)}`
+    },
+    bare && styles2.bare,
+    disabled && styles2.disabled,
+    !bare && styles2.opacityHover,
+    animateInteraction && !disabled && {
+      position: "relative",
+      ":active": {
+        opacity: 0.95,
+        top: 1
+      },
+      "[aria-disabled=true]:active": {
+        top: 0,
+        opacity: 1
+      }
+    },
+    getPadding(padding)
+  ];
+}
+var getGlyphColor = (color, disabled, bare) => {
+  if (disabled) {
+    return "subtle";
+  }
+  switch (color) {
+    case "positive":
+      return bare ? "highlight" : "light";
+    case "negative":
+      return bare ? "negative" : "light";
+    case "primary":
+      return bare ? "primary" : "secondary";
+    case "dark":
+      return bare ? "primary" : "light";
+    case "light":
+      return bare ? "light" : "primary";
+  }
+};
+var getCSSColor = (color, disabled, bare) => {
+  if (disabled) {
+    return cssVar("--subtle-text");
+  }
+  switch (color) {
+    case "positive":
+      return bare ? cssVar("--highlight") : cssVar("--light-text");
+    case "negative":
+      return bare ? cssVar("--negative-text") : cssVar("--light-text");
+    case "primary":
+      return bare ? cssVar("--primary-text") : cssVar("--secondary-text");
+    case "dark":
+      return bare ? cssVar("--primary-text") : cssVar("--light-text");
+    case "light":
+      return bare ? cssVar("--light-text") : cssVar("--primary-text");
+  }
+};
+var getInteractableListItemJSS = ({
+  bare,
+  selected
+}) => {
+  return [
+    {
+      overflow: "hidden",
+      flexGrow: 1,
+      borderRadius: bare ? cssVar("--border-radius-m") : null,
+      textDecoration: "none",
+      ":hover": {
+        backgroundColor: cssVar("--hovered-background")
+      },
+      ":active:hover": {
+        backgroundColor: cssVar("--pressed-background")
+      },
+      "[aria-disabled=true]": {
+        backgroundColor: cssVar("--primary-background")
+      },
+      "[aria-disabled=true]:active:hover": {
+        backgroundColor: cssVar("--primary-background")
+      }
+    },
+    selected && {
+      backgroundColor: bare ? cssVar("--light-highlight") : cssVar("--selected-background"),
+      boxShadow: bare ? "" : "inset 1px 1px 2px -1px #0000004a",
+      ":hover": {
+        backgroundColor: cssVar("--hovered-background")
+      },
+      ":active:hover": {
+        backgroundColor: cssVar("--pressed-background")
+      }
+    }
+  ];
+};
+var BaseButton = React34.forwardRef(
+  ({
+    onClick,
+    children,
+    jss,
+    color,
+    bare = false,
+    border = false,
+    disabled,
+    animateInteraction = true,
+    padding,
+    ...otherProps
+  }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        ...otherProps,
+        "aria-disabled": disabled ? true : void 0,
+        ref,
+        onClick: (event) => {
+          if (disabled) {
+            return;
+          }
+          onClick?.(event);
+        },
+        className: toClassnames([
+          ...getInteractableJSS({
+            color,
+            bare,
+            border,
+            disabled,
+            animateInteraction,
+            padding
+          }),
+          jss
+        ]),
+        children
+      }
+    );
+  }
+);
+var fontSize = {
+  xsmall: cssVar("--font-xsmall"),
+  small: cssVar("--font-small"),
+  medium: cssVar("--font-medium"),
+  large: cssVar("--font-large"),
+  xlarge: cssVar("--font-xlarge"),
+  xxlarge: cssVar("--font-xxlarge"),
+  xxxlarge: cssVar("--font-xxxlarge")
+};
+function Text({
+  children,
+  color = "primary",
+  size = "medium",
+  align = "none",
+  bold = false,
+  ellipsis = "default",
+  grow,
+  type: Type = "span",
+  jss,
+  id,
+  htmlFor
+}) {
+  if (ellipsis === "default") {
+    ellipsis = Type === "span" || Type === "label";
+  }
+  const className = toClassnames([
+    getTextColor(color),
+    { fontSize: fontSize[size], padding: 0, margin: 0 },
+    bold && { fontWeight: "bold" },
+    align === "center" && { textAlign: "center" },
+    ellipsis && {
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap"
+    },
+    grow && { flexGrow: 1 },
+    jss
+  ]);
+  return /* @__PURE__ */ jsx(Type, { id, className, htmlFor, children });
+}
+function Label({ size = "medium", type = "label", ...rest }) {
+  return /* @__PURE__ */ jsx(Text, { size, type, ...rest });
+}
+function Span({ size = "medium", type = "span", ...rest }) {
+  return /* @__PURE__ */ jsx(Text, { size, type, ...rest });
+}
+function P({ size = "medium", type = "p", ...rest }) {
+  return /* @__PURE__ */ jsx(Text, { size, type, ...rest });
+}
+function H1({ size = "xxlarge", type = "h1", ...rest }) {
+  return /* @__PURE__ */ jsx(Text, { size, type, ...rest });
+}
+function H2({ size = "xlarge", type = "h2", ...rest }) {
+  return /* @__PURE__ */ jsx(Text, { size, type, ...rest });
+}
+function H3({ size = "large", type = "h3", ...rest }) {
+  return /* @__PURE__ */ jsx(Text, { size, type, ...rest });
+}
+function Li({ size = "medium", type = "li", ...rest }) {
+  return /* @__PURE__ */ jsx(Text, { size, type, ...rest });
+}
+var BaseInput = React34.forwardRef(
+  ({
+    jss,
+    label,
+    labelPosition = "end",
+    labelSize,
+    labelColor,
+    labelBold,
+    id: propId,
+    ...otherProps
+  }, ref) => {
+    const hookid = useId();
+    const id = propId ?? hookid;
+    const labelElement = /* @__PURE__ */ jsx(
+      Label,
+      {
+        size: labelSize,
+        bold: labelBold,
+        color: labelColor,
+        jss: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        htmlFor: id,
+        children: label
+      }
+    );
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      label && labelPosition === "start" && labelElement,
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id,
+          ref,
+          className: toClassnames(jss),
+          ...otherProps
+        }
+      ),
+      label && labelPosition === "end" && labelElement
+    ] });
+  }
+);
+var BaseLinkComponentOverrideContext = React34.createContext((props) => /* @__PURE__ */ jsx("a", { ...props }));
+var BaseLink = React34.forwardRef(
+  ({
+    onClick,
+    children,
+    jss,
+    color,
+    bare = false,
+    disabled,
+    animateInteraction = true,
+    padding,
+    href,
+    border,
+    role = "link",
+    ...otherProps
+  }, ref) => {
+    const Link2 = useContext(BaseLinkComponentOverrideContext);
+    return /* @__PURE__ */ jsx(
+      Link2,
+      {
+        ...otherProps,
+        "aria-disabled": disabled ? true : void 0,
+        href,
+        role,
+        ref,
+        onClick: onClick ? (event) => {
+          if (disabled) {
+            return;
+          }
+          onClick(event);
+        } : void 0,
+        className: toClassnames([
+          ...getInteractableJSS({
+            color,
+            border,
+            bare,
+            disabled,
+            animateInteraction,
+            padding
+          }),
+          disabled && { pointerEvents: "none" },
+          jss
+        ]),
+        children
+      }
+    );
+  }
+);
+var FlexLayout = React34.forwardRef(
+  ({
+    jss,
+    gap = "none",
+    justify = "none",
+    align = "none",
+    padding = "none",
+    direction = "column",
+    ...otherProps
+  }, ref) => {
+    return /* @__PURE__ */ jsx(
+      BaseView,
+      {
+        ref,
+        jss: [
+          {
+            display: "flex",
+            flexDirection: direction,
+            gap: getSpacing(gap),
+            justifyContent: justify,
+            alignItems: align
+          },
+          getPadding(padding),
+          jss
+        ],
+        ...otherProps
+      }
+    );
+  }
+);
+var Column = React34.forwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ jsx(FlexLayout, { ref, direction: "column", ...props });
+  }
+);
+var BaseList = React34.forwardRef(
+  ({ jss, ...otherProps }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Column,
+      {
+        ...otherProps,
+        tag: "ul",
+        jss: [
+          {
+            listStyle: "none",
+            margin: 0,
+            padding: 0
+          },
+          jss
+        ],
+        ref
+      }
+    );
+  }
+);
+var BaseListAddOn = React34.forwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ jsx(BaseView, { ...props, ref });
+  }
+);
+var styles3 = {
+  root: {
+    width: "100%",
+    borderBottom: "1px solid var(--divider)"
+  }
+};
+function ListDivider() {
+  return /* @__PURE__ */ jsx(BaseView, { jss: styles3.root });
+}
+var Row = React34.forwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ jsx(FlexLayout, { ref, direction: "row", ...props });
+  }
+);
+function TextPairing({
+  headline,
+  body,
+  headlineColor = "primary",
+  headlineSize = "medium",
+  headlineAddOn,
+  bodyColor = "secondary",
+  bodySize = "medium",
+  addOn,
+  addOnPosition = "start",
+  gap = "small",
+  align = "stretch",
+  grow,
+  shrink,
+  headlineBold,
+  padding,
+  jss
+}) {
+  const textElement = /* @__PURE__ */ jsxs(
+    Column,
+    {
+      grow,
+      shrink,
+      padding: addOn ? void 0 : padding,
+      align,
+      jss: [
+        {
+          overflow: "hidden"
+        },
+        jss
+      ],
+      children: [
+        /* @__PURE__ */ jsxs(
+          Row,
+          {
+            align: "center",
+            jss: {
+              textAlign: "start"
+            },
+            children: [
+              /* @__PURE__ */ jsx(Text, { bold: headlineBold, color: headlineColor, size: headlineSize, children: headline }),
+              headlineAddOn && /* @__PURE__ */ jsx(BaseView, { children: headlineAddOn })
+            ]
+          }
+        ),
+        body && /* @__PURE__ */ jsx(
+          Row,
+          {
+            align: "center",
+            jss: {
+              marginTop: cssVar("--spacing-xs"),
+              textAlign: "start"
+            },
+            children: /* @__PURE__ */ jsx(Text, { ellipsis: true, color: bodyColor, size: bodySize, children: body })
+          }
+        )
+      ]
+    }
+  );
+  if (addOn) {
+    return /* @__PURE__ */ jsxs(
+      Row,
+      {
+        grow,
+        shrink,
+        gap,
+        align: "center",
+        padding,
+        jss: {
+          overflow: "hidden"
+        },
+        children: [
+          addOnPosition === "start" && addOn,
+          textElement,
+          addOnPosition === "end" && addOn
+        ]
+      }
+    );
+  }
+  return textElement;
+}
+
+// src/aria.ts
+function queryFocusables(root) {
+  const focusables = Array.from(
+    root.querySelectorAll(
+      "button,input,textarea,a,[tabindex='0'],[tabindex='-1']"
+    )
+  );
+  return focusables.filter((element) => !element["disabled"]);
+}
+var normalizeElements = (focusables, index) => {
+  for (const element2 of focusables) {
+    element2.tabIndex = -1;
+  }
+  const element = focusables[index] ?? focusables[focusables.length - 1];
+  element.tabIndex = 0;
+};
+var focusElement = (focusables, index) => {
+  normalizeElements(focusables, index);
+  const element = focusables[index] ?? focusables[focusables.length - 1];
+  element.focus();
+};
+function useRefEffect(callback) {
+  const unsubscribeRef = useRef(null);
+  const refCallback = useCallback((root) => {
+    if (root === null) {
+      unsubscribeRef.current && unsubscribeRef.current();
+    } else {
+      const unsubscribe = callback(root);
+      unsubscribeRef.current = unsubscribe;
+    }
+  }, []);
+  return refCallback;
+}
+
+// src/useNavigation.tsx
+function useNavigation({
+  autofocus = false,
+  rowLength = 1,
+  enabled = true
+} = {}) {
+  return useRefEffect((root) => {
+    if (!enabled) {
+      return;
+    }
+    let index = 0;
+    const elements = queryFocusables(root);
+    if (elements.length === 0) {
+      return;
+    }
+    if (elements.length !== 0 && autofocus) {
+      focusElement(elements, index);
+    } else {
+      normalizeElements(elements, index);
+    }
+    const onKeyDown = (e) => {
+      const elements2 = queryFocusables(root);
+      if (elements2.length === 0) {
+        return;
+      }
+      let newIndex = -1;
+      if (e.code === "ArrowUp") {
+        if (index - rowLength < 0) {
+          newIndex = elements2.length - elements2.length % rowLength + index;
+        } else {
+          newIndex = index - rowLength;
+        }
+      } else if (e.code === "ArrowLeft") {
+        if (index <= 0) {
+          newIndex = elements2.length - 1;
+        } else {
+          newIndex = index - 1;
+        }
+      } else if (e.code === "ArrowRight") {
+        if (index >= elements2.length - 1) {
+          newIndex = 0;
+        } else {
+          newIndex = index + 1;
+        }
+      } else if (e.code === "ArrowDown") {
+        if (index + rowLength > elements2.length - 1) {
+          newIndex = (index + rowLength) % rowLength;
+        } else {
+          newIndex = index + rowLength;
+        }
+      }
+      if (newIndex !== -1 && index !== newIndex) {
+        index = newIndex;
+        focusElement(elements2, index);
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    };
+    root.addEventListener("keydown", onKeyDown);
+    const observer = new MutationObserver((mutationList) => {
+      if (mutationList.filter((m) => m.type === "childList").length > 0) {
+        const elements2 = queryFocusables(root);
+        if (elements2.length > 0) {
+          normalizeElements(elements2, index);
+        }
+      }
+    });
+    observer.observe(root, { childList: true });
+    return () => {
+      root.removeEventListener("keydown", onKeyDown);
+    };
+  });
+}
+var ListContext = React34.createContext({ bare: false, carded: true });
+function List({
+  ariaLabel,
+  jss,
+  autofocus = false,
+  navigation = true,
+  bare,
+  carded = true,
+  ...otherProps
+}) {
+  const rootRef = useNavigation({ autofocus, enabled: navigation });
+  const contextValue = useMemo(() => ({ bare, carded }), [bare, carded]);
+  return /* @__PURE__ */ jsx(ListContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    BaseList,
+    {
+      role: "grid",
+      "aria-label": ariaLabel,
+      ref: rootRef,
+      jss: [
+        { overflow: "hidden" },
+        !bare && {
+          backgroundColor: cssVar("--overlay-background")
+        },
+        !bare && !carded && {
+          borderBottom: `1px solid ${cssVar("--divider")}`,
+          borderTop: `1px solid ${cssVar("--divider")}`
+        },
+        !bare && carded && {
+          border: `1px solid ${cssVar("--divider")}`,
+          borderRadius: cssVar("--border-radius-l")
+        },
+        jss
+      ],
+      ...otherProps
+    }
+  ) });
+}
+var useListContext = () => useContext(ListContext);
+var BaseListItem = React34.forwardRef(
+  ({
+    children,
+    jss,
+    withDivider = true,
+    headline,
+    headlineSize = "medium",
+    headlineColor = "primary",
+    headlineAddOn,
+    body,
+    bodySize = "small",
+    bodyColor = "secondary",
+    addOn,
+    addOnPosition,
+    outerAddOn,
+    disabled = false,
+    padding = "medium",
+    gap = "medium",
+    selected,
+    headlineBold,
+    ...otherProps
+  }, ref) => {
+    const { bare, carded } = useListContext();
+    const content = /* @__PURE__ */ jsx(
+      TextPairing,
+      {
+        headlineBold,
+        padding,
+        gap,
+        addOn,
+        addOnPosition,
+        headline,
+        headlineSize,
+        headlineColor: disabled ? "subtle" : bare && selected ? "highlight" : headlineColor,
+        headlineAddOn,
+        body,
+        bodySize,
+        bodyColor: disabled ? "subtle" : bodyColor,
+        grow: true,
+        shrink: false
+      }
+    );
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        Row,
+        {
+          ...otherProps,
+          ref,
+          relative: true,
+          tag: "li",
+          role: "row",
+          jss: [
+            !bare && carded && {
+              [":first-child *"]: {
+                borderTopLeftRadius: cssVar("--border-radius-l"),
+                borderTopRightRadius: cssVar("--border-radius-l")
+              },
+              [":last-child *"]: {
+                borderBottomLeftRadius: cssVar("--border-radius-l"),
+                borderBottomRightRadius: cssVar("--border-radius-l")
+              }
+            },
+            jss
+          ],
+          children: [
+            /* @__PURE__ */ jsx(
+              Row,
+              {
+                grow: true,
+                role: "gridcell",
+                jss: {
+                  overflow: "hidden"
+                },
+                children: children({ content })
+              }
+            ),
+            outerAddOn && /* @__PURE__ */ jsx(BaseView, { role: "gridcell", children: outerAddOn })
+          ]
+        }
+      ),
+      withDivider && /* @__PURE__ */ jsx(ListDivider, {})
+    ] });
+  }
+);
+function Box({
+  padding = "medium",
+  align = "center",
+  justify = "center",
+  ...otherProps
+}) {
+  return /* @__PURE__ */ jsx(
+    FlexLayout,
+    {
+      padding,
+      align,
+      justify,
+      ...otherProps
+    }
+  );
+}
+var styles4 = {
+  root: {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    " svg": {
+      height: "inherit",
+      width: "inherit"
+    }
+  },
+  xsmall: {
+    height: 8,
+    width: 8
+  },
+  small: {
+    height: 12,
+    width: 12
+  },
+  medium: {
+    height: 18,
+    width: 18
+  },
+  large: {
+    height: 24,
+    width: 24
+  },
+  xlarge: {
+    height: 32,
+    width: 32
+  },
+  xxlarge: {
+    height: 48,
+    width: 48
+  },
+  xxxlarge: {
+    height: 64,
+    width: 64
+  }
+};
+function IconProvider({ children }) {
+  return children;
+}
+function Icon({
+  icon,
+  size,
+  color,
+  ariaLabel
+}) {
+  return /* @__PURE__ */ jsx(
+    BaseView,
+    {
+      "aria-label": ariaLabel,
+      jss: [
+        styles4.root,
+        size === "xsmall" && styles4.xsmall,
+        size === "small" && styles4.small,
+        size === "medium" && styles4.medium,
+        size === "large" && styles4.large,
+        size === "xlarge" && styles4.xlarge,
+        size === "xxlarge" && styles4.xxlarge,
+        size === "xxxlarge" && styles4.xxxlarge,
+        getTextColor(color)
+      ],
+      children: /* @__PURE__ */ jsx(Icon$1, { icon, width: "100%", height: "100%" })
+    }
+  );
+}
+var Button = React34.forwardRef(
+  ({
+    children,
+    color,
+    bare,
+    disabled,
+    icon,
+    iconSize = "medium",
+    iconPosition = "left",
+    align = "center",
+    gap = "small",
+    justify = "center",
+    jss,
+    size = "medium",
+    bold,
+    padding = "medium",
+    ...otherProps
+  }, ref) => {
+    return /* @__PURE__ */ jsx(
+      BaseButton,
+      {
+        ...otherProps,
+        bare,
+        ref,
+        color,
+        disabled,
+        padding,
+        jss: [
+          {
+            borderRadius: cssVar("--border-radius-m"),
+            justifyContent: "center",
+            userSelect: "none"
+          },
+          jss
+        ],
+        children: /* @__PURE__ */ jsxs(Row, { grow: true, align, gap, justify, children: [
+          icon && iconPosition === "left" && /* @__PURE__ */ jsx(
+            Icon,
+            {
+              icon,
+              size: iconSize,
+              color: getGlyphColor(color, disabled, bare)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              bold,
+              size,
+              color: getGlyphColor(color, disabled, bare),
+              children
+            }
+          ),
+          icon && iconPosition === "right" && /* @__PURE__ */ jsx(
+            Icon,
+            {
+              icon,
+              size: iconSize,
+              color: getGlyphColor(color, disabled, bare)
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+var dateFormatter = Intl.DateTimeFormat("en-UK", {
+  weekday: "short"
+});
+var MON = dateFormatter.format(new Date(2e3, 1, 7));
+var TUE = dateFormatter.format(new Date(2e3, 1, 8));
+var WED = dateFormatter.format(new Date(2e3, 1, 9));
+var THU = dateFormatter.format(new Date(2e3, 1, 10));
+var FRI = dateFormatter.format(new Date(2e3, 1, 11));
+var SAT = dateFormatter.format(new Date(2e3, 1, 12));
+var SUN = dateFormatter.format(new Date(2e3, 1, 13));
+var Calendar = React34.forwardRef(
+  ({
+    date,
+    cell,
+    header,
+    jss
+  }, ref) => {
+    const year = date.getFullYear();
+    const month = date.getMonth();
+    const daysInMonth = new Date(year, month + 1, 0).getDate();
+    const firstDayOfTheMonth = new Date(year, month, 1).getDay();
+    const offset = firstDayOfTheMonth === 0 ? 6 : firstDayOfTheMonth - 1;
+    const headers = useMemo(() => {
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        header({ weekday: MON }),
+        header({ weekday: TUE }),
+        header({ weekday: WED }),
+        header({ weekday: THU }),
+        header({ weekday: FRI }),
+        header({ weekday: SAT }),
+        header({ weekday: SUN })
+      ] });
+    }, []);
+    return /* @__PURE__ */ jsxs(
+      BaseView,
+      {
+        ref,
+        jss: [
+          {
+            display: "grid",
+            gridTemplateColumns: "1fr 1fr 1fr 1fr 1fr 1fr 1fr",
+            gridTemplateRows: "1fr"
+          },
+          jss
+        ],
+        children: [
+          headers,
+          Array.from(Array(offset).keys()).map((index) => {
+            const dayDate = new Date(
+              date.getFullYear(),
+              date.getMonth(),
+              index + 1 - offset
+            );
+            return cloneElement(
+              cell({
+                date: dayDate,
+                today: false,
+                top: true,
+                left: index % 7 === 0,
+                outOfMonth: true,
+                right: false,
+                bottom: false
+              }),
+              { key: dayDate.toISOString() }
+            );
+          }),
+          Array.from(Array(daysInMonth).keys()).map((index) => {
+            const dayDate = new Date(
+              date.getFullYear(),
+              date.getMonth(),
+              index + 1,
+              12
+              // If we do not add this the ISO string would be from the day before at midnight
+            );
+            return cloneElement(
+              cell({
+                date: dayDate,
+                top: index + offset < 7,
+                left: (index + offset) % 7 === 0,
+                right: (index + offset) % 7 === 7 - 1 || index === daysInMonth - 1,
+                bottom: index > daysInMonth - 7 - 1,
+                outOfMonth: false,
+                today: dayDate.getDate() == (/* @__PURE__ */ new Date()).getDate() && dayDate.getMonth() == (/* @__PURE__ */ new Date()).getMonth() && dayDate.getFullYear() == (/* @__PURE__ */ new Date()).getFullYear()
+              }),
+              { key: dayDate.toISOString() }
+            );
+          })
+        ]
+      }
+    );
+  }
+);
+function Card({
+  children,
+  jss,
+  padding = "large",
+  gap = "large",
+  ...otherProps
+}) {
+  return /* @__PURE__ */ jsx(
+    FlexLayout,
+    {
+      ...otherProps,
+      padding,
+      gap,
+      jss: [
+        {
+          backgroundColor: cssVar("--overlay-background"),
+          borderRadius: cssVar("--border-radius-l"),
+          boxShadow: cssVar("--shadow-sm")
+        },
+        jss
+      ],
+      children
+    }
+  );
+}
+var styles5 = {
+  border: {
+    position: "absolute",
+    top: "var(--spacing-xs)",
+    bottom: "var(--spacing-xs)",
+    left: "var(--spacing-xs)",
+    right: "var(--spacing-xs)",
+    border: "1px solid var(--divider)",
+    borderRadius: "50%"
+  },
+  borderChecked: {
+    border: "none",
+    backgroundColor: "var(--highlight)"
+  },
+  icon: {
+    position: "absolute",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    top: "var(--spacing-xs)",
+    bottom: "var(--spacing-xs)",
+    left: "var(--spacing-xs)",
+    right: "var(--spacing-xs)"
+  }
+};
+var sizes3 = {
+  xsmall: 20,
+  small: 24,
+  medium: 32,
+  large: 40,
+  xlarge: 48
+};
+function StaticCheckbox({
+  checked,
+  size,
+  icon = "fa-check"
+}) {
+  return /* @__PURE__ */ jsxs(
+    BaseView,
+    {
+      jss: {
+        position: "relative",
+        backgroundColor: cssVar("--primary-background"),
+        overflow: "hidden",
+        padding: cssVar("--spacing-xs"),
+        borderRadius: sizes3[size] / 2,
+        height: sizes3[size],
+        width: sizes3[size]
+      },
+      children: [
+        /* @__PURE__ */ jsx(BaseView, { jss: [styles5.border, checked && styles5.borderChecked] }),
+        checked && /* @__PURE__ */ jsx(BaseView, { jss: styles5.icon, children: /* @__PURE__ */ jsx(Icon, { size, color: "light", icon }) })
+      ]
+    }
+  );
+}
+function Checkbox({
+  checked,
+  onClick,
+  size,
+  ...inputProps
+}) {
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      className: toClassnames({
+        position: "relative",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        height: sizes3[size],
+        width: sizes3[size],
+        ":has(:focus-visible)": {
+          outline: "2px solid var(--outline)",
+          borderRadius: "50%"
+        },
+        ":has(:active)": {
+          transform: "scale(0.92)"
+        }
+      }),
+      children: [
+        /* @__PURE__ */ jsx(StaticCheckbox, { checked, size }),
+        /* @__PURE__ */ jsx(
+          BaseInput,
+          {
+            ...inputProps,
+            type: "checkbox",
+            role: "checkbox",
+            "aria-checked": `${checked}`,
+            tabIndex: 0,
+            checked,
+            onChange: onClick,
+            jss: {
+              position: "absolute",
+              opacity: 0,
+              cursor: "pointer",
+              top: 0,
+              bottom: 0,
+              left: 0,
+              right: 0,
+              width: "100%",
+              height: "100%"
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+function Circle({
+  jss,
+  padding = "medium",
+  ...otherProps
+}) {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      padding,
+      jss: [
+        {
+          borderRadius: "50%",
+          overflow: "hidden"
+        },
+        jss
+      ],
+      ...otherProps
+    }
+  );
+}
+var sizes4 = {
+  xsmall: 20,
+  small: 24,
+  medium: 32,
+  large: 40,
+  xlarge: 48,
+  xxlarge: 56,
+  xxxlarge: 64
+};
+var IconButton = React34.forwardRef(
+  ({
+    icon,
+    size,
+    color,
+    bare,
+    disabled,
+    jss,
+    label,
+    labelSize = "medium",
+    ...buttonProps
+  }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      BaseButton,
+      {
+        ...buttonProps,
+        "aria-label": buttonProps["aria-label"] ?? label,
+        bare,
+        jss: [
+          {
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            height: sizes4[size],
+            width: sizes4[size],
+            borderRadius: sizes4[size] / 2
+          },
+          !disabled && {
+            ":active": {
+              transform: "scale(0.92)"
+            }
+          },
+          jss
+        ],
+        color,
+        ref,
+        disabled,
+        children: [
+          /* @__PURE__ */ jsx(
+            Icon,
+            {
+              size,
+              icon,
+              color: getGlyphColor(color, disabled, bare)
+            }
+          ),
+          label && /* @__PURE__ */ jsx(Span, { size: labelSize, color: getGlyphColor(color, disabled, bare), children: label })
+        ]
+      }
+    );
+  }
+);
+var DarkModeContext = React34.createContext({
+  enabled: false,
+  toggle: () => {
+  }
+});
+if (!isServer()) {
+  const darkMode = document.cookie.split(";").map((c) => c.trim()).filter((c) => c.startsWith("dark-mode=")).map((s) => s.split("=")[1]).map((s) => s).pop();
+  if (darkMode === "true") {
+    document.body.classList.add("dark-mode");
+  }
+}
+function DarkModeProvider({
+  children,
+  enabled,
+  toggle
+}) {
+  useEffect(() => {
+    const statusBarMeta = document.head.querySelector(
+      'meta[name="apple-mobile-web-app-status-bar-style"]'
+    );
+    const themeColorMeta = document.head.querySelector(
+      'meta[name="theme-color"]'
+    );
+    if (enabled) {
+      document.body.classList.add("dark-mode");
+      if (statusBarMeta != null) {
+        statusBarMeta.content = "black-translucent";
+      }
+      if (themeColorMeta != null) {
+        themeColorMeta.content = "rgb(42, 43, 46)";
+      }
+    } else {
+      document.body.classList.remove("dark-mode");
+      if (statusBarMeta != null) {
+        statusBarMeta.content = "default";
+      }
+      if (themeColorMeta != null) {
+        themeColorMeta.content = "rgb(239, 239, 244)";
+      }
+    }
+  }, [enabled]);
+  return /* @__PURE__ */ jsx(DarkModeContext.Provider, { value: { enabled, toggle }, children });
+}
+function DarkModeToggle() {
+  const darkMode = useContext(DarkModeContext);
+  const [show, setShow] = useState(false);
+  useEffect(() => {
+    setShow(true);
+  }, []);
+  if (!show) {
+    return /* @__PURE__ */ jsx(BaseView, { jss: { width: 32, height: 32 } });
+  }
+  return /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      "aria-label": "Toggle dark mode",
+      icon: darkMode.enabled ? "fa-sun-o" : "fa-moon-o",
+      size: "medium",
+      onClick: darkMode.toggle,
+      color: "primary",
+      bare: true
+    }
+  );
+}
+var DateInput = React34.forwardRef(
+  ({ date, onDateChange, jss, icon, addOn, ...inputProps }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      Row,
+      {
+        jss: {
+          backgroundColor: "inherit"
+        },
+        children: [
+          icon && /* @__PURE__ */ jsx(Box, { padding: "medium", children: /* @__PURE__ */ jsx(Icon, { size: "medium", color: "secondary", icon }) }),
+          /* @__PURE__ */ jsx(
+            BaseInput,
+            {
+              ...inputProps,
+              type: "date",
+              ref,
+              value: date.toISOString().substring(0, 10),
+              onChange: (e) => onDateChange(new Date(e.target.value)),
+              jss: [
+                {
+                  flexGrow: 1,
+                  backgroundColor: "inherit",
+                  color: "var(--primary-text)",
+                  outline: "none",
+                  border: "none",
+                  fontSize: 20,
+                  lineHeight: 24 / 20,
+                  "::placeholder": {
+                    color: "var(--subtle-text);"
+                  },
+                  ":disabled": {
+                    color: "var(--subtle-text);"
+                  }
+                },
+                jss
+              ]
+            }
+          ),
+          addOn
+        ]
+      }
+    );
+  }
+);
+var styles6 = {
+  dateInput: {
+    border: "1px solid var(--divider)",
+    backgroundColor: "var(--primary-background)",
+    padding: "var(--spacing-m)",
+    color: "var(--primary-text)",
+    fontSize: 20,
+    lineHeight: 24 / 20
+  }
+};
+function DatePicker({
+  id,
+  label,
+  color = "primary",
+  date,
+  onDateChange
+}) {
+  const initialDate = useRef(date);
+  const year = initialDate.current.getFullYear();
+  const month = initialDate.current.getMonth();
+  const day = initialDate.current.getDate();
+  const min = new Date(year - 1, month, day).toISOString().substring(0, 10);
+  const max = new Date(year + 1, month, day).toISOString().substring(0, 10);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("label", { htmlFor: id, children: /* @__PURE__ */ jsx(Text, { size: "small", color, children: label }) }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        min,
+        max,
+        className: toClassnames(styles6.dateInput),
+        type: "date",
+        id,
+        value: date.toISOString().substring(0, 10),
+        onChange: (event) => {
+          let parsedDate;
+          try {
+            parsedDate = new Date(event.target.value);
+          } finally {
+            if (parsedDate != null) {
+              onDateChange(parsedDate);
+            }
+          }
+        }
+      }
+    )
+  ] });
+}
+var styles7 = {
+  root: {
+    backgroundColor: "var(--primary-background)"
+  },
+  input: {
+    padding: "var(--spacing-m)",
+    flexGrow: 1,
+    backgroundColor: "var(--primary-background)",
+    color: "var(--primary-text)",
+    outline: "none",
+    border: "none",
+    fontSize: 20,
+    lineHeight: 24 / 20,
+    "::placeholder": {
+      color: "var(--subtle-text);"
+    },
+    ":disabled": {
+      color: "var(--subtle-text);"
+    }
+  }
+};
+var DatetimeInput = React34.forwardRef(
+  ({ date, onDateChange, jss, icon, addOn, ...inputProps }, ref) => {
+    return /* @__PURE__ */ jsxs(Row, { jss: styles7.root, children: [
+      icon && /* @__PURE__ */ jsx(Box, { padding: "medium", children: /* @__PURE__ */ jsx(Icon, { size: "medium", color: "secondary", icon }) }),
+      /* @__PURE__ */ jsx(
+        BaseInput,
+        {
+          ...inputProps,
+          type: "datetime-local",
+          ref,
+          value: date.toISOString().substring(0, 16),
+          onChange: (e) => onDateChange(new Date(e.target.value)),
+          jss: [styles7.input, jss]
+        }
+      ),
+      addOn
+    ] });
+  }
+);
+var styles8 = {
+  dialog: {
+    border: "1px solid var(--divider)",
+    borderRadius: "var(--border-radius-l)",
+    padding: 0,
+    boxShadow: "var(--shadow-lg)",
+    animation: "dialogFadeIn 0.2s ease-out",
+    "::backdrop": {
+      backgroundColor: "rgba(0, 0, 0, 0.4)",
+      animation: "backdropFadeIn 0.2s ease-out"
+    }
+  },
+  root: {
+    display: "grid",
+    width: "calc(100vw - 48px)",
+    gridTemplateAreas: `
+        "header"
+        "content"
+    `,
+    "@media (min-width: 750px)": {
+      maxWidth: 750
+    },
+    backgroundColor: "var(--secondary-background)"
+  },
+  header: {
+    gridArea: "header"
+  },
+  content: {
+    gridArea: "content"
+  }
+};
+var Dialog = ({
+  label,
+  children,
+  close
+}) => {
+  return /* @__PURE__ */ jsxs(BaseView, { jss: styles8.root, children: [
+    /* @__PURE__ */ jsxs(Column, { jss: styles8.header, children: [
+      /* @__PURE__ */ jsxs(Row, { padding: "medium", justify: "space-between", align: "center", children: [
+        /* @__PURE__ */ jsx(Text, { size: "medium", color: "secondary", children: label }),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            autoFocus: true,
+            bare: true,
+            icon: "fa-close",
+            size: "medium",
+            onClick: close,
+            color: "primary"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(ListDivider, {})
+    ] }),
+    /* @__PURE__ */ jsx(BaseView, { jss: styles8.content, children })
+  ] });
+};
+var DialogContext = React34.createContext({
+  setDialog: () => {
+  }
+});
+function DialogProvider({ children }) {
+  const [dialog, setDialog] = useState(null);
+  const value = useMemo(() => ({ setDialog }), []);
+  return /* @__PURE__ */ jsxs(DialogContext.Provider, { value, children: [
+    dialog,
+    children
+  ] });
+}
+function useDialog(DialogComponent, options) {
+  const { setDialog } = useContext(DialogContext);
+  const dialogRef = useRef(null);
+  const activeElementRef = useRef(null);
+  const closeRef = useRef(null);
+  closeRef.current = () => {
+    dialogRef.current && dialogRef.current.close();
+    activeElementRef.current && activeElementRef.current.focus();
+    dialogRef.current = null;
+    activeElementRef.current = null;
+    setDialog(null);
+  };
+  const open = (input) => {
+    activeElementRef.current = document.activeElement;
+    setDialog(
+      /* @__PURE__ */ jsx(
+        "dialog",
+        {
+          ref: (ref) => {
+            dialogRef.current = ref;
+            ref && ref.showModal();
+          },
+          className: toClassnames(styles8.dialog),
+          onClose: () => {
+            closeRef.current();
+          },
+          onClick: (e) => {
+            if (dialogRef.current == null) {
+              return;
+            }
+            const dialogDimensions = dialogRef.current.getBoundingClientRect();
+            if (options.closeOnOutsideClick === false) {
+              return;
+            }
+            if (e.clientX < dialogDimensions.left || e.clientX > dialogDimensions.right || e.clientY > dialogDimensions.bottom || e.clientY < dialogDimensions.top) {
+              dialogRef.current.close();
+            }
+          },
+          children: /* @__PURE__ */ jsx(DialogComponent, { ...input, close: () => closeRef.current() })
+        }
+      )
+    );
+  };
+  return {
+    open,
+    close: () => closeRef.current()
+  };
+}
+var styles9 = {
+  root: {
+    position: "relative",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "stretch",
+    flexGrow: 1
+  },
+  button: {
+    flexGrow: 1
+  },
+  dropdown: {
+    position: "absolute",
+    top: "100%",
+    left: 0,
+    right: 0,
+    borderRadius: "var(--border-radius-m)",
+    boxShadow: "var(--shadow-sm)",
+    zIndex: 1
+  }
+};
+function Dropdown({
+  id: propId,
+  label,
+  options,
+  selection,
+  setSelection,
+  jss,
+  jssButton,
+  optionLabel,
+  padding,
+  size,
+  gap = "medium"
+}) {
+  const hookId = useId();
+  const id = propId ?? hookId;
+  const triggerRef = useRef(null);
+  const [expanded, setExpanded] = useState(false);
+  const dropdownRef = useNavigation({ autofocus: true });
+  const rootRef = useRefEffect((root) => {
+    const onKeyDown = (e) => {
+      if (e.code === "Escape") {
+        setExpanded(false);
+      }
+    };
+    root.addEventListener("keydown", onKeyDown);
+    return () => root.removeEventListener("keydown", onKeyDown);
+  });
+  useEffect(() => {
+    if (!expanded) {
+      triggerRef.current && triggerRef.current.focus();
+    }
+  }, [expanded]);
+  return /* @__PURE__ */ jsxs(BaseView, { ref: rootRef, jss: [styles9.root, jss], children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        size,
+        padding,
+        "aria-expanded": expanded ? "true" : "false",
+        "aria-controls": id,
+        "aria-haspopup": "true",
+        "aria-label": label,
+        role: "combobox",
+        justify: "space-between",
+        tabIndex: 0,
+        jss: [styles9.button, jssButton],
+        color: "positive",
+        icon: "fa-chevron-down",
+        iconPosition: "right",
+        onClick: () => {
+          setExpanded((x) => !x);
+        },
+        ref: triggerRef,
+        children: optionLabel(selection)
+      }
+    ),
+    expanded && /* @__PURE__ */ jsx(
+      Column,
+      {
+        gap,
+        jss: [styles9.dropdown, getBackground("secondary-background")],
+        id,
+        role: "listbox",
+        "aria-label": label,
+        tabIndex: -1,
+        ref: dropdownRef,
+        onBlur: (e) => {
+          if (!e.currentTarget.contains(e.relatedTarget)) {
+            setExpanded(false);
+          }
+        },
+        children: Array.from(options).map((option, index) => {
+          const optionId = `${id}-${index}`;
+          const selected = option === selection;
+          return /* @__PURE__ */ jsx(
+            Button,
+            {
+              size,
+              padding,
+              justify: selected ? "space-between" : "flex-start",
+              align: "center",
+              bare: true,
+              iconPosition: "right",
+              icon: selected ? "fa-check" : void 0,
+              role: "option",
+              id: optionId,
+              "aria-selected": selected ? "true" : "false",
+              color: "positive",
+              onClick: () => {
+                setSelection(option);
+                setExpanded(false);
+              },
+              children: optionLabel(option)
+            },
+            optionId
+          );
+        })
+      }
+    )
+  ] });
+}
+
+// src/Emitter.ts
+function createEmitter() {
+  const subscriptions = /* @__PURE__ */ new Set();
+  const subscribe = (callback) => {
+    subscriptions.add(callback);
+    return () => {
+      subscriptions.delete(callback);
+    };
+  };
+  const emit = (value) => {
+    subscriptions.forEach((subscription) => {
+      subscription(value);
+    });
+  };
+  return {
+    subscribe,
+    emit
+  };
+}
+
+// src/guid.ts
+function guid() {
+  return "ID-xxxxxxxx".replace(/[xy]/g, function(c) {
+    const r = Math.random() * 16 | 0, v = c === "x" ? r : r & 3 | 8;
+    return v.toString(16);
+  });
+}
+var sizes5 = {
+  xsmall: 20,
+  small: 24,
+  medium: 32,
+  large: 40,
+  xlarge: 48
+};
+var IconLink = React34.forwardRef(
+  ({ icon, size, color, bare, disabled, jss, ...otherProps }, ref) => {
+    return /* @__PURE__ */ jsx(
+      BaseLink,
+      {
+        ...otherProps,
+        bare,
+        jss: [
+          {
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            height: sizes5[size],
+            width: sizes5[size],
+            borderRadius: sizes5[size] / 2,
+            textDecoration: "none"
+          },
+          !disabled && {
+            ":active": {
+              transform: "scale(0.92)"
+            }
+          },
+          jss
+        ],
+        color,
+        ref,
+        disabled,
+        children: /* @__PURE__ */ jsx(
+          Icon,
+          {
+            size,
+            icon,
+            color: getGlyphColor(color, disabled, bare)
+          }
+        )
+      }
+    );
+  }
+);
+var Link = React34.forwardRef(
+  ({
+    children,
+    color,
+    bare,
+    disabled,
+    icon,
+    underline,
+    iconSize = "medium",
+    iconPosition = "left",
+    align = "center",
+    gap = "small",
+    justify = "center",
+    jss,
+    size = "medium",
+    padding = "medium",
+    inline = true,
+    bold,
+    ...otherProps
+  }, ref) => {
+    return /* @__PURE__ */ jsx(
+      BaseLink,
+      {
+        ...otherProps,
+        bare,
+        ref,
+        color,
+        disabled,
+        padding,
+        jss: [
+          {
+            borderRadius: cssVar("--border-radius-m"),
+            justifyContent: "center",
+            userSelect: "none",
+            display: inline ? "inline-flex" : "flex",
+            textDecoration: "none"
+          },
+          underline && {
+            textDecorationLine: "underline",
+            textDecorationThickness: "2px",
+            textUnderlineOffset: "2px",
+            textDecorationColor: getCSSColor(color, disabled, bare)
+          },
+          jss
+        ],
+        children: /* @__PURE__ */ jsxs(
+          Row,
+          {
+            jss: {
+              display: inline ? "inline-flex" : "flex"
+            },
+            grow: true,
+            align,
+            gap,
+            justify,
+            children: [
+              icon && iconPosition === "left" && /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  icon,
+                  size: iconSize,
+                  color: getGlyphColor(color, disabled, bare)
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Text,
+                {
+                  bold,
+                  size,
+                  color: getGlyphColor(color, disabled, bare),
+                  children
+                }
+              ),
+              icon && iconPosition === "right" && /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  icon,
+                  size: iconSize,
+                  color: getGlyphColor(color, disabled, bare)
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+var ListButtonItem = React34.forwardRef(
+  ({
+    onClick,
+    color = "primary",
+    disabled = false,
+    padding = "medium",
+    jss,
+    gap,
+    selected,
+    ...otherProps
+  }, ref) => {
+    const { bare } = useListContext();
+    return /* @__PURE__ */ jsx(
+      BaseListItem,
+      {
+        withDivider: !bare,
+        disabled,
+        padding: "none",
+        gap,
+        headlineColor: getGlyphColor(color, disabled, true),
+        bodyColor: getGlyphColor(color, disabled, true),
+        selected,
+        "aria-selected": selected,
+        ...otherProps,
+        jss,
+        children: ({ content }) => /* @__PURE__ */ jsx(
+          BaseButton,
+          {
+            padding,
+            disabled,
+            animateInteraction: false,
+            bare: true,
+            color: bare ? "primary" : color,
+            ref,
+            jss: getInteractableListItemJSS({ bare, selected }),
+            onClick,
+            children: content
+          }
+        )
+      }
+    );
+  }
+);
+function ListHeaderItem({
+  highlight,
+  headline,
+  body,
+  withDivider,
+  addOn,
+  addOnPosition
+}) {
+  const { bare } = useListContext();
+  return /* @__PURE__ */ jsx(
+    BaseListItem,
+    {
+      headline,
+      headlineColor: highlight ? bare ? "highlight" : "light" : "primary",
+      headlineBold: true,
+      body,
+      addOn,
+      addOnPosition,
+      withDivider: bare ? false : withDivider,
+      jss: bare ? null : {
+        backgroundColor: highlight ? cssVar("--highlight") : cssVar("--secondary-background")
+      },
+      children: ({ content }) => content
+    }
+  );
+}
+var ListItem = React34.forwardRef(
+  (props, ref) => {
+    const { bare } = useListContext();
+    return /* @__PURE__ */ jsx(BaseListItem, { withDivider: !bare, ...props, jss: props.jss, ref, children: ({ content }) => content });
+  }
+);
+var ListLinkItem = React34.forwardRef(
+  ({
+    onClick,
+    href,
+    disabled = false,
+    padding = "medium",
+    jss,
+    gap,
+    selected,
+    color = "primary",
+    target,
+    ...otherProps
+  }, ref) => {
+    const { bare } = useListContext();
+    return /* @__PURE__ */ jsx(
+      BaseListItem,
+      {
+        withDivider: !bare,
+        disabled,
+        "aria-selected": selected,
+        padding: "none",
+        gap,
+        headlineColor: getGlyphColor(color, disabled, true),
+        bodyColor: getGlyphColor(color, disabled, true),
+        selected,
+        ...otherProps,
+        jss,
+        children: ({ content }) => /* @__PURE__ */ jsx(
+          BaseLink,
+          {
+            target,
+            padding,
+            "aria-current": selected ? "page" : void 0,
+            disabled,
+            animateInteraction: false,
+            bare: true,
+            color,
+            href,
+            ref,
+            jss: getInteractableListItemJSS({ bare, selected }),
+            onClick,
+            children: content
+          }
+        )
+      }
+    );
+  }
+);
+var styles10 = {
+  root: {
+    height: "var(--spacing-xl)",
+    backgroundColor: "var(--secondary-background)",
+    width: "100%"
+  }
+};
+function ListSpacer() {
+  return /* @__PURE__ */ jsx(BaseView, { jss: styles10.root });
+}
+function MenuIcon({ open, color }) {
+  return /* @__PURE__ */ jsxs(Column, { gap: "small", children: [
+    /* @__PURE__ */ jsx(
+      Bar,
+      {
+        color,
+        jss: {
+          transform: open ? "rotateZ(135deg)" : "",
+          transformOrigin: "center",
+          top: open ? 8 : 0
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Bar,
+      {
+        color,
+        jss: {
+          opacity: open ? 0 : 1
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Bar,
+      {
+        color,
+        jss: {
+          transform: open ? "rotateZ(-135deg)" : "",
+          transformOrigin: "center",
+          top: open ? -8 : 0
+        }
+      }
+    )
+  ] });
+}
+function Bar({ jss, color }) {
+  return /* @__PURE__ */ jsx(
+    BaseView,
+    {
+      jss: [
+        {
+          position: "relative",
+          width: 24,
+          height: 4,
+          borderRadius: "1px",
+          transition: "all 200ms ease-out"
+        },
+        getBackground(color),
+        jss
+      ]
+    }
+  );
+}
+
+// src/numberToBase.ts
+var LETTERS_26 = [
+  "a",
+  "b",
+  "c",
+  "d",
+  "e",
+  "f",
+  "g",
+  "h",
+  "i",
+  "j",
+  "k",
+  "l",
+  "m",
+  "n",
+  "o",
+  "p",
+  "q",
+  "r",
+  "s",
+  "t",
+  "u",
+  "v",
+  "w",
+  "x",
+  "y",
+  "z"
+];
+function numberToBase(number, base = LETTERS_26) {
+  if (number <= -1) {
+    return "";
+  }
+  let result = [];
+  number += 1;
+  while (number >= base.length) {
+    const index = number % base.length;
+    number = Math.floor(number / base.length) - 1;
+    result.push(base[index]);
+  }
+  result.push(base[number]);
+  return result.reverse().join("");
+}
+function OnVisible({
+  children,
+  onVisible
+}) {
+  const intersectionObserverRef = useRef(null);
+  const refCallback = useCallback((element) => {
+    if (element == null) {
+      return;
+    }
+    const intersectionObserver = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting || entry.intersectionRatio > 0) {
+            onVisible();
+          }
+        });
+      },
+      {
+        root: null,
+        rootMargin: "0px"
+      }
+    );
+    intersectionObserverRef.current = intersectionObserver;
+    intersectionObserver.observe(element);
+    return () => {
+      intersectionObserver.unobserve(element);
+      intersectionObserverRef.current = null;
+    };
+  }, []);
+  return children(refCallback);
+}
+var styles11 = {
+  popover: {
+    padding: 0,
+    zIndex: 1,
+    backgroundColor: "var(--primary-background)",
+    borderRadius: "var(--border-radius-l)",
+    border: "1px solid var(--divider)",
+    overflow: "hidden",
+    boxShadow: "var(--shadow-lg)",
+    animation: "popoverFadeIn 0.15s ease-out"
+  }
+};
+function Popover({ children, close }) {
+  const activeElementRef = useRef(null);
+  const focusTrapRoot = useRefEffect((root) => {
+    activeElementRef.current = document.activeElement;
+    const [element] = queryFocusables(root);
+    element ? element.focus() : root.focus();
+    const keydown = (e) => {
+      if (e.key === "Escape") {
+        close();
+      } else if (e.key === "Tab") {
+        const focusables = queryFocusables(root).filter(
+          (element2) => element2.tabIndex !== -1
+        );
+        if (focusables.length === 0) {
+          e.stopPropagation();
+          e.preventDefault();
+        }
+        const focusedIndex = focusables.findIndex(
+          (x) => x === document.activeElement
+        );
+        if (focusables.length === 0) {
+          e.stopPropagation();
+          e.preventDefault();
+        } else if (focusedIndex === focusables.length - 1) {
+          focusables[0].focus();
+          e.stopPropagation();
+          e.preventDefault();
+        } else ;
+      }
+    };
+    const click = () => {
+      close();
+    };
+    setTimeout(() => {
+      window.addEventListener("keydown", keydown);
+      window.addEventListener("click", click);
+    }, 0);
+    return () => {
+      activeElementRef.current && activeElementRef.current.focus();
+      window.removeEventListener("keydown", keydown);
+      window.removeEventListener("click", click);
+    };
+  });
+  return /* @__PURE__ */ jsx(BaseView, { ref: focusTrapRoot, children });
+}
+function PopoverTrigger({
+  PopoverComponent,
+  jss,
+  jssDialog,
+  grow,
+  shrink,
+  tag,
+  children
+}) {
+  const [popover, setPopover] = useState(null);
+  const dialogRef = useRef(null);
+  const toggle = (input) => {
+    if (popover == null) {
+      dialogRef && dialogRef.current.show();
+      setPopover(
+        /* @__PURE__ */ jsx(
+          PopoverComponent,
+          {
+            ...input,
+            close: () => {
+              dialogRef && dialogRef.current.close();
+            }
+          }
+        )
+      );
+    } else {
+      dialogRef && dialogRef.current.close();
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    BaseView,
+    {
+      grow,
+      shrink,
+      tag,
+      relative: true,
+      jss: [jss, { position: "relative", display: "inline-block" }],
+      children: [
+        children({ toggle }),
+        /* @__PURE__ */ jsx(
+          "dialog",
+          {
+            ref: (ref) => {
+              dialogRef.current = ref;
+            },
+            className: toClassnames([styles11.popover, jssDialog]),
+            onClose: () => {
+              setPopover(null);
+            },
+            onClick: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+            },
+            children: popover
+          }
+        )
+      ]
+    }
+  );
+}
+var styles12 = {
+  root: {
+    width: "100%",
+    display: "flex",
+    position: "relative",
+    backgroundColor: "var(--primary-background)",
+    borderRadius: "var(--border-radius-s)",
+    border: "1px solid var(--divider)",
+    overflow: "hidden"
+  },
+  fill: {
+    borderRadius: "var(--border-radius-s)",
+    position: "absolute",
+    transformOrigin: "center left",
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0
+  }
+};
+var sizes6 = {
+  xsmall: 4,
+  small: 8,
+  medium: 12,
+  large: 16,
+  xlarge: 20
+};
+function ProgressBar({
+  color,
+  progress,
+  size,
+  jss
+}) {
+  return /* @__PURE__ */ jsx(
+    BaseView,
+    {
+      jss: [
+        styles12.root,
+        {
+          height: sizes6[size]
+        },
+        jss
+      ],
+      children: /* @__PURE__ */ jsx(
+        BaseView,
+        {
+          jss: [styles12.fill, getBackground(color)],
+          style: {
+            transform: `scaleX(${progress > 1 ? 1 : progress})`
+          }
+        }
+      )
+    }
+  );
+}
+function ProgressCircle({
+  progress,
+  stroke = 4,
+  outerRadius
+}) {
+  const circumference = outerRadius * 2 * Math.PI;
+  const strokeDashoffset = circumference - progress * circumference;
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: toClassnames({
+        backgroundColor: cssVar("--secondary-background"),
+        transform: "rotate(-90deg)",
+        borderRadius: "50%"
+      }),
+      width: (outerRadius + stroke) * 2,
+      height: (outerRadius + stroke) * 2,
+      children: /* @__PURE__ */ jsx(
+        "circle",
+        {
+          stroke: "var(--highlight)",
+          fill: "transparent",
+          strokeWidth: stroke,
+          strokeDasharray: `${circumference} ${circumference}`,
+          style: { strokeDashoffset },
+          r: outerRadius,
+          cx: outerRadius + stroke,
+          cy: outerRadius + stroke
+        }
+      )
+    }
+  );
+}
+function hasCookie(key) {
+  return document.cookie.split(";").map((c) => c.trim()).filter((c) => c.startsWith(`${key}=`)).length > 0;
+}
+function getCookie(key, deserialize = JSON.parse) {
+  return document.cookie.split(";").map((c) => c.trim()).filter((c) => c.startsWith(`${key}=`)).map((s) => s.split("=")[1]).map((s) => deserialize(s)).reverse().pop();
+}
+function useCookie(key, {
+  initialValue = null,
+  loadingValue,
+  serialize = JSON.stringify,
+  deserialize = JSON.parse,
+  maxAge = 60 * 60 * 24 * 365
+}) {
+  const initializationRef = useRef(false);
+  const [cookie, setCookie] = useState(() => {
+    if (!isServer()) {
+      const hasPersistedCookie = hasCookie(key);
+      if (hasPersistedCookie) {
+        return getCookie(key, deserialize);
+      } else {
+        return loadingValue;
+      }
+    }
+    return loadingValue;
+  });
+  useEffect(() => {
+    if (initializationRef.current === true) {
+      return;
+    }
+    const hasPersistedCookie = hasCookie(key);
+    if (hasPersistedCookie) {
+      const persistedCookie = getCookie(key, deserialize);
+      setCookie(persistedCookie);
+    } else {
+      document.cookie = `${key}=${serialize(
+        initialValue
+      )}; max-age=${maxAge};path=/;`;
+      setCookie(initialValue);
+    }
+    initializationRef.current = true;
+  }, []);
+  return [
+    cookie,
+    useCallback((t) => {
+      if (typeof t === "function") {
+        const callback = t;
+        setCookie((oldCookie) => {
+          const newValue = callback(oldCookie);
+          document.cookie = `${key}=${serialize(
+            newValue
+          )}; max-age=${maxAge};path=/;`;
+          return newValue;
+        });
+      } else {
+        setCookie(t);
+        document.cookie = `${key}=${serialize(t)}; max-age=${maxAge};path=/;`;
+      }
+    }, [])
+  ];
+}
+function Providers({
+  children,
+  themes
+}) {
+  const [darkModeEnabled, setDarkModeEnabled] = useCookie("dark-mode", {
+    initialValue: false,
+    loadingValue: false
+  });
+  const toggleDarkMode = React34.useCallback(
+    () => setDarkModeEnabled((x) => !x),
+    []
+  );
+  return /* @__PURE__ */ jsx(JSSProvider, { themes, children: /* @__PURE__ */ jsx(IconProvider, { children: /* @__PURE__ */ jsx(DarkModeProvider, { enabled: darkModeEnabled, toggle: toggleDarkMode, children: /* @__PURE__ */ jsx(DialogProvider, { children }) }) }) });
+}
+var RangeInput = React34.forwardRef(
+  ({
+    value,
+    onValueChange,
+    jssRoot,
+    jss,
+    gap = "medium",
+    padding = "none",
+    min = 0,
+    max = 100,
+    step = 1,
+    label,
+    addOn,
+    addOnPosition = "start",
+    ...inputProps
+  }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      Row,
+      {
+        gap,
+        padding,
+        align: "center",
+        jss: [
+          {
+            ":has(:focus-visible)": {
+              borderRadius: cssVar("--border-radius-m"),
+              backgroundColor: cssVar("--light-highlight")
+            }
+          },
+          jssRoot
+        ],
+        children: [
+          addOnPosition === "start" && addOn,
+          /* @__PURE__ */ jsx(
+            BaseInput,
+            {
+              ...inputProps,
+              label,
+              min,
+              max,
+              type: "range",
+              ref,
+              value,
+              onChange: (e) => {
+                onValueChange(parseFloat(e.target.value));
+              },
+              jss: [
+                {
+                  backgroundColor: cssVar("--primary-background"),
+                  flexGrow: 1,
+                  color: cssVar("--primary-text"),
+                  margin: 0,
+                  paddingTop: cssVar("--spacing-m"),
+                  paddingBottom: cssVar("--spacing-m"),
+                  ":disabled": {
+                    color: cssVar("--subtle-text")
+                  }
+                },
+                jss
+              ]
+            }
+          ),
+          addOnPosition === "end" && addOn
+        ]
+      }
+    );
+  }
+);
+var StackContext = React34.createContext({
+  subscribe: () => {
+    return () => {
+    };
+  }
+});
+function StackContextProvider({ children, isTopOfStack }) {
+  const emitterRef = useRef(createEmitter());
+  useEffect(() => {
+    emitterRef.current.emit(isTopOfStack);
+  }, [isTopOfStack]);
+  const value = useMemo(
+    () => ({ subscribe: emitterRef.current.subscribe }),
+    []
+  );
+  return /* @__PURE__ */ jsx(StackContext.Provider, { value, children });
+}
+function useIsTopOfStack() {
+  const [isTopOfStack, setIsTopOfStack] = useState(true);
+  const { subscribe } = useContext(StackContext);
+  useEffect(() => {
+    return subscribe(setIsTopOfStack);
+  }, [subscribe]);
+  return isTopOfStack;
+}
+function RootView({
+  children,
+  focusOnlyOnFirstMount = true
+}) {
+  const isTopOfStack = useIsTopOfStack();
+  const firstMountRef = useRef(true);
+  const refCallback = useCallback(
+    (element) => {
+      if (!element) {
+        return;
+      }
+      if (!isTopOfStack) {
+        return;
+      }
+      if (focusOnlyOnFirstMount && !firstMountRef.current) {
+        return;
+      }
+      const focusables = queryFocusables(element);
+      const firstFocusable = focusables[0];
+      firstMountRef.current = false;
+      firstFocusable && firstFocusable.focus();
+    },
+    [isTopOfStack, focusOnlyOnFirstMount]
+  );
+  return /* @__PURE__ */ jsx(
+    Column,
+    {
+      ref: refCallback,
+      jss: {
+        marginBottom: 0,
+        flexGrow: 1,
+        flexShrink: 1,
+        flexBasis: "0%",
+        overflow: "auto",
+        backgroundColor: cssVar("--secondary-background"),
+        minHeight: "600px"
+      },
+      children
+    }
+  );
+}
+var Select = forwardRef(
+  ({ jss, children, onValueChange, value, ...otherProps }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "select",
+      {
+        ref,
+        className: toClassnames([
+          {
+            fontSize: 20,
+            border: `1px solid ${cssVar("--divider")}`,
+            backgroundColor: cssVar("--overlay-background"),
+            borderRadius: cssVar("--border-radius-m")
+          },
+          jss
+        ]),
+        value,
+        onChange: (e) => {
+          onValueChange(e.target.value);
+        },
+        ...otherProps,
+        children
+      }
+    );
+  }
+);
+function stateMachineContextFactory(stateMachineConfig) {
+  const StateMachineContext = React34.createContext({
+    subscribe: () => {
+      throw new Error("Not implemented");
+    },
+    send: (_) => {
+      throw new Error("Not implemented");
+    }
+  });
+  function Provider({ children }) {
+    const stateMachineRef = useRef({
+      state: stateMachineConfig.state,
+      context: stateMachineConfig.context
+    });
+    const emitterRef = useRef(
+      createEmitter()
+    );
+    const subscribe = useCallback((callback) => {
+      const unsbuscribe = emitterRef.current.subscribe(callback);
+      callback(stateMachineRef.current);
+      return unsbuscribe;
+    }, []);
+    const send = useCallback(
+      (transition, data) => {
+        const state = stateMachineRef.current.state;
+        const transitions = stateMachineConfig.states[state].on;
+        const reducer = transitions[transition];
+        if (!reducer) {
+          return;
+        }
+        const newState = reducer({
+          ...stateMachineRef.current,
+          data
+        });
+        stateMachineRef.current = newState;
+        emitterRef.current.emit(newState);
+      },
+      []
+    );
+    const value = useMemo(() => ({ subscribe, send }), [subscribe, send]);
+    return /* @__PURE__ */ jsx(StateMachineContext.Provider, { value, children });
+  }
+  function useStateMachine() {
+    return useContext(StateMachineContext);
+  }
+  return { Provider, useStateMachine };
+}
+var VERSION = 1;
+function createStorage({
+  initialState,
+  name = "aidos-storage"
+}) {
+  const StorageContext = createContext({
+    subscribe: () => {
+      throw new Error("Not implemented");
+    },
+    mutate: () => {
+      throw new Error("Not implemented");
+    },
+    persist: () => {
+      throw new Error("Not implemented");
+    }
+  });
+  const state = { current: initialState };
+  function Storage({ children }) {
+    const emitterRef = useRef(createEmitter());
+    const subscribe = useCallback((callback) => {
+      return emitterRef.current.subscribe(callback);
+    }, []);
+    const mutate = useCallback((mutator) => {
+      state.current = mutator(state.current);
+      emitterRef.current.emit(state.current);
+    }, []);
+    const persist = useCallback(async () => {
+      const s = JSON.stringify(state.current);
+      const bytes = new TextEncoder().encode(s);
+      const blob = new Blob([bytes], {
+        type: "application/json;charset=utf-8"
+      });
+      return saveBlob(blob);
+    }, []);
+    useEffect(() => {
+      getBlob().then((blob) => {
+        if (blob == null) {
+          return;
+        }
+        const fr = new FileReader();
+        fr.onload = (event) => {
+          const text = event.target.result.toString();
+          state.current = JSON.parse(text);
+          emitterRef.current.emit(state.current);
+        };
+        fr.onerror = (error) => {
+        };
+        fr.readAsText(blob);
+      });
+    }, []);
+    return /* @__PURE__ */ jsx(
+      StorageContext.Provider,
+      {
+        value: {
+          subscribe,
+          mutate,
+          persist
+        },
+        children
+      }
+    );
+  }
+  function useStorage(selector) {
+    const [localState, setLocalState] = useState(() => selector(state.current));
+    const { subscribe } = React34.useContext(StorageContext);
+    useEffect(() => {
+      return subscribe((newState) => {
+        const newLocalState = selector(newState);
+        setLocalState((prev) => newLocalState != prev ? newLocalState : prev);
+      });
+    }, []);
+    return localState;
+  }
+  function useMutation() {
+    const { mutate } = React34.useContext(StorageContext);
+    return mutate;
+  }
+  function usePersist() {
+    const { persist } = React34.useContext(StorageContext);
+    return persist;
+  }
+  const dbPromise = new Promise((resolve, reject) => {
+    const request = window.indexedDB.open(name, VERSION);
+    request.onerror = (event) => {
+      reject(event);
+    };
+    request.onupgradeneeded = (event) => {
+      const db = event.target.result;
+      const table = db.createObjectStore("blobs", {
+        keyPath: "key"
+      });
+      table.createIndex("key", "key", { unique: true });
+    };
+    request.onsuccess = (event) => {
+      const db = event.target.result;
+      resolve(db);
+    };
+  });
+  const getBlob = async () => {
+    const db = await dbPromise;
+    return new Promise((resolve, reject) => {
+      const transaction = db.transaction(["blobs"]);
+      const objectStore = transaction.objectStore("blobs");
+      const get = objectStore.get(1);
+      transaction.onerror = (event) => {
+        db.close();
+        reject(event);
+      };
+      get.onsuccess = (event) => {
+        const result = event.target.result;
+        if (result && result.blob) {
+          resolve(result.blob);
+        } else {
+          resolve(null);
+        }
+        db.close();
+      };
+      get.onerror = (event) => {
+        reject(event);
+      };
+    });
+  };
+  const saveBlob = async (blob) => {
+    const db = await dbPromise;
+    return new Promise((resolve, reject) => {
+      const transaction = db.transaction(["blobs"], "readwrite");
+      transaction.oncomplete = () => {
+        db.close();
+        resolve();
+      };
+      transaction.onerror = (event) => {
+        db.close();
+        reject(event);
+      };
+      const objectStore = transaction.objectStore("blobs");
+      objectStore.put({ blob, key: 1 });
+    });
+  };
+  return {
+    Storage,
+    useStorage,
+    useMutation,
+    usePersist
+  };
+}
+var useStream = ({
+  render,
+  bufferStart,
+  bufferEnd,
+  index,
+  debounce = 100
+}) => {
+  const cache = useRef({
+    [index]: render(index)
+  });
+  const [frame, setFrame] = useState(cache.current[index]);
+  const timeout = useRef(null);
+  useEffect(() => {
+    clearTimeout(timeout.current);
+    const subscriptions = [];
+    timeout.current = setTimeout(() => {
+      for (let i = index - bufferStart; i < index + bufferEnd; i++) {
+        subscriptions.push(
+          requestIdleCallback(() => {
+            if (!(i in cache.current)) {
+              cache.current[i] = render(i);
+              if (i === index) {
+                setFrame(cache.current[index]);
+              }
+            }
+          })
+        );
+      }
+      startTransition(() => {
+        setFrame(cache.current[index]);
+      });
+    }, debounce);
+    return () => {
+      subscriptions.forEach((handle) => {
+        cancelIdleCallback(handle);
+      });
+    };
+  }, [index]);
+  return {
+    frame
+  };
+};
+function Sublist({
+  children,
+  label,
+  labelBold,
+  initialState = { collapsed: false },
+  jss,
+  secondaryAddOn
+}) {
+  const [collapsed, setCollapsed] = React34.useState(initialState.collapsed);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      ListButtonItem,
+      {
+        headline: label,
+        headlineBold: labelBold,
+        onClick: () => setCollapsed((x) => !x),
+        jss,
+        addOn: /* @__PURE__ */ jsxs(Row, { gap: "medium", align: "center", children: [
+          secondaryAddOn,
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              padding: "medium",
+              jss: [
+                {
+                  transition: "transform 0.15s ease-in"
+                },
+                !collapsed && {
+                  transform: "rotateZ(90deg)"
+                }
+              ],
+              children: /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  color: "primary",
+                  size: "medium",
+                  icon: "fa-solid:chevron-right"
+                }
+              )
+            }
+          )
+        ] }),
+        addOnPosition: "end",
+        color: "primary"
+      }
+    ),
+    collapsed ? null : children
+  ] });
+}
+function SubmitIconInput({ icon, ...otherProps }) {
+  return /* @__PURE__ */ jsx(
+    BaseInput,
+    {
+      label: /* @__PURE__ */ jsx(
+        Box,
+        {
+          jss: {
+            cursor: "pointer",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            ":hover": {
+              backgroundColor: "var(--secondary-background)",
+              opacity: 0.8
+            },
+            ":active": {
+              transform: "scale(0.92)"
+            },
+            height: 32,
+            width: 32,
+            borderRadius: 16
+          },
+          children: /* @__PURE__ */ jsx(Icon, { icon, size: "medium", color: "primary" })
+        }
+      ),
+      ...otherProps,
+      type: "submit",
+      jss: {
+        visibility: "hidden"
+      },
+      value: ""
+    }
+  );
+}
+function Tabs({
+  tabs,
+  gap = "none",
+  padding = "none",
+  tabPadding = "medium",
+  labelSize = "large",
+  jss,
+  jssTab,
+  labelRenderer,
+  ["aria-controls"]: ariaControls,
+  ...otherProps
+}) {
+  const root = useNavigation();
+  return /* @__PURE__ */ jsx(
+    Row,
+    {
+      role: "tablist",
+      jss,
+      gap,
+      padding,
+      ref: root,
+      ...otherProps,
+      children: tabs.map(
+        ({
+          label,
+          href,
+          onClick,
+          selected,
+          addOn,
+          addOnPosition = "start"
+        }) => {
+          const BaseComponent = href != null ? BaseLink : BaseButton;
+          return /* @__PURE__ */ jsxs(
+            BaseComponent,
+            {
+              "aria-controls": ariaControls,
+              role: "tab",
+              "aria-selected": selected ? "true" : void 0,
+              bare: true,
+              color: selected ? "positive" : "primary",
+              href,
+              onClick,
+              animateInteraction: false,
+              jss: [
+                {
+                  textDecoration: "none",
+                  borderBottom: selected ? `3px solid ${cssVar("--highlight")}` : `3px solid transparent`,
+                  ":active span": {
+                    transform: "scale(0.97)"
+                  },
+                  ":first-child": {
+                    borderTopLeftRadius: cssVar("--border-radius-m")
+                  },
+                  ":last-child": {
+                    borderTopRightRadius: cssVar("--border-radius-m")
+                  },
+                  ":hover": {
+                    backgroundColor: cssVar("--hovered-background")
+                  },
+                  ":active:hover": {
+                    backgroundColor: cssVar("--pressed-background")
+                  }
+                },
+                getPadding(tabPadding),
+                typeof jssTab === "function" ? jssTab({ selected }) : jssTab
+              ],
+              children: [
+                addOnPosition === "start" && addOn,
+                /* @__PURE__ */ jsx(Text, { size: labelSize, color: selected ? "primary" : "secondary", children: labelRenderer ? labelRenderer(label) : label }),
+                addOnPosition === "end" && addOn
+              ]
+            },
+            label
+          );
+        }
+      )
+    }
+  );
+}
+var TextArea = React34.forwardRef(
+  ({
+    jss,
+    onValueChange,
+    value,
+    onChange,
+    padding = "medium",
+    ...otherProps
+  }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ...otherProps,
+        ref,
+        className: toClassnames([
+          {
+            flexGrow: 1,
+            color: cssVar("--primary-text"),
+            outline: "none",
+            fontSize: 20,
+            lineHeight: 24 / 20,
+            backgroundColor: cssVar("--overlay-background"),
+            border: `1px solid ${cssVar("--divider")}`,
+            borderRadius: cssVar("--border-radius-m"),
+            "::placeholder": {
+              color: cssVar("--subtle-text")
+            },
+            ":focus-visible": {
+              outline: `2px solid ${cssVar("--highlight")}`,
+              outlineOffset: -2
+            }
+          },
+          getPadding(padding),
+          jss
+        ]),
+        value,
+        onChange: onValueChange ? (e) => onValueChange(e.target.value) : void 0
+      }
+    );
+  }
+);
+var fontSize2 = {
+  xsmall: cssVar("--font-xsmall"),
+  small: cssVar("--font-small"),
+  medium: cssVar("--font-medium"),
+  large: cssVar("--font-large"),
+  xlarge: cssVar("--font-xlarge"),
+  xxlarge: cssVar("--font-xxlarge"),
+  xxxlarge: cssVar("--font-xxxlarge")
+};
+var TextInput = React34.forwardRef(
+  ({
+    value,
+    onValueChange,
+    jssRoot,
+    jss,
+    addOn,
+    gap = "small",
+    addOnPosition = "start",
+    padding = "medium",
+    bare,
+    size = "medium",
+    ...inputProps
+  }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      Row,
+      {
+        gap,
+        jss: [
+          {
+            borderRadius: cssVar("--border-radius-m"),
+            overflow: "hidden"
+          },
+          bare ? {
+            backgroundColor: "inherit",
+            ":has(:focus-visible)": {
+              backgroundColor: cssVar("--light-highlight")
+            }
+          } : {
+            border: `1px solid ${cssVar("--divider")}`,
+            backgroundColor: cssVar("--overlay-background"),
+            ":has(:focus-visible)": {
+              outline: `2px solid ${cssVar("--highlight")}`,
+              outlineOffset: -2
+            }
+          },
+          jssRoot
+        ],
+        children: [
+          addOnPosition === "start" && addOn && /* @__PURE__ */ jsx(
+            Column,
+            {
+              justify: "center",
+              align: "center",
+              jss: [getPadding(padding), { paddingRight: 0 }],
+              children: addOn
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            BaseInput,
+            {
+              ...inputProps,
+              ref,
+              value,
+              onChange: onValueChange ? (e) => onValueChange(e.target.value) : void 0,
+              jss: [
+                {
+                  minWidth: 0,
+                  flexGrow: 1,
+                  backgroundColor: "inherit",
+                  color: cssVar("--primary-text"),
+                  outline: "none",
+                  border: "none",
+                  fontSize: fontSize2[size],
+                  lineHeight: 1.2,
+                  "::placeholder": {
+                    color: cssVar("--subtle-text")
+                  },
+                  ":disabled": {
+                    color: cssVar("--subtle-text")
+                  }
+                },
+                getPadding(padding),
+                addOn && addOnPosition === "start" ? { paddingLeft: 0 } : null,
+                addOn && addOnPosition === "end" ? { paddingRight: 0 } : null,
+                jss
+              ]
+            }
+          ),
+          addOnPosition === "end" && addOn && /* @__PURE__ */ jsx(
+            Column,
+            {
+              justify: "center",
+              align: "center",
+              jss: [getPadding(padding), { paddingLeft: 0 }],
+              children: addOn
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+function TextInputWithState({
+  valueRef,
+  onValueChange: externalOnChange,
+  ...otherProps
+}) {
+  const [value, setValue] = useState(valueRef.current);
+  const onValueChange = useCallback(
+    (value2) => {
+      valueRef.current = value2;
+      setValue(value2);
+      externalOnChange && externalOnChange(value2);
+    },
+    [setValue, externalOnChange, valueRef]
+  );
+  return /* @__PURE__ */ jsx(TextInput, { ...otherProps, value, onValueChange });
+}
+var timeFormatter = Intl.DateTimeFormat("en-UK", {
+  hour: "2-digit",
+  minute: "2-digit"
+});
+function TimeInputInternal({
+  time: date,
+  onTimeChange: onDateChange,
+  jss,
+  addOn,
+  padding = "small",
+  gap = "none",
+  addOnPosition = "start",
+  bare,
+  ...inputProps
+}, ref) {
+  return /* @__PURE__ */ jsxs(
+    Row,
+    {
+      padding,
+      gap,
+      align: "center",
+      jss: [
+        {
+          borderRadius: cssVar("--border-radius-m"),
+          overflow: "hidden"
+        },
+        bare ? {
+          backgroundColor: "inherit",
+          ":has(:focus-visible)": {
+            backgroundColor: cssVar("--light-highlight")
+          }
+        } : {
+          border: `1px solid ${cssVar("--divider")}`,
+          backgroundColor: cssVar("--overlay-background"),
+          ":has(:focus-visible)": {
+            outline: `2px solid ${cssVar("--highlight")}`,
+            outlineOffset: -2
+          }
+        }
+      ],
+      children: [
+        addOnPosition === "start" && addOn,
+        /* @__PURE__ */ jsx(
+          BaseInput,
+          {
+            ...inputProps,
+            type: "time",
+            ref,
+            value: timeFormatter.format(date),
+            onChange: (e) => {
+              const value = e.target.value;
+              const [hour, minute] = value.split(":");
+              onDateChange(
+                new Date(
+                  date.getFullYear(),
+                  date.getMonth(),
+                  date.getDate(),
+                  parseInt(hour),
+                  parseInt(minute)
+                )
+              );
+            },
+            jss: [
+              {
+                flexGrow: 1,
+                backgroundColor: "inherit",
+                color: "var(--primary-text)",
+                outline: "none",
+                border: "none",
+                fontSize: 20,
+                lineHeight: 24 / 20,
+                "::placeholder": {
+                  color: "var(--subtle-text);"
+                },
+                ":disabled": {
+                  color: "var(--subtle-text);"
+                },
+                "::-webkit-calendar-picker-indicator": {
+                  backgroundColor: "none"
+                }
+              },
+              jss
+            ]
+          }
+        ),
+        addOnPosition === "end" && addOn
+      ]
+    }
+  );
+}
+var TimeInput = React34.forwardRef(TimeInputInternal);
+var styles13 = {
+  tooltip: {
+    top: "-100%",
+    transform: "translateY(50%)",
+    backgroundColor: cssVar("--primary-background"),
+    padding: `${cssVar("--spacing-s")} ${cssVar("--spacing-m")}`,
+    borderRadius: cssVar("--border-radius-m"),
+    border: `1px solid ${cssVar("--divider")}`,
+    boxShadow: cssVar("--shadow-md"),
+    overflow: "hidden",
+    animation: "popoverFadeIn 0.15s ease-out"
+  }
+};
+function Tooltip({ content, jss, tag, children }) {
+  const [tooltip, setTooltip] = useState(null);
+  const dialogRef = useRef(null);
+  const focusTrapRoot = useRefEffect((root) => {
+    dialogRef.current = root;
+    const keydown = (e) => {
+      if (e.key === "Escape") {
+        dialogRef.current?.close();
+      } else if (e.key === "Tab") {
+        dialogRef.current?.close();
+      }
+    };
+    const click = () => {
+      dialogRef.current?.close();
+    };
+    window.addEventListener("keydown", keydown);
+    window.addEventListener("click", click);
+    const activeElement = document.activeElement;
+    root.show();
+    activeElement.focus();
+    return () => {
+      window.removeEventListener("keydown", keydown);
+      window.removeEventListener("click", click);
+    };
+  });
+  const toggle = () => {
+    if (tooltip == null) {
+      setTooltip(
+        /* @__PURE__ */ jsx(
+          "dialog",
+          {
+            ref: (ref) => {
+              dialogRef.current = ref;
+              focusTrapRoot(ref);
+            },
+            className: toClassnames(styles13.tooltip),
+            onClose: () => {
+              setTooltip(null);
+            },
+            onClick: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+            },
+            children: /* @__PURE__ */ jsx(Text, { size: "medium", color: "secondary", children: content })
+          }
+        )
+      );
+    } else {
+      setTooltip(null);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    BaseView,
+    {
+      tag,
+      relative: true,
+      jss: [{ display: "inline-block" }, jss],
+      onMouseEnter: () => {
+        if (tooltip == null) {
+          toggle();
+        }
+      },
+      onMouseLeave: () => {
+        if (tooltip != null) {
+          toggle();
+        }
+      },
+      children: [
+        children,
+        tooltip
+      ]
+    }
+  );
+}
+
+// src/useKeyboard.tsx
+function useKeyboard(shortcuts) {
+  return useRefEffect((root) => {
+    const onKeyDown = (e) => {
+      for (const {
+        metaKey,
+        key,
+        action,
+        ctrlKey,
+        onlyWhenFocused
+      } of shortcuts) {
+        if (metaKey && e.metaKey !== true) {
+          continue;
+        } else if (ctrlKey && e.ctrlKey !== true) {
+          continue;
+        } else if (onlyWhenFocused && document.activeElement !== root) {
+          continue;
+        }
+        if (e.key.toLowerCase() === key.toLowerCase()) {
+          action(root);
+        }
+      }
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => {
+      window.removeEventListener("keydown", onKeyDown);
+    };
+  });
+}
+function usePromise(promiseFactory, inputs, initialValue) {
+  const [value, setValue] = useState(initialValue);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    promiseFactory().then((value2) => setValue(value2)).catch((error2) => setError(error2));
+  }, inputs);
+  return [value, error];
+}
+
+export { Badge, BaseButton, BaseInput, BaseLink, BaseLinkComponentOverrideContext, BaseList, BaseListAddOn, BaseListItem, BaseView, Box, Button, Calendar, Card, Checkbox, Circle, Column, DESKTOP_MEDIA, DarkModeContext, DarkModeProvider, DarkModeToggle, DateInput, DatePicker, DatetimeInput, Dialog, DialogProvider, Dropdown, FlexLayout, H1, H2, H3, Icon, IconButton, IconLink, IconProvider, JSSProvider, JSServerStyles, LAPTOP, LAPTOP_MEDIA, Label, Li, Link, List, ListButtonItem, ListDivider, ListHeaderItem, ListItem, ListLinkItem, ListSpacer, MOBILE, MOBILE_MEDIA, MenuIcon, OnVisible, P, Popover, PopoverTrigger, ProgressBar, ProgressCircle, Providers, RangeInput, RootView, Row, Select, Span, StackContextProvider, StaticCheckbox, Sublist, SubmitIconInput, TABLET, TABLET_MEDIA, Tabs, Text, TextArea, TextInput, TextInputWithState, TextPairing, TimeInput, Tooltip, baseStyles, createEmitter, createStorage, cssVar, darkTheme, desktop, getBackground, getBaseStyles, getCookie, getMargin, getPadding, getSize, getSpacing, getTextColor, guid, hasCookie, hash, laptop, lightTheme, mobile, numberToBase, sizes3 as sizes, stateMachineContextFactory, tablet, timeFormatter, toClassnames, useCookie, useDialog, useIsTopOfStack, useKeyboard, useListContext, useNavigation, usePromise, useRefEffect, useStream };
+//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map